mask-image-data-url-image-ref.html (696B)
1 <!DOCTYPE html> 2 <title>Reference: mask-image: url(data:...)</title> 3 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 4 <style> 5 #back { 6 position: absolute; 7 box-sizing: border-box; 8 width: 200px; 9 height: 200px; 10 border: 60px solid green; 11 background: blue; 12 } 13 #front { 14 position: absolute; 15 box-sizing: border-box; 16 width: 200px; 17 height: 200px; 18 border: 40px solid blue; 19 background: green; 20 mask-image: url(1x1-black-30-alpha.png); /* 1x1 black with 30% transparency */ 21 } 22 </style> 23 <p>The test passes if there is a blue-ish square with a 20px green border around it and a 40px blue-green-ish border around that.</p> 24 <div id="back"></div><div id="front"></div>