clip-path-inset-003.html (886B)
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 inset function with different rounded corners</title> 9 <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> 10 <link rel="match" href="clip-path-inset-003-ref.html"> 11 <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> 12 <style type="text/css"> 13 #square { 14 width: 100px; 15 height: 100px; 16 border: solid green 50px; 17 background-color: green; 18 clip-path: inset(10px round 10px 20px 30px 40px / 50px 60px 70px 80px); 19 } 20 </style> 21 </head> 22 <body> 23 <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p> 24 <div id="square"></div> 25 </body> 26 </html>