| <!DOCTYPE html> |
| <script src="full-screen-test.js"></script> |
| <style> |
| .content-ancestor { |
| background-color: red; |
| height: 500px; |
| width: 500px; |
| } |
| .content { |
| contain: content; |
| } |
| |
| #fullscreener { |
| background-color: green; |
| } |
| </style> |
| <div class=content-ancestor> |
| <div class=content> |
| <div id=fullscreener>This is the fullscreen element (click to activate)</div> |
| </div> |
| <script> |
| if (window.testRunner) { |
| waitForEventTestAndEnd(document, 'webkitfullscreenchange', "fullscreener.offsetWidth == window.innerWidth && fullscreener.offsetHeight == window.innerHeight"); |
| runWithKeyDown(function() { |
| fullscreener.webkitRequestFullScreen(); |
| }); |
| } else { |
| fullscreener.addEventListener('click', function () { |
| fullscreener.webkitRequestFullscreen(); |
| }, false); |
| } |
| </script> |
