Angled gradient backgrounds in body render vertically when body heigh…

…t is 0 https://bugs.webkit.org/show_bug.cgi?id=177232 <rdar://problem/34548230>. Patch by Zamiul Haque <zhaque@apple.com> on 2018-09-28 Reviewed by Tim Horton. Source/WebCore: Specifically, gradients displayed at an angle (ie. 45 degrees) are rendered as if they are vertical when the body tag containing the gradient has a height of 0. Other browsers do not render under these circumstances, so WebKit was modified to follow in suit. The problem was due to layout sizes for fill tiles being calculated with a minimum height of 1px. A simple change of the minimum height and width to 0px was enough to bring about the desired behavior. Tests: angled-background-repeating-gradient-rendering-vertical.html * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateFillTileSize const): LayoutTests: Added tests to make sure that angled background gradients inside of a body tag of height 0 render as empty white screens. * angled-background-repeating-gradient-rendering-vertical.html: Added. * angled-background-repeating-gradient-rendering-vertical-expected.html: Added. Canonical link: https://commits.webkit.org/205066@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236636 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Sep 29, 2018 · 98d33c360020721a5445bb369e691665c0b302a7 · 98d33c3
1 parent 7853534
commit 98d33c360020721a5445bb369e691665c0b302a7
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 4 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,17 @@
+2018-09-28  Zamiul Haque  <zhaque@apple.com>
+
+        Angled gradient backgrounds in body render vertically when body height is 0
+        https://bugs.webkit.org/show_bug.cgi?id=177232
+        <rdar://problem/34548230>.
+
+        Reviewed by Tim Horton.
+
+        Added tests to make sure that angled background gradients inside of a 
+        body tag of height 0 render as empty white screens.
+
+        * angled-background-repeating-gradient-rendering-vertical.html: Added.
+        * angled-background-repeating-gradient-rendering-vertical-expected.html: Added.
+
 2018-09-28  Chris Dumez  <cdumez@apple.com>
 
         The return value of an OnBeforeUnloadEventHandler should always be coerced into a DOMString

diff --git a/...ts/fast/backgrounds/angled-background-repeating-gradient-rendering-vertical-expected.html b/...ts/fast/backgrounds/angled-background-repeating-gradient-rendering-vertical-expected.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+<body></body>
+</html>
diff --git a/LayoutTests/fast/backgrounds/angled-background-repeating-gradient-rendering-vertical.html b/LayoutTests/fast/backgrounds/angled-background-repeating-gradient-rendering-vertical.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+    margin: 0;
+    background: repeating-linear-gradient(45deg, white, white 100px, black 100px, black 200px);
+}
+</style>
+</head>
+<body></body>
+</html>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,23 @@
+2018-09-28  Zamiul Haque  <zhaque@apple.com>
+
+        Angled gradient backgrounds in body render vertically when body height is 0
+        https://bugs.webkit.org/show_bug.cgi?id=177232
+        <rdar://problem/34548230>.
+
+        Reviewed by Tim Horton.
+
+        Specifically, gradients displayed at an angle (ie. 45 degrees) are rendered
+        as if they are vertical when the body tag containing the gradient
+        has a height of 0. Other browsers do not render under these circumstances,
+        so WebKit was modified to follow in suit. The problem was due to layout sizes for
+        fill tiles being calculated with a minimum height of 1px. A simple change of the
+        minimum height and width to 0px was enough to bring about the desired behavior.
+
+        Tests: angled-background-repeating-gradient-rendering-vertical.html
+
+        * rendering/RenderBoxModelObject.cpp:
+        (WebCore::RenderBoxModelObject::calculateFillTileSize const):
+
 2018-09-28  Wenson Hsieh  <wenson_hsieh@apple.com>
 
         No DOM API to instantiate an attachment for an img element

diff --git a/Source/WebCore/rendering/RenderBoxModelObject.cpp b/Source/WebCore/rendering/RenderBoxModelObject.cpp
@@ -1151,14 +1151,17 @@ LayoutSize RenderBoxModelObject::calculateFillTileSize(const FillLayer& fillLaye
         float horizontalScaleFactor = localImageIntrinsicSize.width() ? (localPositioningAreaSize.width() / localImageIntrinsicSize.width()) : 1;
         float verticalScaleFactor = localImageIntrinsicSize.height() ? (localPositioningAreaSize.height() / localImageIntrinsicSize.height()) : 1;
         float scaleFactor = type == FillSizeType::Contain ? std::min(horizontalScaleFactor, verticalScaleFactor) : std::max(horizontalScaleFactor, verticalScaleFactor);
-        float deviceScaleFactor = document().deviceScaleFactor();
-        return LayoutSize(std::max<LayoutUnit>(1 / deviceScaleFactor, localImageIntrinsicSize.width() * scaleFactor),
-            std::max<LayoutUnit>(1 / deviceScaleFactor, localImageIntrinsicSize.height() * scaleFactor));
+        float singleScaledPixel = 1.0 / document().deviceScaleFactor();
+
+        if (localImageIntrinsicSize.isEmpty())
+            return { };
+
+        return LayoutSize(localImageIntrinsicSize.scaled(scaleFactor).expandedTo({ singleScaledPixel, singleScaledPixel }));
     }
     }
 
     ASSERT_NOT_REACHED();
-    return LayoutSize();
+    return { };
 }
 
 static void pixelSnapBackgroundImageGeometryForPainting(LayoutRect& destinationRect, LayoutSize& tileSize, LayoutSize& phase, LayoutSize& space, float scaleFactor)