anchor-transition-001.html (1758B)
1 <!DOCTYPE html> 2 <title>Tests CSS transition of anchor() and anchor-size() functions</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/8180"></script> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 body { 11 margin: 0; 12 } 13 14 #anchor1 { 15 margin-left: 0px; 16 margin-top: 0px; 17 width: 200px; 18 height: 100px; 19 background: orange; 20 anchor-name: --a1; 21 } 22 23 #anchor2 { 24 margin-left: 400px; 25 margin-top: 200px; 26 width: 100px; 27 height: 200px; 28 background: orange; 29 anchor-name: --a2; 30 } 31 32 #target { 33 position: fixed; 34 width: 100px; 35 height: 100px; 36 background-color: lime; 37 transition: all 10s -5s linear; 38 } 39 40 #target.before { 41 top: anchor(--a1 top); 42 left: anchor(--a1 right); 43 width: anchor-size(--a1 width); 44 height: anchor-size(--a1 height); 45 } 46 47 #target.after { 48 top: anchor(--a2 bottom); 49 left: anchor(--a2 left); 50 width: anchor-size(--a2 width); 51 height: anchor-size(--a2 height); 52 } 53 </style> 54 55 <div id="anchor1"></div> 56 <div id="anchor2"></div> 57 <div id="target" class="before"></div> 58 59 <script> 60 setup(() => { 61 // Forces layout 62 target.offsetLeft; 63 // Triggers transition starting at 50% immediately 64 target.classList.remove('before'); 65 target.classList.add('after'); 66 }); 67 68 test(() => { 69 assert_equals(target.offsetLeft, 300); 70 assert_equals(target.offsetTop, 250); 71 }, 'Transition of anchor() when changing target anchor element name'); 72 73 test(() => { 74 assert_equals(target.offsetWidth, 150); 75 assert_equals(target.offsetHeight, 150); 76 }, 'Transition of anchor-size() when changing target anchor element name'); 77 </script>