Chromium Code Reviews Chromium Code Reviews
Issue 2243473002:
Adding overflow menu to media player (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <title>Overflow menu behavior</title> | |
| 3 <script src="../resources/testharness.js"></script> | |
| 4 <script src="../resources/testharnessreport.js"></script> | |
| 5 <script src="media-controls.js"></script> | |
| 6 <script src="media-file.js"></script> | |
| 7 <body style="padding: 300px"> | |
| 8 <video controls></video> | |
| 9 <script> | |
| 10 // We expect the items in the overflow to appear in the following ordering. | |
| 11 var overflowButtonsCSS = ["-webkit-media-controls-mute-button", | |
| 12 "-internal-media-controls-cast-button", | |
| 13 "-webkit-media-controls-toggle-closed-captions-button", | |
| 14 "-webkit-media-controls-fullscreen-button"]; | |
| 15 // PseudoID for the overflow button | |
| 16 var menuID = "-internal-overflow-menu-button"; | |
| 17 // PseudoID for the overflow list | |
| 18 var listID = "-internal-media-controls-overflow-menu-list"; | |
| 19 | |
| 20 // Returns the overflow menu button within the given media element | |
| 21 function getOverflowMenuButton(media) { | |
| 22 return mediaControlsElement(internals.shadowRoot(media).firstChild, menuID); | |
| 23 } | |
| 24 | |
| 25 // Returns the overflow menu list of overflow controls | |
| 26 function getOverflowList(media) { | |
| 27 return mediaControlsElement(internals.shadowRoot(media).firstChild, listID); | |
| 28 } | |
| 29 | |
| 30 async_test(function(t) { | |
| 31 // Set up video | |
| 32 var video = document.querySelector("video"); | |
| 33 video.src = findMediaFile("video", "content/test"); | |
| 34 video.setAttribute("width", "60"); | |
| 35 // Add captions | |
| 36 var track = video.addTextTrack("captions"); | |
| 37 // Pretend we have a cast device | |
| 38 internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true); | |
| 39 | |
| 40 video.onloadeddata = t.step_func_done(function() { | |
| 41 checkOrderingChildren(video); | |
| 42 checkVisibilityOfOverflowMenu(video); | |
| 43 clickOnMuteButton(video); | |
| 44 clickOnClosedCaptionsButton(video, track); | |
| 45 removeCastDevice(video); | |
| 46 }); | |
| 47 }); | |
| 48 | |
| 49 function checkOrderingChildren(video) { | |
| 50 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.
| |
| 51 var overflowList = getOverflowList(video); | |
| 52 var children = overflowList.children; | |
| 53 | |
| 54 // The overflow menu should always have the same number of elements. | |
| 55 // Their visibility will change over time based on the size of the video. | |
| 56 assert_equals(children.length, 4); | |
| 57 | |
| 58 // Ensure that all of the buttons are visible in the right order | |
| 59 for (var i = 0; i < children.length; i++) { | |
| 60 var child = children[i]; | |
| 61 var innerButton = child.children[0]; | |
| 62 assert_equals(internals.shadowPseudoId(child), "-internal-media-controls-o verflow-menu-list-item"); | |
| 63 assert_equals(internals.shadowPseudoId(innerButton), overflowButtonsCSS[i] ); | |
| 64 // Items should be visible | |
| 65 assert_true(getComputedStyle(child).display != "none"); | |
| 66 // Buttons shouldn't be visible | |
| 67 assert_true(getComputedStyle(innerButton).display == "none"); | |
| 68 } | |
| 69 }, "Overflow menu children appear in correct order."); | |
| 70 } | |
| 71 | |
| 72 function checkVisibilityOfOverflowMenu(video) { | |
| 73 test(function() { | |
| 74 var overflowList = getOverflowList(video); | |
| 75 var overflowMenu = getOverflowMenuButton(video); | |
| 76 // Overflow menu button should be visible | |
| 77 assert_true(getComputedStyle(overflowMenu).display != "none"); | |
| 78 | |
| 79 // Overflow list shouldn't be visible until it's clicked on | |
| 80 assert_false(getComputedStyle(overflowList).display != "none"); | |
| 81 | |
| 82 // Clicking on the overflow menu button should make the overflow list visibl e | |
| 83 var coords = elementCoordinates(overflowMenu); | |
| 84 clickAtCoordinates(coords[0], coords[1]); | |
| 85 assert_true(getComputedStyle(overflowList).display != "none"); | |
| 86 | |
| 87 // Click on the overflow menu button, again. Should close overflow list. | |
| 88 var coords = elementCoordinates(overflowMenu); | |
| 89 clickAtCoordinates(coords[0], coords[1]); | |
| 90 assert_false(getComputedStyle(overflowList).display != "none"); | |
| 91 | |
| 92 }, "Overflow menu button should be visible."); | |
| 93 } | |
| 94 | |
| 95 function clickOnMuteButton(video) { | |
| 96 test(function() { | |
| 97 var overflowList = getOverflowList(video); | |
| 98 var overflowMenu = getOverflowMenuButton(video); | |
| 99 | |
| 100 assert_false(video.muted); | |
| 101 | |
| 102 // Click on the overflow menu button | |
| 103 var coords = elementCoordinates(overflowMenu); | |
| 104 clickAtCoordinates(coords[0], coords[1]); | |
| 105 | |
| 106 // Click on mute button | |
| 107 var coords = elementCoordinates(overflowList.children[0]); | |
| 108 clickAtCoordinates(coords[0], coords[1]); | |
| 109 | |
| 110 assert_true(video.muted); | |
| 111 | |
| 112 // Close overflow menu | |
| 113 var coords = elementCoordinates(overflowMenu); | |
| 114 clickAtCoordinates(coords[0], coords[1]); | |
| 115 }, "Clicking on the mute button responds as expected."); | |
| 116 } | |
| 117 | |
| 118 function clickOnClosedCaptionsButton(video, track) { | |
| 119 test(function() { | |
| 120 var overflowList = getOverflowList(video); | |
| 121 var overflowMenu = getOverflowMenuButton(video); | |
| 122 | |
| 123 // List that displays text tracks | |
| 124 var captionsList = mediaControlsElement(internals.shadowRoot(video).firstChil d, "-internal-media-controls-text-track-list"); | |
| 125 | |
| 126 assert_false(getComputedStyle(captionsList).display != "none"); | |
| 127 // Click on the overflow menu button | |
| 128 var coords = elementCoordinates(overflowMenu); | |
| 129 clickAtCoordinates(coords[0], coords[1]); | |
| 130 | |
| 131 // Click on the closed captions button | |
| 132 var coords = elementCoordinates(overflowList.children[2]); | |
| 133 clickAtCoordinates(coords[0], coords[1]); | |
| 134 | |
| 135 assert_true(getComputedStyle(captionsList).display != "none"); | |
| 136 }, "Clicking on the closed captions button responds as expected."); | |
| 137 } | |
| 138 | |
| 139 function removeCastDevice(video) { | |
| 140 test(function() { | |
| 141 var overflowList = getOverflowList(video); | |
| 142 | |
| 143 // Cast option in overflow should no longer be visible, but the other | |
| 144 // options should all be. | |
| 145 var buttonsWithoutCast = overflowButtonsCSS; | |
| 146 buttonsWithoutCast[1] = undefined; | |
| 147 internals.mediaPlayerRemoteRouteAvailabilityChanged(video, false); | |
| 148 | |
| 149 var children = overflowList.children; | |
| 150 // Ensure that all of the buttons are visible in the right order | |
| 151 for (var i = 0; i < children.length; i++) { | |
| 152 var child = children[i]; | |
| 153 if (buttonsWithoutCast[i]) { | |
| 154 assert_true(getComputedStyle(child).display != "none"); | |
| 155 } else { | |
| 156 assert_false(getComputedStyle(child).display != "none"); | |
| 157 } | |
| 158 } | |
| 159 internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true); | |
| 160 assert_true(getComputedStyle(children[1]).display != "none"); | |
| 161 }, "Removing cast device updates overflow menu as expected."); | |
| 162 } | |
| 163 </script> | |
| 164 </body> | |
| OLD | NEW |
