<!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.setPluginsEnabled(false);
</script>
<body>
<!-- Replaced elements with border-radius should clip to the content edge curve. -->
<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>
Codebase Browser
chromium