зеркало из https://github.com/mozilla/gecko-dev.git
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
This commit is contained in:
Родитель
f55545b058
Коммит
0bb55f9970
|
@ -329,8 +329,8 @@ BlockReflowInput::ReplacedBlockFitsInAvailSpace(nsIFrame* aReplacedBlock,
|
||||||
|
|
||||||
nsFlowAreaRect
|
nsFlowAreaRect
|
||||||
BlockReflowInput::GetFloatAvailableSpaceWithState(
|
BlockReflowInput::GetFloatAvailableSpaceWithState(
|
||||||
nscoord aBCoord,
|
nscoord aBCoord, ShapeType aShapeType,
|
||||||
nsFloatManager::SavedState *aState) const
|
nsFloatManager::SavedState* aState) const
|
||||||
{
|
{
|
||||||
WritingMode wm = mReflowInput.GetWritingMode();
|
WritingMode wm = mReflowInput.GetWritingMode();
|
||||||
#ifdef DEBUG
|
#ifdef DEBUG
|
||||||
|
@ -346,7 +346,7 @@ BlockReflowInput::GetFloatAvailableSpaceWithState(
|
||||||
? nscoord_MAX : std::max(mContentArea.BEnd(wm) - aBCoord, 0);
|
? nscoord_MAX : std::max(mContentArea.BEnd(wm) - aBCoord, 0);
|
||||||
nsFlowAreaRect result =
|
nsFlowAreaRect result =
|
||||||
mFloatManager->GetFlowArea(wm, aBCoord, blockSize,
|
mFloatManager->GetFlowArea(wm, aBCoord, blockSize,
|
||||||
nsFloatManager::BandInfoType::BandFromPoint,
|
BandInfoType::BandFromPoint, aShapeType,
|
||||||
mContentArea, aState, ContainerSize());
|
mContentArea, aState, ContainerSize());
|
||||||
// Keep the inline size >= 0 for compatibility with nsSpaceManager.
|
// Keep the inline size >= 0 for compatibility with nsSpaceManager.
|
||||||
if (result.mRect.ISize(wm) < 0) {
|
if (result.mRect.ISize(wm) < 0) {
|
||||||
|
@ -380,7 +380,8 @@ BlockReflowInput::GetFloatAvailableSpaceForBSize(
|
||||||
#endif
|
#endif
|
||||||
nsFlowAreaRect result =
|
nsFlowAreaRect result =
|
||||||
mFloatManager->GetFlowArea(wm, aBCoord, aBSize,
|
mFloatManager->GetFlowArea(wm, aBCoord, aBSize,
|
||||||
nsFloatManager::BandInfoType::WidthWithinHeight,
|
BandInfoType::WidthWithinHeight,
|
||||||
|
ShapeType::ShapeOutside,
|
||||||
mContentArea, aState, ContainerSize());
|
mContentArea, aState, ContainerSize());
|
||||||
// Keep the width >= 0 for compatibility with nsSpaceManager.
|
// Keep the width >= 0 for compatibility with nsSpaceManager.
|
||||||
if (result.mRect.ISize(wm) < 0) {
|
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,
|
// 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
|
// don't let this one go on the current line, since that would violate
|
||||||
// float ordering.
|
// float ordering.
|
||||||
LogicalRect floatAvailableSpace = GetFloatAvailableSpace().mRect;
|
LogicalRect floatAvailableSpace =
|
||||||
|
GetFloatAvailableSpaceForPlacingFloat(mBCoord).mRect;
|
||||||
if (mBelowCurrentLineFloats.IsEmpty() &&
|
if (mBelowCurrentLineFloats.IsEmpty() &&
|
||||||
(aLineLayout->LineIsEmpty() ||
|
(aLineLayout->LineIsEmpty() ||
|
||||||
mBlock->ComputeFloatISize(*this, floatAvailableSpace, aFloat)
|
mBlock->ComputeFloatISize(*this, floatAvailableSpace, aFloat)
|
||||||
|
@ -743,8 +745,9 @@ BlockReflowInput::FlowAndPlaceFloat(nsIFrame* aFloat)
|
||||||
// XXXldb Does this handle vertical margins correctly?
|
// XXXldb Does this handle vertical margins correctly?
|
||||||
mBCoord = ClearFloats(mBCoord, floatDisplay->PhysicalBreakType(wm));
|
mBCoord = ClearFloats(mBCoord, floatDisplay->PhysicalBreakType(wm));
|
||||||
}
|
}
|
||||||
// Get the band of available space
|
// Get the band of available space with respect to margin box.
|
||||||
nsFlowAreaRect floatAvailableSpace = GetFloatAvailableSpace(mBCoord);
|
nsFlowAreaRect floatAvailableSpace =
|
||||||
|
GetFloatAvailableSpaceForPlacingFloat(mBCoord);
|
||||||
LogicalRect adjustedAvailableSpace =
|
LogicalRect adjustedAvailableSpace =
|
||||||
mBlock->AdjustFloatAvailableSpace(*this, floatAvailableSpace.mRect, aFloat);
|
mBlock->AdjustFloatAvailableSpace(*this, floatAvailableSpace.mRect, aFloat);
|
||||||
|
|
||||||
|
@ -819,7 +822,7 @@ BlockReflowInput::FlowAndPlaceFloat(nsIFrame* aFloat)
|
||||||
if (adjustedAvailableSpace.BSize(wm) != NS_UNCONSTRAINEDSIZE) {
|
if (adjustedAvailableSpace.BSize(wm) != NS_UNCONSTRAINEDSIZE) {
|
||||||
adjustedAvailableSpace.BSize(wm) -= floatAvailableSpace.mRect.BSize(wm);
|
adjustedAvailableSpace.BSize(wm) -= floatAvailableSpace.mRect.BSize(wm);
|
||||||
}
|
}
|
||||||
floatAvailableSpace = GetFloatAvailableSpace(mBCoord);
|
floatAvailableSpace = GetFloatAvailableSpaceForPlacingFloat(mBCoord);
|
||||||
} else {
|
} else {
|
||||||
// This quirk matches the one in nsBlockFrame::AdjustFloatAvailableSpace
|
// This quirk matches the one in nsBlockFrame::AdjustFloatAvailableSpace
|
||||||
// IE handles float tables in a very special way
|
// IE handles float tables in a very special way
|
||||||
|
@ -860,7 +863,7 @@ BlockReflowInput::FlowAndPlaceFloat(nsIFrame* aFloat)
|
||||||
mBCoord += floatAvailableSpace.mRect.BSize(wm);
|
mBCoord += floatAvailableSpace.mRect.BSize(wm);
|
||||||
// To match nsBlockFrame::AdjustFloatAvailableSpace, we have to
|
// To match nsBlockFrame::AdjustFloatAvailableSpace, we have to
|
||||||
// get a new width for the new band.
|
// get a new width for the new band.
|
||||||
floatAvailableSpace = GetFloatAvailableSpace(mBCoord);
|
floatAvailableSpace = GetFloatAvailableSpaceForPlacingFloat(mBCoord);
|
||||||
adjustedAvailableSpace = mBlock->AdjustFloatAvailableSpace(*this,
|
adjustedAvailableSpace = mBlock->AdjustFloatAvailableSpace(*this,
|
||||||
floatAvailableSpace.mRect, aFloat);
|
floatAvailableSpace.mRect, aFloat);
|
||||||
floatMarginISize = FloatMarginISize(mReflowInput,
|
floatMarginISize = FloatMarginISize(mReflowInput,
|
||||||
|
|
|
@ -22,6 +22,8 @@ namespace mozilla {
|
||||||
// block frame uses along with ReflowInput. Like ReflowInput, this
|
// block frame uses along with ReflowInput. Like ReflowInput, this
|
||||||
// is read-only data that is passed down from a parent frame to its children.
|
// is read-only data that is passed down from a parent frame to its children.
|
||||||
class BlockReflowInput {
|
class BlockReflowInput {
|
||||||
|
using BandInfoType = nsFloatManager::BandInfoType;
|
||||||
|
using ShapeType = nsFloatManager::ShapeType;
|
||||||
|
|
||||||
// Block reflow input flags.
|
// Block reflow input flags.
|
||||||
struct Flags {
|
struct Flags {
|
||||||
|
@ -121,10 +123,14 @@ public:
|
||||||
*/
|
*/
|
||||||
nsFlowAreaRect GetFloatAvailableSpace() const
|
nsFlowAreaRect GetFloatAvailableSpace() const
|
||||||
{ return GetFloatAvailableSpace(mBCoord); }
|
{ return GetFloatAvailableSpace(mBCoord); }
|
||||||
|
nsFlowAreaRect GetFloatAvailableSpaceForPlacingFloat(nscoord aBCoord) const
|
||||||
|
{ return GetFloatAvailableSpaceWithState(
|
||||||
|
aBCoord, ShapeType::Margin, nullptr); }
|
||||||
nsFlowAreaRect GetFloatAvailableSpace(nscoord aBCoord) const
|
nsFlowAreaRect GetFloatAvailableSpace(nscoord aBCoord) const
|
||||||
{ return GetFloatAvailableSpaceWithState(aBCoord, nullptr); }
|
{ return GetFloatAvailableSpaceWithState(
|
||||||
|
aBCoord, ShapeType::ShapeOutside, nullptr); }
|
||||||
nsFlowAreaRect
|
nsFlowAreaRect
|
||||||
GetFloatAvailableSpaceWithState(nscoord aBCoord,
|
GetFloatAvailableSpaceWithState(nscoord aBCoord, ShapeType aShapeType,
|
||||||
nsFloatManager::SavedState *aState) const;
|
nsFloatManager::SavedState *aState) const;
|
||||||
nsFlowAreaRect
|
nsFlowAreaRect
|
||||||
GetFloatAvailableSpaceForBSize(nscoord aBCoord, nscoord aBSize,
|
GetFloatAvailableSpaceForBSize(nscoord aBCoord, nscoord aBSize,
|
||||||
|
|
|
@ -69,6 +69,7 @@ using namespace mozilla;
|
||||||
using namespace mozilla::css;
|
using namespace mozilla::css;
|
||||||
using namespace mozilla::dom;
|
using namespace mozilla::dom;
|
||||||
using namespace mozilla::layout;
|
using namespace mozilla::layout;
|
||||||
|
using ShapeType = nsFloatManager::ShapeType;
|
||||||
typedef nsAbsoluteContainingBlock::AbsPosReflowFlags AbsPosReflowFlags;
|
typedef nsAbsoluteContainingBlock::AbsPosReflowFlags AbsPosReflowFlags;
|
||||||
|
|
||||||
static void MarkAllDescendantLinesDirty(nsBlockFrame* aBlock)
|
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.
|
// Start over with a new available space rect at the new height.
|
||||||
floatAvailableSpace =
|
floatAvailableSpace =
|
||||||
aState.GetFloatAvailableSpaceWithState(aState.mBCoord,
|
aState.GetFloatAvailableSpaceWithState(aState.mBCoord,
|
||||||
|
ShapeType::ShapeOutside,
|
||||||
&floatManagerState);
|
&floatManagerState);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7103,7 +7105,7 @@ nsBlockFrame::ReflowBullet(nsIFrame* aBulletFrame,
|
||||||
// FIXME: aLineTop isn't actually set correctly by some callers, since
|
// FIXME: aLineTop isn't actually set correctly by some callers, since
|
||||||
// they reposition the line.
|
// they reposition the line.
|
||||||
LogicalRect floatAvailSpace =
|
LogicalRect floatAvailSpace =
|
||||||
aState.GetFloatAvailableSpaceWithState(aLineTop,
|
aState.GetFloatAvailableSpaceWithState(aLineTop, ShapeType::ShapeOutside,
|
||||||
&aState.mFloatManagerStateBefore)
|
&aState.mFloatManagerStateBefore)
|
||||||
.mRect;
|
.mRect;
|
||||||
// FIXME (bug 25888): need to check the entire region that the first
|
// FIXME (bug 25888): need to check the entire region that the first
|
||||||
|
|
|
@ -122,7 +122,7 @@ void nsFloatManager::Shutdown()
|
||||||
|
|
||||||
nsFlowAreaRect
|
nsFlowAreaRect
|
||||||
nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
|
nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
|
||||||
BandInfoType aBandInfoType,
|
BandInfoType aBandInfoType, ShapeType aShapeType,
|
||||||
LogicalRect aContentArea, SavedState* aState,
|
LogicalRect aContentArea, SavedState* aState,
|
||||||
const nsSize& aContainerSize) const
|
const nsSize& aContainerSize) const
|
||||||
{
|
{
|
||||||
|
@ -193,8 +193,8 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
nscoord floatBStart = fi.BStart();
|
nscoord floatBStart = fi.BStart(aShapeType);
|
||||||
nscoord floatBEnd = fi.BEnd();
|
nscoord floatBEnd = fi.BEnd(aShapeType);
|
||||||
if (blockStart < floatBStart && aBandInfoType == BandInfoType::BandFromPoint) {
|
if (blockStart < floatBStart && aBandInfoType == BandInfoType::BandFromPoint) {
|
||||||
// This float is below our band. Shrink our band's height if needed.
|
// This float is below our band. Shrink our band's height if needed.
|
||||||
if (floatBStart < blockEnd) {
|
if (floatBStart < blockEnd) {
|
||||||
|
@ -220,7 +220,7 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
|
||||||
StyleFloat floatStyle = fi.mFrame->StyleDisplay()->PhysicalFloats(aWM);
|
StyleFloat floatStyle = fi.mFrame->StyleDisplay()->PhysicalFloats(aWM);
|
||||||
if (floatStyle == StyleFloat::Left) {
|
if (floatStyle == StyleFloat::Left) {
|
||||||
// A left float
|
// A left float
|
||||||
nscoord lineRightEdge = fi.LineRight();
|
nscoord lineRightEdge = fi.LineRight(aShapeType);
|
||||||
if (lineRightEdge > lineLeft) {
|
if (lineRightEdge > lineLeft) {
|
||||||
lineLeft = lineRightEdge;
|
lineLeft = lineRightEdge;
|
||||||
// Only set haveFloats to true if the float is inside our
|
// Only set haveFloats to true if the float is inside our
|
||||||
|
@ -231,7 +231,7 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// A right float
|
// A right float
|
||||||
nscoord lineLeftEdge = fi.LineLeft();
|
nscoord lineLeftEdge = fi.LineLeft(aShapeType);
|
||||||
if (lineLeftEdge < lineRight) {
|
if (lineLeftEdge < lineRight) {
|
||||||
lineRight = lineLeftEdge;
|
lineRight = lineLeftEdge;
|
||||||
// See above.
|
// See above.
|
||||||
|
@ -537,14 +537,44 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
|
||||||
aMarginRect.BSize(aWM))
|
aMarginRect.BSize(aWM))
|
||||||
{
|
{
|
||||||
MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
|
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
|
#ifdef NS_BUILD_REFCNT_LOGGING
|
||||||
nsFloatManager::FloatInfo::FloatInfo(const FloatInfo& aOther)
|
nsFloatManager::FloatInfo::FloatInfo(const FloatInfo& aOther)
|
||||||
: mFrame(aOther.mFrame),
|
: mFrame(aOther.mFrame)
|
||||||
mLeftBEnd(aOther.mLeftBEnd),
|
, mLeftBEnd(aOther.mLeftBEnd)
|
||||||
mRightBEnd(aOther.mRightBEnd),
|
, mRightBEnd(aOther.mRightBEnd)
|
||||||
mRect(aOther.mRect)
|
, mRect(aOther.mRect)
|
||||||
|
, mShapeBoxRect(aOther.mShapeBoxRect)
|
||||||
{
|
{
|
||||||
MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
|
MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
|
||||||
}
|
}
|
||||||
|
@ -555,6 +585,50 @@ nsFloatManager::FloatInfo::~FloatInfo()
|
||||||
}
|
}
|
||||||
#endif
|
#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()
|
nsAutoFloatManager::~nsAutoFloatManager()
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
#define nsFloatManager_h_
|
#define nsFloatManager_h_
|
||||||
|
|
||||||
#include "mozilla/Attributes.h"
|
#include "mozilla/Attributes.h"
|
||||||
|
#include "mozilla/Maybe.h"
|
||||||
#include "mozilla/WritingModes.h"
|
#include "mozilla/WritingModes.h"
|
||||||
#include "nsCoord.h"
|
#include "nsCoord.h"
|
||||||
#include "nsFrameList.h" // for DEBUG_FRAME_DUMP
|
#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
|
* space if a float begins or ends in it.) The inline size of the
|
||||||
* resulting rectangle can be negative.
|
* resulting rectangle can be negative.
|
||||||
*
|
*
|
||||||
* @param aBCoord [in] block-dir coordinate for block start of
|
* ShapeType can be used to request two different types of flow areas.
|
||||||
* available space desired
|
* (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 aBSize [in] see above
|
||||||
* @param aContentArea [in] an nsRect representing the content area
|
* @param aContentArea [in] an nsRect representing the content area
|
||||||
* @param aState [in] If null, use the current state, otherwise, do
|
* @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
|
* mRect is the resulting rectangle for line boxes. It will not
|
||||||
* extend beyond aContentArea's inline bounds, but may be
|
* extend beyond aContentArea's inline bounds, but may be
|
||||||
* narrower when floats are present.
|
* narrower when floats are present.
|
||||||
* mBandHasFloats is whether there are floats at the sides of the
|
* mHasFloats is whether there are floats at the sides of the
|
||||||
* return value including those that do not reduce the line box
|
* return value including those that do not reduce the line box
|
||||||
* inline size at all (because they are entirely in the margins)
|
* inline size at all (because they are entirely in the margins)
|
||||||
*
|
|
||||||
* aBCoord and aAvailSpace are positioned relative to the current translation
|
|
||||||
*/
|
*/
|
||||||
enum class BandInfoType { BandFromPoint, WidthWithinHeight };
|
enum class BandInfoType { BandFromPoint, WidthWithinHeight };
|
||||||
|
enum class ShapeType { Margin, ShapeOutside };
|
||||||
nsFlowAreaRect GetFlowArea(mozilla::WritingMode aWM,
|
nsFlowAreaRect GetFlowArea(mozilla::WritingMode aWM,
|
||||||
nscoord aBCoord, nscoord aBSize,
|
nscoord aBCoord, nscoord aBSize,
|
||||||
BandInfoType aBandInfoType,
|
BandInfoType aBandInfoType, ShapeType aShapeType,
|
||||||
mozilla::LogicalRect aContentArea,
|
mozilla::LogicalRect aContentArea,
|
||||||
SavedState* aState,
|
SavedState* aState,
|
||||||
const nsSize& aContainerSize) const;
|
const nsSize& aContainerSize) const;
|
||||||
|
@ -324,6 +330,18 @@ private:
|
||||||
nscoord BSize() const { return mRect.height; }
|
nscoord BSize() const { return mRect.height; }
|
||||||
bool IsEmpty() const { return mRect.IsEmpty(); }
|
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
|
#ifdef NS_BUILD_REFCNT_LOGGING
|
||||||
FloatInfo(const FloatInfo& aOther);
|
FloatInfo(const FloatInfo& aOther);
|
||||||
~FloatInfo();
|
~FloatInfo();
|
||||||
|
@ -336,6 +354,10 @@ private:
|
||||||
// the line-relative axis of the frame manager and its block
|
// the line-relative axis of the frame manager and its block
|
||||||
// coordinates are in the frame manager's real block direction.
|
// coordinates are in the frame manager's real block direction.
|
||||||
nsRect mRect;
|
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
|
#ifdef DEBUG
|
||||||
|
|
|
@ -52,6 +52,9 @@ include ruby/reftest.list
|
||||||
# Selectors Level 4
|
# Selectors Level 4
|
||||||
include selectors4/reftest.list
|
include selectors4/reftest.list
|
||||||
|
|
||||||
|
# Shapes Level 1
|
||||||
|
include shapes1/reftest.list
|
||||||
|
|
||||||
# Text Level 3
|
# Text Level 3
|
||||||
include text3/reftest.list
|
include text3/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
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Загрузка…
Ссылка в новой задаче