anchor-center-htb-htb.html (2618B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 3 <title>Tests the position and available-size of 'anchor-center' alignment with different insets.</title> 4 <style> 5 .container { 6 width: 100px; 7 height: 100px; 8 border: solid 3px; 9 position: relative; 10 margin: 50px; 11 } 12 13 .anchor { 14 anchor-name: --anchor; 15 position: relative; 16 width: 50px; 17 height: 50px; 18 left: 40px; 19 top: 40px; 20 background: lime; 21 } 22 23 .target { 24 position-anchor: --anchor; 25 position: absolute; 26 background: cyan; 27 justify-self: anchor-center; 28 top: anchor(bottom); 29 height: 20px; 30 } 31 /* used to test the available-size given to the element */ 32 .target::after { 33 color: transparent; 34 content: 'a a a a a a a a a a a a a a a a a a'; 35 } 36 </style> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script src="/resources/check-layout-th.js"></script> 40 41 <body onload="checkLayout('.target')"> 42 43 <!-- no insets --> 44 <div class="container"> 45 <div class="anchor"></div> 46 <div class="target" data-expected-width="100" data-offset-x="0"></div> 47 </div> 48 49 <div class="container"> 50 <div class="anchor"></div> 51 <div class="target" style="max-width: 60px;" data-expected-width="60" data-offset-x="35"></div> 52 </div> 53 54 <!-- single insets --> 55 <div class="container"> 56 <div class="anchor"></div> 57 <div class="target" style="left: 20px;" data-expected-width="80" data-offset-x="20"></div> 58 </div> 59 60 <div class="container"> 61 <div class="anchor"></div> 62 <div class="target" style="right: 20px;" data-expected-width="80" data-offset-x="0"></div> 63 </div> 64 65 <div class="container"> 66 <div class="anchor"></div> 67 <div class="target" style="right: -20px;" data-expected-width="120" data-offset-x="0"></div> 68 </div> 69 70 <div class="container"> 71 <div class="anchor"></div> 72 <div class="target" style="max-width: 100px; right: -20px;" data-expected-width="100" data-offset-x="15"></div> 73 </div> 74 75 <div class="container"> 76 <div class="anchor"></div> 77 <div class="target" style="right: -50px;" data-expected-width="150" data-offset-x="0"></div> 78 </div> 79 80 <!-- both insets --> 81 <div class="container"> 82 <div class="anchor"></div> 83 <div class="target" style="left: 10px; right: 20px;" data-expected-width="70" data-offset-x="10"></div> 84 </div> 85 86 <div class="container"> 87 <div class="anchor"></div> 88 <div class="target" style="left: 10px; right: -20px;" data-expected-width="110" data-offset-x="10"></div> 89 </div> 90 91 <div class="container"> 92 <div class="anchor"></div> 93 <div class="target" style="left: -10px; right: -50px;" data-expected-width="160" data-offset-x="-10"></div> 94 </div>