<!DOCTYPE html>
<title>media controls picture in picture button</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-file.js"></script>
<script src="../media-controls.js"></script>
<script src="utils.js"></script>
<body>
<video controls></video>
<script>
async_test(t => {
  enablePictureInPictureForTest(t);

  var video = document.querySelector("video");
  video.src = "../content/test.ogv";

  video.onloadedmetadata = t.step_func(function() {
    assert_true(isPictureInPictureButtonEnabled(video), "button should exist");

    checkPictureInPictureInterstitialDoesNotExist(video);

    video.addEventListener('enterpictureinpicture', t.step_func(() => {
      assert_true(isPictureInPictureInterstitialVisible(video),
          "Interstitial should be visible when video enters Picture-in-Picture");
      clickPictureInPictureButton(video);
    }));

    video.addEventListener('leavepictureinpicture', t.step_func(() => {
      setTimeout(t.step_func_done(() => {
        assert_false(isPictureInPictureInterstitialVisible(video),
            "Interstitial should not be visible when video leaves Picture-in-Picture");
      }), 300 /* transition */);
    }));

    clickPictureInPictureButton(video);
  });
});
</script>
</body>