position-area-overflow-icb-001.html (1176B)
1 <!DOCTYPE html> 2 <html dir=rtl> 3 <title>position-area overflow alignment against ICB - non-scrollable RTL</title> 4 <link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area"> 5 <link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety-position"> 6 <meta name=assert content="Test passes if the positioned box is aligned as specified to the extent possible within the scrollable area."> 7 8 <link rel="match" href="position-area-overflow-icb-001-ref.html"> 9 <style> 10 .anchor { 11 anchor-name: --foo; 12 border: solid orange 20px; 13 position: absolute; 14 margin: auto; 15 top: 50%; 16 left: 50%; 17 } 18 .above, .below, .left, .right { 19 border: solid blue 3px; 20 padding: 2px; 21 position: absolute; 22 position-anchor: --foo; 23 } 24 .above { position-area: top center; height: 60vh; margin-left: 20px; } 25 .below { position-area: bottom center; height: 60vh; margin-right: 20px; } 26 .left { position-area: left center; width: 60vw; margin-top: 20px; } 27 .right { position-area: right center; width: 60vw; margin-bottom: 20px; } 28 </style> 29 30 <div class=anchor></div> 31 <div class=above></div> 32 <div class=below></div> 33 <div class=left></div> 34 <div class=right></div>