1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!DOCTYPE html>
<title>Hit Test with Stacking Context</title>
<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius">
<link rel="help" href="https://issues.chromium.org/issues/40811639">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#parent {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
}
#child {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="parent">
<div id="child"></div>
</div>
<script>
function elementFromPointOutsideParentBorderRadius() {
const rect = document.getElementById('parent').getBoundingClientRect();
return document.elementFromPoint(rect.left + 27, rect.bottom - 5);
}
function elementFromPointInsideParentBorderRadius() {
const rect = document.getElementById('parent').getBoundingClientRect();
return document.elementFromPoint(rect.left + 32, rect.bottom - 10);
}
test(() => {
assert_equals(elementFromPointOutsideParentBorderRadius(), document.body);
assert_equals(elementFromPointInsideParentBorderRadius(), child);
}, 'Hit testing respects border-radius clipping on elements without creating stacking contexts');
test(() => {
child.style = 'will-change: transform';
assert_equals(elementFromPointOutsideParentBorderRadius(), document.body);
assert_equals(elementFromPointInsideParentBorderRadius(), child);
child.style = '';
}, 'Hit testing respects border-radius clipping on elements with will-change transform');
test(() => {
child.style = 'opacity: 0.2';
assert_equals(elementFromPointOutsideParentBorderRadius(), document.body);
assert_equals(elementFromPointInsideParentBorderRadius(), child);
child.style = '';
}, 'Hit testing respects border-radius clipping on elements with opacity < 1');
test(() => {
child.style = 'height: 1000px; transform: translate(0, -500px);';
assert_equals(elementFromPointOutsideParentBorderRadius(), document.body);
assert_equals(elementFromPointInsideParentBorderRadius(), child);
child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a transform property');
test(() => {
child.style = 'position: relative; top: 30px;';
assert_equals(elementFromPointOutsideParentBorderRadius(), document.body);
assert_equals(elementFromPointInsideParentBorderRadius(), child);
child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a PaintOffset from the container');
test(() => {
child.style = 'position: relative; top: 30px; overflow: scroll;';
assert_equals(elementFromPointOutsideParentBorderRadius(), document.body);
assert_equals(elementFromPointInsideParentBorderRadius(), child);
child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a PaintOffsetTranslation from the container');
test(() => {
child.style = 'position: relative; top: 30px; overflow: scroll;';
document.body.style.margin = '50px';
const container = document.createElement('div');
container.style.width = '50px';
container.style.height = '50px';
container.style.overflow = 'scroll';
container.appendChild(document.getElementById('parent'));
document.body.appendChild(container);
container.scrollTop = container.scrollHeight;
container.scrollLeft = 0;
const offset = container.getBoundingClientRect().left;
const curY = offset + 10;
assert_equals(document.elementFromPoint(offset, curY), container);
assert_equals(document.elementFromPoint(offset + 10, curY), child);
child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a different coordinate space');
</script>
|
