anchor-center-003.html (1044B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center"> 3 <link rel="author" href="mailto:plampe@igalia.com"> 4 <title>Tests the position and available-size of 'anchor-center' alignment with target width: auto.</title> 5 <style> 6 .container { 7 width: 100px; 8 height: 100px; 9 border: solid 3px; 10 position: relative; 11 margin: 50px; 12 } 13 14 .anchor { 15 anchor-name: --anchor; 16 position: relative; 17 width: 50px; 18 height: 50px; 19 left: 40px; 20 top: 5px; 21 background: lime; 22 } 23 24 .target { 25 position-anchor: --anchor; 26 position: fixed; 27 background: cyan; 28 justify-self: anchor-center; 29 top: anchor(bottom); 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 36 <body onload="checkLayout('.target')"> 37 38 <div class="container"> 39 <div class="anchor"></div> 40 <div class="target" data-expected-width="30" data-offset-x="111"> 41 <div style="width:30px;height:20px;"></div> 42 </div> 43 </div>