mq-calc-005

evaluation of rem in calc in Media Queries

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
The size in pixels of the 'rem' unit used in calc inside a media query does not depend on declarations and use the initial value.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3 		<title>Test: evaluation of rem in calc in Media Queries</title>
 4 		<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
 5 		<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
 6 		<link href="http://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
 7 		<link href="reference/ref-filled-green-100px-square.htm" rel="match">
 8 		<meta content="The size in pixels of the 'rem' unit used in calc inside a media query does not depend on declarations and use the initial value." name="assert">
 9 		<meta content="" name="flags">
10 		<style>
11 			:root { font-size: 30000px; }
12 			p { font-size: 16px; }
13 			div {
14 				width: 100px;
15 				height: 100px;
16 				background-color: red;
17 			}
18 			@media (min-width: calc(1rem)){
19 				div { background-color: green; }
20 			}
21 	</style>
22 	</head>
23 	<body>
24 		<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
25 		<div></div>
26 	
27 
28 
29 </body></html>