vh-update-and-transition-in-subframe-iframe-ref.html (1928B)
1 <!DOCTYPE html> 2 <html> 3 <!-- Submitted from TestTWF Paris --> 4 <head> 5 <title>CSS Reference File</title> 6 <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com"> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 p { 13 clear: both; 14 margin: 10px 0; 15 } 16 #testBoxWithVhOnly { 17 background: #F00; 18 width: 60px; 19 float: left; 20 } 21 #testBoxNotGrownHorizontallyByJS { 22 background: #F0F; 23 height: 60px; 24 float: left; 25 } 26 #testBoxWithTransition { 27 background: #FF0; 28 width: 40px; 29 height: 40px; 30 float: left; 31 } 32 #referenceBoxGrownHorizontallyByJS { 33 background: #0F0; 34 height: 40px; 35 float: left; 36 } 37 </style> 38 </head> 39 <body> 40 41 <p> 42 All boxes should end up the same size. The green box is the reference one. 43 </p> 44 45 <div id="testBoxWithVhOnly"></div> 46 <div id="testBoxNotGrownHorizontallyByJS"></div> 47 <div id="testBoxWithTransition"></div> 48 <div id="referenceBoxGrownHorizontallyByJS"></div> 49 50 <script type="text/javascript"> 51 'use strict'; 52 function animate() { 53 var viewportHeight = document.documentElement.clientHeight; 54 var referenceDimension = Math.round(20 * viewportHeight / 100); 55 56 let setDimension = (id, dimension, value) => { 57 document.getElementById(id).style[dimension] = value + "px"; 58 } 59 setDimension('testBoxWithVhOnly', 'height', referenceDimension); 60 setDimension('testBoxNotGrownHorizontallyByJS', 'width', referenceDimension); 61 setDimension('testBoxWithTransition', 'width', referenceDimension); 62 setDimension('testBoxWithTransition', 'height', referenceDimension); 63 setDimension('referenceBoxGrownHorizontallyByJS', 'width', referenceDimension); 64 setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension); 65 66 if (referenceDimension < 60) { 67 setTimeout(animate, 20); 68 } else { 69 parent.postMessage('testEnded', '*'); 70 } 71 } 72 setTimeout(animate, 20); 73 parent.postMessage('frameLoaded', '*'); 74 </script> 75 76 </body> 77 </html>