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.

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

[css-images] Computed gradient colors #4042

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

Comments

@ewilligers
Copy link
Contributor

commented Jun 19, 2019

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

@AmeliaBR

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2019

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

This comment has been minimized.

Copy link
Member

commented Jun 20, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Jun 21, 2019

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
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 pushed a commit to ewilligers/web-platform-tests that referenced this issue Jun 24, 2019
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
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 26, 2019
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
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
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
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
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 AmeliaBR added the Agenda+ label Jul 9, 2019
@AmeliaBR

This comment has been minimized.

Copy link
Contributor

commented Jul 9, 2019

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

@ewilligers

This comment has been minimized.

Copy link
Contributor Author

commented Jul 9, 2019

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

This comment has been minimized.

Copy link
Member

commented Jul 10, 2019

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
@fantasai fantasai closed this Jul 19, 2019
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Jul 24, 2019
…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
…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
…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
…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 added a commit to natechapin/wpt that referenced this issue Aug 23, 2019
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 added a commit to natechapin/wpt that referenced this issue Aug 23, 2019
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
…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
…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
…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
…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
…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
…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
Projects
None yet
5 participants
You can’t perform that action at this time.