Skip to content

Commit e9eb3a7

Browse files
fred-wangfred-wang
committed
MathML: Add tests for padding / margin / border-width
These are very basic tests to check support for w3c/mathml#14 Put in a dedicated folder since it's likely that we need a more lot tests.
1 parent 99422b9 commit e9eb3a7

File tree

4 files changed

+324
-0
lines changed

4 files changed

+324
-0
lines changed

‎mathml/relations/css-styling/padding-border-margin/border-001.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>border</title>
6+
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
7+
<meta name="assert" content="Verify that border is taken into account.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="helper.js"></script>
11+
<script>
12+
var epsilon = 1;
13+
14+
setup({ explicit_done: true });
15+
window.addEventListener("load", runTests);
16+
17+
function runTests() {
18+
test(function() {
19+
var s = measureSpaceAround("mrow-border")
20+
assert_approx_equals(s.left, 20, epsilon, "left border");
21+
assert_approx_equals(s.right, 30, epsilon, "right border");
22+
assert_approx_equals(s.top, 40, epsilon, "top border");
23+
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
24+
}, "Border properties on mrow");
25+
26+
test(function() {
27+
var s = measureSpaceAround("mrow-border-shorthand")
28+
assert_approx_equals(s.left, 20, epsilon, "left border");
29+
assert_approx_equals(s.right, 20, epsilon, "right border");
30+
assert_approx_equals(s.top, 20, epsilon, "top border");
31+
assert_approx_equals(s.bottom, 20, epsilon, "bottom border");
32+
}, "Border properties on mrow (shorthand)");
33+
34+
test(function() {
35+
var s = measureSpaceAround("mrow-border-logical")
36+
assert_approx_equals(s.left, 20, epsilon, "left border");
37+
assert_approx_equals(s.right, 30, epsilon, "right border");
38+
assert_approx_equals(s.top, 40, epsilon, "top border");
39+
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
40+
}, "Border properties on mrow (logical)");
41+
42+
test(function() {
43+
var s = measureSpaceAround("mrow-border-logical-shorthand")
44+
assert_approx_equals(s.left, 20, epsilon, "left border");
45+
assert_approx_equals(s.right, 20, epsilon, "right border");
46+
assert_approx_equals(s.top, 30, epsilon, "top border");
47+
assert_approx_equals(s.bottom, 30, epsilon, "bottom border");
48+
}, "Border properties on mrow (logical, shorthand)");
49+
50+
done();
51+
}
52+
</script>
53+
</head>
54+
<body>
55+
<div id="log"></div>
56+
<p>
57+
<math>
58+
<mrow>
59+
<mrow id="mrow-border"
60+
style="border-left: 20px;
61+
border-right: 30px;
62+
border-top: 40px;
63+
border-bottom: 50px;">
64+
<mspace width="50px" height="50px"></mspace>
65+
</mrow>
66+
</mrow>
67+
</math>
68+
</p>
69+
<p>
70+
<math>
71+
<mrow>
72+
<mrow id="mrow-border-shorthand"
73+
style="border: 20px;">
74+
<mspace width="50px" height="50px"></mspace>
75+
</mrow>
76+
</mrow>
77+
</math>
78+
</p>
79+
<p>
80+
<math>
81+
<mrow>
82+
<mrow id="mrow-border-logical"
83+
style="border-inline-start: 20px;
84+
border-inline-end: 30px;
85+
border-block-start: 40px;
86+
border-block-end: 50px;">
87+
<mspace width="50px" height="50px"></mspace>
88+
</mrow>
89+
</mrow>
90+
</math>
91+
</p>
92+
<p>
93+
<math>
94+
<mrow>
95+
<mrow id="mrow-border-logical-shorthand"
96+
style="border-inline: 20px;
97+
border-block: 30px;">
98+
<mspace width="50px" height="50px"></mspace>
99+
</mrow>
100+
</mrow>
101+
</math>
102+
</p>
103+
</body>
104+
</html>

‎mathml/relations/css-styling/padding-border-margin/helper.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
function measureSpaceAround(id) {
2+
var mrow = document.getElementById(id);
3+
var mrowBox = mrow.getBoundingClientRect();
4+
var parentBox = mrow.parentNode.getBoundingClientRect();
5+
var childBox = mrow.firstElementChild.getBoundingClientRect();
6+
return {
7+
left: childBox.left - parentBox.left,
8+
right: parentBox.right - childBox.right,
9+
top: childBox.top - parentBox.top,
10+
bottom: parentBox.bottom - childBox.bottom
11+
};
12+
}

‎mathml/relations/css-styling/padding-border-margin/margin-001.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>margin</title>
6+
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
7+
<meta name="assert" content="Verify that margin is taken into account.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="helper.js"></script>
11+
<script>
12+
var epsilon = 1;
13+
14+
setup({ explicit_done: true });
15+
window.addEventListener("load", runTests);
16+
17+
function runTests() {
18+
test(function() {
19+
var s = measureSpaceAround("mrow-margin")
20+
assert_approx_equals(s.left, 20, epsilon, "left margin");
21+
assert_approx_equals(s.right, 30, epsilon, "right margin");
22+
assert_approx_equals(s.top, 40, epsilon, "top margin");
23+
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
24+
}, "Margin properties on mrow");
25+
26+
test(function() {
27+
var s = measureSpaceAround("mrow-margin-shorthand")
28+
assert_approx_equals(s.left, 20, epsilon, "left margin");
29+
assert_approx_equals(s.right, 20, epsilon, "right margin");
30+
assert_approx_equals(s.top, 20, epsilon, "top margin");
31+
assert_approx_equals(s.bottom, 20, epsilon, "bottom margin");
32+
}, "Margin properties on mrow (shorthand)");
33+
34+
test(function() {
35+
var s = measureSpaceAround("mrow-margin-logical")
36+
assert_approx_equals(s.left, 20, epsilon, "left margin");
37+
assert_approx_equals(s.right, 30, epsilon, "right margin");
38+
assert_approx_equals(s.top, 40, epsilon, "top margin");
39+
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
40+
}, "Margin properties on mrow (logical)");
41+
42+
test(function() {
43+
var s = measureSpaceAround("mrow-margin-logical-shorthand")
44+
assert_approx_equals(s.left, 20, epsilon, "left margin");
45+
assert_approx_equals(s.right, 20, epsilon, "right margin");
46+
assert_approx_equals(s.top, 30, epsilon, "top margin");
47+
assert_approx_equals(s.bottom, 30, epsilon, "bottom margin");
48+
}, "Margin properties on mrow (logical, shorthand)");
49+
50+
done();
51+
}
52+
</script>
53+
</head>
54+
<body>
55+
<div id="log"></div>
56+
<p>
57+
<math>
58+
<mrow>
59+
<mrow id="mrow-margin"
60+
style="margin-left: 20px;
61+
margin-right: 30px;
62+
margin-top: 40px;
63+
margin-bottom: 50px;">
64+
<mspace width="50px" height="50px"></mspace>
65+
</mrow>
66+
</mrow>
67+
</math>
68+
</p>
69+
<p>
70+
<math>
71+
<mrow>
72+
<mrow id="mrow-margin-shorthand"
73+
style="margin: 20px;">
74+
<mspace width="50px" height="50px"></mspace>
75+
</mrow>
76+
</mrow>
77+
</math>
78+
</p>
79+
<p>
80+
<math>
81+
<mrow>
82+
<mrow id="mrow-margin-logical"
83+
style="margin-inline-start: 20px;
84+
margin-inline-end: 30px;
85+
margin-block-start: 40px;
86+
margin-block-end: 50px;">
87+
<mspace width="50px" height="50px"></mspace>
88+
</mrow>
89+
</mrow>
90+
</math>
91+
</p>
92+
<p>
93+
<math>
94+
<mrow>
95+
<mrow id="mrow-margin-logical-shorthand"
96+
style="margin-inline: 20px;
97+
margin-block: 30px;">
98+
<mspace width="50px" height="50px"></mspace>
99+
</mrow>
100+
</mrow>
101+
</math>
102+
</p>
103+
</body>
104+
</html>

‎mathml/relations/css-styling/padding-border-margin/padding-001.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>padding</title>
6+
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
7+
<meta name="assert" content="Verify that padding is taken into account.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="helper.js"></script>
11+
<script>
12+
var epsilon = 1;
13+
14+
setup({ explicit_done: true });
15+
window.addEventListener("load", runTests);
16+
17+
function runTests() {
18+
test(function() {
19+
var s = measureSpaceAround("mrow-padding")
20+
assert_approx_equals(s.left, 20, epsilon, "left padding");
21+
assert_approx_equals(s.right, 30, epsilon, "right padding");
22+
assert_approx_equals(s.top, 40, epsilon, "top padding");
23+
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
24+
}, "Padding properties on mrow");
25+
26+
test(function() {
27+
var s = measureSpaceAround("mrow-padding-shorthand")
28+
assert_approx_equals(s.left, 20, epsilon, "left padding");
29+
assert_approx_equals(s.right, 20, epsilon, "right padding");
30+
assert_approx_equals(s.top, 20, epsilon, "top padding");
31+
assert_approx_equals(s.bottom, 20, epsilon, "bottom padding");
32+
}, "Padding properties on mrow (shorthand)");
33+
34+
test(function() {
35+
var s = measureSpaceAround("mrow-padding-logical")
36+
assert_approx_equals(s.left, 20, epsilon, "left padding");
37+
assert_approx_equals(s.right, 30, epsilon, "right padding");
38+
assert_approx_equals(s.top, 40, epsilon, "top padding");
39+
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
40+
}, "Padding properties on mrow (logical)");
41+
42+
test(function() {
43+
var s = measureSpaceAround("mrow-padding-logical-shorthand")
44+
assert_approx_equals(s.left, 20, epsilon, "left padding");
45+
assert_approx_equals(s.right, 20, epsilon, "right padding");
46+
assert_approx_equals(s.top, 30, epsilon, "top padding");
47+
assert_approx_equals(s.bottom, 30, epsilon, "bottom padding");
48+
}, "Padding properties on mrow (logical, shorthand)");
49+
50+
done();
51+
}
52+
</script>
53+
</head>
54+
<body>
55+
<div id="log"></div>
56+
<p>
57+
<math>
58+
<mrow>
59+
<mrow id="mrow-padding"
60+
style="padding-left: 20px;
61+
padding-right: 30px;
62+
padding-top: 40px;
63+
padding-bottom: 50px;">
64+
<mspace width="50px" height="50px"></mspace>
65+
</mrow>
66+
</mrow>
67+
</math>
68+
</p>
69+
<p>
70+
<math>
71+
<mrow>
72+
<mrow id="mrow-padding-shorthand"
73+
style="padding: 20px;">
74+
<mspace width="50px" height="50px"></mspace>
75+
</mrow>
76+
</mrow>
77+
</math>
78+
</p>
79+
<p>
80+
<math>
81+
<mrow>
82+
<mrow id="mrow-padding-logical"
83+
style="padding-inline-start: 20px;
84+
padding-inline-end: 30px;
85+
padding-block-start: 40px;
86+
padding-block-end: 50px;">
87+
<mspace width="50px" height="50px"></mspace>
88+
</mrow>
89+
</mrow>
90+
</math>
91+
</p>
92+
<p>
93+
<math>
94+
<mrow>
95+
<mrow id="mrow-padding-logical-shorthand"
96+
style="padding-inline: 20px;
97+
padding-block: 30px;">
98+
<mspace width="50px" height="50px"></mspace>
99+
</mrow>
100+
</mrow>
101+
</math>
102+
</p>
103+
</body>
104+
</html>

0 commit comments

Comments
 (0)