| <!DOCTYPE html> |
| <title>media controls overlay play button document move</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script src="../media-controls.js"></script> |
| <script src="overlay-play-button.js"></script> |
| <body> |
| <script> |
| async_test(function(t) { |
| // Make sure the overlay play button is turned on, as it's typically off |
| // unless we're dealing with Android. |
| enableOverlayPlayButtonForTest(t); |
| |
| var video = createAndMoveVideo(); |
| |
| video.onloadedmetadata = t.step_func(function() { |
| // Large-enough video should have an overlay play button. |
| assertOverlayPlayButtonVisible(video); |
| |
| // If the width goes under the minimum, the button should be hidden. |
| video.width = NARROW_VIDEO_WIDTH; |
| runAfterLayoutAndPaint(t.step_func(function() { |
| assertOverlayPlayButtonNotVisible(video); |
| |
| // Re-widening the video should display the button. |
| video.width = NORMAL_VIDEO_WIDTH; |
| runAfterLayoutAndPaint(t.step_func(function() { |
| assertOverlayPlayButtonVisible(video); |
| |
| // If the height goes under the minimum, the button should be hidden. |
| video.height = NARROW_VIDEO_HEIGHT; |
| runAfterLayoutAndPaint(t.step_func(function() { |
| assertOverlayPlayButtonNotVisible(video); |
| |
| // Re-heightening the video should display the button. |
| video.height = NORMAL_VIDEO_HEIGHT; |
| runAfterLayoutAndPaint(t.step_func_done(function() { |
| assertOverlayPlayButtonVisible(video); |
| })); |
| })); |
| })); |
| })); |
| }); |
| |
| function createAndMoveVideo() { |
| var doc = document.implementation.createHTMLDocument(); |
| var v = doc.createElement('video'); |
| v.src = '../content/test.ogv'; |
| v.width = NORMAL_VIDEO_WIDTH; |
| v.height = NORMAL_VIDEO_HEIGHT; |
| v.controls = true; |
| doc.body.appendChild(v); |
| doc.body.removeChild(v); |
| document.body.appendChild(v); |
| return v; |
| } |
| }); |
| </script> |
| </body> |
