anchor-center-004.html (1237B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center"> 3 <link rel="author" href="mailto:dshin@mozilla.com"> 4 <title>Tests the position of 'anchor-center' alignment with target margin: 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: 30px; 20 top: 20px; 21 background: lime; 22 } 23 24 .target { 25 position-anchor: --anchor; 26 width: 24px; 27 height: 24px; 28 position: fixed; 29 background: cyan; 30 } 31 32 .justify { 33 justify-self: anchor-center; 34 top: anchor(bottom); 35 /* Should be overridden to 0. */ 36 margin-inline: auto; 37 } 38 39 .align { 40 align-self: anchor-center; 41 right: anchor(left); 42 /* Should be overridden to 0. */ 43 margin-block: auto; 44 } 45 </style> 46 <script src="/resources/testharness.js"></script> 47 <script src="/resources/testharnessreport.js"></script> 48 <script src="/resources/check-layout-th.js"></script> 49 50 <body onload="checkLayout('.target')"> 51 52 <div class="container"> 53 <div class="anchor"></div> 54 <div class="target justify" data-offset-x="104"></div> 55 <div class="target align" data-offset-y="86"></div> 56 </div>