custom-highlight-painting-vertical-writing-mode-001.html (1888B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Vertical Writing Mode</title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <link rel="match" href="custom-highlight-painting-vertical-writing-mode-001-ref.html"> 6 <link rel="stylesheet" href="../../css-pseudo/support/highlights.css"> 7 <meta name="assert" value="::highlight overlay is painted correctly when the highlighted text is in a vertical writing mode"> 8 <meta name="fuzzy" content="0-255;0-20"> 9 <style> 10 #verticalRL { 11 writing-mode: vertical-rl; 12 } 13 #verticalLR { 14 writing-mode: vertical-lr; 15 } 16 #sidewaysRL { 17 writing-mode: sideways-rl; 18 } 19 #sidewaysLR { 20 writing-mode: sideways-lr; 21 } 22 ::highlight(example-highlight) { 23 background-color: yellow; 24 color: blue; 25 } 26 </style> 27 <body> 28 <div id="verticalRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div> 29 <div id="verticalLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div> 30 <div id="sidewaysRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div> 31 <div id="sidewaysLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div> 32 <script> 33 let verticalRLRange = new Range(); 34 verticalRLRange.setStart(verticalRL, 0); 35 verticalRLRange.setEnd(verticalRL, 2); 36 let verticalLRRange = new Range(); 37 verticalLRRange.setStart(verticalLR, 0); 38 verticalLRRange.setEnd(verticalLR, 2); 39 let sidewaysRLRange = new Range(); 40 sidewaysRLRange.setStart(sidewaysRL, 0); 41 sidewaysRLRange.setEnd(sidewaysRL, 2); 42 let sidewaysLRRange = new Range(); 43 sidewaysLRRange.setStart(sidewaysLR, 0); 44 sidewaysLRRange.setEnd(sidewaysLR, 2); 45 46 CSS.highlights.set("example-highlight", 47 new Highlight(verticalRLRange, verticalLRRange, sidewaysLRRange, sidewaysRLRange)); 48 </script>