Bug 222657

Summary: Media element never populates its UA shadow if it was initially created in a document without browsing context
Product: WebKit Reporter: Javan Makhmali <javan>
Component: MediaAssignee: Devin Rousso <hi>
Status: RESOLVED FIXED    
Severity: Normal CC: akeerthi, arv, eric.carlson, graouts, hi, jer.noble, rik, rniwa, webkit-bug-importer, webkitbugz, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=216985
Attachments:
Description Flags
Test case
none
Screenshot of the issue in Safari on macOS
none
Video recording of the issue in Safari on iOS
none
Adopted media elements with empty Shadow Content none

Description Javan Makhmali 2021-03-03 08:52:52 PST
Created attachment 422090 [details]
Test case

When input and media elements are adopted with document.adoptNode() from a foreign document (via DOMParser, for example) they lose their native shadow DOM roots and are left in a mostly broken state: <input>s lose their native UI, and <video> and <audio> elements lose their native controls.

To reproduce, open the attached adopt-node-bug.html file in Safari and compare the correct middle column (imported node) to the incorrect right column (adopted node).

Tested in Safari v14.0.3 (16610.4.3.1.4) on macOS v11.2.2, and mobile Safari on iOS v14.4.
Comment 1 Javan Makhmali 2021-03-03 08:55:29 PST
Created attachment 422091 [details]
Screenshot of the issue in Safari on macOS
Comment 2 Javan Makhmali 2021-03-03 08:56:23 PST
Created attachment 422092 [details]
Video recording of the issue in Safari on iOS
Comment 3 Ryosuke Niwa 2021-03-03 17:51:40 PST
That's not really a loss of Shadow DOM but more to do with us failing to update based on the type content attribute.
Comment 4 Javan Makhmali 2021-03-04 07:42:08 PST
Created attachment 422225 [details]
Adopted media elements with empty Shadow Content

> That's not really a loss of Shadow DOM but more to do with us failing to update based on the type content attribute.

Are you referring to the “type” attribute on <input> elements? For <audio> and <video> elements the Shadow Content does appear to be lost or empty (see attached media-elements.png screenshot). Not sure if it’s the same underlying issue.
Comment 5 Ryosuke Niwa 2021-03-04 22:21:28 PST
Input element issue should be fixed in Safari 14.1 in the bug 216985. The media element seems to be still broken.
Comment 6 Ryosuke Niwa 2021-03-04 22:50:29 PST
This isn't so much about adoptNode discarding the UA shadow tree of media element as much as media element not initialize its UA shadow root when it's created inside a document without a browsing context. The fix is to initialize the media element controls once it's inserted into a document with a browsing context.
Comment 7 Ryosuke Niwa 2021-03-04 22:54:02 PST
This is the fix:

diff --git a/Source/WebCore/html/HTMLMediaElement.cpp b/Source/WebCore/html/HTMLMediaElement.cpp
index e1d903331b07..291964180f72 100644
--- a/Source/WebCore/html/HTMLMediaElement.cpp
+++ b/Source/WebCore/html/HTMLMediaElement.cpp
@@ -4290,7 +4290,10 @@ void HTMLMediaElement::ensureMediaControlsShadowRoot()
         return;
 
     m_creatingControls = true;
-    ensureUserAgentShadowRoot();
+    if (auto shadowRoot = userAgentShadowRoot(); shadowRoot && !shadowRoot->hasChildNodes())
+        didAddUserAgentShadowRoot(*shadowRoot);
+    else
+        ensureUserAgentShadowRoot();
     m_creatingControls = false;
 }
Comment 8 Radar WebKit Bug Importer 2021-03-10 08:53:15 PST
<rdar://problem/75266631>
Comment 9 Javan Makhmali 2021-03-11 06:02:38 PST
> …media element not initialize its UA shadow root when it's created inside a document without a browsing context. The fix is to initialize the media element controls once it's inserted into a document with a browsing context.

Could bug 211620 be the same underlying issue?
Comment 10 Ryosuke Niwa 2021-03-11 21:08:40 PST
(In reply to Javan Makhmali from comment #9)
> > …media element not initialize its UA shadow root when it's created inside a document without a browsing context. The fix is to initialize the media element controls once it's inserted into a document with a browsing context.
> 
> Could bug 211620 be the same underlying issue?

No, img element doesn't use a shadow tree.
Comment 11 Ryosuke Niwa 2022-08-01 21:10:25 PDT
*** Bug 68574 has been marked as a duplicate of this bug. ***
Comment 12 Devin Rousso 2022-08-02 11:16:50 PDT
Pull request: https://github.com/WebKit/WebKit/pull/2955
Comment 13 EWS 2022-08-08 11:47:08 PDT
Committed 253225@main (f331cc98c1de): <https://commits.webkit.org/253225@main>

Reviewed commits have been landed. Closing PR #2955 and removing active labels.