position-anchor-003.html (1118B)
1 <!DOCTYPE html> 2 <title>Tests that layout is updated on position-anchor value changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-anchor"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style> 9 #target { 10 position: fixed; 11 width: 100px; 12 height: 100px; 13 background: lime; 14 top: anchor(top); 15 left: anchor(right); 16 position-anchor: --a; 17 } 18 19 #target.after { 20 position-anchor: --b; 21 } 22 23 #anchor1, #anchor2 { 24 width: 100px; 25 height: 100px; 26 background: orange; 27 } 28 29 #anchor1 { 30 anchor-name: --a; 31 } 32 33 #anchor2 { 34 margin-left: 100px; 35 anchor-name: --b; 36 } 37 38 body { 39 margin: 0; 40 } 41 </style> 42 43 <div id="anchor1"></div> 44 <div id="anchor2"></div> 45 <div id="target"></div> 46 47 <script> 48 test(() => { 49 document.body.offsetLeft; // Force layout 50 target.classList.add('after'); 51 // #target should be anchored to #anchor2 now 52 assert_equals(target.offsetLeft, 200); 53 assert_equals(target.offsetTop, 100); 54 }, 'Layout is updated on `position-anchor` changes'); 55 </script>