mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 09:15:35 +00:00
Bug 1569228 [wpt PR 18111] - Add tests to check mapping of CSS attributes., a=testonly
Automatic update from web-platform-tests Add tests to check mapping of CSS attributes. (#18111) This also introduce a new helper to generate MathML fragments for each tag. -- wpt-commits: ed46be30657580c975499e8dd7998aa51d7fc6e5 wpt-pr: 18111
This commit is contained in:
parent
0630a767fd
commit
9ab04a70ce
@ -0,0 +1,65 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Attribute mapping</title>
|
||||||
|
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#legacy-mathml-style-attributes">
|
||||||
|
<link rel="help" href="https://mathml-refresh.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">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.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");
|
||||||
|
}, `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");
|
||||||
|
}, `mathcolor on the ${tag} element is mapped to CSS color`);
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
assert_equals(style.getPropertyValue("background-color"), "rgba(0, 0, 0, 0)", "no attribute");
|
||||||
|
element.setAttribute("mathbackground", "lightblue");
|
||||||
|
assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified");
|
||||||
|
}, `mathbackground on the ${tag} element is mapped to CSS background-color`);
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute");
|
||||||
|
element.setAttribute("mathsize", "20px");
|
||||||
|
assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified");
|
||||||
|
}, `mathsize on the ${tag} element is mapped to CSS font-size`);
|
||||||
|
});
|
||||||
|
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="log"></div>
|
||||||
|
<div id="container">
|
||||||
|
<math class="element"></math>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Attribute mapping</title>
|
||||||
|
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-mathvariant-attribute">
|
||||||
|
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
|
||||||
|
<meta name="assert" content="Verify that mathvariant, scriptlevel, displaystyle are mapped to CSS">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||||
|
<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("text-transform"), "none", "no attribute");
|
||||||
|
element.setAttribute("mathvariant", "fraktur");
|
||||||
|
assert_equals(style.getPropertyValue("text-transform"), "math-fraktur", "attribute specified");
|
||||||
|
}, `mathvariant on the ${tag} element is mapped to CSS text-transform`)
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
assert_equals(style.getPropertyValue("math-script-level"), "0", "no attribute");
|
||||||
|
element.setAttribute("scriptlevel", "10");
|
||||||
|
assert_equals(style.getPropertyValue("math-script-level"), "10", "attribute specified");
|
||||||
|
}, `scriptlevel on the ${tag} element is mapped to CSS math-script-level`);
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
assert_equals(style.getPropertyValue("math-style"), "inline", "no attribute");
|
||||||
|
element.setAttribute("displaystyle", "true");
|
||||||
|
assert_equals(style.getPropertyValue("math-style"), "display", "attribute specified");
|
||||||
|
}, `displaystyle on the ${tag} element is mapped to CSS math-style`);
|
||||||
|
});
|
||||||
|
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="log"></div>
|
||||||
|
<div id="container">
|
||||||
|
<math class="element"></math>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
117
testing/web-platform/tests/mathml/support/mathml-fragments.js
Normal file
117
testing/web-platform/tests/mathml/support/mathml-fragments.js
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
var MathMLFragments = {
|
||||||
|
"annotation": "\
|
||||||
|
<semantics>\
|
||||||
|
<mrow></mrow>\
|
||||||
|
<annotation class='element text-container'></annotation>\
|
||||||
|
</semantics>",
|
||||||
|
"annotation-xml": "\
|
||||||
|
<semantics>\
|
||||||
|
<mrow></mrow>\
|
||||||
|
<annotation-xml class='element text-container foreign-container'></annotation-xml>\
|
||||||
|
</semantics>",
|
||||||
|
"maction": "\
|
||||||
|
<maction class='element' actiontype='statusline'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mtext class='text-container'></mtext>\
|
||||||
|
</maction>",
|
||||||
|
"menclose": "<menclose class='element mathml-container'></menclose>",
|
||||||
|
"merror": "<merror class='element mathml-container'></merror>",
|
||||||
|
"mfrac": "\
|
||||||
|
<mfrac class='element'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</mfrac>",
|
||||||
|
"mi": "<mi class='element text-container foreign-container'></mi>",
|
||||||
|
"mmultiscripts": "\
|
||||||
|
<mmultiscripts class='element'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</mmultiscripts>",
|
||||||
|
"mn": "<mn class='element text-container foreign-container'></mn>",
|
||||||
|
"mo": "<mo class='element text-container foreign-container'></mo>",
|
||||||
|
"mover": "\
|
||||||
|
<mover class='element'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</mover>",
|
||||||
|
"mpadded": "<mpadded class='element mathml-container'></mpadded>",
|
||||||
|
"mphantom": "<mphantom class='element mathml-container'></mphantom>",
|
||||||
|
"mprescripts": "\
|
||||||
|
<mmultiscripts>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mprescripts class='element'/>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</mmultiscripts>",
|
||||||
|
"mroot": "\
|
||||||
|
<mroot class='element'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</mroot>",
|
||||||
|
"mrow": "<mrow class='element mathml-container'></mrow>",
|
||||||
|
"ms": "<ms class='element text-container foreign-container'></ms>",
|
||||||
|
"mspace": "<mspace class='element'></mspace>",
|
||||||
|
"msqrt": "<msqrt class='element mathml-container'></msqrt>",
|
||||||
|
"mstyle": "<mstyle class='element mathml-container'></mstyle>",
|
||||||
|
"msub": "\
|
||||||
|
<msub class='element mathml-container'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</msub>",
|
||||||
|
"msubsup": "\
|
||||||
|
<msubsup class='element mathml-container'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</msubsup>",
|
||||||
|
"msup": "\
|
||||||
|
<msup class='element mathml-container'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</msup>",
|
||||||
|
"mtable": "\
|
||||||
|
<mtable class='element'>\
|
||||||
|
<mtr>\
|
||||||
|
<mtd class='mathml-container'>\
|
||||||
|
</mtd>\
|
||||||
|
</mtr>\
|
||||||
|
</mtable>",
|
||||||
|
"mtd": "\
|
||||||
|
<mtable>\
|
||||||
|
<mtr>\
|
||||||
|
<mtd class='element mathml-container'>\
|
||||||
|
</mtd>\
|
||||||
|
</mtr>\
|
||||||
|
</mtable>",
|
||||||
|
"mtext": "<mtext class='element text-container foreign-container'></mtext>",
|
||||||
|
"mtr": "\
|
||||||
|
<mtable>\
|
||||||
|
<mtr class='element'>\
|
||||||
|
<mtd class='mathml-container'>\
|
||||||
|
</mtd>\
|
||||||
|
</mtr>\
|
||||||
|
</mtable>",
|
||||||
|
"munder": "\
|
||||||
|
<munder class='element'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</munder>",
|
||||||
|
"munderover": "\
|
||||||
|
<munderover class='element'>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</munderover>",
|
||||||
|
"none": "\
|
||||||
|
<mmultiscripts>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<none class='element'/>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
</mmultiscripts>",
|
||||||
|
"semantics": "\
|
||||||
|
<semantics class='element>\
|
||||||
|
<mrow class='mathml-container'></mrow>\
|
||||||
|
<annotation class='text-container'></annotation>\
|
||||||
|
</semantics>"
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user