<!doctype HTML>

<!--
This test appends 30,000 items to the page, locking all but the first one.
It then changes the style of all the locked elements, causing self-layout
for all of them.

Note that there are 3 absolute positioned divs in each of the locked
elements. This test ensures we skip out of flow positioned children layout
when display locked.

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;
  height: 100px;
  position: absolute;
  right: 1%;
}
.spacer {
  width: 100%;
  height: 300px;
  background: lightblue;
}
</style>
</head>

<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container">
  <div class="spacer"></div>
  <div class="box" style="width: 50%; top: 0px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
  </div>
  <div class="box" style="width: 75%; top: 100px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
  </div>
  <div class="box" style="width: 98%; top: 200px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
  </div>
</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 = ["200px", "250px"];
let size_index = 0;
function changeStyle() {
  document.styleSheets[0].rules[0].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>