anchor-position-001.html (1316B)
1 <!DOCTYPE html> 2 <title>Tests `anchor` function for top/left/bottom/right properties</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 4 <link rel="author" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <script src="support/test-common.js"></script> 9 <style> 10 #container { 11 position: relative; 12 } 13 #a1 { 14 anchor-name: --a1; 15 background: orange; 16 margin-left: 100px; 17 margin-top: 100px; 18 width: 100px; 19 height: 100px; 20 } 21 #a2 { 22 anchor-name: --a2; 23 background: purple; 24 margin-left: 500px; 25 margin-top: 100px; 26 width: 100px; 27 height: 100px; 28 } 29 #target { 30 background: green; 31 position: absolute; 32 left: anchor(--a1 right); 33 top: anchor(--a1 bottom); 34 right: anchor(--a2 left); 35 bottom: anchor(--a2 top); 36 } 37 #ref { 38 background: red; 39 position: absolute; 40 left: 200px; 41 top: 100px; 42 width: 300px; 43 height: 100px; 44 } 45 </style> 46 <body onload="checkLayoutForAnchorPos('#target')"> 47 <div id="container"> 48 <div id="a1"></div> 49 <div id="a2"></div> 50 <div id="ref"></div> 51 <div id="target" 52 data-offset-x=200 data-offset-y=100 53 data-expected-width=300 data-expected-height=100></div> 54 </div> 55 </body>