clip-path-polygon-002.html (1200B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title>CSS Masking: Test clip-path property and polygon function with percentage values</title> 9 <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> 11 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> 12 <link rel="match" href="clip-path-rectangle-ref.html"> 13 <meta name="assert" content="The clip-path property takes the basic shape 14 'polygon' for clipping. Test percentage values for arguments. Percentage 15 values are relative to specified reference box. If no reference box was 16 specified, percentage values are relative to border-box. A number of 17 percentage values are specified as coordinates. On pass you should see a 18 green square and no red."> 19 </head> 20 <body> 21 <p>The test passes if there is a green rectangle and no red.</p> 22 <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div> 23 </body> 24 </html>