mask-mode-d.html (1911B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-mode with raster image</title> 6 <link rel="author" title="CJ Ku" href="mailto:cku@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 whether mask-mode is filled automatically according to the number of mask layers."> 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: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); 27 } 28 29 div.alpha { 30 left: 120px; 31 mask-mode: alpha alpha; 32 mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); 33 } 34 35 div.luminance1 { 36 left: 230px; 37 mask-mode: luminance; 38 mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); 39 } 40 41 div.luminance2 { 42 left: 340px; 43 mask-mode: luminance; 44 mask-image: linear-gradient(black 0%, black 100%), linear-gradient(red 0%, red 100%); 45 } 46 47 div.luminance3 { 48 left: 450px; 49 mask-mode: luminance; 50 mask-image: linear-gradient(black 0%, black 100%), linear-gradient(lime 0%, lime 100%); 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>