REGRESSION (r184895): Vertical border elements ([-webkit]-border-image set to 'repeat...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 10 Jun 2015 23:50:33 +0000 (23:50 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 10 Jun 2015 23:50:33 +0000 (23:50 +0000)
https://bugs.webkit.org/show_bug.cgi?id=145801

Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-06-10
Reviewed by Simon Fraser.

Source/WebCore:

When using the tiling to draw the sides of an image-border, the image slice
is repeated only in one direction. For top and bottom sides, the slice is
repeated horizontally and for left and right sides, it's repeated vertically.
The tile might be scaled in the other direction of the tiling if the border
extent and the slice extent are different in this direction.

The bug happens because we were scaling the tile in the tiling direction.

Test: fast/borders/border-image-repeat-stretch.html

* rendering/style/NinePieceImage.cpp:
(WebCore::NinePieceImage::scaleSlicesIfNeeded): Fix the type and the name
of deviceScaleFactor.

(WebCore::NinePieceImage::computeIntrinsicSideTileScale): Fix the scaling
direction of the border image side tiling.

* rendering/style/NinePieceImage.h:

LayoutTests:

* fast/borders/border-image-repeat-stretch-expected.html: Added.
* fast/borders/border-image-repeat-stretch.html: Added.
* fast/borders/resources/border-image-repeat-stretch-expected.svg: Added.
* fast/borders/resources/border-image.svg: Added.
Ensure that the sides of a border-images are drawn correctly in the cases
of 'repeat' and 'stretch'.

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

LayoutTests/ChangeLog
LayoutTests/fast/borders/border-image-repeat-stretch-expected.html [new file with mode: 0644]
LayoutTests/fast/borders/border-image-repeat-stretch.html [new file with mode: 0644]
LayoutTests/fast/borders/resources/border-image-repeat-stretch-expected.svg [new file with mode: 0644]
LayoutTests/fast/borders/resources/border-image.svg [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/style/NinePieceImage.cpp
Source/WebCore/rendering/style/NinePieceImage.h

index 71c54de..6461f3e 100644 (file)
@@ -1,3 +1,17 @@
+2015-06-10  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        REGRESSION (r184895): Vertical border elements ([-webkit]-border-image set to 'repeat') that used to render perfectly are now rendering incorrectly.
+        https://bugs.webkit.org/show_bug.cgi?id=145801
+
+        Reviewed by Simon Fraser.
+
+        * fast/borders/border-image-repeat-stretch-expected.html: Added.
+        * fast/borders/border-image-repeat-stretch.html: Added.
+        * fast/borders/resources/border-image-repeat-stretch-expected.svg: Added.
+        * fast/borders/resources/border-image.svg: Added.
+        Ensure that the sides of a border-images are drawn correctly in the cases
+        of 'repeat' and 'stretch'.
+
 2015-06-10  Chris Dumez  <cdumez@apple.com>
 
         ASSERT_WITH_SECURITY_IMPLICATION in WebCore::DocumentOrderedMap::getElementById
diff --git a/LayoutTests/fast/borders/border-image-repeat-stretch-expected.html b/LayoutTests/fast/borders/border-image-repeat-stretch-expected.html
new file mode 100644 (file)
index 0000000..f337499
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  div {
+    border: 0px none;
+    width: 150px;
+    height: 150px;
+  }  
+  #background-image-repeat { background-image: url(resources/border-image-repeat-stretch-expected.svg#repeat); }
+  #background-image-round { background-image: url(resources/border-image-repeat-stretch-expected.svg#repeat); }
+  #background-image-stretch { background-image: url(resources/border-image-repeat-stretch-expected.svg#stretch); }
+</style>
+</head>
+<body>
+  <div id="background-image-repeat"></div>
+  <br>
+  <div id="background-image-round"></div>
+  <br>
+  <div id="background-image-stretch"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/borders/border-image-repeat-stretch.html b/LayoutTests/fast/borders/border-image-repeat-stretch.html
new file mode 100644 (file)
index 0000000..a12a66e
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  div {
+    border: 30px solid transparent;
+    width: 90px;
+    height: 90px;
+  }
+  #border-image-repeat { border-image: url(resources/border-image.svg) 30 fill repeat; }
+  #border-image-round { border-image: url(resources/border-image.svg) 30 fill round; }
+  #border-image-stretch { border-image: url(resources/border-image.svg) 30 fill stretch; }
+</style>
+</head>
+<body>
+  <div id="border-image-repeat"></div>
+  <br>
+  <div id="border-image-round"></div>
+  <br>
+  <div id="border-image-stretch"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/borders/resources/border-image-repeat-stretch-expected.svg b/LayoutTests/fast/borders/resources/border-image-repeat-stretch-expected.svg
new file mode 100644 (file)
index 0000000..1951109
--- /dev/null
@@ -0,0 +1,74 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150">
+  <style>
+    .fragment { display: none }
+    .fragment:target { display: inline }
+    .corner { fill: blue; }
+    .side { fill: red; }
+    .middle { fill: green; }
+  </style>
+  <defs>
+    <symbol id="diamond" viewBox="0 0 30 30" preserveAspectRatio="none">
+      <path d="M15 0 L30 15 L15 30 L0 15 Z"/>
+    </symbol>
+    <use width="30" height="30" id="corner" class="corner" xlink:href="#diamond"/>
+    <use width="30" height="30" id="side" class="side" xlink:href="#diamond"/>
+    <use width="30" height="30" id="middle" class="middle" xlink:href="#diamond"/>
+    <use width="90" height="30" id="stretch-horizontal-side" class="side" xlink:href="#diamond"/>
+    <use width="30" height="90" id="stretch-vertical-side" class="side" xlink:href="#diamond"/>
+    <use width="90" height="90" id="stretch-middle" class="middle" xlink:href="#diamond"/>    
+    <g id="corners">
+      <use x="0" y="0" xlink:href="#corner"/>
+      <use x="120" y="0" xlink:href="#corner"/>
+      <use x="0" y="120" xlink:href="#corner"/>
+      <use x="120" y="120" xlink:href="#corner"/>
+    </g>
+    <g id="repeat-horizontal-sides">
+      <g id="repeat-horizontal-side">
+        <use x="30" y="0" xlink:href="#side"/>
+        <use x="60" y="0" xlink:href="#side"/>
+        <use x="90" y="0" xlink:href="#side"/>
+      </g>
+      <use y="120" xlink:href="#repeat-horizontal-side"/>
+    </g>
+    <g id="repeat-vertical-sides">
+      <g id="repeat-vertical-side">
+        <use x="0" y="30" xlink:href="#side"/>
+        <use x="0" y="60" xlink:href="#side"/>
+        <use x="0" y="90" xlink:href="#side"/>
+      </g>
+      <use x="120" xlink:href="#repeat-vertical-side"/>
+    </g>
+    <g id="repeat-middle-square">
+      <g id="repeat-middle-row">
+        <use x="30" y="30" xlink:href="#middle"/>
+        <use x="60" y="30" xlink:href="#middle"/>
+        <use x="90" y="30" xlink:href="#middle"/>
+      </g>
+      <use y="30" xlink:href="#repeat-middle-row"/>
+      <use y="60" xlink:href="#repeat-middle-row"/>
+    </g>
+    <g id="stretch-horizontal-sides">
+      <use x="30" y="0" xlink:href="#stretch-horizontal-side"/>
+      <use x="30" y="120" xlink:href="#stretch-horizontal-side"/>
+    </g>
+    <g id="stretch-vertical-sides">
+      <use x="0" y="30" xlink:href="#stretch-vertical-side"/>
+      <use x="120" y="30" xlink:href="#stretch-vertical-side"/>
+    </g>
+    <g id="stretch-middle-square">
+      <use x="30" y="30" xlink:href="#stretch-middle"/>
+    </g>
+  </defs>
+  <g class="fragment" id="repeat">
+    <use xlink:href="#corners"/>
+    <use xlink:href="#repeat-horizontal-sides"/>
+    <use xlink:href="#repeat-vertical-sides"/>
+    <use xlink:href="#repeat-middle-square"/>
+  </g>
+  <g class="fragment" id="stretch">
+    <use xlink:href="#corners"/>
+    <use xlink:href="#stretch-horizontal-sides"/>
+    <use xlink:href="#stretch-vertical-sides"/>
+    <use xlink:href="#stretch-middle-square"/>
+  </g>
+</svg>
diff --git a/LayoutTests/fast/borders/resources/border-image.svg b/LayoutTests/fast/borders/resources/border-image.svg
new file mode 100644 (file)
index 0000000..1cb6f75
--- /dev/null
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="90">
+  <style>
+    .corner { fill: blue; }
+    .side { fill: red; }
+    .middle { fill: green; }
+  </style>
+  <defs>
+    <path id="diamond" d="M15 0 L30 15 L15 30 L0 15 Z"/>
+    <use id="corner" class="corner" xlink:href="#diamond"/>
+    <use id="side" class="side" xlink:href="#diamond"/>
+    <use id="middle" class="middle" xlink:href="#diamond"/>
+  </defs>
+  <use x="0" y="0" xlink:href="#corner"/>
+  <use x="60" y="0" xlink:href="#corner"/>
+  <use x="0" y="60" xlink:href="#corner"/>
+  <use x="60" y="60" xlink:href="#corner"/>
+  <use x="30" y="0" xlink:href="#side"/>
+  <use x="30" y="60" xlink:href="#side"/>
+  <use x="0" y="30" xlink:href="#side"/>
+  <use x="60" y="30" xlink:href="#side"/>
+  <use x="30" y="30" xlink:href="#middle"/>
+</svg>
index 89e1aa4..b79a0be 100644 (file)
@@ -1,3 +1,29 @@
+2015-06-10  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        REGRESSION (r184895): Vertical border elements ([-webkit]-border-image set to 'repeat') that used to render perfectly are now rendering incorrectly.
+        https://bugs.webkit.org/show_bug.cgi?id=145801
+
+        Reviewed by Simon Fraser.
+
+        When using the tiling to draw the sides of an image-border, the image slice
+        is repeated only in one direction. For top and bottom sides, the slice is
+        repeated horizontally and for left and right sides, it's repeated vertically.
+        The tile might be scaled in the other direction of the tiling if the border
+        extent and the slice extent are different in this direction.
+        
+        The bug happens because we were scaling the tile in the tiling direction.
+
+        Test: fast/borders/border-image-repeat-stretch.html
+
+        * rendering/style/NinePieceImage.cpp:
+        (WebCore::NinePieceImage::scaleSlicesIfNeeded): Fix the type and the name
+        of deviceScaleFactor.
+        
+        (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Fix the scaling
+        direction of the border image side tiling.
+        
+        * rendering/style/NinePieceImage.h:
+
 2015-06-10  Chris Dumez  <cdumez@apple.com>
 
         ASSERT_WITH_SECURITY_IMPLICATION in WebCore::DocumentOrderedMap::getElementById
index 2744ce1..a1f1030 100644 (file)
@@ -81,10 +81,10 @@ LayoutBoxExtent NinePieceImage::computeSlices(const LayoutSize& size, const Leng
     return LayoutBoxExtent(top, right, bottom, left);
 }
 
-void NinePieceImage::scaleSlicesIfNeeded(const LayoutSize& size, LayoutBoxExtent& slices, int scaleFactor)
+void NinePieceImage::scaleSlicesIfNeeded(const LayoutSize& size, LayoutBoxExtent& slices, float deviceScaleFactor)
 {
-    LayoutUnit width  = std::max<LayoutUnit>(1 / scaleFactor, slices.left() + slices.right());
-    LayoutUnit height = std::max<LayoutUnit>(1 / scaleFactor, slices.top() + slices.bottom());
+    LayoutUnit width  = std::max<LayoutUnit>(1 / deviceScaleFactor, slices.left() + slices.right());
+    LayoutUnit height = std::max<LayoutUnit>(1 / deviceScaleFactor, slices.top() + slices.bottom());
 
     float sliceScaleFactor = std::min((float)size.width() / width, (float)size.height() / height);
 
@@ -157,7 +157,7 @@ FloatSize NinePieceImage::computeIntrinsicSideTileScale(ImagePiece piece, const
         return FloatSize(1, 1);
 
     float scale;
-    if (isVerticalPiece(piece))
+    if (isHorizontalPiece(piece))
         scale = destinationRects[piece].height() / sourceRects[piece].height();
     else
         scale = destinationRects[piece].width() / sourceRects[piece].width();
index d220df0..4bef1af 100644 (file)
@@ -199,7 +199,7 @@ public:
     static Vector<FloatRect> computeIntrinsicRects(const FloatRect& outer, const LayoutBoxExtent& slices, float deviceScaleFactor);
     static Vector<FloatRect> computeNonIntrinsicRects(const Vector<FloatRect>& intrinsicRects, const LayoutBoxExtent& slices);
 
-    static void scaleSlicesIfNeeded(const LayoutSize&, LayoutBoxExtent& slices, int scaleFactor);
+    static void scaleSlicesIfNeeded(const LayoutSize&, LayoutBoxExtent& slices, float deviceScaleFactor);
 
     static FloatSize computeIntrinsicSideTileScale(ImagePiece, const Vector<FloatRect>& destinationRects, const Vector<FloatRect>& sourceRects);
     static FloatSize computeIntrinsicMiddleTileScale(const Vector<FloatSize>& scales, const Vector<FloatRect>& destinationRects, const Vector<FloatRect>& sourceRects, ENinePieceImageRule hRule, ENinePieceImageRule vRule);