clip-path-circle-003.html (1020B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and circle function with percentage radius</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/#the-clip-path"> 8 <link rel="match" href="reference/clip-path-circle-ref.html"> 9 <meta name="fuzzy" content="0-38; 0-800"> 10 <meta name="assert" content="The clip-path property takes the basic shape 11 'circle' for clipping. Test percentage value as argument for radius and no 12 position arguments. The circle should be in the center of the element. On 13 pass there should be a green circle."> 14 <meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-900"> 15 </head> 16 <body> 17 <p>The test passes if there is a full green circle.</p> 18 <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50%);"></div> 19 </body> 20 </html>