mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 05:39:41 +02:00
bcc76beaef
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
268 lines
9.7 KiB
HTML
268 lines
9.7 KiB
HTML
<!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 + 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 + 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 - 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 - 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 - 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 - 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 + 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 + 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 + 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 - 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 + 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 - 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 + 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 - 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 + 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 - 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 + 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 - 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 + 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 - 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 + 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 - 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 + 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 - 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>
|