Bug 242185 - [web-animations] additive/accumulative color blending fails to yield intermediary out-of-bounds values
Summary: [web-animations] additive/accumulative color blending fails to yield intermed...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Sam Weinig
URL:
Keywords: InRadar, WebExposed
Depends on:
Blocks: 235766 235768 235769 235770 189299
  Show dependency treegraph
 
Reported: 2022-06-30 06:37 PDT by Antoine Quint
Modified: 2022-09-26 01:10 PDT (History)
4 users (show)

See Also:


Attachments
Test (878 bytes, text/html)
2022-06-30 08:13 PDT, Antoine Quint
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Antoine Quint 2022-06-30 06:37:41 PDT
We have 28 FAIL results across these WPTs all due to the same issue:

    - web-animations/animation-model/animation-types/accumulation-per-property-001.html
    - web-animations/animation-model/animation-types/accumulation-per-property-002.html
    - web-animations/animation-model/animation-types/addition-per-property-001.html
    - web-animations/animation-model/animation-types/addition-per-property-002.html

These run this subtest from web-animations/animation-model/animation-types/property-types.js for `add` and `accumulate` composite operations for a variety of color CSS properties:

    test(t => {
      const idlName = propertyToIDL(property);
      const target = createTestElement(t, setup);
      target.style[idlName] = 'rgb(128, 128, 128)';
      const animation = target.animate(
        {
          [idlName]: ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
        },
        { duration: 1000, composite }
      );
      testAnimationSamples(animation, idlName,
                           [{ time: 0,   expected: 'rgb(255, 128, 128)' },
                            // The value at 50% is interpolated
                            // from 'rgb(128+255, 128, 128)'
                            // to   'rgb(128,     128, 128+255)'.
                            { time: 500, expected: 'rgb(255, 128, 255)' }]);
    }, `${property} supports animating as color of rgb() with overflowed `
       + ' from and to values');

The issue is that we always clamp values as we blend colors so we can't have the intermediary representations of rgb(128+255, 128, 128) and rgb(128, 128, 128+255) above for additive and accumulate.

Note that when we blend using `add` or `accumulate`, it will only ever be through some intermediary calls to `CSSPropertyAnimation::blendProperties()` made under `KeyframeEffect::setAnimatedPropertiesInStyle()` which will not produce web-facing values. Only at the end of that method do we call `CSSPropertyAnimation::blendProperties()` with a `replace` composite operation which would be expected to clamp.
Comment 1 Antoine Quint 2022-06-30 08:13:29 PDT
Created attachment 460581 [details]
Test
Comment 2 Radar WebKit Bug Importer 2022-07-07 06:38:12 PDT
<rdar://problem/96593559>
Comment 3 Sam Weinig 2022-09-24 19:43:58 PDT
Pull request: https://github.com/WebKit/WebKit/pull/4674
Comment 4 EWS 2022-09-26 01:10:16 PDT
Committed 254850@main (35a0ba08385c): <https://commits.webkit.org/254850@main>

Reviewed commits have been landed. Closing PR #4674 and removing active labels.