Commit b7e89748 authored by kolos's avatar kolos Committed by Commit bot

Revert of Apply custom property animation (patchset #15 id:280001 of...

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}
parent 2df1b7d0
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
from { --x: { background-color: green; }; }
to { --x: { background-color: lime; }; }
}
div {
--x: {
animation: test 10s linear;
background-color: red;
};
@apply --x;
}
#targetA {
animation-delay: -2.5s;
}
#targetB {
animation-delay: -7.5s;
}
</style>
<div id="targetA"></div>
<div id="targetB"></div>
<script>
test(() => {
assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)');
}, 'CSS Animations on custom properties should be reflected in @apply references');
</script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
background-color: var(--x);
}
</style>
<div id="target"></div>
<script>
test(() => {
var animation = target.animate({'--x': ['green', 'lime']}, 1000);
animation.currentTime = 250;
assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'green');
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
animation.currentTime = 750;
assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'lime');
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 255, 0)');
}, 'element.animate() animations should apply custom properties');
</script>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
from { --x: green; }
to { --x: lime; }
}
#parentA, #parentB {
--x: red;
}
#targetA, #targetB {
background-color: var(--x);
}
#parentA {
animation: test 10s -2s;
}
#parentB {
animation: test 10s -8s;
}
</style>
<div id="parentA">
<div id="targetA"></div>
</div>
<div id="parentB">
<div id="targetB"></div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(targetA).getPropertyValue('--x'), ' green');
assert_equals(getComputedStyle(targetB).getPropertyValue('--x'), ' lime');
}, 'CSS Animations on custom properties should get inherited');
test(() => {
assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)');
}, 'CSS Animations on custom properties that get inherited should be reflected in var() references');
</script>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
from { --x: green; }
to { --x: lime; }
}
div {
--x: red;
background-color: var(--x);
}
#targetA {
animation: test 10s -2.5s;
}
#targetB {
animation: test 10s -7.5s;
}
</style>
<div id="targetA"></div>
<div id="targetB"></div>
<script>
test(() => {
assert_equals(getComputedStyle(targetA).getPropertyValue('--x'), ' green');
assert_equals(getComputedStyle(targetB).getPropertyValue('--x'), ' lime');
}, 'CSS Animations on custom properties should be applied');
test(() => {
assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)');
}, 'CSS Animations on custom properties should be reflected in var() references');
</script>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
from { --x: green; }
to { --x: lime; }
}
div {
--x: red;
--y: var(--x);
background-color: var(--y);
}
#targetA {
animation: test 10s -2.5s;
}
#targetB {
animation: test 10s -7.5s;
}
</style>
<div id="targetA"></div>
<div id="targetB"></div>
<script>
test(() => {
assert_equals(getComputedStyle(targetA).getPropertyValue('--y'), ' green');
assert_equals(getComputedStyle(targetB).getPropertyValue('--y'), ' lime');
}, 'CSS Animations on var() chained custom properties should be applied');
test(() => {
assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)');
}, 'CSS Animations on var() chained custom properties should be reflected in var() references');
</script>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes custom-property-animation {
from { --from: blue; --to: cyan; }
to { --from: green; --to: lime; }
}
@keyframes standard-property-animation {
from { background-color: var(--from); }
to { background-color: var(--to); }
}
div {
--from: red;
--to: red;
animation-name: standard-property-animation, custom-property-animation;
animation-duration: 10s;
animation-timing-function: linear;
}
#targetA {
animation-delay: -2.5s;
}
#targetB {
animation-delay: -7.5s;
}
</style>
<div id="targetA"></div>
<div id="targetB"></div>
<script>
test(() => {
assert_equals(getComputedStyle(targetA).getPropertyValue('--from'), ' blue');
assert_equals(getComputedStyle(targetA).getPropertyValue('--to'), ' cyan');
assert_equals(getComputedStyle(targetB).getPropertyValue('--from'), ' green');
assert_equals(getComputedStyle(targetB).getPropertyValue('--to'), ' lime');
}, 'CSS Animations on custom properties should be applied');
test(() => {
assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 64, 255)');
assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 223, 0)');
}, 'CSS Animations on custom properties should be reflected in var() references in animation keyframes');
</script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
promise_test(() => {
......
This is a testharness.js-based test.
FAIL Animation tainted values are omitted in CSS property animation-name assert_equals: Tainted value tainted set on --tainted by animation expected "tainted" but got ""
FAIL Chained animation tainted values are omitted in CSS property animation-name assert_equals: Tainted value tainted set on --tainted-first by animation expected "tainted" but got ""
FAIL Inherited animation tainted values are omitted in CSS property animation-name assert_equals: Tainted value tainted set on --tainted by animation expected "tainted" but got ""
FAIL Animation tainted values trigger var fallbacks in CSS property animation-name assert_equals: Tainted value tainted set on --tainted by animation expected "tainted" but got ""
FAIL Animation tainted fallback values are omitted in CSS property animation-name assert_equals: Tainted value tainted set on --tainted by animation expected "tainted" but got ""
Harness: the test ran to completion.
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body></body>
<script>
function createTarget() {
......
......@@ -100,16 +100,6 @@ bool EffectStack::hasActiveAnimationsOnCompositor(
return false;
}
bool EffectStack::affectsProperties(PropertyHandleFilter filter) const {
for (const auto& sampledEffect : m_sampledEffects) {
for (const auto& interpolation : sampledEffect->interpolations()) {
if (filter(interpolation->getProperty()))
return true;
}
}
return false;
}
ActiveInterpolationsMap EffectStack::activeInterpolations(
EffectStack* effectStack,
const HeapVector<Member<const InertEffect>>* newAnimations,
......
......@@ -63,7 +63,6 @@ class CORE_EXPORT EffectStack {
bool hasActiveAnimationsOnCompositor(CSSPropertyID) const;
using PropertyHandleFilter = bool (*)(const PropertyHandle&);
bool affectsProperties(PropertyHandleFilter) const;
static ActiveInterpolationsMap activeInterpolations(
EffectStack*,
const HeapVector<Member<const InertEffect>>* newAnimations,
......
......@@ -231,15 +231,19 @@ bool CSSAnimations::isTransitionAnimationForInspector(
return false;
}
void CSSAnimations::calculateCompositorAndTransitionUpdate(
const Element* animatingElement,
Element& element,
const ComputedStyle& style,
ComputedStyle* parentStyle,
CSSAnimationUpdate& animationUpdate) {
void CSSAnimations::calculateUpdate(const Element* animatingElement,
Element& element,
const ComputedStyle& style,
ComputedStyle* parentStyle,
CSSAnimationUpdate& animationUpdate,
StyleResolver* resolver) {
calculateCompositorAnimationUpdate(animationUpdate, animatingElement, element,
style, parentStyle);
calculateAnimationUpdate(animationUpdate, animatingElement, element, style,
parentStyle, resolver);
calculateAnimationActiveInterpolations(animationUpdate, animatingElement);
calculateTransitionUpdate(animationUpdate, animatingElement, style);
calculateTransitionActiveInterpolations(animationUpdate, animatingElement);
}
static const KeyframeEffectModelBase* getKeyframeEffectModelBase(
......@@ -423,7 +427,6 @@ void CSSAnimations::calculateAnimationUpdate(CSSAnimationUpdate& update,
*cssAnimations->m_runningAnimations[i]->animation);
}
}
calculateAnimationActiveInterpolations(update, animatingElement);
}
void CSSAnimations::snapshotCompositorKeyframes(
......@@ -823,7 +826,6 @@ void CSSAnimations::calculateTransitionUpdate(CSSAnimationUpdate& update,
}
}
}
calculateTransitionActiveInterpolations(update, animatingElement);
}
void CSSAnimations::cancel() {
......@@ -1092,18 +1094,6 @@ bool CSSAnimations::isAffectedByKeyframesFromScope(const Element& element,
return toShadowRoot(treeScope.rootNode()).host() == element;
}
bool CSSAnimations::isCustomPropertyHandle(const PropertyHandle& property) {
return property.isCSSProperty() &&
property.cssProperty() == CSSPropertyVariable;
}
bool CSSAnimations::isAnimatingCustomProperties(
const ElementAnimations* elementAnimations) {
return elementAnimations &&
elementAnimations->effectStack().affectsProperties(
isCustomPropertyHandle);
}
DEFINE_TRACE(CSSAnimations) {
visitor->trace(m_transitions);
visitor->trace(m_pendingUpdate);
......
......@@ -63,20 +63,12 @@ class CSSAnimations final {
static const StylePropertyShorthand& propertiesForTransitionAll();
static bool isAnimationAffectingProperty(CSSPropertyID);
static bool isAffectedByKeyframesFromScope(const Element&, const TreeScope&);
static bool isAnimatingCustomProperties(const ElementAnimations*);
static bool isCustomPropertyHandle(const PropertyHandle&);
static void calculateAnimationUpdate(CSSAnimationUpdate&,
const Element* animatingElement,
Element&,
const ComputedStyle&,
ComputedStyle* parentStyle,
StyleResolver*);
static void calculateCompositorAndTransitionUpdate(
const Element* animatingElement,
Element&,
const ComputedStyle&,
ComputedStyle* parentStyle,
CSSAnimationUpdate&);
static void calculateUpdate(const Element* animatingElement,
Element&,
const ComputedStyle&,
ComputedStyle* parentStyle,
CSSAnimationUpdate&,
StyleResolver*);
static void snapshotCompositorKeyframes(Element&,
CSSAnimationUpdate&,
const ComputedStyle&,
......@@ -156,6 +148,12 @@ class CSSAnimations final {
Element&,
const ComputedStyle&,
const ComputedStyle* parentStyle);
static void calculateAnimationUpdate(CSSAnimationUpdate&,
const Element* animatingElement,
Element&,
const ComputedStyle&,
ComputedStyle* parentStyle,
StyleResolver*);
static void calculateTransitionUpdate(CSSAnimationUpdate&,
const Element* animatingElement,
const ComputedStyle&);
......
......@@ -210,33 +210,10 @@ class CORE_EXPORT StyleResolver final
void collectTreeBoundaryCrossingRulesV0CascadeOrder(const Element&,
ElementRuleCollector&);
struct CacheSuccess {
STACK_ALLOCATED();
bool isInheritedCacheHit;
bool isNonInheritedCacheHit;
unsigned cacheHash;
Member<const CachedMatchedProperties> cachedMatchedProperties;
CacheSuccess(bool isInheritedCacheHit,
bool isNonInheritedCacheHit,
unsigned cacheHash,
const CachedMatchedProperties* cachedMatchedProperties)
: isInheritedCacheHit(isInheritedCacheHit),
isNonInheritedCacheHit(isNonInheritedCacheHit),
cacheHash(cacheHash),
cachedMatchedProperties(cachedMatchedProperties) {}
bool isFullCacheHit() const {
return isInheritedCacheHit && isNonInheritedCacheHit;
}
bool shouldApplyInheritedOnly() const {
return isNonInheritedCacheHit && !isInheritedCacheHit;
}
void setFailed() {
isInheritedCacheHit = false;
isNonInheritedCacheHit = false;
}
};
void applyMatchedProperties(StyleResolverState&, const MatchResult&);
bool applyAnimatedProperties(StyleResolverState&,
const Element* animatingElement);
void applyCallbackSelectors(StyleResolverState&);
// These flags indicate whether an apply pass for a given CSSPropertyPriority
// and isImportant is required.
......@@ -262,30 +239,6 @@ class CORE_EXPORT StyleResolver final
UpdateNeedsApplyPass = true,
};
void applyMatchedPropertiesAndCustomPropertyAnimations(
StyleResolverState&,
const MatchResult&,
const Element* animatingElement);
CacheSuccess applyMatchedCache(StyleResolverState&, const MatchResult&);
void applyCustomProperties(StyleResolverState&,
const MatchResult&,
bool applyAnimations,
const CacheSuccess&,
NeedsApplyPass&);
void applyMatchedAnimationProperties(StyleResolverState&,
const MatchResult&,
const CacheSuccess&,
NeedsApplyPass&);
void applyMatchedStandardProperties(StyleResolverState&,
const MatchResult&,
const CacheSuccess&,
NeedsApplyPass&);
void calculateAnimationUpdate(StyleResolverState&,
const Element* animatingElement);
bool applyAnimatedStandardProperties(StyleResolverState&, const Element*);
void applyCallbackSelectors(StyleResolverState&);
template <CSSPropertyPriority priority, ShouldUpdateNeedsApplyPass>
void applyMatchedProperties(StyleResolverState&,
const MatchedPropertiesRange&,
......
......@@ -41,7 +41,6 @@ StyleResolverState::StyleResolverState(
// TODO(jchaffraix): We should make m_parentStyle const
// (https://crbug.com/468152)
m_parentStyle(const_cast<ComputedStyle*>(parentStyle)),
m_isAnimatingCustomProperties(false),
m_applyPropertyToRegularStyle(true),
m_applyPropertyToVisitedLinkStyle(false),
m_hasDirAutoAttribute(false),
......
......@@ -100,13 +100,6 @@ class CORE_EXPORT StyleResolverState {
CSSAnimationUpdate& animationUpdate() { return m_animationUpdate; }
bool isAnimatingCustomProperties() const {
return m_isAnimatingCustomProperties;
}
void setIsAnimatingCustomProperties(bool value) {
m_isAnimatingCustomProperties = value;
}
void setParentStyle(PassRefPtr<ComputedStyle> parentStyle) {
m_parentStyle = parentStyle;
}
......@@ -208,7 +201,6 @@ class CORE_EXPORT StyleResolverState {
RefPtr<ComputedStyle> m_parentStyle;
CSSAnimationUpdate m_animationUpdate;
bool m_isAnimatingCustomProperties;
bool m_applyPropertyToRegularStyle;
bool m_applyPropertyToVisitedLinkStyle;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment