position-area-alignment-inset-001-ref.html (3366B)
1 <!DOCTYPE html> 2 <title>position-area normal alignment vs insets</title> 3 <link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment"> 4 <meta name="assert" content="Test passes if normal alignment aligns towards the non-auto inset."> 5 <style> 6 .container { 7 position: relative; 8 width: 100px; 9 height: 120px; 10 border: solid; 11 margin: 1em; 12 float: left; 13 } 14 .anchor { 15 border: solid blue 10px; 16 inset: 0; 17 place-self: center; 18 position: absolute; 19 } 20 .test { 21 border: solid 5px; 22 position: absolute; 23 width: 0; 24 height: 0; 25 } 26 .inset1 { 27 margin-bottom: auto; 28 margin-left: auto; 29 border-color: orange; 30 } 31 .inset2 { 32 margin-top: auto; 33 margin-right: auto; 34 border-color: teal; 35 } 36 .center { 37 margin: auto; 38 border-color: aqua; 39 } 40 </style> 41 42 <div class="container"> 43 <div class="anchor"></div> 44 <div class="test inset1" style="inset: 0 60px 70px 0"></div> 45 <div class="test center" style="inset: 0 60px 70px 0"></div> 46 <div class="test inset2" style="inset: 0 60px 70px 0"></div> 47 48 <div class="test inset1" style="inset: 70px 0 0 60px"></div> 49 <div class="test center" style="inset: 70px 0 0 60px"></div> 50 <div class="test inset2" style="inset: 70px 0 0 60px"></div> 51 52 <div class="test inset1" style="inset: 50px 40px 50px 40px"></div> 53 <div class="test center" style="inset: 50px 40px 50px 40px"></div> 54 <div class="test inset2" style="inset: 50px 40px 50px 40px"></div> 55 </div> 56 57 <div class="container"> 58 <div class="anchor"></div> 59 <div class="test inset1" style="inset: 0 0 70px"></div> 60 <div class="test center" style="inset: 0 0 70px"></div> 61 <div class="test inset2" style="inset: 0 0 70px"></div> 62 63 <div class="test inset1" style="inset: 70px 0 0"></div> 64 <div class="test center" style="inset: 70px 0 0"></div> 65 <div class="test inset2" style="inset: 70px 0 0"></div> 66 67 <div class="test inset1" style="inset: 50px 0"></div> 68 <div class="test center" style="inset: 50px 0"></div> 69 <div class="test inset2" style="inset: 50px 0"></div> 70 </div> 71 72 73 <div class="container" style="writing-mode: vertical-rl"> 74 <div class="anchor"></div> 75 <div class="test inset1" style="inset: 0 60px 70px 0"></div> 76 <div class="test center" style="inset: 0 60px 70px 0"></div> 77 <div class="test inset2" style="inset: 0 60px 70px 0"></div> 78 79 <div class="test inset1" style="inset: 70px 0 0 60px"></div> 80 <div class="test center" style="inset: 70px 0 0 60px"></div> 81 <div class="test inset2" style="inset: 70px 0 0 60px"></div> 82 83 <div class="test inset1" style="inset: 50px 40px 50px 40px"></div> 84 <div class="test center" style="inset: 50px 40px 50px 40px"></div> 85 <div class="test inset2" style="inset: 50px 40px 50px 40px"></div> 86 </div> 87 88 <div class="container" style="writing-mode: vertical-rl"> 89 <div class="anchor"></div> 90 <div class="test inset1" style="inset: 0 0 70px"></div> 91 <div class="test center" style="inset: 0 0 70px"></div> 92 <div class="test inset2" style="inset: 0 0 70px"></div> 93 94 <div class="test inset1" style="inset: 70px 0 0"></div> 95 <div class="test center" style="inset: 70px 0 0"></div> 96 <div class="test inset2" style="inset: 70px 0 0"></div> 97 98 <div class="test inset1" style="inset: 0 40px"></div> 99 <div class="test center" style="inset: 0 40px"></div> 100 <div class="test inset2" style="inset: 0 40px"></div> 101 </div>