1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>
5 CSS Values and Units and Media Queries Test:
6 Calc function inside media queries
7 </title>
8 <meta content="
9 The calc() expression is supported in the min-width media query properly (=with range clamping).
10 " name="assert">
11
12 <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
13
14 <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
15 <link href="http://www.w3.org/TR/css3-mediaqueries/#width" rel="help">
16
17 <link href="reference/all-green.htm" rel="match">
18
19 <style type="text/css">
20
21 html { background: red; }
22 @media (min-width: calc(-100px)) { /* should clamp to 0px */
23 html { background: green; }
24 }
25
26 </style>
27
28 </head>
29 <body>
30
31 <div id="target"></div>
32
33
34
35 </body></html>