diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js | |
parent | Initial commit. (diff) | |
download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js new file mode 100644 index 0000000000..0a44f4813f --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js @@ -0,0 +1,72 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that color pickers appear when clicking or using keyboard on color swatches. + +const TEST_URI = ` + <style type="text/css"> + body { + color: red; + background-color: #ededed; + background-image: url(chrome://branding/content/icon64.png); + border: 2em solid rgba(120, 120, 120, .5); + } + </style> + Testing the color picker tooltip! +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { view } = await openRuleView(); + + const propertiesToTest = ["color", "background-color", "border"]; + + for (const property of propertiesToTest) { + info(`Test that the colorpicker appears on swatch click for ${property}`); + await testColorPickerAppearsOnColorSwatchActivation(view, property); + + info( + `Test that swatch is focusable and colorpicker can be activated with a keyboard for ${property}` + ); + await testColorPickerAppearsOnColorSwatchActivation(view, property, true); + } +}); + +async function testColorPickerAppearsOnColorSwatchActivation( + view, + property, + withKeyboard = false +) { + const value = getRuleViewProperty(view, "body", property).valueSpan; + const swatch = value.querySelector(".ruleview-colorswatch"); + + const cPicker = view.tooltips.getTooltip("colorPicker"); + ok(cPicker, "The rule-view has an expected colorPicker widget"); + + const cPickerPanel = cPicker.tooltip.panel; + ok(cPickerPanel, "The XUL panel for the color picker exists"); + + const onColorPickerReady = cPicker.once("ready"); + if (withKeyboard) { + // Focus on the property value span + const doc = value.ownerDocument; + value.focus(); + + // Tab to focus on the color swatch + EventUtils.sendKey("Tab"); + is(doc.activeElement, swatch, "Swatch successfully receives focus."); + + // Press enter on the swatch to simulate click and open color picker + EventUtils.sendKey("Return"); + } else { + swatch.click(); + } + await onColorPickerReady; + + info("The color picker was displayed"); + ok(!inplaceEditor(swatch.parentNode), "The inplace editor wasn't displayed"); + + await hideTooltipAndWaitForRuleViewChanged(cPicker, view); +} |