clip-path-circle-closest-corner.html (1242B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and circle with closest-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, with the 'closest-corner' size. There should be a full green circle."> 11 <style> 12 body { 13 padding: 0; 14 margin: 0; 15 } 16 17 .test { 18 position: absolute; 19 left: 150px; 20 top: 100px; 21 width: 350px; 22 height: 450px; 23 background-color: red; 24 clip-path: circle(closest-corner at 150px 200px); 25 } 26 27 .inner { 28 position: absolute; 29 top: -60px; 30 left: -110px; 31 width: 520px; 32 height: 520px; 33 background-color: green; 34 } 35 </style> 36 </head> 37 <body> 38 <p>The test passes if there is a full green circle.</p> 39 <div class="test"> 40 <div class="inner"></div> 41 </div> 42 </body> 43 </html>