<!DOCTYPE html>
<title>Hit-test of <text> does not hit-test the "background" (w/ small font size)</title>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
g text:hover {
fill: red;
cursor: crosshair;
}
</style>
<svg font-family="Ahem" font-size="1.6" fill="blue" width="600" height="300">
<g transform="matrix(50,0,0,50,-400,-800)">
<text x="9.4" y="17.80">SELECT</text>
</g>
<!-- crbug.com/1295031 -->
<g transform="scale(200) translate(0, 0.6)">
<rect width="1135800" height="578250" fill="transparent"></rect>
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform="scale(0.9589912023158114)">
<g transform='translate(100, 0) scale(1)'>
<rect class='rect' width='500' height='600' fill="yellow"></rect>
<text id='fifth' class='fifth test_text' transform='translate(0, 200) scale(10)' font-size="12">foo</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<script>
// The text bouding box in the document is (70,26) - (550,106).
test(function() {
var textElement = document.querySelector('text');
// Should hit <text>.
[
{ x: 71, y: 28 },
{ x: 71, y: 105 },
{ x: 540, y: 105 },
{ x: 540, y: 28 },
].forEach(function(point) {
assert_equals(document.elementFromPoint(point.x, point.y), textElement, point.x + ',' + point.y);
});
var svgRoot = document.querySelector('svg');
// Should not hit <text>.
[
{ x: 68.5, y: 26 },
{ x: 68.5, y: 105 },
{ x: 69, y: 107 },
{ x: 300, y: 24.5 },
{ x: 300, y: 107 },
{ x: 550, y: 26 },
{ x: 550, y: 105 },
{ x: 550, y: 107 },
].forEach(function(point) {
assert_equals(document.elementFromPoint(point.x, point.y), svgRoot, point.x + ',' + point.y);
});
});
test(() => {
let textElement = document.querySelectorAll('text')[1];
let background = document.querySelector('rect');
// Should not hit <text>.
[
{ x: 1, y: 200 },
].forEach(function(point) {
assert_equals(document.elementFromPoint(point.x, point.y), background, point.x + ',' + point.y);
});
}, 'crbug.com/1295031');
</script>
Codebase Browser
chromium