Chromium Code Reviews Chromium Code Reviews
Issue 249133002:
hitTest should take care if the location is inside rounded border if border-radius is specified (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/borders/border-radius-hittest.html |
| diff --git a/LayoutTests/fast/borders/border-radius-hittest.html b/LayoutTests/fast/borders/border-radius-hittest.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..3539f466f2ca4651c65b727890c2353a186bd9d8 |
| --- /dev/null |
| +++ b/LayoutTests/fast/borders/border-radius-hittest.html |
| @@ -0,0 +1,49 @@ |
| +<!DOCTYPE html> |
| +<script src="../../resources/js-test.js"></script> |
| +<script> |
| +var x, y; |
| + |
| +function offset(elem) { |
| + var result = {top: 0, left: 0}; |
| + for (; elem; elem = elem.offsetParent) { |
| + result.left += elem.offsetLeft; |
| + result.top += elem.offsetTop; |
| + } |
| + return result; |
| +} |
| + |
| +function test() { |
| + var innerBox = document.getElementById('roundedBox'); |
| + x = offset(innerBox).left; |
| + y = offset(innerBox).top; |
|
ojan
2014/04/30 18:37:47
Nit: You can use getBoundingClientRect instead of
pals
2014/05/06 06:33:41
Done.
|
| + // At top-left corner. |
| + shouldBe("document.elementFromPoint(x + 5, y + 5).id", "'container'"); |
| + // At top-right corner. |
| + shouldBe("document.elementFromPoint(x + 195, y + 5).id", "'container'"); |
| + // At bottom-left corner. |
| + shouldBe("document.elementFromPoint(x + 5, y + 195).id", "'container'"); |
| + // At bottom-right corner. |
| + shouldBe("document.elementFromPoint(x + 195, y + 195).id", "'container'"); |
| + // At the center. |
| + shouldBe("document.elementFromPoint(x + 100, y + 100).id", "'roundedBox'"); |
| + isSuccessfullyParsed(); |
|
ojan
2014/04/30 18:37:47
I don't think you need isSuccessfullyParsed anymor
pals
2014/05/06 06:33:41
Done.
|
| +} |
| +</script> |
| +<style> |
| + #container { |
| + width: 200px; height: 200px; |
|
ojan
2014/04/30 18:37:47
Nit: we usually put each property on its own line.
pals
2014/05/06 06:33:41
Done.
|
| + background-color: lightgray; |
| + } |
| + #roundedBox { |
| + width: 200px; height: 200px; |
| + border-radius: 50px; |
| + background-color: lightgreen; |
| + } |
| +</style> |
| +<body onload="test()"> |
| + <p>This test checks that div block should not get events on clicking outside the rounded border but within the bounding box of the block.</p> |
| + <div id="container"> |
| + <div id="roundedBox"></div> |
| + </div> |
| + <div id="console"></div> |
|
ojan
2014/04/30 18:37:47
You don't need this. js-test.js will add it for yo
pals
2014/05/06 06:33:41
I added this to print the console log below the "c
|
| +</body> |
