| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../resources/js-test.js"></script> |
| 3 <script> |
| 4 var x, y; |
| 5 function test() { |
| 6 var rect = roundedImage.getBoundingClientRect(); |
| 7 x = rect.left; |
| 8 y = rect.top; |
| 9 |
| 10 // At top-left corner, outside the outer border radius. |
| 11 shouldBe("document.elementFromPoint(x + 20, y + 20).id", "'container'"); |
| 12 |
| 13 // At top-left corner, inside outer border radius. |
| 14 shouldBe("document.elementFromPoint(x + 35, y + 35).id", "'roundedImage'"); |
| 15 shouldBe("document.elementFromPoint(x + 60, y + 60).id", "'roundedImage'"); |
| 16 |
| 17 // Fully inside border. |
| 18 shouldBe("document.elementFromPoint(x + 68, y + 68).id", "'roundedImage'"); |
| 19 shouldBe("document.elementFromPoint(x + 80, y + 80).id", "'roundedImage'"); |
| 20 shouldBe("document.elementFromPoint(x + 230, y + 230).id", "'roundedImage'")
; |
| 21 |
| 22 // At bottom-right corner, insider inner border radius. |
| 23 shouldBe("document.elementFromPoint(x + 240, y + 240).id", "'roundedImage'")
; |
| 24 shouldBe("document.elementFromPoint(x + 265, y + 265).id", "'roundedImage'")
; |
| 25 |
| 26 // At bottom-right corner, outside the outer border radius. |
| 27 shouldBe("document.elementFromPoint(x + 275, y + 275).id", "'container'"); |
| 28 } |
| 29 </script> |
| 30 <style> |
| 31 #container { |
| 32 display: inline-block; |
| 33 background-color: black; |
| 34 } |
| 35 #roundedImage { |
| 36 width: 200px; |
| 37 height: 200px; |
| 38 border-radius: 100px; |
| 39 background-color: blue; |
| 40 border: 50px solid orange; |
| 41 display: block; |
| 42 } |
| 43 #roundedImage:hover { |
| 44 border-color: green; |
| 45 background-color: green; |
| 46 } |
| 47 </style> |
| 48 <body onload="test()"> |
| 49 <p>The border radius clip should be respected when hit testing images.</p> |
| 50 <div id="container"> |
| 51 <img id="roundedImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
AAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAA
BJRU5ErkJggg=="> |
| 52 </div> |
| 53 <div id="console"></div> |
| 54 </body> |
| OLD | NEW |
|---|
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