blob: 088af43bc4e834c1ebed100d5903ff4ef4ce3aeb [file] [log] [blame]
<!doctype HTML>
<!--
This test creates a flex box with 10,000 non-trivial items. It locks the
container and adjusts its width continuously. If content-visibility is properly
optimized, then the width adjustments are very quick (< one frame). Otherwise,
the layout recalculation leaks into the children element and the width
adjustments are slow.
-->
<style>
#container {
content-visibility: hidden;
width: 500px;
height: 500px;
display: flex;
flex-wrap: wrap;
border: 1px solid black;
background: lightblue;
}
.item {
background: blue;
margin: 1px;
width: 10%;
height: 10%;
}
</style>
<template id="item_template">
<div class="item">
<div style="position: relative; width: 90%;">
relpos
<div style="position: absolute; top: 1px; left: 1%">
abspos
</div>
</div>
<div style="position: absolute; top: 1px; left: 1%">
abspos
</div>
lorem ipsum dolor sit amet
</div>
</template>
<div id=container></div>
<script src="../resources/runner.js"></script>
<script>
function construct(n) {
const specimen = document.importNode(document.getElementById("item_template").content, true).firstElementChild;
const container = document.getElementById("container");
for (let i = 0; i < n; ++i) {
const clone = specimen.cloneNode(true);
container.appendChild(clone);
}
}
construct(10000);
let widths = ["400px", "500px"];
let width_index = 0;
function changeStyle() {
document.getElementById("container").style.width = widths[width_index];
width_index = 1 - width_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);
}
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 3,
iterationCount: 5
});
</script>