blob: 782274fe0cccc381fa978f850f624a682bec64a7 [file] [log] [blame]
<!doctype HTML>
<style>
.contained {
contain: style layout;
background: lightgreen;
}
#small {
width: 100px;
height: 100px;
}
#large {
width: 200px;
height: 200px;
}
.child {
width: 20px;
height: 20%;
background: cyan;
}
#spacer {
width: 150px;
height: 150px;
background: green;
}
</style>
<div id="parent"><div class="contained" id="small"></div></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.id = "large";
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, 40, "1 in update");
assert_equals(document.getElementById("2").offsetTop, 80, "2 in update");
// Parent should be 100 height, since its child is locked.
assert_equals(document.getElementById("parent").offsetTop, 8, "parent in update");
assert_equals(document.getElementById("spacer").offsetTop, 108, "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, 40, "1 in commit");
assert_equals(document.getElementById("2").offsetTop, 80, "2 in commit");
// Now the parent should encompass the unlocked container, so spacer is pushed down further.
assert_equals(document.getElementById("parent").offsetTop, 8, "parent in commit");
assert_equals(document.getElementById("spacer").offsetTop, 208, "spacer in commit");
});
}
async function runTest() {
let container = document.getElementById("small");
await container.getDisplayLock().acquire({ timeout: Infinity });
construct(container);
container.getDisplayLock().update().then(() => {
measureInUpdate();
container.getDisplayLock().commit().then(() => {
measureInCommit();
t.done();
});
});
}
window.onload = function() {
requestAnimationFrame(() => requestAnimationFrame(runTest));
};
}, "Measure Updated Layout");
</script>