LayoutTests/fast/css/cascade/background-clip-and-webkit-background-clip-cascade-order.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 @font-face {
     font-family: "Ahem";
     src: url("../../../resources/Ahem.ttf");
 }

 body {
     background-color: white;
     font-family: "Ahem";
     font-size: 20px; /* For some reason this needs to be multiple of 10 for the test to pass (why?). */
 }

 .square {
     display: inline-block;
     height: 128px;
     width: 128px;
     background-repeat: no-repeat;
     color: transparent;
 }

 #webkit-background-clip-before-background-clip {
     background-image: url("../resources/green-128x128.png");
     -webkit-background-clip: text, border;
     background-clip: border-box; /* Should override -webkit-background-clip */
 }

 #background-clip-before-webkit-background-clip {
     background-color: #00FF00;
     background-clip: border-box;
     -webkit-background-clip: text, border; /* Should override background-clip */
 }
 </style>
 </head>
 <body>
     <!-- Tests that we apply background-clip and -webkit-background-clip in the order they are parsed. -->
     <div class="square" id="webkit-background-clip-before-background-clip"></div>
     <div class="square" id="background-clip-before-webkit-background-clip">X</div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	@font-face {
	font-family: "Ahem";
	src: url("../../../resources/Ahem.ttf");
	}

	body {
	background-color: white;
	font-family: "Ahem";
	font-size: 20px; /* For some reason this needs to be multiple of 10 for the test to pass (why?). */
	}

	.square {
	display: inline-block;
	height: 128px;
	width: 128px;
	background-repeat: no-repeat;
	color: transparent;
	}

	#webkit-background-clip-before-background-clip {
	background-image: url("../resources/green-128x128.png");
	-webkit-background-clip: text, border;
	background-clip: border-box; /* Should override -webkit-background-clip */
	}

	#background-clip-before-webkit-background-clip {
	background-color: #00FF00;
	background-clip: border-box;
	-webkit-background-clip: text, border; /* Should override background-clip */
	}
	</style>
	</head>
	<body>
	<!-- Tests that we apply background-clip and -webkit-background-clip in the order they are parsed. -->
	<div class="square" id="webkit-background-clip-before-background-clip"></div>
	<div class="square" id="background-clip-before-webkit-background-clip">X</div>
	</body>
	</html>