diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_variables_02.js | 321 |
1 files changed, 321 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_02.js b/devtools/client/inspector/rules/test/browser_rules_variables_02.js new file mode 100644 index 0000000000..4100859fb9 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js @@ -0,0 +1,321 @@ +/* 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_2.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, view } = await openRuleView(); + + await testBasic(inspector, view); + await testNestedCssFunctions(inspector, view); + await testBorderShorthandAndInheritance(inspector, view); + await testSingleLevelVariable(inspector, view); + await testDoubleLevelVariable(inspector, view); + await testTripleLevelVariable(inspector, view); +}); + +async function testBasic(inspector, view) { + info( + "Test support for basic variable functionality for var() with 2 variables." + + "Format: var(--var1, var(--var2))" + ); + + await selectNode("#a", inspector); + const unsetVar = getRuleViewProperty( + view, + "#a", + "font-size" + ).valueSpan.querySelector(".ruleview-unmatched-variable"); + const setVarParent = unsetVar.nextElementSibling; + const setVar = getVarFromParent(setVarParent); + is( + unsetVar.textContent, + "--var-not-defined", + "--var-not-defined is not set correctly" + ); + is( + unsetVar.dataset.variable, + "--var-not-defined is not set", + "--var-not-defined's dataset.variable is not set correctly" + ); + is( + setVarParent.textContent, + " var(--var-defined-font-size)", + "var(--var-defined-font-size) parsed incorrectly" + ); + is( + setVar.textContent, + "--var-defined-font-size", + "--var-defined-font-size is not set correctly" + ); + is( + setVar.dataset.variable, + "--var-defined-font-size = 60px", + "--bg's dataset.variable is not set correctly" + ); +} + +async function testNestedCssFunctions(inspector, view) { + info( + "Test support for variable functionality for a var() nested inside " + + "another CSS function. Format: rgb(0, 0, var(--var1, var(--var2)))" + ); + + await selectNode("#b", inspector); + const unsetVarParent = getRuleViewProperty( + view, + "#b", + "color" + ).valueSpan.querySelector(".ruleview-unmatched-variable"); + const unsetVar = getVarFromParent(unsetVarParent); + const setVar = unsetVarParent.previousElementSibling; + is( + unsetVarParent.textContent, + " var(--var-defined-r-2)", + "var(--var-defined-r-2) not parsed correctly" + ); + is( + unsetVar.textContent, + "--var-defined-r-2", + "--var-defined-r-2 is not set correctly" + ); + is( + unsetVar.dataset.variable, + "--var-defined-r-2 = 0", + "--var-defined-r-2's dataset.variable is not set correctly" + ); + is( + setVar.textContent, + "--var-defined-r-1", + "--var-defined-r-1 is not set correctly" + ); + is( + setVar.dataset.variable, + "--var-defined-r-1 = 255", + "--var-defined-r-1's dataset.variable is not set correctly" + ); +} + +async function testBorderShorthandAndInheritance(inspector, view) { + info( + "Test support for variable functionality for shorthands/CSS styles with spaces " + + 'like "margin: w x y z". Also tests functionality for inherticance of CSS' + + " variables. Format: var(l, var(m)) var(x) rgb(var(r) var(g) var(b))" + ); + + await selectNode("#c", inspector); + const unsetVarL = getRuleViewProperty( + view, + "#c", + "border" + ).valueSpan.querySelector(".ruleview-unmatched-variable"); + const setVarMParent = unsetVarL.nextElementSibling; + + // var(x) is the next sibling of the parent of M + const setVarXParent = setVarMParent.parentNode.nextElementSibling; + + // var(r) is the next sibling of var(x), and var(g) is the next sibling of var(r), etc. + const setVarRParent = setVarXParent.nextElementSibling; + const setVarGParent = setVarRParent.nextElementSibling; + const setVarBParent = setVarGParent.nextElementSibling; + + const setVarM = getVarFromParent(setVarMParent); + const setVarX = setVarXParent.firstElementChild; + const setVarR = setVarRParent.firstElementChild; + const setVarG = setVarGParent.firstElementChild; + const setVarB = setVarBParent.firstElementChild; + + is( + unsetVarL.textContent, + "--var-undefined", + "--var-undefined is not set correctly" + ); + is( + unsetVarL.dataset.variable, + "--var-undefined is not set", + "--var-undefined's dataset.variable is not set correctly" + ); + + is( + setVarM.textContent, + "--var-border-px", + "--var-border-px is not set correctly" + ); + is( + setVarM.dataset.variable, + "--var-border-px = 10px", + "--var-border-px's dataset.variable is not set correctly" + ); + + is( + setVarX.textContent, + "--var-border-style", + "--var-border-style is not set correctly" + ); + is( + setVarX.dataset.variable, + "--var-border-style = solid", + "var-border-style's dataset.variable is not set correctly" + ); + + is( + setVarR.textContent, + "--var-border-r", + "--var-defined-r is not set correctly" + ); + is( + setVarR.dataset.variable, + "--var-border-r = 255", + "--var-defined-r's dataset.variable is not set correctly" + ); + + is( + setVarG.textContent, + "--var-border-g", + "--var-defined-g is not set correctly" + ); + is( + setVarG.dataset.variable, + "--var-border-g = 0", + "--var-defined-g's dataset.variable is not set correctly" + ); + + is( + setVarB.textContent, + "--var-border-b", + "--var-defined-b is not set correctly" + ); + is( + setVarB.dataset.variable, + "--var-border-b = 0", + "--var-defined-b's dataset.variable is not set correctly" + ); +} + +async function testSingleLevelVariable(inspector, view) { + info( + "Test support for variable functionality of a single level of " + + "undefined variables. Format: var(x, constant)" + ); + + await selectNode("#d", inspector); + const unsetVar = getRuleViewProperty( + view, + "#d", + "font-size" + ).valueSpan.querySelector(".ruleview-unmatched-variable"); + + is( + unsetVar.textContent, + "--var-undefined", + "--var-undefined is not set correctly" + ); + is( + unsetVar.dataset.variable, + "--var-undefined is not set", + "--var-undefined's dataset.variable is not set correctly" + ); +} + +async function testDoubleLevelVariable(inspector, view) { + info( + "Test support for variable functionality of double level of " + + "undefined variables. Format: var(x, var(y, constant))" + ); + + await selectNode("#e", inspector); + const allUnsetVars = getRuleViewProperty( + view, + "#e", + "color" + ).valueSpan.querySelectorAll(".ruleview-unmatched-variable"); + + is(allUnsetVars.length, 2, "The number of unset variables is mismatched."); + + const unsetVar1 = allUnsetVars[0]; + const unsetVar2 = allUnsetVars[1]; + + is( + unsetVar1.textContent, + "--var-undefined", + "--var-undefined is not set correctly" + ); + is( + unsetVar1.dataset.variable, + "--var-undefined is not set", + "--var-undefined's dataset.variable is not set correctly" + ); + + is( + unsetVar2.textContent, + "--var-undefined-2", + "--var-undefined is not set correctly" + ); + is( + unsetVar2.dataset.variable, + "--var-undefined-2 is not set", + "--var-undefined-2's dataset.variable is not set correctly" + ); +} + +async function testTripleLevelVariable(inspector, view) { + info( + "Test support for variable functionality of triple level of " + + "undefined variables. Format: var(x, var(y, var(z, constant)))" + ); + + await selectNode("#f", inspector); + const allUnsetVars = getRuleViewProperty( + view, + "#f", + "border-style" + ).valueSpan.querySelectorAll(".ruleview-unmatched-variable"); + + is(allUnsetVars.length, 3, "The number of unset variables is mismatched."); + + const unsetVar1 = allUnsetVars[0]; + const unsetVar2 = allUnsetVars[1]; + const unsetVar3 = allUnsetVars[2]; + + is( + unsetVar1.textContent, + "--var-undefined", + "--var-undefined is not set correctly" + ); + is( + unsetVar1.dataset.variable, + "--var-undefined is not set", + "--var-undefined's dataset.variable is not set correctly" + ); + + is( + unsetVar2.textContent, + "--var-undefined-2", + "--var-undefined-2 is not set correctly" + ); + is( + unsetVar2.dataset.variable, + "--var-undefined-2 is not set", + "--var-defined-r-2's dataset.variable is not set correctly" + ); + + is( + unsetVar3.textContent, + "--var-undefined-3", + "--var-undefined-3 is not set correctly" + ); + is( + unsetVar3.dataset.variable, + "--var-undefined-3 is not set", + "--var-defined-r-3's dataset.variable is not set correctly" + ); +} + +function getVarFromParent(varParent) { + return varParent.firstElementChild.firstElementChild; +} |