mq-calc-008.html (870B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Test: support for calc in Media Queries</title> 5 <link rel="author" title="Romain Menke" href="https://github.com/romainmenke"> 6 <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> 7 <link rel="help" href="https://drafts.csswg.org/css-values-4/#ratios"> 8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3757"> 9 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 10 <meta name="assert" content="calc can be used in Media Queries"> 11 <style> 12 div { 13 background-color: red; 14 height: 100px; 15 width: 100px; 16 } 17 @media screen and (min-aspect-ratio: calc(59/79)) { 18 div { 19 background-color: green; 20 } 21 } 22 </style> 23 </head> 24 <body> 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 <div></div> 27 </body> 28 </html>