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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font-relative lengths on an operator</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="help" href="https://w3c.github.io/mathml-core/#dictionary-based-attributes">
<link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators">
<link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements">
<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
<meta name="assert" content="Verify font-relative lengths refer to the core operator, not the embellished operator">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/fonts.js"></script>
<style>
math {
font: 100px/1 Ahem;
}
@font-face {
font-family: operators;
src: url("/fonts/math/operators.woff");
}
mo {
font-family: operators;
}
</style>
<script>
setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });
function runTests() {
var epsilon = 1;
var baseSizePx = 100;
test(function() {
var beforeRight = document.getElementById("before1").getBoundingClientRect().right;
var afterLeft = document.getElementById("after1").getBoundingClientRect().left;
var fontScalePercent = .5;
var lspaceEm = 1;
var moWidthEm = 1;
assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (lspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * lspaceEm");
}, `font-relative lspace refers to the core operator`);
test(function() {
var beforeRight = document.getElementById("before2").getBoundingClientRect().right;
var afterLeft = document.getElementById("after2").getBoundingClientRect().left;
var fontScalePercent = 2;
var rspaceEm = 1;
var moWidthEm = 1;
assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (rspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * rspaceEm");
}, `font-relative rspace refers to the core operator`);
test(function() {
var moStretchSize = document.getElementById("operator1").getBoundingClientRect().height;
var fontScalePercent = .5;
var minsizeEm = 8;
var beforeHeight = document.getElementById("before1").getBoundingClientRect().height;
assert_approx_equals(moStretchSize, baseSizePx * minsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * minsizeEm");
// This is really testing the same thing but do make sure minsize is
// applied i.e. the unconstrained target size is less than the actual
// stretch size.
assert_approx_equals(beforeHeight, moStretchSize / 2, epsilon);
}, `font-relative minsize refers to the core operator`);
test(function() {
var moStretchSize = document.getElementById("operator2").getBoundingClientRect().height;
var fontScalePercent = 2;
var maxsizeEm = 1;
var afterHeight = document.getElementById("after2").getBoundingClientRect().height;
assert_approx_equals(moStretchSize, baseSizePx * maxsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * maxsizeEm");
// This is really testing the same thing but do make sure maxsize is
// applied i.e. the unconstrained target size is more than the actual
// stretch size.
assert_approx_equals(afterHeight, 2 * moStretchSize, epsilon);
}, `font-relative maxsize refers to the core operator`);
done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math>
<mrow>
<mspace id="before1" width="1em" height="1em" depth="1em" style="background: blue"/>
<mrow style="font-size: 50%;">
<mo id="operator1" lspace="1em" rspace="0em" minsize="8em">⥯</mo>
<mspace id="after1" width="1em" height=".5em" depth=".5em" style="background: green"/>
</mrow>
<mn><!-- not space like --></mn>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mrow style="font-size: 200%">
<mspace id="before2" width="1em" height=".5em" depth=".5em" style="background: green"/>
<mo id="operator2" lspace="0em" rspace="1em" maxsize="1em">⥯</mo>
</mrow>
<mspace id="after2" width="1em" height="2em" depth="2em" style="background: blue"/>
<mn><!-- not space like --></mn>
</mrow>
</math>
</p>
</body>
</html>
|
