Skip to content

Content with a grayscale filter and mix-blend-mode don't get mix-blend-mode applied. #47216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jun 30, 2025
Merged

Content with a grayscale filter and mix-blend-mode don't get mix-blend-mode applied. #47216

merged 1 commit into from
Jun 30, 2025
+55 −4

Conversation

mattwoodrow
Copy link
Contributor

@mattwoodrow mattwoodrow commented Jun 26, 2025 •
edited by webkit-early-warning-system
Loading

1e13b3d

Content with a grayscale filter and mix-blend-mode don't get mix-blend-mode applied.
https://bugs.webkit.org/show_bug.cgi?id=293903
<rdar://152460888>

Reviewed by Simon Fraser.

Some filter types (including grayscale) are implemented by pushing a
transparency layer, rather than diverting to a temporary context.

In those cases, the code attempting to setup a transparency layer for opacity
(and mix-blend-mode) ends up doing so too late, and applies the mix-blend-mode
inside the filter (where it has nothing to blend with).

Move this up to before the filter is setup, so that the ordering is always
correct.

* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/filter-with-mix-blend-mode-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/filter-with-mix-blend-mode.html: Added.
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::paintLayerContents):

Canonical link: https://commits.webkit.org/296827@main

e6f7d6b

Misc iOS, visionOS, tvOS & watchOS macOS Linux Windows
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe ✅ 🛠 win
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ✅ 🧪 wpe-wk2 ⏳ 🧪 win-tests
✅ 🧪 webkitperl ✅ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🧪 api-wpe
✅ 🧪 ios-wk2-wpt ✅ 🧪 mac-wk1 ✅ 🛠 wpe-cairo
✅ 🧪 api-ios ✅ 🧪 mac-wk2 ✅ 🛠 gtk
✅ 🛠 vision ✅ 🧪 mac-AS-debug-wk2 ✅ 🧪 gtk-wk2
✅ 🛠 vision-sim ✅ 🧪 mac-wk2-stress ✅ 🧪 api-gtk
✅ 🛠 🧪 merge ✅ 🧪 vision-wk2 ✅ 🧪 mac-intel-wk2 ✅ 🛠 playstation
✅ 🛠 tv ✅ 🛠 mac-safer-cpp
✅ 🛠 tv-sim
✅ 🛠 watch
✅ 🛠 watch-sim

@mattwoodrow mattwoodrow self-assigned this Jun 26, 2025
@mattwoodrow mattwoodrow added the Images For bugs in image handling. label Jun 26, 2025
@webkit-early-warning-system
Copy link
Collaborator

webkit-early-warning-system commented Jun 26, 2025 •
edited
Loading

EWS run on previous version of this PR (hash 81860b4)

Misc iOS, visionOS, tvOS & watchOS macOS Linux Windows
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe ✅ 🛠 win
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ✅ 🧪 wpe-wk2 ⏳ 🧪 win-tests
✅ 🧪 webkitperl ✅ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🧪 api-wpe
✅ 🧪 ios-wk2-wpt ✅ 🧪 mac-wk1 ✅ 🛠 wpe-cairo
✅ 🧪 api-ios ✅ 🧪 mac-wk2 ✅ 🛠 gtk
✅ 🛠 vision ✅ 🧪 mac-AS-debug-wk2 ✅ 🧪 gtk-wk2
✅ 🛠 vision-sim ✅ 🧪 mac-wk2-stress ✅ 🧪 api-gtk
✅ 🧪 vision-wk2 ✅ 🧪 mac-intel-wk2 ✅ 🛠 playstation
✅ 🛠 tv ✅ 🛠 mac-safer-cpp
✅ 🛠 tv-sim
✅ 🛠 watch
✅ 🛠 watch-sim

@mattwoodrow mattwoodrow requested a review from shallawa June 26, 2025 03:07
smfr
smfr approved these changes Jun 26, 2025
View reviewed changes
LayoutTests/css3/filters/filter-with-mix-blend-mode-expected.html Outdated
@@ -0,0 +1,26 @@
<!DOCTYPE html>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be good to have this as a WPT.

@mattwoodrow mattwoodrow force-pushed the eng/filter-and-mix-blend-mode branch from 81860b4 to e6f7d6b Compare June 27, 2025 02:33
@webkit-early-warning-system
Copy link
Collaborator

webkit-early-warning-system commented Jun 27, 2025 •
edited
Loading

EWS run on current version of this PR (hash e6f7d6b)

Misc iOS, visionOS, tvOS & watchOS macOS Linux Windows
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe ✅ 🛠 win
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ✅ 🧪 wpe-wk2 ⏳ 🧪 win-tests
✅ 🧪 webkitperl ✅ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🧪 api-wpe
✅ 🧪 ios-wk2-wpt ✅ 🧪 mac-wk1 ✅ 🛠 wpe-cairo
✅ 🧪 api-ios ✅ 🧪 mac-wk2 ✅ 🛠 gtk
✅ 🛠 vision ✅ 🧪 mac-AS-debug-wk2 ✅ 🧪 gtk-wk2
✅ 🛠 vision-sim ✅ 🧪 mac-wk2-stress ✅ 🧪 api-gtk
✅ 🛠 🧪 merge ✅ 🧪 vision-wk2 ✅ 🧪 mac-intel-wk2 ✅ 🛠 playstation
✅ 🛠 tv ✅ 🛠 mac-safer-cpp
✅ 🛠 tv-sim
✅ 🛠 watch
✅ 🛠 watch-sim

@mattwoodrow mattwoodrow added merge-queue Applied to send a pull request to merge-queue and removed merge-queue Applied to send a pull request to merge-queue labels Jun 29, 2025
@mattwoodrow
Content with a grayscale filter and mix-blend-mode don't get mix-blen…
1e13b3d 
…d-mode applied.

https://bugs.webkit.org/show_bug.cgi?id=293903
<rdar://152460888>

Reviewed by Simon Fraser.

Some filter types (including grayscale) are implemented by pushing a
transparency layer, rather than diverting to a temporary context.

In those cases, the code attempting to setup a transparency layer for opacity
(and mix-blend-mode) ends up doing so too late, and applies the mix-blend-mode
inside the filter (where it has nothing to blend with).

Move this up to before the filter is setup, so that the ordering is always
correct.

* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/filter-with-mix-blend-mode-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/filter-with-mix-blend-mode.html: Added.
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::paintLayerContents):

Canonical link: https://commits.webkit.org/296827@main
@webkit-commit-queue webkit-commit-queue force-pushed the eng/filter-and-mix-blend-mode branch from e6f7d6b to 1e13b3d Compare June 30, 2025 21:15
@webkit-commit-queue
Copy link
Collaborator

Committed 296827@main (1e13b3d): https://commits.webkit.org/296827@main

Reviewed commits have been landed. Closing PR #47216 and removing active labels.

@webkit-commit-queue webkit-commit-queue merged commit 1e13b3d into WebKit:main Jun 30, 2025
@webkit-commit-queue webkit-commit-queue removed the merge-queue Applied to send a pull request to merge-queue label Jun 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@smfr smfr smfr approved these changes

@shallawa shallawa Awaiting requested review from shallawa

Assignees

@mattwoodrow mattwoodrow

Labels
Images For bugs in image handling.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@mattwoodrow @webkit-early-warning-system @webkit-commit-queue @smfr