| <!DOCTYPE html> |
| <html> |
| <body> |
| <div>This test checks that layers with border-radius are properly clipped.</div> |
| <div>You should see a green rounded rectangle with a purple border below. The rectangle should be contained within the border.</div> |
| <div style ="width:300px; height:100px; border-radius:30px; border:3px solid purple; overflow:hidden;"> |
| <div style="height: 100%;position:relative;"> |
| <div id ="img1" style="width:100%; height:100%;background-color: red"></div> |
| </div> |
| </div> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function changeBackground() { |
| document.getElementById("img1").style.backgroundColor = "green"; |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| window.setTimeout(changeBackground, 0); |
| </script> |
| </body> |
| </html> |
