LayoutTests/fast/replaced/border-radius-clip-content-edge.html - WebKit - Git at Google

 <!DOCTYPE html>
 <style>
   body {
     width: 600px;
   }

   div {
     display: inline-block;
     margin: 20px;
   }

   object, img, input[type="image"], canvas, embed, iframe {
     margin-top: 5px;
     border: 10px solid rgba(0, 0, 0, 0.5);
     padding: 5px;
     background-color: red;
     background-clip: content-box;
     border-radius: 100px 50px 10px;
     display: block;
     height: 100px;
     width: 100px;
   }
 </style>

 <script>
 if (window.testRunner) {
     testRunner.dumpAsText(true);
     testRunner.setPluginsEnabled(false);
 }
 </script>

 <body>
 <!-- Replaced elements with border-radius should clip to the content edge curve. -->

 <script>
 // Disable plugins, because otherwise the "Test WebKit PlugIn" steals <embed>s referencing PNGs.
 if (window.testRunner)
   testRunner.setPluginsEnabled(false);
 </script>

 <div>
   <object data="resources/square-blue-100x100.png"></object>
 </div>

 <div>
   <canvas id="testCanvas"></canvas>
   <script>
     var ctx = testCanvas.getContext('2d');
     ctx.fillStyle = "rgb(0,0,255)";
     ctx.fillRect(0, 0, 1000, 1000);
   </script>
 </div>

 <div>
   <input type="image" src="resources/square-blue-100x100.png">
 </div>

 <div>
   <img src="resources/square-blue-100x100.png">
 </div>

 <div>
   <iframe src="resources/square-blue-100x100.png"></iframe>
 </div>

 <div>
   <embed src="resources/square-blue-100x100.png"></embed>
 </div>
 </body>
	<!DOCTYPE html>
	<style>
	body {
	width: 600px;
	}

	div {
	display: inline-block;
	margin: 20px;
	}

	object, img, input[type="image"], canvas, embed, iframe {
	margin-top: 5px;
	border: 10px solid rgba(0, 0, 0, 0.5);
	padding: 5px;
	background-color: red;
	background-clip: content-box;
	border-radius: 100px 50px 10px;
	display: block;
	height: 100px;
	width: 100px;
	}
	</style>

	<script>
	if (window.testRunner) {
	testRunner.dumpAsText(true);
	testRunner.setPluginsEnabled(false);
	}
	</script>

	<body>
	<!-- Replaced elements with border-radius should clip to the content edge curve. -->

	<script>
	// Disable plugins, because otherwise the "Test WebKit PlugIn" steals <embed>s referencing PNGs.
	if (window.testRunner)
	testRunner.setPluginsEnabled(false);
	</script>

	<div>
	<object data="resources/square-blue-100x100.png"></object>
	</div>

	<div>
	<canvas id="testCanvas"></canvas>
	<script>
	var ctx = testCanvas.getContext('2d');
	ctx.fillStyle = "rgb(0,0,255)";
	ctx.fillRect(0, 0, 1000, 1000);
	</script>
	</div>

	<div>
	<input type="image" src="resources/square-blue-100x100.png">
	</div>

	<div>
	<img src="resources/square-blue-100x100.png">
	</div>

	<div>
	<iframe src="resources/square-blue-100x100.png"></iframe>
	</div>

	<div>
	<embed src="resources/square-blue-100x100.png"></embed>
	</div>
	</body>