--- a/layout/generic/nsFloatManager.cpp
+++ b/layout/generic/nsFloatManager.cpp
@@ -624,26 +624,19 @@ nsFloatManager::CircleShapeInfo::CircleS
{
// Use physical coordinates to compute the center of the circle() since
// the <position> keywords such as 'left', 'top', etc. are physical.
// https://drafts.csswg.org/css-shapes-1/#funcdef-circle
nsRect physicalShapeBoxRect =
aShapeBoxRect.GetPhysicalRect(aWM, aContainerSize);
nsPoint physicalCenter =
ShapeUtils::ComputeCircleOrEllipseCenter(aBasicShape, physicalShapeBoxRect);
- mRadius =
- ShapeUtils::ComputeCircleRadius(aBasicShape, physicalCenter,
- physicalShapeBoxRect);
-
- // Convert the coordinate space back to the same as FloatInfo::mRect.
- // mCenter.x is in the line-axis of the frame manager and mCenter.y are in
- // the frame manager's real block-axis.
- LogicalPoint logicalCenter(aWM, physicalCenter, aContainerSize);
- mCenter = nsPoint(logicalCenter.LineRelative(aWM, aContainerSize),
- logicalCenter.B(aWM));
+ mRadius = ShapeUtils::ComputeCircleRadius(aBasicShape, physicalCenter,
+ physicalShapeBoxRect);
+ mCenter = ConvertPhysicalToLogical(aWM, physicalCenter, aContainerSize);
}
nscoord
nsFloatManager::CircleShapeInfo::LineLeft(WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const
{
nscoord lineLeftDiff =
@@ -661,16 +654,66 @@ nsFloatManager::CircleShapeInfo::LineRig
nscoord lineRightDiff =
ComputeEllipseLineInterceptDiff(BStart(), BEnd(),
mRadius, mRadius, mRadius, mRadius,
aBStart, aBEnd);
return mCenter.x + mRadius - lineRightDiff;
}
/////////////////////////////////////////////////////////////////////////////
+// EllipseShapeInfo
+
+nsFloatManager::EllipseShapeInfo::EllipseShapeInfo(
+ StyleBasicShape* const aBasicShape,
+ const LogicalRect& aShapeBoxRect,
+ WritingMode aWM,
+ const nsSize& aContainerSize)
+{
+ // Use physical coordinates to compute the center of the ellipse() since
+ // the <position> keywords such as 'left', 'top', etc. are physical.
+ // https://drafts.csswg.org/css-shapes-1/#funcdef-ellipse
+ nsRect physicalShapeBoxRect =
+ aShapeBoxRect.GetPhysicalRect(aWM, aContainerSize);
+ nsPoint physicalCenter =
+ ShapeUtils::ComputeCircleOrEllipseCenter(aBasicShape, physicalShapeBoxRect);
+ nsSize physicalRadii =
+ ShapeUtils::ComputeEllipseRadii(aBasicShape, physicalCenter,
+ physicalShapeBoxRect);
+ LogicalSize logicalRadii(aWM, physicalRadii);
+ mRadii = nsSize(logicalRadii.ISize(aWM), logicalRadii.BSize(aWM));
+ mCenter = ConvertPhysicalToLogical(aWM, physicalCenter, aContainerSize);
+}
+
+nscoord
+nsFloatManager::EllipseShapeInfo::LineLeft(WritingMode aWM,
+ const nscoord aBStart,
+ const nscoord aBEnd) const
+{
+ nscoord lineLeftDiff =
+ ComputeEllipseLineInterceptDiff(BStart(), BEnd(),
+ mRadii.width, mRadii.height,
+ mRadii.width, mRadii.height,
+ aBStart, aBEnd);
+ return mCenter.x - mRadii.width + lineLeftDiff;
+}
+
+nscoord
+nsFloatManager::EllipseShapeInfo::LineRight(WritingMode aWM,
+ const nscoord aBStart,
+ const nscoord aBEnd) const
+{
+ nscoord lineRightDiff =
+ ComputeEllipseLineInterceptDiff(BStart(), BEnd(),
+ mRadii.width, mRadii.height,
+ mRadii.width, mRadii.height,
+ aBStart, aBEnd);
+ return mCenter.x + mRadii.width - lineRightDiff;
+}
+
+/////////////////////////////////////////////////////////////////////////////
// FloatInfo
nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
nscoord aLineLeft, nscoord aBlockStart,
const LogicalRect& aMarginRect,
WritingMode aWM,
const nsSize& aContainerSize)
: mFrame(aFrame)
@@ -718,19 +761,33 @@ nsFloatManager::FloatInfo::FloatInfo(nsI
if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
nsRect shapeBoxRect(rect.LineLeft(aWM, aContainerSize), rect.BStart(aWM),
rect.ISize(aWM), rect.BSize(aWM));
mShapeInfo = MakeUnique<BoxShapeInfo>(shapeBoxRect, mFrame);
} else if (shapeOutside.GetType() == StyleShapeSourceType::Shape) {
StyleBasicShape* const basicShape = shapeOutside.GetBasicShape();
- if (basicShape->GetShapeType() == StyleBasicShapeType::Circle) {
- mShapeInfo =
- MakeUnique<CircleShapeInfo>(basicShape, rect, aWM, aContainerSize);
+ switch (basicShape->GetShapeType()) {
+ case StyleBasicShapeType::Polygon:
+ // Bug 1326409 - Implement the rendering of basic shape polygon()
+ // for CSS shape-outside.
+ break;
+ case StyleBasicShapeType::Circle:
+ mShapeInfo =
+ MakeUnique<CircleShapeInfo>(basicShape, rect, aWM, aContainerSize);
+ break;
+ case StyleBasicShapeType::Ellipse:
+ mShapeInfo =
+ MakeUnique<EllipseShapeInfo>(basicShape, rect, aWM, aContainerSize);
+ break;
+ case StyleBasicShapeType::Inset:
+ // Bug 1326407 - Implement the rendering of basic shape inset() for
+ // CSS shape-outside.
+ break;
}
} else {
MOZ_ASSERT_UNREACHABLE("Unknown StyleShapeSourceType!");
}
// Translate the shape to the same origin as nsFloatManager.
mShapeInfo->Translate(aLineLeft, aBlockStart);
}
@@ -830,16 +887,19 @@ nsFloatManager::FloatInfo::IsEmpty(Shape
MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
if (!mShapeInfo) {
return IsEmpty();
}
return mShapeInfo->IsEmpty();
}
+/////////////////////////////////////////////////////////////////////////////
+// ShapeInfo
+
/* static */ nscoord
nsFloatManager::ShapeInfo::ComputeEllipseLineInterceptDiff(
const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
const nscoord aBandBStart, const nscoord aBandBEnd)
{
// An example for the band intersecting with the top right corner of an
@@ -910,16 +970,27 @@ nsFloatManager::ShapeInfo::XInterceptAtY
const nscoord aRadiusX,
const nscoord aRadiusY)
{
// Solve for x in the ellipse equation (x/radiusX)^2 + (y/radiusY)^2 = 1.
MOZ_ASSERT(aRadiusY > 0);
return aRadiusX * std::sqrt(1 - (aY * aY) / double(aRadiusY * aRadiusY));
}
+/* static */ nsPoint
+nsFloatManager::ShapeInfo::ConvertPhysicalToLogical(
+ WritingMode aWM,
+ const nsPoint& aPoint,
+ const nsSize& aContainerSize)
+{
+ LogicalPoint logicalPoint(aWM, aPoint, aContainerSize);
+ return nsPoint(logicalPoint.LineRelative(aWM, aContainerSize),
+ logicalPoint.B(aWM));
+}
+
//----------------------------------------------------------------------
nsAutoFloatManager::~nsAutoFloatManager()
{
// Restore the old float manager in the reflow input if necessary.
if (mNew) {
#ifdef DEBUG
if (nsBlockFrame::gNoisyFloatManager) {--- a/layout/generic/nsFloatManager.h
+++ b/layout/generic/nsFloatManager.h
@@ -367,16 +367,22 @@ private:
static nscoord ComputeEllipseLineInterceptDiff(
const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
const nscoord aBandBStart, const nscoord aBandBEnd);
static nscoord XInterceptAtY(const nscoord aY, const nscoord aRadiusX,
const nscoord aRadiusY);
+
+ // Convert the coordinate space from physical to the logical space used
+ // in nsFloatManager, which is the same as FloatInfo::mRect.
+ static nsPoint ConvertPhysicalToLogical(mozilla::WritingMode aWM,
+ const nsPoint& aPoint,
+ const nsSize& aContainerSize);
};
// Implements shape-outside: <shape-box>.
class BoxShapeInfo final : public ShapeInfo
{
public:
BoxShapeInfo(const nsRect& aShapeBoxRect, nsIFrame* const aFrame)
: mShapeBoxRect(aShapeBoxRect)
@@ -435,16 +441,49 @@ private:
private:
// The position of the center of the circle. The coordinate space is the
// same as FloatInfo::mRect.
nsPoint mCenter;
// The radius of the circle in app units.
nscoord mRadius;
};
+ // Implements shape-outside: ellipse().
+ class EllipseShapeInfo final : public ShapeInfo
+ {
+ public:
+ EllipseShapeInfo(mozilla::StyleBasicShape* const aBasicShape,
+ const mozilla::LogicalRect& aShapeBoxRect,
+ mozilla::WritingMode aWM,
+ const nsSize& aContainerSize);
+
+ nscoord LineLeft(mozilla::WritingMode aWM,
+ const nscoord aBStart,
+ const nscoord aBEnd) const override;
+ nscoord LineRight(mozilla::WritingMode aWM,
+ const nscoord aBStart,
+ const nscoord aBEnd) const override;
+ nscoord BStart() const override { return mCenter.y - mRadii.height; }
+ nscoord BEnd() const override { return mCenter.y + mRadii.height; }
+ bool IsEmpty() const override { return mRadii.IsEmpty(); };
+
+ void Translate(nscoord aLineLeft, nscoord aBlockStart) override
+ {
+ mCenter.MoveBy(aLineLeft, aBlockStart);
+ }
+
+ private:
+ // The position of the center of the ellipse. The coordinate space is the
+ // same as FloatInfo::mRect.
+ nsPoint mCenter;
+ // The radii of the ellipse in app units. The width and height represent
+ // the line-axis and block-axis radii of the ellipse.
+ nsSize mRadii;
+ };
+
struct FloatInfo {
nsIFrame *const mFrame;
// The lowest block-ends of left/right floats up to and including
// this one.
nscoord mLeftBEnd, mRightBEnd;
FloatInfo(nsIFrame* aFrame, nscoord aLineLeft, nscoord aBlockStart,
const mozilla::LogicalRect& aMarginRect,--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -56,8 +56,30 @@ fails == shape-outside-border-box-border
== shape-outside-circle-017.html shape-outside-circle-017-ref.html
== shape-outside-circle-018.html shape-outside-circle-018-ref.html
== shape-outside-circle-019.html shape-outside-circle-019-ref.html
== shape-outside-circle-020.html shape-outside-circle-020-ref.html
== shape-outside-circle-021.html shape-outside-circle-021-ref.html
== shape-outside-circle-022.html shape-outside-circle-022-ref.html
== shape-outside-circle-023.html shape-outside-circle-023-ref.html
== shape-outside-circle-024.html shape-outside-circle-024-ref.html
+
+# Basic shape: ellipse()
+== shape-outside-ellipse-001.html shape-outside-ellipse-001-ref.html
+== shape-outside-ellipse-002.html shape-outside-ellipse-002-ref.html
+== shape-outside-ellipse-003.html shape-outside-ellipse-003-ref.html
+== shape-outside-ellipse-004.html shape-outside-ellipse-004-ref.html
+== shape-outside-ellipse-005.html shape-outside-ellipse-005-ref.html
+== shape-outside-ellipse-006.html shape-outside-ellipse-006-ref.html
+== shape-outside-ellipse-007.html shape-outside-ellipse-007-ref.html
+== shape-outside-ellipse-008.html shape-outside-ellipse-008-ref.html
+== shape-outside-ellipse-009.html shape-outside-ellipse-009-ref.html
+== shape-outside-ellipse-010.html shape-outside-ellipse-009-ref.html
+== shape-outside-ellipse-011.html shape-outside-ellipse-011-ref.html
+== shape-outside-ellipse-012.html shape-outside-ellipse-011-ref.html
+== shape-outside-ellipse-013.html shape-outside-ellipse-013-ref.html
+== shape-outside-ellipse-014.html shape-outside-ellipse-014-ref.html
+== shape-outside-ellipse-015.html shape-outside-ellipse-015-ref.html
+== shape-outside-ellipse-016.html shape-outside-ellipse-016-ref.html
+== shape-outside-ellipse-017.html shape-outside-ellipse-017-ref.html
+== shape-outside-ellipse-018.html shape-outside-ellipse-018-ref.html
+== shape-outside-ellipse-019.html shape-outside-ellipse-019-ref.html
+== shape-outside-ellipse-020.html shape-outside-ellipse-020-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-001-ref.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, ellipse(40px 60px at left top)</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: ellipse(40px 60px at left top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px; top: 0px; left: 40px;"></div>
+ <div class="box" style="height: 24px; top: 36px; left: 32px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 120px; left: 40px;"></div>
+ <div class="box" style="height: 24px; top: 156px; left: 32px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-001.html
@@ -0,0 +1,52 @@
+<!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, ellipse(40px 60px at left top)</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-ellipse-001-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at left top) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(40px 60px at left top);
+ clip-path: ellipse(40px 60px at left top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-002-ref.html
@@ -0,0 +1,52 @@
+<!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, ellipse(40px 60px at right bottom)</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: ellipse(40px 60px at right bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
+ <div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 180px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 216px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 228px; left: 120px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-002.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 left, ellipse(40px 60px at right bottom)</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-ellipse-002-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at right bottom) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(40px 60px at right bottom);
+ clip-path: ellipse(40px 60px at right bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-003-ref.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 right, ellipse(40px 60px at right top)</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: ellipse(40px 60px at right top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px; top: 0px; right: 40px;"></div>
+ <div class="box" style="height: 24px; top: 36px; right: 32px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 120px; right: 40px;"></div>
+ <div class="box" style="height: 24px; top: 156px; right: 32px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-003.html
@@ -0,0 +1,53 @@
+<!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, ellipse(40px 60px at right top)</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-ellipse-003-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at right top)">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(40px 60px at right top);
+ clip-path: ellipse(40px 60px at right top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-004-ref.html
@@ -0,0 +1,53 @@
+<!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, ellipse(40px 60px at left bottom)</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: ellipse(40px 60px at left bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
+ <div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 180px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 216px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 228px; right: 120px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-004.html
@@ -0,0 +1,56 @@
+<!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, ellipse(40px 60px at left bottom)</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-ellipse-004-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at left bottom) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(40px 60px at left bottom);
+ clip-path: ellipse(40px 60px at left bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-005-ref.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, ellipse() 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: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-005.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, ellipse()</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-ellipse-005-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse() value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse();
+ clip-path: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ 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: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-006-ref.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, ellipse(closest-side farthest-side at left 40px top 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: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-006.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, ellipse(closest-side farthest-side at left 40px top 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-ellipse-006-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
+ clip-path: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ 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: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-007-ref.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, ellipse() 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: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-007.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, ellipse()</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-ellipse-007-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse() value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse();
+ clip-path: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ 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: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-008-ref.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 right, ellipse(closest-side farthest-side at right 40px top 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: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-008.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, ellipse(closest-side farthest-side at right 40px top 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-ellipse-008-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at right 40px top 60px) border-box">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
+ clip-path: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ 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: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-009-ref.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, ellipse(0% 0%) 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: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; 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: 24px; top: 96px; left: 0px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-009.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, ellipse(0% 0%)</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-ellipse-009-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape ellipse(0% 0%) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(0% 0%);
+ clip-path: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ 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>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-010.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, ellipse(closest-side closest-side at top left)</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-ellipse-009-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top left) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(closest-side closest-side at top left);
+ clip-path: ellipse(closest-side closest-side at top left);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ 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>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-011-ref.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, ellipse(0% 0%) 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: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; 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: 24px; top: 96px; right: 0px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-011.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, ellipse(0% 0%)</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-ellipse-011-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape ellipse(0% 0%) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(0% 0%);
+ clip-path: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ 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>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-012.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, ellipse(closest-side closest-side at top right)</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-ellipse-011-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top right) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(closest-side closest-side at top right);
+ clip-path: ellipse(closest-side closest-side at top right);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ 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>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-013-ref.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, ellipse(100% 100%) 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: ellipse(100% 100%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 80px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-013.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, ellipse(100% 100%)</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-ellipse-013-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(100% 100%) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(100% 100%);
+ clip-path: ellipse(100% 100%); /* Rendered as a rectangle */
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ 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: 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>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-014-ref.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, ellipse(100% 100%) 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: ellipse(100% 100%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 24px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 80px;"></div>
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-014.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, ellipse(100% 100%)</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-ellipse-014-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(100% 100%) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(100% 100%);
+ clip-path: ellipse(100% 100%); /* Rendered as a rectangle */
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ 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: 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>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-015-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: vertical-rl, float left, ellipse(farthest-side closest-side at top 40px right 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 {
+ writing-mode: vertical-rl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-015.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: vertical-rl, float left, ellipse(closest-side farthest-side at top 40px right 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-ellipse-015-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-016-ref.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: vertical-rl, float right, ellipse(farthest-side closest-side at top 40px right 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 {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-016.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: vertical-rl, float right, ellipse(closest-side farthest-side at top 40px right 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-ellipse-016-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-017-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: vertical-lr, float left, ellipse(farthest-side closest-side at top 40px left 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 {
+ writing-mode: vertical-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-017.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: vertical-lr, float left, ellipse(closest-side farthest-side at top 40px left 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-ellipse-017-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-018-ref.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: vertical-lr, float right, ellipse(farthest-side closest-side at top 40px left 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 {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-018.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: vertical-lr, float right, ellipse(closest-side farthest-side at top 40px left 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-ellipse-018-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-019-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: sideways-lr, float left, ellipse(farthest-side closest-side at top 40px left 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 {
+ writing-mode: sideways-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-019.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: sideways-lr, float left, ellipse(closest-side farthest-side at top 40px left 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-ellipse-019-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-020-ref.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: sideways-lr, float right, ellipse(farthest-side closest-side at top 40px left 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 {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </body>
+</html>new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-020.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: sideways-lr, float right, ellipse(closest-side farthest-side at top 40px left 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-ellipse-020-ref.html">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </body>
+</html>