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