<!doctype HTML>

<style>
.container {
  contain: style layout;
}
#outer {
  width: 100px;
  height: 100px;
  background: lightblue;
}
#inner {
  width: 50px;
  height: 50px;
  background: lightgreen;
}
div > div > div {
  width: 10px;
  height: 10px;
  background: red;
}
</style>

<div id="log"></div>
<div id="outer" class="container">
  <div id="inner" class="container"></div>
</div>

<script>
// TODO(vmpstr): In WPT this needs to be replaced with reftest-wait.
if (window.testRunner)
  window.testRunner.waitUntilDone();

function finishTest(status_string) {
  if (document.getElementById("log").innerHTML === "")
    document.getElementById("log").innerHTML = status_string;
  if (window.testRunner)
    window.testRunner.notifyDone();
}

async function runTest() {
  let outer = document.getElementById("outer");
  let inner = document.getElementById("inner");

  await Promise.all([
    outer.displayLock.acquire({ timeout: Infinity }),
    inner.displayLock.acquire({ timeout: Infinity })]);
  // Dirty the inner layout
  inner.appendChild(document.createElement("div"));
  inner.displayLock.update().then(
    () => { finishTest("PASS"); },
    () => { finishTest("FAIL"); });
}

window.onload = runTest;
</script>