| <!DOCTYPE html> |
| <html> |
| <style> |
| .explicit-width-height { |
| height: 400px; |
| width: 400px; |
| } |
| |
| .max-width-height { |
| max-height: 400px; |
| max-width: 400px; |
| } |
| |
| |
| .min-width-height { |
| min-height: 400px; |
| min-width: 400px; |
| } |
| </style> |
| </head> |
| <script src="full-screen-test.js"></script> |
| <script> |
| window.addEventListener('load', async event => { |
| target = document.getElementById('target'); |
| |
| consoleWrite('Testing with explicit width and height'); |
| target.className = 'explicit-width-height'; |
| runWithKeyDown(() => { target.webkitRequestFullscreen(); }) |
| await waitFor(document, 'webkitfullscreenchange'); |
| |
| testExpected('target.clientWidth === document.documentElement.clientWidth', true); |
| testExpected('target.clientHeight === document.documentElement.clientHeight', true); |
| |
| runWithKeyDown(() => { document.webkitExitFullscreen(); }); |
| await waitFor(document, 'webkitfullscreenchange'); |
| |
| consoleWrite('Testing with max-width and max-height'); |
| target.className = 'max-width-height'; |
| runWithKeyDown(() => { target.webkitRequestFullscreen(); }) |
| await waitFor(document, 'webkitfullscreenchange'); |
| |
| testExpected('target.clientWidth === document.documentElement.clientWidth', true); |
| testExpected('target.clientHeight === document.documentElement.clientHeight', true); |
| |
| runWithKeyDown(() => { document.webkitExitFullscreen(); }); |
| await waitFor(document, 'webkitfullscreenchange'); |
| |
| consoleWrite('Testing with min-width and min-height'); |
| target.className = 'min-width-height'; |
| runWithKeyDown(() => { target.webkitRequestFullscreen(); }) |
| await waitFor(document, 'webkitfullscreenchange'); |
| |
| testExpected('target.clientWidth === document.documentElement.clientWidth', true); |
| testExpected('target.clientHeight === document.documentElement.clientHeight', true); |
| |
| runWithKeyDown(() => { document.webkitExitFullscreen(); }); |
| await waitFor(document, 'webkitfullscreenchange'); |
| |
| endTest(); |
| }); |
| </script> |
| <body> |
| <div id="target"></div> |
| </body> |
| </html> |
