--- a/layout/generic/nsFloatManager.cpp
+++ b/layout/generic/nsFloatManager.cpp
@@ -216,29 +216,29 @@ nsFloatManager::GetFlowArea(WritingMode 
 
       // 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, blockStart, bandBlockEnd);
+          fi.LineRight(aWM, 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, blockStart, bandBlockEnd);
+          fi.LineLeft(aWM, aShapeType, blockStart, bandBlockEnd);
         if (lineLeftEdge < lineRight) {
           lineRight = lineLeftEdge;
           // See above.
           haveFloats = true;
         }
       }
 
       // Shrink our band's height if needed.
@@ -588,17 +588,18 @@ nsFloatManager::FloatInfo::FloatInfo(con
 
 nsFloatManager::FloatInfo::~FloatInfo()
 {
   MOZ_COUNT_DTOR(nsFloatManager::FloatInfo);
 }
 #endif
 
 nscoord
-nsFloatManager::FloatInfo::LineLeft(ShapeType aShapeType,
+nsFloatManager::FloatInfo::LineLeft(WritingMode aWM,
+                                    ShapeType aShapeType,
                                     const nscoord aBStart,
                                     const nscoord aBEnd) const
 {
   if (aShapeType == ShapeType::Margin) {
     return LineLeft();
   }
 
   MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
@@ -609,33 +610,54 @@ nsFloatManager::FloatInfo::LineLeft(Shap
 
   if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
     nscoord radii[8];
     bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
 
     if (!hasRadii) {
       return ShapeBoxRect().x;
     }
-    // Bug 1316549: Fix non-ltr direction and writing-mode.
+
+    // Get the physical side for line-left since border-radii are in
+    // the physical axis.
+    mozilla::Side lineLeftSide =
+      aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirLeft));
+    nscoord blockStartCornerRadiusL =
+      radii[NS_SIDE_TO_HALF_CORNER(lineLeftSide, true, false)];
+    nscoord blockStartCornerRadiusB =
+      radii[NS_SIDE_TO_HALF_CORNER(lineLeftSide, true, true)];
+    nscoord blockEndCornerRadiusL =
+      radii[NS_SIDE_TO_HALF_CORNER(lineLeftSide, false, false)];
+    nscoord blockEndCornerRadiusB =
+      radii[NS_SIDE_TO_HALF_CORNER(lineLeftSide, false, true)];
+
+    if (aWM.IsLineInverted()) {
+      // This happens only when aWM is vertical-lr. Need to swap blockStart
+      // and blockEnd corners.
+      std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
+      std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
+    }
+
     nscoord lineLeftDiff =
       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],
+        blockStartCornerRadiusL, blockStartCornerRadiusB,
+        blockEndCornerRadiusL, blockEndCornerRadiusB,
         aBStart, aBEnd);
     return ShapeBoxRect().x + lineLeftDiff;
   }
 
   // XXX: Other shape source types are not implemented yet.
 
   return LineLeft();
 }
 
 nscoord
-nsFloatManager::FloatInfo::LineRight(ShapeType aShapeType,
+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);
@@ -646,22 +668,42 @@ nsFloatManager::FloatInfo::LineRight(Sha
 
   if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
     nscoord radii[8];
     bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
 
     if (!hasRadii) {
       return ShapeBoxRect().XMost();
     }
-    // Bug 1316549: Fix non-ltr direction and writing-mode.
+
+    // Get the physical side for line-right since border-radii are in
+    // the physical axis.
+    mozilla::Side lineRightSide =
+      aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirRight));
+    nscoord blockStartCornerRadiusL =
+      radii[NS_SIDE_TO_HALF_CORNER(lineRightSide, false, false)];
+    nscoord blockStartCornerRadiusB =
+      radii[NS_SIDE_TO_HALF_CORNER(lineRightSide, false, true)];
+    nscoord blockEndCornerRadiusL =
+      radii[NS_SIDE_TO_HALF_CORNER(lineRightSide, true, false)];
+    nscoord blockEndCornerRadiusB =
+      radii[NS_SIDE_TO_HALF_CORNER(lineRightSide, true, true)];
+
+    if (aWM.IsLineInverted()) {
+      // This happens only when aWM is vertical-lr. Need to swap blockStart
+      // and blockEnd corners.
+      std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
+      std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
+    }
+
     nscoord lineRightDiff =
       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],
+        blockStartCornerRadiusL, blockStartCornerRadiusB,
+        blockEndCornerRadiusL, blockEndCornerRadiusB,
         aBStart, aBEnd);
     return ShapeBoxRect().XMost() - lineRightDiff;
   }
 
   // XXX: Other shape source types are not implemented yet.
 
   return LineRight();
 }

--- a/layout/generic/nsFloatManager.h
+++ b/layout/generic/nsFloatManager.h
@@ -330,20 +330,20 @@ private:
     nscoord BSize() const { return mRect.height; }
     bool IsEmpty() const { return mRect.IsEmpty(); }
 
     nsRect ShapeBoxRect() const { return mShapeBoxRect.valueOr(mRect); }
 
     // aBStart and aBEnd are the starting and ending coordinate of a band.
     // LineLeft() and LineRight() return the innermost line-left extent and
     // line-right extent within the given band, respectively.
-    nscoord LineLeft(ShapeType aShapeType, const nscoord aBStart,
-                     const nscoord aBEnd) const;
-    nscoord LineRight(ShapeType aShapeType, const nscoord aBStart,
-                     const nscoord aBEnd) const;
+    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
     {
       return aShapeType == ShapeType::Margin ? BStart() : ShapeBoxRect().y;
     }
     nscoord BEnd(ShapeType aShapeType) const
     {
       return aShapeType == ShapeType::Margin ? BEnd() : ShapeBoxRect().YMost();

--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -12,16 +12,26 @@ default-preferences pref(layout.css.shap
 
 # <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-margin-box-border-radius-005.html shape-outside-margin-box-border-radius-005-ref.html
 == shape-outside-margin-box-border-radius-006.html shape-outside-margin-box-border-radius-006-ref.html
+== shape-outside-margin-box-border-radius-007.html shape-outside-margin-box-border-radius-007-ref.html
+== shape-outside-margin-box-border-radius-008.html shape-outside-margin-box-border-radius-008-ref.html
 == 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-border-box-border-radius-005.html shape-outside-border-box-border-radius-005-ref.html
+== shape-outside-border-box-border-radius-006.html shape-outside-border-box-border-radius-006-ref.html
+== shape-outside-border-box-border-radius-007.html shape-outside-border-box-border-radius-007-ref.html
+== shape-outside-border-box-border-radius-008.html shape-outside-border-box-border-radius-008-ref.html
+== 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

new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-005-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, border-box, border-bottom-right-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 {
+    writing-mode: vertical-rl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: border-box; */
+    border-bottom-right-radius: 50%;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-005.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 left, border-box, border-bottom-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-005-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-bottom-right-radius value under vertical-rl writing-mode.">
+  <style>
+  .container {
+    writing-mode: vertical-rl;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: border-box;
+    border-bottom-right-radius: 50%;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-006-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, border-box, border-top-right-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 {
+    writing-mode: vertical-rl;
+    direction: rtl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: border-box; */
+    border-top-right-radius: 50%;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-006.html
@@ -0,0 +1,58 @@
+<!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, border-box, border-top-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-006-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-top-right-radius 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: border-box;
+    border-top-right-radius: 50%;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-007-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, border-box, border-bottom-right-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 {
+    writing-mode: vertical-lr;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: border-box; */
+    border-bottom-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-007.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 left, border-box, border-bottom-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-007-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-bottom-right-radius value under vertical-lr writing-mode.">
+  <style>
+  .container {
+    writing-mode: vertical-lr;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: border-box;
+    border-bottom-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-008-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-lr, float right, border-box, border-top-right-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 {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: border-box; */
+    border-top-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-008.html
@@ -0,0 +1,58 @@
+<!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, border-box, border-top-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-008-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-top-right-radius 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: border-box;
+    border-top-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-009-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-rl, float left, border-box, border-bottom-right-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 {
+    writing-mode: sideways-rl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: border-box; */
+    border-bottom-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-009.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-rl, float left, border-box, border-bottom-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-009-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-bottom-right-radius value under sideways-rl writing-mode.">
+  <style>
+  .container {
+    writing-mode: sideways-rl;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: border-box;
+    border-bottom-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-010-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-rl, float right, border-box, border-top-right-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 {
+    writing-mode: sideways-rl;
+    direction: rtl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: border-box; */
+    border-top-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-010.html
@@ -0,0 +1,58 @@
+<!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-rl, float right, border-box, border-top-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-010-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-top-right-radius value under sideways-rl writing-mode.">
+  <style>
+  .container {
+    writing-mode: sideways-rl;
+    direction: rtl;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: border-box;
+    border-top-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-011-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, border-box, border-top-right-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 {
+    writing-mode: sideways-lr;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: border-box; */
+    border-top-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-011.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 left, border-box, border-top-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-011-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-top-right-radius value under sideways-lr writing-mode.">
+  <style>
+  .container {
+    writing-mode: sideways-lr;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: border-box;
+    border-top-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-012-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 left, border-box, border-bottom-right-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 {
+    writing-mode: sideways-lr;
+    direction: rtl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: border-box; */
+    border-bottom-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    position: absolute;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
+    <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
+    <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
+    <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 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-012.html
@@ -0,0 +1,58 @@
+<!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, border-box, border-bottom-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-border-radius-012-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-bottom-right-radius 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: border-box;
+    border-bottom-right-radius: 60px 40px;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 60px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    inline-size: 200px;
+    block-size: 20px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box" style="block-size: 24px;"></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: 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-margin-box-border-radius-007-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 left in rtl container, margin-box, border-top-right-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>
+  .bfc {
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+    direction: ltr;
+  }
+
+  .container {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: margin-box; */
+    border-top-right-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="bfc">
+    <span class="container">
+      <div class="shape"></div>
+    </span>
+    <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: 120px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 12px; top: 108px; left: 120px;"></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-007.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 left in rtl container, margin-box, border-top-right-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-border-radius-007-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape in rtl container defined by the margin-box and border-top-right-radius value.">
+  <style>
+  .bfc {
+    width: 200px;
+    line-height: 0;
+    direction: ltr;
+  }
+
+  .container {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: margin-box;
+    border-top-right-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="bfc">
+    <span class="container">
+      <div class="shape"></div>
+    </span>
+    <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-008-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 in ltr container, margin-box, border-top-left-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>
+  .bfc {
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+    direction: rtl;
+  }
+
+  .container {
+    direction: ltr;
+    unicode-bidi: bidi-override;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: margin-box; */
+    border-top-left-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="bfc">
+    <span class="container">
+      <div class="shape"></div>
+    </span>
+    <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: 120px;"></div> <!-- Box at corner -->
+    <div class="box" style="height: 12px; top: 108px; right: 120px;"></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-008.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 in ltr container, margin-box, border-top-left-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-1/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-border-radius-008-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape in ltr container defined by the margin-box and border-top-left-radius value.">
+  <style>
+  .bfc {
+    width: 200px;
+    line-height: 0;
+    direction: rtl;
+  }
+
+  .container {
+    direction: ltr;
+    unicode-bidi: bidi-override;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: margin-box;
+    border-top-left-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="bfc">
+    <span class="container">
+      <div class="shape"></div>
+    </span>
+    <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>