From fb1252420a0a26bc8a418905c93964af93ef9a1e Mon Sep 17 00:00:00 2001 From: Daniel Holbert Date: Sun, 4 May 2014 09:12:32 -0700 Subject: [PATCH] Bug 996945: Remove prohibition on flex-grow & flex-shrink properties transitioning between 0 and other values. r=mats --- layout/style/nsCSSPropList.h | 4 +-- layout/style/nsStyleAnimation.cpp | 20 ----------- .../test_flexbox_flex_grow_and_shrink.html | 35 +++++++++---------- 3 files changed, 19 insertions(+), 40 deletions(-) diff --git a/layout/style/nsCSSPropList.h b/layout/style/nsCSSPropList.h index b78ac87fdb6..0a2df8629db 100644 --- a/layout/style/nsCSSPropList.h +++ b/layout/style/nsCSSPropList.h @@ -1695,7 +1695,7 @@ CSS_PROP_POSITION( 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, @@ -1709,7 +1709,7 @@ CSS_PROP_POSITION( 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, diff --git a/layout/style/nsStyleAnimation.cpp b/layout/style/nsStyleAnimation.cpp index 6c2ccb06194..ace37b0132b 100644 --- a/layout/style/nsStyleAnimation.cpp +++ b/layout/style/nsStyleAnimation.cpp @@ -463,16 +463,6 @@ nsStyleAnimation::ComputeDistance(nsCSSProperty aProperty, 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)); @@ -1948,16 +1938,6 @@ nsStyleAnimation::AddWeighted(nsCSSProperty aProperty, 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())); diff --git a/layout/style/test/test_flexbox_flex_grow_and_shrink.html b/layout/style/test/test_flexbox_flex_grow_and_shrink.html index 2cfb5c6e969..e34de180434 100644 --- a/layout/style/test/test_flexbox_flex_grow_and_shrink.html +++ b/layout/style/test/test_flexbox_flex_grow_and_shrink.html @@ -16,7 +16,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=696253 * { 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 } @@ -33,9 +33,6 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=696253 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 } @@ -136,41 +133,43 @@ 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();