<!DOCTYPE html>
<title>media controls overlay play button narrow</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 = document.createElement('video');
  video.src = "../content/test.ogv";
  video.width = NORMAL_VIDEO_WIDTH;
  video.height = NORMAL_VIDEO_HEIGHT;
  video.controls = true;
  document.body.appendChild(video);

  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);
          }));
        }));
      }));
    }));
  });
});
</script>
</body>