custom-highlights-baseline.html | Explore in Territory

<!DOCTYPE html>
<title>Custom Highlights Painting Baseline</title>
<style>
.example > p > span {
  color: blue;
  background: yellow;
}
</style>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<pre id="log"></pre>
<script>
  const REPETITIONS = 1000;
  const LOREM_IPSUM = "Lorem ipsum dolor sit <span>a</span>met, consectetur <span>a</span>dipiscing elit, sed do eiusmod tempor incididunt ut l<span>a</span>bore et dolore m<span>a</span>gn<span>a</span> <span>a</span>liqu<span>a</span>. Ut enim <span>a</span>d minim veni<span>a</span>m, quis nostrud exercit<span>a</span>tion ull<span>a</span>mco l<span>a</span>boris nisi ut <span>a</span>liquip ex e<span>a</span> commodo consequ<span>a</span>t. Duis <span>a</span>ute irure dolor in reprehenderit in volupt<span>a</span>te velit esse cillum dolore eu fugi<span>a</span>t null<span>a</span> p<span>a</span>ri<span>a</span>tur. Excepteur sint occ<span>a</span>ec<span>a</span>t cupid<span>a</span>t<span>a</span>t non proident, sunt in culp<span>a</span> qui offici<span>a</span> deserunt mollit <span>a</span>nim id est l<span>a</span>borum.";

  function setupTest() {
    for (let i = 0; i < REPETITIONS; i++) {
      let p = document.createElement("p");
      p.innerHTML = LOREM_IPSUM;
      document.body.appendChild(p);
    }
  }

  setupTest();

  measurePaint({
    description: "Measure time for painting <span> elements to be used as baseline for Custom Highlights (emulates searching 'a' in a large text)",
    run: () => document.body.className = "example",
    setup: () => document.body.className = "",
  });
</script>
chromium/third_party/blink/perf_tests/paint/custom-highlights-baseline.html
