| <!DOCTYPE html> |
| <style> |
| body { |
| margin: 0px; |
| } |
| .percent100 { |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| <script src="full-screen-test.js"></script> |
| <script src=../media/media-file.js></script> |
| |
| <div style="display: flex; flex-direction: column;"> |
| <div style="position: absolute; background: green;"> |
| <video id="video" class="percent100" controls></video> |
| </div> |
| </div> |
| |
| <script> |
| setSrcById("video", findMediaFile("video", "../media/content/test")); |
| var video = document.getElementById('video'); |
| // Bail out early if the full screen API is not enabled or is missing: |
| if (Element.prototype.webkitRequestFullScreen == undefined) { |
| logResult(false, "Element.prototype.webkitRequestFullScreen == undefined"); |
| endTest(); |
| } else { |
| var oldVideoWidth = video.clientWidth; |
| var oldVideoHeight = video.clientHeight; |
| waitForEventOnce(document, 'webkitfullscreenchange', function() { |
| // First check that the video went fullscreen. |
| test("video.clientWidth == document.body.clientWidth"); |
| waitForEventOnce(document, 'webkitfullscreenchange', function() { |
| // Then check that the original video size is properly restored. |
| test("video.clientWidth == oldVideoWidth"); |
| test("video.clientHeight == oldVideoHeight"); |
| endTest(); |
| }); |
| document.webkitCancelFullScreen(); |
| }); |
| |
| runWithKeyDown(function() { |
| video.webkitRequestFullScreen(); |
| }); |
| } |
| </script> |
| |
