diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js new file mode 100644 index 0000000000..6ebf5ab761 --- /dev/null +++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js @@ -0,0 +1,129 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the box model properties list displays the right values +// and that it updates when the node's style is changed. + +const TEST_URI = ` + <style type='text/css'> + div { + box-sizing: border-box; + display: block; + float: left; + line-height: 20px; + position: relative; + z-index: 2; + height: 100px; + width: 100px; + border: 10px solid black; + padding: 20px; + margin: 30px auto; + } + </style> + <div>Test Node</div> +`; + +const res1 = [ + { + property: "box-sizing", + value: "border-box", + }, + { + property: "display", + value: "block", + }, + { + property: "float", + value: "left", + }, + { + property: "line-height", + value: "20px", + }, + { + property: "position", + value: "relative", + }, + { + property: "z-index", + value: "2", + }, +]; + +const res2 = [ + { + property: "box-sizing", + value: "content-box", + }, + { + property: "display", + value: "block", + }, + { + property: "float", + value: "right", + }, + { + property: "line-height", + value: "10px", + }, + { + property: "position", + value: "static", + }, + { + property: "z-index", + value: "5", + }, +]; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, boxmodel } = await openLayoutView(); + await selectNode("div", inspector); + + await testInitialValues(inspector, boxmodel); + await testChangingValues(inspector, boxmodel); +}); + +function testInitialValues(inspector, boxmodel) { + info("Test that the initial values of the box model are correct"); + const doc = boxmodel.document; + + for (const { property, value } of res1) { + const elt = doc.querySelector(getPropertySelector(property)); + is(elt.textContent, value, property + " has the right value."); + } +} + +async function testChangingValues(inspector, boxmodel) { + info("Test that changing the document updates the box model"); + const doc = boxmodel.document; + + const onUpdated = waitForUpdate(inspector); + await setContentPageElementAttribute( + "div", + "style", + "box-sizing:content-box;float:right;" + + "line-height:10px;position:static;z-index:5;" + ); + await onUpdated; + + for (const { property, value } of res2) { + const elt = doc.querySelector(getPropertySelector(property)); + is( + elt.textContent, + value, + property + " has the right value after style update." + ); + } +} + +function getPropertySelector(propertyName) { + return ( + `.boxmodel-container .computed-property-view` + + `[data-property-name=${propertyName}] .computed-property-value` + ); +} |