1 files changed, 139 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-2.html b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html
new file mode 100644
index 0000000000..36a02952eb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html
@@ -0,0 +1,139 @@
+<!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>\
+</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/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>