clip-path-rect-004.html (755B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and rect function</title> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"> 6 <link rel="match" href="reference/green-100x100.html"> 7 <meta name="assert" content="The clip-path property takes the basic shape 8 'rect()' for clipping. On pass you should see a green rect without any red."> 9 </head> 10 <style> 11 #background { 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 background-color: green; 16 } 17 #rect { 18 position: absolute; 19 width: 100px; 20 height: 100px; 21 background-color: red; 22 clip-path: rect(50px 0 0 50px); 23 } 24 </style> 25 <body> 26 <div id="background"></div> 27 <div id="rect"></div> 28 </body> 29 </html>