Bug 1665975 - Implement the math-style property. r=emilio

This patch renames the internal -moz-math-display to math-style and exposes it under the layout.css.math-style.enabled preference. The initial value becomes "normal" but that does not affect the default MathML behavior since the UA style sheet sets the math-style property explicitly on <math> tags. WPT tests are updated to use the syntax approved by the CSSWG. Intent to prototype: https://groups.google.com/forum/#!msg/mozilla.dev.platform/1hQQ7ISudGo/_yLEckEeBQAJ Differential Revision: https://phabricator.services.mozilla.com/D90731
2020-09-21 05:41:51 +00:00 · 2020-09-21 05:41:51 +00:00 · 1ac695dbdc
--- a/devtools/server/actors/animation-type-longhand.js
+++ b/devtools/server/actors/animation-type-longhand.js
@ -216,7 +216,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
      "margin-block-start",
      "margin-inline-end",
      "margin-inline-start",
-      "-moz-math-display",
+      "math-style",
      "max-block-size",
      "max-inline-size",
      "min-block-size",
--- a/layout/mathml/mathml.css
+++ b/layout/mathml/mathml.css
@ -26,22 +26,22 @@ math {
  letter-spacing: normal;
  text-rendering: optimizeLegibility;
  -moz-float-edge: margin-box;
-  -moz-math-display: inline;
+  math-style: compact;
 }
 math[display="block" i] {
  display: block;
  text-align: -moz-center;
-  -moz-math-display: block;
+  math-style: normal;
 }
 math[display="inline" i] {
  display: inline;
-  -moz-math-display: inline;
+  math-style: compact;
 }
 math[displaystyle="false" i] {
-  -moz-math-display: inline;
+  math-style: compact;
 }
 math[displaystyle="true" i] {
-  -moz-math-display: block;
+  math-style: normal;
 }

 /**************************************************************************/
@ -223,18 +223,18 @@ mtable[framespacing] > mtr > mtd {
 /*
  http://www.w3.org/Math/draft-spec/chapter3.html#presm.scriptlevel

-  The determination of -moz-math-display for <math> involves the displaystyle
+  The determination of math-style for <math> involves the displaystyle
  and display attributes. See the <math> section above.
 */

 /*
-  Map mstyle@displaystyle to -moz-math-display.
+  Map mstyle@displaystyle to math-style.
 */
 mstyle[displaystyle="false" i] {
-  -moz-math-display: inline;
+  math-style: compact;
 }
 mstyle[displaystyle="true" i] {
-  -moz-math-display: block;
+  math-style: normal;
 }

 /*  munder, mover and munderover change the scriptlevels of their children
@ -250,7 +250,7 @@ mstyle[displaystyle="true" i] {
 */
 mfrac > * {
    -moz-script-level: auto;
-    -moz-math-display: inline;
+    math-style: compact;
 }

 /*
@ -260,7 +260,7 @@ mfrac > * {
 */
 mroot > :not(:first-child) {
    -moz-script-level: +2;
-    -moz-math-display: inline;
+    math-style: compact;
 }

 /*
@ -284,7 +284,7 @@ msup > :not(:first-child),
 msubsup > :not(:first-child),
 mmultiscripts > :not(:first-child) {
    -moz-script-level: +1;
-    -moz-math-display: inline;
+    math-style: compact;
 }

 /*
@ -304,7 +304,7 @@ mmultiscripts > :not(:first-child) {
 munder > :not(:first-child),
 mover > :not(:first-child),
 munderover > :not(:first-child) {
-    -moz-math-display: inline;
+    math-style: compact;
 }

 /*
@ -312,8 +312,8 @@ munderover > :not(:first-child) {
   inherited value of the attribute. If the attribute is not present, the
   mtable element sets displaystyle to "false" within the table elements.
 */
-mtable { -moz-math-display: inline; }
-mtable[displaystyle="true" i] { -moz-math-display: block; }
+mtable { math-style: compact; }
+mtable[displaystyle="true" i] { math-style: normal; }

 /*
   The mscarries element sets displaystyle to "false", and increments
@ -321,7 +321,7 @@ mtable[displaystyle="true" i] { -moz-math-display: block; }
   XXXfredw: This element is not implemented yet. See bug 534967.
 mscarries {
  -moz-script-level: +1;
-  -moz-math-display: inline;
+  math-style: compact;
 }
 */

--- a/layout/mathml/nsMathMLmencloseFrame.cpp
+++ b/layout/mathml/nsMathMLmencloseFrame.cpp
@ -367,9 +367,9 @@ nsresult nsMathMLmencloseFrame::PlaceInternal(DrawTarget* aDrawTarget,
  if (delta) padding += onePixel - delta;  // round up

  if (IsToDraw(NOTATION_LONGDIV) || IsToDraw(NOTATION_RADICAL)) {
-    GetRadicalParameters(
-        fm, StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_BLOCK,
-        mRadicalRuleThickness, leading, psi);
+    GetRadicalParameters(fm,
+                         StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_NORMAL,
+                         mRadicalRuleThickness, leading, psi);

    // make sure that the rule appears on on screen
    if (mRadicalRuleThickness < onePixel) {
--- a/layout/mathml/nsMathMLmfracFrame.cpp
+++ b/layout/mathml/nsMathMLmfracFrame.cpp
@ -51,7 +51,7 @@ eMathMLFrameType nsMathMLmfracFrame::GetMathMLFrameType() {
 }

 uint8_t nsMathMLmfracFrame::ScriptIncrement(nsIFrame* aFrame) {
-  if (!StyleFont()->mMathDisplay && aFrame &&
+  if (StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_COMPACT && aFrame &&
      (mFrames.FirstChild() == aFrame || mFrames.LastChild() == aFrame)) {
    return 1;
  }
@ -67,7 +67,7 @@ nsMathMLmfracFrame::TransmitAutomaticData() {

  // If displaystyle is false, then scriptlevel is incremented, so notify the
  // children of this.
-  if (!StyleFont()->mMathDisplay) {
+  if (StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_COMPACT) {
    PropagateFrameFlagFor(mFrames.FirstChild(),
                          NS_FRAME_MATHML_SCRIPT_DESCENDANT);
    PropagateFrameFlagFor(mFrames.LastChild(),
@ -264,7 +264,7 @@ nsresult nsMathMLmfracFrame::PlaceInternal(DrawTarget* aDrawTarget,
    }
  }

-  bool displayStyle = StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_BLOCK;
+  bool displayStyle = StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_NORMAL;

  if (!mIsBevelled) {
    mLineRect.height = mLineThickness;
@ -511,7 +511,7 @@ nsresult nsMathMLmfracFrame::PlaceInternal(DrawTarget* aDrawTarget,
      denShift += delta;
    }

-    if (StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_BLOCK) {
+    if (StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_NORMAL) {
      delta =
          std::min(bmDen.ascent + bmDen.descent, bmNum.ascent + bmNum.descent) /
          2;
--- a/layout/mathml/nsMathMLmmultiscriptsFrame.cpp
+++ b/layout/mathml/nsMathMLmmultiscriptsFrame.cpp
@ -268,7 +268,7 @@ nsresult nsMathMLmmultiscriptsFrame::PlaceMultiScript(
    // get sup script shift depending on current script level and display style
    // Rule 18c, App. G, TeXbook
    if (font->mScriptLevel == 0 &&
-        font->mMathDisplay == NS_MATHML_DISPLAYSTYLE_BLOCK &&
+        font->mMathStyle == NS_STYLE_MATH_STYLE_NORMAL &&
        !NS_MATHML_IS_COMPRESSED(presentationData.flags)) {
      // Style D in TeXbook
      supScriptShift = supScriptShift1;
--- a/layout/mathml/nsMathMLmoFrame.cpp
+++ b/layout/mathml/nsMathMLmoFrame.cpp
@ -542,7 +542,7 @@ static uint32_t GetStretchHint(nsOperatorFlags aFlags,
    // stretchy are true or false (see bug 69325).
    // . largeopOnly is taken if largeop=true and stretchy=false
    // . largeop is taken if largeop=true and stretchy=true
-    if (aStyleFont->mMathDisplay == NS_MATHML_DISPLAYSTYLE_BLOCK &&
+    if (aStyleFont->mMathStyle == NS_STYLE_MATH_STYLE_NORMAL &&
        NS_MATHML_OPERATOR_IS_LARGEOP(aFlags)) {
      stretchHint = NS_STRETCH_LARGEOP;  // (largeopOnly, not mask!)
      if (NS_MATHML_OPERATOR_IS_INTEGRAL(aFlags)) {
@ -938,8 +938,7 @@ nsresult nsMathMLmoFrame::Place(DrawTarget* aDrawTarget, bool aPlaceOrigin,
     Stretch() method.
  */

-  if (!aPlaceOrigin &&
-      StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_BLOCK &&
+  if (!aPlaceOrigin && StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_NORMAL &&
      NS_MATHML_OPERATOR_IS_LARGEOP(mFlags) && UseMathMLChar()) {
    nsBoundingMetrics newMetrics;
    rv = mMathMLChar.Stretch(
--- a/layout/mathml/nsMathMLmrootFrame.cpp
+++ b/layout/mathml/nsMathMLmrootFrame.cpp
@ -203,9 +203,9 @@ void nsMathMLmrootFrame::Reflow(nsPresContext* aPresContext,
      nsLayoutUtils::GetFontMetricsForFrame(this, fontSizeInflation);

  nscoord ruleThickness, leading, psi;
-  GetRadicalParameters(
-      fm, StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_BLOCK,
-      ruleThickness, leading, psi);
+  GetRadicalParameters(fm,
+                       StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_NORMAL,
+                       ruleThickness, leading, psi);

  // built-in: adjust clearance psi to emulate \mathstrut using '1' (TexBook,
  // p.131)
--- a/layout/mathml/nsMathMLmunderoverFrame.cpp
+++ b/layout/mathml/nsMathMLmunderoverFrame.cpp
@ -55,7 +55,7 @@ nsMathMLmunderoverFrame::UpdatePresentationData(uint32_t aFlagsValues,
  // disable the stretch-all flag if we are going to act like a
  // subscript-superscript pair
  if (NS_MATHML_EMBELLISH_IS_MOVABLELIMITS(mEmbellishData.flags) &&
-      StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_INLINE) {
+      StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_COMPACT) {
    mPresentationData.flags &= ~NS_MATHML_STRETCH_ALL_CHILDREN_HORIZONTALLY;
  } else {
    mPresentationData.flags |= NS_MATHML_STRETCH_ALL_CHILDREN_HORIZONTALLY;
@ -255,7 +255,7 @@ XXX The winner is the outermost setting in conflicting settings like these:

  bool subsupDisplay =
      NS_MATHML_EMBELLISH_IS_MOVABLELIMITS(mEmbellishData.flags) &&
-      StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_INLINE;
+      StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_COMPACT;

  // disable the stretch-all flag if we are going to act like a superscript
  if (subsupDisplay) {
@ -349,7 +349,7 @@ The REC says:

 i.e.,:
 if (NS_MATHML_EMBELLISH_IS_MOVABLELIMITS(mEmbellishDataflags) &&
-     StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_INLINE) {
+     StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_COMPACT) {
  // place like subscript-superscript pair
 }
 else {
@ -363,7 +363,7 @@ nsresult nsMathMLmunderoverFrame::Place(DrawTarget* aDrawTarget,
                                        ReflowOutput& aDesiredSize) {
  float fontSizeInflation = nsLayoutUtils::FontSizeInflationFor(this);
  if (NS_MATHML_EMBELLISH_IS_MOVABLELIMITS(mEmbellishData.flags) &&
-      StyleFont()->mMathDisplay == NS_MATHML_DISPLAYSTYLE_INLINE) {
+      StyleFont()->mMathStyle == NS_STYLE_MATH_STYLE_COMPACT) {
    // place like sub sup or subsup
    if (mContent->IsMathMLElement(nsGkAtoms::munderover_)) {
      return nsMathMLmmultiscriptsFrame::PlaceMultiScript(
--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@ -420,9 +420,9 @@ enum class StyleGridTrackBreadth : uint8_t {
 #define NS_MATHML_MATHVARIANT_LOOPED 17
 #define NS_MATHML_MATHVARIANT_STRETCHED 18

-// See nsStyleFont::mMathDisplay
-#define NS_MATHML_DISPLAYSTYLE_INLINE 0
-#define NS_MATHML_DISPLAYSTYLE_BLOCK 1
+// See nsStyleFont::mMathStyle
+#define NS_STYLE_MATH_STYLE_COMPACT 0
+#define NS_STYLE_MATH_STYLE_NORMAL 1

 // See nsStyleDisplay.mPosition
 enum class StylePositionProperty : uint8_t {
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@ -228,7 +228,7 @@ nsStyleFont::nsStyleFont(const nsStyleFont& aSrc)
      mGenericID(aSrc.mGenericID),
      mScriptLevel(aSrc.mScriptLevel),
      mMathVariant(aSrc.mMathVariant),
-      mMathDisplay(aSrc.mMathDisplay),
+      mMathStyle(aSrc.mMathStyle),
      mMinFontSizeRatio(aSrc.mMinFontSizeRatio),
      mExplicitLanguage(aSrc.mExplicitLanguage),
      mAllowZoomAndMinSize(aSrc.mAllowZoomAndMinSize),
@ -249,7 +249,7 @@ nsStyleFont::nsStyleFont(const Document& aDocument)
      mGenericID(StyleGenericFontFamily::None),
      mScriptLevel(0),
      mMathVariant(NS_MATHML_MATHVARIANT_NONE),
-      mMathDisplay(NS_MATHML_DISPLAYSTYLE_INLINE),
+      mMathStyle(NS_STYLE_MATH_STYLE_NORMAL),
      mMinFontSizeRatio(100),  // 100%
      mExplicitLanguage(false),
      mAllowZoomAndMinSize(true),
@ -276,7 +276,7 @@ nsChangeHint nsStyleFont::CalcDifference(const nsStyleFont& aNewData) const {
  if (mSize != aNewData.mSize || mLanguage != aNewData.mLanguage ||
      mExplicitLanguage != aNewData.mExplicitLanguage ||
      mMathVariant != aNewData.mMathVariant ||
-      mMathDisplay != aNewData.mMathDisplay ||
+      mMathStyle != aNewData.mMathStyle ||
      mMinFontSizeRatio != aNewData.mMinFontSizeRatio) {
    return NS_STYLE_HINT_REFLOW;
  }
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@ -114,8 +114,8 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleFont {
  int8_t mScriptLevel;
  // MathML  mathvariant support
  uint8_t mMathVariant;
-  // MathML displaystyle support
-  uint8_t mMathDisplay;
+  // math-style support (used for MathML displaystyle)
+  uint8_t mMathStyle;

  // allow different min font-size for certain cases
  uint8_t mMinFontSizeRatio;  // percent * 100
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@ -9141,6 +9141,14 @@ var gCSSProperties = {
    other_values: ["url(#mysym)"],
    invalid_values: [],
  },
+  "math-style": {
+    domProp: "mathStyle",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: ["compact"],
+    invalid_values: [],
+  },
  "mix-blend-mode": {
    domProp: "mixBlendMode",
    inherited: false,
--- a/modules/libpref/init/StaticPrefList.yaml
+++ b/modules/libpref/init/StaticPrefList.yaml
@ -6049,6 +6049,13 @@
  mirror: always
  rust: true

+# Is support for math-style enabled?
+- name: layout.css.math-style.enabled
+  type: RelaxedAtomicBool
+  value: @IS_NIGHTLY_BUILD@
+  mirror: always
+  rust: true
+
 # Pref to control whether @-moz-document rules are enabled in content pages.
 - name: layout.css.moz-document.content.enabled
  type: RelaxedAtomicBool
--- a/servo/components/style/properties/longhands/font.mako.rs
+++ b/servo/components/style/properties/longhands/font.mako.rs
@ -239,14 +239,14 @@ ${helpers.predefined_type(
 )}

 ${helpers.single_keyword(
-    "-moz-math-display",
-    "inline block",
+    "math-style",
+    "compact normal",
    engines="gecko",
-    gecko_constant_prefix="NS_MATHML_DISPLAYSTYLE",
-    gecko_ffi_name="mMathDisplay",
-    enabled_in="ua",
-    spec="Internal (not web-exposed)",
+    gecko_pref="layout.css.math-style.enabled",
+    spec="https://mathml-refresh.github.io/mathml-core/#the-math-style-property",
+    has_effect_on_gecko_scrollbars=False,
    animation_value_type="none",
+    enabled_in="ua",
 )}

 ${helpers.single_keyword(
--- a/servo/components/style/values/computed/font.rs
+++ b/servo/components/style/values/computed/font.rs
@ -819,14 +819,14 @@ impl ToComputedValue for specified::MozScriptLevel {
    type ComputedValue = MozScriptLevel;

    fn to_computed_value(&self, cx: &Context) -> i8 {
-        use crate::properties::longhands::_moz_math_display::SpecifiedValue as DisplayValue;
+        use crate::properties::longhands::math_style::SpecifiedValue as MathStyleValue;
        use std::{cmp, i8};

        let int = match *self {
            specified::MozScriptLevel::Auto => {
                let parent = cx.builder.get_parent_font().clone__moz_script_level() as i32;
-                let display = cx.builder.get_parent_font().clone__moz_math_display();
-                if display == DisplayValue::Inline {
+                let style = cx.builder.get_parent_font().clone_math_style();
+                if style == MathStyleValue::Compact {
                    parent + 1
                } else {
                    parent
--- a/testing/web-platform/meta/css/css-fonts/math-script-level-and-math-style/dir.ini
+++ b/testing/web-platform/meta/css/css-fonts/math-script-level-and-math-style/dir.ini
@ -0,0 +1 @@
+prefs: [layout.css.math-style.enabled: true]
--- a/testing/web-platform/meta/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html.ini
+++ b/testing/web-platform/meta/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html.ini
@ -1,10 +0,0 @@
-[math-style-001.tentative.html]
-  [Specified values of math-style]
-    expected: FAIL
-
-  [Inherited values of math-style]
-    expected: FAIL
-
-  [Initial value of math-style]
-    expected: FAIL
-
--- a/testing/web-platform/meta/mathml/dir.ini
+++ b/testing/web-platform/meta/mathml/dir.ini
@ -1 +1 @@
-prefs: [mathml.deprecated_style_attributes.disabled: true, mathml.deprecated_menclose_notation_radical.disabled: true, mathml.mathsize_names.disabled:true, mathml.mathspace_names.disabled: true, mathml.mfrac_linethickness_names.disabled:true, mathml.deprecated_alignment_attributes.disabled: true, mathml.script_shift_attributes.disabled: true, mathml.mfrac_bevelled_attribute.disabled: true, mathml.mfenced_element.disabled: true]
+prefs: [mathml.deprecated_style_attributes.disabled: true, mathml.deprecated_menclose_notation_radical.disabled: true, mathml.mathsize_names.disabled:true, mathml.mathspace_names.disabled: true, mathml.mfrac_linethickness_names.disabled:true, mathml.deprecated_alignment_attributes.disabled: true, mathml.script_shift_attributes.disabled: true, mathml.mfrac_bevelled_attribute.disabled: true, mathml.mfenced_element.disabled: true, layout.css.math-style.enabled: true]
--- a/testing/web-platform/meta/mathml/relations/css-styling/attribute-mapping-002.html.ini
+++ b/testing/web-platform/meta/mathml/relations/css-styling/attribute-mapping-002.html.ini
@ -62,9 +62,6 @@
  [displaystyle on the msqrt element is mapped to CSS math-style]
    expected: FAIL

-  [displaystyle on the mstyle element is mapped to CSS math-style]
-    expected: FAIL
-
  [mathvariant on the mprescripts element is mapped to CSS text-transform]
    expected: FAIL

@ -116,9 +113,6 @@
  [displaystyle on the mi element is mapped to CSS math-style]
    expected: FAIL

-  [displaystyle on the math element is mapped to CSS math-style]
-    expected: FAIL
-
  [mathvariant on the mmultiscripts element is mapped to CSS text-transform]
    expected: FAIL

@ -137,9 +131,6 @@
  [displaystyle on the mrow element is mapped to CSS math-style]
    expected: FAIL

-  [displaystyle on the mtable element is mapped to CSS math-style]
-    expected: FAIL
-
  [mathvariant on the annotation-xml element is mapped to CSS text-transform]
    expected: FAIL

--- a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
@ -80,18 +80,18 @@
    <div>
      <div class="container">
        <div>
-          <div style="font-size: 200px; math-style: display">
+          <div style="font-size: 200px; math-style: normal">
            <div id="autoDisplay" style="font-size: scriptlevel(auto)"></div>
          </div>
-          <div style="font-size: 500px; math-style: inline">
+          <div style="font-size: 500px; math-style: compact">
            <div id="autoInline" style="font-size: scriptlevel(auto)"></div>
          </div>
        </div>
        <div style="font-size: 2000px;">
-          <div style="math-style: display; font-size: scriptlevel(7)">
+          <div style="math-style: normal; font-size: scriptlevel(7)">
            <div id="autoDisplayFrom7" style="font-size: scriptlevel(auto)"></div>
          </div>
-          <div style="math-style: inline; font-size: scriptlevel(7)">
+          <div style="math-style: compact; font-size: scriptlevel(7)">
            <div id="autoInlineFrom7" style="font-size: scriptlevel(auto)"></div>
          </div>
        </div>
--- a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html
@ -6,7 +6,7 @@
    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
-    <meta name="assert" content="If font-size is scriptlevel('auto') and the inherited value of math-style is 'display' then the internal scriptlevel is the one of its parent.">
+    <meta name="assert" content="If font-size is scriptlevel('auto') and the inherited value of math-style is 'normal' then the internal scriptlevel is the one of its parent.">
    <link rel="match" href="math-script-level-auto-and-math-style-001.tentative-ref.html">
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
@ -19,7 +19,7 @@
  </head>
  <body>
    <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p>
-    <div class="container" style="math-style: display;">
+    <div class="container" style="math-style: normal;">
      <div style="font-size: scriptlevel(auto)">X</div>
    </div>
  </body>
--- a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html
@ -6,7 +6,7 @@
    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
-    <meta name="assert" content="If font-size is scriptlevel('auto') and the inherited value of math-style is 'inline' then the internal scriptlevel is the one of its parent.">
+    <meta name="assert" content="If font-size is scriptlevel('auto') and the inherited value of math-style is 'compact' then the internal scriptlevel is the one of its parent.">
    <link rel="match" href="math-script-level-auto-and-math-style-002.tentative-ref.html">
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
@ -19,7 +19,7 @@
  </head>
  <body>
    <p>Test passes if you see a square of side 500 × 0.71^(1 − 0) = 355px.</p>
-    <div class="container" style="math-style: inline;">
+    <div class="container" style="math-style: compact;">
      <div style="font-size: scriptlevel(auto)">X</div>
    </div>
  </body>
--- a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html
@ -6,7 +6,7 @@
    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
-    <meta name="assert" content="Initial value of math-style is 'inline'">
+    <meta name="assert" content="Initial value of math-style is 'compact'">
    <link rel="match" href="math-script-level-auto-and-math-style-003.tentative-ref.html">
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
--- a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html
@ -6,7 +6,7 @@
    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
-    <meta name="assert" content="Initial value of math-style is 'inline'">
+    <meta name="assert" content="Initial value of math-style is 'compact'">
    <link rel="match" href="math-script-level-auto-and-math-style-004.tentative-ref.html">
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
@ -20,7 +20,7 @@
  <body>
    <p>Test passes if you see a square of side 500 × 0.71^(1 − 0) = 355px.</p>
    <div class="container">
-      <div style="math-style: display">
+      <div style="math-style: normal">
        <div style="math-style: initial">
          <div style="font-size: scriptlevel(auto)">X</div>
        </div>
--- a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html
@ -20,7 +20,7 @@
  <body>
    <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p>
    <div class="container">
-      <div style="math-style: display;">
+      <div style="math-style: normal;">
        <div>
          <div>
            <div style="font-size: scriptlevel(auto)">X</div>
--- a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html
@ -16,15 +16,15 @@
      setup({ explicit_done: true });
      window.addEventListener("load", function() {
          test(function() {
-              assert_equals(mathStyle("initial"), "inline");
+              assert_equals(mathStyle("initial"), "normal");
          }, "Initial value of math-style");
          test(function() {
-              assert_equals(mathStyle("specifiedInline"), "inline");
-              assert_equals(mathStyle("specifiedDisplay"), "display");
+              assert_equals(mathStyle("specifiedInline"), "compact");
+              assert_equals(mathStyle("specifiedDisplay"), "normal");
          }, "Specified values of math-style");
          test(function() {
-              assert_equals(mathStyle("inheritedInline"), "inline");
-              assert_equals(mathStyle("inheritedDisplay"), "display");
+              assert_equals(mathStyle("inheritedInline"), "compact");
+              assert_equals(mathStyle("inheritedDisplay"), "normal");
          }, "Inherited values of math-style");
          done();
      });
@ -33,10 +33,10 @@
  <body>
    <div id="log"></div>
    <div id="initial"></div>
-    <div id="specifiedInline" style="math-style: inline">
+    <div id="specifiedInline" style="math-style: compact">
      <div id="inheritedInline"></div>
    </div>
-    <div id="specifiedDisplay" style="math-style: display">
+    <div id="specifiedDisplay" style="math-style: normal">
      <div id="inheritedDisplay"></div>
    </div>
  </body>
--- 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
@ -69,11 +69,11 @@
          }, `scriptlevel on the ${tag} element is mapped to font-size: scriptlevel(...)`);

          test(function() {
-              assert_equals(style.getPropertyValue("math-style"), "inline", "no attribute");
+              assert_equals(style.getPropertyValue("math-style"), "compact", "no attribute");
              element.setAttribute("displaystyle", "true");
-              assert_equals(style.getPropertyValue("math-style"), "display", "attribute specified");
+              assert_equals(style.getPropertyValue("math-style"), "normal", "attribute specified");
              element.setAttribute("displaystyle", "TrUe");
-              assert_equals(style.getPropertyValue("math-style"), "display", "case insensitive");
+              assert_equals(style.getPropertyValue("math-style"), "normal", "case insensitive");
          }, `displaystyle on the ${tag} element is mapped to CSS math-style`);
      });

--- 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
@ -46,7 +46,7 @@
    </math>
  </p>
  <p>displaystyle:
-    <math style="math-style: inline">
+    <math style="math-style: compact">
      <munder>
        <mo movablelimits="true">X</mo>
        <mo>X</mo>
--- 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
@ -56,7 +56,7 @@
    </math>
  </p>
  <p>displaystyle:
-    <math displaystyle="true" style="math-style: inline">
+    <math displaystyle="true" style="math-style: compact">
      <munder>
        <mo movablelimits="true">X</mo>
        <mo>X</mo>
				`@ -0,0 +1 @@`
				`prefs: [layout.css.math-style.enabled: true]`