has-slotted-functional-changing-002.tentative.html (2127B)
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 <div id="test"> 18 <template shadowrootmode="open"> 19 <slot></slot> 20 <p id="target">This text will be styled.</p> 21 <style> 22 p { 23 color: rgb(0 255 0); 24 } 25 slot:not(:has-slotted(span)) + p { 26 color: rgb(0 0 255); 27 } 28 slot:not(:has-slotted(div)) + p { 29 color: rgb(255 0 255); 30 } 31 </style> 32 </template> 33 </div> 34 35 <script> 36 const blue = 'rgb(0, 0, 255)'; 37 const green = 'rgb(0, 255, 0)'; 38 const fuchsia = 'rgb(255, 0, 255)'; 39 test(function () { 40 const test = document.getElementById('test'); 41 const target = test.shadowRoot.getElementById('target'); 42 let styles = getComputedStyle(target); 43 assert_equals(styles.getPropertyValue('color'), green); 44 test.innerHTML = '<span></span>'; 45 styles = getComputedStyle(target); 46 assert_equals(styles.getPropertyValue('color'), blue); 47 test.textContent = ''; 48 styles = getComputedStyle(target); 49 assert_equals(styles.getPropertyValue('color'), green); 50 const div = document.createElement('div'); 51 test.replaceChild(div, test.firstElementChild); 52 styles = getComputedStyle(target); 53 assert_equals(styles.getPropertyValue('color'), fuchsia); 54 const span = document.createElement('span'); 55 test.replaceChildren(span); 56 styles = getComputedStyle(target); 57 assert_equals(styles.getPropertyValue('color'), blue); 58 test.replaceChildren(); 59 styles = getComputedStyle(target); 60 assert_equals(styles.getPropertyValue('color'), green); 61 }); 62 </script> 63 </body> 64 65 </html>