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

Quirk: bare <li> have list-style-position: inside #10959

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

zcorpan
Copy link
Member

@zcorpan zcorpan commented Jan 28, 2025

Fixes #10958.

(See WHATWG Working Mode: Changes for more details.)


/rendering.html ( diff )

@Loirooriol
Copy link
Contributor

Should this go to https://quirks.spec.whatwg.org/ instead of HTML?

@zcorpan
Copy link
Member Author

zcorpan commented Jan 29, 2025

@Loirooriol no, HTML already has quirks mode style rules like this. Eventually, all quirks should be upstreamed to the appropriate spec instead of being defined in a delta spec.

@zcorpan zcorpan added the do not merge yet Pull request must not be merged per rationale in comment label Jan 30, 2025
@zcorpan
Copy link
Member Author

zcorpan commented Jan 30, 2025

Marking "do not merge yet" for #10958 (comment) (also see earlier comments).

@zcorpan zcorpan changed the title Quirk: bare <li> have list-style-position: inside Bare <li> should have list-style-position: inside Feb 3, 2025
@zcorpan zcorpan removed the do not merge yet Pull request must not be merged per rationale in comment label Feb 3, 2025
@zcorpan
Copy link
Member Author

zcorpan commented Feb 3, 2025

I've updated this PR to also apply this behavior in standards mode and to include menu and dir in the selector, per web compat research findings. I've also updated the tests.

@emilio
Copy link
Contributor

emilio commented Feb 3, 2025

Slight preference to align on current WebKit / Firefox Nightly behavior (just quirks and no dir / menu) fwiw... There may be other compat impact of making the change to computed styles in standards mode so if we can get away with it seems preferable, specially if the visual impact is minimal

@emilio
Copy link
Contributor

emilio commented Feb 3, 2025

(Plus those selectors are not particularly cheap)

@zcorpan zcorpan changed the title Bare <li> should have list-style-position: inside Quirk: bare <li> have list-style-position: inside Feb 4, 2025
@zcorpan
Copy link
Member Author

zcorpan commented Feb 4, 2025

I've changed this again to only apply in quirks mode.

@zcorpan zcorpan requested a review from nt1m February 4, 2025 12:24
Copy link
Contributor

@emilio emilio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, seems fine to put dir/menu on my end again. @nt1m given the discussions above does it seems reasonable to you?

@nt1m
Copy link
Member

nt1m commented Feb 4, 2025

I doubt we really need menu, dir in the style fwiw, the websites that looked better in Firefox also looked better in Safari builds with WebKit/WebKit#37176 applied (which does not have menu, dir in its UA styles). So I suspect this is more due to Chrome/old WebKit considering li inside menu as standalone li and applying quirky behavior there, rather than due to Firefox UA styles covering menu, dir.

I could live either way on including menu, dir though, but I'd love to understand the reasoning behind this better.

@zcorpan
Copy link
Member Author

zcorpan commented Feb 5, 2025

For example http://old.lawjusticediv.gov.bd/ with list-style-position: inside on menu > li renders the markers on their own lines, because each list item contains a div.

Screenshot of the above page showing bullet points on their own lines.

In WebKit the marker is on the same line anyway, but that seems like a bug, if I understand the spec correctly.

No special effect. (The ::marker is an inline element at the start of the list item’s contents.)

https://drafts.csswg.org/css-lists/#valdef-list-style-position-inside

Demo: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/13478

Screenshot 2025-02-05 at 11 20 04

Apart from making a few pages render better, I think it also makes more sense to make dir and menu render like ul, since the spec includes other UA style rules for them (e.g. list-style-type and padding-inline-start). menu is a conforming element. dir is not, but if we want to get rid of that from the UA stylesheet, it should be removed everywhere.

https://software.hixie.ch/utilities/js/live-dom-viewer/saved/13479

@zcorpan
Copy link
Member Author

zcorpan commented Feb 5, 2025

I see now that the above page is in standards mode, but I intentionally analyzed more standards mode pages than quirks mode pages (to understand impact of quirks-mode-only vs all modes).

@Loirooriol
Copy link
Contributor

Yes, WebKit doesn't treat inside markers as normal inline boxes. See relevant discussion: w3c/csswg-drafts#5276 (comment)

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

Successfully merging this pull request may close these issues.

Specify the bare li element "list-style-position:inside" quirk
4 participants