Add performance test for cascade of var()-references.

This test applies the same property over and over, with a different var()-reference each time. This is an unlucky case for Blink, because we don't have a cascade structure internally, so we pay the full cost of resolving the var()-reference every time. It also has a button which makes it easy to compare the same situation without var()-references. Change-Id: I02cdcd691cbcad97374330b31e19834306ae8319 Reviewed-on: https://chromium-review.googlesource.com/1146906Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Reviewed-by: Hayato Ito <hayato@chromium.org> Commit-Queue: Anders Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#590279}

Add performance test for cascade of var()-references.
This test applies the same property over and over, with a different var()-reference each time. This is an unlucky case for Blink, because we don't have a cascade structure internally, so we pay the full cost of resolving the var()-reference every time. It also has a button which makes it easy to compare the same situation without var()-references. Change-Id: I02cdcd691cbcad97374330b31e19834306ae8319 Reviewed-on: https://chromium-review.googlesource.com/1146906Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Reviewed-by: Hayato Ito <hayato@chromium.org> Commit-Queue: Anders Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#590279}
e1c73235 · Anders Hartvoll Ruud · Commit Bot · b62c1998 · e1c73235
Commit e1c73235 authored Sep 11, 2018 by Anders Hartvoll Ruud Committed by Commit Bot Sep 11, 2018
Hide whitespace changes
Inline Side-by-side

Showing with 74 additions and 0 deletions

third_party/blink/perf_tests/css/CustomPropertiesCascade.html ...d_party/blink/perf_tests/css/CustomPropertiesCascade.html +74 -0

No files found.
--- a/third_party/blink/perf_tests/css/CustomPropertiesCascade.html
+++ b/third_party/blink/perf_tests/css/CustomPropertiesCascade.html
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="../resources/runner.js"></script>
+    <script src="resources/utils.js"></script>
+</head>
+<body>
+    <header id=info>CSS Variables: <button id=button></button></header>
+</body>
+    <script>
+        const propCount = 1000;
+
+        // 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;
+        }
+
+        // Create a rule which defines 'propCount' custom properties at :root.
+        function createRootRule() {
+            let lines = [':root {'];
+            for (let i = 0; i < propCount; i++) {
+                lines.push(`--prop-${i}: ${hexcolor(i)};`);
+            }
+            lines.push('}');
+            return lines.join('\n');
+        }
+
+        // Create 'propCount' rules, each refering to a custom property created
+        // by createRootRule.
+        //
+        // If 'ref' is true, then the colors that would have been resolved via
+        // the var()-references are inlined instead.
+        function createDivRules() {
+            let lines = [];
+            for (let i = 0; i < propCount; i++) {
+                if (ref) {
+                    lines.push(`div { background-color: ${hexcolor(i)}; }`);
+                } else {
+                    lines.push(`div { background-color: var(--prop-${i}); }`);
+                }
+            }
+            return lines.join('\n');
+        }
+
+        applyCSSRule(createRootRule());
+        applyCSSRule(createDivRules());
+        createRegularDOMTree();
+
+        PerfTestRunner.measureTime({
+            description: 'Measures the performance of applying many var()-references.',
+            run: function() {
+                document.body.style = 'display: none';
+                forceStyleRecalc(document.body);
+                document.body.style = 'display: block';
+                forceStyleRecalc(document.body);
+            }
+        });
+    </script>
+</html>
\ No newline at end of file