mask-on-outflowElement-01b.html (849B)
1 <!DOCTYPE html> 2 <html> 3 <style type="text/css"> 4 #outer { 5 width: 100px; 6 height: 100px; 7 overflow: hidden; 8 } 9 10 #clipped { 11 mask: url(mask-on-outflowElement.svg); 12 width: 300px; 13 height: 300px; 14 } 15 16 #absolutePosition { 17 position:absolute; 18 top: 0; 19 left: 0; 20 width: 400px; 21 height: 400px; 22 background-color: blue; 23 } 24 </style> 25 26 <body style="margin: 0px;"> 27 <div id="outer"> 28 <div id="clipped"> 29 <div id="absolutePosition"> 30 <!-- This should only be clipped by the mask, not by the 100x100 31 overflow:hidden clip. 32 image mask is always clipped by the rect of associated element. The 33 forth rectangle in mask-on-outflowElement.svg is clipped out since 34 the size of #clipped is (w=300, height=300) 35 --> 36 </div> 37 </div> 38 </div> 39 </body> 40 </html>