[css-shapes] Shapes are not resolved the same way in shape-inside and clip-path
authorbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 27 Sep 2013 15:55:38 +0000 (15:55 +0000)
committerbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 27 Sep 2013 15:55:38 +0000 (15:55 +0000)
https://bugs.webkit.org/show_bug.cgi?id=121922

Reviewed by Andreas Kling.

Source/WebCore:

Fix computation of a percentage radius for circle shape-outside to
match the CSS Shapes spec.

Test: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html

* rendering/shapes/Shape.cpp:
(WebCore::Shape::createShape):

LayoutTests:

Add new test for circular shape-outside with percentage radius.

Update the nested container with unresolved height test because with a
circle it isn't really testing just for unresolved height behavior.

* csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
* fast/shapes/shape-inside/shape-inside-on-nested-container-with-unresolved-height-expected.html:
* fast/shapes/shape-inside/shape-inside-on-nested-container-with-unresolved-height.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@156545 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log
LayoutTests/fast/shapes/shape-inside/shape-inside-on-nested-container-with-unresolved-height-expected.html
LayoutTests/fast/shapes/shape-inside/shape-inside-on-nested-container-with-unresolved-height.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/shapes/Shape.cpp

index 6433f17..ed190b1 100644 (file)
@@ -1,3 +1,22 @@
+2013-09-27  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [css-shapes] Shapes are not resolved the same way in shape-inside and clip-path
+        https://bugs.webkit.org/show_bug.cgi?id=121922
+
+        Reviewed by Andreas Kling.
+
+        Add new test for circular shape-outside with percentage radius.
+
+        Update the nested container with unresolved height test because with a
+        circle it isn't really testing just for unresolved height behavior.
+
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
+        * fast/shapes/shape-inside/shape-inside-on-nested-container-with-unresolved-height-expected.html:
+        * fast/shapes/shape-inside/shape-inside-on-nested-container-with-unresolved-height.html:
+
 2013-09-27  Andreas Kling  <akling@apple.com>
 
         Unrehued mac-lion rebaseline.
index 50e7160..8b12c13 100644 (file)
@@ -8,7 +8,7 @@ Then run the Tools/Scripts/import-w3c-tests in Webkit to reimport
 Do NOT modify or remove this file
 
 ------------------------------------------------------------------------
-Last Import: 2013-09-24 10:40
+Last Import: 2013-09-26 13:39
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html
new file mode 100644 (file)
index 0000000..75c59bf
--- /dev/null
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Reference</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">
+<meta name="flags" content="ahem">
+<style>
+.container {
+    font: 40px/1 Ahem, sans-serif;
+    line-height: 40px;
+    width: 110px;
+    height: 40px;
+    overflow: hidden;
+    white-space: nowrap;
+    background-color: red;
+    color: green;
+}
+
+.circle {
+    width: 138px;
+    height: 40px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+    <div style="float: left" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right" class="circle"></div>
+X
+</div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html
new file mode 100644 (file)
index 0000000..8d27d97
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>CSS Test: circle shape-outside on floats with percentage radius</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-circle-001-ref.html">
+<meta name="flags" content="ahem">
+<style>
+.container {
+    font: 40px/1 Ahem, sans-serif;
+    line-height: 40px;
+    width: 110px;
+    height: 40px;
+    overflow: hidden;
+    white-space: nowrap;
+    background-color: red;
+    color: green;
+}
+
+.circle {
+    width: 80px;
+    height: 40px;
+    background-color: green;
+    -webkit-shape-outside: circle(50%, 50%, 50%); /* cx,cy,radius */
+}
+</style>
+
+<body>
+    <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+    <div style="float: left; margin-right: 40px;" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right; margin-left: 40px;" class="circle"></div>
+X
+</div>
+</body>
index 68d90cb..9324012 100644 (file)
@@ -8,7 +8,7 @@ Then run the Tools/Scripts/import-w3c-tests in Webkit to reimport
 Do NOT modify or remove this file
 
 ------------------------------------------------------------------------
-Last Import: 2013-09-24 10:40
+Last Import: 2013-09-26 13:39
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
@@ -20,6 +20,8 @@ shape-margin
 List of files:
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-000-expected.html
index e1ddeee..ab31b45 100644 (file)
@@ -3,12 +3,12 @@
 <head>
 <style>
 .parent {
-    background-color: green;
+    background-color: yellow;
     width: 300px;
     border: 1px solid blue;
 }
 .container {
-    background-color: yellow;
+    background-color: green;
 }
 </style>
 </head>
@@ -22,8 +22,7 @@
     </div>
 </div>
 
-<p>We have two containers, a shape-inside: circle property is applied on the nested container. Since the nested container's height is not resolvable, we shouldn't apply the circle shape-inside on the content. <br/>We should see the content inside a 300px wide green container, the text shouldn't form any circular shape.</p>
-<p>Bug <a href="http://webkit.org/b/113255 ">113255</a>: The radius of a circle should be computed based on the shorter available dimensions</p>
+<p>We have two containers, a shape-inside: rectangle property is applied on the nested container. Since the nested container's height is not resolvable, we shouldn't apply the rectangle shape-inside on the content. <br/>We should see the content inside a 300px wide green container, the text shouldn't conform to any smaller shape</p>
 
 </body>
 </html>
index 5582e19..642fd1c 100644 (file)
@@ -3,13 +3,13 @@
 <head>
 <style>
 .parent {
-    background-color: green;
+    background-color: yellow;
     width: 300px;
     border: 1px solid blue;
 }
 .container {
-    background-color: yellow;
-    -webkit-shape-inside: circle(50%, 50%, 50%);
+    background-color: green;
+    -webkit-shape-inside: rectangle(0, 0, 50%, 100%);
 }
 </style>
 </head>
@@ -23,8 +23,7 @@
     </div>
 </div>
 
-<p>We have two containers, a shape-inside: circle property is applied on the nested container. Since the nested container's height is not resolvable, we shouldn't apply the circle shape-inside on the content. <br/>We should see the content inside a 300px wide green container, the text shouldn't form any circular shape.</p>
-<p>Bug <a href="http://webkit.org/b/113255 ">113255</a>: The radius of a circle should be computed based on the shorter available dimensions</p>
+<p>We have two containers, a shape-inside: rectangle property is applied on the nested container. Since the nested container's height is not resolvable, we shouldn't apply the rectangle shape-inside on the content. <br/>We should see the content inside a 300px wide green container, the text shouldn't conform to any smaller shape</p>
 
 </body>
 </html>
index b75b922..09a322d 100644 (file)
@@ -1,3 +1,18 @@
+2013-09-27  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [css-shapes] Shapes are not resolved the same way in shape-inside and clip-path
+        https://bugs.webkit.org/show_bug.cgi?id=121922
+
+        Reviewed by Andreas Kling.
+
+        Fix computation of a percentage radius for circle shape-outside to
+        match the CSS Shapes spec.
+
+        Test: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html
+
+        * rendering/shapes/Shape.cpp:
+        (WebCore::Shape::createShape):
+
 2013-09-27  Darin Adler  <darin@apple.com>
 
         Add empty MainFrame class
index d04e80a..eda3ac8 100644 (file)
@@ -136,7 +136,7 @@ PassOwnPtr<Shape> Shape::createShape(const BasicShape* basicShape, const LayoutS
         const BasicShapeCircle* circle = static_cast<const BasicShapeCircle*>(basicShape);
         float centerX = floatValueForLength(circle->centerX(), boxWidth);
         float centerY = floatValueForLength(circle->centerY(), boxHeight);
-        float radius = floatValueForLength(circle->radius(), std::min(boxHeight, boxWidth));
+        float radius = floatValueForLength(circle->radius(), sqrtf((boxWidth * boxWidth + boxHeight * boxHeight) / 2));
         FloatPoint logicalCenter = physicalPointToLogical(FloatPoint(centerX, centerY), logicalBoxSize.height(), writingMode);
 
         shape = createShapeCircle(logicalCenter, radius);