When a video element is appended into a shadow element, the icon that makes the video "exit fullscreen" does not work. Firefox 63.0.1

VERIFIED FIXED in Firefox 65

Status

()

defect
P2
normal
VERIFIED FIXED
8 months ago
4 months ago

People

(Reporter: chrisking858, Assigned: edgar)

Tracking

(Depends on 1 bug, Blocks 1 bug)

63 Branch
mozilla65
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox63 wontfix, firefox64 wontfix, firefox65 verified)

Details

Attachments

(1 attachment)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

Steps to reproduce:

To reproduce the bug, we require the Polymer framework. Please find a code example here:
http://jsfiddle.net/rtz136xy/1/

Firefox Version must be 63.0.1 (latest).

1) Under "Nested Component" or "Single Component", click the icon to make the video full-screen.
2) Once maximized, click the icon on the bottom right to exit full-screen.
3) The video does not exit full-screen. User forced to press ESC key instead.


Actual results:

The user is unable to click on the exit full-screen icon when a native video (that is defined in a Polymer component) is full-screen. All other native video controls work, including scrubbing, volume control, etc.

This bug occurs on the latest version of Firefox 63.0.1.
This bug does not occur on Firefox 62.0.3


Expected results:

Upon clicking the exit full-screen icon, the video should exit full-screen.
I wanted to further add that if you add the "shadydom" attribute as shown below, the issue DOES NOT OCCUR.
<script src="webcomponentsjs/webcomponents-lite.js" shadydom></script>
Summary: When a video element is defined inside a Polymer Component, the icon that makes the video "exit fullscreen" does not work. Firefox 63.0.1 → When a video element is appended into a shadow element, the icon that makes the video "exit fullscreen" does not work. Firefox 63.0.1
Update:

I have narrowed the bug down to an issue with Shadow Dom, and simplified the steps to reproduce. Please see the link below.
http://jsfiddle.net/to05Ldq7/1/

If a video element exists inside of a container that contains a Shadow Dom, the "exit full-screen" icon does not function.
Hi Chris,

Thanks for the report! Reproduced the issue on Windows 10 on latest Nightly 65.0a1 (2018-11-11), latest Beta 64.0b8 (64-bit) and latest Release 63.0.1. versions.

Will add the component so that the development team can review it.
Status: UNCONFIRMED → NEW
Component: Untriaged → DOM
Ever confirmed: true
Product: Firefox → Core
Aha, yes, videocontrols uses document level checks for fullscreen, not DocumentOrShadowRoot
Priority: -- → P2
Hmm, this seems to be working for me on Linux, fwiw.
Blocks: shadowdom
No longer blocks: shadowdom-initial-release
I can reproduce comment 2 (thanks for the reduced test btw) on macOS.
Assignee: nobody → echen
I am working on writing a test for this.
Pushed by echen@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/76a737a5a6e9
Use DocumentOrShadowRoot level checks in videocontrols for fullscreen; r=timdream
https://hg.mozilla.org/mozilla-central/rev/76a737a5a6e9
Status: NEW → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla65
Flags: in-testsuite+
Flags: qe-verify+
Depends on: 1516292

I have managed to reproduce this issue using Firefox 65.0a1 (BuildId:20181107220128).

This issue is verified fixed using Firefox 65.0b9 (BuildId:20190107180200) on Windows 10 64bit, macOS 10.13.6 and Ubuntu 18.04 64bit.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Component: DOM → DOM: Core & HTML
You need to log in before you can comment on or make changes to this bug.