New issue
Advanced search Search tips

Issue 647123 link

Starred by 1 user
Status: Fixed
Owner:
alancutter@chromium.org
Closed: Sep 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Feature



Sign in to add a comment

Shorthand properties with var references in them don't animate smoothly

Project Member Reported by alancutter@chromium.org, Sep 15 2016 
Test case: https://jsfiddle.net/01hjyzt0/

<style>
@keyframes test {
  from { background: var(--x); }
  to { background: var(--y); }
}
#target {
  --x: green;
  --y: lime;
  animation: test 1s infinite alternate;
}
</style>
<div id="target">This should have a smoothly animated green background</div>

Comment 1 by alancutter@chromium.org, Sep 16 2016

Labels: Update-Monthly
Project Member

Comment 2 by bugdroid1@chromium.org, Sep 16 2016 

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

commit ee86696437fd6bc8f16d8ab872263cef2c02131b
Author: alancutter <alancutter@chromium.org>
Date: Fri Sep 16 04:06:40 2016

Support interpolation of animatable shorthand properties containing var()

This change adds support for handling pending substitution values to CSS
animations to allow for smooth interpolation between shorthand values
with var() references in them.

BUG= 647123 

Review-Url: https://codereview.chromium.org/2340893003
Cr-Commit-Position: refs/heads/master@{#419096}

[add] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/LayoutTests/animations/animate-shorthand-var.html
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/animation/CSSInterpolationType.cpp
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/animation/CSSInterpolationType.h
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/animation/PropertyInterpolationTypesMapping.cpp
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/animation/StringKeyframe.cpp
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/css/resolver/StyleResolverState.cpp
[modify] https://crrev.com/ee86696437fd6bc8f16d8ab872263cef2c02131b/third_party/WebKit/Source/core/css/resolver/StyleResolverState.h

Comment 3 by alancutter@chromium.org, Sep 16 2016

Status: Fixed (was: Started)
►

Sign in to add a comment