- Revision
- 185438
- Author
- [email protected]
- Date
- 2015-06-10 16:50:33 -0700 (Wed, 10 Jun 2015)
Log Message
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
Patch by Said Abou-Hallawa <[email protected]> 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'.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (185437 => 185438)
--- trunk/LayoutTests/ChangeLog 2015-06-10 23:43:20 UTC (rev 185437)
+++ trunk/LayoutTests/ChangeLog 2015-06-10 23:50:33 UTC (rev 185438)
@@ -1,3 +1,17 @@
+2015-06-10 Said Abou-Hallawa <[email protected]>
+
+ 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 <[email protected]>
ASSERT_WITH_SECURITY_IMPLICATION in WebCore::DocumentOrderedMap::getElementById
Added: trunk/LayoutTests/fast/borders/border-image-repeat-stretch-expected.html (0 => 185438)
--- trunk/LayoutTests/fast/borders/border-image-repeat-stretch-expected.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-image-repeat-stretch-expected.html 2015-06-10 23:50:33 UTC (rev 185438)
@@ -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>
Added: trunk/LayoutTests/fast/borders/border-image-repeat-stretch.html (0 => 185438)
--- trunk/LayoutTests/fast/borders/border-image-repeat-stretch.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-image-repeat-stretch.html 2015-06-10 23:50:33 UTC (rev 185438)
@@ -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>
Added: trunk/LayoutTests/fast/borders/resources/border-image-repeat-stretch-expected.svg (0 => 185438)
--- trunk/LayoutTests/fast/borders/resources/border-image-repeat-stretch-expected.svg (rev 0)
+++ trunk/LayoutTests/fast/borders/resources/border-image-repeat-stretch-expected.svg 2015-06-10 23:50:33 UTC (rev 185438)
@@ -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=""
+ <use width="30" height="30" id="side" class="side" xlink:href=""
+ <use width="30" height="30" id="middle" class="middle" xlink:href=""
+ <use width="90" height="30" id="stretch-horizontal-side" class="side" xlink:href=""
+ <use width="30" height="90" id="stretch-vertical-side" class="side" xlink:href=""
+ <use width="90" height="90" id="stretch-middle" class="middle" xlink:href=""
+ <g id="corners">
+ <use x="0" y="0" xlink:href=""
+ <use x="120" y="0" xlink:href=""
+ <use x="0" y="120" xlink:href=""
+ <use x="120" y="120" xlink:href=""
+ </g>
+ <g id="repeat-horizontal-sides">
+ <g id="repeat-horizontal-side">
+ <use x="30" y="0" xlink:href=""
+ <use x="60" y="0" xlink:href=""
+ <use x="90" y="0" xlink:href=""
+ </g>
+ <use y="120" xlink:href=""
+ </g>
+ <g id="repeat-vertical-sides">
+ <g id="repeat-vertical-side">
+ <use x="0" y="30" xlink:href=""
+ <use x="0" y="60" xlink:href=""
+ <use x="0" y="90" xlink:href=""
+ </g>
+ <use x="120" xlink:href=""
+ </g>
+ <g id="repeat-middle-square">
+ <g id="repeat-middle-row">
+ <use x="30" y="30" xlink:href=""
+ <use x="60" y="30" xlink:href=""
+ <use x="90" y="30" xlink:href=""
+ </g>
+ <use y="30" xlink:href=""
+ <use y="60" xlink:href=""
+ </g>
+ <g id="stretch-horizontal-sides">
+ <use x="30" y="0" xlink:href=""
+ <use x="30" y="120" xlink:href=""
+ </g>
+ <g id="stretch-vertical-sides">
+ <use x="0" y="30" xlink:href=""
+ <use x="120" y="30" xlink:href=""
+ </g>
+ <g id="stretch-middle-square">
+ <use x="30" y="30" xlink:href=""
+ </g>
+ </defs>
+ <g class="fragment" id="repeat">
+ <use xlink:href=""
+ <use xlink:href=""
+ <use xlink:href=""
+ <use xlink:href=""
+ </g>
+ <g class="fragment" id="stretch">
+ <use xlink:href=""
+ <use xlink:href=""
+ <use xlink:href=""
+ <use xlink:href=""
+ </g>
+</svg>
Added: trunk/LayoutTests/fast/borders/resources/border-image.svg (0 => 185438)
--- trunk/LayoutTests/fast/borders/resources/border-image.svg (rev 0)
+++ trunk/LayoutTests/fast/borders/resources/border-image.svg 2015-06-10 23:50:33 UTC (rev 185438)
@@ -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=""
+ <use id="side" class="side" xlink:href=""
+ <use id="middle" class="middle" xlink:href=""
+ </defs>
+ <use x="0" y="0" xlink:href=""
+ <use x="60" y="0" xlink:href=""
+ <use x="0" y="60" xlink:href=""
+ <use x="60" y="60" xlink:href=""
+ <use x="30" y="0" xlink:href=""
+ <use x="30" y="60" xlink:href=""
+ <use x="0" y="30" xlink:href=""
+ <use x="60" y="30" xlink:href=""
+ <use x="30" y="30" xlink:href=""
+</svg>
Modified: trunk/Source/WebCore/ChangeLog (185437 => 185438)
--- trunk/Source/WebCore/ChangeLog 2015-06-10 23:43:20 UTC (rev 185437)
+++ trunk/Source/WebCore/ChangeLog 2015-06-10 23:50:33 UTC (rev 185438)
@@ -1,3 +1,29 @@
+2015-06-10 Said Abou-Hallawa <[email protected]>
+
+ 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 <[email protected]>
ASSERT_WITH_SECURITY_IMPLICATION in WebCore::DocumentOrderedMap::getElementById
Modified: trunk/Source/WebCore/rendering/style/NinePieceImage.cpp (185437 => 185438)
--- trunk/Source/WebCore/rendering/style/NinePieceImage.cpp 2015-06-10 23:43:20 UTC (rev 185437)
+++ trunk/Source/WebCore/rendering/style/NinePieceImage.cpp 2015-06-10 23:50:33 UTC (rev 185438)
@@ -81,10 +81,10 @@
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 @@
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();
Modified: trunk/Source/WebCore/rendering/style/NinePieceImage.h (185437 => 185438)
--- trunk/Source/WebCore/rendering/style/NinePieceImage.h 2015-06-10 23:43:20 UTC (rev 185437)
+++ trunk/Source/WebCore/rendering/style/NinePieceImage.h 2015-06-10 23:50:33 UTC (rev 185438)
@@ -199,7 +199,7 @@
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);
