[Webkit-unassigned] [Bug 227652] New: Element loses layout when slotted content is removed after its slot

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=227652

            Bug ID: 227652
           Summary: Element loses layout when slotted content is removed
                    after its slot
           Product: WebKit
           Version: Safari 14
          Hardware: All
                OS: macOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ditman at gmail.com

Given this DOM:

  div#container
    :shadowRoot
    |  div#bg
    |    slot[name=something]
    `
    div#slotted[slot=something]

If the slot element is removed from the shadow root, and then (in a separate timeout) div#slotted is removed from the light DOM, the div#container will lose its layout and become invisible on the page.

Minimal repro case:

* https://jsfiddle.net/ditman/rmwqjLah/

The following things happen in the link above:

1. The output becomes yellow (background of #container)
2. The output becomes green, and has some text (the slot inside of a div#bg container has been appended into the Shadow DOM)
3. The output becomes green, without text (the slot has been deleted from the Shadow DOM)
4. The output becomes RED (the div#slotted is removed from the Light DOM, and #container loses layout, revealing the body of the page behind it!) 

I'd expect that step 4 stays the same as step 3. I've tested other browsers and that's what they do.

I've seen this bug with Safari 14 and 15 (Tech preview) in MacOS 11.4 (Big Sur) and stock Safari on iOS 14.6.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210703/31975fb2/attachment.htm>