Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 62be6efd7413ad1b2678dd44afd224d5b38432c5
https://github.com/WebKit/WebKit/commit/62be6efd7413ad1b2678dd44afd224d5b38432c5
Author: Ahmad Saleem <[email protected]>
Date: 2026-09-15 (Tue, 15 Sep 2026)
Changed paths:
R LayoutTests/animations/cross-fade-border-image-source-expected.txt
R LayoutTests/animations/cross-fade-border-image-source.html
R LayoutTests/animations/cross-fade-list-style-image-expected.txt
R LayoutTests/animations/cross-fade-list-style-image.html
R LayoutTests/animations/cross-fade-webkit-mask-box-image-expected.txt
R LayoutTests/animations/cross-fade-webkit-mask-box-image.html
M LayoutTests/fast/filter-image/filter-image-animation-expected.txt
M LayoutTests/fast/filter-image/filter-image-animation.html
M
LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/background-image-interpolation-expected.txt
M
LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-source-interpolation-expected.txt
M
LayoutTests/imported/w3c/web-platform-tests/css/css-lists/animations/list-style-image-interpolation-expected.txt
M
LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/mask-border-source-interpolation-expected.txt
M
LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-001-expected.txt
M
LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt
M LayoutTests/platform/ios/TestExpectations
M Source/WebCore/css/CSSProperties.json
M Source/WebCore/style/values/images/StyleImageOrNone.cpp
Log Message:
-----------
border-image-source (and other image properties) jump to the target value at
progress < 0.5 when the two images cannot be interpolated
https://bugs.webkit.org/show_bug.cgi?id=322797
rdar://problem/186626485
Reviewed by Sam Weinig and Antoine Quint.
border-image-source, mask-border-source, background-image, list-style-image and
mask-image are all "Animation type: discrete" per the CSS specifications:
- border-image-source:
https://drafts.csswg.org/css-backgrounds/#border-image-source
- background-image:
https://drafts.csswg.org/css-backgrounds/#background-image
- mask-border-source:
https://drafts.csswg.org/css-masking/#the-mask-border-source
- list-style-image: https://drafts.csswg.org/css-lists/#image-markers
- mask-image: https://drafts.csswg.org/css-masking/#the-mask-image
WebKit interpolated them instead. That path cross-faded the two images and, for
pairs that cannot be interpolated (image/gradient, gradient/gradient,
image/cross-fade()), returned the "to" image for every progress value, so the
"from" image was never shown below progress 0.5.
Make these properties discrete: give border-image-source, list-style-image and
mask-border-source the "discrete" animation type, and return false from
Blending<ImageOrNone>::canBlend() so background-image and mask-image hold each
fill layer discrete. The discrete machinery then holds "from" below 0.5 and
flips
to "to" at 0.5 for CSS/Web Animations and allow-discrete transitions, matching
other engines.
Making <image> animate discretely is spec-aligned today, but the ongoing CSSWG
discussion may move it to other direction:
- https://github.com/w3c/csswg-drafts/issues/578
- https://github.com/w3c/csswg-drafts/issues/3783
- https://github.com/w3c/csswg-drafts/issues/12075
The WebKit-only animations/cross-fade-* tests asserted the -webkit-cross-fade()
animation these properties no longer perform, so they are removed.
filter-image-animation.html is rewritten as a testharness.js test asserting the
discrete animation, dropping its iOS timeout skip.
* Source/WebCore/css/CSSProperties.json:
* Source/WebCore/style/values/images/StyleImageOrNone.cpp:
(WebCore::Style::Blending<ImageOrNone>::canBlend):
* LayoutTests/TestExpectations:
* LayoutTests/platform/ios/TestExpectations: Remove the
filter-image-animation.html timeout skip.
* LayoutTests/animations/cross-fade-border-image-source.html: Removed.
* LayoutTests/animations/cross-fade-border-image-source-expected.txt: Removed.
* LayoutTests/animations/cross-fade-list-style-image.html: Removed.
* LayoutTests/animations/cross-fade-list-style-image-expected.txt: Removed.
* LayoutTests/animations/cross-fade-webkit-mask-box-image.html: Removed.
* LayoutTests/animations/cross-fade-webkit-mask-box-image-expected.txt: Removed.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/background-image-interpolation-expected.txt:
Progressions.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-source-interpolation-expected.txt:
Progressions.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-lists/animations/list-style-image-interpolation-expected.txt:
Progressions.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/mask-border-source-interpolation-expected.txt:
Progressions.
*
LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-001-expected.txt:
Progressions.
*
LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:
Progressions.
* LayoutTests/fast/filter-image/filter-image-animation.html:
* LayoutTests/fast/filter-image/filter-image-animation-expected.txt:
Canonical link: https://commits.webkit.org/321154@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
