Bug 222657 - Media element never populates its UA shadow if it was initially created in a document without browsing context
Summary: Media element never populates its UA shadow if it was initially created in a ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: Safari 14
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-03-03 08:52 PST by Javan Makhmali
Modified: 2021-03-11 21:08 PST (History)
9 users (show)

See Also:


Attachments
Test case (1.42 KB, text/html)
2021-03-03 08:52 PST, Javan Makhmali
no flags Details
Screenshot of the issue in Safari on macOS (59.74 KB, image/png)
2021-03-03 08:55 PST, Javan Makhmali
no flags Details
Video recording of the issue in Safari on iOS (1.71 MB, video/mp4)
2021-03-03 08:56 PST, Javan Makhmali
no flags Details
Adopted media elements with empty Shadow Content (43.97 KB, image/png)
2021-03-04 07:42 PST, Javan Makhmali
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.