[nejdetkadir]

Problem

On macOS, an animated color comes out wrong. In examples/apps/macos-native-showcase the Breathing button animates background-color from #5856d6 to #ae64ce and renders dark green instead of purple.

A color keyframe holds the native style value from parseColorStyleValue. On RGB565 builds that is an RGB565 value. The macOS and iOS targets build with GEA_EMBEDDED_PIXEL_FORMAT=1 (RGBA8888), so there it is a 32-bit color. sampleSegment in css/animation.h interpolates every color track with lerpColor565, which reads only the low 16 bits. With RGBA8888 that leaves blue and alpha at zero and mixes up red and green.

Change

• css/interpolate.h: add lerpColor8888, which interpolates a 32-bit color one byte at a time. That covers RGBA8888 and ARGB8888.
• css/animation.h: use it for color tracks when GEA_PIXEL_FORMAT_IS_8888, and keep lerpColor565 for the other formats.
• test/run-css-animation-color-format.sh builds test/test_css_animation_color_format.cpp for formats 0, 1 and 2 and checks a color track at five points, including alpha.

Tests

On macOS with Apple clang:

$ bash packages/core/test/run-css-animation-color-format.sh    # before the change
css animation color format 0 test passed
[test_css_animation_color_format] format 1 p=0.25 expected 193,143,67,255 got 17,142,0,0
[test_css_animation_color_format] format 1 p=0.50 expected 141,129,123,255 got 13,133,0,0
[test_css_animation_color_format] format 1 p=0.75 expected 89,114,179,255 got 41,116,0,0

$ bash packages/core/test/run-css-animation-color-format.sh    # after
css animation color format 0 test passed
css animation color format 1 test passed
css animation color format 2 test passed

• The steps of bouncing-balls-regressions.yml pass (13 of 13).
• The native suite passes apart from the scripts that need env vars and run-compiled-pcm-worklet.sh, which run-tests.sh skips. With the env vars set, the 15 env-var tests (GEA_COMPILER_CLI, GEA_JSDOM_PACKAGE and so on) pass with compiler 1.0.44, and the UI memory census reports the same allocations as main.
• macos-native-showcase built against the npm packages (core 0.1.49, apple 0.2.18) with this change applied to the engine: the Breathing button is purple. Sampled at different points of the animation, a pixel in the button reads 718856, 585617 and 6e935f without the change and 8774d3, 5b57cf and c5a2dd with it.

Notes for review

• GRAY4 and GRAY2 boards keep the lerpColor565 path. I did not check how color animations behave there.
• I tested background-color keyframes only. color keyframes and background-color and color transitions go through the same interpolation, but I did not run them.
• On iOS, CSS animations do not run at all, because ios_main.mm never calls StyleSheet::startCssAnimations or AnimationEngine::tick. That part is in geastack/apple, so it is not in this PR. With that fixed locally and this change applied, an animated color on an iPhone 11 matched the expected values exactly.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 23963a57-29c4-401e-b884-b9d935dcf22d

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}