blob: 31824536b82f0ae2ce920651992b374061cf8eec [file] [log] [blame]
<!DOCTYPE html>
<style>
.group {
float: left; width: 180px;
}
iframe, object, img, input[type="image"], canvas, media, video {
margin: 10px 0 20px 10px;
outline: 4px solid black;
outline-offset: -10px;
border: none;
border-radius: 0;
background-color: blue;
display: block;
height: 100px;
width: 100px;
}
</style>
<body>
All the replaced elements below should have a solid black inset outline.<p>
<div class="group">
&lt;video&gt;
<video poster="resources/square-blue-100x100.png"></video>
&lt;canvas&gt;
<canvas src="one day maybe"></canvas>
&lt;media&gt;
<media src=""></media>
</div>
<div class="group">
&lt;iframe&gt;
<iframe src="resources/square-blue-100x100.png"></iframe>
&lt;object&gt;
<object src="resources/square-blue-100x100.png"></object>
</div>
<div class="group">
&lt;input type=image&gt;
<input type="image" src="resources/square-blue-100x100.png">
&lt;img&gt;
<img src="resources/square-blue-100x100.png">
</div>
</body>