New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 644148 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Feature

Blocked on:
issue 450466



Sign in to add a comment

Support CSS Custom Properties in CSS Animation keyframes

Project Member Reported by alancutter@chromium.org, Sep 6 2016

Issue description

Test case: https://jsfiddle.net/3tn5nyLg/

<!DOCTYPE html>
<style>
@keyframes test {
  from { --x: green; }
  to { --x: lime; }
}

#target {
  width: 100px;
  height: 100px;
  animation: test 100s;
  --x: red;
  background: var(--x);
}
</style>
This box should be green.
<div id="target"></div>

Design Doc: https://docs.google.com/a/chromium.org/document/d/1V27q30H-pQZVbzHCJjdFThBSeuvxkGLdGmb1hLWBAiY/edit?usp=drive_web
 
Status update:

I have a working prototype split across a few WIP patches.

The spec has changed recently (not yet written down) to change property based animation-tainting to being value based.
Animations on custom properties taint the values, tainted values default to the initial value when used in animation properties.
Currently working on implementing this value tainting behaviour in the prototype.
 Issue 646637  has been merged into this issue.
Status update:
 - Value tainting implemented
 - Style optimisations baseComputedStyle and matchedPropertiesCache re-enabled

Still to do:
 - Ensure no performance regression in regular style updates
 - Rethink styleForElement() code structure
Project Member

Comment 4 by bugdroid1@chromium.org, Sep 30 2016

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

commit 294c014b805fae756af944846f9ef21a85a71d49
Author: alancutter <alancutter@chromium.org>
Date: Fri Sep 30 04:32:55 2016

Extend PropertyHandle to include custom property identifiers

This change allows animation keyframes to hold custom property
declaration values and treat them as individual properties. This
is achieved by extending PropertyHandles to treat custom properties
based on their string name rather than CSSPropertyID.

This patch has no behavioural change as custom property animations
are not applied yet and therefore not observable. This patch is a
necessary step in supporting custom property animations.

BUG= 644148 

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

[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/AnimationInputHelpers.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSBasicShapeInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSBorderImageLengthBoxInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSClipInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSColorInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSFilterListInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSFontSizeInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSFontWeightInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSImageInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSImageListInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSImageSliceInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSInterpolationType.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSLengthInterpolationType.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSLengthInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSLengthListInterpolationType.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSLengthListInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSLengthPairInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSNumberInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSOffsetRotationInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSPaintInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSPathInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSPositionAxisListInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSPositionInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSRotateInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSScaleInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSShadowListInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSSizeListInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSTextIndentInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSTransformInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSTransformOriginInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSTranslateInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSValueInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/CSSVisibilityInterpolationType.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/KeyframeEffectTest.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/PropertyHandle.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/PropertyHandle.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/PropertyHandleTest.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/PropertyInterpolationTypesMapping.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/StringKeyframe.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/StringKeyframe.h
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
[modify] https://crrev.com/294c014b805fae756af944846f9ef21a85a71d49/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp

Project Member

Comment 5 by bugdroid1@chromium.org, Sep 30 2016

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

commit 16207749c729ef2dcf5270702eb6318226c704ab
Author: alancutter <alancutter@chromium.org>
Date: Fri Sep 30 06:15:55 2016

Store custom properties specified in element.animate()

This change alters calls to element.animate() that use custom properties
such that the custom property values are stored internally in animation
keyframes.

This patch has no behavioural changes as custom property animations
are currently not applied (see bug). This patch is a step towards
enabling custom property animations.

BUG= 644148 

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

[modify] https://crrev.com/16207749c729ef2dcf5270702eb6318226c704ab/third_party/WebKit/Source/core/animation/AnimationInputHelpers.cpp
[modify] https://crrev.com/16207749c729ef2dcf5270702eb6318226c704ab/third_party/WebKit/Source/core/animation/AnimationInputHelpersTest.cpp
[modify] https://crrev.com/16207749c729ef2dcf5270702eb6318226c704ab/third_party/WebKit/Source/core/animation/EffectInput.cpp

Project Member

Comment 6 by bugdroid1@chromium.org, Oct 6 2016

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

commit 87009415889d2164713316a5e5283e484570f6fd
Author: alancutter <alancutter@chromium.org>
Date: Thu Oct 06 07:40:54 2016

Implement animation tainted custom property values

This patch updates the CSSVariableResolver to be aware of animation tainted
custom property values and to support disallowing custom property
substitution when a referenced value has been animation tainted.

Relevant spec: https://drafts.csswg.org/css-variables/#substitute-a-var
The spec currently references the out of date notion of animation tainted
custom properties rather than tainted values. This implementation reflects
a future amendment of the spec.

Because animations are the only source of animation tainted values and our
implementation doesn't support animations setting custom property values
there is no user-visible change made by this patch.
The (failing) layout test shows the kind of behaviour this patch is
intended to support.

BUG= 644148 

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

[add] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/LayoutTests/animations/custom-property-value-tainting-expected.txt
[add] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/LayoutTests/animations/custom-property-value-tainting.html
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/animation/CSSInterpolationType.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/animation/StringKeyframe.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/animation/css/CSSAnimations.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/CSSSyntaxDescriptor.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/CSSSyntaxDescriptor.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/CSSVariableData.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/CSSVariableData.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/DOMWindowCSS.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/KeyframeStyleRuleCSSStyleDeclaration.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/PropertyRegistration.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/PropertySetCSSStyleDeclaration.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/PropertySetCSSStyleDeclaration.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/StylePropertySet.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/StylePropertySet.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/cssom/CSSUnparsedValue.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/parser/CSSParser.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/parser/CSSParser.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/parser/CSSParserImpl.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/parser/CSSParserImpl.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/parser/CSSVariableParser.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/parser/CSSVariableParser.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h
[modify] https://crrev.com/87009415889d2164713316a5e5283e484570f6fd/third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp

Comment 7 by suzyh@chromium.org, Oct 10 2016

Labels: Objective
Cc: brajkumar@chromium.org
Labels: Needs-Feedback
Tested this issue on Mac OS 10.12, Ubuntu 14.04 and Windows 10 using chrome latest dev #55.0.2883.6 by following mentioned steps below.

1. Navigated to sample test case https://jsfiddle.net/3tn5nyLg/
2. Observed still the box is seen red color instead of green.

Could any one please let us know is there any other steps needed to be added to verify this issue from Chrome TE end?
Screenshot from 2016-10-10 15:14:19.png
273 KB View Download
Labels: -Needs-Feedback
#8: This issue is tracking feature work. It is still in progress.

Comment 11 by shans@chromium.org, Oct 11 2016

Issue 654805 has been merged into this issue.
A perf bot run claims that this does not cause any regressions!
update_style is the relevant metric here:
http://storage.googleapis.com/chromium-telemetry/html-results/results-2016-10-10_21-55-17

Comment 13 by shans@chromium.org, Oct 16 2016

Description: Show this description
Status update: Been getting mixed results from the perf try bots about the animation priority patch. It might be more reliable to land it and watch the waterfall perf bots for a sustained regressions.

Comment 15 Deleted

Labels: -merge-merged-2840
bugdroid1 failed to post a patch that landed:


https://crrev.com/890e3f57caf40adab7ea377cb50ef6591b6b882e

Add NeedsApplyPass optimization to style resolve

This change adds an optimization to style resolve to avoid making
apply passes over matched property sets for priority+isImportant
combinations that don't have any values present.

There are no behavioural changes made by this patch.

This change results in a 1-3% improvement in the update_style metric
of blink_style.top_25 on Nexus 7, Mac and Linux.

The purpose of this change is to avoid perf regressions when
adding a separate animation property apply pass in
https://codereview.chromium.org/2317903003.

BUG= 644148 ,  450466 

Committed: https://crrev.com/890e3f57caf40adab7ea377cb50ef6591b6b882e
Cr-Commit-Position: refs/heads/master@{#429717}
Project Member

Comment 18 by bugdroid1@chromium.org, Nov 10 2016

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

commit 851bdd47fcb66176959020a63bbdb3b4b090d845
Author: alancutter <alancutter@chromium.org>
Date: Thu Nov 10 01:04:44 2016

Use template parameter to reduce branching in style resolve apply passes

The optimisation in https://crrev.com/890e3f57caf40adab7ea377cb50ef6591b6b882e
regressed performance on the waterfall perf bots. This patch attempts to
reduce the performance regression by moving one of the branches to
be compile time evaluated as a template parameter.

This optimisation is not being reverted as it is still necessary to
prevent a regression when adding an additional CSS property priority
that increases the number of apply passes we have to perform.

The perf try bots show this change making an improvement of
1-5% on Android, 6-11% on Linux, 0-13% on Windows and 2-7% on Mac.

BUG= 450466 , 644148 

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

[modify] https://crrev.com/851bdd47fcb66176959020a63bbdb3b4b090d845/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
[modify] https://crrev.com/851bdd47fcb66176959020a63bbdb3b4b090d845/third_party/WebKit/Source/core/css/resolver/StyleResolver.h

Blockedon: 450466
Project Member

Comment 20 by bugdroid1@chromium.org, Nov 12 2016

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

commit 6d47d44ba4c0ba026223adb94d7f236fbc5efa22
Author: alancutter <alancutter@chromium.org>
Date: Sat Nov 12 00:31:28 2016

Add CSS property priority for CSS animation affecting properties

This change adds a separate priority for CSS properties that affect
running animations. This is in preparation for enabling animation
of custom properties.

There is no meaningful change in behaviour made by this patch.

The reordering of CSSPropertyIDs has revealed a bug in CSS
property/SVG presentation attribute animation collision where the
"winner" is based on hash iteration ordering rather than
meaningful rules. This should not impact users in any significant
way as targeting SVG properties in Web Animations is still behind
the experimental flag.

The call to applyMatchedProperties<HighPriorityProperty>() in
styleForPage() has been deliberately left alone.
Animation properties are not used by callers of styleForPage()
and animation effects were not applied previously.

BUG= 644148 

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

[delete] https://crrev.com/4155c401799a814cefc13f5b2589034dde217651/third_party/WebKit/LayoutTests/animations/css-animation-overrides-svg-presentation-attribute-animation-expected.txt
[modify] https://crrev.com/6d47d44ba4c0ba026223adb94d7f236fbc5efa22/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
[modify] https://crrev.com/6d47d44ba4c0ba026223adb94d7f236fbc5efa22/third_party/WebKit/Source/core/css/CSSProperties.in
[modify] https://crrev.com/6d47d44ba4c0ba026223adb94d7f236fbc5efa22/third_party/WebKit/Source/core/css/resolver/CSSPropertyPriority.h
[modify] https://crrev.com/6d47d44ba4c0ba026223adb94d7f236fbc5efa22/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp

Status update:
Pending code review for final patch: https://codereview.chromium.org/2309963002
Project Member

Comment 22 by bugdroid1@chromium.org, Nov 23 2016

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

commit 99118e5d645f046aa132529f6189a850c5b8ed49
Author: alancutter <alancutter@chromium.org>
Date: Wed Nov 23 05:35:56 2016

Apply custom property animations

This change enables CSS and Web animations to apply animated
effects on CSS custom properties.

This change involves a restructure of style resolving detailed
in the design doc:
https://docs.google.com/a/chromium.org/document/d/1V27q30H-pQZVbzHCJjdFThBSeuvxkGLdGmb1hLWBAiY

BUG= 644148 

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

[rename] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/element-animate-crash.html
[add] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-at-apply.html
[add] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-element-animate.html
[add] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html
[add] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-simple.html
[add] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-var-chain.html
[add] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-var-in-keyframe.html
[rename] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/LayoutTests/animations/custom-properties/value-tainting.html
[delete] https://crrev.com/db79085ae904b4b9f9c24f1c5ae26f9de83ae750/third_party/WebKit/LayoutTests/animations/custom-property-value-tainting-expected.txt
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/animation/EffectStack.cpp
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/animation/EffectStack.h
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/animation/css/CSSAnimations.h
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/css/resolver/StyleResolver.h
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/css/resolver/StyleResolverState.cpp
[modify] https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49/third_party/WebKit/Source/core/css/resolver/StyleResolverState.h

Project Member

Comment 23 by bugdroid1@chromium.org, Nov 23 2016

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

commit b7e89748bf097ebebc0f18a8270015b4eddc4508
Author: kolos <kolos@chromium.org>
Date: Wed Nov 23 10:04:26 2016

Revert of Apply custom property animation (patchset #15 id:280001 of https://codereview.chromium.org/2309963002/ )

Reason for revert:
Some browser tests fail. See  crbug.com/668069 

Original issue's description:
> Apply custom property animations
>
> This change enables CSS and Web animations to apply animated
> effects on CSS custom properties.
>
> This change involves a restructure of style resolving detailed
> in the design doc:
> https://docs.google.com/a/chromium.org/document/d/1V27q30H-pQZVbzHCJjdFThBSeuvxkGLdGmb1hLWBAiY
>
> BUG= 644148 
>
> Committed: https://crrev.com/99118e5d645f046aa132529f6189a850c5b8ed49
> Cr-Commit-Position: refs/heads/master@{#434122}

TBR=timloh@chromium.org,alancutter@chromium.org
# Skipping CQ checks because original CL landed less than 1 days ago.
NOPRESUBMIT=true
NOTREECHECKS=true
NOTRY=true
BUG= 644148 

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

[delete] https://crrev.com/2df1b7d02a58187978ce4de49f097f3720baefe8/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-at-apply.html
[delete] https://crrev.com/2df1b7d02a58187978ce4de49f097f3720baefe8/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-element-animate.html
[delete] https://crrev.com/2df1b7d02a58187978ce4de49f097f3720baefe8/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html
[delete] https://crrev.com/2df1b7d02a58187978ce4de49f097f3720baefe8/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-simple.html
[delete] https://crrev.com/2df1b7d02a58187978ce4de49f097f3720baefe8/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-var-chain.html
[delete] https://crrev.com/2df1b7d02a58187978ce4de49f097f3720baefe8/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-var-in-keyframe.html
[rename] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/LayoutTests/animations/custom-property-animation-crash.html
[add] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/LayoutTests/animations/custom-property-value-tainting-expected.txt
[rename] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/LayoutTests/animations/custom-property-value-tainting.html
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/animation/EffectStack.cpp
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/animation/EffectStack.h
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/animation/css/CSSAnimations.h
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/css/resolver/StyleResolver.h
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/css/resolver/StyleResolverState.cpp
[modify] https://crrev.com/b7e89748bf097ebebc0f18a8270015b4eddc4508/third_party/WebKit/Source/core/css/resolver/StyleResolverState.h

Possibly the cause of  issue 668295  and  issue 668294  as well, which are very recent and got fixed somewhere between ad8fde916 and 2d332b4d.
Linking test failures  issue 668069  here as well for reference.
Project Member

Comment 26 by bugdroid1@chromium.org, Dec 5 2016

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

commit f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4
Author: alancutter <alancutter@chromium.org>
Date: Mon Dec 05 05:51:15 2016

Apply custom property animations

This change enables CSS and Web animations to apply animated
effects on CSS custom properties.

This change involves a restructure of style resolving detailed
in the design doc:
https://docs.google.com/a/chromium.org/document/d/1V27q30H-pQZVbzHCJjdFThBSeuvxkGLdGmb1hLWBAiY

This is a reland of https://codereview.chromium.org/2309963002
with fixes for when the baseComputedStyle optimisation is active.
The revert was due to crbug.com/669790 where behaviour differs
depending on whether asserts are enabled, thus none of the try
bots picked up on the bug.

BUG= 644148 

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

[rename] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/element-animate-crash.html
[add] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-at-apply.html
[add] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-element-animate.html
[add] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html
[add] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-simple.html
[add] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-var-chain.html
[add] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-var-in-keyframe.html
[rename] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/LayoutTests/animations/custom-properties/value-tainting.html
[delete] https://crrev.com/bf2e505f84276ed16cd888cda97026d6151e8169/third_party/WebKit/LayoutTests/animations/custom-property-value-tainting-expected.txt
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/animation/EffectStack.cpp
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/animation/EffectStack.h
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/animation/css/CSSAnimations.h
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/css/resolver/StyleResolver.h
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/css/resolver/StyleResolverState.cpp
[modify] https://crrev.com/f9262a06c8d1e0478cbf2cc84a1b29f86d9d89e4/third_party/WebKit/Source/core/css/resolver/StyleResolverState.h

Status: Fixed (was: Assigned)
Project Member

Comment 28 by bugdroid1@chromium.org, Sep 8 2017

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

commit 871ff280a6711ace689731d8b2a718bfc8bca481
Author: Alexei Filippov <alph@chromium.org>
Date: Fri Sep 08 22:35:32 2017

DevTools: Support dark theme for performance monitor.

BUG= 644148 

Change-Id: Ia977c12acbacf2df3b60fc7da3fddc73f586432d
Reviewed-on: https://chromium-review.googlesource.com/644357
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#500715}
[modify] https://crrev.com/871ff280a6711ace689731d8b2a718bfc8bca481/third_party/WebKit/Source/devtools/front_end/timeline/PerformanceMonitor.js

Labels: TE-Verified-M63 TE-Verified-63.0.3212.0
Verified the fix on Mac 10.12.6, Win-10 and Ubuntu 14.04 using latest chrome version #63.0.3212.0 as per the comment #0.
Attaching screen shot for reference.
Observed that the box was green after navigating to URL: https://jsfiddle.net/3tn5nyLg/.
Hence, the fix is working as expected. 
Adding the verified labels.

Thanks...!!
644148.JPG
147 KB View Download

Sign in to add a comment