| <!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> |