Skip to content

GitLab

T
tangled
Commit e2cdb1ab authored by Xianzhu Wang's avatar Xianzhu Wang Committed by Commit Bot
Browse files
Options

Combine 10 table and selection paint perf tests into 3 

Now one perf test combines several change types. We don't actually care
about relative small performance changes for each change type, but care
more about larger overall changes.

BTW add an OWNERS file containing pdr, schenney and wangxianzhu
for perf_tests/paint.

Change-Id: I3e88b7c2e6f304dfa80a28b2847704850079b536
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2380497Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802822}
parent 8d259ac8
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 360 deletions
third_party/blink/perf_tests/paint/OWNERS 0 → 100644
View file @ e2cdb1ab
pdr@chromium.org
schenney@chromium.org
wangxianzhu@chromium.org
third_party/blink/perf_tests/paint/large-table-background-change-with-visible-collapsed-borders.html deleted 100644 → 0
View file @ 8d259ac8
<!DOCTYPE html>
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>td { border: 1px solid blue }</style>
<script>
function createTable(rows, columns) {
var table = document.createElement("TABLE");
// Collapsing border is not necessary to see the slowness
// but it makes the painting phase ~2x slower.
table.style.borderCollapse = "collapse";
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
var td = document.createElement("TD");
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
var table = createTable(400, 400);
document.body.appendChild(table);
var ix = 30;
var iy = 30;
measurePaint({
run: function() {
table.childNodes[iy].childNodes[ix].style.backgroundColor = 'teal';
ix++;
iy++;
},
});
</script>
</body>
third_party/blink/perf_tests/paint/large-table-background-change-with-zero-width-collapsed-borders.html deleted 100644 → 0
View file @ 8d259ac8
<!DOCTYPE html>
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>td { border: 0 solid blue }</style>
<script>
function createTable(rows, columns) {
var table = document.createElement("TABLE");
// Collapsing border is not necessary to see the slowness
// but it makes the painting phase ~2x slower.
table.style.borderCollapse = "collapse";
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
var td = document.createElement("TD");
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
var table = createTable(600, 600);
document.body.appendChild(table);
var ix = 30;
var iy = 30;
measurePaint({
run: function() {
table.childNodes[iy].childNodes[ix].style.backgroundColor = 'teal';
ix++;
iy++;
},
});
</script>
</body>
third_party/blink/perf_tests/paint/large-table-background-change-with-invisible-collapsed-borders.html → third_party/blink/perf_tests/paint/large-table-background-change.html
View file @ e2cdb1ab
......@@ -2,12 +2,21 @@
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>
table {
border-collapse: collapse;
will-change: transform;
}
table.zero-width-border td {
border: 0px solid blue;
}
table.visible-border td {
border: 1px solid blue;
}
</style>
<script>
function createTable(rows, columns) {
var table = document.createElement("TABLE");
// Collapsing border is not necessary to see the slowness
// but it makes the painting phase ~2x slower.
table.style.borderCollapse = "collapse";
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
......@@ -19,18 +28,31 @@ function createTable(rows, columns) {
return table;
}
var table = createTable(600, 600);
document.body.appendChild(table);
var table1 = createTable(300, 300);
table1.className = 'zero-width-border';
document.body.appendChild(table1);
var table2 = createTable(300, 300);
table2.className = 'invisible-border';
document.body.appendChild(table2);
var table3 = createTable(300, 300);
table3.className = 'visible-border';
document.body.appendChild(table3);
var count = 0;
var ix = 30;
var iy = 30;
measurePaint({
run: function() {
table.childNodes[iy].childNodes[ix].style.backgroundColor = 'teal';
ix++;
iy++;
},
iterationCount: 30,
run: function() {
var table = [table1, table2, table3][count % 3];
table.childNodes[iy].childNodes[ix].style.backgroundColor = 'teal';
ix++;
iy++;
count++;
},
});
</script>
</body>
third_party/blink/perf_tests/paint/large-table-collapsed-border-change-with-backgrounds.html deleted 100644 → 0
View file @ 8d259ac8
<!DOCTYPE html>
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>td { border: 1px solid blue; }</style>
<script>
function createTable(rows, columns) {
var table = document.createElement("TABLE");
// Collapsing border is not necessary to see the slowness
// but it makes the painting phase ~2x slower.
table.style.borderCollapse = "collapse";
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
var td = document.createElement("TD");
td.style.backgroundColor = "green";
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
var table = createTable(300, 320);
document.body.appendChild(table);
var ix = 30;
var iy = 30;
measurePaint({
run: function() {
table.childNodes[iy].childNodes[ix].style.borderColor = "red";
ix++;
iy++;
},
});
</script>
</body>
third_party/blink/perf_tests/paint/large-table-collapsed-border-change-with-text.html deleted 100644 → 0
View file @ 8d259ac8
<!DOCTYPE html>
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>td { border: 1px solid blue; font-size: 3px; }</style>
<script>
function createTable(rows, columns) {
var table = document.createElement("TABLE");
// Collapsing border is not necessary to see the slowness
// but it makes the painting phase ~2x slower.
table.style.borderCollapse = "collapse";
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
var td = document.createElement("TD");
td.appendChild(document.createTextNode("ABC"));
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
var table = createTable(300, 320);
document.body.appendChild(table);
var ix = 30;
var iy = 30;
measurePaint({
run: function() {
table.childNodes[iy].childNodes[ix].style.borderColor = "red";
ix++;
iy++;
},
});
</script>
</body>
third_party/blink/perf_tests/paint/large-table-collapsed-border-change.html
View file @ e2cdb1ab
......@@ -2,36 +2,66 @@
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>td { border: 1px solid blue }</style>
<style>
table {
border: 2px solid green;
border-collapse: collapse;
font-size: 3px;
will-change: transform;
}
td {
border: 1px solid blue;
}
table.text td::before {
content: "ABC";
}
table.background td {
background: green;
}
</style>
<script>
function createTable(rows, columns) {
var table = document.createElement("TABLE");
// Collapsing border is not necessary to see the slowness
// but it makes the painting phase ~2x slower.
table.style.borderCollapse = "collapse";
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
var td = document.createElement("TD");
tr.appendChild(td);
}
table.appendChild(tr);
var table = document.createElement("TABLE");
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
var td = document.createElement("TD");
tr.appendChild(td);
}
return table;
table.appendChild(tr);
}
return table;
}
var table = createTable(300, 320);
document.body.appendChild(table);
var table1 = createTable(100, 100);
document.body.appendChild(table1);
var table2= createTable(150, 150);
table2.className = 'text';
document.body.appendChild(table2);
var table3 = createTable(150, 150);
table3.className = 'background';
document.body.appendChild(table3);
var count = 0;
var ix = 30;
var iy = 30;
measurePaint({
run: function() {
table.childNodes[iy].childNodes[ix].style.borderColor = "red";
ix++;
iy++;
},
iterationCount: 40,
run: function() {
if (count % 4 == 0) {
table1.style.borderColor = table1.style.borderColor == 'green' ?
'yellow' : 'green';
} else {
var table = [table1, table2, table3][count % 3];
table.childNodes[iy].childNodes[ix].style.borderColor = "red";
ix++;
iy++;
}
count++;
},
});
</script>
</body>
third_party/blink/perf_tests/paint/large-table-repaint.html deleted 100644 → 0
View file @ 8d259ac8
<!DOCTYPE html>
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>td { border: 1px solid blue }</style>
<script>
function createTable(rows, columns) {
var table = document.createElement("TABLE");
// Collapsing border is not necessary to see the slowness
// but it makes the painting phase ~2x slower.
table.style.borderCollapse = "collapse";
for (var i = 0; i < rows; ++i) {
var tr = document.createElement("TR");
for (var j = 0; j < columns; ++j) {
var td = document.createElement("TD");
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
var table = createTable(240, 220);
table.style.border = '2px solid green';
document.body.appendChild(table);
measurePaint({
run: function() {
table.style.borderColor = table.style.borderColor == 'green' ?
'yellow' : 'green';
},
});
</script>
</body>
third_party/blink/perf_tests/paint/modify-huge-selection.html deleted 100644 → 0
View file @ 8d259ac8
<!doctype html>
<script src="../resources/runner.js"></script>
<script src="../layout/resources/line-layout-perf-test.js"></script>
<div id="container"></div>
<script>
const kNumberOfWords = 10000 * 30;
const kCount = 10;
const container = document.getElementById('container');
const selection = window.getSelection();
container.textContent = (() => {
const words = [];
for (let i = 0; i < kNumberOfWords; ++i)
words.push(TextGenerator.createWord(i % 12 + 3));
return words.join(' ');
})();
const text = container.firstChild;
let isDone = false;
let startTime = 0;
let counter = 0;
function runTest() {
if (startTime !== 0 && counter % kCount === 0) {
PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
PerfTestRunner.addRunTestEndMarker(); // For tracing metrics
}
if (isDone)
return;
window.requestAnimationFrame(() => {
if (counter % kCount === 0) {
PerfTestRunner.addRunTestStartMarker();
startTime = PerfTestRunner.now(); // For tracing metrics
}
selection.setBaseAndExtent(text, 4000 - counter * 10, text, text.length);
++counter;
runTest();
});
}
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
run: function() {
runTest();
},
done: function() {
container.textContent = '';
isDone = true;
},
iterationCount: 10,
tracingCategories: 'blink',
traceEventsToMeasure: [
'LocalFrameView::RunPrePaintLifecyclePhase',
'LocalFrameView::RunPaintLifecyclePhase'
],
});
</script>
third_party/blink/perf_tests/paint/modify-selection.html
View file @ e2cdb1ab
<!doctype html>
<script src="../resources/runner.js"></script>
<script src="../layout/resources/line-layout-perf-test.js"></script>
<script src="resources/paint.js"></script>
<div id="container"></div>
<script>
const kNumberOfWords = 10000 * 30;
const kCount = 10;
const container = document.getElementById('container');
const selection = window.getSelection();
......@@ -14,46 +15,30 @@ container.textContent = (() => {
words.push(TextGenerator.createWord(i % 12 + 3));
return words.join(' ');
})();
const text = container.firstChild;
selection.setBaseAndExtent(text, 1000, text, 4000);
let isDone = false;
let startTime = 0;
let counter = 0;
function runTest() {
if (startTime !== 0 && counter % kCount === 0) {
PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
PerfTestRunner.addRunTestEndMarker(); // For tracing metrics
}
if (isDone)
return;
window.requestAnimationFrame(() => {
if (counter % kCount === 0) {
PerfTestRunner.addRunTestStartMarker();
startTime = PerfTestRunner.now(); // For tracing metrics
}
selection.modify("extend", "forward", "word");
++counter;
runTest();
});
}
const text = container.firstChild;
var count = 0;
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
measurePaint({
iterationCount: 50,
warmUpCount: 5,
run: function() {
runTest();
},
done: function() {
container.textContent = '';
isDone = true;
if (count < 20) {
// Select all.
selection.collapse(container, 0);
if (count % 2)
selection.extend(container, 1);
} else if (count < 35) {
// Modify selection at beginning.
selection.setBaseAndExtent(text, 4000 - count * 10, text, text.length);
} else if (count == 35) {
selection.setBaseAndExtent(text, 1000, text, 4000);
} else {
// Extend selection at end.
selection.modify("extend", "forward", "word");
}
count++;
},
iterationCount: 10,
tracingCategories: 'blink',
traceEventsToMeasure: [
'LocalFrameView::RunPrePaintLifecyclePhase',
'LocalFrameView::RunPaintLifecyclePhase'
],
});
</script>
third_party/blink/perf_tests/paint/select-all-words.html deleted 100644 → 0
View file @ 8d259ac8
<!doctype html>
<body>
<script src="../resources/runner.js"></script>
<script src="../layout/resources/line-layout-perf-test.js"></script>
<div id="container"></div>
<script>
const kNumberOfWords = 10000 * 30;
const kCount = 10;
const container = document.getElementById('container');
const selection = window.getSelection();
container.textContent = (() => {
const words = [];
for (let i = 0; i < kNumberOfWords; ++i)
words.push(TextGenerator.createWord(i % 12 + 3));
return words.join(' ');
})();
let isDone = false;
let startTime = 0;
let counter = 0;
function runTest() {
if (startTime !== 0 && counter % kCount === 0) {
PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
PerfTestRunner.addRunTestEndMarker(); // For tracing metrics
}
if (isDone)
return;
window.requestAnimationFrame(() => {
if (counter % kCount === 0) {
PerfTestRunner.addRunTestStartMarker();
startTime = PerfTestRunner.now(); // For tracing metrics
}
selection.collapse(container, 0);
if (counter % 2 === 1)
selection.extend(container, 1);
++counter;
runTest();
});
}
PerfTestRunner.startMeasureValuesAsync({
unit: 'ms',
run: function() {
runTest();
},
done: function() {
container.textContent = '';
isDone = true;
},
iterationCount: 10,
tracingCategories: 'blink',
traceEventsToMeasure: [
'LocalFrameView::RunPrePaintLifecyclePhase',
'LocalFrameView::RunPaintLifecyclePhase'
],
});
</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