Bug 1309467 Part 4 - Implement <shape-box> values for shape-outside. r=dbaron

Per spec, float positioning and stacking is not affected by defining a float
area with a shape.
https://drafts.csswg.org/css-shapes/#relation-to-box-model-and-float-behavior

So all the call sites of GetFloatAvailableSpace() related to adding a
float are replaced by GetFloatAvailableSpaceForPlacingFloat().

<shape-box> with border-radius will be implemented in next part.

MozReview-Commit-ID: 1RXEeXDhdWo

--HG--
extra : rebase_source : 42cdb0c81b16168e4e30ee2261ceccb562e278cf

layout/generic/BlockReflowInput.cpp

@@ -329,8 +329,8 @@ BlockReflowInput::ReplacedBlockFitsInAvailSpace(nsIFrame* aReplacedBlock,
 
 nsFlowAreaRect
 BlockReflowInput::GetFloatAvailableSpaceWithState(
-                      nscoord aBCoord,
-                      nsFloatManager::SavedState *aState) const
+                    nscoord aBCoord, ShapeType aShapeType,
+                    nsFloatManager::SavedState* aState) const
 {
   WritingMode wm = mReflowInput.GetWritingMode();
 #ifdef DEBUG
@@ -346,7 +346,7 @@ BlockReflowInput::GetFloatAvailableSpaceWithState(
     ? nscoord_MAX : std::max(mContentArea.BEnd(wm) - aBCoord, 0);
   nsFlowAreaRect result =
     mFloatManager->GetFlowArea(wm, aBCoord, blockSize,
-                               nsFloatManager::BandInfoType::BandFromPoint,
+                               BandInfoType::BandFromPoint, aShapeType,
                                mContentArea, aState, ContainerSize());
   // Keep the inline size >= 0 for compatibility with nsSpaceManager.
   if (result.mRect.ISize(wm) < 0) {
@@ -380,7 +380,8 @@ BlockReflowInput::GetFloatAvailableSpaceForBSize(
 #endif
   nsFlowAreaRect result =
     mFloatManager->GetFlowArea(wm, aBCoord, aBSize,
-                               nsFloatManager::BandInfoType::WidthWithinHeight,
+                               BandInfoType::WidthWithinHeight,
+                               ShapeType::ShapeOutside,
                                mContentArea, aState, ContainerSize());
   // Keep the width >= 0 for compatibility with nsSpaceManager.
   if (result.mRect.ISize(wm) < 0) {
@@ -619,7 +620,8 @@ BlockReflowInput::AddFloat(nsLineLayout*       aLineLayout,
   // If one or more floats has already been pushed to the next line,
   // don't let this one go on the current line, since that would violate
   // float ordering.
-  LogicalRect floatAvailableSpace = GetFloatAvailableSpace().mRect;
+  LogicalRect floatAvailableSpace =
+    GetFloatAvailableSpaceForPlacingFloat(mBCoord).mRect;
   if (mBelowCurrentLineFloats.IsEmpty() &&
       (aLineLayout->LineIsEmpty() ||
        mBlock->ComputeFloatISize(*this, floatAvailableSpace, aFloat)
@@ -743,8 +745,9 @@ BlockReflowInput::FlowAndPlaceFloat(nsIFrame* aFloat)
     // XXXldb Does this handle vertical margins correctly?
     mBCoord = ClearFloats(mBCoord, floatDisplay->PhysicalBreakType(wm));
   }
-    // Get the band of available space
-  nsFlowAreaRect floatAvailableSpace = GetFloatAvailableSpace(mBCoord);
+  // Get the band of available space with respect to margin box.
+  nsFlowAreaRect floatAvailableSpace =
+    GetFloatAvailableSpaceForPlacingFloat(mBCoord);
   LogicalRect adjustedAvailableSpace =
     mBlock->AdjustFloatAvailableSpace(*this, floatAvailableSpace.mRect, aFloat);
 
@@ -819,7 +822,7 @@ BlockReflowInput::FlowAndPlaceFloat(nsIFrame* aFloat)
       if (adjustedAvailableSpace.BSize(wm) != NS_UNCONSTRAINEDSIZE) {
         adjustedAvailableSpace.BSize(wm) -= floatAvailableSpace.mRect.BSize(wm);
       }
-      floatAvailableSpace = GetFloatAvailableSpace(mBCoord);
+      floatAvailableSpace = GetFloatAvailableSpaceForPlacingFloat(mBCoord);
     } else {
       // This quirk matches the one in nsBlockFrame::AdjustFloatAvailableSpace
       // IE handles float tables in a very special way
@@ -860,7 +863,7 @@ BlockReflowInput::FlowAndPlaceFloat(nsIFrame* aFloat)
       mBCoord += floatAvailableSpace.mRect.BSize(wm);
       // To match nsBlockFrame::AdjustFloatAvailableSpace, we have to
       // get a new width for the new band.
-      floatAvailableSpace = GetFloatAvailableSpace(mBCoord);
+      floatAvailableSpace = GetFloatAvailableSpaceForPlacingFloat(mBCoord);
       adjustedAvailableSpace = mBlock->AdjustFloatAvailableSpace(*this,
                                  floatAvailableSpace.mRect, aFloat);
       floatMarginISize = FloatMarginISize(mReflowInput,

layout/generic/BlockReflowInput.h

@@ -22,6 +22,8 @@ namespace mozilla {
 // block frame uses along with ReflowInput. Like ReflowInput, this
 // is read-only data that is passed down from a parent frame to its children.
 class BlockReflowInput {
+  using BandInfoType = nsFloatManager::BandInfoType;
+  using ShapeType = nsFloatManager::ShapeType;
 
   // Block reflow input flags.
   struct Flags {
@@ -121,10 +123,14 @@ public:
    */
   nsFlowAreaRect GetFloatAvailableSpace() const
     { return GetFloatAvailableSpace(mBCoord); }
+  nsFlowAreaRect GetFloatAvailableSpaceForPlacingFloat(nscoord aBCoord) const
+    { return GetFloatAvailableSpaceWithState(
+        aBCoord, ShapeType::Margin, nullptr); }
   nsFlowAreaRect GetFloatAvailableSpace(nscoord aBCoord) const
-    { return GetFloatAvailableSpaceWithState(aBCoord, nullptr); }
+    { return GetFloatAvailableSpaceWithState(
+        aBCoord, ShapeType::ShapeOutside, nullptr); }
   nsFlowAreaRect
-    GetFloatAvailableSpaceWithState(nscoord aBCoord,
+    GetFloatAvailableSpaceWithState(nscoord aBCoord, ShapeType aShapeType,
                                     nsFloatManager::SavedState *aState) const;
   nsFlowAreaRect
     GetFloatAvailableSpaceForBSize(nscoord aBCoord, nscoord aBSize,

layout/generic/nsBlockFrame.cpp

@@ -69,6 +69,7 @@ using namespace mozilla;
 using namespace mozilla::css;
 using namespace mozilla::dom;
 using namespace mozilla::layout;
+using ShapeType = nsFloatManager::ShapeType;
 typedef nsAbsoluteContainingBlock::AbsPosReflowFlags AbsPosReflowFlags;
 
 static void MarkAllDescendantLinesDirty(nsBlockFrame* aBlock)
@@ -3477,6 +3478,7 @@ nsBlockFrame::ReflowBlockFrame(BlockReflowInput& aState,
         // Start over with a new available space rect at the new height.
         floatAvailableSpace =
           aState.GetFloatAvailableSpaceWithState(aState.mBCoord,
+                                                 ShapeType::ShapeOutside,
                                                  &floatManagerState);
       }
 
@@ -7103,7 +7105,7 @@ nsBlockFrame::ReflowBullet(nsIFrame* aBulletFrame,
   // FIXME: aLineTop isn't actually set correctly by some callers, since
   // they reposition the line.
   LogicalRect floatAvailSpace =
-    aState.GetFloatAvailableSpaceWithState(aLineTop,
+    aState.GetFloatAvailableSpaceWithState(aLineTop, ShapeType::ShapeOutside,
                                            &aState.mFloatManagerStateBefore)
           .mRect;
   // FIXME (bug 25888): need to check the entire region that the first

layout/generic/nsFloatManager.cpp

@@ -122,7 +122,7 @@ void nsFloatManager::Shutdown()
 
 nsFlowAreaRect
 nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
-                            BandInfoType aBandInfoType,
+                            BandInfoType aBandInfoType, ShapeType aShapeType,
                             LogicalRect aContentArea, SavedState* aState,
                             const nsSize& aContainerSize) const
 {
@@ -193,8 +193,8 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
       continue;
     }
 
-    nscoord floatBStart = fi.BStart();
-    nscoord floatBEnd = fi.BEnd();
+    nscoord floatBStart = fi.BStart(aShapeType);
+    nscoord floatBEnd = fi.BEnd(aShapeType);
     if (blockStart < floatBStart && aBandInfoType == BandInfoType::BandFromPoint) {
       // This float is below our band.  Shrink our band's height if needed.
       if (floatBStart < blockEnd) {
@@ -220,7 +220,7 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
       StyleFloat floatStyle = fi.mFrame->StyleDisplay()->PhysicalFloats(aWM);
       if (floatStyle == StyleFloat::Left) {
         // A left float
-        nscoord lineRightEdge = fi.LineRight();
+        nscoord lineRightEdge = fi.LineRight(aShapeType);
         if (lineRightEdge > lineLeft) {
           lineLeft = lineRightEdge;
           // Only set haveFloats to true if the float is inside our
@@ -231,7 +231,7 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
         }
       } else {
         // A right float
-        nscoord lineLeftEdge = fi.LineLeft();
+        nscoord lineLeftEdge = fi.LineLeft(aShapeType);
         if (lineLeftEdge < lineRight) {
           lineRight = lineLeftEdge;
           // See above.
@@ -537,14 +537,44 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
           aMarginRect.BSize(aWM))
 {
   MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
+
+  const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
+
+  if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
+    // Initialize shape-box reference rect.
+    LogicalRect rect = aMarginRect;
+
+    switch (shapeOutside.GetReferenceBox()) {
+      case StyleShapeOutsideShapeBox::Content:
+        rect.Deflate(aWM, mFrame->GetLogicalUsedPadding(aWM));
+        MOZ_FALLTHROUGH;
+      case StyleShapeOutsideShapeBox::Padding:
+        rect.Deflate(aWM, mFrame->GetLogicalUsedBorder(aWM));
+        MOZ_FALLTHROUGH;
+      case StyleShapeOutsideShapeBox::Border:
+        rect.Deflate(aWM, mFrame->GetLogicalUsedMargin(aWM));
+        break;
+      case StyleShapeOutsideShapeBox::Margin:
+        // Do nothing. rect is already a margin rect.
+        break;
+      case StyleShapeOutsideShapeBox::NoBox:
+        MOZ_ASSERT_UNREACHABLE("Why don't we have a shape-box?");
+        break;
+    }
+
+    mShapeBoxRect.emplace(rect.LineLeft(aWM, aContainerSize) + aLineLeft,
+                          rect.BStart(aWM) + aBlockStart,
+                          rect.ISize(aWM), rect.BSize(aWM));
+  }
 }
 
 #ifdef NS_BUILD_REFCNT_LOGGING
 nsFloatManager::FloatInfo::FloatInfo(const FloatInfo& aOther)
-  : mFrame(aOther.mFrame),
-    mLeftBEnd(aOther.mLeftBEnd),
-    mRightBEnd(aOther.mRightBEnd),
-    mRect(aOther.mRect)
+  : mFrame(aOther.mFrame)
+  , mLeftBEnd(aOther.mLeftBEnd)
+  , mRightBEnd(aOther.mRightBEnd)
+  , mRect(aOther.mRect)
+  , mShapeBoxRect(aOther.mShapeBoxRect)
 {
   MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
 }
@@ -555,6 +585,50 @@ nsFloatManager::FloatInfo::~FloatInfo()
 }
 #endif
 
+nscoord
+nsFloatManager::FloatInfo::LineLeft(ShapeType aShapeType) const
+{
+  if (aShapeType == ShapeType::Margin) {
+    return LineLeft();
+  }
+
+  MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
+  const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
+  if (shapeOutside.GetType() == StyleShapeSourceType::None) {
+    return LineLeft();
+  }
+
+  if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
+    return ShapeBoxRect().x;
+  }
+
+  // XXX: Other shape source types are not implemented yet.
+
+  return LineLeft();
+}
+
+nscoord
+nsFloatManager::FloatInfo::LineRight(ShapeType aShapeType) const
+{
+  if (aShapeType == ShapeType::Margin) {
+    return LineRight();
+  }
+
+  MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
+  const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
+  if (shapeOutside.GetType() == StyleShapeSourceType::None) {
+    return LineRight();
+  }
+
+  if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
+    return ShapeBoxRect().XMost();
+  }
+
+  // XXX: Other shape source types are not implemented yet.
+
+  return LineRight();
+}
+
 //----------------------------------------------------------------------
 
 nsAutoFloatManager::~nsAutoFloatManager()

layout/generic/nsFloatManager.h

@@ -10,6 +10,7 @@
 #define nsFloatManager_h_
 
 #include "mozilla/Attributes.h"
+#include "mozilla/Maybe.h"
 #include "mozilla/WritingModes.h"
 #include "nsCoord.h"
 #include "nsFrameList.h" // for DEBUG_FRAME_DUMP
@@ -142,8 +143,14 @@ public:
    *     space if a float begins or ends in it.)  The inline size of the
    *     resulting rectangle can be negative.
    *
-   * @param aBCoord [in] block-dir coordinate for block start of
-   *           available space desired
+   * ShapeType can be used to request two different types of flow areas.
+   * (This is the float area defined in CSS Shapes Module Level 1 §1.4):
+   *    Margin: uses the float element's margin-box to request the flow area.
+   *    ShapeOutside: uses the float element's shape-outside value to request
+   *      the float area.
+   *
+   * @param aBCoord [in] block-dir coordinate for block start of available space
+   *          desired, which are positioned relative to the current translation.
    * @param aBSize [in] see above
    * @param aContentArea [in] an nsRect representing the content area
    * @param aState [in] If null, use the current state, otherwise, do
@@ -153,16 +160,15 @@ public:
    *           mRect is the resulting rectangle for line boxes.  It will not
    *             extend beyond aContentArea's inline bounds, but may be
    *             narrower when floats are present.
-   *          mBandHasFloats is whether there are floats at the sides of the
-   *            return value including those that do not reduce the line box
-   *            inline size at all (because they are entirely in the margins)
-   *
-   * aBCoord and aAvailSpace are positioned relative to the current translation
+   *           mHasFloats is whether there are floats at the sides of the
+   *             return value including those that do not reduce the line box
+   *             inline size at all (because they are entirely in the margins)
    */
   enum class BandInfoType { BandFromPoint, WidthWithinHeight };
+  enum class ShapeType { Margin, ShapeOutside };
   nsFlowAreaRect GetFlowArea(mozilla::WritingMode aWM,
                              nscoord aBCoord, nscoord aBSize,
-                             BandInfoType aBandInfoType,
+                             BandInfoType aBandInfoType, ShapeType aShapeType,
                              mozilla::LogicalRect aContentArea,
                              SavedState* aState,
                              const nsSize& aContainerSize) const;
@@ -324,6 +330,18 @@ private:
     nscoord BSize() const { return mRect.height; }
     bool IsEmpty() const { return mRect.IsEmpty(); }
 
+    nsRect ShapeBoxRect() const { return mShapeBoxRect.valueOr(mRect); }
+    nscoord LineLeft(ShapeType aShapeType) const;
+    nscoord LineRight(ShapeType aShapeType) const;
+    nscoord BStart(ShapeType aShapeType) const
+    {
+      return aShapeType == ShapeType::Margin ? BStart() : ShapeBoxRect().y;
+    }
+    nscoord BEnd(ShapeType aShapeType) const
+    {
+      return aShapeType == ShapeType::Margin ? BEnd() : ShapeBoxRect().YMost();
+    }
+
 #ifdef NS_BUILD_REFCNT_LOGGING
     FloatInfo(const FloatInfo& aOther);
     ~FloatInfo();
@@ -336,6 +354,10 @@ private:
     // the line-relative axis of the frame manager and its block
     // coordinates are in the frame manager's real block direction.
     nsRect mRect;
+    // This is the reference box of css shape-outside if specified, which
+    // implements the <shape-box> value in the CSS Shapes Module Level 1.
+    // The coordinate setup is the same as mRect.
+    mozilla::Maybe<nsRect> mShapeBoxRect;
   };
 
 #ifdef DEBUG

layout/reftests/w3c-css/submitted/reftest.list

@@ -52,6 +52,9 @@ include ruby/reftest.list
 # Selectors Level 4
 include selectors4/reftest.list
 
+# Shapes Level 1
+include shapes1/reftest.list
+
 # Text Level 3
 include text3/reftest.list
 

layout/reftests/w3c-css/submitted/shapes1/reftest.list

@@ -0,0 +1,11 @@
+default-preferences pref(layout.css.shape-outside.enabled,true)
+
+# <shape-box> only
+== shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
+== shape-outside-margin-box-002.html shape-outside-margin-box-002-ref.html
+== shape-outside-border-box-001.html shape-outside-border-box-001-ref.html
+== shape-outside-border-box-002.html shape-outside-border-box-002-ref.html
+== shape-outside-padding-box-001.html shape-outside-padding-box-001-ref.html
+== shape-outside-padding-box-002.html shape-outside-padding-box-002-ref.html
+== shape-outside-content-box-001.html shape-outside-content-box-001-ref.html
+== shape-outside-content-box-002.html shape-outside-content-box-002-ref.html

layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-001-ref.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, border-box 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 {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: border-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin-left: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-001.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: border-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-002-ref.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, border-box 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;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: border-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin-right: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div>  <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-002.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, border-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-border-box-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: border-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 200px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-001-ref.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, content-box 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 {
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: content-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding-left: 25px;
+    border-left: 25px solid lightgreen;
+    margin-left: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-001.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, content-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-content-box-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box value.">
+  <style>
+  .container {
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: content-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-002-ref.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, content-box 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;
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: content-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding-right: 25px;
+    border-right: 25px solid lightgreen;
+    margin-right: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-content-box-002.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <title>CSS Shape Test: float right, content-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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-content-box-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: content-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the padding space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-001-ref.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, margin-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 {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: margin-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-001.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, margin-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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box value.">
+  <style>
+  .container {
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: margin-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-002-ref.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, margin-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;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: margin-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-margin-box-002.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, margin-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-margin-box-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 200px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: margin-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-001-ref.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, padding-box 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 {
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    /* Omit shape-outside: padding-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border-left: 25px solid lightgreen;
+    margin-left: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-001.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float left, padding-box</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-padding-box-001-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box value.">
+  <style>
+  .container {
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: left;
+    shape-outside: padding-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-002-ref.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <meta charset="utf-8">
+  <title>CSS Shape Test: float right, padding-box 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;
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    /* Omit shape-outside: padding-box; */
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border-right: 25px solid lightgreen;
+    margin-right: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="shape"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>

layout/reftests/w3c-css/submitted/shapes1/shape-outside-padding-box-002.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <title>CSS Shape Test: float right, padding-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/#shapes-from-box-values">
+  <link rel="match" href="shape-outside-padding-box-002-ref.html">
+  <meta name="flags" content="">
+  <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box value.">
+  <style>
+  .container {
+    direction: rtl;
+    width: 175px;
+    line-height: 0;
+  }
+
+  .shape {
+    float: right;
+    shape-outside: padding-box;
+    box-sizing: content-box;
+    height: 25px;
+    width: 25px;
+    padding: 25px;
+    border: 25px solid lightgreen;
+    margin: 25px;
+    background-color: orange;
+  }
+
+  .box {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: blue;
+  }
+
+  .longbox {
+    display: inline-block;
+    width: 175px;
+    height: 25px;
+    background-color: blue;
+  }
+  </style>
+
+  <body class="container">
+    <div class="shape"></div>
+    <div class="shape"></div>
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="longbox"></div> <!-- Saturate the border space -->
+    <div class="longbox"></div> <!-- Saturate the margin space -->
+  </body>
+</html>