зеркало из https://github.com/mozilla/gecko-dev.git
Merge mozilla-central to inbound. a=merge CLOSED TREE
This commit is contained in:
Gurzau Raul
Коммит
8409fd4a82
|
|
@ -124,29 +124,15 @@ ShapeUtils::ComputeInsetRect(const UniquePtr<StyleBasicShape>& aBasicShape,
|
|||
const nsTArray<nsStyleCoord>& coords = aBasicShape->Coordinates();
|
||||
MOZ_ASSERT(coords.Length() == 4, "wrong number of arguments");
|
||||
|
||||
nsMargin inset(coords[0].ComputeCoordPercentCalc(aRefBox.Height()),
|
||||
coords[1].ComputeCoordPercentCalc(aRefBox.Width()),
|
||||
coords[2].ComputeCoordPercentCalc(aRefBox.Height()),
|
||||
coords[3].ComputeCoordPercentCalc(aRefBox.Width()));
|
||||
nsMargin inset(coords[0].ComputeCoordPercentCalc(aRefBox.height),
|
||||
coords[1].ComputeCoordPercentCalc(aRefBox.width),
|
||||
coords[2].ComputeCoordPercentCalc(aRefBox.height),
|
||||
coords[3].ComputeCoordPercentCalc(aRefBox.width));
|
||||
|
||||
nscoord x = aRefBox.X() + inset.left;
|
||||
nscoord width = aRefBox.Width() - inset.LeftRight();
|
||||
nscoord y = aRefBox.Y() + inset.top;
|
||||
nscoord height = aRefBox.Height() - inset.TopBottom();
|
||||
nsRect insetRect(aRefBox);
|
||||
insetRect.Deflate(inset);
|
||||
|
||||
// Invert left and right, if necessary.
|
||||
if (width < 0) {
|
||||
width *= -1;
|
||||
x -= width;
|
||||
}
|
||||
|
||||
// Invert top and bottom, if necessary.
|
||||
if (height < 0) {
|
||||
height *= -1;
|
||||
y -= height;
|
||||
}
|
||||
|
||||
return nsRect(x, y, width, height);
|
||||
return insetRect;
|
||||
}
|
||||
|
||||
/* static */ bool
|
||||
|
|
|
|||
|
|
@ -57,16 +57,7 @@ struct ShapeUtils final
|
|||
const UniquePtr<StyleBasicShape>& aBasicShape,
|
||||
const nsPoint& aCenter, const nsRect& aRefBox);
|
||||
|
||||
// Compute the rect for an inset. If the inset amount is larger than
|
||||
// aRefBox itself, this will return a rect the same shape as the inverse
|
||||
// rect that would be created by insetting aRefBox by the inset amount.
|
||||
// This process is *not* what is called for by the current spec at
|
||||
// https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes.
|
||||
// The spec currently treats empty shapes, including overly-inset rects, as
|
||||
// defining 'empty float areas' that don't affect layout. However, it is
|
||||
// practically useful to treat empty shapes as having edges for purposes of
|
||||
// affecting layout, and there is growing momentum for the approach we
|
||||
// are taking here.
|
||||
// Compute the rect for an inset.
|
||||
// @param aRefBox the reference box of the inset.
|
||||
// @return The inset rect in app units.
|
||||
static nsRect ComputeInsetRect(
|
||||
|
|
|
|||
|
|
@ -730,10 +730,7 @@ public:
|
|||
return mCenter.y + mRadii.height + mShapeMargin;
|
||||
}
|
||||
bool IsEmpty() const override {
|
||||
// An EllipseShapeInfo is never empty, because an ellipse or circle with
|
||||
// a zero radius acts like a point, and an ellipse with one zero radius
|
||||
// acts like a line.
|
||||
return false;
|
||||
return mRadii.IsEmpty();
|
||||
}
|
||||
|
||||
void Translate(nscoord aLineLeft, nscoord aBlockStart) override
|
||||
|
|
@ -869,16 +866,10 @@ nsFloatManager::EllipseShapeInfo::EllipseShapeInfo(const nsPoint& aCenter,
|
|||
// adjust it to compensate for the expansion of the inline dimension.
|
||||
// If we're in the expanded region, or if we're using a b that's more
|
||||
// than the bEnd of the ellipse, the intercept is nscoord_MIN.
|
||||
// We have one other special case to consider: when the ellipse has no
|
||||
// height. In that case we treat the bInAppUnits == 0 case as
|
||||
// intercepting at the width of the ellipse. All other cases solve
|
||||
// the intersection mathematically.
|
||||
const int32_t iIntercept =
|
||||
(bIsInExpandedRegion || bIsMoreThanEllipseBEnd) ? nscoord_MIN :
|
||||
const int32_t iIntercept = (bIsInExpandedRegion ||
|
||||
bIsMoreThanEllipseBEnd) ? nscoord_MIN :
|
||||
iExpand + NSAppUnitsToIntPixels(
|
||||
(!!mRadii.height || bInAppUnits) ?
|
||||
XInterceptAtY(bInAppUnits, mRadii.width, mRadii.height) :
|
||||
mRadii.width,
|
||||
XInterceptAtY(bInAppUnits, mRadii.width, mRadii.height),
|
||||
aAppUnitsPerDevPixel);
|
||||
|
||||
// Set iMax in preparation for this block row.
|
||||
|
|
@ -895,10 +886,8 @@ nsFloatManager::EllipseShapeInfo::EllipseShapeInfo(const nsPoint& aCenter,
|
|||
// Case 1: Expanded reqion pixel.
|
||||
df[index] = MAX_MARGIN_5X;
|
||||
} else if ((int32_t)i <= iIntercept) {
|
||||
// Case 2: Pixel within the ellipse, or just outside the edge of it.
|
||||
// Having a positive height indicates that there's an area we can
|
||||
// be inside of.
|
||||
df[index] = (!!mRadii.height) ? 0 : 5;
|
||||
// Case 2: Pixel within the ellipse.
|
||||
df[index] = 0;
|
||||
} else {
|
||||
// Case 3: Other pixel.
|
||||
|
||||
|
|
@ -1084,13 +1073,7 @@ public:
|
|||
const nscoord aBEnd) const override;
|
||||
nscoord BStart() const override { return mRect.y; }
|
||||
nscoord BEnd() const override { return mRect.YMost(); }
|
||||
bool IsEmpty() const override {
|
||||
// A RoundedBoxShapeInfo is never empty, because if it is collapsed to
|
||||
// zero area, it acts like a point. If it is collapsed further, to become
|
||||
// inside-out, it acts like a rect in the same shape as the inside-out
|
||||
// rect.
|
||||
return false;
|
||||
}
|
||||
bool IsEmpty() const override { return mRect.IsEmpty(); }
|
||||
|
||||
void Translate(nscoord aLineLeft, nscoord aBlockStart) override
|
||||
{
|
||||
|
|
@ -1277,20 +1260,14 @@ public:
|
|||
const nscoord aBEnd) const override;
|
||||
nscoord BStart() const override { return mBStart; }
|
||||
nscoord BEnd() const override { return mBEnd; }
|
||||
bool IsEmpty() const override {
|
||||
// A PolygonShapeInfo is never empty, because the parser prevents us from
|
||||
// creating a shape with no vertices. If we only have 1 vertex, the
|
||||
// shape acts like a point. With 2 non-coincident vertices, the shape
|
||||
// acts like a line.
|
||||
return false;
|
||||
}
|
||||
bool IsEmpty() const override { return mEmpty; }
|
||||
|
||||
void Translate(nscoord aLineLeft, nscoord aBlockStart) override;
|
||||
|
||||
private:
|
||||
// Helper method for determining the mBStart and mBEnd based on the
|
||||
// vertices' y extent.
|
||||
void ComputeExtent();
|
||||
// Helper method for determining if the vertices define a float area at
|
||||
// all, and to set mBStart and mBEnd based on the vertices' y extent.
|
||||
void ComputeEmptinessAndExtent();
|
||||
|
||||
// Helper method for implementing LineLeft() and LineRight().
|
||||
nscoord ComputeLineIntercept(
|
||||
|
|
@ -1318,10 +1295,15 @@ private:
|
|||
// The intervals are stored in ascending order on y.
|
||||
nsTArray<nsRect> mIntervals;
|
||||
|
||||
// Computed block start and block end value of the polygon shape. These
|
||||
// initial values are set to correct values in ComputeExtent(), which is
|
||||
// called from all constructors. Afterwards, mBStart is guaranteed to be
|
||||
// less than or equal to mBEnd.
|
||||
// If mEmpty is true, that means the polygon encloses no area.
|
||||
bool mEmpty = false;
|
||||
|
||||
// Computed block start and block end value of the polygon shape.
|
||||
//
|
||||
// If mEmpty is false, their initial values nscoord_MAX and nscoord_MIN
|
||||
// are used as sentinels for computing min() and max() in the
|
||||
// constructor, and mBStart is guaranteed to be less than or equal to
|
||||
// mBEnd. If mEmpty is true, their values do not matter.
|
||||
nscoord mBStart = nscoord_MAX;
|
||||
nscoord mBEnd = nscoord_MIN;
|
||||
};
|
||||
|
|
@ -1329,7 +1311,7 @@ private:
|
|||
nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(nsTArray<nsPoint>&& aVertices)
|
||||
: mVertices(aVertices)
|
||||
{
|
||||
ComputeExtent();
|
||||
ComputeEmptinessAndExtent();
|
||||
}
|
||||
|
||||
nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(
|
||||
|
|
@ -1342,7 +1324,13 @@ nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(
|
|||
MOZ_ASSERT(aShapeMargin > 0, "This constructor should only be used for a "
|
||||
"polygon with a positive shape-margin.");
|
||||
|
||||
ComputeExtent();
|
||||
ComputeEmptinessAndExtent();
|
||||
|
||||
// If we're empty, then the float area stays empty, even with a positive
|
||||
// shape-margin.
|
||||
if (mEmpty) {
|
||||
return;
|
||||
}
|
||||
|
||||
// With a positive aShapeMargin, we have to calculate a distance
|
||||
// field from the opaque pixels, then build intervals based on
|
||||
|
|
@ -1431,7 +1419,7 @@ nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(
|
|||
// converting the app units to dev pixels.
|
||||
nscoord bInAppUnitsMarginRect = bInAppUnits + aMarginRect.y;
|
||||
bool bIsLessThanPolygonBStart(bInAppUnitsMarginRect < mBStart);
|
||||
bool bIsMoreThanPolygonBEnd(bInAppUnitsMarginRect > mBEnd);
|
||||
bool bIsMoreThanPolygonBEnd(bInAppUnitsMarginRect >= mBEnd);
|
||||
|
||||
const int32_t iLeftEdge = (bIsInExpandedRegion ||
|
||||
bIsLessThanPolygonBStart ||
|
||||
|
|
@ -1462,11 +1450,9 @@ nsFloatManager::PolygonShapeInfo::PolygonShapeInfo(
|
|||
bIsInExpandedRegion) {
|
||||
// Case 1: Expanded pixel.
|
||||
df[index] = MAX_MARGIN_5X;
|
||||
} else if ((int32_t)i >= iLeftEdge && (int32_t)i <= iRightEdge) {
|
||||
// Case 2: Polygon pixel, either inside or just adjacent to the right
|
||||
// edge. We need this special distinction to detect a space between
|
||||
// edges that is less than one dev pixel.
|
||||
df[index] = (int32_t)i < iRightEdge ? 0 : 5;
|
||||
} else if ((int32_t)i >= iLeftEdge && (int32_t)i < iRightEdge) {
|
||||
// Case 2: Polygon pixel.
|
||||
df[index] = 0;
|
||||
} else {
|
||||
// Case 3: Other pixel.
|
||||
|
||||
|
|
@ -1619,6 +1605,8 @@ nscoord
|
|||
nsFloatManager::PolygonShapeInfo::LineLeft(const nscoord aBStart,
|
||||
const nscoord aBEnd) const
|
||||
{
|
||||
MOZ_ASSERT(!mEmpty, "Shouldn't be called if the polygon encloses no area.");
|
||||
|
||||
// Use intervals if we have them.
|
||||
if (!mIntervals.IsEmpty()) {
|
||||
return LineEdge(mIntervals, aBStart, aBEnd, true);
|
||||
|
|
@ -1640,6 +1628,8 @@ nscoord
|
|||
nsFloatManager::PolygonShapeInfo::LineRight(const nscoord aBStart,
|
||||
const nscoord aBEnd) const
|
||||
{
|
||||
MOZ_ASSERT(!mEmpty, "Shouldn't be called if the polygon encloses no area.");
|
||||
|
||||
// Use intervals if we have them.
|
||||
if (!mIntervals.IsEmpty()) {
|
||||
return LineEdge(mIntervals, aBStart, aBEnd, false);
|
||||
|
|
@ -1653,8 +1643,44 @@ nsFloatManager::PolygonShapeInfo::LineRight(const nscoord aBStart,
|
|||
}
|
||||
|
||||
void
|
||||
nsFloatManager::PolygonShapeInfo::ComputeExtent()
|
||||
nsFloatManager::PolygonShapeInfo::ComputeEmptinessAndExtent()
|
||||
{
|
||||
// Polygons with fewer than three vertices result in an empty area.
|
||||
// https://drafts.csswg.org/css-shapes/#funcdef-polygon
|
||||
if (mVertices.Length() < 3) {
|
||||
mEmpty = true;
|
||||
return;
|
||||
}
|
||||
|
||||
auto Determinant = [] (const nsPoint& aP0, const nsPoint& aP1) {
|
||||
// Returns the determinant of the 2x2 matrix [aP0 aP1].
|
||||
// https://en.wikipedia.org/wiki/Determinant#2_.C3.97_2_matrices
|
||||
return aP0.x * aP1.y - aP0.y * aP1.x;
|
||||
};
|
||||
|
||||
// See if we have any vertices that are non-collinear with the first two.
|
||||
// (If a polygon's vertices are all collinear, it encloses no area.)
|
||||
bool isEntirelyCollinear = true;
|
||||
const nsPoint& p0 = mVertices[0];
|
||||
const nsPoint& p1 = mVertices[1];
|
||||
for (size_t i = 2; i < mVertices.Length(); ++i) {
|
||||
const nsPoint& p2 = mVertices[i];
|
||||
|
||||
// If the determinant of the matrix formed by two points is 0, that
|
||||
// means they're collinear with respect to the origin. Here, if it's
|
||||
// nonzero, then p1 and p2 are non-collinear with respect to p0, i.e.
|
||||
// the three points are non-collinear.
|
||||
if (Determinant(p2 - p0, p1 - p0) != 0) {
|
||||
isEntirelyCollinear = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isEntirelyCollinear) {
|
||||
mEmpty = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// mBStart and mBEnd are the lower and the upper bounds of all the
|
||||
// vertex.y, respectively. The vertex.y is actually on the block-axis of
|
||||
// the float manager's writing mode.
|
||||
|
|
@ -1662,9 +1688,6 @@ nsFloatManager::PolygonShapeInfo::ComputeExtent()
|
|||
mBStart = std::min(mBStart, vertex.y);
|
||||
mBEnd = std::max(mBEnd, vertex.y);
|
||||
}
|
||||
|
||||
MOZ_ASSERT(mBStart <= mBEnd, "Start of float area should be less than "
|
||||
"or equal to the end.");
|
||||
}
|
||||
|
||||
nscoord
|
||||
|
|
@ -1680,16 +1703,6 @@ nsFloatManager::PolygonShapeInfo::ComputeLineIntercept(
|
|||
const size_t len = mVertices.Length();
|
||||
nscoord lineIntercept = aLineInterceptInitialValue;
|
||||
|
||||
// We have some special treatment of horizontal lines between vertices.
|
||||
// Generally, we can ignore the impact of the horizontal lines since their
|
||||
// endpoints will be included in the lines preceeding or following them.
|
||||
// However, it's possible the polygon is entirely a horizontal line,
|
||||
// possibly built from more than one horizontal segment. In such a case,
|
||||
// we need to have the horizontal line(s) contribute to the line intercepts.
|
||||
// We do this by accepting horizontal lines until we find a non-horizontal
|
||||
// line, after which all further horizontal lines are ignored.
|
||||
bool canIgnoreHorizontalLines = false;
|
||||
|
||||
// Iterate each line segment {p0, p1}, {p1, p2}, ..., {pn, p0}.
|
||||
for (size_t i = 0; i < len; ++i) {
|
||||
const nsPoint* smallYVertex = &mVertices[i];
|
||||
|
|
@ -1701,46 +1714,24 @@ nsFloatManager::PolygonShapeInfo::ComputeLineIntercept(
|
|||
std::swap(smallYVertex, bigYVertex);
|
||||
}
|
||||
|
||||
// Generally, we need to ignore line segments that either don't intersect
|
||||
// the band, or merely touch it. However, if the polygon has no block extent
|
||||
// (it is a point, or a horizontal line), and the band touches the line
|
||||
// segment, we let that line segment through.
|
||||
if ((aBStart >= bigYVertex->y || aBEnd <= smallYVertex->y) &&
|
||||
!(mBStart == mBEnd && aBStart == bigYVertex->y)) {
|
||||
// Skip computing the intercept if the band doesn't intersect the
|
||||
// line segment.
|
||||
if (aBStart >= bigYVertex->y || aBEnd <= smallYVertex->y ||
|
||||
smallYVertex->y == bigYVertex->y) {
|
||||
// Skip computing the intercept if a) the band doesn't intersect the
|
||||
// line segment (even if it crosses one of two the vertices); or b)
|
||||
// the line segment is horizontal. It's OK because the two end points
|
||||
// forming this horizontal segment will still be considered if each of
|
||||
// them is forming another non-horizontal segment with other points.
|
||||
continue;
|
||||
}
|
||||
|
||||
nscoord bStartLineIntercept;
|
||||
nscoord bEndLineIntercept;
|
||||
|
||||
if (smallYVertex->y == bigYVertex->y) {
|
||||
// The line is horizontal; see if we can ignore it.
|
||||
if (canIgnoreHorizontalLines) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// For a horizontal line that we can't ignore, we treat the two x value
|
||||
// ends as the bStartLineIntercept and bEndLineIntercept. It doesn't
|
||||
// matter which is applied to which, because they'll both be applied
|
||||
// to aCompareOp.
|
||||
bStartLineIntercept = smallYVertex->x;
|
||||
bEndLineIntercept = bigYVertex->x;
|
||||
} else {
|
||||
// This is not a horizontal line. We can now ignore all future
|
||||
// horizontal lines.
|
||||
canIgnoreHorizontalLines = true;
|
||||
|
||||
bStartLineIntercept =
|
||||
aBStart <= smallYVertex->y
|
||||
? smallYVertex->x
|
||||
: XInterceptAtY(aBStart, *smallYVertex, *bigYVertex);
|
||||
bEndLineIntercept =
|
||||
aBEnd >= bigYVertex->y
|
||||
? bigYVertex->x
|
||||
: XInterceptAtY(aBEnd, *smallYVertex, *bigYVertex);
|
||||
}
|
||||
nscoord bStartLineIntercept =
|
||||
aBStart <= smallYVertex->y
|
||||
? smallYVertex->x
|
||||
: XInterceptAtY(aBStart, *smallYVertex, *bigYVertex);
|
||||
nscoord bEndLineIntercept =
|
||||
aBEnd >= bigYVertex->y
|
||||
? bigYVertex->x
|
||||
: XInterceptAtY(aBEnd, *smallYVertex, *bigYVertex);
|
||||
|
||||
// If either new intercept is more extreme than lineIntercept (per
|
||||
// aCompareOp), then update lineIntercept to that value.
|
||||
|
|
|
|||
|
|
@ -1,33 +1 @@
|
|||
fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),16,4) pref(layout.css.shape-outside.enabled,true) == dynamic-shape-outside-1.html dynamic-shape-outside-1-ref.html
|
||||
|
||||
== shape-outside-empty-circle-1.html shape-outside-empty-point-ref.html
|
||||
== shape-outside-empty-circle-2.html shape-outside-empty-circle-ref.html
|
||||
== shape-outside-empty-circle-3.html shape-outside-empty-nothing-ref.html
|
||||
|
||||
== shape-outside-empty-ellipse-1.html shape-outside-empty-point-ref.html
|
||||
== shape-outside-empty-ellipse-2.html shape-outside-empty-circle-ref.html
|
||||
== shape-outside-empty-ellipse-3.html shape-outside-empty-point-ref.html
|
||||
# The next test needs fuzzy due to chamfer aberration
|
||||
fuzzy(255,520) == shape-outside-empty-ellipse-4.html shape-outside-empty-circle-ref.html
|
||||
== shape-outside-empty-ellipse-5.html shape-outside-empty-line-ref.html
|
||||
== shape-outside-empty-ellipse-6.html shape-outside-empty-line-ref.html
|
||||
== shape-outside-empty-ellipse-7.html shape-outside-empty-nothing-ref.html
|
||||
== shape-outside-empty-ellipse-8.html shape-outside-empty-nothing-ref.html
|
||||
|
||||
== shape-outside-empty-inset-1.html shape-outside-empty-point-ref.html
|
||||
== shape-outside-empty-inset-2.html shape-outside-empty-circle-ref.html
|
||||
== shape-outside-empty-inset-3.html shape-outside-empty-point-ref.html
|
||||
== shape-outside-empty-inset-4.html shape-outside-empty-circle-ref.html
|
||||
== shape-outside-empty-inset-5.html shape-outside-empty-line-ref.html
|
||||
== shape-outside-empty-inset-6.html shape-outside-empty-line-ref.html
|
||||
== shape-outside-empty-inset-7.html shape-outside-empty-nothing-ref.html
|
||||
== shape-outside-empty-inset-8.html shape-outside-empty-nothing-ref.html
|
||||
|
||||
== shape-outside-empty-polygon-1.html shape-outside-empty-point-ref.html
|
||||
# The next test needs fuzzy due to chamfer aberration
|
||||
fuzzy(255,520) == shape-outside-empty-polygon-2.html shape-outside-empty-circle-ref.html
|
||||
== shape-outside-empty-polygon-3.html shape-outside-empty-line-ref.html
|
||||
== shape-outside-empty-polygon-4.html shape-outside-empty-line-ref.html
|
||||
== shape-outside-empty-polygon-5.html shape-outside-empty-point-ref.html
|
||||
== shape-outside-empty-polygon-6.html shape-outside-empty-nothing-ref.html
|
||||
== shape-outside-empty-polygon-7.html shape-outside-empty-nothing-ref.html
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty circle, acts like a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: circle(0px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty circle, with shape-margin acts like a circle</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: circle(0px);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty circle, positioned between elements, acts like nothing</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: circle(0px at 100px 20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Reference: Shape-outside empty area, float elements around a circle</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: circle(90px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty point ellipse, acts like a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(0px 0px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty point ellipse, with shape-margin acts like a circle</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(0px 0px);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty horizontal ellipse, acts like a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(50px 0px at 50px 90px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty horizontal ellipse, with shape-margin acts like a circle (with some aberration)</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(50px 0px at 50px 90px);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty vertical ellipse, acts like a line</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(0px 100px at 190px 100px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty vertical ellipse, with shape-margin acts like a capsule (with rounded endpoints at top and bottom)</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(0px 100px at 100px 100px);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty point ellipse, positioned between elements, acts like nothing</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(0px 0px at 100px 20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty horizontal ellipse, positioned between elements, acts like nothing</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: ellipse(50px 0px at 50px 20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty zero-sized inset, acts like a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(50% 50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty zero-sized inset, with shape-margin acts like a circle</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(50% 50%);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty horizontal flat inset, acts like a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(50% 50% 50% 0%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty horizontal flat inset, with shape-margin acts like a circle</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(50% 50% 50% 0%);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty vertical flat inset, acts like a line</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(0% 5% 0% 95%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside inside-out vertical flat inset, acts like a line</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(0% 100% 0% 95%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty zero-sized inset, positioned between elements, acts like nothing</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(20px 100px 160px 100px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside empty horizontal inset, positioned between elements, acts like nothing</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: inset(20px 0px 160px 50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Reference: Shape-outside empty area, float text around a vertical line</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin-left: 190px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Reference: Shape-outside empty area, no float impact</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Reference: Shape-outside empty area, float text around a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box style="margin-left: 100px"></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside polygon with 1 vertex, acts like a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: polygon(100px 90px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside polygon with 1 vertex, with shape-margin acts like a circle (with some aberration)</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: polygon(100px 90px);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside polygon with 2 vertices, acts like a line</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: polygon(190px 0px, 190px 200px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside polygon with 2 vertices, with shape-margin acts like a line with rounded endpoints</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: polygon(100px 0px, 100px 200px);
|
||||
shape-margin: 90px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside polygon with 3 coincident vertices, acts like a point</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: polygon(100px 90px, 100px 90px, 100px 90px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside polygon with 1 vertex, positioned between elements, acts like nothing</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: polygon(100px 20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Shape-outside polygon with 2 vertices, positioned between elements, acts like nothing</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
.container {
|
||||
width: 600px;
|
||||
}
|
||||
box {
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
.shape {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
shape-outside: polygon(0px 20px, 100px 20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="shape"></div>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
<box></box><br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -44,10 +44,14 @@ fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),7,6) == shape-outside-circle
|
|||
== shape-outside-circle-036.html shape-outside-circle-036-ref.html
|
||||
== shape-outside-circle-037.html shape-outside-circle-036-ref.html
|
||||
== shape-outside-circle-038.html shape-outside-circle-036-ref.html
|
||||
== shape-outside-circle-039.html shape-outside-circle-039-ref.html
|
||||
== shape-outside-circle-040.html shape-outside-circle-039-ref.html
|
||||
== shape-outside-circle-041.html shape-outside-circle-041-ref.html
|
||||
== shape-outside-circle-042.html shape-outside-circle-042-ref.html
|
||||
== shape-outside-circle-043.html shape-outside-circle-042-ref.html
|
||||
== shape-outside-circle-044.html shape-outside-circle-042-ref.html
|
||||
== shape-outside-circle-045.html shape-outside-circle-045-ref.html
|
||||
== shape-outside-circle-046.html shape-outside-circle-045-ref.html
|
||||
== shape-outside-circle-047.html shape-outside-circle-047-ref.html
|
||||
== shape-outside-circle-048.html shape-outside-circle-048-ref.html
|
||||
== shape-outside-circle-049.html shape-outside-circle-049-ref.html
|
||||
|
|
@ -85,6 +89,8 @@ fuzzy(108,81) == shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.ht
|
|||
# Basic shape: inset()
|
||||
== shape-outside-inset-016.html shape-outside-inset-016-ref.html
|
||||
== shape-outside-inset-017.html shape-outside-inset-017-ref.html
|
||||
== shape-outside-inset-018.html shape-outside-inset-018-ref.html
|
||||
== shape-outside-inset-019.html shape-outside-inset-019-ref.html
|
||||
== shape-outside-inset-020.html shape-outside-inset-020-ref.html
|
||||
== shape-outside-inset-021.html shape-outside-inset-021-ref.html
|
||||
== shape-outside-inset-022.html shape-outside-inset-022-ref.html
|
||||
|
|
@ -103,4 +109,10 @@ fuzzy(108,81) == shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.ht
|
|||
== shape-outside-polygon-023.html shape-outside-polygon-023-ref.html
|
||||
== shape-outside-polygon-024.html shape-outside-polygon-024-ref.html
|
||||
== shape-outside-polygon-025.html shape-outside-polygon-025-ref.html
|
||||
== shape-outside-polygon-026.html shape-outside-polygon-026-ref.html
|
||||
== shape-outside-polygon-027.html shape-outside-polygon-027-ref.html
|
||||
== shape-outside-polygon-028.html shape-outside-polygon-026-ref.html
|
||||
== shape-outside-polygon-029.html shape-outside-polygon-027-ref.html
|
||||
== shape-outside-polygon-030.html shape-outside-polygon-030-ref.html
|
||||
== shape-outside-polygon-031.html shape-outside-polygon-031-ref.html
|
||||
fuzzy(101,2263) == shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, circle(0%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, circle(0%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-039-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
shape-outside: circle(0%) border-box;
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, circle(closest-side at left center) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-039-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
shape-outside: circle(closest-side at left center) border-box;
|
||||
clip-path: circle(closest-side at left center) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, circle(0%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, circle(0%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-045-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
shape-outside: circle(0%) border-box;
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, circle(closest-side at right center) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-045-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
shape-outside: circle(closest-side at right center) border-box;
|
||||
clip-path: circle(closest-side at right center) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, inset(50%) reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px; top: 0; left: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; left: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; left: 0;"></div>
|
||||
<div class="box" style="height: 24px; top: 96px; left: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, inset(50%)</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-inset-018-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape inset(50%) value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
shape-outside: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, inset(50%) reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px; top: 0; right: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; right: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; right: 0;"></div>
|
||||
<div class="box" style="height: 24px; top: 96px; right: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, inset(50%)</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-inset-019-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape inset(50%) value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
shape-outside: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(60px 20px, 100px 60px) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px; top: 0; left: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 30px; left: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 60px; left: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 80px; left: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 100px; left: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 130px; left: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(60px 20px, 100px 60px) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-026-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Less than three vertices, resulting an empty area. */
|
||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(60px 20px, 100px 60px) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px; top: 0; right: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 30px; right: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 60px; right: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 80px; right: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 100px; right: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 130px; right: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(60px 20px, 100px 60px) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-027-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Less than three vertices, resulting an empty area. */
|
||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-026-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* All vertices are collinear, resulting an empty area. */
|
||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-027-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* All vertices are collinear, resulting an empty area. */
|
||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px; top: 0; left: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 30px; left: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 60px; left: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 80px; left: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 100px; left: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 130px; left: 80px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-030-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* polygon contains horizontal lines. */
|
||||
shape-outside: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
||||
clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px; top: 0; right: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 80px; right: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 100px; right: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 130px; right: 80px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-031-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* polygon contains horizontal lines. */
|
||||
shape-outside: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -174985,6 +174985,30 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html",
|
||||
|
|
@ -175033,6 +175057,30 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html",
|
||||
|
|
@ -175453,6 +175501,30 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html",
|
||||
|
|
@ -175813,6 +175885,78 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html",
|
||||
|
|
@ -272831,6 +272975,11 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -272841,6 +272990,11 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -273006,6 +273160,16 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -273156,6 +273320,26 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -519769,7 +519953,7 @@
|
|||
"reftest"
|
||||
],
|
||||
"css/css-scoping/shadow-at-import.html": [
|
||||
"67295000ad3c24c2d9ab0ac556d34758f3ce654c",
|
||||
"40f2606177ad3143774d97060ac1bbfa9743801f",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-scoping/shadow-cascade-order-001.html": [
|
||||
|
|
@ -545865,7 +546049,7 @@
|
|||
"testharness"
|
||||
],
|
||||
"css/cssom/at-namespace.html": [
|
||||
"cd3845557f5c40f51f7e3cbdfff52f440fe689b6",
|
||||
"96da2dd244e9e19ff8ca1ca81b06c3ebdcee8267",
|
||||
"testharness"
|
||||
],
|
||||
"css/cssom/computed-style-001.html": [
|
||||
|
|
@ -545997,19 +546181,19 @@
|
|||
"testharness"
|
||||
],
|
||||
"css/cssom/insertRule-charset-no-index.html": [
|
||||
"2be98274fe292089f381d216dc415ddc812a105f",
|
||||
"cd3a96351a4c8dcd417fb03963f9d4fb0760c746",
|
||||
"testharness"
|
||||
],
|
||||
"css/cssom/insertRule-import-no-index.html": [
|
||||
"44ef5a2c490675d0088651dc101dbbb1fc83fdd1",
|
||||
"ba89bad41a8d243f89ec91a0c02a34e97b378bc8",
|
||||
"testharness"
|
||||
],
|
||||
"css/cssom/insertRule-namespace-no-index.html": [
|
||||
"b9b63240c4a7bf52524b8e3dd36d6ca2ecb4bcdc",
|
||||
"109ed203fabac2da4279419deb34d5bc5a393d09",
|
||||
"testharness"
|
||||
],
|
||||
"css/cssom/insertRule-no-index.html": [
|
||||
"825eb56d8e78bbdbd3bfb1861e6d40c245cd8f4b",
|
||||
"812f2b02d7694dd270b7a3e1ef205b99890ab216",
|
||||
"testharness"
|
||||
],
|
||||
"css/cssom/insertRule-syntax-error-01.html": [
|
||||
|
|
@ -554817,7 +555001,7 @@
|
|||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list": [
|
||||
"c199bd6af0e3d2bbc8f87c3a768a1a8c4a17f7ab",
|
||||
"cf1af7daefe2db67dedf186e44744bbb03e537c3",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001-ref.html": [
|
||||
|
|
@ -554980,6 +555164,18 @@
|
|||
"61d2d2a07e2dcbd24a15b733f7c9d7dd3735ebd1",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html": [
|
||||
"80ba877ecdbb12e5f000dee707c5af2df4629a9b",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html": [
|
||||
"0dad5434390d2500568fab4ca82d98147995f2a4",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html": [
|
||||
"7eaa3c8183209024684ff9a15f6b332802d91cb6",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
|
||||
"dcdc6fdf1ff9c749b6ed0dabc9029e641336832b",
|
||||
"support"
|
||||
|
|
@ -555004,6 +555200,18 @@
|
|||
"c669e12f7d26e25364eab72272e5964bb989cad3",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html": [
|
||||
"538d22bff3687524f756303205ad18dac9e182cf",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html": [
|
||||
"8458a75aec990428264f039927377d683e4bfef9",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html": [
|
||||
"bfb735e59e22b55f8e3c42827ca8bcbe7a612774",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
|
||||
"4a138f3175f7d46a2a38643e9803ede5408db9cf",
|
||||
"support"
|
||||
|
|
@ -555276,6 +555484,22 @@
|
|||
"628ef0b6c08230db7fca6639be71c63c0001156f",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html": [
|
||||
"e32f844e70a6f1b7c5c25fa691ba77321b557213",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html": [
|
||||
"1d24d1acde6249154c8aecccf51c3f3d5bfc3f36",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html": [
|
||||
"7c0b699db61f02c5f197133c66439f699a80fd70",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html": [
|
||||
"8ad1c65a27f12deb7b75865eb2b89905a4bbd4f0",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
|
||||
"8e109e72edb9cb0d3c97677db8a98462da83054f",
|
||||
"support"
|
||||
|
|
@ -555516,6 +555740,46 @@
|
|||
"9393c2e2250dfc1bf3ffdd68f2c352890d1e0ee8",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html": [
|
||||
"322ec7ee1fb932cb6f1908c376be2915d6e50459",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html": [
|
||||
"9fea24b92061f9f679b9565d9040e4b29a18b4c3",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html": [
|
||||
"e91e35a1af0a2fa21e31f8ea3fa903f6d862ad13",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html": [
|
||||
"b27883660453186155c9b761402ae4c038f2394c",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html": [
|
||||
"6753ffe3a09c2a71fc67efcd1041ed90de12e87c",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html": [
|
||||
"de39a15da093018531838cac20c59494cb6050b2",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html": [
|
||||
"05d0d53f6d038702733e4acd9562e35b2b992881",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html": [
|
||||
"0f653c07806f0064d1583a7ddaeb171734188062",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
|
||||
"7bbccdb15fdf67a67bbc243c342c668fbef23af8",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html": [
|
||||
"217e140bdd429d6889102e43253e6fb64dca4705",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
||||
"3055eafd3bf887f11c0c386419397910ad438d23",
|
||||
"support"
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[shape-outside-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -43,10 +43,14 @@
|
|||
== shape-outside-circle-036.html shape-outside-circle-036-ref.html
|
||||
== shape-outside-circle-037.html shape-outside-circle-036-ref.html
|
||||
== shape-outside-circle-038.html shape-outside-circle-036-ref.html
|
||||
== shape-outside-circle-039.html shape-outside-circle-039-ref.html
|
||||
== shape-outside-circle-040.html shape-outside-circle-039-ref.html
|
||||
== shape-outside-circle-041.html shape-outside-circle-041-ref.html
|
||||
== shape-outside-circle-042.html shape-outside-circle-042-ref.html
|
||||
== shape-outside-circle-043.html shape-outside-circle-042-ref.html
|
||||
== shape-outside-circle-044.html shape-outside-circle-042-ref.html
|
||||
== shape-outside-circle-045.html shape-outside-circle-045-ref.html
|
||||
== shape-outside-circle-046.html shape-outside-circle-045-ref.html
|
||||
== shape-outside-circle-047.html shape-outside-circle-047-ref.html
|
||||
== shape-outside-circle-048.html shape-outside-circle-048-ref.html
|
||||
== shape-outside-circle-049.html shape-outside-circle-049-ref.html
|
||||
|
|
@ -82,6 +86,8 @@
|
|||
# Basic shape: inset()
|
||||
== shape-outside-inset-016.html shape-outside-inset-016-ref.html
|
||||
== shape-outside-inset-017.html shape-outside-inset-017-ref.html
|
||||
== shape-outside-inset-018.html shape-outside-inset-018-ref.html
|
||||
== shape-outside-inset-019.html shape-outside-inset-019-ref.html
|
||||
== shape-outside-inset-020.html shape-outside-inset-020-ref.html
|
||||
== shape-outside-inset-021.html shape-outside-inset-021-ref.html
|
||||
== shape-outside-inset-022.html shape-outside-inset-022-ref.html
|
||||
|
|
@ -100,3 +106,9 @@
|
|||
== shape-outside-polygon-023.html shape-outside-polygon-023-ref.html
|
||||
== shape-outside-polygon-024.html shape-outside-polygon-024-ref.html
|
||||
== shape-outside-polygon-025.html shape-outside-polygon-025-ref.html
|
||||
== shape-outside-polygon-026.html shape-outside-polygon-026-ref.html
|
||||
== shape-outside-polygon-027.html shape-outside-polygon-027-ref.html
|
||||
== shape-outside-polygon-028.html shape-outside-polygon-026-ref.html
|
||||
== shape-outside-polygon-029.html shape-outside-polygon-027-ref.html
|
||||
== shape-outside-polygon-030.html shape-outside-polygon-030-ref.html
|
||||
== shape-outside-polygon-031.html shape-outside-polygon-031-ref.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, circle(0%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, circle(0%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-039-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
shape-outside: circle(0%) border-box;
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, circle(closest-side at left center) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-039-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
shape-outside: circle(closest-side at left center) border-box;
|
||||
clip-path: circle(closest-side at left center) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, circle(0%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
|
||||
<div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, circle(0%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-045-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
shape-outside: circle(0%) border-box;
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, circle(closest-side at right center) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-circle-045-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
shape-outside: circle(closest-side at right center) border-box;
|
||||
clip-path: circle(closest-side at right center) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
<div class="box" style="height: 12px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, inset(50%) reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px; top: 0; left: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; left: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; left: 0;"></div>
|
||||
<div class="box" style="height: 24px; top: 96px; left: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, inset(50%)</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-inset-018-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape inset(50%) value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
shape-outside: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, inset(50%) reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px; top: 0; right: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 24px; right: 0;"></div>
|
||||
<div class="box" style="height: 36px; top: 60px; right: 0;"></div>
|
||||
<div class="box" style="height: 24px; top: 96px; right: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, inset(50%)</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-inset-019-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape inset(50%) value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
shape-outside: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 36px;"></div>
|
||||
<div class="box" style="height: 24px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(60px 20px, 100px 60px) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px; top: 0; left: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 30px; left: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 60px; left: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 80px; left: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 100px; left: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 130px; left: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(60px 20px, 100px 60px) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-026-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Less than three vertices, resulting an empty area. */
|
||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(60px 20px, 100px 60px) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px; top: 0; right: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 30px; right: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 60px; right: 0;"></div>
|
||||
<div class="long box" style="height: 20px; top: 80px; right: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 100px; right: 0;"></div>
|
||||
<div class="long box" style="height: 30px; top: 130px; right: 0;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(60px 20px, 100px 60px) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-027-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Less than three vertices, resulting an empty area. */
|
||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-026-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* All vertices are collinear, resulting an empty area. */
|
||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-027-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* All vertices are collinear, resulting an empty area. */
|
||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 20px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
<div class="long box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px; top: 0; left: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 30px; left: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 60px; left: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 80px; left: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 100px; left: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 130px; left: 80px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-030-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* polygon contains horizontal lines. */
|
||||
shape-outside: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
||||
clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box reference</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px; top: 0; right: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
|
||||
<div class="box" style="height: 20px; top: 80px; right: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 100px; right: 80px;"></div>
|
||||
<div class="box" style="height: 30px; top: 130px; right: 80px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shape Test: float right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="match" href="shape-outside-polygon-031-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box value.">
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* polygon contains horizontal lines. */
|
||||
shape-outside: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 20px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
<div class="box" style="height: 30px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче