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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Preferred width of mrow-like elements</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
<link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom">
<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded">
<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
<meta name="assert" content="The preferred width of mrow-like elements is the sum of children's width, modulo extra spacing.">
<script src="/mathml/support/feature-detection.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script type="text/javascript">
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function runTests()
{
var epsilon = 1;
function MrowWidthFromChildren(mrow) {
var first = mrow.firstElementChild.getBoundingClientRect();
var last = mrow.lastElementChild.getBoundingClientRect();
return last.right - first.left;
}
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
Array.from(document.getElementById("mspace-tests").getElementsByClassName("shrink-wrap")).forEach((container) => {
var containerWidth = container.getBoundingClientRect().width;
var mrow = container.getElementsByClassName("mrow-like")[0];
var mrowWidth = MrowWidthFromChildren(mrow);
assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName);
});
}, "Preferred width of mrow with mspace children");
test(function() {
assert_true(MathMLFeatureDetection.has_operator_spacing());
Array.from(document.getElementById("tokens-tests").getElementsByClassName("shrink-wrap")).forEach((container) => {
var containerWidth = container.getBoundingClientRect().width;
var mrow = container.getElementsByClassName("mrow-like")[0];
var mrowWidth = MrowWidthFromChildren(mrow);
assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName);
});
}, "Preferred width of mrow with mn and mo children");
done();
}
</script>
<style>
div.shrink-wrap {
background: yellow;
display: inline-block;
margin-top: 5px;
padding-top: 5px;
}
</style>
</head>
<body>
<div id="log"></div>
<div id="mspace-tests">
<div><div class="shrink-wrap">
<math><mrow class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mrow></math>
</div></div>
<div>
<div class="shrink-wrap">
<math><mstyle class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mstyle></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math><mphantom class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mphantom></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math><unknown class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></unknown></math>
</div>
</div>
<div>
</div>
</div>
<div id="tokens-tests">
<div>
<div class="shrink-wrap">
<math><mrow class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mrow></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math><mstyle class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mstyle></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math><mphantom class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mphantom></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math><unknown class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></unknown></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math><mfenced class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mfenced></math>
</div>
</div>
<div>
<div class="shrink-wrap">
<math><a class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></a></math>
</div>
</div>
</div>
</p>
</body>
</html>
|
