defined-in-has.html (1191B)
1 <!DOCTYPE html> 2 <title>:has() invalidation with :defined pseudo-class</title> 3 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined"> 6 <style> 7 #subject { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 } 12 #subject:has(:defined) { 13 background-color: green; 14 } 15 </style> 16 <body> 17 Test :defined pseudo-class invalidation with :has() 18 <div id="subject"> 19 <my-element></my-element> 20 </div> 21 <script src="/resources/testharness.js"></script> 22 <script src="/resources/testharnessreport.js"></script> 23 <script> 24 const GREEN = "rgb(0, 128, 0)"; 25 const RED = "rgb(255, 0, 0)"; 26 27 function assert_matches_defined(defined) { 28 assert_equals(getComputedStyle(subject).backgroundColor, defined ? GREEN : RED); 29 } 30 31 test(() => { 32 assert_matches_defined(false); 33 customElements.define("my-element", class MyElement extends HTMLElement { }); 34 assert_matches_defined(true); 35 }, "Test :has() invalidation with :defined pseudo-class"); 36 </script> 37 </body>