mask-image-url-local-mask.html (1034B)
1 <!DOCTYPE html> 2 <title>CSS Test: mask-image: url(#local-mask)</title> 3 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> 4 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 5 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> 6 <link rel="match" href="reference/mask-image-ref.html"> 7 <meta name="assert" content="mask-image can use local reference to a <mask> element"> 8 <style> 9 #back { 10 position: absolute; 11 box-sizing: border-box; 12 width: 200px; 13 height: 200px; 14 border: 60px solid green; 15 background: red; 16 } 17 #front { 18 position: absolute; 19 box-sizing: border-box; 20 width: 200px; 21 height: 200px; 22 border: 40px solid red; 23 background: green; 24 mask-image: url(#localmask); 25 } 26 </style> 27 <p>The test passes if there is a green square and no red below.</p> 28 <div id="back"></div><div id="front"></div> 29 <svg viewBox="0 0 200 200" style="width: 0; height: 0"> 30 <mask id="localmask"> 31 <rect x="50" y="50" width="100" height="100" fill="white"> 32 </mask> 33 </svg>