Rendering: further details/summary cleanup

[annevk]

As is evident from https://bugs.chromium.org/p/chromium/issues/detail?id=973074 the current description still had too much from the old description and led to some inconsistencies in implementations. This makes it clear the slots have no special styling (by default) and it's the first summary element that is special, not the first slot.

• At least two implementers are interested (and none opposed):
  • Firefox
  • Chrome
• Tests are written and can be reviewed and commented upon at:
  • Remove anonymous box from details/summary shadow dom web-platform-tests/wpt#26053
• Implementation bugs are filed:
  • Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=973074
  • Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1308080
  • Safari: ?

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

---

/rendering.html ( diff )

[Loirooriol]

It seems there is no WPT about this, just an internal Chromium test. See https://chromium-review.googlesource.com/c/chromium/src/+/1724676

[annevk]

@Loirooriol could you maybe turn that into a WPT test?

[Loirooriol]

@annevk That test uses internal Chromium APIs in order to access the flat tree, since the shadow tree is closed. I don't think I can do that in WPT.

[annevk]

@Loirooriol I think you should be able to write a reftest for this, given the original bug report.

[Loirooriol]

Yes, but it seems suboptimal. If I use display: grid on <details>, it doesn't become a grid container. If it can ignore display: grid, couldn't it theoretically ignore display: contents too? Seems an implementation detail. So I would prefer to test the flat tree like in that internal test, but it doesn't seem possible.

[annevk]

@Loirooriol interesting point, ideally that's not an implementation detail and we define what works here. #1839 is also about this a bit (though for <summary>).

cc @emilio

[emilio]

This looks sensible. Did we decide on the pseudo-element story yet?

[annevk]

Pseudo-elements were discussed in #3805 and the conclusion there was that not enough people cared for it to warrant changes, as far as I can tell.

@domenic can you find someone on the Chrome side to conclude this? (I see you tried a year ago, might be worth trying again.)

[domenic]

I poked @mfreed7 and @bfgeek internally. It would be good if we had some web platform test for this though, to make it clear what the compat and interop risks are of such a change.

[mfreed7]

We're supportive of this change. I can take care of implementation on Chromium, and adding a WPT test. My plan (subject to comments here) would be to use the test case (converted to a reftest) provided by Igalia in this comment on the Chromium bug:

<div style="display: grid; grid-template-columns: auto auto;">
  <details style="display: contents;" open>
    <summary style="background: magenta; grid-column: 1 / 3;">foo</summary>
    <div style="background: cyan; grid-column: 1 / 3;">bar</div>
  </details>
</div>

[Loirooriol]

If it can ignore display: grid, couldn't it theoretically ignore display: contents too? Seems an implementation detail.

This seems safer now with the resolution from w3c/csswg-drafts#4065:

Blockification section should use the computed value, not the box of the element

Therefore, in

<details style="display: grid" open>
  <summary style="display: inline">foo</summary>
  <div style="display: inline">bar</span>
</details>

both the <summary> and <div> should have getComputedStyle(el).display === "block". Even if the <details> is not a grid container (but assuming it keeps display: grid as the computed value).

And same for the following, even if the <details> ends up generating boxes (but assuming it keeps display: contents as the computed value):

<div style="display: grid">
  <details style="display: contents" open>
    <summary style="display: inline">foo</summary>
    <div style="display: inline">bar</span>
  </details>
</div>

@mfreed7 The implementation should be simple, https://chromium-review.googlesource.com/c/chromium/src/+/1724676.

[mfreed7]

@mfreed7 The implementation should be simple, https://chromium-review.googlesource.com/c/chromium/src/+/1724676.

Thanks! I didn't know you already had a patch up - would have saved me the time of doing the same thing. Anyway, as you point out, relatively simple fix. Thanks for all the help here.

[mfreed7]

Alright, this is now implemented in Chromium, and tests added here.

[annevk]

Safari passes the test so I didn't file a bug there. However, Firefox also passes the test and @emilio has landed the fix yet...

[Loirooriol]

The test checks that no wrapper element is added (which is what Chromium was doing).

For Firefox the problem is that it's using custom layout instead of shadow DOM. So Firefox will need a different test, like using details::before { content: "something" } and checking that the generated content appears before the summary.