diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js new file mode 100644 index 0000000000..3d59baea68 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js @@ -0,0 +1,86 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the rule view computed lists can be expanded/collapsed, +// and contain the right subproperties. + +var TEST_URI = ` + <style type="text/css"> + #testid { + margin: 0px 1px 2px 3px; + top: 0px; + } + </style> + <h1 id="testid">Styled Node</h1> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + await selectNode("#testid", inspector); + await testComputedList(inspector, view); +}); + +function testComputedList(inspector, view) { + const prop = getTextProperty(view, 1, { margin: "0px 1px 2px 3px" }); + const propEditor = prop.editor; + const expander = propEditor.expander; + + ok(!expander.hasAttribute("open"), "margin computed list is closed"); + + info("Opening the computed list of margin property"); + expander.click(); + ok(expander.hasAttribute("open"), "margin computed list is open"); + + const computed = propEditor.prop.computed; + const computedDom = propEditor.computed; + const propNames = [ + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + ]; + + is(computed.length, propNames.length, "There should be 4 computed values"); + is( + computedDom.children.length, + propNames.length, + "There should be 4 nodes in the DOM" + ); + + propNames.forEach((propName, i) => { + const propValue = i + "px"; + is( + computed[i].name, + propName, + "Computed property #" + i + " has name " + propName + ); + is( + computed[i].value, + propValue, + "Computed property #" + i + " has value " + propValue + ); + is( + computedDom.querySelectorAll(".ruleview-propertyname")[i].textContent, + propName, + "Computed property #" + i + " in DOM has correct name" + ); + is( + computedDom.querySelectorAll(".ruleview-propertyvalue")[i].textContent, + propValue, + "Computed property #" + i + " in DOM has correct value" + ); + }); + + info("Closing the computed list of margin property"); + expander.click(); + ok(!expander.hasAttribute("open"), "margin computed list is closed"); + + info("Opening the computed list of margin property"); + expander.click(); + ok(expander.hasAttribute("open"), "margin computed list is open"); + is(computed.length, propNames.length, "Still 4 computed values"); + is(computedDom.children.length, propNames.length, "Still 4 nodes in the DOM"); +} |