clip-inherit-001.xht (1336B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: clip: Inheriting 'auto' arguments of rect()</title> 5 <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping"/> 8 <meta name="assert" content="The 'auto' keywords in rect() resolve to a 9 used (not computed) value that aligns them with the border edges."/> 10 <style type="text/css"> 11 .container { 12 position: relative; 13 width: 100px; height: 100px; 14 background: red; } 15 #outer { 16 position: absolute; 17 top: 50px; left: 50px; 18 clip: rect(-50px, auto, auto, -50px); 19 height: 40px; width: 40px; 20 border: solid 5px transparent; } 21 #inner { 22 position: absolute; 23 top: -55px; left: -55px; 24 width: 60px; height: 60px; 25 border: solid 20px green; 26 background: green; clip: inherit; } 27 </style> 28 29 </head> 30 <body> 31 <p>There must be a green box below and no red.</p> 32 <div class="container"> 33 <div id="outer"> 34 <div id="inner"></div> 35 </div> 36 </div> 37 </body> 38 </html>