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