sibling-function-container-query-invalidation.html (3277B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() and sibling-count() changes in container queries</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-features"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 @property --length { 9 syntax: "<length>"; 10 initial-value: 0px; 11 inherits: false; 12 } 13 .container { container-type: inline-size; } 14 #c1 { 15 width: 100px; 16 --length: 100px; 17 } 18 #c2 { 19 width: 400px; 20 --length: 600px; 21 } 22 span { 23 --match-100: no; 24 --match-600: no; 25 } 26 @container (width = calc(100px * sibling-index())) { 27 span { background-color: green; } 28 } 29 @container (width = calc(200px * sibling-count())) { 30 span { color: lime; } 31 } 32 @container style(--length: calc(100px * sibling-index())) { 33 span { --match-100: yes; } 34 } 35 @container style(--length: calc(300px * sibling-count())) { 36 span { --match-600: yes; } 37 } 38 </style> 39 <div style="color:black"> 40 <div id="rm1"></div> 41 <div id="rm2"></div> 42 <div id="c1" class="container"> 43 <span id="t1"></span> 44 </div> 45 <div id="c2" class="container"> 46 <span id="t2"></span> 47 </div> 48 </div> 49 <script> 50 test(() => { 51 assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)"); 52 assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)"); 53 }, "sibling-index() in @container width query initially not matching"); 54 55 test(() => { 56 assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)"); 57 assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)"); 58 }, "sibling-count() in @container width query initially not matching"); 59 60 test(() => { 61 assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "no"); 62 assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no"); 63 }, "sibling-index() in @container style() query initially not matching"); 64 65 test(() => { 66 assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no"); 67 assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "no"); 68 }, "sibling-count() in @container style() query initially not matching"); 69 70 rm1.remove(); 71 rm2.remove(); 72 73 test(() => { 74 assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)"); 75 assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)"); 76 }, "sibling-index() in @container width query matching after removal"); 77 78 test(() => { 79 assert_equals(getComputedStyle(t2).backgroundColor, "rgba(0, 0, 0, 0)"); 80 assert_equals(getComputedStyle(t2).color, "rgb(0, 255, 0)"); 81 }, "sibling-count() in @container width query matching after removal"); 82 83 test(() => { 84 assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "yes"); 85 assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no"); 86 }, "sibling-index() in @container style() query matching after removal"); 87 88 test(() => { 89 assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no"); 90 assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "yes"); 91 }, "sibling-count() in @container style() query matching after removal"); 92 </script>