Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the box model displays the right values for the offset parent and that it
// updates when the node's style is changed
const TEST_URI = `
<div id="relative_parent" style="position: relative">
<div id="absolute_child" style="position: absolute"></div>
</div>
<div id="static"></div>
<div id="no_parent" style="position: absolute"></div>
<div id="fixed" style="position: fixed"></div>
`;
const OFFSET_PARENT_SELECTOR =
".computed-property-value-container .objectBox-node";
const res1 = [
{
selector: "#absolute_child",
offsetParentValue: "div#relative_parent",
},
{
selector: "#no_parent",
offsetParentValue: "body",
},
{
selector: "#relative_parent",
offsetParentValue: "body",
},
{
selector: "#static",
offsetParentValue: null,
},
{
selector: "#fixed",
offsetParentValue: null,
},
];
const updates = [
{
selector: "#absolute_child",
update: "position: static",
},
];
const res2 = [
{
selector: "#absolute_child",
offsetParentValue: null,
},
];
add_task(async function () {
await addTab("data:text/html," + encodeURIComponent(TEST_URI));
const { inspector, boxmodel } = await openLayoutView();
await testInitialValues(inspector, boxmodel);
await testChangingValues(inspector, boxmodel);
});
async function testInitialValues(inspector, boxmodel) {
info(
"Test that the initial values of the box model offset parent are correct"
);
const viewdoc = boxmodel.document;
for (const { selector, offsetParentValue } of res1) {
await selectNode(selector, inspector);
const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
is(
elt && elt.textContent,
offsetParentValue,
selector + " has the right value."
);
}
}
async function testChangingValues(inspector, boxmodel) {
info("Test that changing the document updates the box model");
const viewdoc = boxmodel.document;
for (const { selector, update } of updates) {
const onUpdated = waitForUpdate(inspector);
await setContentPageElementAttribute(selector, "style", update);
await onUpdated;
}
for (const { selector, offsetParentValue } of res2) {
await selectNode(selector, inspector);
const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
is(
elt && elt.textContent,
offsetParentValue,
selector + " has the right value after style update."
);
}
}