Bug 1472406 [wpt PR 11742] - Add layout test for hit testing fragmented inline with rounded border, a=testonly
authorXiaocheng Hu <xiaochengh@chromium.org>
Sat, 07 Jul 2018 00:10:09 +0000
changeset 426135 9ca4af7ff1df0275ca25eed4dc5d14a64d52b0d3
parent 426134 1dd327dac2f27cf226aa340fd8e8329c555f4b69
child 426136 a7b33b087b15231fe7977313f4e4ae3270d429c8
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
bugs1472406, 11742, 859233, 1121584, 571963
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 1472406 [wpt PR 11742] - Add layout test for hit testing fragmented inline with rounded border, a=testonly Automatic update from web-platform-testsAdd layout test for hit testing fragmented inline with rounded border Bug: 859233 Cq-Include-Trybots: luci.chromium.try :linux_layout_tests_layout_ng Change-Id: Ifefe2b4f1b25627c53a467c27937271de9efe450 Reviewed-on: https://chromium-review.googlesource.com/1121584 Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Aleks Totic <atotic@chromium.org> Cr-Commit-Position: refs/heads/master@{#571963} -- wpt-commits: 8213774aa68cc63a195b5d4b82a6ec5f8279e0b9 wpt-pr: 11742 MozReview-Commit-ID: 7H4Ukf4zcBO
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
@@ -317614,16 +317614,22 @@
     ]
    ],
    "css/css-box/parsing/width-valid.html": [
     [
      "/css/css-box/parsing/width-valid.html",
      {}
     ]
    ],
+   "css/css-break/hit-test-inline-fragmentation-with-border-radius.html": [
+    [
+     "/css/css-break/hit-test-inline-fragmentation-with-border-radius.html",
+     {}
+    ]
+   ],
    "css/css-cascade/all-prop-initial-xml.html": [
     [
      "/css/css-cascade/all-prop-initial-xml.html",
      {}
     ]
    ],
    "css/css-cascade/inherit-initial.html": [
     [
@@ -505673,16 +505679,20 @@
   "css/css-break/META.yml": [
    "4840f714501765d5bf6f0986fd453d5bf1ac3787",
    "support"
   ],
   "css/css-break/break-before-always-001.xht": [
    "926ed3f96ba7b5c6dee79ea417746cbd60342579",
    "visual"
   ],
+  "css/css-break/hit-test-inline-fragmentation-with-border-radius.html": [
+   "d0b63d150a77ee6e84c05110fb97cc2befa0e251",
+   "testharness"
+  ],
   "css/css-cascade/META.yml": [
    "d1a7ec7e6b46b861cff2ce11a7f793635a81a0c6",
    "support"
   ],
   "css/css-cascade/all-prop-001-ref.html": [
    "257c3381ff5d565a6d5d45716b717fadad8a4922",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"/>
+<style>
+div {
+  margin: 20px;
+}
+
+span.round {
+  padding: 20px;
+  line-height: 100px;
+  font-size: 40px;
+  border-radius: 40px;
+  background-color: yellow;
+}
+</style>
+
+<div>
+<span id="horizontal" class="round">FOO<br>BAR</span>
+</div>
+
+<div style="writing-mode:vertical-lr">
+<span id="vertical-lr" class="round">FOO<br>BAR</span>
+</div>
+
+<div style="writing-mode:vertical-rl">
+<span id="vertical-rl" class="round">FOO<br>BAR</span>
+</div>
+
+<script>
+// 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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
+}, 'Vertical RL line 2, hit test inside top-right right-angled corner')
+</script>