From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../css-styling/attribute-mapping-001.html         | 111 +++++++++
 .../css-styling/attribute-mapping-002.html         | 106 ++++++++
 .../relations/css-styling/blur-filter-ref.html     |  13 +
 .../mathml/relations/css-styling/blur-filter.html  |  21 ++
 .../relations/css-styling/clip-path-ref.html       |  13 +
 .../mathml/relations/css-styling/clip-path.html    |  21 ++
 .../mathml/relations/css-styling/clip-ref.html     |  13 +
 .../tests/mathml/relations/css-styling/clip.html   |  21 ++
 .../relations/css-styling/color-001-ref.html       |  12 +
 .../mathml/relations/css-styling/color-001.html    |  34 +++
 .../relations/css-styling/color-002-ref.html       |  12 +
 .../mathml/relations/css-styling/color-002.html    |  29 +++
 .../relations/css-styling/color-003-ref.html       |  12 +
 .../mathml/relations/css-styling/color-003.html    |  31 +++
 .../css-styling/color-004.tentative-ref.html       |  12 +
 .../relations/css-styling/color-004.tentative.html |  55 +++++
 .../relations/css-styling/color-005-ref.html       |  12 +
 .../mathml/relations/css-styling/color-005.html    |  88 +++++++
 .../relations/css-styling/default-font-family.html |  36 +++
 ...efault-properties-on-semantics-and-maction.html |  47 ++++
 .../default-properties-on-the-math-root.html       |  57 +++++
 .../relations/css-styling/display-1-ref.html       |  12 +
 .../mathml/relations/css-styling/display-1.html    |  18 ++
 .../mathml/relations/css-styling/display-2.html    | 142 +++++++++++
 .../relations/css-styling/display-contents.html    |  36 +++
 .../css-styling/display-with-overflow-ref.html     |  20 ++
 .../css-styling/display-with-overflow.html         |  19 ++
 .../css-styling/displaystyle-011-ref.html          | 155 ++++++++++++
 .../relations/css-styling/displaystyle-011.html    | 168 +++++++++++++
 .../css-styling/displaystyle-012-ref.html          |  30 +++
 .../relations/css-styling/displaystyle-012.html    |  37 +++
 .../css-styling/displaystyle-013-ref.html          |  58 +++++
 .../relations/css-styling/displaystyle-013.html    |  80 +++++++
 .../css-styling/displaystyle-014-ref.html          |  35 +++
 .../relations/css-styling/displaystyle-014.html    |  55 +++++
 .../css-styling/displaystyle-015-ref.html          |  58 +++++
 .../relations/css-styling/displaystyle-015.html    |  83 +++++++
 .../relations/css-styling/displaystyle-1.html      | 136 +++++++++++
 .../relations/css-styling/displaystyle-2.html      | 208 ++++++++++++++++
 .../relations/css-styling/displaystyle-3.html      |  84 +++++++
 .../relations/css-styling/dynamic-dir-1-ref.html   |  75 ++++++
 .../relations/css-styling/dynamic-dir-1.html       | 105 ++++++++
 ...ating-inside-mathml-with-block-display-ref.html |  15 ++
 .../floating-inside-mathml-with-block-display.html |  20 ++
 .../css-styling/floats/floating-math-ref.html      |  14 ++
 .../css-styling/floats/floating-math.html          |  19 ++
 .../css-styling/floats/not-floating-001.html       |  74 ++++++
 .../css-styling/ignored-properties-001.html        |  79 ++++++
 .../legacy-scriptminsize-attribute-ref.html        |  27 +++
 .../legacy-scriptminsize-attribute.html            |  32 +++
 .../legacy-scriptsizemultiplier-attribute-ref.html |  27 +++
 .../legacy-scriptsizemultiplier-attribute.html     |  32 +++
 .../relations/css-styling/lengths-1-ref.html       |  14 ++
 .../mathml/relations/css-styling/lengths-1.html    | 122 ++++++++++
 .../mathml/relations/css-styling/lengths-2.html    | 266 +++++++++++++++++++++
 .../css-styling/mathbackground-001-notref.html     |   9 +
 .../relations/css-styling/mathbackground-001.html  |  14 ++
 .../css-styling/mathbackground-002-notref.html     |   9 +
 .../relations/css-styling/mathbackground-002.html  |  14 ++
 .../css-styling/mathbackground-003-notref.html     |   7 +
 .../relations/css-styling/mathbackground-003.html  |  11 +
 .../css-styling/mathbackground-004-notref.html     |   9 +
 .../relations/css-styling/mathbackground-004.html  |  14 ++
 .../css-styling/mathcolor-001-notref.html          |   9 +
 .../relations/css-styling/mathcolor-001.html       |  13 +
 .../css-styling/mathcolor-002-notref.html          |   9 +
 .../relations/css-styling/mathcolor-002.html       |  14 ++
 .../css-styling/mathcolor-003-notref.html          |   7 +
 .../relations/css-styling/mathcolor-003.html       |  11 +
 .../css-styling/mathcolor-004-notref.html          |   9 +
 .../relations/css-styling/mathcolor-004.html       |  14 ++
 .../mathcolor-mathbackground-css-ref.html          |  23 ++
 .../css-styling/mathcolor-mathbackground-css.html  |  27 +++
 .../mathsize-attribute-css-keywords-ref.html       |  26 ++
 .../mathsize-attribute-css-keywords.html           |  33 +++
 .../mathsize-attribute-legacy-values-ref.html      |  16 ++
 .../mathsize-attribute-legacy-values.html          |  23 ++
 .../css-styling/mathsize-attribute-ref.html        |  19 ++
 .../relations/css-styling/mathsize-attribute.html  |  22 ++
 .../css-styling/mathvariant-auto-ref.html          | 139 +++++++++++
 .../css-styling/mathvariant-auto-selection.html    |  33 +++
 .../relations/css-styling/mathvariant-auto.html    | 145 +++++++++++
 .../mathvariant-font-style-font-weight-ref.html    |  44 ++++
 .../mathvariant-font-style-font-weight.html        |  49 ++++
 .../css-styling/mi-fontstyle-fontweight-ref.html   |  22 ++
 .../css-styling/mi-fontstyle-fontweight.html       |  27 +++
 .../relations/css-styling/mozilla-393760-1-ref.xml |  27 +++
 .../relations/css-styling/mozilla-393760-1.xml     |  31 +++
 .../relations/css-styling/mozilla-393760-2-ref.xml |   5 +
 .../relations/css-styling/mozilla-393760-2.xml     |  15 ++
 .../relations/css-styling/multi-column-layout.html |  56 +++++
 .../not-participating-to-parent-layout.html        |  77 ++++++
 .../out-of-flow/absolutely-positioned-001-ref.html |  18 ++
 .../out-of-flow/absolutely-positioned-001.html     |  25 ++
 .../out-of-flow/all-mathml-containers.html         | 103 ++++++++
 .../out-of-flow/fixed-positioned-001-ref.html      |  28 +++
 .../out-of-flow/fixed-positioned-001.html          |  35 +++
 .../css-styling/overflow/computed-value-001.html   |  45 ++++
 .../padding-border-margin/border-001.html          | 179 ++++++++++++++
 .../padding-border-margin/border-002.html          |  72 ++++++
 .../padding-border-margin/margin-001.html          | 179 ++++++++++++++
 .../padding-border-margin/margin-002.html          |  86 +++++++
 .../padding-border-margin/margin-003.html          |  93 +++++++
 .../padding-border-margin/padding-001.html         | 179 ++++++++++++++
 .../padding-border-margin/padding-002.html         |  71 ++++++
 .../padding-border-margin-001-ref.html             |  17 ++
 .../padding-border-margin-001.html                 |  22 ++
 .../padding-border-margin-002-ref.html             |  18 ++
 .../padding-border-margin-002.html                 |  34 +++
 .../padding-border-margin-003-ref.html             |  18 ++
 .../padding-border-margin-003.html                 |  33 +++
 .../css-styling/presentational-hints-001-ref.html  |  62 +++++
 .../css-styling/presentational-hints-001.html      |  63 +++++
 .../css-styling/presentational-hints-002-ref.html  |  59 +++++
 .../css-styling/presentational-hints-002.html      |  84 +++++++
 .../relations/css-styling/scriptlevel-001.html     | 219 +++++++++++++++++
 .../size-containment-001.tentative.html            |  77 ++++++
 .../relations/css-styling/table-width-1-ref.xhtml  |  65 +++++
 .../relations/css-styling/table-width-1.xhtml      |  66 +++++
 .../relations/css-styling/table-width-2-ref.html   |  34 +++
 .../relations/css-styling/table-width-2.html       |  36 +++
 .../relations/css-styling/table-width-3-ref.html   |  92 +++++++
 .../relations/css-styling/table-width-3.html       |  83 +++++++
 .../relations/css-styling/table-width-4-ref.html   |  41 ++++
 .../relations/css-styling/table-width-4.html       |  43 ++++
 .../relations/css-styling/transform-ref.html       |  13 +
 .../mathml/relations/css-styling/transform.html    |  21 ++
 .../relations/css-styling/visibility-001-ref.html  |  12 +
 .../relations/css-styling/visibility-001.html      |  34 +++
 .../relations/css-styling/visibility-002-ref.html  |  12 +
 .../relations/css-styling/visibility-002.html      |  29 +++
 .../relations/css-styling/visibility-003-ref.html  |  12 +
 .../relations/css-styling/visibility-003.html      |  31 +++
 .../css-styling/visibility-004.tentative-ref.html  |  12 +
 .../css-styling/visibility-004.tentative.html      |  55 +++++
 .../relations/css-styling/visibility-005-ref.html  |  12 +
 .../relations/css-styling/visibility-005.html      |  88 +++++++
 .../relations/css-styling/width-height-001.html    |  62 +++++
 .../css-styling/width-height-002-ref.html          | 162 +++++++++++++
 .../relations/css-styling/width-height-002.html    | 135 +++++++++++
 .../css-styling/width-height-003-ref.html          | 178 ++++++++++++++
 .../relations/css-styling/width-height-003.html    | 150 ++++++++++++
 .../relations/css-styling/width-height-004.html    | 133 +++++++++++
 .../writing-mode/force-horizontal-tb.html          |  50 ++++
 .../reset-and-logicial-property-ref.html           |  15 ++
 .../writing-mode/reset-and-logicial-property.html  |  20 ++
 .../css-styling/writing-mode/writing-mode-001.html |  69 ++++++
 .../css-styling/writing-mode/writing-mode-002.html |  82 +++++++
 148 files changed, 7809 insertions(+)
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/clip-path.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/clip.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-003.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/color-005.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/display-1.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/display-2.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/display-contents.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-selection.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1-ref.xml
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1.xml
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2-ref.xml
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2.xml
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/size-containment-001.tentative.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-1-ref.xhtml
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-1.xhtml
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-2-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-2.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-3-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-3.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-4-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/table-width-4.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/transform.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/width-height-002-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/width-height-002.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/width-height-003-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/width-height-003.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/width-height-004.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
 create mode 100644 testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html

(limited to 'testing/web-platform/tests/mathml/relations/css-styling')

diff --git a/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html
new file mode 100644
index 0000000000..e423b16fd7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Attribute mapping</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<meta name="assert" content="Verify that dir, mathcolor, mathbackground and mathsize are mapped to CSS but that deprecated MathML3 attributes are not.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  #container {
+      color: blue;
+      font-size: 50px;
+  }
+</style>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function runTests() {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+          var tag = element.tagName;
+          var style = window.getComputedStyle(element);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("direction"), "ltr", "no attribute");
+              element.setAttribute("dir", "rtl");
+              assert_equals(style.getPropertyValue("direction"), "rtl", "attribute specified");
+              element.setAttribute("dir", "RtL");
+              assert_equals(style.getPropertyValue("direction"), "rtl", "case insensitive");
+              element.setAttribute("dir", "auto");
+              assert_equals(style.getPropertyValue("direction"), "ltr", "auto");
+              element.setAttribute("dir", "foo");
+              assert_equals(style.getPropertyValue("direction"), "ltr", "random value");
+          }, `dir on the ${tag} element is mapped to CSS direction`)
+
+          test(function() {
+              assert_equals(style.getPropertyValue("color"),
+                            "rgb(0, 0, 255)",
+                            "no attribute");
+              element.setAttribute("mathcolor", "black");
+              assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified");
+              // The color names are case-insensitive.
+              // See https://www.w3.org/TR/css-color-3/#html4
+              element.setAttribute("mathcolor", "GrEeN");
+              assert_equals(style.getPropertyValue("color"), "rgb(0, 128, 0)", "case insensitive");
+          }, `mathcolor on the ${tag} element is mapped to CSS color`);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("background-color"),
+                            tag === "merror" ?
+                            "rgb(255, 255, 224)" : "rgba(0, 0, 0, 0)",
+                            "no attribute");
+              element.setAttribute("mathbackground", "lightblue");
+              assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified");
+              // The color names are case-insensitive.
+              // See https://www.w3.org/TR/css-color-3/#html4
+              element.setAttribute("mathbackground", "YeLlOw");
+              assert_equals(style.getPropertyValue("background-color"), "rgb(255, 255, 0)", "case insensitive");
+          }, `mathbackground on the ${tag} element is mapped to CSS background-color`);
+
+          test(function() {
+              // "none" and "mprescripts" can only be used as non-first children of mmultiscripts so font-size
+              // is incremented and the resulting fraction string is hard to test accurately, skip for now.
+              if (tag === "none" || tag === "mprescripts")
+                  return;
+              assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute");
+              element.setAttribute("mathsize", "20px");
+              assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified");
+              // unit identifiers are ASCII case-insensitive.
+              // https://www.w3.org/TR/css-values-3/#typedef-dimension
+              element.setAttribute("mathsize", "30Px");
+              assert_equals(style.getPropertyValue("font-size"), "30px", "case insensitive");
+          }, `mathsize on the ${tag} element is mapped to CSS font-size`);
+
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mathsize(), "Superseding attributes are supported");
+              var properties = ["background-color", "color", "fontfamily", "font-size", "font-style", "font-weight"];
+              var oldStyle = {};
+              properties.forEach(property => {
+                  oldStyle[property] = style.getPropertyValue(property);
+              });
+              element.setAttribute("background", "red");
+              element.setAttribute("color", "blue");
+              element.setAttribute("fontfamily", "monospace");
+              element.setAttribute("fontsize", "50px");
+              element.setAttribute("fontstyle", "italic");
+              element.setAttribute("fontweight", "bold");
+              properties.forEach(property => {
+                  assert_equals(style.getPropertyValue(property), oldStyle[property], `${property}`);
+              });
+          }, `deprecated MathML3 attributes on the ${tag} element are not mapped to CSS`);
+      });
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html
new file mode 100644
index 0000000000..cad267731a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Attribute mapping</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<meta name="assert" content="Verify that mathvariant, scriptlevel, displaystyle are mapped to CSS">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  #container {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function fontSize(style) {
+      return parseFloat((/(.+)px/).exec(style.getPropertyValue("font-size"))[1]);
+  }
+  function runTests() {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math><mrow>${MathMLFragments[tag]}</mrow></math>`);
+      }
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+          var tag = element.tagName;
+          var style = window.getComputedStyle(element);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("text-transform"),
+                            tag === "mi" ? "math-auto" : "none",
+                            "no attribute");
+              element.parentNode.setAttribute("style", "text-transform: uppercase");
+              assert_equals(style.getPropertyValue("text-transform"),
+                            tag === "mi" ? "math-auto" : "uppercase",
+                            "text-transform on parent");
+              element.setAttribute("mathvariant", "normal");
+              assert_equals(style.getPropertyValue("text-transform"),
+                            tag === "mi" ? "none" : "uppercase", "attribute specified");
+              element.setAttribute("mathvariant", "NoRmAl");
+              assert_equals(style.getPropertyValue("text-transform"),
+                            tag === "mi" ? "none" : "uppercase", "case insensitive");
+          }, `mathvariant on the ${tag} element is ${tag === "mi" ? "" : "not"} mapped to CSS text-transform`)
+
+          test(function() {
+              // none and mprescripts appear as scripts
+              assert_equals(style.getPropertyValue("math-depth"), tag === "none" || tag === "mprescripts" ? "1" : "0", "no attribute");
+
+              var absoluteScriptlevel = 2;
+              element.setAttribute("scriptlevel", absoluteScriptlevel);
+              assert_equals(style.getPropertyValue("math-depth"), "" + absoluteScriptlevel, "attribute specified <U>");
+
+              var positiveScriptlevelDelta = 1;
+              element.setAttribute("scriptlevel", `+${positiveScriptlevelDelta}`);
+              assert_equals(style.getPropertyValue("math-depth"), "" + positiveScriptlevelDelta, "attribute specified +<U>");
+
+              var negativeScriptlevelDelta = -3;
+              element.setAttribute("scriptlevel", `${negativeScriptlevelDelta}`);
+              assert_equals(style.getPropertyValue("math-depth"), "" + negativeScriptlevelDelta, "attribute specified -<U>");
+
+              element.setAttribute("scriptlevel", absoluteScriptlevel);
+              element.setAttribute("mathsize", "42px");
+              assert_approx_equals(fontSize(style), 42, 1, "mathsize wins over scriptlevel");
+
+          }, `scriptlevel on the ${tag} element is mapped to math-depth(...)`);
+
+          test(function() {
+              element.removeAttribute("scriptlevel");
+              // none and mprescripts appear as scripts
+              let expected = `${tag === "none" || tag === "mprescripts" ? "1" : "0"}`;
+              assert_equals(style.getPropertyValue("math-depth"), expected, "no attribute");
+
+              // FIXME: Should we test values " +1" and "+1 " here?
+              // See https://github.com/w3c/mathml/issues/122
+              ["+-1", "--1", "+z1", "+ 1", "2.0", "-3\"", "200px", "add(2)"].forEach(invalid_value => {
+                element.setAttribute("scriptlevel", invalid_value);
+                assert_equals(style.getPropertyValue("math-depth"), expected, `invalid scriptlevel value '${invalid_value}'`);
+              });
+          }, `invalid scriptlevel values on the ${tag} element are not mapped to math-depth(...)`);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("math-style"), "compact", "no attribute");
+              element.setAttribute("displaystyle", "true");
+              assert_equals(style.getPropertyValue("math-style"), "normal", "attribute specified");
+              element.setAttribute("displaystyle", "TrUe");
+              assert_equals(style.getPropertyValue("math-style"), "normal", "case insensitive");
+          }, `displaystyle on the ${tag} element is mapped to CSS math-style`);
+      });
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <div><math class="element"></math></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html
new file mode 100644
index 0000000000..21fc165b7d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Blur filter (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be blurred.</p>
+  <div style="background: green; filter: blur(5px); width: 200px; height: 200px;"></div>
+  <div style="background: green; filter: blur(5px); width: 200px; height: 200px; position: absolute; top: 300px"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html
new file mode 100644
index 0000000000..92a894bf34
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Blur filter</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="blur-filter-ref.html"/>
+<meta name="assert" content="Verify that 'filter: blur' works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be blurred.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="background: green; filter: blur(5px)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px">
+    <math style="filter: blur(5px)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html
new file mode 100644
index 0000000000..57935564bf
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be clipped to a polygon.</p>
+  <div style="background: green; width: 200px; height: 200px; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"></div>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html
new file mode 100644
index 0000000000..abe58e2261
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="clip-path-ref.html"/>
+<meta name="assert" content="Verify that the clip property works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be clipped to a polygon.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="background: green; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px; width: 200px; height: 200px">
+    <math style="position: absolute; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html
new file mode 100644
index 0000000000..7882ac8c31
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be clipped.</p>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 100px; clip: rect(0px 100px 100px 0px)"></div>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; clip: rect(0px 100px 100px 0px)"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip.html b/testing/web-platform/tests/mathml/relations/css-styling/clip.html
new file mode 100644
index 0000000000..48b7753fd8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="clip-ref.html"/>
+<meta name="assert" content="Verify that the clip property works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be clipped.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="position:absolute; top:100px; background: green; clip: rect(0px 100px 100px 0px)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px; width: 200px; height: 200px">
+    <math style="position: absolute; clip: rect(0px 100px 100px 0px)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-001.html b/testing/web-platform/tests/mathml/relations/css-styling/color-001.html
new file mode 100644
index 0000000000..76d65f579c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="color-001-ref.html"/>
+<meta name="assert" content="Verify that the color is used for the text of token elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><mi style="color: green">1</mi></math>
+    <math><mn style="color: green">2</mn></math>
+    <math><mo style="color: green">3</mo></math>
+    <math><mtext style="color: green">4</mtext></math>
+    <math><ms style="color: green">5</ms></math>
+    <div id="dynamic">
+      <math><mi>1</mi></math>
+      <math><mn>2</mn></math>
+      <math><mo>3</mo></math>
+      <math><mtext>4</mtext></math>
+      <math><ms>5</ms></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-002.html b/testing/web-platform/tests/mathml/relations/css-styling/color-002.html
new file mode 100644
index 0000000000..bce24f54c8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
+<link rel="match" href="color-002-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and fraction bar of the mfrac element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><mfrac style="color: green"><mn>1</mn><mn>2</mn></mfrac></math>
+    <div id="dynamic">
+      <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <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/relations/css-styling/color-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-003.html b/testing/web-platform/tests/mathml/relations/css-styling/color-003.html
new file mode 100644
index 0000000000..dd04b61054
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#radical-symbol">
+<link rel="match" href="color-003-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and radical symbol of the msqrt and mroot elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><msqrt style="color: green"><mn>1</mn></msqrt></math>
+    <math><mroot style="color: green"><mn>2</mn><mn>2</mn></mroot></math>
+    <div id="dynamic">
+      <math><msqrt><mn>1</mn></msqrt></math>
+      <math><mroot><mn>2</mn><mn>2</mn></mroot></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html
new file mode 100644
index 0000000000..4bd15e62a0
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://github.com/mathml-refresh/mathml-core/pull/24">
+<link rel="match" href="color-004.tentative-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and graphical elements of the menclose element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><menclose notation="left" style="color: green"><mn>1</mn></menclose></math>
+    <math><menclose notation="right" style="color: green"><mn>2</mn></menclose></math>
+    <math><menclose notation="top" style="color: green"><mn>3</mn></menclose></math>
+    <math><menclose notation="bottom" style="color: green"><mn>4</mn></menclose></math>
+    <math><menclose notation="box" style="color: green"><mn>5</mn></menclose></math>
+    <math><menclose notation="roundedbox" style="color: green"><mn>6</mn></menclose></math>
+    <math><menclose notation="actuarial" style="color: green"><mn>7</mn></menclose></math>
+    <math><menclose notation="madruwb" style="color: green"><mn>8</mn></menclose></math>
+    <math><menclose notation="horizontalstrike" style="color: green"><mn>9</mn></menclose></math>
+    <math><menclose notation="verticalstrike" style="color: green"><mn>10</mn></menclose></math>
+    <math><menclose notation="updiagonalstrike" style="color: green"><mn>11</mn></menclose></math>
+    <math><menclose notation="downdiagonalstrike" style="color: green"><mn>12</mn></menclose></math>
+    <math><menclose notation="longdiv" style="color: green"><mn>13</mn></menclose></math>
+    <math><menclose notation="circle" style="color: green"><mn>14</mn></menclose></math>
+    <div id="dynamic">
+      <math><menclose notation="left"><mn>1</mn></menclose></math>
+      <math><menclose notation="right"><mn>2</mn></menclose></math>
+      <math><menclose notation="top"><mn>3</mn></menclose></math>
+      <math><menclose notation="bottom"><mn>4</mn></menclose></math>
+      <math><menclose notation="box"><mn>5</mn></menclose></math>
+      <math><menclose notation="roundedbox"><mn>6</mn></menclose></math>
+      <math><menclose notation="actuarial"><mn>7</mn></menclose></math>
+      <math><menclose notation="madruwb"><mn>8</mn></menclose></math>
+      <math><menclose notation="horizontalstrike"><mn>9</mn></menclose></math>
+      <math><menclose notation="verticalstrike"><mn>10</mn></menclose></math>
+      <math><menclose notation="updiagonalstrike"><mn>11</mn></menclose></math>
+      <math><menclose notation="downdiagonalstrike"><mn>12</mn></menclose></math>
+      <math><menclose notation="longdiv"><mn>13</mn></menclose></math>
+      <math><menclose notation="circle"><mn>14</mn></menclose></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-005.html b/testing/web-platform/tests/mathml/relations/css-styling/color-005.html
new file mode 100644
index 0000000000..f2660c9e62
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-005.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+<link rel="match" href="color-005-ref.html"/>
+<meta name="assert" content="Verify that the color is used for normal, stretchy and large operators.">
+<style>
+  math {
+      font: 20px/1 Ahem;
+  }
+  @font-face {
+      font-family: operators;
+      src: url("/fonts/math/operators.woff");
+  }
+  mo {
+      font-family: operators;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div id="square" style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math>
+      <!-- unstretched operators -->
+      <mo style="color: green">⥯</mo>
+      <mo style="color: green">+</mo>
+      <mo style="color: green">-</mo>
+    </math>
+    <math displaystyle="true">
+      <!-- large operator -->
+      <mo largeop="true" style="color: green">⥯</mo>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, small size -->
+        <mspace height="2em"/>
+        <mo style="color: green">⥯</mo>
+      </mrow>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, large size -->
+        <mspace height="4em"/>
+        <mo style="color: green">⥯</mo>
+      </mrow>
+    </math>
+    <div id="dynamic">
+      <math>
+        <!-- unstretched operators -->
+        <mo stretchy="false">⥯</mo>
+        <mo>+</mo>
+        <mo>-</mo>
+      </math>
+      <math displaystyle="true">
+        <!-- large operator -->
+        <mo largeop="true">⥯</mo>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, small size -->
+          <mspace height="2em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, large size -->
+          <mspace height="4em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+    </div>
+  </div>
+  <script src="/mathml/support/fonts.js"></script>
+  <script>
+    window.addEventListener("load", () => loadAllFonts().then(() => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    }));
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_operator_spacing");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html b/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html
new file mode 100644
index 0000000000..c471b0fc9d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Default font-family on the &lt;math&gt; root</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Verify that the default font-family is 'math'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div id="log"></div>
+  <div style="font-family: BB2F7F3E9FEE11EA96DF67A737751C2F;">
+    <div id="inherited-reference"></div>
+    <math id="math-not-inherited"></math>
+  </div>
+  <math id="math-default"></math>
+
+  <script>
+    function getFontFamily(id) {
+        return window.getComputedStyle(document.getElementById(id)).fontFamily;
+    }
+
+    test(function () {
+        assert_equals(getFontFamily("inherited-reference"), "BB2F7F3E9FEE11EA96DF67A737751C2F");
+        assert_not_equals(getFontFamily("math-not-inherited"), getFontFamily("inherited-reference"));
+    }, "Default font-family on <math> is not inherited");
+
+    test(function () {
+        assert_equals(getFontFamily("math-not-inherited"), "math");
+        assert_equals(getFontFamily("math-default"), "math");
+    }, "Default font-family on <math> is 'math'");
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html
new file mode 100644
index 0000000000..23f8b62dfa
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Default properties on &lt;semantics&gt; and &lt;maction&gt;</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation">
+<link rel="help" href="https://w3c.github.io/mathml-core/#enlivening-expressions">
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Test that only the first children of semantics/maction are displayed.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div id="log"></div>
+  <div>
+    <math>
+      <semantics>
+        <mn>1</mn>
+        <mn>2</mn>
+        <mn>3</mn>
+        <mn>4</mn>
+        <mn>5</mn>
+      </semantics>
+      <maction>
+        <mn>1</mn>
+        <mn>2</mn>
+        <mn>3</mn>
+        <mn>4</mn>
+        <mn>5</mn>
+      </maction>
+    </math>
+  </div>
+
+  <script>
+    ["semantics", "maction"].forEach(name => {
+      let element = document.getElementsByTagName(name)[0];
+      test(() => {
+        let child = element.firstElementChild;
+        assert_not_equals(window.getComputedStyle(child).display, "none", `Child ${child.innerText} does not have display: none`);
+        for (child = child.nextElementSibling; child; child = child.nextElementSibling) {
+          assert_equals(window.getComputedStyle(child).display, "none", `Child ${child.innerText} has display: none`);
+        }
+      }, `Display value of children of the <${name}> element`);
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html
new file mode 100644
index 0000000000..c329935f2e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Default properties on the &lt;math&gt; root</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Test properties on the math root set by the UA stylesheet.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  math {
+      font-size: 100px;
+  }
+  .styled {
+      direction: rtl;
+      writing-mode: vertical-lr;
+      text-indent: .5em;
+      letter-spacing: .5em;
+      line-height: .5em;
+      word-spacing: .5em;
+      font-style: italic;
+      font-weight: bold;
+  }
+</style>
+
+</head>
+<body>
+  <div id="log"></div>
+  <div class="styled">
+    <math id="ua"></math>
+    <math id="author" class="styled"></math>
+  </div>
+
+  <script>
+    function getProperty(id, property) {
+        return window.getComputedStyle(document.getElementById(id))[property];
+    }
+    [
+        // Property name, value when specified from the UA, from the author.
+        ["direction", "ltr", "rtl"],
+        ["writing-mode", "horizontal-tb", "horizontal-tb"], // MathML Core level 1 only supports horizontal mode.
+        ["text-indent", "0px", "50px"],
+        ["letter-spacing", "normal", "50px"],
+        ["line-height", "normal", "50px"],
+        ["word-spacing", "0px", "50px"],
+        ["font-style", "normal", "italic"],
+        ["font-weight", "400", "700"]
+    ].forEach(([name, ua_value, author_value]) => {
+        test(function () {
+            assert_equals(getProperty("ua", name), ua_value, "when specified from the UA sheet");
+            assert_equals(getProperty("author", name), author_value, "when specified by the author");
+        }, `Value of ${name} on the <math> root`);
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html
new file mode 100644
index 0000000000..ce65aba18c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>display (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-1.html b/testing/web-platform/tests/mathml/relations/css-styling/display-1.html
new file mode 100644
index 0000000000..5a9e4db687
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>display</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="display-1-ref.html"/>
+<meta name="assert" content="Verify that the 'display: none' property works on MathML elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math style="display: none;"><mspace width="200px" height="200px" style="background: red"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-2.html b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html
new file mode 100644
index 0000000000..1d0810bead
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Verify that one can override the layout of MathML elements with the CSS display property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that one can override the display of a MathML element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      font-family: inherit;
+  }
+  mfrac {
+      padding: 0;
+  }
+</style>
+<script>
+  const Xsize = 25;
+  const templates = {
+      "block display": `<math style="display: block;">XXX</math>`,
+      "block display with contrained width": `<math style="display: block; width: ${2*Xsize}px;">XXX</math>`,
+      "list display inside display block": `<math style="display: block">\
+  <mmultiscripts style="display: list-item;">X</mmultiscripts>\
+  <maction style="display: list-item;">X</maction>\
+  <mpadded style="display: list-item;">X</mpadded>\
+  <msqrt style="display: list-item;">X</msqrt>\
+  <mroot style="display: list-item;">X</mroot>\
+  <mtext style="display: list-item;">X</mtext>\
+</math>`,
+      "inline display": `<math style="display: inline;">XXX</math>`,
+      "inline-block display": `<math style="display: inline-block">XXX</math>`,
+      "table display (math)": `<math style="display: table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</math>`,
+      "table display (mrow)": `<math display="block">\
+<mrow style="display: table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</mrow></math>`,
+      "inline-table display (math)": `<math style="display: inline-table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</math>`,
+      "inline-table display (mrow)": `<math display="block">\
+<mrow style="display: inline-table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</mrow></math>`,
+      "flexbox display (math)": `<math style="display: flex; flex-direction: column;">XXX</math>`,
+      "flexbox display (mrow)": `<math display="block"><mrow style="display: flex; flex-direction: column;">XXX</mrow></math>`,
+      "grid display (math)": `<math style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</math>`,
+      "grid display (mrow)": `<math display="block"><mrow style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</mrow></math>`,
+      "ruby display (math)": `<math style="display: ruby;">\
+<mrow style="display: ruby-base;">X</mrow>\
+<mrow style="display: ruby-text">XX</mrow>\
+</math>`,
+      "ruby display (mrow)": `<math display="block"><mrow style="display: ruby;">\
+<mrow style="display: ruby-base;">X</mrow>\
+<mrow style="display: ruby-text">XX</mrow>\
+</mrow></math>`,
+      "block display with column width (math)": `<math style="display: block; column-width: ${2*Xsize}px">\
+    <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\
+</math>`,
+      "block display with column width (mrow)": `<math style="display: block"><mrow style="display: block; column-width: ${2*Xsize}px">\
+    <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\
+</mrow></math>`,
+  };
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+
+      for (let key in templates) {
+          if (!templates.hasOwnProperty(key))
+              continue;
+          let mathtest = templates[key].
+              replace(/X/g, `<mspace style="display: inline-block; width: ${Xsize}px; height: ${Xsize}px; background: black"></mspace>`);
+          let reference = mathtest.
+              replace(/maction|math|mfrac|mmultiscripts|mover|mover|mpadded|mrow|mspace|msubsup|msub|msup|mtable|munderover|munder|msqrt|mroot|mtext/g, "div");
+          document.body.insertAdjacentHTML("beforeend", `<div style="font: 20px/1 Ahem; position: absolute;">\
+<div><span>${key}:</span>${mathtest}</div>\
+<div><span>${key}:</span>${reference}</div>\
+</div>`);
+          let div = document.body.lastElementChild;
+          let elementDiv = div.firstElementChild;
+          let referenceDiv = div.lastElementChild;
+
+          test(function() {
+              const epsilon = 1;
+              compareLayout(elementDiv, referenceDiv, epsilon);
+          }, `${key}`);
+
+          div.style = "display: none;"; // Hide the div after measurement.
+      }
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html b/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html
new file mode 100644
index 0000000000..b18fdd6c8b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>display: contents</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<meta name="assert" content="Verify that display: contents computes to display: none">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function runTests() {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      test(function() {
+          Array.from(document.getElementsByClassName("element")).forEach(element => {
+              var style = window.getComputedStyle(element);
+              element.setAttribute("style", "display: contents");
+              assert_equals(style.getPropertyValue("display"), "none", `${tag}`);
+          });
+      }, "display: contents computes to display: none");
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow-ref.html
new file mode 100644
index 0000000000..b359414dc2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+div {
+  width: 20px;
+  padding: 5px;
+  font-size: 40px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+</style>
+<div>
+  <math display="block" style="width: min-content;">
+    <mn>text</mn>
+  </math>
+</div>
+<div style="direction: rtl;">
+  <math display="block" style="width: min-content;">
+    <mn>text</mn>
+  </math>
+</div>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow.html b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow.html
new file mode 100644
index 0000000000..33df26c3ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1416539">
+<link rel="match" href="display-with-overflow-ref.html">
+<meta name="assert" content="Use safe centering (so that content is reachable with scroll) for display=block centering.">
+<style>
+math {
+  width: 20px;
+  padding: 5px;
+  font-size: 40px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+</style>
+<math display="block">
+  <mn>text</mn>
+</math>
+<math display="block" style="direction: rtl;">
+  <mn>text</mn>
+</math>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html
new file mode 100644
index 0000000000..400c46a245
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test displaystyle on mstyle -->
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo>O</mo><mo>O</mo></munder>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <msub><mo>O</mo><mo>O</mo></munder>
+      </mstyle>
+    </math>
+
+    <!-- The mfrac element sets displaystyle to "false", or if it was already
+         false increments scriptlevel by 1, within numerator and denominator.
+      -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mfrac>
+      </mstyle>
+    </math>
+
+    <!--    The mroot element increments scriptlevel by 2, and sets
+            displaystyle to "false", within index, but leaves both attributes
+            unchanged within base.
+            The msqrt element leaves both attributes unchanged within its
+            argument. -->
+    <math>
+      <mstyle displaystyle="true">
+        <mroot>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mroot>
+        <msqrt>
+          <munder><mo>O</mo><mo>O</mo></munder>
+        </msqrt>
+      </mstyle>
+    </math>
+
+<!--
+    The msub element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within subscript, but leaves both attributes unchanged within base.
+
+   The msup element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within superscript, but leaves both attributes unchanged within
+   base.
+
+   The msubsup element [...] increments scriptlevel by 1, and sets displaystyle
+   to "false", within subscript and superscript, but leaves both attributes
+   unchanged within base.
+
+   The mmultiscripts element increments scriptlevel by 1, and sets displaystyle
+   to "false", within each of its arguments except base, but leaves both
+   attributes unchanged within base.
+   -->
+    <math>
+      <mstyle displaystyle="true">
+        <msub>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </msub>
+        <msup>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </msup>
+        <msubsup>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </msubsup>
+        <mmultiscripts>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <mprescripts/>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mmultiscripts>
+      </mstyle>
+    </math>
+
+<!--
+   The munder element [...] always sets displaystyle to "false" within the
+   underscript, but increments scriptlevel by 1 only when accentunder is
+   "false". Within base, it always leaves both attributes unchanged.
+
+   The mover element [...] always sets displaystyle to "false" within
+   overscript, but increments scriptlevel by 1 only when accent is "false".
+   Within base, it always leaves both attributes unchanged.
+
+   The munderover [..] always sets displaystyle to "false" within underscript
+   and overscript, but increments scriptlevel by 1 only when accentunder or
+   accent, respectively, are "false". Within base, it always leaves both
+   attributes unchanged.
+-->
+    <math>
+      <mstyle displaystyle="true">
+        <munder>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </munder>
+        <mover>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mover>
+        <munderover>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </munderover>
+      </mstyle>
+    </math>
+
+<!--
+   The displaystyle attribute is allowed on the mtable element to set the
+   inherited value of the attribute. If the attribute is not present, the
+   mtable element sets displaystyle to "false" within the table elements.
+-->
+    <math>
+      <mstyle displaystyle="false">
+        <mtable displaystyle="true">
+          <mtr>
+            <mtd>
+              <munder><mo>O</mo><mo>O</mo></munder>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mtable>
+          <mtr>
+            <mtd>
+              <msub><mo>O</mo><mo>O</mo></msub>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html
new file mode 100644
index 0000000000..a0bfc29ae5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="match" href="displaystyle-011-ref.html"/>
+    <meta name="assert" content="Test the effect on displaystyle and movablelimits">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test displaystyle on mstyle -->
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      </mstyle>
+    </math>
+
+    <!-- The mfrac element sets displaystyle to "false", or if it was already
+         false increments scriptlevel by 1, within numerator and denominator.
+      -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mfrac>
+      </mstyle>
+    </math>
+
+    <!--    The mroot element increments scriptlevel by 2, and sets
+            displaystyle to "false", within index, but leaves both attributes
+            unchanged within base.
+            The msqrt element leaves both attributes unchanged within its
+            argument. -->
+    <math>
+      <mstyle displaystyle="true">
+        <mroot>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mroot>
+        <msqrt>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msqrt>
+      </mstyle>
+    </math>
+
+<!--
+    The msub element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within subscript, but leaves both attributes unchanged within base.
+
+   The msup element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within superscript, but leaves both attributes unchanged within
+   base.
+
+   The msubsup element [...] increments scriptlevel by 1, and sets displaystyle
+   to "false", within subscript and superscript, but leaves both attributes
+   unchanged within base.
+
+   The mmultiscripts element increments scriptlevel by 1, and sets displaystyle
+   to "false", within each of its arguments except base, but leaves both
+   attributes unchanged within base.
+   -->
+    <math>
+      <mstyle displaystyle="true">
+        <msub>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msub>
+        <msup>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msup>
+        <msubsup>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msubsup>
+        <mmultiscripts>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <mprescripts/>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mmultiscripts>
+      </mstyle>
+    </math>
+
+<!--
+   The munder element [...] always sets displaystyle to "false" within the
+   underscript, but increments scriptlevel by 1 only when accentunder is
+   "false". Within base, it always leaves both attributes unchanged.
+
+   The mover element [...] always sets displaystyle to "false" within
+   overscript, but increments scriptlevel by 1 only when accent is "false".
+   Within base, it always leaves both attributes unchanged.
+
+   The munderover [..] always sets displaystyle to "false" within underscript
+   and overscript, but increments scriptlevel by 1 only when accentunder or
+   accent, respectively, are "false". Within base, it always leaves both
+   attributes unchanged.
+-->
+    <math>
+      <mstyle displaystyle="true">
+        <munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </munder>
+        <mover>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mover>
+        <munderover>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </munderover>
+      </mstyle>
+    </math>
+
+<!--
+   The displaystyle attribute is allowed on the mtable element to set the
+   inherited value of the attribute. If the attribute is not present, the
+   mtable element sets displaystyle to "false" within the table elements.
+-->
+    <math>
+      <mstyle displaystyle="false">
+        <mtable displaystyle="true">
+          <mtr>
+            <mtd>
+              <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mtable>
+          <mtr>
+            <mtd>
+              <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html
new file mode 100644
index 0000000000..96042b696f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test the effect of displaystyle on munder, mover and munderover -->
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo>O</mo><mo>O</mo></munder>
+        <mover><mo>O</mo><mo>O</mo></mover>
+        <munderover><mo>O</mo><mo>O</mo><mo>O</mo></munderover>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <msub><mo>O</mo><mo>O</mo></msub>
+        <msup><mo>O</mo><mo>O</mo></msup>
+        <msubsup><mo>O</mo><mo>O</mo><mo>O</mo></msubsup>
+      </mstyle>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html
new file mode 100644
index 0000000000..9fd4c784dd
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="match" href="displaystyle-012-ref.html"/>
+    <meta name="assert" content="Test the effect on displaystyle on munder, mover and munderover">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mover><mo movablelimits="true">O</mo><mo>O</mo></mover>
+        <munderover><mo movablelimits="true">O</mo><mo>O</mo><mo>O</mo></munderover>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mover><mo movablelimits="true">O</mo><mo>O</mo></mover>
+        <munderover><mo movablelimits="true">O</mo><mo>O</mo><mo>O</mo></munderover>
+      </mstyle>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html
new file mode 100644
index 0000000000..9a580350de
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test dynamic change of displaystyle -->
+    <math id="m1" displaystyle="true">
+      <munder><mo>O</mo><mo>O</mo></munder>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m2" displaystyle="true">
+        <munder><mo>O</mo><mo>O</mo></munder>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m3" displaystyle="true">
+        <mtr>
+          <mtd>
+            <munder><mo>O</mo><mo>O</mo></munder>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+    <math id="m4" displaystyle="false">
+      <msub><mo>O</mo><mo>O</mo></msub>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m5" displaystyle="false">
+        <msub><mo>O</mo><mo>O</mo></msub>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m6" displaystyle="false">
+        <mtr>
+          <mtd>
+            <msub><mo>O</mo><mo>O</mo></msub>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html
new file mode 100644
index 0000000000..3ce9fff062
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable">
+    <link rel="match" href="displaystyle-013-ref.html"/>
+    <meta name="assert" content="Test dynamic change of displaystyle">
+    <script src="/mathml/support/fonts.js"></script>
+    <script type="text/javascript">
+      function doTest() {
+        document.body.offsetTop; // Update layout
+        document.getElementById("m1").setAttribute("displaystyle", "true");
+        document.getElementById("m2").setAttribute("displaystyle", "true");
+        document.getElementById("m3").setAttribute("displaystyle", "true");
+        document.getElementById("m4").removeAttribute("displaystyle");
+        document.getElementById("m5").removeAttribute("displaystyle");
+        document.getElementById("m6").removeAttribute("displaystyle");
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("load", () => { loadAllFonts().then(doTest); });
+    </script>
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <math id="m1">
+      <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m2">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m3">
+        <mtr>
+          <mtd>
+            <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+    <math id="m4" displaystyle="true">
+      <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m5" displaystyle="true">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m6" displaystyle="true">
+        <mtr>
+          <mtd>
+            <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html
new file mode 100644
index 0000000000..085e2c429d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=832800 -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <mrow>
+            <mn>X</mn>
+            <mo id="mathOperator" mathbackground="red">+</mo>
+            <mfrac>
+              <mrow><mn>X</mn></mrow>
+              <mrow><mn>X</mn></mrow>
+            </mfrac>
+          </mrow>
+          <mrow>
+            <mn>X</mn>
+          </mrow>
+        </mfrac>
+      </mstyle>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html
new file mode 100644
index 0000000000..a4f1208e35
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="match" href="displaystyle-014-ref.html"/>
+    <meta name="assert" content="Test dynamic change of mathbackground on an operator does not interfer with its displaystyle">
+    <script src="/mathml/support/fonts.js"></script>
+    <script type="text/javascript">
+      function doTest() {
+        document.body.offsetTop; // Update layout
+        document.getElementById('mathOperator').
+                 setAttribute('mathbackground', 'red');
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("load", () => { loadAllFonts().then(doTest); });
+    </script>
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=832800 -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <mrow>
+            <mn>X</mn>
+            <mo id="mathOperator">+</mo>
+            <mfrac>
+              <mrow><mn>X</mn></mrow>
+              <mrow><mn>X</mn></mrow>
+            </mfrac>
+          </mrow>
+          <mrow>
+            <mn>X</mn>
+          </mrow>
+        </mfrac>
+      </mstyle>
+    </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/relations/css-styling/displaystyle-015-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html
new file mode 100644
index 0000000000..2e375c6886
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>displaystyle and display</title>
+  </head>
+  <body>
+    <math>
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math displaystyle="true">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="inline" displaystyle="true">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="block" displaystyle="true">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math displaystyle="false">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="inline" displaystyle="false">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="block" displaystyle="false">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html
new file mode 100644
index 0000000000..e4a747fb20
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>displaystyle and display</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-dictionary">
+    <link rel="match" href="displaystyle-015-ref.html"/>
+    <meta name="assert" content="Test interaction of math@display and displaystyle on an operator with movablelimits">
+  </head>
+  <body>
+    <math>
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math>
+      <mstyle displaystyle="true">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="inline">
+      <mstyle displaystyle="true">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="block">
+      <mstyle displaystyle="true">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math>
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="inline">
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="block">
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html
new file mode 100644
index 0000000000..26aed81d03
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>displaystyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<meta name="assert" content="Verify that the correct inheritance of the displaystyle value by measuring the size of large operators.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  math  {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/attribute-values.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  setup({ explicit_done: true });
+  var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
+  var epsilon = 5;
+  function verify_displaystyle(elementId, displaystyle, description) {
+      var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
+      var elementSize = document.getElementById(elementId).
+          getBoundingClientRect().height;
+      assert_approx_equals(elementSize, expectedSize, epsilon, description);
+  }
+
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+      for (transform in AttributeValueTransforms) {
+          TransformAttributeValues(transform, ["display", "displaystyle"]);
+          test(function() {
+              verify_displaystyle("math_default", false, "default");
+              verify_displaystyle("math_false", false, "explicit displaystyle false");
+              verify_displaystyle("math_true", true, "explicit displaystyle true");
+          }, `math element (${transform})`);
+          test(function() {
+              verify_displaystyle("math_inline", false, "explicit display inline");
+              verify_displaystyle("math_block", true, "explicit display block");
+              verify_displaystyle("math_block_false", false, "explicit display block and displaystyle false");
+              verify_displaystyle("math_block_true", true, "explicit display block and displaystyle true");
+              verify_displaystyle("math_inline_false", false, "explicit display inline and displaystyle false");
+              verify_displaystyle("math_inline_true", true, "explicit display inline and displaystyle true");
+          }, `math element (explicit display, ${transform})`);
+          test(function() {
+              verify_displaystyle("mstyle_false", false, "explicit displaystyle false");
+              verify_displaystyle("mstyle_true", true, "explicit displaystyle true");
+          }, `mstyle element (${transform})`);
+          test(function() {
+              verify_displaystyle("mtable_default", false, "default");
+              verify_displaystyle("mtable_false", false, "explicit displaystyle false");
+              verify_displaystyle("mtable_true", true, "explicit displaystyle true");
+          }, `mtable element (${transform})`);
+          test(function() {
+              verify_displaystyle("mfrac_sibling", true, "sibling");
+              verify_displaystyle("mfrac_numerator", false, "numerator");
+              verify_displaystyle("mfrac_denominator", false, "denominator");
+          }, `mfrac element (${transform})`);
+          test(function() {
+              verify_displaystyle("mroot_base", true, "base");
+              verify_displaystyle("mroot_index", false, "index");
+          }, `mroot element (${transform})`);
+          test(function() {
+              verify_displaystyle("msub_base", true, "base");
+              verify_displaystyle("msub_subscript", false, "subscript");
+          }, `msub element (${transform})`);
+          test(function() {
+              verify_displaystyle("msup_base", true, "base");
+              verify_displaystyle("msup_supscript", false, "supscript");
+          }, `msup element (${transform})`);
+          test(function() {
+              verify_displaystyle("msubsup_base", true, "base");
+              verify_displaystyle("msubsup_subscript", false, "subscript");
+              verify_displaystyle("msubsup_supscript", false, "supscript");
+          }, `msubsup element (${transform})`);
+          test(function() {
+              verify_displaystyle("munder_base", true, "base");
+              verify_displaystyle("munder_underscript", false, "underscript");
+          }, `munder element (${transform})`);
+          test(function() {
+              verify_displaystyle("mover_base", true, "base");
+              verify_displaystyle("mover_overscript", false, "overscript");
+          }, `mover element (${transform})`);
+          test(function() {
+              verify_displaystyle("munderover_base", true, "base");
+              verify_displaystyle("munderover_underscript", false, "underscript");
+              verify_displaystyle("munderover_overscript", false, "overscript");
+          }, `munderover element (${transform})`);
+      }
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math><mo id="math_default">&#x2AFF;</mo></math>
+  <math display="inline"><mo id="math_inline">&#x2AFF;</mo></math>
+  <math display="block"><mo id="math_block">&#x2AFF;</mo></math>
+  <math displaystyle="false"><mo id="math_false">&#x2AFF;</mo></math>
+  <math displaystyle="true"><mo id="math_true">&#x2AFF;</mo></math>
+  <math display="block" displaystyle="false">
+    <mo id="math_block_false">&#x2AFF;</mo>
+  </math>
+  <math display="block" displaystyle="true">
+    <mo id="math_block_true">&#x2AFF;</mo>
+  </math>
+  <math display="inline" displaystyle="false">
+    <mo id="math_inline_false">&#x2AFF;</mo>
+  </math>
+  <math display="inline" displaystyle="true">
+    <mo id="math_inline_true">&#x2AFF;</mo>
+  </math>
+  <math><mstyle displaystyle="false"><mo id="mstyle_false">&#x2AFF;</mo></mstyle></math>
+  <math><mstyle displaystyle="true"><mo id="mstyle_true">&#x2AFF;</mo></mstyle></math>
+  <math displaystyle="true"><mtable><mtr><mtd><mo id="mtable_default">&#x2AFF;</mo></mtd></mtr></mtable></math>
+  <math><mtable displaystyle="true"><mtr><mtd><mo id="mtable_true">&#x2AFF;</mo></mtd></mtr></mtable></math>
+  <math displaystyle="true"><mtable displaystyle="false"><mtr><mtd><mo id="mtable_false">&#x2AFF;</mo></mtd></mtr></mtable></math>
+  <math displaystyle="true"><mo id="mfrac_sibling">&#x2AFF;</mo><mfrac><mo id="mfrac_numerator">&#x2AFF;</mo><mo id="mfrac_denominator">&#x2AFF;</mo></mfrac></math>
+  <math displaystyle="true"><mroot><mo id="mroot_base">&#x2AFF;</mo><mo id="mroot_index">&#x2AFF;</mo></mroot></math>
+  <math displaystyle="true"><msub><mo id="msub_base">&#x2AFF;</mo><mo id="msub_subscript">&#x2AFF;</mo></msub></math>
+  <math displaystyle="true"><msup><mo id="msup_base">&#x2AFF;</mo><mo id="msup_supscript">&#x2AFF;</mo></msup></math>
+  <math displaystyle="true"><msubsup><mo id="msubsup_base">&#x2AFF;</mo><mo id="msubsup_subscript">&#x2AFF;</mo><mo id="msubsup_supscript">&#x2AFF;</mo></msubsup></math>
+  <math displaystyle="true"><mmultiscripts><mo id="mmultiscripts_base">&#x2AFF;</mo><mo id="mmultiscripts_subscript">&#x2AFF;</mo><mo id="mmultiscripts_supscript">&#x2AFF;</mo><mprescripts/><mo id="mmultiscripts_presubscript">&#x2AFF;</mo><mo id="mmultiscripts_presupscript">&#x2AFF;</mo></mmultiscripts></math>
+  <math displaystyle="true"><munder><mo id="munder_base">&#x2AFF;</mo><mo id="munder_underscript">&#x2AFF;</mo></munder></math>
+  <math displaystyle="true"><mover><mo id="mover_base">&#x2AFF;</mo><mo id="mover_overscript">&#x2AFF;</mo></mover></math>
+  <math displaystyle="true"><munderover><mo id="munderover_base">&#x2AFF;</mo><mo id="munderover_underscript">&#x2AFF;</mo><mo id="munderover_overscript">&#x2AFF;</mo></munderover></math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html
new file mode 100644
index 0000000000..68566cfc25
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>displaystyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<meta name="assert" content="Verify interaction between automatic displaystyle and specified displaystyle on descendants.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  math, math *  {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/attribute-values.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  setup({ explicit_done: true });
+  var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
+  var epsilon = 5;
+  function verify_displaystyle(elementId, displaystyle, description) {
+      var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
+      var elementSize = document.getElementById(elementId).
+          getBoundingClientRect().height;
+      assert_approx_equals(elementSize, expectedSize, epsilon, description);
+  }
+
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+      for (transform in AttributeValueTransforms) {
+          TransformAttributeValues(transform, ["display", "displaystyle"]);
+          test(function() {
+              verify_displaystyle("cell_false", false, "cell with displaystyle false");
+              verify_displaystyle("cell_true", true, "cell with displaystyle true");
+          }, `mtable element (${transform})`);
+          test(function() {
+              verify_displaystyle("mfrac_numerator", true, "numerator");
+              verify_displaystyle("mfrac_denominator", true, "denominator");
+          }, `mfrac element (${transform})`);
+          test(function() {
+              verify_displaystyle("mroot_base", false, "base");
+              verify_displaystyle("mroot_index", true, "index");
+          }, `mroot element (${transform})`);
+          test(function() {
+              verify_displaystyle("msub_base", false, "base");
+              verify_displaystyle("msub_subscript", true, "subscript");
+          }, `msub element (${transform})`);
+          test(function() {
+              verify_displaystyle("msup_base", false, "base");
+              verify_displaystyle("msup_superscript", true, "superscript");
+          }, `msup element (${transform})`);
+          test(function() {
+              verify_displaystyle("msubsup_base", false, "base");
+              verify_displaystyle("msubsup_subscript", true, "subscript");
+              verify_displaystyle("msubsup_superscript", true, "superscript");
+          }, `msubsup element (${transform})`);
+          test(function() {
+              verify_displaystyle("munder_base", false, "base");
+              verify_displaystyle("munder_underscript", true, "underscript");
+          }, `munder element (${transform})`);
+          test(function() {
+              verify_displaystyle("mover_base", false, "base");
+              verify_displaystyle("mover_overscript", true, "overscript");
+          }, `mover element (${transform})`);
+          test(function() {
+              verify_displaystyle("munderover_base", false, "base");
+              verify_displaystyle("munderover_underscript", true, "underscript");
+              verify_displaystyle("munderover_overscript", true, "overscript");
+          }, `munderover element (${transform})`);
+      }
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math displaystyle="true">
+    <mtable>
+      <mtr>
+        <mtd>
+          <mstyle displaystyle="false">
+            <mo id="cell_false">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+        <mtd>
+          <mstyle displaystyle="true">
+            <mo id="cell_true">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+      </mtr>
+    </mtable>
+  </math>
+  <math>
+    <mfrac>
+      <mstyle displaystyle="true">
+        <mo id="mfrac_numerator">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mfrac_denominator">&#x2AFF;</mo>
+      </mstyle>
+    </mfrac>
+  </math>
+  <math displaystyle="true">
+    <mroot>
+      <mstyle displaystyle="false">
+        <mo id="mroot_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mroot_index">&#x2AFF;</mo>
+      </mstyle>
+    </mroot>
+  </math>
+  <math displaystyle="true">
+    <msub>
+      <mstyle displaystyle="false">
+        <mo id="msub_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msub_subscript">&#x2AFF;</mo>
+      </mstyle>
+    </msub>
+  </math>
+  <math displaystyle="true">
+    <msup>
+      <mstyle displaystyle="false">
+        <mo id="msup_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msup_superscript">&#x2AFF;</mo>
+      </mstyle>
+    </msup>
+  </math>
+  <math displaystyle="true">
+    <msubsup>
+      <mstyle displaystyle="false">
+        <mo id="msubsup_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msubsup_subscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msubsup_superscript">&#x2AFF;</mo>
+      </mstyle>
+    </msubsup>
+  </math>
+  <math displaystyle="true">
+    <mmultiscripts>
+      <mstyle displaystyle="false">
+        <mo id="mmultiscripts_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_subscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_superscript">&#x2AFF;</mo>
+      </mstyle>
+      <mprescripts/>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_presubscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_presuperscript">&#x2AFF;</mo>
+      </mstyle>
+    </mmultiscripts>
+  </math>
+  <math displaystyle="true">
+    <munder>
+      <mstyle displaystyle="false">
+        <mo id="munder_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="munder_underscript">&#x2AFF;</mo>
+      </mstyle>
+    </munder>
+  </math>
+  <math displaystyle="true">
+    <mover>
+      <mstyle displaystyle="false">
+        <mo id="mover_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mover_overscript">&#x2AFF;</mo>
+      </mstyle>
+    </mover>
+  </math>
+  <math displaystyle="true">
+    <munderover>
+      <mstyle displaystyle="false">
+        <mo id="munderover_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="munderover_underscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="munderover_overscript">&#x2AFF;</mo>
+      </mstyle>
+    </munderover>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html
new file mode 100644
index 0000000000..a5bcab2aaa
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>displaystyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<meta name="assert" content="Verify the displaystyle of the underover element is considered (not the one of its base) to determine whether to move limits.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  math, math *  {
+    font-family: Ahem;
+    font-size: 20px;
+  }
+</style>
+<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>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+  function runTests() {
+      ["munder", "mover", "munderover"].forEach((tag) => {
+          Array.from(document.getElementsByTagName(tag)).forEach(e => {
+              var displaystyle = e.getAttribute('displaystyle') === "true";
+              test(function() {
+                  assert_true(MathMLFeatureDetection.has_movablelimits());
+                  var elementRight = e.getBoundingClientRect().right;
+                  var baseRight = e.firstElementChild.getBoundingClientRect().right;
+                  if (displaystyle)
+                      assert_approx_equals(elementRight, baseRight, 1);
+                  else
+                      assert_greater_than(elementRight, baseRight + 10);
+              }, `movablelimits for ${tag} element (displaystyle=${displaystyle})`);
+          });
+      });
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math>
+    <munder displaystyle="false">
+      <mo displaystyle="true" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </munder>
+  </math>
+  <math>
+    <mover displaystyle="false">
+      <mo displaystyle="true" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </mover>
+  </math>
+  <math>
+    <munderover displaystyle="false">
+      <mo displaystyle="true" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+      <mtext>X</mtext>
+    </munderover>
+  </math>
+  <math>
+    <munder displaystyle="true">
+      <mo displaystyle="false" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </munder>
+  </math>
+  <math>
+    <mover displaystyle="true">
+      <mo displaystyle="false" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </mover>
+  </math>
+  <math>
+    <munderover displaystyle="true">
+      <mo displaystyle="false" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+      <mtext>X</mtext>
+    </munderover>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html
new file mode 100644
index 0000000000..111ea79e24
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test dynamically changing dir attribute</title>
+</head>
+<body>
+    <p>
+      math:
+      <math dir="rtl">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math dir="rtl">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math>
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+    </p>
+    <p>
+      mstyle:
+      <math>
+        <mstyle dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+    </p>
+    <p>
+      mrow:
+      <math>
+        <mrow dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html
new file mode 100644
index 0000000000..d97505eff1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <meta charset="utf-8">
+  <title>Test dynamically changing dir attribute</title>
+  <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+  <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+  <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+  <meta name="assert" content="The dir attribute should update direction map to css properties dynamically">
+  <link rel="match" href="dynamic-dir-1-ref.html">
+  <script>
+      window.addEventListener("load", () => {
+
+        // force initial layout so we're sure what we're testing against
+        document.documentElement.getBoundingClientRect();
+
+        ["math", "mstyle", "mrow"].forEach((tag) => {
+          let elements = document.getElementsByTagName(tag);
+
+          // set an explicit rtl where there was none
+          elements[0].setAttribute("dir", "rtl");
+
+          // change explicit ltr to rtl
+          elements[1].setAttribute("dir", "rtl");
+
+          // remove an explicitly set dir="rtl"
+          elements[2].removeAttribute("dir");
+
+        })
+
+        document.documentElement.classList.remove('reftest-wait');
+      })
+    </script>
+</head>
+<body>
+    <p>
+      math:
+      <math>
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math dir="ltr">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math dir="rtl">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+    </p>
+    <p>
+      mstyle:
+      <math>
+        <mstyle>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle dir="ltr">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+    </p>
+    <p>
+      mrow:
+      <math>
+        <mrow>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow dir="ltr">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+    </p>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html
new file mode 100644
index 0000000000..8f25c9db06
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating inside display: block MathML (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <div>
+    <div style="display: block">
+      <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div><div style="float: left; display: inline-block; width: 100px; height: 100px; background: blue"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html
new file mode 100644
index 0000000000..f398094e15
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating inside display: block MathML</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="floating-inside-mathml-with-block-display-ref.html"/>
+<meta name="assert" content="Verify that float works within a display: block MathML element.">
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <math>
+    <mrow style="display: block">
+      <mspace style="display: inline-block; width: 50px; height: 50px; background: magenta"/><mspace style="float: left; display: inline-block; width: 100px; height: 100px; background: blue"/>
+    </mrow>
+  </math>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html
new file mode 100644
index 0000000000..c82f395644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating math (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <div>
+    <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div>
+    <div style="float: left"><div style="width: 100px; height: 100px; background: blue"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html
new file mode 100644
index 0000000000..1de54ccdcf
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating math</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="floating-math-ref.html"/>
+<meta name="assert" content="Verify that float applies to the <math> element.">
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <div>
+    <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div>
+    <math style="float: left"><mspace width="100px" height="100px" style="background: blue"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html
new file mode 100644
index 0000000000..7166dea5f8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>float property in math layout</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Assert that float property is ignored for most math layout">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<style>
+  /* .element class defined in mathml-fragments.js */
+  .element > * {
+    padding: 10px;
+    background: black;
+  }
+  /* override display: none on children of maction/semantics */
+  maction > *, semantics > * {
+    display: math;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container"></div>
+
+  <script>
+    let container = document.getElementById("container");
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) ||
+            FragmentHelper.isEmpty(tag))
+            continue;
+
+        // Skip mtable since it does not use display: math.
+        if (tag == "mtable")
+            continue;
+
+        document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+        let div = document.body.lastElementChild;
+        let element =
+            FragmentHelper.element(div.firstElementChild);
+        let reference =
+            FragmentHelper.element(div.lastElementChild);
+        [element, reference].forEach(parent => {
+            if (parent.classList.contains("mathml-container") ||
+                parent.classList.contains("foreign-container")) {
+                FragmentHelper.appendChild(parent);
+                FragmentHelper.appendChild(parent);
+                FragmentHelper.appendChild(parent);
+            }
+        });
+
+        // Try to use float to invert the order in which children are normally
+        // laid out.
+        function layoutChildrenFromLeftToRight(tag) { tag != 'mroot'; }
+        element.firstElementChild.style =
+            `float: ${layoutChildrenFromLeftToRight(tag) ? 'right' : 'left'};`;
+        element.lastElementChild.style =
+            `float: ${layoutChildrenFromLeftToRight(tag) ? 'left' : 'right'};`;
+
+        test(function () {
+            let epsilon = 1;
+            compareLayout(element, reference, epsilon);
+        }, `float child ignored in ${tag}`);
+
+        div.style = "display: none;"; // Hide the div after measurement.
+    }
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html b/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html
new file mode 100644
index 0000000000..34de5836ea
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Ignored CSS properties</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<meta name="assert" content="Verify style with ignored properties does not affect MathML layout.">
+<meta name="timeout" content="long">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+      for (tag in MathMLFragments) {
+          if (!FragmentHelper.isValidChildOfMrow(tag))
+              continue;
+
+          var ignoredProperties = [
+              "writing-mode: vertical-rl;",
+              "white-space: normal;",
+              "float: right;",
+              "align-content: end; justify-content: end;",
+              "align-self: end; justify-self: end;",
+          ];
+
+          ignoredProperties.forEach(ignoredStyle => {
+              document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+              var div = document.body.lastElementChild;
+
+              // Create MathML structure with ignored style properties.
+              var elementContainer = div.firstElementChild;
+              var elementContainerWidth = elementContainer.getBoundingClientRect().width;
+              var element = FragmentHelper.element(elementContainer);
+              if (!FragmentHelper.isEmpty(tag))
+                  FragmentHelper.forceNonEmptyDescendants(element);
+              element.setAttribute("style", ignoredStyle);
+              Array.from(element.getElementsByTagNameNS("*", FragmentHelper.mathml_namespace)).forEach(descendant => {
+                  descendant.setAttribute("style", ignoredStyle);
+              });
+
+              var referenceContainer = div.lastElementChild;
+              var referenceContainerWidth = referenceContainer.getBoundingClientRect().width;
+              var reference = FragmentHelper.element(referenceContainer);
+              if (!FragmentHelper.isEmpty(tag))
+                  FragmentHelper.forceNonEmptyDescendants(reference);
+
+              test(function() {
+                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                  assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon);
+              }, `${tag} preferred width calculation is not affected by ${ignoredStyle}`);
+
+              test(function() {
+                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                  compareLayout(element, reference, epsilon);
+              }, `${tag} layout is not affected by ${ignoredStyle}`);
+
+              div.style = "display: none;"; // Hide the div after measurement.
+          });
+      }
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html
new file mode 100644
index 0000000000..8e3d7b1c21
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptminsize attribute (reference)</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle>
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html
new file mode 100644
index 0000000000..0ce87b6147
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptminsize attribute</title>
+<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle.attrs">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="legacy-scriptminsize-attribute-ref.html"/>
+<meta name="assert" content="Verify scriptminsize attribute is no longer parsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle scriptminsize="100px">
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html
new file mode 100644
index 0000000000..422325da28
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptsizemultiplier attribute (reference)</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle>
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html
new file mode 100644
index 0000000000..9a955612bc
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptsizemultiplier attribute</title>
+<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle.attrs">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="legacy-scriptsizemultiplier-attribute-ref.html"/>
+<meta name="assert" content="Verify scriptsizemultiplier attribute is no longer parsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle scriptsizemultiplier="1">
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html
new file mode 100644
index 0000000000..9fca6f4963
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML lengths (reference)</title>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <div>
+    <div id="red" style="position: absolute; width: 200px; height: 200px; background: green;">
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html
new file mode 100644
index 0000000000..896f08d111
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML lengths</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
+<link rel="match" href="lengths-1-ref.html"/>
+<meta name="assert" content="Verify whether the different units are accepted for MathML lengths.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/xheight500.woff");
+  }
+  span, math {
+    font-family: TestFont;
+    font-size: 10px; /* 1em = 10px, 1ex is about 5px */
+  }
+  span {
+    position: absolute;
+    display: inline-block;
+    height: 10px;
+  }
+  #red > span {
+    background: red;
+  }
+  #green > span {
+    background: green;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <div>
+    <div id="red" style="position: absolute; width: 200px; height: 200px; background: green;">
+      <!-- px -->
+      <span style="top: 0px"><math><mspace width="200px"/></math></span>
+      <span style="top: 10px; width: 200px"></span>
+
+      <!-- cm -->
+      <span style="top: 20px"><math><mspace width="5.08cm"/></math></span>
+      <span style="top: 30px; width: 192px"></span>
+
+      <!-- em -->
+      <span style="top: 40px"><math><mspace width="20em"/></math></span>
+      <span style="top: 50px; width: 200px"></span>
+
+      <!-- ex -->
+      <span style="top: 60px"><math><mspace width="30ex"/></math></span>
+      <span style="top: 70px; width: 30ex"></span>
+
+      <!-- in -->
+      <span style="top: 80px"><math><mspace width="2in"/></math></span>
+      <span style="top: 90px; width: 192px"></span>
+
+      <!-- mm -->
+      <span style="top: 100px"><math><mspace width="50.8mm"/></math></span>
+      <span style="top: 110px; width: 192px"></span>
+
+      <!-- pc -->
+      <span style="top: 120px"><math><mspace width="12.5pc"/></math></span>
+      <span style="top: 130px; width: 200px"></span>
+
+      <!-- pt -->
+      <span style="top: 140px"><math><mspace width="150pt"/></math></span>
+      <span style="top: 150px; width: 200px"></span>
+
+      <!-- % -->
+      <span style="top: 160px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 170px; width: 200px"></span>
+
+      <!-- unitless nonzero values should be ignored -->
+      <span style="top: 180px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 190px; width: 10px"></span>
+    </div>
+
+    <div id="green" style="position: absolute; width: 200px; height: 200px;">
+      <!-- px -->
+      <span style="top: 10px"><math><mspace width="200px"/></math></span>
+      <span style="top: 0px; width: 200px"></span>
+
+      <!-- cm -->
+      <span style="top: 30px"><math><mspace width="5.08cm"/></math></span>
+      <span style="top: 20px; width: 192px"></span>
+
+      <!-- em -->
+      <span title="em" style="top: 50px"><math><mspace width="20em"/></math></span>
+      <span title="em" style="top: 40px; width: 200px"></span>
+
+      <!-- ex -->
+      <span title="ex" style="top: 70px"><math><mspace width="30ex"/></math></span>
+      <span title="ex" style="top: 60px; width: 30ex"></span>
+
+      <!-- in -->
+      <span style="top: 90px"><math><mspace width="2in"/></math></span>
+      <span style="top: 80px; width: 192px"></span>
+
+      <!-- mm -->
+      <span style="top: 110px"><math><mspace width="50.8mm"/></math></span>
+      <span style="top: 100px; width: 192px"></span>
+
+      <!-- pc -->
+      <span style="top: 130px"><math><mspace width="12.5pc"/></math></span>
+      <span style="top: 120px; width: 200px"></span>
+
+      <!-- pt -->
+      <span style="top: 150px"><math><mspace width="150pt"/></math></span>
+      <span style="top: 140px; width: 200px"></span>
+
+      <!-- % -->
+      <span style="top: 170px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 160px; width: 200px"></span>
+
+      <!-- unitless nonzero values should be ignored -->
+      <span style="top: 190px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 180px; width: 10px"></span>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html
new file mode 100644
index 0000000000..942611a8da
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>MathML lengths</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
+<meta name="assert" content="Verify various cases of the MathML length syntax.">
+<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>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/xheight500.woff");
+  }
+  math {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<script>
+  var epsilon = .5;
+
+  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_equals(getBox("unitCm").width, 96, "cm");
+      assert_equals(getBox("unitEm").width, 120, "em");
+      assert_equals(getBox("unitEx").width, 500, "ex");
+      assert_equals(getBox("unitIn").width, 288, "in");
+      assert_equals(getBox("unitMm").width, 576, "mm");
+      assert_equals(getBox("unitPc").width, 96, "pc");
+      assert_equals(getBox("unitPercentage").width, 60, "%");
+      assert_equals(getBox("unitPt").width, 96, "pt");
+      assert_equals(getBox("unitPx").width, 123, "px");
+    }, "Units");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      assert_equals(getBox("spaceCm").width, 96, "cm");
+      assert_equals(getBox("spaceEm").width, 120, "em");
+      assert_equals(getBox("spaceEx").width, 500, "ex");
+      assert_equals(getBox("spaceIn").width, 288, "in");
+      assert_equals(getBox("spaceMm").width, 576, "mm");
+      assert_equals(getBox("spacePc").width, 96, "pc");
+      assert_equals(getBox("spacePercentage").width, 60, "%");
+      assert_equals(getBox("spacePt").width, 96, "pt");
+      assert_equals(getBox("spacePx").width, 123, "px");
+    }, "Trimming of space");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      assert_approx_equals(getBox("n0").width, 0, epsilon, "n0");
+      assert_approx_equals(getBox("n1").width, 90, epsilon, "n1");
+      assert_approx_equals(getBox("n2").width, 8, epsilon, "n2");
+      assert_approx_equals(getBox("n4").width, 650, epsilon, "n4");
+      assert_approx_equals(getBox("n5").width, 4320, epsilon, "n5");
+      assert_approx_equals(getBox("n6").width, 1, epsilon, "n6");
+      assert_approx_equals(getBox("n7").width, 8, epsilon, "n7");
+      assert_approx_equals(getBox("n8").width, 65, epsilon, "n8");
+      assert_approx_equals(getBox("n9").width, 432, epsilon, "n9");
+      assert_approx_equals(getBox("n10").width, 123, epsilon, "n10");
+    }, "Non-negative numbers");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      var topRef = getBox("ref").top;
+      assert_approx_equals(getBox("N0").top - topRef, -0, epsilon, "N0");
+      assert_approx_equals(topRef - getBox("N1").top, -90, epsilon, "N1");
+      assert_approx_equals(topRef - getBox("N2").top, -8, epsilon, "N2");
+      assert_approx_equals(topRef - getBox("N4").top, -650, epsilon, "N4");
+      assert_approx_equals(topRef - getBox("N5").top, -4320, epsilon, "N5");
+      assert_approx_equals(topRef - getBox("N6").top, -1, epsilon, "N6");
+      assert_approx_equals(topRef - getBox("N7").top, -8, epsilon, "N7");
+      assert_approx_equals(topRef - getBox("N8").top, -65, epsilon, "N8");
+      assert_approx_equals(topRef - getBox("N9").top, -432, epsilon, "N9");
+      assert_approx_equals(topRef - getBox("N10").top, -123, epsilon, "N10");
+    }, "Non-positive numbers");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      // Namedspace values are invalid in MathML Core.
+      ["veryverythinmathspace",
+       "verythinmathspace",
+       "thinmathspace",
+       "mediummathspace",
+       "thickmathspace",
+       "verythickmathspace",
+       "veryverythickmathspace",
+       "negativeveryverythinmathspace",
+       "negativeverythinmathspace",
+       "negativethinmathspace",
+       "negativemediummathspace",
+       "negativethickmathspace",
+       "negativeverythickmathspace",
+       "negativeveryverythickmathspace"
+      ].forEach(function(space) {
+          var mrow = document.getElementById(space);
+          var boxBefore = mrow.firstElementChild.getBoundingClientRect();
+          var boxAfter = mrow.lastElementChild.getBoundingClientRect();
+          assert_equals(boxAfter.left - boxBefore.right, 0, space);
+      });
+    }, "Legacy namedspaces");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      // These values are invalid in MathML Core.
+      assert_equals(getBox("unitNone").width, 30, "Unitless");
+      assert_approx_equals(getBox("n3").width, 0, epsilon, "n3");
+      var topRef = getBox("ref").top;
+      assert_approx_equals(topRef - getBox("N3").top, 0, epsilon, "N3");
+    }, "Legacy numbers");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mspace id="unitCm" width="2.54cm"/>
+      <mspace id="unitEm" width="12em"/>
+      <mspace id="unitEx" width="100ex"/>
+      <mspace id="unitIn" width="3in"/>
+      <mspace id="unitMm" width="152.4mm"/>
+      <mspace id="unitPc" width="6pc"/>
+      <mstyle mathsize="200%"><mspace id="unitPercentage" width="3em"/></mstyle>
+      <mspace id="unitPt" width="72pt"/>
+      <mspace id="unitPx" width="123px"/>
+      <mstyle mathsize="5"><mspace id="unitNone" width="3em"/></mstyle>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace id="spaceCm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;2.54cm&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceEm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;12em&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceEx" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;100ex&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceIn" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;3in&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceMm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;152.4mm&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spacePc" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;6pc&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mstyle mathsize="200%"><mspace id="spacePercentage" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;3em&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/></mstyle>
+      <mspace id="spacePt" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;72pt&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spacePx" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;123px&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace id="n0" width="0em"/>
+      <mspace id="n1" width="9em"/>
+      <mspace id="n2" width=".8em"/>
+      <mspace id="n3" width="7.em"/>
+      <mspace id="n4" width="65em"/>
+      <mspace id="n5" width="432em"/>
+      <mspace id="n6" width=".10em"/>
+      <mspace id="n7" width=".789em"/>
+      <mspace id="n8" width="6.5em"/>
+      <mspace id="n9" width="43.21em"/>
+      <mspace id="n10" width="012.345em"/>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace id="ref"></mspace>
+      <mpadded voffset="-0em"><mspace id="N0"/></mpadded>
+      <mpadded voffset="-9em"><mspace id="N1"/></mpadded>
+      <mpadded voffset="-.8em"><mspace id="N2"/></mpadded>
+      <mpadded voffset="-7.em"><mspace id="N3"/></mpadded>
+      <mpadded voffset="-65em"><mspace id="N4"/></mpadded>
+      <mpadded voffset="-432em"><mspace id="N5"/></mpadded>
+      <mpadded voffset="-.10em"><mspace id="N6"/></mpadded>
+      <mpadded voffset="-.789em"><mspace id="N7"/></mpadded>
+      <mpadded voffset="-6.5em"><mspace id="N8"/></mpadded>
+      <mpadded voffset="-43.21em"><mspace id="N9"/></mpadded>
+      <mpadded voffset="-012.345em"><mspace id="N10"/></mpadded>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow id="veryverythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="verythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="thinmathspace">
+        <mspace width="1em"/>
+        <mspace width="thinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="mediummathspace">
+        <mspace width="1em"/>
+        <mspace width="mediummathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="thickmathspace">
+        <mspace width="1em"/>
+        <mspace width="thickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="verythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="veryverythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythickmathspace"/>
+        <mspace/>
+      </mrow>
+    </math>
+    <math>
+      <mrow id="negativeveryverythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativeverythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativethinmathspace">
+        <mspace width="1em"/>
+        <mspace width="thinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativemediummathspace">
+        <mspace width="1em"/>
+        <mspace width="mediummathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativethickmathspace">
+        <mspace width="1em"/>
+        <mspace width="thickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativeverythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativeveryverythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythickmathspace"/>
+        <mspace/>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html
new file mode 100644
index 0000000000..65e2781c5e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mrow (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathbackground="green">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html
new file mode 100644
index 0000000000..e71fc53eaa
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mrow</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
+<link rel="mismatch" href="mathbackground-001-notref.html"/>
+<meta name="assert" content="mathbackground on a mrow has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathbackground="red">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html
new file mode 100644
index 0000000000..8c984c2619
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mstyle (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathbackground="green">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html
new file mode 100644
index 0000000000..09407d9269
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mstyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+<link rel="mismatch" href="mathbackground-002-notref.html"/>
+<meta name="assert" content="mathbackground on a mstyle has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathbackground="red">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html
new file mode 100644
index 0000000000..b6adaa8d4e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mtext (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathbackground="green">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html
new file mode 100644
index 0000000000..8cb11889db
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mtext</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="mismatch" href="mathbackground-003-notref.html"/>
+<meta name="assert" content="mathbackground on a mtext has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathbackground="red">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html
new file mode 100644
index 0000000000..75465a6c38
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on semantics (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathbackground="red">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html
new file mode 100644
index 0000000000..be174cdbde
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on semantics</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation">
+<link rel="mismatch" href="mathbackground-004-notref.html"/>
+<meta name="assert" content="mathbackground on a semantics has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathbackground="green">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html
new file mode 100644
index 0000000000..9bc1ba5436
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mrow (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathcolor="green">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html
new file mode 100644
index 0000000000..2c463cac87
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mrow</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
+<link rel="mismatch" href="mathcolor-001-notref.html"/>
+<meta name="assert" content="mathcolor on a mrow has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathcolor="red">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html
new file mode 100644
index 0000000000..5f9fd2bb9b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mstyle (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathcolor="green">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html
new file mode 100644
index 0000000000..147d41b46d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mstyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+<link rel="mismatch" href="mathcolor-002-notref.html"/>
+<meta name="assert" content="mathcolor on a mstyle has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathcolor="red">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html
new file mode 100644
index 0000000000..11e018ebc1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mtext (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathcolor="green">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html
new file mode 100644
index 0000000000..5565b0d837
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mtext</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="mismatch" href="mathcolor-003-notref.html"/>
+<meta name="assert" content="mathcolor on a mtext has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathcolor="red">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html
new file mode 100644
index 0000000000..67a45249e5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on semantics (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathcolor="red">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html
new file mode 100644
index 0000000000..3ea37fecdb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on semantics</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation">
+<link rel="mismatch" href="mathcolor-004-notref.html"/>
+<meta name="assert" content="mathcolor on a semantics has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathcolor="green">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html
new file mode 100644
index 0000000000..682fa64233
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS color (reference)</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  math  {
+    font-family: Ahem;
+    font-size: 20px;
+  }
+</style>
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green rectangle:</p>
+  <p>
+    <math mathbackground="#0f0" mathcolor="#0f0">
+      <mtext>X X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html
new file mode 100644
index 0000000000..2f53215346
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="match" href="mathcolor-mathbackground-css-ref.html"/>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify that the mathcolor and mathbackground attributes use the CSS definition of colors.">
+<style>
+  math  {
+    font-family: Ahem;
+    font-size: 20px;
+  }
+</style>
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green rectangle:</p>
+  <p style="color: red">
+    <math mathbackground="rgb(0,255,0)" mathcolor="rgb(0,255,0)">
+      <mtext>X X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html
new file mode 100644
index 0000000000..ebb12a6c6c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathsize and css keywords</title>
+  </head>
+  <body>
+    <p>Test passes if you see 14 "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html
new file mode 100644
index 0000000000..2daed4cdea
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathsize and css keywords</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <meta name="assert" content="Verify that CSS font-size keywords are invalid for the mathsize attribute.">
+    <link rel="match" href="mathsize-attribute-css-keywords-ref.html">
+    <script src="/mathml/support/feature-detection.js"></script>
+  </head>
+  <body>
+    <p>Test passes if you see 14 "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext mathsize="xx-small">A</mtext>
+      <mtext mathsize="x-small">A</mtext>
+      <mtext mathsize="small">A</mtext>
+      <mtext mathsize="medium">A</mtext>
+      <mtext mathsize="large">A</mtext>
+      <mtext mathsize="x-large">A</mtext>
+      <mtext mathsize="xx-large">A</mtext>
+      <mtext mathsize="larger">A</mtext>
+      <mtext mathsize="smaller">A</mtext>
+      <mtext mathsize="xx-ſmall">A</mtext>
+      <mtext mathsize="x-ſmall">A</mtext>
+      <mtext mathsize="ſmall">A</mtext>
+      <mtext mathsize="ſmaller">A</mtext>
+    </math>
+   <script src="/mathml/support/feature-detection.js"></script>
+   <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mathsize");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html
new file mode 100644
index 0000000000..687efa49be
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Legacy mathsize values</title>
+  </head>
+  <body>
+    <p>Test passes if you see four "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html
new file mode 100644
index 0000000000..aebf09f9b8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Legacy mathsize values</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <meta name="assert" content="Verify that legacy values for mathsize have no effect.">
+    <link rel="match" href="mathsize-attribute-legacy-values-ref.html">
+    <script src="/mathml/support/feature-detection.js"></script>
+  </head>
+  <body>
+    <p>Test passes if you see four "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext mathsize="small">A</mtext>
+      <mtext mathsize="medium">A</mtext>
+      <mtext mathsize="big">A</mtext>
+    </math>
+   <script src="/mathml/support/feature-detection.js"></script>
+   <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mathsize");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html
new file mode 100644
index 0000000000..7a0450e51e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Verify mathsize attribute</title>
+  </head>
+  <body>
+
+    <!-- The style attribute should have the same effect as the mathsize
+         attribute. -->
+    <div>
+      <math>
+        <mi style="font-size: 200%;">x</mi>
+        <mi style="font-size: 3em;">x</mi>
+      </math>
+    </div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html
new file mode 100644
index 0000000000..66bcb6dd25
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Verify mathsize attribute</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <meta name="assert" content="Verify mathsize attribute values.">
+    <link rel="match" href="mathsize-attribute-ref.html">
+  </head>
+  <body>
+
+    <!-- This verifies the effect of the mathsize attribute. -->
+    <div>
+      <math>
+        <mi mathsize="200%">x</mi>
+        <mi mathsize="3em">x</mi>
+      </math>
+    </div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html
new file mode 100644
index 0000000000..105ba412e6
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant auto (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mi>&#x1D434;</mi></math>=<span>1D434</span></span>
+  <span><math class="testfont"><mi>&#x1D435;</mi></math>=<span>1D435</span></span>
+  <span><math class="testfont"><mi>&#x1D436;</mi></math>=<span>1D436</span></span>
+  <span><math class="testfont"><mi>&#x1D437;</mi></math>=<span>1D437</span></span>
+  <span><math class="testfont"><mi>&#x1D438;</mi></math>=<span>1D438</span></span>
+  <span><math class="testfont"><mi>&#x1D439;</mi></math>=<span>1D439</span></span>
+  <span><math class="testfont"><mi>&#x1D43A;</mi></math>=<span>1D43A</span></span>
+  <span><math class="testfont"><mi>&#x1D43B;</mi></math>=<span>1D43B</span></span>
+  <span><math class="testfont"><mi>&#x1D43C;</mi></math>=<span>1D43C</span></span>
+  <span><math class="testfont"><mi>&#x1D43D;</mi></math>=<span>1D43D</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D43E;</mi></math>=<span>1D43E</span></span>
+  <span><math class="testfont"><mi>&#x1D43F;</mi></math>=<span>1D43F</span></span>
+  <span><math class="testfont"><mi>&#x1D440;</mi></math>=<span>1D440</span></span>
+  <span><math class="testfont"><mi>&#x1D441;</mi></math>=<span>1D441</span></span>
+  <span><math class="testfont"><mi>&#x1D442;</mi></math>=<span>1D442</span></span>
+  <span><math class="testfont"><mi>&#x1D443;</mi></math>=<span>1D443</span></span>
+  <span><math class="testfont"><mi>&#x1D444;</mi></math>=<span>1D444</span></span>
+  <span><math class="testfont"><mi>&#x1D445;</mi></math>=<span>1D445</span></span>
+  <span><math class="testfont"><mi>&#x1D446;</mi></math>=<span>1D446</span></span>
+  <span><math class="testfont"><mi>&#x1D447;</mi></math>=<span>1D447</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D448;</mi></math>=<span>1D448</span></span>
+  <span><math class="testfont"><mi>&#x1D449;</mi></math>=<span>1D449</span></span>
+  <span><math class="testfont"><mi>&#x1D44A;</mi></math>=<span>1D44A</span></span>
+  <span><math class="testfont"><mi>&#x1D44B;</mi></math>=<span>1D44B</span></span>
+  <span><math class="testfont"><mi>&#x1D44C;</mi></math>=<span>1D44C</span></span>
+  <span><math class="testfont"><mi>&#x1D44D;</mi></math>=<span>1D44D</span></span>
+  <span><math class="testfont"><mi>&#x1D44E;</mi></math>=<span>1D44E</span></span>
+  <span><math class="testfont"><mi>&#x1D44F;</mi></math>=<span>1D44F</span></span>
+  <span><math class="testfont"><mi>&#x1D450;</mi></math>=<span>1D450</span></span>
+  <span><math class="testfont"><mi>&#x1D451;</mi></math>=<span>1D451</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D452;</mi></math>=<span>1D452</span></span>
+  <span><math class="testfont"><mi>&#x1D453;</mi></math>=<span>1D453</span></span>
+  <span><math class="testfont"><mi>&#x1D454;</mi></math>=<span>1D454</span></span>
+  <span><math class="testfont"><mi>&#x210E;</mi></math>=<span>0210E</span></span>
+  <span><math class="testfont"><mi>&#x1D456;</mi></math>=<span>1D456</span></span>
+  <span><math class="testfont"><mi>&#x1D457;</mi></math>=<span>1D457</span></span>
+  <span><math class="testfont"><mi>&#x1D458;</mi></math>=<span>1D458</span></span>
+  <span><math class="testfont"><mi>&#x1D459;</mi></math>=<span>1D459</span></span>
+  <span><math class="testfont"><mi>&#x1D45A;</mi></math>=<span>1D45A</span></span>
+  <span><math class="testfont"><mi>&#x1D45B;</mi></math>=<span>1D45B</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D45C;</mi></math>=<span>1D45C</span></span>
+  <span><math class="testfont"><mi>&#x1D45D;</mi></math>=<span>1D45D</span></span>
+  <span><math class="testfont"><mi>&#x1D45E;</mi></math>=<span>1D45E</span></span>
+  <span><math class="testfont"><mi>&#x1D45F;</mi></math>=<span>1D45F</span></span>
+  <span><math class="testfont"><mi>&#x1D460;</mi></math>=<span>1D460</span></span>
+  <span><math class="testfont"><mi>&#x1D461;</mi></math>=<span>1D461</span></span>
+  <span><math class="testfont"><mi>&#x1D462;</mi></math>=<span>1D462</span></span>
+  <span><math class="testfont"><mi>&#x1D463;</mi></math>=<span>1D463</span></span>
+  <span><math class="testfont"><mi>&#x1D464;</mi></math>=<span>1D464</span></span>
+  <span><math class="testfont"><mi>&#x1D465;</mi></math>=<span>1D465</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D466;</mi></math>=<span>1D466</span></span>
+  <span><math class="testfont"><mi>&#x1D467;</mi></math>=<span>1D467</span></span>
+  <span><math class="testfont"><mi>&#x1D6A4;</mi></math>=<span>1D6A4</span></span>
+  <span><math class="testfont"><mi>&#x1D6A5;</mi></math>=<span>1D6A5</span></span>
+  <span><math class="testfont"><mi>&#x1D6E2;</mi></math>=<span>1D6E2</span></span>
+  <span><math class="testfont"><mi>&#x1D6E3;</mi></math>=<span>1D6E3</span></span>
+  <span><math class="testfont"><mi>&#x1D6E4;</mi></math>=<span>1D6E4</span></span>
+  <span><math class="testfont"><mi>&#x1D6E5;</mi></math>=<span>1D6E5</span></span>
+  <span><math class="testfont"><mi>&#x1D6E6;</mi></math>=<span>1D6E6</span></span>
+  <span><math class="testfont"><mi>&#x1D6E7;</mi></math>=<span>1D6E7</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D6E8;</mi></math>=<span>1D6E8</span></span>
+  <span><math class="testfont"><mi>&#x1D6E9;</mi></math>=<span>1D6E9</span></span>
+  <span><math class="testfont"><mi>&#x1D6EA;</mi></math>=<span>1D6EA</span></span>
+  <span><math class="testfont"><mi>&#x1D6EB;</mi></math>=<span>1D6EB</span></span>
+  <span><math class="testfont"><mi>&#x1D6EC;</mi></math>=<span>1D6EC</span></span>
+  <span><math class="testfont"><mi>&#x1D6ED;</mi></math>=<span>1D6ED</span></span>
+  <span><math class="testfont"><mi>&#x1D6EE;</mi></math>=<span>1D6EE</span></span>
+  <span><math class="testfont"><mi>&#x1D6EF;</mi></math>=<span>1D6EF</span></span>
+  <span><math class="testfont"><mi>&#x1D6F0;</mi></math>=<span>1D6F0</span></span>
+  <span><math class="testfont"><mi>&#x1D6F1;</mi></math>=<span>1D6F1</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D6F2;</mi></math>=<span>1D6F2</span></span>
+  <span><math class="testfont"><mi>&#x1D6F3;</mi></math>=<span>1D6F3</span></span>
+  <span><math class="testfont"><mi>&#x1D6F4;</mi></math>=<span>1D6F4</span></span>
+  <span><math class="testfont"><mi>&#x1D6F5;</mi></math>=<span>1D6F5</span></span>
+  <span><math class="testfont"><mi>&#x1D6F6;</mi></math>=<span>1D6F6</span></span>
+  <span><math class="testfont"><mi>&#x1D6F7;</mi></math>=<span>1D6F7</span></span>
+  <span><math class="testfont"><mi>&#x1D6F8;</mi></math>=<span>1D6F8</span></span>
+  <span><math class="testfont"><mi>&#x1D6F9;</mi></math>=<span>1D6F9</span></span>
+  <span><math class="testfont"><mi>&#x1D6FA;</mi></math>=<span>1D6FA</span></span>
+  <span><math class="testfont"><mi>&#x1D6FB;</mi></math>=<span>1D6FB</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D6FC;</mi></math>=<span>1D6FC</span></span>
+  <span><math class="testfont"><mi>&#x1D6FD;</mi></math>=<span>1D6FD</span></span>
+  <span><math class="testfont"><mi>&#x1D6FE;</mi></math>=<span>1D6FE</span></span>
+  <span><math class="testfont"><mi>&#x1D6FF;</mi></math>=<span>1D6FF</span></span>
+  <span><math class="testfont"><mi>&#x1D700;</mi></math>=<span>1D700</span></span>
+  <span><math class="testfont"><mi>&#x1D701;</mi></math>=<span>1D701</span></span>
+  <span><math class="testfont"><mi>&#x1D702;</mi></math>=<span>1D702</span></span>
+  <span><math class="testfont"><mi>&#x1D703;</mi></math>=<span>1D703</span></span>
+  <span><math class="testfont"><mi>&#x1D704;</mi></math>=<span>1D704</span></span>
+  <span><math class="testfont"><mi>&#x1D705;</mi></math>=<span>1D705</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D706;</mi></math>=<span>1D706</span></span>
+  <span><math class="testfont"><mi>&#x1D707;</mi></math>=<span>1D707</span></span>
+  <span><math class="testfont"><mi>&#x1D708;</mi></math>=<span>1D708</span></span>
+  <span><math class="testfont"><mi>&#x1D709;</mi></math>=<span>1D709</span></span>
+  <span><math class="testfont"><mi>&#x1D70A;</mi></math>=<span>1D70A</span></span>
+  <span><math class="testfont"><mi>&#x1D70B;</mi></math>=<span>1D70B</span></span>
+  <span><math class="testfont"><mi>&#x1D70C;</mi></math>=<span>1D70C</span></span>
+  <span><math class="testfont"><mi>&#x1D70D;</mi></math>=<span>1D70D</span></span>
+  <span><math class="testfont"><mi>&#x1D70E;</mi></math>=<span>1D70E</span></span>
+  <span><math class="testfont"><mi>&#x1D70F;</mi></math>=<span>1D70F</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D710;</mi></math>=<span>1D710</span></span>
+  <span><math class="testfont"><mi>&#x1D711;</mi></math>=<span>1D711</span></span>
+  <span><math class="testfont"><mi>&#x1D712;</mi></math>=<span>1D712</span></span>
+  <span><math class="testfont"><mi>&#x1D713;</mi></math>=<span>1D713</span></span>
+  <span><math class="testfont"><mi>&#x1D714;</mi></math>=<span>1D714</span></span>
+  <span><math class="testfont"><mi>&#x1D715;</mi></math>=<span>1D715</span></span>
+  <span><math class="testfont"><mi>&#x1D716;</mi></math>=<span>1D716</span></span>
+  <span><math class="testfont"><mi>&#x1D717;</mi></math>=<span>1D717</span></span>
+  <span><math class="testfont"><mi>&#x1D718;</mi></math>=<span>1D718</span></span>
+  <span><math class="testfont"><mi>&#x1D719;</mi></math>=<span>1D719</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D71A;</mi></math>=<span>1D71A</span></span>
+  <span><math class="testfont"><mi>&#x1D71B;</mi></math>=<span>1D71B</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-selection.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-selection.html
new file mode 100644
index 0000000000..f915c44e49
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-selection.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>text-transform math-auto</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/css-text/text-transform/math/italic-mapping.js"></script>
+    <meta name="assert" content="Verify Selection.toString() on a single character <mi> within returns the transformed unicode character.">
+  </head>
+  <body>
+    <math><mi id="container"></mi></math>
+    <script>
+      add_completion_callback(() => {
+        container.remove();
+      });
+      for (let code_point in italic_mapping) {
+        test(() => {
+          container.textContent = String.fromCodePoint(code_point);
+          window
+            .getSelection()
+            .setBaseAndExtent(container.firstChild, 0, container.firstChild, 1);
+          assert_equals(
+            window.getSelection().toString(),
+            String.fromCodePoint(italic_mapping[code_point])
+          );
+        }, `Selection.toString() for <mi>${String.fromCodePoint(code_point)}</mi> returns the transformed character.`);
+      }
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html
new file mode 100644
index 0000000000..affb02f0c9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant auto</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings">
+<link rel="match" href="mathvariant-auto-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mi> is equivalent to an <mi> with the transformed italic unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mi>&#x41;</mi></math>=<span>1D434</span></span>
+  <span><math class="testfont"><mi>&#x42;</mi></math>=<span>1D435</span></span>
+  <span><math class="testfont"><mi>&#x43;</mi></math>=<span>1D436</span></span>
+  <span><math class="testfont"><mi>&#x44;</mi></math>=<span>1D437</span></span>
+  <span><math class="testfont"><mi>&#x45;</mi></math>=<span>1D438</span></span>
+  <span><math class="testfont"><mi>&#x46;</mi></math>=<span>1D439</span></span>
+  <span><math class="testfont"><mi>&#x47;</mi></math>=<span>1D43A</span></span>
+  <span><math class="testfont"><mi>&#x48;</mi></math>=<span>1D43B</span></span>
+  <span><math class="testfont"><mi>&#x49;</mi></math>=<span>1D43C</span></span>
+  <span><math class="testfont"><mi>&#x4A;</mi></math>=<span>1D43D</span></span><br/>
+  <span><math class="testfont"><mi>&#x4B;</mi></math>=<span>1D43E</span></span>
+  <span><math class="testfont"><mi>&#x4C;</mi></math>=<span>1D43F</span></span>
+  <span><math class="testfont"><mi>&#x4D;</mi></math>=<span>1D440</span></span>
+  <span><math class="testfont"><mi>&#x4E;</mi></math>=<span>1D441</span></span>
+  <span><math class="testfont"><mi>&#x4F;</mi></math>=<span>1D442</span></span>
+  <span><math class="testfont"><mi>&#x50;</mi></math>=<span>1D443</span></span>
+  <span><math class="testfont"><mi>&#x51;</mi></math>=<span>1D444</span></span>
+  <span><math class="testfont"><mi>&#x52;</mi></math>=<span>1D445</span></span>
+  <span><math class="testfont"><mi>&#x53;</mi></math>=<span>1D446</span></span>
+  <span><math class="testfont"><mi>&#x54;</mi></math>=<span>1D447</span></span><br/>
+  <span><math class="testfont"><mi>&#x55;</mi></math>=<span>1D448</span></span>
+  <span><math class="testfont"><mi>&#x56;</mi></math>=<span>1D449</span></span>
+  <span><math class="testfont"><mi>&#x57;</mi></math>=<span>1D44A</span></span>
+  <span><math class="testfont"><mi>&#x58;</mi></math>=<span>1D44B</span></span>
+  <span><math class="testfont"><mi>&#x59;</mi></math>=<span>1D44C</span></span>
+  <span><math class="testfont"><mi>&#x5A;</mi></math>=<span>1D44D</span></span>
+  <span><math class="testfont"><mi>&#x61;</mi></math>=<span>1D44E</span></span>
+  <span><math class="testfont"><mi>&#x62;</mi></math>=<span>1D44F</span></span>
+  <span><math class="testfont"><mi>&#x63;</mi></math>=<span>1D450</span></span>
+  <span><math class="testfont"><mi>&#x64;</mi></math>=<span>1D451</span></span><br/>
+  <span><math class="testfont"><mi>&#x65;</mi></math>=<span>1D452</span></span>
+  <span><math class="testfont"><mi>&#x66;</mi></math>=<span>1D453</span></span>
+  <span><math class="testfont"><mi>&#x67;</mi></math>=<span>1D454</span></span>
+  <span><math class="testfont"><mi>&#x68;</mi></math>=<span>0210E</span></span>
+  <span><math class="testfont"><mi>&#x69;</mi></math>=<span>1D456</span></span>
+  <span><math class="testfont"><mi>&#x6A;</mi></math>=<span>1D457</span></span>
+  <span><math class="testfont"><mi>&#x6B;</mi></math>=<span>1D458</span></span>
+  <span><math class="testfont"><mi>&#x6C;</mi></math>=<span>1D459</span></span>
+  <span><math class="testfont"><mi>&#x6D;</mi></math>=<span>1D45A</span></span>
+  <span><math class="testfont"><mi>&#x6E;</mi></math>=<span>1D45B</span></span><br/>
+  <span><math class="testfont"><mi>&#x6F;</mi></math>=<span>1D45C</span></span>
+  <span><math class="testfont"><mi>&#x70;</mi></math>=<span>1D45D</span></span>
+  <span><math class="testfont"><mi>&#x71;</mi></math>=<span>1D45E</span></span>
+  <span><math class="testfont"><mi>&#x72;</mi></math>=<span>1D45F</span></span>
+  <span><math class="testfont"><mi>&#x73;</mi></math>=<span>1D460</span></span>
+  <span><math class="testfont"><mi>&#x74;</mi></math>=<span>1D461</span></span>
+  <span><math class="testfont"><mi>&#x75;</mi></math>=<span>1D462</span></span>
+  <span><math class="testfont"><mi>&#x76;</mi></math>=<span>1D463</span></span>
+  <span><math class="testfont"><mi>&#x77;</mi></math>=<span>1D464</span></span>
+  <span><math class="testfont"><mi>&#x78;</mi></math>=<span>1D465</span></span><br/>
+  <span><math class="testfont"><mi>&#x79;</mi></math>=<span>1D466</span></span>
+  <span><math class="testfont"><mi>&#x7A;</mi></math>=<span>1D467</span></span>
+  <span><math class="testfont"><mi>&#x131;</mi></math>=<span>1D6A4</span></span>
+  <span><math class="testfont"><mi>&#x237;</mi></math>=<span>1D6A5</span></span>
+  <span><math class="testfont"><mi>&#x391;</mi></math>=<span>1D6E2</span></span>
+  <span><math class="testfont"><mi>&#x392;</mi></math>=<span>1D6E3</span></span>
+  <span><math class="testfont"><mi>&#x393;</mi></math>=<span>1D6E4</span></span>
+  <span><math class="testfont"><mi>&#x394;</mi></math>=<span>1D6E5</span></span>
+  <span><math class="testfont"><mi>&#x395;</mi></math>=<span>1D6E6</span></span>
+  <span><math class="testfont"><mi>&#x396;</mi></math>=<span>1D6E7</span></span><br/>
+  <span><math class="testfont"><mi>&#x397;</mi></math>=<span>1D6E8</span></span>
+  <span><math class="testfont"><mi>&#x398;</mi></math>=<span>1D6E9</span></span>
+  <span><math class="testfont"><mi>&#x399;</mi></math>=<span>1D6EA</span></span>
+  <span><math class="testfont"><mi>&#x39A;</mi></math>=<span>1D6EB</span></span>
+  <span><math class="testfont"><mi>&#x39B;</mi></math>=<span>1D6EC</span></span>
+  <span><math class="testfont"><mi>&#x39C;</mi></math>=<span>1D6ED</span></span>
+  <span><math class="testfont"><mi>&#x39D;</mi></math>=<span>1D6EE</span></span>
+  <span><math class="testfont"><mi>&#x39E;</mi></math>=<span>1D6EF</span></span>
+  <span><math class="testfont"><mi>&#x39F;</mi></math>=<span>1D6F0</span></span>
+  <span><math class="testfont"><mi>&#x3A0;</mi></math>=<span>1D6F1</span></span><br/>
+  <span><math class="testfont"><mi>&#x3A1;</mi></math>=<span>1D6F2</span></span>
+  <span><math class="testfont"><mi>&#x3F4;</mi></math>=<span>1D6F3</span></span>
+  <span><math class="testfont"><mi>&#x3A3;</mi></math>=<span>1D6F4</span></span>
+  <span><math class="testfont"><mi>&#x3A4;</mi></math>=<span>1D6F5</span></span>
+  <span><math class="testfont"><mi>&#x3A5;</mi></math>=<span>1D6F6</span></span>
+  <span><math class="testfont"><mi>&#x3A6;</mi></math>=<span>1D6F7</span></span>
+  <span><math class="testfont"><mi>&#x3A7;</mi></math>=<span>1D6F8</span></span>
+  <span><math class="testfont"><mi>&#x3A8;</mi></math>=<span>1D6F9</span></span>
+  <span><math class="testfont"><mi>&#x3A9;</mi></math>=<span>1D6FA</span></span>
+  <span><math class="testfont"><mi>&#x2207;</mi></math>=<span>1D6FB</span></span><br/>
+  <span><math class="testfont"><mi>&#x3B1;</mi></math>=<span>1D6FC</span></span>
+  <span><math class="testfont"><mi>&#x3B2;</mi></math>=<span>1D6FD</span></span>
+  <span><math class="testfont"><mi>&#x3B3;</mi></math>=<span>1D6FE</span></span>
+  <span><math class="testfont"><mi>&#x3B4;</mi></math>=<span>1D6FF</span></span>
+  <span><math class="testfont"><mi>&#x3B5;</mi></math>=<span>1D700</span></span>
+  <span><math class="testfont"><mi>&#x3B6;</mi></math>=<span>1D701</span></span>
+  <span><math class="testfont"><mi>&#x3B7;</mi></math>=<span>1D702</span></span>
+  <span><math class="testfont"><mi>&#x3B8;</mi></math>=<span>1D703</span></span>
+  <span><math class="testfont"><mi>&#x3B9;</mi></math>=<span>1D704</span></span>
+  <span><math class="testfont"><mi>&#x3BA;</mi></math>=<span>1D705</span></span><br/>
+  <span><math class="testfont"><mi>&#x3BB;</mi></math>=<span>1D706</span></span>
+  <span><math class="testfont"><mi>&#x3BC;</mi></math>=<span>1D707</span></span>
+  <span><math class="testfont"><mi>&#x3BD;</mi></math>=<span>1D708</span></span>
+  <span><math class="testfont"><mi>&#x3BE;</mi></math>=<span>1D709</span></span>
+  <span><math class="testfont"><mi>&#x3BF;</mi></math>=<span>1D70A</span></span>
+  <span><math class="testfont"><mi>&#x3C0;</mi></math>=<span>1D70B</span></span>
+  <span><math class="testfont"><mi>&#x3C1;</mi></math>=<span>1D70C</span></span>
+  <span><math class="testfont"><mi>&#x3C2;</mi></math>=<span>1D70D</span></span>
+  <span><math class="testfont"><mi>&#x3C3;</mi></math>=<span>1D70E</span></span>
+  <span><math class="testfont"><mi>&#x3C4;</mi></math>=<span>1D70F</span></span><br/>
+  <span><math class="testfont"><mi>&#x3C5;</mi></math>=<span>1D710</span></span>
+  <span><math class="testfont"><mi>&#x3C6;</mi></math>=<span>1D711</span></span>
+  <span><math class="testfont"><mi>&#x3C7;</mi></math>=<span>1D712</span></span>
+  <span><math class="testfont"><mi>&#x3C8;</mi></math>=<span>1D713</span></span>
+  <span><math class="testfont"><mi>&#x3C9;</mi></math>=<span>1D714</span></span>
+  <span><math class="testfont"><mi>&#x2202;</mi></math>=<span>1D715</span></span>
+  <span><math class="testfont"><mi>&#x3F5;</mi></math>=<span>1D716</span></span>
+  <span><math class="testfont"><mi>&#x3D1;</mi></math>=<span>1D717</span></span>
+  <span><math class="testfont"><mi>&#x3F0;</mi></math>=<span>1D718</span></span>
+  <span><math class="testfont"><mi>&#x3D5;</mi></math>=<span>1D719</span></span><br/>
+  <span><math class="testfont"><mi>&#x3F1;</mi></math>=<span>1D71A</span></span>
+  <span><math class="testfont"><mi>&#x3D6;</mi></math>=<span>1D71B</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html
new file mode 100644
index 0000000000..c3e586f4dd
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathvariant attribute and font-style/font-weight (reference)</title>
+    <style>
+      .italic { font-style: italic; }
+      .bold { font-weight: bold; }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see six lines of text (italic, italic, bold, bold, bold italic and bold italic) with the corresponding style applied:</p>
+    <p>
+      <math>
+        <mtext class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html
new file mode 100644
index 0000000000..793c687b09
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathvariant attribute and font-style/font-weight</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1788645">
+    <link rel="match" href="mathvariant-font-style-font-weight-ref.html"/>
+    <meta name="assert" content="Verify that a mathvariant attribute does not cancel the effect of font-style/font-weight.">
+    <style>
+      .italic { font-style: italic; }
+      .bold { font-weight: bold; }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see six lines of text (italic, italic, bold, bold, bold italic and bold italic) with the corresponding style applied:</p>
+    <p>
+      <math mathvariant="normal">
+        <mtext class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext mathvariant="normal" class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math mathvariant="normal">
+        <mtext class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext mathvariant="normal" class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math mathvariant="normal">
+        <mtext class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext mathvariant="normal" class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html
new file mode 100644
index 0000000000..63e6e2ba9c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>single-char mi and fontstyle/fontweight attributes (reference)</title>
+    <style>
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/mathvariant-italic.woff");
+      }
+      .testfont {
+        font-family: TestFont;
+        font-size: 32px;
+       }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see <span class="testfont">&#x1D715;</span> rendered twice, without any bold or italic style applied:</p>
+    <p><math class="testfont"><mi mathvariant="normal">&#x1D715;</mi></math></p>
+    <p><math class="testfont"><mi mathvariant="normal">&#x1D715;</mi></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html
new file mode 100644
index 0000000000..b6dd05ea20
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>single-char mi and fontstyle/fontweight attributes</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1789081">
+    <link rel="match" href="mi-fontstyle-fontweight-ref.html"/>
+    <meta name="assert" content="Verify that fontstyle/fontweight don't cancel the mathvariant transform on single-char mi elements.">
+    <style>
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/mathvariant-italic.woff");
+      }
+      .testfont {
+        font-family: TestFont;
+        font-size: 32px;
+       }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see <span class="testfont">&#x1D715;</span> rendered twice, without any bold or italic style applied:</p>
+    <p><math class="testfont"><mi fontweight="bold">&#x2202;</mi></math></p>
+    <p><math class="testfont"><mi fontstyle="normal">&#x2202;</mi></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1-ref.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1-ref.xml
new file mode 100644
index 0000000000..027bdf1b7d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1-ref.xml
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML">
+<body>
+
+<!-- ... assuming that color inherits -->
+<p>
+  <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+</p>
+
+<!-- ... assuming that color inherits -->
+<p>
+  <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+</p>
+
+<!-- ... assuming that mathbackground works on m:mstyle -->
+<p><m:math><m:mstyle mathbackground="lightgreen"><m:mi>Y</m:mi></m:mstyle></m:math></p>
+<p><m:math><m:mstyle mathbackground="lightgreen"><m:mi>Y</m:mi></m:mstyle></m:math></p>
+
+<!-- ... assuming that mathbackground works on m:mstyle -->
+<p><m:math><m:mstyle mathbackground="lightgreen"><m:mfenced><m:mi>x</m:mi></m:mfenced></m:mstyle></m:math></p>
+<p><m:math><m:mstyle mathbackground="lightgreen"><m:mfenced><m:mi>x</m:mi></m:mfenced></m:mstyle></m:math></p>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1.xml
new file mode 100644
index 0000000000..cc2e725f92
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1.xml
@@ -0,0 +1,31 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML">
+  <head>
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=393760"/>
+    <link rel="match" href="mozilla-393760-1-ref.xml"/>
+  </head>
+<body>
+
+<!-- Test that CSS color works on m:math and m:mstyle -->
+<p>
+  <span><m:math style="color: green;"><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span><m:math><m:mstyle style="color: green;"><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span><m:math><m:mstyle><m:mi style="color: green;">X</m:mi></m:mstyle></m:math></span>
+</p>
+
+<!-- Test that mathcolor works on m:mi, m:mstyle and m:math -->
+<p>
+  <span><m:math mathcolor="green"><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span><m:math><m:mstyle mathcolor="green"><m:mi>X</m:mi></m:mstyle></m:math></span>
+  <span><m:math><m:mstyle><m:mi mathcolor="green">X</m:mi></m:mstyle></m:math></span>
+</p>
+
+<!-- Test that mathbackground and CSS background work on m:mi -->
+<p><m:math><m:mi mathbackground="lightgreen">Y</m:mi></m:math></p>
+<p><m:math><m:mi style="background: lightgreen">Y</m:mi></m:math></p>
+
+<!-- Test that mathbackground and CSS background work on m:mfenced -->
+<p><m:math><m:mfenced mathbackground="lightgreen"><m:mi>x</m:mi></m:mfenced></m:math></p>
+<p><m:math><m:mfenced style="background: lightgreen;"><m:mi>x</m:mi></m:mfenced></m:math></p>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2-ref.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2-ref.xml
new file mode 100644
index 0000000000..58dd5a5d8c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2-ref.xml
@@ -0,0 +1,5 @@
+<html style="background: #88F; color: #88F;" xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML">
+<body>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2.xml
new file mode 100644
index 0000000000..c6ebcb5ece
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2.xml
@@ -0,0 +1,15 @@
+<html style="background: #88F; color: #88F;" xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML">
+  <head>
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=393760"/>
+    <link rel="match" href="mozilla-393760-2-ref.xml"/>
+  </head>
+<body>
+
+<!-- Test that text that should be invisible is invisible (assuming text is drawn at all) -->
+<p>This should be invisible.</p>
+
+<!-- Test that color inherits into MathML (assuming MathML text is drawn at all) -->
+<p><m:math><m:mi>x</m:mi></m:math></p>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html b/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html
new file mode 100644
index 0000000000..88db5047e9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML inside multi-column</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<meta name="assert" content="Verify that putting MathML inside a multi-column list shouldn't affect its layout.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("DOMContentLoaded", function() {
+      var epsilon = 1;
+      var mfrac = document.getElementById("mfrac");
+      var num = mfrac.firstElementChild.getBoundingClientRect();
+      var denom = mfrac.lastElementChild.getBoundingClientRect();
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(num.width, 30, epsilon, "numerator width");
+          assert_approx_equals(num.height, 40, epsilon, "numerator height");
+          assert_approx_equals(denom.width, 50, epsilon, "numerator width");
+          assert_approx_equals(denom.height, 60, epsilon, "numerator height");
+      }, "mspace layout in multicol");
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mfrac());
+          assert_greater_than_equal(denom.bottom - num.top,
+                                    (40 + 60),
+                                    "numerator is above the denominator");
+          assert_approx_equals((num.left + num.right) / 2,
+                               (denom.left + denom.right) / 2,
+                               epsilon, "numerator and denominator are horizontally aligned");
+      }, "mfrac layout in multicol");
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div style="column-width: 10em; list-style-type: decimal;">
+    <ol>
+      <li>blah</li>
+      <li>
+        <math>
+          <mfrac id="mfrac">
+            <mspace width="30px" height="40px" style="background: cyan"></mspace>
+            <mspace width="50px" height="60px" style="background: yellow"></mspace>
+          </mfrac>
+      </li>
+      <li>blah</li>
+      <li>blah</li>
+      <li>blah</li>
+    </ol>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html b/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html
new file mode 100644
index 0000000000..0952679c62
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Elements not participating to the layout of their parent</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that display: none and out-of-flow positioned elements do not participate to layout of their parent.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) ||
+            FragmentHelper.isEmpty(tag))
+            continue;
+        ["display: none",
+         "display: contents",
+         "position: absolute",
+         "position: fixed"
+        ].forEach(style => {
+            document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+            var div = document.body.lastElementChild;
+
+            var elementContainer = div.firstElementChild;
+            var elementContainerWidth = elementContainer.getBoundingClientRect().width;
+            var element = FragmentHelper.element(elementContainer);
+            if (style === "display: contents" &&
+                !element.classList.contains("mathml-container")) {
+                // A "display: contents" MathML child is not participating to
+                // parent layout because its computed style is "display: none".
+                // If we cannot append a MathML child then skip that test.
+                return;
+            }
+            FragmentHelper.forceNonEmptyElement(element);
+            var allowInvalid = true;
+            var child = FragmentHelper.appendChild(element, allowInvalid);
+            child.setAttribute("style", style);
+
+            var referenceContainer = div.lastElementChild;
+            var referenceContainerWidth = referenceContainer.getBoundingClientRect().width;
+            var reference = FragmentHelper.element(referenceContainer);
+            FragmentHelper.forceNonEmptyElement(reference);
+
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon);
+            }, `${tag} preferred width calculation is not affected by children with "${style}" style`);
+
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                compareLayout(element, reference, epsilon);
+            }, `${tag} layout is not affected by children with "${style}" style`);
+
+            div.style = "display: none;"; // Hide the div after measurement.
+        });
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html
new file mode 100644
index 0000000000..447c5b722a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Absolutely positioned (reference)</title>
+<body>
+  <p>Test passes if you see a green square and no red.</p>
+  <div style="position: absolute; left: 100px; top: 100px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+      </mrow>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html
new file mode 100644
index 0000000000..9a7851ba23
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Absolutely positioned</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
+<link rel="match" href="absolutely-positioned-001-ref.html"/>
+<meta name="assert" content="Verify visual rendering of absolutely positioned mtext elements.">
+<body>
+  <p>Test passes if you see a green square and no red.</p>
+  <div style="position: absolute; left: 100px; top: 100px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: red"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mtext style="position: absolute; left: 100px; top: 0px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext>
+        <mtext style="position: absolute; left: 150px; top: 0px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+        <mtext style="position: absolute; left: 150px; top: 150px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+      </mrow>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html
new file mode 100644
index 0000000000..9069b92637
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>absolutely positioned in all MathML elements</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that absolutely positioned node works in all MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  /* override display: none on children of maction/semantics */
+  maction > *, semantics > * {
+    display: math;
+  }
+</style>
+<script>
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      ["absolute", "fixed"].forEach(positionValue => {
+          for (tag in MathMLFragments) {
+              if (!FragmentHelper.isValidChildOfMrow(tag) ||
+                  FragmentHelper.isEmpty(tag))
+                  continue;
+              document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<math>${MathMLFragments[tag]}</math>\
+</div>`);
+              let div = document.body.lastElementChild;
+              let element = FragmentHelper.element(div.firstElementChild);
+              FragmentHelper.forceNonEmptyElement(element);
+              if (element.classList.contains("mathml-container") ||
+                  element.classList.contains("foreign-container")) {
+                  for (let i = 0; i < 5; i++) {
+                      FragmentHelper.appendChild(element);
+                  }
+              }
+
+              let middleChild;
+              if (element.children.length >= 2) {
+                  middleChild = FragmentHelper.appendChild(element, true /*allowInvalid*/);
+                  middleChild.setAttribute("style", `position: ${positionValue}; left: 300px; top: 400px`);
+                  let middlePosition = Math.floor(element.children.length/2);
+                  element.insertBefore(middleChild, element.children[middlePosition]);
+              }
+
+              let firstChild = FragmentHelper.appendChild(element, true /*allowInvalid*/);
+              firstChild.setAttribute("style", `position: ${positionValue}; left: 100px; top: 200px`);
+              element.insertBefore(firstChild, element.firstElementChild);
+
+              let lastChild = FragmentHelper.appendChild(element, true /*allowInvalid*/);
+              lastChild.setAttribute("style", `position: ${positionValue}; left: 500px; top: 600px`);
+
+              let referenceBox;
+              switch (positionValue) {
+              case "absolute":
+                  // Use the absolutely positioned div ancestor.
+                  referenceBox = div.getBoundingClientRect();
+                  break
+              case "fixed":
+                  // Use the viewport.
+                  referenceBox = {left: 0, top: 0};
+                  break;
+              default:
+                  throw "reference box not defined";
+              }
+
+              let firstChildBox = firstChild.getBoundingClientRect();
+              let lastChildBox = lastChild.getBoundingClientRect();
+              let middleChildBox;
+              if (middleChild) {
+                  middleChildBox = middleChild.getBoundingClientRect();
+              }
+
+              let epsilon = 1;
+
+              test(function() {
+                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                  assert_approx_equals(firstChildBox.left - referenceBox.left, 100, epsilon);
+                  assert_approx_equals(firstChildBox.top - referenceBox.top, 200, epsilon);
+                  if (middleChildBox) {
+                      assert_approx_equals(middleChildBox.left - referenceBox.left, 300, epsilon);
+                      assert_approx_equals(middleChildBox.top - referenceBox.top, 400, epsilon);
+                  }
+                  assert_approx_equals(lastChildBox.left - referenceBox.left, 500, epsilon);
+                  assert_approx_equals(lastChildBox.top - referenceBox.top, 600, epsilon);
+              }, `position: ${positionValue}; children in ${tag}`);
+
+              div.style = "display: none;"; // Hide the div after measurement.
+          }
+      });
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html
new file mode 100644
index 0000000000..03b9f56698
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>Fixed positioned (reference)</title>
+<style>
+  body { overflow: hidden; }
+</style>
+<body>
+  <div style="position: absolute; left: 100px; top: 200px;
+              height: 3000px; width: 3000px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+      </mrow>
+    </math>
+    <p>Test passes if you see a green square and no red.</p>
+  </div>
+  <script>
+    requestAnimationFrame(() => {
+      window.scrollTo(50, 100);
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html
new file mode 100644
index 0000000000..994174162c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>Fixed positioned</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
+<link rel="match" href="fixed-positioned-001-ref.html"/>
+<meta name="assert" content="Verify visual rendering of fixed positioned mtext elements.">
+<style>
+  body { overflow: hidden; }
+</style>
+<body>
+  <div style="position: absolute; left: 100px; top: 200px;
+              height: 3000px; width: 3000px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: red"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mtext style="position: fixed; left: 150px; top: 100px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext>
+        <mtext style="position: fixed; left: 200px; top: 100px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+        <mtext style="position: fixed; left: 200px; top: 250px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+      </mrow>
+    </math>
+    <p>Test passes if you see a green square and no red.</p>
+  </div>
+  <script>
+    requestAnimationFrame(() => {
+      window.scrollTo(50, 100);
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html b/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html
new file mode 100644
index 0000000000..0510f1da6d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>overflow on MathML elements</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="overflow can be overridden on MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  /* selector defined in mathml-fragments.js */
+  .element {
+    overflow: scroll;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+  <script>
+    test(function () {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          // Skip mtable as browsers don't have interoperable behavior for
+          // display: table.
+          // See https://github.com/w3c/csswg-drafts/issues/8133
+          if (tag == "mtable")
+              continue;
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      let unknownElement = FragmentHelper.createElement("unknown");
+      unknownElement.setAttribute("class", "element");
+      container.appendChild(unknownElement);
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+        var tag = element.tagName;
+        var style = window.getComputedStyle(element);
+        assert_equals(style["overflow"], "scroll", `overflow on ${tag}`);
+      }, `overflow can be overridden on all MathML elements`);
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html
new file mode 100644
index 0000000000..fd86388ccd
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>border</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that border is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 30, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-border-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 30, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 20, epsilon, "right border");
+          assert_approx_equals(s.top, 20, epsilon, "top border");
+          assert_approx_equals(s.bottom, 20, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
+      }, "Border properties on mrow (shorthand)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border-logical")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 30, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-logical").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (logical)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-border-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left border");
+          assert_approx_equals(s.right, 20, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border-logical-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 20, epsilon, "right border");
+          assert_approx_equals(s.top, 30, epsilon, "top border");
+          assert_approx_equals(s.bottom, 30, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-logical-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
+      }, "Border properties on mrow (logical, shorthand)");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border"
+              style="border-left: 20px solid transparent;
+                     border-right: 30px solid transparent;
+                     border-top: 40px solid transparent;
+                     border-bottom: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-border-rtl"
+              style="border-left: 20px solid transparent;
+                     border-right: 30px solid transparent;
+                     border-top: 40px solid transparent;
+                     border-bottom: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border-shorthand"
+              style="border: 20px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border-logical"
+              style="border-inline-start: 20px solid transparent;
+                     border-inline-end: 30px solid transparent;
+                     border-block-start: 40px solid transparent;
+                     border-block-end: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-border-logical-rtl"
+              style="border-inline-start: 20px solid transparent;
+                     border-inline-end: 30px solid transparent;
+                     border-block-start: 40px solid transparent;
+                     border-block-end: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border-logical-shorthand"
+              style="border-inline: 20px solid transparent;
+                     border-block: 30px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html
new file mode 100644
index 0000000000..bfb7f76adc
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>border</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that border is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag))
+            continue;
+
+        var style = "border-left: 30px solid; border-right: 40px solid; border-top: 50px solid; border-bottom: 60px solid;";
+
+        if (FragmentHelper.isEmpty(tag)) {
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                var s = compareSizeWithAndWithoutStyle(tag, style);
+                assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right border");
+                assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom border");
+                assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+            }, `Border properties on ${tag}`);
+            continue;
+        }
+
+        var default_border = tag === "merror" ? 1 : 0;
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border");
+            assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border");
+            assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border");
+            assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border");
+            assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width");
+        }, `Border properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl");
+            assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border");
+            assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border");
+            assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border");
+            assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border");
+            assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width");
+        }, `Border properties on ${tag} (rtl)`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
new file mode 100644
index 0000000000..eabb6f46c7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that margin is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-margin-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 20, epsilon, "right margin");
+          assert_approx_equals(s.top, 20, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 20, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (shorthand)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin-logical")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-logical").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (logical)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-margin-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left margin");
+          assert_approx_equals(s.right, 20, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin-logical-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 20, epsilon, "right margin");
+          assert_approx_equals(s.top, 30, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 30, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-logical-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (logical, shorthand)");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin"
+              style="margin-left: 20px;
+                     margin-right: 30px;
+                     margin-top: 40px;
+                     margin-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-margin-rtl"
+              style="margin-left: 20px;
+                     margin-right: 30px;
+                     margin-top: 40px;
+                     margin-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin-shorthand"
+              style="margin: 20px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin-logical"
+              style="margin-inline-start: 20px;
+                     margin-inline-end: 30px;
+                     margin-block-start: 40px;
+                     margin-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-margin-logical-rtl"
+              style="margin-inline-start: 20px;
+                     margin-inline-end: 30px;
+                     margin-block-start: 40px;
+                     margin-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin-logical-shorthand"
+              style="margin-inline: 20px;
+                     margin-block: 30px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
new file mode 100644
index 0000000000..b560ed125c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that margin is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag))
+            continue;
+
+        var style = "margin-left: 30px; margin-right: 40px;  margin-top: 50px; margin-bottom: 60px;";
+
+        if (FragmentHelper.isEmpty(tag)) {
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                var s = compareSizeWithAndWithoutStyle(tag, style);
+                assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right margin");
+                assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom margin");
+                assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+                assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+                assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+            }, `Margin properties on ${tag}`);
+            continue;
+        }
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.left_delta, 30, epsilon, "left margin");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Margin properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl");
+            assert_approx_equals(s.left_delta, 30, epsilon, "left margin");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Margin properties on ${tag} (rtl)`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            // Apply the same margin style on the parent mrow.
+            // The margins are not collapsed so they should be added twice.
+            var s = compareSpaceWithAndWithoutStyle(tag, style, style);
+            assert_approx_equals(s.left_delta, 30 * 2, epsilon, "left margin");
+            assert_approx_equals(s.right_delta, 40 * 2, epsilon, "right margin");
+            assert_approx_equals(s.top_delta, 50 * 2, epsilon, "top margin");
+            assert_approx_equals(s.bottom_delta, 60 * 2, epsilon, "bottom margin");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, (30 + 40) * 2, epsilon, "preferred width");
+        }, `Margin properties on ${tag} (no margin-collapsing)`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html
new file mode 100644
index 0000000000..3b6b2a38db
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that margin is taken into account on children.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) ||
+            FragmentHelper.isEmpty(tag) ||
+            FragmentHelper.isTokenElement(tag) ||
+            tag == "semantics" ||
+            tag == "maction" ||
+            tag == "mtable")
+            continue;
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+
+            document.body.insertAdjacentHTML("beforeend", `<hr/><div>\
+<div style="display: inline-block; border: 1px dashed blue;"><math>${MathMLFragments[tag]}</math></div><br/>\
+<div style="display: inline-block; border: 1px dashed green;"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+
+            var div = document.body.lastElementChild;
+            var elementShrinkWrapContainer = div.firstElementChild;
+            var element = elementShrinkWrapContainer.firstElementChild.firstElementChild;
+            var elementContainer = div.firstElementChild;
+            var referenceShrinkWrapContainer = div.lastElementChild;
+            var reference = referenceShrinkWrapContainer.firstElementChild.firstElementChild;
+
+            FragmentHelper.forceNonEmptyElement(element);
+            FragmentHelper.forceNonEmptyElement(reference);
+
+            var mspaceWidth = 20, mspaceHeight = 40, mspaceDepth = 30;
+            var marginLeft = 10, marginRight = 15, marginTop = 20, marginBottom = 25;
+            Array.from(element.children).forEach(mrow => {
+                mrow.outerHTML = `<mspace width="${mspaceWidth}px" height="${mspaceHeight}px" depth='${mspaceDepth}px' style='background: blue; margin-left: ${marginLeft}px; margin-right: ${marginRight}px;  margin-top: ${marginTop}px; margin-bottom: ${marginBottom}px;'></mspace>`;
+            });
+
+            Array.from(reference.children).forEach(mrow => {
+                mrow.outerHTML = `<mspace width="${marginLeft+mspaceWidth+marginRight}px" height="${mspaceHeight+marginTop}px" depth='${mspaceDepth+marginBottom}px' style='background: green;'></mspace>`;
+            });
+
+            // Compare sizes.
+            compareSize(element, reference, epsilon);
+
+            // Compare children positions.
+            var elementBox = element.getBoundingClientRect();
+            var referenceBox = reference.getBoundingClientRect();
+            for (var i = 0; i < element.children.length; i++) {
+                var childBox = element.children[i].getBoundingClientRect();
+                var referenceChildBox = reference.children[i].getBoundingClientRect();
+                assert_approx_equals(childBox.width + marginLeft + marginRight, referenceChildBox.width, epsilon, "inline size (child ${i})");
+                assert_approx_equals(childBox.height + marginTop + marginBottom, referenceChildBox.height, epsilon, "block size (child ${i})");
+
+                assert_approx_equals(childBox.left - marginLeft - elementBox.left,
+                                     referenceChildBox.left - referenceBox.left,
+                                     epsilon,
+                                     `inline position (child ${i})`);
+                assert_approx_equals(childBox.top - marginTop - elementBox.top,
+                                     referenceChildBox.top - referenceBox.top,
+                                     epsilon,
+                                     `block position (child ${i})`);
+            }
+
+            // Compare preferred widths.
+            assert_approx_equals(elementShrinkWrapContainer.offsetWidth, referenceShrinkWrapContainer.offsetWidth, epsilon, "preferred width");
+
+        }, `Margin properties on the children of ${tag}`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html
new file mode 100644
index 0000000000..b6d4901f36
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>padding</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that padding is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 30, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-padding-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 30, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 20, epsilon, "right padding");
+          assert_approx_equals(s.top, 20, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 20, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
+      }, "Padding properties on mrow (shorthand)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding-logical")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 30, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-logical").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (logical)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-padding-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left padding");
+          assert_approx_equals(s.right, 20, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding-logical-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 20, epsilon, "right padding");
+          assert_approx_equals(s.top, 30, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 30, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-logical-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
+      }, "Padding properties on mrow (logical, shorthand)");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding"
+              style="padding-left: 20px;
+                     padding-right: 30px;
+                     padding-top: 40px;
+                     padding-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-padding-rtl"
+              style="padding-left: 20px;
+                     padding-right: 30px;
+                     padding-top: 40px;
+                     padding-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding-shorthand"
+              style="padding: 20px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding-logical"
+              style="padding-inline-start: 20px;
+                     padding-inline-end: 30px;
+                     padding-block-start: 40px;
+                     padding-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-padding-logical-rtl"
+              style="padding-inline-start: 20px;
+                     padding-inline-end: 30px;
+                     padding-block-start: 40px;
+                     padding-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding-logical-shorthand"
+              style="padding-inline: 20px;
+                     padding-block: 30px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
new file mode 100644
index 0000000000..89d3bdc7ef
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>padding</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that padding is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag))
+            continue;
+
+        var defaultInlinePadding = (tag === "mfrac" ? 1 : 0);
+        var style = `padding-left: ${defaultInlinePadding + 30}px; padding-right: ${defaultInlinePadding + 40}px;  padding-top: 50px; padding-bottom: 60px;`;
+
+        if (FragmentHelper.isEmpty(tag)) {
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                var s = compareSizeWithAndWithoutStyle(tag, style);
+                assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right padding");
+                assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom padding");
+                assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+            }, `Padding properties on ${tag}`);
+            continue;
+        }
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.left_delta, 30, epsilon, "left padding");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
+            assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Padding properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style, "rtl");
+            assert_approx_equals(s.left_delta, 30, epsilon, "left padding");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
+            assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Padding properties on ${tag} (rtl)`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html
new file mode 100644
index 0000000000..150a650bc2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin</title>
+<body>
+  <p>This test passes if you see a purple square of side 100px, surrounded by a
+    10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  </div>
+    <div style="background: pink; position: absolute; left: 10px; top: 3em;">
+      <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <div style="width: 100px; height: 100px; background: purple;"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html
new file mode 100644
index 0000000000..b0fb17c7d2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
+<link rel="match" href="padding-border-margin-001-ref.html"/>
+<meta name="assert" content="Verify visual rendering of padding/border/margin on the mrow element.">
+<body>
+  <p>This test passes if you see a purple square of side 100px, surrounded by a
+    10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  <div style="background: pink; position: absolute; left: 10px; top: 3em;">
+    <math>
+      <mrow style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <mspace width="100px" height="100px" style="background: purple;"></mspace>
+      </mrow>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html
new file mode 100644
index 0000000000..e13a9f47ff
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on largeop (reference)</title>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  </div>
+    <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+      <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <div style="width: 300px; height: 1500px; background: cyan;"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html
new file mode 100644
index 0000000000..4559fc49ce
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on largeop</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators">
+<link rel="match" href="padding-border-margin-002-ref.html"/>
+<meta name="assert" content="Verify visual rendering of padding/border/margin on a displaystyle mo element with the largeop property.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  math  {
+    /* Largeop variant for U+2AFF has width 100px
+       and height 300 * 5000 / 1000 = 1500px */
+    font-family: TestFont;
+    font-size: 300px;
+  }
+</style>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+    <math displaystyle="true">
+      <mo largeop="true" lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">&#x2AFF;</mo>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html
new file mode 100644
index 0000000000..275494ddd8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on an operator, stretchy along the block axis (reference)</title>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  </div>
+    <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+      <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <div style="width: 300px; height: 1500px; background: cyan;"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html
new file mode 100644
index 0000000000..c54682f309
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on an operator, stretchy along the block axis</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dfn-algorithm-for-stretching-operators-along-the-block-axis">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators">
+<link rel="match" href="padding-border-margin-003-ref.html"/>
+<meta name="assert" content="Verify visual rendering of padding/border/margin on an operator, stretchy along the block axis.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/stretchy.woff");
+  }
+  math  {
+    font-family: TestFont;
+    font-size: 300px;
+  }
+</style>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+    <math>
+      <mspace height="750px" depth="750px"/>
+      <mo lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">⥜</mo>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html
new file mode 100644
index 0000000000..ca539440f8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  @font-face {
+    font-family: DoubleStruck;
+    src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  @font-face {
+    font-family: Italic;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  math {
+      font: 25px/1 Ahem;
+  }
+</style>
+<body>
+  <p>dir:
+    <math style="direction: ltr;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math style="color: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math style="background: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext style="font-size: 100%">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math>
+      <mi style="text-transform: uppercase">sin</mi>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math style="math-style: compact">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext style="math-depth: 0;">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html
new file mode 100644
index 0000000000..96ee69541b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#double-struck-mappings">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="match" href="presentational-hints-001-ref.html"/>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify that local author style wins over presentation hints attributes">
+<style>
+  math {
+      font: 25px/1 Ahem;
+  }
+</style>
+<body>
+  <p>dir:
+    <math dir="rtl" style="direction: ltr;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math mathcolor="red" style="color: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math mathbackground="red" style="background: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext mathsize="300%" style="font-size: 100%">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math>
+      <mi mathvariant="normal" style="text-transform: uppercase">sin</mi>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math displaystyle="true" style="math-style: compact">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext scriptlevel="1" style="math-depth: 0;">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html
new file mode 100644
index 0000000000..fa22741efe
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints (dynamic)</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  math {
+      font: 25px/1 Ahem;
+  }
+  @font-face {
+    font-family: Italic;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+</style>
+</head>
+<body>
+  <p>dir:
+    <math dir="rtl">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math mathcolor="green">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math mathbackground="green">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext mathsize="300%">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math style="font-family: Italic">
+      <mi mathvariant="normal">X</mi>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math displaystyle="true">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext scriptlevel="-1">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html
new file mode 100644
index 0000000000..8bb9153b86
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints (dynamic)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#double-struck-mappings">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="match" href="presentational-hints-002-ref.html"/>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify dynamically setting attributes mapped to style.">
+<style>
+  math {
+      font: 25px/1 Ahem;
+  }
+  @font-face {
+    font-family: Italic;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+</style>
+<script>
+  window.addEventListener("load", function() {
+    // force initial layout so we're sure what we're testing against
+    document.documentElement.getBoundingClientRect();
+
+    document.getElementById("dir").setAttribute("dir", "rtl");
+    document.getElementById("mathcolor").setAttribute("mathcolor", "green");
+    document.getElementById("mathbackground").setAttribute("mathbackground", "green");
+    document.getElementById("mathsize").setAttribute("mathsize", "300%");
+    document.getElementById("mathvariant").setAttribute("mathvariant", "normal");
+    document.getElementById("displaystyle").setAttribute("displaystyle", "true");
+    document.getElementById("scriptlevel").setAttribute("scriptlevel", "-1");
+
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</head>
+<body>
+  <p>dir:
+    <math id="dir">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math id="mathcolor">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math id="mathbackground">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext id="mathsize">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math style="font-family: Italic">
+      <mi id="mathvariant">X</mi>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math id="displaystyle">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext id="scriptlevel">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html
new file mode 100644
index 0000000000..e9be1f2965
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Automatic scriptlevel</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify automatic scriptlevel changes">
+<style>
+  #container, math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function fontSize(element) {
+      return parseFloat((/(.+)px/).exec(window.getComputedStyle(element).getPropertyValue("font-size"))[1]);
+  }
+  function runTests() {
+      var container = document.getElementById("container");
+      var epsilon = .1
+      var fontSizeAtScriptLevelZero = fontSize(container);
+
+      test(function() {
+          var element = document.getElementById("mfrac_displaystyle");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "numerator");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "denominator");
+      }, "automatic scriptlevel on mfrac (displaystyle=true)");
+
+     test(function() {
+          var element = document.getElementById("mfrac_notdisplaystyle");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero * .71, epsilon, "numerator");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "denominator");
+      }, "automatic scriptlevel on mfrac (displaystyle=false)");
+
+      test(function() {
+          var element = document.getElementsByTagName("mroot")[0];
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71 * .71, epsilon, "index");
+      }, "automatic scriptlevel on mroot");
+
+      ["msub", "msup", "msubsup", "munder", "mover", "munderover", "mmultiscripts"].forEach(tag => {
+          test(function() {
+              var element = document.getElementsByTagName(tag)[0];
+              for (var i = 0; i < element.children.length; i++)
+                  assert_approx_equals(fontSize(element.children[i]), i > 0 ? fontSizeAtScriptLevelZero * .71 : fontSizeAtScriptLevelZero, epsilon, `child ${i}`);
+          }, `automatic scriptlevel on ${tag}`);
+      });
+
+      test(function() {
+          var element = document.querySelector("munder[accentunder='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
+      }, `automatic scriptlevel on munder (accentunder=true)`);
+
+      test(function() {
+          var element = document.querySelector("mover[accent='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "over");
+      }, `automatic scriptlevel on mover (accent=true)`);
+
+      test(function() {
+          var element = document.querySelector("munderover[accentunder='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over");
+      }, `automatic scriptlevel on munderover (accentunder=true)`);
+
+      test(function() {
+          var element = document.querySelector("munderover[accent='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over");
+      }, `automatic scriptlevel on munderover (accent=true)`);
+
+      test(function() {
+          var element = document.getElementById("munderover-dynamic-case-insensitive")
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over");
+
+          element.removeAttribute("accent");
+          element.setAttribute("accentunder", "TrUe");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over");
+       }, "checking dynamic/case-insensitive accent/accentunder");
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <p>
+      <math displaystyle="true">
+        <mfrac id="mfrac_displaystyle">
+          <mn>0</mn>
+          <mn>1</mn>
+        </mfrac>
+      </math>
+
+      <math displaystyle="false">
+        <mfrac id="mfrac_notdisplaystyle">
+          <mn>0</mn>
+          <mn>1</mn>
+        </mfrac>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mroot>
+          <mn>0</mn>
+          <mn>1</mn>
+        </mroot>
+      </math>
+    </p>
+    <p>
+      <math>
+        <msub>
+          <mn>0</mn>
+          <mn>1</mn>
+        </msub>
+      </math>
+      <math>
+        <msup>
+          <mn>0</mn>
+          <mn>1</mn>
+        </msup>
+      </math>
+      <math>
+        <msubsup>
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </msubsup>
+      </math>
+      <math>
+        <munder>
+          <mn>0</mn>
+          <mn>1</mn>
+        </munder>
+      </math>
+      <math>
+        <mover>
+          <mn>0</mn>
+          <mn>1</mn>
+        </mover>
+      </math>
+      <math>
+        <munderover>
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+      <math>
+        <mmultiscripts>
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+          <mn>3</mn>
+          <mn>4</mn>
+          <mprescripts/>
+          <mn>6</mn>
+          <mn>7</mn>
+          <mn>8</mn>
+          <mn>9</mn>
+        </mmultiscripts>
+      </math>
+    </p>
+    <p>
+      <math>
+        <munder accentunder="true">
+          <mn>0</mn>
+          <mn>1</mn>
+        </munder>
+      </math>
+      <math>
+        <mover accent="true">
+          <mn>0</mn>
+          <mn>1</mn>
+        </mover>
+      </math>
+      <math>
+        <munderover accent="true">
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+      <math>
+        <munderover accentunder="true">
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+    </p>
+    <p>
+      <math>
+        <munderover id="munderover-dynamic-case-insensitive" accent="TrUe">
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+    </p>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/size-containment-001.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/size-containment-001.tentative.html
new file mode 100644
index 0000000000..dddd1f32b2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/size-containment-001.tentative.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>MathML and size containment</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  /* Revert style specified in the UA style sheet that changes box size. */
+  merror { border: 0; }
+  mfrac { padding: 0; }
+</style>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) ||
+            FragmentHelper.isEmpty(tag))
+            continue;
+
+        // TODO(https://github.com/w3c/mathml-core/issues/199): Check/decide how
+        // size containment behave for these cases:
+        // - table layout.
+        // - radical layout.
+        // - contain-intrinsic-block-size.
+        // - operators width special drawing (stretchy/largop).
+        if (tag == "mroot" || tag == "msqrt" || tag == "mtable") {
+            continue;
+        }
+
+        document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<div style="display: inline-block;"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+        let div = document.body.lastElementChild;
+
+        let elementContainer = div.firstElementChild;
+        let element = FragmentHelper.element(elementContainer);
+        FragmentHelper.forceNonEmptyDescendants(element);
+
+        const style = `contain: size; contain-intrinsic-inline-size: 111px;`;
+        element.setAttribute("style", style)
+
+        if (tag === "mo") {
+            element.setAttribute("lspace", "0");
+            element.setAttribute("rspace", "0");
+        }
+
+        const elementContainerWidth = elementContainer.getBoundingClientRect().width;
+        const elementBox = element.getBoundingClientRect();
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            assert_equals(elementContainerWidth, 111);
+        }, `intrinsic size of ${tag} with ${style}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            assert_equals(elementBox.width, 111);
+        }, `inline-size of ${tag} with ${style}`);
+
+        div.style = "display: none;"; // Hide the div after measurement.
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-1-ref.xhtml b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1-ref.xhtml
new file mode 100644
index 0000000000..d76a350290
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1-ref.xhtml
@@ -0,0 +1,65 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style type="text/css">
+      html { background-color: grey; }
+      td { border: 1px solid white;
+           padding-top: 0;
+           padding-bottom: 0;
+           padding-right: 1px;
+           padding-left: 1px;
+           background-color: black;
+           color: red; }
+    </style>
+  </head>
+<body>
+  <table>
+    <td>
+      <math xmlns="http://www.w3.org/1998/Math/MathML">
+        <mphantom>
+          <mn>60</mn>
+          <mo>&#x2062;</mo>
+          <msqrt>
+            <mn>2</mn>
+            <mo>+</mo>
+            <mn>3</mn>
+            <mo>-</mo>
+            <mo>5</mo>
+          </msqrt>
+        </mphantom>
+      </math>
+    </td>
+  </table>
+  <table>
+    <td>
+      <math xmlns="http://www.w3.org/1998/Math/MathML">
+        <mphantom>
+          <mroot>
+            <mfrac>
+              <mn>8</mn>
+              <mn>90</mn>
+            </mfrac>
+            <mn>61</mn>
+          </mroot>
+        </mphantom>
+      </math>
+    </td>
+  </table>
+  <table>
+    <td>
+      <math xmlns="http://www.w3.org/1998/Math/MathML">
+        <mphantom>
+          <mo>|</mo>
+          <mo>{</mo>
+          <mtable>
+            <mtr><mtd><mn>0</mn></mtd></mtr>
+            <mtr><mtd><mn>5</mn></mtd></mtr>
+            <mtr><mtd><mn>9</mn></mtd></mtr>
+          </mtable>
+          <mo>}</mo>
+          <mo>|</mo>
+        </mphantom>
+      </math>
+    </td>
+  </table>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-1.xhtml b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1.xhtml
new file mode 100644
index 0000000000..c3689adb6f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1.xhtml
@@ -0,0 +1,66 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Check that the content box is large enough</title>
+    <link rel="match" href="table-width-1-ref.xhtml"/>
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=363240"/>
+    <style type="text/css">
+      html { background-color: grey; }
+      td { border: 1px solid white;
+           padding-top: 0;
+           padding-bottom: 0;
+           padding-right: 1px;
+           padding-left: 1px;
+           background-color: black;
+           color: black; }
+    </style>
+  </head>
+<body>
+  <table>
+    <td>
+      <math xmlns="http://www.w3.org/1998/Math/MathML">
+        <mrow>
+          <mn>60</mn>
+          <mo>&#x2062;</mo>
+          <msqrt>
+            <mn>2</mn>
+            <mo>+</mo>
+            <mn>3</mn>
+            <mo>-</mo>
+            <mo>5</mo>
+          </msqrt>
+        </mrow>
+      </math>
+    </td>
+  </table>
+  <table>
+    <td>
+      <math xmlns="http://www.w3.org/1998/Math/MathML">
+        <mroot>
+          <mfrac>
+            <mn>8</mn>
+            <mn>90</mn>
+          </mfrac>
+          <mn>61</mn>
+        </mroot>
+      </math>
+    </td>
+  </table>
+  <table>
+    <td>
+      <math xmlns="http://www.w3.org/1998/Math/MathML">
+        <mrow>
+          <mo>|</mo>
+          <mo>{</mo>
+          <mtable>
+            <mtr><mtd><mn>0</mn></mtd></mtr>
+            <mtr><mtd><mn>5</mn></mtd></mtr>
+            <mtr><mtd><mn>9</mn></mtd></mtr>
+          </mtable>
+          <mo>}</mo>
+          <mo>|</mo>
+        </mrow>
+      </math>
+    </td>
+  </table>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-2-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2-ref.html
new file mode 100644
index 0000000000..dfb9eeca8b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>table-width-2</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  </head>
+  <body>
+
+    <p>
+      <math>
+        <mtable>
+          <mtr>
+            <mtd><mtext>|</mtext></mtd>
+            <mtd><mrow style="width: 5em;"></mrow></mtd>
+            <mtd><mtext>|</mtext></mtd>
+          </mtr>
+        </mtable>
+    </math>
+    </p>
+
+    <p>
+      <math>
+        <mtable>
+          <mtr>
+            <mtd><mtext>|</mtext></mtd>
+            <mtd><mrow style="width: 5em;"></mrow></mtd>
+            <mtd><mtext>|</mtext></mtd>
+          </mtr>
+        </mtable>
+      </math>
+    </p>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-2.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2.html
new file mode 100644
index 0000000000..533a9324b4
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>table-width-2</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <link rel="match" href="table-width-2-ref.html"/>
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=459363"/>
+  </head>
+  <body>
+
+    <p>
+      <math>
+        <mtable>
+          <mtr>
+            <mtd><mtext>|</mtext></mtd>
+            <mtd><mspace width="5em"></mspace></mtd>
+            <mtd><mtext>|</mtext></mtd>
+          </mtr>
+        </mtable>
+    </math>
+    </p>
+
+    <p>
+      <math>
+        <mtable>
+          <mtr>
+            <mtd><mtext>|</mtext></mtd>
+            <mtd><mpadded width="5em"></mpadded></mtd>
+            <mtd><mtext>|</mtext></mtd>
+          </mtr>
+        </mtable>
+      </math>
+    </p>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-3-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3-ref.html
new file mode 100644
index 0000000000..f06cea4bec
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>table-width-3</title>
+    <meta charset="utf-8"/>
+    <style type="text/css">
+      html { background-color: grey; }
+      td { border: 1px solid white;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 1px;
+      padding-left: 1px;
+      background-color: black;
+      color: red; }
+      mi, mtext { font-size: 3em; }
+      span { font-style: italic; display: inline-block; }
+    </style>
+  </head>
+  <body>
+
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mphantom>
+              <mi>f</mi>
+            </mphantom>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mphantom>
+              <mi>f</mi>
+              <mi>f</mi>
+              <mi>f</mi>
+            </mphantom>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mphantom>
+              <mi style="font-style: italic;">fff</mi>
+            </mphantom>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mphantom>
+              <mtext><span>fff</span></mtext>
+            </mphantom>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mphantom>
+              <mtext><span>f</span></mtext>
+              <mtext><span>f</span></mtext>
+              <mtext><span>f</span></mtext>
+            </mphantom>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mphantom>
+              <mtext><span>f</span><span>f</span><span>f</span></mtext>
+            </mphantom>
+          </math>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-3.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3.html
new file mode 100644
index 0000000000..4847ce4304
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>table-width-3</title>
+    <meta charset="utf-8"/>
+    <link rel="match" href="table-width-3-ref.html"/>
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=415413"/>
+    <style type="text/css">
+      html { background-color: grey; }
+      td { border: 1px solid white;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 1px;
+      padding-left: 1px;
+      background-color: black;
+      color: black; }
+      mi, mtext { font-size: 3em; }
+      span { font-style: italic; display: inline-block; }
+    </style>
+  </head>
+  <body>
+
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mi>f</mi>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mi>f</mi>
+            <mi>f</mi>
+            <mi>f</mi>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mi style="font-style: italic;">fff</mi>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mtext><span>fff</span></mtext>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mtext><span>f</span></mtext>
+            <mtext><span>f</span></mtext>
+            <mtext><span>f</span></mtext>
+          </math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math>
+            <mtext><span>f</span><span>f</span><span>f</span></mtext>
+          </math>
+        </td>
+      </tr>
+    </table>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-4-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4-ref.html
new file mode 100644
index 0000000000..b31807dee4
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>table-width-4</title>
+    <meta charset="utf-8"/>
+    <style type="text/css">
+      html { background-color: grey; }
+      td { border: 1px solid white;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 2px;
+      padding-left: 1px;
+      background-color: black;
+      color: black; }
+    </style>
+  </head>
+  <body>
+
+    <table>
+      <tr>
+        <td>
+          <math><mphantom><mi>ℓ</mi><mi>i</mi></mphantom></math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math><mphantom><mtext>ℓ</mtext><mi>i</mi></mphantom></math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math><mphantom><mtext style="font-style: italic">ℓ</mtext><mi>i</mi></mphantom></math>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-4.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4.html
new file mode 100644
index 0000000000..4a88b84cb2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>table-width-4</title>
+    <meta charset="utf-8"/>
+    <link rel="match" href="table-width-4-ref.html"/>
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=941607"/>
+    <style type="text/css">
+      html { background-color: grey; }
+      td { border: 1px solid white;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 2px;
+      padding-left: 1px;
+      background-color: black;
+      color: black; }
+    </style>
+  </head>
+  <body>
+
+    <table>
+      <tr>
+        <td>
+          <math><mi>ℓ</mi><mi>i</mi></math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math><mtext>ℓ</mtext><mi>i</mi></math>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <math><mtext style="font-style: italic">ℓ</mtext><mi>i</mi></math>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html
new file mode 100644
index 0000000000..005e8a7882
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Transform property (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be rotated.</p>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 100px; transform: rotate(90deg)"></div>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; transform: rotate(90deg)"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/transform.html b/testing/web-platform/tests/mathml/relations/css-styling/transform.html
new file mode 100644
index 0000000000..c45fda3469
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/transform.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Transform property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="transform-ref.html"/>
+<meta name="assert" content="Verify that the transform property works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be rotated.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="position:absolute; top:100px; background: green; transform: rotate(90deg)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px; width: 200px; height: 200px">
+    <math style="position: absolute; transform: rotate(90deg)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html
new file mode 100644
index 0000000000..56bf7b7da2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="visibility-001-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text of token elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><mi style="visibility: hidden">1</mi></math>
+    <math><mn style="visibility: hidden">2</mn></math>
+    <math><mo style="visibility: hidden">3</mo></math>
+    <math><mtext style="visibility: hidden">4</mtext></math>
+    <math><ms style="visibility: hidden">5</ms></math>
+    <div id="dynamic">
+      <math><mi>1</mi></math>
+      <math><mn>2</mn></math>
+      <math><mo>3</mo></math>
+      <math><mtext>4</mtext></math>
+      <math><ms>5</ms></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html
new file mode 100644
index 0000000000..f92d0faf6d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
+<link rel="match" href="visibility-002-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and fraction bar of the mfrac element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><mfrac style="visibility: hidden"><mn>1</mn><mn>2</mn></mfrac></math>
+    <div id="dynamic">
+      <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math>
+    </div>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html
new file mode 100644
index 0000000000..4bf4d45c81
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#radical-symbol">
+<link rel="match" href="visibility-003-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and radical symbol of the msqrt and mroot elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><msqrt style="visibility: hidden"><mn>1</mn></msqrt></math>
+    <math><mroot style="visibility: hidden"><mn>2</mn><mn>3</mn></mroot></math>
+    <div id="dynamic">
+      <math><msqrt><mn>1</mn></msqrt></math>
+      <math><mroot><mn>2</mn><mn>3</mn></mroot></math>
+    </div>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html
new file mode 100644
index 0000000000..28678eaf0c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://github.com/mathml-refresh/mathml-core/pull/24">
+<link rel="match" href="visibility-004.tentative-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and graphical elements of the menclose element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><menclose notation="left" style="visibility: hidden"><mn>1</mn></menclose></math>
+    <math><menclose notation="right" style="visibility: hidden"><mn>2</mn></menclose></math>
+    <math><menclose notation="top" style="visibility: hidden"><mn>3</mn></menclose></math>
+    <math><menclose notation="bottom" style="visibility: hidden"><mn>4</mn></menclose></math>
+    <math><menclose notation="box" style="visibility: hidden"><mn>5</mn></menclose></math>
+    <math><menclose notation="roundedbox" style="visibility: hidden"><mn>6</mn></menclose></math>
+    <math><menclose notation="actuarial" style="visibility: hidden"><mn>7</mn></menclose></math>
+    <math><menclose notation="madruwb" style="visibility: hidden"><mn>8</mn></menclose></math>
+    <math><menclose notation="horizontalstrike" style="visibility: hidden"><mn>9</mn></menclose></math>
+    <math><menclose notation="verticalstrike" style="visibility: hidden"><mn>10</mn></menclose></math>
+    <math><menclose notation="updiagonalstrike" style="visibility: hidden"><mn>11</mn></menclose></math>
+    <math><menclose notation="downdiagonalstrike" style="visibility: hidden"><mn>12</mn></menclose></math>
+    <math><menclose notation="longdiv" style="visibility: hidden"><mn>13</mn></menclose></math>
+    <math><menclose notation="circle" style="visibility: hidden"><mn>14</mn></menclose></math>
+    <div id="dynamic">
+      <math><menclose notation="left"><mn>1</mn></menclose></math>
+      <math><menclose notation="right"><mn>2</mn></menclose></math>
+      <math><menclose notation="top"><mn>3</mn></menclose></math>
+      <math><menclose notation="bottom"><mn>4</mn></menclose></math>
+      <math><menclose notation="box"><mn>5</mn></menclose></math>
+      <math><menclose notation="roundedbox"><mn>6</mn></menclose></math>
+      <math><menclose notation="actuarial"><mn>7</mn></menclose></math>
+      <math><menclose notation="madruwb"><mn>8</mn></menclose></math>
+      <math><menclose notation="horizontalstrike"><mn>9</mn></menclose></math>
+      <math><menclose notation="verticalstrike"><mn>10</mn></menclose></math>
+      <math><menclose notation="updiagonalstrike"><mn>11</mn></menclose></math>
+      <math><menclose notation="downdiagonalstrike"><mn>12</mn></menclose></math>
+      <math><menclose notation="longdiv"><mn>13</mn></menclose></math>
+      <math><menclose notation="circle"><mn>14</mn></menclose></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html
new file mode 100644
index 0000000000..a3af376fea
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+<link rel="match" href="visibility-005-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for normal, stretchy and large operators.">
+<style>
+  math {
+      font: 20px/1 Ahem;
+  }
+  @font-face {
+      font-family: operators;
+      src: url("/fonts/math/operators.woff");
+  }
+  mo {
+      font-family: operators;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math>
+      <!-- unstretched operators -->
+      <mo style="visibility: hidden">⥯</mo>
+      <mo style="visibility: hidden">+</mo>
+      <mo style="visibility: hidden">-</mo>
+    </math>
+    <math displaystyle="true">
+      <!-- large operator -->
+      <mo largeop="true" style="visibility: hidden">⥯</mo>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, small size -->
+        <mspace height="2em"/>
+        <mo style="visibility: hidden">⥯</mo>
+      </mrow>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, large size -->
+        <mspace height="4em"/>
+        <mo style="visibility: hidden">⥯</mo>
+      </mrow>
+    </math>
+    <div id="dynamic">
+      <math>
+        <!-- unstretched operators -->
+        <mo stretchy="false">⥯</mo>
+        <mo>+</mo>
+        <mo>-</mo>
+      </math>
+      <math displaystyle="true">
+        <!-- large operator -->
+        <mo largeop="true">⥯</mo>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, small size -->
+          <mspace height="2em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, large size -->
+          <mspace height="4em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+    </div>
+  </div>
+  <script src="/mathml/support/fonts.js"></script>
+  <script>
+    window.addEventListener("load", () => loadAllFonts().then(() => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    }));
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html
new file mode 100644
index 0000000000..2deedc3f0b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>width, height, inline-size and block-size</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that width, height, inline-size and block-size properties are ignored.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<style>
+  /* Revert style specified in the UA style sheet that changes box size. */
+  merror { border: 0; }
+  mfrac { padding: 0; }
+</style>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag))
+            continue;
+
+        document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>`);
+        let div = document.body.lastElementChild;
+        let element = FragmentHelper.element(div.firstElementChild);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var style = `width: 500px; height: 400px;`;
+            element.setAttribute("style", style);
+            let box = element.getBoundingClientRect();
+            assert_approx_equals(box.width, 500, epsilon, "width");
+            assert_approx_equals(box.height, 400, epsilon, "height");
+        }, `width and height properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var style = `inline-size: 600px; block-size: 700px;`;
+            element.setAttribute("style", style);
+            let box = element.getBoundingClientRect();
+            assert_approx_equals(box.width, 600, epsilon, "width");
+            assert_approx_equals(box.height, 700, epsilon, "height");
+        }, `inline-size and block-size properties on ${tag}`);
+
+        div.style = "display: none;"; // Hide the div after measurement.
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002-ref.html
new file mode 100644
index 0000000000..ed5125e952
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002-ref.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>content position with width/height (reference)</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  body, math {
+      font: 25px/1 Ahem;
+      color: black;
+  }
+  .test {
+      margin: .5em;
+  }
+  .box {
+      width: 7em;
+      height: 3em;
+      border: 1px solid blue;
+      display: inline-block;
+  }
+  .center {
+      text-align: center;
+  }
+
+  /* Revert style specified in the UA style sheet that changes box size. */
+  mfrac { padding: 0; }
+</style>
+</head>
+<body>
+  <div class="test">
+    <div class="box">
+      <math>
+        <mtext>X</mtext>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <mtext>X</mtext>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <mrow>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mrow>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <mrow>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mrow>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <mpadded lspace="1em" voffset="-1em">
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mpadded>
+      </math>
+    </diV>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <mpadded lspace="1em" voffset="-1em">
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mpadded>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <mpadded width="9em" height="1em" depth=".5em">
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mpadded>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <mpadded width="9em" height="1em" depth=".5em">
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mpadded>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box center">
+      <math>
+        <mfrac linethickness="0">
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mfrac>
+      </math>
+    </div>
+    <div class="box center" dir="rtl">
+      <math dir="rtl">
+        <mfrac linethickness="0">
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mfrac>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <msqrt>
+          <mtext>X</mtext>
+        </msqrt>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <msqrt>
+          <mtext>X</mtext>
+        </msqrt>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <mroot>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mroot>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <mroot>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mroot>
+      </math>
+    </div>
+  </div>
+
+</body>
+</htmL>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-002.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002.html
new file mode 100644
index 0000000000..99822c1ed9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>content position with width/height</title>
+<link rel="match" href="width-height-002-ref.html">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<meta name="assert" content="Verify the inline-start and block-start edges of the math content box for the mtext, mrow, mpadded, mfrac, msqrt, mroot layout algorithms."/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  body, math {
+      font: 25px/1 Ahem;
+      color: black;
+  }
+  .test {
+      margin: .5em;
+  }
+  .box {
+      width: 7em;
+      height: 3em;
+      border: 1px solid blue;
+  }
+
+  /* Revert style specified in the UA style sheet that changes box size. */
+  mfrac { padding: 0; }
+</style>
+</head>
+<body>
+
+  <div class="test">
+    <math>
+      <mtext class="box">X</mtext>
+    </math>
+    <math dir="rtl">
+      <mtext class="box">X</mtext>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mrow class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mrow>
+    </math>
+    <math dir="rtl">
+      <mrow class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mrow>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mpadded lspace="1em" voffset="-1em" class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mpadded>
+    </math>
+    <math dir="rtl">
+      <mpadded lspace="1em" voffset="-1em" class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mpadded>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mpadded width="9em" height="1em" depth=".5em" class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mpadded>
+    </math>
+    <math dir="rtl">
+      <mpadded width="9em" height="1em" depth=".5em" class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mpadded>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mfrac class="box" linethickness="0">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mfrac>
+    </math>
+    <math dir="rtl">
+      <mfrac class="box" linethickness="0">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mfrac>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msqrt class="box">
+        <mtext>X</mtext>
+      </msqrt>
+    </math>
+    <math dir="rtl">
+      <msqrt class="box">
+        <mtext>X</mtext>
+      </msqrt>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mroot class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mroot>
+    </math>
+    <math dir="rtl">
+      <mroot class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mroot>
+    </math>
+  </div>
+
+</body>
+</htmL>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003-ref.html
new file mode 100644
index 0000000000..84eb2cd089
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003-ref.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>content position with width/height (reference)</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  body, math {
+      font: 25px/1 Ahem;
+      color: black;
+  }
+  .test {
+      margin: .5em;
+  }
+  .box {
+      width: 7em;
+      height: 3em;
+      border: 1px solid blue;
+      display: inline-block;
+  }
+  .center {
+      text-align: center;
+  }
+</style>
+</head>
+<body>
+
+  <div class="test">
+    <div class="box center">
+      <math>
+        <munder>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </munder>
+      </math>
+    </div>
+    <div class="box center" dir="rtl">
+      <math dir="rtl">
+        <munder>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </munder>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box center">
+      <math>
+        <mover>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mover>
+      </math>
+    </div>
+    <div class="box center" dir="rtl">
+      <math dir="rtl">
+        <mover>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mover>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box center">
+      <math>
+        <munderover>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </munderover>
+      </math>
+    </div>
+    <div class="box center" dir="rtl">
+      <math dir="rtl">
+        <munderover>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </munderover>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <msub>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </msub>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <msub>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </msub>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <msup>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </msup>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <msup>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </msup>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <msubsup>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </msubsup>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <msubsup>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </msubsup>
+      </math>
+    </div>
+  </div>
+
+  <div class="test">
+    <div class="box">
+      <math>
+        <mmultiscripts>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mprescripts/>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mmultiscripts>
+      </math>
+    </div>
+    <div class="box" dir="rtl">
+      <math dir="rtl">
+        <mmultiscripts>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+          <mprescripts/>
+          <mtext>X</mtext>
+          <mtext>X</mtext>
+        </mmultiscripts>
+      </math>
+    </div>
+  </div>
+
+</body>
+</htmL>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-003.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003.html
new file mode 100644
index 0000000000..05e00f4759
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>content position with width/height</title>
+<link rel="match" href="width-height-003-ref.html">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+<meta name="assert" content="Verify the inline-start and block-start edges of the math content box for the munder, mover, munderover, msub, msup, msubsup, multiscripts layout algorithms."/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  body, math {
+      font: 25px/1 Ahem;
+      color: black;
+  }
+  .test {
+      margin: .5em;
+  }
+  .box {
+      width: 7em;
+      height: 3em;
+      border: 1px solid blue;
+  }
+</style>
+</head>
+<body>
+
+  <div class="test">
+    <math>
+      <munder class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munder>
+    </math>
+    <math dir="rtl">
+      <munder class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munder>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mover class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mover>
+    </math>
+    <math dir="rtl">
+      <mover class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mover>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <munderover class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munderover>
+    </math>
+    <math dir="rtl">
+      <munderover class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munderover>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msub class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </msub>
+    </math>
+    <math dir="rtl">
+      <msub class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </msub>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msup class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </msup>
+    </math>
+    <math dir="rtl">
+      <msup class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </msup>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msubsup class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </msubsup>
+    </math>
+    <math dir="rtl">
+      <msubsup class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </msubsup>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mmultiscripts class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mprescripts/>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mmultiscripts>
+    </math>
+    <math dir="rtl">
+      <mmultiscripts class="box">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mprescripts/>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mmultiscripts>
+    </math>
+  </div>
+
+</body>
+</htmL>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-004.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-004.html
new file mode 100644
index 0000000000..7133573b04
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-004.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>content position with width/height</title>
+<link rel="match" href="width-height-003-ref.html">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+<meta name="assert" content="Verify the inline-start of the children of the munder, mover, munderover and mfrac layout algorithms."/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/mathml/support/fonts.js"></script>
+<style>
+  .test, math {
+      font: 25px/1 Ahem;
+      color: black;
+  }
+  .test {
+      margin: .5em;
+  }
+  [data-name] {
+      width: 7em;
+      height: 3em;
+      border: 1px solid blue;
+  }
+</style>
+<script>
+  var epsilon = 1;
+
+  function getMiddle(aElement) {
+    let box = aElement.getBoundingClientRect();
+    return (box.left + box.right) / 2;
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+    Array.from(document.querySelectorAll("[data-name]")).forEach(element => {
+        test(() => {
+          let elementMiddle = getMiddle(element);
+          Array.from(element.children).forEach(child => {
+            assert_approx_equals(getMiddle(child), elementMiddle, epsilon);
+          });
+      }, element.dataset.name);
+    });
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+
+  <div class="test">
+    <math>
+      <mfrac data-name="mfrac">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mfrac>
+    </math>
+    <math dir="rtl">
+      <mfrac data-name="RTL mfrac">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mfrac>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mfrac linethickness="0" data-name="mfrac without bar">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mfrac>
+    </math>
+    <math dir="rtl">
+      <mfrac linethickness="0" data-name="RTL mfrac without bar">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mfrac>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <munder data-name="munder">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munder>
+    </math>
+    <math dir="rtl">
+      <munder data-name="RTL munder">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munder>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mover data-name="mover">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mover>
+    </math>
+    <math dir="rtl">
+      <mover data-name="RTL mover">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </mover>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <munderover data-name="munderover">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munderover>
+    </math>
+    <math dir="rtl">
+      <munderover data-name="RTL munderover">
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+        <mtext>X</mtext>
+      </munderover>
+    </math>
+  </div>
+
+</body>
+</htmL>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html
new file mode 100644
index 0000000000..e239cdca5a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Forced writing-mode on MathML elements</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Test that writing-mode is forced to horizontal-tb on MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  /* selector defined in mathml-fragments.js */
+  .element {
+    writing-mode: vertical-lr;
+    padding-block-start: 10px;
+    padding-block-end: 15px;
+    padding-inline-start: 20px;
+    padding-inline-end: 25px;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+  <script>
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      let unknownElement = FragmentHelper.createElement("unknown");
+      unknownElement.setAttribute("class", "element");
+      container.appendChild(unknownElement);
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+        var tag = element.tagName;
+        var style = window.getComputedStyle(element);
+        test(function () {
+          assert_equals(style["writing-mode"], "horizontal-tb");
+        }, `writing-mode is forced to horizontal-tb on <${tag}> element`);
+        test(function () {
+          assert_equals(style["padding-block-start"], style["padding-top"]);
+          assert_equals(style["padding-block-end"], style["padding-bottom"]);
+          assert_equals(style["padding-inline-start"], style["padding-left"]);
+          assert_equals(style["padding-inline-end"], style["padding-right"]);
+        }, `logical properties interpreted in horizontal-tb on <${tag}> element`);
+      });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html
new file mode 100644
index 0000000000..6eae88efb1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Reset writing-mode and logical property (reference)</title>
+  </head>
+  <body>
+    <p>Test passes if you see a green square.</p>
+    <math style="writing-mode: horizontal-tb;
+                 padding-top: 200px;
+                 background: green">
+      <mspace width="200px"/>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html
new file mode 100644
index 0000000000..939cfc5ba6
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Reset writing-mode and logical property</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <meta name="assert" content="Verify how forced writing-mode is taken into account for logicial properties.">
+    <link rel="match" href="reset-and-logicial-property-ref.html">
+  </head>
+  <body>
+    <p>Test passes if you see a green square.</p>
+    <math style="writing-mode: vertical-lr;
+                 padding-block-start: 200px;
+                 background: green">
+      <mspace width="200px"/>
+    </math>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
new file mode 100644
index 0000000000..b751caf90d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>writing mode</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify CSS writing mode (writing-mode and directionproperties) for mrow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      var reference = document.getElementById("horizontal-tb_ltr");
+
+      ["horizontal-tb_rtl"].forEach(id => {
+           var element = document.getElementById(id);
+
+           test(function() {
+               var style = window.getComputedStyle(element);
+               var writingMode = id.split("_");
+               assert_equals(style.getPropertyValue("writing-mode"),
+                             writingMode[0], "writing-mode");
+               assert_equals(style.getPropertyValue("direction"),
+                             writingMode[1], "direction");
+           }, `Inheritance of CSS writing-mode and direction (id='${id}')`);
+
+           test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              compareLayout(element, reference, epsilon);
+           }, `Layout of mrow (id='${id}')`);
+      });
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow id="horizontal-tb_ltr">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math style="direction: rtl;">
+      <mrow id="horizontal-tb_rtl">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
new file mode 100644
index 0000000000..c0b64a917a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>writing mode</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify CSS writing mode (writing-mode and direction properties) for mrow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      for (tag in MathMLFragments) {
+          if (tag == "annotation" || tag == "annotation-xml")
+              continue; // These tags have display: none.
+
+          ["horizontal-tb_rtl"].forEach(id => {
+               var writingMode = id.split("_");
+               var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`;
+
+               document.body.insertAdjacentHTML("beforeend", `<div>\
+<math>${MathMLFragments[tag]}</math>\
+<math>${MathMLFragments[tag]}</math>\
+</div>`);
+               var div = document.body.lastElementChild;
+
+               var styleMath = div.firstElementChild;
+               styleMath.setAttribute("style", writingModeString);
+               var styleElement = FragmentHelper.element(styleMath);
+
+               var referenceMath = div.lastElementChild;
+               var referenceElement = FragmentHelper.element(referenceMath);
+
+               [styleMath, referenceMath].forEach(math => {
+                   Array.from(math.getElementsByClassName("mathml-container")).forEach(container => {
+                       container.insertAdjacentHTML("beforeend", "\
+<mspace style='background: blue'\
+        width='20px' height='30px' depth='40px'></mspace>\
+<mspace style='background: black'\
+        width='50px' depth='60px'></mspace>\
+<mspace style='background: yellow'\
+        width='70px' height='80px'></mspace>");
+                   });
+                   Array.from(math.getElementsByClassName("foreign-container")).forEach(container => {
+                       container.insertAdjacentHTML("beforeend", "\
+<span style='display: inline-block; background: lightblue;\
+             inline-size: 20px; block-size: 30px;\
+             vertical-align: bottom;'></span>\
+<span style='display: inline-block; background: pink;\
+             inline-size: 40px; block-size: 50px;\
+             vertical-align: bottom;'></span>");
+                   });
+               });
+
+               test(function() {
+                   assert_true(MathMLFeatureDetection.has_mspace());
+                   var style = window.getComputedStyle(styleElement);
+                   assert_equals(style.getPropertyValue("writing-mode"),
+                                 writingMode[0], "writing-mode");
+                   assert_equals(style.getPropertyValue("direction"),
+                             writingMode[1], "direction");
+                   compareLayout(styleElement, referenceElement, epsilon);
+               }, `Layout of ${tag} (${writingModeString})`);
+
+               div.style = "display: none;"; // Hide the div after testing.
+           });
+      }
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
-- 
cgit v1.2.3