[Modern Media Controls] Only show controls when the controls attribute is set
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Nov 2016 02:26:04 +0000 (02:26 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Nov 2016 02:26:04 +0000 (02:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=165175

Source/WebCore:

We now respect the value of the media's "controls" attribute so that the start button and the controls
bar are only shown when that attribute is set to "true".

Patch by Antoine Quint <graouts@apple.com> on 2016-11-29
Reviewed by Dean Jackson.

Tests: media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html
       media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html
       media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html
       media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html
       media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html

* Modules/modern-media-controls/controls/controls-bar.js: Added.
(ControlsBar):
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.): Deleted.
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/controls-visibility-support.js: Added.
(ControlsVisibilitySupport):
(ControlsVisibilitySupport.prototype.destroy):
(ControlsVisibilitySupport.prototype.get mediaEvents):
(ControlsVisibilitySupport.prototype.syncControl):
* Modules/modern-media-controls/media/media-controller-support.js:
(MediaControllerSupport):
(MediaControllerSupport.prototype.handleEvent):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype._updateControlsIfNeeded):
* WebCore.xcodeproj/project.pbxproj:

LayoutTests:

We add new tests to check that the media's "control" attribute is respected. We also update a
series of tests to be more robust and turn the media "controls" attribute on so that the controls
bar is displayed as required by the tests.

Patch by Antoine Quint <graouts@apple.com> on 2016-11-29
Reviewed by Dean Jackson.

* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html: Added.
* media/modern-media-controls/fullscreen-support/fullscreen-support-click.html:
* media/modern-media-controls/media-controls/media-controls-constructor-expected.txt:
* media/modern-media-controls/media-controls/media-controls-constructor.html:
* media/modern-media-controls/pip-support/pip-support-click.html:
* media/modern-media-controls/placard-support/placard-support-airplay.html:
* media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt:
* media/modern-media-controls/scrubber-support/scrubber-support-click.html:
* media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt:
* media/modern-media-controls/scrubber-support/scrubber-support-drag.html:
* media/modern-media-controls/volume-support/volume-support-click.html:
* media/modern-media-controls/volume-support/volume-support-drag.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@209108 268f45cc-cd09-0410-ab3c-d52691b4dbfc

30 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html
LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor-expected.txt
LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor.html
LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html
LayoutTests/media/modern-media-controls/placard-support/placard-support-airplay.html
LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt
LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html
LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt
LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html
LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html
LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/media-controls.js
Source/WebCore/Modules/modern-media-controls/js-files
Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js
Source/WebCore/Modules/modern-media-controls/media/media-controller.js
Source/WebCore/WebCore.xcodeproj/project.pbxproj

index 2861639..198819a 100644 (file)
@@ -1,3 +1,36 @@
+2016-11-29  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Only show controls when the controls attribute is set
+        https://bugs.webkit.org/show_bug.cgi?id=165175
+
+        We add new tests to check that the media's "control" attribute is respected. We also update a
+        series of tests to be more robust and turn the media "controls" attribute on so that the controls
+        bar is displayed as required by the tests.
+
+        Reviewed by Dean Jackson.
+
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt: Added.
+        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html: Added.
+        * media/modern-media-controls/fullscreen-support/fullscreen-support-click.html:
+        * media/modern-media-controls/media-controls/media-controls-constructor-expected.txt:
+        * media/modern-media-controls/media-controls/media-controls-constructor.html:
+        * media/modern-media-controls/pip-support/pip-support-click.html:
+        * media/modern-media-controls/placard-support/placard-support-airplay.html:
+        * media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt:
+        * media/modern-media-controls/scrubber-support/scrubber-support-click.html:
+        * media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt:
+        * media/modern-media-controls/scrubber-support/scrubber-support-drag.html:
+        * media/modern-media-controls/volume-support/volume-support-click.html:
+        * media/modern-media-controls/volume-support/volume-support-drag.html:
+
 2016-11-29  Ryan Haddad  <ryanhaddad@apple.com>
 
         Marking media/modern-media-controls/tracks-support/tracks-support-audio-tracks.html as flaky on ios-simulator.
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt
new file mode 100644 (file)
index 0000000..54aa81a
--- /dev/null
@@ -0,0 +1,17 @@
+Testing the ControlsVisibilitySupport behavior for audio without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html
new file mode 100644 (file)
index 0000000..c494db6
--- /dev/null
@@ -0,0 +1,33 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<audio src="../../content/test.mp4" style="width: 320px; height: 240px;"></audio>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior for audio without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+    debug("");
+    debug("Media has loaded metadata");
+    shouldBeFalse("mediaController.controls.controlsBar.visible");
+    shouldBeFalse("mediaController.controls.startButton.visible");
+    debug("");
+    shadowRoot.host.remove();
+    media.remove();
+    finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt
new file mode 100644 (file)
index 0000000..041ee61
--- /dev/null
@@ -0,0 +1,17 @@
+Testing the ControlsVisibilitySupport behavior without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html
new file mode 100644 (file)
index 0000000..e939caf
--- /dev/null
@@ -0,0 +1,33 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+    debug("");
+    debug("Media has loaded metadata");
+    shouldBeFalse("mediaController.controls.controlsBar.visible");
+    shouldBeFalse("mediaController.controls.startButton.visible");
+    debug("");
+    shadowRoot.host.remove();
+    media.remove();
+    finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt
new file mode 100644 (file)
index 0000000..88f4357
--- /dev/null
@@ -0,0 +1,17 @@
+Testing the ControlsVisibilitySupport behavior for audio without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html
new file mode 100644 (file)
index 0000000..8945656
--- /dev/null
@@ -0,0 +1,33 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<audio src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></audio>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior for audio without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeTrue("mediaController.controls.controlsBar.visible");
+shouldBeTrue("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+    debug("");
+    debug("Media has loaded metadata");
+    shouldBeTrue("mediaController.controls.controlsBar.visible");
+    shouldBeTrue("mediaController.controls.startButton.visible");
+    debug("");
+    shadowRoot.host.remove();
+    media.remove();
+    finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt
new file mode 100644 (file)
index 0000000..ec2fb0b
--- /dev/null
@@ -0,0 +1,17 @@
+Testing the ControlsVisibilitySupport behavior without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html
new file mode 100644 (file)
index 0000000..e42372f
--- /dev/null
@@ -0,0 +1,33 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+    debug("");
+    debug("Media has loaded metadata");
+    shouldBeTrue("mediaController.controls.controlsBar.visible");
+    shouldBeTrue("mediaController.controls.startButton.visible");
+    debug("");
+    shadowRoot.host.remove();
+    media.remove();
+    finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt
new file mode 100644 (file)
index 0000000..6dc8b91
--- /dev/null
@@ -0,0 +1,25 @@
+Testing the ControlsVisibilitySupport behavior when the controls attribute changes.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+Turning controls off
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Turning controls back on
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html b/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html
new file mode 100644 (file)
index 0000000..efb1c50
--- /dev/null
@@ -0,0 +1,55 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior when the controls attribute changes.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+let numberOfMutations = 0;
+new MutationObserver(() => {
+    numberOfMutations++;
+
+    if (numberOfMutations === 1) {
+        shouldBeFalse("mediaController.controls.controlsBar.visible");
+        shouldBeFalse("mediaController.controls.startButton.visible");
+
+        debug("");
+        debug("Turning controls back on");
+        media.controls = true;
+    } else {
+        shouldBeTrue("mediaController.controls.controlsBar.visible");
+        shouldBeTrue("mediaController.controls.startButton.visible");
+
+        debug("");
+        shadowRoot.host.remove();
+        media.remove();
+        finishJSTest();
+    }
+}).observe(media, { attributes: true, attributeFilter: ["controls"] });
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+    debug("");
+    debug("Media has loaded metadata");
+    shouldBeTrue("mediaController.controls.controlsBar.visible");
+    shouldBeTrue("mediaController.controls.startButton.visible");
+
+    debug("");
+    debug("Turning controls off");
+    media.controls = false;
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index 1763ea0..288ce1d 100644 (file)
@@ -15,7 +15,7 @@
     }
     
 </style>
-<video src="../../content/test.mp4" autoplay></video>
+<video src="../../content/test.mp4" controls autoplay></video>
 <div id="host"></div>
 <script type="text/javascript">
 
index 6381865..47ab765 100644 (file)
@@ -22,7 +22,7 @@ PASS mediaControls.timeControl instanceof TimeControl is true
 PASS mediaControls.airplayPlacard instanceof AirplayPlacard is true
 PASS mediaControls.pipPlacard instanceof PiPPlacard is true
 
-PASS mediaControls.controlsBar instanceof LayoutItem is true
+PASS mediaControls.controlsBar instanceof ControlsBar is true
 PASS mediaControls.controlsBar.element.localName is "div"
 PASS mediaControls.controlsBar.element.className is "controls-bar"
 
index 175a99d..3155b22 100644 (file)
@@ -29,7 +29,7 @@ shouldBeTrue("mediaControls.airplayPlacard instanceof AirplayPlacard");
 shouldBeTrue("mediaControls.pipPlacard instanceof PiPPlacard");
 
 debug("");
-shouldBeTrue("mediaControls.controlsBar instanceof LayoutItem");
+shouldBeTrue("mediaControls.controlsBar instanceof ControlsBar");
 shouldBeEqualToString("mediaControls.controlsBar.element.localName", "div");
 shouldBeEqualToString("mediaControls.controlsBar.element.className", "controls-bar");
 
index 123c7b0..76b9411 100644 (file)
@@ -15,7 +15,7 @@
     }
     
 </style>
-<video src="../../content/test.mp4" autoplay></video>
+<video src="../../content/test.mp4" autoplay controls></video>
 <div id="host"></div>
 <script type="text/javascript">
 
index 0a25961..2741448 100644 (file)
@@ -15,7 +15,7 @@
     }
     
 </style>
-<video src="../../content/test.mp4" autoplay></video>
+<video src="../../content/test.mp4" controls autoplay></video>
 <div id="host"></div>
 <script type="text/javascript">
 
index c01c029..365d994 100644 (file)
@@ -3,7 +3,7 @@ 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 media.currentTime is within 0.2 of 3.1872
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 43d19df..8a15dfc 100644 (file)
@@ -15,7 +15,7 @@
     }
     
 </style>
-<video src="../../content/test.mp4"></video>
+<video src="../../content/test.mp4" controls autoplay></video>
 <div id="host"></div>
 <script type="text/javascript">
 
@@ -29,10 +29,14 @@ const mediaController = createControls(container, media, null);
 
 mediaController.controls.showsStartButton = false;
 
-media.addEventListener("canplaythrough", () => {
+scheduler.frameDidFire = function() {
+    if (media.paused)
+        return;
+
+    media.pause();
 
     media.addEventListener("timeupdate", () => {
-        shouldBe("media.currentTime", "3.1872");
+        shouldBeCloseTo("media.currentTime", 3.1872, 0.2);
         container.remove();
         media.remove();
         finishJSTest();
@@ -46,7 +50,7 @@ media.addEventListener("canplaythrough", () => {
     eventSender.mouseMoveTo(centerX, centerY);
     eventSender.mouseDown();
     eventSender.mouseUp();
-});
+};
 
 </script>
 <script src="../../../resources/js-test-post.js"></script>
index 65d1ef0..2fd2ebc 100644 (file)
@@ -3,7 +3,7 @@ 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 within 0.01 of 3.0136
 PASS media.currentTime is 0
 PASS successfullyParsed is true
 
index f8720a0..06da2c2 100644 (file)
@@ -15,7 +15,7 @@
     }
     
 </style>
-<video src="../../content/test.mp4" autoplay></video>
+<video src="../../content/test.mp4" autoplay controls></video>
 <div id="host"></div>
 <script type="text/javascript">
 
@@ -28,11 +28,18 @@ const media = document.querySelector("video");
 const mediaController = createControls(container, media, null);
 
 let numberOfEvents = 0;
-media.addEventListener("play", () => {
+scheduler.frameDidFire = function() {
+    if (media.paused)
+        return;
+
     media.pause();
 
     const input = mediaController.controls.timeControl.scrubber.children[1].element;
     const bounds = input.getBoundingClientRect();
+
+    if (bounds.width === 0)
+        return;
+
     const minX = bounds.left;
     const dragStartX = bounds.left + bounds.width / 2;
     const dragEndX = bounds.left;
@@ -42,7 +49,7 @@ media.addEventListener("play", () => {
         numberOfEvents++;
 
         if (numberOfEvents == 1) {
-            shouldBe("media.currentTime", "media.duration / 2");
+            shouldBeCloseTo("media.currentTime", media.duration / 2, 0.01);
             const delta = dragEndX - dragStartX;
             const iterations = Math.abs(delta);
             for (let i = 1; i <= iterations; ++i)
@@ -61,7 +68,7 @@ media.addEventListener("play", () => {
     // Start dragging.
     eventSender.mouseMoveTo(dragStartX, centerY);
     eventSender.mouseDown();
-});
+};
 
 </script>
 <script src="../../../resources/js-test-post.js"></script>
index 2ea316f..f6503e9 100644 (file)
@@ -15,7 +15,7 @@
     }
     
 </style>
-<video src="../../content/test.mp4"></video>
+<video src="../../content/test.mp4" controls autoplay></video>
 <div id="host"></div>
 <script type="text/javascript">
 
@@ -29,6 +29,9 @@ const mediaController = createControls(container, media, null);
 
 let numberOfFrames = 0;
 scheduler.frameDidFire = function() {
+    if (media.paused)
+        return;
+
     numberOfFrames++;
 
     if (numberOfFrames == 1) {
index 9e7175f..f9835f7 100644 (file)
@@ -15,7 +15,7 @@
     }
     
 </style>
-<video src="../../content/test.mp4" muted></video>
+<video src="../../content/test.mp4" muted autoplay controls></video>
 <div id="host"></div>
 <script type="text/javascript">
 
@@ -32,6 +32,9 @@ shouldBe("mediaController.controls.volumeSlider.value", "0");
 
 let numberOfFrames = 0;
 scheduler.frameDidFire = function() {
+    if (media.paused)
+        return;
+
     numberOfFrames++;
 
     if (numberOfFrames == 1) {
index 8d33fcc..75f3d8f 100644 (file)
@@ -1,3 +1,36 @@
+2016-11-29  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Only show controls when the controls attribute is set
+        https://bugs.webkit.org/show_bug.cgi?id=165175
+
+        We now respect the value of the media's "controls" attribute so that the start button and the controls
+        bar are only shown when that attribute is set to "true".
+
+        Reviewed by Dean Jackson.
+
+        Tests: media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html
+               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html
+               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html
+               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html
+               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html
+
+        * Modules/modern-media-controls/controls/controls-bar.js: Added.
+        (ControlsBar):
+        * Modules/modern-media-controls/controls/media-controls.js:
+        (MediaControls.): Deleted.
+        * Modules/modern-media-controls/js-files:
+        * Modules/modern-media-controls/media/controls-visibility-support.js: Added.
+        (ControlsVisibilitySupport):
+        (ControlsVisibilitySupport.prototype.destroy):
+        (ControlsVisibilitySupport.prototype.get mediaEvents):
+        (ControlsVisibilitySupport.prototype.syncControl):
+        * Modules/modern-media-controls/media/media-controller-support.js:
+        (MediaControllerSupport):
+        (MediaControllerSupport.prototype.handleEvent):
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController.prototype._updateControlsIfNeeded):
+        * WebCore.xcodeproj/project.pbxproj:
+
 2016-11-29  Brady Eidson  <beidson@apple.com>
 
         Followup to:
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js b/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js
new file mode 100644 (file)
index 0000000..6dc1a90
--- /dev/null
@@ -0,0 +1,34 @@
+/*
+ * 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 ControlsBar extends LayoutNode
+{
+
+    constructor()
+    {
+        super(`<div class="controls-bar">`);
+    }
+
+}
index 57918a5..d5b5ce5 100644 (file)
@@ -45,10 +45,7 @@ class MediaControls extends LayoutNode
         this.statusLabel = new StatusLabel(this)
         this.timeControl = new TimeControl(this);
 
-        this.controlsBar = new LayoutItem({
-            element: `<div class="controls-bar">`,
-            layoutDelegate: this
-        });
+        this.controlsBar = new ControlsBar;
 
         this.airplayPlacard = new AirplayPlacard(this);
         this.pipPlacard = new PiPPlacard(this);
index 40eaedb..b0e6af0 100644 (file)
@@ -22,6 +22,7 @@ controls/rewind-button.js
 controls/forward-button.js
 controls/buttons-container.js
 controls/status-label.js
+controls/controls-bar.js
 controls/media-controls.js
 controls/ios-inline-media-controls.js
 controls/macos-media-controls.js
@@ -32,6 +33,7 @@ controls/airplay-placard.js
 controls/pip-placard.js
 media/media-controller-support.js
 media/airplay-support.js
+media/controls-visibility-support.js
 media/elapsed-time-support.js
 media/fullscreen-support.js
 media/mute-support.js
diff --git a/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js b/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js
new file mode 100644 (file)
index 0000000..212943e
--- /dev/null
@@ -0,0 +1,59 @@
+/*
+ * 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 ControlsVisibilitySupport extends MediaControllerSupport
+{
+
+    constructor(mediaController)
+    {
+        super(mediaController);
+
+        this._controlsAttributeObserver = new MutationObserver(this.syncControl.bind(this));
+        this._controlsAttributeObserver.observe(mediaController.media, { attributes: true, attributeFilter: ["controls"] });
+    }
+
+    // Protected
+
+    destroy()
+    {
+        this._controlsAttributeObserver.disconnect();
+    }
+
+    get mediaEvents()
+    {
+        return ["loadedmetadata"];
+    }
+
+    syncControl()
+    {
+        let shouldShowControls = this.mediaController.media.controls;
+        if (media instanceof HTMLVideoElement)
+            shouldShowControls = shouldShowControls && this.mediaController.media.readyState > HTMLMediaElement.HAVE_NOTHING;
+
+        this.mediaController.controls.startButton.visible = shouldShowControls;
+        this.mediaController.controls.controlsBar.visible = shouldShowControls;
+    }
+
+}
index d8272e3..855d44b 100644 (file)
@@ -33,12 +33,12 @@ class MediaControllerSupport
         for (let eventType of this.mediaEvents)
             mediaController.media.addEventListener(eventType, this);
 
+        this.syncControl();
+
         if (!this.control)
             return;
 
         this.control.uiDelegate = this;
-
-        this.syncControl();
     }
 
     // Public
@@ -74,8 +74,7 @@ class MediaControllerSupport
     handleEvent(event)
     {
         // Implemented by subclasses.
-        if (this.control)
-            this.syncControl();
+        this.syncControl();
     }
 
     syncControl()
index 9a86328..13bf428 100644 (file)
@@ -92,7 +92,7 @@ class MediaController
 
         this._updateControlsSize();
 
-        this._supportingObjects = [AirplaySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport].map(SupportClass => {
+        this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport].map(SupportClass => {
             return new SupportClass(this);
         }, this);
     }
index 281303e..c227503 100644 (file)
                71004B9A1DC1109300A52A38 /* elapsed-time-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "elapsed-time-support.js"; sourceTree = "<group>"; };
                71004B9B1DC1109300A52A38 /* remaining-time-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "remaining-time-support.js"; sourceTree = "<group>"; };
                71004B9D1DC1398800A52A38 /* playback-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "playback-support.js"; sourceTree = "<group>"; };
+               710FA74B1DEE576D004C715E /* controls-bar.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-bar.js"; sourceTree = "<group>"; };
+               710FA74C1DEE577E004C715E /* controls-visibility-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-visibility-support.js"; sourceTree = "<group>"; };
                7117445614BC34E200EE5FC8 /* SVGTextMetricsBuilder.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGTextMetricsBuilder.cpp; sourceTree = "<group>"; };
                7117445714BC34E200EE5FC8 /* SVGTextMetricsBuilder.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = SVGTextMetricsBuilder.h; sourceTree = "<group>"; };
                7118FED215685CC60030B79A /* JSSVGViewSpec.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSSVGViewSpec.cpp; sourceTree = "<group>"; };
                                716FA0DD1DB26591007323CC /* button.js */,
                                716FA0DE1DB26591007323CC /* buttons-container.css */,
                                716FA0DF1DB26591007323CC /* buttons-container.js */,
+                               710FA74B1DEE576D004C715E /* controls-bar.js */,
                                716FA0E01DB26591007323CC /* forward-button.js */,
                                716FA0E11DB26591007323CC /* fullscreen-button.js */,
                                716FA0E21DB26591007323CC /* icon-button.css */,
                        isa = PBXGroup;
                        children = (
                                717F90581DC4BB600006F520 /* airplay-support.js */,
+                               710FA74C1DEE577E004C715E /* controls-visibility-support.js */,
                                71004B9A1DC1109300A52A38 /* elapsed-time-support.js */,
                                714131471DC9D6AF00336107 /* fullscreen-support.js */,
                                7177E2461DB80D2F00919A0B /* media-controller-support.js */,