diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js new file mode 100644 index 0000000000..673ff18185 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js @@ -0,0 +1,74 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Testing editing nested rules selector in the rule view. + +const STYLE = ` + h1 { + color: lime; + &.foo { + color: red; + } + }`; + +const HTML = `<h1 class=foo>Nested</h1>`; + +const TEST_URI_INLINE_SHEET = ` + <style>${STYLE}</style> + ${HTML}`; + +const TEST_URI_CONSTRUCTED_SHEET = ` + ${HTML} + <script> + const sheet = new CSSStyleSheet(); + sheet.replaceSync(\`${STYLE}\`); + document.adoptedStyleSheets.push(sheet); + </script> +`; + +add_task(async function test_inline_sheet() { + info("Run test with inline stylesheet"); + await runTest(TEST_URI_INLINE_SHEET); +}); + +add_task(async function test_constructed_sheet() { + info("Run test with constructed stylesheet"); + await runTest(TEST_URI_CONSTRUCTED_SHEET); +}); + +async function runTest(uri) { + await addTab(`data:text/html,<meta charset=utf8>${encodeURIComponent(uri)}`); + const { inspector, view } = await openRuleView(); + + await selectNode("h1", inspector); + + is( + await getComputedStyleProperty("h1", null, "color"), + "rgb(255, 0, 0)", + "h1 color is red initially" + ); + + info(`Modify "&.foo" selector into "&.bar"`); + const ruleEditor = getRuleViewRuleEditor(view, 1); + const editor = await focusEditableField(view, ruleEditor.selectorText); + const onRuleViewChanged = view.once("ruleview-changed"); + editor.input.value = "&.bar"; + EventUtils.synthesizeKey("KEY_Enter"); + await onRuleViewChanged; + + is( + await getComputedStyleProperty("h1", null, "color"), + "rgb(0, 255, 0)", + "h1 color is now lime, as the new selector does not match the element" + ); + + info(`Modify color in "h1" rule to blue`); + await updateDeclaration(view, 2, { color: "lime" }, { color: "blue" }); + is( + await getComputedStyleProperty("h1", null, "color"), + "rgb(0, 0, 255)", + "h1 color is now blue" + ); +} |