anchor-center-vrl-htb.html (2677B)
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 writing-mode: vertical-rl; 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 right: 10px; 20 top: 40px; 21 background: lime; 22 } 23 24 .target { 25 writing-mode: horizontal-tb; 26 position-anchor: --anchor; 27 position: absolute; 28 background: cyan; 29 align-self: anchor-center; 30 top: anchor(bottom); 31 height: 20px; 32 } 33 /* used to test the available-size given to the element */ 34 .target::after { 35 color: transparent; 36 content: 'a a a a a a a a a a a a a a a a a a'; 37 } 38 </style> 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="/resources/check-layout-th.js"></script> 42 43 <body onload="checkLayout('.target')"> 44 45 <!-- no insets --> 46 <div class="container"> 47 <div class="anchor"></div> 48 <div class="target" data-expected-width="100" data-offset-x="0"></div> 49 </div> 50 51 <div class="container"> 52 <div class="anchor"></div> 53 <div class="target" style="max-width: 60px;" data-expected-width="60" data-offset-x="35"></div> 54 </div> 55 56 <!-- single insets --> 57 <div class="container"> 58 <div class="anchor"></div> 59 <div class="target" style="left: 20px;" data-expected-width="80" data-offset-x="20"></div> 60 </div> 61 62 <div class="container"> 63 <div class="anchor"></div> 64 <div class="target" style="right: 20px;" data-expected-width="80" data-offset-x="0"></div> 65 </div> 66 67 <div class="container"> 68 <div class="anchor"></div> 69 <div class="target" style="right: -20px;" data-expected-width="120" data-offset-x="0"></div> 70 </div> 71 72 <div class="container"> 73 <div class="anchor"></div> 74 <div class="target" style="max-width: 100px; right: -20px;" data-expected-width="100" data-offset-x="15"></div> 75 </div> 76 77 <div class="container"> 78 <div class="anchor"></div> 79 <div class="target" style="right: -50px;" data-expected-width="150" data-offset-x="0"></div> 80 </div> 81 82 <!-- both insets --> 83 <div class="container"> 84 <div class="anchor"></div> 85 <div class="target" style="left: 10px; right: 20px;" data-expected-width="70" data-offset-x="10"></div> 86 </div> 87 88 <div class="container"> 89 <div class="anchor"></div> 90 <div class="target" style="left: 10px; right: -20px;" data-expected-width="110" data-offset-x="10"></div> 91 </div> 92 93 <div class="container"> 94 <div class="anchor"></div> 95 <div class="target" style="left: -10px; right: -50px;" data-expected-width="160" data-offset-x="-10"></div> 96 </div>