Skip to content
Permalink
Browse files
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
  • Loading branch information
fujii committed Dec 10, 2022
1 parent d4cdd5f commit 18a30951bbecb74a994af9793da2adcea20ce8fa
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 2 deletions.
@@ -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>
@@ -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>
@@ -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.

0 comments on commit 18a3095

Please sign in to comment.