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
--- 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");