1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/base/tests/test_emulateMedium.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,141 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=819930
1.8 +-->
1.9 + <head>
1.10 + <meta charset="utf-8">
1.11 + <title>Test for Bug 819930</title>
1.12 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
1.14 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.15 + <style>
1.16 + @media braille {
1.17 + body {
1.18 + background-color: rgb(255, 255, 0);
1.19 + }
1.20 + }
1.21 +
1.22 + @media embossed {
1.23 + body {
1.24 + background-color: rgb(210, 180, 140);
1.25 + }
1.26 + }
1.27 +
1.28 + @media handheld {
1.29 + body {
1.30 + background-color: rgb(0, 255, 0);
1.31 + }
1.32 + }
1.33 +
1.34 + @media print {
1.35 + body {
1.36 + background-color: rgb(0, 255, 255);
1.37 + }
1.38 + }
1.39 +
1.40 + @media projection {
1.41 + body {
1.42 + background-color: rgb(30, 144, 255);
1.43 + }
1.44 + }
1.45 +
1.46 + @media screen {
1.47 + body {
1.48 + background-color: green;
1.49 + }
1.50 + }
1.51 +
1.52 + @media speech {
1.53 + body {
1.54 + background-color: rgb(192, 192, 192);
1.55 + }
1.56 + }
1.57 +
1.58 + @media tty {
1.59 + body {
1.60 + background-color: rgb(255, 192, 203);
1.61 + }
1.62 + }
1.63 +
1.64 + @media tv {
1.65 + body {
1.66 + background-color: rgb(75, 0, 130);
1.67 + }
1.68 + }
1.69 + </style>
1.70 + </head>
1.71 + <body>
1.72 + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=819930">Mozilla Bug 819930</a>
1.73 + <p id="display"></p>
1.74 +
1.75 + <div id="content" style="display: none"></div>
1.76 + <pre id="test">
1.77 + <script type="application/javascript;version=1.7">
1.78 + let tests = [{name: 'braille', value: 'rgb(255, 255, 0)'},
1.79 + {name: 'embossed', value: 'rgb(210, 180, 140)'},
1.80 + {name: 'handheld', value: 'rgb(0, 255, 0)'},
1.81 + {name: 'print', value: 'rgb(0, 255, 255)'},
1.82 + {name: 'projection', value: 'rgb(30, 144, 255)'},
1.83 + {name: 'speech', value: 'rgb(192, 192, 192)'},
1.84 + {name: 'tty', value: 'rgb(255, 192, 203)'},
1.85 + {name: 'tv', value: 'rgb(75, 0, 130)'}];
1.86 +
1.87 + let originalColor = 'rgb(0, 128, 0)';
1.88 + let body = document.body;
1.89 +
1.90 + let getColor = function() {
1.91 + return window.getComputedStyle(body)
1.92 + .getPropertyValue('background-color');
1.93 + };
1.94 +
1.95 + tests.forEach(function(test) {
1.96 + // Emulate the given media
1.97 + SpecialPowers.emulateMedium(window, test.name);
1.98 + is(getColor(), test.value, 'emulating ' + test.name + ' produced ' +
1.99 + 'correct rendering');
1.100 +
1.101 + // Do the @media screen rules get applied after ending the emulation?
1.102 + SpecialPowers.stopEmulatingMedium(window);
1.103 + is(getColor(), originalColor, 'Ending ' + test.name +
1.104 + ' emulation restores style for original medium');
1.105 +
1.106 + // CSS media types are case-insensitive; we should be too.
1.107 + SpecialPowers.emulateMedium(window, test.name.toUpperCase());
1.108 + is(getColor(), test.value,
1.109 + test.name + ' emulation is case-insensitive');
1.110 + SpecialPowers.stopEmulatingMedium(window);
1.111 + });
1.112 +
1.113 + // Emulating screen should produce the same rendering as when there is
1.114 + // no emulation in effect
1.115 + SpecialPowers.emulateMedium(window, 'screen');
1.116 + is(getColor(), originalColor,
1.117 + 'Emulating screen produces original rendering');
1.118 + SpecialPowers.stopEmulatingMedium(window);
1.119 +
1.120 + // Screen should be case-insensitive too
1.121 + SpecialPowers.emulateMedium(window, 'SCREEN');
1.122 + is(getColor(), originalColor, 'screen emulation is case-insensitive');
1.123 + SpecialPowers.stopEmulatingMedium(window);
1.124 +
1.125 + // An invalid parameter shouldn't fail. Given the CSS rules above,
1.126 + // an invalid parameter should result in a different rendering from any
1.127 + // produced thus far
1.128 + try {
1.129 + SpecialPowers.emulateMedium(window, 'clay');
1.130 + let invalid = getColor();
1.131 + tests.push({name: 'screen', value: 'green'});
1.132 + tests.forEach(function(test) {
1.133 + isnot(invalid, test.value, 'Emulating invalid type differs from ' +
1.134 + test.name);
1.135 + });
1.136 + } catch (e) {
1.137 + ok(false, 'Supplying invalid type to emulateMedium shouldn\'t throw');
1.138 + }
1.139 +
1.140 + SpecialPowers.stopEmulatingMedium(window);
1.141 + </script>
1.142 + </pre>
1.143 + </body>
1.144 +</html>
