vh-interpolate-px.html (1010B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 6 CSS Values and Units Test: 7 Viewport units are interpolated correctly 8 </title> 9 <meta name="assert" content=" 10 The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw) 11 " /> 12 13 <link 14 rel="author" 15 title="François REMY" 16 href="mailto:fremycompany.developer@yahoo.fr" 17 / > 18 19 <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/> 20 <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/> 21 22 <link 23 rel="match" 24 href="reference/all-green.html" 25 /> 26 27 <style type="text/css"> 28 29 @keyframes anim { 30 from { width: 0px; height: 0px; } 31 to { width: 200vw; height: 200vh; } 32 } 33 34 html, body { margin: 0px; padding: 0px; } 35 36 html { background: red; overflow: hidden; } 37 #outer { position: relative; background: green; } 38 #outer { animation: anim 2000000s; animation-delay: -1000000s; } 39 40 </style> 41 42 </head> 43 <body> 44 45 <div id="outer"></div> 46 47 </body> 48 </html>