Blitz - WPT: position-area-overflow-icb-004.html

wpt / css / css-anchor-position / position-area-overflow-icb-004.html

/css/css-anchor-position/position-area-overflow-icb-004.html

<!DOCTYPE html>
<html>
<title>position-area overflow alignment against viewport - scrollable LTR root</title>
<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety-position">
<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-004-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: fixed;
  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>

/css/css-anchor-position/position-area-overflow-icb-004-ref.html

<!DOCTYPE html>
<html>
<title>Reference: position-area overflow alignment against viewport - scrollable LTR root</title>
<style>
.anchor {
  border: solid orange 20px;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
}
.above, .below, .left, .right {
  border: solid blue 3px;
  padding: 2px;
  position: absolute;
  width: 0;
  height: 0;
}
.above { top: 0;     left: 50%;    height: 60vh;  margin-left:   25px; }
.below { top: 50%;   left: 50%;    height: 60vh;  margin-left:    5px; margin-top: 40px; }
.left  { left: 0;    top: 50%;     width:  60vw;  margin-top:    25px; }
.right { left: 50%;  top: 50%;     width:  60vw;  margin-top:     5px; margin-left: 40px; }

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>