| <!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> |
