Bug 158421 - Toggling display: none on a parent element of a slot which shares style with its parent doesn't update the slot's visibility
Summary: Toggling display: none on a parent element of a slot which shares style with ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Ryosuke Niwa
URL:
Keywords:
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2016-06-06 08:31 PDT by Paul Kinlan
Modified: 2016-09-27 20:06 PDT (History)
6 users (show)

See Also:


Attachments
actual results - slotted elements are not rendered. (128.37 KB, image/png)
2016-06-06 08:31 PDT, Paul Kinlan
no flags Details
Smallest test case (1.05 KB, text/html)
2016-06-06 08:34 PDT, Paul Kinlan
no flags Details
Expected results (316.24 KB, image/png)
2016-06-06 08:34 PDT, Paul Kinlan
no flags Details
Reduction (761 bytes, text/html)
2016-06-06 13:36 PDT, Ryosuke Niwa
no flags Details
Adds a test (2.74 KB, patch)
2016-09-27 18:32 PDT, Ryosuke Niwa
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Paul Kinlan 2016-06-06 08:31:53 PDT
Created attachment 280594 [details]
actual results - slotted elements are not rendered.

I think I have found an issue with Shadow DOM and slotted elements not displaying in WebKit.  

I have a <slot> whose parent is hidden (display: none) and toggled later (display:block).  When toggled, the elements
that are distributed into the <slot> are not rendered.  You have to force a layout/paint via devtools (toggle :active for example)
for it to render the distributed elements.

It looks like that WebKit is making an optimization where it knows initially the distributed elements are not visible so
it doesn't layout the elements, however it doesn't then realise that the parent has been made visible so it doesn't force
a layout and render of the elements.

Demo: https://jsbin.com/cebura/latest
Smallest test case: https://output.jsbin.com/jusuga/latest 
    Expected: click the toggle button in Chrome canary with Experiemental web platform features enabled and you will see the distributed h1 is rendered
    Actual (WebKit): click the toggle button, nothing rendered.  Go to devtools and for a layout (I click :active on the slot and you will see it render)
Comment 1 Paul Kinlan 2016-06-06 08:34:13 PDT
Created attachment 280595 [details]
Smallest test case

H1 should display when the toggle is clicked.
Comment 2 Paul Kinlan 2016-06-06 08:34:40 PDT
Created attachment 280596 [details]
Expected results
Comment 3 Ryosuke Niwa 2016-06-06 13:36:40 PDT
Created attachment 280625 [details]
Reduction
Comment 4 Ryosuke Niwa 2016-06-06 13:37:39 PDT
Toggling the class name on #container doesn't dirty the slot (FAIL shows up).
<div><div id="container"><slot name="green">FAIL</slot></div></div>

It works if we remove the outer-most div.
Comment 5 Ryosuke Niwa 2016-06-20 10:03:51 PDT
Looks like http://trac.webkit.org/changeset/202227 didn't fix this bug.
Comment 6 Ryosuke Niwa 2016-09-27 17:28:42 PDT
https://trac.webkit.org/changeset/206403 fixed this bug. Let's add a test.
Comment 7 Ryosuke Niwa 2016-09-27 18:32:03 PDT
Created attachment 290045 [details]
Adds a test
Comment 8 Ryosuke Niwa 2016-09-27 19:45:01 PDT
Comment on attachment 290045 [details]
Adds a test

Thanks for the fast review!
Comment 9 WebKit Commit Bot 2016-09-27 20:06:01 PDT
Comment on attachment 290045 [details]
Adds a test

Clearing flags on attachment: 290045

Committed r206493: <http://trac.webkit.org/changeset/206493>
Comment 10 WebKit Commit Bot 2016-09-27 20:06:06 PDT
All reviewed patches have been landed.  Closing bug.