Bug 996945: Remove prohibition on flex-grow & flex-shrink properties transitioning between 0 and other values. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Sun, 04 May 2014 09:12:32 -0700
changeset 181469 6a3145b567b3e92d4401c9c2d521a42604ff96e8
parent 181468 c719e2ddce1cc44c73a5d2a83440136c9858233f
child 181470 25d1dbbba1415e03fbb382f1a78dbffa41eaed63
push id26713
push userphilringnalda@gmail.com
push dateSun, 04 May 2014 23:17:54 +0000
treeherdermozilla-central@810c2b6a278d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs996945
milestone32.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 996945: Remove prohibition on flex-grow & flex-shrink properties transitioning between 0 and other values. r=mats
layout/style/nsCSSPropList.h
layout/style/nsStyleAnimation.cpp
layout/style/test/test_flexbox_flex_grow_and_shrink.html
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1690,31 +1690,31 @@ CSS_PROP_POSITION(
       CSS_PROPERTY_VALUE_NONNEGATIVE,
     "",
     // NOTE: The parsing implementation for the 'flex' shorthand property has
     // its own code to parse each subproperty. It does not depend on the
     // longhand parsing defined here.
     VARIANT_HN,
     nullptr,
     offsetof(nsStylePosition, mFlexGrow),
-    eStyleAnimType_float) // float, except animations to/from 0 shouldn't work
+    eStyleAnimType_float)
 CSS_PROP_POSITION(
     flex-shrink,
     flex_shrink,
     FlexShrink,
     CSS_PROPERTY_PARSE_VALUE |
       CSS_PROPERTY_VALUE_NONNEGATIVE,
     "",
     // NOTE: The parsing implementation for the 'flex' shorthand property has
     // its own code to parse each subproperty. It does not depend on the
     // longhand parsing defined here.
     VARIANT_HN,
     nullptr,
     offsetof(nsStylePosition, mFlexShrink),
-    eStyleAnimType_float) // float, except animations to/from 0 shouldn't work
+    eStyleAnimType_float)
 CSS_PROP_POSITION(
     flex-wrap,
     flex_wrap,
     FlexWrap,
     CSS_PROPERTY_PARSE_VALUE,
     "",
     VARIANT_HK,
     kFlexWrapKTable,
--- a/layout/style/nsStyleAnimation.cpp
+++ b/layout/style/nsStyleAnimation.cpp
@@ -458,26 +458,16 @@ nsStyleAnimation::ComputeDistance(nsCSSP
     }
     case eUnit_Percent: {
       float startPct = aStartValue.GetPercentValue();
       float endPct = aEndValue.GetPercentValue();
       aDistance = Abs(double(endPct) - double(startPct));
       return true;
     }
     case eUnit_Float: {
-      // Special case for flex-grow and flex-shrink: animations are
-      // disallowed between 0 and other values.
-      if ((aProperty == eCSSProperty_flex_grow ||
-           aProperty == eCSSProperty_flex_shrink) &&
-          (aStartValue.GetFloatValue() == 0.0f ||
-           aEndValue.GetFloatValue() == 0.0f) &&
-          aStartValue.GetFloatValue() != aEndValue.GetFloatValue()) {
-        return false;
-      }
-
       float startFloat = aStartValue.GetFloatValue();
       float endFloat = aEndValue.GetFloatValue();
       aDistance = Abs(double(endFloat) - double(startFloat));
       return true;
     }
     case eUnit_Color: {
       // http://www.w3.org/TR/smil-animation/#animateColorElement says
       // that we should use Euclidean RGB cube distance.  However, we
@@ -1943,26 +1933,16 @@ nsStyleAnimation::AddWeighted(nsCSSPrope
     }
     case eUnit_Percent: {
       aResultValue.SetPercentValue(RestrictValue(aProperty,
         aCoeff1 * aValue1.GetPercentValue() +
         aCoeff2 * aValue2.GetPercentValue()));
       return true;
     }
     case eUnit_Float: {
-      // Special case for flex-grow and flex-shrink: animations are
-      // disallowed between 0 and other values.
-      if ((aProperty == eCSSProperty_flex_grow ||
-           aProperty == eCSSProperty_flex_shrink) &&
-          (aValue1.GetFloatValue() == 0.0f ||
-           aValue2.GetFloatValue() == 0.0f) &&
-          aValue1.GetFloatValue() != aValue2.GetFloatValue()) {
-        return false;
-      }
-
       aResultValue.SetFloatValue(RestrictValue(aProperty,
         aCoeff1 * aValue1.GetFloatValue() +
         aCoeff2 * aValue2.GetFloatValue()));
       return true;
     }
     case eUnit_Color: {
       nscolor color1 = aValue1.GetColorValue();
       nscolor color2 = aValue2.GetColorValue();
--- a/layout/style/test/test_flexbox_flex_grow_and_shrink.html
+++ b/layout/style/test/test_flexbox_flex_grow_and_shrink.html
@@ -11,36 +11,33 @@ https://bugzilla.mozilla.org/show_bug.cg
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <style type="text/css">
 
   /* Set flex-grow and flex-shrink to nonzero values,
      when no animations are applied. */
 
   * { flex-grow: 10; flex-shrink: 20 }
 
-  /* These animations SHOULD affect computed style */
+  /* Animations that we'll test (individually) in the script below: */
   @keyframes flexGrowTwoToThree {
      0%   { flex-grow: 2 }
      100% { flex-grow: 3 }
   }
   @keyframes flexShrinkTwoToThree {
      0%   { flex-shrink: 2 }
      100% { flex-shrink: 3 }
   }
   @keyframes flexGrowZeroToZero {
      0%   { flex-grow: 0 }
      100% { flex-grow: 0 }
   }
   @keyframes flexShrinkZeroToZero {
      0%   { flex-shrink: 0 }
      100% { flex-shrink: 0 }
   }
-
-  /* These animations SHOULD NOT affect computed style. (flex-grow and
-     flex-shrink are animatable "except between '0' and other values") */
   @keyframes flexGrowZeroToOne {
      0%   { flex-grow: 0 }
      100% { flex-grow: 1 }
   }
   @keyframes flexShrinkZeroToOne {
      0%   { flex-shrink: 0 }
      100% { flex-shrink: 1 }
   }
@@ -131,51 +128,53 @@ done_div();
 new_div("animation: flexShrinkZeroToZero linear 1s");
 is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.0s");
 advance_clock(500);
 is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.5s");
 advance_clock(1000);
 is(cs.flexShrink, 20, "flexShrinkZeroToZero at 1.5s");
 done_div();
 
-// ANIMATIONS THAT SHOULD NOT AFFECT COMPUTED STYLE
-// ------------------------------------------------
+// ANIMATIONS THAT DIDN'T USED TO AFFECT COMPUTED STYLE, BUT NOW DO
+// ----------------------------------------------------------------
+// (In an older version of the flexbox spec, flex-grow & flex-shrink were not
+// allowed to animate between 0 and other values. But now that's allowed.)
 
-// flexGrowZeroToOne: no effect on computed style. 10 all the way through.
+// flexGrowZeroToOne: 0 at 0%, 0.5 at 50%, 10 after animation is over.
 new_div("animation: flexGrowZeroToOne linear 1s");
-is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.0s");
+is(cs.flexGrow, 0, "flexGrowZeroToOne at 0.0s");
 advance_clock(500);
-is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.5s");
+is(cs.flexGrow, 0.5, "flexGrowZeroToOne at 0.5s");
 advance_clock(1000);
 is(cs.flexGrow, 10, "flexGrowZeroToOne at 1.5s");
 done_div();
 
-// flexShrinkZeroToOne: no effect on computed style. 20 all the way through.
+// flexShrinkZeroToOne: 0 at 0%, 0.5 at 50%, 20 after animation is over.
 new_div("animation: flexShrinkZeroToOne linear 1s");
-is(cs.flexShrink, 20,  "flexShrinkZeroToOne at 0.0s");
+is(cs.flexShrink, 0,  "flexShrinkZeroToOne at 0.0s");
 advance_clock(500);
-is(cs.flexShrink, 20, "flexShrinkZeroToOne at 0.5s");
+is(cs.flexShrink, 0.5, "flexShrinkZeroToOne at 0.5s");
 advance_clock(1000);
 is(cs.flexShrink, 20, "flexShrinkZeroToOne at 1.5s");
 done_div();
 
-// flexGrowOneToZero: no effect on computed style. 10 all the way through.
+// flexGrowOneToZero: 1 at 0%, 0.5 at 50%, 10 after animation is over.
 new_div("animation: flexGrowOneToZero linear 1s");
-is(cs.flexGrow, 10, "flexGrowOneToZero at 0.0s");
+is(cs.flexGrow, 1, "flexGrowOneToZero at 0.0s");
 advance_clock(500);
-is(cs.flexGrow, 10, "flexGrowOneToZero at 0.5s");
+is(cs.flexGrow, 0.5, "flexGrowOneToZero at 0.5s");
 advance_clock(1000);
 is(cs.flexGrow, 10, "flexGrowOneToZero at 1.5s");
 done_div();
 
-// flexShrinkOneToZero: no effect on computed style. 20 all the way through.
+// flexShrinkOneToZero: 1 at 0%, 0.5 at 50%, 20 after animation is over.
 new_div("animation: flexShrinkOneToZero linear 1s");
-is(cs.flexShrink, 20,  "flexShrinkOneToZero at 0.0s");
+is(cs.flexShrink, 1,  "flexShrinkOneToZero at 0.0s");
 advance_clock(500);
-is(cs.flexShrink, 20, "flexShrinkOneToZero at 0.5s");
+is(cs.flexShrink, 0.5, "flexShrinkOneToZero at 0.5s");
 advance_clock(1000);
 is(cs.flexShrink, 20, "flexShrinkOneToZero at 1.5s");
 done_div();
 
 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
 
 </script>
 </pre>