highlight-pseudos-inheritance-computed-001.html (1663B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: highlight selectors inheritance getComputedStyle</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <meta name="assert" content="This test checks that computed style is properly resolved for highlight pseudos even when 'display: contents' is involved."> 8 <style> 9 .target::selection { 10 background-color: green; 11 color: lime; 12 } 13 .target::target-text { 14 background-color: green; 15 color: lime; 16 } 17 .target::search-text { 18 background-color: green; 19 color: lime; 20 } 21 .target::search-text:current { 22 background-color: red; 23 color: red; 24 } 25 .target::spelling-error { 26 background-color: green; 27 color: lime; 28 } 29 .target::grammar-error { 30 background-color: green; 31 color: lime; 32 } 33 .target::highlight(foo) { 34 background-color: green; 35 color: lime; 36 } 37 </style> 38 <div class="target"><span id="child1"></span></div> 39 <div class="target" style="display: contents;"><span id="child2"></span></div> 40 <script> 41 for (const pseudo of ["::selection", "::target-text", "::search-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) { 42 for (const child of [child1, child2]) { 43 test(() => { 44 let style = getComputedStyle(child, pseudo); 45 assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green."); 46 assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime."); 47 }, `getComputedStyle() for ${pseudo} at #${child.id}`); 48 } 49 } 50 </script>