mask-repeat-1-svg.html (1451B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Masking: mask-repeat: repeated mask layer image, SVG content</title> 4 <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat"> 5 <link rel="match" href="mask-repeat-1-ref.html"> 6 <meta name="assert" content="Test checks whether repeated mask layer works correctly or not."> 7 <style type="text/css"> 8 svg { 9 display: block; 10 } 11 12 rect.frame { 13 x: -0.5px; 14 y: -0.5px; 15 width: 116px; 16 height: 116px; 17 stroke: black; 18 fill: none; 19 } 20 21 rect.masked { 22 width: 115px; 23 height: 115px; 24 fill: purple; 25 mask-image: url(support/50x50-opaque-blue.svg); 26 mask-position: left top; 27 } 28 29 #no-repeat { 30 mask-repeat: no-repeat no-repeat; 31 } 32 #repeat { 33 mask-repeat: repeat repeat; 34 } 35 #repeat-x { 36 mask-repeat: repeat no-repeat; 37 } 38 #repeat-y { 39 mask-repeat: no-repeat repeat; 40 } 41 </style> 42 <svg height="585"> 43 <g transform="translate(1 1)"> 44 <rect class="masked"/> 45 <rect class="frame"/> 46 </g> 47 <g transform="translate(1 118)"> 48 <rect class="masked" id="no-repeat"/> 49 <rect class="frame"/> 50 </g> 51 <g transform="translate(1 235)"> 52 <rect class="masked" id="repeat"/> 53 <rect class="frame"/> 54 </g> 55 <g transform="translate(1 352)"> 56 <rect class="masked" id="repeat-x"/> 57 <rect class="frame"/> 58 </g> 59 <g transform="translate(1 469)"> 60 <rect class="masked" id="repeat-y"/> 61 <rect class="frame"/> 62 </g> 63 </svg>