<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=819930 --> <head> <meta charset="utf-8"> <title>Test for Bug 819930</title> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> <style> @media braille { body { background-color: rgb(255, 255, 0); } } @media embossed { body { background-color: rgb(210, 180, 140); } } @media handheld { body { background-color: rgb(0, 255, 0); } } @media print { body { background-color: rgb(0, 255, 255); } } @media projection { body { background-color: rgb(30, 144, 255); } } @media screen { body { background-color: green; } } @media speech { body { background-color: rgb(192, 192, 192); } } @media tty { body { background-color: rgb(255, 192, 203); } } @media tv { body { background-color: rgb(75, 0, 130); } } </style> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=819930">Mozilla Bug 819930</a> <p id="display"></p> <div id="content" style="display: none"></div> <pre id="test"> <script type="application/javascript;version=1.7"> let tests = [{name: 'braille', value: 'rgb(255, 255, 0)'}, {name: 'embossed', value: 'rgb(210, 180, 140)'}, {name: 'handheld', value: 'rgb(0, 255, 0)'}, {name: 'print', value: 'rgb(0, 255, 255)'}, {name: 'projection', value: 'rgb(30, 144, 255)'}, {name: 'speech', value: 'rgb(192, 192, 192)'}, {name: 'tty', value: 'rgb(255, 192, 203)'}, {name: 'tv', value: 'rgb(75, 0, 130)'}]; let originalColor = 'rgb(0, 128, 0)'; let body = document.body; let getColor = function() { return window.getComputedStyle(body) .getPropertyValue('background-color'); }; tests.forEach(function(test) { // Emulate the given media SpecialPowers.emulateMedium(window, test.name); is(getColor(), test.value, 'emulating ' + test.name + ' produced ' + 'correct rendering'); // Do the @media screen rules get applied after ending the emulation? SpecialPowers.stopEmulatingMedium(window); is(getColor(), originalColor, 'Ending ' + test.name + ' emulation restores style for original medium'); // CSS media types are case-insensitive; we should be too. SpecialPowers.emulateMedium(window, test.name.toUpperCase()); is(getColor(), test.value, test.name + ' emulation is case-insensitive'); SpecialPowers.stopEmulatingMedium(window); }); // Emulating screen should produce the same rendering as when there is // no emulation in effect SpecialPowers.emulateMedium(window, 'screen'); is(getColor(), originalColor, 'Emulating screen produces original rendering'); SpecialPowers.stopEmulatingMedium(window); // Screen should be case-insensitive too SpecialPowers.emulateMedium(window, 'SCREEN'); is(getColor(), originalColor, 'screen emulation is case-insensitive'); SpecialPowers.stopEmulatingMedium(window); // An invalid parameter shouldn't fail. Given the CSS rules above, // an invalid parameter should result in a different rendering from any // produced thus far try { SpecialPowers.emulateMedium(window, 'clay'); let invalid = getColor(); tests.push({name: 'screen', value: 'green'}); tests.forEach(function(test) { isnot(invalid, test.value, 'Emulating invalid type differs from ' + test.name); }); } catch (e) { ok(false, 'Supplying invalid type to emulateMedium shouldn\'t throw'); } SpecialPowers.stopEmulatingMedium(window); </script> </pre> </body> </html>