anchor-center-fallback-transition-behavior.html (1168B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: Fallback for position-area with implicit anchor centering</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/"> 4 <link rel="help" href="https://crbug.com/342428030"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 body { margin: 0; } 9 #cb { 10 position: relative; 11 width: 400px; 12 height: 100px; 13 border: 1px solid black; 14 } 15 #a1 { 16 anchor-name: --a1; 17 width: 100px; 18 height: 100px; 19 background: green; 20 } 21 #t1 { 22 position-anchor: --a1; 23 /* transition-behavior exercises bug in Chrome */ 24 transition-behavior: allow-discrete; 25 position: absolute; 26 position-area: bottom; 27 position-try-fallbacks: --right; 28 width: 200px; 29 height: 100px; 30 background: cyan; 31 } 32 @position-try --right { 33 position-area: right; 34 } 35 </style> 36 <div id="cb"> 37 <div id="a1"></div> 38 <div id="t1"></div> 39 </div> 40 <script> 41 test(() => { 42 assert_equals(t1.offsetLeft, 100, "Positioned using --right fallback"); 43 }, "anchor-center aligned bottom anchored element overflowing IMCB"); 44 </script>