Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-borders/tentative/border-shape/border-shape-circle-hit-test-overflow-clip-margin.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Borders Test: hit testing border-shape circle with overflow clip parent</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
#outer {
width: 100px;
height: 100px;
overflow: clip;
overflow-clip-margin: 50px;
}
#target {
width: 100px;
height: 100px;
border-shape: circle(45px at 50% 50%);
border: 10px solid purple;
background: green;
}
</style>
<div id="outer">
<div id="target"></div>
</div>
<script>
function getCenter(el) {
const rect = el.getBoundingClientRect();
return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
}
function polarToXY(center, radius, angleRad) {
return {
x: Math.round(center.x + radius * Math.cos(angleRad)),
y: Math.round(center.y + radius * Math.sin(angleRad))
};
}
promise_test(async t => {
const target = document.getElementById('target');
const center = getCenter(target);
const strokeWidthHalf = 5; // 10px border-width
const circleRadius = 45 + strokeWidthHalf;
// Check a point on the edge of the circle (should hit due to overflow-clip-margin).
const { x, y } = polarToXY(center, circleRadius - 2, 0); // angle 0deg, right edge of the circle, -2px just to make it inside the border-shape contour.
let hit = false;
let hitBody = false;
target.addEventListener('pointerdown', () => { hit = true; }, { once: true });
document.body.addEventListener('pointerdown', () => { hitBody = true; }, { once: true });
await new test_driver.Actions().pointerMove(x, y).pointerDown().pointerUp().send();
assert_true(hit, 'Point outside the clipped part should hit the border-shape due to overflow-clip-margin');
});
</script>