clip-path-circle-farthest-corner.html (1331B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and circle with farthest-corner on rectangular div</title> 5 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> 6 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> 7 <link rel="match" href="reference/clip-path-circle-4-ref.html"> 8 <meta name="fuzzy" content="maxDifference=0-40; totalPixels=0-2000"> 9 <meta name="assert" content="The clip-path property takes the basic shape 10 'circle' for clipping. The size of the circle is computed using the farthest corner, 11 which makes the circle larger than the box."> 12 <style> 13 body { 14 padding: 0; 15 margin: 0; 16 } 17 18 .test { 19 position: absolute; 20 left: 100px; 21 top: 150px; 22 width: 200px; 23 height: 300px; 24 background-color: red; 25 clip-path: circle(farthest-corner at 200px 150px); 26 } 27 28 .inner { 29 position: absolute; 30 top: -110px; 31 left: -100px; 32 width: 600px; 33 height: 520px; 34 background-color: green; 35 } 36 </style> 37 </head> 38 <body> 39 <p>The test passes if there is a full green circle.</p> 40 <div class="test"> 41 <div class="inner"></div> 42 <div class="center-indicator"></div> 43 </div> 44 </body> 45 </html>