has-with-is-child-combinator.html (2121B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Selector Invalidation: :has(> :is()) with child combinator</title> 4 <link rel="author" title="Nipun Shukla" href="mailto:nipun_shukla@apple.com"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 8 <style> 9 div, main { color: grey } 10 #subject:has(> :is(.parent > .child)) { color: green } 11 #subject:has(> :is(.parent .descendant)) { color: blue } 12 #subject:has(:is(.deep-parent > .deep-child)) { color: red } 13 </style> 14 15 <main id=main> 16 <div id=subject> 17 <div id=direct_child> 18 <div id=grandchild></div> 19 </div> 20 </div> 21 </main> 22 23 <script> 24 const grey = 'rgb(128, 128, 128)'; 25 const green = 'rgb(0, 128, 0)'; 26 const blue = 'rgb(0, 0, 255)'; 27 const red = 'rgb(255, 0, 0)'; 28 29 function testColor(test_name, color) { 30 test(function() { 31 assert_equals(getComputedStyle(subject).color, color); 32 }, test_name); 33 } 34 35 testColor('Initial color', grey); 36 37 // :has(> :is(.parent > .child)) 38 subject.classList.add('parent'); 39 testColor('add .parent to subject', grey); 40 direct_child.classList.add('child'); 41 testColor('add .child to direct_child', green); 42 direct_child.classList.remove('child'); 43 testColor('remove .child from direct_child', grey); 44 subject.classList.remove('parent'); 45 46 // :has(> :is(.parent .descendant)) 47 subject.classList.add('parent'); 48 testColor('add .parent to subject for .descendant test', grey); 49 direct_child.classList.add('descendant'); 50 testColor('add .descendant to direct_child', blue); 51 direct_child.classList.remove('descendant'); 52 testColor('remove .descendant from direct_child', grey); 53 subject.classList.remove('parent'); 54 55 // :has(:is(.deep-parent > .deep-child)) 56 grandchild.classList.add('deep-child'); 57 testColor('add .deep-child to grandchild', grey); 58 direct_child.classList.add('deep-parent'); 59 testColor('add .deep-parent to direct_child', red); 60 direct_child.classList.remove('deep-parent'); 61 testColor('remove .deep-parent from direct_child', grey); 62 grandchild.classList.remove('deep-child'); 63 64 </script>