grouping-with-checked.html (1956B)
1 <!doctype html> 2 <title>::part():disabled grouping</title> 3 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/"> 4 <style> 5 my-element::part(checkbox) { 6 font-family: fantasy; 7 background-color: #ff0000; 8 } 9 #grouped { 10 color: #ff0000; 11 } 12 my-element::part(checkbox):checked { 13 background-color: #00ff00; 14 } 15 my-element::part(checkbox):checked, 16 #grouped { 17 color: #00ff00; 18 } 19 my-element::part(not-a-part):checked, 20 #grouped { 21 font-family: monospace; 22 } 23 </style> 24 <body> 25 <my-element id="subject"></my-element> 26 <p id="grouped">Text</p> 27 <script src="/resources/testharness.js"></script> 28 <script src="/resources/testharnessreport.js"></script> 29 <script> 30 const RED = "rgb(255, 0, 0)"; 31 const GREEN = "rgb(0, 255, 0)"; 32 customElements.define( 33 "my-element", 34 class MyElement extends HTMLElement { 35 connectedCallback() { 36 this.attachShadow({ 37 mode: "open", 38 }).innerHTML = ` 39 <input part="checkbox" type="checkbox" checked /> 40 `; 41 this.elementInternals = this.attachInternals(); 42 } 43 44 get inner() { 45 return this.shadowRoot.querySelector("[part=checkbox]"); 46 } 47 }, 48 ); 49 50 test(() => { 51 assert_equals(getComputedStyle(subject.inner).fontFamily, 'fantasy'); 52 }, "Styles applied to ::part(...)"); 53 54 test(() => { 55 assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN); 56 }, "Styles applied to ::part(...):checked"); 57 58 test(() => { 59 assert_equals(getComputedStyle(subject.inner).color, GREEN); 60 assert_equals(getComputedStyle(grouped).color, GREEN); 61 }, "Styles applied via grouped selector including matched ::part(...):checked"); 62 63 test(() => { 64 assert_equals(getComputedStyle(grouped).fontFamily, 'monospace'); 65 }, "Styles applied via grouped selector including unmatched ::part(...):checked"); 66 </script> 67 </body>