Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(57)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/media/display-overflow-menu.html

Issue 2243473002: Adding overflow menu to media player (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: added more tests Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« content/app/strings/content_strings.grd ('K') | « content/child/blink_platform_impl.cc ('k') | third_party/WebKit/Source/core/css/CSSPrimitiveValueMappings.h » ('j') | third_party/WebKit/Source/core/css/CSSValueKeywords.in » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/media/display-overflow-menu.html
diff --git a/third_party/WebKit/LayoutTests/media/display-overflow-menu.html b/third_party/WebKit/LayoutTests/media/display-overflow-menu.html
new file mode 100644
index 0000000000000000000000000000000000000000..742a66f094033642890facfa1b139b1e8cbbd585
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/media/display-overflow-menu.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<title>Overflow menu behavior</title>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="media-controls.js"></script>
+<script src="media-file.js"></script>
+<body style="padding: 300px">
+<video controls></video>
+<script>
+// We expect the items in the overflow to appear in the following ordering.
+var overflowButtonsCSS = ["-webkit-media-controls-mute-button",
+ "-internal-media-controls-cast-button",
+ "-webkit-media-controls-toggle-closed-captions-button",
+ "-webkit-media-controls-fullscreen-button"];
+// PseudoID for the overflow button
+var menuID = "-internal-overflow-menu-button";
+// PseudoID for the overflow list
+var listID = "-internal-media-controls-overflow-menu-list";
+
+// Returns the overflow menu button within the given media element
+function getOverflowMenuButton(media) {
+ return mediaControlsElement(internals.shadowRoot(media).firstChild, menuID);
+}
+
+// Returns the overflow menu list of overflow controls
+function getOverflowList(media) {
+ return mediaControlsElement(internals.shadowRoot(media).firstChild, listID);
+}
+
+async_test(function(t) {
+ // Set up video
+ var video = document.querySelector("video");
+ video.src = findMediaFile("video", "content/test");
+ video.setAttribute("width", "60");
+ // Add captions
+ var track = video.addTextTrack("captions");
+ // Pretend we have a cast device
+ internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);
+
+ video.onloadeddata = t.step_func_done(function() {
+ checkOrderingChildren(video);
+ checkVisibilityOfOverflowMenu(video);
+ clickOnMuteButton(video);
+ clickOnClosedCaptionsButton(video, track);
+ removeCastDevice(video);
+ });
+});
+
+function checkOrderingChildren(video) {
+ test(function() {
mlamouri (slow - plz ping) 2016/09/01 18:29:15 I'm not sure you can do that (creating a sync test
kdsilva 2016/09/05 14:39:35 Done.
+ var overflowList = getOverflowList(video);
+ var children = overflowList.children;
+
+ // The overflow menu should always have the same number of elements.
+ // Their visibility will change over time based on the size of the video.
+ assert_equals(children.length, 4);
+
+ // Ensure that all of the buttons are visible in the right order
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ var innerButton = child.children[0];
+ assert_equals(internals.shadowPseudoId(child), "-internal-media-controls-overflow-menu-list-item");
+ assert_equals(internals.shadowPseudoId(innerButton), overflowButtonsCSS[i]);
+ // Items should be visible
+ assert_true(getComputedStyle(child).display != "none");
+ // Buttons shouldn't be visible
+ assert_true(getComputedStyle(innerButton).display == "none");
+ }
+ }, "Overflow menu children appear in correct order.");
+}
+
+function checkVisibilityOfOverflowMenu(video) {
+ test(function() {
+ var overflowList = getOverflowList(video);
+ var overflowMenu = getOverflowMenuButton(video);
+ // Overflow menu button should be visible
+ assert_true(getComputedStyle(overflowMenu).display != "none");
+
+ // Overflow list shouldn't be visible until it's clicked on
+ assert_false(getComputedStyle(overflowList).display != "none");
+
+ // Clicking on the overflow menu button should make the overflow list visible
+ var coords = elementCoordinates(overflowMenu);
+ clickAtCoordinates(coords[0], coords[1]);
+ assert_true(getComputedStyle(overflowList).display != "none");
+
+ // Click on the overflow menu button, again. Should close overflow list.
+ var coords = elementCoordinates(overflowMenu);
+ clickAtCoordinates(coords[0], coords[1]);
+ assert_false(getComputedStyle(overflowList).display != "none");
+
+ }, "Overflow menu button should be visible.");
+}
+
+function clickOnMuteButton(video) {
+ test(function() {
+ var overflowList = getOverflowList(video);
+ var overflowMenu = getOverflowMenuButton(video);
+
+ assert_false(video.muted);
+
+ // Click on the overflow menu button
+ var coords = elementCoordinates(overflowMenu);
+ clickAtCoordinates(coords[0], coords[1]);
+
+ // Click on mute button
+ var coords = elementCoordinates(overflowList.children[0]);
+ clickAtCoordinates(coords[0], coords[1]);
+
+ assert_true(video.muted);
+
+ // Close overflow menu
+ var coords = elementCoordinates(overflowMenu);
+ clickAtCoordinates(coords[0], coords[1]);
+ }, "Clicking on the mute button responds as expected.");
+}
+
+function clickOnClosedCaptionsButton(video, track) {
+ test(function() {
+ var overflowList = getOverflowList(video);
+ var overflowMenu = getOverflowMenuButton(video);
+
+ // List that displays text tracks
+ var captionsList = mediaControlsElement(internals.shadowRoot(video).firstChild, "-internal-media-controls-text-track-list");
+
+ assert_false(getComputedStyle(captionsList).display != "none");
+ // Click on the overflow menu button
+ var coords = elementCoordinates(overflowMenu);
+ clickAtCoordinates(coords[0], coords[1]);
+
+ // Click on the closed captions button
+ var coords = elementCoordinates(overflowList.children[2]);
+ clickAtCoordinates(coords[0], coords[1]);
+
+ assert_true(getComputedStyle(captionsList).display != "none");
+ }, "Clicking on the closed captions button responds as expected.");
+}
+
+function removeCastDevice(video) {
+ test(function() {
+ var overflowList = getOverflowList(video);
+
+ // Cast option in overflow should no longer be visible, but the other
+ // options should all be.
+ var buttonsWithoutCast = overflowButtonsCSS;
+ buttonsWithoutCast[1] = undefined;
+ internals.mediaPlayerRemoteRouteAvailabilityChanged(video, false);
+
+ var children = overflowList.children;
+ // Ensure that all of the buttons are visible in the right order
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ if (buttonsWithoutCast[i]) {
+ assert_true(getComputedStyle(child).display != "none");
+ } else {
+ assert_false(getComputedStyle(child).display != "none");
+ }
+ }
+ internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);
+ assert_true(getComputedStyle(children[1]).display != "none");
+ }, "Removing cast device updates overflow menu as expected.");
+}
+</script>
+</body>
« content/app/strings/content_strings.grd ('K') | « content/child/blink_platform_impl.cc ('k') | third_party/WebKit/Source/core/css/CSSPrimitiveValueMappings.h » ('j') | third_party/WebKit/Source/core/css/CSSValueKeywords.in » ('J')

Powered by Google App Engine
This is Rietveld 408576698