1856374 - Allow changing `display` of `<details>` elements

Status: RESOLVED FIXED

(Core :: Layout, defect, P3)

Description

[:Gijs (out for now; he/him)]

I noticed that I couldn't get flexbox to work for a <details>/<summary> pair. Emilio pointed to the spec which says:

The details element is expected to render as a block box.

which ends up meaning that (cross-browser) you cannot change its display value to flex. Emilio suggested this may change in the future, and we could experiment with it behind a pref.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

David, this is the "<details> is always a block" bit that I mentioned when you brought up details styling. Do you know if there's an issue on the HTML spec to remove that requirement or if that's part of your work for <details> improvements?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1856374 - Add a pref to stop forcing details elements to be blocks. r=TYLin

This is probably something we want to move towards, so it doesn't hurt
adding a pref to allow people to experiment with it.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'm not aware of an issue against the HTML spec on this.

I am interested in working on fixing this, as discussed in the CSS WG meeting in July. I've prototyped this change and some other changes in Chromium in https://crbug.com/1469418 , but with the intent of experimenting with what I prototyped and likely making major changes. I got a bunch of feedback from Bramus who tried to use the prototype to build a bunch of things with it, and I'm part of the way done going through that feedback. Once I do that, I need to (possibly not in this order) write some major updates to https://github.com/dbaron/details-styling, probably try to get another round of feedback from Bramus and hopefully build a few demos, and start making some more concrete proposals for what to change in some combination of the Open UI CG / the CSS WG / the HTML spec. I'm hoping to get back to working on that sometime this month (but I've spent the past month mostly doing two other things, one of which is <details name>).

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4416f2eba0ce
Add a pref to stop forcing details elements to be blocks. r=TYLin

Comment 5

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42367 for changes under testing/web-platform/tests

Comment 6

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/4416f2eba0ce

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot