clip-path-shape-005.html (919B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and shape function with padding-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 /* The size of the padding-box is 100x100. */ 14 width: 120px; 15 height: 120px; 16 padding: 10px; 17 border: 10px solid red; 18 box-sizing: border-box; 19 background-color: green; 20 clip-path: shape(from 0px 0px, 21 hline by 80px, vline by 80%, hline by -80%, close) 22 padding-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>