Attachment 199130 Details for Bug 114526 – proposed patch

[patch] proposed patch

22april3.patch (text/plain), 35.08 KB, created by Zoltan Horvath on 2013-04-22 16:40:42 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Zoltan Horvath

Created: 2013-04-22 16:40:42 PDT

Size: 35.08 KB

patch

obsolete

>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index d554e15..bd428ea 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,30 @@
>+2013-04-22  Zoltan Horvath  <zoltan@webkit.org>
>+
>+        [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box
>+        https://bugs.webkit.org/show_bug.cgi?id=114526
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Update and add tests for the new behavior.
>+
>+        * fast/exclusions/resources/rounded-rectangle.js:
>+        (generateString): Modify the function to not generate overflow content.
>+        * fast/exclusions/shape-inside/shape-inside-bottom-edge-expected.html:
>+        * fast/exclusions/shape-inside/shape-inside-bottom-edge.html:
>+        * fast/exclusions/shape-inside/shape-inside-empty-expected.html:
>+        * fast/exclusions/shape-inside/shape-inside-empty.html:
>+        * fast/exclusions/shape-inside/shape-inside-overflow-expected.html:
>+        * fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html: Added.
>+        * fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html: Added.
>+        * fast/exclusions/shape-inside/shape-inside-overflow.html:
>+        * fast/exclusions/shape-inside/shape-inside-percentage-expected.html:
>+        * fast/exclusions/shape-inside/shape-inside-percentage.html:
>+        * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html:
>+        * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html:
>+        * fast/regions/shape-inside/shape-inside-on-additional-regions-expected.html:
>+        * fast/regions/shape-inside/shape-inside-on-additional-regions.html: This test is not intented to test the overflow behavior from
>+        shape-inside on regions, so I set the shape's height to the container's height.
>+
> 2013-04-22  Bear Travis  <betravis@adobe.com>
> 
>         [css exclusions] shape-inside-recursive-layout.html should not yet test display: inline-grid
>diff --git a/LayoutTests/fast/exclusions/resources/rounded-rectangle.js b/LayoutTests/fast/exclusions/resources/rounded-rectangle.js
>index d4629c0..4b022e7 100644
>--- a/LayoutTests/fast/exclusions/resources/rounded-rectangle.js
>+++ b/LayoutTests/fast/exclusions/resources/rounded-rectangle.js
>@@ -63,8 +63,8 @@ function generateString(dimensions, lineHeight) {
>     if (dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0)
>         resultLength = dimensions.shapeWidth * dimensions.shapeHeight / (lineHeight * lineHeight);
>     else {
>-        for (var lineTop = 0; lineTop < dimensions.shapeHeight; lineTop += lineHeight) {
>-            var width = dimensions.shapeWidth - 2 * xInset(dimensions, lineTop, lineTop + lineHeight);
>+        for (var lineBottom = lineHeight; lineBottom < dimensions.shapeHeight; lineBottom += lineHeight) {
>+            var width = dimensions.shapeWidth - 2 * xInset(dimensions, lineBottom, lineBottom + lineHeight);
>             resultLength += width / lineHeight;
>         }
>     }
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge-expected.html
>index 5a7aa32..939a772 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge-expected.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge-expected.html
>@@ -2,47 +2,61 @@
> <html>
> <head>
> <style>
>-.shape-inside {
>-    position: absolute;
>-    left: 0px;
>-    width: 600px;
>-    height: 200px;
>-}
>-
>-.shape-background {
>-    position: absolute;
>-    left: 50px;
>-    width: 400px;
>+.box {
>+    width: 450px;
>     height: 100px;
>-    background-color: green;
>-}
>-
>-#shape-background-no-overlap {
>-    top: 50px;
>+    line-height: 20px;
>+    outline: 2px solid green;
> }
> 
>-#shape-inside-no-overlap {
>-    top: 0px;
>-    padding-top: 150px;
>+.rounded-rectangle {
>+    width: 100px;
>+    height: 100px;
> }
> 
>-#shape-background-overlap {
>-    top: 250px;
>+.details {
>+    padding-top: 15px;
>+    font-style: italic;
> }
> 
>-#shape-inside-overlap {
>-    top: 200px;
>-    padding-left: 50px;
>-    padding-top: 149.9px;
>-}
> </style>
> </head>
> 
> <body>
>-  <div id="shape-background-no-overlap" class="shape-background"></div>
>-  <div id="shape-inside-no-overlap" class="shape-inside">This text should appear below and to the left of the green rectangle.</div>
>+  <div class="box">
>+    <p style="padding-top: 55px; padding-left: 25px;">Content1</p>
>+  </div>
>+<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content1 text line's bottom equals to the shape-inside's rectangle bottom boundary, so it should fit in the shape-inside.</p>
>+<hr>
>+
>+<div class="box">
>+    <p style="padding-top: 100px;">Content2</p>
>+</div>
>+
>+<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content2 text line overlaps with the shape-inside's rectangle bottom boundary, so the Content2 should be pushed below the content box.</p>
>+<hr>
>+
>+<div class="box">
>+    <p style="padding-top: 100px;">Content3</p>
>+</div>
>+
>+<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content3 text line starts after the shape-inside's rectangle bottom boundary, so the Content3 should be pushed below the content box.</p>
>+<hr>
>+
>+<div class="box rounded-rectangle">
>+  <p style="padding-top: 100px;">Content4</p>
>+</div>
>+<p class="details">There is a 100x100px shape-inside rounded rectangle inside the green box.<br/>The shape top and bottom boundaries match with the content box boundaries, the overflow should start on the left, below the green content box.</p>
>+<hr>
>+
>+<div class="box rounded-rectangle">
>+  <p style="padding-top: 100px;">Content5</p>
>+</div>
>+<p class="details">There is a 75x75px shape-inside rounded rectangle inside the green 100x100px box.<br/>The forth line should overflow, the overflow should start on the left, below the green content box.</p>
>+<hr>
> 
>-  <div id="shape-background-overlap" class="shape-background"></div>
>-  <div id="shape-inside-overlap" class="shape-inside">This text should directly appear below the green rectangle.</div>
>+<p>Based on a recent change on the <a href="http://dev.w3.org/csswg/css-exclusions/#shape-inside-property">exclusions specification</a>. The 'shape-inside' property adds an exclusion area to the element's wrapping context.
>+This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion area added is defined by subtracting the shape from the element's content area.</p>
>+<p>Bug <a href="http://webkit.org/b/114526 ">114526</a>: [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
> </body>
> </html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge.html
>index 5c80425..e263228 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-bottom-edge.html
>@@ -6,52 +6,69 @@
>         window.internals.settings.setCSSExclusionsEnabled(true);
> </script>
> <style>
>-.shape-inside {
>-    position: absolute;
>-    left: 0px;
>-    width: 600px;
>-    height: 200px;
>-    -webkit-shape-inside: rectangle(50px, 50px, 400px, 100px);
>-}
>-
>-.shape-background {
>-    position: absolute;
>-    left: 50px;
>-    width: 400px;
>+.box {
>+    width: 450px;
>     height: 100px;
>-    background-color: green;
>+    line-height: 20px;
>+    outline: 2px solid green;
> }
> 
>-#shape-background-no-overlap {
>-    top: 50px;
>+.rectangle {
>+    -webkit-shape-inside: rectangle(25px, 25px, 400px, 50px);
> }
> 
>-#shape-inside-no-overlap {
>-    top: 0px;
>-}
>-#shape-inside-no-overlap::before, #shape-inside-overlap::before {
>-    display: block;
>-    height: 150px;
>-    content: ' ';
>-}
>-#shape-inside-overlap::before {
>-    height: 149.9px;
>+.rounded-rectangle {
>+    width: 100px;
>+    height: 100px;
>+    -webkit-shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);
> }
>-#shape-background-overlap {
>-    top: 250px;
>+
>+.smaller-rounded-rectangle {
>+    width: 100px;
>+    height: 100px;
>+    -webkit-shape-inside: rectangle(0, 0, 75%, 75%, 25%, 25%);
> }
> 
>-#shape-inside-overlap {
>-    top: 200px;
>+.details {
>+    padding-top: 15px;
>+    font-style: italic;
> }
> </style>
> </head>
> 
> <body>
>-  <div id="shape-background-no-overlap" class="shape-background"></div>
>-  <div id="shape-inside-no-overlap" class="shape-inside">This text should appear below and to the left of the green rectangle.</div>
>+  <div class="box rectangle">
>+    <p style="padding-top: 55px;">Content1</p>
>+  </div>
>+<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content1 text line's bottom equals to the shape-inside's rectangle bottom boundary, so it should fit in the shape-inside.</p>
>+<hr>
>+
>+<div class="box rectangle">
>+    <p style="padding-top: 60px;">Content2</p>
>+</div>
>+<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content2 text line overlaps with the shape-inside's rectangle bottom boundary, so the Content2 should be pushed below the content box.</p>
>+<hr>
>+
>+<div class="box rectangle">
>+    <p style="padding-top: 76px;">Content3</p>
>+</div>
>+<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content3 text line starts after the shape-inside's rectangle bottom boundary, so the Content3 should be pushed below the content box.</p>
>+<hr>
>+
>+<div class="box rounded-rectangle">
>+  <p style="padding-top: 90px;">Content4</p>
>+</div>
>+<p class="details">There is a 100x100px shape-inside rounded rectangle inside the green box.<br/>The shape top and bottom boundaries match with the content box boundaries, the overflow should start on the left, below the green content box.</p>
>+<hr>
>+
>+<div class="box smaller-rounded-rectangle">
>+  <p style="padding-top: 60px;">Content5</p>
>+</div>
>+<p class="details">There is a 75x75px shape-inside rounded rectangle inside the green 100x100px box.<br/>The forth line should overflow, the overflow should start on the left, below the green content box.</p>
>+<hr>
> 
>-  <div id="shape-background-overlap" class="shape-background"></div>
>-  <div id="shape-inside-overlap" class="shape-inside">This text should directly appear below the green rectangle.</div>
>+<p>Based on a recent change on the <a href="http://dev.w3.org/csswg/css-exclusions/#shape-inside-property">exclusions specification</a>. The 'shape-inside' property adds an exclusion area to the element's wrapping context.
>+This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion area added is defined by subtracting the shape from the element's content area.</p>
>+<p>Bug <a href="http://webkit.org/b/114526 ">114526</a>: [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
> </body>
> </html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty-expected.html
>index 22306cc..c7e5b7a 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty-expected.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty-expected.html
>@@ -6,38 +6,46 @@
>         window.internals.settings.setCSSExclusionsEnabled(true);
> </script>
> <style>
>-    .shape-inside {
>+    #rectangles div {
>         width: 800px;
>-        height: 2em;
>+        height: 40px;
>+        line-height: 20px;
>+        margin-top: 50px;
>         border: solid green;
>         box-sizing: border-box;
>     }
>-    .padded {
>-        padding-top: 1em;
>-    }
>+    #rectangles p { margin-top: 37px; }
> </style>
> </head>
> <body>
>-    <p class="shape-inside padded">
>-        This text should be shifted down 1em by the rectangle(0px, 0px, 0px, 1em) shape-inside CSS property.
>-    </p>
>-    <p class="shape-inside">
>-        This text should be unconstrained by the rectangle(0px, 0px, 1em, 0px) shape-inside CSS property.
>-    </p>
>-    <p class="shape-inside">
>-        This text should be unconstrained by the circle(0px, 0px, 0px) shape-inside CSS property.
>-    </p>
>-    <p class="shape-inside padded">
>-        This text should be shifted down 1em by the ellipseX0(0px, 0px, 0px, 1em) shape-inside CSS property.
>-    </p>
>-    <p class="shape-inside">
>-        This text should be unconstrained by the ellipse(0px, 0px, 1em, 0px) shape-inside CSS property.
>-    </p>
>-    <p class="shape-inside">
>-        This text should be unconstrained by the polygon(0px 0px) shape-inside CSS property.
>-    </p>
>-    <p class="shape-inside">
>-        This text should be unconstrained by the polygon(0px 0px, 1em 0px) shape-inside CSS property.
>-    </p>
>+<div id="rectangles">
>+    <div style="margin-top: 0px;">
>+        <p>This text should be pushed down below the green rectangle. (There is a rectangle(0px, 0px, 0px, 1em) 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 rectangle(0px, 0px, 1em, 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 circle(0px, 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 ellipseX0(0px, 0px, 0px, 1em) 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>
>+    </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>
>+    </div>
>+    <div>
>+       <p>This text should be pushed down below the green rectangle. (There is a polygon(0px 0px, 1em 0px) shape-inside CSS property on the green rectangle.)</p>
>+    </div>
>+</div>
>+
>+<p style="margin-top: 50px;">
>+    A dimension of every shape-inside on this page is defined to 0. Based on the CSS Exclusions specification: The 'shape-inside' property adds one or more exclusion areas to the element's wrapping context.
>+    This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion areas are defined by subtracting the shape from the element's content area.<br/>
>+    Every text on this page should be pushed down below its green rectangle.
>+</p>
> </body>
> </html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty.html
>index 6bcddf7..ef37688 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty.html
>@@ -6,16 +6,17 @@
>         window.internals.settings.setCSSExclusionsEnabled(true);
> </script>
> <style>
>-    .shape-inside {
>+    #rectangles p {
>         width: 800px;
>-        height: 2em;
>+        height: 40px;
>+        line-height: 20px;
>+        margin-top: 50px;
>         border: solid green;
>         box-sizing: border-box;
>     }
> 
>     #shape-inside-rectangle-width0 {
>         -webkit-shape-inside: rectangle(0px, 0px, 0px, 1em);
>-        padding-top: 1em;
>     }
> 
>     #shape-inside-rectangle-height0 {
>@@ -28,7 +29,6 @@
> 
>     #shape-inside-ellipse-radiusX0 {
>         -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em);
>-        padding-top: 1em;
>     }
> 
>     #shape-inside-ellipse-radiusY0 {
>@@ -45,26 +45,33 @@
> </style>
> </head>
> <body>
>-    <p class="shape-inside" id="shape-inside-rectangle-width0">
>-        This text should be shifted down 1em by the rectangle(0px, 0px, 0px, 1em) shape-inside CSS property.
>+<div id="rectangles">
>+    <p id="shape-inside-rectangle-width0" style="margin-top: 0px;">
>+        This text should be pushed down below the green rectangle. (There is a rectangle(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)
>     </p>
>-    <p class="shape-inside" id="shape-inside-rectangle-height0">
>-        This text should be unconstrained by the rectangle(0px, 0px, 1em, 0px) shape-inside CSS property.
>+    <p id="shape-inside-rectangle-height0">
>+        This text should be pushed down below the green rectangle. (There is a rectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)
>     </p>
>-    <p class="shape-inside" id="shape-inside-circle-radius0">
>-        This text should be unconstrained by the circle(0px, 0px, 0px) shape-inside CSS property.
>+    <p id="shape-inside-circle-radius0">
>+        This text should be pushed down below the green rectangle. (There is a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)
>     </p>
>-    <p class="shape-inside" id="shape-inside-ellipse-radiusX0">
>-        This text should be shifted down 1em by the ellipseX0(0px, 0px, 0px, 1em) shape-inside CSS property.
>+    <p id="shape-inside-ellipse-radiusX0">
>+        This text should be pushed down below the green rectangle. (There is an ellipseX0(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)
>     </p>
>-    <p class="shape-inside" id="shape-inside-ellipse-radiusY0">
>-        This text should be unconstrained by the ellipse(0px, 0px, 1em, 0px) shape-inside CSS property.
>+    <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.)
>     </p>
>-    <p class="shape-inside" id="shape-inside-polygon-1vertex">
>-        This text should be unconstrained by the polygon(0px 0px) shape-inside CSS property.
>+    <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.)
>     </p>
>-    <p class="shape-inside" id="shape-inside-polygon-2vertices">
>-        This text should be unconstrained by the polygon(0px 0px, 1em 0px) shape-inside CSS property.
>+    <p id="shape-inside-polygon-2vertices">
>+       This text should be pushed down below the green rectangle. (There is a polygon(0px 0px, 1em 0px) shape-inside CSS property on the green rectangle.)
>     </p>
>+</div>
>+<p style="margin-top: 50px;">
>+    A dimension of every shape-inside on this page is defined to 0. Based on the CSS Exclusions specification: The 'shape-inside' property adds one or more exclusion areas to the element's wrapping context.
>+    This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion areas are defined by subtracting the shape from the element's content area.<br/>
>+    Every text on this page should be pushed down below its green rectangle.
>+</p>
> </body>
> </html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-expected.html
>index be1a4ca..b3b933e 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-expected.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-expected.html
>@@ -3,21 +3,22 @@
> <head>
> <style>
>     #container {
>-        border: 2px solid blue;
>         position: relative;
>         width: 200px;
>         height: 200px;
>+        line-height: 20px;
>+        border: 2px solid blue;
>     }
>     #border {
>         position: absolute;
>         left: 48px;
>         width: 100px;
>-        height: 50px;
>+        height: 40px;
>         border: 2px solid green;
>     }
>     .spacer {
>         width: 50px;
>-        height: 50px;
>+        height: 40px;
>     }
> </style>
> </head>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html
>new file mode 100644
>index 0000000..aadf9d7
>--- /dev/null
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html
>@@ -0,0 +1,36 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<style>
>+#shape-inside {
>+    border: 2px solid blue;
>+    position: relative;
>+    width: 200px;
>+    height: 200px;
>+    line-height: 20px;
>+}
>+#border {
>+    position: absolute;
>+    left: 58px;
>+    width: 100px;
>+    height: 40px;
>+    border: 2px solid green;
>+}
>+.spacer {
>+    width: 50px;
>+    height: 40px;
>+}
>+</style>
>+</head>
>+<body>
>+<div id="border"></div>
>+<div id="shape-inside">
>+    <div class="spacer" style="float:left"></div>
>+    <div class="spacer" style="float:right"></div>
>+    This text should wrap
>+    <div style="padding-top: 162px;">
>+        inside the green rectangle, and overflow should wrap outside the blue rectangle.
>+    </div>
>+</div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html
>new file mode 100644
>index 0000000..2a2b9df
>--- /dev/null
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html
>@@ -0,0 +1,33 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<script>
>+    if (window.internals)
>+        window.internals.settings.setCSSExclusionsEnabled(true);
>+</script>
>+<style>
>+#shape-inside {
>+    border: 2px solid blue;
>+    position: relative;
>+    width: 200px;
>+    height: 200px;
>+    line-height: 20px;
>+    -webkit-shape-inside: rectangle(50px, 0px, 100px, 45px);
>+}
>+#border {
>+    position: absolute;
>+    left: 58px;
>+    width: 100px;
>+    height: 40px;
>+    border: 2px solid green;
>+}
>+</style>
>+</head>
>+<body>
>+<div id="border"></div>
>+<div id="shape-inside">
>+    This text should wrap inside the green rectangle, and overflow should wrap
>+    outside the blue rectangle.
>+</div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow.html
>index a432cc0..77360ec 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow.html
>@@ -7,10 +7,11 @@
> </script>
> <style>
>     #container {
>-        border: 2px solid blue;
>         position: relative;
>         width: 200px;
>         height: 200px;
>+        line-height: 20px;
>+        border: 2px solid blue;
>     }
>     #shape-inside {
>         -webkit-shape-inside: rectangle(50px, 0px, 100px, 50px);
>@@ -19,16 +20,9 @@
>         position: absolute;
>         left: 48px;
>         width: 100px;
>-        height: 50px;
>+        height: 40px;
>         border: 2px solid green;
>     }
>-    #border-overflow {
>-        position: absolute;
>-        top: 50px;
>-        width: 200px;
>-        height: 150px;
>-        border: 2px solid blue;
>-    }
> </style>
> </head>
> <body>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage-expected.html
>index 5f707ab..d69d4d9 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage-expected.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage-expected.html
>@@ -27,9 +27,11 @@
>         <div id="shape-inside">
>             <div class="spacer" style="float:left"></div>
>             <div class="spacer" style="float:right"></div>
>-            This text should wrap inside the green rectangle, and overflow should wrap
>-            inside the blue rectangle.
>+            This text should wrap
>+            <div style="padding-top: 164px;">
>+                inside the green rectangle, and overflow should wrap outside the blue rectangle.
>+            </div>
>         </div>
>     </div>
> </body>
>-</html>
>\ No newline at end of file
>+</html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage.html
>index 4fcde36..f435512 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-percentage.html
>@@ -24,13 +24,6 @@
>         height: 50px;
>         border: 2px solid green;
>     }
>-    #border-overflow {
>-        position: absolute;
>-        top: 50px;
>-        width: 200px;
>-        height: 150px;
>-        border: 2px solid blue;
>-    }
> </style>
> </head>
> <body>
>@@ -38,8 +31,8 @@
>         <div id="border"></div>
>         <div id="shape-inside">
>             This text should wrap inside the green rectangle, and overflow should wrap
>-            inside the blue rectangle.
>+            outside the blue rectangle.
>         </div>
>     </div>
> </body>
>-</html>
>\ No newline at end of file
>+</html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html
>index bc31049..9da81da 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html
>@@ -22,8 +22,7 @@
> <div>
>     This test requires the Ahem font. It creates a rounded rectangle shape-inside and fills it
>     with alternating black and white squares as inline content. The middle line overlaps the top
>-    and bottom rounded corner area. The entire shape-inside should be filled, with a small amount
>-    of overflow.
>+    and bottom rounded corner area. The entire shape-inside should be filled, without any overflow.
> </div>
> </body>
> </html>
>diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html
>index cdf0877..2f6b612 100644
>--- a/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html
>+++ b/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html
>@@ -21,8 +21,7 @@
> <div>
>     This test requires the Ahem font. It creates a rounded rectangle shape-inside and fills it
>     with alternating black and white squares as inline content. The middle line overlaps the top
>-    and bottom rounded corner area. The entire shape-inside should be filled, with a small amount
>-    of overflow.
>+    and bottom rounded corner area. The entire shape-inside should be filled, without any overflow.
> </div>
> </body>
> </html>
>diff --git a/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions-expected.html b/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions-expected.html
>index f57f3a1..14228da 100644
>--- a/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions-expected.html
>+++ b/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions-expected.html
>@@ -17,7 +17,8 @@
>     }
>     #region_with_shape_inside {
>         border: 1px solid black;
>-        -webkit-shape-inside: rectangle(50px, 0px, 200px, 150px);
>+        -webkit-shape-inside: rectangle(50px, 0px, 300px, 300px);
>+        overflow: hidden;
>         background-color: orange;
>     }
> </style>
>diff --git a/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions.html b/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions.html
>index 7ef9aa8..eae9481 100644
>--- a/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions.html
>+++ b/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions.html
>@@ -21,7 +21,8 @@
>     }
>     #region_with_shape_inside {
>         border: 1px solid black;
>-        -webkit-shape-inside: rectangle(50px, 0px, 200px, 150px);
>+        -webkit-shape-inside: rectangle(50px, 0px, 300px, 300px);
>+        overflow: hidden;
>         background-color: orange;
>     }
> </style>
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index f7ac5e3..02dc982 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,37 @@
>+2013-04-22  Zoltan Horvath  <zoltan@webkit.org>
>+
>+        [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box
>+        https://bugs.webkit.org/show_bug.cgi?id=114526
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        The specification has changed to define shape-outside as the inverse of an exclusion. Overflowing content
>+        should not overlap the shape, and it should be pushed outside the content box. This change affects several
>+        tests, but only one new has been added. In this change I'm not intended to include the behavior change for
>+        shape-inside on CSS Regions, I'm going to fix that in a follow up patch.
>+
>+        Tests: fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html: Modified.
>+               fast/exclusions/shape-inside/shape-inside-bottom-edge.html: Modified.
>+               fast/exclusions/shape-inside/shape-inside-empty.html: Modified.
>+               fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html: Added.
>+               fast/exclusions/shape-inside/shape-inside-overflow.html: Modified.
>+               fast/exclusions/shape-inside/shape-inside-percentage.html: Modified.
>+               fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html: Modified.
>+
>+        * rendering/ExclusionShapeInfo.h:
>+        (WebCore::ExclusionShapeInfo::clearSegments): Shape-outside's code uses shape-inside codepaths, when that happens we need to provide a
>+        way to reset the m_segments member.
>+        (WebCore::ExclusionShapeInfo::shapeContainingBlockHeight): The containing block's height is stored in m_shapeLogicalHeight, I added a
>+        function to get this value when we need it to calculate the content box's bottom position.
>+        (ExclusionShapeInfo):
>+        (WebCore::ExclusionShapeInfo::lineOverlapsShapeBounds):
>+        (WebCore::ExclusionShapeInfo::lineWithinShapeBounds):  Add function to test whether a whole line is within a shape or not.
>+        * rendering/RenderBlockLineLayout.cpp:
>+        (WebCore::RenderBlock::layoutRunsAndFloatsInRange): Overflowing content should start under the content box.
>+        (WebCore::RenderBlock::LineBreaker::nextLineBreak): Since we use shape-inside codepaths for shape-outside in layoutRunsAndFloatsInRange function
>+        and for shape-outside is not a requirement to check the line's bottom position is within the shape we might end up with some extra segments here.
>+        In this case we should clear segments, since we don't want to apply any horizontal offsets on the overflowing content.
>+
> 2013-04-22  Martin Robinson  <mrobinson@igalia.com>
> 
>         [GTK] Fix remaining introspection warnings
>diff --git a/Source/WebCore/rendering/ExclusionShapeInfo.h b/Source/WebCore/rendering/ExclusionShapeInfo.h
>index 5585dab..bc20b48 100644
>--- a/Source/WebCore/rendering/ExclusionShapeInfo.h
>+++ b/Source/WebCore/rendering/ExclusionShapeInfo.h
>@@ -85,6 +85,7 @@ public:
>     }
> 
>     virtual bool computeSegmentsForLine(LayoutUnit lineTop, LayoutUnit lineHeight);
>+    void clearSegments() { m_segments.clear(); }
> 
>     LayoutUnit shapeLogicalTop() const { return floatLogicalTopToLayoutUnit(computedShapeLogicalBoundingBox().y()) + logicalTopOffset(); }
>     LayoutUnit shapeLogicalBottom() const { return floatLogicalBottomToLayoutUnit(computedShapeLogicalBoundingBox().maxY()) + logicalTopOffset(); }
>@@ -96,7 +97,10 @@ public:
>     LayoutUnit logicalLineTop() const { return m_shapeLineTop + logicalTopOffset(); }
>     LayoutUnit logicalLineBottom() const { return m_shapeLineTop + m_lineHeight + logicalTopOffset(); }
> 
>-    bool lineOverlapsShapeBounds() const { return logicalLineTop() < shapeLogicalBottom() && logicalLineBottom() >= shapeLogicalTop(); }
>+    LayoutUnit shapeContainingBlockHeight() const { return (m_renderer->style()->boxSizing() == CONTENT_BOX) ? (m_shapeLogicalHeight + m_renderer->borderAndPaddingLogicalHeight()) : m_shapeLogicalHeight; }
>+
>+    bool lineOverlapsShapeBounds() const { return logicalLineTop() < shapeLogicalBottom() && shapeLogicalTop() <= logicalLineBottom(); }
>+    bool lineWithinShapeBounds() const { return lineOverlapsShapeBounds() && (logicalLineBottom() <= shapeLogicalBottom()); }
> 
>     void dirtyShapeSize() { m_shape.clear(); }
>     bool shapeSizeDirty() { return !m_shape.get(); }
>diff --git a/Source/WebCore/rendering/RenderBlockLineLayout.cpp b/Source/WebCore/rendering/RenderBlockLineLayout.cpp
>index 5a50038..fd782a8 100644
>--- a/Source/WebCore/rendering/RenderBlockLineLayout.cpp
>+++ b/Source/WebCore/rendering/RenderBlockLineLayout.cpp
>@@ -1679,6 +1679,7 @@ void RenderBlock::layoutRunsAndFloatsInRange(LineLayoutState& layoutState, Inlin
>         // actual shape when a line is beginning in a new region which has a shape on it. Usecase: shape-inside is applied not on the first, but on either of the following regions in the region chain.
>         absoluteLogicalTop = logicalTop() + lineHeight(layoutState.lineInfo().isFirstLine(), isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes);
>     }
>+    bool lineOverflowsFromShapeInside = false;
> #endif
> 
>     while (!end.atEnd()) {
>@@ -1707,6 +1708,12 @@ void RenderBlock::layoutRunsAndFloatsInRange(LineLayoutState& layoutState, Inlin
>         if (exclusionShapeInsideInfo) {
>             LayoutUnit lineTop = logicalHeight() + absoluteLogicalTop;
>             exclusionShapeInsideInfo->computeSegmentsForLine(lineTop, lineHeight(layoutState.lineInfo().isFirstLine(), isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes));
>+
>+            LayoutUnit shapeContainingBlockHeight = exclusionShapeInsideInfo->shapeContainingBlockHeight();
>+            if (!flowThreadContainingBlock() && !exclusionShapeInsideInfo->lineWithinShapeBounds() && !lineOverflowsFromShapeInside && shapeContainingBlockHeight) {
>+                setLogicalHeight(shapeContainingBlockHeight);
>+                lineOverflowsFromShapeInside = true;
>+            }
>         }
> #endif
>         WordMeasurements wordMeasurements;
>@@ -2680,9 +2687,17 @@ InlineIterator RenderBlock::LineBreaker::nextLineBreak(InlineBidiResolver& resol
>     return nextSegmentBreak(resolver, lineInfo, renderTextInfo, lastFloatFromPreviousLine, consecutiveHyphenatedLines, wordMeasurements);
> #else
>     ExclusionShapeInsideInfo* exclusionShapeInsideInfo = m_block->layoutExclusionShapeInsideInfo();
>+
>     if (!exclusionShapeInsideInfo || !exclusionShapeInsideInfo->lineOverlapsShapeBounds())
>         return nextSegmentBreak(resolver, lineInfo, renderTextInfo, lastFloatFromPreviousLine, consecutiveHyphenatedLines, wordMeasurements);
> 
>+    // In layoutRunsAndFloatsInRange we have to use lineOverlapsShapeBounds() to determine the line segments since shape-outside's codepaths uses the same code to determine its segments. The line containing is not a requirement for shape-outside,
>+    // so in this case we can end up with some extra segments for the overflowing content, but we don't want to apply the segments for the overflowing content, so we need to reset it.
>+    if (!m_block->flowThreadContainingBlock() && !exclusionShapeInsideInfo->lineWithinShapeBounds()) {
>+        exclusionShapeInsideInfo->clearSegments();
>+        return nextSegmentBreak(resolver, lineInfo, renderTextInfo, lastFloatFromPreviousLine, consecutiveHyphenatedLines, wordMeasurements);
>+    }
>+
>     InlineIterator end = resolver.position();
>     InlineIterator oldEnd = end;
>

Actions: View | Formatted Diff | Diff

Attachments on bug 114526: 199130