Intent to Ship: display:contents
Rune Lillesveen
Contact emails
fut...@chromium.org, emi...@chromium.org
Spec
https://drafts.csswg.org/css-display/#valdef-display-contents
No tag review since this is already shipped in Gecko and enabled on trunk for WebKit.
Summary
We are adding a new keyword ‘contents’ to the CSS display property. An element with display:contents will not generate a layout tree box like display:none, yet its descendants will. The motivation is to support Shadow DOM as specified with slots in the flat tree (see interop), and it has use cases for grid and flexbox (see “Web developers” links below).
Link to “Intent to Implement” blink-dev discussion
Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes.
Demo link
https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/
Debuggability
New value for display property. Works in devtools without changes.
Risks
Interoperability and Compatibility
Low risk for others shipping since Gecko already did, and WebKit is about to. There is a little risk of interop with Gecko regarding pseudo elements and with Edge where there are no known public signals.
Shipping display:contents will improve interop for shadow dom as we can include <slot> elements in the flat tree (as specified - tracking issue) styling them with display:contents in the UA sheet. WebKit has already shipped a shadow dom implementation which includes slots in the flat tree, but without a general support for display:contents.
Edge: No signals
Firefox: Shipped
Safari: Enabled on trunk
Web developers:
https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/
See test section below for current interop testing.
Ergonomics
Will be beneficial to use with grid, flexbox, and shadow dom.
Activation
Should be straightforward to use this feature.
Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
WPT has good coverage:
https://github.com/w3c/web-platform-tests/tree/master/css/css-display
https://wpt.fyi/css/css-display
wpt.fyi is mostly up-to-date wrt Gecko trunk. The line-height and fieldset tests seems to be fixed in nightly builds. The reasons for failing tests for Gecko are:
Not implementing display:contents for pseudo elements
Implementation not up-to-date with spec update for "unusual elements"
Blink and WebKit (historically) share the same bug about not being able to merge anonymous table box siblings after display type or DOM changes which is causing both engines to fail display-contents-dynamic-table-001-inline.html. It’s not related to display:contents as such, and I don’t think it needs to block shipping display:contents.
None of the browsers supports styling the HTML <details> elements with display:contents. It’s possible that the test is not correct, but it’s based on what the css-display spec currently says.
Blink behind flag passes everything but:
display-contents-details.html
display-contents-dynamic-table-001-inline.html
WebKit trunk passes everything but:
display-contents-details.html
display-contents-dynamic-table-001-inline.html
display-contents-svg-elements.html
Entry on the feature dashboard
Emilio Cobos Álvarez
On 12/28/2017 01:18 PM, Rune Lillesveen wrote:
> wpt.fyi is mostly up-to-date wrt Gecko trunk. The line-height and
> fieldset tests seems to be fixed in nightly builds. The reasons for
> failing tests for Gecko are:
>
> Not implementing display:contents for pseudo elements
https://bugzilla.mozilla.org/show_bug.cgi?id=1418138.
I don't think is very important for compatibility (I fail to see a
use-case for it, though it's nice for consistency). Since we may do a
lot of work in Gecko's layout tree building code in the following months
I haven't worked on it yet.
> *
> Implementation not up-to-date with spec update for "unusual
I think this is a bit more problematic, potentially (specially for
<button> and such). I just filed
https://bugzilla.mozilla.org/show_bug.cgi?id=1427292 with a patch for
this one.
-- Emilio
Emilio Cobos Álvarez
>> *
>>
>> Implementation not up-to-date with spec update for "unusual
>> elements" <https://drafts.csswg.org/css-display/#unbox>
>
> I think this is a bit more problematic, potentially (specially for
> <button> and such). I just filed
> https://bugzilla.mozilla.org/show_bug.cgi?id=1427292 with a patch for
> this one.
view.
I don't think this should block shipping on Blink or that the spec is
problematic.
-- Emilio
PhistucK
----Rune Lillesveen
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeTuzZ0Vxc%3DVU9GksgMuDzPgN7Er906ADxjdkpQ4qzo1%3DA%40mail.gmail.com.
Rune Lillesveen
> New value for display property. Works in devtools without changes.Does it show mark a box on the page when the mouse hovers such an element in the Elements panel (it should not, right?)?
Jochen Eisinger
Yoav Weiss
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/01c2ef68-2e36-4164-a25b-a6cdaf69c9bb%40chromium.org.
Chris Harrelson
lgtm2
On Tue, Jan 2, 2018 at 1:30 PM Jochen Eisinger <joc...@chromium.org> wrote:
lgtm1--
On Tuesday, January 2, 2018 at 9:36:52 AM UTC+1, Rune Lillesveen wrote:On Sat, Dec 30, 2017 at 11:06 AM PhistucK <phis...@gmail.com> wrote:> New value for display property. Works in devtools without changes.Does it show mark a box on the page when the mouse hovers such an element in the Elements panel (it should not, right?)?No, it does not highlight anything while hovering a display:contents element.--Rune Lillesveen
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/01c2ef68-2e36-4164-a25b-a6cdaf69c9bb%40chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACj%3DBEiQYYFjrwyZSDKnuaVxnjD6%2Bjvqdh0TkFBy8cVZJ%2BNRnA%40mail.gmail.com.To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
Rune Lillesveen
LGTM3On Tue, Jan 2, 2018 at 5:36 AM, Yoav Weiss <yo...@yoav.ws> wrote:lgtm2On Tue, Jan 2, 2018 at 1:30 PM Jochen Eisinger <joc...@chromium.org> wrote:lgtm1
On Tuesday, January 2, 2018 at 9:36:52 AM UTC+1, Rune Lillesveen wrote:On Sat, Dec 30, 2017 at 11:06 AM PhistucK <phis...@gmail.com> wrote:> New value for display property. Works in devtools without changes.Does it show mark a box on the page when the mouse hovers such an element in the Elements panel (it should not, right?)?No, it does not highlight anything while hovering a display:contents element.
--