clip-path-shape-006.html (922B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and shape function with content-box</title> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> 6 <link rel="match" href="reference/clip-path-path-001-ref.html"> 7 <meta name="assert" content="The clip-path property takes the basic shape 8 'shape()' for clipping. Test the usage of the reference box. On pass you 9 should see a green square."> 10 </head> 11 <style> 12 #rect { 13 width: 140px; 14 height: 140px; 15 padding: 10px; 16 border: 10px solid red; 17 box-sizing: border-box; 18 background-color: green; 19 /* The size of the content-box is 100x100. */ 20 clip-path: shape(from -10px -10%, 21 hline by 80px, vline by 80%, hline by -80%, close) 22 content-box; 23 } 24 </style> 25 <body> 26 <p>The test passes if there is a green filled rect.</p> 27 <div id="rect"></div> 28 </body> 29 </html>