Blitz - WPT: anchor-center-safe.html

wpt / css / css-anchor-position / anchor-center-safe.html

/css/css-anchor-position/anchor-center-safe.html

<!doctype html>
<title>Tests whether safe alignment works correctly on the anchor element.</title>
<link rel="match" href="anchor-center-safe-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center">
<style>
.anchor {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 30px;
  color: white;
  background-color: green;
  anchor-name: --myAnchor;
}
.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  position: fixed;
  position-anchor: --myAnchor;
  top: calc(anchor(bottom) + 5px);
  left: 0px;
  justify-self: safe anchor-center;
}

.anchor2 {
  position: fixed;
  top: 0px;
  left: 340px;
  height: 30px;
  width: 100px;
  color: white;
  background-color: green;
  anchor-name: --myAnchor2;
}
.infobox2 {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  position: fixed;
  position-anchor: --myAnchor2;
  left: calc(anchor(right) + 5px);
  align-self: safe anchor-center;
}
</style>
<div class="anchor">Anchor</div>
<div class="infobox">
  <p>Anchored element with justify-self</p>
</div>
<div class="anchor2">Anchor2</div>
<div class="infobox2">
  <p>Anchored element with align-self</p>
</div>

/css/css-anchor-position/anchor-center-safe-ref.html

<!doctype html>
<title>Tests whether safe alignment works correctly on the anchor element.</title>
<style>
.anchor {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 30px;
  color: white;
  background-color: green;
}
.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  position: fixed;
  top: 35px;
  left: 0px;
}
.anchor2 {
  position: fixed;
  left: 340px;
  top: 0px;
  height: 30px;
  width: 100px;
  color: white;
  background-color: green;
}
.infobox2 {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  position: fixed;
  top: 0px;
  left: 445px; /* This value is calculated from the left position value of .anchor2 plus its width, plus an additional 5 px of padding */
}
</style>
<div style="position: relative;">
  <div class="anchor">Anchor</div>
  <div class="infobox">
    <p>Anchored element with justify-self</p>
  </div>
  <div class="anchor2">Anchor2</div>
  <div class="infobox2">
    <p>Anchored element with align-self</p>
  </div>
</div>