layout/base/tests/test_emulateMedium.html@6474c204b198
layout/base/tests/test_emulateMedium.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=819930
5 -->
6 <head>
7 <meta charset="utf-8">
8 <title>Test for Bug 819930</title>
9 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
10 <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
12 <style>
13 @media braille {
14 body {
15 background-color: rgb(255, 255, 0);
16 }
17 }
19 @media embossed {
20 body {
21 background-color: rgb(210, 180, 140);
22 }
23 }
25 @media handheld {
26 body {
27 background-color: rgb(0, 255, 0);
28 }
29 }
31 @media print {
32 body {
33 background-color: rgb(0, 255, 255);
34 }
35 }
37 @media projection {
38 body {
39 background-color: rgb(30, 144, 255);
40 }
41 }
43 @media screen {
44 body {
45 background-color: green;
46 }
47 }
49 @media speech {
50 body {
51 background-color: rgb(192, 192, 192);
52 }
53 }
55 @media tty {
56 body {
57 background-color: rgb(255, 192, 203);
58 }
59 }
61 @media tv {
62 body {
63 background-color: rgb(75, 0, 130);
64 }
65 }
66 </style>
67 </head>
68 <body>
69 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=819930">Mozilla Bug 819930</a>
70 <p id="display"></p>
72 <div id="content" style="display: none"></div>
73 <pre id="test">
74 <script type="application/javascript;version=1.7">
75 let tests = [{name: 'braille', value: 'rgb(255, 255, 0)'},
76 {name: 'embossed', value: 'rgb(210, 180, 140)'},
77 {name: 'handheld', value: 'rgb(0, 255, 0)'},
78 {name: 'print', value: 'rgb(0, 255, 255)'},
79 {name: 'projection', value: 'rgb(30, 144, 255)'},
80 {name: 'speech', value: 'rgb(192, 192, 192)'},
81 {name: 'tty', value: 'rgb(255, 192, 203)'},
82 {name: 'tv', value: 'rgb(75, 0, 130)'}];
84 let originalColor = 'rgb(0, 128, 0)';
85 let body = document.body;
87 let getColor = function() {
88 return window.getComputedStyle(body)
89 .getPropertyValue('background-color');
90 };
92 tests.forEach(function(test) {
93 // Emulate the given media
94 SpecialPowers.emulateMedium(window, test.name);
95 is(getColor(), test.value, 'emulating ' + test.name + ' produced ' +
96 'correct rendering');
98 // Do the @media screen rules get applied after ending the emulation?
99 SpecialPowers.stopEmulatingMedium(window);
100 is(getColor(), originalColor, 'Ending ' + test.name +
101 ' emulation restores style for original medium');
103 // CSS media types are case-insensitive; we should be too.
104 SpecialPowers.emulateMedium(window, test.name.toUpperCase());
105 is(getColor(), test.value,
106 test.name + ' emulation is case-insensitive');
107 SpecialPowers.stopEmulatingMedium(window);
108 });
110 // Emulating screen should produce the same rendering as when there is
111 // no emulation in effect
112 SpecialPowers.emulateMedium(window, 'screen');
113 is(getColor(), originalColor,
114 'Emulating screen produces original rendering');
115 SpecialPowers.stopEmulatingMedium(window);
117 // Screen should be case-insensitive too
118 SpecialPowers.emulateMedium(window, 'SCREEN');
119 is(getColor(), originalColor, 'screen emulation is case-insensitive');
120 SpecialPowers.stopEmulatingMedium(window);
122 // An invalid parameter shouldn't fail. Given the CSS rules above,
123 // an invalid parameter should result in a different rendering from any
124 // produced thus far
125 try {
126 SpecialPowers.emulateMedium(window, 'clay');
127 let invalid = getColor();
128 tests.push({name: 'screen', value: 'green'});
129 tests.forEach(function(test) {
130 isnot(invalid, test.value, 'Emulating invalid type differs from ' +
131 test.name);
132 });
133 } catch (e) {
134 ok(false, 'Supplying invalid type to emulateMedium shouldn\'t throw');
135 }
137 SpecialPowers.stopEmulatingMedium(window);
138 </script>
139 </pre>
140 </body>
141 </html>
