[CSS Shapes] New positioning model: Shape cropped to margin box
authorbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 10 Oct 2013 18:22:56 +0000 (18:22 +0000)
committerbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 10 Oct 2013 18:22:56 +0000 (18:22 +0000)
https://bugs.webkit.org/show_bug.cgi?id=118092

Reviewed by Alexandru Chiculita.

Source/WebCore:

Clip the shape to the margin box when it extends out the left or right
edges. Also added a few local variables to make the code easier to
read.

Tests: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html
       csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html
       csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html
       csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html

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

LayoutTests:

Add tests for shapes that extend out left/right of the margin box.

Fix polygon and image threshold tests so that they have a large enough
margin box so the shape isn't clipped.

Also update some of the top/bottom tests to have a better reference,
they should be more likely to break if the implementation fails now.

* csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-000.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-001.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-002.html:
* csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
* fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html:

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

21 files changed:
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-clipped-001-expected.html
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref-expected.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004-expected.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005-expected.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006-expected.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-000.html
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-001.html
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-002.html
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/shapes/ShapeOutsideInfo.cpp

index bc4b633..5f29862 100644 (file)
@@ -1,3 +1,37 @@
+2013-10-10  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes] New positioning model: Shape cropped to margin box
+        https://bugs.webkit.org/show_bug.cgi?id=118092
+
+        Reviewed by Alexandru Chiculita.
+
+        Add tests for shapes that extend out left/right of the margin box.
+
+        Fix polygon and image threshold tests so that they have a large enough
+        margin box so the shape isn't clipped.
+
+        Also update some of the top/bottom tests to have a better reference,
+        they should be more likely to break if the implementation fails now.
+
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006-expected.html: Copied from LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-000.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-001.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-002.html:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
+        * fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html:
+
 2013-10-10  Gustavo Noronha Silva  <gns@gnome.org>
 
         Unreviewed gardening. plugins/document-open.html will some times timeout.
index 4b5b718..4db8a01 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-10-09 14:13
+Last Import: 2013-10-10 09:20
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
index 2cd1e74..bcb1ab0 100644 (file)
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<title>CSS Reference</title>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-001-ref.html">
 <meta name="flags" content="ahem">
 <head>
 <style>
     width: 100px;
     height: 100px;
     border: 1px solid black;
-    color: green;
-    background-color: red;
+    color: black;
+    background-color: blue;
     display: inline-block;
 }
 
 #float-left {
     float: left;
     width: 100px;
-    height: 50px;
+    height: 25px;
+    margin-bottom: 25px;
     background-color: green;
+    color: green;
+    overflow: visible;
 }
 
 #float-right {
     float: right;
     width: 100px;
-    height: 50px;
+    height: 25px;
+    margin-bottom: 25px;
     background-color: green;
+    color: green;
+    overflow: visible;
 }
 </style>
 
 <body>
-    <p>This should display two green squares. You should not see any red.</p>
+    <p>This should display two squares containing a green stripe, a blue strupe, and a black rectangle, in that order.</p>
     <div class="container">
-        <div id="float-left">
-        </div>
+        <div id="float-left"></div>
         XX
     </div>
     <div class="container">
-        <div id="float-right">
-        </div>
+        <div id="float-right"></div>
         XX
     </div>
 </body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref-expected.html
new file mode 100644 (file)
index 0000000..bcb1ab0
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-001-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: black;
+    background-color: blue;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 25px;
+    margin-bottom: 25px;
+    background-color: green;
+    color: green;
+    overflow: visible;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 25px;
+    margin-bottom: 25px;
+    background-color: green;
+    color: green;
+    overflow: visible;
+}
+</style>
+
+<body>
+    <p>This should display two squares containing a green stripe, a blue strupe, and a black rectangle, in that order.</p>
+    <div class="container">
+        <div id="float-left"></div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right"></div>
+        XX
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html
new file mode 100644 (file)
index 0000000..bcb1ab0
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-001-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: black;
+    background-color: blue;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 25px;
+    margin-bottom: 25px;
+    background-color: green;
+    color: green;
+    overflow: visible;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 25px;
+    margin-bottom: 25px;
+    background-color: green;
+    color: green;
+    overflow: visible;
+}
+</style>
+
+<body>
+    <p>This should display two squares containing a green stripe, a blue strupe, and a black rectangle, in that order.</p>
+    <div class="container">
+        <div id="float-left"></div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right"></div>
+        XX
+    </div>
+</body>
index 2be30d2..d73717c 100644 (file)
@@ -3,7 +3,7 @@
 <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/#relation-to-box-model-and-float-behavior">
-<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<link rel="match" href="shape-outside-floats-clipped-001-ref.html">
 <meta name="flags" content="ahem">
 <head>
 <style>
@@ -13,8 +13,8 @@
     width: 100px;
     height: 100px;
     border: 1px solid black;
-    color: green;
-    background-color: red;
+    color: black;
+    background-color: blue;
     display: inline-block;
 }
 
@@ -25,8 +25,6 @@
     margin-bottom: 25px;
     -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
     background-color: green;
-    color: green;
-    overflow: visible;
 }
 
 #float-right {
     margin-bottom: 25px;
     -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
     background-color: green;
-    color: green;
-    overflow: visible;
 }
 </style>
 
 <body>
-    <p>This should display two green squares. You should not see any red.</p>
+    <p>This should display two squares containing a green stripe, a blue strupe, and a black rectangle, in that order.</p>
     <div class="container">
-        <div id="float-left">
-            XX
-        </div>
+        <div id="float-left"></div>
         XX
     </div>
     <div class="container">
-        <div id="float-right">
-            XX
-        </div>
+        <div id="float-right"></div>
         XX
     </div>
 </body>
index 2cd1e74..bcb1ab0 100644 (file)
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<title>CSS Reference</title>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-001-ref.html">
 <meta name="flags" content="ahem">
 <head>
 <style>
     width: 100px;
     height: 100px;
     border: 1px solid black;
-    color: green;
-    background-color: red;
+    color: black;
+    background-color: blue;
     display: inline-block;
 }
 
 #float-left {
     float: left;
     width: 100px;
-    height: 50px;
+    height: 25px;
+    margin-bottom: 25px;
     background-color: green;
+    color: green;
+    overflow: visible;
 }
 
 #float-right {
     float: right;
     width: 100px;
-    height: 50px;
+    height: 25px;
+    margin-bottom: 25px;
     background-color: green;
+    color: green;
+    overflow: visible;
 }
 </style>
 
 <body>
-    <p>This should display two green squares. You should not see any red.</p>
+    <p>This should display two squares containing a green stripe, a blue strupe, and a black rectangle, in that order.</p>
     <div class="container">
-        <div id="float-left">
-        </div>
+        <div id="float-left"></div>
         XX
     </div>
     <div class="container">
-        <div id="float-right">
-        </div>
+        <div id="float-right"></div>
         XX
     </div>
 </body>
index fd401f0..3843760 100644 (file)
@@ -3,7 +3,7 @@
 <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/#relation-to-box-model-and-float-behavior">
-<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<link rel="match" href="shape-outside-floats-clipped-001-ref.html">
 <meta name="flags" content="ahem">
 <head>
 <style>
@@ -13,7 +13,7 @@
     width: 100px;
     height: 100px;
     border: 1px solid black;
-    color: green;
+    color: black;
     background-color: green;
     display: inline-block;
 }
@@ -24,7 +24,7 @@
     height: 25px;
     margin-top: 25px;
     -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
-    background-color: green;
+    background-color: blue;
 }
 
 #float-right {
     height: 25px;
     margin-top: 25px;
     -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
-    background-color: green;
+    background-color: blue;
 }
 </style>
 
 <body>
-    <p>This should display two green squares. You should not see any red.</p>
+    <p>This should display two squares containing a green stripe, a blue strupe, and a black rectangle, in that order.</p>
     <div class="container">
         <div id="float-left"></div>
         XX
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004-expected.html
new file mode 100644 (file)
index 0000000..2cd1e74
--- /dev/null
@@ -0,0 +1,47 @@
+<!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/#relation-to-box-model-and-float-behavior">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XX
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html
new file mode 100644 (file)
index 0000000..7c9b1fc
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to left and right of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 50px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(0, 0, 200%, 100%);
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 50px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(-100%, 0, 200%, 100%);
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left"></div>
+        X X
+    </div>
+    <div class="container" style="text-align: right">
+        <div id="float-right"></div>
+        X X
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005-expected.html
new file mode 100644 (file)
index 0000000..b666758
--- /dev/null
@@ -0,0 +1,47 @@
+<!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/#relation-to-box-model-and-float-behavior">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: black;
+    background-color: blue;
+}
+
+#float-left {
+    float: left;
+    margin-right: 25px;
+    width: 25px;
+    height: 100px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    margin-left: 25px;
+    width: 25px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display a green stripe, a blue stripe, and a black rectangle, in that order.</a>
+    <div class="container">
+        <div id="float-left"></div>
+        X X
+    </div>
+    <p>This should display a black rectangle, a blue stripe, and a green stripe, in that order.</a>
+    <div class="container" style="text-align: right">
+        <div id="float-right"></div>
+        X X
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html
new file mode 100644 (file)
index 0000000..44f86c8
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to left and right of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-005-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: black;
+    background-color: blue;
+}
+
+#float-left {
+    float: left;
+    margin-right: 25px;
+    width: 25px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(0, 0, 200%, 100%);
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    margin-left: 25px;
+    width: 25px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(-100%, 0, 200%, 100%);
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display a green stripe, a blue stripe, and a black rectangle, in that order.</a>
+    <div class="container">
+        <div id="float-left"></div>
+        X X
+    </div>
+    <p>This should display a black rectangle, a blue stripe, and a green stripe, in that order.</a>
+    <div class="container" style="text-align: right">
+        <div id="float-right"></div>
+        X X
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006-expected.html
new file mode 100644 (file)
index 0000000..b666758
--- /dev/null
@@ -0,0 +1,47 @@
+<!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/#relation-to-box-model-and-float-behavior">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: black;
+    background-color: blue;
+}
+
+#float-left {
+    float: left;
+    margin-right: 25px;
+    width: 25px;
+    height: 100px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    margin-left: 25px;
+    width: 25px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display a green stripe, a blue stripe, and a black rectangle, in that order.</a>
+    <div class="container">
+        <div id="float-left"></div>
+        X X
+    </div>
+    <p>This should display a black rectangle, a blue stripe, and a green stripe, in that order.</a>
+    <div class="container" style="text-align: right">
+        <div id="float-right"></div>
+        X X
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html
new file mode 100644 (file)
index 0000000..10d4ad6
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to left and right of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-005-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: black;
+    background-color: green;
+}
+
+#float-left {
+    float: left;
+    margin-left: 25px;
+    width: 25px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(0, 0, 200%, 100%);
+    background-color: blue;
+}
+
+#float-right {
+    float: right;
+    margin-right: 25px;
+    width: 25px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(-100%, 0, 200%, 100%);
+    background-color: blue;
+}
+</style>
+
+<body>
+    <p>This should display a green stripe, a blue stripe, and a black rectangle, in that order.</a>
+    <div class="container">
+        <div id="float-left"></div>
+        X X
+    </div>
+    <p>This should display a black rectangle, a blue stripe, and a green stripe, in that order.</a>
+    <div class="container" style="text-align: right">
+        <div id="float-right"></div>
+        X X
+    </div>
+</body>
index c26e046..1ac8a37 100644 (file)
     background: blue;
 }
 .float-left {
-    width: 100px;
+    width: 200px;
     height: 200px;
     -webkit-shape-outside: polygon(0px 0px, 200px 0px, 0px 200px);
     float: left;
 }
 .float-right {
+    margin-left: 100px;
     width: 100px;
     height: 200px;
     -webkit-shape-outside: polygon(100px 0px, -100px 200px, 100px 200px);
index 5c07a58..e745edd 100644 (file)
 }
 .float-left {
     width: 200px;
-    height: 100px;
+    height: 200px;
     -webkit-shape-outside: polygon(0px 0px, 0px 200px, 200px 0px);
     float: left;
 }
 .float-right {
+    margin-top: 100px;
     width: 200px;
     height: 100px;
     -webkit-shape-outside: polygon(0px 100px, 200px -100px, 200px 100px);
index 4d26c02..6331ee3 100644 (file)
 }
 .float-left {
     width: 200px;
-    height: 100px;
+    height: 200px;
     -webkit-shape-outside: polygon(0px 0px, 200px 200px, 200px 0px);
     float: left;
 }
 .float-right {
+    margin-top: 100px;
     width: 200px;
     height: 100px;
     -webkit-shape-outside: polygon(0px 100px, 0px -100px, 200px 100px);
index 5898149..54ab2e5 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-10-09 14:13
+Last Import: 2013-10-10 09:20
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
@@ -24,12 +24,20 @@ List of files:
 /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-clipped-000-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.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 e37376f..630ccd6 100644 (file)
@@ -8,7 +8,7 @@
         -webkit-shape-image-threshold: 0.4;
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='50px'><rect x='0' y='0' width='100' height='50' fill='rgba(0,0,100, 0.5)'/></svg>");
         background-repeat: no-repeat;
-        width: 100px; 
+        width: 150px; 
         height: 50px; 
     }
 </style>
index 7b026d5..6bf3953 100644 (file)
@@ -1,3 +1,22 @@
+2013-10-10  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes] New positioning model: Shape cropped to margin box
+        https://bugs.webkit.org/show_bug.cgi?id=118092
+
+        Reviewed by Alexandru Chiculita.
+
+        Clip the shape to the margin box when it extends out the left or right
+        edges. Also added a few local variables to make the code easier to
+        read.
+
+        Tests: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-ref.html
+               csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-004.html
+               csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-005.html
+               csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html
+
+        * rendering/shapes/ShapeOutsideInfo.cpp:
+        (WebCore::ShapeOutsideInfo::updateDeltasForContainingBlockLine):
+
 2013-10-10  Daniel Bates  <dabates@apple.com>
 
         Avoid resizing the internal buffer of SharedBuffer when creating a PurgeableBuffer
index bcbeb69..b714845 100644 (file)
@@ -64,11 +64,16 @@ void ShapeOutsideInfo::updateDeltasForContainingBlockLine(const RenderBlockFlow*
         m_shapeLineTop = lineTopInShapeCoordinates - logicalTopOffset();
         m_lineHeight = lineHeight;
 
+        LayoutUnit floatMarginBoxWidth = containingBlock->logicalWidthForFloat(floatingObject);
+
         if (lineOverlapsShapeBounds()) {
             SegmentList segments = computeSegmentsForLine(lineTopInShapeCoordinates, lineHeight);
             if (segments.size()) {
-                m_leftMarginBoxDelta = segments.first().logicalLeft + containingBlock->marginStartForChild(m_renderer);
-                m_rightMarginBoxDelta = segments.last().logicalRight - containingBlock->logicalWidthForChild(m_renderer) - containingBlock->marginEndForChild(m_renderer);
+                LayoutUnit rawLeftMarginBoxDelta = segments.first().logicalLeft + containingBlock->marginStartForChild(m_renderer);
+                m_leftMarginBoxDelta = clampTo<LayoutUnit>(rawLeftMarginBoxDelta, LayoutUnit(), floatMarginBoxWidth);
+
+                LayoutUnit rawRightMarginBoxDelta = segments.last().logicalRight - containingBlock->logicalWidthForChild(m_renderer) - containingBlock->marginEndForChild(m_renderer);
+                m_rightMarginBoxDelta = clampTo<LayoutUnit>(rawRightMarginBoxDelta, -floatMarginBoxWidth, LayoutUnit());
                 return;
             }
         }
@@ -80,8 +85,8 @@ void ShapeOutsideInfo::updateDeltasForContainingBlockLine(const RenderBlockFlow*
         // content should interact with previously stacked floats on the line
         // as if this outermost float did not exist. Perhaps obviously, this
         // solution cannot do that, and will be revisted with bug 122576.
-        m_leftMarginBoxDelta = containingBlock->logicalWidthForFloat(floatingObject);
-        m_rightMarginBoxDelta = -containingBlock->logicalWidthForFloat(floatingObject);
+        m_leftMarginBoxDelta = floatMarginBoxWidth;
+        m_rightMarginBoxDelta = -floatMarginBoxWidth;
     }
 }