anchor-in-anchor-positioned.html (1493B)
1 <!DOCTYPE html> 2 3 <title>Tests that anchors in anchor-positioned elements are discoverable</title> 4 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#determining"> 6 <link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/check-layout-th.js"></script> 11 <script src="support/test-common.js"></script> 12 13 <style> 14 .containing-block { 15 border: 1px solid black; 16 17 position: relative; 18 width: 200px; 19 height: 150px; 20 } 21 22 .box { 23 width: 50px; 24 height: 50px; 25 } 26 27 #anchor-1 { 28 position: absolute; 29 top: 50px; 30 left: 50px; 31 32 anchor-name: --anchor-1; 33 34 background: green; 35 } 36 37 #anchor-positioned-1 { 38 position: absolute; 39 position-anchor: --anchor-1; 40 position-area: top right; 41 } 42 43 #anchor-2 { 44 anchor-name: --anchor-2; 45 background: blue; 46 } 47 48 #anchor-positioned-2 { 49 position: absolute; 50 position-anchor: --anchor-2; 51 position-area: bottom right; 52 53 background: cyan; 54 } 55 </style> 56 57 <body onload="checkLayoutForAnchorPos('.target')"> 58 <div class="containing-block"> 59 <div class="box" id="anchor-1"></div> 60 61 <div class="box target" id="anchor-positioned-1" data-offset-x="100" data-offset-y="0"> 62 <div class="box" id="anchor-2"></div> 63 </div> 64 65 <div class="box target" id="anchor-positioned-2" data-offset-x="150" data-offset-y="50"></div> 66 </div> 67 </body>