Backed out 8 changesets (bug 1311244) for OOM failures in Win7 debug R1
authorPhil Ringnalda <philringnalda@gmail.com>
Sun, 08 Jan 2017 21:11:25 -0800
changeset 328488 68c4261192aceca8deb4db9d50d5c65b3f0bf5b3
parent 328487 c273666082fac0829db0ec585247dc8914abab61
child 328489 b1576b5adad1ca5a1e3ad8c6c8cfb951de19087e
push id31174
push usercbook@mozilla.com
push dateMon, 09 Jan 2017 09:32:17 +0000
treeherdermozilla-central@97896f92f196 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1311244
milestone53.0a1
backs outd5411799a28f247463e45744ab00668c75e57620
ff9c71e1dbc8c11fd5b6bd255e4a947142423c69
96988ec5b81cdf2298ffcdcb407b4826e86a43ea
9d257713833a2f627113c5a0224b295f471704d3
2c33905ccb04ce79efcebc40494cb3cf44b4ad08
20148e33d523e6d1df786f6c1c5e7d2703e7dc84
f36cd1532fdb435c13723cf4804894d821c5fa61
2ee4ea83a6b4e30e4064975ee56ff32ca1aac9ef
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Backed out 8 changesets (bug 1311244) for OOM failures in Win7 debug R1 Backed out changeset d5411799a28f (bug 1311244) Backed out changeset ff9c71e1dbc8 (bug 1311244) Backed out changeset 96988ec5b81c (bug 1311244) Backed out changeset 9d257713833a (bug 1311244) Backed out changeset 2c33905ccb04 (bug 1311244) Backed out changeset 20148e33d523 (bug 1311244) Backed out changeset f36cd1532fdb (bug 1311244) Backed out changeset 2ee4ea83a6b4 (bug 1311244)
layout/base/ShapeUtils.cpp
layout/base/ShapeUtils.h
layout/base/moz.build
layout/base/nsLayoutUtils.cpp
layout/generic/BlockReflowInput.cpp
layout/generic/WritingModes.h
layout/generic/nsFloatManager.cpp
layout/generic/nsFloatManager.h
layout/reftests/w3c-css/submitted/shapes1/reftest.list
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-006.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-007.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-009.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-012.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-013.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-015.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024.html
layout/svg/nsCSSClipPathInstance.cpp
deleted file mode 100644
--- a/layout/base/ShapeUtils.cpp
+++ /dev/null
@@ -1,80 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=8 sts=2 et sw=2 tw=80: */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-#include "mozilla/ShapeUtils.h"
-
-#include <cstdlib>
-
-#include "nsCSSRendering.h"
-#include "nsRuleNode.h"
-#include "nsStyleCoord.h"
-#include "nsStyleStruct.h"
-#include "SVGContentUtils.h"
-
-namespace mozilla {
-
-nscoord
-ShapeUtils::ComputeShapeRadius(const StyleShapeRadius aType,
-                               const nscoord aCenter,
-                               const nscoord aPosMin,
-                               const nscoord aPosMax)
-{
-  nscoord dist1 = std::abs(aPosMin - aCenter);
-  nscoord dist2 = std::abs(aPosMax - aCenter);
-  nscoord length = 0;
-  switch (aType) {
-    case StyleShapeRadius::FarthestSide:
-      length = dist1 > dist2 ? dist1 : dist2;
-      break;
-    case StyleShapeRadius::ClosestSide:
-      length = dist1 > dist2 ? dist2 : dist1;
-      break;
-  }
-  return length;
-}
-
-nsPoint
-ShapeUtils::ComputeCircleOrEllipseCenter(StyleBasicShape* const aBasicShape,
-                                         const nsRect& aRefBox)
-{
-  nsPoint topLeft, anchor;
-  nsSize size(aRefBox.Size());
-  nsImageRenderer::ComputeObjectAnchorPoint(aBasicShape->GetPosition(),
-                                            size, size,
-                                            &topLeft, &anchor);
-  return nsPoint(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
-}
-
-nscoord
-ShapeUtils::ComputeCircleRadius(StyleBasicShape* const aBasicShape,
-                                const nsPoint& aCenter,
-                                const nsRect& aRefBox)
-{
-  const nsTArray<nsStyleCoord>& coords = aBasicShape->Coordinates();
-  MOZ_ASSERT(coords.Length() == 1, "wrong number of arguments");
-  nscoord r = 0;
-  if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
-    const auto styleShapeRadius = coords[0].GetEnumValue<StyleShapeRadius>();
-    nscoord horizontal =
-      ComputeShapeRadius(styleShapeRadius, aCenter.x, aRefBox.x, aRefBox.XMost());
-    nscoord vertical =
-      ComputeShapeRadius(styleShapeRadius, aCenter.y, aRefBox.y, aRefBox.YMost());
-    r = styleShapeRadius == StyleShapeRadius::FarthestSide
-          ? std::max(horizontal, vertical)
-          : std::min(horizontal, vertical);
-  } else {
-    // We resolve percent <shape-radius> value for circle() as defined here:
-    // https://drafts.csswg.org/css-shapes/#funcdef-circle
-    double referenceLength =
-      SVGContentUtils::ComputeNormalizedHypotenuse(aRefBox.width,
-                                                   aRefBox.height);
-    r = nsRuleNode::ComputeCoordPercentCalc(coords[0],
-                                            NSToCoordRound(referenceLength));
-  }
-  return r;
-}
-
-} // namespace mozilla
deleted file mode 100644
--- a/layout/base/ShapeUtils.h
+++ /dev/null
@@ -1,55 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=8 sts=2 et sw=2 tw=80: */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-#ifndef mozilla_ShapeUtils_h
-#define mozilla_ShapeUtils_h
-
-#include "nsCoord.h"
-#include "nsStyleConsts.h"
-
-struct nsPoint;
-struct nsRect;
-
-namespace mozilla {
-class StyleBasicShape;
-
-// ShapeUtils is a namespace class containing utility functions related to
-// processing basic shapes in the CSS Shapes Module.
-// https://drafts.csswg.org/css-shapes/#basic-shape-functions
-//
-struct ShapeUtils final
-{
-  // Compute the length of a keyword <shape-radius>, i.e. closest-side or
-  // farthest-side, for a circle or an ellipse on a single dimension. The
-  // caller needs to call for both dimensions and combine the result.
-  // https://drafts.csswg.org/css-shapes/#typedef-shape-radius.
-  //
-  // @return The length of the radius in app units.
-  static nscoord ComputeShapeRadius(const StyleShapeRadius aType,
-                                    const nscoord aCenter,
-                                    const nscoord aPosMin,
-                                    const nscoord aPosMax);
-
-  // Compute the center of a circle or an ellipse.
-  //
-  // @param aRefBox The reference box of the basic shape.
-  // @return The point of the center.
-  static nsPoint ComputeCircleOrEllipseCenter(
-    StyleBasicShape* const aBasicShape,
-    const nsRect& aRefBox);
-
-  // Compute the radius for a circle.
-  // @param aCenter the center of the circle.
-  // @param aRefBox the reference box of the circle.
-  // @return The length of the radius in app unit.
-  static nscoord ComputeCircleRadius(
-    mozilla::StyleBasicShape* const aBasicShape,
-    const nsPoint& aCenter, const nsRect& aRefBox);
-};
-
-} // namespace mozilla
-
-#endif // mozilla_ShapeUtils_h
--- a/layout/base/moz.build
+++ b/layout/base/moz.build
@@ -75,17 +75,16 @@ EXPORTS.mozilla += [
     'PresShell.h',
     'RestyleLogging.h',
     'RestyleManager.h',
     'RestyleManagerBase.h',
     'RestyleManagerHandle.h',
     'RestyleManagerHandleInlines.h',
     'ServoRestyleManager.h',
     'ServoRestyleManagerInlines.h',
-    'ShapeUtils.h',
     'StaticPresData.h',
 ]
 
 UNIFIED_SOURCES += [
     'AccessibleCaret.cpp',
     'AccessibleCaretEventHub.cpp',
     'AccessibleCaretManager.cpp',
     'FramePropertyTable.cpp',
@@ -110,17 +109,16 @@ UNIFIED_SOURCES += [
     'nsStyleSheetService.cpp',
     'PositionedEventTargeting.cpp',
     'PresShell.cpp',
     'RestyleManager.cpp',
     'RestyleManagerBase.cpp',
     'RestyleTracker.cpp',
     'ScrollbarStyles.cpp',
     'ServoRestyleManager.cpp',
-    'ShapeUtils.cpp',
     'StackArena.cpp',
     'StaticPresData.cpp',
     'TouchManager.cpp',
     'ZoomConstraintsClient.cpp',
 ]
 
 if CONFIG['ENABLE_INTL_API']:
     EXPORTS += [
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -17,17 +17,16 @@
 #include "mozilla/gfx/PathHelpers.h"
 #include "mozilla/layers/PAPZ.h"
 #include "mozilla/Likely.h"
 #include "mozilla/Maybe.h"
 #include "mozilla/MemoryReporting.h"
 #include "mozilla/dom/ContentChild.h"
 #include "mozilla/Unused.h"
 #include "nsCharTraits.h"
-#include "nsDocument.h"
 #include "nsFontMetrics.h"
 #include "nsPresContext.h"
 #include "nsIContent.h"
 #include "nsIDOMHTMLDocument.h"
 #include "nsIDOMHTMLElement.h"
 #include "nsFrameList.h"
 #include "nsGkAtoms.h"
 #include "nsHtml5Atoms.h"
--- a/layout/generic/BlockReflowInput.cpp
+++ b/layout/generic/BlockReflowInput.cpp
@@ -983,18 +983,19 @@ BlockReflowInput::FlowAndPlaceFloat(nsIF
     nsFloatManager::CalculateRegionFor(wm, aFloat, floatMargin,
                                        ContainerSize());
   // if the float split, then take up all of the vertical height
   if (NS_FRAME_IS_NOT_COMPLETE(reflowStatus) &&
       (NS_UNCONSTRAINEDSIZE != ContentBSize())) {
     region.BSize(wm) = std::max(region.BSize(wm),
                                 ContentBSize() - floatPos.B(wm));
   }
-  mFloatManager->AddFloat(aFloat, region, wm, ContainerSize());
-
+  DebugOnly<nsresult> rv = mFloatManager->AddFloat(aFloat, region, wm,
+                                                   ContainerSize());
+  MOZ_ASSERT(NS_SUCCEEDED(rv), "bad float placement");
   // store region
   nsFloatManager::StoreRegionFor(wm, aFloat, region, ContainerSize());
 
   // If the float's dimensions have changed, note the damage in the
   // float manager.
   if (!region.IsEqualEdges(oldRegion)) {
     // XXXwaterson conservative: we could probably get away with noting
     // less damage; e.g., if only height has changed, then only note the
--- a/layout/generic/WritingModes.h
+++ b/layout/generic/WritingModes.h
@@ -779,26 +779,16 @@ public:
     CHECK_WRITING_MODE(aWritingMode);
     return mPoint.x;
   }
   nscoord B(WritingMode aWritingMode) const // block-axis
   {
     CHECK_WRITING_MODE(aWritingMode);
     return mPoint.y;
   }
-  nscoord LineRelative(WritingMode aWritingMode,
-                       const nsSize& aContainerSize) const // line-axis
-  {
-    CHECK_WRITING_MODE(aWritingMode);
-    if (aWritingMode.IsBidiLTR()) {
-      return I();
-    }
-    return (aWritingMode.IsVertical() ? aContainerSize.height
-                                      : aContainerSize.width) - I();
-  }
 
   /**
    * These non-const accessors return a reference (lvalue) that can be
    * assigned to by callers.
    */
   nscoord& I(WritingMode aWritingMode) // inline-axis
   {
     CHECK_WRITING_MODE(aWritingMode);
--- a/layout/generic/nsFloatManager.cpp
+++ b/layout/generic/nsFloatManager.cpp
@@ -5,17 +5,16 @@
 
 /* class that manages rules for positioning floats */
 
 #include "nsFloatManager.h"
 
 #include <algorithm>
 
 #include "mozilla/ReflowInput.h"
-#include "mozilla/ShapeUtils.h"
 #include "nsBlockFrame.h"
 #include "nsError.h"
 #include "nsIPresShell.h"
 #include "nsMemory.h"
 
 using namespace mozilla;
 
 int32_t nsFloatManager::sCachedFloatManagerCount = 0;
@@ -183,17 +182,17 @@ nsFloatManager::GetFlowArea(WritingMode 
   // the list or we're above |blockStart|.
   bool haveFloats = false;
   for (uint32_t i = floatCount; i > 0; --i) {
     const FloatInfo &fi = mFloats[i-1];
     if (fi.mLeftBEnd <= blockStart && fi.mRightBEnd <= blockStart) {
       // There aren't any more floats that could intersect this band.
       break;
     }
-    if (fi.IsEmpty(aShapeType)) {
+    if (fi.IsEmpty()) {
       // For compatibility, ignore floats with empty rects, even though it
       // disagrees with the spec.  (We might want to fix this in the
       // future, though.)
       continue;
     }
 
     nscoord floatBStart = fi.BStart(aShapeType);
     nscoord floatBEnd = fi.BEnd(aShapeType);
@@ -257,17 +256,17 @@ nsFloatManager::GetFlowArea(WritingMode 
                         ? lineLeft - mLineLeft
                         : mLineLeft - lineRight +
                           LogicalSize(aWM, aContainerSize).ISize(aWM);
 
   return nsFlowAreaRect(aWM, inlineStart, blockStart - mBlockStart,
                         lineRight - lineLeft, blockSize, haveFloats);
 }
 
-void
+nsresult
 nsFloatManager::AddFloat(nsIFrame* aFloatFrame, const LogicalRect& aMarginRect,
                          WritingMode aWM, const nsSize& aContainerSize)
 {
   CHECK_BLOCK_AND_LINE_DIR(aWM);
   NS_ASSERTION(aMarginRect.ISize(aWM) >= 0, "negative inline size!");
   NS_ASSERTION(aMarginRect.BSize(aWM) >= 0, "negative block size!");
 
   FloatInfo info(aFloatFrame, mLineLeft, mBlockStart, aMarginRect, aWM,
@@ -286,17 +285,20 @@ nsFloatManager::AddFloat(nsIFrame* aFloa
   MOZ_ASSERT(floatStyle == StyleFloat::Left || floatStyle == StyleFloat::Right,
              "Unexpected float style!");
   nscoord& sideBEnd =
     floatStyle == StyleFloat::Left ? info.mLeftBEnd : info.mRightBEnd;
   nscoord thisBEnd = info.BEnd();
   if (thisBEnd > sideBEnd)
     sideBEnd = thisBEnd;
 
-  mFloats.AppendElement(Move(info));
+  if (!mFloats.AppendElement(info))
+    return NS_ERROR_OUT_OF_MEMORY;
+
+  return NS_OK;
 }
 
 // static
 LogicalRect
 nsFloatManager::CalculateRegionFor(WritingMode          aWM,
                                    nsIFrame*            aFloat,
                                    const LogicalMargin& aMargin,
                                    const nsSize&        aContainerSize)
@@ -524,155 +526,16 @@ nsFloatManager::ClearContinues(StyleClea
           (aBreakType == StyleClear::Both ||
            aBreakType == StyleClear::Left)) ||
          ((mPushedRightFloatPastBreak || mSplitRightFloatAcrossBreak) &&
           (aBreakType == StyleClear::Both ||
            aBreakType == StyleClear::Right));
 }
 
 /////////////////////////////////////////////////////////////////////////////
-// BoxShapeInfo
-
-nscoord
-nsFloatManager::BoxShapeInfo::LineLeft(WritingMode aWM,
-                                       const nscoord aBStart,
-                                       const nscoord aBEnd) const
-{
-  nscoord radii[8];
-  bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
-
-  if (!hasRadii) {
-    return mShapeBoxRect.x;
-  }
-
-  // Get the physical side for line-left since border-radii are in
-  // the physical axis.
-  mozilla::Side lineLeftSide =
-    aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirLeft));
-  nscoord blockStartCornerRadiusL =
-    radii[SideToHalfCorner(lineLeftSide, true, false)];
-  nscoord blockStartCornerRadiusB =
-    radii[SideToHalfCorner(lineLeftSide, true, true)];
-  nscoord blockEndCornerRadiusL =
-    radii[SideToHalfCorner(lineLeftSide, false, false)];
-  nscoord blockEndCornerRadiusB =
-    radii[SideToHalfCorner(lineLeftSide, false, true)];
-
-  if (aWM.IsLineInverted()) {
-    // This happens only when aWM is vertical-lr. Need to swap blockStart
-    // and blockEnd corners.
-    std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
-    std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
-  }
-
-  nscoord lineLeftDiff =
-    ComputeEllipseLineInterceptDiff(
-      mShapeBoxRect.y, mShapeBoxRect.YMost(),
-      blockStartCornerRadiusL, blockStartCornerRadiusB,
-      blockEndCornerRadiusL, blockEndCornerRadiusB,
-      aBStart, aBEnd);
-  return mShapeBoxRect.x + lineLeftDiff;
-}
-
-nscoord
-nsFloatManager::BoxShapeInfo::LineRight(WritingMode aWM,
-                                        const nscoord aBStart,
-                                        const nscoord aBEnd) const
-{
-  nscoord radii[8];
-  bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
-
-  if (!hasRadii) {
-    return mShapeBoxRect.XMost();
-  }
-
-  // Get the physical side for line-right since border-radii are in
-  // the physical axis.
-  mozilla::Side lineRightSide =
-    aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirRight));
-  nscoord blockStartCornerRadiusL =
-    radii[SideToHalfCorner(lineRightSide, false, false)];
-  nscoord blockStartCornerRadiusB =
-    radii[SideToHalfCorner(lineRightSide, false, true)];
-  nscoord blockEndCornerRadiusL =
-    radii[SideToHalfCorner(lineRightSide, true, false)];
-  nscoord blockEndCornerRadiusB =
-    radii[SideToHalfCorner(lineRightSide, true, true)];
-
-  if (aWM.IsLineInverted()) {
-    // This happens only when aWM is vertical-lr. Need to swap blockStart
-    // and blockEnd corners.
-    std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
-    std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
-  }
-
-  nscoord lineRightDiff =
-    ComputeEllipseLineInterceptDiff(
-      mShapeBoxRect.y, mShapeBoxRect.YMost(),
-      blockStartCornerRadiusL, blockStartCornerRadiusB,
-      blockEndCornerRadiusL, blockEndCornerRadiusB,
-      aBStart, aBEnd);
-  return mShapeBoxRect.XMost() - lineRightDiff;
-}
-
-/////////////////////////////////////////////////////////////////////////////
-// CircleShapeInfo
-
-nsFloatManager::CircleShapeInfo::CircleShapeInfo(
-  StyleBasicShape* const aBasicShape,
-  nscoord aLineLeft,
-  nscoord aBlockStart,
-  const LogicalRect& aShapeBoxRect,
-  WritingMode aWM,
-  const nsSize& aContainerSize)
-{
-  // Use physical coordinates to compute the center of the circle() since
-  // the <position> keywords such as 'left', 'top', etc. are physical.
-  // https://drafts.csswg.org/css-shapes-1/#funcdef-circle
-  nsRect physicalShapeBoxRect =
-    aShapeBoxRect.GetPhysicalRect(aWM, aContainerSize);
-  nsPoint physicalCenter =
-    ShapeUtils::ComputeCircleOrEllipseCenter(aBasicShape, physicalShapeBoxRect);
-  mRadius =
-    ShapeUtils::ComputeCircleRadius(aBasicShape, physicalCenter,
-                                    physicalShapeBoxRect);
-
-  // Convert the coordinate space back to the same as FloatInfo::mRect.
-  // mCenter.x is in the line-axis of the frame manager and mCenter.y are in
-  // the frame manager's real block-axis.
-  LogicalPoint logicalCenter(aWM, physicalCenter, aContainerSize);
-  mCenter = nsPoint(logicalCenter.LineRelative(aWM, aContainerSize) + aLineLeft,
-                    logicalCenter.B(aWM) + aBlockStart);
-}
-
-nscoord
-nsFloatManager::CircleShapeInfo::LineLeft(WritingMode aWM,
-                                          const nscoord aBStart,
-                                          const nscoord aBEnd) const
-{
-  nscoord lineLeftDiff =
-    ComputeEllipseLineInterceptDiff(mCenter.y - mRadius, mCenter.y + mRadius,
-                                    mRadius, mRadius, mRadius, mRadius,
-                                    aBStart, aBEnd);
-  return mCenter.x - mRadius + lineLeftDiff;
-}
-
-nscoord
-nsFloatManager::CircleShapeInfo::LineRight(WritingMode aWM,
-                                           const nscoord aBStart,
-                                           const nscoord aBEnd) const
-{
-  nscoord lineRightDiff =
-    ComputeEllipseLineInterceptDiff(mCenter.y - mRadius, mCenter.y + mRadius,
-                                    mRadius, mRadius, mRadius, mRadius,
-                                    aBStart, aBEnd);
-  return mCenter.x + mRadius - lineRightDiff;
-}
-
-/////////////////////////////////////////////////////////////////////////////
 // FloatInfo
 
 nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
                                      nscoord aLineLeft, nscoord aBlockStart,
                                      const LogicalRect& aMarginRect,
                                      WritingMode aWM,
                                      const nsSize& aContainerSize)
   : mFrame(aFrame)
@@ -680,68 +543,51 @@ nsFloatManager::FloatInfo::FloatInfo(nsI
           aMarginRect.BStart(aWM) + aBlockStart,
           aMarginRect.ISize(aWM),
           aMarginRect.BSize(aWM))
 {
   MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
 
   const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
 
-  if (shapeOutside.GetType() == StyleShapeSourceType::None) {
-    return;
-  }
-
-  // Initialize <shape-box>'s reference rect.
-  LogicalRect rect = aMarginRect;
+  if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
+    // Initialize shape-box reference rect.
+    LogicalRect rect = aMarginRect;
 
-  switch (shapeOutside.GetReferenceBox()) {
-    case StyleShapeOutsideShapeBox::Content:
-      rect.Deflate(aWM, mFrame->GetLogicalUsedPadding(aWM));
-      MOZ_FALLTHROUGH;
-    case StyleShapeOutsideShapeBox::Padding:
-      rect.Deflate(aWM, mFrame->GetLogicalUsedBorder(aWM));
-      MOZ_FALLTHROUGH;
-    case StyleShapeOutsideShapeBox::Border:
-      rect.Deflate(aWM, mFrame->GetLogicalUsedMargin(aWM));
-      break;
-    case StyleShapeOutsideShapeBox::Margin:
-      // Do nothing. rect is already a margin rect.
-      break;
-    case StyleShapeOutsideShapeBox::NoBox:
-      MOZ_ASSERT(shapeOutside.GetType() != StyleShapeSourceType::Box,
-                 "Box source type must have <shape-box> specified!");
-      break;
-  }
+    switch (shapeOutside.GetReferenceBox()) {
+      case StyleShapeOutsideShapeBox::Content:
+        rect.Deflate(aWM, mFrame->GetLogicalUsedPadding(aWM));
+        MOZ_FALLTHROUGH;
+      case StyleShapeOutsideShapeBox::Padding:
+        rect.Deflate(aWM, mFrame->GetLogicalUsedBorder(aWM));
+        MOZ_FALLTHROUGH;
+      case StyleShapeOutsideShapeBox::Border:
+        rect.Deflate(aWM, mFrame->GetLogicalUsedMargin(aWM));
+        break;
+      case StyleShapeOutsideShapeBox::Margin:
+        // Do nothing. rect is already a margin rect.
+        break;
+      case StyleShapeOutsideShapeBox::NoBox:
+        MOZ_ASSERT_UNREACHABLE("Why don't we have a shape-box?");
+        break;
+    }
 
-  if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
-    nsRect shapeBoxRect(rect.LineLeft(aWM, aContainerSize) + aLineLeft,
-                        rect.BStart(aWM) + aBlockStart,
-                        rect.ISize(aWM), rect.BSize(aWM));
-    mShapeInfo = MakeUnique<BoxShapeInfo>(shapeBoxRect, mFrame);
-  } else if (shapeOutside.GetType() == StyleShapeSourceType::Shape) {
-    StyleBasicShape* const basicShape = shapeOutside.GetBasicShape();
-
-    if (basicShape->GetShapeType() == StyleBasicShapeType::Circle) {
-      mShapeInfo = MakeUnique<CircleShapeInfo>(basicShape, aLineLeft, aBlockStart,
-                                               rect, aWM, aContainerSize);
-    }
-  } else if (shapeOutside.GetType() == StyleShapeSourceType::URL) {
-    // Bug 1265343: Implement 'shape-image-threshold'.
-  } else {
-    MOZ_ASSERT_UNREACHABLE("Unknown StyleShapeSourceType!");
+    mShapeBoxRect.emplace(rect.LineLeft(aWM, aContainerSize) + aLineLeft,
+                          rect.BStart(aWM) + aBlockStart,
+                          rect.ISize(aWM), rect.BSize(aWM));
   }
 }
 
 #ifdef NS_BUILD_REFCNT_LOGGING
-nsFloatManager::FloatInfo::FloatInfo(FloatInfo&& aOther)
-  : mFrame(Move(aOther.mFrame))
-  , mLeftBEnd(Move(aOther.mLeftBEnd))
-  , mRightBEnd(Move(aOther.mRightBEnd))
-  , mRect(Move(aOther.mRect))
-  , mShapeInfo(Move(aOther.mShapeInfo))
+nsFloatManager::FloatInfo::FloatInfo(const FloatInfo& aOther)
+  : mFrame(aOther.mFrame)
+  , mLeftBEnd(aOther.mLeftBEnd)
+  , mRightBEnd(aOther.mRightBEnd)
+  , mRect(aOther.mRect)
+  , mShapeBoxRect(aOther.mShapeBoxRect)
 {
   MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
 }
 
 nsFloatManager::FloatInfo::~FloatInfo()
 {
   MOZ_COUNT_DTOR(nsFloatManager::FloatInfo);
 }
@@ -753,90 +599,123 @@ nsFloatManager::FloatInfo::LineLeft(Writ
                                     const nscoord aBStart,
                                     const nscoord aBEnd) const
 {
   if (aShapeType == ShapeType::Margin) {
     return LineLeft();
   }
 
   MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
-  if (!mShapeInfo) {
+  const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
+  if (shapeOutside.GetType() == StyleShapeSourceType::None) {
     return LineLeft();
   }
-  // Clip the flow area to the margin-box because
-  // https://drafts.csswg.org/css-shapes-1/#relation-to-box-model-and-float-behavior
-  // says "When a shape is used to define a float area, the shape is clipped
-  // to the float’s margin box."
-  return std::max(LineLeft(), mShapeInfo->LineLeft(aWM, aBStart, aBEnd));
+
+  if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
+    nscoord radii[8];
+    bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
+
+    if (!hasRadii) {
+      return ShapeBoxRect().x;
+    }
+
+    // Get the physical side for line-left since border-radii are in
+    // the physical axis.
+    mozilla::Side lineLeftSide =
+      aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirLeft));
+    nscoord blockStartCornerRadiusL =
+      radii[SideToHalfCorner(lineLeftSide, true, false)];
+    nscoord blockStartCornerRadiusB =
+      radii[SideToHalfCorner(lineLeftSide, true, true)];
+    nscoord blockEndCornerRadiusL =
+      radii[SideToHalfCorner(lineLeftSide, false, false)];
+    nscoord blockEndCornerRadiusB =
+      radii[SideToHalfCorner(lineLeftSide, false, true)];
+
+    if (aWM.IsLineInverted()) {
+      // This happens only when aWM is vertical-lr. Need to swap blockStart
+      // and blockEnd corners.
+      std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
+      std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
+    }
+
+    nscoord lineLeftDiff =
+      ComputeEllipseLineInterceptDiff(
+        ShapeBoxRect().y, ShapeBoxRect().YMost(),
+        blockStartCornerRadiusL, blockStartCornerRadiusB,
+        blockEndCornerRadiusL, blockEndCornerRadiusB,
+        aBStart, aBEnd);
+    return ShapeBoxRect().x + lineLeftDiff;
+  }
+
+  // XXX: Other shape source types are not implemented yet.
+
+  return LineLeft();
 }
 
 nscoord
 nsFloatManager::FloatInfo::LineRight(WritingMode aWM,
                                      ShapeType aShapeType,
                                      const nscoord aBStart,
                                      const nscoord aBEnd) const
 {
   if (aShapeType == ShapeType::Margin) {
     return LineRight();
   }
 
   MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
-  if (!mShapeInfo) {
+  const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
+  if (shapeOutside.GetType() == StyleShapeSourceType::None) {
     return LineRight();
   }
-  // Clip the flow area to the margin-box. See LineLeft().
-  return std::min(LineRight(), mShapeInfo->LineRight(aWM, aBStart, aBEnd));
-}
-
-nscoord
-nsFloatManager::FloatInfo::BStart(ShapeType aShapeType) const
-{
-  if (aShapeType == ShapeType::Margin) {
-    return BStart();
-  }
 
-  MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
-  if (!mShapeInfo) {
-    return BStart();
-  }
-  // Clip the flow area to the margin-box. See LineLeft().
-  return std::max(BStart(), mShapeInfo->BStart());
-}
+  if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
+    nscoord radii[8];
+    bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
+
+    if (!hasRadii) {
+      return ShapeBoxRect().XMost();
+    }
 
-nscoord
-nsFloatManager::FloatInfo::BEnd(ShapeType aShapeType) const
-{
-  if (aShapeType == ShapeType::Margin) {
-    return BEnd();
+    // Get the physical side for line-right since border-radii are in
+    // the physical axis.
+    mozilla::Side lineRightSide =
+      aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirRight));
+    nscoord blockStartCornerRadiusL =
+      radii[SideToHalfCorner(lineRightSide, false, false)];
+    nscoord blockStartCornerRadiusB =
+      radii[SideToHalfCorner(lineRightSide, false, true)];
+    nscoord blockEndCornerRadiusL =
+      radii[SideToHalfCorner(lineRightSide, true, false)];
+    nscoord blockEndCornerRadiusB =
+      radii[SideToHalfCorner(lineRightSide, true, true)];
+
+    if (aWM.IsLineInverted()) {
+      // This happens only when aWM is vertical-lr. Need to swap blockStart
+      // and blockEnd corners.
+      std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
+      std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
+    }
+
+    nscoord lineRightDiff =
+      ComputeEllipseLineInterceptDiff(
+        ShapeBoxRect().y, ShapeBoxRect().YMost(),
+        blockStartCornerRadiusL, blockStartCornerRadiusB,
+        blockEndCornerRadiusL, blockEndCornerRadiusB,
+        aBStart, aBEnd);
+    return ShapeBoxRect().XMost() - lineRightDiff;
   }
 
-  MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
-  if (!mShapeInfo) {
-    return BEnd();
-  }
-  // Clip the flow area to the margin-box. See LineLeft().
-  return std::min(BEnd(), mShapeInfo->BEnd());
-}
+  // XXX: Other shape source types are not implemented yet.
 
-bool
-nsFloatManager::FloatInfo::IsEmpty(ShapeType aShapeType) const
-{
-  if (aShapeType == ShapeType::Margin) {
-    return IsEmpty();
-  }
-
-  MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
-  if (!mShapeInfo) {
-    return IsEmpty();
-  }
-  return mShapeInfo->IsEmpty();
+  return LineRight();
 }
 
 /* static */ nscoord
-nsFloatManager::ComputeEllipseLineInterceptDiff(
+nsFloatManager::FloatInfo::ComputeEllipseLineInterceptDiff(
   const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
   const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
   const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
   const nscoord aBandBStart, const nscoord aBandBEnd)
 {
   // An example for the band intersecting with the top right corner of an
   // ellipse with writing-mode horizontal-tb.
   //
@@ -896,19 +775,19 @@ nsFloatManager::ComputeEllipseLineInterc
       XInterceptAtY(b, aBEndCornerRadiusL, aBEndCornerRadiusB);
     lineDiff = aBEndCornerRadiusL - lineIntercept;
   }
 
   return lineDiff;
 }
 
 /* static */ nscoord
-nsFloatManager::XInterceptAtY(const nscoord aY,
-                              const nscoord aRadiusX,
-                              const nscoord aRadiusY)
+nsFloatManager::FloatInfo::XInterceptAtY(const nscoord aY,
+                                         const nscoord aRadiusX,
+                                         const nscoord aRadiusY)
 {
   // Solve for x in the ellipse equation (x/radiusX)^2 + (y/radiusY)^2 = 1.
   MOZ_ASSERT(aRadiusY > 0);
   return aRadiusX * std::sqrt(1 - (aY * aY) / double(aRadiusY * aRadiusY));
 }
 
 //----------------------------------------------------------------------
 
--- a/layout/generic/nsFloatManager.h
+++ b/layout/generic/nsFloatManager.h
@@ -5,30 +5,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* class that manages rules for positioning floats */
 
 #ifndef nsFloatManager_h_
 #define nsFloatManager_h_
 
 #include "mozilla/Attributes.h"
-#include "mozilla/UniquePtr.h"
+#include "mozilla/Maybe.h"
 #include "mozilla/WritingModes.h"
 #include "nsCoord.h"
 #include "nsFrameList.h" // for DEBUG_FRAME_DUMP
 #include "nsIntervalSet.h"
-#include "nsPoint.h"
 #include "nsTArray.h"
 
 class nsIPresShell;
 class nsIFrame;
 class nsPresContext;
 namespace mozilla {
 struct ReflowInput;
-class StyleBasicShape;
 } // namespace mozilla
 
 /**
  * The available space for content not occupied by floats is divided
  * into a sequence of rectangles in the block direction.  However, we
  * need to know not only the rectangle, but also whether it was reduced
  * (from the content rectangle) by floats that actually intruded into
  * the content rectangle.
@@ -198,19 +196,19 @@ public:
   /**
    * Add a float that comes after all floats previously added.  Its
    * block start must be even with or below the top of all previous
    * floats.
    *
    * aMarginRect is relative to the current translation.  The caller
    * must ensure aMarginRect.height >= 0 and aMarginRect.width >= 0.
    */
-  void AddFloat(nsIFrame* aFloatFrame,
-                const mozilla::LogicalRect& aMarginRect,
-                mozilla::WritingMode aWM, const nsSize& aContainerSize);
+  nsresult AddFloat(nsIFrame* aFloatFrame,
+                    const mozilla::LogicalRect& aMarginRect,
+                    mozilla::WritingMode aWM, const nsSize& aContainerSize);
 
   /**
    * Notify that we tried to place a float that could not fit at all and
    * had to be pushed to the next page/column?  (If so, we can't place
    * any more floats in this page/column because of the rule that the
    * top of a float cannot be above the top of an earlier float.  It
    * also means that any clear needs to continue to the next column.)
    */
@@ -328,109 +326,16 @@ public:
 #ifdef DEBUG_FRAME_DUMP
   /**
    * Dump the state of the float manager out to a file.
    */
   nsresult List(FILE* out) const;
 #endif
 
 private:
-  // Compute the minimum line-axis difference between the bounding shape
-  // box and its rounded corner within the given band (block-axis region).
-  // This is used as a helper function to compute the LineRight() and
-  // LineLeft(). See the picture in the implementation for an example.
-  // RadiusL and RadiusB stand for radius on the line-axis and block-axis.
-  //
-  // Returns radius-x diff on the line-axis, or 0 if there's no rounded
-  // corner within the given band.
-  static nscoord ComputeEllipseLineInterceptDiff(
-    const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
-    const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
-    const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
-    const nscoord aBandBStart, const nscoord aBandBEnd);
-
-  static nscoord XInterceptAtY(const nscoord aY, const nscoord aRadiusX,
-                               const nscoord aRadiusY);
-
-  // ShapeInfo is an abstract class for implementing all the shapes in CSS
-  // Shapes Module. A subclass needs to override all the methods to adjust
-  // the flow area with respect to its shape.
-  class ShapeInfo
-  {
-  public:
-    virtual ~ShapeInfo() {}
-
-    virtual nscoord LineLeft(mozilla::WritingMode aWM,
-                             const nscoord aBStart,
-                             const nscoord aBEnd) const = 0;
-    virtual nscoord LineRight(mozilla::WritingMode aWM,
-                              const nscoord aBStart,
-                              const nscoord aBEnd) const = 0;
-    virtual nscoord BStart() const = 0;
-    virtual nscoord BEnd() const = 0;
-    virtual bool IsEmpty() const = 0;
-  };
-
-  // Implements shape-outside: <shape-box>.
-  class BoxShapeInfo final : public ShapeInfo
-  {
-  public:
-    BoxShapeInfo(const nsRect& aShapeBoxRect, nsIFrame* const aFrame)
-      : mShapeBoxRect(aShapeBoxRect)
-      , mFrame(aFrame)
-    {
-    }
-
-    nscoord LineLeft(mozilla::WritingMode aWM,
-                     const nscoord aBStart,
-                     const nscoord aBEnd) const override;
-    nscoord LineRight(mozilla::WritingMode aWM,
-                      const nscoord aBStart,
-                      const nscoord aBEnd) const override;
-    nscoord BStart() const override { return mShapeBoxRect.y; }
-    nscoord BEnd() const override { return mShapeBoxRect.YMost(); }
-    bool IsEmpty() const override { return mShapeBoxRect.IsEmpty(); };
-
-  private:
-    // This is the reference box of css shape-outside if specified, which
-    // implements the <shape-box> value in the CSS Shapes Module Level 1.
-    // The coordinate space is the same as FloatInfo::mRect.
-    const nsRect mShapeBoxRect;
-    // The frame of the float.
-    nsIFrame* const mFrame;
-  };
-
-  // Implements shape-outside: circle().
-  class CircleShapeInfo final : public ShapeInfo
-  {
-  public:
-    CircleShapeInfo(mozilla::StyleBasicShape* const aBasicShape,
-                    nscoord aLineLeft,
-                    nscoord aBlockStart,
-                    const mozilla::LogicalRect& aShapeBoxRect,
-                    mozilla::WritingMode aWM,
-                    const nsSize& aContainerSize);
-
-    nscoord LineLeft(mozilla::WritingMode aWM,
-                     const nscoord aBStart,
-                     const nscoord aBEnd) const override;
-    nscoord LineRight(mozilla::WritingMode aWM,
-                      const nscoord aBStart,
-                      const nscoord aBEnd) const override;
-    nscoord BStart() const override { return mCenter.y - mRadius; }
-    nscoord BEnd() const override { return mCenter.y + mRadius; }
-    bool IsEmpty() const override { return mRadius == 0; };
-
-  private:
-    // The position of the center of the circle. The coordinate space is the
-    // same as FloatInfo::mRect.
-    nsPoint mCenter;
-    // The radius of the circle in app units.
-    nscoord mRadius;
-  };
 
   struct FloatInfo {
     nsIFrame *const mFrame;
     // The lowest block-ends of left/right floats up to and including
     // this one.
     nscoord mLeftBEnd, mRightBEnd;
 
     FloatInfo(nsIFrame* aFrame, nscoord aLineLeft, nscoord aBlockStart,
@@ -440,42 +345,68 @@ private:
     nscoord LineLeft() const { return mRect.x; }
     nscoord LineRight() const { return mRect.XMost(); }
     nscoord ISize() const { return mRect.width; }
     nscoord BStart() const { return mRect.y; }
     nscoord BEnd() const { return mRect.YMost(); }
     nscoord BSize() const { return mRect.height; }
     bool IsEmpty() const { return mRect.IsEmpty(); }
 
+    nsRect ShapeBoxRect() const { return mShapeBoxRect.valueOr(mRect); }
+
     // aBStart and aBEnd are the starting and ending coordinate of a band.
     // LineLeft() and LineRight() return the innermost line-left extent and
     // line-right extent within the given band, respectively.
     nscoord LineLeft(mozilla::WritingMode aWM, ShapeType aShapeType,
                      const nscoord aBStart, const nscoord aBEnd) const;
     nscoord LineRight(mozilla::WritingMode aWM, ShapeType aShapeType,
                       const nscoord aBStart, const nscoord aBEnd) const;
-    nscoord BStart(ShapeType aShapeType) const;
-    nscoord BEnd(ShapeType aShapeType) const;
-    bool IsEmpty(ShapeType aShapeType) const;
+
+    nscoord BStart(ShapeType aShapeType) const
+    {
+      return aShapeType == ShapeType::Margin ? BStart() : ShapeBoxRect().y;
+    }
+    nscoord BEnd(ShapeType aShapeType) const
+    {
+      return aShapeType == ShapeType::Margin ? BEnd() : ShapeBoxRect().YMost();
+    }
+
+    // Compute the minimum line-axis difference between the bounding shape
+    // box and its rounded corner within the given band (block-axis region).
+    // This is used as a helper function to compute the LineRight() and
+    // LineLeft(). See the picture in the implementation for an example.
+    // RadiusL and RadiusB stand for radius on the line-axis and block-axis.
+    //
+    // Returns radius-x diff on the line-axis, or 0 if there's no rounded
+    // corner within the given band.
+    static nscoord ComputeEllipseLineInterceptDiff(
+      const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
+      const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
+      const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
+      const nscoord aBandBStart, const nscoord aBandBEnd);
+
+    static nscoord XInterceptAtY(const nscoord aY, const nscoord aRadiusX,
+                                 const nscoord aRadiusY);
 
 #ifdef NS_BUILD_REFCNT_LOGGING
-    FloatInfo(FloatInfo&& aOther);
+    FloatInfo(const FloatInfo& aOther);
     ~FloatInfo();
 #endif
 
     // NB! This is really a logical rect in a writing mode suitable for
     // placing floats, which is not necessarily the actual writing mode
     // either of the block which created the frame manager or the block
     // that is calling the frame manager. The inline coordinates are in
     // the line-relative axis of the frame manager and its block
     // coordinates are in the frame manager's real block direction.
     nsRect mRect;
-    // Pointer to a concrete subclass of ShapeInfo or null, which means that
-    // there is no shape-outside.
-    mozilla::UniquePtr<ShapeInfo> mShapeInfo;
+    // This is the reference box of css shape-outside if specified, which
+    // implements the <shape-box> value in the CSS Shapes Module Level 1.
+    // The coordinate setup is the same as mRect.
+    mozilla::Maybe<nsRect> mShapeBoxRect;
   };
 
 #ifdef DEBUG
   // Store the writing mode from the block frame which establishes the block
   // formatting context (BFC) when the nsFloatManager is created.
   mozilla::WritingMode mWritingMode;
 #endif
 
--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -1,9 +1,9 @@
-default-preferences pref(layout.css.shape-outside.enabled,true) pref(layout.css.clip-path-shapes.enabled,true)
+default-preferences pref(layout.css.shape-outside.enabled,true)
 
 # <shape-box> only
 == shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
 == shape-outside-margin-box-002.html shape-outside-margin-box-002-ref.html
 == shape-outside-border-box-001.html shape-outside-border-box-001-ref.html
 == shape-outside-border-box-002.html shape-outside-border-box-002-ref.html
 == shape-outside-padding-box-001.html shape-outside-padding-box-001-ref.html
 == shape-outside-padding-box-002.html shape-outside-padding-box-002-ref.html
@@ -30,34 +30,8 @@ fails == shape-outside-border-box-border
 == shape-outside-border-box-border-radius-009.html shape-outside-border-box-border-radius-009-ref.html
 == shape-outside-border-box-border-radius-010.html shape-outside-border-box-border-radius-010-ref.html
 == shape-outside-border-box-border-radius-011.html shape-outside-border-box-border-radius-011-ref.html
 == shape-outside-border-box-border-radius-012.html shape-outside-border-box-border-radius-012-ref.html
 == shape-outside-padding-box-border-radius-001.html shape-outside-padding-box-border-radius-001-ref.html
 == shape-outside-padding-box-border-radius-002.html shape-outside-padding-box-border-radius-002-ref.html
 == shape-outside-content-box-border-radius-001.html shape-outside-content-box-border-radius-001-ref.html
 == shape-outside-content-box-border-radius-002.html shape-outside-content-box-border-radius-002-ref.html
-
-# Basic shape: circle()
-== shape-outside-circle-001.html shape-outside-circle-001-ref.html
-== shape-outside-circle-002.html shape-outside-circle-002-ref.html
-== shape-outside-circle-003.html shape-outside-circle-003-ref.html
-== shape-outside-circle-004.html shape-outside-circle-004-ref.html
-== shape-outside-circle-005.html shape-outside-circle-005-ref.html
-== shape-outside-circle-006.html shape-outside-circle-005-ref.html
-== shape-outside-circle-007.html shape-outside-circle-005-ref.html
-== shape-outside-circle-008.html shape-outside-circle-008-ref.html
-== shape-outside-circle-009.html shape-outside-circle-008-ref.html
-== shape-outside-circle-010.html shape-outside-circle-010-ref.html
-== shape-outside-circle-011.html shape-outside-circle-011-ref.html
-== shape-outside-circle-012.html shape-outside-circle-011-ref.html
-== shape-outside-circle-013.html shape-outside-circle-011-ref.html
-== shape-outside-circle-014.html shape-outside-circle-014-ref.html
-== shape-outside-circle-015.html shape-outside-circle-014-ref.html
-== shape-outside-circle-016.html shape-outside-circle-016-ref.html
-== shape-outside-circle-017.html shape-outside-circle-017-ref.html
-== shape-outside-circle-018.html shape-outside-circle-018-ref.html
-== shape-outside-circle-019.html shape-outside-circle-019-ref.html
-== shape-outside-circle-020.html shape-outside-circle-020-ref.html
-== shape-outside-circle-021.html shape-outside-circle-021-ref.html
-== shape-outside-circle-022.html shape-outside-circle-022-ref.html
-== shape-outside-circle-023.html shape-outside-circle-023-ref.html
-== shape-outside-circle-024.html shape-outside-circle-024-ref.html
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001-ref.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(50% at left top) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(50% at left top);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 120px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="box" style="height: 36px; top: 0px; left: 60px;"></div>
-    <div class="box" style="height: 12px; top: 36px; left: 48px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px; top: 48px; left: 36px;"></div>  <!-- Box at corner -->
-    <div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px; top: 120px; left: 60px;"></div>
-    <div class="box" style="height: 12px; top: 156px; left: 48px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px; top: 168px; left: 36px;"></div>  <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(50% at left top)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-001-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at left top) value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(50% at left top);
-    clip-path: circle(50% at left top);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 120px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002-ref.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(50% at right bottom) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(50% at right bottom);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float -->
-    <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
-    <div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px; top: 180px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 216px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 228px; left: 120px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(50% at right bottom)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-002-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at right bottom) value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(50% at right bottom);
-    clip-path: circle(50% at right bottom);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003-ref.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(50% at right top) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    direction: rtl;
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(50% at right top);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 120px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="box" style="height: 36px; top: 0px; right: 60px;"></div>
-    <div class="box" style="height: 12px; top: 36px; right: 48px;"></div>
-    <div class="box" style="height: 12px; top: 48px; right: 36px;"></div>
-    <div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px; top: 120px; right: 60px;"></div>
-    <div class="box" style="height: 12px; top: 156px; right: 48px;"></div>
-    <div class="box" style="height: 12px; top: 168px; right: 36px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(50% at right top)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-003-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at right top) value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(50% at right top);
-    clip-path: circle(50% at right top);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 120px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004-ref.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(50% at left bottom) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    direction: rtl;
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(50% at left bottom);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float -->
-    <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
-    <div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px; top: 180px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 216px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 228px; right: 120px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(50% at left bottom)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-004-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at left bottom) value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(50% at left bottom);
-    clip-path: circle(50% at left bottom);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    width: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="shape"></div>
-    <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005-ref.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle() reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle();
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
-    <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle()</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-005-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle() value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle();
-    clip-path: circle();
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-006.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(closest-side at center) border-box</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-005-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(closest-side at center) border-box value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(closest-side at center) border-box;
-    clip-path: circle(closest-side at center) border-box;
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-right: 10px; /* Not affect layout of the boxes */
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-007.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(farthest-side at center)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-005-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(farthest-side at center) value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(farthest-side at center);
-    clip-path: circle(farthest-side at center);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008-ref.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(0%) border-box reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(0%) border-box;
-    box-sizing: content-box;
-    height: 20px;
-    width: 20px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin: 10px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 200px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
-    <div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
-    <div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
-    <div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
-    <div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
-    <div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(0%) border-box</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-008-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(0%) border-box;
-    clip-path: circle(0%) border-box;
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin: 10px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 200px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-009.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(closest-side at left center) border-box</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-008-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(closest-side at left center) border-box;
-    clip-path: circle(closest-side at left center) border-box;
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin: 10px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 200px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010-ref.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(100%) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(100%);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px; top: 0px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 12px; left: 120px;"></div>
-    <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
-    <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
-    <div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float left, circle(100%)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-010-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(100%) value.">
-  <style>
-  .container {
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(100%);
-    clip-path: circle(100%); /* Rendered as a rectangle */
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011-ref.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle() reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    direction: rtl;
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle();
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
-    <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle()</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-011-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle() value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle();
-    clip-path: circle();
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-012.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(closest-side at center) border-box</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-011-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(closest-side at center) border-box value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(closest-side at center) border-box;
-    clip-path: circle(closest-side at center) border-box;
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-left: 10px; /* Not affect layout of the boxes */
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-013.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(farthest-side at center)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-011-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(farthest-side at center) value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(farthest-side at center);
-    clip-path: circle(farthest-side at center);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014-ref.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(0%) border-box reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    direction: rtl;
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(0%) border-box;
-    box-sizing: content-box;
-    height: 20px;
-    width: 20px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin: 10px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 200px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
-    <div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
-    <div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
-    <div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
-    <div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
-    <div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(0%) border-box</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-014-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(0%) border-box;
-    clip-path: circle(0%) border-box;
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin: 10px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 200px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-015.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(closest-side at right center) border-box</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-014-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(closest-side at right center) border-box;
-    clip-path: circle(closest-side at right center) border-box;
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin: 10px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 200px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016-ref.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(100%) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    direction: rtl;
-    position: absolute;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(100%);
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px; top: 0px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 12px; right: 120px;"></div>
-    <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
-    <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
-    <div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: float right, circle(100%)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-016-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(100%) value.">
-  <style>
-  .container {
-    direction: rtl;
-    width: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(100%);
-    clip-path: circle(100%); /* Rendered as a rectangle */
-    box-sizing: content-box;
-    height: 40px;
-    width: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    width: 60px;
-    background-color: blue;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 36px;"></div>
-    <div class="box" style="height: 12px;"></div>
-    <div class="box" style="height: 12px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017-ref.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: vertical-rl;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(50% at left 40px top 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    margin-block-end: 28px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-017-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px top 40px) value under vertical-rl writing-mode.">
-  <style>
-  .container {
-    writing-mode: vertical-rl;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(50% at left 40px top 40px) border-box;
-    clip-path: circle(50% at left 40px top 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018-ref.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: vertical-rl;
-    direction: rtl;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(50% at left 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    margin-block-end: 28px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-018-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at left 40px bottom 40px) value under vertical-rl writing-mode.">
-  <style>
-  .container {
-    writing-mode: vertical-rl;
-    direction: rtl;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(50% at left 40px bottom 40px) border-box;
-    clip-path: circle(50% at left 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019-ref.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: vertical-lr;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(50% at right 40px top 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    margin-block-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-019-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under vertical-lr writing-mode.">
-  <style>
-  .container {
-    writing-mode: vertical-lr;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(50% at right 40px top 40px) border-box;
-    clip-path: circle(50% at right 40px top 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020-ref.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: vertical-lr;
-    direction: rtl;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(50% at right 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-020-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under vertical-lr writing-mode.">
-  <style>
-  .container {
-    writing-mode: vertical-lr;
-    direction: rtl;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(50% at right 40px bottom 40px) border-box;
-    clip-path: circle(50% at right 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021-ref.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: sideways-lr;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(50% at right 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    margin-block-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-021-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at right 40px bottom 40px) value under sideways-lr writing-mode.">
-  <style>
-  .container {
-    writing-mode: sideways-lr;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(50% at right 40px bottom 40px) border-box;
-    clip-path: circle(50% at right 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022-ref.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: sideways-lr;
-    direction: rtl;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(50% at right 40px top 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    margin-block-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-022-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under sideways-lr writing-mode.">
-  <style>
-  .container {
-    writing-mode: sideways-lr;
-    direction: rtl;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(50% at right 40px top 40px) border-box;
-    clip-path: circle(50% at right 40px top 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023-ref.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: horizontal-tb;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    /* Omit shape-outside */
-    clip-path: circle(50% at left 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    margin-block-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-023-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px bottom 40px) value under horizontal-tb writing-mode.">
-  <style>
-  .container {
-    writing-mode: horizontal-tb;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: left;
-    shape-outside: circle(50% at left 40px bottom 40px) border-box;
-    clip-path: circle(50% at left 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024-ref.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px) reference</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <style>
-  .container {
-    writing-mode: horizontal-tb;
-    direction: rtl;
-    position: absolute;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    /* Omit shape-outside */
-    clip-path: circle(50% at right 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-start: 20px;
-    margin-block-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    position: absolute;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
-    <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
-  </body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-
-<html>
-  <meta charset="utf-8">
-  <title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px)</title>
-  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
-  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
-  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
-  <link rel="match" href="shape-outside-circle-024-ref.html">
-  <meta name="flags" content="">
-  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under horizontal-tb writing-mode.">
-  <style>
-  .container {
-    writing-mode: horizontal-tb;
-    direction: rtl;
-    inline-size: 200px;
-    line-height: 0;
-  }
-
-  .shape {
-    float: right;
-    shape-outside: circle(50% at right 40px bottom 40px) border-box;
-    clip-path: circle(50% at right 40px bottom 40px) border-box;
-    box-sizing: content-box;
-    block-size: 40px;
-    inline-size: 40px;
-    padding: 20px;
-    border: 20px solid lightgreen;
-    margin-inline-start: 20px;
-    margin-inline-end: 20px;
-    background-color: orange;
-  }
-
-  .box {
-    display: inline-block;
-    inline-size: 60px;
-    background-color: blue;
-  }
-
-  .long {
-    inline-size: 200px;
-  }
-  </style>
-
-  <body class="container">
-    <div class="shape"></div>
-    <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 36px;"></div>
-    <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
-    <div class="long box" style="block-size: 20px;"></div>
-  </body>
-</html>
--- a/layout/svg/nsCSSClipPathInstance.cpp
+++ b/layout/svg/nsCSSClipPathInstance.cpp
@@ -6,17 +6,16 @@
 // Main header first:
 #include "nsCSSClipPathInstance.h"
 
 #include "gfx2DGlue.h"
 #include "gfxPlatform.h"
 #include "mozilla/dom/SVGSVGElement.h"
 #include "mozilla/gfx/2D.h"
 #include "mozilla/gfx/PathHelpers.h"
-#include "mozilla/ShapeUtils.h"
 #include "nsCSSRendering.h"
 #include "nsIFrame.h"
 #include "nsRenderingContext.h"
 #include "nsRuleNode.h"
 #include "nsSVGElement.h"
 #include "nsSVGUtils.h"
 #include "nsSVGViewBox.h"
 
@@ -100,71 +99,115 @@ nsCSSClipPathInstance::CreateClipPath(Dr
     default:
       MOZ_MAKE_COMPILER_ASSUME_IS_UNREACHABLE("Unexpected shape type");
   }
   // Return an empty Path:
   RefPtr<PathBuilder> builder = aDrawTarget->CreatePathBuilder();
   return builder->Finish();
 }
 
+static void
+EnumerationToLength(nscoord& aCoord, StyleShapeRadius aType,
+                    nscoord aCenter, nscoord aPosMin, nscoord aPosMax)
+{
+  nscoord dist1 = abs(aPosMin - aCenter);
+  nscoord dist2 = abs(aPosMax - aCenter);
+  switch (aType) {
+    case StyleShapeRadius::FarthestSide:
+      aCoord = dist1 > dist2 ? dist1 : dist2;
+      break;
+    case StyleShapeRadius::ClosestSide:
+      aCoord = dist1 > dist2 ? dist2 : dist1;
+      break;
+  }
+}
+
 already_AddRefed<Path>
 nsCSSClipPathInstance::CreateClipPathCircle(DrawTarget* aDrawTarget,
                                             const nsRect& aRefBox)
 {
   StyleBasicShape* basicShape = mClipPathStyle.GetBasicShape();
 
   RefPtr<PathBuilder> builder = aDrawTarget->CreatePathBuilder();
 
-  nsPoint center =
-    ShapeUtils::ComputeCircleOrEllipseCenter(basicShape, aRefBox);
-  nscoord r = ShapeUtils::ComputeCircleRadius(basicShape, center, aRefBox);
+  nsPoint topLeft, anchor;
+  nsSize size = nsSize(aRefBox.width, aRefBox.height);
+  nsImageRenderer::ComputeObjectAnchorPoint(basicShape->GetPosition(),
+                                            size, size,
+                                            &topLeft, &anchor);
+  Point center = Point(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
+
+  const nsTArray<nsStyleCoord>& coords = basicShape->Coordinates();
+  MOZ_ASSERT(coords.Length() == 1, "wrong number of arguments");
+  nscoord r = 0;
+  if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
+    const auto styleShapeRadius = coords[0].GetEnumValue<StyleShapeRadius>();
+    nscoord horizontal, vertical;
+    EnumerationToLength(horizontal, styleShapeRadius,
+                        center.x, aRefBox.x, aRefBox.x + aRefBox.width);
+    EnumerationToLength(vertical, styleShapeRadius,
+                        center.y, aRefBox.y, aRefBox.y + aRefBox.height);
+    if (styleShapeRadius == StyleShapeRadius::FarthestSide) {
+      r = horizontal > vertical ? horizontal : vertical;
+    } else {
+      r = horizontal < vertical ? horizontal : vertical;
+    }
+  } else {
+    // We resolve percent <shape-radius> value for circle() as defined here:
+    // https://drafts.csswg.org/css-shapes/#funcdef-circle
+    double referenceLength =
+      SVGContentUtils::ComputeNormalizedHypotenuse(aRefBox.width,
+                                                   aRefBox.height);
+    r = nsRuleNode::ComputeCoordPercentCalc(coords[0],
+                                            NSToCoordRound(referenceLength));
+  }
+
   nscoord appUnitsPerDevPixel =
     mTargetFrame->PresContext()->AppUnitsPerDevPixel();
-  builder->Arc(Point(center.x, center.y) / appUnitsPerDevPixel,
-               r / appUnitsPerDevPixel,
+  builder->Arc(center / appUnitsPerDevPixel, r / appUnitsPerDevPixel,
                0, Float(2 * M_PI));
   builder->Close();
   return builder->Finish();
 }
 
 already_AddRefed<Path>
 nsCSSClipPathInstance::CreateClipPathEllipse(DrawTarget* aDrawTarget,
                                              const nsRect& aRefBox)
 {
   StyleBasicShape* basicShape = mClipPathStyle.GetBasicShape();
 
   RefPtr<PathBuilder> builder = aDrawTarget->CreatePathBuilder();
 
-  nsPoint center =
-    ShapeUtils::ComputeCircleOrEllipseCenter(basicShape, aRefBox);
+  nsPoint topLeft, anchor;
+  nsSize size = nsSize(aRefBox.width, aRefBox.height);
+  nsImageRenderer::ComputeObjectAnchorPoint(basicShape->GetPosition(),
+                                            size, size,
+                                            &topLeft, &anchor);
+  Point center = Point(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
 
   const nsTArray<nsStyleCoord>& coords = basicShape->Coordinates();
   MOZ_ASSERT(coords.Length() == 2, "wrong number of arguments");
   nscoord rx = 0, ry = 0;
   if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
-    rx = ShapeUtils::ComputeShapeRadius(coords[0].GetEnumValue<StyleShapeRadius>(),
-                                        center.x,
-                                        aRefBox.x,
-                                        aRefBox.x + aRefBox.width);
+    EnumerationToLength(rx, coords[0].GetEnumValue<StyleShapeRadius>(),
+                        center.x, aRefBox.x, aRefBox.x + aRefBox.width);
   } else {
     rx = nsRuleNode::ComputeCoordPercentCalc(coords[0], aRefBox.width);
   }
   if (coords[1].GetUnit() == eStyleUnit_Enumerated) {
-    ry = ShapeUtils::ComputeShapeRadius(coords[1].GetEnumValue<StyleShapeRadius>(),
-                                        center.y,
-                                        aRefBox.y,
-                                        aRefBox.y + aRefBox.height);
+    EnumerationToLength(ry, coords[1].GetEnumValue<StyleShapeRadius>(),
+                        center.y, aRefBox.y, aRefBox.y + aRefBox.height);
   } else {
     ry = nsRuleNode::ComputeCoordPercentCalc(coords[1], aRefBox.height);
   }
 
   nscoord appUnitsPerDevPixel =
     mTargetFrame->PresContext()->AppUnitsPerDevPixel();
   EllipseToBezier(builder.get(),
-                  Point(center.x, center.y) / appUnitsPerDevPixel,
+                  center / appUnitsPerDevPixel,
                   Size(rx, ry) / appUnitsPerDevPixel);
   builder->Close();
   return builder->Finish();
 }
 
 already_AddRefed<Path>
 nsCSSClipPathInstance::CreateClipPathPolygon(DrawTarget* aDrawTarget,
                                              const nsRect& aRefBox)