anchor-position-002.html (2099B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 3 <link rel="author" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <script src="support/test-common.js"></script> 8 <style> 9 #container { 10 position: relative; 11 transform: translate(0, 0); /* Make it a containing block. */ 12 } 13 #anchor1 { 14 anchor-name: --a1; 15 width: 5px; 16 height: 7px; 17 background: orange; 18 } 19 #anchor2 { 20 anchor-name: --a2; 21 width: 9px; 22 height: 11px; 23 background: blue; 24 } 25 #anchor3 { 26 anchor-name: --a3; 27 width: 13px; 28 height: 15px; 29 background: purple; 30 } 31 .target { 32 position: absolute; 33 } 34 </style> 35 <!-- 36 The anchors are in different containing blocks, but they still fulfill the 37 conditions: 38 * if it has a different containing block from the querying element, the last 39 containing block in its containing block chain before reaching the querying 40 element’s containing block is not, itself, positioned. 41 https://drafts.csswg.org/css-anchor-1/#determining 42 43 From the definition of the "containing block": 44 https://drafts.csswg.org/css-position/#def-cb 45 properties such as `transform` can create a containing block without setting 46 the `position` property. 47 --> 48 <body onload="checkLayoutForAnchorPos('.target')"> 49 <div id="container"> 50 <div> 51 <div id="anchor1"></div> 52 </div> 53 <div class="target" style="left: anchor(--a1 right)" data-offset-x=5></div> 54 55 <div> 56 <div style="transform: translate(0, 0)"> 57 <div style="position: absolute; left: 10px;"> 58 <div id="anchor2"></div> 59 </div> 60 </div> 61 </div> 62 <div class="target" style="left: anchor(--a2 right)" data-offset-x=19></div> 63 64 <div> 65 <div style="transform: translate(0, 0)"> 66 <div style="position: fixed; left: 20px"> 67 <div id="anchor3"></div> 68 </div> 69 </div> 70 </div> 71 <div class="target" style="left: anchor(--a3 right)" data-offset-x=33></div> 72 </div> 73 </body>