diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js new file mode 100644 index 0000000000..ba8163f1c0 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js @@ -0,0 +1,82 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// This test page should follow the overall color scheme. +// Default colors / background colors should change depending on the scheme. +const TEST_URI = `https://example.com/document-builder.sjs?html= + <!DOCTYPE html> + <html lang=en> + <meta charset=utf-8> + <meta name=color-scheme content="dark light"> + Hello! +`; +add_task(async function () { + await addTab(TEST_URI); + const { inspector } = await openRuleView(); + + // Retrieve light and dark scheme buttons. + const lightButton = inspector.panelDoc.querySelector( + "#color-scheme-simulation-light-toggle" + ); + const darkButton = inspector.panelDoc.querySelector( + "#color-scheme-simulation-dark-toggle" + ); + + // Read the color scheme to know if we should click on the light or dark button + // to trigger a change. + info("Retrieve the default color scheme"); + let isDarkScheme = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [], + () => { + return content.matchMedia("(prefers-color-scheme: dark)").matches; + } + ); + + // Clicks on the simulation button which triggers a color-scheme change. + // If current scheme is light, click on dark and vice-versa. + function toggleScheme() { + info(`Switch color scheme to ${isDarkScheme ? "light" : "dark"} mode`); + isDarkScheme ? lightButton.click() : darkButton.click(); + isDarkScheme = !isDarkScheme; + } + + info("Retrieve the initial (text) color of the page"); + const initialColor = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [], + () => { + return content.getComputedStyle(content.document.body).color; + } + ); + + toggleScheme(); + + info("Wait until the color of the page changes"); + await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [initialColor], + _initialColor => { + return ContentTaskUtils.waitForCondition(() => { + const newColor = content.getComputedStyle(content.document.body).color; + return newColor !== _initialColor; + }); + } + ); + + toggleScheme(); + + info("Wait until the color of the page goes back to the initial value"); + await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [initialColor], + _initialColor => { + return ContentTaskUtils.waitForCondition(() => { + const newColor = content.getComputedStyle(content.document.body).color; + return newColor === _initialColor; + }); + } + ); +}); |