Chromium Code Reviews Chromium Code Reviews
Issue 1506053003:
Include clip-path and border radius when hit testing boxes (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html |
| diff --git a/third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html b/third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..20de8156a0a7ed4fe32cc2e78a1f45141a448eb1 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html |
| @@ -0,0 +1,37 @@ |
| +<!DOCTYPE HTML> |
| +<script src="../resources/js-test.js"></script> |
| +<script> |
| + function test() { |
| + // At bottom-left corner, outside the clip-path region. |
| + shouldNotBe("document.elementFromPoint(25, 75).id", "'image'"); |
| + |
| + // At top-right corner, inside the clip-path region. |
| + shouldBe("document.elementFromPoint(75, 25).id", "'image'"); |
| + } |
| +</script> |
| +<style> |
| + #image { |
| + -webkit-clip-path: url(#clipPathTopLeft); |
| + clip-path: url(#clipPathTopLeft); |
|
Rick Byers
2015/12/11 16:02:51
So this test covers the 'ClipPathOperation:REFEREN
pdr.
2015/12/11 18:09:23
Good idea, done in the latest patch.
|
| + width: 100px; |
| + height: 100px; |
| + position: absolute; |
| + top: 0; |
| + left: 0; |
| + } |
| + #image:hover { |
| + background: green; |
| + } |
| +</style> |
| +<body onload="test()"> |
| + <p>Image hit testing should not include clipped-out regions.</p> |
| + <svg width="100" height="0"> |
| + <defs> |
| + <clipPath id="clipPathTopLeft"> |
| + <path id="path" d="M 0 0 L 100 100 L 100 0Z" /> |
| + </clipPath> |
| + </defs> |
| + </svg> |
| + <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="> |
| + <div id="console"></div> |
| +</body> |
