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.

Sign up for GitHub

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

Jump to bottom

Details and summary styles don't match implementations. #8610

Closed
emilio opened this issue Dec 12, 2022 · 5 comments · Fixed by #8780
Closed

Details and summary styles don't match implementations. #8610

emilio opened this issue Dec 12, 2022 · 5 comments · Fixed by #8780
Labels
topic: rendering

Comments

@emilio
Copy link
Contributor

emilio commented Dec 12, 2022 •
edited
Loading

https://html.spec.whatwg.org/#the-details-and-summary-elements has:

summary {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details[open] > summary {
  list-style-type: disclosure-open;
}

However a quick test like this:

<!doctype html>
<details>
  <summary>Example</summary>
  <summary>Another</summary>
</details>
<details open>
  <summary>Example</summary>
  <summary>Another</summary>
</details>
<details>
  Anonymous
</details>

shows that the rules browsers actually use are different. The selectors are something like details > summary:first-of-type and details[open] > summary:first-of-type, with extra similar styles for the anonymous summary.

I think we could change browsers to follow the spec if needed, but it might be better to make the spec match reality?
@emilio emilio added topic: rendering agenda+ To be discussed at a triage meeting labels Dec 12, 2022
@scottaohara

This comment was marked as resolved.

Sign in to view
@emilio
Copy link
Contributor Author

emilio commented Dec 12, 2022

That's how browsers behave, and what I'm proposing, unless I'm missing something?

@scottaohara
Copy link
Collaborator

nope, not missing anything. rather i was missing the fact that the styles i was seeing were due to revised default styling from normalize.css which i didn't realize was referenced form the file i was testing.

so... i'll just excuse myself from this and go file a bug over there. sorry about that.

@moz-wptsync-bot moz-wptsync-bot mentioned this issue Dec 13, 2022
Merged
moz-wptsync-bot pushed a commit to web-platform-tests/wpt that referenced this issue Dec 13, 2022
@emilio @moz-wptsync-bot
Implement details and summary styling in a UA sheet.
949570a 
This preserves the revert keyword behavior. This doesn't match the spec
to the letter, see whatwg/html#8610, but I
think it's probably ok to keep behavior for now. Changing to match the
spec would avoid duplicating the details.css summary rule.

Differential Revision: https://phabricator.services.mozilla.com/D164439

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1804925
gecko-commit: 5c61586b4d42a68cb9d49e2afa5db3c4efc3004b
gecko-reviewers: TYLin
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Dec 13, 2022
@emilio
Bug 1804925 - Implement details and summary styling in a UA sheet. r=…
63d67a6 
…TYLin

This preserves the revert keyword behavior. This doesn't match the spec
to the letter, see whatwg/html#8610, but I
think it's probably ok to keep behavior for now. Changing to match the
spec would avoid duplicating the details.css summary rule.

Differential Revision: https://phabricator.services.mozilla.com/D164439
moz-wptsync-bot pushed a commit to web-platform-tests/wpt that referenced this issue Dec 13, 2022
@emilio @moz-wptsync-bot
Implement details and summary styling in a UA sheet.
c196035 
This preserves the revert keyword behavior. This doesn't match the spec
to the letter, see whatwg/html#8610, but I
think it's probably ok to keep behavior for now. Changing to match the
spec would avoid duplicating the details.css summary rule.

Differential Revision: https://phabricator.services.mozilla.com/D164439

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1804925
gecko-commit: 5c61586b4d42a68cb9d49e2afa5db3c4efc3004b
gecko-reviewers: TYLin
jamienicol pushed a commit to jamienicol/gecko that referenced this issue Dec 14, 2022
@emilio
Bug 1804925 - Implement details and summary styling in a UA sheet. r=…
a5a62c9 
…TYLin

This preserves the revert keyword behavior. This doesn't match the spec
to the letter, see whatwg/html#8610, but I
think it's probably ok to keep behavior for now. Changing to match the
spec would avoid duplicating the details.css summary rule.

Differential Revision: https://phabricator.services.mozilla.com/D164439
@past past mentioned this issue Jan 12, 2023
Closed
@domenic
Copy link
Member

domenic commented Jan 13, 2023

On the triage call, everyone was leaning toward changing the spec to match browser behavior, but we took an action item to read up a bit more to confirm.

Upon doing so, I think changing the spec to match browser behavior is indeed the best path here. That makes the styling consistent with the behavior. (Everything in https://html.spec.whatwg.org/#the-details-and-summary-elements except the stylesheet mentions "first summary element child", and https://html.spec.whatwg.org/#summary-for-its-parent-details also requires it to be the first element child.)

So, a PR and test updates would be lovely from my perspective.

@jakearchibald
Copy link
Contributor

Somewhat related, I think we should have a pseudo-element selector for the default <summary> #8770

emilio added a commit to emilio/html that referenced this issue Jan 26, 2023
@emilio
Make details styles match implementation.
c190cc5 
There's not any mention of the fallback summary which is rather
unfortunate?

Fixes whatwg#8610
@emilio emilio mentioned this issue Jan 26, 2023
Merged
3 tasks
@past past mentioned this issue Jan 26, 2023
Closed
@past past removed the agenda+ To be discussed at a triage meeting label Jan 26, 2023
domenic pushed a commit that referenced this issue Jan 27, 2023
@emilio
Make <details> UA styles match implementations
0f1d234 
Fixes #8610.
@past past mentioned this issue Feb 9, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: rendering
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Make details styles match implementation. emilio/html
5 participants
@past @jakearchibald @domenic @emilio @scottaohara