calc-invalid-range-clamping.html (955B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 6 CSS Values and Units Test: 7 Range clamping into calc() expressions 8 </title> 9 <meta name="assert" content=" 10 A calc expression can evaluate to a value which is outside the validity range. 11 If it does, this value must be clamped into the range. 12 The declaration must not be ignored. 13 " /> 14 15 <link 16 rel="author" 17 title="François REMY" 18 href="mailto:fremycompany.developer@yahoo.fr" 19 /> 20 21 <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-range"/> 22 23 <link 24 rel="match" 25 href="reference/200-200-green.html" 26 /> 27 28 <style type="text/css"> 29 30 html, body { margin: 0px; padding: 0px; } 31 32 html { background: white; overflow: hidden; } 33 #outer { background: green; width: 200px; height: 200px; } 34 #outer { border-radius: 10px; border-radius: calc(-10px); } 35 36 </style> 37 38 </head> 39 <body> 40 41 <div id="outer"></div> 42 43 </body> 44 </html>