--- a/layout/generic/WritingModes.h
+++ b/layout/generic/WritingModes.h
@@ -779,16 +779,26 @@ 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,16 +5,17 @@
 
 /* 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;
@@ -182,17 +183,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()) {
+    if (fi.IsEmpty(aShapeType)) {
       // 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);
@@ -608,16 +609,70 @@ nsFloatManager::BoxShapeInfo::LineRight(
       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(BStart(), BEnd(),
+                                    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(BStart(), BEnd(),
+                                    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)
@@ -646,25 +701,37 @@ nsFloatManager::FloatInfo::FloatInfo(nsI
       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?");
+      MOZ_ASSERT(shapeOutside.GetType() != StyleShapeSourceType::Box,
+                 "Box source type must have <shape-box> specified!");
       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!");
   }
 }
 
 #ifdef NS_BUILD_REFCNT_LOGGING
 nsFloatManager::FloatInfo::FloatInfo(FloatInfo&& aOther)
   : mFrame(Move(aOther.mFrame))
   , mLeftBEnd(Move(aOther.mLeftBEnd))
   , mRightBEnd(Move(aOther.mRightBEnd))
@@ -689,62 +756,83 @@ nsFloatManager::FloatInfo::LineLeft(Writ
   if (aShapeType == ShapeType::Margin) {
     return LineLeft();
   }
 
   MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
   if (!mShapeInfo) {
     return LineLeft();
   }
-  return mShapeInfo->LineLeft(aWM, aBStart, aBEnd);
+  // 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));
 }
 
 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) {
     return LineRight();
   }
-  return mShapeInfo->LineRight(aWM, aBStart, aBEnd);
+  // 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();
   }
-  return mShapeInfo->BStart();
+  // Clip the flow area to the margin-box. See LineLeft().
+  return std::max(BStart(), mShapeInfo->BStart());
 }
 
 nscoord
 nsFloatManager::FloatInfo::BEnd(ShapeType aShapeType) const
 {
   if (aShapeType == ShapeType::Margin) {
     return BEnd();
   }
 
   MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
   if (!mShapeInfo) {
     return BEnd();
   }
-  return mShapeInfo->BEnd();
+  // Clip the flow area to the margin-box. See LineLeft().
+  return std::min(BEnd(), mShapeInfo->BEnd());
+}
+
+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();
 }
 
 /* static */ nscoord
 nsFloatManager::ShapeInfo::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)

--- a/layout/generic/nsFloatManager.h
+++ b/layout/generic/nsFloatManager.h
@@ -10,23 +10,25 @@
 #define nsFloatManager_h_
 
 #include "mozilla/Attributes.h"
 #include "mozilla/UniquePtr.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.
@@ -343,16 +345,17 @@ private:
     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;
 
   protected:
     // 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.
     //
@@ -381,26 +384,56 @@ private:
     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,
               const mozilla::LogicalRect& aMarginRect,
@@ -418,16 +451,17 @@ private:
     // 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;
 
 #ifdef NS_BUILD_REFCNT_LOGGING
     FloatInfo(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

--- 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)
+default-preferences pref(layout.css.shape-outside.enabled,true) pref(layout.css.clip-path-shapes.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,8 +30,34 @@ 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

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001-ref.html
@@ -0,0 +1,51 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001.html
@@ -0,0 +1,54 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002-ref.html
@@ -0,0 +1,52 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002.html
@@ -0,0 +1,55 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003-ref.html
@@ -0,0 +1,52 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003.html
@@ -0,0 +1,55 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004-ref.html
@@ -0,0 +1,53 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004.html
@@ -0,0 +1,56 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005-ref.html
@@ -0,0 +1,45 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005.html
@@ -0,0 +1,48 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-006.html
@@ -0,0 +1,49 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-007.html
@@ -0,0 +1,48 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008-ref.html
@@ -0,0 +1,46 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008.html
@@ -0,0 +1,49 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-009.html
@@ -0,0 +1,49 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010-ref.html
@@ -0,0 +1,45 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010.html
@@ -0,0 +1,48 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011-ref.html
@@ -0,0 +1,46 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011.html
@@ -0,0 +1,49 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-012.html
@@ -0,0 +1,50 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-013.html
@@ -0,0 +1,49 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014-ref.html
@@ -0,0 +1,47 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014.html
@@ -0,0 +1,50 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-015.html
@@ -0,0 +1,50 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016-ref.html
@@ -0,0 +1,46 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016.html
@@ -0,0 +1,49 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017-ref.html
@@ -0,0 +1,54 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017.html
@@ -0,0 +1,56 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018-ref.html
@@ -0,0 +1,55 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018.html
@@ -0,0 +1,57 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019-ref.html
@@ -0,0 +1,54 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019.html
@@ -0,0 +1,56 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020-ref.html
@@ -0,0 +1,54 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020.html
@@ -0,0 +1,57 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021-ref.html
@@ -0,0 +1,54 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021.html
@@ -0,0 +1,56 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022-ref.html
@@ -0,0 +1,55 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022.html
@@ -0,0 +1,57 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023-ref.html
@@ -0,0 +1,54 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023.html
@@ -0,0 +1,56 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024-ref.html
@@ -0,0 +1,55 @@
+<!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>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024.html
@@ -0,0 +1,57 @@
+<!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>