--- a/layout/generic/BlockReflowInput.cpp
+++ b/layout/generic/BlockReflowInput.cpp
@@ -324,34 +324,34 @@ BlockReflowInput::ReplacedBlockFitsInAva
replacedISize.borderBoxISize +
(mContentArea.IEnd(wm) -
aFloatAvailableSpace.mRect.IEnd(wm)) <=
mContentArea.ISize(wm);
}
nsFlowAreaRect
BlockReflowInput::GetFloatAvailableSpaceWithState(
- nscoord aBCoord,
- nsFloatManager::SavedState *aState) const
+ nscoord aBCoord, ShapeType aShapeType,
+ nsFloatManager::SavedState* aState) const
{
WritingMode wm = mReflowInput.GetWritingMode();
#ifdef DEBUG
// Verify that the caller setup the coordinate system properly
nscoord wI, wB;
mFloatManager->GetTranslation(wI, wB);
NS_ASSERTION((wI == mFloatManagerI) && (wB == mFloatManagerB),
"bad coord system");
#endif
nscoord blockSize = (mContentArea.BSize(wm) == nscoord_MAX)
? 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) {
result.mRect.ISize(wm) = 0;
}
#ifdef DEBUG
if (nsBlockFrame::gNoisyReflow) {
@@ -375,17 +375,18 @@ BlockReflowInput::GetFloatAvailableSpace
nscoord wI, wB;
mFloatManager->GetTranslation(wI, wB);
NS_ASSERTION((wI == mFloatManagerI) && (wB == mFloatManagerB),
"bad coord system");
#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) {
result.mRect.ISize(wm) = 0;
}
#ifdef DEBUG
if (nsBlockFrame::gNoisyReflow) {
@@ -614,17 +615,18 @@ BlockReflowInput::AddFloat(nsLineLayout*
bool placed;
// Now place the float immediately if possible. Otherwise stash it
// away in mBelowCurrentLineFloats and place it later.
// 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)
<= aAvailableISize)) {
// And then place it
placed = FlowAndPlaceFloat(aFloat);
if (placed) {
// Pass on updated available space to the current inline reflow engine
@@ -738,18 +740,19 @@ BlockReflowInput::FlowAndPlaceFloat(nsIF
// See if the float should clear any preceding floats...
// XXX We need to mark this float somehow so that it gets reflowed
// when floats are inserted before it.
if (StyleClear::None != floatDisplay->mBreakType) {
// 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);
NS_ASSERTION(aFloat->GetParent() == mBlock,
"Float frame has wrong parent");
SizeComputationInput offsets(aFloat, mReflowInput.mRenderingContext,
wm, mReflowInput.ComputedISize());
@@ -814,17 +817,17 @@ BlockReflowInput::FlowAndPlaceFloat(nsIF
// Nope. try to advance to the next band.
if (StyleDisplay::Table != floatDisplay->mDisplay ||
eCompatibility_NavQuirks != mPresContext->CompatibilityMode() ) {
mBCoord += floatAvailableSpace.mRect.BSize(wm);
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
// see if the previous float is also a table and has "align"
nsFloatCache* fc = mCurrentLineFloats.Head();
nsIFrame* prevFrame = nullptr;
while (fc) {
@@ -855,17 +858,17 @@ BlockReflowInput::FlowAndPlaceFloat(nsIF
}
}
}
// the table does not fit anymore in this line so advance to next band
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,
adjustedAvailableSpace.ISize(wm),
aFloat, offsets);
}
mustPlaceFloat = false;
--- a/layout/generic/BlockReflowInput.h
+++ b/layout/generic/BlockReflowInput.h
@@ -17,16 +17,18 @@ class nsFrameList;
class nsOverflowContinuationTracker;
namespace mozilla {
// BlockReflowInput contains additional reflow input information that the
// 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 {
Flags()
: mHasUnconstrainedBSize(false)
, mIsBStartMarginRoot(false)
, mIsBEndMarginRoot(false)
, mShouldApplyBStartMargin(false)
@@ -116,20 +118,24 @@ public:
* our coordinate system, which is the content box, with (0, 0) in the
* upper left.
*
* Returns whether there are floats present at the given block-direction
* coordinate and within the inline size of the content rect.
*/
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,
nsFloatManager::SavedState *aState) const;
/*
* The following functions all return true if they were able to
* place the float, false if the float did not fit in available
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@@ -64,16 +64,17 @@
static const int MIN_LINES_NEEDING_CURSOR = 20;
static const char16_t kDiscCharacter = 0x2022;
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)
{
nsLineList::iterator line = aBlock->LinesBegin();
nsLineList::iterator endLine = aBlock->LinesEnd();
while (line != endLine) {
if (line->IsBlock()) {
@@ -3472,16 +3473,17 @@ nsBlockFrame::ReflowBlockFrame(BlockRefl
advanced = true;
}
// ClearFloats might be able to advance us further once we're there.
aState.mBCoord =
aState.ClearFloats(newBCoord, StyleClear::None, replacedBlock);
// Start over with a new available space rect at the new height.
floatAvailableSpace =
aState.GetFloatAvailableSpaceWithState(aState.mBCoord,
+ ShapeType::ShapeOutside,
&floatManagerState);
}
LogicalRect oldAvailSpace(availSpace);
aState.ComputeBlockAvailSpace(frame, floatAvailableSpace,
replacedBlock != nullptr, availSpace);
if (!advanced && availSpace.IsEqualEdges(oldAvailSpace)) {
@@ -7098,17 +7100,17 @@ nsBlockFrame::ReflowBullet(nsIFrame* aBu
aBulletFrame->Reflow(aState.mPresContext, aMetrics, reflowInput, status);
// Get the float available space using our saved state from before we
// started reflowing the block, so that we ignore any floats inside
// the block.
// 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
// line overlaps, not just the top pixel.
// Place the bullet now. We want to place the bullet relative to the
// border-box of the associated block (using the right/left margin of
// the bullet frame as separation). However, if a line box would be
--- a/layout/generic/nsFloatManager.cpp
+++ b/layout/generic/nsFloatManager.cpp
@@ -117,17 +117,17 @@ void nsFloatManager::Shutdown()
}
#define CHECK_BLOCK_DIR(aWM) \
NS_ASSERTION((aWM).GetBlockDir() == mWritingMode.GetBlockDir(), \
"incompatible writing modes")
nsFlowAreaRect
nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
- BandInfoType aBandInfoType,
+ BandInfoType aBandInfoType, ShapeType aShapeType,
LogicalRect aContentArea, SavedState* aState,
const nsSize& aContainerSize) const
{
CHECK_BLOCK_DIR(aWM);
NS_ASSERTION(aBSize >= 0, "unexpected max block size");
NS_ASSERTION(aContentArea.ISize(aWM) >= 0,
"unexpected content area inline size");
@@ -188,18 +188,18 @@ nsFloatManager::GetFlowArea(WritingMode
}
if (fi.IsEmpty()) {
// For compatibility, ignore floats with empty rects, even though it
// disagrees with the spec. (We might want to fix this in the
// future, though.)
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) {
blockEnd = floatBStart;
}
}
// If blockStart == blockEnd (which happens only with WidthWithinHeight),
// we include floats that begin at our 0-height vertical area. We
@@ -215,28 +215,28 @@ nsFloatManager::GetFlowArea(WritingMode
if (floatBEnd < blockEnd && aBandInfoType == BandInfoType::BandFromPoint) {
blockEnd = floatBEnd;
}
// Shrink our band's width if needed.
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
// containing block. This matches the spec for what some
// callers want and disagrees for other callers, so we should
// probably provide better information at some point.
haveFloats = true;
}
} else {
// A right float
- nscoord lineLeftEdge = fi.LineLeft();
+ nscoord lineLeftEdge = fi.LineLeft(aShapeType);
if (lineLeftEdge < lineRight) {
lineRight = lineLeftEdge;
// See above.
haveFloats = true;
}
}
}
}
@@ -532,34 +532,108 @@ nsFloatManager::FloatInfo::FloatInfo(nsI
const nsSize& aContainerSize)
: mFrame(aFrame)
, mRect(aMarginRect.LineLeft(aWM, aContainerSize) + aLineLeft,
aMarginRect.BStart(aWM) + aBlockStart,
aMarginRect.ISize(aWM),
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);
}
nsFloatManager::FloatInfo::~FloatInfo()
{
MOZ_COUNT_DTOR(nsFloatManager::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()
{
// Restore the old float manager in the reflow input if necessary.
if (mNew) {
#ifdef DEBUG
if (nsBlockFrame::gNoisyFloatManager) {
--- a/layout/generic/nsFloatManager.h
+++ b/layout/generic/nsFloatManager.h
@@ -5,16 +5,17 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* class that manages rules for positioning floats */
#ifndef nsFloatManager_h_
#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
#include "nsIntervalSet.h"
#include "nsTArray.h"
class nsIPresShell;
class nsIFrame;
@@ -137,37 +138,42 @@ public:
* WidthWithinHeight: This returns a rectangle whose block start
* is aBCoord and whose block size is exactly aBSize. Its inline
* start and end edges give the corresponding edges of the space
* that can be used for line boxes *throughout* that space. (It
* is possible that more inline space could be used in part of the
* 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
* computation based only on floats present in the given
* saved state.
* @return An nsFlowAreaRect whose:
* 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;
/**
* Add a float that comes after all floats previously added. Its
* block start must be even with or below the top of all previous
* floats.
@@ -319,28 +325,44 @@ private:
nscoord LineLeft() const { return mRect.x; }
nscoord LineRight() const { return mRect.XMost(); }
nscoord ISize() const { return mRect.width; }
nscoord BStart() const { return mRect.y; }
nscoord BEnd() const { return mRect.YMost(); }
nscoord BSize() const { return mRect.height; }
bool IsEmpty() const { return mRect.IsEmpty(); }
+ nsRect ShapeBoxRect() const { return mShapeBoxRect.valueOr(mRect); }
+ nscoord LineLeft(ShapeType aShapeType) const;
+ nscoord LineRight(ShapeType aShapeType) const;
+ 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();
#endif
// NB! This is really a logical rect in a writing mode suitable for
// placing floats, which is not necessarily the actual writing mode
// either of the block which created the frame manager or the block
// that is calling the frame manager. The inline coordinates are in
// 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
mozilla::WritingMode mWritingMode;
#endif
// Translation from local to global coordinate space.
nscoord mLineLeft, mBlockStart;
--- a/layout/reftests/w3c-css/submitted/reftest.list
+++ b/layout/reftests/w3c-css/submitted/reftest.list
@@ -47,16 +47,19 @@ include masking/reftest.list
include multicol3/reftest.list
# Ruby Layout Module
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
# Text Decoration Level 3
include text-decor-3/reftest.list
# Transforms
include transforms/reftest.list
new file mode 100644
--- /dev/null
+++ b/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
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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>