clip-path-inset-001c.html (879B)
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 insets for all 4 sides</title> 9 <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> 10 <link rel="match" href="clip-path-inset-001-ref.html"> 11 <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> 12 <style type="text/css"> 13 #square { 14 width: 110px; 15 height: 100px; 16 border: solid green 50px; 17 background-color: green; 18 clip-path: inset(5px 10px 15px 20px); 19 position: relative; 20 left: -10px; 21 top: 5px; 22 } 23 </style> 24 </head> 25 <body> 26 <p>The test passes if there is a green square not touching the edges</p> 27 <div id="square"></div> 28 </body> 29 </html>