zouhir · March 21, 2022 17:14
diff --git a/display_none.html b/display_none.html
 <!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 {
        width: 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 show = true;
    function changeStyle() {
        document.getElementById("container").style.display = show ? 'flex' : 'none';
        show = !show;
    }

    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>
	<!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 {
	width: 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 show = true;
	function changeStyle() {
	document.getElementById("container").style.display = show ? 'flex' : 'none';
	show = !show;
	}

	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>