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