mask-composite-2d.html (1050B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Masking: mask-composite: compose vector image on SVG content</title> 4 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> 5 <link rel="match" href="mask-composite-2-ref.html"> 6 <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> 7 <style type="text/css"> 8 body { 9 padding: 0; 10 margin: 0; 11 } 12 13 rect { 14 fill: blue; 15 width: 100px; 16 height: 100px; 17 y: 10px; 18 mask-image: url(support/blue-100x50-transparent-100x50.svg), 19 url(support/transparent-100x50-blue-100x50.svg); 20 } 21 22 rect.add { 23 x: 10px; 24 mask-composite: add; 25 } 26 27 rect.subtract { 28 x: 120px; 29 mask-composite: subtract; 30 } 31 32 rect.intersect { 33 x: 230px; 34 mask-composite: intersect; 35 } 36 37 rect.exclude { 38 x: 340px; 39 mask-composite: exclude; 40 } 41 </style> 42 <svg width="440"> 43 <rect class="add"/> 44 <rect class="subtract"/> 45 <rect class="intersect"/> 46 <rect class="exclude"/> 47 </svg>