New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 28 users
Status: Started
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Task


Sign in to add a comment
Implement "display: contents"
Project Member Reported by r...@igalia.com, Oct 20 2016 Back to list
Change description:

  The "display" property allows to control the box generation.
  The element with the "contents" keyword won't generate any boxes,
  but its children and pseudo-elements will still generate them.
  The element will be treated as if it has been replaced
  with its children and pseudo-elements.

Changes to API surface:
* New "contents" value for "display" property.

Links:
* Spec: https://drafts.csswg.org/css-display/#box-generation

Support in other browsers:
Internet Explorer: No
Firefox: Yes (shipped in Firefox 37
Safari: No


 
Comment 1 by r...@igalia.com, Oct 20 2016
There's been an ongoing discussion on style-dev about this:
https://groups.google.com/a/chromium.org/d/msg/style-dev/nJz270uSkuA/2rBSBQDiBQAJ

And we'll be sending a proper "intent-to-implement" to blink-dev too.
Comment 2 by r...@igalia.com, Oct 20 2016
Owner: eco...@igalia.com
Status: Started
Project Member Comment 3 by bugdroid1@chromium.org, Oct 25 2016
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/310aa236042e11fc39958ab02e9ff55b393fced8

commit 310aa236042e11fc39958ab02e9ff55b393fced8
Author: ecobos <ecobos@igalia.com>
Date: Tue Oct 25 19:19:21 2016

Add parsing support for display: contents, and minimum behavior similar to display: none

The following commit adds parsing for the display: contents value, gated after a
runtime enabled feature, and adds the basic code for display: contents elements
to not generate a LayoutObject.

BUG=657748
TEST=LayoutTests/css-display-3/display-contents-set-get.html

Review-Url: https://codereview.chromium.org/2443693003
Cr-Commit-Position: refs/heads/master@{#427437}

[add] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/LayoutTests/css-display-3/display-contents-set-get.html
[delete] https://crrev.com/c0148879eff4f35f89c2882dae706a3b097c2c4a/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-computed-style-expected.txt
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/LayoutTests/inspector/sources/autocomplete-css-expected.txt
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/core/css/CSSPrimitiveValueMappings.h
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/core/css/CSSValueKeywords.in
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/core/layout/LayoutObject.cpp
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/core/layout/LayoutObject.h
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/core/style/ComputedStyleConstants.h
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/devtools/front_end/sdk/CSSMetadata.js
[modify] https://crrev.com/310aa236042e11fc39958ab02e9ff55b393fced8/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in

Blocking: 660265
Project Member Comment 5 by bugdroid1@chromium.org, Nov 2 2016
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d582fd6159457a8a9ff4f2064ce45d8bc4626c72

commit d582fd6159457a8a9ff4f2064ce45d8bc4626c72
Author: hayato <hayato@chromium.org>
Date: Wed Nov 02 03:18:21 2016

Add a UA style, "display: contents", for <slot>

The spec is: https://html.spec.whatwg.org/#flow-content-3

This rule is guarded by the same runtime flag for "display: contents".
Unless the flag is enabled, the rule can not be effective because the parser does
not consider it a valid rule.

This change only affects slots in non-shadow trees since Blink excludes slots in
shadow trees from a flat tree.

Since "display: contents" is not well supported yet, the children of a slot in
non-shadow trees would not be displayed.

BUG=657748,660265

Review-Url: https://codereview.chromium.org/2466243002
Cr-Commit-Position: refs/heads/master@{#429198}

[add] https://crrev.com/d582fd6159457a8a9ff4f2064ce45d8bc4626c72/third_party/WebKit/LayoutTests/shadow-dom/slots-fallback-in-document-tree-expected.html
[add] https://crrev.com/d582fd6159457a8a9ff4f2064ce45d8bc4626c72/third_party/WebKit/LayoutTests/shadow-dom/slots-fallback-in-document-tree.html
[modify] https://crrev.com/d582fd6159457a8a9ff4f2064ce45d8bc4626c72/third_party/WebKit/LayoutTests/shadow-dom/slots.html
[modify] https://crrev.com/d582fd6159457a8a9ff4f2064ce45d8bc4626c72/third_party/WebKit/Source/core/css/html.css

Cc: hayato@chromium.org
Project Member Comment 7 by bugdroid1@chromium.org, Dec 20 2016
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/6a8a116b565eee73ee54ec4a0dc476ce6f834c51

commit 6a8a116b565eee73ee54ec4a0dc476ce6f834c51
Author: ecobos <ecobos@igalia.com>
Date: Tue Dec 20 15:13:16 2016

Import display: contents tests from csswg-test.

This were reviewed upstream in https://github.com/w3c/csswg-test/pull/1155

This should reduce the noise in https://codereview.chromium.org/2450093005, and
make it more manageable and straight-forward to review.

BUG=657748

Review-Url: https://codereview.chromium.org/2588093003
Cr-Commit-Position: refs/heads/master@{#439805}

[modify] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/W3CImportExpectations
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-computed-style-expected.txt
[modify] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-computed-style.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-001-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-001-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-001-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-001-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-002-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-002-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-002-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-002-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-003-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-003-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-003-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-flex-003-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-inline-flex-001-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-inline-flex-001-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-inline-flex-001-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-inline-flex-001-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-list-001-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-list-001-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-list-001-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-list-001-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-multicol-001-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-multicol-001-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-multicol-001-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-multicol-001-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-001-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-001-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-001-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-001-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-002-inline-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-002-inline.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-002-none-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-dynamic-table-002-none.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-flex-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-flex-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-flex-002-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-flex-002.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-flex-003-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-flex-003.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-float-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-float-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-inline-flex-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-inline-flex-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-list-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-list-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-multicol-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-multicol-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-oof-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-oof-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-oof-002-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-oof-002.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-table-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-table-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-table-002-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-table-002.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-text-only-001-expected.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/display-contents-text-only-001.html
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/support/acid.css
[add] https://crrev.com/6a8a116b565eee73ee54ec4a0dc476ce6f834c51/third_party/WebKit/LayoutTests/imported/csswg-test/css-display-3/support/util.js

Comment 8 by meade@chromium.org, Jan 19 2017
Hi ecobos! Thanks very much for working on this. I was wondering if you could update us on what your status for this work is? Thanks!
Comment 9 by eco...@igalia.com, Jan 19 2017
Hi meade, thanks for asking!

So the status hasn't changed a lot this last month, mostly because of my exams, but here's the excerpt:

I plan to land a bunch of work which is awaiting review at https://codereview.chromium.org/2450093005. That will make us support most of the display: contents use cases.

After that, I need to make pseudo-elements work for display: contents elements (which shouldn't be extremely hard, I just didn't want to bloat the above CL).

Then my idea is fixing a bunch of pre-existing whitespace reattachment bugs derived from looking just at the light tree (they can hit also now with shadow DOM, but display: contents make them more likely).

I probably also need to dig into one table incremental layout bug that I found when display: contents is used as a table header, and fix it.

After that we should have a pretty solid display: contents implementation I think :)
Comment 10 by meade@chromium.org, Jan 19 2017
Hi ecobos, thanks for the update! And I hope your exams went well :)

This is all sounding really good - looking forward to seeing it landed.
Labels: Update-Quarterly
Components: -Blink>Layout
Removing multiple components for clear ownership
Project Member Comment 14 by bugdroid1@chromium.org, Feb 22 2017
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5fce73c8d68a52abbd31359c04373077c477e16c

commit 5fce73c8d68a52abbd31359c04373077c477e16c
Author: ecobos <ecobos@igalia.com>
Date: Wed Feb 22 10:07:11 2017

Support display: contents for elements, first-line and first-letter pseudos.

This CL implements a basic version of display: contents that doesn't take into
account pseudo-elements of display: contents elements.

As part of implementing it, all the non-layout-object styles have been unified.
That means that elements like <option> and <optgroup> no longer have custom
style callbacks just to preserve their computed style while they don't have a
LayoutObject.

Instead, they use the ElementRareData, the same way as display: contents and
getComputedStyle on display: none elements.

TEST=imported/csswg-test/css-display-3/
BUG=657748

Review-Url: https://codereview.chromium.org/2450093005
Cr-Commit-Position: refs/heads/master@{#451966}

[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/LayoutTests/TestExpectations
[delete] https://crrev.com/813f80ebbcf52c45108ee09c8b682d8af502017e/third_party/WebKit/LayoutTests/external/csswg-test/css-display-3/display-contents-computed-style-expected.txt
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/LayoutTests/shadow-dom/slots-fallback-in-document-tree-expected.html
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/BUILD.gn
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/ElementResolveContext.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/ElementResolveContext.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/StyleResolver.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/StyleResolverState.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/css/resolver/StyleResolverState.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/Document.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/Element.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/Element.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/LayoutTreeBuilder.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/LayoutTreeBuilder.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversal.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversal.h
[add] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversalTest.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/Node.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/NodeComputedStyle.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/dom/Text.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/html/HTMLOptGroupElement.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/html/HTMLOptGroupElement.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/html/HTMLOptionElement.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/html/HTMLOptionElement.h
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/layout/LayoutObject.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/svg/SVGElement.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/core/svg/SVGElementRareData.cpp
[modify] https://crrev.com/5fce73c8d68a52abbd31359c04373077c477e16c/third_party/WebKit/Source/modules/canvas2d/CanvasRenderingContext2DState.cpp

Project Member Comment 15 by bugdroid1@chromium.org, Feb 26 2017
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/6fbdb9993cb2aa58c89e37efba312ad00d8e16ca

commit 6fbdb9993cb2aa58c89e37efba312ad00d8e16ca
Author: ecobos <ecobos@igalia.com>
Date: Sun Feb 26 22:15:00 2017

[css-align] Use the layout parent style to determine the value of alignment-related properties.

The css-flexbox spec defined align-self in terms of the parent element, which
is what this code did.

The css-align defines these properties in terms of the style of the containing
box instead, which means display: contents styles should not be used for this
adjustment, but the layout parent style instead.

For example, align-items is defined as:

> This property specifies the default align-self for all of the boxes
> (including anonymous boxes) participating in this box’s formatting context.

Note that the css-align spec was recently updated to align (no pun intended)
with Gecko, and make the |auto| value compute to itself.

This CL puts us in a more recent spec than before, but not totally up-to-date.

BUG=657748

Review-Url: https://codereview.chromium.org/2712673002
Cr-Commit-Position: refs/heads/master@{#453127}

[modify] https://crrev.com/6fbdb9993cb2aa58c89e37efba312ad00d8e16ca/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/6fbdb9993cb2aa58c89e37efba312ad00d8e16ca/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp

Project Member Comment 16 by bugdroid1@chromium.org, Feb 28 2017
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/090729aac055ae7eb04e6056ef27f6affc9ee893

commit 090729aac055ae7eb04e6056ef27f6affc9ee893
Author: ecobos <ecobos@igalia.com>
Date: Tue Feb 28 01:20:18 2017

Fix LayoutTreeBuilderTraversal limit checks when recursing.

Before this commit, we were checking for limit == 0, which is wrong given we
postdecrement (so when we actually run out of siblings we should keep limit
equal to -1).

BUG=657748
TEST=third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversalTest.cpp

Review-Url: https://codereview.chromium.org/2715353002
Cr-Commit-Position: refs/heads/master@{#453435}

[modify] https://crrev.com/090729aac055ae7eb04e6056ef27f6affc9ee893/third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversal.cpp
[modify] https://crrev.com/090729aac055ae7eb04e6056ef27f6affc9ee893/third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversalTest.cpp

Project Member Comment 17 by bugdroid1@chromium.org, Mar 10 2017
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/15261753dcb96f302ca53757dcaefa442c4b2f0d

commit 15261753dcb96f302ca53757dcaefa442c4b2f0d
Author: ecobos <ecobos@igalia.com>
Date: Fri Mar 10 18:04:43 2017

Refactor LayoutTreeBuilderTraversal to expose a cleaner interface to layout sibling nodes.

This is the first step towards fixing the whitespace attachment bugs we have. My
plan is to use this from recalcDescendantStyles, and reattachWhitespaceSiblings
instead of the light tree.

BUG=657748

Review-Url: https://codereview.chromium.org/2725953002
Cr-Commit-Position: refs/heads/master@{#456105}

[modify] https://crrev.com/15261753dcb96f302ca53757dcaefa442c4b2f0d/third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversal.cpp
[modify] https://crrev.com/15261753dcb96f302ca53757dcaefa442c4b2f0d/third_party/WebKit/Source/core/dom/LayoutTreeBuilderTraversal.h

Hi ecobos, Could you please provide a design document for this bug? Curious to read about the whitespace changes. 
Comment 19 by eco...@igalia.com, Mar 13 2017
I sent [1] a while ago to style-dev@. The whitespace changes aren't described in detail, but if they were it'd be outdated r/n.

I replied also to esprehn@ in another bug, but the short story is that the squad split allows it to be fixed in a more elegant way. Quoting from my other reply:

> Regarding whitespace and display: contents/shadow DOM stuff, I need to check what the status of it is now. My idea the first time I looked at this stuff was indeed complexity-introducing.
> 
> Now, with this split, perhaps we can just keep the children traversal in styling working using the light tree, and the rebuildChildrenLayoutTree should just operate using LayoutTreeBuilderTraversal. I need to see the feasibility of it, but sounds like it would keep the complexity down while not getting a perf hit? In any case, this issue isn't the place to discuss it, I'll mail to style-dev@.

I believe that should work, but I'll send an email to style-dev@ with the details (perhaps a doc? though there aren't that many details) once I verify it can work.

[1]: https://docs.google.com/document/d/1YASzPEgPk8oAnJU7RiGfbShqP8ZdySkS5Aqf0yv3cPA/edit
Project Member Comment 20 by bugdroid1@chromium.org, Mar 15 2017
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7

commit b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7
Author: ecobos <ecobos@igalia.com>
Date: Wed Mar 15 17:31:54 2017

Cleanup anonymous text objects that pass the document as a node.

This CL requires a pseudo-element to own the anonymous layout object in most of
cases. This doesn't switch yet to having the pseudo in LayoutObject::m_node.

This is preliminar work for display: contents pseudos.

BUG=657748

Review-Url: https://codereview.chromium.org/2754653002
Cr-Commit-Position: refs/heads/master@{#457121}

[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/dom/FirstLetterPseudoElement.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/dom/PseudoElement.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutCounter.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutCounter.h
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutImage.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutImage.h
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutMenuList.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutQuote.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutQuote.h
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutText.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutText.h
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutTextFragment.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/layout/LayoutTextFragment.h
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/style/ContentData.cpp
[modify] https://crrev.com/b4f78964d73c1f967ce5d3e8ca914dcc41eec1e7/third_party/WebKit/Source/core/style/ContentData.h

Blockedon: 704415
Project Member Comment 23 by bugdroid1@chromium.org, Mar 28 2017
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/3e92f75741339da0c094fd863bb4a79575a74792

commit 3e92f75741339da0c094fd863bb4a79575a74792
Author: ecobos <ecobos@igalia.com>
Date: Tue Mar 28 17:15:13 2017

Move getCached/getUncachedPseudoStyle to Element.

This CL moves the handling of pseudo-element styles to Element, as a
pre-requisite for display: contents pseudo-elements support.

I think this may have visible effects on first-line/first-letter (where we
specifiy parentStyle explicitly).

If it does, we need to special-case that in LayoutObject. If not, we may as
well remove that argument altogether.

BUG=657748

Review-Url: https://codereview.chromium.org/2774383002
Cr-Commit-Position: refs/heads/master@{#460146}

[modify] https://crrev.com/3e92f75741339da0c094fd863bb4a79575a74792/third_party/WebKit/Source/core/dom/Element.cpp
[modify] https://crrev.com/3e92f75741339da0c094fd863bb4a79575a74792/third_party/WebKit/Source/core/dom/Element.h
[modify] https://crrev.com/3e92f75741339da0c094fd863bb4a79575a74792/third_party/WebKit/Source/core/dom/PseudoElement.cpp
[modify] https://crrev.com/3e92f75741339da0c094fd863bb4a79575a74792/third_party/WebKit/Source/core/layout/LayoutObject.cpp

Blockedon: 705999
Blockedon: 705984
Blockedon: 706316
Project Member Comment 27 by bugdroid1@chromium.org, Apr 4 2017
Project Member Comment 28 by bugdroid1@chromium.org, Apr 10 2017
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/bf38f00db777c0a30e1c5c762e45079ca5b1d4b1

commit bf38f00db777c0a30e1c5c762e45079ca5b1d4b1
Author: ecobos <ecobos@igalia.com>
Date: Mon Apr 10 06:17:04 2017

[css-display] Re-enable display: contents pseudo-elements test.

This was fixed recently. It's marked as an expected failure but it really
passes. Shrug.

BUG=657748

Review-Url: https://codereview.chromium.org/2810473002
Cr-Commit-Position: refs/heads/master@{#463178}

[modify] https://crrev.com/bf38f00db777c0a30e1c5c762e45079ca5b1d4b1/third_party/WebKit/LayoutTests/TestExpectations

Comment 29 by r...@opera.com, Apr 10 2017
Blockedon: 709808
Comment 31 by eco...@igalia.com, Apr 19 2017
Blockedon: 713019
Comment 32 by eco...@igalia.com, Apr 19 2017
Blockedon: 712978
Blockedon: 717460
Blockedon: 734399
ecobos@

I am curious the progress of "display: contents" because I am wondering when I should start to work on https://bugs.chromium.org/p/chromium/issues/detail?id=660265, which depends on the "display: contents".

I assume that I can start on it after "display: contents" is well supported.
Could you have a chance to share the progress? I need to prioritize tasks.

Hi hayato@,

display: contents should work pretty well... Only concerns of shipping at this point are interop ones. There have been multiple spec discussions[1][2][3] that have received spec updates but not implementation updates in Gecko or WebKit (and I don't have an ETA for that).

Those compat issues don't interact with the <slot> use case, though, so I guess they only matter if we want to fully ship display: contents along with your changes, which as rune noted in another thread, it's not necessarily a blocker for making <slot> part of the flat tree (it'd be nice to do it though, personally).

[1]: https://github.com/w3c/csswg-drafts/issues/1281
[2]: https://github.com/w3c/csswg-drafts/issues/540
[3]: https://github.com/w3c/csswg-drafts/issues/1118
I guess WebKit doesn't ship display: contents anyway, so that shouldn't matter much... I could try to get Gecko to interop better with Blink in the medium-term probably.
@ecobos
Thanks! It sounds I can start to work on bug 660265. I might work on that in this Q3.

If I have further question, I am happy to ask you. :)
Project Member Comment 39 by bugdroid1@chromium.org, Jul 19
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a6b73d07f96bbb6505a371f1aeee69f8f24366f1

commit a6b73d07f96bbb6505a371f1aeee69f8f24366f1
Author: Emilio Cobos Álvarez <ecobos@igalia.com>
Date: Wed Jul 19 12:37:11 2017

Don't optimize-out whitespace children of flex/grid containers if the parent has display: contents.

Text nodes of display: contents elements can be coalesced with other text nodes
siblings of the display: contents element, so optimizing out the whitespace
layout object may produce incorrect behavior in cases like:

  <non-whitespace-1>
  <div style="display: contents">
    <whitespace>
  </div>
  <non-whitespace-2>

Where we should generate a flex item with:

  <non-whitespace-1><whitespace><non-whitespace-2>

But instead we generate the following right now:

  <non-whitespace-1><non-whitespace-2>

Bug: 657748
Change-Id: I684cb20d500d45afe3eda4a48319f293ddb48024
Reviewed-on: https://chromium-review.googlesource.com/573021
Reviewed-by: Hayato Ito <hayato@chromium.org>
Commit-Queue: Emilio Cobos Álvarez <ecobos@igalia.com>
Cr-Commit-Position: refs/heads/master@{#487833}
[modify] https://crrev.com/a6b73d07f96bbb6505a371f1aeee69f8f24366f1/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/a6b73d07f96bbb6505a371f1aeee69f8f24366f1/third_party/WebKit/Source/core/dom/Text.cpp

Regarding WebKit, last time I checked, they had a special display:contents-like implementation of <slot>, making it part of their flat tree.

I think we should have a target of shipping display:contents on master in Q3 if spec issues are solved.

ecobos@: IIRC, there were some issues with the inline layout code assuming that parent nodes of text nodes had layout objects? Has that been fixed, or is it just a minor issue?

There was a problem in our inline layout code, which assumed that all text children of the same node are consistent re. line-height[1].

I thought I'd landed that, but apparently I didn't. I should probably rebase that CL and land it, but I don't consider it a major issue.

There's also the spec issue of how that should be rendered, which is described in[2][3], but that is addressed, and with [1] fixed we should behave like the spec edits afaict.

[1]: https://bugs.chromium.org/p/chromium/issues/detail?id=713019
[2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1357836#c1
[3]: https://github.com/w3c/csswg-drafts/issues/1249
Project Member Comment 42 by bugdroid1@chromium.org, Aug 1
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f3553bbf108ba4644dbca90e0e39f805fcda5aeb

commit f3553bbf108ba4644dbca90e0e39f805fcda5aeb
Author: Emilio Cobos Álvarez <ecobos@igalia.com>
Date: Tue Aug 01 13:40:58 2017

Account for sibling text nodes in CanHaveWhitespaceChildren.

Not doing it results in incorrect behavior when there are multiple adjacent
text nodes, either script-generated ones or because of display: contents.

BUG= 746437 ,657748

Change-Id: If5aa9209d16d5532629a0f0e2f1730d18a193ebf
Reviewed-on: https://chromium-review.googlesource.com/575982
Reviewed-by: Rune Lillesveen <rune@opera.com>
Commit-Queue: Emilio Cobos Álvarez <ecobos@igalia.com>
Cr-Commit-Position: refs/heads/master@{#490971}
[modify] https://crrev.com/f3553bbf108ba4644dbca90e0e39f805fcda5aeb/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/f3553bbf108ba4644dbca90e0e39f805fcda5aeb/third_party/WebKit/LayoutTests/fast/css/whitespace-between-text-flex-expected.html
[add] https://crrev.com/f3553bbf108ba4644dbca90e0e39f805fcda5aeb/third_party/WebKit/LayoutTests/fast/css/whitespace-between-text-flex-preserve-expected.html
[add] https://crrev.com/f3553bbf108ba4644dbca90e0e39f805fcda5aeb/third_party/WebKit/LayoutTests/fast/css/whitespace-between-text-flex-preserve.html
[add] https://crrev.com/f3553bbf108ba4644dbca90e0e39f805fcda5aeb/third_party/WebKit/LayoutTests/fast/css/whitespace-between-text-flex.html
[modify] https://crrev.com/f3553bbf108ba4644dbca90e0e39f805fcda5aeb/third_party/WebKit/Source/core/dom/Text.cpp

Blockedon: 755956
Labels: migrated-launch-owp Type-Task
This issue has been automatically relabelled type=task because type=launch-owp issues are now officially deprecated. The deprecation is because they were creating confusion about how to get launch approvals, which should be instead done via type=launch issues.

We recommend this issue be used for implementation tracking (for public visibility), but if you already have an issue for that, you may mark this as duplicate.

For more details see here: https://docs.google.com/document/d/1JA6RohjtZQc26bTrGoIE_bSXGXUDQz8vc6G0n_sZJ2o/edit

For any questions, please contact owencm, sshruthi, larforge
Blockedon: 766650
Comment 46 by futhark@chromium.org, Nov 15 (3 days ago)
Cc: -r...@opera.com
Owner: futhark@chromium.org
Sign in to add a comment