anchor-positioned-containing-block-resize.html (1518B)
1 <!DOCTYPE html> 2 <title>Containing block size change correctly invalidates styles with anchor functions</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .anchor, .anchored { 8 width: 100px; 9 height: 100px; 10 position: absolute; 11 } 12 .anchor { 13 left: 300px; 14 top: 200px; 15 anchor-name: --a; 16 background: blue; 17 } 18 .anchored { 19 position-anchor: --a; 20 right: anchor(left); 21 bottom: anchor(top); 22 background: green; 23 content:''; 24 } 25 .container { 26 position: relative; 27 width: 500px; 28 height: 500px; 29 border: 2px solid red; 30 } 31 .resize { 32 width: 400px; 33 height: 400px; 34 } 35 </style> 36 <div id=container class=container> 37 <div class=anchor></div> 38 <div> 39 <div id=anchored class=anchored></div> 40 </div> 41 </div> 42 <script> 43 test(() => { 44 assert_equals(anchored.offsetTop, 100); 45 assert_equals(anchored.offsetLeft, 200); 46 assert_equals(getComputedStyle(anchored).bottom, '300px'); 47 assert_equals(getComputedStyle(anchored).right, '200px'); 48 }, "Initial anchored position"); 49 50 test(() => { 51 container.classList.add("resize"); 52 assert_equals(anchored.offsetTop, 100); 53 assert_equals(anchored.offsetLeft, 200); 54 assert_equals(getComputedStyle(anchored).bottom, '200px'); 55 assert_equals(getComputedStyle(anchored).right, '100px'); 56 }, "Anchored position after resizing the containing block"); 57 </script>