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/border-shape/border-shape-replaced-hit-test.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Borders Test: hit testing border-shape on replaced element</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(50px at 50% 50%);
background: green;
}
</style>
<canvas id="target"></canvas>
<script>
promise_test(async t => {
const target = document.getElementById('target');
const rect = target.getBoundingClientRect();
// Point in the corner, outside the circle
const x = rect.left + 10;
const y = rect.top + 10;
let hit = false;
target.addEventListener('pointerdown', () => { hit = true; }, { once: true });
await new test_driver.Actions().pointerMove(x, y).pointerDown().pointerUp().send();
assert_false(hit, 'Point outside the border-shape should not hit the element');
});
</script>