border-radius-with-layer.html | Explore in Territory

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

chromium/third_party/blink/web_tests/fast/borders/border-radius-with-layer.html