blob: 8d3c5304e2dad9723fd194c461a59d4dabaea824 [file] [log] [blame]
<!doctype HTML>
<!--
Runs an acquire, which constructs and measures a subtree.
This should do a forced layout. Commit also measures it to get
post-final-layout values.
-->
<style>
#container {
contain: style layout;
width: 100px;
height: 100px;
background: lightgreen;
}
.child {
width: 20px;
height: 20%;
background: cyan;
}
#spacer {
width: 150px;
height: 150px;
background: green;
}
</style>
<div id="parent"></div>
<div id="spacer"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
async_test((t) => {
function createChild(id) {
let child = document.createElement("div");
child.classList = "child";
child.id = id;
return child;
}
function construct(container) {
container.appendChild(createChild("0"));
container.appendChild(createChild("1"));
container.appendChild(createChild("2"));
}
function measureInUpdate() {
t.step(() => {
// Ensure children are laid out; this forces a layout.
assert_equals(document.getElementById("0").offsetTop, 0, "0 in update");
assert_equals(document.getElementById("1").offsetTop, 20, "1 in update");
assert_equals(document.getElementById("2").offsetTop, 40, "2 in update");
// Both parent should be 0 height, since it's locked. Both parent and spacers
// should have 8 offsetTop.
assert_equals(document.getElementById("parent").offsetTop, 8, "parent in update");
assert_equals(document.getElementById("spacer").offsetTop, 8, "spacer in update");
});
}
function measureInCommit() {
t.step(() => {
// Ensure children are still laid out.
assert_equals(document.getElementById("0").offsetTop, 0, "0 in commit");
assert_equals(document.getElementById("1").offsetTop, 20, "1 in commit");
assert_equals(document.getElementById("2").offsetTop, 40, "2 in commit");
// Now the parent should encompass a container, so spacer is pushed down.
assert_equals(document.getElementById("parent").offsetTop, 8, "parent in commit");
assert_equals(document.getElementById("spacer").offsetTop, 108, "spacer in commit");
});
}
async function runTest() {
let container = document.createElement("div");
container.id = "container";
await container.getDisplayLock().acquire({ timeout: Infinity });
document.getElementById("parent").appendChild(container);
construct(container);
container.getDisplayLock().update().then(() => {
measureInUpdate();
container.getDisplayLock().commit().then(() => {
measureInCommit();
t.done();
});
});
}
window.onload = function() {
requestAnimationFrame(() => requestAnimationFrame(runTest));
};
}, "Measure Updated Layout");
</script>