slot doesn't work as a flex container

• Component: DOM
• Status: RESOLVED FIXED

[Eric]

I'd expect slotted spans to be flex children in the following code:

<nav>
  <span>Hello</span>
  <span>world</span>
</nav>

var nav = document.querySelector('nav');
nav.attachShadow({mode:'open'}).innerHTML =
  '<style>' +
    ':host { display: flex }' +
    '::slotted(span) { flex: 1 }' +
   '</style>' +
   '<slot></slot>';

Repro: http://jsbin.com/dukapa/2/edit?html,output

In Safari TP, "Hello" and "world" do not flex as expected. In Blink, they do.

[Ryosuke Niwa]

The problem here is that somehow slot is getting a RenderBlock.

[Radar WebKit Bug Importer]

<rdar://problem/28605080>

[Ryosuke Niwa]

Created attachment 293846 [details]
Test case

[Ryosuke Niwa]

The problem here is that StyleResolver::adjustRenderStyle mutates display value based on the parent render style even if the current render object was display: contents.

You can see this in line 898 of StyleResolver.cpp where it says:

if (parentStyle.isDisplayFlexibleOrGridBox()) {
    style.setFloating(NoFloat);
    style.setDisplay(equivalentBlockDisplay(style.display(), style.isFloating(), !document().inQuirksMode()));
}

Even if we added style.display() != CONTENTS as an additional condition, we'd later create an anonymous render block in RenderBlock::addChildIgnoringContinuation:

if (newChild->isInline()) {
    // No suitable existing anonymous box - create a new one.
    RenderBlock* newBox = createAnonymousBlock();
    RenderBox::addChild(newBox, beforeChild);
    newBox->addChild(newChild);
    return;
}

So we really need to move this logic to when a RenderObject is created instead of at the time of style resolution.

[Antti Koivisto]

Created attachment 294737 [details]
patch

[Antti Koivisto]

Created attachment 294742 [details]
patch

[Build Bot]

Comment on attachment 294742 [details]
patch

Attachment 294742 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/2516046

New failing tests:
css3/flexbox/flexitem.html
fast/css-grid-layout/grid-item-display.html

[Build Bot]

Created attachment 294757 [details]
Archive of layout-test-results from ews101 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews101  Port: mac-yosemite  Platform: Mac OS X 10.10.5

[Build Bot]

Comment on attachment 294742 [details]
patch

Attachment 294742 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/2516067

New failing tests:
css3/flexbox/flexitem.html
fast/css-grid-layout/grid-item-display.html

[Build Bot]

Created attachment 294758 [details]
Archive of layout-test-results from ews104 for mac-yosemite-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews104  Port: mac-yosemite-wk2  Platform: Mac OS X 10.10.5

[Build Bot]

Comment on attachment 294742 [details]
patch

Attachment 294742 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/2516035

New failing tests:
fast/css-grid-layout/grid-item-display.html
fast/shadow-dom/css-scoping-slot-flex.html

[Build Bot]

Created attachment 294763 [details]
Archive of layout-test-results from ews121 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews121  Port: ios-simulator-wk2  Platform: Mac OS X 10.11.6

[Build Bot]

Comment on attachment 294742 [details]
patch

Attachment 294742 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/2516108

New failing tests:
css3/flexbox/flexitem.html
fast/css-grid-layout/grid-item-display.html

[Build Bot]

Created attachment 294764 [details]
Archive of layout-test-results from ews116 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews116  Port: mac-yosemite  Platform: Mac OS X 10.10.5

[Antti Koivisto]

Created attachment 294769 [details]
patch

[Ryosuke Niwa]

Comment on attachment 294769 [details]
patch

View in context: https://bugs.webkit.org/attachment.cgi?id=294769&action=review

> LayoutTests/fast/shadow-dom/css-scoping-slot-flex.html:105
> +

Could you add a test case where a slot to assigned to another slot
as well as a case where you override display type of slot
so that conditions in TreeResolver::parentBoxStyle() would be tested?

[Antti Koivisto]

Created attachment 294850 [details]
patch for landing

[WebKit Commit Bot]

Comment on attachment 294850 [details]
patch for landing

Clearing flags on attachment: 294850

Committed r208743: <http://trac.webkit.org/changeset/208743>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.