Web Animations CSS: Implement CSS Transitions backed on Web Animations model

Source/core/animation/css/CSSAnimations.cpp

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 13 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 #include "config.h"
 #include "core/animation/css/CSSAnimations.h"
 
+#include "StylePropertyShorthand.h"
 #include "core/animation/ActiveAnimations.h"
 #include "core/animation/DocumentTimeline.h"
 #include "core/animation/KeyframeAnimationEffect.h"
+#include "core/animation/css/CSSAnimatableValueFactory.h"
 #include "core/css/CSSKeyframeRule.h"
 #include "core/css/resolver/StyleResolver.h"
 #include "core/dom/Element.h"
 #include "core/events/ThreadLocalEventNames.h"
+#include "core/events/TransitionEvent.h"
 #include "core/events/WebKitAnimationEvent.h"
 #include "core/platform/animation/CSSAnimationDataList.h"
 #include "core/platform/animation/TimingFunction.h"
 #include "wtf/HashSet.h"
 
+namespace WebCore {
+
+struct CandidateTransition {
+    CandidateTransition(PassRefPtr<AnimatableValue> from, PassRefPtr<AnimatableValue> to, const CSSAnimationData* anim)
+        : from(from)
+        , to(to)
+        , anim(anim)
+    {
+    }
+    CandidateTransition() { } // The HashMap calls the default ctor
+    RefPtr<AnimatableValue> from;
+    RefPtr<AnimatableValue> to;
+    const CSSAnimationData* anim;
+};
+typedef HashMap<CSSPropertyID, CandidateTransition> CandidateTransitionMap;
+
 namespace {
 
-using namespace WebCore;
-
 bool isEarlierPhase(TimedItem::Phase target, TimedItem::Phase reference)
 {
     ASSERT(target != TimedItem::PhaseNone);
     ASSERT(reference != TimedItem::PhaseNone);
     return target < reference;
 }
 
 bool isLaterPhase(TimedItem::Phase target, TimedItem::Phase reference)
 {
     ASSERT(target != TimedItem::PhaseNone);
     ASSERT(reference != TimedItem::PhaseNone);
     return target > reference;
 }
 
-} // namespace
-
-namespace WebCore {
-
 // Returns the default timing function.
 const PassRefPtr<TimingFunction> timingFromAnimationData(const CSSAnimationData* animationData, Timing& timing)
 {
     if (animationData->isDelaySet())
         timing.startDelay = animationData->delay();
     if (animationData->isDurationSet()) {
         timing.iterationDuration = animationData->duration();
         timing.hasIterationDuration = true;
     }
     if (animationData->isIterationCountSet()) {
@@ skipping 36 matching lines @@
         case CSSAnimationData::AnimationDirectionAlternateReverse:
             timing.direction = Timing::PlaybackDirectionAlternateReverse;
             break;
         default:
             ASSERT_NOT_REACHED();
         }
     }
     return animationData->isTimingFunctionSet() ? animationData->timingFunction() : CSSAnimationData::initialAnimationTimingFunction();
 }
 
+void updateIfPropertyChanged(const CSSAnimationData* anim, CSSPropertyID id, const RenderStyle* oldStyle, const RenderStyle* newStyle, CandidateTransitionMap& styleChange)

[dstockwell, 2013/10/14 00:05:21]

calculateCandidateTransitionForProperty

[dstockwell, 2013/10/14 00:05:21]

styleChange -> candidateMap throughout

[Timothy Loh, 2013/10/14 00:32:27]

Done.

[Timothy Loh, 2013/10/14 00:32:27]

Done.

+{
+    RefPtr<AnimatableValue> from = CSSAnimatableValueFactory::create(id, oldStyle);
+    RefPtr<AnimatableValue> to = CSSAnimatableValueFactory::create(id, newStyle);
+    // If we have multiple transitions on the same property, we will use the
+    // last one since we iterate over them in order and this will override
+    // a previously set CandidateTransition.
+    if (!from->equals(to.get()))
+        styleChange.add(id, CandidateTransition(from, to, anim));

[Steve Block, 2013/10/13 23:58:20]

You should call release() on 'from' and 'to' here

[Timothy Loh, 2013/10/14 00:32:27]

Done. Didn't know about these before :)

+}
+
+void computeStyleChange(const RenderStyle* oldStyle, const RenderStyle* newStyle, CandidateTransitionMap& styleChange, HashSet<CSSPropertyID>& listedProperties)

[dstockwell, 2013/10/14 00:05:21]

calculateCandidateTransitions

[Timothy Loh, 2013/10/14 00:32:27]

Done.

+{
+    if (!newStyle->transitions())
+        return;
+
+    for (size_t i = 0; i < newStyle->transitions()->size(); ++i) {
+        const CSSAnimationData* anim = newStyle->transitions()->animation(i);
+        CSSAnimationData::AnimationMode mode = anim->animationMode();
+        if (anim->duration() + anim->delay() <= 0 || mode == CSSAnimationData::AnimateNone)
+            continue;
+
+        bool animateAll = mode == CSSAnimationData::AnimateAll;
+        ASSERT(animateAll || mode == CSSAnimationData::AnimateSingleProperty);
+        const StylePropertyShorthand& propertyList = animateAll ? CSSAnimations::animatableProperties() : shorthandForProperty(anim->property());
+        if (!propertyList.length()) {
+            listedProperties.add(anim->property());
+            updateIfPropertyChanged(anim, anim->property(), oldStyle, newStyle, styleChange);
+        } else {
+            for (unsigned i = 0; i < propertyList.length(); ++i) {
+                CSSPropertyID id = propertyList.properties()[i];
+                if (!animateAll && !CSSAnimations::isAnimatableProperty(id))
+                    continue;
+                listedProperties.add(id);
+                updateIfPropertyChanged(anim, id, oldStyle, newStyle, styleChange);
+            }
+        }
+    }
+}
+
+} // namespace
+
 CSSAnimationUpdateScope::CSSAnimationUpdateScope(Element* target)
     : m_target(target)
 {
     if (!m_target)
         return;
     ActiveAnimations* activeAnimations = m_target->activeAnimations();
     CSSAnimations* cssAnimations = activeAnimations ? activeAnimations->cssAnimations() : 0;
     // It's possible than an update was created outside an update scope. That's harmless
     // but we must clear it now to avoid applying it if an updated replacement is not
     // created in this scope.
     if (cssAnimations)
         cssAnimations->setPendingUpdate(nullptr);
 }
 
 CSSAnimationUpdateScope::~CSSAnimationUpdateScope()
 {
     if (!m_target)
         return;
     ActiveAnimations* activeAnimations = m_target->activeAnimations();
     CSSAnimations* cssAnimations = activeAnimations ? activeAnimations->cssAnimations() : 0;
     if (cssAnimations)
         cssAnimations->maybeApplyPendingUpdate(m_target);
 }
 
-bool CSSAnimations::needsUpdate(const Element* element, const RenderStyle* style)
+PassOwnPtr<CSSAnimationUpdate> CSSAnimations::calculateUpdate(Element* element, const RenderStyle* style, StyleResolver* resolver)
+{
+    ASSERT(RuntimeEnabledFeatures::webAnimationsCSSEnabled());
+    OwnPtr<CSSAnimationUpdate> update = adoptPtr(new CSSAnimationUpdate());
+    calculateAnimationUpdate(update.get(), element, style, resolver);
+    calculateTransitionUpdate(update.get(), element, style);
+    return update->isEmpty() ? nullptr : update.release();
+}
+
+void CSSAnimations::calculateAnimationUpdate(CSSAnimationUpdate* update, Element* element, const RenderStyle* style, StyleResolver* resolver)
 {
     ActiveAnimations* activeAnimations = element->activeAnimations();
-    const CSSAnimationDataList* animations = style->animations();
+    const CSSAnimationDataList* animationDataList = style->animations();
     const CSSAnimations* cssAnimations = activeAnimations ? activeAnimations->cssAnimations() : 0;
-    EDisplay display = style->display();
-    return (display != NONE && animations && animations->size()) || (cssAnimations && !cssAnimations->isEmpty());
-}
 
-PassOwnPtr<CSSAnimationUpdate> CSSAnimations::calculateUpdate(Element* element, const RenderStyle* style, const CSSAnimations* cssAnimations, const CSSAnimationDataList* animationDataList, StyleResolver* resolver)
-{
-    OwnPtr<CSSAnimationUpdate> update;
     HashSet<AtomicString> inactive;
     if (cssAnimations)
         for (AnimationMap::const_iterator iter = cssAnimations->m_animations.begin(); iter != cssAnimations->m_animations.end(); ++iter)
             inactive.add(iter->key);
 
     if (style->display() != NONE) {
         for (size_t i = 0; animationDataList && i < animationDataList->size(); ++i) {
             const CSSAnimationData* animationData = animationDataList->animation(i);
             if (animationData->isNoneAnimation())
                 continue;
             ASSERT(animationData->isValidAnimation());
             AtomicString animationName(animationData->name());
 
             if (cssAnimations) {
                 AnimationMap::const_iterator existing(cssAnimations->m_animations.find(animationName));
                 if (existing != cssAnimations->m_animations.end()) {
                     // FIXME: The play-state of this animation might have changed, record the change in the update.
                     inactive.remove(animationName);
                     continue;
                 }
             }
 
             Timing timing;
             RefPtr<TimingFunction> defaultTimingFunction = timingFromAnimationData(animationData, timing);
             Vector<std::pair<KeyframeAnimationEffect::KeyframeVector, RefPtr<TimingFunction> > > keyframesAndTimingFunctions;
             resolver->resolveKeyframes(element, style, animationName, defaultTimingFunction.get(), keyframesAndTimingFunctions);
             if (!keyframesAndTimingFunctions.isEmpty()) {
-                if (!update)
-                    update = adoptPtr(new CSSAnimationUpdate());
                 HashSet<RefPtr<InertAnimation> > animations;
                 for (size_t j = 0; j < keyframesAndTimingFunctions.size(); ++j) {
                     ASSERT(!keyframesAndTimingFunctions[j].first.isEmpty());
                     timing.timingFunction = keyframesAndTimingFunctions[j].second;
                     // FIXME: crbug.com/268791 - Keyframes are already normalized, perhaps there should be a flag on KeyframeAnimationEffect to skip normalization.
                     animations.add(InertAnimation::create(KeyframeAnimationEffect::create(keyframesAndTimingFunctions[j].first), timing));
                 }
                 update->startAnimation(animationName, animations);
             }
         }
     }
 
-    if (!inactive.isEmpty() && !update)
-        update = adoptPtr(new CSSAnimationUpdate());
     for (HashSet<AtomicString>::const_iterator iter = inactive.begin(); iter != inactive.end(); ++iter)
         update->cancelAnimation(*iter, cssAnimations->m_animations.get(*iter));
-
-    return update.release();
 }
 
 void CSSAnimations::maybeApplyPendingUpdate(Element* element)
 {
     if (!element->renderer())
         m_pendingUpdate = nullptr;
 
     if (!m_pendingUpdate)
         return;
 
     OwnPtr<CSSAnimationUpdate> update = m_pendingUpdate.release();
 
     for (Vector<AtomicString>::const_iterator iter = update->cancelledAnimationNames().begin(); iter != update->cancelledAnimationNames().end(); ++iter) {
         const HashSet<RefPtr<Player> >& players = m_animations.take(*iter);
         for (HashSet<RefPtr<Player> >::const_iterator iter = players.begin(); iter != players.end(); ++iter)
             (*iter)->cancel();
     }
 
     // FIXME: Apply updates to play-state.
 
     for (Vector<CSSAnimationUpdate::NewAnimation>::const_iterator iter = update->newAnimations().begin(); iter != update->newAnimations().end(); ++iter) {
-        OwnPtr<CSSAnimations::EventDelegate> eventDelegate = adoptPtr(new EventDelegate(element, iter->name));
+        OwnPtr<AnimationEventDelegate> eventDelegate = adoptPtr(new AnimationEventDelegate(element, iter->name));
         HashSet<RefPtr<Player> > players;
         for (HashSet<RefPtr<InertAnimation> >::const_iterator animationsIter = iter->animations.begin(); animationsIter != iter->animations.end(); ++animationsIter) {
             const InertAnimation* inertAnimation = animationsIter->get();
             // The event delegate is set on the the first animation only. We
             // rely on the behavior of OwnPtr::release() to achieve this.
             RefPtr<Animation> animation = Animation::create(element, inertAnimation->effect(), inertAnimation->specified(), eventDelegate.release());
             players.add(element->document().timeline()->play(animation.get()));
         }
         m_animations.set(iter->name, players);
     }
+
+    for (HashSet<CSSPropertyID>::iterator iter = update->cancelledTransitions().begin(); iter != update->cancelledTransitions().end(); ++iter) {
+        ASSERT(m_transitions.contains(*iter));
+        m_transitions.take(*iter).player->cancel();
+    }
+
+    for (size_t i = 0; i < update->newTransitions().size(); ++i) {
+        const CSSAnimationUpdate::NewTransition& newTransition = update->newTransitions()[i];
+
+        RunningTransition runningTransition;
+        runningTransition.from = newTransition.from;
+        runningTransition.to = newTransition.to;
+
+        CSSPropertyID id = newTransition.id;
+        InertAnimation* inertAnimation = newTransition.animation.get();
+        OwnPtr<TransitionEventDelegate> eventDelegate = adoptPtr(new TransitionEventDelegate(element, id));
+        RefPtr<Animation> transition = Animation::create(element, inertAnimation->effect(), inertAnimation->specified(), eventDelegate.release());
+        // FIXME: Transitions need to be added to a separate timeline.
+        runningTransition.player = element->document().timeline()->play(transition.get());
+        m_transitions.set(id, runningTransition);
+    }
+}
+
+void CSSAnimations::calculateTransitionUpdateForProperty(CSSAnimationUpdate* update, CSSPropertyID id, const CandidateTransition& newTransition, const TransitionMap* transitions)

[Steve Block, 2013/10/13 23:58:20]

s/transitions/existingTransitions ?

[Timothy Loh, 2013/10/14 00:32:27]

Done.

+{
+    // FIXME: Skip the rest of this if there is a running animation on this property
+
+    if (transitions) {
+        TransitionMap::const_iterator existingTransitionIter = transitions->find(id);
+
+        if (existingTransitionIter != transitions->end() && !update->cancelledTransitions().contains(id)) {
+            const AnimatableValue* existingTo = existingTransitionIter->value.to;
+            if (newTransition.to->equals(existingTo))
+                return;
+            update->cancelTransition(id);
+        }
+    }
+
+    KeyframeAnimationEffect::KeyframeVector keyframes;
+
+    RefPtr<Keyframe> startKeyframe = Keyframe::create();
+    startKeyframe->setPropertyValue(id, newTransition.from.get());
+    startKeyframe->setOffset(0);
+    keyframes.append(startKeyframe);
+
+    RefPtr<Keyframe> endKeyframe = Keyframe::create();
+    endKeyframe->setPropertyValue(id, newTransition.to.get());
+    endKeyframe->setOffset(1);
+    keyframes.append(endKeyframe);
+
+    RefPtr<KeyframeAnimationEffect> effect = KeyframeAnimationEffect::create(keyframes);
+
+    Timing timing;
+    RefPtr<TimingFunction> timingFunction = timingFromAnimationData(newTransition.anim, timing);
+    timing.timingFunction = timingFunction;
+    // Note that the backwards part is required for delay to work.
+    timing.fillMode = Timing::FillModeBoth;
+
+    update->startTransition(id, newTransition.from.get(), newTransition.to.get(), InertAnimation::create(effect, timing));
+}
+
+void CSSAnimations::calculateTransitionUpdate(CSSAnimationUpdate* update, const Element* element, const RenderStyle* style)
+{
+    ActiveAnimations* activeAnimations = element->activeAnimations();
+    const CSSAnimations* cssAnimations = activeAnimations ? activeAnimations->cssAnimations() : 0;
+    const TransitionMap* transitions = cssAnimations ? &cssAnimations->m_transitions : 0;
+
+    HashSet<CSSPropertyID> listedProperties;
+    if (style->display() != NONE && element->renderer() && element->renderer()->style()) {
+        CandidateTransitionMap styleChange;
+        computeStyleChange(element->renderer()->style(), style, styleChange, listedProperties);
+        for (CandidateTransitionMap::const_iterator iter = styleChange.begin(); iter != styleChange.end(); ++iter)
+            calculateTransitionUpdateForProperty(update, iter->key, iter->value, transitions);
+    }
+
+    if (transitions) {
+        for (TransitionMap::const_iterator iter = transitions->begin(); iter != transitions->end(); ++iter) {
+            const TimedItem* timedItem = iter->value.player->source();
+            CSSPropertyID id = iter->key;
+            if (timedItem->phase() == TimedItem::PhaseAfter || !listedProperties.contains(id))
+                update->cancelTransition(id);
+        }
+    }
 }
 
 void CSSAnimations::cancel()
 {
     for (AnimationMap::iterator iter = m_animations.begin(); iter != m_animations.end(); ++iter) {
         const HashSet<RefPtr<Player> >& players = iter->value;
         for (HashSet<RefPtr<Player> >::const_iterator animationsIter = players.begin(); animationsIter != players.end(); ++animationsIter)
             (*animationsIter)->cancel();
     }
 
+    for (TransitionMap::iterator iter = m_transitions.begin(); iter != m_transitions.end(); ++iter)
+        iter->value.player->cancel();
+
     m_animations.clear();
+    m_transitions.clear();
     m_pendingUpdate = nullptr;
 }
 
-void CSSAnimations::EventDelegate::maybeDispatch(Document::ListenerType listenerType, const AtomicString& eventName, double elapsedTime)
+void CSSAnimations::AnimationEventDelegate::maybeDispatch(Document::ListenerType listenerType, const AtomicString& eventName, double elapsedTime)
 {
     if (m_target->document().hasListenerType(listenerType))
         m_target->document().timeline()->addEventToDispatch(m_target, WebKitAnimationEvent::create(eventName, m_name, elapsedTime));
 }
 
-void CSSAnimations::EventDelegate::onEventCondition(const TimedItem* timedItem, bool isFirstSample, TimedItem::Phase previousPhase, double previousIteration)
+void CSSAnimations::AnimationEventDelegate::onEventCondition(const TimedItem* timedItem, bool isFirstSample, TimedItem::Phase previousPhase, double previousIteration)
 {
     // Events for a single document are queued and dispatched as a group at
     // the end of DocumentTimeline::serviceAnimations.
     // FIXME: Events which are queued outside of serviceAnimations should
     // trigger a timer to dispatch when control is released.
     const TimedItem::Phase currentPhase = timedItem->phase();
     const double currentIteration = timedItem->currentIteration();
 
     // Note that the elapsedTime is measured from when the animation starts playing.
     if (!isFirstSample && previousPhase == TimedItem::PhaseActive && currentPhase == TimedItem::PhaseActive && previousIteration != currentIteration) {
@@ skipping 12 matching lines @@
         ASSERT(timedItem->specified().startDelay > 0 || isFirstSample);
         // The spec states that the elapsed time should be
         // 'delay < 0 ? -delay : 0', but we always use 0 to match the existing
         // implementation. See crbug.com/279611
         maybeDispatch(Document::ANIMATIONSTART_LISTENER, EventNames::animationstart, 0);
     }
     if ((isFirstSample || isEarlierPhase(previousPhase, TimedItem::PhaseAfter)) && currentPhase == TimedItem::PhaseAfter)
         maybeDispatch(Document::ANIMATIONEND_LISTENER, EventNames::animationend, timedItem->activeDuration());
 }
 
+void CSSAnimations::TransitionEventDelegate::onEventCondition(const TimedItem* timedItem, bool isFirstSample, TimedItem::Phase previousPhase, double previousIteration)
+{
+    // Events for a single document are queued and dispatched as a group at
+    // the end of DocumentTimeline::serviceAnimations.
+    // FIXME: Events which are queued outside of serviceAnimations should
+    // trigger a timer to dispatch when control is released.
+    const TimedItem::Phase currentPhase = timedItem->phase();
+    if (currentPhase == TimedItem::PhaseAfter && (isFirstSample || previousPhase != currentPhase)) {
+        if (m_target->document().hasListenerType(Document::TRANSITIONEND_LISTENER)) {

[Steve Block, 2013/10/13 23:58:20]

These could be a single 'if'

[Timothy Loh, 2013/10/14 00:32:27]

Done.

+            String propertyName = getPropertyNameString(m_property);
+            const Timing& timing = timedItem->specified();
+            double elapsedTime = timing.iterationDuration;
+            const AtomicString& eventType = EventNames::transitionend;
+            String pseudoElement = PseudoElement::pseudoElementNameForEvents(m_target->pseudoId());
+            m_target->document().timeline()->addEventToDispatch(m_target, TransitionEvent::create(eventType, propertyName, elapsedTime, pseudoElement));
+        }
+    }
+}
+
+
 bool CSSAnimations::isAnimatableProperty(CSSPropertyID property)
 {
     switch (property) {
     case CSSPropertyBackgroundColor:
     case CSSPropertyBackgroundImage:
     case CSSPropertyBackgroundPositionX:
     case CSSPropertyBackgroundPositionY:
     case CSSPropertyBackgroundSize:
     case CSSPropertyBaselineShift:
     case CSSPropertyBorderBottomColor:
@@ skipping 97 matching lines @@
     case CSSPropertyWidth:
     case CSSPropertyWordSpacing:
     case CSSPropertyZIndex:
     case CSSPropertyZoom:
         return true;
     default:
         return false;
     }
 }
 
+const StylePropertyShorthand& CSSAnimations::animatableProperties()
+{
+    DEFINE_STATIC_LOCAL(Vector<CSSPropertyID>, properties, ());
+    DEFINE_STATIC_LOCAL(StylePropertyShorthand, propertyShorthand, ());
+    if (properties.isEmpty()) {
+        for (int i = firstCSSProperty; i < lastCSSProperty; ++i) {
+            CSSPropertyID id = convertToCSSPropertyID(i);
+            // FIXME: This is the only shorthand marked as animatable,
+            // it'll be removed from the list once we switch to the new implementation.
+            if (id == CSSPropertyFlex)
+                continue;
+            if (isAnimatableProperty(id))
+                properties.append(id);
+        }
+        propertyShorthand = StylePropertyShorthand(CSSPropertyInvalid, properties.begin(), properties.size());
+    }
+    return propertyShorthand;
+}
+
 } // namespace WebCore