Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/position-area-overflow-icb-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html dir=rtl>
<title>position-area overflow alignment against ICB - scrollable RTL</title>
<meta name=assert content="Test passes if the positioned box is aligned as specified to the extent possible within the scrollable area.">
<link rel="match" href="position-area-overflow-icb-002-ref.html">
<style>
.anchor {
anchor-name: --foo;
border: solid orange 20px;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
}
.above, .below, .left, .right {
border: solid blue 3px;
padding: 2px;
position: absolute;
position-anchor: --foo;
}
.above { position-area: top center; height: 60vh; margin-left: 20px; }
.below { position-area: bottom center; height: 60vh; margin-right: 20px; }
.left { position-area: left center; width: 60vw; margin-top: 20px; }
.right { position-area: right center; width: 60vw; margin-bottom: 20px; }
html { height: 150vh; width: 150vw; }
</style>
<div class=anchor></div>
<div class=above></div>
<div class=below></div>
<div class=left></div>
<div class=right></div>