- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 26 Jan 2012 23:26:35 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv24465
Modified Files:
Overview.html Overview.src.html
Log Message:
Okay, I think the layout algorithm is finished and complete now. I based it off my JS impl that appears to be correct. :/
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.111
retrieving revision 1.112
diff -u -d -r1.111 -r1.112
--- Overview.html 26 Jan 2012 01:10:42 -0000 1.111
+++ Overview.html 26 Jan 2012 23:26:32 -0000 1.112
@@ -1980,41 +1980,90 @@
lengths</dfn> of the items within a flexbox line:
<ol>
- <li>Initially, the set of flexbox items marked as violating a max or min
- size constraint is empty.
+ <li>If this is the first time this step is reached in the current
+ invocation of this algorithm, <a
+ href="#distribute-the-free-space"><i>distribute the free space</i></a> in
+ the flexbox line, then <a href="#fix-size-constraint-violations"><i>fix
+ max size violations</i></a>, then <a
+ href="#fix-size-constraint-violations"><i>fix min size
+ violations</i></a>.
- <li><a href="#distribute-the-free-space"><i>Distribute the free
- space</i></a> in the flexbox line. If any flexbox item's main size is in
- violation of its max size constraint (‘<code
- class=property>max-height</code>’ or ‘<code
- class=property>max-width</code>’), mark the item as being in
- violation of a max size constraint; if any other item is marked as being
- in violation of a max size constraint from a previous invocation of this
- step, remove the mark. Set its main size to be equal to its max size
- constraint. <a href="#distribute-the-free-space"><i>Distribute the free
- space</i></a> again.
+ <li>If the current set of items violating a min size constraint is
+ different from the set in the previous iteration, remove the marks
+ denoting any element as being in violation of a max size constraint, <a
+ href="#distribute-the-free-space"><i>distribute the free space</i></a>,
+ then <a href="#fix-size-constraint-violations"><i>fix max size
+ violations</i></a>.
- <li><a href="#distribute-the-free-space"><i>Distribute the free
- space</i></a> in the flexbox line. If any flexbox item's main size is in
- violation of its min size constraint (‘<code
- class=property>min-height</code>’ or ‘<code
- class=property>min-width</code>’), mark the item as being in
- violation of a min size constraint; if any other item is marked as being
- in violation of a min size constraint from a previous invocation of this
- step, remove the mark. Set its main size to be equal to its min size
- constraint. <a href="#distribute-the-free-space"><i>Distribute the free
- space</i></a> again.
+ <li>If the current set of items violating a max size constraint is
+ different from the set in the previous iteration, remove the marks
+ denoting any element as being in violation of a min size constraint, <a
+ href="#distribute-the-free-space"><i>distribute the free space</i></a>,
+ then <a href="#fix-size-constraint-violations"><i>fix min size
+ violations</i></a>.
- <li>If the set of flexbox items in the line that are marked as violating a
- max or min size constraint has changed in this run of the algorithm,
- restart the algorithm from step 2.
+ <li>If either of the previous two steps changed the set of items violating
+ their constraints, restart this algorithm.
+
+ <li>Otherwise, the used value of the main size property of every flexible
+ item is the item's preferred size.
</ol>
+ <p class=issue>I'm pretty sure the previous algorithm will eventually
+ terminate. I'm not absolutely certain, though. Help?
+
<p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
a flexbox line:
<ol>
- <li>...
+ <li>If the preferred size of a flexible length was changed from a previous
+ invocation of this algorithm, reset it to its specified value.
+
+ <li>Find the available free space. Sum the main sizes of the margin boxes
+ of every flexbox item in the line, treating flexible lengths as their
+ preferred size, and then subtract that from the main size of the
+ flexbox's content box. This value is the available free space. It may be
+ zero, positive, or negative.
+
+ <li>
+ <dl>
+ <dt>If the available free space is zero:
+
+ <dd>Do nothing.
+
+ <dt>If the available free space is positive:
+
+ <dd>Calculate the total flexibility by summing the positive flexibility
+ of every flexible length in the line. For each flexible length,
+ increment its preferred size by a fraction of the available free space
+ equal to its positive flexibility divided by the total flexibility.
+
+ <dt>If the available free space is negative:
+
+ <dd>Calculate the total flexibility by summing the negative flexibility
+ of every flexible length in the line. For each flexible length,
+ increment its preferred size by a fraction of the available free space
+ equal to its negative flexibility divided by the total flexibility.
+ <span class=note>Note: due to the signs involved, incrementing will
+ decrease the preferred size.)</span>
+ </dl>
+ </ol>
+
+ <p>To <dfn id=fix-size-constraint-violations
+ title="fix max size violations|fix min size violations">fix size
+ constraint violations</dfn> in a flexbox line:
+
+ <ol>
+ <li>If none of the items on the line violate their min or max size
+ constraints (as appropriate), exit this algorithm.
+
+ <li>Otherwise, for every item in violation of a min or max size constraint
+ (as appropriate), mark them as being in violation of that constraint.
+ While an item is so marked, treat it as if it were inflexible, with its
+ main size property set to its min or max size constraint, as appropriate.
+
+ <li><a href="#distribute-the-free-space"><i>Distribute the free
+ space</i></a>, then restart this algorithm.
</ol>
<h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
@@ -2497,6 +2546,12 @@
href="#flex-line-pack-end" title=end><strong>6.1.</strong></a>, <a
href="#flex-pack-end" title=end><strong>5.1.</strong></a>
+ <li>fix max size violations, <a href="#fix-size-constraint-violations"
+ title="fix max size violations"><strong>7.</strong></a>
+
+ <li>fix min size violations, <a href="#fix-size-constraint-violations"
+ title="fix min size violations"><strong>7.</strong></a>
+
<li>flex-align, <a href="#flex-align0"
title=flex-align><strong>5.2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.111
retrieving revision 1.112
diff -u -d -r1.111 -r1.112
--- Overview.src.html 26 Jan 2012 01:10:42 -0000 1.111
+++ Overview.src.html 26 Jan 2012 23:26:32 -0000 1.112
@@ -963,19 +963,46 @@
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
<ol>
- <li>Initially, the set of flexbox items marked as violating a max or min size constraint is empty.</li>
+ <li>If this is the first time this step is reached in the current invocation of this algorithm, <i>distribute the free space</i> in the flexbox line, then <i>fix max size violations</i>, then <i>fix min size violations</i>.</li>
- <li><i>Distribute the free space</i> in the flexbox line. If any flexbox item's main size is in violation of its max size constraint ('max-height' or 'max-width'), mark the item as being in violation of a max size constraint; if any other item is marked as being in violation of a max size constraint from a previous invocation of this step, remove the mark. Set its main size to be equal to its max size constraint. <i>Distribute the free space</i> again.</li>
+ <li>If the current set of items violating a min size constraint is different from the set in the previous iteration, remove the marks denoting any element as being in violation of a max size constraint, <i>distribute the free space</i>, then <i>fix max size violations</i>.</li>
- <li><i>Distribute the free space</i> in the flexbox line. If any flexbox item's main size is in violation of its min size constraint ('min-height' or 'min-width'), mark the item as being in violation of a min size constraint; if any other item is marked as being in violation of a min size constraint from a previous invocation of this step, remove the mark. Set its main size to be equal to its min size constraint. <i>Distribute the free space</i> again.</li>
+ <li>If the current set of items violating a max size constraint is different from the set in the previous iteration, remove the marks denoting any element as being in violation of a min size constraint, <i>distribute the free space</i>, then <i>fix min size violations</i>.</li>
- <li>If the set of flexbox items in the line that are marked as violating a max or min size constraint has changed in this run of the algorithm, restart the algorithm from step 2.</li>
+ <li>If either of the previous two steps changed the set of items violating their constraints, restart this algorithm.
+
+ <li>Otherwise, the used value of the main size property of every flexible item is the item's preferred size.</li>
</ol>
+ <p class='issue'>I'm pretty sure the previous algorithm will eventually terminate. I'm not absolutely certain, though. Help?
+
<p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
<ol>
- <li>...
+ <li>If the preferred size of a flexible length was changed from a previous invocation of this algorithm, reset it to its specified value.</li>
+
+ <li>Find the available free space. Sum the main sizes of the margin boxes of every flexbox item in the line, treating flexible lengths as their preferred size, and then subtract that from the main size of the flexbox's content box. This value is the available free space. It may be zero, positive, or negative.</li>
+
+ <li>
+ <dt>If the available free space is zero:</dt>
+ <dd>Do nothing.</dd>
+
+ <dt>If the available free space is positive:</dt>
+ <dd>Calculate the total flexibility by summing the positive flexibility of every flexible length in the line. For each flexible length, increment its preferred size by a fraction of the available free space equal to its positive flexibility divided by the total flexibility.</dd>
+
+ <dt>If the available free space is negative:</dt>
+ <dd>Calculate the total flexibility by summing the negative flexibility of every flexible length in the line. For each flexible length, increment its preferred size by a fraction of the available free space equal to its negative flexibility divided by the total flexibility. <span class='note'>Note: due to the signs involved, incrementing will decrease the preferred size.)</span></dd>
+ </li>
+ </ol>
+
+ <p>To <dfn title="fix max size violations|fix min size violations">fix size constraint violations</dfn> in a flexbox line:</p>
+
+ <ol>
+ <li>If none of the items on the line violate their min or max size constraints (as appropriate), exit this algorithm.</li>
+
+ <li>Otherwise, for every item in violation of a min or max size constraint (as appropriate), mark them as being in violation of that constraint. While an item is so marked, treat it as if it were inflexible, with its main size property set to its min or max size constraint, as appropriate.</li>
+
+ <li><i>Distribute the free space</i>, then restart this algorithm.</li>
</ol>
Received on Thursday, 26 January 2012 23:26:40 UTC