summaryrefslogtreecommitdiffstats
path: root/layout/base/tests/test_emulateMedium.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /layout/base/tests/test_emulateMedium.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/base/tests/test_emulateMedium.html')
-rw-r--r--layout/base/tests/test_emulateMedium.html165
1 files changed, 165 insertions, 0 deletions
diff --git a/layout/base/tests/test_emulateMedium.html b/layout/base/tests/test_emulateMedium.html
new file mode 100644
index 0000000000..535904f0c0
--- /dev/null
+++ b/layout/base/tests/test_emulateMedium.html
@@ -0,0 +1,165 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=819930
+-->
+<meta charset="utf-8">
+<title>Test for Bug 819930</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+<link rel="stylesheet" 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>
+<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>
+
+<script>
+function waitForColorSchemeToBe(scheme) {
+ return new Promise(resolve => {
+ let mq = matchMedia(`(prefers-color-scheme: ${scheme})`);
+ if (mq.matches) {
+ resolve();
+ } else {
+ mq.addEventListener("change", resolve, { once: true });
+ }
+ });
+}
+
+add_setup(async function() {
+ // Set a dark color scheme so that we can properly test the print override.
+ await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", 0]] });
+ await waitForColorSchemeToBe("dark");
+});
+
+add_task(function() {
+ 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).backgroundColor;
+ };
+
+ for (let test of tests) {
+ // Emulate the given media
+ SpecialPowers.emulateMedium(window, test.name);
+ is(getColor(), test.value, 'emulating ' + test.name + ' produced ' +
+ 'correct rendering');
+
+ ok(matchMedia(test.name).matches, "Media matches");
+ if (test.value == "print") {
+ ok(matchMedia("(prefers-color-scheme: light)").matches, "color-scheme is overridden when emulating print");
+ }
+
+ // 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');
+ ok(!matchMedia(test.name).matches, "Media no longer matches");
+ ok(!matchMedia("(prefers-color-scheme: light)").matches, "color-scheme override should be restored");
+
+ // 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);
+ }
+
+ is(getColor(), originalColor, 'No emulation');
+
+ // 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);
+
+ is(getColor(), originalColor, 'No emulation, shouldn\'t change');
+
+ // Screen should be case-insensitive too
+ SpecialPowers.emulateMedium(window, 'SCREEN');
+ is(getColor(), originalColor, 'screen emulation is case-insensitive');
+ SpecialPowers.stopEmulatingMedium(window);
+
+ is(getColor(), originalColor, 'No emulation, shouldn\'t change');
+
+ // 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
+ 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);
+ });
+
+ SpecialPowers.stopEmulatingMedium(window);
+
+ is(getColor(), originalColor, 'No emulation, shouldn\'t change');
+})
+</script>