Diff
Modified: releases/WebKitGTK/webkit-2.22/LayoutTests/ChangeLog (237509 => 237510)
--- releases/WebKitGTK/webkit-2.22/LayoutTests/ChangeLog 2018-10-28 13:42:48 UTC (rev 237509)
+++ releases/WebKitGTK/webkit-2.22/LayoutTests/ChangeLog 2018-10-28 13:42:58 UTC (rev 237510)
@@ -1,3 +1,15 @@
+2018-10-15 Yoshiaki Jitsukawa <[email protected]>
+
+ [Cairo] Incorrect rendering for 135-deg skews
+ https://bugs.webkit.org/show_bug.cgi?id=190513
+
+ Reviewed by Žan Doberšek.
+
+ * fast/transforms/skew-x-135deg-with-gradient-expected.html: Added.
+ * fast/transforms/skew-x-135deg-with-gradient.html: Added.
+ * fast/transforms/skew-y-135deg-with-gradient-expected.html: Added.
+ * fast/transforms/skew-y-135deg-with-gradient.html: Added.
+
2018-10-09 Said Abou-Hallawa <[email protected]>
REGRESSION(r234620): SVGLangSpace::svgAttributeChanged() should invalidate the renderer of the SVGGeometryElement descendant only
Added: releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-x-135deg-with-gradient-expected.html (0 => 237510)
--- releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-x-135deg-with-gradient-expected.html (rev 0)
+++ releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-x-135deg-with-gradient-expected.html 2018-10-28 13:42:58 UTC (rev 237510)
@@ -0,0 +1,29 @@
+<html>
+<head>
+<style>
+#content {
+ margin:100px;
+ width:110px;
+ height:110px;
+ background-color:skyblue;
+ transform:skew(135deg, 0deg);
+ border:1px solid black;
+}
+
+#border {
+ width:100px;
+ height:100px;
+ position:absolute;
+ left: -5px;
+ top: -5px;
+ border:10px solid black;
+}
+
+</style>
+</head>
+In the example below you should see a skewed block filled with skyblue.
+
+<div id="content">
+ <div id="border"></div>
+</div>
+</html>
Added: releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-x-135deg-with-gradient.html (0 => 237510)
--- releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-x-135deg-with-gradient.html (rev 0)
+++ releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-x-135deg-with-gradient.html 2018-10-28 13:42:58 UTC (rev 237510)
@@ -0,0 +1,29 @@
+<html>
+<head>
+<style>
+#content {
+ margin:100px;
+ width:110px;
+ height:110px;
+ background:linear-gradient(skyblue,skyblue);
+ transform:skew(135deg, 0deg);
+ border:1px solid black;
+}
+
+#border {
+ width:100px;
+ height:100px;
+ position:absolute;
+ left: -5px;
+ top: -5px;
+ border:10px solid black;
+}
+
+</style>
+</head>
+In the example below you should see a skewed block filled with skyblue.
+
+<div id="content">
+ <div id="border"></div>
+</div>
+</html>
Added: releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-y-135deg-with-gradient-expected.html (0 => 237510)
--- releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-y-135deg-with-gradient-expected.html (rev 0)
+++ releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-y-135deg-with-gradient-expected.html 2018-10-28 13:42:58 UTC (rev 237510)
@@ -0,0 +1,29 @@
+<html>
+<head>
+<style>
+#content {
+ margin:100px;
+ width:110px;
+ height:110px;
+ background-color:skyblue;
+ transform:skew(0deg, 135deg);
+ border:1px solid black;
+}
+
+#border {
+ width:100px;
+ height:100px;
+ position:absolute;
+ left: -5px;
+ top: -5px;
+ border:10px solid black;
+}
+
+</style>
+</head>
+In the example below you should see a skewed block filled with skyblue.
+
+<div id="content">
+ <div id="border"></div>
+</div>
+</html>
Added: releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-y-135deg-with-gradient.html (0 => 237510)
--- releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-y-135deg-with-gradient.html (rev 0)
+++ releases/WebKitGTK/webkit-2.22/LayoutTests/fast/transforms/skew-y-135deg-with-gradient.html 2018-10-28 13:42:58 UTC (rev 237510)
@@ -0,0 +1,29 @@
+<html>
+<head>
+<style>
+#content {
+ margin:100px;
+ width:110px;
+ height:110px;
+ background:linear-gradient(skyblue,skyblue);
+ transform:skew(0deg, 135deg);
+ border:1px solid black;
+}
+
+#border {
+ width:100px;
+ height:100px;
+ position:absolute;
+ left: -5px;
+ top: -5px;
+ border:10px solid black;
+}
+
+</style>
+</head>
+In the example below you should see a skewed block filled with skyblue.
+
+<div id="content">
+ <div id="border"></div>
+</div>
+</html>
Modified: releases/WebKitGTK/webkit-2.22/Source/WebCore/ChangeLog (237509 => 237510)
--- releases/WebKitGTK/webkit-2.22/Source/WebCore/ChangeLog 2018-10-28 13:42:48 UTC (rev 237509)
+++ releases/WebKitGTK/webkit-2.22/Source/WebCore/ChangeLog 2018-10-28 13:42:58 UTC (rev 237510)
@@ -1,3 +1,20 @@
+2018-10-15 Yoshiaki Jitsukawa <[email protected]>
+
+ [Cairo] Incorrect rendering for 135-deg skews
+ https://bugs.webkit.org/show_bug.cgi?id=190513
+
+ Compensation value to zero the the translation components
+ of the transformation matrix is incorrect if the matrix
+ has a shear factor.
+
+ Reviewed by Žan Doberšek.
+
+ Tests: fast/transforms/skew-x-135deg-with-gradient.html
+ fast/transforms/skew-y-135deg-with-gradient.html
+
+ * platform/graphics/cairo/CairoUtilities.cpp:
+ (WebCore::drawPatternToCairoContext):
+
2018-10-09 Said Abou-Hallawa <[email protected]>
REGRESSION(r234620): SVGLangSpace::svgAttributeChanged() should invalidate the renderer of the SVGGeometryElement descendant only
Modified: releases/WebKitGTK/webkit-2.22/Source/WebCore/platform/graphics/cairo/CairoUtilities.cpp (237509 => 237510)
--- releases/WebKitGTK/webkit-2.22/Source/WebCore/platform/graphics/cairo/CairoUtilities.cpp 2018-10-28 13:42:48 UTC (rev 237509)
+++ releases/WebKitGTK/webkit-2.22/Source/WebCore/platform/graphics/cairo/CairoUtilities.cpp 2018-10-28 13:42:58 UTC (rev 237510)
@@ -232,21 +232,20 @@
// user space coordinates to pattern coordinates). The overflow happens only in the translation components of the matrices.
// To avoid the problem in the transformation matrix what we do is remove the translation components of the transformation matrix
- // and perform the translation by moving the destination rectangle instead. For this, we get its translation components (which are in
- // device coordinates) and divide them by the scale factor to take them to user space coordinates. Then we move the transformation
- // matrix by the opposite of that amount (which will zero the translation components of the transformation matrix), and move
- // the destination rectangle by the same amount. We also need to apply the same translation to the pattern matrix, so we get the
- // same pattern coordinates for the new destination rectangle.
+ // and perform the translation by moving the destination rectangle instead. For this, we calculate such a translation amount (dx, dy)
+ // that its opposite translate (-dx, -dy) will zero the translation components of the transformation matrix. We move the current
+ // transformation matrix by (-dx, -dy) and move the destination rectangle by (dx, dy). We also need to apply the same translation to
+ // the pattern matrix, so we get the same pattern coordinates for the new destination rectangle. (dx, dy) is caclucated by transforming
+ // the current translation components by the inverse matrix of the current transformation matrix.
cairo_matrix_t ctm;
cairo_get_matrix(cr, &ctm);
double dx = 0, dy = 0;
cairo_matrix_transform_point(&ctm, &dx, &dy);
- double xScale = 1, yScale = 1;
- cairo_matrix_transform_distance(&ctm, &xScale, &yScale);
+ cairo_matrix_t inv = ctm;
+ if (cairo_matrix_invert(&inv) == CAIRO_STATUS_SUCCESS)
+ cairo_matrix_transform_distance(&inv, &dx, &dy);
- dx = dx / xScale;
- dy = dy / yScale;
cairo_translate(cr, -dx, -dy);
FloatRect adjustedDestRect(destRect);
adjustedDestRect.move(dx, dy);
