Blitz - WPT: anchor-fixed-pos-descendant.html

wpt / css / css-anchor-position / anchor-fixed-pos-descendant.html

/css/css-anchor-position/anchor-fixed-pos-descendant.html

<!doctype html>
<title>Anchor positioning to your own descendant shouldn't work</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2005461">
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#target">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.com" title="Mozilla">
<link rel="match" href="anchor-fixed-pos-descendant-ref.html">
<style>
p {
  display: block;
  outline: 1px solid;
  height: 1lh;
  anchor-name: --foo;
  anchor-scope: --foo;
  overflow: hidden;
  resize: horizontal;
}

p > span {
  position: fixed;
  pointer-events: none;
  inset: anchor(--foo inside);
  left: anchor(--anchor right, 0);
  right: anchor(--foo right, 0);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    anchor-name: --anchor;
    width: 10px;
    background-color: pink;
  }
}
</style>
<p style="width: 100px"><span></span></p>

/css/css-anchor-position/anchor-fixed-pos-descendant-ref.html

<!doctype html>
<title>CSS Test Reference</title>
<style>
p {
  display: block;
  outline: 1px solid;
  height: 1lh;
  anchor-name: --foo;
  anchor-scope: --foo;
  overflow: hidden;
  resize: horizontal;
}

p > span {
  position: fixed;
  pointer-events: none;
  inset: anchor(--foo inside);
  right: anchor(--foo right, 0);
  left: 0;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 10px;
    background-color: pink;
  }
}
</style>
<p style="width: 100px"><span></span></p>