<!doctype HTML>

<!--
This test appends 30,000 items to the page, locking all but the first one.
It then changes the style of an element contained inside each of the 30,000
items. This changes the size, causing the children of locked elements to
need layout.

The test works with and without display locking. If display locking is not
enabled, then none of the elements are locked and the performance should
be noticeably worse.
-->

<head>
<script src="../resources/runner.js"></script>
<style>
.container {
  contain: style layout;
  width: 200px;
  content-size: 100px;
}
.box {
  background: blue;
  overflow: hidden;
  width: 100px;
  height: 100px;
}
</style>
</head>

<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</template>
</body>

<script>
function construct(n) {
  const specimen = document.importNode(
    document.getElementById("node_template").content, true).firstElementChild;
  for (let i = 0; i < n; ++i) {
    const clone = specimen.cloneNode(true);
    if (i > 0)
      clone.style = "content-visibility: hidden-matchable";
    document.body.appendChild(clone);
  }
}

let sizes = ["100px", "150px"];
let size_index = 0;
function changeStyle() {
  document.styleSheets[0].rules[1].style.width = sizes[size_index];
  size_index = 1 - size_index;
}

let testDone = false;
let startTime;
function runTest() {
  if (startTime) {
    PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
    PerfTestRunner.addRunTestEndMarker();
  }
  if (testDone)
    return;

  startTime = PerfTestRunner.now();
  PerfTestRunner.addRunTestEndMarker();

  changeStyle();
  requestAnimationFrame(runTest);
}

construct(30000);

PerfTestRunner.startMeasureValuesAsync({
  unit: 'ms',
  done: () => { testDone = true; },
  run: runTest,
  warmUpCount: 3,
  iterationCount: 5
});

</script>