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