--- a/layout/generic/nsFloatManager.cpp
+++ b/layout/generic/nsFloatManager.cpp
@@ -206,43 +206,50 @@ nsFloatManager::GetFlowArea(WritingMode 
     // need to do this to satisfy the invariant that a
     // WidthWithinHeight call is at least as narrow on both sides as a
     // BandFromPoint call beginning at its blockStart.
     else if (blockStart < floatBEnd &&
              (floatBStart < blockEnd ||
               (floatBStart == blockEnd && blockStart == blockEnd))) {
       // This float is in our band.
 
-      // Shrink our band's height if needed.
-      if (floatBEnd < blockEnd && aBandInfoType == BandInfoType::BandFromPoint) {
-        blockEnd = floatBEnd;
-      }
-
       // Shrink our band's width if needed.
       StyleFloat floatStyle = fi.mFrame->StyleDisplay()->PhysicalFloats(aWM);
+
+      // When aBandInfoType is BandFromPoint, we're only intended to
+      // consider a point along the y axis rather than a band.
+      const nscoord bandBlockEnd =
+        aBandInfoType == BandInfoType::BandFromPoint ? blockStart : blockEnd;
       if (floatStyle == StyleFloat::Left) {
         // A left float
-        nscoord lineRightEdge = fi.LineRight(aShapeType);
+        nscoord lineRightEdge =
+          fi.LineRight(aShapeType, blockStart, bandBlockEnd);
         if (lineRightEdge > lineLeft) {
           lineLeft = lineRightEdge;
           // Only set haveFloats to true if the float is inside our
           // containing block.  This matches the spec for what some
           // callers want and disagrees for other callers, so we should
           // probably provide better information at some point.
           haveFloats = true;
         }
       } else {
         // A right float
-        nscoord lineLeftEdge = fi.LineLeft(aShapeType);
+        nscoord lineLeftEdge =
+          fi.LineLeft(aShapeType, blockStart, bandBlockEnd);
         if (lineLeftEdge < lineRight) {
           lineRight = lineLeftEdge;
           // See above.
           haveFloats = true;
         }
       }
+
+      // Shrink our band's height if needed.
+      if (floatBEnd < blockEnd && aBandInfoType == BandInfoType::BandFromPoint) {
+        blockEnd = floatBEnd;
+      }
     }
   }
 
   nscoord blockSize = (blockEnd == nscoord_MAX) ?
                        nscoord_MAX : (blockEnd - blockStart);
   // convert back from LineLeft/Right to IStart
   nscoord inlineStart = aWM.IsBidiLTR()
                         ? lineLeft - mLineLeft
@@ -581,59 +588,166 @@ nsFloatManager::FloatInfo::FloatInfo(con
 
 nsFloatManager::FloatInfo::~FloatInfo()
 {
   MOZ_COUNT_DTOR(nsFloatManager::FloatInfo);
 }
 #endif
 
 nscoord
-nsFloatManager::FloatInfo::LineLeft(ShapeType aShapeType) const
+nsFloatManager::FloatInfo::LineLeft(ShapeType aShapeType,
+                                    const nscoord aBStart,
+                                    const nscoord aBEnd) const
 {
   if (aShapeType == ShapeType::Margin) {
     return LineLeft();
   }
 
   MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
   const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
   if (shapeOutside.GetType() == StyleShapeSourceType::None) {
     return LineLeft();
   }
 
   if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
-    return ShapeBoxRect().x;
+    nscoord radii[8];
+    bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
+
+    if (!hasRadii) {
+      return ShapeBoxRect().x;
+    }
+    // Bug 1316549: Fix non-ltr direction and writing-mode.
+    nscoord lineLeftDiff =
+      ComputeEllipseXInterceptDiff(
+        ShapeBoxRect().y, ShapeBoxRect().YMost(),
+        radii[NS_CORNER_TOP_LEFT_X], radii[NS_CORNER_TOP_LEFT_Y],
+        radii[NS_CORNER_BOTTOM_LEFT_X], radii[NS_CORNER_BOTTOM_LEFT_Y],
+        aBStart, aBEnd);
+    return ShapeBoxRect().x + lineLeftDiff;
   }
 
   // XXX: Other shape source types are not implemented yet.
 
   return LineLeft();
 }
 
 nscoord
-nsFloatManager::FloatInfo::LineRight(ShapeType aShapeType) const
+nsFloatManager::FloatInfo::LineRight(ShapeType aShapeType,
+                                     const nscoord aBStart,
+                                     const nscoord aBEnd) const
 {
   if (aShapeType == ShapeType::Margin) {
     return LineRight();
   }
 
   MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
   const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
   if (shapeOutside.GetType() == StyleShapeSourceType::None) {
     return LineRight();
   }
 
   if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
-    return ShapeBoxRect().XMost();
+    nscoord radii[8];
+    bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
+
+    if (!hasRadii) {
+      return ShapeBoxRect().XMost();
+    }
+    // Bug 1316549: Fix non-ltr direction and writing-mode.
+    nscoord lineRightDiff =
+      ComputeEllipseXInterceptDiff(
+        ShapeBoxRect().y, ShapeBoxRect().YMost(),
+        radii[NS_CORNER_TOP_RIGHT_X], radii[NS_CORNER_TOP_RIGHT_Y],
+        radii[NS_CORNER_BOTTOM_RIGHT_X], radii[NS_CORNER_BOTTOM_RIGHT_Y],
+        aBStart, aBEnd);
+    return ShapeBoxRect().XMost() - lineRightDiff;
   }
 
   // XXX: Other shape source types are not implemented yet.
 
   return LineRight();
 }
 
+/* static */ nscoord
+nsFloatManager::FloatInfo::ComputeEllipseXInterceptDiff(
+  const nscoord aShapeBoxY, const nscoord aShapeBoxYMost,
+  const nscoord aTopCornerRadiusX, const nscoord aTopCornerRadiusY,
+  const nscoord aBottomCornerRadiusX, const nscoord aBottomCornerRadiusY,
+  const nscoord aBandY, const nscoord aBandYMost)
+{
+  // An Example for the band intersects with the top right corner of an ellipse.
+  //
+  //                                xIntercept xDiff
+  //                                    |       |
+  //  +---------------------------------|-------|-+---- aShapeBoxY
+  //  |                ##########^      |       | |
+  //  |            ##############|####  |       | |
+  //  +---------#################|######|-------|-+---- aBandY
+  //  |       ###################|######|##     | |
+  //  |      # aTopCornerRadiusY |######|###    | |
+  //  |    ######################|######|#####  | |
+  //  +---#######################|<-----------><->^---- aBandYMost
+  //  |  ########################|##############  |
+  //  |  ########################|##############  |---- y
+  //  | #########################|############### |
+  //  | ######################## v<-------------->v
+  //  |######################### aTopCornerRadiusX|
+  //  |###########################################|
+  //  |###########################################|
+  //  |###########################################|
+  //  |###########################################|
+  //  | ######################################### |
+  //  | ######################################### |
+  //  |  #######################################  |
+  //  |  #######################################  |
+  //  |   #####################################   |
+  //  |    ###################################    |
+  //  |      ###############################      |
+  //  |       #############################       |
+  //  |         #########################         |
+  //  |            ###################            |
+  //  |                ###########                |
+  //  +-------------------------------------------+----- aShapeBoxYMost
+
+  NS_ASSERTION(aShapeBoxY <= aShapeBoxYMost, "Bad shape box coordinates!");
+  NS_ASSERTION(aBandY <= aBandYMost, "Bad band coordinates!");
+
+  nscoord xDiff = 0;
+
+  // If the band intersects both the top and bottom corners, we don't need
+  // to enter either branch because the correct xDiff is 0.
+  if (aBandYMost >= aShapeBoxY &&
+      aBandYMost <= aShapeBoxY + aTopCornerRadiusY) {
+    // The band intersects only the top corner.
+    nscoord y = aTopCornerRadiusY - (aBandYMost - aShapeBoxY);
+    nscoord xIntercept =
+      XInterceptAtY(y, aTopCornerRadiusX, aTopCornerRadiusY);
+    xDiff = aTopCornerRadiusX - xIntercept;
+  } else if (aBandY >= aShapeBoxYMost - aBottomCornerRadiusY &&
+             aBandY <= aShapeBoxYMost) {
+    // The band intersects only the bottom corner.
+    nscoord y = aBottomCornerRadiusY - (aShapeBoxYMost - aBandY);
+    nscoord xIntercept =
+      XInterceptAtY(y, aBottomCornerRadiusX, aBottomCornerRadiusY);
+    xDiff = aBottomCornerRadiusX - xIntercept;
+  }
+
+  return xDiff;
+}
+
+/* static */ nscoord
+nsFloatManager::FloatInfo::XInterceptAtY(const nscoord aY,
+                                         const nscoord aRadiusX,
+                                         const nscoord aRadiusY)
+{
+  // Solve for x in the ellipse equation (x/radiusX)^2 + (y/radiusY)^2 = 1.
+  MOZ_ASSERT(aRadiusY > 0);
+  return aRadiusX * std::sqrt(1 - (aY * aY) / double(aRadiusY * aRadiusY));
+}
+
 //----------------------------------------------------------------------
 
 nsAutoFloatManager::~nsAutoFloatManager()
 {
   // Restore the old float manager in the reflow input if necessary.
   if (mNew) {
 #ifdef DEBUG
     if (nsBlockFrame::gNoisyFloatManager) {

--- a/layout/generic/nsFloatManager.h
+++ b/layout/generic/nsFloatManager.h
@@ -326,27 +326,50 @@ private:
     nscoord LineRight() const { return mRect.XMost(); }
     nscoord ISize() const { return mRect.width; }
     nscoord BStart() const { return mRect.y; }
     nscoord BEnd() const { return mRect.YMost(); }
     nscoord BSize() const { return mRect.height; }
     bool IsEmpty() const { return mRect.IsEmpty(); }
 
     nsRect ShapeBoxRect() const { return mShapeBoxRect.valueOr(mRect); }
-    nscoord LineLeft(ShapeType aShapeType) const;
-    nscoord LineRight(ShapeType aShapeType) const;
+
+    // aBStart and aBEnd are the starting and ending coordinate of a band.
+    // LineLeft() and LineRight() return the innermost line-left extent and
+    // line-right extent within the given band, respectively.
+    nscoord LineLeft(ShapeType aShapeType, const nscoord aBStart,
+                     const nscoord aBEnd) const;
+    nscoord LineRight(ShapeType aShapeType, const nscoord aBStart,
+                     const nscoord aBEnd) const;
+
     nscoord BStart(ShapeType aShapeType) const
     {
       return aShapeType == ShapeType::Margin ? BStart() : ShapeBoxRect().y;
     }
     nscoord BEnd(ShapeType aShapeType) const
     {
       return aShapeType == ShapeType::Margin ? BEnd() : ShapeBoxRect().YMost();
     }
 
+    // Compute the minimum x-axis difference between the bounding shape box
+    // and its rounded corner within the given band (y-axis region). This is
+    // used as a helper function to compute the LineRight() and LineLeft().
+    // See the picture in the implementation for an example.
+    //
+    // Returns the x-axis diff, or 0 if there's no rounded corner within
+    // the given band.
+    static nscoord ComputeEllipseXInterceptDiff(
+      const nscoord aShapeBoxY, const nscoord aShapeBoxYMost,
+      const nscoord aTopCornerRadiusX, const nscoord aTopCornerRadiusY,
+      const nscoord aBottomCornerRadiusX, const nscoord aBottomCornerRadiusY,
+      const nscoord aBandY, const nscoord aBandYMost);
+
+    static nscoord XInterceptAtY(const nscoord aY, const nscoord aRadiusX,
+                                 const nscoord aRadiusY);
+
 #ifdef NS_BUILD_REFCNT_LOGGING
     FloatInfo(const FloatInfo& aOther);
     ~FloatInfo();
 #endif
 
     // NB! This is really a logical rect in a writing mode suitable for
     // placing floats, which is not necessarily the actual writing mode
     // either of the block which created the frame manager or the block

--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -1330,24 +1330,41 @@ nsIFrame::InsetBorderRadii(nscoord aRadi
     aRadii[hc1] = std::max(0, aRadii[hc1] - offset);
     aRadii[hc2] = std::max(0, aRadii[hc2] - offset);
   }
 }
 
 /* static */ void
 nsIFrame::OutsetBorderRadii(nscoord aRadii[8], const nsMargin &aOffsets)
 {
+  auto AdjustOffset = [] (const uint32_t aRadius, const nscoord aOffset) {
+    // Implement the cubic formula to adjust offset when aOffset > 0 and
+    // aRadius / aOffset < 1.
+    // https://drafts.csswg.org/css-shapes/#valdef-shape-box-margin-box
+    if (aOffset > 0) {
+      const double ratio = aRadius / double(aOffset);
+      if (ratio < 1.0) {
+        return nscoord(aOffset * (1.0 + std::pow(ratio - 1, 3)));
+      }
+    }
+    return aOffset;
+  };
+
   NS_FOR_CSS_SIDES(side) {
-    nscoord offset = aOffsets.Side(side);
-    uint32_t hc1 = NS_SIDE_TO_HALF_CORNER(side, false, false);
-    uint32_t hc2 = NS_SIDE_TO_HALF_CORNER(side, true, false);
-    if (aRadii[hc1] > 0)
-      aRadii[hc1] += offset;
-    if (aRadii[hc2] > 0)
-      aRadii[hc2] += offset;
+    const nscoord offset = aOffsets.Side(side);
+    const uint32_t hc1 = NS_SIDE_TO_HALF_CORNER(side, false, false);
+    const uint32_t hc2 = NS_SIDE_TO_HALF_CORNER(side, true, false);
+    if (aRadii[hc1] > 0) {
+      const nscoord offset1 = AdjustOffset(aRadii[hc1], offset);
+      aRadii[hc1] = std::max(0, aRadii[hc1] + offset1);
+    }
+    if (aRadii[hc2] > 0) {
+      const nscoord offset2 = AdjustOffset(aRadii[hc2], offset);
+      aRadii[hc2] = std::max(0, aRadii[hc2] + offset2);
+    }
   }
 }
 
 /* virtual */ bool
 nsIFrame::GetBorderRadii(const nsSize& aFrameSize, const nsSize& aBorderArea,
                          Sides aSkipSides, nscoord aRadii[8]) const
 {
   if (IsThemed()) {
@@ -1371,16 +1388,31 @@ nsIFrame::GetBorderRadii(const nsSize& a
 bool
 nsIFrame::GetBorderRadii(nscoord aRadii[8]) const
 {
   nsSize sz = GetSize();
   return GetBorderRadii(sz, sz, GetSkipSides(), aRadii);
 }
 
 bool
+nsIFrame::GetMarginBoxBorderRadii(nscoord aRadii[8]) const
+{
+  if (!GetBorderRadii(aRadii)) {
+    return false;
+  }
+  OutsetBorderRadii(aRadii, GetUsedMargin());
+  NS_FOR_CSS_HALF_CORNERS(corner) {
+    if (aRadii[corner]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+bool
 nsIFrame::GetPaddingBoxBorderRadii(nscoord aRadii[8]) const
 {
   if (!GetBorderRadii(aRadii))
     return false;
   InsetBorderRadii(aRadii, GetUsedBorder());
   NS_FOR_CSS_HALF_CORNERS(corner) {
     if (aRadii[corner])
       return true;
@@ -1396,16 +1428,34 @@ nsIFrame::GetContentBoxBorderRadii(nscoo
   InsetBorderRadii(aRadii, GetUsedBorderAndPadding());
   NS_FOR_CSS_HALF_CORNERS(corner) {
     if (aRadii[corner])
       return true;
   }
   return false;
 }
 
+bool
+nsIFrame::GetShapeBoxBorderRadii(nscoord aRadii[8]) const
+{
+  switch (StyleDisplay()->mShapeOutside.GetReferenceBox()) {
+    case StyleShapeOutsideShapeBox::NoBox:
+      return false;
+    case StyleShapeOutsideShapeBox::Content:
+      return GetContentBoxBorderRadii(aRadii);
+    case StyleShapeOutsideShapeBox::Padding:
+      return GetPaddingBoxBorderRadii(aRadii);
+    case StyleShapeOutsideShapeBox::Border:
+      return GetBorderRadii(aRadii);
+    case StyleShapeOutsideShapeBox::Margin:
+      return GetMarginBoxBorderRadii(aRadii);
+  }
+  return false;
+}
+
 nsStyleContext*
 nsFrame::GetAdditionalStyleContext(int32_t aIndex) const
 {
   NS_PRECONDITION(aIndex >= 0, "invalid index number");
   return nullptr;
 }
 
 void

--- a/layout/generic/nsIFrame.h
+++ b/layout/generic/nsIFrame.h
@@ -1167,25 +1167,30 @@ public:
   static void InsetBorderRadii(nscoord aRadii[8], const nsMargin &aOffsets);
   static void OutsetBorderRadii(nscoord aRadii[8], const nsMargin &aOffsets);
 
   /**
    * Fill in border radii for this frame.  Return whether any are nonzero.
    * Indices into aRadii are the NS_CORNER_* constants in nsStyleConsts.h
    * aSkipSides is a union of SIDE_BIT_LEFT/RIGHT/TOP/BOTTOM bits that says
    * which side(s) to skip.
+   *
+   * Note: GetMarginBoxBorderRadii() and GetShapeBoxBorderRadii() work only
+   * on frames that establish block formatting contexts since they don't
+   * participate in margin-collapsing.
    */
   virtual bool GetBorderRadii(const nsSize& aFrameSize,
                               const nsSize& aBorderArea,
                               Sides aSkipSides,
                               nscoord aRadii[8]) const;
   bool GetBorderRadii(nscoord aRadii[8]) const;
-
+  bool GetMarginBoxBorderRadii(nscoord aRadii[8]) const;
   bool GetPaddingBoxBorderRadii(nscoord aRadii[8]) const;
   bool GetContentBoxBorderRadii(nscoord aRadii[8]) const;
+  bool GetShapeBoxBorderRadii(nscoord aRadii[8]) const;
 
   /**
    * Get the position of the frame's baseline, relative to the top of
    * the frame (its top border edge).  Only valid when Reflow is not
    * needed.
    */
   virtual nscoord GetLogicalBaseline(mozilla::WritingMode aWritingMode) const = 0;
 

--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -4,8 +4,22 @@ default-preferences pref(layout.css.shap
 == 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
 == shape-outside-content-box-001.html shape-outside-content-box-001-ref.html
 == shape-outside-content-box-002.html shape-outside-content-box-002-ref.html
+
+# <shape-box> with border-radius
+== shape-outside-margin-box-border-radius-001.html shape-outside-margin-box-border-radius-001-ref.html
+fails == shape-outside-margin-box-border-radius-002.html shape-outside-margin-box-border-radius-002-ref.html # Bug 1309830
+== shape-outside-margin-box-border-radius-003.html shape-outside-margin-box-border-radius-003-ref.html
+fails == shape-outside-margin-box-border-radius-004.html shape-outside-margin-box-border-radius-004-ref.html # Bug 1309830
+== shape-outside-border-box-border-radius-001.html shape-outside-border-box-border-radius-001-ref.html
+fails == shape-outside-border-box-border-radius-002.html shape-outside-border-box-border-radius-002-ref.html # Bug 1309830
+== shape-outside-border-box-border-radius-003.html shape-outside-border-box-border-radius-003-ref.html
+fails == shape-outside-border-box-border-radius-004.html shape-outside-border-box-border-radius-004-ref.html # Bug 1309830
+== 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

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-001-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, border-box, border-radius 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: border-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
+    <div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
+    <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-001.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 left, border-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: border-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-002-ref.html
@@ -0,0 +1,43 @@
+<!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, border-box, border-radius, no margin 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: border-box; */
+    border-radius: 50%;
+    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: 24px; top: 0px; 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: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-002.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 left, border-box, border-radius, no margin</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: border-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    /* No margin. */
+    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: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-003-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: float right, border-box, border-radius 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: border-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
+    <div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
+    <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-003.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: float right, border-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-003-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: border-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-004-ref.html
@@ -0,0 +1,44 @@
+<!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, border-box, border-radius, no margin 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: border-box; */
+    border-radius: 50%;
+    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: 24px; top: 0px; 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: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-004.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 right, border-box, border-radius, no margin</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-004-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: border-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    /* No margin. */
+    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: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-border-radius-001-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, content-box, border-radius 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: content-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 120px;
+    width: 120px;
+    padding: 10px;
+    border: 5px solid lightgreen;
+    margin: 5px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
+    <div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
+    <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-border-radius-001.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 left, content-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-content-box-border-radius-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box and border-radius value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: content-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 120px;
+    width: 120px;
+    padding: 10px;
+    border: 5px solid lightgreen;
+    margin: 5px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-border-radius-002-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: float right, content-box, border-radius 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: content-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 120px;
+    width: 120px;
+    padding: 10px;
+    border: 5px solid lightgreen;
+    margin: 5px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
+    <div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
+    <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-border-radius-002.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: float right, content-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-content-box-border-radius-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box and border-radius value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: content-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 120px;
+    width: 120px;
+    padding: 10px;
+    border: 5px solid lightgreen;
+    margin: 5px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-border-radius-001-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, margin-box, border-radius 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: margin-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    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-margin-box-border-radius-001.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, margin-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-border-radius-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: margin-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    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-margin-box-border-radius-002-ref.html
@@ -0,0 +1,44 @@
+<!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, margin-box, border-radius 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: margin-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px; top: 0px; 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: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-border-radius-002.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 left, margin-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-border-radius-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: margin-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    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: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-border-radius-003-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, margin-box, border-radius 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: margin-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    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-margin-box-border-radius-003.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, margin-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-border-radius-003-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: margin-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    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-margin-box-border-radius-004-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, margin-box, border-radius 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: margin-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px; top: 0px; 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: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-border-radius-004.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, margin-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-border-radius-004-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: margin-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-border-radius-001-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, padding-box, border-radius 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: border-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 40px;
+    border: 10px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
+    <div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
+    <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-border-radius-001.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 left, padding-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-padding-box-border-radius-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box and border-radius value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: padding-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 40px;
+    border: 10px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-border-radius-002-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: float right, padding-box, border-radius 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: border-box; */
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 40px;
+    border: 10px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
+    <div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
+    <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space -->
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-border-radius-002.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: float right, padding-box, border-radius</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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-padding-box-border-radius-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box and border-radius value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: padding-box;
+    border-radius: 50%;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 40px;
+    border: 10px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+    <div class="longbox"></div> <!-- Saturate the margin and border space -->
+</body>
+</html>