mask-mode-a.html (1688B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-mode with vector image</title> 6 <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> 9 <link rel="match" href="mask-mode-ref.html"> 10 <meta name="assert" content="Test checks that mask an SVG image referenced by mask-image is correct with different mask mode."> 11 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-10000"> 12 <style type="text/css"> 13 div { 14 background-color: blue; 15 position: absolute; 16 margin: 0px; 17 padding: 0px; 18 width: 100px; 19 height: 100px; 20 top: 10px; 21 } 22 23 div.auto { 24 left: 10px; 25 mask-mode: match-source; 26 mask-image: url(support/blue-100x100.svg); 27 } 28 29 div.alpha { 30 left: 120px; 31 mask-mode: alpha; 32 mask-image: url(support/blue-100x100.svg); 33 } 34 35 div.luminance1 { 36 left: 230px; 37 mask-mode: luminance; 38 mask-image: url(support/blue-100x100.svg); 39 } 40 41 div.luminance2 { 42 left: 340px; 43 mask-mode: luminance; 44 mask-image: url(support/red-100x100.svg); 45 } 46 47 div.luminance3 { 48 left: 450px; 49 mask-mode: luminance; 50 mask-image: url(support/green-100x100.svg); 51 } 52 </style> 53 </head> 54 <body> 55 <div class="auto"></div> 56 <div class="alpha"></div> 57 <div class="luminance1"></div> 58 <div class="luminance2"></div> 59 <div class="luminance3"></div> 60 </body> 61 </html>