blob: f245fe9945583a815989fcb485417d1e70eab62c [file] [log] [blame]
<!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>