[css-flexbox-1] Start adding WPT annotations.

Author: tabatkins

css-flexbox-1/Overview.bs

@@ -30,6 +30,7 @@ Former Editor: David Hyatt, formerly of Netscape Corporation, hyatt@apple.com
 !Issues List: <a href="https://drafts.csswg.org/css-flexbox-1/issues">https://drafts.csswg.org/css-flexbox-1/issues</a>
 Ignored Terms: auto, first formatted line, first letter, static position
 Ignored Vars: item’s own max-content, maximum min-content among all items
+WPT Path Prefix: css/css-flexbox/
 </pre>
 
 <pre class='link-defaults'>
@@ -526,10 +527,19 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values</h2>
 			This value causes an element to generate a <a>flex container</a> box
 			that is <a>block-level</a> when placed in <a>flow layout</a>.
 
+			<wpt>
+				display-flex-001.htm
+				display_flex_exist.html
+			</wpt>
+
 		<dt><dfn>inline-flex</dfn>
 		<dd>
 			This value causes an element to generate a <a>flex container</a> box
 			that is <a>inline-level</a> when placed in <a>flow layout</a>.
+
+			<wpt>
+				display_inline-flex_exist.html
+			</wpt>
 	</dl>
 
 	A <a>flex container</a> establishes a new <dfn export>flex formatting context</dfn> for its contents.
@@ -590,6 +600,15 @@ Flex Items</h2>
 	(i.e. characters that can be affected by the 'white-space' property)
 	it is instead not rendered (just as if its <a>text nodes</a> were ''display:none'').
 
+	<wpt>
+		anonymous-flex-item-001.html
+		anonymous-flex-item-002.html
+		anonymous-flex-item-003.html
+		anonymous-flex-item-004.html
+		anonymous-flex-item-005.html
+		anonymous-flex-item-006.html
+	</wpt>
+
 	<div class="example">
 		<p>Examples of flex items:
 		<pre class="lang-markup">
@@ -704,6 +723,15 @@ Absolutely-Positioned Flex Children</h3>
 	For this purpose,
 	''margin/auto'' margins are treated as zero.
 
+	<wpt>
+		abspos-autopos-htb-ltr.html
+		abspos-autopos-htb-rtl.html
+		abspos-autopos-vlr-ltr.html
+		abspos-autopos-vlr-rtl.html
+		abspos-autopos-vrl-ltr.html
+		abspos-autopos-vrl-rtl.html
+	</wpt>
+
 	<div class="note">
 		In other words,
 		the <a>static-position rectangle</a> of an absolutely-positioned child of a <a>flex container</a>
@@ -1051,11 +1079,24 @@ Flex Flow Direction: the 'flex-direction' property</h3>
 			<a>inline-end</a> directions, respectively,
 			of the current <a>writing mode</a>.
 
+			<wpt>
+				css-flexbox-row-wrap-reverse.html
+				css-flexbox-row-wrap.html
+				css-flexbox-row.html
+				css-flexbox-test1.html
+			</wpt>
+
 		<dt><dfn>row-reverse</dfn>
 		<dd>
 			Same as ''row'',
 			except the <a>main-start</a> and <a>main-end</a> directions are swapped.
 
+			<wpt>
+				css-flexbox-row-reverse-wrap-reverse.html
+				css-flexbox-row-reverse-wrap.html
+				css-flexbox-row-reverse.html
+			</wpt>
+
 		<dt><dfn>column</dfn>
 		<dd>
 			The flex container's <a>main axis</a> has the same orientation as the
@@ -1066,10 +1107,22 @@ Flex Flow Direction: the 'flex-direction' property</h3>
 			<a>block-end</a> directions, respectively,
 			of the current <a>writing mode</a>.
 
+			<wpt>
+				css-flexbox-column-wrap-reverse.html
+				css-flexbox-column-wrap.html
+				css-flexbox-column.html
+			</wpt>
+
 		<dt><dfn>column-reverse</dfn>
 		<dd>
 			Same as ''column'',
 			except the <a>main-start</a> and <a>main-end</a> directions are swapped.
+
+			<wpt>
+				css-flexbox-column-reverse-wrap-reverse.html
+				css-flexbox-column-reverse-wrap.html
+				css-flexbox-column-reverse.html
+			</wpt>
 	</dl>
 
 	Note: The reverse values do not reverse box ordering:
@@ -1110,13 +1163,34 @@ Flex Line Wrapping: the 'flex-wrap' property</h3>
 		<dd>
 			The flex container is <a>single-line</a>.
 
+			<wpt>
+				css-flexbox-row-reverse.html
+				css-flexbox-row.html
+				css-flexbox-column-reverse.html
+				css-flexbox-column.html
+			</wpt>
+
 		<dt><dfn>wrap</dfn>
 		<dd>
 			The flex container is <a>multi-line</a>.
 
+			<wpt>
+				css-flexbox-row-reverse-wrap.html
+				css-flexbox-row-wrap.html
+				css-flexbox-column-reverse-wrap.html
+				css-flexbox-column-wrap.html
+			</wpt>
+
 		<dt><dfn>wrap-reverse</dfn>
 		<dd>
 			Same as ''wrap''.
+
+			<wpt>
+				css-flexbox-row-reverse-wrap-reverse.html
+				css-flexbox-row-wrap-reverse.html
+				css-flexbox-column-reverse-wrap-reverse.html
+				css-flexbox-column-wrap-reverse.html
+			</wpt>
 	</dl>
 
 	For the values that are not ''wrap-reverse'',
@@ -1149,6 +1223,15 @@ Flex Direction and Wrap: the 'flex-flow' shorthand</h3>
 	The 'flex-flow' property is a shorthand for setting the 'flex-direction' and 'flex-wrap' properties,
 	which together define the flex container's main and cross axes.
 
+	<wpt>
+		css-flexbox-column-reverse-wrap-reverse.html
+		css-flexbox-column-reverse-wrap.html
+		css-flexbox-column-reverse.html
+		css-flexbox-column-wrap-reverse.html
+		css-flexbox-column-wrap.html
+		css-flexbox-column.html
+	</wpt>
+
 	<div class="example">
 		Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:
 
@@ -1228,6 +1311,10 @@ Display Order: the 'order' property</h3>
 	Animation type: integer
 	</pre>
 
+	<wpt>
+		Flexible-order.html
+	</wpt>
+
 	The 'order' property controls the order in which
 	flex items appear within the flex container,
 	by assigning them to ordinal groups.
@@ -1463,6 +1550,15 @@ Flex Lines</h2>
 	and 'align-content' has no effect.
 	The <a>main size</a> of a line is always the same as the <a>main size</a> of the flex container's content box.
 
+	<wpt>
+		align-content-001.htm
+		align-content-002.htm
+		align-content-003.htm
+		align-content-004.htm
+		align-content-005.htm
+		align-content-006.htm
+	</wpt>
+
 	<div class='example'>
 		Here's the same example as the previous,
 		except that the flex items have all been given ''flex: auto''.
@@ -1538,6 +1634,11 @@ The 'flex' Shorthand</h3>
 			when positive free space is distributed.
 			When omitted, it is set to ''1''.
 
+			<wpt>
+				flex-001.htm
+				flex-003.htm
+			</wpt>
+
 			<details class=note>
 				<summary>Flex values between 0 and 1 have a somewhat special behavior:
 				when the sum of the flex values on the line is less than 1,
@@ -1586,6 +1687,11 @@ The 'flex' Shorthand</h3>
 			when negative free space is distributed.
 			When omitted, it is set to ''1''.
 
+			<wpt>
+				flex-002.htm
+				flex-004.htm
+			</wpt>
+
 			Note: The <a>flex shrink factor</a> is multiplied by the <a>flex base size</a> when distributing negative space.
 			This distributes negative space in proportion to how much the item is able to shrink,
 			so that e.g. a small item won't shrink to zero before a larger item has been noticeably reduced.
@@ -1851,6 +1957,10 @@ Aligning with <a value for=margin>auto</a> margins</h3>
 		any positive free space is distributed to auto margins in that dimension.
 	* Overflowing boxes ignore their auto margins and overflow in the <a>end</a> direction.
 
+	<wpt>
+		auto-margins-001.html
+	</wpt>
+
 	Note: If free space is distributed to auto margins,
 	the alignment properties will have no effect in that dimension
 	because the margins will have stolen all the free space
@@ -1972,6 +2082,10 @@ Axis Alignment: the 'justify-content' property</h3>
 			is placed flush with the <a>main-end</a> edge of the line,
 			and each preceding <a>flex item</a> is placed flush with the subsequent item.
 
+			<wpt>
+				css-box-justify-content.html
+			</wpt>
+
 		<dt><dfn>center</dfn>
 		<dd>
 			<a>Flex items</a> are packed toward the center of the line.
@@ -2047,6 +2161,10 @@ Cross-axis Alignment: the 'align-items' and 'align-self' properties</h3>
 	Media: visual
 	</pre>
 
+	<wpt>
+		align-self-013.html
+	</wpt>
+
 	<a>Flex items</a> can be aligned in the <a>cross axis</a> of the current line of the flex container,
 	similar to 'justify-content' but in the perpendicular direction.
 	'align-items' sets the default alignment for all of the flex container's <a lt="flex items">items</a>,
@@ -2067,22 +2185,46 @@ Cross-axis Alignment: the 'align-items' and 'align-self' properties</h3>
 			to the value of 'align-items' on the parent box.
 			(This is the initial value of 'align-self'.)
 
+			<wpt>
+				align-self-007.html
+				align-self-008.html
+				align-self-009.html
+				align-self-011.html
+				align-self-012.html
+			</wpt>
+
 		<dt><dfn>flex-start</dfn>
 		<dd>
 			The <a>cross-start</a> margin edge of the <a>flex item</a>
 			is placed flush with the <a>cross-start</a> edge of the line.
 
+			<wpt>
+				align-items-002.htm
+				align-items-006.html
+				align-self-001.html
+			</wpt>
+
 		<dt><dfn>flex-end</dfn>
 		<dd>
 			The <a>cross-end</a> margin edge of the <a>flex item</a>
 			is placed flush with the <a>cross-end</a> edge of the line.
 
+			<wpt>
+				align-items-003.htm
+				align-self-002.html
+			</wpt>
+
 		<dt><dfn>center</dfn>
 		<dd>
 			The <a>flex item</a>’s margin box is centered in the <a>cross axis</a> within the line.
 			(If the <a>cross size</a> of the flex line is less than that of the <a>flex item</a>,
 			it will overflow equally in both directions.)
 
+			<wpt>
+				align-items-001.htm
+				align-self-003.html
+			</wpt>
+
 		<dt><dfn>baseline</dfn>
 		<dd>
 			The <a>flex item</a> <dfn dfn id='baseline-participation'>participates in baseline alignment</dfn>:
@@ -2094,6 +2236,10 @@ Cross-axis Alignment: the 'align-items' and 'align-self' properties</h3>
 			then one is <a lt="synthesize baseline">synthesized</a>
 			from the <a>flex item</a>’s border box.
 
+			<wpt>
+				align-items-004.htm
+			</wpt>
+
 		<dt><dfn>stretch</dfn>
 		<dd>
 			If the <a>cross size property</a> of the <a>flex item</a> computes to ''width/auto'',
@@ -2108,6 +2254,13 @@ Cross-axis Alignment: the 'align-items' and 'align-self' properties</h3>
 
 			The <a>cross-start</a> margin edge of the <a>flex item</a>
 			is placed flush with the <a>cross-start</a> edge of the line.
+
+			<wpt>
+				align-items-005.htm
+				align-self-004.html
+				align-self-005.html
+				css-flexbox-height-animation-stretch.html
+			</wpt>
 	</dl>
 
 	<div class='figure'>
@@ -2418,6 +2571,10 @@ Line Length Determination</h3>
 					and the <a>flex item</a>’s cross size is ''auto'' and not <a>definite</a>,
 					in this calculation use ''width/fit-content'' as the <a>flex item</a>’s <a>cross size</a>.
 					The <a>flex base size</a> is the item's resulting <a>main size</a>.
+
+					<wpt>
+						css-flexbox-img-expand-evenly.html
+					</wpt>
 			</ol>
 
 			When determining the <a>flex base size</a>,