sibling-function-container-query.html (2138B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() and sibling-count() 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: 400px; 21 } 22 span { 23 --match-100: no; 24 --match-400: 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(200px * sibling-count())) { 36 span { --match-400: yes; } 37 } 38 </style> 39 <div style="color:black"> 40 <div id="c1" class="container"> 41 <span id="t1"></span> 42 </div> 43 <div id="c2" class="container"> 44 <span id="t2"></span> 45 </div> 46 </div> 47 <script> 48 test(() => { 49 assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)"); 50 assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)"); 51 }, "sibling-index() in @container width query"); 52 53 test(() => { 54 assert_equals(getComputedStyle(t2).backgroundColor, "rgba(0, 0, 0, 0)"); 55 assert_equals(getComputedStyle(t2).color, "rgb(0, 255, 0)"); 56 }, "sibling-count() in @container width query"); 57 58 test(() => { 59 assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "yes"); 60 assert_equals(getComputedStyle(t1).getPropertyValue("--match-400"), "no"); 61 }, "sibling-index() in @container style() query"); 62 63 test(() => { 64 assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no"); 65 assert_equals(getComputedStyle(t2).getPropertyValue("--match-400"), "yes"); 66 }, "sibling-count() in @container style() query"); 67 </script>