Bug 1328535 - Remove range-checking assertion for aDilutionRatio, in color animation code. r=dholbert
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Thu, 05 Jan 2017 09:05:57 +0900
changeset 456660 e4be17b09b8d7ba28e1dd9c1d0d337bbc5f39bbc
parent 456659 f39d44b3c6f4da5e4c6c7d2d22dbef545af40518
child 456661 238522aa277e5f071d155af77e4906eec365dd1e
push id40575
push userjwwang@mozilla.com
push dateFri, 06 Jan 2017 02:27:46 +0000
reviewersdholbert
bugs1328535
milestone53.0a1
Bug 1328535 - Remove range-checking assertion for aDilutionRatio, in color animation code. r=dholbert Some cubic-bezier functions, e.g. cubic-bezier(0,-0.5,0,0), produce values out of range of [0, 1]. MozReview-Commit-ID: 9ZTsTRTcUaI
layout/style/StyleAnimationValue.cpp
layout/style/crashtests/1328535-1.html
layout/style/crashtests/crashtests.list
layout/style/test/test_transitions_per_property.html
--- a/layout/style/StyleAnimationValue.cpp
+++ b/layout/style/StyleAnimationValue.cpp
@@ -1967,22 +1967,20 @@ AddCSSValuePercentNumber(const uint32_t 
   // aCoeff2 is 0, then we'll return the value halfway between 1 and
   // aValue1, rather than the value halfway between 0 and aValue1.
   // Note that we do something similar in AddTransformScale().
   float result = (n1 - aInitialVal) * aCoeff1 + (n2 - aInitialVal) * aCoeff2;
   aResult.SetFloatValue(RestrictValue(aValueRestrictions, result + aInitialVal),
                         eCSSUnit_Number);
 }
 
-// Multiplies |aValue| color by |aDilutionRation|.
+// Multiplies |aValue| color by |aDilutionRatio|.
 static nscolor
 DiluteColor(const RGBAColorData& aValue, double aDilutionRatio)
 {
-  MOZ_ASSERT(aDilutionRatio >= 0.0 && aDilutionRatio <= 1.0,
-             "Dilution ratio should be in [0, 1]");
   float resultA = aValue.mA * aDilutionRatio;
   return resultA <= 0.0 ? NS_RGBA(0, 0, 0, 0)
                         : aValue.WithAlpha(resultA).ToColor();
 }
 
 // Clamped AddWeightedColors.
 static nscolor
 AddWeightedColorsAndClamp(double aCoeff1, const RGBAColorData& aValue1,
new file mode 100644
--- /dev/null
+++ b/layout/style/crashtests/1328535-1.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<style>
+@keyframes anim {
+  from { box-shadow: none; }
+  to { box-shadow: rgba(120, 120, 120, 0.5) 10px 10px 10px 0px; }
+}
+#target {
+  width: 100px; height: 100px;
+  /*
+   * Use negative delay to shift to the point that the cubic-bezier function
+   * produces a value out of range of [0, 1].
+   */
+  animation: anim 1s -0.02s cubic-bezier(0, -0.5, 0, 0) paused;
+}
+</style>
+<div id="target"></div>
--- a/layout/style/crashtests/crashtests.list
+++ b/layout/style/crashtests/crashtests.list
@@ -161,8 +161,9 @@ asserts-if(stylo,2) pref(dom.animations-
 asserts-if(stylo,1) pref(dom.animations-api.core.enabled,true) load 1290994-3.html # bug 1324690
 load 1290994-4.html
 load 1314531.html
 load 1315889-1.html
 load 1315894-1.html
 skip-if(stylo) load 1319072-1.html # bug 1323733
 HTTP load 1320423-1.html
 asserts-if(stylo,5-9) load 1321357-1.html # bug 1324669
+load 1328535-1.html
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -1576,16 +1576,17 @@ function test_filter_transition(prop) {
     var actual = cs.getPropertyValue(prop);
     ok(filter_function_list_equals(actual, test.expected),
                                    "Filter property is " + actual + " expected values of " +
                                    test.expected);
   }
 }
 
 function test_shadow_transition(prop) {
+  var origTimingFunc = div.style.getPropertyValue("transition-timing-function");
   var spreadStr = (prop == "box-shadow") ? " 0px" : "";
 
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "none", "");
   is(cs.getPropertyValue(prop), "none",
      "shadow-valued property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "4px 8px 3px red", "");
@@ -1663,17 +1664,34 @@ function test_shadow_transition(prop) {
           "shadow-valued property " + prop + " (x): clamping of negatives");
     isnot(vals[4], "0px",
           "shadow-valued property " + prop + " (y): clamping of negatives");
     is(vals[5], "0px",
        "shadow-valued property " + prop + " (radius): clamping of negatives");
     isnot(vals[6], "0px",
           "shadow-valued property " + prop + " (spread): clamping of negatives");
   }
-  div.style.setProperty("transition-timing-function", "linear", "");
+
+  // A test case that timing function produces values greater than 1.0.
+  div.style.setProperty("transition-timing-function",
+                        // This function produces 1.2989961788069297 at 25%.
+                        "cubic-bezier(0, 1.5, 0, 1.5)", "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "none", "");
+  is(cs.getPropertyValue(prop), "none",
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "0px 0px 0px rgba(100, 100, 100, 0.5)", "");
+  // The alpha value, 0.5 * 1.2989961788069297 * 255, is clamped to 166 and then
+  // converted to 0.65.
+  is(cs.getPropertyValue(prop), "rgba(100, 100, 100, 0.65) 0px 0px 0px" + spreadStr,
+     "shadow-valued property " + prop + ": interpolation of shadows with " +
+     "timing function which produces values greater than 1.0");
+
+  div.style.setProperty("transition-timing-function", origTimingFunc, "");
 }
 
 function test_dasharray_transition(prop) {
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "3", "");
   is(cs.getPropertyValue(prop), "3",
      "dasharray-valued property " + prop +
      ": computed value before transition");