highlight-pseudo-from-font-computed.html (2177B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS ::highlight Pseudo-Element Test: ::highlight selector getComputedStyle</title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <meta name="assert" value="Font relative units are correctly reported in getComputedStyle"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 :root { 10 font-size: 16px; 11 } 12 div { 13 margin: 40px; 14 font-size: 20px; 15 } 16 ::highlight(highlight1) { 17 text-underline-offset: 0.5em; 18 text-decoration-line: underline; 19 text-decoration-color: green; 20 text-decoration-thickness: 0.25rem; 21 } 22 #h2::highlight(highlight1) { 23 text-underline-offset: 1.0em; 24 text-decoration-line: underline; 25 text-decoration-color: blue; 26 text-decoration-thickness: 0.125rem; 27 } 28 </style> 29 <div id="h1">A green 10px offset underline 4px thick</div> 30 <div id="h2">A blue 20px offset underline 2px thick</div> 31 <script> 32 let r1 = new Range(); 33 r1.setStart(h1, 0); 34 r1.setEnd(h1, 1); 35 let r2 = new Range(); 36 r2.setStart(h2, 0); 37 r2.setEnd(h2, 1); 38 CSS.highlights.set("highlight1", new Highlight(r1, r2)); 39 40 let highlightPseudo = "::highlight(highlight1)"; 41 test(() => { 42 let style = getComputedStyle(document.documentElement, highlightPseudo); 43 assert_equals(style.textUnderlineOffset, "8px", "Text underline offset is 8px."); 44 assert_equals(style.textDecorationThickness, "4px", "Text decoration thickness is 4px."); 45 }, `getComputedStyle() for root element`); 46 47 test(() => { 48 let style = getComputedStyle(h1, highlightPseudo); 49 assert_equals(style.textUnderlineOffset, "10px", "Text underline offset is 10px."); 50 assert_equals(style.textDecorationThickness, "4px", "Text decoration thickness is 4px."); 51 }, `getComputedStyle() for root highlight applied to div`); 52 53 test(() => { 54 let style = getComputedStyle(h2, highlightPseudo); 55 assert_equals(style.textUnderlineOffset, "20px", "Text underline offset is 20px."); 56 assert_equals(style.textDecorationThickness, "2px", "Text decoration thickness is 2px."); 57 }, `getComputedStyle() for div specific highlight`); 58 59 </script>