Bug 1326409 Part 5 - Implement shape-outside: polygon(). r=dholbert
authorTing-Yu Lin <tlin@mozilla.com>
Mon, 13 Mar 2017 12:03:40 +0800
changeset 497502 8f39505ab1ec7e273b1d034b190599fcaa76d20f
parent 497501 64d9398934264d9c034a857b482e0f558440cb8b
child 497503 3080ed7f8562efdfd8d5827e939a4dfde37a4946
push id48933
push userbmo:james@hoppipolla.co.uk
push dateMon, 13 Mar 2017 13:53:04 +0000
reviewersdholbert
bugs1326409
milestone55.0a1
Bug 1326409 Part 5 - Implement shape-outside: polygon(). r=dholbert The <fill-rule> in the polygon() syntax is not handled because it doesn't matter to shape-outside at all. The reftests are numbered from 018 to avoid conflict with the w3c upstream ones according to this list. https://test.csswg.org/harness/results/css-shapes-1_dev/grouped/ Reftest 018 to 025 are under various writing-modes, 026 to 029 are testing empty float area, 030 to 031 are testing polygon containing horizontal lines. MozReview-Commit-ID: FPUbMdZsvu6
layout/generic/nsFloatManager.cpp
layout/generic/nsFloatManager.h
layout/reftests/w3c-css/submitted/shapes1/reftest.list
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-018-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-018.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-019-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-019.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-020-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-020.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-021-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-021.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-022-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-022.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-023-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-023.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-024-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-024.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-025-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-025.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-026-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-026.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-027-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-027.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-028.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-029.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-030-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-030.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-031-ref.html
layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-031.html
--- a/layout/generic/nsFloatManager.cpp
+++ b/layout/generic/nsFloatManager.cpp
@@ -3,16 +3,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* class that manages rules for positioning floats */
 
 #include "nsFloatManager.h"
 
 #include <algorithm>
+#include <initializer_list>
 
 #include "mozilla/ReflowInput.h"
 #include "mozilla/ShapeUtils.h"
 #include "nsBlockFrame.h"
 #include "nsError.h"
 #include "nsIPresShell.h"
 #include "nsMemory.h"
 
@@ -562,16 +563,17 @@ nsFloatManager::RoundedBoxShapeInfo::Lin
       mRadii[eCornerTopRightX], mRadii[eCornerTopRightY],
       mRadii[eCornerBottomRightX], mRadii[eCornerBottomRightY],
       aBStart, aBEnd);
   return mRect.XMost() - lineRightDiff;
 }
 
 /////////////////////////////////////////////////////////////////////////////
 // EllipseShapeInfo
+
 nscoord
 nsFloatManager::EllipseShapeInfo::LineLeft(const nscoord aBStart,
                                            const nscoord aBEnd) const
 {
   nscoord lineLeftDiff =
     ComputeEllipseLineInterceptDiff(BStart(), BEnd(),
                                     mRadii.width, mRadii.height,
                                     mRadii.width, mRadii.height,
@@ -587,16 +589,179 @@ nsFloatManager::EllipseShapeInfo::LineRi
     ComputeEllipseLineInterceptDiff(BStart(), BEnd(),
                                     mRadii.width, mRadii.height,
                                     mRadii.width, mRadii.height,
                                     aBStart, aBEnd);
   return mCenter.x + mRadii.width - lineRightDiff;
 }
 
 /////////////////////////////////////////////////////////////////////////////
+// PolygonShapeInfo
+
+nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(nsTArray<nsPoint>&& aVertices)
+  : mVertices(aVertices)
+{
+  // Polygons with fewer than three vertices result in an empty area.
+  // https://drafts.csswg.org/css-shapes/#funcdef-polygon
+  if (mVertices.Length() < 3) {
+    mEmpty = true;
+    return;
+  }
+
+  auto Determinant = [] (const nsPoint& aP0, const nsPoint& aP1) {
+    // Returns the determinant of the 2x2 matrix [aP0 aP1].
+    // https://en.wikipedia.org/wiki/Determinant#2_.C3.97_2_matrices
+    return aP0.x * aP1.y - aP0.y * aP1.x;
+  };
+
+  // See if we have any vertices that are non-collinear with the first two.
+  // (If a polygon's vertices are all collinear, it encloses no area.)
+  bool isEntirelyCollinear = true;
+  const nsPoint& p0 = mVertices[0];
+  const nsPoint& p1 = mVertices[1];
+  for (size_t i = 2; i < mVertices.Length(); ++i) {
+    const nsPoint& p2 = mVertices[i];
+
+    // If the determinant of the matrix formed by two points is 0, that
+    // means they're collinear with respect to the origin. Here, if it's
+    // nonzero, then p1 and p2 are non-collinear with respect to p0, i.e.
+    // the three points are non-collinear.
+    if (Determinant(p2 - p0, p1 - p0) != 0) {
+      isEntirelyCollinear = false;
+      break;
+    }
+  }
+
+  if (isEntirelyCollinear) {
+    mEmpty = true;
+    return;
+  }
+
+  // mBStart and mBEnd are the lower and the upper bounds of all the
+  // vertex.y, respectively. The vertex.y is actually on the block-axis of
+  // the float manager's writing mode.
+  for (const nsPoint& vertex : mVertices) {
+    mBStart = std::min(mBStart, vertex.y);
+    mBEnd = std::max(mBEnd, vertex.y);
+  }
+}
+
+nscoord
+nsFloatManager::PolygonShapeInfo::LineLeft(const nscoord aBStart,
+                                           const nscoord aBEnd) const
+{
+  MOZ_ASSERT(!mEmpty, "Shouldn't be called if the polygon encloses no area.");
+
+  // We want the line-left-most inline-axis coordinate where the
+  // (block-axis) aBStart/aBEnd band crosses a line segment of the polygon.
+  // To get that, we start as line-right as possible (at nscoord_MAX). Then
+  // we iterate each line segment to compute its intersection point with the
+  // band (if any) and using std::min() successively to get the smallest
+  // inline-coordinates among those intersection points.
+  //
+  // Note: std::min<nscoord> means the function std::min() with template
+  // parameter nscoord, not the minimum value of nscoord.
+  return ComputeLineIntercept(aBStart, aBEnd, std::min<nscoord>, nscoord_MAX);
+}
+
+nscoord
+nsFloatManager::PolygonShapeInfo::LineRight(const nscoord aBStart,
+                                            const nscoord aBEnd) const
+{
+  MOZ_ASSERT(!mEmpty, "Shouldn't be called if the polygon encloses no area.");
+
+  // Similar to LineLeft(). Though here, we want the line-right-most
+  // inline-axis coordinate, so we instead start at nscoord_MIN and use
+  // std::max() to get the biggest inline-coordinate among those
+  // intersection points.
+  return ComputeLineIntercept(aBStart, aBEnd, std::max<nscoord>, nscoord_MIN);
+}
+
+nscoord
+nsFloatManager::PolygonShapeInfo::ComputeLineIntercept(
+  const nscoord aBStart,
+  const nscoord aBEnd,
+  nscoord (*aCompareOp) (std::initializer_list<nscoord>),
+  const nscoord aLineInterceptInitialValue) const
+{
+  MOZ_ASSERT(aBStart <= aBEnd,
+             "The band's block start is greater than its block end?");
+
+  const size_t len = mVertices.Length();
+  nscoord lineIntercept = aLineInterceptInitialValue;
+
+  // Iterate each line segment {p0, p1}, {p1, p2}, ..., {pn, p0}.
+  for (size_t i = 0; i < len; ++i) {
+    const nsPoint* smallYVertex = &mVertices[i];
+    const nsPoint* bigYVertex = &mVertices[(i + 1) % len];
+
+    // Swap the two points to satisfy the requirement for calling
+    // XInterceptAtY.
+    if (smallYVertex->y > bigYVertex->y) {
+      std::swap(smallYVertex, bigYVertex);
+    }
+
+    if (aBStart >= bigYVertex->y || aBEnd <= smallYVertex->y ||
+        smallYVertex->y == bigYVertex->y) {
+      // Skip computing the intercept if a) the band doesn't intersect the
+      // line segment (even if it crosses one of two the vertices); or b)
+      // the line segment is horizontal. It's OK because the two end points
+      // forming this horizontal segment will still be considered if each of
+      // them is forming another non-horizontal segment with other points.
+      continue;
+    }
+
+    nscoord bStartLineIntercept =
+      aBStart <= smallYVertex->y
+        ? smallYVertex->x
+        : XInterceptAtY(aBStart, *smallYVertex, *bigYVertex);
+    nscoord bEndLineIntercept =
+      aBEnd >= bigYVertex->y
+        ? bigYVertex->x
+        : XInterceptAtY(aBEnd, *smallYVertex, *bigYVertex);
+
+    // If either new intercept is more extreme than lineIntercept (per
+    // aCompareOp), then update lineIntercept to that value.
+    lineIntercept =
+      aCompareOp({lineIntercept, bStartLineIntercept, bEndLineIntercept});
+  }
+
+  return lineIntercept;
+}
+
+void
+nsFloatManager::PolygonShapeInfo::Translate(nscoord aLineLeft,
+                                            nscoord aBlockStart)
+{
+  for (nsPoint& vertex : mVertices) {
+    vertex.MoveBy(aLineLeft, aBlockStart);
+  }
+  mBStart += aBlockStart;
+  mBEnd += aBlockStart;
+}
+
+/* static */ nscoord
+nsFloatManager::PolygonShapeInfo::XInterceptAtY(const nscoord aY,
+                                                const nsPoint& aP1,
+                                                const nsPoint& aP2)
+{
+  // Solve for x in the linear equation: x = x1 + (y-y1) * (x2-x1) / (y2-y1),
+  // where aP1 = (x1, y1) and aP2 = (x2, y2).
+
+  MOZ_ASSERT(aP1.y <= aY && aY <= aP2.y,
+             "This function won't work if the horizontal line at aY and "
+             "the line segment (aP1, aP2) do not intersect!");
+
+  MOZ_ASSERT(aP1.y != aP2.y,
+             "A horizontal line segment results in dividing by zero error!");
+
+  return aP1.x + (aY - aP1.y) * (aP2.x - aP1.x) / (aP2.y - aP1.y);
+}
+
+/////////////////////////////////////////////////////////////////////////////
 // FloatInfo
 
 nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
                                      nscoord aLineLeft, nscoord aBlockStart,
                                      const LogicalRect& aMarginRect,
                                      WritingMode aWM,
                                      const nsSize& aContainerSize)
   : mFrame(aFrame)
@@ -625,19 +790,20 @@ nsFloatManager::FloatInfo::FloatInfo(nsI
   if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
     mShapeInfo = ShapeInfo::CreateShapeBox(mFrame, shapeBoxRect, aWM,
                                            aContainerSize);
   } else if (shapeOutside.GetType() == StyleShapeSourceType::Shape) {
     StyleBasicShape* const basicShape = shapeOutside.GetBasicShape();
 
     switch (basicShape->GetShapeType()) {
       case StyleBasicShapeType::Polygon:
-        // Bug 1326409 - Implement the rendering of basic shape polygon()
-        // for CSS shape-outside.
-        return;
+        mShapeInfo =
+          ShapeInfo::CreatePolygon(basicShape, shapeBoxRect, aWM,
+                                   aContainerSize);
+        break;
       case StyleBasicShapeType::Circle:
       case StyleBasicShapeType::Ellipse:
         mShapeInfo =
           ShapeInfo::CreateCircleOrEllipse(basicShape, shapeBoxRect, aWM,
                                            aContainerSize);
         break;
       case StyleBasicShapeType::Inset:
         mShapeInfo =
@@ -873,16 +1039,40 @@ nsFloatManager::ShapeInfo::CreateCircleO
                                       physicalShapeBoxRect);
     LogicalSize logicalRadii(aWM, physicalRadii);
     radii = nsSize(logicalRadii.ISize(aWM), logicalRadii.BSize(aWM));
   }
 
   return MakeUnique<EllipseShapeInfo>(logicalCenter, radii);
 }
 
+/* static */ UniquePtr<nsFloatManager::ShapeInfo>
+nsFloatManager::ShapeInfo::CreatePolygon(
+  const StyleBasicShape* aBasicShape,
+  const LogicalRect& aShapeBoxRect,
+  WritingMode aWM,
+  const nsSize& aContainerSize)
+{
+  // Use physical coordinates to compute each (xi, yi) vertex because CSS
+  // represents them using physical coordinates.
+  // https://drafts.csswg.org/css-shapes-1/#funcdef-polygon
+  nsRect physicalShapeBoxRect =
+    aShapeBoxRect.GetPhysicalRect(aWM, aContainerSize);
+
+  // Get physical vertices.
+  nsTArray<nsPoint> vertices =
+    ShapeUtils::ComputePolygonVertices(aBasicShape, physicalShapeBoxRect);
+
+  // Convert all the physical vertices to logical.
+  for (nsPoint& vertex : vertices) {
+    vertex = ConvertToFloatLogical(vertex, aWM, aContainerSize);
+  }
+
+  return MakeUnique<PolygonShapeInfo>(Move(vertices));
+}
 
 /* static */ nscoord
 nsFloatManager::ShapeInfo::ComputeEllipseLineInterceptDiff(
   const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
   const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
   const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
   const nscoord aBandBStart, const nscoord aBandBEnd)
 {
--- a/layout/generic/nsFloatManager.h
+++ b/layout/generic/nsFloatManager.h
@@ -388,16 +388,22 @@ private:
       const nsSize& aContainerSize);
 
     static mozilla::UniquePtr<ShapeInfo> CreateCircleOrEllipse(
       mozilla::StyleBasicShape* const aBasicShape,
       const mozilla::LogicalRect& aShapeBoxRect,
       mozilla::WritingMode aWM,
       const nsSize& aContainerSize);
 
+    static mozilla::UniquePtr<ShapeInfo> CreatePolygon(
+      const mozilla::StyleBasicShape* aBasicShape,
+      const mozilla::LogicalRect& aShapeBoxRect,
+      mozilla::WritingMode aWM,
+      const nsSize& aContainerSize);
+
   protected:
     // Compute the minimum line-axis difference between the bounding shape
     // box and its rounded corner within the given band (block-axis region).
     // This is used as a helper function to compute the LineRight() and
     // LineLeft(). See the picture in the implementation for an example.
     // RadiusL and RadiusB stand for radius on the line-axis and block-axis.
     //
     // Returns radius-x diff on the line-axis, or 0 if there's no rounded
@@ -484,16 +490,63 @@ private:
     // The position of the center of the ellipse. The coordinate space is the
     // same as FloatInfo::mRect.
     nsPoint mCenter;
     // The radii of the ellipse in app units. The width and height represent
     // the line-axis and block-axis radii of the ellipse.
     nsSize mRadii;
   };
 
+  // Implements shape-outside: polygon().
+  class PolygonShapeInfo final : public ShapeInfo
+  {
+  public:
+    explicit PolygonShapeInfo(nsTArray<nsPoint>&& aVertices);
+
+    nscoord LineLeft(const nscoord aBStart,
+                     const nscoord aBEnd) const override;
+    nscoord LineRight(const nscoord aBStart,
+                      const nscoord aBEnd) const override;
+    nscoord BStart() const override { return mBStart; }
+    nscoord BEnd() const override { return mBEnd; }
+    bool IsEmpty() const override { return mEmpty; }
+
+    void Translate(nscoord aLineLeft, nscoord aBlockStart) override;
+
+  private:
+    // Helper method for implementing LineLeft() and LineRight().
+    nscoord ComputeLineIntercept(
+      const nscoord aBStart,
+      const nscoord aBEnd,
+      nscoord (*aCompareOp) (std::initializer_list<nscoord>),
+      const nscoord aLineInterceptInitialValue) const;
+
+    // Given a horizontal line y, and two points p1 and p2 forming a line
+    // segment L. Solve x for the intersection of y and L. This method
+    // assumes y and L do intersect, and L is *not* horizontal.
+    static nscoord XInterceptAtY(const nscoord aY,
+                                 const nsPoint& aP1,
+                                 const nsPoint& aP2);
+
+    // The vertices of the polygon in the float manager's coordinate space.
+    nsTArray<nsPoint> mVertices;
+
+    // If mEmpty is true, that means the polygon encloses no area.
+    bool mEmpty = false;
+
+    // Computed block start and block end value of the polygon shape.
+    //
+    // If mEmpty is false, their initial values nscoord_MAX and nscoord_MIN
+    // are used as sentinels for computing min() and max() in the
+    // constructor, and mBStart is guaranteed to be less than or equal to
+    // mBEnd. If mEmpty is true, their values do not matter.
+    nscoord mBStart = nscoord_MAX;
+    nscoord mBEnd = nscoord_MIN;
+  };
+
   struct FloatInfo {
     nsIFrame *const mFrame;
     // The lowest block-ends of left/right floats up to and including
     // this one.
     nscoord mLeftBEnd, mRightBEnd;
 
     FloatInfo(nsIFrame* aFrame, nscoord aLineLeft, nscoord aBlockStart,
               const mozilla::LogicalRect& aMarginRect,
--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -92,8 +92,24 @@ fails == shape-outside-border-box-border
 == shape-outside-inset-020.html shape-outside-inset-020-ref.html
 == shape-outside-inset-021.html shape-outside-inset-021-ref.html
 == shape-outside-inset-022.html shape-outside-inset-022-ref.html
 == shape-outside-inset-023.html shape-outside-inset-023-ref.html
 == shape-outside-inset-024.html shape-outside-inset-024-ref.html
 == shape-outside-inset-025.html shape-outside-inset-025-ref.html
 == shape-outside-inset-026.html shape-outside-inset-026-ref.html
 == shape-outside-inset-027.html shape-outside-inset-027-ref.html
+
+# Basic shape: polygon()
+== shape-outside-polygon-018.html shape-outside-polygon-018-ref.html
+== shape-outside-polygon-019.html shape-outside-polygon-019-ref.html
+== shape-outside-polygon-020.html shape-outside-polygon-020-ref.html
+== shape-outside-polygon-021.html shape-outside-polygon-021-ref.html
+== shape-outside-polygon-022.html shape-outside-polygon-022-ref.html
+== shape-outside-polygon-023.html shape-outside-polygon-023-ref.html
+== shape-outside-polygon-024.html shape-outside-polygon-024-ref.html
+== shape-outside-polygon-025.html shape-outside-polygon-025-ref.html
+== shape-outside-polygon-026.html shape-outside-polygon-026-ref.html
+== shape-outside-polygon-027.html shape-outside-polygon-027-ref.html
+== shape-outside-polygon-028.html shape-outside-polygon-026-ref.html
+== shape-outside-polygon-029.html shape-outside-polygon-027-ref.html
+== shape-outside-polygon-030.html shape-outside-polygon-030-ref.html
+== shape-outside-polygon-031.html shape-outside-polygon-031-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-018-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: horizontal-tb, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    writing-mode: horizontal-tb;
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px; top: 0; left: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="height: 30px; top: 30px; left: 100px;"></div>
+    <div class="box" style="height: 20px; top: 60px; left: 120px;"></div>
+    <div class="box" style="height: 20px; top: 80px; left: 80px;"></div>
+    <div class="box" style="height: 30px; top: 100px; left: 80px;"></div>
+    <div class="long box" style="height: 30px; top: 130px; left: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-018.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: horizontal-tb, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-018-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode.">
+  <style>
+  .container {
+    writing-mode: horizontal-tb;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-019-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    direction: rtl;
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px; top: 0; right: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
+    <div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
+    <div class="box" style="height: 20px; top: 80px; right: 120px;"></div>
+    <div class="box" style="height: 30px; top: 100px; right: 100px;"></div>
+    <div class="long box" style="height: 30px; top: 130px; right: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-019.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: horizontal-tb, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-019-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode.">
+  <style>
+  .container {
+    writing-mode: horizontal-tb;
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-020-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: vertical-rl, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    writing-mode: vertical-rl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    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: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
+    <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 100px;"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-020.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, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-020-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-rl writing-mode.">
+  <style>
+  .container {
+    writing-mode: vertical-rl;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-021-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: vertical-rl, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    writing-mode: vertical-rl;
+    direction: rtl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    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: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 100px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 120px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 80px;"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-021.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, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-021-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box 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: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-022-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: vertical-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    writing-mode: vertical-lr;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    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: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 100px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 120px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 80px;"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-022.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, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-022-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-lr writing-mode.">
+  <style>
+  .container {
+    writing-mode: vertical-lr;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-023-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: vertical-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    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: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
+    <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 100px;"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-023.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, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-023-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box 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: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-024-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: sideways-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    writing-mode: sideways-lr;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    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: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
+    <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 100px;"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-024.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, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-024-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under sideways-lr writing-mode.">
+  <style>
+  .container {
+    writing-mode: sideways-lr;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-025-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: sideways-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    writing-mode: sideways-lr;
+    direction: rtl;
+    position: absolute;
+    inline-size: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    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: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 100px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 120px;"></div>
+    <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 80px;"></div>
+    <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 80px;"></div>
+    <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-025.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: sideways-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-025-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box 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: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+    box-sizing: content-box;
+    block-size: 40px;
+    inline-size: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    inline-size: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    inline-size: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 20px;"></div>
+    <div class="box" style="block-size: 30px;"></div>
+    <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-026-ref.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 left, polygon(60px 20px, 100px 60px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px; top: 0; left: 0;"></div>
+    <div class="long box" style="height: 30px; top: 30px; left: 0;"></div>
+    <div class="long box" style="height: 20px; top: 60px; left: 0;"></div>
+    <div class="long box" style="height: 20px; top: 80px; left: 0;"></div>
+    <div class="long box" style="height: 30px; top: 100px; left: 0;"></div>
+    <div class="long box" style="height: 30px; top: 130px; left: 0;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-026.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, polygon(60px 20px, 100px 60px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-026-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Less than three vertices, resulting an empty area. */
+    shape-outside: polygon(60px 20px, 100px 60px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-027-ref.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, polygon(60px 20px, 100px 60px) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: polygon(60px 20px, 100px 60px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px; top: 0; right: 0;"></div>
+    <div class="long box" style="height: 30px; top: 30px; right: 0;"></div>
+    <div class="long box" style="height: 20px; top: 60px; right: 0;"></div>
+    <div class="long box" style="height: 20px; top: 80px; right: 0;"></div>
+    <div class="long box" style="height: 30px; top: 100px; right: 0;"></div>
+    <div class="long box" style="height: 30px; top: 130px; right: 0;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-027.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, polygon(60px 20px, 100px 60px) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-027-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Less than three vertices, resulting an empty area. */
+    shape-outside: polygon(60px 20px, 100px 60px) border-box;
+    clip-path: polygon(60px 20px, 100px 60px) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-028.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, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-026-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* All vertices are collinear, resulting an empty area. */
+    shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
+    clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-029.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, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-027-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* All vertices are collinear, resulting an empty area. */
+    shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
+    clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+
+  .long {
+    width: 200px;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 20px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+    <div class="long box" style="height: 30px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-030-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, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 80px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 30px; top: 0; left: 80px;"></div>
+    <div class="box" style="height: 30px; top: 30px; left: 80px;"></div>
+    <div class="box" style="height: 20px; top: 60px; left: 80px;"></div>
+    <div class="box" style="height: 20px; top: 80px; left: 80px;"></div>
+    <div class="box" style="height: 30px; top: 100px; left: 80px;"></div>
+    <div class="box" style="height: 30px; top: 130px; left: 80px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-030.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 left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-030-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* polygon contains horizontal lines. */
+    shape-outside: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
+    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 30px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-031-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, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    direction: rtl;
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 80px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 30px; top: 0; right: 80px;"></div>
+    <div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
+    <div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
+    <div class="box" style="height: 20px; top: 80px; right: 80px;"></div>
+    <div class="box" style="height: 30px; top: 100px; right: 80px;"></div>
+    <div class="box" style="height: 30px; top: 130px; right: 80px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-031.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-polygon-031-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* polygon contains horizontal lines. */
+    shape-outside: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
+    clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    margin: 20px;
+    border: 20px solid lightgreen;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 80px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 20px;"></div>
+    <div class="box" style="height: 30px;"></div>
+    <div class="box" style="height: 30px;"></div>
+  </body>
+</html>