| <!DOCTYPE html> |
| <html> |
| <!-- Submitted from TestTWF Paris --> |
| <head> |
| <title>CSS Reference File</title> |
| <link rel="author" title="Marc Bourlon" href="mailto:[email protected]"> |
| <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> |
