208465 2020-03-02 12:49:33 -0800 ExtendedColor doesn't work with animation 2021-12-27 11:33:59 -0800 1 1 1 Unclassified WebKit Animations WebKit Nightly Build Unspecified Unspecified NEW InRadar P2 Normal --- 1 dino sam dino sam simon.fraser webkit-bug-importer oldest_to_newest 1624681 0 dino 2020-03-02 12:49:33 -0800 We never implemented code to have ExtendedColors animate. I remember it being unclear what should happen if you are animating between Color Spaces, but we did address this for gradients. 1624682 1 webkit-bug-importer 2020-03-02 12:49:51 -0800 <rdar://problem/59963499> 1624683 2 simon.fraser 2020-03-02 12:50:56 -0800 Convert the endpoints into the deeper of the two colorspaces and then interpolate? 1624684 3 simon.fraser 2020-03-02 12:51:42 -0800 Relevant: https://github.com/w3c/csswg-drafts/issues/4647 1826678 4 447925 simon.fraser 2021-12-23 18:14:08 -0800 Created attachment 447925 P3 color interpolation 1826962 5 448003 sam 2021-12-27 11:18:24 -0800 Created attachment 448003 Test case with computed output 1826964 6 sam 2021-12-27 11:33:59 -0800 There are two things that need to done here: 1. Support animations of colors with a larger gamut than sRGB animating without eager gamut mapping them to sRGB. For consistency with precedent and gradients, I propose we use the unbounded sRGB (aka ExtendedSRGB in the engine) color space as the interpolation space. This has the effect that animating between two colors outside of the sRGB gamut would produce some computed color() functions with less than 0 or greater than 1 for component values (e.g. color(srgb 1.0930663624351615, -0.22674197356975417, -0.15013458093711937) for color(display-p3 1 0 0)). As a general rule, I would like for us to avoid basing interpolation results on input colors, as I think that can lead to confusion to users, especially when coupled with things like CSS variables. For that reason, I don't think trying to give computed results in the color(display-p3 ...) form makes sense here. The one exception to that rule is that I think we should special case the situation when the legacy color formats (srgb(), #fff, etc.) are used as both keyframes, and continue to return clamped 8-bit results. This would ensure that we don't break existing content that may be depending on that. 2. Specifying which interpolation color space to use for an animation. Gradients now support an additional parameter to specify the interpolation color space (https://drafts.csswg.org/css-images-4/#linear-gradients) using an optional <color-interpolation-method> production. I think we should extend CSS animations (and WebAnimations) to allow specifying per-keyframe pair interpolation color spaces. Exactly how that should work, where one would specify it, and whether it would be for all colors or per-color taking property (e.g. separate interpolation color space for background-color and color) will need to be worked out. We will keep this bug about #1 and use https://bugs.webkit.org/show_bug.cgi?id=234702 for #2. 447925 2021-12-23 18:14:08 -0800 2021-12-23 18:14:08 -0800 P3 color interpolation p3-color-animation.html text/html 572 simon.fraser PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBj b250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSwgc2hyaW5rLXRvLWZp dD1ubyI+CiAgICA8c3R5bGU+CiAgICAgICAgLmJveCB7CiAgICAgICAgICAgIHdpZHRoOiAxMDBw eDsKICAgICAgICAgICAgaGVpZ2h0OiAxMDBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xv cjogYmx1ZTsKICAgICAgICAgICAgYW5pbWF0aW9uOiBmYWRlIDJzIGFsdGVybmF0ZSBpbmZpbml0 ZTsKICAgICAgICB9CiAgICAgICAgCiAgICAgICAgQGtleWZyYW1lcyBmYWRlIHsKICAgICAgICAg ICAgZnJvbSB7IGJhY2tncm91bmQtY29sb3I6IGNvbG9yKGRpc3BsYXktcDMgMSAwLjUgMSk7IH0K ICAgICAgICAgICAgdG8gICB7IGJhY2tncm91bmQtY29sb3I6IGNvbG9yKGRpc3BsYXktcDMgMC4y IDAuOCAxKTsgfQogICAgICAgIH0KICAgICAgICAKICAgIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+ CiAgICA8ZGl2IGNsYXNzPSJib3giPgogICAgICAgIAogICAgPC9kaXY+CjwvYm9keT4KPC9odG1s Pgo= 448003 2021-12-27 11:18:24 -0800 2021-12-27 11:18:24 -0800 Test case with computed output animate.html text/html 1036 sam PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4K PC9oZWFkPgo8Ym9keT4KPHNjcmlwdD4KY29uc3QgZnJvbUNvbG9yID0gImNvbG9yKGRpc3BsYXkt cDMgMSAwIDApIjsKY29uc3QgdG9Db2xvciA9ICJjb2xvcihkaXNwbGF5LXAzIDAgMCAxKSI7Cgpj b25zdCBleHBsYW5hdGlvbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImRpdiIpCmV4cGxhbmF0 aW9uLmlubmVySFRNTCA9IGBBbmltYXRpb24gZnJvbSA8c3BhbiBzdHlsZT0iY29sb3I6JHtmcm9t Q29sb3J9Ij4ke2Zyb21Db2xvcn08L3NwYW4+IHRvIDxzcGFuIHN0eWxlPSJjb2xvcjoke3RvQ29s b3J9Ij4ke3RvQ29sb3J9PC9zcGFuPiA8aHI+YApkb2N1bWVudC5ib2R5LmFwcGVuZChleHBsYW5h dGlvbikKCmNvbnN0IHJlZkVsZW1lbnQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJkaXYiKTsK ZG9jdW1lbnQuYm9keS5hcHBlbmQocmVmRWxlbWVudCkKCmxldCBhbmltYXRpb24gPSByZWZFbGVt ZW50LmFuaW1hdGUoeyBiYWNrZ3JvdW5kQ29sb3I6IFtmcm9tQ29sb3IsIHRvQ29sb3JdIH0sIHsg ZHVyYXRpb246IDEsIGZpbGw6ICdib3RoJyB9KTsKYW5pbWF0aW9uLnBhdXNlKCk7Cgpmb3IgKGNv bnN0IGFuaW1hdGlvblByb2dyZXNzIG9mIFsgMCwgMC4yNSwgMC41LCAwLjc1LCAxIF0pIHsKICAg IGFuaW1hdGlvbi5jdXJyZW50VGltZSA9IGFuaW1hdGlvblByb2dyZXNzOwoKICAgIGNvbnN0IHJl ZlN0eWxlID0gZ2V0Q29tcHV0ZWRTdHlsZShyZWZFbGVtZW50KTsKCiAgICBjb25zdCBlbGVtZW50 ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgiZGl2IikKICAgIGVsZW1lbnQuaW5uZXJIVE1MID0g YENvbG9yIGF0ICR7YW5pbWF0aW9uUHJvZ3Jlc3N9IOKGkiA8c3BhbiBzdHlsZT0iY29sb3I6JHty ZWZTdHlsZS5iYWNrZ3JvdW5kQ29sb3J9Ij4ke3JlZlN0eWxlLmJhY2tncm91bmRDb2xvcn08L3Nw YW4+YAogICAgZG9jdW1lbnQuYm9keS5hcHBlbmQoZWxlbWVudCkKfQo8L3NjcmlwdD4KPC9ib2R5 Pgo8L2h0bWw+Cg==