position-try-initial-transition.html (1041B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: Initial @position-try does not trigger a transition</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 <div id=cb> 7 <div id=abs></div> 8 </div> 9 <style> 10 #cb { 11 position: relative; 12 width: 100px; 13 height: 100px; 14 background: lightpink; 15 } 16 #abs { 17 position: absolute; 18 background: darkcyan; 19 top: 10px; 20 left: 10px; 21 width: 150px; /* force fallback */ 22 height: 25px; 23 position-try-fallbacks: --pf; 24 transition-property: top, left; 25 transition-duration: 10s; 26 transition-timing-function: steps(2, start); 27 } 28 @position-try --pf { 29 width: 50px; 30 top: 50px; 31 left: 50px; 32 } 33 </style> 34 <script> 35 test(() => { 36 assert_equals(getComputedStyle(abs).top, '50px'); 37 assert_equals(getComputedStyle(abs).left, '50px'); 38 }, 'No transition for initial style with @position-try'); 39 </script>