- Revision
- 213055
- Author
- [email protected]
- Date
- 2017-02-27 06:21:50 -0800 (Mon, 27 Feb 2017)
Log Message
[Modern Media Controls] Dragging controls in fullscreen on macOS prevents scrubbing or interacting with controls
https://bugs.webkit.org/show_bug.cgi?id=168820
<rdar://problem/30690281>
Reviewed by Jon Lee.
Source/WebCore:
We broke this in https://bugs.webkit.org/show_bug.cgi?id=168755. We restore the check that the
event target when initiating a drag is the controls bar itself and not some of its content.
Since this wasn't caught by our existing tests, we add a test that attemps to initiate a drag
starting over one of the controls and notice that no dragging occurs.
We also fix an issue where we wouldn't update the layout of the left container as its icon
buttons would load, which would cause the layout width of the left container to be incorrect
and the related tests to time out.
Test: media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
(MacOSFullscreenMediaControls.prototype.layout):
(MacOSFullscreenMediaControls.prototype._handleMousedown):
LayoutTests:
Making the existing test more robust and adding a new test that checks what happens
when we initiate a drag over some controls.
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt: Added.
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html: Added.
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (213054 => 213055)
--- trunk/LayoutTests/ChangeLog 2017-02-27 14:09:50 UTC (rev 213054)
+++ trunk/LayoutTests/ChangeLog 2017-02-27 14:21:50 UTC (rev 213055)
@@ -1,3 +1,19 @@
+2017-02-27 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Dragging controls in fullscreen on macOS prevents scrubbing or interacting with controls
+ https://bugs.webkit.org/show_bug.cgi?id=168820
+ <rdar://problem/30690281>
+
+ Reviewed by Jon Lee.
+
+ Making the existing test more robust and adding a new test that checks what happens
+ when we initiate a drag over some controls.
+
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt: Added.
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html: Added.
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html:
+
2017-02-27 Andy Estes <[email protected]>
Add a way to test file input without relying on drag and drop
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt (213054 => 213055)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt 2017-02-27 14:09:50 UTC (rev 213054)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt 2017-02-27 14:21:50 UTC (rev 213055)
@@ -1,8 +1,10 @@
-Testing the MediaController resizing behavior.
+This test pauses the video, presses the fullscreen button, and drags the controls when the mouse is over a button. It should follow the mouse drag.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+PASS !!mediaControls.querySelector('.buttons-container.left') became true
+PASS mediaControls.querySelector('.buttons-container.left').style.width became "116px"
PASS mediaControls.querySelector('.controls-bar').style.transform is "translate(-50px, -100px)"
PASS successfullyParsed is true
Added: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt (0 => 213055)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt 2017-02-27 14:21:50 UTC (rev 213055)
@@ -0,0 +1,12 @@
+This test pauses the video, presses the fullscreen button, and drags the controls when the mouse is over a button. It should not move.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS !!mediaControls.querySelector('.buttons-container.left') became true
+PASS mediaControls.querySelector('.buttons-container.left').style.width became "116px"
+PASS mediaControls.querySelector('.controls-bar').style.transform is ""
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Copied: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html (from rev 213054, trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html) (0 => 213055)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html 2017-02-27 14:21:50 UTC (rev 213055)
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<script src=""
+<body>
+<video src="" style="width: 320px; height: 240px;" controls autoplay></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("This test pauses the video, presses the fullscreen button, and drags the controls when the mouse is over a button. It should not move.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+let mediaControls = shadowRoot.lastChild;
+
+media.addEventListener("webkitbeginfullscreen", () => {
+ debug("webkitbeginfullscreen");
+});
+
+media.addEventListener("webkitfullscreenchange", () => {
+ if (media.webkitDisplayingFullscreen) {
+ mediaControls = shadowRoot.lastChild;
+ shouldBecomeEqual("!!mediaControls.querySelector('.buttons-container.left')", "true", () => {
+ shouldBecomeEqualToString("mediaControls.querySelector('.buttons-container.left').style.width", "116px", () => {
+ const bounds = mediaControls.querySelector(".controls-bar").getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 68, bounds.top + 10);
+ eventSender.mouseDown();
+ eventSender.mouseMoveTo(bounds.left + 18, bounds.top - 90);
+ eventSender.mouseUp();
+
+ window.requestAnimationFrame(() => {
+ shouldBeEqualToString("mediaControls.querySelector('.controls-bar').style.transform", "");
+ finishJSTest();
+ });
+ });
+ });
+ }
+});
+
+media.addEventListener("play", () => {
+ media.pause();
+
+ window.requestAnimationFrame(() => {
+ const bounds = mediaControls.querySelector("button.fullscreen").getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+ });
+});
+
+</script>
+<script src=""
+</body>
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html (213054 => 213055)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html 2017-02-27 14:09:50 UTC (rev 213054)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html 2017-02-27 14:21:50 UTC (rev 213055)
@@ -6,7 +6,7 @@
window.jsTestIsAsync = true;
-description("Testing the <code>MediaController</code> resizing behavior.");
+description("This test pauses the video, presses the fullscreen button, and drags the controls when the mouse is over a button. It should follow the mouse drag.");
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
@@ -19,16 +19,18 @@
media.addEventListener("webkitfullscreenchange", () => {
if (media.webkitDisplayingFullscreen) {
mediaControls = shadowRoot.lastChild;
- window.requestAnimationFrame(() => {
- const bounds = mediaControls.querySelector(".controls-bar").getBoundingClientRect();
- eventSender.mouseMoveTo(bounds.left + 118, bounds.top + 10);
- eventSender.mouseDown();
- eventSender.mouseMoveTo(bounds.left + 68, bounds.top - 90);
- eventSender.mouseUp();
+ shouldBecomeEqual("!!mediaControls.querySelector('.buttons-container.left')", "true", () => {
+ shouldBecomeEqualToString("mediaControls.querySelector('.buttons-container.left').style.width", "116px", () => {
+ const bounds = mediaControls.querySelector(".controls-bar").getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 118, bounds.top + 10);
+ eventSender.mouseDown();
+ eventSender.mouseMoveTo(bounds.left + 68, bounds.top - 90);
+ eventSender.mouseUp();
- window.requestAnimationFrame(() => {
- shouldBeEqualToString("mediaControls.querySelector('.controls-bar').style.transform", "translate(-50px, -100px)");
- finishJSTest();
+ window.requestAnimationFrame(() => {
+ shouldBeEqualToString("mediaControls.querySelector('.controls-bar').style.transform", "translate(-50px, -100px)");
+ finishJSTest();
+ });
});
});
}
Modified: trunk/Source/WebCore/ChangeLog (213054 => 213055)
--- trunk/Source/WebCore/ChangeLog 2017-02-27 14:09:50 UTC (rev 213054)
+++ trunk/Source/WebCore/ChangeLog 2017-02-27 14:21:50 UTC (rev 213055)
@@ -1,3 +1,27 @@
+2017-02-27 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Dragging controls in fullscreen on macOS prevents scrubbing or interacting with controls
+ https://bugs.webkit.org/show_bug.cgi?id=168820
+ <rdar://problem/30690281>
+
+ Reviewed by Jon Lee.
+
+ We broke this in https://bugs.webkit.org/show_bug.cgi?id=168755. We restore the check that the
+ event target when initiating a drag is the controls bar itself and not some of its content.
+
+ Since this wasn't caught by our existing tests, we add a test that attemps to initiate a drag
+ starting over one of the controls and notice that no dragging occurs.
+
+ We also fix an issue where we wouldn't update the layout of the left container as its icon
+ buttons would load, which would cause the layout width of the left container to be incorrect
+ and the related tests to time out.
+
+ Test: media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html
+
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+ (MacOSFullscreenMediaControls.prototype.layout):
+ (MacOSFullscreenMediaControls.prototype._handleMousedown):
+
2017-02-27 Alex Christensen <[email protected]>
[libwebrtc] Enable WebRTC in some Production Builds
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (213054 => 213055)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2017-02-27 14:09:50 UTC (rev 213054)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2017-02-27 14:21:50 UTC (rev 213055)
@@ -115,6 +115,7 @@
this._rightContainer.buttonMargin = buttonMargin;
+ this._leftContainer.layout();
this._centerContainer.layout();
this._rightContainer.layout();
@@ -125,6 +126,9 @@
_handleMousedown(event)
{
+ if (event.target !== this.controlsBar.element)
+ return;
+
event.preventDefault();
event.stopPropagation();
