Bug 1245748 - Define the Keyframe type for storing specified keyframes; r=heycam
authorBrian Birtles <birtles@gmail.com>
Tue, 22 Mar 2016 16:19:43 +0900
changeset 290204 e5b7f120513e6f98ae9db9e0daaa07204eb8f3d4
parent 290203 b692d554f9319cbdf9b9174e3eef54dce411a4a9
child 290205 a2fc06886cf5e27493fc2e1bc1b0528878f9085f
push id30114
push usercbook@mozilla.com
push dateThu, 24 Mar 2016 15:15:54 +0000
treeherdermozilla-central@24c5fbde4488 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1245748
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1245748 - Define the Keyframe type for storing specified keyframes; r=heycam MozReview-Commit-ID: rejtrG0U1A
dom/animation/KeyframeEffect.h
testing/web-platform/tests/web-animations/keyframe-effect/constructor.html
--- a/dom/animation/KeyframeEffect.h
+++ b/dom/animation/KeyframeEffect.h
@@ -3,36 +3,39 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #ifndef mozilla_dom_KeyframeEffect_h
 #define mozilla_dom_KeyframeEffect_h
 
 #include "nsAutoPtr.h"
+#include "nsCSSProperty.h"
+#include "nsCSSValue.h"
 #include "nsCycleCollectionParticipant.h"
 #include "nsIDocument.h"
+#include "nsTArray.h"
 #include "nsWrapperCache.h"
 #include "mozilla/AnimationPerformanceWarning.h"
 #include "mozilla/Attributes.h"
 #include "mozilla/ComputedTiming.h"
 #include "mozilla/ComputedTimingFunction.h"
 #include "mozilla/LayerAnimationInfo.h" // LayerAnimations::kRecords
+#include "mozilla/Maybe.h"
 #include "mozilla/NonOwningAnimationTarget.h"
 #include "mozilla/OwningNonNull.h"      // OwningNonNull<...>
 #include "mozilla/StickyTimeDuration.h"
 #include "mozilla/StyleAnimationValue.h"
 #include "mozilla/TimeStamp.h"
 #include "mozilla/TimingParams.h"
 #include "mozilla/dom/AnimationEffectReadOnly.h"
 #include "mozilla/dom/AnimationEffectTimingReadOnly.h"
 #include "mozilla/dom/Element.h"
 #include "mozilla/dom/Nullable.h"
 
-
 struct JSContext;
 class nsCSSPropertySet;
 class nsIContent;
 class nsIDocument;
 class nsIFrame;
 class nsPresContext;
 
 namespace mozilla {
@@ -45,16 +48,52 @@ class ElementOrCSSPseudoElement;
 class OwningElementOrCSSPseudoElement;
 class UnrestrictedDoubleOrKeyframeAnimationOptions;
 class UnrestrictedDoubleOrKeyframeEffectOptions;
 enum class IterationCompositeOperation : uint32_t;
 enum class CompositeOperation : uint32_t;
 struct AnimationPropertyDetails;
 }
 
+/**
+ * A property-value pair specified on a keyframe.
+ */
+struct PropertyValuePair
+{
+  nsCSSProperty mProperty;
+  // The specified value for the property. For shorthand properties or invalid
+  // property values, we store the specified property value as a token stream
+  // (string).
+  nsCSSValue    mValue;
+};
+
+/**
+ * A single keyframe.
+ *
+ * This is the canonical form in which keyframe effects are stored and
+ * corresponds closely to the type of objects returned via the getFrames() API.
+ *
+ * Before computing an output animation value, however, we flatten these frames
+ * down to a series of per-property value arrays where we also resolve any
+ * overlapping shorthands/longhands, convert specified CSS values to computed
+ * values, etc.
+ *
+ * When the target element or style context changes, however, we rebuild these
+ * per-property arrays from the original list of keyframes objects. As a result,
+ * these objects represent the master definition of the effect's values.
+ */
+struct Keyframe
+{
+  Maybe<double>                 mOffset;
+  double                        mComputedOffset = 0.0;
+  Maybe<ComputedTimingFunction> mTimingFunction; // Nothing() here means
+                                                 // "linear"
+  nsTArray<PropertyValuePair>   mPropertyValues;
+};
+
 struct AnimationPropertySegment
 {
   float mFromKey, mToKey;
   StyleAnimationValue mFromValue, mToValue;
   Maybe<ComputedTimingFunction> mTimingFunction;
 
   bool operator==(const AnimationPropertySegment& aOther) const {
     return mFromKey == aOther.mFromKey &&
--- a/testing/web-platform/tests/web-animations/keyframe-effect/constructor.html
+++ b/testing/web-platform/tests/web-animations/keyframe-effect/constructor.html
@@ -370,19 +370,22 @@ var gKeyframeSequenceTests = [
              { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px" }] },
   { desc:   "a Keyframe sequence with different easing values, but the same easing value for a given offset",
     input:  [{ offset: 0.0, easing: "ease",     left: "10px"},
              { offset: 0.0, easing: "ease",     top: "20px"},
              { offset: 0.5, easing: "linear",   left: "30px" },
              { offset: 0.5, easing: "linear",   top: "40px" },
              { offset: 1.0, easing: "step-end", left: "50px" },
              { offset: 1.0, easing: "step-end", top: "60px" }],
-    output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",         left: "10px", top: "20px" },
-             { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "30px", top: "40px" },
-             { offset: 1.0, computedOffset: 1.0, easing: "linear", left: "50px", top: "60px" }] },
+    output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
+               left: "10px", top: "20px" },
+             { offset: 0.5, computedOffset: 0.5, easing: "linear",
+               left: "30px", top: "40px" },
+             { offset: 1.0, computedOffset: 1.0, easing: "linear",
+               left: "50px", top: "60px" }] },
   { desc:   "a Keyframe sequence with different composite values, but the same composite value for a given offset",
     input:  [{ offset: 0.0, composite: "replace", left: "10px" },
              { offset: 0.0, composite: "replace", top: "20px" },
              { offset: 0.5, composite: "add",     left: "30px" },
              { offset: 0.5, composite: "add",     top: "40px" },
              { offset: 1.0, composite: "replace", left: "50px" },
              { offset: 1.0, composite: "replace", top: "60px" }],
     output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", composite: "replace", left: "10px", top: "20px" },