1993698 - Can't anchor position against ::placeholder

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[David Shin[:dshin]]

Attachment: Minimum Reproducible Case

It's a tree-abiding pseudo, so we should be able to.

Just missing it here: https://searchfox.org/firefox-main/rev/ab5bf2401717970560597083d6ac72915bde2d89/layout/base/AnchorPositioningUtils.cpp#112

Comment 1

[一丝]

Currently, it appears that no browsers support ::marker as an anchor-positioned element.

data:text/html;charset=UTF-8,
<style>
.anchored {
    width: 30px;
    height: 30px;
    background-color: green;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
    position-anchor: --foo;
    position-area: right bottom;
}

ul {
    margin-top: 100px;
    margin-left: 100px;
}

li::marker {
  content: "❤️";
  font-size: 2em;
  anchor-name: --foo;
}
</style>
<div class="anchored">Anchored</div>
<ul>
  <li>Test ::marker</li>
</ul>

Comment 2

[一丝]

We also need to check the ::details-content pseudo-element, which currently appears to be unsupported in Firefox.

data:text/html;charset=UTF-8,
<style>
.anchored {
    height: 50px;
    background-color: green;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
    position-anchor: --foo;
    position-area: right center;
}
details {
  width: 300px;
  margin-top: 50px;
}
details[open]::details-content {
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  anchor-name: --foo;
}
</style>

<details open>
  <summary>Example summary</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>
    Architecto cupiditate ea optio modi quas sequi, esse libero asperiores
    debitis eveniet commodi hic ad.
  </p>
</details>
<div class="anchored">Anchored</div>

Comment 3

[一丝]

https://drafts.csswg.org/css-pseudo-4/#element-like

Element-backed pseudo-elements are always tree-abiding.