anchor-transition-default.html (1444B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Transition when position-anchor 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 #anchor1, #anchor2 { 16 width: 100px; 17 } 18 #anchor1 { 19 background: wheat; 20 height: 50px; 21 anchor-name: --a1; 22 } 23 #anchor2 { 24 background: tomato; 25 height: 90px; 26 anchor-name: --a2; 27 } 28 #anchored { 29 position: absolute; 30 width: anchor-size(width); 31 height: anchor-size(height); 32 top: anchor(top); 33 left: anchor(right); 34 transition-duration: 1000s; 35 transition-timing-function: steps(2, start); 36 transition-property: top, height; 37 background-color: skyblue; 38 position-anchor: --a1; 39 } 40 </style> 41 <div id=cb> 42 <div id=anchor1>Anchor1</div> 43 <div id=anchor2>Anchor2</div> 44 <div id=anchored></div> 45 </div> 46 <script> 47 test(() => { 48 assert_equals(anchored.offsetTop, 0); 49 assert_equals(anchored.offsetHeight, 50); 50 anchored.style.positionAnchor = '--a2'; 51 assert_equals(anchored.offsetTop, 25); 52 assert_equals(anchored.offsetHeight, 70); 53 }, 'Transition when position-anchor changes'); 54 </script>