vh-calc-support

Viewport units are supported inside calc expressions.

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
Check that viewport units add correctly to pixels in calc() expressions

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3 	<meta charset="utf-8">
 4 	<title>
 5 		CSS Values and Units Test:
 6 		Viewport units are supported inside calc expressions.
 7 	</title>
 8 	<meta content="
 9 		Check that viewport units add correctly to pixels in calc() expressions
10 	" name="assert">
11 
12 
13 	<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
14 
15 	<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
16 	<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
17 
18 	<link href="reference/all-green.htm" rel="match">
19 
20 	<style type="text/css">
21 
22 			html, body { margin: 0px; padding: 0px; }
23 
24 			html { background: red; }
25 			#target { position: absolute; background: green; width: calc(100vw + 50px); height: calc(100vh + 50px); top: -50px; left: -50px; }
26 
27 	</style>
28 
29 </head>
30 <body>
31 
32 	<div id="target"></div>
33 
34 
35 
36 </body></html>