<!DOCTYPE html>
<script src="../../resources/runner.js"></script>
<style>
#target div { display:table; }
#target span { display:block; break-inside:avoid; height:2em; }
</style>
<pre id="log"></pre>
<!-- We only want to measure layout performance, so try to avoid irrelevant things, such as painting. -->
<div style="overflow:hidden; width:0; height:0;">
<div id="target" style="columns:3; column-fill:auto; width:40em; height:13em; line-height:2em;">
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
<div>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var target = document.getElementById("target");
var style = target.style;
function test() {
style.width = "41em";
PerfTestRunner.forceLayout();
style.width = "40em";
PerfTestRunner.forceLayout();
}
PerfTestRunner.measureRunsPerSecond({
description: "Measures performance of multicol layout in deeply nested tables.",
run: test
});
</script>
Codebase Browser
chromium