Skip to content

GitLab

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

[css-contain] Add perftest for Update Layer Tree issue 

As described in crbug.com/779066 even with "contain: strict"
we're visiting the whole layer tree when
PaintLayer::SetNeedsCompositingInputsUpdate() is called.
If we call that inside an element that has "contain: strict"
we should be able to avoid visiting paint layers outside that element
as they are not affected.

Right now we're spending a lot of time in "Update Layer Tree" phase
in this situations, calling CompositingInputsUpdater::UpdateRecursive()
for all the paint layers. We should be able to do something better here
thanks to strict containment.

The perftest is based on an attached example on the bug,
it has a huge DOM with 200x200 cells that have "contain: strict".
We force a call to PaintLayer::SetNeedsCompositingInputsUpdate()
in one of these cells (by changing the value overflow property),
and we're visiting the whole layer tree.

BUG=779066

Change-Id: Iaed26bceb9a270e1989b2dc5a9dafff3d6974f39
Reviewed-on: https://chromium-review.googlesource.com/c/1458299Reviewed-by: default avatarChris Harrelson <chrishtr@chromium.org>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#630567}
parent 628d624f
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 0 deletions
third_party/blink/perf_tests/paint/contain-update-layer-tree.html 0 → 100644
View file @ f65150ea
<!DOCTYPE html>
<title>Contain update layer tree performance</title>
<style>
#wrapper {
position: relative;
}
.cell {
position: absolute;
box-sizing: border-box;
border: solid;
contain: strict;
}
.progressbar {
position: absolute;
left: 0px;
top: 5px;
height: 10px;
}
</style>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<pre id="log"></pre>
<div id="wrapper"></div>
<script>
const CELL_WIDTH = "50";
const CELL_HEIGHT = "25";
const NUM_ROWS = 200;
const NUM_COLUMNS = 200;
const DOM_DEPTH = 10;
function createContent(depth) {
let content = document.createElement("div");
content.appendChild(document.createElement("h1"));
content.appendChild(document.createElement("paragraph"));
if (depth > 0)
content.appendChild(createContent(depth - 1));
return content;
}
function setupTest() {
let wrapper = document.getElementById("wrapper");
for (let i = 0; i < NUM_ROWS; i++) {
for (let j = 0; j < NUM_COLUMNS; j++) {
let cell = document.createElement("div");
if (i == 0 && j == 0)
cell.id = "target";
cell.classList.add("cell");
cell.style.width = CELL_WIDTH + "px";
cell.style.height = CELL_HEIGHT + "px";
cell.style.left = (j * CELL_WIDTH) + "px";
cell.style.top = (i * CELL_HEIGHT) + "px";
cell.style.overflow = "visible";
cell.appendChild(createContent(DOM_DEPTH));
wrapper.appendChild(cell);
}
}
}
function runTest() {
let cell = document.getElementById("target");
// This causes a call to PaintLayer::SetNeedsCompositingInputsUpdate().
cell.style.overflow = cell.style.overflow == "hidden" ? "visible" : "hidden";
}
setupTest();
measurePaint({
run: 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