Bug 1472873 [wpt PR 11760] - [LayoutNG] Fix hit test clipping by fragmented border with round corner, a=testonly
authorXiaocheng Hu <xiaochengh@chromium.org>
Sat, 07 Jul 2018 00:25:10 +0000
changeset 426150 ff5f2bc38d169bef2b15d3de88acd3450e5ebf8c
parent 426149 234b05356393dc6ed3c1919512dc02c31f8a4773
child 426151 410cf3c8e3e2ba776ef338f13f962a5996e5691b
push id34267
push userrgurzau@mozilla.com
push dateWed, 11 Jul 2018 22:05:21 +0000
treeherdermozilla-central@3aca103e4915 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1472873, 11760, 855279, 859233, 1123265, 572079
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1472873 [wpt PR 11760] - [LayoutNG] Fix hit test clipping by fragmented border with round corner, a=testonly Automatic update from web-platform-tests[LayoutNG] Fix hit test clipping by fragmented border with round corner Current NG hit test code decides whether a hit test location is clipped by rounded border by adding border radius to all four corners and then compare with the hit test location. This is wrong if the box is fragmented, where it may have only two or zero rounded corners. This patch changes HitTestClippedOutByBorder() to take the above into consideration. By utilizing |border_edges_|, it can generate the corrected rounded border to be hit tested. Test: This patch slightly modifies WPT hit-test-inline-fragmentation-with-border-radius.html as a workaround of some rounding issue, which is out of the scope of this patch. Bug: 855279, 859233 Cq-Include-Trybots: luci.chromium.try :linux_layout_tests_layout_ng;luci.chromium.try :linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I1e3193f9fc2d5e52ff53d6cb2fcc2a0ae2b3aa43 Reviewed-on: https://chromium-review.googlesource.com/1123265 Reviewed-by: Emil A Eklund <eae@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/master@{#572079} -- wpt-commits: cffbd07683d6a0aa3fc032181dee1f4ac21d3bff wpt-pr: 11760 MozReview-Commit-ID: nouPFy4brV
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -505796,17 +505796,17 @@
    "4840f714501765d5bf6f0986fd453d5bf1ac3787",
    "support"
   ],
   "css/css-break/break-before-always-001.xht": [
    "926ed3f96ba7b5c6dee79ea417746cbd60342579",
    "visual"
   ],
   "css/css-break/hit-test-inline-fragmentation-with-border-radius.html": [
-   "d0b63d150a77ee6e84c05110fb97cc2befa0e251",
+   "92092527c9f739dca5410a0baac8f48522889409",
    "testharness"
   ],
   "css/css-cascade/META.yml": [
    "d1a7ec7e6b46b861cff2ce11a7f793635a81a0c6",
    "support"
   ],
   "css/css-cascade/all-prop-001-ref.html": [
    "257c3381ff5d565a6d5d45716b717fadad8a4922",
--- a/testing/web-platform/tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html
+++ b/testing/web-platform/tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html
@@ -32,237 +32,237 @@ span.round {
 // Hit test horizontal span with border radius
 const horizontalSpan = document.getElementById('horizontal');
 const horizontalDiv = horizontalSpan.parentNode;
 const horizontalRects = horizontalSpan.getClientRects();
 const horizontalLine1 = horizontalRects[0];
 const horizontalLine2 = horizontalRects[1];
 
 test(() => {
-  const x = horizontalLine1.left + 1;
-  const y = horizontalLine1.top + 1;
+  const x = horizontalLine1.left + 5;
+  const y = horizontalLine1.top + 5;
   assert_equals(document.elementFromPoint(x, y), horizontalDiv);
 }, 'Horizontal line 1, hit test outside top-left rounded corner');
 
 test(() => {
   const x = horizontalLine1.left + 20;
   const y = horizontalLine1.top + 20;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 1, hit test inside top-left rounded corner');
 
 test(() => {
-  const x = horizontalLine1.left + 1;
-  const y = horizontalLine1.bottom - 1;
+  const x = horizontalLine1.left + 5;
+  const y = horizontalLine1.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), horizontalDiv);
 }, 'Horizontal line 1, hit test outside bottom-left rounded corner');
 
 test(() => {
   const x = horizontalLine1.left + 20;
   const y = horizontalLine1.bottom - 20;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 1, hit test inside bottom-left rounded corner');
 
 test(() => {
-  const x = horizontalLine1.right - 1;
-  const y = horizontalLine1.top + 1;
+  const x = horizontalLine1.right - 5;
+  const y = horizontalLine1.top + 5;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 1, hit test inside top-right right-angled corner')
 
 test(() => {
-  const x = horizontalLine1.right - 1;
-  const y = horizontalLine1.bottom - 1;
+  const x = horizontalLine1.right - 5;
+  const y = horizontalLine1.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 1, hit test inside bottom-right right-angled corner')
 
 test(() => {
-  const x = horizontalLine2.right - 1;
-  const y = horizontalLine2.top + 1;
+  const x = horizontalLine2.right - 5;
+  const y = horizontalLine2.top + 5;
   assert_equals(document.elementFromPoint(x, y), horizontalDiv);
 }, 'Horizontal line 2, hit test outside top-right rounded corner');
 
 test(() => {
   const x = horizontalLine2.right - 20;
   const y = horizontalLine2.top + 20;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 2, hit test inside top-right rounded corner');
 
 test(() => {
-  const x = horizontalLine2.right - 1;
-  const y = horizontalLine2.bottom - 1;
+  const x = horizontalLine2.right - 5;
+  const y = horizontalLine2.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), horizontalDiv);
 }, 'Horizontal line 2, hit test outside bottom-right rounded corner');
 
 test(() => {
   const x = horizontalLine2.right - 20;
   const y = horizontalLine2.bottom - 20;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 2, hit test inside bottom-right rounded corner');
 
 test(() => {
-  const x = horizontalLine2.left + 1;
-  const y = horizontalLine2.top + 1;
+  const x = horizontalLine2.left + 5;
+  const y = horizontalLine2.top + 5;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 2, hit test inside top-left right-angled corner')
 
 test(() => {
-  const x = horizontalLine2.left + 1;
-  const y = horizontalLine2.bottom - 1;
+  const x = horizontalLine2.left + 5;
+  const y = horizontalLine2.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), horizontalSpan);
 }, 'Horizontal line 2, hit test inside bottom-left right-angled corner')
 
 // Hit test vertical-lr span with border radius
 const verticalLRSpan = document.getElementById('vertical-lr');
 const verticalLRDiv = verticalLRSpan.parentNode;
 const verticalLRRects = verticalLRSpan.getClientRects();
 const verticalLRLine1 = verticalLRRects[0];
 const verticalLRLine2 = verticalLRRects[1];
 
 test(() => {
-  const x = verticalLRLine1.left + 1;
-  const y = verticalLRLine1.top + 1;
+  const x = verticalLRLine1.left + 5;
+  const y = verticalLRLine1.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
 }, 'Vertical LR line 1, hit test outside top-left rounded corner');
 
 test(() => {
   const x = verticalLRLine1.left + 20;
   const y = verticalLRLine1.top + 20;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 1, hit test inside top-left rounded corner');
 
 test(() => {
-  const x = verticalLRLine1.right - 1;
-  const y = verticalLRLine1.top + 1;
+  const x = verticalLRLine1.right - 5;
+  const y = verticalLRLine1.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
 }, 'Vertical LR line 1, hit test outside top-right rounded corner');
 
 test(() => {
   const x = verticalLRLine1.right - 20;
   const y = verticalLRLine1.top + 20;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 1, hit test inside top-right rounded corner');
 
 test(() => {
-  const x = verticalLRLine1.left + 1;
-  const y = verticalLRLine1.bottom - 1;
+  const x = verticalLRLine1.left + 5;
+  const y = verticalLRLine1.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 1, hit test inside bottom-left right-angled corner')
 
 test(() => {
-  const x = verticalLRLine1.right - 1;
-  const y = verticalLRLine1.bottom - 1;
+  const x = verticalLRLine1.right - 5;
+  const y = verticalLRLine1.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 1, hit test inside bottom-right right-angled corner')
 
 test(() => {
-  const x = verticalLRLine2.left + 1;
-  const y = verticalLRLine2.bottom - 1;
+  const x = verticalLRLine2.left + 5;
+  const y = verticalLRLine2.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
 }, 'Vertical LR line 2, hit test outside bottom-left rounded corner');
 
 test(() => {
   const x = verticalLRLine2.left + 20;
   const y = verticalLRLine2.bottom - 20;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 2, hit test inside bottom-left rounded corner');
 
 test(() => {
-  const x = verticalLRLine2.right - 1;
-  const y = verticalLRLine2.bottom - 1;
+  const x = verticalLRLine2.right - 5;
+  const y = verticalLRLine2.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
 }, 'Vertical LR line 2, hit test outside bottom-right rounded corner');
 
 test(() => {
   const x = verticalLRLine2.right - 20;
   const y = verticalLRLine2.bottom - 20;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 2, hit test inside bottom-right rounded corner');
 
 test(() => {
-  const x = verticalLRLine2.left + 1;
-  const y = verticalLRLine2.top + 1;
+  const x = verticalLRLine2.left + 5;
+  const y = verticalLRLine2.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 2, hit test inside top-left right-angled corner')
 
 test(() => {
-  const x = verticalLRLine2.right - 1;
-  const y = verticalLRLine2.top + 1;
+  const x = verticalLRLine2.right - 5;
+  const y = verticalLRLine2.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
 }, 'Vertical LR line 2, hit test inside top-right right-angled corner')
 
 // Hit test vertical-rl span with border radius
 const verticalRLSpan = document.getElementById('vertical-rl');
 const verticalRLDiv = verticalRLSpan.parentNode;
 const verticalRLRects = verticalRLSpan.getClientRects();
 const verticalRLLine1 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[0] : verticalRLRects[1];
 const verticalRLLine2 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[1] : verticalRLRects[0];
 
 test(() => {
-  const x = verticalRLLine1.left + 1;
-  const y = verticalRLLine1.top + 1;
+  const x = verticalRLLine1.left + 5;
+  const y = verticalRLLine1.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
 }, 'Vertical RL line 1, hit test outside top-left rounded corner');
 
 test(() => {
   const x = verticalRLLine1.left + 20;
   const y = verticalRLLine1.top + 20;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 1, hit test inside top-left rounded corner');
 
 test(() => {
-  const x = verticalRLLine1.right - 1;
-  const y = verticalRLLine1.top + 1;
+  const x = verticalRLLine1.right - 5;
+  const y = verticalRLLine1.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
 }, 'Vertical RL line 1, hit test outside top-right rounded corner');
 
 test(() => {
   const x = verticalRLLine1.right - 20;
   const y = verticalRLLine1.top + 20;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 1, hit test inside top-right rounded corner');
 
 test(() => {
-  const x = verticalRLLine1.left + 1;
-  const y = verticalRLLine1.bottom - 1;
+  const x = verticalRLLine1.left + 5;
+  const y = verticalRLLine1.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 1, hit test inside bottom-left right-angled corner')
 
 test(() => {
-  const x = verticalRLLine1.right - 1;
-  const y = verticalRLLine1.bottom - 1;
+  const x = verticalRLLine1.right - 5;
+  const y = verticalRLLine1.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 1, hit test inside bottom-right right-angled corner')
 
 test(() => {
-  const x = verticalRLLine2.left + 1;
-  const y = verticalRLLine2.bottom - 1;
+  const x = verticalRLLine2.left + 5;
+  const y = verticalRLLine2.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
 }, 'Vertical RL line 2, hit test outside bottom-left rounded corner');
 
 test(() => {
   const x = verticalRLLine2.left + 20;
   const y = verticalRLLine2.bottom - 20;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 2, hit test inside bottom-left rounded corner');
 
 test(() => {
-  const x = verticalRLLine2.right - 1;
-  const y = verticalRLLine2.bottom - 1;
+  const x = verticalRLLine2.right - 5;
+  const y = verticalRLLine2.bottom - 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
 }, 'Vertical RL line 2, hit test outside bottom-right rounded corner');
 
 test(() => {
   const x = verticalRLLine2.right - 20;
   const y = verticalRLLine2.bottom - 20;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 2, hit test inside bottom-right rounded corner');
 
 test(() => {
-  const x = verticalRLLine2.left + 1;
-  const y = verticalRLLine2.top + 1;
+  const x = verticalRLLine2.left + 5;
+  const y = verticalRLLine2.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 2, hit test inside top-left right-angled corner')
 
 test(() => {
-  const x = verticalRLLine2.right - 1;
-  const y = verticalRLLine2.top + 1;
+  const x = verticalRLLine2.right - 5;
+  const y = verticalRLLine2.top + 5;
   assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
 }, 'Vertical RL line 2, hit test inside top-right right-angled corner')
 </script>