Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 17 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /mathml/relations/css-styling/display-2.html - WPT Dashboard Interop Dashboard
<!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>
<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>