зеркало из https://github.com/mozilla/gecko-dev.git
Backed out 7 changesets (bug 1461046) for permafailing reftest on /reftests/css-invalid/select/select-disabled-fieldset-1.html a=backout
Backed out changeset f5990eb1eb0d (bug 1461046) Backed out changeset 8e0c340b9700 (bug 1461046) Backed out changeset fbfe1d5b94e1 (bug 1461046) Backed out changeset 48057a6ba3d6 (bug 1461046) Backed out changeset 5c8648bcf6bb (bug 1461046) Backed out changeset 157bbc74460a (bug 1461046) Backed out changeset e990d4d07b0e (bug 1461046)
This commit is contained in:
Gurzau Raul
Родитель
468205953d
Коммит
b36972ff91
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче