[css-images] Computed gradient colors · Issue #4042 · w3c/csswg-drafts · GitHub
Skip to content
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

[css-images] Computed gradient colors #4042

Closed
ewilligers opened this issue Jun 19, 2019 · 6 comments
Closed

[css-images] Computed gradient colors #4042

ewilligers opened this issue Jun 19, 2019 · 6 comments
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-images-3 Current Work

Comments

@ewilligers
Copy link
Contributor

Suppose an author sets various <image> properties to gradients with color keywords, e.g. linear-gradient(45deg, blue, orange) . Should getComputedStyle() results show gradients with color keywords or rgb functions?

Firefox gives rgb functions. Blink, Edge 18 and Safari give color keywords.
https://jsfiddle.net/ericwilligers/qzp4wy03/

Should we change the "Computed value" text for shape-outside

..., the <image> with its URI made absolute, otherwise as specified.

=>

..., the <image> with its URI made absolute and colors computed, otherwise as specified.

background-image and border-image-source would need a similar change if they referenced the CSS Images 3 definition of <image>, but they currently don't.

No change would be needed for list-style-image

computed value of the <image>, or none
@ewilligers ewilligers added the css-images-3 Current Work label Jun 19, 2019
@AmeliaBR
Copy link
Contributor

I would expect the color format to be serialized in the same form as <color> types in other properties.

Rather than define this every time a property includes an <image> type, it would be nice if we could define the computed/serialized form for a gradient function itself. And then use the "computed value of the <image>" wording for properties.

@tabatkins
Copy link
Member

Yeah, we just need a definition for "computed <image>" that can be reused, it's silly to copy boilerplate like this that gets out of sync.

@ewilligers
Copy link
Contributor Author

This also affects lengths (radial-gradient, conic-gradient). Firefox and Edge make lengths absolute, Blink and Safari do not (e.g. getComputedStyle() gives results with ex).

ewilligers pushed a commit to ewilligers/web-platform-tests that referenced this issue Jun 24, 2019
@ericwilligers
[css-lists] Parsing list-style
efdef41 
Test parsing, serialization and computed value for list-style
and associated longhand properties.
https://drafts.csswg.org/css-lists-3/#list-style-property

list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.

list-style uses the new serialization order:
list-style-position list-style-image list-style-type
w3c/csswg-drafts#2624
w3c/csswg-drafts@8ac1376

symbolic is omitted in shortest serialization
https://bugzilla.mozilla.org/show_bug.cgi?id=1560494
@ewilligers ewilligers mentioned this issue Jun 24, 2019
Merged
ewilligers pushed a commit to ewilligers/web-platform-tests that referenced this issue Jun 24, 2019
@ericwilligers
[css-images] Negative radii are invalid
1613d66 
Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like -10px are rejected.
Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
ewilligers pushed a commit to ewilligers/web-platform-tests that referenced this issue Jun 24, 2019
@ericwilligers
[css-images] Negative radii are invalid
54135c7 
Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like -10px are rejected.
Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
@ewilligers ewilligers mentioned this issue Jun 24, 2019
Merged
ewilligers pushed a commit to ewilligers/web-platform-tests that referenced this issue Jun 26, 2019
@ericwilligers
[css-lists] list-style-image computed value
e325185 
list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
ewilligers pushed a commit to ewilligers/web-platform-tests that referenced this issue Jun 26, 2019
@ericwilligers
[css-images] Radii are clamped non-negative
cab9e87 
Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
ewilligers pushed a commit to ewilligers/web-platform-tests that referenced this issue Jun 27, 2019
@ericwilligers
[css-lists] list-style-image computed value
f4b13be 
list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
ewilligers added a commit to web-platform-tests/wpt that referenced this issue Jun 27, 2019
@ewilligers
[css-lists] list-style-image computed value (#17441)
11984f1 
list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
ewilligers added a commit to web-platform-tests/wpt that referenced this issue Jun 27, 2019
@ewilligers
[css-images] Radii are clamped non-negative (#17442)
b93cbfa 
Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
@AmeliaBR
Copy link
Contributor

AmeliaBR commented Jul 9, 2019

Agenda+ to get a resolution, unless @ewilligers would rather we wait until the next APAC-friendly meeting?

@ewilligers
Copy link
Contributor Author

No need to wait. I expect there is simply a browser bug in Blink, Edge 18 and Safari. There appears to be consensus about adding computed image.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Computed gradient colors, and agreed to the following:

  • RESOLVED: Add section to CSS images defining computed value of an image type. This value has colors links and lengths all made absolute per usual computed value rules for those sub types and fix specs referring to images to make sure use correct language
The full IRC log of that discussion <dael> Topic: Computed gradient colors
<dael> github: https://github.com//issues/4042
<dael> TabAtkins: With regards to images we have boiler plate for computed values. That doesn't technically cover things like absolutinzing colors and links. B/c it's boiler plate, things like gradient colors don't turn into consistent versions per spec.
<dael> TabAtkins: But we don't want copy/paste from boiler plate to mean something. proposal is we 1) define what a computed image is which does absolutizing and then 2) file bugs to make sure everyone serializes in same way across usages
<dael> AmeliaBR: For gradients key things is colors insidegradient should behave like colors everywhere and links like links. We don't have cross browser so need impl to update
<gregwhitworth> mozilla folks: do you all have any compat issues from this, I presume not - but thought I'd ask if you've ever had reports
<dael> AmeliaBR: Second is having one definition os what should happen to make consistency. I think that goes in replaced images and everywhere references it.
<dbaron> I don't know of them off the top of my head -- though that doesn't mean we haven't.
<dael> AmeliaBR: gregwhitworth asked on IRC. Mozilla currently is doing things as we want them to be done. They're the only one. Question was on compat complaints on that?
<dael> dbaron: I don't know of any. We could search but I haven't heard of any escallated
<dael> gregwhitworth: That's good enough for me. Thanks.
<dael> dbaron: Is this mostly a gradient thing?
<dael> TabAtkins: I believe that's the only thing in image that exposes colors and links. If anyone supports image() like we want that does take a color and would be impacted, but no one impl yet.
<dael> AmeliaBR: Also filter image function with I think is in Safari. Will need to be defined.
<dael> dbaron: Only compat bugs I find with gradients is 0 vs 0deg and a graphics bug. Doesn't seem relevant here
<dael> Rossen_: Okay
<dael> Rossen_: Additional thoughts? Sounds like we have consensus on expected behavior and what clarifications to spec are needed. Don't see pushback
<fantasai> +1 to the change
<dael> Rossen_: Objections?
<dael> Prop: Add section to CSS images defining computed value of an image type. This value has colors links and lengths all made absolute per usual computed value rules for those sub types
<dael> TabAtkins: and fix specs referring to images to make sure use correct language
<dael> RESOLVED: Add section to CSS images defining computed value of an image type. This value has colors links and lengths all made absolute per usual computed value rules for those sub types and fix specs referring to images to make sure use correct language

@mozilla-apprentice mozilla-apprentice mentioned this issue Jul 10, 2019
Closed
tabatkins added a commit that referenced this issue Jul 19, 2019
@tabatkins
[css-images-3] Defined computed image, for #4042.
9cda403
@tabatkins tabatkins added Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. labels Jul 19, 2019
fantasai added a commit that referenced this issue Jul 19, 2019
@fantasai
[css-backgrounds-3][css-shapes-1][css-lists-3] Generalize computed <<…
022d5b8 
…image>> lines. #4042
fantasai added a commit that referenced this issue Jul 19, 2019
@fantasai
[css-images-4] Copy over definition of computed <image>. #4042
e951ae2
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Jul 24, 2019
@ewilligers @jgraham
Bug 1564659 [wpt PR 17441] - [css-lists] list-style-image computed va…
eed0d7d 
…lue, a=testonly

Automatic update from web-platform-tests
[css-lists] list-style-image computed value (#17441)

list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
--

wpt-commits: 11984f1d160b7454b2d8d1e177d1e48b9db750e1
wpt-pr: 17441
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Jul 24, 2019
@ewilligers @jgraham
Bug 1564660 [wpt PR 17442] - [css-images] Radii are clamped non-negat…
8d5782b 
…ive, a=testonly

Automatic update from web-platform-tests
[css-images] Radii are clamped non-negative (#17442)

Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
--

wpt-commits: b93cbfae1eb9e2a1248fb2d835ac7a7b1dc649cd
wpt-pr: 17442
xeonchen pushed a commit to xeonchen/gecko that referenced this issue Jul 25, 2019
@ewilligers @jgraham
Bug 1564659 [wpt PR 17441] - [css-lists] list-style-image computed va…
3062e33 
…lue, a=testonly

Automatic update from web-platform-tests
[css-lists] list-style-image computed value (#17441)

list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
--

wpt-commits: 11984f1d160b7454b2d8d1e177d1e48b9db750e1
wpt-pr: 17441
xeonchen pushed a commit to xeonchen/gecko that referenced this issue Jul 25, 2019
@ewilligers @jgraham
Bug 1564660 [wpt PR 17442] - [css-images] Radii are clamped non-negat…
991f6f6 
…ive, a=testonly

Automatic update from web-platform-tests
[css-images] Radii are clamped non-negative (#17442)

Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
--

wpt-commits: b93cbfae1eb9e2a1248fb2d835ac7a7b1dc649cd
wpt-pr: 17442
natechapin pushed a commit to natechapin/wpt that referenced this issue Aug 23, 2019
@ewilligers @natechapin
[css-lists] list-style-image computed value (web-platform-tests#17441)
8185aaf 
list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
natechapin pushed a commit to natechapin/wpt that referenced this issue Aug 23, 2019
@ewilligers @natechapin
[css-images] Radii are clamped non-negative (web-platform-tests#17442)
22417c3 
Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Oct 4, 2019
@marco-c
Bug 1564659 [wpt PR 17441] - [css-lists] list-style-image computed va…
5482b27 
…lue, a=testonly

Automatic update from web-platform-tests
[css-lists] list-style-image computed value (#17441)

list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
--

wpt-commits: 11984f1d160b7454b2d8d1e177d1e48b9db750e1
wpt-pr: 17441

UltraBlame original commit: 151290fe24f003be50293ac1cc4a21e4911fe6e8
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Oct 4, 2019
@marco-c
Bug 1564660 [wpt PR 17442] - [css-images] Radii are clamped non-negat…
a08a3a6 
…ive, a=testonly

Automatic update from web-platform-tests
[css-images] Radii are clamped non-negative (#17442)

Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
--

wpt-commits: b93cbfae1eb9e2a1248fb2d835ac7a7b1dc649cd
wpt-pr: 17442

UltraBlame original commit: 059a8f834fdf90f64c412f8ccd2de0cdd0910758
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Oct 4, 2019
@marco-c
Bug 1564659 [wpt PR 17441] - [css-lists] list-style-image computed va…
4bf495a 
…lue, a=testonly

Automatic update from web-platform-tests
[css-lists] list-style-image computed value (#17441)

list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
--

wpt-commits: 11984f1d160b7454b2d8d1e177d1e48b9db750e1
wpt-pr: 17441

UltraBlame original commit: 151290fe24f003be50293ac1cc4a21e4911fe6e8
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Oct 4, 2019
@marco-c
Bug 1564660 [wpt PR 17442] - [css-images] Radii are clamped non-negat…
248d9b5 
…ive, a=testonly

Automatic update from web-platform-tests
[css-images] Radii are clamped non-negative (#17442)

Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
--

wpt-commits: b93cbfae1eb9e2a1248fb2d835ac7a7b1dc649cd
wpt-pr: 17442

UltraBlame original commit: 059a8f834fdf90f64c412f8ccd2de0cdd0910758
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Oct 4, 2019
@marco-c
Bug 1564659 [wpt PR 17441] - [css-lists] list-style-image computed va…
6f78c77 
…lue, a=testonly

Automatic update from web-platform-tests
[css-lists] list-style-image computed value (#17441)

list-style-image supports image, including gradients
https://drafts.csswg.org/css-lists-3/#propdef-list-style-image

Colors and lengths in gradients are computed in computed style
results.
w3c/csswg-drafts#4042

calcs giving negative radii are clamped to 0.
--

wpt-commits: 11984f1d160b7454b2d8d1e177d1e48b9db750e1
wpt-pr: 17441

UltraBlame original commit: 151290fe24f003be50293ac1cc4a21e4911fe6e8
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Oct 4, 2019
@marco-c
Bug 1564660 [wpt PR 17442] - [css-images] Radii are clamped non-negat…
bc636e5 
…ive, a=testonly

Automatic update from web-platform-tests
[css-images] Radii are clamped non-negative (#17442)

Compute colors and lengths in
background-image getComputedStyle
w3c/csswg-drafts#4042

Test that radii like calc(-0.5em + 10px) are clamped to be non-negative.
https://drafts.csswg.org/css-images/#radial-gradients
--

wpt-commits: b93cbfae1eb9e2a1248fb2d835ac7a7b1dc649cd
wpt-pr: 17442

UltraBlame original commit: 059a8f834fdf90f64c412f8ccd2de0cdd0910758
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-images-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tabatkins @fantasai @ewilligers @AmeliaBR @css-meeting-bot