1 <!DOCTYPE html>
2 <!-- Submitted from TestTWF Paris --><html><head>
3 <title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</title>
4 <link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon">
5 <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
6 <link href="reference/vh_not_refreshing_on_chrome-ref.htm" rel="match">
7 <meta content="vh-based dimension doesn't change when the element's other dimension doesn't change." name="assert">
8 <!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
9
10 <style type="text/css">
11
12 * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
13
14 #frameTest { width: 600px; height: 200px; border: 1px solid #000; }
15
16 </style>
17
18 <script type="text/javascript">
19 var height = 200;
20
21 function resizeReference() {
22
23 var frameTest = document.getElementById('frameTest');
24
25 // let's resize the iframe vertically only, showing that the vh sizes is not updated.
26 if (height <= 300) {
27
28 //frameTest.style.width = height++ + "px";
29 frameTest.style.height = height++ + "px";
30
31 setTimeout(resizeReference, 10);
32
33 } else {
34
35 // uncomment the next line to see how a width resize triggers a layout recalculation
36 //frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
37
38 }
39
40 }
41
42 setTimeout(resizeReference, 10);
43 </script>
44
45 </head>
46 <body>
47
48 <iframe src="vh_not_refreshing_on_chrome_iframe.html" id="frameTest" frameborder="0"></iframe>
49
50
51
52 </body></html>