Chromium Code Reviews Chromium Code Reviews
Issue 1513663002:
Include inner border radius in block hit testing (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../resources/js-test.js"></script> | |
|
chrishtr
2015/12/09 17:06:40
Is there a hit-testing directory? If not, let's cr
pdr.
2015/12/09 17:42:08
Done. Moved all border hittesting tests there. The
| |
| 3 <script> | |
| 4 var x, y; | |
| 5 function test() { | |
| 6 var rectWithoutScrollbars = roundedBoxWithoutScrollbars.getBoundingClientRec t(); | |
| 7 x = rectWithoutScrollbars.left; | |
| 8 y = rectWithoutScrollbars.top; | |
| 9 // At top-left corner, outside the outer border radius. | |
| 10 shouldBe("document.elementFromPoint(x + 20, y + 20).id", "'container'"); | |
| 11 // At top-left corner, inside outer border radius. | |
| 12 shouldBe("document.elementFromPoint(x + 35, y + 35).id", "'roundedBoxWithout Scrollbars'"); | |
| 13 shouldBe("document.elementFromPoint(x + 60, y + 60).id", "'roundedBoxWithout Scrollbars'"); | |
| 14 // At top-left corner, insider inner border radius. | |
| 15 shouldBe("document.elementFromPoint(x + 68, y + 68).id", "'roundedBoxChildWi thoutScrollbars'"); | |
| 16 // At top-left corner, fully inside border. | |
| 17 shouldBe("document.elementFromPoint(x + 80, y + 80).id", "'roundedBoxChildWi thoutScrollbars'"); | |
| 18 // At bottom-right corner, inside inner border radius. | |
| 19 shouldBe("document.elementFromPoint(x + 230, y + 230).id", "'roundedBoxChild WithoutScrollbars'"); | |
| 20 // At bottom-right corner, insider inner border radius. | |
| 21 shouldBe("document.elementFromPoint(x + 240, y + 240).id", "'roundedBoxWitho utScrollbars'"); | |
| 22 shouldBe("document.elementFromPoint(x + 265, y + 265).id", "'roundedBoxWitho utScrollbars'"); | |
| 23 // At bottom-right corner, outside the outer border radius. | |
| 24 shouldBe("document.elementFromPoint(x + 275, y + 275).id", "'container'"); | |
| 25 | |
| 26 var rectWithScrollbars = roundedBoxWithScrollbars.getBoundingClientRect(); | |
| 27 x = rectWithScrollbars.left; | |
| 28 y = rectWithScrollbars.top; | |
| 29 // At top-left corner with scrollbars, outside the outer border radius. | |
| 30 shouldBe("document.elementFromPoint(x + 20, y + 20).id", "'container'"); | |
| 31 // At top-left corner with scrollbars, inside outer border radius. | |
| 32 shouldBe("document.elementFromPoint(x + 35, y + 35).id", "'roundedBoxWithScr ollbars'"); | |
| 33 shouldBe("document.elementFromPoint(x + 60, y + 60).id", "'roundedBoxWithScr ollbars'"); | |
| 34 // At top-left corner with scrollbars, insider inner border radius. | |
| 35 shouldBe("document.elementFromPoint(x + 68, y + 68).id", "'roundedBoxWithScr ollbarsChild'"); | |
| 36 // At top-left corner with scrollbars, fully inside border. | |
| 37 shouldBe("document.elementFromPoint(x + 80, y + 80).id", "'roundedBoxWithScr ollbarsChild'"); | |
| 38 // At bottom-right corner with scrollbars, inside inner border radius. | |
| 39 shouldBe("document.elementFromPoint(x + 230, y + 230).id", "'roundedBoxWithS crollbarsChild'"); | |
| 40 // At bottom-right corner with scrollbars, insider inner border radius. | |
| 41 shouldBe("document.elementFromPoint(x + 265, y + 265).id", "'roundedBoxWithS crollbars'"); | |
| 42 // At bottom-right corner with scrollbars, outside the outer border radius. | |
| 43 shouldBe("document.elementFromPoint(x + 275, y + 275).id", "'container'"); | |
| 44 } | |
| 45 </script> | |
| 46 <style> | |
| 47 #container { | |
| 48 display: inline-block; | |
| 49 background-color: black; | |
| 50 } | |
| 51 .roundedBox { | |
| 52 width: 200px; | |
| 53 height: 200px; | |
| 54 border-radius: 100px; | |
| 55 background-color: red; | |
| 56 border: 50px solid green; | |
| 57 display: inline-block; | |
| 58 } | |
| 59 .roundedBox:hover { | |
| 60 border-color: red; | |
| 61 } | |
| 62 .roundedBoxChild { | |
| 63 width: 200px; | |
| 64 height: 200px; | |
| 65 background-color: orange; | |
| 66 } | |
| 67 .roundedBoxChild:hover { | |
| 68 background-color: blue; | |
| 69 } | |
| 70 #roundedBoxWithoutScrollbars { | |
| 71 overflow: auto; | |
| 72 } | |
| 73 #roundedBoxWithScrollbars { | |
| 74 overflow: scroll; | |
| 75 } | |
| 76 </style> | |
| 77 <body onload="test()"> | |
| 78 <p>The inner border radius clip should be respected for hit testing.</p> | |
| 79 <div id="container"> | |
| 80 <div id="roundedBoxWithoutScrollbars" class="roundedBox"> | |
| 81 <div id="roundedBoxChildWithoutScrollbars" class="roundedBoxChild">< /div> | |
| 82 </div> | |
| 83 <div id="roundedBoxWithScrollbars" class="roundedBox"> | |
| 84 <div id="roundedBoxWithScrollbarsChild" class="roundedBoxChild"></di v> | |
| 85 </div> | |
| 86 </div> | |
| 87 <div id="console"></div> | |
| 88 </body> | |
| OLD | NEW |
