anchor-transition-eval.html (1938B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Transition when the result of anchor()/anchor-size() changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> 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: 250px; 12 height: 250px; 13 border: 1px solid black; 14 } 15 .anchor { 16 position: absolute; 17 width: 50px; 18 height: 40px; 19 left: 60px; 20 top: 40px; 21 background: coral; 22 anchor-name: --a; 23 } 24 .shift { 25 left: 80px; 26 } 27 .grow { 28 width: 70px; 29 } 30 .anchored { 31 position: absolute; 32 width: anchor-size(width); 33 height: 40px; 34 position-anchor: --a; 35 top: anchor(bottom); 36 left: anchor(right); 37 transition-duration: 1000s; 38 transition-timing-function: steps(2, start); 39 background-color: skyblue; 40 } 41 </style> 42 43 <div id=anchor_test class=cb> 44 <div class=anchor></div> 45 <div class=anchored style="transition-property:left"></div> 46 </div> 47 <script> 48 test(() => { 49 let anchor = anchor_test.querySelector('.anchor'); 50 let anchored = anchor_test.querySelector('.anchored'); 51 assert_equals(anchored.offsetLeft, 110); 52 anchor.classList.add('shift'); 53 assert_equals(anchored.offsetLeft, 120); 54 }, 'Transition when the result of anchor() changes'); 55 </script> 56 57 <div id=anchor_size_test class=cb> 58 <div class=anchor></div> 59 <div class=anchored style="transition-property:width"></div> 60 </div> 61 <script> 62 test(() => { 63 let anchor = anchor_size_test.querySelector('.anchor'); 64 let anchored = anchor_size_test.querySelector('.anchored'); 65 assert_equals(anchored.offsetWidth, 50); 66 anchor.classList.add('grow'); 67 assert_equals(anchored.offsetWidth, 60); 68 }, 'Transition when the result of anchor-size() changes'); 69 </script>