Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
nt1m opened this issue Aug 14, 2021 · 4 comments

Comments

@nt1m
Copy link
Member

nt1m commented Aug 14, 2021

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
Copy link
Member Author

nt1m commented Aug 14, 2021

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
Copy link
Collaborator

emilio commented Aug 14, 2021

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
Copy link
Member Author

nt1m commented Aug 14, 2021

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 tabatkins added css-display-3 Current Work css-pseudo-4 Current Work labels Aug 27, 2021
@tabatkins
Copy link
Member

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. ^_^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants