Title: [104851] trunk
Revision
104851
Author
simon.fra...@apple.com
Date
2012-01-12 13:25:39 -0800 (Thu, 12 Jan 2012)

Log Message

Borders and box masks behave incorrectly with overlapping offsets
https://bugs.webkit.org/show_bug.cgi?id=76137

Source/WebCore:

Reviewed by Dave Hyatt.

When border-image-slice sizes add up to more than the height or width
of the border-image, the middle sections should not be rendered, per spec.

Test: fast/borders/border-image-slice-constrained.html

* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::paintNinePieceImage):

LayoutTests:

Reviewed by Dave Hyatt.

Testcase with border-image slices adding up to more than the height/width
of the border image.

Fixed cross-fade-webkit-mask-box-image.html to use slices that are half
of the image width.

* animations/cross-fade-webkit-mask-box-image.html:
* fast/borders/border-image-slice-constrained.html: Added.
* platform/mac/animations/cross-fade-webkit-mask-box-image-expected.png:
* platform/mac/fast/borders/border-image-slice-constrained-expected.png: Added.
* platform/mac/fast/borders/border-image-slice-constrained-expected.txt: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (104850 => 104851)


--- trunk/LayoutTests/ChangeLog	2012-01-12 21:16:26 UTC (rev 104850)
+++ trunk/LayoutTests/ChangeLog	2012-01-12 21:25:39 UTC (rev 104851)
@@ -1,3 +1,22 @@
+2012-01-12  Simon Fraser  <simon.fra...@apple.com>
+
+        Borders and box masks behave incorrectly with overlapping offsets
+        https://bugs.webkit.org/show_bug.cgi?id=76137
+
+        Reviewed by Dave Hyatt.
+        
+        Testcase with border-image slices adding up to more than the height/width
+        of the border image.
+        
+        Fixed cross-fade-webkit-mask-box-image.html to use slices that are half
+        of the image width.
+
+        * animations/cross-fade-webkit-mask-box-image.html:
+        * fast/borders/border-image-slice-constrained.html: Added.
+        * platform/mac/animations/cross-fade-webkit-mask-box-image-expected.png:
+        * platform/mac/fast/borders/border-image-slice-constrained-expected.png: Added.
+        * platform/mac/fast/borders/border-image-slice-constrained-expected.txt: Added.
+
 2012-01-12  Stephen White  <senorbla...@chromium.org>
 
         [chromium] Re-enable Skia feColorMatrix filter implementation.

Modified: trunk/LayoutTests/animations/cross-fade-webkit-mask-box-image.html (104850 => 104851)


--- trunk/LayoutTests/animations/cross-fade-webkit-mask-box-image.html	2012-01-12 21:16:26 UTC (rev 104850)
+++ trunk/LayoutTests/animations/cross-fade-webkit-mask-box-image.html	2012-01-12 21:25:39 UTC (rev 104851)
@@ -17,11 +17,11 @@
         height: 200px;
         width: 200px;
         background-color: red;
-        -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%) 75 stretch;
+        -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%) 50 stretch;
     }
     @-webkit-keyframes anim {
-        from { -webkit-mask-box-image: url(resources/stripes-100.png) 75 stretch; }
-        to   { -webkit-mask-box-image: url(resources/green-100.png) 75 stretch; }
+        from { -webkit-mask-box-image: url(resources/stripes-100.png) 50 stretch; }
+        to   { -webkit-mask-box-image: url(resources/green-100.png) 50 stretch; }
     }
   </style>
   <script src="" type="text/_javascript_" charset="utf-8"></script>

Added: trunk/LayoutTests/fast/borders/border-image-slice-constrained.html (0 => 104851)


--- trunk/LayoutTests/fast/borders/border-image-slice-constrained.html	                        (rev 0)
+++ trunk/LayoutTests/fast/borders/border-image-slice-constrained.html	2012-01-12 21:25:39 UTC (rev 104851)
@@ -0,0 +1,29 @@
+<html>
+<head>
+    <style>
+        div {
+            border-width: 21px 30px 30px 21px;
+            width: 120px;
+            height: 120px;
+            margin: 10px;
+            border-image-source: url("resources/border-image.png");
+            border-image-repeat: repeat;
+            display: inline-block;
+        }
+
+        div.tl {
+            /* Normal case */
+            border-image-slice:  21 30 30 21 fill;
+        }
+
+        div.tr {
+            /* Slice total larger than image size */
+            border-image-slice: 42 60 60 42 fill;
+        }
+    </style>
+</head>
+<body>
+    <div class="tl"></div>
+    <div class="tr"></div>
+</body>
+</html>
Property changes on: trunk/LayoutTests/fast/borders/border-image-slice-constrained.html
___________________________________________________________________

Added: svn:mime-type

Added: svn:keywords

Added: svn:eol-style

Modified: trunk/LayoutTests/platform/mac/animations/cross-fade-webkit-mask-box-image-expected.png


(Binary files differ)

Added: trunk/LayoutTests/platform/mac/fast/borders/border-image-slice-constrained-expected.png


(Binary files differ)
Property changes on: trunk/LayoutTests/platform/mac/fast/borders/border-image-slice-constrained-expected.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/LayoutTests/platform/mac/fast/borders/border-image-slice-constrained-expected.txt (0 => 104851)


--- trunk/LayoutTests/platform/mac/fast/borders/border-image-slice-constrained-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/platform/mac/fast/borders/border-image-slice-constrained-expected.txt	2012-01-12 21:25:39 UTC (rev 104851)
@@ -0,0 +1,10 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+  RenderBlock {HTML} at (0,0) size 800x600
+    RenderBody {BODY} at (8,8) size 784x584
+      RenderBlock {DIV} at (10,10) size 171x171 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
+      RenderText {#text} at (191,177) size 4x18
+        text run at (191,177) width 4: " "
+      RenderBlock {DIV} at (205,10) size 171x171 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
+      RenderText {#text} at (0,0) size 0x0
Property changes on: trunk/LayoutTests/platform/mac/fast/borders/border-image-slice-constrained-expected.txt
___________________________________________________________________

Added: svn:mime-type

Added: svn:keywords

Added: svn:eol-style

Modified: trunk/Source/WebCore/ChangeLog (104850 => 104851)


--- trunk/Source/WebCore/ChangeLog	2012-01-12 21:16:26 UTC (rev 104850)
+++ trunk/Source/WebCore/ChangeLog	2012-01-12 21:25:39 UTC (rev 104851)
@@ -1,3 +1,18 @@
+2012-01-12  Simon Fraser  <simon.fra...@apple.com>
+
+        Borders and box masks behave incorrectly with overlapping offsets
+        https://bugs.webkit.org/show_bug.cgi?id=76137
+
+        Reviewed by Dave Hyatt.
+        
+        When border-image-slice sizes add up to more than the height or width
+        of the border-image, the middle sections should not be rendered, per spec.
+        
+        Test: fast/borders/border-image-slice-constrained.html
+
+        * rendering/RenderBoxModelObject.cpp:
+        (WebCore::RenderBoxModelObject::paintNinePieceImage):
+
 2012-01-12  Anders Carlsson  <ander...@apple.com>
 
         Make all calls to pinnedInDirection go through the ScrollElasticityController

Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (104850 => 104851)


--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp	2012-01-12 21:16:26 UTC (rev 104850)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp	2012-01-12 21:25:39 UTC (rev 104851)
@@ -1185,10 +1185,11 @@
 
         // Paint the left edge.
         // Have to scale and tile into the border rect.
-        graphicsContext->drawTiledImage(image.get(), colorSpace, IntRect(borderImageRect.x(), borderImageRect.y() + topWidth, leftWidth,
-                                        destinationHeight),
-                                        IntRect(0, topSlice, leftSlice, sourceHeight),
-                                        FloatSize(leftSideScale, leftSideScale), Image::StretchTile, (Image::TileRule)vRule, op);
+        if (sourceHeight > 0)
+            graphicsContext->drawTiledImage(image.get(), colorSpace, IntRect(borderImageRect.x(), borderImageRect.y() + topWidth, leftWidth,
+                                            destinationHeight),
+                                            IntRect(0, topSlice, leftSlice, sourceHeight),
+                                            FloatSize(leftSideScale, leftSideScale), Image::StretchTile, (Image::TileRule)vRule, op);
     }
 
     if (drawRight) {
@@ -1206,21 +1207,22 @@
                                        LayoutRect(imageWidth - rightSlice, imageHeight - bottomSlice, rightSlice, bottomSlice), op);
 
         // Paint the right edge.
-        graphicsContext->drawTiledImage(image.get(), colorSpace, IntRect(borderImageRect.maxX() - rightWidth, borderImageRect.y() + topWidth, rightWidth,
-                                        destinationHeight),
-                                        IntRect(imageWidth - rightSlice, topSlice, rightSlice, sourceHeight),
-                                        FloatSize(rightSideScale, rightSideScale),
-                                        Image::StretchTile, (Image::TileRule)vRule, op);
+        if (sourceHeight > 0)
+            graphicsContext->drawTiledImage(image.get(), colorSpace, IntRect(borderImageRect.maxX() - rightWidth, borderImageRect.y() + topWidth, rightWidth,
+                                            destinationHeight),
+                                            IntRect(imageWidth - rightSlice, topSlice, rightSlice, sourceHeight),
+                                            FloatSize(rightSideScale, rightSideScale),
+                                            Image::StretchTile, (Image::TileRule)vRule, op);
     }
 
     // Paint the top edge.
-    if (drawTop)
+    if (drawTop && sourceWidth > 0)
         graphicsContext->drawTiledImage(image.get(), colorSpace, IntRect(borderImageRect.x() + leftWidth, borderImageRect.y(), destinationWidth, topWidth),
                                         IntRect(leftSlice, 0, sourceWidth, topSlice),
                                         FloatSize(topSideScale, topSideScale), (Image::TileRule)hRule, Image::StretchTile, op);
 
     // Paint the bottom edge.
-    if (drawBottom)
+    if (drawBottom && sourceWidth > 0)
         graphicsContext->drawTiledImage(image.get(), colorSpace, IntRect(borderImageRect.x() + leftWidth, borderImageRect.maxY() - bottomWidth,
                                         destinationWidth, bottomWidth),
                                         IntRect(leftSlice, imageHeight - bottomSlice, sourceWidth, bottomSlice),
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to