anchor-position-sibling-index.html (919B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: anchor function with sibling-index()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-5/#funcdef-sibling-index"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 body { margin: 0; } 9 #anchor { 10 anchor-name: --a; 11 width: 100px; 12 height: 100px; 13 } 14 #abs { 15 position-anchor: --a; 16 position: absolute; 17 top: anchor(calc(25% * sibling-index())); 18 width: 100px; 19 height: 100px; 20 background: teal; 21 } 22 </style> 23 <div> 24 <div id="anchor"></div> 25 <div id="abs"></div> 26 </div> 27 <script> 28 test(() => { 29 assert_equals(getComputedStyle(abs).top, "50px", "25% multiplied by 2 (sibling-index()) of 100px") 30 }, "Percentage based anchor() position with sibling-index()"); 31 </script>