clip-rect-auto-003.html (1038B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip property with rect function and auto value for top value</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-rect-top-ref.html"> 9 <meta name="assert" content="A value of 'auto' for 'top' in the rect 10 function is equal to the top edge of the border box. The box shadow should 11 be clipped, since it is painted outside the border box. On pass you should see a horizontal green stripe under a horizontal blue stripe."> 12 </head> 13 <body> 14 <p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p> 15 <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, 150px, 100px, 50px); box-shadow: 0 0 10px red;"></div> 16 </body> 17 </html>