defined.html (2138B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors Invalidation: :defined</title> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-defined-pseudo"> 6 <meta name="assert" content="This tests that the :defined selector is effective"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 #container { 12 color: gray; 13 } 14 15 #a1:defined { 16 color: blue; 17 } 18 :defined + #b1 { 19 color: green; 20 } 21 :defined > #c1 { 22 color: red; 23 } 24 div + :defined + * #d1 { 25 color: yellow; 26 } 27 </style> 28 </head> 29 <body> 30 <section id="container"> 31 <elucidate-late id="a1"></elucidate-late> 32 <div id="b1"></div> 33 <elucidate-late> 34 <div id="c1"></div> 35 </elucidate-late> 36 <div> 37 <div id="d1"></div> 38 </div> 39 </section> 40 41 <script> 42 const gray = "rgb(128, 128, 128)"; 43 const blue = "rgb(0, 0, 255)"; 44 const green = "rgb(0, 128, 0)"; 45 const red = "rgb(255, 0, 0)"; 46 const yellow = "rgb(255, 255, 0)"; 47 48 function assertGray(a, b, c, d) { 49 assert_equals(getComputedStyle(a).color, gray); 50 assert_equals(getComputedStyle(b).color, gray); 51 assert_equals(getComputedStyle(c).color, gray); 52 assert_equals(getComputedStyle(d).color, gray); 53 } 54 55 function assertColorful(a, b, c, d) { 56 assert_equals(getComputedStyle(a).color, blue); 57 assert_equals(getComputedStyle(b).color, green); 58 assert_equals(getComputedStyle(c).color, red); 59 assert_equals(getComputedStyle(d).color, yellow); 60 } 61 62 class ElucidateLate extends HTMLElement { 63 constructor() { 64 super(); 65 } 66 } 67 68 test(() => { 69 assertGray(a1, b1, c1, d1); 70 customElements.define('elucidate-late', ElucidateLate); 71 assertColorful(a1, b1, c1, d1); 72 }, ":defined selector is effective"); 73 74 </script> 75 </body> 76 </html>