custom-highlight-dynamic-logical-metrics-001.html (1191B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Length relative to a changing logical direction</title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling"> 6 <link rel="match" href="custom-highlight-logical-metrics-002-ref.html"> 7 <meta name="assert" value="lengths depending on viewports and logical direction when the direction changes"> 8 <meta name="fuzzy" content="0-30;0-10"> 9 <head> 10 <style> 11 div { 12 width: 100px; 13 height: 200px; 14 line-height: 3em; 15 } 16 .vertical { 17 writing-mode: vertical-lr; 18 } 19 ::highlight(highlight1) { 20 text-underline-offset: 1svb; 21 text-decoration-line: underline; 22 text-decoration-color: green; 23 text-decoration-thickness: 1svi; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="h1">With viewport size</div> 29 <script> 30 let r1 = new Range(); 31 r1.setStart(h1, 0); 32 r1.setEnd(h1, 1); 33 CSS.highlights.set("highlight1", new Highlight(r1)); 34 requestAnimationFrame(() => { 35 h1.classList.add('vertical'); 36 requestAnimationFrame(() => takeScreenshot()); 37 }); 38 </script> 39 </body>