video-persistence-expected.html | Explore in Territory

<!DOCTYPE html>
<html>
<style>
:-webkit-full-screen #controls {
  display: none;
}
:-webkit-full-screen #container {
  width: 100%;
  background-color: red;
  padding-top: 100px;
  padding-bottom: 100px;
}

:-webkit-full-screen #container > video {
  position: fixed !important;
  left: 0 !important;
  top: 0 ! important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;

  background-color: black !important;
  z-index: 2147483647 !important;
}

</style>
<div id='player'>
  <div id='container'>
    <video></video>
  </div>
</div>
<div id='fs'>fullscreen</div>
<script>
  function waitForVideoPresentation(video) {
    return new Promise(resolve => {
      video.requestVideoFrameCallback(resolve);
    });
  }
  var video = document.querySelector('video');
  video.src = 'content/test.ogv';
  let videoPresentation = waitForVideoPresentation(video);

  document.querySelector('#fs').addEventListener('click', e => {
    document.querySelector('#player').webkitRequestFullscreen();
  });

  if (window.testRunner && window.eventSender && window.internals) {
    testRunner.waitUntilDone();

    video.addEventListener('loadedmetadata', e => {
      var bounding = document.querySelector('#fs').getBoundingClientRect();
      eventSender.mouseMoveTo(bounding.left + bounding.width / 2,
                              bounding.top + bounding.height / 2);
      eventSender.mouseDown();
      eventSender.mouseUp();
    });

    document.addEventListener('webkitfullscreenchange', e => {
      videoPresentation.then(() => {
        testRunner.notifyDone();
      });
    });
  }
</script>
</html>
chromium/third_party/blink/web_tests/media/video-persistence-expected.html
