clip-path-inset-001b.html (851B)
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 on each side</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: 120px; 15 height: 100px; 16 border: solid green 50px; 17 background-color: green; 18 clip-path: inset(10px 20px); 19 position: relative; 20 left: -10px; 21 } 22 </style> 23 </head> 24 <body> 25 <p>The test passes if there is a green square not touching the edges</p> 26 <div id="square"></div> 27 </body> 28 </html>