clip-path-stripes-003-ref.html (1041B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Reftest reference</title> 5 <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> 6 <meta name="flags" content="ahem"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 body { 10 margin: 0; 11 } 12 div { 13 height: 20px; 14 background-color: green; 15 padding: 0; 16 margin: 0; 17 font: 20px/1 Ahem; 18 } 19 div:nth-child(odd) { 20 margin-bottom: 5px; 21 background-color: blue; 22 } 23 </style> 24 <body> 25 <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> 26 <div style="width: 50%"></div> 27 <div style="width: 50%"></div> 28 29 <div style="width: 20em"></div> 30 <div style="width: 20em"></div> 31 32 <div style="width: 50vw"></div> 33 <div style="width: 50vw"></div> 34 35 <div style="width: 40vh"></div> 36 <div style="width: 40vh"></div> 37 38 <div style="width: calc(30% + 15px)"></div> 39 <div style="width: calc(30% + 15px)"></div> 40 41 <div style="width: 30ex"></div> 42 <div style="width: 30ex"></div> 43 </body> 44 </html>