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 --- ...wser_rules_colorpicker-element-without-quads.js | 77 ++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js (limited to 'devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js') diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js new file mode 100644 index 0000000000..f8012ab56b --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js @@ -0,0 +1,77 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = ` + + + +`; + +/** + * Check that we can still open the color picker on elements for which getQuads + * returns an empty array, which is used to compute the background-color + * contrast. + */ +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const hasEmptyQuads = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [], + () => { + const button = content.document.querySelector("button"); + const quads = button.firstChild.getBoxQuads({ + box: "content", + relativeTo: content.document, + createFramesForSuppressedWhitespace: false, + }); + return quads.length === 0; + } + ); + ok(hasEmptyQuads, "The test element has empty quads"); + + const { inspector, view } = await openRuleView(); + + await selectNode("button", inspector); + + const ruleEl = getRuleViewProperty(view, "button", "color"); + ok(ruleEl, "The color declaration was found"); + + const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch"); + const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color"); + is(colorEl.textContent, "tomato", "The right color value was found"); + + info("Open the color picker"); + const cPicker = view.tooltips.getTooltip("colorPicker"); + const onColorPickerReady = cPicker.once("ready"); + swatchEl.click(); + await onColorPickerReady; + + info("Check that the background color of the button was correctly detected"); + const contrastEl = cPicker.tooltip.container.querySelector( + ".contrast-value-and-swatch.contrast-ratio-single" + ); + ok( + contrastEl.style.cssText.includes( + "--accessibility-contrast-bg: rgba(0,128,0,1)" + ), + "The background color contains the expected value" + ); + + info("Check that the color picker can be used"); + await simulateColorPickerChange(view, cPicker, [255, 0, 0, 1], { + selector: "button", + name: "color", + value: "rgb(255, 0, 0)", + }); + + await hideTooltipAndWaitForRuleViewChanged(cPicker, view); +}); -- cgit v1.2.3