| <!DOCTYPE html> |
| <html> |
| <style> |
| :-webkit-full-screen #controls { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| background-color: red; |
| } |
| :-webkit-full-screen #container { |
| width: 100%; |
| background-color: red; |
| padding-top: 100px; |
| padding-bottom: 100px; |
| } |
| |
| :-webkit-full-screen #container > video { |
| width: 100%; |
| } |
| |
| </style> |
| <div id='player'> |
| <div id='container'> |
| <video preload="auto"></video> |
| </div> |
| <div id='controls'> |
| <button>foo</button><button>bar</button> |
| </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('canplaythrough', 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 => { |
| internals.setPersistent(video, true); |
| videoPresentation.then(() => { |
| testRunner.notifyDone(); |
| }); |
| }); |
| } |
| </script> |
| </html> |
