mask-image-url-image.html (861B)
1 <!DOCTYPE html> 2 <title>CSS Test: mask-image: url(image.svg)</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 an SVG file as an image"> 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(support/image.svg); 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>