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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Attribute mapping</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
<meta name="assert" content="Verify that dir, mathcolor, mathbackground and mathsize are mapped to CSS but that deprecated MathML3 attributes are not.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/mathml-fragments.js"></script>
<style>
#container {
color: blue;
font-size: 50px;
}
</style>
<script>
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function runTests() {
var container = document.getElementById("container");
for (tag in MathMLFragments) {
container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
}
Array.from(document.getElementsByClassName("element")).forEach(element => {
var tag = element.tagName;
var style = window.getComputedStyle(element);
test(function() {
assert_equals(style.getPropertyValue("direction"), "ltr", "no attribute");
element.setAttribute("dir", "rtl");
assert_equals(style.getPropertyValue("direction"), "rtl", "attribute specified");
element.setAttribute("dir", "RtL");
assert_equals(style.getPropertyValue("direction"), "rtl", "case insensitive");
element.setAttribute("dir", "auto");
assert_equals(style.getPropertyValue("direction"), "ltr", "auto");
element.setAttribute("dir", "foo");
assert_equals(style.getPropertyValue("direction"), "ltr", "random value");
}, `dir on the ${tag} element is mapped to CSS direction`)
test(function() {
assert_equals(style.getPropertyValue("color"),
"rgb(0, 0, 255)",
"no attribute");
element.setAttribute("mathcolor", "black");
assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified");
// The color names are case-insensitive.
// See https://www.w3.org/TR/css-color-3/#html4
element.setAttribute("mathcolor", "GrEeN");
assert_equals(style.getPropertyValue("color"), "rgb(0, 128, 0)", "case insensitive");
}, `mathcolor on the ${tag} element is mapped to CSS color`);
test(function() {
assert_equals(style.getPropertyValue("background-color"),
tag === "merror" ?
"rgb(255, 255, 224)" : "rgba(0, 0, 0, 0)",
"no attribute");
element.setAttribute("mathbackground", "lightblue");
assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified");
// The color names are case-insensitive.
// See https://www.w3.org/TR/css-color-3/#html4
element.setAttribute("mathbackground", "YeLlOw");
assert_equals(style.getPropertyValue("background-color"), "rgb(255, 255, 0)", "case insensitive");
}, `mathbackground on the ${tag} element is mapped to CSS background-color`);
test(function() {
// "none" and "mprescripts" can only be used as non-first children of mmultiscripts so font-size
// is incremented and the resulting fraction string is hard to test accurately, skip for now.
if (tag === "none" || tag === "mprescripts")
return;
assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute");
element.setAttribute("mathsize", "20px");
assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified");
// unit identifiers are ASCII case-insensitive.
// https://www.w3.org/TR/css-values-3/#typedef-dimension
element.setAttribute("mathsize", "30Px");
assert_equals(style.getPropertyValue("font-size"), "30px", "case insensitive");
}, `mathsize on the ${tag} element is mapped to CSS font-size`);
test(function() {
assert_true(MathMLFeatureDetection.has_mathsize(), "Superseding attributes are supported");
var properties = ["background-color", "color", "fontfamily", "font-size", "font-style", "font-weight"];
var oldStyle = {};
properties.forEach(property => {
oldStyle[property] = style.getPropertyValue(property);
});
element.setAttribute("background", "red");
element.setAttribute("color", "blue");
element.setAttribute("fontfamily", "monospace");
element.setAttribute("fontsize", "50px");
element.setAttribute("fontstyle", "italic");
element.setAttribute("fontweight", "bold");
properties.forEach(property => {
assert_equals(style.getPropertyValue(property), oldStyle[property], `${property}`);
});
}, `deprecated MathML3 attributes on the ${tag} element are not mapped to CSS`);
});
done();
}
</script>
</head>
<body>
<div id="log"></div>
<div id="container">
<math class="element"></math>
</div>
</body>
</html>
|
