document pictureInPictureElement is null if you Enter Picture in Picture from contextual menu

[Jeff Johnson]

Overview: If you enter PiP using the contextual menu item "Enter Picture in Picture", then document.pictureInPictureElement is null. Whereas document.pictureInPictureElement returns the <video> element if you enter PiP using the widget at the top left corner of the video.

Steps to Reproduce:
1) Open https://developer.apple.com/videos/play/wwdc2020/102/
2) Start playing the video
3) Open contextual menu on the video and select "Enter Picture in Picture"
4) Show JavaScript Console
5) document.pictureInPictureElement

Expected Results: <video id="video"...

Actual Results: null

Additional Builds and Platforms:
This also happens in Safari 14.0.3 on macOS 10.14.6. And it happens with the latest Safari Technology Preview 122 on macOS 11.

[Jeff Johnson]

I also just discovered that the video enterpictureinpicture event doesn't get posted when you using the contextual menu. The enterpictureinpicture does get posted when you use the PiP widget.

[Jeff Johnson]

I debugged with the WebKit source code and discovered the problem.

In the case of clicking the PiP widget it follows this code path:
HTMLVideoElementPictureInPicture::requestPictureInPicture
HTMLVideoElement::setPresentationMode
HTMLMediaElement::enterFullscreen

In the case of the contextual menu it follows this code path:
HitTestResult::toggleEnhancedFullscreenForVideo
HTMLMediaElement::enterFullscreen

In both cases, eventually this code gets called at https://github.com/WebKit/WebKit/blob/main/Source/WebCore/html/HTMLVideoElement.cpp#L504

void HTMLVideoElement::didEnterFullscreenOrPictureInPicture(const FloatSize& size)
{
    if (m_enteringPictureInPicture) {

However, m_enteringPictureInPicture is false with the contextual menu. With the PiP widget m_enteringPictureInPicture is true, because it gets set to true in HTMLVideoElement::setPresentationMode at https://github.com/WebKit/WebKit/blob/main/Source/WebCore/html/HTMLVideoElement.cpp#L490

[Peng Liu]

Thanks for the investigation!
I will upload a patch to fix it.

[Peng Liu]

Created attachment 423299 [details]
Patch

[EWS]

Committed r274551: <https://commits.webkit.org/r274551>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 423299 [details].

[Radar WebKit Bug Importer]

<rdar://problem/75510164>