107 lines
3.1 KiB
HTML
107 lines
3.1 KiB
HTML
<!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>
|