1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.text.measure.selection-rects.tentative</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body class="show_output">
<h1>2d.text.measure.selection-rects.tentative</h1>
<p class="desc">Check that TextMetrics::getSelectionRects() matches its DOM equivalent.</p>
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<ul id="d"></ul>
<script>
var t = async_test("Check that TextMetrics::getSelectionRects() matches its DOM equivalent.");
_addTest(function(canvas, ctx) {
function placeAndSelectTextInDOM(text, from, to) {
const el = document.createElement("div");
el.innerHTML = text;
el.style.font = '50px sans-serif';
document.body.appendChild(el);
let range = document.createRange();
range.setStart(el.childNodes[0], 0);
range.setEnd(el.childNodes[0], text.length);
const parent = range.getClientRects()[0];
range.setStart(el.childNodes[0], from);
range.setEnd(el.childNodes[0], to);
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
let sel_rects = sel.getRangeAt(0).getClientRects();
document.body.removeChild(el);
for(let i = 0 ; i < sel_rects.length ; ++i) {
sel_rects[i].x -= parent.x;
sel_rects[i].y -= parent.y;
}
return sel_rects;
}
function checkRectListsMatch(list_a, list_b) {
_assertSame(list_a.length, list_b.length, "list_a.length", "list_b.length");
for(let i = 0 ; i < list_a.length ; ++i) {
assert_approx_equals(list_a[i].x, list_b[i].x, 1.0);
assert_approx_equals(list_a[i].width, list_b[i].width, 1.0);
assert_approx_equals(list_a[i].height, list_b[i].height, 1.0);
// Y-position not tested here as getting the baseline for text in the
// DOM is not straightforward.
}
}
ctx.font = '50px sans-serif';
const kTexts = [
'UNAVAILABLE',
'ππΆπ',
'οΌοΌγοΌοΌ'
]
for (const text of kTexts) {
const tm = ctx.measureText(text);
// First character.
checkRectListsMatch(
tm.getSelectionRects(0, 1),
placeAndSelectTextInDOM(text, 0, 1)
);
// Last character.
checkRectListsMatch(
tm.getSelectionRects(text.length - 1, text.length),
placeAndSelectTextInDOM(text, text.length - 1, text.length)
);
// Whole string.
checkRectListsMatch(
tm.getSelectionRects(0, text.length),
placeAndSelectTextInDOM(text, 0, text.length)
);
// Intermediate string.
checkRectListsMatch(
tm.getSelectionRects(1, text.length - 1),
placeAndSelectTextInDOM(text, 1, text.length - 1)
);
// Invalid start > end string. Creates 0 width rectangle.
checkRectListsMatch(
tm.getSelectionRects(3, 2),
placeAndSelectTextInDOM(text, 3, 2)
);
checkRectListsMatch(
tm.getSelectionRects(1, 0),
placeAndSelectTextInDOM(text, 1, 0)
);
}
});
</script>
|
