diff --git a/layout/mathml/nsMathMLContainerFrame.cpp b/layout/mathml/nsMathMLContainerFrame.cpp
index 1d1af5ce24413..342bee7fd8697 100644
--- a/layout/mathml/nsMathMLContainerFrame.cpp
+++ b/layout/mathml/nsMathMLContainerFrame.cpp
@@ -133,6 +133,59 @@ void nsMathMLContainerFrame::InflateReflowAndBoundingMetrics(
   aReflowOutput.Height() += aBorderPadding.TopBottom();
 }
 
+nsMathMLContainerFrame::WidthAndHeightForPlaceAdjustment
+nsMathMLContainerFrame::GetWidthAndHeightForPlaceAdjustment(
+    const PlaceFlags& aFlags) {
+  WidthAndHeightForPlaceAdjustment sizes;
+  if (aFlags.contains(PlaceFlag::DoNotAdjustForWidthAndHeight)) {
+    return sizes;
+  }
+  const nsStylePosition* stylePos = StylePosition();
+  const auto& width = stylePos->mWidth;
+  // TODO: Resolve percentages.
+  // https://github.com/w3c/mathml-core/issues/76
+  if (width.ConvertsToLength()) {
+    sizes.width = Some(width.ToLength());
+  }
+  if (!aFlags.contains(PlaceFlag::IntrinsicSize)) {
+    // TODO: Resolve percentages.
+    // https://github.com/w3c/mathml-core/issues/77
+    const auto& height = stylePos->mHeight;
+    if (height.ConvertsToLength()) {
+      sizes.height = Some(height.ToLength());
+    }
+  }
+  return sizes;
+}
+
+nscoord nsMathMLContainerFrame::ApplyAdjustmentForWidthAndHeight(
+    const PlaceFlags& aFlags, const WidthAndHeightForPlaceAdjustment& aSizes,
+    ReflowOutput& aReflowOutput, nsBoundingMetrics& aBoundingMetrics) {
+  nscoord shiftX = 0;
+  if (aSizes.width) {
+    MOZ_ASSERT(!aFlags.contains(PlaceFlag::DoNotAdjustForWidthAndHeight));
+    auto width = *aSizes.width;
+    auto oldWidth = aReflowOutput.Width();
+    if (IsMathContentBoxHorizontallyCentered()) {
+      shiftX = (width - oldWidth) / 2;
+    } else if (StyleVisibility()->mDirection == StyleDirection::Rtl) {
+      shiftX = width - oldWidth;
+    }
+    aBoundingMetrics.leftBearing = 0;
+    aBoundingMetrics.rightBearing = width;
+    aBoundingMetrics.width = width;
+    aReflowOutput.mBoundingMetrics = aBoundingMetrics;
+    aReflowOutput.Width() = width;
+  }
+  if (aSizes.height) {
+    MOZ_ASSERT(!aFlags.contains(PlaceFlag::DoNotAdjustForWidthAndHeight));
+    MOZ_ASSERT(!aFlags.contains(PlaceFlag::IntrinsicSize));
+    auto height = *aSizes.height;
+    aReflowOutput.Height() = height;
+  }
+  return shiftX;
+}
+
 // helper to get the preferred size that a container frame should use to fire
 // the stretch on its stretchy child frames.
 void nsMathMLContainerFrame::GetPreferredStretchSize(
@@ -1169,10 +1222,16 @@ nsresult nsMathMLContainerFrame::Place(DrawTarget* aDrawTarget,
   aDesiredSize.SetBlockStartAscent(ascent);
   aDesiredSize.mBoundingMetrics = mBoundingMetrics;
 
+  // Apply inline/block sizes to math content box.
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(aFlags);
+  nscoord shiftX = ApplyAdjustmentForWidthAndHeight(aFlags, sizes, aDesiredSize,
+                                                    mBoundingMetrics);
+
   // Add padding+border.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
                                   mBoundingMetrics);
+  shiftX += borderPadding.left;
 
   mReference.x = 0;
   mReference.y = aDesiredSize.BlockStartAscent();
@@ -1180,7 +1239,7 @@ nsresult nsMathMLContainerFrame::Place(DrawTarget* aDrawTarget,
   //////////////////
   // Place Children
   if (!aFlags.contains(PlaceFlag::MeasureOnly)) {
-    PositionRowChildFrames(borderPadding.left, aDesiredSize.BlockStartAscent());
+    PositionRowChildFrames(shiftX, aDesiredSize.BlockStartAscent());
   }
 
   return NS_OK;
diff --git a/layout/mathml/nsMathMLContainerFrame.h b/layout/mathml/nsMathMLContainerFrame.h
index cb43559908a8a..ec3d28e816c1a 100644
--- a/layout/mathml/nsMathMLContainerFrame.h
+++ b/layout/mathml/nsMathMLContainerFrame.h
@@ -157,6 +157,11 @@ class nsMathMLContainerFrame : public nsContainerFrame, public nsMathMLFrame {
     // place some radical symbol on top of them and finally add its
     // padding/border around that radical symbol.
     IgnoreBorderPadding,
+
+    // If DoNotAdjustForWidthAndHeight is set, the function will complete
+    // without setting the computed width and height after the math layout. This
+    // can be used similarly to IgnoreBorderPadding above.
+    DoNotAdjustForWidthAndHeight,
   };
   using PlaceFlags = mozilla::EnumSet<PlaceFlag>;
 
@@ -247,6 +252,18 @@ class nsMathMLContainerFrame : public nsContainerFrame, public nsMathMLFrame {
 
   nsMargin GetBorderPaddingForPlace(const PlaceFlags& aFlags);
 
+  struct WidthAndHeightForPlaceAdjustment {
+    mozilla::Maybe<nscoord> width;
+    mozilla::Maybe<nscoord> height;
+  };
+  WidthAndHeightForPlaceAdjustment GetWidthAndHeightForPlaceAdjustment(
+      const PlaceFlags& aFlags);
+
+  virtual bool IsMathContentBoxHorizontallyCentered() const { return false; }
+  nscoord ApplyAdjustmentForWidthAndHeight(
+      const PlaceFlags& aFlags, const WidthAndHeightForPlaceAdjustment& aSizes,
+      ReflowOutput& aReflowOutput, nsBoundingMetrics& aBoundingMetrics);
+
  protected:
   // helper to add the inter-spacing when <math> is the immediate parent.
   // Since we don't (yet) handle the root <math> element ourselves, we need to
diff --git a/layout/mathml/nsMathMLTokenFrame.cpp b/layout/mathml/nsMathMLTokenFrame.cpp
index 29615327a479e..cbd92a30d7f01 100644
--- a/layout/mathml/nsMathMLTokenFrame.cpp
+++ b/layout/mathml/nsMathMLTokenFrame.cpp
@@ -178,6 +178,11 @@ nsresult nsMathMLTokenFrame::Place(DrawTarget* aDrawTarget,
   aDesiredSize.Height() = aDesiredSize.BlockStartAscent() +
                           std::max(mBoundingMetrics.descent, descent);
 
+  // Apply width/height to math content box.
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(aFlags);
+  auto shiftX = ApplyAdjustmentForWidthAndHeight(aFlags, sizes, aDesiredSize,
+                                                 mBoundingMetrics);
+
   // Add padding+border.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
@@ -185,6 +190,7 @@ nsresult nsMathMLTokenFrame::Place(DrawTarget* aDrawTarget,
 
   if (!aFlags.contains(PlaceFlag::MeasureOnly)) {
     nscoord dx = borderPadding.left;
+    dx += shiftX;
     for (nsIFrame* childFrame : PrincipalChildList()) {
       ReflowOutput childSize(aDesiredSize.GetWritingMode());
       GetReflowAndBoundingMetricsFor(childFrame, childSize,
diff --git a/layout/mathml/nsMathMLmencloseFrame.cpp b/layout/mathml/nsMathMLmencloseFrame.cpp
index 2b2211dbe1617..6f41471e7a21b 100644
--- a/layout/mathml/nsMathMLmencloseFrame.cpp
+++ b/layout/mathml/nsMathMLmencloseFrame.cpp
@@ -270,8 +270,9 @@ nsresult nsMathMLmencloseFrame::Place(DrawTarget* aDrawTarget,
   // Measure the size of our content using the base class to format like an
   // inferred mrow, without border/padding.
   ReflowOutput baseSize(aDesiredSize.GetWritingMode());
-  PlaceFlags flags =
-      aFlags + PlaceFlag::MeasureOnly + PlaceFlag::IgnoreBorderPadding;
+  PlaceFlags flags = aFlags + PlaceFlag::MeasureOnly +
+                     PlaceFlag::IgnoreBorderPadding +
+                     PlaceFlag::DoNotAdjustForWidthAndHeight;
   nsresult rv = nsMathMLContainerFrame::Place(aDrawTarget, flags, baseSize);
 
   if (NS_FAILED(rv)) {
@@ -527,6 +528,11 @@ nsresult nsMathMLmencloseFrame::Place(DrawTarget* aDrawTarget,
 
   aDesiredSize.mBoundingMetrics = mBoundingMetrics;
 
+  // Apply width/height to math content box.
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(aFlags);
+  dx_left += ApplyAdjustmentForWidthAndHeight(aFlags, sizes, aDesiredSize,
+                                              mBoundingMetrics);
+
   // Add padding+border.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
diff --git a/layout/mathml/nsMathMLmfracFrame.cpp b/layout/mathml/nsMathMLmfracFrame.cpp
index 30b02aa56681d..aeb5e9a4e7df1 100644
--- a/layout/mathml/nsMathMLmfracFrame.cpp
+++ b/layout/mathml/nsMathMLmfracFrame.cpp
@@ -355,6 +355,18 @@ nsresult nsMathMLmfracFrame::Place(DrawTarget* aDrawTarget,
   aDesiredSize.Width() = mBoundingMetrics.width;
   aDesiredSize.mBoundingMetrics = mBoundingMetrics;
 
+  // Apply width/height to math content box.
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(aFlags);
+  auto shiftX = ApplyAdjustmentForWidthAndHeight(aFlags, sizes, aDesiredSize,
+                                                 mBoundingMetrics);
+  if (sizes.width) {
+    // MathML Core says the math content box is horizontally centered
+    // but the fraction bar still takes the full width of the content box.
+    dxNum += shiftX;
+    dxDen += shiftX;
+    width = *sizes.width;
+  }
+
   // Add padding+border.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
diff --git a/layout/mathml/nsMathMLmfracFrame.h b/layout/mathml/nsMathMLmfracFrame.h
index 057efb1e43d6c..2808df9448976 100644
--- a/layout/mathml/nsMathMLmfracFrame.h
+++ b/layout/mathml/nsMathMLmfracFrame.h
@@ -95,6 +95,8 @@ class nsMathMLmfracFrame final : public nsMathMLContainerFrame {
         mLineThickness(0) {}
   virtual ~nsMathMLmfracFrame();
 
+  bool IsMathContentBoxHorizontallyCentered() const final { return true; }
+
   // Display a slash
   void DisplaySlash(nsDisplayListBuilder* aBuilder, const nsRect& aRect,
                     nscoord aThickness, const nsDisplayListSet& aLists);
diff --git a/layout/mathml/nsMathMLmmultiscriptsFrame.cpp b/layout/mathml/nsMathMLmmultiscriptsFrame.cpp
index 2d196aef8ee54..1b17bff2c38dd 100644
--- a/layout/mathml/nsMathMLmmultiscriptsFrame.cpp
+++ b/layout/mathml/nsMathMLmmultiscriptsFrame.cpp
@@ -559,6 +559,11 @@ nsresult nsMathMLmmultiscriptsFrame::PlaceMultiScript(
   aDesiredSize.Width() = boundingMetrics.width;
   aDesiredSize.mBoundingMetrics = boundingMetrics;
 
+  // Apply width/height to math content box.
+  auto sizes = aFrame->GetWidthAndHeightForPlaceAdjustment(aFlags);
+  aFrame->ApplyAdjustmentForWidthAndHeight(aFlags, sizes, aDesiredSize,
+                                           boundingMetrics);
+
   // Add padding+border.
   auto borderPadding = aFrame->GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize, boundingMetrics);
diff --git a/layout/mathml/nsMathMLmoFrame.cpp b/layout/mathml/nsMathMLmoFrame.cpp
index 2ec34d2f508a5..36c94e268b51f 100644
--- a/layout/mathml/nsMathMLmoFrame.cpp
+++ b/layout/mathml/nsMathMLmoFrame.cpp
@@ -741,7 +741,8 @@ nsMathMLmoFrame::Stretch(DrawTarget* aDrawTarget,
 
   // Place our children using the default method and no border/padding.
   // This will allow our child text frame to get its DidReflow()
-  PlaceFlags flags = PlaceFlag::IgnoreBorderPadding;
+  PlaceFlags flags(PlaceFlag::IgnoreBorderPadding,
+                   PlaceFlag::DoNotAdjustForWidthAndHeight);
   nsresult rv = Place(aDrawTarget, flags, aDesiredStretchSize);
   if (NS_FAILED(rv)) {
     // Make sure the child frames get their DidReflow() calls.
@@ -852,8 +853,10 @@ nsMathMLmoFrame::Stretch(DrawTarget* aDrawTarget,
   }
 
   flags = PlaceFlags();
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(flags);
   auto borderPadding = GetBorderPaddingForPlace(flags);
-  if (leadingSpace || trailingSpace || !borderPadding.IsAllZero()) {
+  if (leadingSpace || trailingSpace || !borderPadding.IsAllZero() ||
+      sizes.width || sizes.height) {
     mBoundingMetrics.width += leadingSpace + trailingSpace;
     aDesiredStretchSize.Width() = mBoundingMetrics.width;
     aDesiredStretchSize.mBoundingMetrics.width = mBoundingMetrics.width;
@@ -866,6 +869,10 @@ nsMathMLmoFrame::Stretch(DrawTarget* aDrawTarget,
     aDesiredStretchSize.mBoundingMetrics.leftBearing += dx;
     aDesiredStretchSize.mBoundingMetrics.rightBearing += dx;
 
+    // Apply inline/block sizes to math content box.
+    dx += ApplyAdjustmentForWidthAndHeight(flags, sizes, aDesiredStretchSize,
+                                           mBoundingMetrics);
+
     // Add border/padding.
     InflateReflowAndBoundingMetrics(borderPadding, aDesiredStretchSize,
                                     mBoundingMetrics);
diff --git a/layout/mathml/nsMathMLmpaddedFrame.cpp b/layout/mathml/nsMathMLmpaddedFrame.cpp
index 4ea75749fd421..1a5777a238b5a 100644
--- a/layout/mathml/nsMathMLmpaddedFrame.cpp
+++ b/layout/mathml/nsMathMLmpaddedFrame.cpp
@@ -286,8 +286,9 @@ nsresult nsMathMLmpaddedFrame::Place(DrawTarget* aDrawTarget,
                                      const PlaceFlags& aFlags,
                                      ReflowOutput& aDesiredSize) {
   // First perform normal row layout without border/padding.
-  PlaceFlags flags =
-      aFlags + PlaceFlag::MeasureOnly + PlaceFlag::IgnoreBorderPadding;
+  PlaceFlags flags = aFlags + PlaceFlag::MeasureOnly +
+                     PlaceFlag::IgnoreBorderPadding +
+                     PlaceFlag::DoNotAdjustForWidthAndHeight;
   nsresult rv = nsMathMLContainerFrame::Place(aDrawTarget, flags, aDesiredSize);
   if (NS_FAILED(rv)) {
     DidReflowChildren(PrincipalChildList().FirstChild());
@@ -388,6 +389,11 @@ nsresult nsMathMLmpaddedFrame::Place(DrawTarget* aDrawTarget,
   mBoundingMetrics.descent = depth;
   aDesiredSize.mBoundingMetrics = mBoundingMetrics;
 
+  // Apply width/height to math content box.
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(aFlags);
+  dx += ApplyAdjustmentForWidthAndHeight(aFlags, sizes, aDesiredSize,
+                                         mBoundingMetrics);
+
   // Add padding+border.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
diff --git a/layout/mathml/nsMathMLmrootFrame.cpp b/layout/mathml/nsMathMLmrootFrame.cpp
index b2744dc875209..8fe79a37a726e 100644
--- a/layout/mathml/nsMathMLmrootFrame.cpp
+++ b/layout/mathml/nsMathMLmrootFrame.cpp
@@ -180,8 +180,9 @@ nsresult nsMathMLmrootFrame::Place(DrawTarget* aDrawTarget,
   } else {
     // Format our content as an mrow without border/padding to obtain the
     // square root base. The metrics/frame for the index are ignored.
-    PlaceFlags flags =
-        aFlags + PlaceFlag::MeasureOnly + PlaceFlag::IgnoreBorderPadding;
+    PlaceFlags flags = aFlags + PlaceFlag::MeasureOnly +
+                       PlaceFlag::IgnoreBorderPadding +
+                       PlaceFlag::DoNotAdjustForWidthAndHeight;
     nsresult rv = nsMathMLContainerFrame::Place(aDrawTarget, flags, baseSize);
     if (NS_FAILED(rv)) {
       DidReflowChildren(PrincipalChildList().FirstChild());
@@ -317,6 +318,12 @@ nsresult nsMathMLmrootFrame::Place(DrawTarget* aDrawTarget,
 
   aDesiredSize.mBoundingMetrics = mBoundingMetrics;
 
+  // Apply width/height to math content box.
+  const PlaceFlags flags;
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(flags);
+  nscoord shiftX = ApplyAdjustmentForWidthAndHeight(flags, sizes, aDesiredSize,
+                                                    mBoundingMetrics);
+
   // Add padding+border around the final layout.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
@@ -360,7 +367,7 @@ nsresult nsMathMLmrootFrame::Place(DrawTarget* aDrawTarget,
                         MirrorIfRTL(aDesiredSize.Width(), baseSize.Width(), dx),
                         dy, ReflowChildFlags::Default);
     } else {
-      nscoord dx_left = borderPadding.left;
+      nscoord dx_left = borderPadding.left + shiftX;
       if (!isRTL) {
         dx_left += bmSqr.width;
       }
diff --git a/layout/mathml/nsMathMLmspaceFrame.cpp b/layout/mathml/nsMathMLmspaceFrame.cpp
index 1bf9f70ba0c20..ed4945ed4605c 100644
--- a/layout/mathml/nsMathMLmspaceFrame.cpp
+++ b/layout/mathml/nsMathMLmspaceFrame.cpp
@@ -113,6 +113,12 @@ nsresult nsMathMLmspaceFrame::Place(DrawTarget* aDrawTarget,
   // Also return our bounding metrics
   aDesiredSize.mBoundingMetrics = mBoundingMetrics;
 
+  // Apply width/height to math content box.
+  const PlaceFlags flags;
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(flags);
+  ApplyAdjustmentForWidthAndHeight(flags, sizes, aDesiredSize,
+                                   mBoundingMetrics);
+
   // Add padding+border.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
diff --git a/layout/mathml/nsMathMLmunderoverFrame.cpp b/layout/mathml/nsMathMLmunderoverFrame.cpp
index 0b532b0ec3ba4..315fa8e73cd5e 100644
--- a/layout/mathml/nsMathMLmunderoverFrame.cpp
+++ b/layout/mathml/nsMathMLmunderoverFrame.cpp
@@ -685,6 +685,14 @@ nsresult nsMathMLmunderoverFrame::Place(DrawTarget* aDrawTarget,
   aDesiredSize.Width() = mBoundingMetrics.width;
   aDesiredSize.mBoundingMetrics = mBoundingMetrics;
 
+  // Apply width/height to math content box.
+  auto sizes = GetWidthAndHeightForPlaceAdjustment(aFlags);
+  auto shiftX = ApplyAdjustmentForWidthAndHeight(aFlags, sizes, aDesiredSize,
+                                                 mBoundingMetrics);
+  dxOver += shiftX;
+  dxBase += shiftX;
+  dxUnder += shiftX;
+
   // Add padding+border.
   auto borderPadding = GetBorderPaddingForPlace(aFlags);
   InflateReflowAndBoundingMetrics(borderPadding, aDesiredSize,
@@ -719,3 +727,10 @@ nsresult nsMathMLmunderoverFrame::Place(DrawTarget* aDrawTarget,
   }
   return NS_OK;
 }
+
+bool nsMathMLmunderoverFrame::IsMathContentBoxHorizontallyCentered() const {
+  bool subsupDisplay =
+      NS_MATHML_EMBELLISH_IS_MOVABLELIMITS(mEmbellishData.flags) &&
+      StyleFont()->mMathStyle == StyleMathStyle::Compact;
+  return !subsupDisplay;
+}
diff --git a/layout/mathml/nsMathMLmunderoverFrame.h b/layout/mathml/nsMathMLmunderoverFrame.h
index 39de194177304..74e561e3ef2a5 100644
--- a/layout/mathml/nsMathMLmunderoverFrame.h
+++ b/layout/mathml/nsMathMLmunderoverFrame.h
@@ -58,6 +58,8 @@ class nsMathMLmunderoverFrame final : public nsMathMLContainerFrame,
   virtual ~nsMathMLmunderoverFrame();
 
  private:
+  bool IsMathContentBoxHorizontallyCentered() const final;
+
   // Helper to set the "increment script level" flag on the element belonging
   // to a child frame given by aChildIndex.
   //
diff --git a/testing/web-platform/meta/mathml/presentation-markup/fractions/frac-bar-003.html.ini b/testing/web-platform/meta/mathml/presentation-markup/fractions/frac-bar-003.html.ini
deleted file mode 100644
index cb8fdddf30e3b..0000000000000
--- a/testing/web-platform/meta/mathml/presentation-markup/fractions/frac-bar-003.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[frac-bar-003.html]
-  expected: FAIL
diff --git a/testing/web-platform/meta/mathml/presentation-markup/spaces/mspace-width-height-001.html.ini b/testing/web-platform/meta/mathml/presentation-markup/spaces/mspace-width-height-001.html.ini
deleted file mode 100644
index e3a885f287ba2..0000000000000
--- a/testing/web-platform/meta/mathml/presentation-markup/spaces/mspace-width-height-001.html.ini
+++ /dev/null
@@ -1,12 +0,0 @@
-[mspace-width-height-001.html]
-  [width attribute + width property]
-    expected: FAIL
-
-  [height/depth attributes + height property]
-    expected: FAIL
-
-  [height attribute + height property]
-    expected: FAIL
-
-  [depth attribute + height property]
-    expected: FAIL
diff --git a/testing/web-platform/meta/mathml/relations/css-styling/display-2.html.ini b/testing/web-platform/meta/mathml/relations/css-styling/display-2.html.ini
index 36307d8db761c..0ad2a6eaabcf1 100644
--- a/testing/web-platform/meta/mathml/relations/css-styling/display-2.html.ini
+++ b/testing/web-platform/meta/mathml/relations/css-styling/display-2.html.ini
@@ -4,10 +4,10 @@
     expected: FAIL
 
   [list display inside display block]
-    expected: FAIL
+    expected: [PASS, FAIL]
 
   [flexbox display (math)]
-    expected: FAIL
+    expected: [PASS, FAIL]
 
   [block display with column width (math)]
     expected: FAIL
diff --git a/testing/web-platform/meta/mathml/relations/css-styling/width-height-001.html.ini b/testing/web-platform/meta/mathml/relations/css-styling/width-height-001.html.ini
deleted file mode 100644
index 1ef59a2119004..0000000000000
--- a/testing/web-platform/meta/mathml/relations/css-styling/width-height-001.html.ini
+++ /dev/null
@@ -1,144 +0,0 @@
-[width-height-001.html]
-  [width and height properties on maction]
-    expected: FAIL
-
-  [inline-size and block-size properties on maction]
-    expected: FAIL
-
-  [width and height properties on menclose]
-    expected: FAIL
-
-  [inline-size and block-size properties on menclose]
-    expected: FAIL
-
-  [width and height properties on merror]
-    expected: FAIL
-
-  [inline-size and block-size properties on merror]
-    expected: FAIL
-
-  [width and height properties on mfrac]
-    expected: FAIL
-
-  [inline-size and block-size properties on mfrac]
-    expected: FAIL
-
-  [width and height properties on mi]
-    expected: FAIL
-
-  [inline-size and block-size properties on mi]
-    expected: FAIL
-
-  [width and height properties on mmultiscripts]
-    expected: FAIL
-
-  [inline-size and block-size properties on mmultiscripts]
-    expected: FAIL
-
-  [width and height properties on mn]
-    expected: FAIL
-
-  [inline-size and block-size properties on mn]
-    expected: FAIL
-
-  [width and height properties on mo]
-    expected: FAIL
-
-  [inline-size and block-size properties on mo]
-    expected: FAIL
-
-  [width and height properties on mover]
-    expected: FAIL
-
-  [inline-size and block-size properties on mover]
-    expected: FAIL
-
-  [width and height properties on mpadded]
-    expected: FAIL
-
-  [inline-size and block-size properties on mpadded]
-    expected: FAIL
-
-  [width and height properties on mphantom]
-    expected: FAIL
-
-  [inline-size and block-size properties on mphantom]
-    expected: FAIL
-
-  [width and height properties on mroot]
-    expected: FAIL
-
-  [inline-size and block-size properties on mroot]
-    expected: FAIL
-
-  [width and height properties on mrow]
-    expected: FAIL
-
-  [inline-size and block-size properties on mrow]
-    expected: FAIL
-
-  [width and height properties on ms]
-    expected: FAIL
-
-  [inline-size and block-size properties on ms]
-    expected: FAIL
-
-  [width and height properties on mspace]
-    expected: FAIL
-
-  [inline-size and block-size properties on mspace]
-    expected: FAIL
-
-  [width and height properties on msqrt]
-    expected: FAIL
-
-  [inline-size and block-size properties on msqrt]
-    expected: FAIL
-
-  [width and height properties on mstyle]
-    expected: FAIL
-
-  [inline-size and block-size properties on mstyle]
-    expected: FAIL
-
-  [width and height properties on msub]
-    expected: FAIL
-
-  [inline-size and block-size properties on msub]
-    expected: FAIL
-
-  [width and height properties on msubsup]
-    expected: FAIL
-
-  [inline-size and block-size properties on msubsup]
-    expected: FAIL
-
-  [width and height properties on msup]
-    expected: FAIL
-
-  [inline-size and block-size properties on msup]
-    expected: FAIL
-
-  [width and height properties on mtext]
-    expected: FAIL
-
-  [inline-size and block-size properties on mtext]
-    expected: FAIL
-
-  [width and height properties on munder]
-    expected: FAIL
-
-  [inline-size and block-size properties on munder]
-    expected: FAIL
-
-  [width and height properties on munderover]
-    expected: FAIL
-
-  [inline-size and block-size properties on munderover]
-    expected: FAIL
-
-  [width and height properties on semantics]
-    expected: FAIL
-
-  [inline-size and block-size properties on semantics]
-    expected: FAIL
diff --git a/testing/web-platform/meta/mathml/relations/css-styling/width-height-002.html.ini b/testing/web-platform/meta/mathml/relations/css-styling/width-height-002.html.ini
deleted file mode 100644
index d3eb160860f94..0000000000000
--- a/testing/web-platform/meta/mathml/relations/css-styling/width-height-002.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[width-height-002.html]
-  expected: FAIL
diff --git a/testing/web-platform/meta/mathml/relations/css-styling/width-height-003.html.ini b/testing/web-platform/meta/mathml/relations/css-styling/width-height-003.html.ini
deleted file mode 100644
index 5cb8938fd85de..0000000000000
--- a/testing/web-platform/meta/mathml/relations/css-styling/width-height-003.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[width-height-003.html]
-  expected: FAIL
diff --git a/testing/web-platform/meta/mathml/relations/css-styling/width-height-005.html.ini b/testing/web-platform/meta/mathml/relations/css-styling/width-height-005.html.ini
new file mode 100644
index 0000000000000..998cbcca6d999
--- /dev/null
+++ b/testing/web-platform/meta/mathml/relations/css-styling/width-height-005.html.ini
@@ -0,0 +1,6 @@
+[width-height-005.html]
+  [RTL mmultiscripts]
+    expected: FAIL # Bug 1909417
+
+  [RTL mmultiscripts (horizontal overflow)]
+    expected: FAIL # Bug 1909417
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
index 2deedc3f0b84d..57cbc1b0ab278 100644
--- 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
@@ -4,7 +4,7 @@
 <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.">
+<meta name="assert" content="Verify that width, height, inline-size and block-size properties set the size of the content box.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/mathml/support/feature-detection.js"></script>
@@ -30,6 +30,7 @@
         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);
+        FragmentHelper.forceNonEmptyDescendants(element);
 
         test(function() {
             assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
@@ -49,6 +50,35 @@
             assert_approx_equals(box.height, 700, epsilon, "height");
         }, `inline-size and block-size properties on ${tag}`);
 
+        // Test that if we specify a size smaller than the content, then
+        // it is used too. Note that we skip mtable, which follows CSS
+        // tables rules and behave differently in that case.
+        if (tag != "mtable") {
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                var style = `width: 2px; height: 1px;`;
+                element.setAttribute("style", style);
+                let box = element.getBoundingClientRect();
+                assert_approx_equals(box.width, 2, epsilon, "width");
+                assert_approx_equals(box.height, 1, epsilon, "height");
+            }, `width and height properties on ${tag} (content overflowing)`);
+        }
+
+        div.style = "display: none;"; // Hide the div after measurement.
+
+        document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><div style="display: inline-block"><math><mrow>${MathMLFragments[tag]}</mrow></math></div></div>`);
+        let shrinkWrapDiv = document.body.lastElementChild.firstElementChild;
+        element = FragmentHelper.element(shrinkWrapDiv.firstElementChild);
+        FragmentHelper.forceNonEmptyDescendants(element);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var style = `width: 300px;`;
+            element.setAttribute("style", style);
+            let box = shrinkWrapDiv.getBoundingClientRect();
+            assert_approx_equals(box.width, 300, epsilon);
+        }, `width property on ${tag} (preferred width)`);
+
         div.style = "display: none;"; // Hide the div after measurement.
     }
 
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
index 10ece249ca0b5..e26ebe9682328 100644
--- 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
@@ -20,7 +20,6 @@
   }
   [data-name] {
       width: 7em;
-      height: 3em;
       border: 1px solid blue;
   }
 </style>
@@ -64,6 +63,18 @@
         <mtext>X</mtext>
       </mfrac>
     </math>
+    <math>
+      <mfrac data-name="mfrac (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </mfrac>
+    </math>
+    <math dir="rtl">
+      <mfrac data-name="RTL mfrac (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </mfrac>
+    </math>
   </div>
 
   <div class="test">
@@ -79,6 +90,18 @@
         <mtext>X</mtext>
       </mfrac>
     </math>
+    <math>
+      <mfrac linethickness="0" data-name="mfrac without bar (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </mfrac>
+    </math>
+    <math dir="rtl">
+      <mfrac linethickness="0" data-name="RTL mfrac without bar (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </mfrac>
+    </math>
   </div>
 
   <div class="test">
@@ -94,6 +117,18 @@
         <mtext>X</mtext>
       </munder>
     </math>
+    <math>
+      <munder data-name="munder (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </munder>
+    </math>
+    <math dir="rtl">
+      <munder data-name="RTL munder (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </munder>
+    </math>
   </div>
 
   <div class="test">
@@ -109,6 +144,18 @@
         <mtext>X</mtext>
       </mover>
     </math>
+    <math>
+      <mover data-name="mover (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </mover>
+    </math>
+    <math dir="rtl">
+      <mover data-name="RTL mover (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </mover>
+    </math>
   </div>
 
   <div class="test">
@@ -126,6 +173,20 @@
         <mtext>X</mtext>
       </munderover>
     </math>
+    <math>
+      <munderover data-name="munderover (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </munderover>
+    </math>
+    <math dir="rtl">
+      <munderover data-name="RTL munderover (horizontal overflow)">
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+        <mtext>XXXXXXXXXXXX</mtext>
+      </munderover>
+    </math>
   </div>
 
 </body>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-005.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-005.html
new file mode 100644
index 0000000000000..a6ea8d82deb90
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-005.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>content position with width/height</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify the inline-start of the children of the misc 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>
+  mn, .text {
+      font: 25px/1 Ahem;
+      color: black;
+  }
+  .test {
+      margin: .5em;
+  }
+  .reference, [data-name] {
+      border: 1px solid blue;
+      margin: 1em;
+  }
+</style>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+      Array.from(document.getElementsByClassName("test")).forEach(div => {
+          const reference = div.getElementsByClassName("reference")[0];
+          Array.from(div.querySelectorAll("[data-name]")).forEach(element => {
+              test(() => {
+                  const rtl = getComputedStyle(element).direction == 'ltr';
+                  const referenceBox = reference.getBoundingClientRect();
+                  const elementBox = element.getBoundingClientRect();
+                  const epsilon = 1;
+                  assert_greater_than(Math.abs(elementBox.width - referenceBox.width), epsilon, `width is modified`);
+                  assert_approx_equals(elementBox.height, referenceBox.height, epsilon, `height is preserved`);
+                  for (let i = 0; i < element.children.length; i++) {
+                      const referenceChildBox = reference.children[i].getBoundingClientRect();
+                      const childBox = element.children[i].getBoundingClientRect();
+                      const description = `horizontal position of child ${i}`;
+                      if (rtl) {
+                          assert_approx_equals(childBox.left - elementBox.left, referenceChildBox.left - referenceBox.left, epsilon, description);
+                      } else {
+                          assert_approx_equals(childBox.right - elementBox.right, referenceChildBox.right - referenceBox.right, epsilon, description);
+                      }
+                  }
+              }, element.dataset.name);
+          });
+      });
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+
+  <div class="test">
+    <math>
+      <mrow class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+    <math>
+      <mrow data-name="mrow" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+    <math>
+      <mrow data-name="mrow (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <mrow class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+    <math dir="rtl">
+      <mrow data-name="RTL mrow" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+    <math dir="rtl">
+      <mrow data-name="RTL mrow (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mpadded lspace=".5em" voffset="-1em" class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+    <math>
+      <mpadded lspace=".5em" voffset="-1em" data-name="mpadded" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+    <math>
+      <mpadded lspace=".5em" voffset="-1em" data-name="mpadded (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <mpadded lspace=".5em" voffset="-1em" class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+    <math dir="rtl">
+      <mpadded lspace=".5em" voffset="-1em" data-name="RTL mpadded" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+    <math dir="rtl">
+      <mpadded lspace=".5em" voffset="-1em" data-name="RTL mpadded (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msqrt class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+    <math>
+      <msqrt data-name="msqrt" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+    <math>
+      <msqrt data-name="msqrt (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <msqrt class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+    <math dir="rtl">
+      <msqrt data-name="RTL msqrt" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+    <math dir="rtl">
+      <msqrt data-name="RTL msqrt (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mroot class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+    <math>
+      <mroot data-name="mroot" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+    <math>
+      <mroot data-name="mroot (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <mroot class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+    <math dir="rtl">
+      <mroot data-name="RTL mroot" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+    <math dir="rtl">
+      <mroot data-name="RTL mroot (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msub class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+    <math>
+      <msub data-name="msub" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+    <math>
+      <msub data-name="msub (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <msub class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+    <math dir="rtl">
+      <msub data-name="RTL msub" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+    <math dir="rtl">
+      <msub data-name="RTL msub (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msup class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+    <math>
+      <msup data-name="msup" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+    <math>
+      <msup data-name="msup (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <msup class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+    <math dir="rtl">
+      <msup data-name="RTL msup" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+    <math dir="rtl">
+      <msup data-name="RTL msup (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <msubsup class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+    <math>
+      <msubsup data-name="msubsup" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+    <math>
+      <msubsup data-name="msubsup (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <msubsup class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+    <math dir="rtl">
+      <msubsup data-name="RTL msubsup" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+    <math dir="rtl">
+      <msubsup data-name="RTL msubsup (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mmultiscripts class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+    <math>
+      <mmultiscripts data-name="mmultiscripts" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+    <math>
+      <mmultiscripts data-name="mmultiscripts (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <mmultiscripts class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+    <math dir="rtl">
+      <mmultiscripts data-name="RTL mmultiscripts" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+    <math dir="rtl">
+      <mmultiscripts data-name="RTL mmultiscripts (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mtext class="reference">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+    <math>
+      <mtext data-name="mtext" style="width: 10em">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+    <math>
+      <mtext data-name="mtext (horizontal overflow)" style="width: 1em">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <mtext class="reference">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+    <math dir="rtl">
+      <mtext data-name="RTL mtext" style="width: 10em">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+    <math dir="rtl">
+      <mtext data-name="RTL mtext (horizontal overflow)" style="width: 1em">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <menclose class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+    <math>
+      <menclose data-name="legacy menclose" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+    <math>
+      <menclose data-name="legacy menclose (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+  </div>
+
+  <div class="test" dir="rtl">
+    <math dir="rtl">
+      <menclose class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+    <math dir="rtl">
+      <menclose data-name="RTL legacy menclose" style="width: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+    <math dir="rtl">
+      <menclose data-name="RTL legacy menclose (horizontal overflow)" style="width: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-006.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-006.html
new file mode 100644
index 0000000000000..d5427051974a0
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-006.html
@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>content position with width/height</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify the block-start of the children for misc 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>
+  mn, .text {
+      font: 25px/1 Ahem;
+      color: black;
+  }
+  .test {
+      margin: .5em;
+  }
+  .reference, [data-name] {
+      border: 1px solid blue;
+      margin: 1em;
+  }
+</style>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function getBaseLine(element) {
+      return element.parentNode.getElementsByClassName("baseline")[0].getBoundingClientRect().bottom;
+  }
+
+  function runTests() {
+      Array.from(document.getElementsByClassName("test")).forEach(div => {
+          const reference = div.getElementsByClassName("reference")[0];
+          Array.from(div.querySelectorAll("[data-name]")).forEach(element => {
+              test(() => {
+                  const referenceBox = reference.getBoundingClientRect();
+                  const elementBox = element.getBoundingClientRect();
+                  const epsilon = 1;
+                  assert_approx_equals(elementBox.width, referenceBox.width, epsilon, `width is preserved`);
+                  assert_greater_than(Math.abs(elementBox.height - referenceBox.height), epsilon, `height is modified`);
+                  assert_approx_equals(getBaseLine(element) - elementBox.top, getBaseLine(reference) - referenceBox.top, epsilon, `baseline is preserved`);
+                  for (let i = 0; i < element.children.length; i++) {
+                      const referenceChildBox = reference.children[i].getBoundingClientRect();
+                      const childBox = element.children[i].getBoundingClientRect();
+                      assert_approx_equals(childBox.top - elementBox.top, referenceChildBox.top - referenceBox.top, epsilon, `vertical position of child ${i}`);
+                  }
+              }, element.dataset.name);
+          });
+      });
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mrow class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mrow data-name="mrow" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mrow data-name="mrow (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mrow>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mpadded lspace=".5em" voffset="-1em" class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mpadded lspace=".5em" voffset="-1em" data-name="mpadded" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mpadded lspace=".5em" voffset="-1em" data-name="mpadded (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mpadded>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msqrt class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msqrt data-name="msqrt" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msqrt data-name="msqrt (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msqrt>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mroot class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mroot data-name="mroot" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mroot data-name="mroot (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mroot>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <munder class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </munder>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <munder data-name="munder" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </munder>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <munder data-name="munder (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </munder>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mover class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mover>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mover data-name="mover" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mover>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mover data-name="mover (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </mover>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <munderover class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </munderover>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <munderover data-name="munderover" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </munderover>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <munderover data-name="munderover (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </munderover>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msub class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msub data-name="msub" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msub data-name="msub (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msub>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msup class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msup data-name="msup" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msup data-name="msup (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+      </msup>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msubsup class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msubsup data-name="msubsup" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <msubsup data-name="msubsup (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </msubsup>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mmultiscripts class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mmultiscripts data-name="mmultiscripts" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mmultiscripts data-name="mmultiscripts (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+        <mprescripts/>
+        <mn>X</mn>
+        <mn>X</mn>
+      </mmultiscripts>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mtext class="reference">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mtext data-name="mtext" style="height: 10em">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <mtext data-name="mtext (vertical overflow)" style="height: 1em">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+        <span class="text">X</span class="text">
+      </mtext>
+    </math>
+  </div>
+
+  <div class="test">
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <menclose class="reference">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <menclose data-name="legacy menclose" style="height: 10em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+    <math>
+      <mspace class="baseline" width="1em" height="1px" style="background: black"/>
+      <menclose data-name="legacy menclose (vertical overflow)" style="height: 1em">
+        <mn>X</mn>
+        <mn>X</mn>
+        <mn>X</mn>
+      </menclose>
+    </math>
+  </div>
+
+</body>
+</html>