The Tor Browser / file comparison
comparison: layout/base/tests/test_emulateMedium.html
layout/base/tests/test_emulateMedium.html
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:3add3baa3194 |
|---|---|
| 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 } | |
| 18 | |
| 19 @media embossed { | |
| 20 body { | |
| 21 background-color: rgb(210, 180, 140); | |
| 22 } | |
| 23 } | |
| 24 | |
| 25 @media handheld { | |
| 26 body { | |
| 27 background-color: rgb(0, 255, 0); | |
| 28 } | |
| 29 } | |
| 30 | |
| 31 @media print { | |
| 32 body { | |
| 33 background-color: rgb(0, 255, 255); | |
| 34 } | |
| 35 } | |
| 36 | |
| 37 @media projection { | |
| 38 body { | |
| 39 background-color: rgb(30, 144, 255); | |
| 40 } | |
| 41 } | |
| 42 | |
| 43 @media screen { | |
| 44 body { | |
| 45 background-color: green; | |
| 46 } | |
| 47 } | |
| 48 | |
| 49 @media speech { | |
| 50 body { | |
| 51 background-color: rgb(192, 192, 192); | |
| 52 } | |
| 53 } | |
| 54 | |
| 55 @media tty { | |
| 56 body { | |
| 57 background-color: rgb(255, 192, 203); | |
| 58 } | |
| 59 } | |
| 60 | |
| 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> | |
| 71 | |
| 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)'}]; | |
| 83 | |
| 84 let originalColor = 'rgb(0, 128, 0)'; | |
| 85 let body = document.body; | |
| 86 | |
| 87 let getColor = function() { | |
| 88 return window.getComputedStyle(body) | |
| 89 .getPropertyValue('background-color'); | |
| 90 }; | |
| 91 | |
| 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'); | |
| 97 | |
| 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'); | |
| 102 | |
| 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 }); | |
| 109 | |
| 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); | |
| 116 | |
| 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); | |
| 121 | |
| 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 } | |
| 136 | |
| 137 SpecialPowers.stopEmulatingMedium(window); | |
| 138 </script> | |
| 139 </pre> | |
| 140 </body> | |
| 141 </html> |
