Skip to content
Permalink
Browse files
Computed value CSS gradients need to serialize colors in their comput…
…ed form

https://bugs.webkit.org/show_bug.cgi?id=246927

Reviewed by Darin Adler.

Converts StyleGradientImage to store color stop colors as StyleColors rather
than keeping the primitive values. This is the intended model of the Style
classes (storing Style types rather than CSS types) and is now possible that
the spec requires that the computed value not maintain the specified values
(e.g. we use `rgb(255, 0, 0)` and not `red` if `red` was specified).

* LayoutTests/fast/gradients/css3-gradient-parsing-expected.txt:
* LayoutTests/fast/gradients/css3-gradient-parsing.html:
* LayoutTests/fast/gradients/unprefixed-gradient-parsing-expected.txt:
* LayoutTests/fast/gradients/unprefixed-gradient-parsing.html:
Update tests to check both specified and computed forms.

* LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/background-image-interpolation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-source-interpolation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-image-computed.sub-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-image-source-computed.sub-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-images/parsing/gradient-interpolation-method-computed.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-lists/animations/list-style-image-interpolation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-lists/parsing/list-style-image-computed.sub-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/mask-image-interpolation-expected.txt:
Update results for new serialization behavior,.

* LayoutTests/imported/w3c/web-platform-tests/css/css-images/parsing/gradient-interpolation-method-computed.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties.html:
Import new version of the tests that checks the new computed form.

* Source/WebCore/css/CSSGradientValue.cpp:
(WebCore::computeStyleGradientImageStopColor):
(WebCore::CSSGradientValue::computeStops const):
Convert to StyleImage.

* Source/WebCore/css/StyleColor.cpp:
(WebCore::StyleColor::resolveColorWithoutCurrentColor const): Deleted.
* Source/WebCore/css/StyleColor.h:
Remove unused (and dangerous if used wrong) function.

* Source/WebCore/html/HTMLInputElement.cpp:
(WebCore::autoFillStrongPasswordMaskImage):
Update for simplified StyleGradientImage::Stop.

* Source/WebCore/rendering/style/StyleGradientImage.cpp:
(WebCore::operator==):
(WebCore::stopsAreCacheable):
(WebCore::resolveColorStopColor):
(WebCore::StyleGradientImage::StyleGradientImage):
(WebCore::computedStyleValueForColorStopColor):
(WebCore::StyleGradientImage::computedStyleValue const):
(WebCore::StyleGradientImage::image const):
(WebCore::StyleGradientImage::knownToBeOpaque const):
(WebCore::StyleGradientImage::computeStops const):
(WebCore::StyleGradientImage::hasColorDerivedFromElement const): Deleted.
(WebCore::StyleGradientImage::isCacheable const): Deleted.
* Source/WebCore/rendering/style/StyleGradientImage.h:
Rathen than storing a CSSPrimitiveValue for the stop color, we can use
a StyleColor and remove the extra Color member entirely. Now that we
don't have the CSSPrimitiveValue, we need to compute the CSS value for
the color stops when creating a computed value. This happens to give
us the correct new behavior of having them fully resolved.

* Source/WebCore/style/StyleBuilderState.h:
Remove function definition with no body.

Canonical link: https://commits.webkit.org/256073@main
  • Loading branch information
weinig authored and Sam Weinig committed Oct 27, 2022
1 parent f8166f5 commit 6c434b5464a00be355e52531b1d20d2637e2b295
Show file tree
Hide file tree
Showing 28 changed files with 664 additions and 2,193 deletions.
@@ -6,7 +6,7 @@ Prefixed
PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image") is "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)"
PASS testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image") is "-webkit-cross-fade(-webkit-cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), url(\"dummy://example.png\"), 0.5)"
PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image") is "-webkit-cross-fade(url(\"dummy://c.png\"), -webkit-cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), 0.5)"
PASS testCrossfade("background-image: -webkit-cross-fade(-webkit-linear-gradient(black, white), url(dummy://example.png), 10%)", "background-image") is "-webkit-cross-fade(-webkit-linear-gradient(top, black, white), url(\"dummy://example.png\"), 0.1)"
PASS testCrossfade("background-image: -webkit-cross-fade(-webkit-linear-gradient(black, white), url(dummy://example.png), 10%)", "background-image") is "-webkit-cross-fade(-webkit-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255)), url(\"dummy://example.png\"), 0.1)"
PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image") is "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)"
PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)", "background-image") is "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)"
PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 5.0)", "background-image") is "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)"
@@ -29,7 +29,7 @@
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image")', "-webkit-cross-fade(-webkit-cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
"-webkit-cross-fade(url(\"dummy://c.png\"), -webkit-cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(-webkit-linear-gradient(black, white), url(dummy://example.png), 10%)", "background-image")', "-webkit-cross-fade(-webkit-linear-gradient(top, black, white), url(\"dummy://example.png\"), 0.1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(-webkit-linear-gradient(black, white), url(dummy://example.png), 10%)", "background-image")', "-webkit-cross-fade(-webkit-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255)), url(\"dummy://example.png\"), 0.1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");

@@ -5,7 +5,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE

PASS -webkit-border-horizontal-spacing, value: "20px"
PASS -webkit-border-vertical-spacing, value: "20px"
PASS -webkit-box-reflect, value: "below 20px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(white)) 0 fill / auto / 0 stretch"
PASS -webkit-box-reflect, value: "below 20px -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgb(255, 255, 255))) 0 fill / auto / 0 stretch"
PASS -webkit-box-shadow, value: "rgb(255, 0, 0) 20px 20px 20px 20px"
PASS -webkit-column-rule-width, value: "20px"
PASS -webkit-perspective-origin, value: "20px 20px"
@@ -47,7 +47,7 @@
var testData = [
['-webkit-border-horizontal-spacing'],
['-webkit-border-vertical-spacing'],
['-webkit-box-reflect', 'below 20px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white))'],
['-webkit-box-reflect', 'below 20px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(255, 255, 255)))'],
['-webkit-box-shadow', '20px 20px 20px 20px red'],
['-webkit-column-rule-width', '20px'],
['-webkit-perspective-origin', '20px 20px'],

0 comments on commit 6c434b5

Please sign in to comment.