third_party/WebKit/LayoutTests/hittesting/inner-border-radius-hittest.html - Issue 1513663002: Include inner border radius in block hit testing

Side by Side Diff: third_party/WebKit/LayoutTests/hittesting/inner-border-radius-hittest.html

Issue 1513663002: Include inner border radius in block hit testing (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Create hittesting directory for tests Created 5 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/hittesting/border-radius-hittest-expected.txt ('k') | third_party/WebKit/LayoutTests/hittesting/inner-border-radius-hittest-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 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