[css-variables] Adding 2 new perf tests
This CL defines new performance tests to evaluate 2 different cases.
One is measuring how efficient we implement the propagation of a custom
property when its declaration changes.
The other test evaluates the performance of a case that apparently
forces a style recalc which implies resolving all the variable
references.
Change-Id: Ib4576670ee9914aca8d1eea9eac3e085493350ca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2153124
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#763335}
diff --git a/third_party/blink/perf_tests/css/ChangeStyleCSSVariableRecalc.html b/third_party/blink/perf_tests/css/ChangeStyleCSSVariableRecalc.html
new file mode 100644
index 0000000..ae4a8dad
--- /dev/null
+++ b/third_party/blink/perf_tests/css/ChangeStyleCSSVariableRecalc.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<head>
+ <title>CSS Custom Properties and Variables: Changes that require resolving variable references</title>
+ <script src="../resources/runner.js"></script>
+ <script src="resources/utils.js"></script>
+</head>
+<style>
+ .container > div {
+ display: inline-block;
+ height: 14px;
+ width: 14px;
+ box-sizing: border-box;
+ border: 1px solid green;
+ }
+ .container {
+ height: 0px;
+ overflow: hidden;
+ }
+ .border0 > div { border-width: 0px; }
+ .border1 > div { border-width: 1px; }
+ .border2 > div { border-width: 2px; }
+ .border3 > div { border-width: 3px; }
+ .border4 > div { border-width: 4px; }
+</style>
+<body>
+ <header id=info>CSS Variables: <button id=button></button></header>
+ <script>
+ const NUM_ELEMENTS = 20000;
+ const PROP_COUNT = 1000;
+ const MAX_WIDTH = 4;
+ let curWidth = -1;
+ let root = document.createElement('div');
+ root.classList.add(`container`);
+
+ // Add ?ref to URL to run a similar test without CSS Variables.
+ const ref = document.location.href.endsWith('?ref');
+ button.textContent = ref ? 'OFF' : 'ON';
+ button.addEventListener('click', function(){
+ let href = document.location.href;
+ if (ref) {
+ document.location.href = href.substr(0, href.length - 4);
+ } else {
+ document.location.href = href + '?ref';
+ }
+ });
+
+ function hexcolor(i) {
+ let hex = i.toString(16);
+ while (hex.length < 6)
+ hex = '0' + hex;
+ return '#' + hex;
+ }
+
+ function createDOMTree() {
+ for (let n = 0; n < NUM_ELEMENTS; n++) {
+ let div = document.createElement('div');
+ let i = n % PROP_COUNT;
+ if (ref)
+ div.style.cssText = 'background-color:' + hexcolor(i);
+ else
+ div.style.cssText = 'background-color: var(--prop-' + i + ')';
+ root.appendChild(div);
+ }
+ document.body.appendChild(root);
+ }
+
+ // Create a rule which defines 'propCount' custom properties at :root.
+ function createRootRule() {
+ if (ref)
+ return;
+ let lines = [':root {'];
+ for (let i = 0; i < PROP_COUNT; i++) {
+ lines.push(`--prop-${i}: ${hexcolor(i)};`);
+ }
+ lines.push('}');
+ return lines.join('\n');
+ }
+
+ applyCSSRule(createRootRule());
+ createDOMTree();
+ PerfTestRunner.measureTime({
+ description: "Measures the performance of the CSS variable reference recalc.",
+ setup: () => {
+ root.classList.remove(`border${curWidth}`);
+ curWidth = (curWidth + 1) % MAX_WIDTH;
+ },
+ run: function() {
+ root.classList.add(`border${curWidth}`);
+ forceStyleRecalc(document.body);
+ },
+ });
+ </script>
+</body>
diff --git a/third_party/blink/perf_tests/css/ChangeStyleCustomPropertyDeclaration.html b/third_party/blink/perf_tests/css/ChangeStyleCustomPropertyDeclaration.html
new file mode 100644
index 0000000..9ebbab1
--- /dev/null
+++ b/third_party/blink/perf_tests/css/ChangeStyleCustomPropertyDeclaration.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<head>
+ <title>CSS Custom Properties and Variables: Changes in property's declaration</title>
+ <script src="../resources/runner.js"></script>
+ <script src="resources/utils.js"></script>
+</head>
+<style>
+ .green { --prop: green; }
+ .red { --prop: red; }
+ body > div > div { background-color: grey; }
+</style>
+<body>
+ <script>
+ function createDOMTree() {
+ let div = document.createElement('div');
+ div.innerHTML = '<div><div><div><div><div style="color: var(--prop)">' + '' + '</div></div></div></div></div>';
+ for (let i = 0; i < 10000; i++) {
+ document.body.appendChild(div.cloneNode(true));
+ }
+ }
+ createDOMTree();
+ var theme;
+ PerfTestRunner.measureTime({
+ description: "Measures the performance in the propagation of a custom property declaration.",
+ setup: () => {
+ document.body.classList.remove(theme);
+ theme = theme == 'green' ? 'red' : 'green';
+ },
+ run: function() {
+ document.body.classList.add(theme);
+ forceStyleRecalc(document.body);
+ },
+ });
+ </script>
+</body>
