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
132
133
134
135
136
137
138
139
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verify that one can override the layout of MathML elements with the CSS display property</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
<meta name="assert" content="Verify that one can override the display of a MathML element.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/layout-comparison.js"></script>
<script src="/mathml/support/mathml-fragments.js"></script>
<script src="/mathml/support/fonts.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
math {
font-family: inherit;
}
mfrac {
padding: 0;
}
</style>
<script>
const Xsize = 25;
const templates = {
"block display": `<math style="display: block;">XXX</math>`,
"block display with contrained width": `<math style="display: block; width: ${2*Xsize}px;">XXX</math>`,
"list display inside display block": `<math style="display: block">\
<mmultiscripts style="display: list-item;">X</mmultiscripts>\
<maction style="display: list-item;">X</maction>\
<mpadded style="display: list-item;">X</mpadded>\
</math>`,
"inline display": `<math style="display: inline;">XXX</math>`,
"inline-block display": `<math style="display: inline-block">XXX</math>`,
"table display (math)": `<math style="display: table">\
<mfrac style='display: table-row'>\
<msub style='display: table-cell'>X</msub>\
<msup style='display: table-cell'>X</msup>\
<msubsup style='display: table-cell'>X</msubsup>\
</mfrac>\
<mtable style='display: table-row'>\
<munder style='display: table-cell'>X</munder>\
<mover style='display: table-cell'>X</mover>\
<munderover style='display: table-cell'>X</munderover>\
</mtable>\
</math>`,
"table display (mrow)": `<math display="block">\
<mrow style="display: table">\
<mfrac style='display: table-row'>\
<msub style='display: table-cell'>X</msub>\
<msup style='display: table-cell'>X</msup>\
<msubsup style='display: table-cell'>X</msubsup>\
</mfrac>\
<mtable style='display: table-row'>\
<munder style='display: table-cell'>X</munder>\
<mover style='display: table-cell'>X</mover>\
<munderover style='display: table-cell'>X</munderover>\
</mtable>\
</mrow></math>`,
"inline-table display (math)": `<math style="display: inline-table">\
<mfrac style='display: table-row'>\
<msub style='display: table-cell'>X</msub>\
<msup style='display: table-cell'>X</msup>\
<msubsup style='display: table-cell'>X</msubsup>\
</mfrac>\
<mtable style='display: table-row'>\
<munder style='display: table-cell'>X</munder>\
<mover style='display: table-cell'>X</mover>\
<munderover style='display: table-cell'>X</munderover>\
</mtable>\
</math>`,
"inline-table display (mrow)": `<math display="block">\
<mrow style="display: inline-table">\
<mfrac style='display: table-row'>\
<msub style='display: table-cell'>X</msub>\
<msup style='display: table-cell'>X</msup>\
<msubsup style='display: table-cell'>X</msubsup>\
</mfrac>\
<mtable style='display: table-row'>\
<munder style='display: table-cell'>X</munder>\
<mover style='display: table-cell'>X</mover>\
<munderover style='display: table-cell'>X</munderover>\
</mtable>\
</mrow></math>`,
"flexbox display (math)": `<math style="display: flex; flex-direction: column;">XXX</math>`,
"flexbox display (mrow)": `<math display="block"><mrow style="display: flex; flex-direction: column;">XXX</mrow></math>`,
"grid display (math)": `<math style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</math>`,
"grid display (mrow)": `<math display="block"><mrow style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</mrow></math>`,
"ruby display (math)": `<math style="display: ruby;">\
<mrow style="display: ruby-base;">X</mrow>\
<mrow style="display: ruby-text">XX</mrow>\
</math>`,
"ruby display (mrow)": `<math display="block"><mrow style="display: ruby;">\
<mrow style="display: ruby-base;">X</mrow>\
<mrow style="display: ruby-text">XX</mrow>\
</mrow></math>`,
"block display with column width (math)": `<math style="display: block; column-width: ${2*Xsize}px">\
<mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\
</math>`,
"block display with column width (mrow)": `<math style="display: block"><mrow style="display: block; column-width: ${2*Xsize}px">\
<mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\
</mrow></math>`,
};
setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });
function runTests() {
for (let key in templates) {
if (!templates.hasOwnProperty(key))
continue;
let mathtest = templates[key].
replace(/X/g, `<mspace style="display: inline-block; width: ${Xsize}px; height: ${Xsize}px; background: black"></mspace>`);
let reference = mathtest.
replace(/maction|math|mfrac|mmultiscripts|mover|mover|mpadded|mrow|mspace|msubsup|msub|msup|mtable|munderover|munder/g, "div");
document.body.insertAdjacentHTML("beforeend", `<div style="font: 20px/1 Ahem; position: absolute;">\
<div><span>${key}:</span>${mathtest}</div>\
<div><span>${key}:</span>${reference}</div>\
</div>`);
let div = document.body.lastElementChild;
let elementDiv = div.firstElementChild;
let referenceDiv = div.lastElementChild;
test(function() {
const epsilon = 1;
compareLayout(elementDiv, referenceDiv, epsilon);
}, `${key}`);
div.style = "display: none;"; // Hide the div after measurement.
}
done();
}
</script>
</head>
<body>
<div id="log"></div>
</body>
</html>
|
