<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[209388] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/209388">209388</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-12-05 22:55:43 -0800 (Mon, 05 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Controls bar in fullscreen cannot be dragged
https://bugs.webkit.org/show_bug.cgi?id=165448
Patch by Antoine Quint <graouts@apple.com> on 2016-12-05
Reviewed by Simon Fraser.
Source/WebCore:
We weren't listening to mousemove and mouseup events on the right event target, window in the context
of a fullscreen shadow root makes no sense. We now listen to those events on the media controls, which
we size to fit the whole of the media element's bounds. We then apply a transform to the controls bar
to apply the dragging distance.
Test: media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html
* Modules/modern-media-controls/controls/controls-bar.js:
(ControlsBar.prototype.get translation):
(ControlsBar.prototype.set translation):
(ControlsBar.prototype.commitProperty):
(ControlsBar): Deleted.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
(.media-controls.mac.fullscreen):
(.media-controls.mac.fullscreen > .controls-bar):
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
(MacOSFullscreenMediaControls.prototype._handleMousedown):
(MacOSFullscreenMediaControls.prototype._handleMousemove):
(MacOSFullscreenMediaControls.prototype._handleMouseup):
LayoutTests:
Add a new test that simulates a dragging interaction of the controls bar in fullscreen.
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt: Added.
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html: Added.
* platform/ios-simulator/TestExpectations:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonscontainersstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonscontainersstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolscontrolsbarstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolscontrolsbarstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsdragexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsdraghtml">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/LayoutTests/ChangeLog 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -1,3 +1,20 @@
</span><ins>+2016-12-05 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Controls bar in fullscreen cannot be dragged
+ https://bugs.webkit.org/show_bug.cgi?id=165448
+
+ Reviewed by Simon Fraser.
+
+ Add a new test that simulates a dragging interaction of the controls bar in fullscreen.
+
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt: Added.
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html: Added.
+ * platform/ios-simulator/TestExpectations:
+
</ins><span class="cx"> 2016-12-05 Dave Hyatt <hyatt@apple.com>
</span><span class="cx">
</span><span class="cx"> [CSS Parser] Skip more bad tests
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonscontainersstylesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -3,13 +3,13 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS centerContainerBounds.left is 61
-PASS centerContainerBounds.top is 50
</del><ins>+PASS centerContainerBounds.left is 311
+PASS centerContainerBounds.top is 500
</ins><span class="cx"> PASS centerContainerBounds.width is 178
</span><span class="cx"> PASS centerContainerBounds.height is 44
</span><span class="cx">
</span><del>-PASS rightContainerBounds.left is within 0.5 of 218
-PASS rightContainerBounds.top is 50
</del><ins>+PASS rightContainerBounds.left is within 0.5 of 468
+PASS rightContainerBounds.top is 500
</ins><span class="cx"> PASS rightContainerBounds.width is within 0.5 of 166
</span><span class="cx"> PASS rightContainerBounds.height is 44
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonscontainersstyleshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -2,7 +2,18 @@
</span><span class="cx"> <script src="../resources/media-controls-utils.js" type="text/javascript"></script>
</span><span class="cx"> <script src="../resources/media-controls-loader.js" type="text/javascript"></script>
</span><span class="cx"> <body>
</span><del>-<div id="container" style="position: absolute; top: 0; left: 0;"></div>
</del><ins>+<div id="container"></div>
+<style type="text/css" media="screen">
+
+#container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 800px;
+ height: 600px;
+}
+
+</style>
</ins><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span><span class="cx"> description("Testing the <code>MacOSFullscreenMediaControls</code> computed styles.");
</span><span class="lines">@@ -23,15 +34,15 @@
</span><span class="cx"> document.getElementById("container").appendChild(mediaControls.element);
</span><span class="cx">
</span><span class="cx"> centerContainerBounds = centerContainer.element.getBoundingClientRect();
</span><del>- shouldBe("centerContainerBounds.left", "61");
- shouldBe("centerContainerBounds.top", "50");
</del><ins>+ shouldBe("centerContainerBounds.left", "311");
+ shouldBe("centerContainerBounds.top", "500");
</ins><span class="cx"> shouldBe("centerContainerBounds.width", "178");
</span><span class="cx"> shouldBe("centerContainerBounds.height", "44");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> rightContainerBounds = rightContainer.element.getBoundingClientRect();
</span><del>- shouldBeCloseTo("rightContainerBounds.left", 218, 0.5);
- shouldBe("rightContainerBounds.top", "50");
</del><ins>+ shouldBeCloseTo("rightContainerBounds.left", 468, 0.5);
+ shouldBe("rightContainerBounds.top", "500");
</ins><span class="cx"> shouldBeCloseTo("rightContainerBounds.width", 166, 0.5);
</span><span class="cx"> shouldBe("rightContainerBounds.height", "44");
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolscontrolsbarstylesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -3,14 +3,12 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS style.left is "50%"
</del><span class="cx"> PASS style.bottom is "25px"
</span><span class="cx"> PASS style.width is "468px"
</span><span class="cx"> PASS style.height is "75px"
</span><del>-PASS style.transform is "matrix(1, 0, 0, 1, -234, 0)"
</del><span class="cx"> PASS style.borderRadius is "8px"
</span><del>-PASS bounds.left is -84
-PASS bounds.top is 50
</del><ins>+PASS bounds.left is 166
+PASS bounds.top is 500
</ins><span class="cx"> PASS bounds.width is 468
</span><span class="cx"> PASS bounds.height is 75
</span><span class="cx"> PASS rgba(style.backgroundColor).r is 30
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolscontrolsbarstyleshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -2,14 +2,17 @@
</span><span class="cx"> <script src="../resources/media-controls-utils.js" type="text/javascript"></script>
</span><span class="cx"> <script src="../resources/media-controls-loader.js" type="text/javascript"></script>
</span><span class="cx"> <body>
</span><ins>+<div id="container"></div>
</ins><span class="cx"> <style type="text/css" media="screen">
</span><del>-
-.media-controls {
</del><ins>+
+#container {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><ins>+ width: 800px;
+ height: 600px;
</ins><span class="cx"> }
</span><del>-
</del><ins>+
</ins><span class="cx"> </style>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span><span class="lines">@@ -22,20 +25,18 @@
</span><span class="cx"> let style, bounds;
</span><span class="cx"> scheduler.frameDidFire = function()
</span><span class="cx"> {
</span><del>- document.body.appendChild(mediaControls.element);
</del><ins>+ document.getElementById("container").appendChild(mediaControls.element);
</ins><span class="cx">
</span><span class="cx"> style = window.getComputedStyle(mediaControls.controlsBar.element);
</span><span class="cx"> bounds = mediaControls.controlsBar.element.getBoundingClientRect();
</span><span class="cx">
</span><del>- shouldBeEqualToString("style.left", "50%");
</del><span class="cx"> shouldBeEqualToString("style.bottom", "25px");
</span><span class="cx"> shouldBeEqualToString("style.width", "468px");
</span><span class="cx"> shouldBeEqualToString("style.height", "75px");
</span><del>- shouldBeEqualToString("style.transform", "matrix(1, 0, 0, 1, -234, 0)");
</del><span class="cx"> shouldBeEqualToString("style.borderRadius", "8px");
</span><span class="cx">
</span><del>- shouldBe("bounds.left", "-84");
- shouldBe("bounds.top", "50");
</del><ins>+ shouldBe("bounds.left", "166");
+ shouldBe("bounds.top", "500");
</ins><span class="cx"> shouldBe("bounds.width", "468");
</span><span class="cx"> shouldBe("bounds.height", "75");
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsdragexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt (0 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Testing the MediaController resizing behavior.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.querySelector('.controls-bar').style.transform is "translate(-50px, -100px)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsdraghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html (0 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls autoplay></video>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> resizing behavior.");
+
+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;
+ window.requestAnimationFrame(() => {
+ const bounds = mediaControls.querySelector(".controls-bar").getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 10, bounds.top + 10);
+ eventSender.mouseDown();
+ eventSender.mouseMoveTo(bounds.left - 40, bounds.top - 90);
+ eventSender.mouseUp();
+
+ window.requestAnimationFrame(() => {
+ shouldBeEqualToString("mediaControls.querySelector('.controls-bar').style.transform", "translate(-50px, -100px)");
+ 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="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -2754,6 +2754,7 @@
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/seek-backward-support/seek-backward-support.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/seek-forward-support/seek-forward-support.html [ Skip ]
</span><ins>+media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html [ Skip ]
</ins><span class="cx">
</span><span class="cx"> # These tests are all Mac-specific, we never show the tracks menu on iOS
</span><span class="cx"> media/modern-media-controls/tracks-panel
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/Source/WebCore/ChangeLog 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -1,3 +1,30 @@
</span><ins>+2016-12-05 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Controls bar in fullscreen cannot be dragged
+ https://bugs.webkit.org/show_bug.cgi?id=165448
+
+ Reviewed by Simon Fraser.
+
+ We weren't listening to mousemove and mouseup events on the right event target, window in the context
+ of a fullscreen shadow root makes no sense. We now listen to those events on the media controls, which
+ we size to fit the whole of the media element's bounds. We then apply a transform to the controls bar
+ to apply the dragging distance.
+
+ Test: media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html
+
+ * Modules/modern-media-controls/controls/controls-bar.js:
+ (ControlsBar.prototype.get translation):
+ (ControlsBar.prototype.set translation):
+ (ControlsBar.prototype.commitProperty):
+ (ControlsBar): Deleted.
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
+ (.media-controls.mac.fullscreen):
+ (.media-controls.mac.fullscreen > .controls-bar):
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+ (MacOSFullscreenMediaControls.prototype._handleMousedown):
+ (MacOSFullscreenMediaControls.prototype._handleMousemove):
+ (MacOSFullscreenMediaControls.prototype._handleMouseup):
+
</ins><span class="cx"> 2016-12-05 Dave Hyatt <hyatt@apple.com>
</span><span class="cx">
</span><span class="cx"> [CSS Parser] Allow calc in SVG attributes
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -29,6 +29,34 @@
</span><span class="cx"> constructor()
</span><span class="cx"> {
</span><span class="cx"> super(`<div class="controls-bar">`);
</span><ins>+
+ this._translation = new DOMPoint;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ // Public
+
+ get translation()
+ {
+ return new DOMPoint(this._translation.x, this._translation.y);
+ }
+
+ set translation(point)
+ {
+ if (this._translation.x === point.x && this._translation.y === point.y)
+ return
+
+ this._translation = new DOMPoint(point.x, point.y);
+ this.markDirtyProperty("translation");
+ }
+
+ // Protected
+
+ commitProperty(propertyName)
+ {
+ if (propertyName === "translation")
+ this.element.style.transform = `translate(${this._translation.x}px, ${this._translation.y}px)`;
+ else
+ super.commitProperty(propertyName);
+ }
+
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -28,14 +28,16 @@
</span><span class="cx"> .media-controls.mac.fullscreen {
</span><span class="cx"> --controls-bar-width: 468px;
</span><span class="cx"> --tracks-panel-right-margin: 40px;
</span><ins>+
+ width: 100% !important;
+ height: 100% !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .media-controls.mac.fullscreen > .controls-bar {
</span><del>- left: 50%;
</del><ins>+ left: calc((100% - var(--controls-bar-width)) / 2);
</ins><span class="cx"> bottom: 25px;
</span><span class="cx"> width: var(--controls-bar-width);
</span><span class="cx"> height: 75px;
</span><del>- transform: translateX(-50%);
</del><span class="cx"> overflow: hidden;
</span><span class="cx"> border-radius: 8px;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (209387 => 209388)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2016-12-06 05:44:10 UTC (rev 209387)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2016-12-06 06:55:43 UTC (rev 209388)
</span><span class="lines">@@ -82,8 +82,6 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Public
-
</del><span class="cx"> layout()
</span><span class="cx"> {
</span><span class="cx"> super.layout();
</span><span class="lines">@@ -104,6 +102,8 @@
</span><span class="cx"> this.timeControl.width = FullscreenTimeControlWidth;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ // Private
+
</ins><span class="cx"> _handleMousedown(event)
</span><span class="cx"> {
</span><span class="cx"> if (event.target !== this.controlsBar.element)
</span><span class="lines">@@ -113,8 +113,8 @@
</span><span class="cx">
</span><span class="cx"> this._lastDragPoint = this._pointForEvent(event);
</span><span class="cx">
</span><del>- window.addEventListener("mousemove", this, true);
- window.addEventListener("mouseup", this, true);
</del><ins>+ this.element.addEventListener("mousemove", this, true);
+ this.element.addEventListener("mouseup", this, true);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _handleMousemove(event)
</span><span class="lines">@@ -122,8 +122,11 @@
</span><span class="cx"> event.preventDefault();
</span><span class="cx">
</span><span class="cx"> const currentDragPoint = this._pointForEvent(event);
</span><del>- this.x += currentDragPoint.x - this._lastDragPoint.x;
- this.y += currentDragPoint.y - this._lastDragPoint.y;
</del><ins>+
+ this.controlsBar.translation = new DOMPoint(
+ this.controlsBar.translation.x + currentDragPoint.x - this._lastDragPoint.x,
+ this.controlsBar.translation.y + currentDragPoint.y - this._lastDragPoint.y
+ );
</ins><span class="cx">
</span><span class="cx"> this._lastDragPoint = currentDragPoint;
</span><span class="cx"> }
</span><span class="lines">@@ -132,8 +135,10 @@
</span><span class="cx"> {
</span><span class="cx"> event.preventDefault();
</span><span class="cx">
</span><del>- window.removeEventListener("mousemove", this, true);
- window.removeEventListener("mouseup", this, true);
</del><ins>+ delete this._lastDragPoint;
+
+ this.element.removeEventListener("mousemove", this, true);
+ this.element.removeEventListener("mouseup", this, true);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _pointForEvent(event)
</span></span></pre>
</div>
</div>
</body>
</html>