state-in-has.html (2139B)
1 <!doctype html> 2 <title>:has() invalidation with :state() pseudo-class</title> 3 <link rel="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" /> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#relational" /> 5 <link rel="help" href="https://github.com/whatwg/html/pull/8467" /> 6 <style> 7 #subject { 8 background-color: #f00; 9 } 10 #subject:has(:state(--green)) { 11 background-color: #0f0; 12 } 13 #subject:has(:state(--blue)) { 14 background-color: #00f; 15 } 16 </style> 17 <body> 18 Test :state() pseudo-class invalidation with :has() 19 <div id="subject"> 20 <my-element id="child"></my-element> 21 </div> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script> 25 const RED = "rgb(255, 0, 0)"; 26 const GREEN = "rgb(0, 255, 0)"; 27 const BLUE = "rgb(0, 0, 255)"; 28 29 test(() => { 30 customElements.define( 31 "my-element", 32 class MyElement extends HTMLElement { 33 connectedCallback() { 34 this.elementInternals = this.attachInternals(); 35 } 36 }, 37 ); 38 assert_equals(getComputedStyle(subject).backgroundColor, RED); 39 child.elementInternals.states.add("--green"); 40 assert_equals(getComputedStyle(subject).backgroundColor, GREEN); 41 child.elementInternals.states.clear(); 42 assert_equals(getComputedStyle(subject).backgroundColor, RED); 43 44 child.elementInternals.states.add("--blue"); 45 assert_equals(getComputedStyle(subject).backgroundColor, BLUE); 46 child.elementInternals.states.clear(); 47 assert_equals(getComputedStyle(subject).backgroundColor, RED); 48 49 child.elementInternals.states.add("--green"); 50 child.elementInternals.states.add("--blue"); 51 assert_equals(getComputedStyle(subject).backgroundColor, BLUE); 52 child.elementInternals.states.delete("--blue"); 53 assert_equals(getComputedStyle(subject).backgroundColor, GREEN); 54 child.elementInternals.states.delete("--green"); 55 assert_equals(getComputedStyle(subject).backgroundColor, RED); 56 }, "Test :has() invalidation with :state() pseudo-classes"); 57 </script> 58 </body>