142 lines
6 KiB
HTML
142 lines
6 KiB
HTML
<!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>\
|
|
<msqrt style="display: list-item;">X</msqrt>\
|
|
<mroot style="display: list-item;">X</mroot>\
|
|
<mtext style="display: list-item;">X</mtext>\
|
|
</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|msqrt|mroot|mtext/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>
|