Bug 1396538 - Part 1: Use computed value as the value scale. r?pbro draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Mon, 04 Sep 2017 20:47:41 +0900
changeset 658596 29cab1416a73a41898a05c50c5b1811e5ad47f62
parent 654615 4d4ed9b64bdbb1127341abd3d55fc04904ed8869
child 658597 8712cd54992cc9364540e6ee254cb00466080f4e
push id77821
push userbmo:dakatsuka@mozilla.com
push dateMon, 04 Sep 2017 11:48:02 +0000
reviewerspbro
bugs1396538
milestone57.0a1
Bug 1396538 - Part 1: Use computed value as the value scale. r?pbro MozReview-Commit-ID: 9ng9hUTga9A
devtools/client/animationinspector/graph-helper.js
--- a/devtools/client/animationinspector/graph-helper.js
+++ b/devtools/client/animationinspector/graph-helper.js
@@ -57,19 +57,19 @@ function ProgressGraphHelper(win, proper
   // Create effect timing object to make dummy animation.
   const effectTiming = {
     duration: duration,
     fill: "forwards"
   };
 
   this.keyframes = keyframesObject;
   this.devtoolsKeyframes = keyframes;
+  this.valueHelperFunction = this.getValueHelperFunction();
   this.animation = this.targetEl.animate(this.keyframes, effectTiming);
   this.animation.pause();
-  this.valueHelperFunction = this.getValueHelperFunction();
 }
 
 ProgressGraphHelper.prototype = {
   /**
    * Destory this object.
    */
   destroy: function () {
     this.targetEl.remove();
@@ -211,20 +211,25 @@ ProgressGraphHelper.prototype = {
   /**
    * Return value helper function of animation type 'discrete'.
    * @return {function} ValueHelperFunction returns float value of Y axis
    *                    from given style (e.g. center)
    */
   getDiscreteValueHelperFunction: function () {
     const discreteValues = [];
     this.keyframes.forEach(keyframe => {
-      if (!discreteValues.includes(keyframe.value)) {
-        discreteValues.push(keyframe.value);
+      // Set style once since the computed value may differ from specified keyframe value.
+      this.targetEl.style[this.propertyJSName] = keyframe.value;
+      const style = this.win.getComputedStyle(this.targetEl)[this.propertyJSName];
+      if (!discreteValues.includes(style)) {
+        discreteValues.push(style);
       }
     });
+    this.targetEl.style[this.propertyJSName] = "unset";
+
     return value => {
       return discreteValues.indexOf(value) / (discreteValues.length - 1);
     };
   },
 
   /**
    * Create the path segments from given parameters.
    * @param {Number} startTime - Starting time of animation.