Blitz - WPT: position-try-005.html

wpt / css / css-anchor-position / position-try-005.html

/css/css-anchor-position/position-try-005.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback">
<link rel="author" href="mailto:jkew@mozilla.com">
<link rel="match" href="position-try-005-ref.html">

<style>
.cb {
  position: relative;
  width: 250px;
  height: 100px;
  background: yellow;
}
.anchor {
  position: relative;
  anchor-name: --a;
  top: 25px;
  left: 50px;
  width: 50px;
  height: 50px;
  background: blue;
}
.target {
  position: absolute;
  position-try-fallbacks: --f1, --f2, --f3, --f4;
  width: 140px;
  margin: 10px;
  background: #0004;
  /* Position to the right of the anchor. */
  left: anchor(--a right);
  top: anchor(--a top);
}
/* fallback positions with various widths, none of which actually fit */
@position-try --f1 {
  inset: auto;
  /* Position to the left of the anchor. */
  right: anchor(--a left);
  top: anchor(--a top);
  width: 300px;
}
@position-try --f2 {
  inset: auto;
  /* Position to the bottom of the anchor. */
  left: anchor(--a left);
  top: anchor(--a bottom);
  width: 250px;
}
@position-try --f3 {
  inset: auto;
  /* Position to the top of the anchor. */
  left: anchor(--a left);
  bottom: anchor(--a top);
  width: 150px;
}
@position-try --f4 {
  inset: auto;
  /* Position to the right of the anchor, with a larger width. */
  left: anchor(--a right);
  top: anchor(--a top);
  width: 200px;
}
</style>
<body>
  <!-- None of the fallback rules fit. The base style is used. -->
  <div class="cb">
    <div class="anchor"></div>
    <!-- target element includes wrapped text, to check that its content is reflowed appropriately for the chosen position -->
    <div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div>
  </div>
</body>

/css/css-anchor-position/position-try-005-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:jkew@mozilla.com">

<style>
.cb {
  position: relative;
  width: 250px;
  height: 100px;
  background: yellow;
}
.anchor {
  position: absolute;
  top: 25px;
  left: 50px;
  width: 50px;
  height: 50px;
  background: blue;
}
.target {
  position: absolute;
  top: 35px;
  left: 110px;
  width: 140px;
  background: #0004;
}
</style>
<body>
  <div class="cb">
    <div class="anchor"></div>
    <div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div>
  </div>
</body>