LayoutTests/css3/masking/mask-svg-script-png-to-mask.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <style>
             p {
                 margin: 0px;
             }
             #maskedElement {
                 width: 300px;
                 height: 400px;
                 background-color: green;
                 -webkit-mask-image:url('resources/circle.png');
             }
             #redSvg {
                 position: absolute;
             }
         </style>
     </head>

     <body>
         <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
         <p>This test sets the mask-image via CSS to a PNG and then changes it to a &lt;mask&gt; element from an SVG file via a script.</p>
         <svg id="redSvg" width="300px" height="400px">
             <path fill="red" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
         </svg>
         <div id="maskedElement"></div>

         <script>
             var maskedElement = document.getElementById("maskedElement");
             maskedElement.style.cssText += "-webkit-mask-image:url('resources/masks.svg#upperHalf');background-color: blue";
         </script>
     </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	p {
	margin: 0px;
	}
	#maskedElement {
	width: 300px;
	height: 400px;
	background-color: green;
	-webkit-mask-image:url('resources/circle.png');
	}
	#redSvg {
	position: absolute;
	}
	</style>
	</head>

	<body>
	<p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
	<p>This test sets the mask-image via CSS to a PNG and then changes it to a <mask> element from an SVG file via a script.</p>
	<svg id="redSvg" width="300px" height="400px">
	<path fill="red" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
	</svg>
	<div id="maskedElement"></div>

	<script>
	var maskedElement = document.getElementById("maskedElement");
	maskedElement.style.cssText += "-webkit-mask-image:url('resources/masks.svg#upperHalf');background-color: blue";
	</script>
	</body>
	</html>