[css-display][css-pseudo] Clearly define display: contents behaviour on pseudo-elements

[nt1m]

https://drafts.csswg.org/css-display/#box-generation

https://drafts.csswg.org/css-pseudo/

While working on display: contents handling for ::backdrop (which has clearly defined rules), I noticed it is not well defined for pseudo elements in general, and behaviour is inconsistent across different browsers (notably for ::marker or ::file-selector-button). Should we try and make some easy to understand rules?

It would be convenient if those rules were based on spec concepts, e.g. "tree-abiding pseudo-elements", "Typographic Pseudo-elements". "highlight pseudo-elements".

[nt1m]

It's also worth noting behaviour is different just for ::before/::after. Firefox makes it work like display: revert; I think, and Chrome/Safari makes it work like normal elements.

[emilio]

It's also worth noting behaviour is different just for ::before/::after. Firefox makes it work like display: revert; I think, and Chrome/Safari makes it work like normal elements.

That is a known Gecko bug, fwiw, see https://searchfox.org/mozilla-central/rev/a831b7db5643a9ae7a1ce2851330ce94075093ad/servo/components/style/style_adjuster.rs#501

[nt1m]

I had a discussion with @emilio, and it sounds like everything is well defined in https://drafts.csswg.org/css-pseudo/, just in obscure ways:

• Typographic Pseudo-elements
• Highlight Pseudo-elements

display does not apply. Similar to inline level boxes.

• ::before / ::after

These pseudo-elements can be styled exactly like any normal document-sourced element in the document tree; all properties that apply to a normal element likewise apply to ::before and ::after.

• ::marker

Only a limited set of properties can be used on the ::marker pseudo-element. This list is defined in CSS Lists 3 § 3.1.1 Properties Applying to ::marker.

e.g. display does not apply atm.

• ::placeholder

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

e.g. display does not apply to ::placeholder, so display: contents does nothing.

• ::file-selector-button

The ::file-selector-button pseudo-element targets the <button> inside an <input> element with type=file, if the UA renders such a button.
There is no restriction on which properties apply to the ::file-selector-button pseudo-element.

I assume that means this should just work like it does on <button>

---

That being said, one thing that would be nice to clarify would be the computed values, meaning the initial values when display doesn't apply.

[tabatkins]

Yup, we agree with Emilio - the tree-abiding pseudos that allow 'display' should already be reasonably defined in how they interact with "display:contents" (aka, like normal elements would), and anything else just doesn't allow 'display' at all, so the question is moot.

The computed value of 'display' on pseudos like ::first-line should be defined by CSSOM; if it's not, we can file an issue on that spec, but it's not the Display spec's issue. ^_^