mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
795639fd2b
This test demonstrates the current broken behavior where hit testing does not respect clip-path boundaries. Clicking outside the clipped circle (but inside the element's bounding box) incorrectly registers as a hit on the element.
30 lines
1.1 KiB
HTML
30 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<style>
|
|
#circle {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: green;
|
|
clip-path: circle(50px at 50px 50px);
|
|
}
|
|
</style>
|
|
<div id="circle"></div>
|
|
<script>
|
|
test(() => {
|
|
const circle = document.getElementById('circle');
|
|
const rect = circle.getBoundingClientRect();
|
|
|
|
// Hit test inside the circle (center of circle at 50px, 50px from element origin)
|
|
const insideHit = document.elementFromPoint(rect.left + 50, rect.top + 50);
|
|
println("Inside circle: " + (insideHit && insideHit.id === 'circle' ? 'PASS' : 'FAIL'));
|
|
|
|
// Hit test outside the circle but inside bounding box (bottom-right corner)
|
|
const outsideHit = document.elementFromPoint(rect.left + 180, rect.top + 180);
|
|
println("Outside circle (in bbox): " + (outsideHit && outsideHit.id !== 'circle' ? 'PASS' : 'FAIL'));
|
|
|
|
// Hit test just inside the circle edge
|
|
const edgeHit = document.elementFromPoint(rect.left + 20, rect.top + 20);
|
|
println("Inside circle edge: " + (edgeHit && edgeHit.id === 'circle' ? 'PASS' : 'FAIL'));
|
|
});
|
|
</script>
|