mozilla-central/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Attribute mapping</title>
<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.
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.
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.
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>