From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../presentation-markup/fractions/frac-1.html      | 191 +++++++++
 .../fractions/frac-bar-001-ref.html                |  21 +
 .../fractions/frac-bar-001.html                    |  56 +++
 .../fractions/frac-bar-002-ref.html                |  23 ++
 .../fractions/frac-bar-002.html                    |  83 ++++
 .../fractions/frac-bar-003-ref.html                |  21 +
 .../fractions/frac-bar-003.html                    |  46 +++
 .../fractions/frac-color-001-notref.html           |  16 +
 .../fractions/frac-color-001.html                  |  20 +
 .../fractions/frac-color-002-ref.html              |  14 +
 .../fractions/frac-color-002.html                  |  34 ++
 .../fractions/frac-created-dynamically-2-ref.html  |  17 +
 .../fractions/frac-created-dynamically-2.html      |  44 +++
 .../fractions/frac-created-dynamically-3-ref.html  |  16 +
 .../fractions/frac-created-dynamically-3.html      |  36 ++
 .../fractions/frac-created-dynamically-ref.html    |  16 +
 .../fractions/frac-created-dynamically.html        |  39 ++
 .../fractions/frac-default-padding-ref.html        |  19 +
 .../fractions/frac-default-padding.html            |  37 ++
 .../fractions/frac-invalid-2-ref.html              |  15 +
 .../fractions/frac-invalid-2.html                  |  18 +
 .../fractions/frac-invalid-3-ref.html              |  17 +
 .../fractions/frac-invalid-3.html                  |  20 +
 .../fractions/frac-invalid-ref.html                |  14 +
 .../fractions/frac-invalid.html                    |  17 +
 ...ac-legacy-bevelled-attribute.tentative-ref.html |  18 +
 .../frac-legacy-bevelled-attribute.tentative.html  |  28 ++
 .../fractions/frac-linethickness-001-ref.html      |  42 ++
 .../fractions/frac-linethickness-001.html          |  47 +++
 .../fractions/frac-linethickness-002.html          | 131 ++++++
 .../fractions/frac-linethickness-003-notref.html   |  16 +
 .../fractions/frac-linethickness-003.html          |  19 +
 .../fractions/frac-linethickness-004-ref.html      |  27 ++
 .../fractions/frac-linethickness-004.html          |  32 ++
 .../fractions/frac-mrow-001-ref.html               |  16 +
 .../fractions/frac-mrow-001.html                   |  28 ++
 .../frac-numalign-denomalign-001-ref.html          |  75 ++++
 .../fractions/frac-numalign-denomalign-001.html    |  56 +++
 .../fractions/frac-parameters-1.html               | 440 +++++++++++++++++++++
 .../fractions/frac-parameters-2.html               | 290 ++++++++++++++
 .../fractions/frac-parameters-3.html               | 168 ++++++++
 .../fractions/frac-parameters-gap-001-ref.html     |  63 +++
 .../fractions/frac-parameters-gap-001.html         |  90 +++++
 .../fractions/frac-parameters-gap-002-ref.html     |  63 +++
 .../fractions/frac-parameters-gap-002.html         |  90 +++++
 .../fractions/frac-parameters-gap-003-ref.html     |  63 +++
 .../fractions/frac-parameters-gap-003.html         |  90 +++++
 .../fractions/frac-parameters-gap-004-ref.html     |  63 +++
 .../fractions/frac-parameters-gap-004.html         |  90 +++++
 .../fractions/frac-parameters-gap-005-ref.html     |  63 +++
 .../fractions/frac-parameters-gap-005.html         |  90 +++++
 .../fractions/frac-parameters-gap-006-ref.html     |  63 +++
 .../fractions/frac-parameters-gap-006.html         |  90 +++++
 .../fractions/frac-rendering-from-in-flow-ref.html |  15 +
 .../fractions/frac-rendering-from-in-flow.html     |  40 ++
 .../fractions/frac-visibility-001-ref.html         |  12 +
 .../fractions/frac-visibility-001.html             |  24 ++
 57 files changed, 3292 insertions(+)
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-1.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001-notref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-002.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003-notref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-1.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-2.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-3.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001.html

(limited to 'testing/web-platform/tests/mathml/presentation-markup/fractions')

diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-1.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-1.html
new file mode 100644
index 0000000000..604e574322
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-1.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Fraction</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-zero-line-thickness">
+<meta name="assert" content="Verify fraction metrics for different sizes of numerator and denominator.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math, mspace {
+    /* OS/2.sxHeight = 800 */
+    /* post.underlineThickness == 20 */
+    font-family: Ahem;
+    font-size: 10px;
+  }
+  div.shrink-wrap {
+    background: yellow;
+    display: inline-block;
+    margin-top: 5px;
+    padding-top: 5px;
+  }
+</style>
+<script>
+  const xHeight = 800;
+  const underlineThickness = 800;
+  const emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
+
+  function getBox(aId) {
+    var box = document.getElementById(aId).getBoundingClientRect();
+    box.middle = (box.bottom + box.top) / 2;
+    box.center = (box.left + box.right) / 2;
+    return box;
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var e = 4;
+      var mathAxis = getBox("baseline").top - (xHeight/2) * emToPx;
+      for (var i = 0; i <= 4; i++) {
+        var frac = getBox("frac" + i);
+        var num = getBox("frac" + i + "num");
+        var den = getBox("frac" + i + "den");
+        // To estimate the fraction axis, we calculate barycenter between the
+        // top and bottom of the fraction, using the heights of numerator and
+        // denominator as weights.
+        var fracAxis = (frac.top * den.height + frac.bottom * num.height) / (num.height + den.height);
+        assert_approx_equals(fracAxis, mathAxis, e, "frac" + i + " fraction bar");
+      }
+    }, "Fraction axis is aligned on the math axis");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      for (var i = 0; i < 10; i++) {
+        assert_less_than_equal(getBox("frac" + i + "num").bottom, getBox("frac" + i + "den").top, "numerator is above denominator");
+        assert_less_than(getBox("frac" + i + "den").top - getBox("frac" + i + "num").bottom, 5, "The gap between numerator and denominator is not too large");
+      }
+    }, "Vertical positions of numerator and denominator");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var e = 3;
+      for (var i = 0; i < 10; i++)
+        assert_approx_equals(getBox("frac" + i + "num").center, getBox("frac" + i + "den").center, e, "numerator and denominator are horizontally centered");
+    }, "Horizontal alignments of numerator and denominator");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var e = 5;
+      for (var i = 0; i < 10; i++) {
+        var frac = getBox("frac" + i);
+        var num = getBox("frac" + i + "num");
+        var den = getBox("frac" + i + "den");
+        assert_approx_equals(frac.height, den.bottom - num.top, e, "height of frac " + i + " is determined by the bottom/top sides of the denominator/numerator");
+        assert_approx_equals(frac.width, Math.max(num.right, den.right) - Math.min(num.left, den.left), e, "width of frac " + i + " is determined by the left/right sides of the denominator/numerator (plus some spacing)");
+      }
+    }, "Dimension of mfrac elements");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      assert_true(MathMLFeatureDetection.has_mfrac());
+
+      Array.from(document.getElementsByClassName("shrink-wrap")).forEach((container) => {
+        var marginPx = 2; // By default fractions have 1px margin on each side.
+        var epsilon = 1;
+        var containerWidth = container.getBoundingClientRect().width;
+        var children = container.getElementsByTagName("mspace");
+        var numWidth = children[0].getBoundingClientRect().width;
+        var denWidth = children[1].getBoundingClientRect().width;
+        assert_approx_equals(containerWidth, marginPx + Math.max(numWidth, denWidth), epsilon, "Should be the maximum preferred width of numerator/denominator.");
+      });
+    }, "Preferred width of mfrac elements");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mspace id="baseline" width="1em" height="0em" depth="1em" style="background: black"/>
+      <mfrac id="frac0">
+        <mspace id="frac0num" width="15px" height="15px" style="background: blue"/>
+        <mspace id="frac0den" width="15px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac1">
+        <mspace id="frac1num" width="30px" height="15px" style="background: blue"/>
+        <mspace id="frac1den" width="15px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac2">
+        <mspace id="frac2num" width="15px" height="15px" style="background: blue"/>
+        <mspace id="frac2den" width="30px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac3">
+        <mspace id="frac3num" width="15px" height="30px" style="background: blue"/>
+        <mspace id="frac3den" width="15px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac4">
+        <mspace id="frac4num" width="15px" height="15px" style="background: blue"/>
+        <mspace id="frac4den" width="15px" height="30px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac5" linethickness="0px">
+        <mspace id="frac5num" width="15px" height="15px" style="background: blue"/>
+        <mspace id="frac5den" width="15px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac6" linethickness="0px">
+        <mspace id="frac6num" width="30px" height="15px" style="background: blue"/>
+        <mspace id="frac6den" width="15px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac7" linethickness="0px">
+        <mspace id="frac7num" width="15px" height="15px" style="background: blue"/>
+        <mspace id="frac7den" width="30px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac8" linethickness="0px">
+        <mspace id="frac8num" width="15px" height="30px" style="background: blue"/>
+        <mspace id="frac8den" width="15px" height="15px" style="background: green"/>
+      </mfrac>
+      <mfrac id="frac9" linethickness="0px">
+        <mspace id="frac9num" width="15px" height="15px" style="background: blue"/>
+        <mspace id="frac9den" width="15px" height="30px" style="background: green"/>
+      </mfrac>
+    </math>
+  </p>
+  <div class="shrink-wrap">
+    <math>
+      <mfrac>
+        <mspace width="30px" height="15px" style="background: blue"/>
+        <mspace width="15px" height="15px" style="background: green"/>
+      </mfrac>
+    </math>
+  </div>
+  <div class="shrink-wrap">
+    <math>
+      <mfrac>
+        <mspace width="15px" height="15px" style="background: blue"/>
+        <mspace width="30px" height="15px" style="background: green"/>
+      </mfrac>
+    </math>
+  </div>
+  <div class="shrink-wrap">
+    <math>
+      <mfrac linethickness="0px">
+        <mspace width="30px" height="15px" style="background: blue"/>
+        <mspace width="15px" height="15px" style="background: green"/>
+      </mfrac>
+    </math>
+  </div>
+  <div class="shrink-wrap">
+    <math>
+      <mfrac linethickness="0px">
+        <mspace width="15px" height="15px" style="background: blue"/>
+        <mspace width="30px" height="15px" style="background: green"/>
+      </mfrac>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001-ref.html
new file mode 100644
index 0000000000..5b7a8dff47
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bar</title>
+    <style type="text/css">
+      #container {
+          position: absolute;
+          left: 10px;
+          top: 50px;
+          width: 150px;
+          height: 150px;
+          background: green;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001.html
new file mode 100644
index 0000000000..8284546e4f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bar</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verifies painting of the fraction bar">
+    <link rel="match" href="frac-bar-001-ref.html">
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        /* The gap / shift / axisheight parameters are set to 0. */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+      #container {
+          position: absolute;
+          left: 0;
+          top: 0;
+      }
+    </style>
+    <script src="/common/reftest-wait.js"></script>
+    <script src="/mathml/support/fonts.js"></script>
+    <script>
+      window.addEventListener("load", () => { loadAllFonts().then(adjustPositionOfFraction); });
+
+      function adjustPositionOfFraction()
+      {
+        requestAnimationFrame(() => {
+          var container = document.getElementById("container");
+          var numeratorBox = document.getElementById("numerator").getBoundingClientRect();
+          container.style.left = (10 - numeratorBox.left) + "px";
+          container.style.top = (50 - numeratorBox.top) + "px";
+          requestAnimationFrame(takeScreenshot);
+        });
+      }
+    </script>
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div id="container">
+      <math>
+        <mfrac style="color: green; font-size: 15em">
+          <mspace id="numerator" width="150px"></mspace>
+          <mspace></mspace>
+        </mfrac>
+      </math>
+    </div>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002-ref.html
new file mode 100644
index 0000000000..9d5eef896a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bar</title>
+    <style type="text/css">
+      #green {
+          position: absolute;
+          background: green;
+          width: 150px;
+          height: 150px;
+          left: 50px;
+          top: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green <strong>square</strong> and no red.</p>
+    <div>
+      <div id="green"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002.html
new file mode 100644
index 0000000000..3eb5433e82
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bar</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verify painting of the fraction bar when margin/padding/border are involved.">
+    <link rel="match" href="frac-bar-002-ref.html">
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        /* The gap / shift / axisheight parameters are set to 0. */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+      #container {
+          position: absolute;
+          left: 0;
+          top: 0;
+      }
+      #red {
+          position: absolute;
+          background: red;
+          margin: 1px;
+          width: 148px;
+          height: 148px;
+      }
+    </style>
+    <script src="/mathml/support/fonts.js"></script>
+    <script src="/common/reftest-wait.js"></script>
+    <script>
+      window.addEventListener("load", () => { loadAllFonts().then(adjustPositionOfFraction); });
+
+      function adjustPositionOfFraction()
+      {
+          requestAnimationFrame(() => {
+              var container = document.getElementById("container");
+              var red = document.getElementById("red");
+              var numeratorBox = document.getElementById("numerator").getBoundingClientRect();
+              const shift = 50;
+              const numeratorMargin = 20;
+
+              /* Move the red square at the expected position,
+                 with a 1px gap to avoid antialiasing issues. */
+              red.style.left = `${shift}px`;
+              red.style.top = `${shift}px`;
+
+              /* Move the fraction bar at the expected position. */
+              container.style.left = (shift - numeratorBox.left + numeratorMargin) + "px";
+              container.style.top = (shift - numeratorBox.bottom - numeratorMargin) + "px";
+              requestAnimationFrame(takeScreenshot);
+        });
+      }
+    </script>
+  </head>
+  <body>
+    <p>This test passes if you see a green <strong>square</strong> and no red.</p>
+    <div>
+      <div id="red"></div>
+      <div id="container">
+        <math>
+          <!-- border, padding and margin should not affect the width of the fraction bar. -->
+          <mfrac style="color: green; font-size: 15em;
+                        border: 30px solid transparent;
+                        padding: 60px; margin: 120px;
+                        ">
+            <!-- the bar width is the one of the numerator margin box i.e. 80 + 2 * (5 + 10 + 20) = 150px -->
+            <mspace id="numerator" width="80px"
+                    style="border: 5px solid transparent;
+                           padding: 10px; margin: 20px;"></mspace>
+            <mspace></mspace>
+          </mfrac>
+        </math>
+      </div>
+    </div>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003-ref.html
new file mode 100644
index 0000000000..6bb6370d6e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bar (reference)</title>
+    <style type="text/css">
+      #container {
+          position: absolute;
+          left: 10px;
+          top: 50px;
+          width: 150px;
+          height: 150px;
+          background: green;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003.html
new file mode 100644
index 0000000000..69b45ea29c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bar</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verifies that the fraction bar takes the full width of the mfrac element">
+    <link rel="match" href="frac-bar-003-ref.html">
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        /* The gap / shift / axisheight parameters are set to 0. */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+      #container {
+          position: absolute;
+          left: 10px;
+          top: 50px;
+          width: 150px;
+          height: 150px;
+      }
+
+      /* Revert style specified in the UA style sheet that changes box size. */
+      mfrac { padding: 0; }
+    </style>
+    <script src="/mathml/support/fonts.js"></script>
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div id="container">
+      <math>
+        <mfrac style="width: 150px; color: green; font-size: 15em">
+          <mspace></mspace>
+          <mspace></mspace>
+        </mfrac>
+      </math>
+    </div>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001-notref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001-notref.html
new file mode 100644
index 0000000000..498d6277a3
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001-notref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction bar color</title>
+  </head>
+  <body style="font-size: 20pt;">
+    <p>This test passes if you see a fraction with a blue fraction bar.</p>
+    <math>
+      <mfrac>
+        <mspace width="200px" height="20px" style="background: black"></mspace>
+        <mspace width="200px" height="20px" style="background: black"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001.html
new file mode 100644
index 0000000000..442388a6eb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction bar color</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <meta name="assert" content="The CSS color property has an effect on the fraction bar.">
+    <link rel="mismatch" href="frac-color-001-notref.html">
+  </head>
+  <body style="font-size: 20pt;">
+    <p>This test passes if you see a fraction with a blue fraction bar.</p>
+    <math>
+      <mfrac style="color: blue;">
+        <mspace width="200px" height="20px" style="background: black"></mspace>
+        <mspace width="200px" height="20px" style="background: black"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002-ref.html
new file mode 100644
index 0000000000..fe2f4fa7b1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions color</title>
+  </head>
+  <body>
+    <p>This test passes if you see a green square and a blue square.</p>
+    <div style="background: green; width: 200px; height: 200px;">
+    </div>
+    <div style="background: blue; width: 200px; height: 200px;">
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002.html
new file mode 100644
index 0000000000..5c87212f59
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions color</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <meta name="assert" content="Verifies the color property affects the fraction bar">
+    <link rel="match" href="frac-color-002-ref.html">
+  </head>
+  <body>
+    <p>This test passes if you see a green square and a blue square.</p>
+    <div style="background: green; width: 200px; height: 200px;">
+      <math>
+        <mspace width="10px"></mspace>
+        <mfrac style="color: green">
+          <mspace width="150px" height="20px"></mspace>
+          <mspace width="150px" height="20px"></mspace>
+        </mfrac>
+      </math>
+    </div>
+    <div style="background: blue; width: 200px; height: 200px;">
+      <math>
+        <mspace width="10px"></mspace>
+        <mfrac style="color: blue">
+          <mspace width="150px" height="20px"></mspace>
+          <mspace width="150px" height="20px"></mspace>
+        </mfrac>
+      </math>
+    </div>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2-ref.html
new file mode 100644
index 0000000000..d389906112
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>mfrac created dynamically</title>
+  </head>
+  <body>
+    <p>This test passes if it renders the same as an invalid fraction with 3 children.</p>
+    <math>
+      <mfrac>
+        <mspace width="50px" height="50px" style="background: black"></mspace>
+        <mspace width="50px" height="50px" style="background: black"></mspace>
+        <mspace width="50px" height="50px" style="background: black"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2.html
new file mode 100644
index 0000000000..8e9fa520ea
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>mfrac created dynamically</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="A dynamically added mfrac should render like the equivalent markup.">
+<link rel="match" href="frac-created-dynamically-2-ref.html">
+<script>
+  window.addEventListener("load", function() {
+
+  // force initial layout so we're sure what we're testing against
+  document.documentElement.getBoundingClientRect();
+
+  var mfrac = document.createElementNS("http://www.w3.org/1998/Math/MathML","mfrac");
+  var mspace1 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace");
+  mspace1.setAttribute("width", "50px");
+  mspace1.setAttribute("height", "50px");
+  mspace1.setAttribute("style", "background: black");
+  var mspace2 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace");
+  mspace2.setAttribute("width", "50px");
+  mspace2.setAttribute("height", "50px");
+  mspace2.setAttribute("style", "background: black");
+  var mspace3 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace");
+  mspace3.setAttribute("width", "50px");
+  mspace3.setAttribute("height", "50px");
+  mspace3.setAttribute("style", "background: black");
+  document.getElementsByTagName("math")[0].appendChild(mfrac);
+  mfrac.appendChild(mspace1);
+  mfrac.appendChild(mspace2);
+  mfrac.appendChild(mspace3);
+
+  document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</head>
+<body>
+  <p>This test passes if it renders the same as an invalid fraction with 3 children.</p>
+  <math></math>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3-ref.html
new file mode 100644
index 0000000000..f8db144cfe
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>mfrac created dynamically</title>
+  </head>
+  <body>
+    <p>This test passes if you see a fraction 1/3.</p>
+    <math>
+      <mfrac>
+        <mn>1</mn>
+        <mn>3</mn>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3.html
new file mode 100644
index 0000000000..1f7e23bb84
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>mfrac created dynamically</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="A dynamically added mfrac should render like the equivalent markup.">
+<link rel="match" href="frac-created-dynamically-3-ref.html">
+<script>
+  window.addEventListener("load", function() {
+
+  // force initial layout so we're sure what we're testing against
+  document.documentElement.getBoundingClientRect();
+
+  var mn3 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mn");
+  mn3.appendChild(document.createTextNode("3"));
+  document.getElementsByTagName("mfrac")[0].appendChild(mn3);
+  document.getElementById("mn2").remove();
+
+  document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</head>
+<body>
+  <p>This test passes if you see a fraction 1/3.</p>
+  <math>
+    <mfrac>
+      <mn>1</mn>
+      <mn id="mn2">2</mn>
+    </mfrac>
+  </math>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-ref.html
new file mode 100644
index 0000000000..e10405c572
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>mfrac created dynamically</title>
+  </head>
+  <body>
+    <p>This test passes if you see a fraction.</p>
+    <math>
+      <mfrac>
+        <mspace width="50px" height="50px" style="background: black"></mspace>
+        <mspace width="50px" height="50px" style="background: black"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically.html
new file mode 100644
index 0000000000..8f65e8d9cf
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>mfrac created dynamically</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="A dynamically added mfrac should render like the equivalent markup.">
+<link rel="match" href="frac-created-dynamically-ref.html">
+<script>
+  window.addEventListener("load", function() {
+
+  // force initial layout so we're sure what we're testing against
+  document.documentElement.getBoundingClientRect();
+
+  var mfrac = document.createElementNS("http://www.w3.org/1998/Math/MathML","mfrac");
+  var mspace1 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace");
+  mspace1.setAttribute("width", "50px");
+  mspace1.setAttribute("height", "50px");
+  mspace1.setAttribute("style", "background: black");
+  var mspace2 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace");
+  mspace2.setAttribute("width", "50px");
+  mspace2.setAttribute("height", "50px");
+  mspace2.setAttribute("style", "background: black");
+  mfrac.appendChild(mspace1);
+  mfrac.appendChild(mspace2);
+  document.getElementsByTagName("math")[0].appendChild(mfrac);
+
+  document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</head>
+<body>
+  <p>This test passes if you see a fraction.</p>
+  <math></math>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding-ref.html
new file mode 100644
index 0000000000..93d3e0162b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fraction default padding</title>
+  </head>
+  <body>
+    <p>This test passes if you see three green squares of same size, separated by a gap of one pixel.</p>
+    <div>
+      <math>
+        <mspace width="150px" height="75px" depth="75px" style="background: green"/>
+        <mspace width="1px"/>
+        <mspace width="150px" height="75px" depth="75px" style="background: green"/>
+        <mspace width="1px"/>
+        <mspace width="150px" height="75px" depth="75px" style="background: green"/>
+      </math>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding.html
new file mode 100644
index 0000000000..30f155661a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fraction default padding</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verifies 1px padding is added around each side of the fraction.">
+    <link rel="match" href="frac-default-padding-ref.html">
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        /* The gap / shift / axisheight parameters are set to 0. */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see three green squares of same size, separated by a gap of one pixel.</p>
+    <div>
+      <math>
+        <mspace width="150px" height="75px" depth="75px" style="background: green"/>
+        <mfrac style="color: green; font-size: 15em">
+          <mspace id="numerator" width="150px"></mspace>
+          <mspace></mspace>
+        </mfrac>
+        <mspace width="150px" height="75px" depth="75px" style="background: green"/>
+      </math>
+    </div>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2-ref.html
new file mode 100644
index 0000000000..d57c20901b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mfrac with one child</title>
+</head>
+<body>
+  <p>This test passes if you see a single rectangle.</p>
+  <math>
+    <mrow style="padding-inline-start: 1px; padding-inline-end: 1px;">
+      <mspace width="200px" height="200px" style="background: green"></mspace>
+    </mrow>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2.html
new file mode 100644
index 0000000000..729fe813d0
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mfrac with one child</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#mfrac">
+<meta name="assert" content="An mfrac with one child should render using mrow.">
+<link rel="match" href="frac-invalid-2-ref.html">
+</head>
+<body>
+  <p>This test passes if you see a single rectangle.</p>
+  <math>
+    <mfrac>
+      <mspace width="200px" height="200px" style="background: green"></mspace>
+    </mfrac>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3-ref.html
new file mode 100644
index 0000000000..703e4aeca0
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mfrac with three children</title>
+</head>
+<body>
+  <p>This test passes if you see a single rectangle.</p>
+  <math>
+    <mrow style="padding-inline-start: 1px; padding-inline-end: 1px;">
+      <mspace width="50px" height="200px" style="background: green"></mspace>
+      <mspace width="50px" height="200px" style="background: green"></mspace>
+      <mspace width="100px" height="200px" style="background: green"></mspace>
+    </mrow>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3.html
new file mode 100644
index 0000000000..d56b55ef80
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mfrac with three children</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#mfrac">
+<meta name="assert" content="An mfrac with no children should render using an empty mrow.">
+<link rel="match" href="frac-invalid-3-ref.html">
+</head>
+<body>
+  <p>This test passes if you see a single rectangle.</p>
+  <math>
+    <mfrac>
+      <mspace width="50px" height="200px" style="background: green"></mspace>
+      <mspace width="50px" height="200px" style="background: green"></mspace>
+      <mspace width="100px" height="200px" style="background: green"></mspace>
+    </mfrac>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-ref.html
new file mode 100644
index 0000000000..beb3024732
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mfrac with zero children</title>
+</head>
+<body>
+  <p>This test passes if mfrac renders nothing.</p>
+  <math>
+    <mrow style="padding-inline-start: 1px; padding-inline-end: 1px;">
+    </mrow>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid.html
new file mode 100644
index 0000000000..78e11e7e2b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mfrac with zero children</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#mfrac">
+<meta name="assert" content="An mfrac with no children should render using an empty mrow.">
+<link rel="match" href="frac-invalid-ref.html">
+</head>
+<body>
+  <p>This test passes if mfrac renders nothing.</p>
+  <math>
+    <mfrac>
+    </mfrac>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative-ref.html
new file mode 100644
index 0000000000..f0b355c7bd
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bevelled (reference)</title>
+  </head>
+  <body>
+    <p>Test passes is you see a blue rectangle <em>above</em> a green rectangle, separated by a horizontal bar.</p>
+    <p>
+      <math>
+        <mfrac>
+          <mspace width="100px" height="30px" style="background: lightblue"></mspace>
+          <mspace width="100px" height="30px" style="background: lightgreen"></mspace>
+        </mfrac>
+      </math>
+    </p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative.html
new file mode 100644
index 0000000000..a98fc0f979
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions bevelled</title>
+    <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://github.com/mathml-refresh/mathml/issues/29">
+    <meta name="assert" content="Verify that the MathML3 bevelled attribute is ignored.">
+    <link rel="match" href="frac-legacy-bevelled-attribute.tentative-ref.html">
+  </head>
+  <body>
+    <p>Test passes is you see a blue rectangle <em>above</em> a green rectangle, separated by a horizontal bar.</p>
+    <p>
+      <math>
+        <mfrac bevelled="true">
+          <mspace width="100px" height="30px" style="background: lightblue"></mspace>
+          <mspace width="100px" height="30px" style="background: lightgreen"></mspace>
+        </mfrac>
+      </math>
+    </p>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>
+      MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");
+      MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001-ref.html
new file mode 100644
index 0000000000..d4be8ea03b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions linethickness</title>
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see the same fraction four times.</p>
+    <math>
+      <mfrac>
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+      <mspace width="20px"/>
+      <mfrac>
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+      <mspace width="20px"/>
+      <mfrac>
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+      <mspace width="20px"/>
+      <mfrac>
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001.html
new file mode 100644
index 0000000000..918d4aba6e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions linethickness</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verifies deprecated 'thin', 'medium', 'thick' and unitless values have no effect on the linethickness of the mfrac element">
+    <link rel="match" href="frac-linethickness-001-ref.html">
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see the same fraction four times.</p>
+    <math>
+      <mfrac linethickness="thin">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+      <mspace width="20px"/>
+      <mfrac linethickness="medium">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+      <mspace width="20px"/>
+      <mfrac linethickness="thick">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+      <mspace width="20px"/>
+      <mfrac linethickness="5">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-002.html
new file mode 100644
index 0000000000..bb47f18687
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-002.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions linethickness</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+    <meta name="assert" content="Verifies fraction with positive, negative, percent and named space linethickness values.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script src="/mathml/support/fonts.js"></script>
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 10 / 1000 = 100px; */
+        font-family: "TestFont";
+        font-size: 10px;
+      }
+    </style>
+    <script>
+      function LineThickness(aId) {
+        var mfrac = document.getElementById(aId);
+        var numBox = mfrac.firstElementChild.getBoundingClientRect();
+        var denumBox = mfrac.lastElementChild.getBoundingClientRect();
+        return denumBox.top - numBox.bottom;
+      }
+
+      setup({ explicit_done: true });
+      window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+      function runTests() {
+        var defaultRuleThickness = 100;
+        var epsilon = 2;
+
+        test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(LineThickness("positive"),  5.67 * 10, epsilon);
+        }, "Positive");
+
+        test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          /* Negative values are treated as 0 */
+          assert_approx_equals(LineThickness("negative"),  0, epsilon);
+        }, "Negative");
+
+        test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(LineThickness("percent"), defaultRuleThickness * 234 / 100, epsilon);
+        }, "Percentage");
+
+        test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          /* Namedspace values are invalid in MathML Core. */
+          assert_approx_equals(LineThickness("namedspace"), defaultRuleThickness, epsilon);
+        }, "Named space");
+
+        test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          /* Calc() expressions are invalid in MathML Core. */
+          assert_approx_equals(LineThickness("calc"), defaultRuleThickness, epsilon);
+        }, "Calc() expression");
+
+        test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          document.getElementById("dynamic-attach").setAttribute("linethickness", "400%");
+          document.getElementById("dynamic-modify").setAttribute("linethickness", "200%");
+          document.getElementById("dynamic-remove").removeAttribute("linethickness");
+          assert_approx_equals(LineThickness("dynamic-attach"), defaultRuleThickness * 4, epsilon, "attach");
+          assert_approx_equals(LineThickness("dynamic-modify"), defaultRuleThickness * 2, epsilon, "modify");
+          assert_approx_equals(LineThickness("dynamic-remove"), defaultRuleThickness, epsilon, "remove");
+        }, "Dynamic linethickness");
+
+        done();
+      }
+    </script>
+  </head>
+  <body>
+    <math>
+      <mfrac id="positive" linethickness="5.67em">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <math>
+      <mfrac id="negative" linethickness="-1.23em">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <math>
+      <mfrac id="percent" linethickness="234%">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <math>
+      <mfrac id="namedspace" linethickness="veryverythickmathspace">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <math>
+      <mfrac id="calc" linethickness="calc(20px)">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <math>
+      <mfrac id="dynamic-attach">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <math>
+      <mfrac id="dynamic-modify" linethickness="300%">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <math>
+      <mfrac id="dynamic-remove" linethickness="300%">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003-notref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003-notref.html
new file mode 100644
index 0000000000..934d666333
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003-notref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions linethickness</title>
+  </head>
+  <body>
+    <p>This test passes if you see a fraction without fraction bar.</p>
+    <math>
+      <mfrac>
+        <mspace width="20px" height="5px" style="background: blue"></mspace>
+        <mspace width="20px" height="5px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003.html
new file mode 100644
index 0000000000..d930f058c5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions linethickness</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verifies fraction with 0px bar.">
+    <link rel="mismatch" href="frac-linethickness-003-notref.html">
+  </head>
+  <body>
+    <p>This test passes if you see a fraction without fraction bar.</p>
+    <math>
+      <mfrac linethickness="0px">
+        <mspace width="20px" height="5px" style="background: blue"></mspace>
+        <mspace width="20px" height="5px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004-ref.html
new file mode 100644
index 0000000000..8014f0a895
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions linethickness</title>
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see no fraction bar.</p>
+    <math>
+      <mfrac linethickness="0px">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004.html
new file mode 100644
index 0000000000..bfb708c092
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>fractions linethickness</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verifies that unitless value of zero causes no fraction bar to be painted">
+    <link rel="match" href="frac-linethickness-004-ref.html">
+    <style type="text/css">
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/fraction-rulethickness10000.woff");
+      }
+      math {
+        /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
+        font-family: "TestFont";
+        font-size: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see no fraction bar.</p>
+    <math>
+      <mfrac linethickness="0">
+        <mspace width="20px" height="10px" style="background: blue"></mspace>
+        <mspace width="20px" height="10px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001-ref.html
new file mode 100644
index 0000000000..e42cb96fe8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction mrow</title>
+  </head>
+  <body style="font-size: 20pt;">
+    <p>This test passes if you see a fraction with a blue square as numerator and a cyan square as denominator.</p>
+    <math>
+      <mfrac>
+        <mspace width="60px" height="60px" style="background: blue"></mspace>
+        <mspace width="60px" height="60px" style="background: cyan"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001.html
new file mode 100644
index 0000000000..82e817e4de
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction mrow</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
+    <meta name="assert" content="This test that <mrow> elements can be used as numerator and denominator of fractions.">
+    <link rel="match" href="frac-mrow-001-ref.html">
+  </head>
+  <body style="font-size: 20pt;">
+    <p>This test passes if you see a fraction with a blue square as numerator and a cyan square as denominator.</p>
+    <math>
+      <mfrac>
+        <mrow>
+          <mspace width="30px" height="60px" style="background: blue"></mspace>
+          <mspace width="30px" height="60px" style="background: blue "></mspace>
+        </mrow>
+        <mrow>
+          <mspace width="30px" height="60px" style="background: cyan"></mspace>
+          <mspace width="30px" height="60px" style="background: cyan "></mspace>
+        </mrow>
+      </mfrac>
+    </math>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001-ref.html
new file mode 100644
index 0000000000..09b83e9efb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction numalign denomalign</title>
+  </head>
+  <body>
+    <p>This test passes if you see 6 fractions with numerators and
+      denominators horizontally centered.</p>
+    <p>
+      <math>
+        <mfrac>
+          <mrow>
+            <mspace width="10px" height="20px"></mspace>
+            <mspace width="10px" height="20px" style="background: blue;"></mspace>
+            <mspace width="10px" height="20px"></mspace>
+          </mrow>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac>
+          <mrow>
+            <mspace width="10px" height="20px"></mspace>
+            <mspace width="10px" height="20px" style="background: blue;"></mspace>
+            <mspace width="10px" height="20px"></mspace>
+          </mrow>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac>
+          <mrow>
+            <mspace width="10px" height="20px"></mspace>
+            <mspace width="10px" height="20px" style="background: blue;"></mspace>
+            <mspace width="10px" height="20px"></mspace>
+          </mrow>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+        </mfrac>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mfrac>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+          <mrow>
+            <mspace width="10px" height="20px"></mspace>
+            <mspace width="10px" height="20px" style="background: blue;"></mspace>
+            <mspace width="10px" height="20px"></mspace>
+          </mrow>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+          <mrow>
+            <mspace width="10px" height="20px"></mspace>
+            <mspace width="10px" height="20px" style="background: blue;"></mspace>
+            <mspace width="10px" height="20px"></mspace>
+          </mrow>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+          <mrow>
+            <mspace width="10px" height="20px"></mspace>
+            <mspace width="10px" height="20px" style="background: blue;"></mspace>
+            <mspace width="10px" height="20px"></mspace>
+          </mrow>
+        </mfrac>
+      </math>
+    </p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001.html
new file mode 100644
index 0000000000..653962f33d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction numalign denomalign</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Check that legacy numalign/denomalign attributes are ignored.">
+    <link rel="match" href="frac-numalign-denomalign-001-ref.html">
+  </head>
+  <body>
+    <p>This test passes if you see 6 fractions with numerators and
+      denominators horizontally centered.</p>
+    <p>
+      <math>
+        <mfrac numalign="left">
+          <mspace width="10px" height="20px" style="background: blue;"></mspace>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac numalign="center">
+          <mspace width="10px" height="20px" style="background: blue;"></mspace>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac numalign="right">
+          <mspace width="10px" height="20px" style="background: blue;"></mspace>
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+        </mfrac>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mfrac denomalign="left">
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+          <mspace width="10px" height="20px" style="background: blue;"></mspace>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac denomalign="center">
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+          <mspace width="10px" height="20px" style="background: blue;"></mspace>
+        </mfrac>
+      </math>
+      <math>
+        <mfrac denomalign="right">
+          <mspace width="30px" height="20px" style="background: cyan;"></mspace>
+          <mspace width="10px" height="20px" style="background: blue;"></mspace>
+        </mfrac>
+      </math>
+    </p>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-1.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-1.html
new file mode 100644
index 0000000000..3c5e35159e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-1.html
@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<meta name="assert" content="Element mfrac correctly uses the fraction parameters from the MATH table.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<style>
+  math, mspace {
+    font-size: 10px;
+  }
+  @font-face {
+    font-family: axisheight7000-rulethickness1000;
+    src: url("/fonts/math/fraction-axisheight7000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: denominatordisplaystylegapmin5000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: denominatorgapmin4000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatorshiftdown3000-axisheight1000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: numeratordisplaystylegapmin8000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: numeratorgapmin9000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: numeratorshiftup11000-axisheight1000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratorshiftup11000-axisheight1000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: rulethickness10000;
+    src: url("/fonts/math/fraction-rulethickness10000.woff");
+  }
+</style>
+<script>
+  var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
+  var epsilon = 1;
+
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 7000 * emToPx;
+      var v2 = 1000 * emToPx;
+      assert_approx_equals(getBox("ref0001").top - getBox("num0001").bottom,
+                           v1 + v2 / 2, epsilon, "mfrac: axis height");
+    }, "AxisHeight");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 5000 * emToPx;
+      assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom,
+                           v1, epsilon, "mfrac: denominator gap");
+    }, "DenominatorDisplayStyleGapMin");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 6000 * emToPx;
+      assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom,
+                           v1, epsilon, "mfrac: denominator shift");
+    }, "DenominatorDisplayStyleShiftDown");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 5000 * emToPx;
+      assert_approx_equals(getBox("den0002b").top - getBox("ref0002b").bottom,
+                           v1, epsilon, "mfrac: denominator gap");
+    }, "DenominatorDisplayStyleGapMin Displaystyle");
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      var v1 = 6000 * emToPx;
+      assert_approx_equals(getBox("den0003b").top - getBox("ref0003b").bottom,
+                           v1, epsilon, "mfrac: denominator shift");
+    }, "DenominatorDisplayStyleShiftDown Displaystyle");
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      var v1 = 5000 * emToPx;
+      assert_approx_equals(getBox("den0002c").top - getBox("ref0002c").bottom,
+                           v1, epsilon, "mfrac: denominator gap");
+    }, "DenominatorDisplayStyleGapMin Displaystyle on fraction");
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      var v1 = 6000 * emToPx;
+      assert_approx_equals(getBox("den0003c").top - getBox("ref0003c").bottom,
+                           v1, epsilon, "mfrac: denominator shift");
+    }, "DenominatorDisplayStyleShiftDown Displaystyle on fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      var v1 = 4000 * emToPx;
+      assert_approx_equals(getBox("den0004").top - getBox("ref0004").bottom,
+                           v1, epsilon, "mfrac: denominator gap");
+    }, "DenominatorGapMin");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 3000 * emToPx;
+      assert_approx_equals(getBox("den0005").top - getBox("ref0005").bottom,
+                           v1, epsilon, "mfrac: denominator shift");
+    }, "DenominatorShiftDown");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      var v1 = 4000 * emToPx;
+      assert_approx_equals(getBox("den0004b").top - getBox("ref0004b").bottom,
+                           v1, epsilon, "mfrac: denominator gap");
+    }, "DenominatorGapMin Displaystyle on fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 3000 * emToPx;
+      assert_approx_equals(getBox("den0005b").top - getBox("ref0005b").bottom,
+                           v1, epsilon, "mfrac: denominator shift");
+    }, "DenominatorShiftDown Displaystyle on fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 8000 * emToPx;
+      assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom,
+                           v1, epsilon, "mfrac: numerator gap");
+    }, "NumeratorDisplayStyleGapMin");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 2000 * emToPx;
+      assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom,
+                           v1, epsilon, "mfrac: numerator shift");
+    }, "NumeratorDisplayStyleShiftDown");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 8000 * emToPx;
+      assert_approx_equals(getBox("ref0006b").top - getBox("num0006b").bottom,
+                           v1, epsilon, "mfrac: numerator gap");
+    }, "NumeratorDisplayStyleGapMin Displaystyle");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 2000 * emToPx;
+      assert_approx_equals(getBox("ref0007b").top - getBox("num0007b").bottom,
+                           v1, epsilon, "mfrac: numerator shift");
+    }, "NumeratorDisplayStyleShiftDown Displaystyle");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 8000 * emToPx;
+      assert_approx_equals(getBox("ref0006c").top - getBox("num0006c").bottom,
+                           v1, epsilon, "mfrac: numerator gap");
+    }, "NumeratorDisplayStyleGapMin Displaystyle on fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 2000 * emToPx;
+      assert_approx_equals(getBox("ref0007c").top - getBox("num0007c").bottom,
+                           v1, epsilon, "mfrac: numerator shift");
+    }, "NumeratorDisplayStyleShiftDown Displaystyle on fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 9000 * emToPx;
+      assert_approx_equals(getBox("ref0008").top - getBox("num0008").bottom,
+                           v1, epsilon, "mfrac: numerator gap");
+    }, "NumeratorGapMin");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 11000 * emToPx;
+      assert_approx_equals(getBox("ref0009").top - getBox("num0009").bottom,
+                           v1, epsilon, "mfrac: numerator shift");
+    }, "NumeratorShiftDown");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v1 = 10000 * emToPx;
+      assert_approx_equals(getBox("den0010").top - getBox("num0010").bottom,
+                           v1, epsilon, "mfrac: rule thickness");
+    }, "FractionRuleThickness");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math style="font-family: axisheight7000-rulethickness1000;">
+      <mspace id="ref0001" depth="1em" width="3em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em" height="1em" id="num0001" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
+      <mspace id="ref0002" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="3em" height="1em" id="den0002" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math display="block" style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0003" width="3em" height="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0003" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
+      <mspace id="ref0002b" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="3em" height="1em" id="den0002b" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0003b" width="3em" height="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0003b" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
+      <mspace id="ref0002c" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac displaystyle="true">
+        <mspace width="3em"/>
+        <mspace width="3em" height="1em" id="den0002c" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0003c" width="3em" height="1em" style="background: green"/>
+      <mfrac displaystyle="true">
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0003c" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: denominatorgapmin4000-rulethickness1000;">
+      <mspace id="ref0004" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="3em" height="1em" id="den0004" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0005" width="3em" height="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0005" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: denominatorgapmin4000-rulethickness1000;">
+      <mspace id="ref0004b" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac displaystyle="false">
+        <mspace width="3em"/>
+        <mspace width="3em" height="1em" id="den0004b" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0005b" width="3em" height="1em" style="background: green"/>
+      <mfrac displaystyle="false">
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0005b" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
+      <mspace id="ref0006" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em" depth="1em" id="num0006" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math display="block" style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0007" width="3em"
+              depth="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em" height="1em" id="num0007" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
+      <mspace id="ref0006b" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em" depth="1em" id="num0006b" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0007b" width="3em"
+              depth="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em" height="1em" id="num0007b" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
+      <mspace id="ref0006c" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac displaystyle="true">
+        <mspace width="3em" depth="1em" id="num0006c" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0007c" width="3em"
+              depth="1em" style="background: green"/>
+      <mfrac displaystyle="true">
+        <mspace width="3em" height="1em" id="num0007c" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: numeratorgapmin9000-rulethickness1000;">
+      <mspace id="ref0008" width="3em"
+              height=".5em" depth=".5em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em" depth="1em" id="num0008" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: numeratorshiftup11000-axisheight1000-rulethickness1000;">
+      <mspace id="ref0009" width="3em"
+              depth="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="3em" height="1em" id="num0009" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: rulethickness10000">
+      <mfrac>
+        <mspace width="3em" height="1em" id="num0010" style="background: blue"/>
+        <mspace width="3em" depth="1em" id="den0010" style="background: green"/>
+      </mfrac>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-2.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-2.html
new file mode 100644
index 0000000000..d09ad8272c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-2.html
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Stack parameters</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<meta name="assert" content="Element mfrac correctly uses the stack parameters from the MATH table.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<style>
+  math, mspace {
+    font-size: 10px;
+  }
+  @font-face {
+    font-family: bottomdisplaystyleshiftdown5000-axisheight1000;
+    src: url("/fonts/math/stack-bottomdisplaystyleshiftdown5000-axisheight1000.woff");
+  }
+  @font-face {
+    font-family: bottomshiftdown6000-axisheight1000;
+    src: url("/fonts/math/stack-bottomshiftdown6000-axisheight1000.woff");
+  }
+  @font-face {
+    font-family: displaystylegapmin4000;
+    src: url("/fonts/math/stack-displaystylegapmin4000.woff");
+  }
+  @font-face {
+    font-family: gapmin8000;
+    src: url("/fonts/math/stack-gapmin8000.woff");
+  }
+  @font-face {
+    font-family: topdisplaystyleshiftup3000-axisheight1000;
+    src: url("/fonts/math/stack-topdisplaystyleshiftup3000-axisheight1000.woff");
+  }
+  @font-face {
+    font-family: topshiftup9000-axisheight1000;
+    src: url("/fonts/math/stack-topshiftup9000-axisheight1000.woff");
+  }
+</style>
+<script>
+  var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
+  var epsilon = 1;
+
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 5000 * emToPx;
+      assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom,
+                           v, epsilon, "mfrac: denominator shift");
+    }, "BottomDisplayStyleShiftDown");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 5000 * emToPx;
+      assert_approx_equals(getBox("den0002b").top - getBox("ref0002b").bottom,
+                           v, epsilon, "mfrac: denominator shift");
+    }, "BottomDisplayStyleShiftDown Displaystyle");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 5000 * emToPx;
+      assert_approx_equals(getBox("den0002c").top - getBox("ref0002c").bottom,
+                           v, epsilon, "mfrac: denominator shift");
+    }, "BottomDisplayStyleShiftDown Displaystyle om fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 6000 * emToPx;
+      assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom,
+                           v, epsilon, "mfrac: denominator shift");
+    }, "BottomShiftDown");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 4000 * emToPx;
+      assert_approx_equals(getBox("den0004").top - getBox("num0004").bottom,
+                           v, epsilon, "mfrac: gap");
+    }, "DisplayStyleGapMin");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 4000 * emToPx;
+      assert_approx_equals(getBox("den0004b").top - getBox("num0004b").bottom,
+                           v, epsilon, "mfrac: gap");
+    }, "DisplayStyleGapMin Dsiplaystyle");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 4000 * emToPx;
+      assert_approx_equals(getBox("den0004c").top - getBox("num0004c").bottom,
+                           v, epsilon, "mfrac: gap");
+    }, "DisplayStyleGapMin Dsiplaystyle on fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 8000 * emToPx;
+      assert_approx_equals(getBox("den0005").top - getBox("num0005").bottom,
+                           v, epsilon, "mfrac: gap");
+    }, "GapMin");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 3000 * emToPx;
+      assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom,
+                           v, epsilon, "mfrac: numerator shift");
+    }, "TopDisplayStyleShiftUp");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 3000 * emToPx;
+      assert_approx_equals(getBox("ref0006b").top - getBox("num0006b").bottom,
+                           v, epsilon, "mfrac: numerator shift");
+    }, "TopDisplayStyleShiftUp Displaystyle");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 3000 * emToPx;
+      assert_approx_equals(getBox("ref0006c").top - getBox("num0006c").bottom,
+                           v, epsilon, "mfrac: numerator shift");
+    }, "TopDisplayStyleShiftUp Displaystyle on fraction");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 9000 * emToPx;
+      assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom,
+                           v, epsilon, "mfrac: numerator shift");
+    }, "ToShiftUp");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+
+      var v = 9000 * emToPx;
+      assert_approx_equals(getBox("ref0007b").top - getBox("num0007b").bottom,
+                           v, epsilon, "mfrac: numerator shift");
+    }, "ToShiftUp with Displaystyle on fraction");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math display="block" style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;">
+      <mspace id="ref0002" width="3em" height="1em" style="background: green"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0002" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;">
+      <mspace id="ref0002b" width="3em" height="1em" style="background: green"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0002b" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;">
+      <mspace id="ref0002c" width="3em" height="1em" style="background: green"/>
+      <mfrac displaystyle="true" linethickness="0px">
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0002c" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: bottomshiftdown6000-axisheight1000;">
+      <mspace id="ref0003" width="3em" height="1em" style="background: green"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em"/>
+        <mspace width="3em" depth="1em" id="den0003" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math display="block" style="font-family: displaystylegapmin4000;">
+      <mfrac linethickness="0px">
+        <mspace width="3em" height="1em" id="num0004" style="background: blue"/>
+        <mspace width="3em" depth="1em" id="den0004" style="background: green"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: displaystylegapmin4000;">
+      <mfrac linethickness="0px">
+        <mspace width="3em" height="1em" id="num0004b" style="background: blue"/>
+        <mspace width="3em" depth="1em" id="den0004b" style="background: green"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: displaystylegapmin4000;">
+      <mfrac displaystyle="true" linethickness="0px">
+        <mspace width="3em" height="1em" id="num0004c" style="background: blue"/>
+        <mspace width="3em" depth="1em" id="den0004c" style="background: green"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: gapmin8000;">
+      <mfrac linethickness="0px">
+        <mspace width="3em" height="1em" id="num0005" style="background: blue"/>
+        <mspace width="3em" depth="1em" id="den0005" style="background: green"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math display="block" style="font-family: topdisplaystyleshiftup3000-axisheight1000;">
+      <mspace id="ref0006" width="3em" depth="1em" style="background: green"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em" height="1em" id="num0006" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: topdisplaystyleshiftup3000-axisheight1000;">
+      <mspace id="ref0006b" width="3em" depth="1em" style="background: green"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em" height="1em" id="num0006b" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: topdisplaystyleshiftup3000-axisheight1000;">
+      <mspace id="ref0006c" width="3em" depth="1em" style="background: green"/>
+      <mfrac displaystyle="true" linethickness="0px">
+        <mspace width="3em" height="1em" id="num0006c" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math style="font-family: topshiftup9000-axisheight1000;">
+      <mspace id="ref0007" width="3em" depth="1em" style="background: green"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em" height="1em" id="num0007" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true" style="font-family: topshiftup9000-axisheight1000;">
+      <mspace id="ref0007b" width="3em" depth="1em" style="background: green"/>
+      <mfrac displaystyle="false" linethickness="0px">
+        <mspace width="3em" height="1em" id="num0007b" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-3.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-3.html
new file mode 100644
index 0000000000..ddcb9d5a69
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-3.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Fraction/Stack parameters (fallback)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<meta name="assert" content="Element mfrac correctly uses the fraction fallback parameters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<style>
+  /* Testing fallback values is tricky as we don't have a lot of flexibility to
+     make sure one parameter is not shadowed by another one. We also use the
+     Ahem font here, so can't really play with the fallback values involved. */
+  math, mspace {
+    font-size: 200px; /* Large value because underlineThickness is small */
+  }
+  math {
+      /* OS/2.sxHeight = 800 */
+      /* post.underlineThickness == 20 */
+      font-family: Ahem;
+  }
+</style>
+<script>
+  const emToPx = 200 / 1000; // font-size: 200px, font.em = 1000
+  const epsilon = 1;
+  const xHeight = 800;
+  const underlineThickness = 20;
+
+  // NB: This test assumes the fallback shifts are all equal to zero.
+  const axisHeight = xHeight / 2;
+  const fractionRuleThickness = underlineThickness;
+  const fractionNumeratorGapMin = underlineThickness;
+  const fractionDenominatorGapMin = underlineThickness;
+  const fractionNumeratorDisplayStyleGapMin = 3 * underlineThickness;
+  const fractionDenominatorDisplayStyleGapMin = 3 * underlineThickness;
+  const stackGapMin = 3 * underlineThickness;
+  const stackDisplayStyleGapMin = 7 * underlineThickness;
+
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(axisHeight * emToPx,
+                               (getBox("ref0001").top -
+                                getBox("num0001").bottom) -
+                               (fractionRuleThickness/2 +
+                               fractionNumeratorGapMin) * emToPx,
+                               epsilon);
+          assert_approx_equals((getBox("den0002").top -
+                                getBox("num0002").bottom),
+                               (fractionNumeratorGapMin +
+                                fractionRuleThickness +
+                                fractionDenominatorGapMin) * emToPx,
+                               epsilon);
+      }, "nonzero linethickness, displaystyle=false");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(axisHeight * emToPx,
+                               (getBox("ref0003").top -
+                                getBox("num0003").bottom) -
+                               (fractionRuleThickness/2 +
+                                fractionNumeratorDisplayStyleGapMin) * emToPx,
+                               epsilon, "mfrac: thickness, axis height");
+          assert_approx_equals((getBox("den0004").top -
+                                getBox("num0004").bottom),
+                               (fractionNumeratorDisplayStyleGapMin +
+                                fractionRuleThickness +
+                                fractionDenominatorDisplayStyleGapMin) * emToPx,
+                               epsilon);
+      }, "nonzero linethickness, displaystyle=true");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals((getBox("ref1001").top -
+                                getBox("num1001").bottom),
+                               stackGapMin/2 * emToPx,
+                               epsilon);
+          assert_approx_equals((getBox("den1001").top) -
+                               getBox("ref1001").top,
+                               stackGapMin/2 * emToPx,
+                               epsilon);
+      }, "linethickness=0, displaystyle=false");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals((getBox("ref1002").top -
+                                getBox("num1002").bottom),
+                               stackDisplayStyleGapMin/2 * emToPx,
+                               epsilon);
+          assert_approx_equals((getBox("den1002").top) -
+                               getBox("ref1002").top,
+                               stackDisplayStyleGapMin/2 * emToPx,
+                               epsilon);
+      }, "linethickness=0, displaystyle=true");
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mspace id="ref0001" height="0em" depth="1em" width="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="1em" height="2em" depth="0em" id="num0001" style="background: blue"/>
+        <mspace width="1em" height="0em" depth="2em" id="den0001" style="background: purple"/>
+      </mfrac>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mfrac>
+        <mspace width="1em" height="2em" depth="4em" id="num0002" style="background: blue"/>
+        <mspace width="1em" height="4em" depth="2em" id="den0002" style="background: purple"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true">
+      <mspace id="ref0003" height="0em" depth="1em" width="1em" style="background: green"/>
+      <mfrac>
+        <mspace width="1em" height="2em" depth="0em" id="num0003" style="background: blue"/>
+        <mspace width="1em" height="0em" depth="2em" id="den0003" style="background: purple"/>
+      </mfrac>
+    </math>
+  </p>
+  <p>
+    <math displaystyle="true">
+      <mfrac>
+        <mspace width="1em" height="2em" depth="4em" id="num0004" style="background: blue"/>
+        <mspace width="1em" height="4em" depth="2em" id="den0004" style="background: purple"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <mspace id="ref1001" height="0em" depth="1em" width="1em" style="background: green"/>
+      <mfrac linethickness="0">
+        <mspace width="1em" height="2em" depth="0em" id="num1001" style="background: blue"/>
+        <mspace width="1em" height="0em" depth="2em" id="den1001" style="background: purple"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math displaystyle="true">
+      <mspace id="ref1002" height="0em" depth="1em" width="1em" style="background: green"/>
+      <mfrac linethickness="0">
+        <mspace width="1em" height="2em" depth="0em" id="num1002" style="background: blue"/>
+        <mspace width="1em" height="0em" depth="2em" id="den1002" style="background: purple"/>
+      </mfrac>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001-ref.html
new file mode 100644
index 0000000000..06fe8d8d35
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters</title>
+<style>
+  math, mspace {
+    font-size: 20px;
+  }
+  @font-face {
+    font-family: denominatordisplaystylegapmin5000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
+      <mspace height="2em" depth="20em"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="1em" height="1em" style="background: blue"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="1em" depth="1em" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001.html
new file mode 100644
index 0000000000..ee31231145
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters (display gap between bar and denominator)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="match" href="frac-parameters-gap-001-ref.html"/>
+<meta name="assert" content="Element mfrac correctly uses the FractionDenomDisplayStyleGapMin parameter from the MATH table when denominator contains text.">
+<style>
+  math, mspace, mtext {
+    font-size: 20px;
+  }
+  mtext {
+    font-family: math-text;
+    color: blue;
+  }
+  @font-face {
+    font-family: denominatordisplaystylegapmin5000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff");
+  }
+  @font-face {
+    /*
+      math-text has the following properties:
+      - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
+      - glyph A: .5em ascent and .5em descent.
+      - glyph B: 1em ascent and 0em descent.
+      - glyph C: 0em ascent and 1em descent.
+     */
+    font-family: math-text;
+    src: url("/fonts/math/math-text.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
+      <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
+      <mspace height="2em" depth="20em"/>
+      <!--
+           All the fraction bars must be aligned.
+           The gap between the denominators and bar must be FractionDenomDisplayStyleGapMin.
+           The gap should be calculated using the exact bounding box of the glyphs.
+           Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
+        -->
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mtext>A</mtext>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mtext>B</mtext>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mtext>C</mtext>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002-ref.html
new file mode 100644
index 0000000000..30958a6a5f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters</title>
+<style>
+  math, mspace {
+    font-size: 20px;
+  }
+  @font-face {
+    font-family: denominatorgapmin4000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math style="font-family: denominatorgapmin4000-rulethickness1000;">
+      <mspace height="2em" depth="20em"/>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="1em" height="1em" style="background: blue"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace width="1em" depth="1em" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002.html
new file mode 100644
index 0000000000..bf77b2d910
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters (inline gap between bar and denominator)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="match" href="frac-parameters-gap-002-ref.html"/>
+<meta name="assert" content="Element mfrac correctly uses the FractionDenominatorGapMin parameter from the MATH table when denominator contains text.">
+<style>
+  math, mspace, mtext {
+    font-size: 20px;
+  }
+  mtext {
+    font-family: math-text;
+    color: blue;
+  }
+  @font-face {
+    font-family: denominatorgapmin4000-rulethickness1000;
+    src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff");
+  }
+  @font-face {
+    /*
+      math-text has the following properties:
+      - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
+      - glyph A: .5em ascent and .5em descent.
+      - glyph B: 1em ascent and 0em descent.
+      - glyph C: 0em ascent and 1em descent.
+     */
+    font-family: math-text;
+    src: url("/fonts/math/math-text.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math style="font-family: denominatorgapmin4000-rulethickness1000;">
+      <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
+      <mspace height="2em" depth="20em"/>
+      <!--
+           All the fraction bars must be aligned.
+           The gap between the denominators and bar must be FractionDenominatorGapMin.
+           The gap should be calculated using the exact bounding box of the glyphs.
+           Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
+        -->
+      <mfrac>
+        <mspace width="3em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mtext>A</mtext>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mtext>B</mtext>
+      </mfrac>
+      <mfrac>
+        <mspace width="3em"/>
+        <mtext>C</mtext>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003-ref.html
new file mode 100644
index 0000000000..70e2ec5a88
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters</title>
+<style>
+  math, mspace {
+    font-size: 20px;
+  }
+  @font-face {
+    font-family: numeratordisplaystylegapmin8000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
+      <mspace height="20em" depth="2em"/>
+      <mfrac>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="1em" depth=".5em" height=".5em" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="1em" height="1em" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="1em" depth="1em" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003.html
new file mode 100644
index 0000000000..c35c11ffdc
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters (display gap between bar and numerator)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="match" href="frac-parameters-gap-003-ref.html"/>
+<meta name="assert" content="Element mfrac correctly uses the FractionNumDisplayStyleGapMin parameter from the MATH table when numerator contains text.">
+<style>
+  math, mspace, mtext {
+    font-size: 20px;
+  }
+  mtext {
+    font-family: math-text;
+    color: blue;
+  }
+  @font-face {
+    font-family: numeratordisplaystylegapmin8000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff");
+  }
+  @font-face {
+    /*
+      math-text has the following properties:
+      - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
+      - glyph A: .5em ascent and .5em descent.
+      - glyph B: 1em ascent and 0em descent.
+      - glyph C: 0em ascent and 1em descent.
+     */
+    font-family: math-text;
+    src: url("/fonts/math/math-text.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
+      <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
+      <mspace height="20em" depth="2em"/>
+      <!--
+           All the fraction bars must be aligned.
+           The gap between the numerators and bar must be FractionNumDisplayStyleGapMin.
+           The gap should be calculated using the exact bounding box of the glyphs.
+           Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
+        -->
+      <mfrac>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mtext>A</mtext>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mtext>B</mtext>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mtext>C</mtext>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004-ref.html
new file mode 100644
index 0000000000..675d33fbcc
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters</title>
+<style>
+  math, mspace {
+    font-size: 20px;
+  }
+  @font-face {
+    font-family: numeratorgapmin9000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math style="font-family: numeratorgapmin9000-rulethickness1000;">
+      <mspace height="20em" depth="2em"/>
+      <mfrac>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="1em" height="1em" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mspace width="1em" depth="1em" style="background: blue"/>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004.html
new file mode 100644
index 0000000000..6d567d02d9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters (inline gap between bar and numerator)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="match" href="frac-parameters-gap-004-ref.html"/>
+<meta name="assert" content="Element mfrac correctly uses the FractionNumeratorGapMin parameter from the MATH table when numerator contains text.">
+<style>
+  math, mspace, mtext {
+    font-size: 20px;
+  }
+  mtext {
+    font-family: math-text;
+    color: blue;
+  }
+  @font-face {
+    font-family: numeratorgapmin9000-rulethickness1000;
+    src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff");
+  }
+  @font-face {
+    /*
+      math-text has the following properties:
+      - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
+      - glyph A: .5em ascent and .5em descent.
+      - glyph B: 1em ascent and 0em descent.
+      - glyph C: 0em ascent and 1em descent.
+     */
+    font-family: math-text;
+    src: url("/fonts/math/math-text.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math style="font-family: numeratorgapmin9000-rulethickness1000;">
+      <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
+      <mspace height="20em" depth="2em"/>
+      <!--
+           All the fraction bars must be aligned.
+           The gap between the numerators and bar must be FractionNumeratorGapMin.
+           The gap should be calculated using the exact bounding box of the glyphs.
+           Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
+        -->
+      <mfrac>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mtext>A</mtext>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mtext>B</mtext>
+        <mspace width="3em"/>
+      </mfrac>
+      <mfrac>
+        <mtext>C</mtext>
+        <mspace width="3em"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005-ref.html
new file mode 100644
index 0000000000..c794a50047
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters</title>
+<style>
+  math, mspace {
+    font-size: 20px;
+  }
+  @font-face {
+    font-family: displaystylegapmin4000;
+    src: url("/fonts/math/stack-displaystylegapmin4000.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math display="block" style="font-family: displaystylegapmin4000">
+      <mspace height="10em" depth="10em"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1.5em"/>
+        <mspace width="1em" height="1em" style="background: blue"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth=".5em"/>
+        <mspace width="1em" depth="1em" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005.html
new file mode 100644
index 0000000000..a0aa13e679
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Stack parameters (display gap between numerator and denominator)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="match" href="frac-parameters-gap-005-ref.html"/>
+<meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackDisplayStyleGapMin parameter from the MATH table when denominator contains text.">
+<style>
+  math, mspace, mtext {
+    font-size: 20px;
+  }
+  mtext {
+    font-family: math-text;
+    color: blue;
+  }
+  @font-face {
+    font-family: displaystylegapmin4000;
+    src: url("/fonts/math/stack-displaystylegapmin4000.woff");
+  }
+  @font-face {
+    /*
+      math-text has the following properties:
+      - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
+      - glyph A: .5em ascent and .5em descent.
+      - glyph B: 1em ascent and 0em descent.
+      - glyph C: 0em ascent and 1em descent.
+     */
+    font-family: math-text;
+    src: url("/fonts/math/math-text.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math display="block" style="font-family: displaystylegapmin4000">
+      <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
+      <mspace height="10em" depth="10em"/>
+      <!--
+           The gap between the numerators/denominators and the math axis must StackDisplayStyleGapMin / 2.
+           The gap should be calculated using the exact bounding box of the glyphs.
+           The numerator descent is .5em + the denominator ascent.
+           Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
+        -->
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mtext>A</mtext>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1.5em"/>
+        <mtext>B</mtext>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth=".5em"/>
+        <mtext>C</mtext>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006-ref.html
new file mode 100644
index 0000000000..02faaad19f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Fraction parameters</title>
+<style>
+  math, mspace {
+    font-size: 20px;
+  }
+  @font-face {
+    font-family: gapmin8000;
+    src: url("/fonts/math/stack-gapmin8000.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math style="font-family: gapmin8000">
+      <mspace height="10em" depth="10em"/>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1.5em"/>
+        <mspace width="1em" height="1em" style="background: blue"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth=".5em"/>
+        <mspace width="1em" depth="1em" style="background: blue"/>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006.html
new file mode 100644
index 0000000000..1260126e55
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Stack parameters (display gap between numerator and denominator)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="match" href="frac-parameters-gap-006-ref.html"/>
+<meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackGapMin parameter from the MATH table when denominator contains text.">
+<style>
+  math, mspace, mtext {
+    font-size: 20px;
+  }
+  mtext {
+    font-family: math-text;
+    color: blue;
+  }
+  @font-face {
+    font-family: gapmin8000;
+    src: url("/fonts/math/stack-gapmin8000.woff");
+  }
+  @font-face {
+    /*
+      math-text has the following properties:
+      - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
+      - glyph A: .5em ascent and .5em descent.
+      - glyph B: 1em ascent and 0em descent.
+      - glyph C: 0em ascent and 1em descent.
+     */
+    font-family: math-text;
+    src: url("/fonts/math/math-text.woff");
+  }
+  #reference {
+    background: green;
+  }
+  #frame {
+    position: absolute;
+    border-top: 4px solid black;
+    border-bottom: 4px solid black;
+    width: 100%;
+  }
+</style>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  function runTests() {
+    var div = document.getElementById("frame");
+    var refBox = document.getElementById("reference").getBoundingClientRect();
+    div.style.top = `${refBox.top-2}px`;
+    div.style.height = `${refBox.height-4}px`;
+    document.documentElement.classList.remove('reftest-wait');
+  }
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+</script>
+</head>
+<body>
+  <p>
+    This test passes if the blue squares are aligned:
+  </p>
+  <p>
+    <math style="font-family: gapmin8000">
+      <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
+      <mspace height="10em" depth="10em"/>
+      <!--
+           The gap between the numerators/denominators and the math axis must StackGapMin / 2.
+           The gap should be calculated using the exact bounding box of the glyphs.
+           The numerator descent is .5em + the denominator ascent.
+           Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
+        -->
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1em"/>
+        <mtext>A</mtext>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth="1.5em"/>
+        <mtext>B</mtext>
+      </mfrac>
+      <mfrac linethickness="0px">
+        <mspace width="3em" depth=".5em"/>
+        <mtext>C</mtext>
+      </mfrac>
+    </math>
+  </p>
+  <div id="frame"></div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow-ref.html
new file mode 100644
index 0000000000..71f1583fd9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>fraction rendering from in-flow children</title>
+  </head>
+  <body>
+    <math>
+      <mfrac>
+        <mspace width="64px" height="48px" style="background: lightblue"></mspace>
+        <mspace width="128px" height="96px" style="background: lightgreen"></mspace>
+      </mfrac>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow.html
new file mode 100644
index 0000000000..b57564b574
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>fraction rendering from in-flow children</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <meta name="assert" content="Verify rendering of fractions is only affected by in-flow children.">
+    <style>
+      .oof1 {
+          position: absolute;
+      }
+      .oof2 {
+          position: fixed;
+      }
+      .nobox {
+          display: none;
+      }
+    </style>
+    <link rel="match" href="frac-rendering-from-in-flow-ref.html">
+  </head>
+  <body>
+    <math>
+      <mfrac>
+        <mspace height="32px" width="24px" class="oof1"/>
+        <mspace height="16px" width="12px" class="oof2"/>
+        <mspace height="8px" width="4px" class="nobox"/>
+        <mspace width="64px" height="48px" style="background: lightblue"></mspace>
+        <mspace height="32px" width="24px" class="oof1"/>
+        <mspace height="16px" width="12px" class="oof2"/>
+        <mspace height="8px" width="4px" class="nobox"/>
+        <mspace width="128px" height="96px" style="background: lightgreen"></mspace>
+        <mspace height="32px" width="24px" class="oof1"/>
+        <mspace height="16px" width="12px" class="oof2"/>
+        <mspace height="8px" width="4px" class="nobox"/>
+      </mfrac>
+    </math>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001-ref.html
new file mode 100644
index 0000000000..41a262d511
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction bar visibility</title>
+  </head>
+  <body>
+    <p>This test passes if you see a green square and no red.</p>
+    <div style="background: green; width: 200px; height: 200px;">
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001.html
new file mode 100644
index 0000000000..29212c0594
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Fraction bar visibility</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <meta name="assert" content="The CSS visible property affects the rendering of the fraction bar.">
+    <link rel="match" href="frac-visibility-001-ref.html">
+  </head>
+  <body>
+    <p>This test passes if you see a green square and no red.</p>
+    <div style="background: green; width: 200px; height: 200px;">
+      <math>
+        <mfrac style="visibility: hidden; color: red">
+          <mspace width="200px" height="20px"></mspace>
+          <mspace width="200px" height="20px"></mspace>
+        </mfrac>
+      </math>
+    </div>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
-- 
cgit v1.2.3