So, in our recent planning meeting we agreed to start with just <number> from https://drafts.css-houdini.org/css-properties-values-api-1/#supported-syntax-strings, as it seems to be the only one that (should) map to an existing compositor animations concept (https://cs.chromium.org/chromium/src/cc/animation/animation_curve.h?l=31&rcl=9a5ab716395c0184f25fa8a1e9eddde7b2c5ccab).

Steps we probably need to take:

1. Confirm that <number> safely maps to the cc FLOAT curve. We should check how the Blink side animates <number>, perhaps comparing it to how opacity is handled (since opacity is FLOAT on cc side). All following steps assume #1 holds.

2. Mark CSS custom properties as compositor-supported, as long as they are only <number>. This likely means changing https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/animation/compositor_animations.cc?l=211&rcl=9a5ab716395c0184f25fa8a1e9eddde7b2c5ccab

3. Find some way to map a CSS custom property animation to a compositor representation. The mapping logic is at https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/animation/compositor_animations.cc?l=612&rcl=9a5ab716395c0184f25fa8a1e9eddde7b2c5ccab, but more importantly we need to find a way to teach the compositor that CSS custom property animations aren't all the same (i.e. currently we have cc::TargetProperty::Type and we treat each entry as a single property throughout the codebase). This might just mean adding a cc::TargetProperty::Type of something like CSS_CUSTOM_PROPERTY and have special logic for that value, but will need some code examination to find the cleanest way. (Maybe augment the KeyframeModel?)

4. Test all of the above, in particular making sure that the main-thread animation for a <number> CSS custom property still functions for main-thread PaintWorklet (i.e. for now the compositor side is just a do-nothing, wasting some cycles :D. We could always put it behind a flag.)

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/735a049d6da509e20af4999f43fe822432d6fcb5

commit 735a049d6da509e20af4999f43fe822432d6fcb5
Author: Kevin Ellis <kevers@chromium.org>
Date: Tue Oct 09 17:50:49 2018

Support compositing of numeric-valued CSS custom properties.

This patch is in support of off-thread paint worklets.
Initially, only numeric valued Custom CSS-properties are supported.
A new target property is introduced (CSS_CUSTOM_PROPERTY).
Snapshotting in the keyframe effect model was updated to support numeric valued custom properties.
Checks for compositor eligibility and construction of the animation curve are also included in this patch.


Bug: 883721
Cq-Include-Trybots: luci.chromium.try:android_optional_gpu_tests_rel;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: Ifcee2b7f71f5c9ebc0930176e6e27d30e5d12fae
Reviewed-on: https://chromium-review.googlesource.com/c/1240394
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Anders Ruud <andruud@chromium.org>
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#597981}
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/cc/trees/target_property.h
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/compositor_animations.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/compositor_animations.h
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/compositor_animations_test.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/css/css_animatable_value_factory.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/css/css_animatable_value_factory.h
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/css/css_animations.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/keyframe.h
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/keyframe_effect_model.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/keyframe_effect_model.h
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/keyframe_effect_model_test.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/string_keyframe.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/animation/string_keyframe.h
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/css/resolver/style_resolver.cc
[modify] https://crrev.com/735a049d6da509e20af4999f43fe822432d6fcb5/third_party/blink/renderer/core/css/resolver/style_resolver.h