Add performance test for StyleVariables::operator== cache

Locally, I get around avg:46ms without the optimization, and avg:8ms with the optimization. Although the numbers don't really matter as long as there's a clear signal. Bug: 1155495 Change-Id: I24696a553941fb85d857d51aa782a83dce6f29ff Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3562951 Reviewed-by: Steinar H Gunderson <sesse@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#988422}
chromium · Apr 4, 2022 · 1256369 · 1256369
1 parent 1fbc9f9
commit 1256369
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/third_party/blink/perf_tests/css/CustomPropertiesIdenticalSets.html b/third_party/blink/perf_tests/css/CustomPropertiesIdenticalSets.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Comparing identical custom property sets</title>
+<script src="../resources/runner.js"></script>
+<script src="resources/utils.js"></script>
+<main id=main></main>
+<script>
+  const PROP_COUNT = 1000;
+  const TOKEN_COUNT = 3000; // Per custom property.
+  const NODE_COUNT = 20000;
+
+  // Generate declarations with values that have many tokens (i.e. values
+  // that would be expensive to call StyleVariables::operator== on).
+  //
+  // --x0:X X X ... 0
+  // --x1:X X X ... 1
+  // ...
+  let base_value = 'X '.repeat(TOKEN_COUNT / 2);
+  let declaration_array = [];
+  for (let i = 0; i < PROP_COUNT; i++) {
+    let value = base_value + i.toString(); // Make value unique.
+    declaration_array.push(`--x${i}:${value};`);
+  }
+
+  // Generate two rules which produce identical StyleVariables objects.
+  // It's important that they are identical, so that StyleVariables::operator==
+  // has to take the slowest possible path.
+  let declarations = declaration_array.join('\n');
+  applyCSSRule(`#main { ${declarations} }`);
+  applyCSSRule(`#main.change { ${declarations} }`);
+
+  createDOMTree(main, NODE_COUNT, 1 /* siblings */);
+
+  PerfTestRunner.measureTime({
+    description: 'Comparing identical custom property sets',
+    run: function() {
+      forceStyleRecalc(main);
+      main.classList.toggle('change');
+      forceStyleRecalc(main);
+    }
+  });
+</script>