diff options
| -rw-r--r-- | test/integration/data/gh-1764-fullscreen-iframe.css | 18 | ||||
| -rw-r--r-- | test/integration/data/gh-1764-fullscreen-iframe.html | 21 | ||||
| -rw-r--r-- | test/integration/data/gh-1764-fullscreen.js | 99 | ||||
| -rw-r--r-- | test/integration/gh-1764-fullscreen.html | 34 |
4 files changed, 172 insertions, 0 deletions
diff --git a/test/integration/data/gh-1764-fullscreen-iframe.css b/test/integration/data/gh-1764-fullscreen-iframe.css new file mode 100644 index 000000000..ba4b4fa7d --- /dev/null +++ b/test/integration/data/gh-1764-fullscreen-iframe.css @@ -0,0 +1,18 @@ +.result { + font-size: 24px; + margin: 0.5em 0; + width: 700px; + height: 56px; +} + +.error { + background-color: red; +} + +.warn { + background-color: yellow; +} + +.success { + background-color: lightgreen; +} diff --git a/test/integration/data/gh-1764-fullscreen-iframe.html b/test/integration/data/gh-1764-fullscreen-iframe.html new file mode 100644 index 000000000..bed56b8ec --- /dev/null +++ b/test/integration/data/gh-1764-fullscreen-iframe.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Test for gh-1764 - test iframe</title> + <link rel="stylesheet" href="gh-1764-fullscreen-iframe.css"> +</head> + +<body class="iframe-page"> +<div class="container"> + <div class="result"></div> + <button class="toggle-fullscreen">Toggle fullscreen mode - iframe</button> +</div> +<script src="../../../dist/jquery.js"></script> +<script src="gh-1764-fullscreen.js"></script> +<script> + bootstrapFrom( ".iframe-page", "iframe" ); +</script> +</body> +</html> diff --git a/test/integration/data/gh-1764-fullscreen.js b/test/integration/data/gh-1764-fullscreen.js new file mode 100644 index 000000000..e093c0dc7 --- /dev/null +++ b/test/integration/data/gh-1764-fullscreen.js @@ -0,0 +1,99 @@ +/* exported bootstrapFrom */ + +// `mode` may be "iframe" or not specified. +function bootstrapFrom( mainSelector, mode ) { + if ( mode === "iframe" && window.parent === window ) { + jQuery( mainSelector + " .result" ) + .attr( "class", "result warn" ) + .text( "This test should be run in an iframe. Open ../gh-1764-fullscreen.html." ); + jQuery( mainSelector + " .toggle-fullscreen" ).remove(); + return; + } + + var fullscreenSupported = document.exitFullscreen || + document.exitFullscreen || + document.msExitFullscreen || + document.mozCancelFullScreen || + document.webkitExitFullscreen; + + function isFullscreen() { + return !!(document.fullscreenElement || + document.mozFullScreenElement || + document.webkitFullscreenElement || + document.msFullscreenElement); + } + + function requestFullscreen( element ) { + if ( !isFullscreen() ) { + if ( element.requestFullscreen ) { + element.requestFullscreen(); + } else if ( element.msRequestFullscreen ) { + element.msRequestFullscreen(); + } else if ( element.mozRequestFullScreen ) { + element.mozRequestFullScreen(); + } else if ( element.webkitRequestFullscreen ) { + element.webkitRequestFullscreen(); + } + } + } + + function exitFullscreen() { + if ( document.exitFullscreen ) { + document.exitFullscreen(); + } else if ( document.msExitFullscreen ) { + document.msExitFullscreen(); + } else if ( document.mozCancelFullScreen ) { + document.mozCancelFullScreen(); + } else if ( document.webkitExitFullscreen ) { + document.webkitExitFullscreen(); + } + } + + function runTest() { + var dimensions; + if ( !fullscreenSupported ) { + jQuery( mainSelector + " .result" ) + .attr( "class", "result success" ) + .text( "Fullscreen mode is not supported in this browser. Test not run." ); + } else if ( !isFullscreen() ) { + jQuery( mainSelector + " .result" ) + .attr( "class", "result warn" ) + .text( "Enable fullscreen mode to fire the test." ); + } else { + dimensions = jQuery( mainSelector + " .result" ).css( [ "width", "height" ] ); + dimensions.width = parseFloat( dimensions.width ).toFixed( 3 ); + dimensions.height = parseFloat( dimensions.height ).toFixed( 3 ); + if ( dimensions.width === "700.000" && dimensions.height === "56.000" ) { + jQuery( mainSelector + " .result" ) + .attr( "class", "result success" ) + .text( "Dimensions in fullscreen mode are computed correctly." ); + } else { + jQuery( mainSelector + " .result" ) + .attr( "class", "result error" ) + .html( "Incorrect dimensions; " + + "expected: { width: '700.000', height: '56.000' };<br>" + + "got: { width: '" + dimensions.width + "', height: '" + + dimensions.height + "' }." ); + } + } + } + + function toggleFullscreen() { + if ( isFullscreen() ) { + exitFullscreen(); + } else { + requestFullscreen( jQuery( mainSelector + " .container" )[0] ); + } + } + + $( mainSelector + " .toggle-fullscreen" ).on( "click", toggleFullscreen ); + + $( document ).on( [ + "webkitfullscreenchange", + "mozfullscreenchange", + "fullscreenchange", + "MSFullscreenChange", + ].join( " " ), runTest ); + + runTest(); +} diff --git a/test/integration/gh-1764-fullscreen.html b/test/integration/gh-1764-fullscreen.html new file mode 100644 index 000000000..1cba65943 --- /dev/null +++ b/test/integration/gh-1764-fullscreen.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Test for gh-1764</title> + <link rel="stylesheet" href="./data/gh-1764-fullscreen-iframe.css"> + <style> + #test-iframe { + position: absolute; + top: 100px; + left: 0; + border: 0; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + } + </style> +</head> + +<body class="main-page"> +<div class="container"> + <div class="result"></div> + <button class="toggle-fullscreen">Toggle fullscreen mode - main page</button> +</div> +<script src="../../dist/jquery.js"></script> +<iframe id="test-iframe" allowfullscreen src="data/gh-1764-fullscreen-iframe.html"></iframe> +<script src="./data/gh-1764-fullscreen.js"></script> +<script> + bootstrapFrom( ".main-page" ); +</script> +</body> +</html> |