Blitz - WPT: vh-update-and-transition-in-subframe.html

wpt / css / css-values / vh-update-and-transition-in-subframe.html

/css/css-values/vh-update-and-transition-in-subframe.html

<!DOCTYPE html>
<!-- Submitted from TestTWF Paris -->
<!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
<html class="reftest-wait">
<head>
	<title>CSS Values and Units Test: Ensure vh-based dimensions update and transition when used in subframe that change size.</title>
	<meta name="timeout" content="long">
	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
	<link rel="match" href="reference/vh-update-and-transition-in-subframe-ref.html">
	<meta charset="UTF-8">
	<meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change.">
	<script src="/common/reftest-wait.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#frameTest {
			width: 600px;
			height: 200px;
			border: 1px solid black;
		}
	</style>
	<script type="text/javascript">
		'use strict';

		// We must capture 2 messages to end the test:
		//  - frameLoaded: The iframe has loaded and is ready for resizing.
		//  - transitionInIFrameEnded: The transition in the child iframe has ended.
		let finishedResizingFrame = false;
		window.addEventListener('message', (message) => {
			// If the <iframe> has finished loading start the test.
			if (message.data == "frameLoaded") {
				setTimeout(resizeReference, 10);
			}
			if (finishedResizingFrame && message.data == "transitionInIFrameEnded") {
				takeScreenshot();
			}
		}, false);

		let height = 200;
		function resizeReference() {
			// Resize the <iframe> vertically which should trigger a relayout
			// in the child, growing any element that depends on `vh` units.
			height += 10;
			document.getElementById('frameTest').style.height = height + "px";

			if (height >= 300) {
				// If we are done resizing the frame, then signal that the test can
				// start looking for completion.
				finishedResizingFrame = true;
			} else {
				// Otherwise, keep growing the frame.
				setTimeout(resizeReference, 10);
			}
		}
	</script>

</head>
<body>
	<iframe id="frameTest" src="vh-update-and-transition-in-subframe-iframe.html" frameborder="0"></iframe>
</body>
</html>

/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html

<!DOCTYPE html>
<!-- Submitted from TestTWF Paris -->
<html class="reftest-wait">
<head>
	<title>CSS Reference File</title>
	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
	<script src="/common/reftest-wait.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#frameTest {
			width: 600px;
			height: 200px;
			border: 1px solid #000;
		}
	</style>
	<script type="text/javascript">
		'use strict';

		// We must capture 2 messages to end the test:
		//  - frameLoaded: The iframe has loaded and is ready for resizing.
		//  - testEnded: The iframe has finished the final resize and the reference is
		//  			 ready for screenshot.
		let finishedResizingFrame = false;
		window.addEventListener('message', (message) => {
			// If the <iframe> has finished loading start the test.
			if (message.data == "frameLoaded") {
				setTimeout(resizeReference, 10);
			}
			if (finishedResizingFrame && message.data == "testEnded") {
				takeScreenshot();
			}
		}, false);

		let height = 200;
		function resizeReference() {
			// Resize the <iframe> vertically which should trigger a relayout
			// in the child, growing any element that depends on `vh` units.
			height += 10;
			document.getElementById('frameTest').style.height = height + "px";

			if (height >= 300) {
				// If we are done resizing the frame, then signal that the test can
				// start looking for completion.
				finishedResizingFrame = true;
			} else {
				// Otherwise, keep growing the frame.
				setTimeout(resizeReference, 10);
			}
		}
	</script>

</head>
<body>
	<iframe id="frameTest" src="vh-update-and-transition-in-subframe-iframe-ref.html" frameborder="0"></iframe>
</body>
</html>