| <!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> |
