<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> CSS Values and Units and Media Queries Test: Calc function inside media queries </title> <meta name="assert" content=" The calc() expression is supported in the min-width media query properly (=with range clamping). " /> <link rel="author" title="François REMY" href="mailto:fremycompany.developer@yahoo.fr" / > <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width"> <link rel="match" href="reference/all-green.html" /> <style type="text/css"> html { background: red; } @media (min-width: calc(-100px)) { /* should clamp to 0px */ html { background: green; } } </style> </head> <body> <div id="target"></div> </body> </html>