[css shapes] Fix support for shape-outside on a float with padding

https://bugs.webkit.org/show_bug.cgi?id=123590

Reviewed by Alexandru Chiculita.

Source/WebCore:

The line top was being improperly converted to the coordinates of the
shape, causing the shape to be positioned incorrectly when the float
had padding. This fixes that problem.

No new tests, covered by updates to existing ones.

* rendering/shapes/ShapeOutsideInfo.cpp:
(WebCore::ShapeOutsideInfo::updateDeltasForContainingBlockLine):

LayoutTests:

Fix existing tests that depended on the incorrect behavior so that
they are now testing the proper thing. Also fix up the tests to make
them clearer and more robust.

* csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-000-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-000.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-001-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-001.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-002-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-002.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-003-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-003.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-004-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-004.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-005-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-005.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-006-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-006.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-007-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-007.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-008-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-008.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-009-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-009.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-square-border-000-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-square-border-000.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:


Canonical link: https://commits.webkit.org/141937@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@158584 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,53 @@
+2013-11-04  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [css shapes] Fix support for shape-outside on a float with padding
+        https://bugs.webkit.org/show_bug.cgi?id=123590
+
+        Reviewed by Alexandru Chiculita.
+
+        Fix existing tests that depended on the incorrect behavior so that
+        they are now testing the proper thing. Also fix up the tests to make
+        them clearer and more robust.
+
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-000-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-000.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-001-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-001.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-002-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-002.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-003-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-003.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-004-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-004.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-005-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-005.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-006-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-006.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-007-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-007.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-008-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-008.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-009-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-009.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-square-border-000-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-square-border-000.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
+
 2013-11-04  Mark Hahnenberg  <mhahnenberg@apple.com>
 
         JSArrayBufferViews of length 0 allocate 0 CopiedSpace bytes, which is invalid

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log

@@ -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-10-31 13:25
+Last Import: 2013-10-31 13:41
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html

@@ -13,22 +13,22 @@
 }
 
 .circle {
+    z-index: -1;
     width: 160px;
     height: 160px;
     border-radius: 80px;
-    border: 1px solid blue;
+    background-color: blue;
+    overflow: hidden;
 }
 
 #left-circle-outline {
     position: absolute;
-    z-index: -1;
     top: 20px;
     left: 0px;
 }
 
 #right-circle-outline {
     position: absolute;
-    z-index: -1;
     top: 20px;
     right: 0px;
 }
@@ -81,10 +81,8 @@
 <script src="resources/rounded-rectangle.js"></script>
 <script src="resources/subpixel-utils.js"></script>
 <script>
-// Note that the border must be added into the width to account for its
-// affect on float positioning.
 genLeftRightRoundedRectFloatShapeOutsideRefTest({
-    roundedRect: {x: 0, y: 20, width: 161, height: 160, rx: 80, ry: 80},
+    roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
     containerWidth: 500, 
     containerHeight: 200,
     lineHeight: 20,

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html

@@ -16,7 +16,8 @@
 .circle {
     width: 160px;
     height: 160px;
-    border: 1px solid blue;
+    background-color: blue;
+    overflow: hidden;
     border-radius: 80px;
     -webkit-shape-outside: circle(80px, 80px, 80px); /* cx,cy,radius */
 }

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html

@@ -13,22 +13,22 @@
 }
 
 .ellipse {
+    z-index: -1;
     width: 320px;
     height: 160px;
     border-radius: 160px / 80px;
-    border: 1px solid blue;
+    background-color: blue;
+    overflow: hidden;
 }
 
 #left-ellipse-outline {
     position: absolute;
-    z-index: -1;
     top: 20px;
     left: 0px;
 }
 
 #right-ellipse-outline {
     position: absolute;
-    z-index: -1;
     top: 20px;
     right: 0px;
 }
@@ -83,10 +83,8 @@
 <script src="resources/rounded-rectangle.js"></script>
 <script src="resources/subpixel-utils.js"></script>
 <script>
-// Note that the border must be added into the width to account for its
-// affect on float positioning.
 genLeftRightRoundedRectFloatShapeOutsideRefTest({
-    roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 160, ry: 80},
+    roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
     containerWidth: 500, 
     containerHeight: 200,
     lineHeight: 20,

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html

@@ -16,7 +16,8 @@
 .ellipse {
     width: 320px;
     height: 160px;
-    border: 1px solid blue;
+    background-color: blue;
+    overflow: hidden;
     border-radius: 160px / 80px;
     -webkit-shape-outside: ellipse(160px, 80px, 160px, 80px); /* cx,cy,rx,ry */
 }

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001-expected.html

@@ -13,22 +13,22 @@
 }
 
 .rounded-rect {
+    z-index: -1;
     width: 320px;
     height: 160px;
     border-radius: 60px;
-    border: 1px solid blue;
+    background-color: blue;
+    overflow: hidden;
 }
 
 #left-rounded-rect-outline {
     position: absolute;
-    z-index: -1;
     top: 20px;
     left: 0px;
 }
 
 #right-rounded-rect-outline {
     position: absolute;
-    z-index: -1;
     top: 20px;
     right: 0px;
 }
@@ -81,7 +81,7 @@
 <script src="resources/subpixel-utils.js"></script>
 <script>
 genLeftRightRoundedRectFloatShapeOutsideRefTest({
-    roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 60, ry: 60},
+    roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 60, ry: 60},
     containerWidth: 500, 
     containerHeight: 200,
     lineHeight: 20,

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html

@@ -16,7 +16,8 @@
 .rounded-rect {
     width: 320px;
     height: 160px;
-    border: 1px solid blue;
+    background-color: blue;
+    overflow: hidden;
     border-radius: 60px;
     -webkit-shape-outside: inset-rectangle(0px, 0px, 0px, 0px, 60px, 60px); /* top,right,bottom,left,rx,ry */
 }

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-000-expected.html

@@ -2,7 +2,7 @@
 <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-padding-property">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
 <meta name="flags" content="ahem">
 <head>
 <style>
@@ -13,31 +13,16 @@
     border: 1px solid black;
     color: green;
     display: inline-block;
-}
-
-#float-left {
-    float: left;
-    width: 20px;
-    height: 20px;
-}
-
-#float-right {
-    float: right;
-    width: 20px;
-    height: 20px;
+    background-color: red;
 }
 </style>
 
 <body>
-    <p>This should display two green bars, with white squares on opposite sides.</p>
+    <p>This should display two horizontal green bars. You should not see any red.</p>
     <div class="container">
-        <div id="float-left">
-        </div>
-        XXXX
+        XXXXX
     </div>
     <div class="container">
-        <div id="float-right">
-        </div>
-        XXXX
+        XXXXX
     </div>
 </body>

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-000.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<title>CSS Test: shape-outside on floats with a positive padding</title>
+<title>CSS Test: shape-outside on floats with padding</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-padding-property">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<meta name="assert" content="This tests if padding on the same logical side as the float direction (eg: left padding on left float) is properly ignored in the case of a zero extent shape.">
 <link rel="match" href="shape-outside-floats-padding-000-ref.html">
 <meta name="flags" content="ahem">
 <head>
@@ -14,6 +15,7 @@
     border: 1px solid black;
     color: green;
     display: inline-block;
+    background-color: red;
 }
 
 #float-left {
@@ -34,15 +36,15 @@
 </style>
 
 <body>
-    <p>This should display two green bars, with white squares on opposite sides.</p>
+    <p>This should display two horizontal green bars. You should not see any red.</p>
     <div class="container" style="text-align: right">
         <div id="float-right">
         </div>
-        XXXX
+        XXXXX
     </div>
     <div class="container">
         <div id="float-left">
         </div>
-        XXXX
+        XXXXX
     </div>
 </body>

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-001-expected.html

@@ -2,7 +2,7 @@
 <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-padding-property">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
 <meta name="flags" content="ahem">
 <head>
 <style>
@@ -35,12 +35,10 @@
     <p>This should display two green rectangles. You should not see any red.</p>
     <div class="container">
         XXXXX
-        <div id="float-left">
-        </div>
+        XXXXX
     </div>
     <div class="container">
         XXXXX
-        <div id="float-right">
-        </div>
+        XXXXX
     </div>
 </body>

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-001.html

@@ -2,7 +2,8 @@
 <title>CSS Test: shape-outside on floats with a positive top padding</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-padding-property">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<meta name="assert" content="This tests if padding on the logical top of the float is properly ignored if the shape does not extend into the padding.">
 <link rel="match" href="shape-outside-floats-padding-001-ref.html">
 <meta name="flags" content="ahem">
 <head>
@@ -21,30 +22,30 @@
     float: left;
     width: 100px;
     height: 20px;
-    -webkit-shape-outside: rectangle(0, -100%, 50%, 100%);
+    -webkit-shape-outside: rectangle(0, 0, 100%, 100%);
     padding-top: 20px;
-    background-color: green;
 }
 
 #float-right {
     float: right;
     width: 100px;
     height: 20px;
-    -webkit-shape-outside: rectangle(0, -100%, 50%, 100%);
+    -webkit-shape-outside: rectangle(0, 0, 100%, 100%);
     padding-top: 20px;
-    background-color: green;
 }
 </style>
 
 <body>
     <p>This should display two green rectangles. You should not see any red.</p>
     <div class="container">
         <div id="float-left">
+            XXXXX
         </div>
         XXXXX
     </div>
     <div class="container">
         <div id="float-right">
+            XXXXX
         </div>
         XXXXX
     </div>

LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-padding-002-expected.html

@@ -2,7 +2,7 @@
 <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-padding-property">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
 <meta name="flags" content="ahem">
 <head>
 <style>
@@ -35,12 +35,10 @@
     <p>This should display two green rectangles. You should not see any red.</p>
     <div class="container">
         XXXXX
-        <div id="float-left">
-        </div>
+        XXXXX
     </div>
     <div class="container">
         XXXXX
-        <div id="float-right">
-        </div>
+        XXXXX
     </div>
 </body>