| Summary: |
[web-animations] additive/accumulative color blending fails to yield intermediary out-of-bounds values |
| Product: |
WebKit
|
Reporter: |
Antoine Quint <graouts> |
| Component: |
Animations | Assignee: |
Sam Weinig <sam> |
| Status: |
RESOLVED
FIXED
|
|
|
| Severity: |
Normal
|
CC: |
dino, graouts, sam, webkit-bug-importer
|
| Priority: |
P2
|
Keywords: |
InRadar, WebExposed |
| Version: |
WebKit Nightly Build | |
|
| Hardware: |
Unspecified | |
|
| OS: |
Unspecified | |
|
| Bug Depends on: |
|
|
|
| Bug Blocks: |
235766, 235768, 235769, 235770, 189299
|
|
|
| Attachments: |
| Description |
Flags |
|
Test
|
none
|
|
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.