position-try-transition-flip.html (1885B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Transition to a flipped state</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-try-tactic"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #cb { 9 display: inline-block; 10 position: relative; 11 width: 400px; 12 height: 250px; 13 border: 1px solid black; 14 } 15 #cb.shrink { 16 width: 325px; 17 } 18 #anchor { 19 position: absolute; 20 width: 50px; 21 height: 50px; 22 background: coral; 23 left: 250px; 24 top: 50px; 25 anchor-name: --a; 26 } 27 #target { 28 position-anchor: --a; 29 position: absolute; 30 left: anchor(right); 31 top: anchor(top); 32 width: 50px; 33 height: 50px; 34 background: skyblue; 35 } 36 #target.fallback { 37 position-try-fallbacks: flip-start; 38 } 39 #target.anim { 40 transition: left 1000s steps(2, start); 41 } 42 </style> 43 <div id=cb> 44 <div id=anchor></div> 45 <div id=target></div> 46 </div> 47 <script> 48 function cleanup() { 49 target.className = ''; 50 cb.className = ''; 51 // Clean up running transition 52 target.getAnimations().forEach(a => a.cancel()); 53 } 54 55 test((t) => { 56 t.add_cleanup(cleanup); 57 assert_equals(target.offsetLeft, 300); 58 cb.classList.add('shrink'); 59 target.classList.add('fallback', 'anim'); 60 assert_equals(target.offsetLeft, 275); 61 }, 'Transition to a flipped state'); 62 63 test((t) => { 64 t.add_cleanup(cleanup); 65 cb.classList.add('shrink'); 66 target.classList.add('fallback'); 67 assert_equals(target.offsetLeft, 250); 68 cb.classList.remove('shrink'); 69 target.classList.remove('fallback'); 70 target.classList.add('anim'); 71 assert_equals(target.offsetLeft, 275); 72 }, 'Transition to an unflipped state'); 73 74 </script>