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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Character-level mirroring</title>
<meta
name="assert"
content="Operators 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 characters 0x007B, 0x0029, 0x007D and 0x0028
(left and right parentheses and brackets), which respectively have
widths of 1em, 2em, 3em and 4em for any stretch size (base glyph,
size variants and glyph assemblies). */
@font-face {
font-family: operators;
src: url("/fonts/math/stretchy-text-direction-asymetrical.woff");
}
math {
font-family: operators;
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 base glyph, size variant and glyph assembly.
document.querySelectorAll("p").forEach(
(paragraph, i) => {
mspace = paragraph.querySelector("mspace");
test(function () {
paragraph.querySelectorAll("mo").forEach((mo, j) => {
box = mo.getBoundingClientRect();
// Measure the width of the characters { and ), then the
// mirrored } and (.
assert_approx_equals(
box.width,
font_size * (j + 1),
epsilon,
`operator ${mo.textContent} ${
window.getComputedStyle(mo).direction
}`,
);
});
}, `${test_cases[i]} (${mspace.getAttribute("height")})`);
},
);
done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math>
<mrow>
<mo>{</mo>
<mspace height="0.5em" />
<mo>)</mo>
</mrow>
</math>
<math dir="rtl">
<mrow>
<mo>{</mo>
<mspace height="0.5em" />
<mo>)</mo>
</mrow>
</math>
</p>
<hr />
<p>
<math>
<mrow>
<mo>{</mo>
<mspace height="1em" />
<mo>)</mo>
</mrow>
</math>
<math dir="rtl">
<mrow>
<mo>{</mo>
<mspace height="1em" />
<mo>)</mo>
</mrow>
</math>
</p>
<hr />
<p>
<math>
<mrow>
<mo>{</mo>
<mspace height="4em" />
<mo>)</mo>
</mrow>
</math>
<math dir="rtl">
<mrow>
<mo>{</mo>
<mspace height="4em" />
<mo>)</mo>
</mrow>
</math>
</p>
</body>
</html>
|
