CustomPropertiesIdenticalSets.html | Explore in Territory

<!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>
chromium/third_party/blink/perf_tests/css/CustomPropertiesIdenticalSets.html
