Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/hit-test-stacking-context-parent-border-radius.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Hit Test with Stacking Context</title>
<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
<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>