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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Space</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
<meta name="assert" content="Verify mspace metrics for different values of height, depth and width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
var epsilon = 1;
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function getMetrics(aId) {
let baseline = document.getElementById("baseline").getBoundingClientRect();
let mspace = document.getElementById(aId).getBoundingClientRect();
return {
width: mspace.width,
height: mspace.height,
line_ascent: (baseline.top + baseline.bottom)/2 - mspace.top
};
}
function runTests() {
test(function() {
let metrics = getMetrics("widthAttributePlusWidthProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width overridden by inline style");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height as specified by height attribute");
assert_approx_equals(metrics.line_ascent, 200, epsilon,
"mspace line-ascent as specified by height attribute");
}, "width attribute + width property");
test(function() {
let metrics = getMetrics("heightAndDepthAttributesPlusHeightProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width as specified by attribute");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height overridden by inline style");
assert_approx_equals(metrics.line_ascent, 100, epsilon,
"mspace line-ascent as specified by height attribute");
}, "height/depth attributes + height property");
test(function() {
let metrics = getMetrics("heightAttributePlusHeightProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width as specified by attribute");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height overridden by inline style");
assert_approx_equals(metrics.line_ascent, 300, epsilon,
"mspace line-ascent as specified by height attribute");
}, "height attribute + height property");
test(function() {
let metrics = getMetrics("depthAttributePlusHeightProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width as specified by attribute");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height overridden by inline style");
assert_approx_equals(metrics.line_ascent, 0, epsilon,
"mspace line-ascent defaults to 0");
}, "depth attribute + height property");
done();
}
</script>
</head>
<body>
<div id="log"></div>
<math>
<!-- Reference baseline -->
<mspace id="baseline" style="background: black"
width="10px" height="100px" depth="100px"/>
<!-- width="500px" is a presentational hint
setting the element's width property to the corresponding value,
overridden by the inline style width: 200px.
height="200px" sets the height/line-ascent to 200px. -->
<mspace id="widthAttributePlusWidthProperty"
width="500px" height="200px"
style="width: 200px; background: green"/>
<!-- height="100px" + depth="200px" are used as a presentational hint
setting the element's height property to calc(100px + 200px),
overridden by inline style height: 200px.
height="100px" sets the line-ascent to 100px. -->
<mspace id="heightAndDepthAttributesPlusHeightProperty"
width="200px" height="100px" depth="200px"
style="height: 200px; background: blue"/>
<!-- height="300px" is used as a presentational hint
setting the element's height property to the corresponding value,
overridden by inline style height: 200px.
height="300px" sets the line-ascent to 300px. -->
<mspace id="heightAttributePlusHeightProperty"
width="200px" height="300px"
style="height: 200px; background: magenta"/>
<!-- depth="300px" is used as a presentational hint
setting the element's height property to the corresponding value,
overridden by inline style height: 200px.
The line-ascent defaults to 0. -->
<mspace id="depthAttributePlusHeightProperty"
width="200px" depth="300px"
style="height: 200px; background: yellow"/>
</math>
</body>
</html>
|
