mask-mode-e.html (1328B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Masking: mask-mode with gradient on SVG content</title> 4 <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> 5 <link rel="match" href="mask-mode-ref.html"> 6 <meta name="assert" content="Test checks that a linear-gradient() image referenced by mask-image is correct with different mask modes."> 7 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-11800"> 8 <style type="text/css"> 9 body { 10 padding: 0; 11 margin: 0; 12 } 13 14 rect { 15 fill: blue; 16 width: 100px; 17 height: 100px; 18 y: 10px; 19 } 20 21 rect.auto { 22 x: 10px; 23 mask-mode: match-source; 24 mask-image: linear-gradient(blue 0%, blue 100%); 25 } 26 27 rect.alpha { 28 x: 120px; 29 mask-mode: alpha; 30 mask-image: linear-gradient(blue 0%, blue 100%); 31 } 32 33 rect.luminance1 { 34 x: 230px; 35 mask-mode: luminance; 36 mask-image: linear-gradient(blue 0%, blue 100%); 37 } 38 39 rect.luminance2 { 40 x: 340px; 41 mask-mode: luminance; 42 mask-image: linear-gradient(red 0%, red 100%); 43 } 44 45 rect.luminance3 { 46 x: 450px; 47 mask-mode: luminance; 48 mask-image: linear-gradient(lime 0%, lime 100%); 49 } 50 </style> 51 <svg width="600"> 52 <rect class="auto"/> 53 <rect class="alpha"/> 54 <rect class="luminance1"/> 55 <rect class="luminance2"/> 56 <rect class="luminance3"/> 57 </svg>