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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Glyph-level mirroring</title>
<link
rel="help"
href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"
>
<meta
name="assert"
content="Radicals should be mirrored when using RTL text direction"
>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/fonts.js"></script>
<style>
/* This font contains the 0x221A character (radical), and a mirrored
version using the rtlm font feature (radical.rtlm). The base,
variant and assembly widths of the original character are 4em,
while the ones from the rtlm version are 1em. */
@font-face {
font-family: rtlm;
src: url("/fonts/math/radical-rtlm.woff");
}
math {
font-family: rtlm;
font-size: 16px;
}
mspace {
width: 1em;
background: cornflowerblue;
}
</style>
<script>
const epsilon = 1;
const font_size = 16;
const test_cases = [
"Base glyph",
"Size variant",
"Glyph assembly",
];
setup({ explicit_done: true });
window.addEventListener("load", () => {
loadAllFonts().then(runTests);
});
function runTests() {
test(function () {
document.querySelectorAll("math:not([dir='rtl'])").forEach(
(math, i) => {
msqrt = math.firstElementChild;
box = msqrt.getBoundingClientRect();
// The box size should be the width of the mspace (1em)
// plus the expected glyph width (4em in this case).
mspace_width =
msqrt.firstElementChild.getBoundingClientRect().width;
const glyph_width = 4 * font_size;
assert_approx_equals(
box.width,
glyph_width + mspace_width,
epsilon,
test_cases[i],
);
},
);
}, "LTR Direction");
test(function () {
document.querySelectorAll("math[dir='rtl']").forEach(
(math, i) => {
msqrt = math.firstElementChild;
box = msqrt.getBoundingClientRect();
// In this case the expected glyph width is 1em, as it
// should be using the rtlm version.
mspace_width =
msqrt.firstElementChild.getBoundingClientRect().width;
const glyph_width = 1 * font_size;
assert_approx_equals(
box.width,
glyph_width + mspace_width,
epsilon,
test_cases[i],
);
},
);
}, "RTL Direction");
done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math>
<msqrt>
<mspace height="0.5em" />
</msqrt>
</math>
<math dir="rtl">
<msqrt>
<mspace height="0.5em" />
</msqrt>
</math>
</p>
<hr />
<p>
<math>
<msqrt>
<mspace height="1em" />
</msqrt>
</math>
<math dir="rtl">
<msqrt>
<mspace height="1em" />
</msqrt>
</math>
</p>
<hr />
<p>
<math>
<msqrt>
<mspace height="4em" />
</msqrt>
</math>
<math dir="rtl">
<msqrt>
<mspace height="4em" />
</msqrt>
</math>
</p>
</body>
</html>
|
