| <!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> |
| var video = document.querySelector('video'); |
| video.src = 'content/test.ogv'; |
| |
| 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 => { |
| testRunner.layoutAndPaintAsyncThen(() => { |
| testRunner.notifyDone(); |
| }); |
| }); |
| } |
| </script> |
| </html> |
