<!doctype HTML>

<!--
Runs acquire, constructs a subtree, calls update and measures it in
the promise resolotion, which also removes the element from the DOM.
-->

<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(container) {
  container.appendChild(createChild("0"));
  container.appendChild(createChild("1"));
  container.appendChild(createChild("2"));
}

function runTest() {
  let container = document.createElement("div");
  container.id = "container";
  container.getDisplayLock().acquire().then(() => {
    construct(container);
    document.getElementById("empty").appendChild(container);
    container.getDisplayLock().update().then(measureAndRemove).then(finish);
  });
}

window.onload = runTest;
</script>