| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>media controls overlay play button narrow</title> |
| 3 <script src="../../../../resources/testharness.js"></script> |
| 4 <script src="../../../../resources/testharnessreport.js"></script> |
| 5 <script src="../../../../media/media-file.js"></script> |
| 6 <script src="../../../../media/media-controls.js"></script> |
| 7 <script> |
| 8 async_test(function(t) { |
| 9 // Defined in core/html/shadow/MediaControls.cpp. |
| 10 var MIN_VIDEO_WIDTH = 48; |
| 11 var MIN_VIDEO_HEIGHT = 164; |
| 12 |
| 13 // Make sure the overlay play button is turned on, as it's typically off |
| 14 // unless we're dealing with Android. |
| 15 internals.settings.setMediaControlsOverlayPlayButtonEnabled(true); |
| 16 document.write('<video width="200" height="200" controls></video>'); |
| 17 var video = document.querySelector("video"); |
| 18 video.src = findMediaFile("video", "../../../../media/content/test"); |
| 19 |
| 20 video.onloadedmetadata = t.step_func(function() { |
| 21 // Large-enough video should have an overlay play button. |
| 22 assertOverlayPlayButtonVisible(); |
| 23 |
| 24 // If the width goes under the minimum, the button should be hidden. |
| 25 video.width = MIN_VIDEO_WIDTH - 10; |
| 26 testRunner.layoutAndPaintAsyncThen(t.step_func(function() { |
| 27 assertOverlayPlayButtonNotVisible(); |
| 28 |
| 29 // Re-widening the video should display the button. |
| 30 video.width = MIN_VIDEO_WIDTH; |
| 31 testRunner.layoutAndPaintAsyncThen(t.step_func(function() { |
| 32 assertOverlayPlayButtonVisible(); |
| 33 |
| 34 // If the height goes under the minimum, the button should be hidden. |
| 35 video.height = MIN_VIDEO_HEIGHT - 10; |
| 36 testRunner.layoutAndPaintAsyncThen(t.step_func(function() { |
| 37 assertOverlayPlayButtonNotVisible(); |
| 38 |
| 39 // Re-heightening the video should display the button. |
| 40 video.height = MIN_VIDEO_HEIGHT; |
| 41 testRunner.layoutAndPaintAsyncThen(t.step_func_done(function() { |
| 42 assertOverlayPlayButtonVisible(); |
| 43 })); |
| 44 })); |
| 45 })); |
| 46 })); |
| 47 }); |
| 48 |
| 49 function assertOverlayPlayButtonVisible() { |
| 50 assert_true(isVisible(overlayPlayButton(video)), |
| 51 "overlay play button should be visible"); |
| 52 } |
| 53 |
| 54 function assertOverlayPlayButtonNotVisible() { |
| 55 assert_false(isVisible(overlayPlayButton(video)), |
| 56 "overlay play button should not be visible"); |
| 57 } |
| 58 |
| 59 function overlayPlayButton(videoElement) { |
| 60 var controlID = '-webkit-media-controls-overlay-play-button'; |
| 61 var button = mediaControlsElement( |
| 62 window.internals.shadowRoot(videoElement).firstChild, |
| 63 controlID); |
| 64 if (!button) |
| 65 throw 'Failed to find overlay play button'; |
| 66 return button; |
| 67 } |
| 68 |
| 69 function isVisible(button) { |
| 70 var computedStyle = getComputedStyle(button); |
| 71 return computedStyle.display !== "none" && |
| 72 computedStyle.display !== "hidden" && |
| 73 computedStyle.visibility === "visible"; |
| 74 } |
| 75 }); |
| 76 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2701433003:
Hide overlay play button if it can't be shown without clipping (Closed)
