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
----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.
> 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?)?
--
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.
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.
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.