<!DOCTYPE html>
<title>Hit-test of text with fractional (< 1) font-size and small (high scalefactor) viewBox</title>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
svg {
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
}
</style>
<svg viewBox="0 0 22 28" font-family="Ahem" font-size="0.125" fill="blue">
<text y="2.438"><a xlink:href="#">ABCDEFGH</a></text>
<text y="4.698" x="7.571"><a xlink:href="#">ABCDEFGH</a></text>
<text y="1" x="0" transform="scale(10)"><a xlink:href="#">Link#3</a></text>
</svg>
<script>
test(function() {
var links = document.querySelectorAll('a');
// The ideal bounding box of the first link in the document is
// (0.00, 85.02) - (36.36, 89.56). However, we should have some
// tolerance because our scaled font size is an integer.
[
{ x: 2, y: 86 },
{ x: 4, y: 87 },
{ x: 2, y: 88 },
{ x: 6, y: 86 },
{ x: 4, y: 87 },
{ x: 6, y: 88 },
{ x: 10, y: 87 },
{ x: 14, y: 87 },
{ x: 18, y: 87 },
{ x: 22, y: 87 },
{ x: 26, y: 87 },
].forEach(function(point) {
assert_equals(document.elementFromPoint(point.x, point.y), links[0], point.x + ',' + point.y);
});
// The ideal bounding box of the second link in the document is
// (275.31, 167.20) - (311.67, 171.75). However, we should have some
// tolerance because our scaled font size is an integer.
[
{ x: 278, y: 169 },
{ x: 276, y: 171 },
{ x: 278, y: 169 },
{ x: 280, y: 171 },
{ x: 284, y: 169 },
{ x: 288, y: 169 },
{ x: 292, y: 169 },
{ x: 296, y: 169 },
{ x: 300, y: 169 },
].forEach(function(point) {
assert_equals(document.elementFromPoint(point.x, point.y), links[1], point.x + ',' + point.y);
});
assert_equals(document.elementFromPoint(1, 330), links[2], '1,330');
});
</script>
Codebase Browser
chromium