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