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
|
<!DOCTYPE html>
<title>SVGTextContentElement.getStartPositionOfChar and getEndPositionOfChar</title>
<link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getStartPositionOfChar">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
text {
font: 10px/1 Ahem;
}
#vrl {
writing-mode: vertical-rl;
}
#vlr {
writing-mode: vertical-lr;
}
#srl {
writing-mode: sideways-rl;
}
#slr {
writing-mode: sideways-lr;
}
</style>
<svg>
<text id="vrl" x="100" y="100">ABC</text>
<text id="vlr" x="100" y="100">ABC</text>
<text id="srl" x="100" y="100">ABC</text>
<text id="slr" x="100" y="100">ABC</text>
</svg>
<script>
const FONT_SIZE = 10;
function $(sel) { return document.querySelector(sel); }
setup({ explicit_done: true });
document.fonts.ready.then(() => {
test(() => {
const target = $('#vrl');
const base = target.getStartPositionOfChar(0).y;
assert_equals(target.getEndPositionOfChar(0).y, base + FONT_SIZE);
assert_equals(target.getStartPositionOfChar(1).y, base + FONT_SIZE);
assert_equals(target.getEndPositionOfChar(1).y, base + FONT_SIZE * 2);
assert_equals(target.getStartPositionOfChar(2).y, base + FONT_SIZE * 2);
assert_equals(target.getEndPositionOfChar(2).y, base + FONT_SIZE * 3);
}, 'vertical-rl');
test(() => {
const target = $('#vlr');
const base = target.getStartPositionOfChar(0).y;
assert_equals(target.getEndPositionOfChar(0).y, base + FONT_SIZE);
assert_equals(target.getStartPositionOfChar(1).y, base + FONT_SIZE);
assert_equals(target.getEndPositionOfChar(1).y, base + FONT_SIZE * 2);
assert_equals(target.getStartPositionOfChar(2).y, base + FONT_SIZE * 2);
assert_equals(target.getEndPositionOfChar(2).y, base + FONT_SIZE * 3);
}, 'vertical-lr');
test(() => {
const target = $('#srl');
const base = target.getStartPositionOfChar(0).y;
assert_equals(target.getEndPositionOfChar(0).y, base + FONT_SIZE);
assert_equals(target.getStartPositionOfChar(1).y, base + FONT_SIZE);
assert_equals(target.getEndPositionOfChar(1).y, base + FONT_SIZE * 2);
assert_equals(target.getStartPositionOfChar(2).y, base + FONT_SIZE * 2);
assert_equals(target.getEndPositionOfChar(2).y, base + FONT_SIZE * 3);
}, 'sideways-rl');
test(() => {
const target = $('#slr');
const base = target.getStartPositionOfChar(0).y;
assert_equals(target.getEndPositionOfChar(0).y, base - FONT_SIZE);
assert_equals(target.getStartPositionOfChar(1).y, base - FONT_SIZE);
assert_equals(target.getEndPositionOfChar(1).y, base - FONT_SIZE * 2);
assert_equals(target.getStartPositionOfChar(2).y, base - FONT_SIZE * 2);
assert_equals(target.getEndPositionOfChar(2).y, base - FONT_SIZE * 3);
}, 'sideways-lr');
done();
});
</script>
|
