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

<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
<head>
	<title>CSS Reference File</title>
	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		p {
			clear: both;
			margin: 10px 0;
		}
		#testBoxWithVhOnly {
			background: #F00;
			width: 60px;
			float: left;
		}
		#testBoxNotGrownHorizontallyByJS {
			background: #F0F;
			height: 60px;
			float: left;
		}
		#testBoxWithTransition {
			background: #FF0;
			width: 40px;
			height: 40px;
			float: left;
		}
		#referenceBoxGrownHorizontallyByJS {
			background: #0F0;
			height: 40px;
			float: left;
		}
	</style>
</head>
<body>

<p>
	All boxes should end up the same size. The green box is the reference one.
</p>

<div id="testBoxWithVhOnly"></div>
<div id="testBoxNotGrownHorizontallyByJS"></div>
<div id="testBoxWithTransition"></div>
<div id="referenceBoxGrownHorizontallyByJS"></div>

<script type="text/javascript">
	'use strict';
	function animate() {
		var viewportHeight = document.documentElement.clientHeight;
		var referenceDimension = Math.round(20 * viewportHeight / 100);

		let setDimension = (id, dimension, value) => {
			document.getElementById(id).style[dimension] = value + "px";
		}
		setDimension('testBoxWithVhOnly', 'height', referenceDimension);
		setDimension('testBoxNotGrownHorizontallyByJS', 'width', referenceDimension);
		setDimension('testBoxWithTransition', 'width', referenceDimension);
		setDimension('testBoxWithTransition', 'height', referenceDimension);
		setDimension('referenceBoxGrownHorizontallyByJS', 'width', referenceDimension);
		setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);

		if (referenceDimension < 60) {
			setTimeout(animate, 20);
		} else {
			parent.postMessage('testEnded', '*');
		}
	}
	setTimeout(animate, 20);
	parent.postMessage('frameLoaded', '*');
</script>

</body>
</html>