<!DOCTYPE html><html><head><metacharset="utf-8"><title>CSS Masking: mask-clip: clip mask image</title><linkrel="author"title="Astley Chen"href="mailto:aschen@mozilla.com"><linkrel="author"title="Mozilla"href="https://www.mozilla.org"><linkrel="help"href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"><linkrel="match"href="mask-clip-1-ref.html"><metaname="assert"content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes."><styletype="text/css">div.outer{/* * content box: 40 x 20 * padding box: 52 x 38 * border box: 60 x 50 * margin box: 66 x 54 */background-color:purple;position:absolute;top:10px;margin:1px2px3px4px;border:solidtransparent;border-width:8px2px4px6px;padding:6px9px12px3px;width:40px;height:20px;}div.mask{mask-size:100%100%;mask-origin:border-box;mask-image:url(support/transparent-100x50-blue-100x50.svg);}div.border{left:10px;mask-clip:border-box;}div.padding{left:110px;mask-clip:padding-box;}div.content{left:210px;mask-clip:content-box;}div.no-clip{background-color:yellow;left:310px;mask-clip:no-clip;}div.no-clip-inner{background-color:purple;position:absolute;/* allign with border area of the parent*/top:-8px;left:-6px;width:100px;height:50px;}</style></head><body><divclass="outer mask border"></div><divclass="outer mask padding"></div><divclass="outer mask content"></div><divclass="outer mask no-clip"><divclass="no-clip-inner"></div></div></body></html>
