mathml/relations/css-styling/display-2.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>