is-where-pseudo-containing-hard-pseudo.html (3123B)
1 <!DOCTYPE html> 2 <title>CSS Selectors Invalidation: :is and :where selectors containing "hard" selectors</title> 3 <link rel="author" title="David Shin" href="dshin@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#logical-combination"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874042"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .container { 10 color: grey; 11 } 12 13 #subject1:is(.other-match, :has(.descendant)) { 14 color: red; 15 } 16 17 #subject1:is(.parent > .other-match, .parent > :has(.descendant)) { 18 color: orangered; 19 } 20 21 #subject2:where(.other-match, :has(.descendant)) { 22 color: darkred; 23 } 24 25 #subject2:where(.parent > .other-match, .parent > :has(.descendant)) { 26 color: pink; 27 } 28 29 #subject3:is(.other-match, :nth-child(1000 of .another-match)) { 30 color: green; 31 } 32 33 #subject3:is(.parent > .other-match, .parent > :nth-child(1000 of .another-match)) { 34 color: lightgreen; 35 } 36 37 #subject4:where(.other-match, :nth-child(1000 of .another-match)) { 38 color: darkgreen; 39 } 40 41 #subject4:where(.parent > .other-match, .parent > :nth-child(1000 of .another-match)) { 42 color: yellowgreen; 43 } 44 </style> 45 <div id="par"> 46 <div id="subject1" class="container"></div> 47 <div id="subject2" class="container"></div> 48 <div id="subject3" class="container another-match"></div> 49 <div id="subject4" class="container another-match"></div> 50 </div> 51 <script> 52 const colors = { 53 grey: "rgb(128, 128, 128)", 54 red: "rgb(255, 0, 0)", 55 orangered: "rgb(255, 69, 0)", 56 darkred: "rgb(139, 0, 0)", 57 pink: "rgb(255, 192, 203)", 58 green: "rgb(0, 128, 0)", 59 lightgreen: "rgb(144, 238, 144)", 60 darkgreen: "rgb(0, 100, 0)", 61 yellowgreen: "rgb(154, 205, 50)" 62 }; 63 64 function testClassChange(subject, before, after, afterParent) { 65 const cls = "other-match"; 66 const parentCls = "parent"; 67 const beforeColor = colors[before]; 68 69 test(() => { 70 assert_equals(getComputedStyle(subject).color, beforeColor); 71 }, subject.id + " initial color is " + before); 72 73 subject.classList.add(cls); 74 const afterColor = colors[after]; 75 test(() => { 76 assert_equals(getComputedStyle(subject).color, afterColor); 77 }, subject.id + " is " + after + " when ." + cls + " added"); 78 79 par.classList.add(parentCls); 80 const afterParentColor = colors[afterParent]; 81 test(() => { 82 assert_equals(getComputedStyle(subject).color, afterParentColor); 83 }, subject.id + " is " + afterParent + " when ." + parentCls + " added to parent"); 84 85 par.classList.remove(parentCls); 86 test(() => { 87 assert_equals(getComputedStyle(subject).color, afterColor); 88 }, subject.id + " is " + afterParent + " when ." + parentCls + " removed from parent"); 89 90 subject.classList.remove(cls); 91 test(() => { 92 assert_equals(getComputedStyle(subject).color, beforeColor); 93 }, subject.id + " is " + after + " when ." + cls + " removed"); 94 } 95 96 testClassChange(subject1, "grey", "red", "orangered"); 97 testClassChange(subject2, "grey", "darkred", "pink"); 98 testClassChange(subject3, "grey", "green", "lightgreen"); 99 testClassChange(subject4, "grey", "darkgreen", "yellowgreen"); 100 </script>