custom-highlight-dynamic-container-metrics-002.html (1561B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>CSS Highlight API Test: Highlights using dynamic container sizes</title> 5 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling"> 7 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 8 <link rel="match" href="custom-highlight-container-metrics-002-ref.html"> 9 <meta name="assert" value="lengths depending on containers take the correct values when the container size chnages"> 10 <meta name="fuzzy" content="0-60;0-25"> 11 <script src="/common/reftest-wait.js"></script> 12 <head> 13 <style> 14 .wrapper { 15 container: wrapper / size; 16 width: 400px; 17 height: 200px; 18 } 19 .resize { 20 width: 200px; 21 height: 100px; 22 } 23 ::highlight(highlight1) { 24 text-underline-offset: 2cqw; 25 text-decoration-line: underline; 26 text-decoration-color: green; 27 text-decoration-thickness: 4cqh; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="container" class="wrapper"> 33 <div id="h1">With container size</div> 34 </div> 35 <div id="h2">Without container size</div> 36 <script> 37 let r1 = new Range(); 38 r1.setStart(h1, 0); 39 r1.setEnd(h1, 1); 40 let r2 = new Range(); 41 r2.setStart(h2, 0); 42 r2.setEnd(h2, 1); 43 CSS.highlights.set("highlight1", new Highlight(r1, r2)); 44 requestAnimationFrame(() => { 45 container.classList.add('resize'); 46 requestAnimationFrame(() => takeScreenshot()); 47 }); 48 </script> 49 </body> 50 </html>