position-area-alignment-overflow-001.html (2545B)
1 <!DOCTYPE html> 2 <title>Test: position-area normal alignment overflow in a scrollable container</title> 3 <link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety-position"> 4 <link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment"> 5 <meta name="assert" content="Test passes if alignment overflow is kept away from the unscrollable region (only)."> 6 <style> 7 .container { 8 position: relative; 9 overflow: scroll; 10 scrollbar-width: none; 11 width: 100px; 12 height: 120px; 13 border: solid; 14 margin: 1em; 15 float: left; 16 } 17 .anchor { 18 border: solid blue 10px; 19 anchor-name: --foo; 20 inset: 0; 21 place-self: center; 22 position: absolute; 23 } 24 .test { 25 border: solid 5px #0084; 26 position: absolute; 27 position-anchor: --foo; 28 width: 100%; 29 height: 100%; 30 } 31 </style> 32 33 <div class="container" title="TB LTR"> 34 <div class="anchor"></div> 35 <div class="test" style="position-area: top left"></div> 36 <div class="test" style="position-area: bottom right"></div> 37 <div class="test" style="position-area: center"></div> 38 </div> 39 40 <div class="container" title="TB LTR"> 41 <div class="anchor"></div> 42 <div class="test" style="position-area: top"></div> 43 <div class="test" style="position-area: bottom"></div> 44 <div class="test" style="position-area: span-all center"></div> 45 </div> 46 47 <div class="container" style="writing-mode: vertical-rl" title="RL TTB"> 48 <div class="anchor"></div> 49 <div class="test" style="position-area: top left"></div> 50 <div class="test" style="position-area: bottom right"></div> 51 <div class="test" style="position-area: center"></div> 52 </div> 53 54 <div class="container" style="writing-mode: vertical-rl" title="RL TTB"> 55 <div class="anchor"></div> 56 <div class="test" style="position-area: top"></div> 57 <div class="test" style="position-area: bottom"></div> 58 <div class="test" style="position-area: center span-all"></div> 59 </div> 60 61 <div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> 62 <div class="anchor"></div> 63 <div class="test" style="position-area: top left"></div> 64 <div class="test" style="position-area: bottom right"></div> 65 <div class="test" style="position-area: center"></div> 66 </div> 67 68 <div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> 69 <div class="anchor"></div> 70 <div class="test" style="position-area: top"></div> 71 <div class="test" style="position-area: bottom"></div> 72 <div class="test" style="position-area: center span-all"></div> 73 </div>