highlight-cascade-007.html (3884B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title> 4 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7591"> 7 <meta name="assert" content="This test verifies that non-applicable property declarations are ignored in highlight pseudos, that the computed values of ‘font-size’ and ‘line-height’ in highlight pseudos are taken from the originating element, and that ‘text-shadow’ in highlight pseudos respects these values when given ‘em’ and ‘lh’ units."> 8 <script src="../support/selections.js"></script> 9 <link rel="stylesheet" href="../support/highlights.css"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 main { 14 font-size: 12px; 15 line-height: 13px; 16 } 17 main span { 18 font-size: 18px; 19 line-height: 19px; 20 } 21 /* * (universal) */::selection { 22 font-size: 42px; 23 line-height: 43px; 24 } 25 main .M::selection { 26 text-shadow: green 1em 0; 27 } 28 main .W::selection { 29 text-shadow: green 0 1lh; 30 } 31 /* * (universal) */::selection { 32 text-decoration-thickness: 1em; 33 } 34 </style> 35 <main> 36 <div class="M"><div><span>M</span></div></div> 37 <div class="W"><div><span>W</span></div></div> 38 <div class="U"><div><span>U</span></div></div> 39 </main> 40 <script> 41 selectNodeContents(document.querySelector("main")); 42 43 const m = getComputedStyle(document.querySelector("main .M"), "::selection"); 44 const mSpan = getComputedStyle(document.querySelector("main .M span"), "::selection"); 45 test(() => void assert_equals(m.fontSize, "12px"), 46 "M::selection’s font-size is the same as in M"); 47 test(() => void assert_equals(mSpan.fontSize, "18px"), 48 "M span::selection’s font-size is the same as in M span"); 49 test(() => void assert_equals(m.textShadow, "rgb(0, 128, 0) 12px 0px 0px"), 50 "M::selection’s own text-shadow respects M’s font-size"); 51 test(() => void assert_equals(mSpan.textShadow, "rgb(0, 128, 0) 12px 0px 0px"), 52 "M span::selection’s inherited text-shadow respects M’s font-size"); 53 54 const w = getComputedStyle(document.querySelector("main .W"), "::selection"); 55 const wSpan = getComputedStyle(document.querySelector("main .W span"), "::selection"); 56 test(() => void assert_equals(w.lineHeight, "13px"), 57 "W::selection’s line-height is the same as in W"); 58 test(() => void assert_equals(wSpan.lineHeight, "19px"), 59 "W span::selection’s line-height is the same as in W span"); 60 test(() => void assert_equals(w.textShadow, "rgb(0, 128, 0) 0px 13px 0px"), 61 "W::selection’s own text-shadow respects W’s line-height"); 62 test(() => void assert_equals(wSpan.textShadow, "rgb(0, 128, 0) 0px 13px 0px"), 63 "W span::selection’s inherited text-shadow respects W’s line-height"); 64 65 const u = getComputedStyle(document.querySelector("main .U"), "::selection"); 66 const uSpan = getComputedStyle(document.querySelector("main .U span"), "::selection"); 67 test(() => void assert_equals(u.fontSize, "12px"), 68 "U::selection’s font-size is the same as in U"); 69 test(() => void assert_equals(uSpan.fontSize, "18px"), 70 "U span::selection’s font-size is the same as in U span"); 71 test(() => void assert_equals(u.textDecorationThickness, "12px"), 72 "U::selection’s own text-decoration-thickness respects U’s font-size"); 73 test(() => void assert_equals(uSpan.textDecorationThickness, "18px"), 74 "U span::selection’s own text-decoration-thickness respects U span’s font-size"); 75 </script>