custom-highlight-logical-metrics-001.html (992B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Length relative to the 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-001-ref.html"> 7 <meta name="assert" value="lengths depending on viewports take the correct values with vertical text"> 8 <meta name="fuzzy" content="0-30;0-10"> 9 <head> 10 <style> 11 div { 12 width: 200px; 13 height: 100px; 14 line-height: 3em; 15 } 16 ::highlight(highlight1) { 17 text-underline-offset: 1svb; 18 text-decoration-line: underline; 19 text-decoration-color: green; 20 text-decoration-thickness: 1svi; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="h1">With viewport size</div> 26 <script> 27 let r1 = new Range(); 28 r1.setStart(h1, 0); 29 r1.setEnd(h1, 1); 30 CSS.highlights.set("highlight1", new Highlight(r1)); 31 </script> 32 </body>