length values in gradients should take effective zoom into account

https://bugs.webkit.org/show_bug.cgi?id=248927 Reviewed by Simon Fraser. If a gradient was using length values (i.e. 50px), it didn't work as expected with zoom property and page zoom. It should take the effective zoom into account. * LayoutTests/fast/gradients/length-and-zoom-expected.html: Added. * LayoutTests/fast/gradients/length-and-zoom.html: Added. * Source/WebCore/rendering/style/StyleGradientImage.cpp: (WebCore::StyleGradientImage::computeStops const): (WebCore::positionFromValue): Canonical link: https://commits.webkit.org/257659@main
WebKit · Dec 10, 2022 · 18a30951bbecb74a994af9793da2adcea20ce8fa · 18a3095
1 parent d4cdd5f
commit 18a30951bbecb74a994af9793da2adcea20ce8fa
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/LayoutTests/fast/gradients/length-and-zoom-expected.html b/LayoutTests/fast/gradients/length-and-zoom-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>
+    div {
+        display: inline-block;
+        zoom: 2;
+        width: 100px;
+        height: 100px;
+    }
+    #x {
+        background-image: linear-gradient(blue 50%, green 50%);
+    }
+    #y {
+        background-image: radial-gradient(circle at center, blue 50%, green 50%);
+    }
+</style>
+You should see two squares. The first has a blue upper half part and a green bottom half part. The second has a blue circle at the center of a green box.<br>
+
+<div id=x></div>
+<div id=y></div>
diff --git a/LayoutTests/fast/gradients/length-and-zoom.html b/LayoutTests/fast/gradients/length-and-zoom.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>
+    div {
+        display: inline-block;
+        zoom: 2;
+        width: 100px;
+        height: 100px;
+    }
+    #x {
+        background-image: linear-gradient(blue 50px, green 50px);
+    }
+    #y {
+        background-image: radial-gradient(circle at 50px 50px, blue 50%, green 50%);
+    }
+</style>
+You should see two squares. The first has a blue upper half part and a green bottom half part. The second has a blue circle at the center of a green box.<br>
+
+<div id=x></div>
+<div id=y></div>
diff --git a/Source/WebCore/rendering/style/StyleGradientImage.cpp b/Source/WebCore/rendering/style/StyleGradientImage.cpp
@@ -454,7 +454,7 @@ GradientColorStops StyleGradientImage::computeStops(GradientAdapter& gradientAda
             else if (positionValue.isLength() || positionValue.isViewportPercentageLength() || positionValue.isCalculatedPercentageWithLength()) {
                 float length;
                 if (positionValue.isLength())
-                    length = positionValue.computeLength<float>(conversionData);
+                    length = positionValue.computeLength<float>(conversionData) * style.effectiveZoom();
                 else {
                     Ref<CalculationValue> calculationValue { positionValue.cssCalcValue()->createCalculationValue(conversionData) };
                     length = calculationValue->evaluate(gradientLength);
@@ -718,7 +718,7 @@ static float positionFromValue(const CSSPrimitiveValue& initialValue, const CSST
         break;
     }
 
-    return origin + sign * value->computeLength<float>(conversionData);
+    return origin + sign * value->computeLength<float>(conversionData) * conversionData.style()->effectiveZoom();
 }
 
 // Resolve points/radii to front end values.