LayoutTests/css3/masking/mask-multiple-values-expected.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <style>
             p {
                 margin: 0px;
             }
             #back {
                 width: 500px;
                 height: 500px;
                 background-color: green;
             }
             .front {
                 position: absolute;
                 width: 300px;
                 height: 300px;
                 background-color: black;
                 border: 50px solid blue;
                 padding: 50px;
                 -webkit-mask-repeat: no-repeat;
                 -webkit-mask-origin: content-box;
                 -webkit-mask-clip: border-box;
             }
             #front1 {
                 -webkit-mask-image: url('resources/circle.png');
                 -webkit-mask-size: 150px 120px;
                 -webkit-mask-position: -120px -110px;
             }
             #front2 {
                 -webkit-mask-image: url('resources/masks.svg#lowerHalf');
                 -webkit-mask-size: 300px 240px;
                 -webkit-mask-position: 50px 0px;
             }
             #front3 {
                 -webkit-mask-image: url('resources/masks.svg#upperHalf');
                 -webkit-mask-size: 300px 240px;
                 -webkit-mask-position: 50px 0px;
             }
             #front4 {
                 -webkit-mask-image: url('resources/masks.svg#invalidId');
                 -webkit-mask-size: 225px 180px;
                 -webkit-mask-position: 160px 220px;
             }
         </style>
     </head>

     <body>
         <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - This test uses multiple masks from multiple resources.</p>
         <div id="back">
             <div class="front" id="front1"></div>
             <div class="front" id="front2"></div>
             <div class="front" id="front3"></div>
             <div class="front" id="front4"></div>
         </div>
     </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	p {
	margin: 0px;
	}
	#back {
	width: 500px;
	height: 500px;
	background-color: green;
	}
	.front {
	position: absolute;
	width: 300px;
	height: 300px;
	background-color: black;
	border: 50px solid blue;
	padding: 50px;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-origin: content-box;
	-webkit-mask-clip: border-box;
	}
	#front1 {
	-webkit-mask-image: url('resources/circle.png');
	-webkit-mask-size: 150px 120px;
	-webkit-mask-position: -120px -110px;
	}
	#front2 {
	-webkit-mask-image: url('resources/masks.svg#lowerHalf');
	-webkit-mask-size: 300px 240px;
	-webkit-mask-position: 50px 0px;
	}
	#front3 {
	-webkit-mask-image: url('resources/masks.svg#upperHalf');
	-webkit-mask-size: 300px 240px;
	-webkit-mask-position: 50px 0px;
	}
	#front4 {
	-webkit-mask-image: url('resources/masks.svg#invalidId');
	-webkit-mask-size: 225px 180px;
	-webkit-mask-position: 160px 220px;
	}
	</style>
	</head>

	<body>
	<p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - This test uses multiple masks from multiple resources.</p>
	<div id="back">
	<div class="front" id="front1"></div>
	<div class="front" id="front2"></div>
	<div class="front" id="front3"></div>
	<div class="front" id="front4"></div>
	</div>
	</body>
	</html>