border-radius-position.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
div#innerBox {
    width: 200px;
    height: 200px;
    padding: 0px;
    border-top-left-radius: 100px 80px;
    border-top-right-radius: 50px 25px;
    border-bottom-left-radius: 50px 70px;
    border-bottom-right-radius: 70px 30px;
    background-color: green;
}

div#outerBox {
    width: 200px;
    height: 200px;
    margin: 0px;
    padding: 100px;
    background-color: lightgreen;
}
</style>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

function log(message) {
    var console = document.getElementById('console');
    console.innerHTML += message + "\n";
}

function runTest() {
    var outerBox = document.getElementById('outerBox');
    outerBox.addEventListener('click', function(event) {
        log("Click outerBox");
    }, false);
    var innerBox = document.getElementById('innerBox');
    innerBox.addEventListener('click', function(event) {
        log("Click innerBox");
        event.stopPropagation();
    }, false);
    if (window.testRunner) {
        var x = innerBox.offsetLeft;
        var y = innerBox.offsetTop;
        // top-left
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 25, y + 20);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 30, y + 24);
        eventSender.mouseDown();
        eventSender.mouseUp();
        // top-right
        eventSender.mouseMoveTo(x + 200, y);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 200 - 14, y + 8);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 200 - 8, y + 4);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 200 - 4, y + 2);
        eventSender.mouseDown();
        eventSender.mouseUp();
        // bottom-left
        eventSender.mouseMoveTo(x, y + 180);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 14, y + 166);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 20, y + 160);
        eventSender.mouseDown();
        eventSender.mouseUp();
        // bottom-right
        eventSender.mouseMoveTo(x + 199, y + 200);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 199, y + 180);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 199, y + 175);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(x + 199, y + 170);
        eventSender.mouseDown();
        eventSender.mouseUp();
    }
}
</script>
</head>
<body onload="runTest()">
<div id="outerBox">
  <div id="innerBox">
  </div>
</div>
<p>Test for <i>bug 95373</i>: <a href="https://bugs.webkit.org/show_bug.cgi?id=95373">https://bugs.webkit.org/show_bug.cgi?id=95373</a> (border-radius) when border-radius:50% there is still 'invisible' square box
</p>
<pre id="console">
</pre>
</body>
</html>
chromium/third_party/blink/web_tests/fast/borders/border-radius-position.html
