anchor-position-flip-sibling-index.html (1029B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: flip anchor function with sibling-index()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-try-tactic"> 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-try-fallbacks: flip-block; 17 position: absolute; 18 bottom: anchor(calc(20% * sibling-index())); 19 width: 100px; 20 height: 100px; 21 background: teal; 22 } 23 </style> 24 <div> 25 <div id="anchor"></div> 26 <div id="abs"></div> 27 </div> 28 <script> 29 test(() => { 30 assert_equals(getComputedStyle(abs).top, "60px", "100% - (20% multiplied by 2 (sibling-index())) of 100px") 31 }, "Percentage based top anchor() position with sibling-index() flipped to bottom"); 32 </script>