CSS: Add an integration test for issue gh-1764

(cherry-picked from 8887106702baa69ed80baa65c5a249786bffc77e)

Refs gh-1764
Refs gh-2401
Closes gh-2425

test/integration/data/gh-1764-fullscreen-iframe.css

+.result {
+	font-size: 24px;
+	margin: 0.5em 0;
+	width: 700px;
+	height: 56px;
+}
+
+.error {
+	background-color: red;
+}
+
+.warn {
+	background-color: yellow;
+}
+
+.success {
+	background-color: lightgreen;
+}

test/integration/data/gh-1764-fullscreen-iframe.html

+<!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>

test/integration/data/gh-1764-fullscreen.js

+/* 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();
+}

test/integration/gh-1764-fullscreen.html

+<!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>