Skip to content

GitLab

T
tangled
Commit 33ac80ec authored by Manuel Rego Casasnovas's avatar Manuel Rego Casasnovas Committed by Commit Bot
Browse files
Options

Perftest for lots of absolute positioned elements 

BUG=1098231

Change-Id: If40b218d4595993e8b78a51d0a391a3ab10ce4a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2282584Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#786010}
parent 4358811e
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 0 deletions
third_party/blink/perf_tests/layout/abspos.html 0 → 100644
View file @ 33ac80ec
<!DOCTYPE html>
<style>
.row {
position: relative;
font-size: 10px;
}
.cell {
position: absolute;
height: 10px;
width: 50px;
}
</style>
<div id="wrapper">
</div>
<pre id="log" style="position: absolute; left: 300px;"></pre>
<template id="row-template">
<div class="row">
<div class="row-id cell" style="left: 0;">
</div>
<div class="row-title cell" style="left: 50px;">
</div>
<div class="row-text cell" style="left: 100px; width: 200px;">
</div>
</div>
</template>
<script src="../resources/runner.js"></script>
<script>
function runTest() {
var index = 0;
PerfTestRunner.measureTime({
description: "Measures layout performance of a page with lots of absolute positioned elements.",
setup: function() {
document.body.style.display = "none";
PerfTestRunner.forceLayout();
},
run: function() {
document.body.style.display = "block";
PerfTestRunner.forceLayout();
}
});
}
const TOTAL_ROWS = 10000;
const ROW_HEIGHT = 10;
let wrapper = document.getElementById("wrapper");
let template = document.getElementById("row-template");
for (let i = 0; i < TOTAL_ROWS; i++) {
let clone = template.content.cloneNode(true);
let row = clone.querySelector(".row");
row.style.top = (i * ROW_HEIGHT) + "px";
let color = "#"+ ((1<<24)*Math.random()|0).toString(16);
let rowId = clone.querySelector(".row-id");
rowId.innerHTML = "<div style='width: 10px; height: 10px; background: " + color + ";'></div>";
let rowTitle = clone.querySelector(".row-title");
rowTitle.innerHTML = "<div style='width: 25px; height: 5px; background: " + color + ";'></div>";
let rowText = clone.querySelector(".row-text");
rowText.innerHTML = "<div style='width: 50px; height: 5px; background: " + color + ";'></div>";
wrapper.appendChild(clone);
}
runTest();
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment