has-slotted-functional-changing-004.tentative.html (2252B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Changing content targetting :has-slotted(...) through a single shadow root</title> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 </head> 14 15 <body> 16 17 18 <div id="test"> 19 <template shadowrootmode="open"> 20 <div id="inner"> 21 <template shadowrootmode="open"> 22 <slot></slot> 23 <p id="target">This text will be styled.</p> 24 <style> 25 p { 26 color: rgb(0 255 0); 27 } 28 slot:not(:has-slotted(span)) + p { 29 color: rgb(0 0 255); 30 } 31 slot:not(:has-slotted(div)) + p { 32 color: rgb(255 0 255); 33 } 34 </style> 35 </template> 36 </div> 37 </template> 38 </div> 39 40 41 <script> 42 const blue = 'rgb(0, 0, 255)'; 43 const green = 'rgb(0, 255, 0)'; 44 const fuchsia = 'rgb(255, 0, 255)'; 45 test(function () { 46 const test = document.getElementById('test'); 47 const inner = test.shadowRoot.getElementById('inner'); 48 const target = inner.shadowRoot.getElementById('target'); 49 let styles = getComputedStyle(target); 50 assert_equals(styles.getPropertyValue('color'), green); 51 const span = document.createElement('span'); 52 test.append(span); 53 styles = getComputedStyle(target); 54 assert_equals(styles.getPropertyValue('color'), blue); 55 test.removeChild(span); 56 styles = getComputedStyle(target); 57 assert_equals(styles.getPropertyValue('color'), green); 58 test.innerHTML = '<div></div>'; 59 styles = getComputedStyle(target); 60 assert_equals(styles.getPropertyValue('color'), fuchsia); 61 test.replaceChildren(span); 62 styles = getComputedStyle(target); 63 assert_equals(styles.getPropertyValue('color'), blue); 64 span.remove(); 65 styles = getComputedStyle(target); 66 assert_equals(styles.getPropertyValue('color'), green); 67 }); 68 </script> 69 </body> 70 71 </html>