From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../browser_rules_color_scheme_simulation_rdm.js | 90 ++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js (limited to 'devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js') 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..5045b9c675 --- /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(() => isButtonChecked(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(isButtonChecked(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(() => !isButtonChecked(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(() => isButtonChecked(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(() => !isButtonChecked(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 isButtonChecked(el) { + return el.classList.contains("checked"); +} -- cgit v1.2.3