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_colorpicker-element-without-quads.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_colorpicker-element-without-quads.js | 77 |
1 files changed, 77 insertions, 0 deletions
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 = ` + <style type="text/css"> + button { + color: tomato; + background-color: green; + } + </style> + <!-- The space as text context for the button is mandatory here, so that the + firstChild of the button is an whitespace text node --> + <button id="button-with-no-quads"> </button> +`; + +/** + * 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); +}); |