clip-path-polygon-002.html (1053B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and polygon function with percentage values</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/#propdef-clip-path"> 8 <link rel="match" href="reference/clip-path-rectangle-ref.html"> 9 <meta name="assert" content="The clip-path property takes the basic shape 10 'polygon' for clipping. Test percentage values for arguments. Percentage 11 values are relative to specified reference box. If no reference box was 12 specified, percentage values are relative to border-box. A number of 13 percentage values are specified as coordinates. On pass you should see a 14 green square and no red."> 15 </head> 16 <body> 17 <p>The test passes if there is a green box.</p> 18 <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> 19 </body> 20 </html>