WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
[patch]
Patch
bug-124621-20131203115543.patch (text/plain), 25.95 KB, created by
Rob Buis
on 2013-12-03 08:56:08 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Rob Buis
Created:
2013-12-03 08:56:08 PST
Size:
25.95 KB
patch
obsolete
>Subversion Revision: 160003 >diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog >index 82f23ea2caa16c2d19499a1184c19878124d6a4a..f3b0ea3bbdadcb6a9d7e85f7e81584dcdd1108bc 100644 >--- a/Source/WebCore/ChangeLog >+++ b/Source/WebCore/ChangeLog >@@ -1,3 +1,25 @@ >+2013-12-03 Rob Buis <rob.buis@samsung.com> >+ >+ [css shapes] layout for new ellipse syntax >+ https://bugs.webkit.org/show_bug.cgi?id=124621 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ Implement support for doing layout with the new ellipse shape syntax, >+ including basic animation support. >+ >+ Test: fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html >+ >+ * rendering/shapes/Shape.cpp: >+ (WebCore::Shape::createShape): Convert new ellipse to a layout shape. >+ * rendering/style/BasicShapes.cpp: >+ (WebCore::BasicShape::canBlend): Ignore ellipses with values that >+ cannot be interpolated. >+ (WebCore::BasicShapeEllipse::floatValueForRadiusInBox): Helper function to calculate >+ either radiusX or radiusY, shared by clip-path and shape code paths. >+ (WebCore::BasicShapeEllipse::path): >+ * rendering/style/BasicShapes.h: >+ > 2013-12-03 Thiago de Barros Lacerda <thiago.lacerda@openbossa.org> > > Nix Upstream: Adding missing nix new files to WebCore >diff --git a/Source/WebCore/rendering/shapes/Shape.cpp b/Source/WebCore/rendering/shapes/Shape.cpp >index 0229716e7c497369a2d85bc9c6abf3b36b4c863d..ba39c2c49c94fc498177bceeca87da9a39bba595 100644 >--- a/Source/WebCore/rendering/shapes/Shape.cpp >+++ b/Source/WebCore/rendering/shapes/Shape.cpp >@@ -175,8 +175,14 @@ PassOwnPtr<Shape> Shape::createShape(const BasicShape* basicShape, const LayoutS > } > > case BasicShape::BasicShapeEllipseType: { >- // FIXME: Layout implementation needed. See bug https://bugs.webkit.org/show_bug.cgi?id=125079 >- shape = createRectangleShape(FloatRect(0, 0, boxWidth, boxHeight), FloatSize()); >+ const BasicShapeEllipse* ellipse = static_cast<const BasicShapeEllipse*>(basicShape); >+ float centerX = floatValueForCenterCoordinate(ellipse->centerX(), boxWidth); >+ float centerY = floatValueForCenterCoordinate(ellipse->centerY(), boxHeight); >+ float radiusX = ellipse->floatValueForRadiusInBox(ellipse->radiusX(), centerX, boxWidth); >+ float radiusY = ellipse->floatValueForRadiusInBox(ellipse->radiusY(), centerY, boxHeight); >+ FloatPoint logicalCenter = physicalPointToLogical(FloatPoint(centerX, centerY), logicalBoxSize.height(), writingMode); >+ >+ shape = createShapeEllipse(logicalCenter, FloatSize(radiusX, radiusY)); > break; > } > >diff --git a/Source/WebCore/rendering/style/BasicShapes.cpp b/Source/WebCore/rendering/style/BasicShapes.cpp >index bfe32a323acba4527f08739b01a0fc2dfdaf185d..283d766eea182d200c92de22e5583a012a0bb4cc 100644 >--- a/Source/WebCore/rendering/style/BasicShapes.cpp >+++ b/Source/WebCore/rendering/style/BasicShapes.cpp >@@ -59,7 +59,17 @@ bool BasicShape::canBlend(const BasicShape* other) const > return false; > } > >- return true; >+ // Ellipses with keywords for radii or center coordinates cannot be animated. >+ if (type() != BasicShape::BasicShapeEllipseType) >+ return true; >+ >+ const BasicShapeEllipse* thisEllipse = static_cast<const BasicShapeEllipse*>(this); >+ const BasicShapeEllipse* otherEllipse = static_cast<const BasicShapeEllipse*>(other); >+ if (!thisEllipse->radiusX().canBlend(otherEllipse->radiusX()) >+ || !thisEllipse->radiusY().canBlend(otherEllipse->radiusY()) >+ || !thisEllipse->centerX().canBlend(otherEllipse->centerX()) >+ || !thisEllipse->centerY().canBlend(otherEllipse->centerY())) >+ return false; > } > > void BasicShapeRectangle::path(Path& path, const FloatRect& boundingBox) >@@ -191,22 +201,26 @@ PassRefPtr<BasicShape> DeprecatedBasicShapeEllipse::blend(const BasicShape* othe > return result.release(); > } > >+float BasicShapeEllipse::floatValueForRadiusInBox(const BasicShapeRadius& radius, float center, float boxWidthOrHeight) const >+{ >+ if (radius.type() == BasicShapeRadius::Value) >+ return floatValueForLength(radius.value(), boxWidthOrHeight); >+ >+ if (radius.type() == BasicShapeRadius::ClosestSide) >+ return std::min(center, boxWidthOrHeight - center); >+ >+ ASSERT(radius.type() == BasicShapeRadius::FarthestSide); >+ return std::max(center, boxWidthOrHeight - center); >+} >+ > void BasicShapeEllipse::path(Path& path, const FloatRect& boundingBox) > { > ASSERT(path.isEmpty()); >- // FIXME: The implementation of path is incomplete. See https://bugs.webkit.org/show_bug.cgi?id=125079 >- // Compute closest-side and farthest-side from boundingBox. >- // Compute top, left, bottom, right from boundingBox. >- if (m_radiusX.type() != BasicShapeRadius::Value || m_radiusY.type() != BasicShapeRadius::Value) >- return; >- if (m_centerX.keyword() != BasicShapeCenterCoordinate::None || m_centerY.keyword() != BasicShapeCenterCoordinate::None) >- return; > >- float diagonal = sqrtf((boundingBox.width() * boundingBox.width() + boundingBox.height() * boundingBox.height()) / 2); >- float centerX = floatValueForLength(m_centerX.length(), boundingBox.width()); >- float centerY = floatValueForLength(m_centerY.length(), boundingBox.height()); >- float radiusX = floatValueForLength(m_radiusX.value(), diagonal); >- float radiusY = floatValueForLength(m_radiusY.value(), diagonal); >+ float centerX = floatValueForCenterCoordinate(m_centerX, boundingBox.width()); >+ float centerY = floatValueForCenterCoordinate(m_centerY, boundingBox.height()); >+ float radiusX = floatValueForRadiusInBox(m_radiusX, centerX, boundingBox.width()); >+ float radiusY = floatValueForRadiusInBox(m_radiusY, centerY, boundingBox.height()); > path.addEllipse(FloatRect( > centerX - radiusX + boundingBox.x(), > centerY - radiusY + boundingBox.y(), >diff --git a/Source/WebCore/rendering/style/BasicShapes.h b/Source/WebCore/rendering/style/BasicShapes.h >index bd092de9ff439dbae5d4c25475c4cad4eae9104b..a76c2801e0a3e2154273405e4c88ec2918870c29 100644 >--- a/Source/WebCore/rendering/style/BasicShapes.h >+++ b/Source/WebCore/rendering/style/BasicShapes.h >@@ -255,6 +255,7 @@ public: > const BasicShapeCenterCoordinate& centerY() const { return m_centerY; } > const BasicShapeRadius& radiusX() const { return m_radiusX; } > const BasicShapeRadius& radiusY() const { return m_radiusY; } >+ float floatValueForRadiusInBox(const BasicShapeRadius&, float center, float boxWidthOrHeight) const; > > void setCenterX(BasicShapeCenterCoordinate centerX) { m_centerX = std::move(centerX); } > void setCenterY(BasicShapeCenterCoordinate centerY) { m_centerY = std::move(centerY); } >diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog >index 7d274b45cc21673ac3475e5362b1570089945d7b..87027380411f7da845726fff2339faca5f7b0904 100644 >--- a/LayoutTests/ChangeLog >+++ b/LayoutTests/ChangeLog >@@ -1,3 +1,29 @@ >+2013-12-03 Rob Buis <rob.buis@samsung.com> >+ >+ [css shapes] layout for new ellipse syntax >+ https://bugs.webkit.org/show_bug.cgi?id=124621 >+ >+ Add a new test for the new ellipse syntax. Also update existing shape-inside, animation, and clip-path tests to >+ test the new ellipse syntax for clipping and shape-inside. >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * animations/resources/animation-test-helpers.js: >+ (parseBasicShape): >+ * css3/masking/clip-path-animation-expected.txt: >+ * css3/masking/clip-path-animation.html: >+ * css3/masking/clip-path-ellipse.html: >+ * fast/shapes/shape-inside/shape-inside-animation-expected.txt: >+ * fast/shapes/shape-inside/shape-inside-animation.html: >+ * fast/shapes/shape-inside/shape-inside-ellipse-padding.html: >+ * fast/shapes/shape-inside/shape-inside-ellipse.html: >+ * fast/shapes/shape-inside/shape-inside-empty-expected.html: >+ * fast/shapes/shape-inside/shape-inside-empty.html: >+ * fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt: >+ * fast/shapes/shape-outside-floats/shape-outside-animation.html: >+ * fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html: Added. >+ * fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html: Added. >+ > 2013-12-02 Samuel White <samuel_white@apple.com> > > AX: Add AXUIElementCountForSearchPredicate parameterized attribute. >diff --git a/LayoutTests/animations/resources/animation-test-helpers.js b/LayoutTests/animations/resources/animation-test-helpers.js >index 546650cb163b4b9b0e0dcca380ffb6f0f861e343..a53b856ff170dd2449f002431f1b9b0ae7c7d47a 100644 >--- a/LayoutTests/animations/resources/animation-test-helpers.js >+++ b/LayoutTests/animations/resources/animation-test-helpers.js >@@ -219,7 +219,7 @@ function parseBasicShape(s) > matches = s.match("circle\\((.*)\\s+at\\s+(.*)\\s+(.*)\\)"); > break; > case "ellipse": >- matches = s.match("ellipse\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\,\\s*(.*)\\)"); >+ matches = s.match("ellipse\\((.*)\\s+(.*)\\s+at\\s+(.*)\\s+(.*)\\)"); > break; > case "polygon": > matches = s.match("polygon\\(nonzero, (.*)\\s+(.*)\\s*,\\s*(.*)\\s+(.*)\\s*,\\s*(.*)\\s+(.*)\\s*,\\s*(.*)\\s+(.*)\\)"); >diff --git a/LayoutTests/css3/masking/clip-path-animation-expected.txt b/LayoutTests/css3/masking/clip-path-animation-expected.txt >index e0982df083407d057e51d07c3558e70754f1f1c7..fe7194de0d29acea2734e1f1b21140fe3390342c 100644 >--- a/LayoutTests/css3/masking/clip-path-animation-expected.txt >+++ b/LayoutTests/css3/masking/clip-path-animation-expected.txt >@@ -1,7 +1,7 @@ > > PASS - "webkitClipPath" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px) > PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%) >-PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%) >+PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%) > PASS - "webkitClipPath" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%) > PASS - "webkitClipPath" property for "none-box" element at 1s saw something close to: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%) > >diff --git a/LayoutTests/css3/masking/clip-path-animation.html b/LayoutTests/css3/masking/clip-path-animation.html >index b372acf33c6c5d88cab9d055a048c64e7f87cad2..24922e7739b4f980919822877cf8e47249a96057 100644 >--- a/LayoutTests/css3/masking/clip-path-animation.html >+++ b/LayoutTests/css3/masking/clip-path-animation.html >@@ -42,8 +42,8 @@ > } > > @-webkit-keyframes ellipse-anim { >- from { -webkit-clip-path: ellipse(50%, 50%, 50%, 40%); } >- to { -webkit-clip-path: ellipse(20%, 20%, 20%, 20%); } >+ from { -webkit-clip-path: ellipse(50% 40% at 50% 50%); } >+ to { -webkit-clip-path: ellipse(20% 20% at 20% 20%); } > } > > @-webkit-keyframes polygon-anim { >@@ -64,7 +64,7 @@ > // [animation-name, time, element-id, property, expected-value, tolerance] > ["rectangle-anim", 1, "rectangle-box", "webkitClipPath", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05], > ["circle-anim", 1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05], >- ["ellipse-anim", 1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05], >+ ["ellipse-anim", 1, "ellipse-box", "webkitClipPath", "ellipse(35% 30% at 35% 35%)", 0.05], > ["polygon-anim", 1, "polygon-box", "webkitClipPath", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05], > ["none-anim", 1, "none-box", "webkitClipPath", "polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)", 0], > ]; >diff --git a/LayoutTests/css3/masking/clip-path-ellipse.html b/LayoutTests/css3/masking/clip-path-ellipse.html >index eabb99334e24de89604ea38850bc1328b36a269b..6c6ca0c0236fe499bbea921a5d28a94e51334b98 100644 >--- a/LayoutTests/css3/masking/clip-path-ellipse.html >+++ b/LayoutTests/css3/masking/clip-path-ellipse.html >@@ -6,11 +6,11 @@ div { > width: 200px; > height: 200px; > background-color: green; >- -webkit-clip-path: ellipse(100px, 100px, 100px, 75px); >+ -webkit-clip-path: ellipse(100px 75px at 100px 100px); > } > </style> > </head> > <body> > <div> > </body> >-</html> >\ No newline at end of file >+</html> >diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt b/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt >index 78a7544df689ef10849b80ca42a8e70e4f8f6b6c..a0c8b541e81bcec376ae2e1ca8741ed3eef85a0b 100644 >--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt >+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt >@@ -1,6 +1,6 @@ > Moving Text Moving Text Moving Text Moving Text > PASS - "webkitShapeInside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px) > PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%) >-PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%) >+PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%) > PASS - "webkitShapeInside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%) > >diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html >index e9db78af6dec76127fdced904f72d9e3303edde3..f2c79ca2962bf807392fd0279971628b919c6133 100644 >--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html >+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html >@@ -38,8 +38,8 @@ > } > > @-webkit-keyframes ellipse-anim { >- from { -webkit-shape-inside: ellipse(50%, 50%, 50%, 40%); } >- to { -webkit-shape-inside: ellipse(20%, 20%, 20%, 20%); } >+ from { -webkit-shape-inside: ellipse(50% 40% at 50% 50%); } >+ to { -webkit-shape-inside: ellipse(20% 20% at 20% 20%); } > } > > @-webkit-keyframes polygon-anim { >@@ -54,7 +54,7 @@ > // [animation-name, time, element-id, property, expected-value, tolerance] > ["rectangle-anim", 1, "rectangle-box", "webkitShapeInside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05], > ["circle-anim", 1, "circle-box", "webkitShapeInside", "circle(35% at 35% 35%)", 0.05], >- ["ellipse-anim", 1, "ellipse-box", "webkitShapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05], >+ ["ellipse-anim", 1, "ellipse-box", "webkitShapeInside", "ellipse(35% 30% at 35% 35%)", 0.05], > ["polygon-anim", 1, "polygon-box", "webkitShapeInside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05], > ]; > >diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html >index 76d7ac930e91048e818a4607de55ae8d63fe021c..f7f7b3e3e1d25484065b8e362a2af0e9342aefc5 100644 >--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html >+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html >@@ -9,7 +9,7 @@ > position: relative; > width: 500px; > height: 500px; >- -webkit-shape-inside: ellipse(220px, 220px, 250px, 150px); >+ -webkit-shape-inside: ellipse(250px 150px at 220px 220px); > -webkit-shape-padding: 50px; > font: 178px/1 Ahem, sans-serif; > color: green; >diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html >index 6f7087a3170ffcaa2e9e00a7f5e8f3f649f0421a..a25da5256183fc51c7797aa69ba1c3dd3e66de44 100644 >--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html >+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html >@@ -12,7 +12,7 @@ > position: relative; > width: 500px; > height: 500px; >- -webkit-shape-inside: ellipse(220px, 220px, 200px, 100px); >+ -webkit-shape-inside: ellipse(200px 100px at 220px 220px); > font: 178px/1 Ahem, sans-serif; > color: green; > } >diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html >index 0098717d9d4bfc2d3f5d5d7d67dc292b807031ed..191f773f96efa764a9bdef9fc42affe91409225e 100644 >--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html >+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html >@@ -24,10 +24,10 @@ > <p>This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p> > </div> > <div> >- <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)</p> >+ <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.)</p> > </div> > <div> >- <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)</p> >+ <p>This text should be pushed down below the green rectangle. (There is an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p> > </div> > <div> > <p>This text should be pushed down below the green rectangle. (There is a polygon(0px 0px) shape-inside CSS property on the green rectangle.)</p> >diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html >index 9de9a52ba5a78f7b9720cf2349edd7433bb2424c..e0a7e5e7093a43612242db13583c14a46f07ca32 100644 >--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html >+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html >@@ -23,11 +23,11 @@ > } > > #shape-inside-ellipse-radiusX0 { >- -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em); >+ -webkit-shape-inside: ellipse(0px 1em at 0px 0px); > } > > #shape-inside-ellipse-radiusY0 { >- -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px); >+ -webkit-shape-inside: ellipse(1em 0px at 0px 0px); > } > > #shape-inside-polygon-1vertex { >@@ -51,10 +51,10 @@ > This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.) > </p> > <p id="shape-inside-ellipse-radiusX0"> >- This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.) >+ This text should be pushed down below the green rectangle. (There is an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.) > </p> > <p id="shape-inside-ellipse-radiusY0"> >- This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.) >+ This text should be pushed down below the green rectangle. (There is an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.) > </p> > <p id="shape-inside-polygon-1vertex"> > This text should be pushed down below the green rectangle. (There is a polygon(0px 0px) shape-inside CSS property on the green rectangle.) >diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt >index 7d043bbeccc707c9a23162d45755a3f36b14e94a..ff9afa0160bd133352cd039bbbfb8234cf753677 100644 >--- a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt >+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt >@@ -4,6 +4,6 @@ Moving Text > Moving Text > PASS - "webkitShapeOutside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px) > PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%) >-PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%) >+PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%) > PASS - "webkitShapeOutside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%) > >diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html >index 20ece6a261cb24a1c7b1abc58f9da9e2b2be13d2..5d6cbf8fc1561e97d326084c2ad928be650c2e66 100644 >--- a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html >+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html >@@ -42,8 +42,8 @@ > } > > @-webkit-keyframes ellipse-anim { >- from { -webkit-shape-outside: ellipse(50%, 50%, 50%, 40%); } >- to { -webkit-shape-outside: ellipse(20%, 20%, 20%, 20%); } >+ from { -webkit-shape-outside: ellipse(50% 40% at 50% 50%); } >+ to { -webkit-shape-outside: ellipse(20% 20% at 20% 20%); } > } > > @-webkit-keyframes polygon-anim { >@@ -58,7 +58,7 @@ > // [animation-name, time, element-id, property, expected-value, tolerance] > ["rectangle-anim", 1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05], > ["circle-anim", 1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05], >- ["ellipse-anim", 1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05], >+ ["ellipse-anim", 1, "ellipse-box", "webkitShapeOutside", "ellipse(35% 30% at 35% 35%)", 0.05], > ["polygon-anim", 1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05], > ]; > >diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8e2ec36eee1a7f82fb30a80e3bae92dcb7433e2b >--- /dev/null >+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html >@@ -0,0 +1,90 @@ >+<!DOCTYPE html> >+<style> >+.container { >+ position: relative; >+ font: 20px/1 Ahem, sans-serif; >+ width: 500px; >+ height: 200px; >+ border: 1px solid black; >+} >+ >+.ellipse { >+ z-index: -1; >+ width: 320px; >+ height: 160px; >+ border-radius: 160px / 80px; >+ background-color: blue; >+ overflow: hidden; >+} >+ >+#left-ellipse-outline { >+ position: absolute; >+ top: 20px; >+ left: 0px; >+} >+ >+#right-ellipse-outline { >+ position: absolute; >+ top: 20px; >+ right: 0px; >+} >+ >+.left-ellipse-float-line { >+ float: left; >+ clear: left; >+ height: 20px; >+} >+ >+.right-ellipse-float-line { >+ float: right; >+ clear: right; >+ height: 20px; >+} >+</style> >+<body> >+<p>The black squares should trace the right side of the ellipse's blue outline.</p> >+<div class="container"> >+X<br/> >+ <div id="left-ellipse-outline" class="ellipse"></div> >+ <!-- generated left-rounded-rect-float-line divs will be inserted here --> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X >+</div> >+ >+<p>The black squares should trace the left side of the ellipse's blue outline.</p> >+<div class="container" style="text-align: right"> >+X<br/> >+ <div id="right-ellipse-outline" class="ellipse"></div> >+ <!-- generated right-rounded-rect-float-line divs will be inserted here --> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X >+</div> >+ >+<script src="../resources/rounded-rectangle.js"></script> >+<script src="../resources/subpixel-utils.js"></script> >+<script> >+genLeftRightRoundedRectFloatShapeOutsideRefTest({ >+ roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80}, >+ containerWidth: 500, >+ containerHeight: 200, >+ lineHeight: 20, >+ floatElementClassSuffix: "ellipse-float-line", >+ insertElementIdSuffix: "ellipse-outline" >+}); >+</script> >+ >+</body> >diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html >new file mode 100644 >index 0000000000000000000000000000000000000000..32a88d25a395d72a62c2f4569dca8aa748ca320c >--- /dev/null >+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<title>CSS Test: circle shape-outside on floats</title> >+<link rel="author" title="Adobe" href="http://html.adobe.com/"> >+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> >+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property"> >+<link rel="match" href="shape-outside-floats-ellipse-000-ref.html"> >+<meta name="flags" content="ahem"> >+<style> >+.container { >+ font: 20px/1 Ahem, sans-serif; >+ width: 500px; >+ height: 200px; >+ border: 1px solid black; >+} >+ >+.ellipse { >+ width: 320px; >+ height: 160px; >+ background-color: blue; >+ overflow: hidden; >+ border-radius: 160px / 80px; >+ -webkit-shape-outside: ellipse(160px 80px at 160px 80px); >+} >+</style> >+ >+<body> >+<p>The black squares should trace the right side of the ellipse's blue outline.</p> >+<div class="container"> >+X<br/> >+ <div style="float: left" class="ellipse"></div> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X >+</div> >+ >+<p>The black squares should trace the left side of the ellipse's blue outline.</p> >+<div class="container" style="text-align: right"> >+X<br/> >+ <div style="float: right" class="ellipse"></div> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X<br/> >+X >+</div> >+</body>
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=218298">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Flags:
krit
:
review+
buildbot
:
commit-queue-
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 124621
:
218295
| 218298