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