8000 [css-flexbox] Allow animation between 0 and non-0 values in flex-grow… · xfq/csswg-drafts@5611f12 · GitHub
Skip to content

Commit 5611f12

Browse files
tabatkinstabatkins
committed
[css-flexbox] Allow animation between 0 and non-0 values in flex-grow and flex-shrink.
1 parent ed67699 commit 5611f12

2 files changed

Lines changed: 22 additions & 14 deletions

File tree

‎css-flexbox/Overview.bs‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1442,7 +1442,7 @@ The 'flex-grow' property</h4>
14421442
Inherited: no
14431443
Computed value: specified value
14441444
Media: visual
1445-
Animatable: yes, except between ''0'' and other values
1445+
Animatable: yes
14461446
</pre>
14471447

14481448
<p>
@@ -1461,7 +1461,7 @@ The 'flex-shrink' property</h4>
14611461
Inherited: no
14621462
Computed value: specified value
14631463
Media: visual
1464-
Animatable: yes, except between ''0'' and other values
1464+
Animatable: yes
14651465
</pre>
14661466

14671467
<p>
@@ -2821,10 +2821,14 @@ Boris Zbarsky.
28212821
<h3 id="changes-2012">
28222822
Changes since the 18 September 2012 Candidate Recommendation</h3>
28232823

2824-
<p>
2825-
The following significant changes were made since the
2826-
<a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">18 September 2012 Candidate Recommendation</a>:
2824+
The following significant changes were made since the
2825+
<a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">18 September 2012 Candidate Recommendation</a>:
2826+
28272827
<ul>
2828+
<li id="change-2012-flex-grow-animation">
2829+
Removed the restriction on animating between 0 and non-0 values in 'flex-grow' and 'flex-shrink',
2830+
as the layout algo no longer has a discontinuity in behavior there.
2831+
28282832
<li id="change-2012-min-width">
28292833
Changed the behavior of the new ''min-width/auto'' initial value of 'min-width'/'min-height' to
28302834
<ul>

‎css-flexbox/Overview.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@
246246
</p>
247247
<h1 class="p-name no-ref" id=title>CSS Flexible Box Layout Module Level 1</h1>
248248
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
249-
<span class=dt-updated><span class=value-title title=20140411>11 April 2014</span></span></span></h2>
249+
<span class=dt-updated><span class=value-title title=20140416>16 April 2014</span></span></span></h2>
250250
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-flexbox/>http://dev.w3.org/csswg/css-flexbox/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-flexbox-1/>http://www.w3.org/TR/css-flexbox-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-flexbox/>http://dev.w3.org/csswg/css-flexbox/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ rel=previous>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a><dd><a href=http://www.w3.org/T ED47 R/2012/WD-css3-flexbox-20120612/ rel=previous>http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/ rel=previous>http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/ rel=previous>http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/ rel=previous>http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a><dd><a href=http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ rel=previous>http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a>
251251
<dt>Feedback:</dt>
252252
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-flexbox%5D%20feedback">www-style@w3.org</a>
@@ -1514,7 +1514,7 @@ <h3 class="heading settled heading" data-level=7.3 id=flex-components><span clas
15141514
<h4 class="heading settled heading" data-level=7.3.1 id=flex-grow-property><span class=secno>7.3.1 </span><span class=content>
15151515
The <a class=property data-link-type=propdesc href=#propdef-flex-grow title=flex-grow>flex-grow</a> property</span><a class=self-link href=#flex-grow-property></a></h4>
15161516

1517-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flex-grow>flex-grow<a class=self-link href=#propdef-flex-grow></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a><tr><th>Initial:<td>0<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-item title="flex items">flex items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>yes, except between <span class=css data-link-type=maybe title=0>0</span> and other values</table>
1517+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flex-grow>flex-grow<a class=self-link href=#propdef-flex-grow></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a><tr><th>Initial:<td>0<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-item title="flex items">flex items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>yes</table>
15181518
<p>
15191519
The <a class=property data-link-type=propdesc href=#propdef-flex-grow title=flex-grow>flex-grow</a> property sets the <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a>
15201520
to the provided <dfn class=css-code data-dfn-for=flex-grow data-dfn-type=value data-export="" id=valuedef-number0><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a><a class=self-link href=#valuedef-number0></a></dfn>.
@@ -1523,7 +1523,7 @@ <h4 class="heading settled heading" data-level=7.3.1 id=flex-grow-property><span
15231523
<h4 class="heading settled heading" data-level=7.3.2 id=flex-shrink-property><span class=secno>7.3.2 </span><span class=content>
15241524
The <a class=property data-link-type=propdesc href=#propdef-flex-shrink title=flex-shrink>flex-shrink</a> property</span><a class=self-link href=#flex-shrink-property></a></h4>
15251525

1526-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flex-shrink>flex-shrink<a class=self-link href=#propdef-flex-shrink></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a><tr><th>Initial:<td>1<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-item title="flex items">flex items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>yes, except between <span class=css data-link-type=maybe title=0>0</span> and other values</table>
1526+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flex-shrink>flex-shrink<a class=self-link href=#propdef-flex-shrink></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a><tr><th>Initial:<td>1<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-item title="flex items">flex items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>yes</table>
15271527
<p>
15281528
The <a class=property data-link-type=propdesc href=#propdef-flex-shrink title=flex-shrink>flex-shrink</a> property sets the <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a>
15291529
to the provided <dfn class=css-code data-dfn-for=flex-shrink data-dfn-type=value data-export="" id=valuedef-number><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a><a class=self-link href=#valuedef-number></a></dfn>.
@@ -2823,10 +2823,14 @@ <h2 class="no-num heading settled heading" id=changes><span class=content>Change
28232823
<h3 class="heading settled heading" id=changes-2012><span class=content>
28242824
Changes since the 18 September 2012 Candidate Recommendation</span><a class=self-link href=#changes-2012></a></h3>
28252825

2826-
<p>
2827-
The following significant changes were made since the
2828-
<a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>18 September 2012 Candidate Recommendation</a>:
2829-
<ul>
2826+
<p> The following significant changes were made since the
2827+
<a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>18 September 2012 Candidate Recommendation</a>:
2828+
2829+
<p> <ul>
2830+
<li id=change-2012-flex-grow-animation><a class=self-link href=#change-2012-flex-grow-animation></a>
2831+
Removed the restriction on animating between 0 and non-0 values in <a class=property data-link-type=propdesc href=#propdef-flex-grow title=flex-grow>flex-grow</a> and <a class=property data-link-type=propdesc href=#propdef-flex-shrink title=flex-shrink>flex-shrink</a>,
2832+
as the layout algo no longer has a discontinuity in behavior there.
2833+
28302834
<li id=change-2012-min-width><a class=self-link href=#change-2012-min-width></a>
28312835
Changed the behavior of the new <span class=css data-link-for=min-width data-link-type=maybe title=auto>auto</span> initial value of <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width title=min-width>min-width</a>/<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height title=min-height>min-height</a> to
28322836
<ul>
@@ -3469,8 +3473,8 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
34693473
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-flex-flow title=flex-flow>flex-flow</a><td>&lt;flex-direction&gt; || &lt;flex-wrap&gt;<td>see individual properties<td>flex containers<td>see individual properties<td><td>visual<td><td><td>see individual properties
34703474
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-order title=order>order</a><td>&lt;integer&gt;<td>0<td>flex items and absolutely-positioned children of flex containers<td>no<td><td>visual<td>yes<td><td>specified value
34713475
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-flex title=flex>flex</a><td>none | [ &lt;‘flex-grow’&gt; &lt;‘flex-shrink’&gt;? || &lt;‘flex-basis’&gt; ]<td>see individual properties<td>flex items<td>see individual properties<td><td>visual<td><td>per grammar<td>see individual properties
3472-
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-flex-grow title=flex-grow>flex-grow</a><td>&lt;number&gt;<td>0<td>flex items<td>no<td><td>visual<td>yes, except between 0 and other values<td><td>specified value
3473-
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-flex-shrink title=flex-shrink>flex-shrink</a><td>&lt;number&gt;<td>1<td>flex items<td>no<td><td>visual<td>yes, except between 0 and other values<td><td>specified value
3476+
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-flex-grow title=flex-grow>flex-grow</a><td>&lt;number&gt;<td>0<td>flex items<td>no<td><td>visual<td>yes<td><td>specified value
3477+
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-flex-shrink title=flex-shrink>flex-shrink</a><td>&lt;number&gt;<td>1<td>flex items<td>no<td><td>visual<td>yes<td><td>specified value
34743478
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-flex-basis title=flex-basis>flex-basis</a><td>auto | &lt;‘width’&gt;<td>auto<td>flex items<td>no<td>realtive to the flex container’s inner main size<td>visual<td>as width<td><td>as specified, with lengths made absolute
34753479
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-justify-content title=justify-content>justify-content</a><td>flex-start | flex-end | center | space-between | space-around<td>flex-start<td>flex containers<td>no<td><td>visual<td><td><td>specified value
34763480
<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-align-items title=align-items>align-items</a><td>flex-start | flex-end | center | baseline | stretch<td>stretch<td>flex containers<td>no<td><td>visual<td><td><td>specified value

0 commit comments

Comments
 (0)