clip-rect-auto-001.html (1111B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip property with rect function and auto values clip to border box - 1</title> 5 <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> 7 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> 8 <link rel="match" href="reference/clip-overflow-hidden-ref.html"> 9 <meta name="assert" content="A value of 'auto' in the rect function is 10 equal to the certain edge of the border box. The content should be clipped 11 to the border box. On pass you see a blue square and a smaller green square 12 in the bottom right corner of the blue square."> 13 </head> 14 <body> 15 <p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square.</p> 16 <div style="position: absolute; clip: rect(auto, auto, auto, auto); width: 100px; height: 100px;"> 17 <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> 18 </div> 19 </body> 20 </html>