clip-path-polygon-013.html (1778B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path and polygon different units</title> 5 <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> 7 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> 8 <link rel="match" href="reference/clip-path-stripes-003-ref.html"> 9 <meta name="assert" content="Test the support of different units for 10 polygon coordinates. The test passes if you see a multiple green and blue 11 stripe pairs. For each pair, the blue and green stripe must be of same 12 length."> 13 <meta name="flags" content="ahem"> 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style> 16 body { 17 margin: 0; 18 } 19 div { 20 width: 100%; 21 height: 20px; 22 background-color: green; 23 padding: 0; 24 margin: 0; 25 font: 20px/1 Ahem; 26 } 27 div:nth-child(odd) { 28 margin-bottom: 5px; 29 background-color: blue; 30 } 31 </style> 32 <body> 33 <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> 34 <div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div> 35 <div style="width: 50%"></div> 36 37 <div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div> 38 <div style="width: 20em"></div> 39 40 <div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div> 41 <div style="width: 50vw"></div> 42 43 <div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div> 44 <div style="width: 40vh"></div> 45 46 <div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div> 47 <div style="width: calc(30% + 15px)"></div> 48 49 <div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div> 50 <div style="width: 30ex"></div> 51 </body> 52 </html>