Linear gradients: clamp stops at same position instead of replacing them

Ahmad-S792 · Ahmad Saleem · commit ab99903326f1 · 2026-02-04T17:04:16.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=306400 rdar://169063497 Reviewed by Simon Fraser. When all color stops in a linear gradient are at the same position, they should create a hard color transition at that clamped position, preserving all stop colors to maintain proper color interpolation. Previously, LinearGradientAdapter::normalizeStopsAndEndpointsOutsideRange would clamp all stops to offset 1, but this didn't properly handle cases where stops were at positions outside the [0, 1] range. The fix clamps the offset to the [0, 1] range while preserving all color stops at that position, allowing the gradient renderer to correctly handle the hard transition with proper color interpolation when needed. NOTE - the test name includes `radial` but in actual, it is for `linear-gradient`. * Source/WebCore/style/values/images/StyleGradient.cpp: (WebCore::Style::LinearGradientAdapter::normalizeStopsAndEndpointsOutsideRange): * LayoutTests/TestExpectations: Progressions Canonical link: https://commits.webkit.org/306823@main
diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
@@ -5360,8 +5360,6 @@ webkit.org/b/214456 imported/w3c/web-platform-tests/css/css-images/image-orienta
 webkit.org/b/214456 imported/w3c/web-platform-tests/css/css-images/image-orientation/svg-image-orientation.html [ ImageOnlyFailure ]
 webkit.org/b/214456 imported/w3c/web-platform-tests/css/css-images/image-orientation/svg-image-orientation-none.html [ ImageOnlyFailure ]
 webkit.org/b/214456 imported/w3c/web-platform-tests/css/css-images/infinite-radial-gradient-refcrash.html [ ImageOnlyFailure ]
-webkit.org/b/214456 imported/w3c/web-platform-tests/css/css-images/normalization-linear.html [ ImageOnlyFailure ]
-webkit.org/b/214456 imported/w3c/web-platform-tests/css/css-images/normalization-radial.html [ ImageOnlyFailure ]
 webkit.org/b/214456 imported/w3c/web-platform-tests/css/css-images/out-of-range-color-stop-conic.html [ ImageOnlyFailure ]
 
 # Crashes
diff --git a/Source/WebCore/style/values/images/StyleGradient.cpp b/Source/WebCore/style/values/images/StyleGradient.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 Apple Inc. All rights reserved.
+ * Copyright (C) 2022-2026 Apple Inc. All rights reserved.
  * Copyright (C) 2024-2025 Samuel Weinig <sam@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
@@ -205,9 +205,11 @@ class LinearGradientAdapter {
             m_data.point0 = { p0.x() + firstOffset * (p1.x() - p0.x()), p0.y() + firstOffset * (p1.y() - p0.y()) };
             m_data.point1 = { p1.x() + (lastOffset - 1) * (p1.x() - p0.x()), p1.y() + (lastOffset - 1) * (p1.y() - p0.y()) };
         } else {
-            // There's a single position that is outside the scale, clamp the positions to 1.
+            // All stops at same position - clamp offsets but keep all colors.
+            // This creates a hard color stop at the clamped position.
+            float clampedOffset = std::clamp(firstOffset, 0.0f, 1.0f);
             for (auto& stop : stops)
-                stop.offset = 1;
+                stop.offset = clampedOffset;
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`/*`
`2`		`- * Copyright (C) 2022 Apple Inc. All rights reserved.`
	`2`	`+ * Copyright (C) 2022-2026 Apple Inc. All rights reserved.`
`3`	`3`	`* Copyright (C) 2024-2025 Samuel Weinig <[email protected]>`
`4`	`4`	`*`
`5`	`5`	`* Redistribution and use in source and binary forms, with or without`
`@@ -205,9 +205,11 @@ class LinearGradientAdapter {`
`205`	`205`	`m_data.point0 = { p0.x() + firstOffset * (p1.x() - p0.x()), p0.y() + firstOffset * (p1.y() - p0.y()) };`
`206`	`206`	`m_data.point1 = { p1.x() + (lastOffset - 1) * (p1.x() - p0.x()), p1.y() + (lastOffset - 1) * (p1.y() - p0.y()) };`
`207`	`207`	`} else {`
`208`		`- // There's a single position that is outside the scale, clamp the positions to 1.`
	`208`	`+ // All stops at same position - clamp offsets but keep all colors.`
	`209`	`+ // This creates a hard color stop at the clamped position.`
	`210`	`+ float clampedOffset = std::clamp(firstOffset, 0.0f, 1.0f);`
`209`	`211`	`for (auto& stop : stops)`
`210`		`- stop.offset = 1;`
	`212`	`+ stop.offset = clampedOffset;`
`211`	`213`	`}`
`212`	`214`	`}`
`213`	`215`