host-context-pseudo-class-in-has.html (1848B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: Invalidation for :host-context() inside :has()</title> 4 <link rel="author" title="Byungwoo" href="mailto:blee@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="host_parent"><div id="host"></div></div> 9 <script> 10 var shadow = host.attachShadow({ mode: 'open' }); 11 shadow.innerHTML = ` 12 <style> 13 .subject { 14 color: red; 15 } 16 .subject:has(:is(:host-context(.a) > .foo .bar)) { color: green } 17 .subject:has(:is(:host-context(.a) .bar)) { color: blue } 18 </style> 19 <div class="foo"> 20 <div id="subject1" class="subject"> 21 <div class="bar"></div> 22 </div> 23 </div> 24 <div> 25 <div class="foo"> 26 <div id="subject2" class="subject"> 27 <div class="bar"></div> 28 </div> 29 </div> 30 </div> 31 `; 32 33 const red = "rgb(255, 0, 0)"; 34 const green = "rgb(0, 128, 0)"; 35 const blue = "rgb(0, 0, 255)"; 36 37 function checkColor(test_name, subject_id, subject_color) { 38 test(function() { 39 let subject = shadow.querySelector("#" + subject_id); 40 assert_equals(getComputedStyle(subject).color, subject_color); 41 }, test_name + ": Check #" + subject_id + " color"); 42 } 43 44 checkColor("Before adding 'a' to #host_parent", "subject1", red); 45 checkColor("Before adding 'a' to #host_parent", "subject2", red); 46 47 host_parent.classList.add('a'); 48 49 checkColor("After adding 'a' to #host_parent", "subject1", green); 50 checkColor("After adding 'a' to #host_parent", "subject2", blue); 51 52 host_parent.classList.remove('a'); 53 54 checkColor("After removing 'a' from #host_parent", "subject1", red); 55 checkColor("After removing 'a' from #host_parent", "subject2", red); 56 </script>