| <!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"> |
| <video> |
| <video poster="resources/square-blue-100x100.png"></video> |
| <canvas> |
| <canvas src="one day maybe"></canvas> |
| <media> |
| <media src=""></media> |
| </div> |
| |
| <div class="group"> |
| <iframe> |
| <iframe src="resources/square-blue-100x100.png"></iframe> |
| <object> |
| <object src="resources/square-blue-100x100.png"></object> |
| </div> |
| |
| <div class="group"> |
| <input type=image> |
| <input type="image" src="resources/square-blue-100x100.png"> |
| <img> |
| <img src="resources/square-blue-100x100.png"> |
| </div> |
| |
| </body> |
