Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-10 15:08:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

tests: Vendor blink perf tests (#38654)

Browse source 
Vendors the [blink perf
tests](https://chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/perf_tests/).
These perf tests are useful to evaluate the performance of servo. 
The license that governs the perf tests is included in the folder. 
Running benchmark cases automatically is left to future work.

The update.py script is taken from mozjs and slightly adapted, so we can
easily filter
(and patch if this should be necessary in the future.

Testing: This PR just adds the perf_tests, but does not use or modify
them in any way.

---------

Signed-off-by: Jonathan Schwender <schwenderjonathan@gmail.com>
This commit is contained in:
Jonathan Schwender 2025-08-17 11:54:04 +02:00 • committed by GitHub
parent 7621332824
commit ee781b71b4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
648 changed files with 359694 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

107
tests/blink_perf_tests/perf_tests/display_locking/abs_pos_outer_sizes_change.html Normal file
View file

@ -0,0 +1,107 @@
<!doctype HTML>
<!--
This test appends 30,000 items to the page, locking all but the first one.
It then changes the style of all the locked elements, causing self-layout
for all of them.
Note that there are 3 absolute positioned divs in each of the locked
elements. This test ensures we skip out of flow positioned children layout
when display locked.
The test works with and without display locking. If display locking is not
enabled, then none of the elements are locked and the performance should
be noticeably worse.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.container {
contain: style layout;
width: 200px;
content-size: 100px;
}
.box {
background: blue;
overflow: hidden;
height: 100px;
position: absolute;
right: 1%;
}
.spacer {
width: 100%;
height: 300px;
background: lightblue;
}
</style>
</head>
<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container">
<div class="spacer"></div>
<div class="box" style="width: 50%; top: 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
<div class="box" style="width: 75%; top: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
<div class="box" style="width: 98%; top: 200px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</div>
</template>
</body>
<script>
function construct(n) {
const specimen = document.importNode(
document.getElementById("node_template").content, true).firstElementChild;
for (let i = 0; i < n; ++i) {
const clone = specimen.cloneNode(true);
if (i > 0)
clone.hidden = 'until-found';
document.body.appendChild(clone);
}
}
let sizes = ["200px", "250px"];
let size_index = 0;
function changeStyle() {
document.styleSheets[0].rules[0].style.width = sizes[size_index];
size_index = 1 - size_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);
}
construct(30000);
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 3,
iterationCount: 5
});
</script>

93
tests/blink_perf_tests/perf_tests/display_locking/fieldset_container_width_changes.html Normal file
View file

@ -0,0 +1,93 @@
<!doctype HTML>
<!--
This test creates a fieldset 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;
border: 1px solid black;
background: lightblue;
overflow: auto;
}
.item {
display: inline-block;
overflow: auto;
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: 150px; left: 1%">
abspos
</div>
lorem ipsum dolor sit amet
</div>
</template>
<fieldset id=container><legend>legend</legend></fieldset>
<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>

92
tests/blink_perf_tests/perf_tests/display_locking/flex_container_width_changes.html Normal file
View file

@ -0,0 +1,92 @@
<!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>

65
tests/blink_perf_tests/perf_tests/display_locking/forced_layout_on_locked_el.html Normal file
View file

@ -0,0 +1,65 @@
<!doctype HTML>
<!--
This test appends 1000 locked items to the page, lays them out,
and calculates the offsetTop value on 5 of them.
Since the locked elements have been laid out, the offsetTop
calculations should be fast.
The test works with and without display locking, and they
should have similar performance.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.box {
background: blue;
overflow: hidden;
width: 100px;
height: 100px;
contain: style layout;
}
</style>
</head>
<body>
<template id="template">
<div class="box" hidden=until-found>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</template>
<div id="container"></div>
</body>
<script>
const NUMBER_OF_ELEMENTS = 1000;
const NUMBER_OF_QUERIES = 5;
function appendChildren() {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
for (let i = 0; i < NUMBER_OF_ELEMENTS; ++i) {
const clone = template.content.cloneNode(true).firstElementChild;
clone.id = "box" + i;
container.appendChild(clone);
}
container.offsetTop;
}
function runTest() {
for (let i = 0; i < NUMBER_OF_QUERIES; ++i) {
document.getElementById("box" + i).offsetTop;
}
}
PerfTestRunner.measureTime({
setup: appendChildren,
run: runTest,
warmUpCount: 1,
iterationCount: 5,
});
</script>

93
tests/blink_perf_tests/perf_tests/display_locking/inner_sizes_change.html Normal file
View file

@ -0,0 +1,93 @@
<!doctype HTML>
<!--
This test appends 30,000 items to the page, locking all but the first one.
It then changes the style of an element contained inside each of the 30,000
items. This changes the size, causing the children of locked elements to
need layout.
The test works with and without display locking. If display locking is not
enabled, then none of the elements are locked and the performance should
be noticeably worse.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.container {
contain: style layout;
width: 200px;
content-size: 100px;
}
.box {
background: blue;
overflow: hidden;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</template>
</body>
<script>
function construct(n) {
const specimen = document.importNode(
document.getElementById("node_template").content, true).firstElementChild;
for (let i = 0; i < n; ++i) {
const clone = specimen.cloneNode(true);
if (i > 0)
clone.hidden = 'until-found';
document.body.appendChild(clone);
}
}
let sizes = ["100px", "150px"];
let size_index = 0;
function changeStyle() {
document.styleSheets[0].rules[1].style.width = sizes[size_index];
size_index = 1 - size_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);
}
construct(30000);
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 3,
iterationCount: 5
});
</script>

56
tests/blink_perf_tests/perf_tests/display_locking/link_invalidation_document_rules.html Normal file
View file

@ -0,0 +1,56 @@
<!--
This tests the overhead added by document rules to style recalc with display
locked elements. It adds 1,000 display-locked divs (with 4 links each), applies
and removes the lock, and forces a style update after. This test can be run with
and without "SpeculationRulesDocumentRulesSelectorMatches" enabled, and the
performance should be comparable.
-->
<!DOCTYPE html>
<head>
<script src="../resources/runner.js"></script>
<style>
#root > * { content-visibility: visible; }
</style>
<script type="speculationrules">
{"prefetch": [{"source": "document"}]}
</script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const NUM_BLOCKS = 1000;
function setup() {
let id = 0;
root.innerHTML = "";
document.styleSheets[0].rules[0].style.contentVisibility = 'visible';
for (let i = 0; i < NUM_BLOCKS; i++) {
const block = document.createElement("div");
block.id = ++id;
block.innerHTML = `
<a href="/foo.com" id="${++id}">${id}</a>
<a href="/foo.com" id="${++id}">${id}</a>
<a href="/foo.com" id="${++id}">${id}</a>
<a href="/foo.com" id="${++id}">${id}</a>
`
root.appendChild(block);
}
root.offsetLeft;
}
function runTest() {
document.styleSheets[0].rules[0].style.contentVisibility = 'hidden';
root.offsetTop;
document.styleSheets[0].rules[0].style.contentVisibility = 'visible';
root.offsetTop;
}
PerfTestRunner.measureTime({
setup: setup,
run: runTest,
iterationCount: 10,
});
</script>

67
tests/blink_perf_tests/perf_tests/display_locking/link_invalidation_document_rules_sparse.html Normal file
View file

@ -0,0 +1,67 @@
<!--
This tests the overhead added by document rules to style recalc with display
locked elements. It adds 25 display-locked divs that have 26 children
(25 divs, 1 link) and 625 (25*25) grandchildren (divs) each. It applies and
removes the lock, and forces a style update after. This test can be run with
and without "SpeculationRulesDocumentRulesSelectorMatches" enabled, and the
performance should be comparable.
-->
<!DOCTYPE html>
<head>
<script src="../resources/runner.js"></script>
<style>
#root > * { content-visibility: visible; }
</style>
<script type="speculationrules">
{"prefetch": [{"source": "document"}]}
</script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const NUM_BLOCKS = 25;
const NUM_CHILDREN = 25;
const NUM_GRANDCHILDREN = 25;
function setup() {
let id = 0;
root.innerHTML = "";
document.styleSheets[0].rules[0].style.contentVisibility = 'visible';
for (let i = 0; i < NUM_BLOCKS; i++) {
const block = document.createElement("div");
for (let j = 0; j < NUM_CHILDREN; j++) {
let child = document.createElement("div");
for (let k = 0; k < NUM_GRANDCHILDREN; k++) {
let grandchild = document.createElement("div");
grandchild.id = ++id;
grandchild.innerText = id;
child.appendChild(grandchild);
}
let a = document.createElement("a")
a.href = "/foo.com"
a.id = ++id;
a.innerText = id;
child.appendChild(a);
block.appendChild(child);
}
root.appendChild(block);
}
root.offsetLeft;
}
function runTest() {
document.styleSheets[0].rules[0].style.contentVisibility = 'hidden';
root.offsetTop;
document.styleSheets[0].rules[0].style.contentVisibility = 'visible';
root.offsetTop;
}
PerfTestRunner.measureTime({
setup: setup,
run: runTest,
iterationCount: 10,
});
</script>

92
tests/blink_perf_tests/perf_tests/display_locking/outer_sizes_change.html Normal file
View file

@ -0,0 +1,92 @@
<!doctype HTML>
<!--
This test appends 30,000 items to the page, locking all but the first one.
It then changes the style of all the locked elements, causing self-layout
for all of them.
The test works with and without display locking. If display locking is not
enabled, then none of the elements are locked and the performance should
be noticeably worse.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.container {
contain: style layout;
width: 200px;
content-size: 100px;
}
.box {
background: blue;
overflow: hidden;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</template>
</body>
<script>
function construct(n) {
const specimen = document.importNode(
document.getElementById("node_template").content, true).firstElementChild;
for (let i = 0; i < n; ++i) {
const clone = specimen.cloneNode(true);
if (i > 0)
clone.hidden = 'until-found';
document.body.appendChild(clone);
}
}
let sizes = ["200px", "250px"];
let size_index = 0;
function changeStyle() {
document.styleSheets[0].rules[0].style.width = sizes[size_index];
size_index = 1 - size_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);
}
construct(30000);
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 3,
iterationCount: 5
});
</script>

88
tests/blink_perf_tests/perf_tests/display_locking/outer_sizes_change_activatable.html Normal file
View file

@ -0,0 +1,88 @@
<!doctype HTML>
<!--
This test appends 30,000 items to the page, locking all of them with the
activatable flag on. It then changes the style of all the locked elements,
causing self-layout for all of them.
The test works with and without display locking. If display locking is not
enabled, then none of the elements are locked and the performance should
be noticeably worse.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.container {
contain: style layout;
width: 200px;
content-size: 100px;
}
.box {
background: blue;
overflow: hidden;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container" hidden=until-found>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</template>
</body>
<script>
function construct(n) {
const specimen = document.importNode(
document.getElementById("node_template").content, true).firstElementChild;
for (let i = 0; i < n; ++i)
document.body.appendChild(specimen.cloneNode(true));
}
let sizes = ["200px", "250px"];
let size_index = 0;
function changeStyle() {
document.styleSheets[0].rules[0].style.width = sizes[size_index];
size_index = 1 - size_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);
}
construct(30000);
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 3,
iterationCount: 5
});
</script>

118
tests/blink_perf_tests/perf_tests/display_locking/outer_sizes_change_iframe.html Normal file
View file

@ -0,0 +1,118 @@
<!doctype HTML>
<!--
This test appends 5,000 iframes to the page, locking all but the first one.
It then changes the style of all the locked elements, causing self-layout
for all of them.
The test works with and without display locking. If display locking is not
enabled, then none of the elements are locked and the performance should
be noticeably worse.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.container {
contain: style layout;
width: 200px;
height: 400px;
display: block;
}
</style>
</head>
<body>
<!-- node template from which to construct items -->
<template id="node_template">
<iframe class="container" srcdoc='
<style>
.box {
background: blue;
overflow: auto;
width: 100%;
height: 100px;
}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>'></iframe>
</template>
</body>
<script>
function construct(n) {
const specimen = document.importNode(
document.getElementById("node_template").content, true).firstElementChild;
for (let i = 0; i < n; ++i) {
const clone = specimen.cloneNode(true);
if (i > 0)
clone.hidden = 'until-found';
document.body.appendChild(clone);
}
}
let sizes = ["200px", "250px"];
let size_index = 0;
function changeStyle() {
document.styleSheets[0].rules[0].style.width = sizes[size_index];
size_index = (size_index + 1) % sizes.length;
}
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);
}
construct(5000);
window.onload = () => {
requestAnimationFrame(() => {
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 10,
iterationCount: 5
});
});
};
</script>

89
tests/blink_perf_tests/perf_tests/display_locking/unlock_top_items.html Normal file
View file

@ -0,0 +1,89 @@
<!doctype HTML>
<!--
This test appends 30,000 locked items to the page. It then unlocks items
starting from the top one and measures the length of requestAnimationFrame.
The test works with and without display locking. However, without display
locking, this simply measures requestAnimationFrame.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.container {
contain: style layout;
content-size: 100px;
}
.box {
background: blue;
overflow: hidden;
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</template>
</body>
<script>
function construct(n) {
const specimen = document.importNode(
document.getElementById("node_template").content, true).firstElementChild;
for (let i = 0; i < n; ++i) {
const clone = specimen.cloneNode(true);
clone.id = "id" + i;
clone.hidden = 'until-found';
document.body.appendChild(clone);
}
}
let nextId = 0;
function commitNextLock() {
const element = document.getElementById("id" + nextId);
++nextId;
element.style = "";
}
let testDone = false;
let startTime;
function runTest() {
if (startTime) {
PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
PerfTestRunner.addRunTestEndMarker();
}
if (testDone)
return;
startTime = PerfTestRunner.now();
PerfTestRunner.addRunTestEndMarker();
commitNextLock();
requestAnimationFrame(runTest);
}
construct(30000);
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 1,
iterationCount: 5
});
</script>

126
tests/blink_perf_tests/perf_tests/display_locking/unlock_top_items_nested.html Normal file
View file

@ -0,0 +1,126 @@
<!doctype HTML>
<!--
This test appends 30,000 locked items to the page. The first 1,000 items are
appended directly, and subsequent items are appended into a parent container
in chunks of 1,000 items. The parent container is also locked.
The structure of the page is as follows:
item
item
...
item
parent
item
item
...
item
/parent
parent
item
item
...
item
/parent
...
The test then unlocks items starting from the top one and measures the length
of requestAnimationFrame.
The test works with and without display locking. However, without display
locking, this simply measures requestAnimationFrame.
-->
<head>
<script src="../resources/runner.js"></script>
<style>
.container {
contain: style layout;
}
.small {
content-size: 100px;
}
.large {
content-size: 100px 100000px;
}
.box {
background: blue;
overflow: hidden;
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<!-- node template from which to construct items -->
<template id="node_template">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ante dui, posuere at pretium suscipit, condimentum at augue.
</div>
</template>
</body>
<script>
function construct(n) {
const specimen = document.importNode(
document.getElementById("node_template").content, true).firstElementChild;
let currentContainer;
for (let i = 0; i < n; ++i) {
if ((i % 1000) == 0) {
currentContainer = document.createElement("div");
currentContainer.classList = "container large";
if (i > 0)
currentContainer.hidden = 'until-found';
document.body.appendChild(currentContainer);
}
const clone = specimen.cloneNode(true);
clone.id = "id" + i;
clone.classList = "container small";
clone.hidden = 'until-found';
currentContainer.appendChild(clone);
}
}
let nextId = 0;
function commitNextLock() {
const element = document.getElementById("id" + nextId);
++nextId;
element.style = "";
}
let testDone = false;
let startTime;
function runTest() {
if (startTime) {
PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
PerfTestRunner.addRunTestEndMarker();
}
if (testDone)
return;
startTime = PerfTestRunner.now();
PerfTestRunner.addRunTestEndMarker();
commitNextLock();
requestAnimationFrame(runTest);
}
construct(30000);
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
done: () => { testDone = true; },
run: runTest,
warmUpCount: 1,
iterationCount: 5
});
</script>