has-slotted-changing-001.html (3327B)
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"><template shadowrootmode="open"> 18 <slot></slot> 19 <p id="target">This text will be styled.</p> 20 <style> 21 p { 22 color: rgb(0 255 0); 23 } 24 slot:not(:has-slotted) + p { 25 color: rgb(0 0 255); 26 } 27 </style> 28 </template></div> 29 30 <script> 31 const blue = 'rgb(0, 0, 255)'; 32 const green = 'rgb(0, 255, 0)'; 33 test(function (t) { 34 const test = document.getElementById('test'); 35 const target = test.shadowRoot.getElementById('target'); 36 t.add_cleanup(() => { test.innerHTML = '' }); 37 let styles = getComputedStyle(target); 38 assert_equals(styles.getPropertyValue('color'), blue); 39 }, "empty node is blue"); 40 41 test(function (t) { 42 const test = document.getElementById('test'); 43 const target = test.shadowRoot.getElementById('target'); 44 test.innerHTML = ' '; 45 t.add_cleanup(() => { test.innerHTML = '' }); 46 styles = getComputedStyle(target); 47 assert_equals(styles.getPropertyValue('color'), green); 48 test.innerHTML = ''; 49 styles = getComputedStyle(target); 50 assert_equals(styles.getPropertyValue('color'), blue); 51 }, "setting innerHTML to whitespace invalidates and becomes green, then empty string becomes blue"); 52 53 test(function (t) { 54 const test = document.getElementById('test'); 55 const target = test.shadowRoot.getElementById('target'); 56 test.replaceChildren(document.createElement('div')); 57 assert_equals(styles.getPropertyValue('color'), green); 58 test.replaceChildren(); 59 styles = getComputedStyle(target); 60 assert_equals(styles.getPropertyValue('color'), blue); 61 }, "calling replaceChildren invalidates and becomes green, emptying with replaceChildren becomes blue"); 62 63 test(function (t) { 64 const test = document.getElementById('test'); 65 const target = test.shadowRoot.getElementById('target'); 66 const div = document.createElement('div'); 67 test.innerHTML = ''; 68 test.append(div); 69 t.add_cleanup(() => { test.innerHTML = '' }); 70 styles = getComputedStyle(target); 71 assert_equals(styles.getPropertyValue('color'), green); 72 }, "calling append invalidates and becomes green"); 73 74 test(function (t) { 75 const test = document.getElementById('test'); 76 const target = test.shadowRoot.getElementById('target'); 77 const node = document.createTextNode(' '); 78 test.replaceChildren(node); 79 t.add_cleanup(() => { test.innerHTML = '' }); 80 styles = getComputedStyle(target); 81 assert_equals(styles.getPropertyValue('color'), green); 82 test.replaceChildren(); 83 styles = getComputedStyle(target); 84 assert_equals(styles.getPropertyValue('color'), blue); 85 }, "calling replaceChildren(textnode) invalidates and becomes green"); 86 </script> 87 </body> 88 89 </html>