Title: [208042] trunk
Revision
208042
Author
commit-qu...@webkit.org
Date
2016-10-28 02:40:44 -0700 (Fri, 28 Oct 2016)

Log Message

[Modern Media Controls] Media Controller: scrubbing support
https://bugs.webkit.org/show_bug.cgi?id=163726
<rdar://problem/27989481>

Patch by Antoine Quint <grao...@apple.com> on 2016-10-28
Reviewed by Dean Jackson.

Source/WebCore:

We introduce the ScrubberSupport class which brings support for scrubbing the media
by interacting with the scrubber in the media controls and correctly reflecting
the media's current time as set via the media API.

Tests: media/modern-media-controls/scrubber-support/scrubber-support-click.html
       media/modern-media-controls/scrubber-support/scrubber-support-drag.html
       media/modern-media-controls/scrubber-support/scrubber-support-media-api.html

* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
* Modules/modern-media-controls/media/scrubbing-support.js: Added.
(ScrubbingSupport.prototype.get control):
(ScrubbingSupport.prototype.get mediaEvents):
(ScrubbingSupport.prototype.controlValueWillStartChanging):
(ScrubbingSupport.prototype.controlValueDidChange):
(ScrubbingSupport.prototype.controlValueDidStopChanging):
(ScrubbingSupport.prototype.syncControl):
(ScrubbingSupport):
* WebCore.xcodeproj/project.pbxproj:

LayoutTests:

Adding new tests for ScrubberSupport that test clicking in the scrubber,
dragging the scrubber and setting the media currentTime via the media API.
Also adding the new resource to other MediaController tests.

* http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html:
* media/modern-media-controls/elapsed-time-support/elapsed-time-support.html:
* media/modern-media-controls/media-controller/media-controller-constructor.html:
* media/modern-media-controls/media-controller/media-controller-resize.html:
* media/modern-media-controls/mute-support/mute-support-button-click.html:
* media/modern-media-controls/mute-support/mute-support-media-api.html:
* media/modern-media-controls/mute-support/mute-support-muted.html:
* media/modern-media-controls/playback-support/playback-support-autoplay.html:
* media/modern-media-controls/playback-support/playback-support-button-click.html:
* media/modern-media-controls/playback-support/playback-support-media-api.html:
* media/modern-media-controls/remaining-time-support/remaining-time-support.html:
* media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt: Added.
* media/modern-media-controls/scrubber-support/scrubber-support-click.html: Added.
* media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt: Added.
* media/modern-media-controls/scrubber-support/scrubber-support-drag.html: Added.
* media/modern-media-controls/scrubber-support/scrubber-support-media-api-expected.txt: Added.
* media/modern-media-controls/scrubber-support/scrubber-support-media-api.html: Added.
* media/modern-media-controls/start-support/start-support-audio.html:
* media/modern-media-controls/start-support/start-support-autoplay.html:
* media/modern-media-controls/start-support/start-support-click-to-start.html:
* media/modern-media-controls/start-support/start-support-error.html:
* media/modern-media-controls/start-support/start-support-fullscreen.html:
* media/modern-media-controls/start-support/start-support-manual-play.html:
* media/modern-media-controls/start-support/start-support-no-source.html:
* platform/ios-simulator/TestExpectations:
* platform/mac/TestExpectations:

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (208041 => 208042)


--- trunk/LayoutTests/ChangeLog	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/ChangeLog	2016-10-28 09:40:44 UTC (rev 208042)
@@ -1,3 +1,42 @@
+2016-10-28  Antoine Quint  <grao...@apple.com>
+
+        [Modern Media Controls] Media Controller: scrubbing support
+        https://bugs.webkit.org/show_bug.cgi?id=163726
+        <rdar://problem/27989481>
+
+        Reviewed by Dean Jackson.
+
+        Adding new tests for ScrubberSupport that test clicking in the scrubber,
+        dragging the scrubber and setting the media currentTime via the media API.
+        Also adding the new resource to other MediaController tests.
+
+        * http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html:
+        * media/modern-media-controls/elapsed-time-support/elapsed-time-support.html:
+        * media/modern-media-controls/media-controller/media-controller-constructor.html:
+        * media/modern-media-controls/media-controller/media-controller-resize.html:
+        * media/modern-media-controls/mute-support/mute-support-button-click.html:
+        * media/modern-media-controls/mute-support/mute-support-media-api.html:
+        * media/modern-media-controls/mute-support/mute-support-muted.html:
+        * media/modern-media-controls/playback-support/playback-support-autoplay.html:
+        * media/modern-media-controls/playback-support/playback-support-button-click.html:
+        * media/modern-media-controls/playback-support/playback-support-media-api.html:
+        * media/modern-media-controls/remaining-time-support/remaining-time-support.html:
+        * media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt: Added.
+        * media/modern-media-controls/scrubber-support/scrubber-support-click.html: Added.
+        * media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt: Added.
+        * media/modern-media-controls/scrubber-support/scrubber-support-drag.html: Added.
+        * media/modern-media-controls/scrubber-support/scrubber-support-media-api-expected.txt: Added.
+        * media/modern-media-controls/scrubber-support/scrubber-support-media-api.html: Added.
+        * media/modern-media-controls/start-support/start-support-audio.html:
+        * media/modern-media-controls/start-support/start-support-autoplay.html:
+        * media/modern-media-controls/start-support/start-support-click-to-start.html:
+        * media/modern-media-controls/start-support/start-support-error.html:
+        * media/modern-media-controls/start-support/start-support-fullscreen.html:
+        * media/modern-media-controls/start-support/start-support-manual-play.html:
+        * media/modern-media-controls/start-support/start-support-no-source.html:
+        * platform/ios-simulator/TestExpectations:
+        * platform/mac/TestExpectations:
+
 2016-10-27  Gyuyoung Kim  <gyuyoung....@webkit.org>
 
         [EFL] Skip media test for a while

Modified: trunk/LayoutTests/http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html (208041 => 208042)


--- trunk/LayoutTests/http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -6,7 +6,6 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
@@ -31,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-button-click.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-button-click.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-button-click.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-media-api.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-media-api.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-media-api.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-muted.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-muted.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/mute-support/mute-support-muted.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-autoplay.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-autoplay.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-autoplay.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -6,7 +6,6 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
@@ -31,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-button-click.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-button-click.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-button-click.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -6,7 +6,6 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
@@ -31,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-media-api.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-media-api.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-media-api.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -6,7 +6,6 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
@@ -31,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -6,7 +6,6 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
@@ -31,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Added: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt (0 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt	2016-10-28 09:40:44 UTC (rev 208042)
@@ -0,0 +1,10 @@
+Testing the ScrubberSupport behavior when clicking the scrubber.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS media.currentTime is 3.1872
+PASS successfullyParsed is true
+
+TEST COMPLETE
+

Copied: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html (from rev 208041, trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-media-api.html) (0 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -0,0 +1,102 @@
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<style type="text/css" media="screen">
+    
+    video, #host {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    video {
+        width: 800px;
+        height: 240px;
+    }
+    
+</style>
+<video src=""
+<div id="host"></div>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ScrubberSupport</code> behavior when clicking the scrubber.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const container = document.querySelector("div#host");
+const media = document.querySelector("video");
+const mediaController = createControls(container, media, null);
+
+mediaController.controls.showsStartButton = false;
+
+media.addEventListener("canplaythrough", () => {
+
+    media.addEventListener("timeupdate", () => {
+        shouldBe("media.currentTime", "3.1872");
+        container.remove();
+        media.remove();
+        finishJSTest();
+    });
+
+    const input = mediaController.controls.timeControl.scrubber.children[1].element;
+    const bounds = input.getBoundingClientRect();
+    const centerX = bounds.left + bounds.width / 2;
+    const centerY = bounds.top + bounds.height / 2;
+
+    eventSender.mouseMoveTo(centerX, centerY);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+});
+
+</script>
+<script src=""
+</body>

Added: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt (0 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt	2016-10-28 09:40:44 UTC (rev 208042)
@@ -0,0 +1,11 @@
+Testing the ScrubberSupport behavior when dragging the scrubber.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS media.currentTime is media.duration / 2
+PASS media.currentTime is 0
+PASS successfullyParsed is true
+
+TEST COMPLETE
+

Copied: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html (from rev 208041, trunk/LayoutTests/media/modern-media-controls/playback-support/playback-support-media-api.html) (0 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -0,0 +1,117 @@
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<style type="text/css" media="screen">
+    
+    video, #host {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    video {
+        width: 800px;
+        height: 240px;
+    }
+    
+</style>
+<video src="" autoplay></video>
+<div id="host"></div>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ScrubberSupport</code> behavior when dragging the scrubber.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const container = document.querySelector("div#host");
+const media = document.querySelector("video");
+const mediaController = createControls(container, media, null);
+
+let numberOfEvents = 0;
+media.addEventListener("play", () => {
+    media.pause();
+
+    const input = mediaController.controls.timeControl.scrubber.children[1].element;
+    const bounds = input.getBoundingClientRect();
+    const minX = bounds.left;
+    const dragStartX = bounds.left + bounds.width / 2;
+    const dragEndX = bounds.left;
+    const centerY = bounds.top + bounds.height / 2;
+
+    media.addEventListener("timeupdate", () => {
+        numberOfEvents++;
+
+        if (numberOfEvents == 1) {
+            shouldBe("media.currentTime", "media.duration / 2");
+            const delta = dragEndX - dragStartX;
+            const iterations = Math.abs(delta);
+            for (let i = 1; i <= iterations; ++i)
+                eventSender.mouseMoveTo(dragStartX + i * Math.sign(delta), centerY);
+
+            eventSender.mouseUp();
+        } else {
+            shouldBe("media.currentTime", "0");
+            container.remove();
+            media.remove();
+            finishJSTest();
+        }
+        
+    });
+
+    // Start dragging.
+    eventSender.mouseMoveTo(dragStartX, centerY);
+    eventSender.mouseDown();
+});
+
+</script>
+<script src=""
+</body>

Added: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-media-api-expected.txt (0 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-media-api-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-media-api-expected.txt	2016-10-28 09:40:44 UTC (rev 208042)
@@ -0,0 +1,12 @@
+Testing the ScrubberSupport behavior by using the media API.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaController.controls.timeControl.scrubber.value is 0
+PASS mediaController.controls.timeControl.scrubber.value is 0.5
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+

Copied: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-media-api.html (from rev 208041, trunk/LayoutTests/media/modern-media-controls/start-support/start-support-manual-play.html) (0 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-media-api.html	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-media-api.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -0,0 +1,68 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<video src="" style="width: 320px; height: 240px;"></video>
+<div id="shadow"></div>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ScrubberSupport</code> behavior by using the media API.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBe("mediaController.controls.timeControl.scrubber.value", "0");
+
+media.addEventListener("durationchange", () => {
+    media.addEventListener("timeupdate", () => {
+        shouldBe("mediaController.controls.timeControl.scrubber.value", "0.5");
+        debug("");
+        shadowRoot.host.remove();
+        media.remove();
+        finishJSTest();
+    });
+    media.currentTime = media.duration / 2;
+});
+
+</script>
+<script src=""
+</body>

Modified: trunk/LayoutTests/media/modern-media-controls/start-support/start-support-audio.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/start-support/start-support-audio.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/start-support/start-support-audio.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/start-support/start-support-autoplay.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/start-support/start-support-autoplay.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/start-support/start-support-autoplay.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/start-support/start-support-click-to-start.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/start-support/start-support-click-to-start.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/start-support/start-support-click-to-start.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/start-support/start-support-error.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/start-support/start-support-error.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/start-support/start-support-error.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/start-support/start-support-fullscreen.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/start-support/start-support-fullscreen.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/start-support/start-support-fullscreen.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/start-support/start-support-manual-play.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/start-support/start-support-manual-play.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/start-support/start-support-manual-play.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/media/modern-media-controls/start-support/start-support-no-source.html (208041 => 208042)


--- trunk/LayoutTests/media/modern-media-controls/start-support/start-support-no-source.html	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/media/modern-media-controls/start-support/start-support-no-source.html	2016-10-28 09:40:44 UTC (rev 208042)
@@ -30,6 +30,7 @@
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>
 <script src="" type="text/_javascript_"></script>

Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (208041 => 208042)


--- trunk/LayoutTests/platform/ios-simulator/TestExpectations	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations	2016-10-28 09:40:44 UTC (rev 208042)
@@ -2705,6 +2705,8 @@
 webkit.org/b/163009 media/modern-media-controls/icon-button/icon-button-active-state.html [ Failure ]
 webkit.org/b/163357 media/modern-media-controls/volume-slider/volume-slider-value.html [ Skip ]
 webkit.org/b/163669 media/modern-media-controls/start-support/start-support-fullscreen.html [ Skip ]
+webkit.org/b/164088 media/modern-media-controls/scrubber-support/scrubber-support-click.html [ Skip ]
+webkit.org/b/164088 media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]
 
 # This variation font test requires Skia which isn't available on iOS.
 webkit.org/b/163093 fast/text/variations/advances.html [ Failure ]

Modified: trunk/LayoutTests/platform/mac/TestExpectations (208041 => 208042)


--- trunk/LayoutTests/platform/mac/TestExpectations	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/LayoutTests/platform/mac/TestExpectations	2016-10-28 09:40:44 UTC (rev 208042)
@@ -1457,3 +1457,6 @@
 webkit.org/b/163307 [ Debug ] loader/stateobjects/replacestate-size.html [ Skip ]
 
 webkit.org/b/163922 http/tests/security/svg-image-with-css-cross-domain.html [ Pass ImageOnlyFailure ]
+
+webkit.org/b/164088 [ Yosemite ] media/modern-media-controls/scrubber-support/scrubber-support-click.html [ Skip ]
+webkit.org/b/164088 [ Yosemite ] media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]

Modified: trunk/Source/WebCore/ChangeLog (208041 => 208042)


--- trunk/Source/WebCore/ChangeLog	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/Source/WebCore/ChangeLog	2016-10-28 09:40:44 UTC (rev 208042)
@@ -1,3 +1,32 @@
+2016-10-28  Antoine Quint  <grao...@apple.com>
+
+        [Modern Media Controls] Media Controller: scrubbing support
+        https://bugs.webkit.org/show_bug.cgi?id=163726
+        <rdar://problem/27989481>
+
+        Reviewed by Dean Jackson.
+
+        We introduce the ScrubberSupport class which brings support for scrubbing the media
+        by interacting with the scrubber in the media controls and correctly reflecting
+        the media's current time as set via the media API.
+
+        Tests: media/modern-media-controls/scrubber-support/scrubber-support-click.html
+               media/modern-media-controls/scrubber-support/scrubber-support-drag.html
+               media/modern-media-controls/scrubber-support/scrubber-support-media-api.html
+
+        * Modules/modern-media-controls/js-files:
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController):
+        * Modules/modern-media-controls/media/scrubbing-support.js: Added.
+        (ScrubbingSupport.prototype.get control):
+        (ScrubbingSupport.prototype.get mediaEvents):
+        (ScrubbingSupport.prototype.controlValueWillStartChanging):
+        (ScrubbingSupport.prototype.controlValueDidChange):
+        (ScrubbingSupport.prototype.controlValueDidStopChanging):
+        (ScrubbingSupport.prototype.syncControl):
+        (ScrubbingSupport):
+        * WebCore.xcodeproj/project.pbxproj:
+
 2016-10-28  Alex Christensen  <achristen...@webkit.org>
 
         Fix Windows WebGL build after r208022

Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (208041 => 208042)


--- trunk/Source/WebCore/Modules/modern-media-controls/js-files	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files	2016-10-28 09:40:44 UTC (rev 208042)
@@ -32,6 +32,7 @@
 media/mute-support.js
 media/playback-support.js
 media/remaining-time-support.js
+media/scrubbing-support.js
 media/skip-back-support.js
 media/start-support.js
 media/media-controller.js

Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (208041 => 208042)


--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js	2016-10-28 09:40:44 UTC (rev 208042)
@@ -42,6 +42,7 @@
         new MuteSupport(this);
         new PlaybackSupport(this);
         new RemainingTimeSupport(this);
+        new ScrubbingSupport(this);
         new SkipBackSupport(this);
         new StartSupport(this);
 

Copied: trunk/Source/WebCore/Modules/modern-media-controls/media/scrubbing-support.js (from rev 208041, trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js) (0 => 208042)


--- trunk/Source/WebCore/Modules/modern-media-controls/media/scrubbing-support.js	                        (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/scrubbing-support.js	2016-10-28 09:40:44 UTC (rev 208042)
@@ -0,0 +1,74 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class ScrubbingSupport extends MediaControllerSupport
+{
+
+    // Protected
+
+    get control()
+    {
+        return this.mediaController.controls.timeControl.scrubber;
+    }
+
+    get mediaEvents()
+    {
+        return ["timeupdate"];
+    }
+
+    controlValueWillStartChanging(control)
+    {
+        const media = this.mediaController.media;
+        const isPaused = media.paused;
+        if (!isPaused)
+            media.pause();
+
+        this._wasPausedWhenScrubbingStarted = isPaused;
+    }
+
+    controlValueDidChange(control)
+    {
+        const media = this.mediaController.media;
+        media.fastSeek(control.value * media.duration);
+    }
+
+    controlValueDidStopChanging(control)
+    {
+        if (!this._wasPausedWhenScrubbingStarted)
+            this.mediaController.media.play();
+
+        delete this._wasPausedWhenScrubbingStarted;
+    }
+
+    syncControl()
+    {
+        const media = this.mediaController.media;
+        if (isNaN(media.duration))
+            return;
+
+        this.control.value = media.currentTime / media.duration;
+    }
+
+}

Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (208041 => 208042)


--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj	2016-10-28 07:17:35 UTC (rev 208041)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj	2016-10-28 09:40:44 UTC (rev 208042)
@@ -9841,6 +9841,7 @@
 		713E70AF1733E8B300A22D00 /* plugIns.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode._javascript_; path = plugIns.js; sourceTree = "<group>"; };
 		715379FE146BD9D6008BD615 /* SVGPathData.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGPathData.cpp; sourceTree = "<group>"; };
 		715379FF146BD9D6008BD615 /* SVGPathData.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = SVGPathData.h; sourceTree = "<group>"; };
+		7157E3D11DC1EE4B0094550E /* scrubbing-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode._javascript_; path = "scrubbing-support.js"; sourceTree = "<group>"; };
 		7157F061150B6564006EAABD /* SVGAnimatedTransformList.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGAnimatedTransformList.cpp; sourceTree = "<group>"; };
 		716FA0D81DB26591007323CC /* airplay-button.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "airplay-button.css"; sourceTree = "<group>"; };
 		716FA0D91DB26591007323CC /* airplay-button.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode._javascript_; path = "airplay-button.js"; sourceTree = "<group>"; };
@@ -17828,6 +17829,7 @@
 		71D02D911DB55C4E00DD5CF5 /* media */ = {
 			isa = PBXGroup;
 			children = (
+				7157E3D11DC1EE4B0094550E /* scrubbing-support.js */,
 				71004B9A1DC1109300A52A38 /* elapsed-time-support.js */,
 				7177E2461DB80D2F00919A0B /* media-controller-support.js */,
 				71D02D921DB55C4E00DD5CF5 /* media-controller.js */,
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to