Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-borders/tentative/border-shape/border-shape-circle-hit-test.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Borders Test: hit testing border-shape circle</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>
#target {
width: 100px;
height: 100px;
border-shape: circle(45px at 50% 50%);
border: 10px solid purple;
background: green;
}
</style>
<div id="target"></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 points from center to the edge of the circle (should hit).
for (let r = 0; r < circleRadius; r += 5) {
let angle = Math.random() * 2 * Math.PI;
const { x, y } = polarToXY(center, r, angle);
let hit = false;
target.addEventListener('pointerdown', () => { hit = true; }, { once: true });
await new test_driver.Actions().pointerMove(x, y).pointerDown().pointerUp().send();
assert_true(hit, `Point at radius ${r} should hit the element`);
}
// Check a point just outside the circle (should not hit).
const { x: outX, y: outY } = polarToXY(center, circleRadius + 1, Math.PI / 4);
let hit = false;
target.addEventListener('pointerdown', () => { hit = true; }, { once: true });
await new test_driver.Actions().pointerMove(outX, outY).pointerDown().pointerUp().send();
assert_false(hit, 'Point outside the border-shape should not hit the element');
});
</script>