blob: ce482162ff3716bd7bf92b7f29d3fe054c3d665d [file] [log] [blame]
<!doctype HTML>
<!--
Runs an acquireDisplayLock which constructs a subtree, and measures it in
the promise resolution.
-->
<style>
#container {
contain: content;
width: 100px;
height: 100px;
background: lightgreen;
}
.child {
width: 20px;
height: 20%;
background: cyan;
}
#empty {
background: red;
width: max-content;
}
#spacer {
width: 150px;
height: 150px;
background: green;
}
</style>
<div id="empty"></div>
<div id="spacer"></div>
<div id="log"></div>
<script>
if (window.testRunner)
window.testRunner.waitUntilDone();
function finish() {
if (window.testRunner)
window.testRunner.notifyDone();
}
function measureAndRemove() {
let log = document.getElementById("log");
log.innerHTML += "" + document.getElementById("0").offsetTop;
log.innerHTML += " " + document.getElementById("1").offsetTop;
log.innerHTML += " " + document.getElementById("2").offsetTop;
log.innerHTML += " " + document.getElementById("empty").offsetTop;
log.innerHTML += " " + document.getElementById("spacer").offsetTop;
document.getElementById("container").remove();
}
function createChild(id) {
let child = document.createElement("div");
child.classList = "child";
child.id = id;
return child;
}
function construct(context) {
context.lockedElement.appendChild(createChild("0"));
context.lockedElement.appendChild(createChild("1"));
context.lockedElement.appendChild(createChild("2"));
}
function acquire() {
let container = document.createElement("div");
container.id = "container";
container.acquireDisplayLock(construct).then(measureAndRemove).then(finish);
document.getElementById("empty").appendChild(container);
}
window.onload = acquire;
</script>