has-with-nesting-parent-containing-complex.html (6644B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Selector Invalidation: :has() with nesting parent containing complex selector</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <style> 11 .anchor { background-color: white; } 12 13 .ancestor .descendant { 14 .anchor:has(&) { background-color: blue; } 15 } 16 17 .ancestor .child { 18 .anchor:has(> &) { background-color: lightblue; } 19 } 20 21 .ancestor_prev ~ div .descendant { 22 .anchor:has(&) { background-color: yellow; } 23 } 24 25 .ancestor_prev ~ div.ancestor .descendant { 26 .anchor:has(&) { background-color: yellowgreen; } 27 } 28 29 .prev ~ .indirect_next { 30 .anchor:has(~ &) { background-color: green; } 31 } 32 33 .prev ~ .direct_next { 34 .anchor:has(+ &) { background-color: lightgreen; } 35 } 36 </style> 37 <div><div id="grand_parent1"> 38 <div id="parent1"> 39 <div id="anchor1" class="anchor"> 40 <div><div class="descendant"></div></div> 41 </div> 42 </div> 43 </div></div> 44 <div><div id="grand_parent2"> 45 <div id="parent2"> 46 <div id="anchor2" class="anchor"> 47 <div class="child"></div> 48 </div> 49 </div> 50 </div></div> 51 <div><div id="grand_parent_indirect_prev3"></div> 52 <div id="grand_parent_direct_prev3"></div> 53 <div id="grand_parent3"> 54 <div id="parent_indirect_prev3"></div> 55 <div id="parent_direct_prev3"></div> 56 <div id="parent3"> 57 <div id="anchor_indirect_prev3"></div> 58 <div id="anchor_direct_prev3"></div> 59 <div id="anchor3" class="anchor"> 60 <div><div class="descendant"></div></div> 61 </div> 62 </div> 63 </div></div> 64 <div><div id="indirect_prev4"></div> 65 <div id="direct_prev4"></div> 66 <div id="anchor4" class="anchor"></div> 67 <div></div><div class="indirect_next"> 68 </div></div> 69 <div><div id="indirect_prev5"></div> 70 <div id="direct_prev5"></div> 71 <div id="anchor5" class="anchor"></div> 72 <div class="direct_next"> 73 </div></div> 74 <script> 75 const white = "rgb(255, 255, 255)"; 76 const blue = "rgb(0, 0, 255)"; 77 const lightblue = "rgb(173, 216, 230)"; 78 const yellow = "rgb(255, 255, 0)"; 79 const yellowgreen = "rgb(154, 205, 50)"; 80 const green = "rgb(0, 128, 0)"; 81 const lightgreen = "rgb(144, 238, 144)"; 82 83 function bg_color(element, color, message) { 84 promise_test(async () => { 85 assert_equals(getComputedStyle(element)['background-color'], color); 86 }, message); 87 } 88 89 function add_class_and_check_bg_color( 90 element_to_add, class_name, has_anchor, color) { 91 promise_test(async () => { 92 element_to_add.classList.add(class_name); 93 assert_equals(getComputedStyle(has_anchor)['background-color'], color); 94 }, `#${has_anchor.id} becomes ${color} after adding .${class_name} to #${element_to_add.id}`); 95 } 96 97 function remove_class_and_check_bg_color( 98 element_to_remove, class_name, has_anchor, color) { 99 promise_test(async () => { 100 element_to_remove.classList.remove(class_name); 101 assert_equals(getComputedStyle(has_anchor)['background-color'], color); 102 }, `#${has_anchor.id} becomes ${color} after removing .${class_name} from #${element_to_remove.id}`); 103 } 104 105 bg_color(anchor1, white, "#anchor1 initially white"); 106 add_class_and_check_bg_color(grand_parent1, "ancestor", anchor1, blue); 107 remove_class_and_check_bg_color(grand_parent1, "ancestor", anchor1, white); 108 add_class_and_check_bg_color(parent1, "ancestor", anchor1, blue); 109 remove_class_and_check_bg_color(parent1, "ancestor", anchor1, white); 110 111 bg_color(anchor2, white, "#anchor2 initially white"); 112 add_class_and_check_bg_color(grand_parent2, "ancestor", anchor2, lightblue); 113 remove_class_and_check_bg_color(grand_parent2, "ancestor", anchor2, white); 114 add_class_and_check_bg_color(parent2, "ancestor", anchor2, lightblue); 115 remove_class_and_check_bg_color(parent2, "ancestor", anchor2, white); 116 117 bg_color(anchor3, white, "#anchor3 initially white"); 118 add_class_and_check_bg_color(grand_parent_indirect_prev3, "ancestor_prev", 119 anchor3, yellow); 120 add_class_and_check_bg_color(grand_parent3, "ancestor", anchor3, yellowgreen); 121 remove_class_and_check_bg_color(grand_parent3, "ancestor", anchor3, yellow); 122 remove_class_and_check_bg_color(grand_parent_indirect_prev3, "ancestor_prev", 123 anchor3, white); 124 add_class_and_check_bg_color(grand_parent_direct_prev3, "ancestor_prev", 125 anchor3, yellow); 126 remove_class_and_check_bg_color(grand_parent_direct_prev3, "ancestor_prev", 127 anchor3, white); 128 add_class_and_check_bg_color(parent_indirect_prev3, "ancestor_prev", 129 anchor3, yellow); 130 add_class_and_check_bg_color(parent3, "ancestor", anchor3, yellowgreen); 131 remove_class_and_check_bg_color(parent3, "ancestor", anchor3, yellow); 132 remove_class_and_check_bg_color(parent_indirect_prev3, "ancestor_prev", 133 anchor3, white); 134 add_class_and_check_bg_color(parent_direct_prev3, "ancestor_prev", 135 anchor3, yellow); 136 remove_class_and_check_bg_color(parent_direct_prev3, "ancestor_prev", 137 anchor3, white); 138 add_class_and_check_bg_color(anchor_indirect_prev3, "ancestor_prev", 139 anchor3, yellow); 140 remove_class_and_check_bg_color(anchor_indirect_prev3, "ancestor_prev", 141 anchor3, white); 142 add_class_and_check_bg_color(anchor_direct_prev3, "ancestor_prev", 143 anchor3, yellow); 144 remove_class_and_check_bg_color(anchor_direct_prev3, "ancestor_prev", 145 anchor3, white); 146 147 bg_color(anchor4, white, "#anchor4 initially white"); 148 add_class_and_check_bg_color(indirect_prev4, "prev", anchor4, green); 149 remove_class_and_check_bg_color(indirect_prev4, "prev", anchor4, white); 150 add_class_and_check_bg_color(direct_prev4, "prev", anchor4, green); 151 remove_class_and_check_bg_color(direct_prev4, "prev", anchor4, white); 152 153 bg_color(anchor5, white, "#anchor5 initially white"); 154 add_class_and_check_bg_color(indirect_prev5, "prev", anchor5, lightgreen); 155 remove_class_and_check_bg_color(indirect_prev5, "prev", anchor5, white); 156 add_class_and_check_bg_color(direct_prev5, "prev", anchor5, lightgreen); 157 remove_class_and_check_bg_color(direct_prev5, "prev", anchor5, white); 158 </script>