1 <!DOCTYPE html>
2 <html><!-- Submitted from TestTWF Paris --><head>
3
4 <title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title>
5 <meta content="vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8" name="assert">
6 <link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon">
7 <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
8 <link href="reference/vh_not_refreshing_on_chrome-ref.htm" rel="match">
9
10 <style type="text/css">
11
12 * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
13
14 /* the first test box has its vertical dimension is set to some vh units */
15 #testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; }
16
17 /* the second test box, with fixed height */
18 #testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; }
19
20 /* third box, changed by using CSS transition */
21 #testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left;
22 transition-property: width, height;
23 transition-duration: 1.5s;
24 transition-delay: 0;
25 }
26
27 /* the reference box, growing in both directions (height by js, width by vh unit */
28 #referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; }
29
30 p { clear: both; margin: 10px 0; }
31
32 </style>
33
34 </head>
35 <body>
36
37 <p>
38 All boxes should end up the same size. The green box is the reference one.
39 </p>
40
41 <div id="testBoxWithVhOnly"></div>
42 <div id="testBoxNotGrownHorizontallyByJS"></div>
43 <div id="testBoxWithTransition"></div>
44 <div id="referenceBoxGrownHorizontallyByJS"></div>
45
46 <script type="text/javascript">
47
48 // In case this file was opened by mistake, redirects to proper test
49 if (window.top.location.href === document.location.href) {
50
51 window.top.location.href = "vh_not_refreshing_on_chrome.html";
52
53 }
54
55 function setDimension(id, dimension, value) {
56
57 var element = document.getElementById(id);
58
59 element.style[dimension] = value + "px";
60
61 }
62
63 function animate() {
64
65 var viewportHeight = document.documentElement.clientHeight;
66
67 var sizeH = 20;
68
69 var referenceDimension = Math.round(sizeH * viewportHeight / 100);
70
71 setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);
72
73 setTimeout(animate, 20);
74 }
75
76 setTimeout(animate, 20);
77
78 var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
79 transitionedTestBoxStyle.height = "60px";
80 </script>
81
82
83
84 </body></html>