[Modern Media Controls] UI Library: <audio> controls
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Dec 2016 00:14:19 +0000 (00:14 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Dec 2016 00:14:19 +0000 (00:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=164619
<rdar://problem/29207215>

Reviewed by Dean Jackson.

Add a default size for <audio> elements (200x50).

Tests: media/modern-media-controls/audio/audio-controls-buttons.html
       media/modern-media-controls/audio/audio-controls-metrics.html

* Modules/modern-media-controls/controls/media-controls.css:
(:host(audio)):

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

LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/audio/audio-controls-buttons-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/audio/audio-controls-buttons.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/audio/audio-controls-metrics-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/audio/audio-controls-metrics.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/media-controls.css

index 74226d8..1c4524f 100644 (file)
@@ -1,3 +1,21 @@
+2016-11-30  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] UI Library: <audio> controls
+        https://bugs.webkit.org/show_bug.cgi?id=164619
+        <rdar://problem/29207215>
+
+        Reviewed by Dean Jackson.
+
+        Add tests to check the default size of an <audio> element and which of
+        the media controls buttons are enabled in that case.
+
+        * media/modern-media-controls/audio/audio-controls-buttons-expected.txt: Added.
+        * media/modern-media-controls/audio/audio-controls-buttons.html: Added.
+        * media/modern-media-controls/audio/audio-controls-metrics-expected.txt: Added.
+        * media/modern-media-controls/audio/audio-controls-metrics.html: Added.
+        * platform/ios-simulator/TestExpectations:
+        * platform/mac/TestExpectations:
+
 2016-11-30  Zalan Bujtas  <zalan@apple.com>
 
         ASSERTION FAILED: layoutState->m_renderer == this in WebCore::RenderBlock::offsetFromLogicalTopOfFirstPage
diff --git a/LayoutTests/media/modern-media-controls/audio/audio-controls-buttons-expected.txt b/LayoutTests/media/modern-media-controls/audio/audio-controls-buttons-expected.txt
new file mode 100644 (file)
index 0000000..9c0ea1f
--- /dev/null
@@ -0,0 +1,15 @@
+Testing the <audio> controls buttons.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Making AirPlay routes available.
+AirPlay routes became available.
+PASS mediaController.controls.controlsBar.children[2].children.length is 2
+PASS mediaController.controls.controlsBar.children[2].children[0] is mediaController.controls.muteButton
+PASS mediaController.controls.controlsBar.children[2].children[1] is mediaController.controls.airplayButton
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/audio/audio-controls-buttons.html b/LayoutTests/media/modern-media-controls/audio/audio-controls-buttons.html
new file mode 100644 (file)
index 0000000..5aed6b3
--- /dev/null
@@ -0,0 +1,47 @@
+<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: 600px; height: 50px;" autoplay controls></audio>
+<div id="container"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>&lt;audio></code> controls buttons.");
+
+const shadowRoot = document.querySelector("#container");
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+
+window.internals.setMockMediaPlaybackTargetPickerEnabled(false);
+
+media.addEventListener("play", () => {
+    media.addEventListener("webkitplaybacktargetavailabilitychanged", playbackTargetAvailabilityChanged);
+
+    debug("Making AirPlay routes available.");
+    window.internals.setMockMediaPlaybackTargetPickerEnabled(true);
+});
+
+function playbackTargetAvailabilityChanged(event)
+{
+    if (event.availability != "available")
+        return;
+
+    debug("AirPlay routes became available.");
+
+    scheduler.frameDidFire = function()
+    {
+        shouldBe("mediaController.controls.controlsBar.children[2].children.length", "2");
+        shouldBe("mediaController.controls.controlsBar.children[2].children[0]", "mediaController.controls.muteButton");
+        shouldBe("mediaController.controls.controlsBar.children[2].children[1]", "mediaController.controls.airplayButton");
+
+        debug("");
+        shadowRoot.remove();
+        media.remove();
+        finishJSTest();
+    };
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/audio/audio-controls-metrics-expected.txt b/LayoutTests/media/modern-media-controls/audio/audio-controls-metrics-expected.txt
new file mode 100644 (file)
index 0000000..1504332
--- /dev/null
@@ -0,0 +1,12 @@
+Testing the <audio> controls metrics.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS bounds.width is 200
+PASS bounds.height is 50
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/audio/audio-controls-metrics.html b/LayoutTests/media/modern-media-controls/audio/audio-controls-metrics.html
new file mode 100644 (file)
index 0000000..a7fc2a3
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>&lt;audio></code> controls metrics.");
+
+const audio = document.body.appendChild(document.createElement("audio"));
+audio.controls = true;
+
+const bounds = audio.getBoundingClientRect();
+shouldBe("bounds.width", "200");
+shouldBe("bounds.height", "50");
+
+debug("");
+audio.remove();
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index 2cd0ccd..78863b4 100644 (file)
@@ -2745,6 +2745,7 @@ fast/layers/prevent-hit-test-during-layout.html [ Skip ]
 media/modern-media-controls/airplay-support/airplay-support.html [ Skip ]
 media/modern-media-controls/pip-support [ Skip ]
 media/modern-media-controls/placard-support [ Skip ]
+media/modern-media-controls/audio [ Skip ]
 
 # This test is Mac-specific since it checks that we have custom controls in fullscreen.
 media/modern-media-controls/media-controller/media-controller-fullscreen-change.html [ Skip ]
index bb0ddf5..700c4b1 100644 (file)
@@ -1450,6 +1450,7 @@ webkit.org/b/164088 [ Yosemite ] media/modern-media-controls/scrubber-support/sc
 [ Yosemite ] media/modern-media-controls/airplay-support/airplay-support.html [ Skip ]
 [ Yosemite ] media/modern-media-controls/pip-support [ Skip ]
 [ Yosemite ] media/modern-media-controls/placard-support [ Skip ]
+[ Yosemite ] media/modern-media-controls/audio [ Skip ]
 
 webkit.org/b/164616 http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html [ Pass Failure ]
 webkit.org/b/164323 media/modern-media-controls/airplay-support/airplay-support.html [ Pass Failure ]
index d4f28af..e13b920 100644 (file)
@@ -1,3 +1,19 @@
+2016-11-30  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] UI Library: <audio> controls
+        https://bugs.webkit.org/show_bug.cgi?id=164619
+        <rdar://problem/29207215>
+
+        Reviewed by Dean Jackson.
+
+        Add a default size for <audio> elements (200x50).
+
+        Tests: media/modern-media-controls/audio/audio-controls-buttons.html
+               media/modern-media-controls/audio/audio-controls-metrics.html
+
+        * Modules/modern-media-controls/controls/media-controls.css:
+        (:host(audio)):
+
 2016-11-30  Brady Eidson  <beidson@apple.com>
 
         REGRESSION (r209144): API test IndexedDB.DeleteRecovery failing.
index fe6d27f..05bd8ce 100644 (file)
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+:host(audio) {
+    width: 200px;
+    height: 50px;
+}
+
 /* We need to use relative positioning due to webkit.org/b/163603 */
 .media-controls {
     position: relative;