diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js b/devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js new file mode 100644 index 0000000000..c62818e64d --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js @@ -0,0 +1,131 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test for autocomplete of CSS variables in the Rules view. + +const IFRAME_URL = `https://example.org/document-builder.sjs?html=${encodeURIComponent(` + <style> + @property --iframe { + syntax: "*"; + inherits: true; + } + body { + --iframe-not-registered: turquoise; + } + + h1 { + color: tomato; + } + </style> + <h1>iframe</h1> +`)}`; + +const TEST_URI = `https://example.org/document-builder.sjs?html= + <script> + CSS.registerProperty({ + name: "--js", + syntax: "*", + inherits: false, + }); + </script> + <style> + @property --css { + syntax: "*"; + inherits: false; + } + + h1 { + --css: red; + --not-registered: blue; + color: gold; + } + </style> + <h1>Hello world</h1> + <iframe src="${encodeURIComponent(IFRAME_URL)}"></iframe>`; + +add_task(async function () { + await pushPref("layout.css.properties-and-values.enabled", true); + + await addTab(TEST_URI); + const { inspector, view } = await openRuleView(); + await selectNode("h1", inspector); + + info("Wait for @property panel to be displayed"); + await waitFor(() => + view.styleDocument.querySelector("#registered-properties-container") + ); + + const topLevelVariables = ["--css", "--js", "--not-registered"]; + await checkNewPropertyCssVariableAutocomplete(view, topLevelVariables); + + await checkCssVariableAutocomplete( + view, + getTextProperty(view, 1, { color: "gold" }).editor.valueSpan, + topLevelVariables + ); + + info( + "Check that the list is correct when selecting a node from another document" + ); + await selectNodeInFrames(["iframe", "h1"], inspector); + + const iframeVariables = ["--iframe", "--iframe-not-registered"]; + await checkNewPropertyCssVariableAutocomplete(view, iframeVariables); + + await checkCssVariableAutocomplete( + view, + getTextProperty(view, 1, { color: "tomato" }).editor.valueSpan, + iframeVariables + ); +}); + +async function checkNewPropertyCssVariableAutocomplete( + view, + expectedPopupItems +) { + const ruleEditor = getRuleViewRuleEditor(view, 0); + const editor = await focusNewRuleViewProperty(ruleEditor); + const onPopupOpen = editor.popup.once("popup-opened"); + EventUtils.sendString("--"); + await onPopupOpen; + + Assert.deepEqual( + editor.popup.getItems().map(item => item.label), + expectedPopupItems, + "Got expected items in autopopup" + ); + + info("Close the popup"); + const onPopupClosed = once(editor.popup, "popup-closed"); + EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow); + await onPopupClosed; +} + +async function checkCssVariableAutocomplete( + view, + inplaceEditorEl, + expectedPopupItems +) { + let onRuleViewChanged = view.once("ruleview-changed"); + const editor = await focusEditableField(view, inplaceEditorEl); + const onPopupOpen = editor.popup.once("popup-opened"); + EventUtils.sendString("var(--"); + view.debounce.flush(); + await onPopupOpen; + await onRuleViewChanged; + Assert.deepEqual( + editor.popup.getItems().map(item => item.label), + expectedPopupItems, + "Got expected items in autopopup" + ); + + info("Close the popup"); + const onPopupClosed = once(editor.popup, "popup-closed"); + onRuleViewChanged = view.once("ruleview-changed"); + EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow); + view.debounce.flush(); + await onRuleViewChanged; + await onPopupClosed; +} |