[css-color-5] Add the none keyword to light-dark()#13712
Merged
Conversation
w3c#12513 (comment) This means that `light-dark(url(foo.png), none)` will be a valid value. The `none` keyword is equivalent to `linear-gradient(transparent)`, but is more intuitive. This also makes conditional checks in `@supports` more concise: ```css @supports (light-dark(none, none)) { } ``` In addition, `none` is also supported in `-webkit-cross-fade()`, See: https://github.com/web-platform-tests/wpt/blob/0efed9003fb6c920d404928776fc9a400bb78560/css/css-images/cross-fade-legacy-crash.html#L8
Contributor
Author
|
@svgeesus PTAL |
|
yisibl marked as non substantive for IPR from ash-nazg. |
Contributor
|
Thanks, but I am not going to merge this because it is better to add |
Member
|
We should, in fact, merge this one. The other one mixes in a separate idea that doesn't have a resolution (and almost certainly won't, as it has compat issues) |
Contributor
|
Yeah, I see from @LeaVerou that will not fly |
svgeesus
approved these changes
Mar 24, 2026
|
svgeesus marked as non substantive for IPR from ash-nazg. |
Contributor
Author
|
@svgeesus @tabatkins Thank you for the quick review. |
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Mar 26, 2026
Move light-dark-image.html from css-color to css-images and expand test coverage for the light-dark() image form per the CSS Color 5 spec [1]. The original test only covered background-image with url and none values plus basic invalid cases. New test coverage includes: - Support for none, See [2][3] - Gradient values (linear, radial, conic, repeating-linear) - Mixed image types (url + gradient, none + gradient) - Other image properties (list-style-image, border-image-source, content) - Serialization round-trip - Inheritance with color-scheme propagation - Dynamic color-scheme changes - Additional invalid cases (mixed color/image args, three args) [1]: https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-color-5/#light-dark [2]: w3c/csswg-drafts#12513 (comment) [3]: w3c/csswg-drafts#13712 Bug: 491829958 Change-Id: Iff688354156603c8b80efa80efd9d8ef25e00709
beckysiegel
pushed a commit
to chromium/chromium
that referenced
this pull request
Mar 26, 2026
Move light-dark-image.html from css-color to css-images and expand test coverage for the light-dark() image form per the CSS Color 5 spec [1]. The original test only covered background-image with url and none values plus basic invalid cases. New test coverage includes: - Support for none, See [2][3] - Gradient values (linear, radial, conic, repeating-linear) - Mixed image types (url + gradient, none + gradient) - Other image properties (list-style-image, border-image-source, content) - Serialization round-trip - Inheritance with color-scheme propagation - Dynamic color-scheme changes - Additional invalid cases (mixed color/image args, three args) [1]: https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-color-5/#light-dark [2]: w3c/csswg-drafts#12513 (comment) [3]: w3c/csswg-drafts#13712 Bug: 491829958 Change-Id: Iff688354156603c8b80efa80efd9d8ef25e00709 Reviewed-on: https://un5x4n0kwa1t164zhzvdp2b4bu49r4r40ry9xdr.julianrbryant.com/c/chromium/src/+/7686627 Commit-Queue: Jason Leo <cgqaq@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1605272}
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Mar 26, 2026
Move light-dark-image.html from css-color to css-images and expand test coverage for the light-dark() image form per the CSS Color 5 spec [1]. The original test only covered background-image with url and none values plus basic invalid cases. New test coverage includes: - Support for none, See [2][3] - Gradient values (linear, radial, conic, repeating-linear) - Mixed image types (url + gradient, none + gradient) - Other image properties (list-style-image, border-image-source, content) - Serialization round-trip - Inheritance with color-scheme propagation - Dynamic color-scheme changes - Additional invalid cases (mixed color/image args, three args) [1]: https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-color-5/#light-dark [2]: w3c/csswg-drafts#12513 (comment) [3]: w3c/csswg-drafts#13712 Bug: 491829958 Change-Id: Iff688354156603c8b80efa80efd9d8ef25e00709 Reviewed-on: https://un5x4n0kwa1t164zhzvdp2b4bu49r4r40ry9xdr.julianrbryant.com/c/chromium/src/+/7686627 Commit-Queue: Jason Leo <cgqaq@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1605272}
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Mar 26, 2026
Move light-dark-image.html from css-color to css-images and expand test coverage for the light-dark() image form per the CSS Color 5 spec [1]. The original test only covered background-image with url and none values plus basic invalid cases. New test coverage includes: - Support for none, See [2][3] - Gradient values (linear, radial, conic, repeating-linear) - Mixed image types (url + gradient, none + gradient) - Other image properties (list-style-image, border-image-source, content) - Serialization round-trip - Inheritance with color-scheme propagation - Dynamic color-scheme changes - Additional invalid cases (mixed color/image args, three args) [1]: https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-color-5/#light-dark [2]: w3c/csswg-drafts#12513 (comment) [3]: w3c/csswg-drafts#13712 Bug: 491829958 Change-Id: Iff688354156603c8b80efa80efd9d8ef25e00709 Reviewed-on: https://un5x4n0kwa1t164zhzvdp2b4bu49r4r40ry9xdr.julianrbryant.com/c/chromium/src/+/7686627 Commit-Queue: Jason Leo <cgqaq@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1605272}
lando-worker bot
pushed a commit
to mozilla-firefox/firefox
that referenced
this pull request
Apr 4, 2026
… for light-dark() images, a=testonly Automatic update from web-platform-tests [css-images] Add comprehensive WPT tests for light-dark() images Move light-dark-image.html from css-color to css-images and expand test coverage for the light-dark() image form per the CSS Color 5 spec [1]. The original test only covered background-image with url and none values plus basic invalid cases. New test coverage includes: - Support for none, See [2][3] - Gradient values (linear, radial, conic, repeating-linear) - Mixed image types (url + gradient, none + gradient) - Other image properties (list-style-image, border-image-source, content) - Serialization round-trip - Inheritance with color-scheme propagation - Dynamic color-scheme changes - Additional invalid cases (mixed color/image args, three args) [1]: https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-color-5/#light-dark [2]: w3c/csswg-drafts#12513 (comment) [3]: w3c/csswg-drafts#13712 Bug: 491829958 Change-Id: Iff688354156603c8b80efa80efd9d8ef25e00709 Reviewed-on: https://un5x4n0kwa1t164zhzvdp2b4bu49r4r40ry9xdr.julianrbryant.com/c/chromium/src/+/7686627 Commit-Queue: Jason Leo <cgqaq@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1605272} -- wpt-commits: 67a3616a7aebb50d2e514052aeacfe44e7032076 wpt-pr: 58744
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes: #12513 (comment)
This means that
light-dark(url(foo.png), none)will be a valid value. Thenonekeyword is equivalent tolinear-gradient(transparent), but is more intuitive.This also makes conditional checks in
@supportsmore concise:In addition,
noneis also supported in-webkit-cross-fade(), See: https://github.com/web-platform-tests/wpt/blob/0efed9003fb6c920d404928776fc9a400bb78560/css/css-images/cross-fade-legacy-crash.html#L8