Merge mozilla-central to autoland. a=merge CLOSED TREE
authorGurzau Raul <rgurzau@mozilla.com>
Sat, 02 Jun 2018 05:10:54 +0300
changeset 475296 52503242b45eb78cf5f68ea6bd467070b4ff9bf2
parent 475295 d44a49e38c6c5aec72593011e9b90504bf7a89b9 (current diff)
parent 475087 8c926373039374cd1a47d92215e9efb4d5557983 (diff)
child 475297 9a5f5fa5cfa0a6fe45eb7685fb1798529e8f406a
push id9374
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:43:20 +0000
treeherdermozilla-beta@160e085dfb0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmerge
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Merge mozilla-central to autoland. a=merge CLOSED TREE
layout/reftests/css-shapes/shape-outside-empty-circle-1.html
layout/reftests/css-shapes/shape-outside-empty-circle-2.html
layout/reftests/css-shapes/shape-outside-empty-circle-3.html
layout/reftests/css-shapes/shape-outside-empty-circle-ref.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html
layout/reftests/css-shapes/shape-outside-empty-inset-1.html
layout/reftests/css-shapes/shape-outside-empty-inset-2.html
layout/reftests/css-shapes/shape-outside-empty-inset-3.html
layout/reftests/css-shapes/shape-outside-empty-inset-4.html
layout/reftests/css-shapes/shape-outside-empty-inset-5.html
layout/reftests/css-shapes/shape-outside-empty-inset-6.html
layout/reftests/css-shapes/shape-outside-empty-inset-7.html
layout/reftests/css-shapes/shape-outside-empty-inset-8.html
layout/reftests/css-shapes/shape-outside-empty-line-ref.html
layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html
layout/reftests/css-shapes/shape-outside-empty-point-ref.html
layout/reftests/css-shapes/shape-outside-empty-polygon-1.html
layout/reftests/css-shapes/shape-outside-empty-polygon-2.html
layout/reftests/css-shapes/shape-outside-empty-polygon-3.html
layout/reftests/css-shapes/shape-outside-empty-polygon-4.html
layout/reftests/css-shapes/shape-outside-empty-polygon-5.html
layout/reftests/css-shapes/shape-outside-empty-polygon-6.html
layout/reftests/css-shapes/shape-outside-empty-polygon-7.html
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/css/css-shapes/spec-examples/shape-outside-004.html.ini
--- a/layout/base/ShapeUtils.cpp
+++ b/layout/base/ShapeUtils.cpp
@@ -119,39 +119,25 @@ ShapeUtils::ComputeInsetRect(const Uniqu
                              const nsRect& aRefBox)
 {
   MOZ_ASSERT(aBasicShape->GetShapeType() == StyleBasicShapeType::Inset,
              "The basic shape must be inset()!");
 
   const nsTArray<nsStyleCoord>& coords = aBasicShape->Coordinates();
   MOZ_ASSERT(coords.Length() == 4, "wrong number of arguments");
 
-  nsMargin inset(coords[0].ComputeCoordPercentCalc(aRefBox.Height()),
-                 coords[1].ComputeCoordPercentCalc(aRefBox.Width()),
-                 coords[2].ComputeCoordPercentCalc(aRefBox.Height()),
-                 coords[3].ComputeCoordPercentCalc(aRefBox.Width()));
-
-  nscoord x = aRefBox.X() + inset.left;
-  nscoord width = aRefBox.Width() - inset.LeftRight();
-  nscoord y = aRefBox.Y() + inset.top;
-  nscoord height = aRefBox.Height() - inset.TopBottom();
+  nsMargin inset(coords[0].ComputeCoordPercentCalc(aRefBox.height),
+                 coords[1].ComputeCoordPercentCalc(aRefBox.width),
+                 coords[2].ComputeCoordPercentCalc(aRefBox.height),
+                 coords[3].ComputeCoordPercentCalc(aRefBox.width));
 
-  // Invert left and right, if necessary.
-  if (width < 0) {
-    width *= -1;
-    x -= width;
-  }
+  nsRect insetRect(aRefBox);
+  insetRect.Deflate(inset);
 
-  // Invert top and bottom, if necessary.
-  if (height < 0) {
-    height *= -1;
-    y -= height;
-  }
-
-  return nsRect(x, y, width, height);
+  return insetRect;
 }
 
 /* static */ bool
 ShapeUtils::ComputeInsetRadii(const UniquePtr<StyleBasicShape>& aBasicShape,
                               const nsRect& aInsetRect,
                               const nsRect& aRefBox,
                               nscoord aRadii[8])
 {
--- a/layout/base/ShapeUtils.h
+++ b/layout/base/ShapeUtils.h
@@ -52,26 +52,17 @@ struct ShapeUtils final
   // @param aCenter the center of the ellipse.
   // @param aRefBox the reference box of the ellipse.
   // @return The radii of the ellipse in app units. The width and height
   // represent the x-axis and y-axis radii of the ellipse.
   static nsSize ComputeEllipseRadii(
     const UniquePtr<StyleBasicShape>& aBasicShape,
     const nsPoint& aCenter, const nsRect& aRefBox);
 
-  // Compute the rect for an inset. If the inset amount is larger than
-  // aRefBox itself, this will return a rect the same shape as the inverse
-  // rect that would be created by insetting aRefBox by the inset amount.
-  // This process is *not* what is called for by the current spec at
-  // https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes.
-  // The spec currently treats empty shapes, including overly-inset rects, as
-  // defining 'empty float areas' that don't affect layout. However, it is
-  // practically useful to treat empty shapes as having edges for purposes of
-  // affecting layout, and there is growing momentum for the approach we
-  // are taking here.
+  // Compute the rect for an inset.
   // @param aRefBox the reference box of the inset.
   // @return The inset rect in app units.
   static nsRect ComputeInsetRect(
     const UniquePtr<StyleBasicShape>& aBasicShape,
     const nsRect& aRefBox);
 
   // Compute the radii for an inset.
   // @param aRefBox the reference box of the inset.
--- a/layout/generic/nsFloatManager.cpp
+++ b/layout/generic/nsFloatManager.cpp
@@ -725,20 +725,17 @@ public:
                     const nscoord aBEnd) const override;
   nscoord BStart() const override {
     return mCenter.y - mRadii.height - mShapeMargin;
   }
   nscoord BEnd() const override {
     return mCenter.y + mRadii.height + mShapeMargin;
   }
   bool IsEmpty() const override {
-    // An EllipseShapeInfo is never empty, because an ellipse or circle with
-    // a zero radius acts like a point, and an ellipse with one zero radius
-    // acts like a line.
-    return false;
+    return mRadii.IsEmpty();
   }
 
   void Translate(nscoord aLineLeft, nscoord aBlockStart) override
   {
     mCenter.MoveBy(aLineLeft, aBlockStart);
 
     for (nsRect& interval : mIntervals) {
       interval.MoveBy(aLineLeft, aBlockStart);
@@ -864,46 +861,38 @@ nsFloatManager::EllipseShapeInfo::Ellips
     bool bIsInExpandedRegion(b < bExpand);
     nscoord bInAppUnits = (b - bExpand) * aAppUnitsPerDevPixel;
     bool bIsMoreThanEllipseBEnd(bInAppUnits > mRadii.height);
 
     // Find the i intercept of the ellipse edge for this block row, and
     // adjust it to compensate for the expansion of the inline dimension.
     // If we're in the expanded region, or if we're using a b that's more
     // than the bEnd of the ellipse, the intercept is nscoord_MIN.
-    // We have one other special case to consider: when the ellipse has no
-    // height. In that case we treat the bInAppUnits == 0 case as
-    // intercepting at the width of the ellipse. All other cases solve
-    // the intersection mathematically.
-    const int32_t iIntercept =
-      (bIsInExpandedRegion || bIsMoreThanEllipseBEnd) ? nscoord_MIN :
+    const int32_t iIntercept = (bIsInExpandedRegion ||
+                                bIsMoreThanEllipseBEnd) ? nscoord_MIN :
       iExpand + NSAppUnitsToIntPixels(
-        (!!mRadii.height || bInAppUnits) ?
-        XInterceptAtY(bInAppUnits, mRadii.width, mRadii.height) :
-        mRadii.width,
+        XInterceptAtY(bInAppUnits, mRadii.width, mRadii.height),
         aAppUnitsPerDevPixel);
 
     // Set iMax in preparation for this block row.
     int32_t iMax = iIntercept;
 
     for (uint32_t i = 0; i < iSize; ++i) {
       const uint32_t index = i + b * iSize;
       MOZ_ASSERT(index < (iSize * bSize),
                  "Our distance field index should be in-bounds.");
 
       // Handle our three cases, in order.
       if (i < iExpand ||
           bIsInExpandedRegion) {
         // Case 1: Expanded reqion pixel.
         df[index] = MAX_MARGIN_5X;
       } else if ((int32_t)i <= iIntercept) {
-        // Case 2: Pixel within the ellipse, or just outside the edge of it.
-        // Having a positive height indicates that there's an area we can
-        // be inside of.
-        df[index] = (!!mRadii.height) ? 0 : 5;
+        // Case 2: Pixel within the ellipse.
+        df[index] = 0;
       } else {
         // Case 3: Other pixel.
 
         // Backward-looking neighborhood distance from target pixel X
         // with chamfer 5-7-11 looks like:
         //
         // +--+--+--+
         // |  |11|  |
@@ -1079,23 +1068,17 @@ public:
                       int32_t aAppUnitsPerDevPixel);
 
   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 mRect.y; }
   nscoord BEnd() const override { return mRect.YMost(); }
-  bool IsEmpty() const override {
-    // A RoundedBoxShapeInfo is never empty, because if it is collapsed to
-    // zero area, it acts like a point. If it is collapsed further, to become
-    // inside-out, it acts like a rect in the same shape as the inside-out
-    // rect.
-    return false;
-  }
+  bool IsEmpty() const override { return mRect.IsEmpty(); }
 
   void Translate(nscoord aLineLeft, nscoord aBlockStart) override
   {
     mRect.MoveBy(aLineLeft, aBlockStart);
 
     if (mShapeMargin > 0) {
       MOZ_ASSERT(mLogicalTopLeftCorner && mLogicalTopRightCorner &&
                  mLogicalBottomLeftCorner && mLogicalBottomRightCorner,
@@ -1272,30 +1255,24 @@ public:
                    const nsRect& aMarginRect);
 
   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 {
-    // A PolygonShapeInfo is never empty, because the parser prevents us from
-    // creating a shape with no vertices. If we only have 1 vertex, the
-    // shape acts like a point. With 2 non-coincident vertices, the shape
-    // acts like a line.
-    return false;
-  }
+  bool IsEmpty() const override { return mEmpty; }
 
   void Translate(nscoord aLineLeft, nscoord aBlockStart) override;
 
 private:
-  // Helper method for determining the mBStart and mBEnd based on the
-  // vertices' y extent.
-  void ComputeExtent();
+  // Helper method for determining if the vertices define a float area at
+  // all, and to set mBStart and mBEnd based on the vertices' y extent.
+  void ComputeEmptinessAndExtent();
 
   // 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;
 
@@ -1313,41 +1290,52 @@ private:
   // These are only generated and used in float area calculations for
   // shape-margin > 0. Each interval is a rectangle that is one device pixel
   // deep in the block axis. The values are stored as block edges in the y
   // coordinates, and inline edges as the x coordinates.
 
   // The intervals are stored in ascending order on y.
   nsTArray<nsRect> mIntervals;
 
-  // Computed block start and block end value of the polygon shape. These
-  // initial values are set to correct values in ComputeExtent(), which is
-  // called from all constructors. Afterwards, mBStart is guaranteed to be
-  // less than or equal to mBEnd.
+  // 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;
 };
 
 nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(nsTArray<nsPoint>&& aVertices)
   : mVertices(aVertices)
 {
-  ComputeExtent();
+  ComputeEmptinessAndExtent();
 }
 
 nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(
   nsTArray<nsPoint>&& aVertices,
   nscoord aShapeMargin,
   int32_t aAppUnitsPerDevPixel,
   const nsRect& aMarginRect)
   : mVertices(aVertices)
 {
   MOZ_ASSERT(aShapeMargin > 0, "This constructor should only be used for a "
                                "polygon with a positive shape-margin.");
 
-  ComputeExtent();
+  ComputeEmptinessAndExtent();
+
+  // If we're empty, then the float area stays empty, even with a positive
+  // shape-margin.
+  if (mEmpty) {
+    return;
+  }
 
   // With a positive aShapeMargin, we have to calculate a distance
   // field from the opaque pixels, then build intervals based on
   // them being within aShapeMargin distance to an opaque pixel.
 
   // Roughly: for each pixel in the margin box, we need to determine the
   // distance to the nearest opaque image-pixel.  If that distance is less
   // than aShapeMargin, we consider this margin-box pixel as being part of
@@ -1426,17 +1414,17 @@ nsFloatManager::PolygonShapeInfo::Polygo
     // the right edge of the polygon at one-dev-pixel-thick strip of b. We
     // have a ComputeLineIntercept function that takes and returns app unit
     // coordinates in the space of aMarginRect. So to pass in b values, we
     // first have to add the aMarginRect.y value. And for the values that we
     // get out, we have to subtract away the aMarginRect.x value before
     // converting the app units to dev pixels.
     nscoord bInAppUnitsMarginRect = bInAppUnits + aMarginRect.y;
     bool bIsLessThanPolygonBStart(bInAppUnitsMarginRect < mBStart);
-    bool bIsMoreThanPolygonBEnd(bInAppUnitsMarginRect > mBEnd);
+    bool bIsMoreThanPolygonBEnd(bInAppUnitsMarginRect >= mBEnd);
 
     const int32_t iLeftEdge = (bIsInExpandedRegion ||
                                bIsLessThanPolygonBStart ||
                                bIsMoreThanPolygonBEnd) ? nscoord_MAX :
       kiExpansionPerSide + NSAppUnitsToIntPixels(
         ComputeLineIntercept(bInAppUnitsMarginRect,
                              bInAppUnitsMarginRect + aAppUnitsPerDevPixel,
                              std::min<nscoord>, nscoord_MAX) - aMarginRect.x,
@@ -1457,21 +1445,19 @@ nsFloatManager::PolygonShapeInfo::Polygo
                  "Our distance field index should be in-bounds.");
 
       // Handle our three cases, in order.
       if (i < kiExpansionPerSide ||
           i >= iSize - kiExpansionPerSide ||
           bIsInExpandedRegion) {
         // Case 1: Expanded pixel.
         df[index] = MAX_MARGIN_5X;
-      } else if ((int32_t)i >= iLeftEdge && (int32_t)i <= iRightEdge) {
-        // Case 2: Polygon pixel, either inside or just adjacent to the right
-        // edge. We need this special distinction to detect a space between
-        // edges that is less than one dev pixel.
-        df[index] = (int32_t)i < iRightEdge ? 0 : 5;
+      } else if ((int32_t)i >= iLeftEdge && (int32_t)i < iRightEdge) {
+        // Case 2: Polygon pixel.
+        df[index] = 0;
       } else {
         // Case 3: Other pixel.
 
         // Backward-looking neighborhood distance from target pixel X
         // with chamfer 5-7-11 looks like:
         //
         // +--+--+--+--+--+
         // |  |11|  |11|  |
@@ -1614,16 +1600,18 @@ nsFloatManager::PolygonShapeInfo::Polygo
   mBStart = std::min(mBStart, mBStart - aShapeMargin);
   mBEnd = std::max(mBEnd, mBEnd + aShapeMargin);
 }
 
 nscoord
 nsFloatManager::PolygonShapeInfo::LineLeft(const nscoord aBStart,
                                            const nscoord aBEnd) const
 {
+  MOZ_ASSERT(!mEmpty, "Shouldn't be called if the polygon encloses no area.");
+
   // Use intervals if we have them.
   if (!mIntervals.IsEmpty()) {
     return LineEdge(mIntervals, aBStart, aBEnd, true);
   }
 
   // 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
@@ -1635,117 +1623,120 @@ nsFloatManager::PolygonShapeInfo::LineLe
   // 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.");
+
   // Use intervals if we have them.
   if (!mIntervals.IsEmpty()) {
     return LineEdge(mIntervals, aBStart, aBEnd, false);
   }
 
   // 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);
 }
 
 void
-nsFloatManager::PolygonShapeInfo::ComputeExtent()
+nsFloatManager::PolygonShapeInfo::ComputeEmptinessAndExtent()
 {
+  // 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);
   }
-
-  MOZ_ASSERT(mBStart <= mBEnd, "Start of float area should be less than "
-                               "or equal to the end.");
 }
 
 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;
 
-  // We have some special treatment of horizontal lines between vertices.
-  // Generally, we can ignore the impact of the horizontal lines since their
-  // endpoints will be included in the lines preceeding or following them.
-  // However, it's possible the polygon is entirely a horizontal line,
-  // possibly built from more than one horizontal segment. In such a case,
-  // we need to have the horizontal line(s) contribute to the line intercepts.
-  // We do this by accepting horizontal lines until we find a non-horizontal
-  // line, after which all further horizontal lines are ignored.
-  bool canIgnoreHorizontalLines = false;
-
   // 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);
     }
 
-    // Generally, we need to ignore line segments that either don't intersect
-    // the band, or merely touch it. However, if the polygon has no block extent
-    // (it is a point, or a horizontal line), and the band touches the line
-    // segment, we let that line segment through.
-    if ((aBStart >= bigYVertex->y || aBEnd <= smallYVertex->y) &&
-        !(mBStart == mBEnd && aBStart == bigYVertex->y)) {
-      // Skip computing the intercept if the band doesn't intersect the
-      // line segment.
+    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;
-    nscoord bEndLineIntercept;
-
-    if (smallYVertex->y == bigYVertex->y) {
-      // The line is horizontal; see if we can ignore it.
-      if (canIgnoreHorizontalLines) {
-        continue;
-      }
-
-      // For a horizontal line that we can't ignore, we treat the two x value
-      // ends as the bStartLineIntercept and bEndLineIntercept. It doesn't
-      // matter which is applied to which, because they'll both be applied
-      // to aCompareOp.
-      bStartLineIntercept = smallYVertex->x;
-      bEndLineIntercept = bigYVertex->x;
-    } else {
-      // This is not a horizontal line. We can now ignore all future
-      // horizontal lines.
-      canIgnoreHorizontalLines = true;
-
-      bStartLineIntercept =
-        aBStart <= smallYVertex->y
-          ? smallYVertex->x
-          : XInterceptAtY(aBStart, *smallYVertex, *bigYVertex);
-      bEndLineIntercept =
-        aBEnd >= bigYVertex->y
-          ? bigYVertex->x
-          : XInterceptAtY(aBEnd, *smallYVertex, *bigYVertex);
-    }
+    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;
--- a/layout/reftests/css-shapes/reftest.list
+++ b/layout/reftests/css-shapes/reftest.list
@@ -1,33 +1,1 @@
 fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),16,4) pref(layout.css.shape-outside.enabled,true) == dynamic-shape-outside-1.html dynamic-shape-outside-1-ref.html
-
-== shape-outside-empty-circle-1.html shape-outside-empty-point-ref.html
-== shape-outside-empty-circle-2.html shape-outside-empty-circle-ref.html
-== shape-outside-empty-circle-3.html shape-outside-empty-nothing-ref.html
-
-== shape-outside-empty-ellipse-1.html shape-outside-empty-point-ref.html
-== shape-outside-empty-ellipse-2.html shape-outside-empty-circle-ref.html
-== shape-outside-empty-ellipse-3.html shape-outside-empty-point-ref.html
-# The next test needs fuzzy due to chamfer aberration
-fuzzy(255,520) == shape-outside-empty-ellipse-4.html shape-outside-empty-circle-ref.html
-== shape-outside-empty-ellipse-5.html shape-outside-empty-line-ref.html
-== shape-outside-empty-ellipse-6.html shape-outside-empty-line-ref.html
-== shape-outside-empty-ellipse-7.html shape-outside-empty-nothing-ref.html
-== shape-outside-empty-ellipse-8.html shape-outside-empty-nothing-ref.html
-
-== shape-outside-empty-inset-1.html shape-outside-empty-point-ref.html
-== shape-outside-empty-inset-2.html shape-outside-empty-circle-ref.html
-== shape-outside-empty-inset-3.html shape-outside-empty-point-ref.html
-== shape-outside-empty-inset-4.html shape-outside-empty-circle-ref.html
-== shape-outside-empty-inset-5.html shape-outside-empty-line-ref.html
-== shape-outside-empty-inset-6.html shape-outside-empty-line-ref.html
-== shape-outside-empty-inset-7.html shape-outside-empty-nothing-ref.html
-== shape-outside-empty-inset-8.html shape-outside-empty-nothing-ref.html
-
-== shape-outside-empty-polygon-1.html shape-outside-empty-point-ref.html
-# The next test needs fuzzy due to chamfer aberration
-fuzzy(255,520) == shape-outside-empty-polygon-2.html shape-outside-empty-circle-ref.html
-== shape-outside-empty-polygon-3.html shape-outside-empty-line-ref.html
-== shape-outside-empty-polygon-4.html shape-outside-empty-line-ref.html
-== shape-outside-empty-polygon-5.html shape-outside-empty-point-ref.html
-== shape-outside-empty-polygon-6.html shape-outside-empty-nothing-ref.html
-== shape-outside-empty-polygon-7.html shape-outside-empty-nothing-ref.html
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-circle-1.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty circle, acts like a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: circle(0px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-circle-2.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty circle, with shape-margin acts like a circle</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: circle(0px);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-circle-3.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty circle, positioned between elements, acts like nothing</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: circle(0px at 100px 20px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-circle-ref.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Reference: Shape-outside empty area, float elements around a circle</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: circle(90px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty point ellipse, acts like a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(0px 0px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty point ellipse, with shape-margin acts like a circle</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(0px 0px);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty horizontal ellipse, acts like a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(50px 0px at 50px 90px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty horizontal ellipse, with shape-margin acts like a circle (with some aberration)</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(50px 0px at 50px 90px);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty vertical ellipse, acts like a line</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(0px 100px at 190px 100px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty vertical ellipse, with shape-margin acts like a capsule (with rounded endpoints at top and bottom)</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(0px 100px at 100px 100px);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty point ellipse, positioned between elements, acts like nothing</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(0px 0px at 100px 20px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty horizontal ellipse, positioned between elements, acts like nothing</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: ellipse(50px 0px at 50px 20px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-1.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty zero-sized inset, acts like a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(50% 50%);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-2.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty zero-sized inset, with shape-margin acts like a circle</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(50% 50%);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-3.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty horizontal flat inset, acts like a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(50% 50% 50% 0%);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-4.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty horizontal flat inset, with shape-margin acts like a circle</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(50% 50% 50% 0%);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-5.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty vertical flat inset, acts like a line</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(0% 5% 0% 95%);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-6.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside inside-out vertical flat inset, acts like a line</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(0% 100% 0% 95%);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-7.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty zero-sized inset, positioned between elements, acts like nothing</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(20px 100px 160px 100px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-inset-8.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside empty horizontal inset, positioned between elements, acts like nothing</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: inset(20px 0px 160px 50px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-line-ref.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Reference: Shape-outside empty area, float text around a vertical line</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-    margin-left: 190px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Reference: Shape-outside empty area, no float impact</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-point-ref.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Reference: Shape-outside empty area, float text around a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box style="margin-left: 100px"></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-polygon-1.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside polygon with 1 vertex, acts like a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: polygon(100px 90px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-polygon-2.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside polygon with 1 vertex, with shape-margin acts like a circle (with some aberration)</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: polygon(100px 90px);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-polygon-3.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside polygon with 2 vertices, acts like a line</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: polygon(190px 0px, 190px 200px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-polygon-4.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside polygon with 2 vertices, with shape-margin acts like a line with rounded endpoints</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: polygon(100px 0px, 100px 200px);
-    shape-margin: 90px;
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-polygon-5.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside polygon with 3 coincident vertices, acts like a point</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: polygon(100px 90px, 100px 90px, 100px 90px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-polygon-6.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside polygon with 1 vertex, positioned between elements, acts like nothing</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: polygon(100px 20px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-shapes/shape-outside-empty-polygon-7.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<title>Shape-outside polygon with 2 vertices, positioned between elements, acts like nothing</title>
-<style>
-  body {
-    line-height: 0;
-  }
-  .container {
-    width: 600px;
-  }
-  box {
-    display: inline-block;
-    background-color: blue;
-    width: 100px;
-    height: 20px;
-  }
-  .shape {
-    float: left;
-    width: 200px;
-    height: 180px;
-    shape-outside: polygon(0px 20px, 100px 20px);
-  }
-</style>
-</head>
-<body>
-<div class="container">
-<div class="shape"></div>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-<box></box><br>
-</div>
-</body>
-</html>
--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -39,20 +39,24 @@ fails == shape-outside-border-box-border
 # Basic shape: circle()
 == shape-outside-circle-032.html shape-outside-circle-032-ref.html
 fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),7,6) == shape-outside-circle-033.html shape-outside-circle-033-ref.html
 == shape-outside-circle-034.html shape-outside-circle-034-ref.html
 == shape-outside-circle-035.html shape-outside-circle-035-ref.html
 == shape-outside-circle-036.html shape-outside-circle-036-ref.html
 == shape-outside-circle-037.html shape-outside-circle-036-ref.html
 == shape-outside-circle-038.html shape-outside-circle-036-ref.html
+== shape-outside-circle-039.html shape-outside-circle-039-ref.html
+== shape-outside-circle-040.html shape-outside-circle-039-ref.html
 == shape-outside-circle-041.html shape-outside-circle-041-ref.html
 == shape-outside-circle-042.html shape-outside-circle-042-ref.html
 == shape-outside-circle-043.html shape-outside-circle-042-ref.html
 == shape-outside-circle-044.html shape-outside-circle-042-ref.html
+== shape-outside-circle-045.html shape-outside-circle-045-ref.html
+== shape-outside-circle-046.html shape-outside-circle-045-ref.html
 == shape-outside-circle-047.html shape-outside-circle-047-ref.html
 == shape-outside-circle-048.html shape-outside-circle-048-ref.html
 == shape-outside-circle-049.html shape-outside-circle-049-ref.html
 == shape-outside-circle-050.html shape-outside-circle-050-ref.html
 == shape-outside-circle-051.html shape-outside-circle-051-ref.html
 == shape-outside-circle-052.html shape-outside-circle-052-ref.html
 == shape-outside-circle-053.html shape-outside-circle-053-ref.html
 fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),16,4) == shape-outside-circle-054.html shape-outside-circle-054-ref.html
@@ -80,16 +84,18 @@ fuzzy(108,81) == shape-outside-circle-05
 == shape-outside-ellipse-049.html shape-outside-ellipse-049-ref.html
 == shape-outside-ellipse-050.html shape-outside-ellipse-050-ref.html
 == shape-outside-ellipse-051.html shape-outside-ellipse-051-ref.html
 fuzzy(108,81) == shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.html
 
 # Basic shape: inset()
 == shape-outside-inset-016.html shape-outside-inset-016-ref.html
 == shape-outside-inset-017.html shape-outside-inset-017-ref.html
+== shape-outside-inset-018.html shape-outside-inset-018-ref.html
+== shape-outside-inset-019.html shape-outside-inset-019-ref.html
 == 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
@@ -98,9 +104,15 @@ fuzzy(108,81) == shape-outside-ellipse-0
 == 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
 fuzzy(101,2263) == shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-039-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, circle(0%) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
+    <div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
+    <div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
+    <div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
+    <div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
+    <div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-039.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, circle(0%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-039-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: circle(0%) border-box;
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-040.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, circle(closest-side at left center) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-039-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: circle(closest-side at left center) border-box;
+    clip-path: circle(closest-side at left center) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-045-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, circle(0%) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    direction: rtl;
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
+    <div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
+    <div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
+    <div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
+    <div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
+    <div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-045.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, circle(0%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-045-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: circle(0%) border-box;
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-046.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, circle(closest-side at right center) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-045-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: circle(closest-side at right center) border-box;
+    clip-path: circle(closest-side at right center) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-018-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, inset(50%) 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: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px; top: 0; left: 0;"></div>
+    <div class="box" style="height: 36px; top: 24px; left: 0;"></div>
+    <div class="box" style="height: 36px; top: 60px; left: 0;"></div>
+    <div class="box" style="height: 24px; top: 96px; left: 0;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-018.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, inset(50%)</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-inset-018-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape inset(50%) value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: inset(50%);
+    clip-path: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-019-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, inset(50%) 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: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px; top: 0; right: 0;"></div>
+    <div class="box" style="height: 36px; top: 24px; right: 0;"></div>
+    <div class="box" style="height: 36px; top: 60px; right: 0;"></div>
+    <div class="box" style="height: 24px; top: 96px; right: 0;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-019.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, inset(50%)</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-inset-019-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape inset(50%) value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: inset(50%);
+    clip-path: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div>
+  </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>
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -174980,16 +174980,40 @@
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-036-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html": [
     [
      "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html",
      [
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html",
        "=="
       ]
@@ -175028,16 +175052,40 @@
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-042-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html": [
     [
      "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html",
      [
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html",
        "=="
       ]
@@ -175448,16 +175496,40 @@
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-017-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html": [
     [
      "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html",
      [
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html",
        "=="
       ]
@@ -175808,16 +175880,88 @@
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-025-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html": [
     [
      "/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html",
      [
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01-ref.html",
        "=="
       ]
@@ -272826,26 +272970,36 @@
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-036-ref.html": [
     [
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
     [
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-042-ref.html": [
     [
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
     [
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-048-ref.html": [
     [
      {}
@@ -273001,16 +273155,26 @@
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-017-ref.html": [
     [
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
     [
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-021-ref.html": [
     [
      {}
@@ -273151,16 +273315,36 @@
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-025-ref.html": [
     [
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
     [
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests.sh": [
     [
      {}
@@ -519764,17 +519948,17 @@
    "2680b68f5c1720ce6d2b82d942ea21b0b1518587",
    "support"
   ],
   "css/css-scoping/shadow-assign-dynamic-001.html": [
    "c57e0fd5aa5be63e1cadf65a4e382798c5e05ec4",
    "reftest"
   ],
   "css/css-scoping/shadow-at-import.html": [
-   "67295000ad3c24c2d9ab0ac556d34758f3ce654c",
+   "40f2606177ad3143774d97060ac1bbfa9743801f",
    "reftest"
   ],
   "css/css-scoping/shadow-cascade-order-001.html": [
    "46913ea7e47811b11be898de5c3bd0a330ea6637",
    "testharness"
   ],
   "css/css-scoping/shadow-disabled-sheet-001.html": [
    "3de2d23c1b3339b964ec2c009832a3207a3b9dc4",
@@ -545860,17 +546044,17 @@
    "f131f271cb2f747e845584abcc445348e8c86521",
    "support"
   ],
   "css/cssom/StyleSheetList.html": [
    "0a1cd8ed56ac3a5b1a9556835d94fb80325199bf",
    "testharness"
   ],
   "css/cssom/at-namespace.html": [
-   "cd3845557f5c40f51f7e3cbdfff52f440fe689b6",
+   "96da2dd244e9e19ff8ca1ca81b06c3ebdcee8267",
    "testharness"
   ],
   "css/cssom/computed-style-001.html": [
    "0331a648e6b0d56f0e7365f1ff7d991ea77ce3e4",
    "testharness"
   ],
   "css/cssom/computed-style-002.html": [
    "d6579788bcfaf1d4c09324ba877a26ff95d6965d",
@@ -545992,29 +546176,29 @@
    "89c506ea58f2ad38eb9ecc1e5f422b81a45b07fa",
    "testharness"
   ],
   "css/cssom/inline-style-001.html": [
    "4c58b6153eabe796749dcaf181e03d7dce2c9c07",
    "testharness"
   ],
   "css/cssom/insertRule-charset-no-index.html": [
-   "2be98274fe292089f381d216dc415ddc812a105f",
+   "cd3a96351a4c8dcd417fb03963f9d4fb0760c746",
    "testharness"
   ],
   "css/cssom/insertRule-import-no-index.html": [
-   "44ef5a2c490675d0088651dc101dbbb1fc83fdd1",
+   "ba89bad41a8d243f89ec91a0c02a34e97b378bc8",
    "testharness"
   ],
   "css/cssom/insertRule-namespace-no-index.html": [
-   "b9b63240c4a7bf52524b8e3dd36d6ca2ecb4bcdc",
+   "109ed203fabac2da4279419deb34d5bc5a393d09",
    "testharness"
   ],
   "css/cssom/insertRule-no-index.html": [
-   "825eb56d8e78bbdbd3bfb1861e6d40c245cd8f4b",
+   "812f2b02d7694dd270b7a3e1ef205b99890ab216",
    "testharness"
   ],
   "css/cssom/insertRule-syntax-error-01.html": [
    "36f824b24dd56e20b7c524111512d8743745daaa",
    "testharness"
   ],
   "css/cssom/interfaces.html": [
    "42e325d3d7f6be7f557915072f61900ff611cef8",
@@ -554812,17 +554996,17 @@
    "77a40c794be3488c77edc9528d53755dfc7214b5",
    "reftest"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/selectors4/reftest.list": [
    "76c907a127aec740e17d009a517acccd5d3e9fd4",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list": [
-   "c199bd6af0e3d2bbc8f87c3a768a1a8c4a17f7ab",
+   "cf1af7daefe2db67dedf186e44744bbb03e537c3",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001-ref.html": [
    "f60b429f37b066f9a16dceeb19bfa8ed4f2b0623",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001.html": [
    "633f57d18aa6315c4073ecfefb9d6ab2220e0fc1",
@@ -554975,16 +555159,28 @@
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-037.html": [
    "87776a48f864360ed9857559aa0a4dce437c97ec",
    "reftest"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-038.html": [
    "61d2d2a07e2dcbd24a15b733f7c9d7dd3735ebd1",
    "reftest"
   ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html": [
+   "80ba877ecdbb12e5f000dee707c5af2df4629a9b",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html": [
+   "0dad5434390d2500568fab4ca82d98147995f2a4",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html": [
+   "7eaa3c8183209024684ff9a15f6b332802d91cb6",
+   "reftest"
+  ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
    "dcdc6fdf1ff9c749b6ed0dabc9029e641336832b",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html": [
    "ab31da83feb6a3176f4824c91b7bd4d9f299cb8d",
    "reftest"
   ],
@@ -554999,16 +555195,28 @@
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-043.html": [
    "617a6ec0b2651145a4693c3e1d5a374004d5d7e7",
    "reftest"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-044.html": [
    "c669e12f7d26e25364eab72272e5964bb989cad3",
    "reftest"
   ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html": [
+   "538d22bff3687524f756303205ad18dac9e182cf",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html": [
+   "8458a75aec990428264f039927377d683e4bfef9",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html": [
+   "bfb735e59e22b55f8e3c42827ca8bcbe7a612774",
+   "reftest"
+  ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
    "4a138f3175f7d46a2a38643e9803ede5408db9cf",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html": [
    "05f11451254f6955d495e23005e03bba056ca2e0",
    "reftest"
   ],
@@ -555271,16 +555479,32 @@
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-017-ref.html": [
    "4b324c5f55d23968d2fd6ec9d6b417e8eda1c848",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-017.html": [
    "628ef0b6c08230db7fca6639be71c63c0001156f",
    "reftest"
   ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html": [
+   "e32f844e70a6f1b7c5c25fa691ba77321b557213",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html": [
+   "1d24d1acde6249154c8aecccf51c3f3d5bfc3f36",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html": [
+   "7c0b699db61f02c5f197133c66439f699a80fd70",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html": [
+   "8ad1c65a27f12deb7b75865eb2b89905a4bbd4f0",
+   "reftest"
+  ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
    "8e109e72edb9cb0d3c97677db8a98462da83054f",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html": [
    "28a65a00f3010bc8b63ee81c4d293eb81e6daa08",
    "reftest"
   ],
@@ -555511,16 +555735,56 @@
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-025-ref.html": [
    "51cf20e605aa791e3d63c4902377aa3aca987ad7",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-025.html": [
    "9393c2e2250dfc1bf3ffdd68f2c352890d1e0ee8",
    "reftest"
   ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html": [
+   "322ec7ee1fb932cb6f1908c376be2915d6e50459",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html": [
+   "9fea24b92061f9f679b9565d9040e4b29a18b4c3",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html": [
+   "e91e35a1af0a2fa21e31f8ea3fa903f6d862ad13",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html": [
+   "b27883660453186155c9b761402ae4c038f2394c",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html": [
+   "6753ffe3a09c2a71fc67efcd1041ed90de12e87c",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html": [
+   "de39a15da093018531838cac20c59494cb6050b2",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html": [
+   "05d0d53f6d038702733e4acd9562e35b2b992881",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html": [
+   "0f653c07806f0064d1583a7ddaeb171734188062",
+   "reftest"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
+   "7bbccdb15fdf67a67bbc243c342c668fbef23af8",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html": [
+   "217e140bdd429d6889102e43253e6fb64dca4705",
+   "reftest"
+  ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
    "3055eafd3bf887f11c0c386419397910ad438d23",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests.sh": [
    "1c18dc5fdcddbbd08dbdc812f538a175e58892d7",
    "support"
   ],
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-shapes/spec-examples/shape-outside-004.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[shape-outside-004.html]
-  expected: FAIL
--- a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list
@@ -38,20 +38,24 @@
 # Basic shape: circle()
 == shape-outside-circle-032.html shape-outside-circle-032-ref.html
 == shape-outside-circle-033.html shape-outside-circle-033-ref.html
 == shape-outside-circle-034.html shape-outside-circle-034-ref.html
 == shape-outside-circle-035.html shape-outside-circle-035-ref.html
 == shape-outside-circle-036.html shape-outside-circle-036-ref.html
 == shape-outside-circle-037.html shape-outside-circle-036-ref.html
 == shape-outside-circle-038.html shape-outside-circle-036-ref.html
+== shape-outside-circle-039.html shape-outside-circle-039-ref.html
+== shape-outside-circle-040.html shape-outside-circle-039-ref.html
 == shape-outside-circle-041.html shape-outside-circle-041-ref.html
 == shape-outside-circle-042.html shape-outside-circle-042-ref.html
 == shape-outside-circle-043.html shape-outside-circle-042-ref.html
 == shape-outside-circle-044.html shape-outside-circle-042-ref.html
+== shape-outside-circle-045.html shape-outside-circle-045-ref.html
+== shape-outside-circle-046.html shape-outside-circle-045-ref.html
 == shape-outside-circle-047.html shape-outside-circle-047-ref.html
 == shape-outside-circle-048.html shape-outside-circle-048-ref.html
 == shape-outside-circle-049.html shape-outside-circle-049-ref.html
 == shape-outside-circle-050.html shape-outside-circle-050-ref.html
 == shape-outside-circle-051.html shape-outside-circle-051-ref.html
 == shape-outside-circle-052.html shape-outside-circle-052-ref.html
 == shape-outside-circle-053.html shape-outside-circle-053-ref.html
 == shape-outside-circle-054.html shape-outside-circle-054-ref.html
@@ -77,16 +81,18 @@
 == shape-outside-ellipse-048.html shape-outside-ellipse-048-ref.html
 == shape-outside-ellipse-049.html shape-outside-ellipse-049-ref.html
 == shape-outside-ellipse-050.html shape-outside-ellipse-050-ref.html
 == shape-outside-ellipse-051.html shape-outside-ellipse-051-ref.html
 
 # Basic shape: inset()
 == shape-outside-inset-016.html shape-outside-inset-016-ref.html
 == shape-outside-inset-017.html shape-outside-inset-017-ref.html
+== shape-outside-inset-018.html shape-outside-inset-018-ref.html
+== shape-outside-inset-019.html shape-outside-inset-019-ref.html
 == 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
@@ -95,8 +101,14 @@
 == 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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, circle(0%) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside */
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
+    <div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
+    <div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
+    <div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
+    <div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
+    <div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, circle(0%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-039-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: circle(0%) border-box;
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, circle(closest-side at left center) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-039-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: circle(closest-side at left center) border-box;
+    clip-path: circle(closest-side at left center) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, circle(0%) border-box reference</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <style>
+  .container {
+    direction: rtl;
+    position: absolute;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside */
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 20px;
+    width: 20px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
+    <div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
+    <div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
+    <div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
+    <div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
+    <div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, circle(0%) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-045-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: circle(0%) border-box;
+    clip-path: circle(0%) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, circle(closest-side at right center) border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+  <link rel="match" href="shape-outside-circle-045-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: circle(closest-side at right center) border-box;
+    clip-path: circle(closest-side at right center) border-box;
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 10px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 12px;"></div>
+    <div class="box" style="height: 12px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, inset(50%) 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: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px; top: 0; left: 0;"></div>
+    <div class="box" style="height: 36px; top: 24px; left: 0;"></div>
+    <div class="box" style="height: 36px; top: 60px; left: 0;"></div>
+    <div class="box" style="height: 24px; top: 96px; left: 0;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, inset(50%)</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-inset-018-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape inset(50%) value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: inset(50%);
+    clip-path: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, inset(50%) 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: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    position: absolute;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px; top: 0; right: 0;"></div>
+    <div class="box" style="height: 36px; top: 24px; right: 0;"></div>
+    <div class="box" style="height: 36px; top: 60px; right: 0;"></div>
+    <div class="box" style="height: 24px; top: 96px; right: 0;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, inset(50%)</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-inset-019-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape inset(50%) value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: inset(50%);
+    clip-path: inset(50%);
+    box-sizing: content-box;
+    height: 40px;
+    width: 40px;
+    padding: 20px;
+    border: 20px solid lightgreen;
+    margin: 20px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 200px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="box" style="height: 24px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 36px;"></div>
+    <div class="box" style="height: 24px;"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/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>