<!DOCTYPE html>
<title>Clip-path zoom is ignored for hit testing</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path">
<link rel="help" href="https://drafts.fxtf.org/css-masking/#elementdef-clippath">
<link rel="help" href="https://crbug.com/1480029" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#clipped {
width: 200px;
height: 200px;
background: red;
clip-path: url(#clipPathZoom);
}
#target {
border: 50px solid red;
width: 100px;
height: 100px;
background: green;
}
#clipPathZoom {
/* Zoom on clipPath is unspecified. Ignore it for now. */
zoom: 0.5;
}
</style>
<div id="clipped">
<div id="target"></div>
</div>
<svg width="200" height="0">
<defs>
<clipPath id="clipPathZoom" clipPathUnits="objectBoundingBox">
<!-- If objectBoundingBox is 200x200, this will clip to 50,50 100x100. -->
<rect x="0.25" y="0.25" width="0.5" height="0.5"></rect>
</clipPath>
</defs>
</svg>
<script>
function points_inside_rect(x, y, width, height) {
return [
[x + 1, y + 1],
[x + width - 1, y + 1],
[x + 1, y + height - 1],
[x + width - 1, y + height - 1]
];
}
function points_outside_rect(x, y, width, height) {
return [
[x + 1, y - 1],
[x + width - 1, y - 1],
[x + 1, y + height + 1],
[x + width - 1, y - 1],
[x - 1, y + 1],
[x + width + 1, y + 1],
[x - 1, y + height - 1],
[x + width + 1, y + height - 1]
];
}
test(function() {
// Check 58,58 instead of 50,50 because of the body's 8px margin.
for (let point of points_inside_rect(58, 58, 100, 100)) {
let result = document.elementFromPoint(point[0], point[1]);
assert_equals(result, target, point.join(',') + ' should hit #target');
}
for (let point of points_outside_rect(58, 58, 100, 100)) {
let result = document.elementFromPoint(point[0], point[1]);
assert_equals(result, document.body, point.join(',') + ' should hit body, not #target');
}
});
</script>
Codebase Browser
chromium