blob: 03b209bbe60e6d2e7a6ff9bf75cdf41704de16c3 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="full-screen-test.js"></script>
<script>
window.addEventListener('load', event => {
window.target = document.querySelector('#target');
run('internals.setFullscreenInsets({top:1, left:2, bottom:3, right:4})');
testExpected('window.getComputedStyle(target).top', '1px');
testExpected('window.getComputedStyle(target).left', '2px');
testExpected('window.getComputedStyle(target).bottom', '3px');
testExpected('window.getComputedStyle(target).right', '4px');
run('internals.setFullscreenInsets({top:20, left:30, bottom:40, right:50})');
testExpected('window.getComputedStyle(target).top', '20px');
testExpected('window.getComputedStyle(target).left', '30px');
testExpected('window.getComputedStyle(target).bottom', '40px');
testExpected('window.getComputedStyle(target).right', '50px');
run('internals.setFullscreenInsets({top:0, left:0, bottom:0, right:0})');
testExpected('window.getComputedStyle(target).top', '0px');
testExpected('window.getComputedStyle(target).left', '0px');
testExpected('window.getComputedStyle(target).bottom', '0px');
testExpected('window.getComputedStyle(target).right', '0px');
run('internals.setFullscreenAutoHideDuration(2)');
testExpected('window.getComputedStyle(target).transitionDuration', '2s');
run('internals.setFullscreenAutoHideDuration(30)');
testExpected('window.getComputedStyle(target).transitionDuration', '30s');
run('internals.setFullscreenAutoHideDuration(0)');
testExpected('window.getComputedStyle(target).transitionDuration', '0s');
runWithKeyDown(() => {target.webkitRequestFullscreen() });
waitForEventOnce(document, 'webkitfullscreenchange', event => {
run('internals.setFullscreenControlsHidden(true)');
testExpected('document.querySelector("#target:-webkit-full-screen-controls-hidden")', target);
run('internals.setFullscreenControlsHidden(false)');
testExpected('document.querySelector("#target:-webkit-full-screen-controls-hidden")', null);
endTest();
});
});
</script>
<style>
#target {
position: absolute;
top: env(fullscreen-inset-top);
left: env(fullscreen-inset-left);
bottom: env(fullscreen-inset-bottom);
right: env(fullscreen-inset-right);
transition-duration: env(fullscreen-auto-hide-duration);
}
</style>
</head>
<body>
<div id="target">&nbsp;</div>
</body>
</html>