mask-clip-3.html (1589B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-clip: clip mask image</title> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 7 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-clip"> 8 <link rel="match" href="mask-clip-3-ref.html"> 9 <meta name="assert" content="fill-box, stroke-box, view-box of mask-clip should clip to the appropriate boxes."> 10 <style type="text/css"> 11 div.outer { 12 /* 13 * content box: 40 x 20 14 * padding box: 52 x 38 15 * border box: 60 x 50 16 * margin box: 66 x 54 17 */ 18 background-color: purple; 19 position: absolute; 20 top: 10px; 21 margin: 1px 2px 3px 4px; 22 border: solid transparent; 23 border-width: 8px 2px 4px 6px; 24 padding: 6px 9px 12px 3px; 25 width: 40px; 26 height: 20px; 27 } 28 29 div.mask { 30 mask-size: 100% 100%; 31 mask-origin: border-box; 32 mask-image: url(support/transparent-100x50-blue-100x50.svg); 33 } 34 35 div.stroke { 36 left: 10px; 37 mask-clip: stroke-box; /* should be the same as border-box */ 38 } 39 40 div.view { 41 left: 110px; 42 mask-clip: view-box; /* should be the same as border-box */ 43 } 44 45 div.fill { 46 left: 210px; 47 mask-clip: fill-box; /* should be the same as content-box */ 48 } 49 </style> 50 </head> 51 <body> 52 <div class="outer mask stroke"></div> 53 <div class="outer mask view"></div> 54 <div class="outer mask fill"></div> 55 </body> 56 </html>