diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_variables_01.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_variables_01.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_01.js b/devtools/client/inspector/rules/test/browser_rules_variables_01.js new file mode 100644 index 0000000000..255367fcbb --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_variables_01.js @@ -0,0 +1,72 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test for variables in rule view. + +const TEST_URI = URL_ROOT + "doc_variables_1.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, view } = await openRuleView(); + await selectNode("#target", inspector); + + info( + "Tests basic support for CSS Variables for both single variable " + + "and double variable. Formats tested: var(x, constant), var(x, var(y))" + ); + + const unsetColor = getRuleViewProperty( + view, + "div", + "color" + ).valueSpan.querySelector(".ruleview-unmatched-variable"); + const setColor = unsetColor.previousElementSibling; + is(unsetColor.textContent, " red", "red is unmatched in color"); + is(setColor.textContent, "--color", "--color is not set correctly"); + is( + setColor.dataset.variable, + "--color = chartreuse", + "--color's dataset.variable is not set correctly" + ); + let previewTooltip = await assertShowPreviewTooltip(view, setColor); + await assertTooltipHiddenOnMouseOut(previewTooltip, setColor); + + ok( + previewTooltip.panel.textContent.includes("--color = chartreuse"), + "CSS variable preview tooltip shows the expected CSS variable" + ); + + const unsetVar = getRuleViewProperty( + view, + "div", + "background-color" + ).valueSpan.querySelector(".ruleview-unmatched-variable"); + const setVar = unsetVar.nextElementSibling; + const setVarName = setVar.querySelector(".ruleview-variable"); + is( + unsetVar.textContent, + "--not-set", + "--not-set is unmatched in background-color" + ); + is(setVar.textContent, " var(--bg)", "var(--bg) parsed incorrectly"); + is(setVarName.textContent, "--bg", "--bg is not set correctly"); + is( + setVarName.dataset.variable, + "--bg = seagreen", + "--bg's dataset.variable is not set correctly" + ); + previewTooltip = await assertShowPreviewTooltip(view, setVarName); + + ok( + !previewTooltip.panel.textContent.includes("--color = chartreuse"), + "CSS variable preview tooltip no longer shows the previous CSS variable" + ); + ok( + previewTooltip.panel.textContent.includes("--bg = seagreen"), + "CSS variable preview tooltip shows the new CSS variable" + ); + + await assertTooltipHiddenOnMouseOut(previewTooltip, setVarName); +}); |