diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js | |
parent | Initial commit. (diff) | |
download | firefox-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 '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js new file mode 100644 index 0000000000..4fb699aeb9 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js @@ -0,0 +1,90 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test color scheme simulation when RDM is toggled +const TEST_URI = URL_ROOT + "doc_media_queries.html"; + +add_task(async function () { + const tab = await addTab(TEST_URI); + const { inspector, view } = await openRuleView(); + + info("Check that the color scheme simulation buttons exist"); + const darkButton = inspector.panelDoc.querySelector( + "#color-scheme-simulation-dark-toggle" + ); + + // Define functions checking if the rule view display the expected property. + const divHasDefaultStyling = async () => + (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow"); + const divHasDarkSchemeStyling = async () => + (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue"); + + info( + "Select the div that will change according to conditions in prefered color scheme" + ); + await selectNode("div", inspector); + ok( + await divHasDefaultStyling(), + "The rule view shows the expected initial rule" + ); + + info("Open responsive design mode"); + await openRDM(tab); + + info("Click on the dark button"); + darkButton.click(); + await waitFor(() => isButtonPressed(darkButton)); + ok(true, "The dark button is checked"); + + await waitFor(() => divHasDarkSchemeStyling()); + ok( + true, + "The rules view was updated with the rule view from the dark scheme media query" + ); + + info("Close responsive design mode"); + await closeRDM(tab); + + info("Wait for a bit before checking dark mode is still enabled"); + await wait(1000); + ok(isButtonPressed(darkButton), "button is still checked"); + ok( + await divHasDarkSchemeStyling(), + "dark mode color-scheme simulation is still enabled" + ); + + info("Click the button to disable simulation"); + darkButton.click(); + await waitFor(() => !isButtonPressed(darkButton)); + ok(true, "The button isn't checked anymore"); + await waitFor(() => divHasDefaultStyling()); + ok(true, "We're not simulating color-scheme anymore"); + + info("Check that enabling dark-mode simulation before RDM does work as well"); + darkButton.click(); + await waitFor(() => isButtonPressed(darkButton)); + await waitFor(() => divHasDarkSchemeStyling()); + ok( + true, + "The rules view was updated with the rule view from the dark scheme media query" + ); + + info("Open responsive design mode again"); + await openRDM(tab); + + info("Click the button to disable simulation while RDM is still opened"); + darkButton.click(); + await waitFor(() => !isButtonPressed(darkButton)); + ok(true, "The button isn't checked anymore"); + await waitFor(() => divHasDefaultStyling()); + ok(true, "We're not simulating color-scheme anymore"); + + info("Close responsive design mode"); + await closeRDM(tab); +}); + +function isButtonPressed(el) { + return el.getAttribute("aria-pressed") === "true"; +} |