[css-flexbox] Element/box fixup.

Author: tabatkins

css-flexbox/Overview.html

@@ -246,7 +246,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Flexible Box Layout Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140211>11 February 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140212>12 February 2014</span></span></span></h2>
   <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/css3-flexbox/>http://www.w3.org/TR/css3-flexbox/</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/TR/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>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-flexbox%5D%20feedback">www-style@w3.org</a>
@@ -541,7 +541,7 @@ <h2 class="heading settled heading" data-level=2 id=box-model><span class=secno>
 Flex Layout Box Model and Terminology</span><a class=self-link href=#box-model></a></h2>
 
 	<p>
-		An element with <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display:flex</a> or <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display:inline-flex</a> is a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>.
+		A box with <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display:flex</a> or <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display:inline-flex</a> is a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>.
 		Children of a flex container are called <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> and are laid out using the flex layout model.
 
 	<p>
@@ -648,7 +648,7 @@ <h2 class="heading settled heading" data-level=3 id=flex-containers><span class=
 		<li>
 			<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-float title=float>float</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-clear title=clear>clear</a> have no effect on a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>.
 			(However, the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-float title=float>float</a> property still affects the computed value of <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> on children of a flex container,
-			as this occurs <em title="">before</em> <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> are determined.)
+			as this occurs <em>before</em> <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> are determined.)
 
 		<li>
 			<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a> has no effect on a flex item.
@@ -658,8 +658,8 @@ <h2 class="heading settled heading" data-level=3 id=flex-containers><span class=
 	</ul>
 
 	<p>
-		If an element’s specified <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> is <a class=css data-link-type=maybe href=#valuedef-inline-flex title=inline-flex>inline-flex</a>
-		and the element is floated or absolutely positioned,
+		If a box’s specified <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> is <a class=css data-link-type=maybe href=#valuedef-inline-flex title=inline-flex>inline-flex</a>
+		and the box is floated or absolutely positioned,
 		the computed value of <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> is <a href=#display-flex><a class=css data-link-type=maybe href=#valuedef-flex title=flex>flex</a></a>.
 		The table in <a href=http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo>CSS 2.1 Chapter 9.7</a> is thus amended
 		to contain an additional row,
@@ -690,7 +690,7 @@ <h2 class="heading settled heading" data-level=4 id=flex-items><span class=secno
 		The computed <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> of a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
 		is determined by applying the table in
 		<a href=http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo>CSS 2.1 Chapter 9.7</a>
-		(except that internal table elements are instead handled by anonymous box fixup, see below).
+		(except that internal table boxes are instead handled by anonymous box fixup, see below).
 		However, flex items are flex-level boxes, not block-level boxes:
 		they participate in their container’s flex formatting context,
 		not in a block formatting context.
@@ -726,9 +726,9 @@ <h2 class="heading settled heading" data-level=4 id=flex-items><span class=secno
 	<p>
 		Some values of <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> trigger the generation of anonymous boxes.
 		For example, a misparented <span class=css data-link-type=maybe title=table-cell>table-cell</span> child is fixed up
-		by <a href=http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes>generating anonymous <span class=css data-link-type=maybe title=table>table</span> and <span class=css data-link-type=maybe title=table-row>table-row</span> elements</a> around it. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>
+		by <a href=http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes>generating anonymous <span class=css data-link-type=maybe title=table>table</span> and <span class=css data-link-type=maybe title=table-row>table-row</span> boxes</a> around it. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>
 		This fixup must occur <em>before</em> a flex container’s children are promoted to <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>.
-		For example, given two contiguous child elements with <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display:table-cell</a>,
+		For example, given two contiguous child boxes with <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display:table-cell</a>,
 		an anonymous table wrapper box around them becomes the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>.
 
 	<p class=note>
@@ -750,16 +750,16 @@ <h2 class="heading settled heading" data-level=4 id=flex-items><span class=secno
 <h3 class="heading settled heading" data-level=4.1 id=abspos-items><span class=secno>4.1 </span><span class=content>
 Absolutely-Positioned Flex Children</span><a class=self-link href=#abspos-items></a></h3>
 
-<p>	An absolutely-positioned child element of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> does not participate in flex layout
+<p>	An absolutely-positioned child of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> does not participate in flex layout
 	beyond the <a href=#algo-flex-order>reordering step</a>.
 
-<p>	Its static position is calculated by first doing full flex layout without the absolutely-positioned elements,
+<p>	Its static position is calculated by first doing full flex layout without the absolutely-positioned children,
 	then positioning each absolutely-positioned child as if it were the sole <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
 	in the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,
-	assuming both the element and the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> were fixed size boxes of their used size.
+	assuming both the child and the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> were fixed size boxes of their used size.
 
 	<div class=example>
-		For example, by default, the static position of an absolutely positioned element aligns it to the main-start/cross-start corner,
+		For example, by default, the static position of an absolutely positioned child aligns it to the main-start/cross-start corner,
 		corresponding to the default values of <a class=property data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content</a> and <a class=property data-link-type=propdesc href=#propdef-align-content title=align-content>align-content</a> on the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>.
 		Setting <a class=css data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content:center</a> on the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>, however,
 		would center it in the main axis.
@@ -799,7 +799,7 @@ <h3 class="heading settled heading" data-level=4.4 id=visibility-collapse><span
 		Specifying <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility title=visibility>visibility:collapse</a> on a flex item
 		causes it to become a <dfn data-dfn-type=dfn data-noexport="" id=collapsed-flex-item title="collapsed flex item|collapsed">collapsed flex item<a class=self-link href=#collapsed-flex-item></a></dfn>,
 		producing an effect similar to <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility title=visibility>visibility:collapse</a> on a table-row or table-column:
-		the collapsed element is removed from rendering entirely,
+		the collapsed flex item is removed from rendering entirely,
 		but leaves behind a "strut" that keeps the flex line’s cross-size stable.
 		Thus, if a flex container has only one flex line,
 		dynamically collapsing or uncollapsing items
@@ -812,7 +812,7 @@ <h3 class="heading settled heading" data-level=4.4 id=visibility-collapse><span
 		Though collapsed flex items aren’t rendered,
 		they do appear in the <a href=http://www.w3.org/TR/CSS21/intro.html#formatting-structure>formatting structure</a>.
 		Therefore, unlike on <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display:none</a> items <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>,
-		effects that depend on an element appearing in the formatting structure
+		effects that depend on a box appearing in the formatting structure
 		(like incrementing counters or running animations and transitions)
 		still operate on collapsed items.
 
@@ -1108,7 +1108,7 @@ <h3 class="heading settled heading" data-level=5.4 id=order-property><span class
 		starting from the lowest numbered ordinal group and going up.
 		Items with the same ordinal group are laid out in the order they appear in the source document.
 		This also affects the <a href=http://www.w3.org/TR/CSS2/zindex.html>painting order</a> <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>,
-		exactly as if the elements were reordered in the document.
+		exactly as if the flex items were reordered in the source document.
 
 	<div class=example>
 		<p>The following figure shows a simple tabbed interface, where the tab for the active pane is always first:
@@ -1132,7 +1132,7 @@ <h3 class="heading settled heading" data-level=5.4 id=order-property><span class
 
 	<p>
 		Unless otherwise specified by a future specification,
-		this property has no effect on elements that are not <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>.
+		this property has no effect on boxes that are not <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>.
 
 
 
@@ -1332,10 +1332,10 @@ <h3 class="heading settled heading" data-level=7.1 id=flex-property><span class=
 		the <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a>
 		and <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a>,
 		and the <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a>.
-		When an element is a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>,
+		When a box is a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>,
 		<a class=property data-link-type=propdesc href=#propdef-flex title=flex>flex</a> is consulted <em>instead of</em> the <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a>
-		to determine the <a data-link-type=dfn href=#main-size title="main size">main size</a> of the element.
-		If an element is not a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>,
+		to determine the <a data-link-type=dfn href=#main-size title="main size">main size</a> of the box.
+		If a box is not a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>,
 		<a class=property data-link-type=propdesc href=#propdef-flex title=flex>flex</a> has no effect.
 
 	<dl data-dfn-for=flex data-dfn-type=value>
@@ -1371,8 +1371,8 @@ <h3 class="heading settled heading" data-level=7.1 id=flex-property><span class=
 				When omitted from the <a class=property data-link-type=propdesc href=#propdef-flex title=flex>flex</a> shorthand, its specified value is <span class=css data-link-type=maybe title=0%>0%</span>.
 			<p>
 				If the specified <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> is <a class=css-code data-link-for=flex-basis data-link-type=value href=#valuedef-auto0 title=auto>auto</a>,
-				the used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is the value of the element’s <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a>.
-				(This can itself be the keyword <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a>, which sizes the element based on its contents.)
+				the used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is the value of the flex item’s <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a>.
+				(This can itself be the keyword <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a>, which sizes the flex item based on its contents.)
 
 			</p><figure>
 				<img height=240 src=images/rel-vs-abs-flex.svg width=504>
@@ -1558,7 +1558,7 @@ <h3 class="heading settled heading" data-level=8.1 id=auto-margins><span class=s
 			any positive free space is distributed to auto margins in that dimension.
 
 		<li>
-			Overflowing elements ignore their auto margins and overflow in the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#end title=end>end</a> direction.
+			Overflowing boxes ignore their auto margins and overflow in the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#end title=end>end</a> direction.
 	</ul>
 
 	<p class=note>
@@ -1735,8 +1735,8 @@ <h3 class="heading settled heading" data-level=8.3 id=align-items-property><span
 
 	<p>
 		A value of <dfn class=css-code data-dfn-for=align-self data-dfn-type=value data-export="" id=valuedef-auto>auto<a class=self-link href=#valuedef-auto></a></dfn> for <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a>
-		computes to the value of <a class=property data-link-type=propdesc href=#propdef-align-items title=align-items>align-items</a> on the element’s parent,
-		or <a class=css-code data-link-for=align-self data-link-type=value href=#valuedef-stretch0 title=stretch>stretch</a> if the element has no parent.
+		computes to the value of <a class=property data-link-type=propdesc href=#propdef-align-items title=align-items>align-items</a> on the flex item’s parent,
+		or <a class=css-code data-link-for=align-self data-link-type=value href=#valuedef-stretch0 title=stretch>stretch</a> if the flex item has no parent.
 		The alignments are defined as:
 
 	<dl data-dfn-for="align-items align-self" data-dfn-type=value>
@@ -2015,10 +2015,10 @@ <h3 class="heading settled heading" data-level=9.1 id=box-manip><span class=secn
 
 		<li id=algo-flex-order><a class=self-link href=#algo-flex-order></a>
 			<strong>Re-order the flex items and absolutely positioned flex container children according to their <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a>.</strong>
-			The elements with the lowest (most negative) <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> values are first in the ordering.
-			If multiple elements share an <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> value,
+			The flex items with the lowest (most negative) <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> values are first in the ordering.
+			If multiple flex items share an <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> value,
 			they’re ordered by document order.
-			This affects the order in which the elements generate boxes in the box-tree,
+			This effectively changes the order of their boxes in the box-tree,
 			and how the rest of this algorithm deals with the generated flex items.
 	</ol>
 
@@ -2463,7 +2463,7 @@ <h2 class="heading settled heading" data-level=10 id=pagination><span class=secn
 		and inside items.
 		The <a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css-break-3/#break-before title=break-before>break-*</a> properties apply to flex containers as normal for block-level or inline-level boxes.
 		This section defines how they apply to flex items
-		and elements inside flex items.
+		and the contents of flex items.
 
 	<p>
 		The following breaking rules refer to the fragmentation container as the “page”.
@@ -2824,7 +2824,7 @@ <h2 class="no-num heading settled heading" id=changes><span class=content>Change
 		<li>
 			Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion).
 		<li>
-			Clarified that <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-float title=float>float</a> still makes the children of a flex container turn into block-level elements.
+			Clarified that <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-float title=float>float</a> still affects the computed <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> (which may affect box-fixup rules that run prior to flex item determination).
 		<li>
 			Clarified that table anonymous box generation occurs in place of computed value conversion for internal table elements.
 		<li>