Attachment 341482 Details for Bug 186047 – Patch

[patch] Patch

bug-186047-20180529120025.patch (text/plain), 111.11 KB, created by Antoine Quint on 2018-05-29 03:00:27 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Antoine Quint

Created: 2018-05-29 03:00:27 PDT

Size: 111.11 KB

patch

obsolete

>Subversion Revision: 232186
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index da03b7154cf4264b7b596758d264fff2f2f95dd6..bd5df70aa917579bd15bd9131f1b27ce71cd911b 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,71 @@
>+2018-05-29  Antoine Quint  <graouts@apple.com>
>+
>+        [Web Animations] Handle relative length units
>+        https://bugs.webkit.org/show_bug.cgi?id=186047
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        In order to correctly handle relative units, such as "em", "vw" and "vh", we need to do two things.
>+
>+        First, because we need to apply the cascade to correctly compute relative lengths, we need to delay the computation of
>+        "blending keyframes" to when we have both keyframes data and a valid target. This also means that we need to reset blending
>+        keyframes when the target changes. As a result, old call sites of updateBlendingKeyframes() have been replaced by a call to
>+        m_blendingKeyframes.clear() and the method now gets called as part of apply() with the RenderStyle of the targeted element
>+        as a parameter.
>+
>+        Second, and as a result of the first change, we need to update the accelerated animation state based on animation
>+        progress rather than when calling specific methods, such as Animation.play() and Animation.pause(), since blending
>+        keyframes may not be available at those more specific call sites. We now have a new updateAcceleratedAnimationState()
>+        method that gets called as part of apply(). We also rename animationPlayStateDidChange() to animationSuspensionStateDidChange()
>+        since this method was specific to suspension and had a confusing name.
>+
>+        * animation/AnimationEffectReadOnly.h: Rename animationPlayStateDidChange() to animationSuspensionStateDidChange().
>+        * animation/KeyframeEffectReadOnly.cpp:
>+        (WebCore::KeyframeEffectReadOnly::getKeyframes): Fix a crash that revealed itself after other changes in this patch. We would later
>+        call into ComputedStyleExtractor::animationSuspensionStateDidChange() and this would yield an assertion because we'd call potentially
>+        call it with a custom CSS property.
>+        (WebCore::KeyframeEffectReadOnly::processKeyframes): Reset blending keyframes instead of calling updateBlendingKeyframes() since
>+        blending keyframes is now performed asynchronously upon style resolution.
>+        (WebCore::KeyframeEffectReadOnly::updateBlendingKeyframes): Take the target's RenderStyle as a parameter and use it to reset the
>+        associated StyleResolver's state, just like we do in StyleResolver::keyframeStylesForAnimation(), so that the CSS cascade is correctly
>+        accounted for when computing values using relative length units. Since blending keyframes can now be computed several times for a
>+        given set of keyframes, since the effect's target may change, we also need to create a copy of the MutableStyleProperties to pass
>+        to StyleRuleKeyframe::create().
>+        (WebCore::KeyframeEffectReadOnly::setTarget): Reset blending keyframes instead of calling updateBlendingKeyframes() since
>+        blending keyframes is now performed asynchronously upon style resolution.
>+        (WebCore::KeyframeEffectReadOnly::apply): Update blending keyframes and the accelerated animation state.
>+        (WebCore::KeyframeEffectReadOnly::getAnimatedStyle): Make sure we have blending keyframes with a call to updateBlendingKeyframes()
>+        in case the animation hasn't naturally progressed when this method is called.
>+        (WebCore::KeyframeEffectReadOnly::setAnimatedPropertiesInStyle): Make sure we have blending keyframes with a call to
>+        updateBlendingKeyframes() in case the animation hasn't naturally progressed when this method is called.
>+        (WebCore::KeyframeEffectReadOnly::updateAcceleratedAnimationState): Account for the animation's local time and play state to update
>+        the accelerated animation state.
>+        (WebCore::KeyframeEffectReadOnly::addPendingAcceleratedAction): Record the last accelerated action in a member variable which we can
>+        use to determine if we're running accelerated accounting for uncommited changes.
>+        (WebCore::KeyframeEffectReadOnly::animationDidSeek): Only record an AcceleratedAction::Seek action if we're already running accelerated.
>+        (WebCore::KeyframeEffectReadOnly::animationSuspensionStateDidChange): Only record an AcceleratedAction::Pause or AcceleratedAction::Play
>+        action if we're already running accelerated.
>+        (WebCore::KeyframeEffectReadOnly::applyPendingAcceleratedActions): Ensure we clone and clear the list of accelerated actions and check that
>+        we have any cloned actions before proceeding any further. Then we can stop accounting for m_startedAccelerated since the list of accelerated
>+        actions already account for animation state changes.
>+        (WebCore::KeyframeEffectReadOnly::animationPlayStateDidChange): Deleted.
>+        * animation/KeyframeEffectReadOnly.h:
>+        (WebCore::KeyframeEffectReadOnly::isRunningAccelerated const): Account for the m_lastRecordedAcceleratedAction to identify whether we're running.
>+        * animation/WebAnimation.cpp:
>+        (WebCore::WebAnimation::play): Stop calling animationPlayStateDidChange() directly since the accelerated animation state is now updated when
>+        the animation's effect is applied.
>+        (WebCore::WebAnimation::pause): Stop calling animationPlayStateDidChange() directly since the accelerated animation state is now updated when
>+        the animation's effect is applied.
>+        (WebCore::WebAnimation::resolve): Make sure we update the finished state prior to applying the animation's effect since the play state can
>+        change when updating the finished state and KeyframeEffectReadOnly::updateAcceleratedAnimationState(), which is called when calling into
>+        KeyframeEffectReadOnly::apply(), relies on it to correctly update the accelerated animation state.
>+        (WebCore::WebAnimation::setSuspended): Rename animationPlayStateDidChange() to animationSuspensionStateDidChange().
>+        * css/StyleResolver.cpp:
>+        (WebCore::StyleResolver::setNewStateWithElement): Add a new public method to reset a StyleResolver's state such that we can call it when creating
>+        blending keyframes for JS-originated animations just like we do when creating blending keyframes for CSS Animations in keyframeStylesForAnimation().
>+        (WebCore::StyleResolver::keyframeStylesForAnimation): Use the new setNewStateWithElement() method.
>+        * css/StyleResolver.h:
>+
> 2018-05-25  Antoine Quint  <graouts@apple.com>
> 
>         [Web Animations] WebAnimation objects never get destroyed
>diff --git a/Source/WebCore/animation/AnimationEffectReadOnly.h b/Source/WebCore/animation/AnimationEffectReadOnly.h
>index e3e2fe64edd66a094d638828c5b3d52c1d73393c..6c6541425e60e4be356bee61b1d94117e6d38b61 100644
>--- a/Source/WebCore/animation/AnimationEffectReadOnly.h
>+++ b/Source/WebCore/animation/AnimationEffectReadOnly.h
>@@ -46,8 +46,8 @@ public:
>     ComputedTimingProperties getComputedTiming();
>     virtual void apply(RenderStyle&) = 0;
>     virtual void invalidate() = 0;
>-    virtual void animationPlayStateDidChange(WebAnimation::PlayState) = 0;
>     virtual void animationDidSeek() = 0;
>+    virtual void animationSuspensionStateDidChange(bool) = 0;
> 
>     WebAnimation* animation() const { return m_animation.get(); }
>     void setAnimation(RefPtr<WebAnimation>&& animation) { m_animation = animation; }
>diff --git a/Source/WebCore/animation/KeyframeEffectReadOnly.cpp b/Source/WebCore/animation/KeyframeEffectReadOnly.cpp
>index cfa44d679f0e0f2788b97db5e3966eb37a644266..b0bfff9bd8b8d42b509b00c911edcc4f93c1a6cf 100644
>--- a/Source/WebCore/animation/KeyframeEffectReadOnly.cpp
>+++ b/Source/WebCore/animation/KeyframeEffectReadOnly.cpp
>@@ -30,6 +30,7 @@
> #include "AnimationEffectTimingReadOnly.h"
> #include "CSSAnimation.h"
> #include "CSSComputedStyleDeclaration.h"
>+#include "CSSKeyframeRule.h"
> #include "CSSPropertyAnimation.h"
> #include "CSSPropertyNames.h"
> #include "CSSStyleDeclaration.h"
>@@ -535,6 +536,8 @@ Vector<Strong<JSObject>> KeyframeEffectReadOnly::getKeyframes(ExecState& state)
>             // 3. For each animation property-value pair specified on keyframe, declaration, perform the following steps:
>             auto& style = *keyframe.style();
>             for (auto cssPropertyId : keyframe.properties()) {
>+                if (cssPropertyId == CSSPropertyCustom)
>+                    continue;
>                 // 1. Let property name be the result of applying the animation property name to IDL attribute name algorithm to the property name of declaration.
>                 auto propertyName = CSSPropertyIDToIDLAttributeName(cssPropertyId);
>                 // 2. Let IDL value be the result of serializing the property value of declaration by passing declaration to the algorithm to serialize a CSS value.
>@@ -659,35 +662,29 @@ ExceptionOr<void> KeyframeEffectReadOnly::processKeyframes(ExecState& state, Str
> 
>     m_parsedKeyframes = WTFMove(parsedKeyframes);
> 
>-    updateBlendingKeyframes();
>+    m_blendingKeyframes.clear();
> 
>     return { };
> }
> 
>-void KeyframeEffectReadOnly::updateBlendingKeyframes()
>+void KeyframeEffectReadOnly::updateBlendingKeyframes(RenderStyle& elementStyle)
> {
>-    if (!m_target)
>+    if (!m_blendingKeyframes.isEmpty() || !m_target)
>         return;
> 
>     KeyframeList keyframeList("keyframe-effect-" + createCanonicalUUIDString());
>     StyleResolver& styleResolver = m_target->styleResolver();
> 
>     for (auto& keyframe : m_parsedKeyframes) {
>+        styleResolver.setNewStateWithElement(*m_target);
>         KeyframeValue keyframeValue(keyframe.computedOffset, nullptr);
>-        auto renderStyle = RenderStyle::createPtr();
>-        // We need to call update() on the FontCascade or we'll hit an ASSERT when parsing font-related properties.
>-        renderStyle->fontCascade().update(nullptr);
>-
>-        auto& styleProperties = keyframe.style;
>-        for (unsigned i = 0; i < styleProperties->propertyCount(); ++i) {
>-            auto cssPropertyId = styleProperties->propertyAt(i).id();
>-            keyframeValue.addProperty(cssPropertyId);
>-            keyframeList.addProperty(cssPropertyId);
>-            styleResolver.applyPropertyToStyle(cssPropertyId, styleProperties->propertyAt(i).value(), WTFMove(renderStyle));
>-            renderStyle = styleResolver.state().takeStyle();
>-        }
> 
>-        keyframeValue.setStyle(RenderStyle::clonePtr(*renderStyle));
>+        auto styleProperties = keyframe.style->immutableCopyIfNeeded();
>+        for (unsigned i = 0; i < styleProperties->propertyCount(); ++i)
>+            keyframeList.addProperty(styleProperties->propertyAt(i).id());
>+
>+        auto keyframeRule = StyleRuleKeyframe::create(WTFMove(styleProperties));
>+        keyframeValue.setStyle(styleResolver.styleForKeyframe(&elementStyle, keyframeRule.ptr(), keyframeValue));
>         keyframeList.insert(WTFMove(keyframeValue));
>     }
> 
>@@ -948,7 +945,7 @@ void KeyframeEffectReadOnly::setTarget(RefPtr<Element>&& newTarget)
>     if (auto* effectAnimation = animation())
>         effectAnimation->effectTargetDidChange(previousTarget.get(), m_target.get());
> 
>-    updateBlendingKeyframes();
>+    m_blendingKeyframes.clear();
> 
>     // We need to invalidate the effect now that the target has changed
>     // to ensure the effect's styles are applied to the new target right away.
>@@ -964,21 +961,14 @@ void KeyframeEffectReadOnly::apply(RenderStyle& targetStyle)
>     if (!m_target)
>         return;
> 
>-    auto progress = iterationProgress();
>-    if (m_startedAccelerated && (!progress || progress.value() >= 1)) {
>-        m_startedAccelerated = false;
>-        animation()->acceleratedStateDidChange();
>-    }
>+    updateBlendingKeyframes(targetStyle);
>+
>+    updateAcceleratedAnimationState();
> 
>+    auto progress = iterationProgress();
>     if (!progress)
>         return;
> 
>-    if (!m_started && !m_startedAccelerated && m_shouldRunAccelerated) {
>-        m_startedAccelerated = true;
>-        animation()->acceleratedStateDidChange();
>-    }
>-    m_started = true;
>-
>     setAnimatedPropertiesInStyle(targetStyle, progress.value());
> 
>     // https://w3c.github.io/web-animations/#side-effects-section
>@@ -1006,10 +996,7 @@ void KeyframeEffectReadOnly::computeShouldRunAccelerated()
> 
> void KeyframeEffectReadOnly::getAnimatedStyle(std::unique_ptr<RenderStyle>& animatedStyle)
> {
>-    if (!animation())
>-        return;
>-
>-    if (!m_blendingKeyframes.size())
>+    if (!m_target || !animation())
>         return;
> 
>     auto progress = iterationProgress();
>@@ -1030,6 +1017,10 @@ void KeyframeEffectReadOnly::setAnimatedPropertiesInStyle(RenderStyle& targetSty
>     // The effect value of a single property referenced by a keyframe effect as one of its target properties,
>     // for a given iteration progress, current iteration and underlying value is calculated as follows.
> 
>+    updateBlendingKeyframes(targetStyle);
>+    if (m_blendingKeyframes.isEmpty())
>+        return;
>+
>     bool isCSSAnimation = is<CSSAnimation>(animation());
> 
>     for (auto cssPropertyId : m_blendingKeyframes.properties()) {
>@@ -1187,28 +1178,66 @@ TimingFunction* KeyframeEffectReadOnly::timingFunctionForKeyframeAtIndex(size_t
>     return downcast<DeclarativeAnimation>(effectAnimation)->backingAnimation().timingFunction();
> }
> 
>-void KeyframeEffectReadOnly::animationPlayStateDidChange(WebAnimation::PlayState playState)
>+void KeyframeEffectReadOnly::updateAcceleratedAnimationState()
> {
>-    if (playState == WebAnimation::PlayState::Running)
>-        addPendingAcceleratedAction(AcceleratedAction::Play);
>-    else if (playState == WebAnimation::PlayState::Paused)
>-        addPendingAcceleratedAction(AcceleratedAction::Pause);
>-};
>+    if (!m_shouldRunAccelerated)
>+        return;
> 
>-void KeyframeEffectReadOnly::animationDidSeek()
>-{
>-    addPendingAcceleratedAction(AcceleratedAction::Seek);
>+    auto localTime = animation()->currentTime();
>+
>+    // If we don't have a localTime or localTime < 0, we either don't have a start time or we're before the startTime
>+    // so we shouldn't be running.
>+    if (!localTime || localTime.value() < 0_s) {
>+        if (isRunningAccelerated())
>+            addPendingAcceleratedAction(AcceleratedAction::Stop);
>+        return;
>+    }
>+
>+    auto playState = animation()->playState();
>+    if (playState == WebAnimation::PlayState::Paused) {
>+        if (m_lastRecordedAcceleratedAction != AcceleratedAction::Pause) {
>+            if (m_lastRecordedAcceleratedAction == AcceleratedAction::Stop)
>+                addPendingAcceleratedAction(AcceleratedAction::Play);
>+            addPendingAcceleratedAction(AcceleratedAction::Pause);
>+        }
>+        return;
>+    }
>+
>+    if (playState == WebAnimation::PlayState::Finished) {
>+        if (isRunningAccelerated())
>+            addPendingAcceleratedAction(AcceleratedAction::Stop);
>+        return;
>+    }
>+
>+    if (playState == WebAnimation::PlayState::Running && localTime >= 0_s) {
>+        if (m_lastRecordedAcceleratedAction != AcceleratedAction::Play)
>+            addPendingAcceleratedAction(AcceleratedAction::Play);
>+        return;
>+    }
> }
> 
> void KeyframeEffectReadOnly::addPendingAcceleratedAction(AcceleratedAction action)
> {
>-    if (!m_shouldRunAccelerated)
>-        return;
>-
>     m_pendingAcceleratedActions.append(action);
>+    if (action != AcceleratedAction::Seek)
>+        m_lastRecordedAcceleratedAction = action;
>     animation()->acceleratedStateDidChange();
> }
> 
>+void KeyframeEffectReadOnly::animationDidSeek()
>+{
>+    // There is no need to seek if we're not playing an animation already. If seeking
>+    // means we're moving into an active state, we'll pick this up in apply().
>+    if (m_shouldRunAccelerated && isRunningAccelerated())
>+        addPendingAcceleratedAction(AcceleratedAction::Seek);
>+}
>+
>+void KeyframeEffectReadOnly::animationSuspensionStateDidChange(bool animationIsSuspended)
>+{
>+    if (m_shouldRunAccelerated)
>+        addPendingAcceleratedAction(animationIsSuspended ? AcceleratedAction::Pause : AcceleratedAction::Play);
>+}
>+
> void KeyframeEffectReadOnly::applyPendingAcceleratedActions()
> {
>     // Once an accelerated animation has been committed, we no longer want to force a layout.
>@@ -1216,34 +1245,39 @@ void KeyframeEffectReadOnly::applyPendingAcceleratedActions()
>     // pending accelerated actions.
>     m_needsForcedLayout = false;
> 
>+    auto pendingAccelerationActions = m_pendingAcceleratedActions;
>+    m_pendingAcceleratedActions.clear();
>+
>+    if (pendingAccelerationActions.isEmpty())
>+        return;
>+
>     auto* renderer = this->renderer();
>     if (!renderer || !renderer->isComposited())
>         return;
> 
>     auto* compositedRenderer = downcast<RenderBoxModelObject>(renderer);
>-    if (m_startedAccelerated) {
>-        auto timeOffset = animation()->currentTime().value().seconds();
>-        if (timing()->delay() < 0_s)
>-            timeOffset = -timing()->delay().seconds();
>-
>-        for (const auto& action : m_pendingAcceleratedActions) {
>-            switch (action) {
>-            case AcceleratedAction::Play:
>-                compositedRenderer->startAnimation(timeOffset, backingAnimationForCompositedRenderer().ptr(), m_blendingKeyframes);
>-                break;
>-            case AcceleratedAction::Pause:
>-                compositedRenderer->animationPaused(timeOffset, m_blendingKeyframes.animationName());
>-                break;
>-            case AcceleratedAction::Seek:
>-                compositedRenderer->animationSeeked(timeOffset, m_blendingKeyframes.animationName());
>-                break;
>-            }
>+
>+    auto timeOffset = animation()->currentTime().value().seconds();
>+    if (timing()->delay() < 0_s)
>+        timeOffset = -timing()->delay().seconds();
>+
>+    for (const auto& action : pendingAccelerationActions) {
>+        switch (action) {
>+        case AcceleratedAction::Play:
>+            compositedRenderer->startAnimation(timeOffset, backingAnimationForCompositedRenderer().ptr(), m_blendingKeyframes);
>+            break;
>+        case AcceleratedAction::Pause:
>+            compositedRenderer->animationPaused(timeOffset, m_blendingKeyframes.animationName());
>+            break;
>+        case AcceleratedAction::Seek:
>+            compositedRenderer->animationSeeked(timeOffset, m_blendingKeyframes.animationName());
>+            break;
>+        case AcceleratedAction::Stop:
>+            compositedRenderer->animationFinished(m_blendingKeyframes.animationName());
>+            if (!m_target->document().renderTreeBeingDestroyed())
>+                m_target->invalidateStyleAndLayerComposition();
>+            break;
>         }
>-        m_pendingAcceleratedActions.clear();
>-    } else {
>-        compositedRenderer->animationFinished(m_blendingKeyframes.animationName());
>-        if (!m_target->document().renderTreeBeingDestroyed())
>-            m_target->invalidateStyleAndLayerComposition();
>     }
> }
> 
>diff --git a/Source/WebCore/animation/KeyframeEffectReadOnly.h b/Source/WebCore/animation/KeyframeEffectReadOnly.h
>index 4cf835385bd8b2863c575b9ecc3eb9baf599246c..8acba015b4a877075650166834c71b7237bf8404 100644
>--- a/Source/WebCore/animation/KeyframeEffectReadOnly.h
>+++ b/Source/WebCore/animation/KeyframeEffectReadOnly.h
>@@ -98,14 +98,14 @@ public:
>     void getAnimatedStyle(std::unique_ptr<RenderStyle>& animatedStyle);
>     void apply(RenderStyle&) override;
>     void invalidate() override;
>-    void animationPlayStateDidChange(WebAnimation::PlayState) final;
>     void animationDidSeek() final;
>+    void animationSuspensionStateDidChange(bool) final;
>     void applyPendingAcceleratedActions();
>-    bool isRunningAccelerated() const { return m_startedAccelerated; }
>+    bool isRunningAccelerated() const { return m_lastRecordedAcceleratedAction != AcceleratedAction::Stop; }
> 
>     RenderElement* renderer() const override;
>     const RenderStyle& currentStyle() const override;
>-    bool isAccelerated() const override { return m_startedAccelerated; }
>+    bool isAccelerated() const override { return m_shouldRunAccelerated; }
>     bool filterFunctionListsMatch() const override { return m_filterFunctionListsMatch; }
>     bool transformFunctionListsMatch() const override { return m_transformFunctionListsMatch; }
> #if ENABLE(FILTERS_LEVEL_2)
>@@ -133,14 +133,15 @@ protected:
>     KeyframeEffectReadOnly(ClassType, Ref<AnimationEffectTimingReadOnly>&&, Element*);
> 
> private:
>-    enum class AcceleratedAction { Play, Pause, Seek };
>+    enum class AcceleratedAction { Play, Pause, Seek, Stop };
>     void addPendingAcceleratedAction(AcceleratedAction);
>+    void updateAcceleratedAnimationState();
>     void setAnimatedPropertiesInStyle(RenderStyle&, double);
>     TimingFunction* timingFunctionForKeyframeAtIndex(size_t);
>     Ref<const Animation> backingAnimationForCompositedRenderer() const;
>     void computedNeedsForcedLayout();
>     void computeStackingContextImpact();
>-    void updateBlendingKeyframes();
>+    void updateBlendingKeyframes(RenderStyle&);
>     void computeCSSAnimationBlendingKeyframes();
>     void computeCSSTransitionBlendingKeyframes(const RenderStyle* oldStyle, const RenderStyle& newStyle);
>     void computeShouldRunAccelerated();
>@@ -154,11 +155,10 @@ private:
> 
>     bool checkForMatchingFilterFunctionLists(CSSPropertyID, const std::function<const FilterOperations& (const RenderStyle&)>&) const;
> 
>+    AcceleratedAction m_lastRecordedAcceleratedAction { AcceleratedAction::Stop };
>     bool m_shouldRunAccelerated { false };
>     bool m_needsForcedLayout { false };
>     bool m_triggersStackingContext { false };
>-    bool m_started { false };
>-    bool m_startedAccelerated { false };
>     bool m_transformFunctionListsMatch { false };
>     bool m_filterFunctionListsMatch { false };
> #if ENABLE(FILTERS_LEVEL_2)
>diff --git a/Source/WebCore/animation/WebAnimation.cpp b/Source/WebCore/animation/WebAnimation.cpp
>index dd27e6aec9ecaf2627b1eabb04d4bd8274d7e650..63d74b6903105d7ead950e63b070fee2fe34aa31 100644
>--- a/Source/WebCore/animation/WebAnimation.cpp
>+++ b/Source/WebCore/animation/WebAnimation.cpp
>@@ -801,9 +801,6 @@ ExceptionOr<void> WebAnimation::play(AutoRewind autoRewind)
>     // 9. Run the procedure to update an animation's finished state for animation with the did seek flag set to false, and the synchronously notify flag set to false.
>     updateFinishedState(DidSeek::No, SynchronouslyNotify::No);
> 
>-    if (m_effect)
>-        m_effect->animationPlayStateDidChange(PlayState::Running);
>-
>     return { };
> }
> 
>@@ -900,9 +897,6 @@ ExceptionOr<void> WebAnimation::pause()
>     // 8. Run the procedure to update an animation's finished state for animation with the did seek flag set to false, and the synchronously notify flag set to false.
>     updateFinishedState(DidSeek::No, SynchronouslyNotify::No);
> 
>-    if (m_effect)
>-        m_effect->animationPlayStateDidChange(PlayState::Paused);
>-
>     return { };
> }
> 
>@@ -1027,10 +1021,10 @@ Seconds WebAnimation::timeToNextRequiredTick() const
> 
> void WebAnimation::resolve(RenderStyle& targetStyle)
> {
>+    updateFinishedState(DidSeek::No, SynchronouslyNotify::Yes);
>+
>     if (m_effect)
>         m_effect->apply(targetStyle);
>-
>-    updateFinishedState(DidSeek::No, SynchronouslyNotify::Yes);
> }
> 
> void WebAnimation::setSuspended(bool isSuspended)
>@@ -1040,12 +1034,8 @@ void WebAnimation::setSuspended(bool isSuspended)
> 
>     m_isSuspended = isSuspended;
> 
>-    if (!is<KeyframeEffectReadOnly>(m_effect))
>-        return;
>-
>-    auto& keyframeEffect = downcast<KeyframeEffectReadOnly>(*m_effect);
>-    if (keyframeEffect.isRunningAccelerated() && playState() == PlayState::Running)
>-        keyframeEffect.animationPlayStateDidChange(isSuspended ? PlayState::Paused : PlayState::Running);
>+    if (m_effect && playState() == PlayState::Running)
>+        m_effect->animationSuspensionStateDidChange(isSuspended);
> }
> 
> void WebAnimation::acceleratedStateDidChange()
>diff --git a/Source/WebCore/css/StyleResolver.cpp b/Source/WebCore/css/StyleResolver.cpp
>index 51d1b3aa7a491c8a70ab707bd0d624dbeb43c3f1..ad59facf12d359ccde96996e369997b323ac43a2 100644
>--- a/Source/WebCore/css/StyleResolver.cpp
>+++ b/Source/WebCore/css/StyleResolver.cpp
>@@ -340,6 +340,12 @@ static inline bool isAtShadowBoundary(const Element& element)
>     return parentNode && parentNode->isShadowRoot();
> }
> 
>+void StyleResolver::setNewStateWithElement(const Element& element)
>+{
>+    // Apply the declaration to the style. This is a simplified version of the logic in styleForElement.
>+    m_state = State(element, nullptr);
>+}
>+
> ElementStyle StyleResolver::styleForElement(const Element& element, const RenderStyle* parentStyle, const RenderStyle* parentBoxStyle, RuleMatchingBehavior matchingBehavior, const SelectorFilter* selectorFilter)
> {
>     RELEASE_ASSERT(!m_isDeleted);
>@@ -514,8 +520,7 @@ void StyleResolver::keyframeStylesForAnimation(const Element& element, const Ren
> 
>     // Construct and populate the style for each keyframe.
>     for (auto& keyframe : *keyframes) {
>-        // Apply the declaration to the style. This is a simplified version of the logic in styleForElement.
>-        m_state = State(element, nullptr);
>+        setNewStateWithElement(element);
> 
>         // Add this keyframe style to all the indicated key times
>         for (auto key : keyframe->keys()) {
>diff --git a/Source/WebCore/css/StyleResolver.h b/Source/WebCore/css/StyleResolver.h
>index 9d225cf882787a04efb97c11b136c749b21a0ef6..0f2f3fe7a9d09d7ff90deb1487a4e71b4a55cbe7 100644
>--- a/Source/WebCore/css/StyleResolver.h
>+++ b/Source/WebCore/css/StyleResolver.h
>@@ -159,7 +159,7 @@ public:
>     void addCurrentSVGFontFaceRules();
>     static void adjustSVGElementStyle(const SVGElement&, RenderStyle&);
> 
>-private:
>+    void setNewStateWithElement(const Element&);
>     std::unique_ptr<RenderStyle> styleForKeyframe(const RenderStyle*, const StyleRuleKeyframe*, KeyframeValue&);
> 
> public:
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index fe69ff9064fb7272c833247192347d32868aef0c..a2b6368cc12bb4ecec34ba67b0bb12ea25d138aa 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,19 @@
>+2018-05-29  Antoine Quint  <graouts@apple.com>
>+
>+        [Web Animations] Handle relative length units
>+        https://bugs.webkit.org/show_bug.cgi?id=186047
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Record WPT test progressions and updated failures.
>+
>+        * platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt:
>+        * platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt:
>+        * platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt:
>+        * platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt:
>+        * platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt:
>+        * platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt:
>+
> 2018-05-25  Antoine Quint  <graouts@apple.com>
> 
>         [Web Animations] WebAnimation objects never get destroyed
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 4611d08e4c867af7945c761e8272f6c642745f22..9e51a123e4805159efc3fe65c3b085e2d6704743 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,14 @@
>+2018-05-29  Antoine Quint  <graouts@apple.com>
>+
>+        [Web Animations] Handle relative length units
>+        https://bugs.webkit.org/show_bug.cgi?id=186047
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Record WPT test progressions.
>+
>+        * web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-context-expected.txt:
>+
> 2018-05-24  Frederic Wang  <fwang@igalia.com>
> 
>         Import Web Platform Tests for WOFF2
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-context-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-context-expected.txt
>index 537155887ecf8c94f125b3180c7c2d3c5291d598..43864038dd0645fddccf172f6b8a02aa34706d2a 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-context-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-context-expected.txt
>@@ -1,7 +1,7 @@
> 
>-FAIL Effect values reflect changes to font-size on element assert_equals: Effect value before updating font-size expected "150px" but got "0px"
>-FAIL Effect values reflect changes to font-size on parent element assert_equals: Effect value before updating font-size on parent element expected "150px" but got "0px"
>-FAIL Effect values reflect changes to font-size when computed style is not immediately flushed assert_equals: Effect value after updating font-size on parent element expected "300px" but got "0px"
>-FAIL Effect values reflect changes to font-size from reparenting assert_equals: Effect value after attaching to font-size:10px parent expected "150px" but got "0px"
>-FAIL Effect values reflect changes to target element assert_equals: Effect value before updating target element expected "150px" but got "0px"
>+FAIL Effect values reflect changes to font-size on element assert_equals: Effect value after updating font-size expected "300px" but got "150px"
>+FAIL Effect values reflect changes to font-size on parent element assert_equals: Effect value after updating font-size on parent element expected "300px" but got "150px"
>+PASS Effect values reflect changes to font-size when computed style is not immediately flushed 
>+FAIL Effect values reflect changes to font-size from reparenting assert_equals: Effect value after attaching to font-size:20px parent expected "300px" but got "150px"
>+PASS Effect values reflect changes to target element 
> 
>diff --git a/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt b/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
>index 0b0a92b285613c9052865d92627e5d9cd022df2b..0b8a9b8c00316b1ae03a8ca17662934345103fad 100644
>--- a/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
>+++ b/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
>@@ -17,8 +17,8 @@ FAIL border-bottom-color supports animating as color of #RGBa assert_equals: The
> FAIL border-bottom-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-bottom-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-bottom-width (type: length) has testAccumulation function 
>-FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-image-outset (type: discrete) has testAccumulation function 
> PASS border-image-outset: "5 6 7 8" onto "1 2 3 4" 
> PASS border-image-outset: "1 2 3 4" onto "5 6 7 8" 
>@@ -39,8 +39,8 @@ FAIL border-left-color supports animating as color of #RGBa assert_equals: The v
> FAIL border-left-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-left-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-left-width (type: length) has testAccumulation function 
>-FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-right-color (type: color) has testAccumulation function 
> FAIL border-right-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-right-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -49,11 +49,11 @@ FAIL border-right-color supports animating as color of #RGBa assert_equals: The
> FAIL border-right-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-right-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-right-width (type: length) has testAccumulation function 
>-FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-spacing (type: lengthPair) has testAccumulation function 
> FAIL border-spacing: length pair assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
>-FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "1px 1px"
>+FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
> PASS border-top-color (type: color) has testAccumulation function 
> FAIL border-top-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-top-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -62,8 +62,8 @@ FAIL border-top-color supports animating as color of #RGBa assert_equals: The va
> FAIL border-top-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-top-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-top-width (type: length) has testAccumulation function 
>-FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS box-shadow (type: boxShadowList) has testAccumulation function 
> FAIL box-shadow: shadow assert_equals: The value should be rgb(240, 240, 240) 20px 20px 20px 20px at 0ms expected "rgb(240, 240, 240) 20px 20px 20px 20px" but got "rgb(120, 120, 120) 10px 10px 10px 10px"
> PASS caret-color (type: color) has testAccumulation function 
>@@ -94,7 +94,7 @@ PASS column-count: "10" onto "auto"
> FAIL column-count: "auto" onto "10" assert_equals: The value should be auto at 0ms expected "auto" but got "0"
> PASS column-gap (type: length) has testAccumulation function 
> FAIL column-gap: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-gap (type: discrete) has testAccumulation function 
> PASS column-gap: "200px" onto "normal" 
> PASS column-gap: "normal" onto "200px" 
>@@ -106,11 +106,11 @@ FAIL column-rule-color supports animating as color of #RGBa assert_equals: The v
> FAIL column-rule-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL column-rule-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS column-rule-width (type: length) has testAccumulation function 
>-FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: length) has testAccumulation function 
> FAIL column-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: discrete) has testAccumulation function 
> PASS column-width: "1px" onto "auto" 
> FAIL column-width: "auto" onto "1px" assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
>@@ -137,7 +137,7 @@ PASS font-style: "oblique" onto "italic"
> FAIL font-style: "italic" onto "oblique" assert_equals: The value should be italic at 0ms expected "italic" but got "oblique"
> PASS letter-spacing (type: length) has testAccumulation function 
> FAIL letter-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS lighting-color (type: color) has testAccumulation function 
> FAIL lighting-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL lighting-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -159,11 +159,11 @@ PASS outline-offset (type: length) has testAccumulation function
> FAIL outline-offset: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> FAIL outline-offset: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> PASS outline-width (type: length) has testAccumulation function 
>-FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS perspective (type: length) has testAccumulation function 
> FAIL perspective: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS shape-outside (type: discrete) has testAccumulation function 
> PASS shape-outside: "url("http://localhost/test-2")" onto "url("http://localhost/test-1")" 
> PASS shape-outside: "url("http://localhost/test-1")" onto "url("http://localhost/test-2")" 
>@@ -211,14 +211,14 @@ FAIL visibility: onto "visible" assert_equals: The value should be visible at 10
> PASS visibility: onto "hidden" 
> PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function 
> FAIL word-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> FAIL word-spacing: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "1.75px"
> FAIL word-spacing: units "%" onto "px" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "0.25px"
> FAIL word-spacing: units "px" onto "%" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "10px"
>-FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "2px"
>+FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "20px"
> FAIL word-spacing: units "%" onto "rem" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "0.25px"
>-FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "2px"
>-FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "0px"
>-FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "0px"
>+FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "10px"
> FAIL word-spacing: calc assert_equals: The value should be calc(30px + 30%) at 0ms expected "calc(30px + 30%)" but got "0px"
> 
>diff --git a/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt b/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
>index e1af98d1bfc64b9533d5934e6f8e7d703618e061..0134514bc7ea956bfa89fc894dff14cbec5b6d66 100644
>--- a/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
>+++ b/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
>@@ -17,8 +17,8 @@ FAIL border-bottom-color supports animating as color of #RGBa assert_equals: The
> FAIL border-bottom-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-bottom-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-bottom-width (type: length) has testAddition function 
>-FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-image-outset (type: discrete) has testAddition function 
> PASS border-image-outset: "5 6 7 8" onto "1 2 3 4" 
> PASS border-image-outset: "1 2 3 4" onto "5 6 7 8" 
>@@ -39,8 +39,8 @@ FAIL border-left-color supports animating as color of #RGBa assert_equals: The v
> FAIL border-left-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-left-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-left-width (type: length) has testAddition function 
>-FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-right-color (type: color) has testAddition function 
> FAIL border-right-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-right-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -49,11 +49,11 @@ FAIL border-right-color supports animating as color of #RGBa assert_equals: The
> FAIL border-right-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-right-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-right-width (type: length) has testAddition function 
>-FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-spacing (type: lengthPair) has testAddition function 
> FAIL border-spacing: length pair assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
>-FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "1px 1px"
>+FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
> PASS border-top-color (type: color) has testAddition function 
> FAIL border-top-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-top-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -62,8 +62,8 @@ FAIL border-top-color supports animating as color of #RGBa assert_equals: The va
> FAIL border-top-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-top-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-top-width (type: length) has testAddition function 
>-FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS box-shadow (type: boxShadowList) has testAddition function 
> FAIL box-shadow: shadow assert_equals: The value should be rgb(0, 0, 0) 0px 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px 0px at 0ms expected "rgb(0, 0, 0) 0px 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px 0px" but got "rgb(120, 120, 120) 10px 10px 10px 0px"
> PASS caret-color (type: color) has testAddition function 
>@@ -94,7 +94,7 @@ PASS column-count: "10" onto "auto"
> FAIL column-count: "auto" onto "10" assert_equals: The value should be auto at 0ms expected "auto" but got "0"
> PASS column-gap (type: length) has testAddition function 
> FAIL column-gap: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-gap (type: discrete) has testAddition function 
> PASS column-gap: "200px" onto "normal" 
> PASS column-gap: "normal" onto "200px" 
>@@ -106,11 +106,11 @@ FAIL column-rule-color supports animating as color of #RGBa assert_equals: The v
> FAIL column-rule-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL column-rule-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS column-rule-width (type: length) has testAddition function 
>-FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: length) has testAddition function 
> FAIL column-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: discrete) has testAddition function 
> PASS column-width: "1px" onto "auto" 
> FAIL column-width: "auto" onto "1px" assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
>@@ -137,7 +137,7 @@ PASS font-style: "oblique" onto "italic"
> FAIL font-style: "italic" onto "oblique" assert_equals: The value should be italic at 0ms expected "italic" but got "oblique"
> PASS letter-spacing (type: length) has testAddition function 
> FAIL letter-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS lighting-color (type: color) has testAddition function 
> FAIL lighting-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL lighting-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -159,11 +159,11 @@ PASS outline-offset (type: length) has testAddition function
> FAIL outline-offset: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> FAIL outline-offset: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> PASS outline-width (type: length) has testAddition function 
>-FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS perspective (type: length) has testAddition function 
> FAIL perspective: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS shape-outside (type: discrete) has testAddition function 
> PASS shape-outside: "url("http://localhost/test-2")" onto "url("http://localhost/test-1")" 
> PASS shape-outside: "url("http://localhost/test-1")" onto "url("http://localhost/test-2")" 
>@@ -207,14 +207,14 @@ FAIL visibility: onto "visible" assert_equals: The value should be visible at 10
> PASS visibility: onto "hidden" 
> PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function 
> FAIL word-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> FAIL word-spacing: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "1.75px"
> FAIL word-spacing: units "%" onto "px" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "0.25px"
> FAIL word-spacing: units "px" onto "%" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "10px"
>-FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "2px"
>+FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "20px"
> FAIL word-spacing: units "%" onto "rem" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "0.25px"
>-FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "2px"
>-FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "0px"
>-FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "0px"
>+FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "10px"
> FAIL word-spacing: calc assert_equals: The value should be calc(30px + 30%) at 0ms expected "calc(30px + 30%)" but got "0px"
> 
>diff --git a/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt b/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
>index f87e9664b08bbc9e67d39a289ba4dfde1f0fd426..0239cb6947840d0bc1ac5608ae406fec7a1a3601 100644
>--- a/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
>+++ b/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
>@@ -18,8 +18,8 @@ PASS border-bottom-color supports animating as color of #RGBa
> PASS border-bottom-color supports animating as color of rgba() 
> PASS border-bottom-color supports animating as color of hsla() 
> PASS border-bottom-width (type: length) has testInterpolation function 
>-FAIL border-bottom-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-bottom-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-bottom-width supports animating as a length 
>+PASS border-bottom-width supports animating as a length of rem 
> PASS border-image-outset (type: discrete) has testInterpolation function 
> FAIL border-image-outset uses discrete animation when animating between "1 2 3 4" and "5 6 7 8" with linear easing assert_equals: The value should be 1 2 3 4 at 499ms expected "1 2 3 4" but got "2.996000051498413 3.996000051498413 4.995999813079834 5.995999813079834"
> FAIL border-image-outset uses discrete animation when animating between "1 2 3 4" and "5 6 7 8" with effect easing assert_equals: The value should be 1 2 3 4 at 940ms expected "1 2 3 4" but got "2.711512804031372 3.711512804031372 4.711513042449951 5.711513042449951"
>@@ -44,8 +44,8 @@ PASS border-left-color supports animating as color of #RGBa
> PASS border-left-color supports animating as color of rgba() 
> PASS border-left-color supports animating as color of hsla() 
> PASS border-left-width (type: length) has testInterpolation function 
>-FAIL border-left-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-left-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-left-width supports animating as a length 
>+PASS border-left-width supports animating as a length of rem 
> PASS border-right-color (type: color) has testInterpolation function 
> PASS border-right-color supports animating as color of rgb() 
> PASS border-right-color supports animating as color of #RGB 
>@@ -54,11 +54,11 @@ PASS border-right-color supports animating as color of #RGBa
> PASS border-right-color supports animating as color of rgba() 
> PASS border-right-color supports animating as color of hsla() 
> PASS border-right-width (type: length) has testInterpolation function 
>-FAIL border-right-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-right-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-right-width supports animating as a length 
>+PASS border-right-width supports animating as a length of rem 
> PASS border-spacing (type: lengthPair) has testInterpolation function 
> PASS border-spacing supports animating as a length pair 
>-FAIL border-spacing supports animating as a length pair of rem assert_equals: The value should be 30px 30px at 500ms expected "30px 30px" but got "3px 3px"
>+PASS border-spacing supports animating as a length pair of rem 
> PASS border-top-color (type: color) has testInterpolation function 
> PASS border-top-color supports animating as color of rgb() 
> PASS border-top-color supports animating as color of #RGB 
>@@ -67,8 +67,8 @@ PASS border-top-color supports animating as color of #RGBa
> PASS border-top-color supports animating as color of rgba() 
> PASS border-top-color supports animating as color of hsla() 
> PASS border-top-width (type: length) has testInterpolation function 
>-FAIL border-top-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-top-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-top-width supports animating as a length 
>+PASS border-top-width supports animating as a length of rem 
> PASS box-shadow (type: boxShadowList) has testInterpolation function 
> FAIL box-shadow: from none to other assert_equals: The value should be rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
> FAIL box-shadow: from other to none assert_equals: The value should be rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
>@@ -76,7 +76,7 @@ PASS box-shadow: single shadow
> PASS box-shadow: shadow list 
> FAIL box-shadow: mismatched list length (from shorter to longer) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
> FAIL box-shadow: mismatched list length (from longer to shorter) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
>-FAIL box-shadow: with currentcolor assert_equals: The value should be rgb(0, 255, 0) 5px 5px 5px 5px at 500ms expected "rgb(0, 255, 0) 5px 5px 5px 5px" but got "rgb(0, 0, 0) 5px 5px 5px 5px"
>+PASS box-shadow: with currentcolor 
> PASS caret-color (type: color) has testInterpolation function 
> PASS caret-color supports animating as color of rgb() 
> PASS caret-color supports animating as color of #RGB 
>@@ -108,7 +108,7 @@ FAIL column-count uses discrete animation when animating between "auto" and "10"
> FAIL column-count uses discrete animation when animating between "auto" and "10" with keyframe easing assert_equals: The value should be auto at 0ms expected "auto" but got "0"
> PASS column-gap (type: length) has testInterpolation function 
> PASS column-gap supports animating as a length 
>-FAIL column-gap supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS column-gap supports animating as a length of rem 
> PASS column-gap (type: discrete) has testInterpolation function 
> FAIL column-gap uses discrete animation when animating between "normal" and "200px" with linear easing assert_equals: The value should be normal at 0ms expected "normal" but got "200px"
> FAIL column-gap uses discrete animation when animating between "normal" and "200px" with effect easing assert_equals: The value should be normal at 0ms expected "normal" but got "200px"
>@@ -121,11 +121,11 @@ PASS column-rule-color supports animating as color of #RGBa
> PASS column-rule-color supports animating as color of rgba() 
> PASS column-rule-color supports animating as color of hsla() 
> PASS column-rule-width (type: length) has testInterpolation function 
>-FAIL column-rule-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL column-rule-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS column-rule-width supports animating as a length 
>+PASS column-rule-width supports animating as a length of rem 
> PASS column-width (type: length) has testInterpolation function 
> PASS column-width supports animating as a length 
>-FAIL column-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS column-width supports animating as a length of rem 
> PASS column-width (type: discrete) has testInterpolation function 
> FAIL column-width uses discrete animation when animating between "auto" and "1px" with linear easing assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
> FAIL column-width uses discrete animation when animating between "auto" and "1px" with effect easing assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
>@@ -162,7 +162,7 @@ FAIL font-style uses discrete animation when animating between "italic" and "obl
> FAIL font-style uses discrete animation when animating between "italic" and "oblique" with keyframe easing assert_equals: The value should be italic at 0ms expected "italic" but got "oblique"
> PASS letter-spacing (type: length) has testInterpolation function 
> PASS letter-spacing supports animating as a length 
>-FAIL letter-spacing supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS letter-spacing supports animating as a length of rem 
> PASS lighting-color (type: color) has testInterpolation function 
> PASS lighting-color supports animating as color of rgb() 
> PASS lighting-color supports animating as color of #RGB 
>@@ -185,11 +185,11 @@ PASS outline-offset (type: length) has testInterpolation function
> FAIL outline-offset supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
> FAIL outline-offset supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
> PASS outline-width (type: length) has testInterpolation function 
>-FAIL outline-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL outline-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS outline-width supports animating as a length 
>+PASS outline-width supports animating as a length of rem 
> PASS perspective (type: length) has testInterpolation function 
> PASS perspective supports animating as a length 
>-FAIL perspective supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS perspective supports animating as a length of rem 
> PASS shape-outside (type: discrete) has testInterpolation function 
> FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with linear easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
> FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with effect easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
>@@ -223,7 +223,7 @@ PASS text-shadow: single shadow
> PASS text-shadow: shadow list 
> FAIL text-shadow: mismatched list length (from longer to shorter) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px" but got "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.501961) 5px 5px 5px"
> FAIL text-shadow: mismatched list length (from shorter to longer) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px" but got "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.501961) 5px 5px 5px"
>-FAIL text-shadow: with currentcolor assert_equals: The value should be rgb(0, 255, 0) 5px 5px 5px at 500ms expected "rgb(0, 255, 0) 5px 5px 5px" but got "rgb(0, 0, 0) 5px 5px 5px"
>+PASS text-shadow: with currentcolor 
> PASS transform (type: transformList) has testInterpolation function 
> PASS transform: translate 
> PASS transform: rotate 
>@@ -247,11 +247,11 @@ FAIL visibility uses visibility animation when animating from "hidden" to "colla
> PASS visibility uses visibility animation when animating from "visible" to "hidden" with easeInOutBack easing 
> PASS word-spacing (type: lengthPercentageOrCalc) has testInterpolation function 
> PASS word-spacing supports animating as a length 
>-FAIL word-spacing supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS word-spacing supports animating as a length of rem 
> FAIL word-spacing supports animating as a percentage assert_equals: The value should be 30% at 500ms expected "30%" but got "0.75px"
> FAIL word-spacing supports animating as combination units "px" and "%" assert_equals: The value should be calc(5px + 10%) at 500ms expected "calc(5px + 10%)" but got "3355448px"
>-FAIL word-spacing supports animating as combination units "%" and "em" assert_equals: The value should be calc(10px + 5%) at 500ms expected "calc(10px + 5%)" but got "0.125px"
>-FAIL word-spacing supports animating as combination units "em" and "rem" assert_equals: The value should be 15px at 500ms expected "15px" but got "1px"
>+FAIL word-spacing supports animating as combination units "%" and "em" assert_equals: The value should be calc(10px + 5%) at 500ms expected "calc(10px + 5%)" but got "1677731.5px"
>+PASS word-spacing supports animating as combination units "em" and "rem" 
> FAIL word-spacing supports animating as combination units "px" and "calc" assert_equals: The value should be calc(10px + 10%) at 500ms expected "calc(10px + 10%)" but got "0px"
> FAIL word-spacing supports animating as a calc assert_equals: The value should be calc(15px + 15%) at 500ms expected "calc(15px + 15%)" but got "0px"
> 
>diff --git a/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt b/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
>index 5b0f5226321d04e95a190004eab7a4473c8451bd..d59152b747a2f5f17cd7162e75ed9970c1a4f18b 100644
>--- a/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
>+++ b/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
>@@ -17,8 +17,8 @@ FAIL border-bottom-color supports animating as color of #RGBa assert_equals: The
> FAIL border-bottom-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-bottom-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-bottom-width (type: length) has testAccumulation function 
>-FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-image-outset (type: discrete) has testAccumulation function 
> PASS border-image-outset: "5 6 7 8" onto "1 2 3 4" 
> PASS border-image-outset: "1 2 3 4" onto "5 6 7 8" 
>@@ -39,8 +39,8 @@ FAIL border-left-color supports animating as color of #RGBa assert_equals: The v
> FAIL border-left-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-left-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-left-width (type: length) has testAccumulation function 
>-FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-right-color (type: color) has testAccumulation function 
> FAIL border-right-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-right-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -49,11 +49,11 @@ FAIL border-right-color supports animating as color of #RGBa assert_equals: The
> FAIL border-right-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-right-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-right-width (type: length) has testAccumulation function 
>-FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-spacing (type: lengthPair) has testAccumulation function 
> FAIL border-spacing: length pair assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
>-FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "1px 1px"
>+FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
> PASS border-top-color (type: color) has testAccumulation function 
> FAIL border-top-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-top-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -62,8 +62,8 @@ FAIL border-top-color supports animating as color of #RGBa assert_equals: The va
> FAIL border-top-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-top-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-top-width (type: length) has testAccumulation function 
>-FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS box-shadow (type: boxShadowList) has testAccumulation function 
> FAIL box-shadow: shadow assert_equals: The value should be rgb(240, 240, 240) 20px 20px 20px 20px at 0ms expected "rgb(240, 240, 240) 20px 20px 20px 20px" but got "rgb(120, 120, 120) 10px 10px 10px 10px"
> PASS caret-color (type: color) has testAccumulation function 
>@@ -94,7 +94,7 @@ PASS column-count: "10" onto "auto"
> FAIL column-count: "auto" onto "10" assert_equals: The value should be auto at 0ms expected "auto" but got "0"
> PASS column-gap (type: length) has testAccumulation function 
> FAIL column-gap: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-gap (type: discrete) has testAccumulation function 
> PASS column-gap: "200px" onto "normal" 
> PASS column-gap: "normal" onto "200px" 
>@@ -106,11 +106,11 @@ FAIL column-rule-color supports animating as color of #RGBa assert_equals: The v
> FAIL column-rule-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL column-rule-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS column-rule-width (type: length) has testAccumulation function 
>-FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: length) has testAccumulation function 
> FAIL column-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: discrete) has testAccumulation function 
> PASS column-width: "1px" onto "auto" 
> FAIL column-width: "auto" onto "1px" assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
>@@ -144,7 +144,7 @@ PASS font-variation-settings: "normal" onto ""wdth" 5"
> PASS font-variation-settings: ""wdth" 5" onto "normal" 
> PASS letter-spacing (type: length) has testAccumulation function 
> FAIL letter-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS lighting-color (type: color) has testAccumulation function 
> FAIL lighting-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL lighting-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -166,11 +166,11 @@ PASS outline-offset (type: length) has testAccumulation function
> FAIL outline-offset: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> FAIL outline-offset: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> PASS outline-width (type: length) has testAccumulation function 
>-FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS perspective (type: length) has testAccumulation function 
> FAIL perspective: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS shape-outside (type: discrete) has testAccumulation function 
> PASS shape-outside: "url("http://localhost/test-2")" onto "url("http://localhost/test-1")" 
> PASS shape-outside: "url("http://localhost/test-1")" onto "url("http://localhost/test-2")" 
>@@ -218,14 +218,14 @@ FAIL visibility: onto "visible" assert_equals: The value should be visible at 10
> PASS visibility: onto "hidden" 
> PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function 
> FAIL word-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> FAIL word-spacing: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "1.75px"
> FAIL word-spacing: units "%" onto "px" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "0.25px"
> FAIL word-spacing: units "px" onto "%" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "10px"
>-FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "2px"
>+FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "20px"
> FAIL word-spacing: units "%" onto "rem" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "0.25px"
>-FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "2px"
>-FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "0px"
>-FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "0px"
>+FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "10px"
> FAIL word-spacing: calc assert_equals: The value should be calc(30px + 30%) at 0ms expected "calc(30px + 30%)" but got "0px"
> 
>diff --git a/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt b/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
>index 8d4a22293a78a8abd57727147fcfca130eabe522..d2e681379320e15ac51818b07df097bfa6995476 100644
>--- a/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
>+++ b/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
>@@ -17,8 +17,8 @@ FAIL border-bottom-color supports animating as color of #RGBa assert_equals: The
> FAIL border-bottom-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-bottom-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-bottom-width (type: length) has testAddition function 
>-FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-bottom-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-bottom-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-image-outset (type: discrete) has testAddition function 
> PASS border-image-outset: "5 6 7 8" onto "1 2 3 4" 
> PASS border-image-outset: "1 2 3 4" onto "5 6 7 8" 
>@@ -39,8 +39,8 @@ FAIL border-left-color supports animating as color of #RGBa assert_equals: The v
> FAIL border-left-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-left-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-left-width (type: length) has testAddition function 
>-FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-left-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-left-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-right-color (type: color) has testAddition function 
> FAIL border-right-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-right-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -49,11 +49,11 @@ FAIL border-right-color supports animating as color of #RGBa assert_equals: The
> FAIL border-right-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-right-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-right-width (type: length) has testAddition function 
>-FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-right-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-right-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS border-spacing (type: lengthPair) has testAddition function 
> FAIL border-spacing: length pair assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
>-FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "1px 1px"
>+FAIL border-spacing: length pair of rem assert_equals: The value should be 20px 20px at 0ms expected "20px 20px" but got "10px 10px"
> PASS border-top-color (type: color) has testAddition function 
> FAIL border-top-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL border-top-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -62,8 +62,8 @@ FAIL border-top-color supports animating as color of #RGBa assert_equals: The va
> FAIL border-top-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL border-top-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS border-top-width (type: length) has testAddition function 
>-FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL border-top-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL border-top-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS box-shadow (type: boxShadowList) has testAddition function 
> FAIL box-shadow: shadow assert_equals: The value should be rgb(0, 0, 0) 0px 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px 0px at 0ms expected "rgb(0, 0, 0) 0px 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px 0px" but got "rgb(120, 120, 120) 10px 10px 10px 0px"
> PASS caret-color (type: color) has testAddition function 
>@@ -94,7 +94,7 @@ PASS column-count: "10" onto "auto"
> FAIL column-count: "auto" onto "10" assert_equals: The value should be auto at 0ms expected "auto" but got "0"
> PASS column-gap (type: length) has testAddition function 
> FAIL column-gap: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-gap: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-gap (type: discrete) has testAddition function 
> PASS column-gap: "200px" onto "normal" 
> PASS column-gap: "normal" onto "200px" 
>@@ -106,11 +106,11 @@ FAIL column-rule-color supports animating as color of #RGBa assert_equals: The v
> FAIL column-rule-color supports animating as color of rgba() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> FAIL column-rule-color supports animating as color of hsla() assert_equals: The value should be rgb(230, 128, 128) at 0ms expected "rgb(230, 128, 128)" but got "rgba(255, 0, 0, 0.4)"
> PASS column-rule-width (type: length) has testAddition function 
>-FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL column-rule-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL column-rule-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: length) has testAddition function 
> FAIL column-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL column-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS column-width (type: discrete) has testAddition function 
> PASS column-width: "1px" onto "auto" 
> FAIL column-width: "auto" onto "1px" assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
>@@ -144,7 +144,7 @@ PASS font-variation-settings: "normal" onto ""wdth" 5"
> PASS font-variation-settings: ""wdth" 5" onto "normal" 
> PASS letter-spacing (type: length) has testAddition function 
> FAIL letter-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL letter-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS lighting-color (type: color) has testAddition function 
> FAIL lighting-color supports animating as color of rgb() with overflowed  from and to values assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
> FAIL lighting-color supports animating as color of #RGB assert_equals: The value should be rgb(255, 128, 128) at 0ms expected "rgb(255, 128, 128)" but got "rgb(255, 0, 0)"
>@@ -166,11 +166,11 @@ PASS outline-offset (type: length) has testAddition function
> FAIL outline-offset: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> FAIL outline-offset: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
> PASS outline-width (type: length) has testAddition function 
>-FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>-FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "0px"
>+FAIL outline-width: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>+FAIL outline-width: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS perspective (type: length) has testAddition function 
> FAIL perspective: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL perspective: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> PASS shape-outside (type: discrete) has testAddition function 
> PASS shape-outside: "url("http://localhost/test-2")" onto "url("http://localhost/test-1")" 
> PASS shape-outside: "url("http://localhost/test-1")" onto "url("http://localhost/test-2")" 
>@@ -214,14 +214,14 @@ FAIL visibility: onto "visible" assert_equals: The value should be visible at 10
> PASS visibility: onto "hidden" 
> PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function 
> FAIL word-spacing: length assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
>-FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "1px"
>+FAIL word-spacing: length of rem assert_equals: The value should be 20px at 0ms expected "20px" but got "10px"
> FAIL word-spacing: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "1.75px"
> FAIL word-spacing: units "%" onto "px" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "0.25px"
> FAIL word-spacing: units "px" onto "%" assert_equals: The value should be calc(10px + 10%) at 0ms expected "calc(10px + 10%)" but got "10px"
>-FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "2px"
>+FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "20px"
> FAIL word-spacing: units "%" onto "rem" assert_equals: The value should be calc(20px + 10%) at 0ms expected "calc(20px + 10%)" but got "0.25px"
>-FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "2px"
>-FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "0px"
>-FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "0px"
>+FAIL word-spacing: units "rem" onto "em" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "em" onto "rem" assert_equals: The value should be 40px at 0ms expected "40px" but got "20px"
>+FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(30px + 20%) at 0ms expected "calc(30px + 20%)" but got "10px"
> FAIL word-spacing: calc assert_equals: The value should be calc(30px + 30%) at 0ms expected "calc(30px + 30%)" but got "0px"
> 
>diff --git a/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt b/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
>index d4d68e2fd7930ea8d8204ebc4262e21f63b313a6..90af75fac59266365bcd7080524a794b437a509f 100644
>--- a/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
>+++ b/LayoutTests/platform/mac/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
>@@ -18,8 +18,8 @@ PASS border-bottom-color supports animating as color of #RGBa
> PASS border-bottom-color supports animating as color of rgba() 
> PASS border-bottom-color supports animating as color of hsla() 
> PASS border-bottom-width (type: length) has testInterpolation function 
>-FAIL border-bottom-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-bottom-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-bottom-width supports animating as a length 
>+PASS border-bottom-width supports animating as a length of rem 
> PASS border-image-outset (type: discrete) has testInterpolation function 
> FAIL border-image-outset uses discrete animation when animating between "1 2 3 4" and "5 6 7 8" with linear easing assert_equals: The value should be 1 2 3 4 at 499ms expected "1 2 3 4" but got "2.996000051498413 3.996000051498413 4.995999813079834 5.995999813079834"
> FAIL border-image-outset uses discrete animation when animating between "1 2 3 4" and "5 6 7 8" with effect easing assert_equals: The value should be 1 2 3 4 at 940ms expected "1 2 3 4" but got "2.711512804031372 3.711512804031372 4.711513042449951 5.711513042449951"
>@@ -44,8 +44,8 @@ PASS border-left-color supports animating as color of #RGBa
> PASS border-left-color supports animating as color of rgba() 
> PASS border-left-color supports animating as color of hsla() 
> PASS border-left-width (type: length) has testInterpolation function 
>-FAIL border-left-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-left-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-left-width supports animating as a length 
>+PASS border-left-width supports animating as a length of rem 
> PASS border-right-color (type: color) has testInterpolation function 
> PASS border-right-color supports animating as color of rgb() 
> PASS border-right-color supports animating as color of #RGB 
>@@ -54,11 +54,11 @@ PASS border-right-color supports animating as color of #RGBa
> PASS border-right-color supports animating as color of rgba() 
> PASS border-right-color supports animating as color of hsla() 
> PASS border-right-width (type: length) has testInterpolation function 
>-FAIL border-right-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-right-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-right-width supports animating as a length 
>+PASS border-right-width supports animating as a length of rem 
> PASS border-spacing (type: lengthPair) has testInterpolation function 
> PASS border-spacing supports animating as a length pair 
>-FAIL border-spacing supports animating as a length pair of rem assert_equals: The value should be 30px 30px at 500ms expected "30px 30px" but got "3px 3px"
>+PASS border-spacing supports animating as a length pair of rem 
> PASS border-top-color (type: color) has testInterpolation function 
> PASS border-top-color supports animating as color of rgb() 
> PASS border-top-color supports animating as color of #RGB 
>@@ -67,8 +67,8 @@ PASS border-top-color supports animating as color of #RGBa
> PASS border-top-color supports animating as color of rgba() 
> PASS border-top-color supports animating as color of hsla() 
> PASS border-top-width (type: length) has testInterpolation function 
>-FAIL border-top-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL border-top-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS border-top-width supports animating as a length 
>+PASS border-top-width supports animating as a length of rem 
> PASS box-shadow (type: boxShadowList) has testInterpolation function 
> FAIL box-shadow: from none to other assert_equals: The value should be rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
> FAIL box-shadow: from other to none assert_equals: The value should be rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
>@@ -76,7 +76,7 @@ PASS box-shadow: single shadow
> PASS box-shadow: shadow list 
> FAIL box-shadow: mismatched list length (from shorter to longer) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
> FAIL box-shadow: mismatched list length (from longer to shorter) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.5) 5px 5px 5px 0px" but got "rgb(150, 150, 150) 15px 15px 15px 10px, rgba(100, 100, 100, 0.501961) 5px 5px 5px 0px"
>-FAIL box-shadow: with currentcolor assert_equals: The value should be rgb(0, 255, 0) 5px 5px 5px 5px at 500ms expected "rgb(0, 255, 0) 5px 5px 5px 5px" but got "rgb(0, 0, 0) 5px 5px 5px 5px"
>+PASS box-shadow: with currentcolor 
> PASS caret-color (type: color) has testInterpolation function 
> PASS caret-color supports animating as color of rgb() 
> PASS caret-color supports animating as color of #RGB 
>@@ -108,7 +108,7 @@ FAIL column-count uses discrete animation when animating between "auto" and "10"
> FAIL column-count uses discrete animation when animating between "auto" and "10" with keyframe easing assert_equals: The value should be auto at 0ms expected "auto" but got "0"
> PASS column-gap (type: length) has testInterpolation function 
> PASS column-gap supports animating as a length 
>-FAIL column-gap supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS column-gap supports animating as a length of rem 
> PASS column-gap (type: discrete) has testInterpolation function 
> FAIL column-gap uses discrete animation when animating between "normal" and "200px" with linear easing assert_equals: The value should be normal at 0ms expected "normal" but got "200px"
> FAIL column-gap uses discrete animation when animating between "normal" and "200px" with effect easing assert_equals: The value should be normal at 0ms expected "normal" but got "200px"
>@@ -121,11 +121,11 @@ PASS column-rule-color supports animating as color of #RGBa
> PASS column-rule-color supports animating as color of rgba() 
> PASS column-rule-color supports animating as color of hsla() 
> PASS column-rule-width (type: length) has testInterpolation function 
>-FAIL column-rule-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL column-rule-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS column-rule-width supports animating as a length 
>+PASS column-rule-width supports animating as a length of rem 
> PASS column-width (type: length) has testInterpolation function 
> PASS column-width supports animating as a length 
>-FAIL column-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS column-width supports animating as a length of rem 
> PASS column-width (type: discrete) has testInterpolation function 
> FAIL column-width uses discrete animation when animating between "auto" and "1px" with linear easing assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
> FAIL column-width uses discrete animation when animating between "auto" and "1px" with effect easing assert_equals: The value should be auto at 0ms expected "auto" but got "0px"
>@@ -173,7 +173,7 @@ FAIL font-variation-settings uses discrete animation when animating between ""wd
> FAIL font-variation-settings uses discrete animation when animating between ""wdth" 5" and "normal" with keyframe easing assert_equals: The value should be "wdth" 5 at 0ms expected "\"wdth\" 5" but got "normal"
> PASS letter-spacing (type: length) has testInterpolation function 
> PASS letter-spacing supports animating as a length 
>-FAIL letter-spacing supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS letter-spacing supports animating as a length of rem 
> PASS lighting-color (type: color) has testInterpolation function 
> PASS lighting-color supports animating as color of rgb() 
> PASS lighting-color supports animating as color of #RGB 
>@@ -196,11 +196,11 @@ PASS outline-offset (type: length) has testInterpolation function
> FAIL outline-offset supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
> FAIL outline-offset supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
> PASS outline-width (type: length) has testInterpolation function 
>-FAIL outline-width supports animating as a length assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>-FAIL outline-width supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "0px"
>+PASS outline-width supports animating as a length 
>+PASS outline-width supports animating as a length of rem 
> PASS perspective (type: length) has testInterpolation function 
> PASS perspective supports animating as a length 
>-FAIL perspective supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS perspective supports animating as a length of rem 
> PASS shape-outside (type: discrete) has testInterpolation function 
> FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with linear easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
> FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with effect easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
>@@ -234,7 +234,7 @@ PASS text-shadow: single shadow
> PASS text-shadow: shadow list 
> FAIL text-shadow: mismatched list length (from longer to shorter) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px" but got "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.501961) 5px 5px 5px"
> FAIL text-shadow: mismatched list length (from shorter to longer) assert_equals: The value should be rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px at 500ms expected "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.5) 5px 5px 5px" but got "rgb(150, 150, 150) 15px 15px 15px, rgba(100, 100, 100, 0.501961) 5px 5px 5px"
>-FAIL text-shadow: with currentcolor assert_equals: The value should be rgb(0, 255, 0) 5px 5px 5px at 500ms expected "rgb(0, 255, 0) 5px 5px 5px" but got "rgb(0, 0, 0) 5px 5px 5px"
>+PASS text-shadow: with currentcolor 
> PASS transform (type: transformList) has testInterpolation function 
> PASS transform: translate 
> PASS transform: rotate 
>@@ -258,11 +258,11 @@ FAIL visibility uses visibility animation when animating from "hidden" to "colla
> PASS visibility uses visibility animation when animating from "visible" to "hidden" with easeInOutBack easing 
> PASS word-spacing (type: lengthPercentageOrCalc) has testInterpolation function 
> PASS word-spacing supports animating as a length 
>-FAIL word-spacing supports animating as a length of rem assert_equals: The value should be 30px at 500ms expected "30px" but got "3px"
>+PASS word-spacing supports animating as a length of rem 
> FAIL word-spacing supports animating as a percentage assert_equals: The value should be 30% at 500ms expected "30%" but got "0.75px"
> FAIL word-spacing supports animating as combination units "px" and "%" assert_equals: The value should be calc(5px + 10%) at 500ms expected "calc(5px + 10%)" but got "3355448px"
>-FAIL word-spacing supports animating as combination units "%" and "em" assert_equals: The value should be calc(10px + 5%) at 500ms expected "calc(10px + 5%)" but got "0.125px"
>-FAIL word-spacing supports animating as combination units "em" and "rem" assert_equals: The value should be 15px at 500ms expected "15px" but got "1px"
>+FAIL word-spacing supports animating as combination units "%" and "em" assert_equals: The value should be calc(10px + 5%) at 500ms expected "calc(10px + 5%)" but got "1677731.5px"
>+PASS word-spacing supports animating as combination units "em" and "rem" 
> FAIL word-spacing supports animating as combination units "px" and "calc" assert_equals: The value should be calc(10px + 10%) at 500ms expected "calc(10px + 10%)" but got "0px"
> FAIL word-spacing supports animating as a calc assert_equals: The value should be calc(15px + 15%) at 500ms expected "calc(15px + 15%)" but got "0px"
>

Flags:

dino: review+
ews-watchlist: commit-queue-

Actions: View | Formatted Diff | Diff

Attachments on bug 186047: 341482 | 341485