Blitz - WPT: anchor-center-overflow-005.html

wpt / css / css-anchor-position / anchor-center-overflow-005.html

/css/css-anchor-position/anchor-center-overflow-005.html

<!DOCTYPE html>
<title>anchor-center overflow adjustments (anchored < inset area, with margin)</title>
<link rel="help" href="https://www.w3.org/TR/css-anchor-position-1/#anchor-center">
<link rel="match" href="anchor-center-overflow-005-ref.html">
<link rel="author" name="David Shin" href="mailto:dshin@mozilla.com">
<style>
.abs-cb {
  display: inline-block;
  box-sizing: border-box;
  border: 5px solid;
  width: 100px;
  height: 100px;
  anchor-scope: --a;
  position: relative;
}

.anchor {
  anchor-name: --a;
  width: 20px;
  height: 20px;
  background: pink;
  position: absolute;
  inset: 0;
}

.positioned {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: 5px;
  position-anchor: --a;
  background: purple;
}

.anchor.tl {
  align-self: start;
  justify-self: start;
}

.anchor.tr {
  align-self: start;
  justify-self: end;
}

.anchor.bl {
  align-self: end;
  justify-self: start;
}

.anchor.br {
  align-self: end;
  justify-self: end;
}

.positioned.bc {
  top: anchor(bottom);
  justify-self: anchor-center;
}

.positioned.tc {
  bottom: anchor(top);
  justify-self: anchor-center;
}

.positioned.cr {
  left: anchor(right);
  align-self: anchor-center;
}

.positioned.cl {
  right: anchor(left);
  align-self: anchor-center;
}
</style>
<div class=abs-cb>
  <div class="anchor tl"></div>
  <div class="positioned bc"></div>
</div
><div class=abs-cb>
  <div class="anchor tl"></div>
  <div class="positioned cr"></div>
</div
><div class=abs-cb>
  <div class="anchor tr"></div>
  <div class="positioned bc"></div>
</div
><div class=abs-cb>
  <div class="anchor tr"></div>
  <div class="positioned cl"></div>
</div><br>
<div class=abs-cb>
  <div class="anchor bl"></div>
  <div class="positioned tc"></div>
</div
><div class=abs-cb>
  <div class="anchor bl"></div>
  <div class="positioned cr"></div>
</div
><div class=abs-cb>
  <div class="anchor br"></div>
  <div class="positioned tc"></div>
</div
><div class=abs-cb>
  <div class="anchor br"></div>
  <div class="positioned cl"></div>
</div>

/css/css-anchor-position/anchor-center-overflow-005-ref.html

<!DOCTYPE html>
<title>anchor-center overflow adjustments (anchored < inset area, with margin)</title>
<style>
.abs-cb {
  display: inline-block;
  box-sizing: border-box;
  border: 5px solid;
  width: 100px;
  height: 100px;
  position: relative;
}

.anchor {
  width: 20px;
  height: 20px;
  background: pink;
  position: absolute;
  inset: 0;
}

.positioned {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
}

.anchor.tl {
  align-self: start;
  justify-self: start;
}

.anchor.tr {
  align-self: start;
  justify-self: end;
}

.anchor.bl {
  align-self: end;
  justify-self: start;
}

.anchor.br {
  align-self: end;
  justify-self: end;
}

.positioned.bl {
  left: 0;
  top: 20px;
}

.positioned.lr {
  left: 20px;
  top: 0;
}


.positioned.bc {
  top: anchor(bottom);
  justify-self: anchor-center;
}

.positioned.tc {
  bottom: anchor(top);
  justify-self: anchor-center;
}

.positioned.cr {
  left: anchor(right);
  align-self: anchor-center;
}

.positioned.cl {
  right: anchor(left);
  align-self: anchor-center;
}
</style>
</style>
<div class=abs-cb>
  <div class="anchor tl"></div>
  <div class=positioned style="left: 0; top: 20px;"></div>
</div
><div class=abs-cb>
  <div class="anchor tl"></div>
  <div class=positioned style="left: 20px; top: 0;"></div>
</div
><div class=abs-cb>
  <div class="anchor tr"></div>
  <div class=positioned style="right: 0; top: 20px;"></div>
</div
><div class=abs-cb>
  <div class="anchor tr"></div>
  <div class=positioned style="right: 20px; top: 0px;"></div>
</div><br>
<div class=abs-cb>
  <div class="anchor bl"></div>
  <div class=positioned style="bottom: 20px; left: 0;"></div>
</div
><div class=abs-cb>
  <div class="anchor bl"></div>
  <div class=positioned style="bottom: 0; left: 20px;"></div>
</div
><div class=abs-cb>
  <div class="anchor br"></div>
  <div class=positioned style="bottom: 20px; right: 0;"></div>
</div
><div class=abs-cb>
  <div class="anchor br"></div>
  <div class=positioned style="bottom: 0; right: 20px;"></div>
</div>