wavy-decorations-many.html | Explore in Territory

<!DOCTYPE html>
<title>Wavy decoration painting: many short decorations</title>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>
* {
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
}
main > span {
  text-decoration: red wavy underline;
}
main.blue > span {
  text-decoration: blue wavy underline;
}
</style>
<main><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet,</span> <span>consectetur</span> <span>adipiscing</span> <span>elit,</span> <span>sed</span> <span>do</span> <span>eiusmod</span> <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span> <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua.</span> </main>
<script>
  const main = document.querySelector("main");
  main.innerHTML = main.innerHTML.repeat(420);

  measurePaint({
    description: "Measure frame time for painting wavy decorations with many short decorations",
    run: () => void document.querySelector("main").classList.toggle("blue"),
  });
</script>

chromium/third_party/blink/perf_tests/paint/wavy-decorations-many.html