Merge branch 'master' into fix-selectors-4-typo

Author: tabatkins

Transitions.md

@@ -6,6 +6,7 @@ _(none)_
 
 ## First Public Working Draft
 
+
 _(none)_
 
 ## Candidate Recommendation
@@ -31,29 +32,23 @@ CSS Display
 CSS Speech (updated CR, has technical changes)
 * group decision [15 Feb 2017](https://www.w3.org/2017/02/15-css-irc#T17-39-53)
 * should be published as a NOTE because no implementations
-
-Writing Modes (updated CR with technical changes)
-  * working out how to move at-risk features to level 4, and keep in level 3 but as MAY
-  * working on the tests and finalizing the test report
-  * [wg resolution for PR](https://lists.w3.org/Archives/Public/www-style/2017May/0032.html) 17 May 2017
-  * [wg resolution for updated CR](https://github.com/w3c/csswg-drafts/issues/1391#issuecomment-320215251) 04 Aug 2017
-  * [draft transition request](https://github.com/w3c/csswg-drafts/blob/master/css-writing-modes-3/transition-updated-cr-2017-09.md)
 
-Flexbox (updated CR with technical changes)
-  * [group decision](https://lists.w3.org/Archives/Public/www-style/2017Sep/0028.html) 13 Sept 2017
-  * [transition request](https://github.com/w3c/csswg-drafts/blob/master/css-flexbox/transition-updated-cr-2017-09.md) [26 Sept 2017](https://lists.w3.org/Archives/Member/chairs/2017JulSep/0184.html)
-  * [transition decision](https://lists.w3.org/Archives/Member/chairs/2017JulSep/0205.html) 29 Sept 2017
-  * next step: publication, Tues 17 Oct 2017
+CSS Fonts 3 (was PR, now updated CR with technical changes)
+  * moved at-risk features to level 4
+  * fuller test coverage
+  * [group decision](https://lists.w3.org/Archives/Public/www-style/2017Oct/0044.html) 25 Oct 2017
+  * Myles updating changes section
+  * next step: Chris writing [transition request]()
+  * [Disposition of comments]()
+  
 
- Backgrounds & Borders (updated CR with technical changes)
-  * [group decision](https://lists.w3.org/Archives/Public/www-style/2017Sep/0054.html)
-  * [transition request](https://github.com/w3c/csswg-drafts/blob/master/css-backgrounds/transition-updated-cr-2017-09.md). @@ Email needs to be sent by Thierry.
-
 ## Proposed Recommendation
 
-CSS Fonts 3
-  * working out how to move at-risk features to level 4
-  * fuller test coverage
+CSS UI 3 (was PR, now updated CR with technical changes)
+  * [group decision](https://lists.w3.org/Archives/Public/www-style/2017Oct/0044.html) 25 Oct 2017
+  * advised to go to CR because of two small substantive changes, now shooting for PR again [timeline](https://w3c.github.io/spec-releases/milestones/?cr=2017-11-14&noFPWD=true) 31 Oct 2017
+  * [transition request](https://github.com/w3c/csswg-drafts/blob/master/css-writing-modes-3/transition-updated-cr-2017-09.md) sent [08 Nov 2017](https://lists.w3.org/Archives/Member/chairs/2017OctDec/0135.html)
+  * next step: dependencies question from transition meeting, being discussed
 
 
 ## Modified Recommendation (Editorial)
@@ -79,6 +74,10 @@ CSS-2017
 
 ## First Public Working Draft
 
+Writing Modes 4
+* [group decision]() when?
+* [done](https://www.w3.org/TR/2017/WD-css-writing-modes-4-20171207/) 7 December 2017
+
 CSS Fonts 4
 * [wg decision](https://www.w3.org/2017/04/19-css-irc#T06-11-40) 19 April 2017
 * [transition request](https://lists.w3.org/Archives/Member/chairs/2017JulSep/0000.html) 06 July 2017
@@ -131,6 +130,33 @@ CSS Table
 
 ## Candidate Recommendation
 
+Writing Modes 3 (updated CR with technical changes)
+  * working out how to move at-risk features to level 4, and keep in level 3 but as MAY
+  * working on the tests and finalizing the test report
+  * [wg resolution for PR](https://lists.w3.org/Archives/Public/www-style/2017May/0032.html) 17 May 2017
+  * [wg resolution for updated CR](https://github.com/w3c/csswg-drafts/issues/1391#issuecomment-320215251) 04 Aug 2017
+  * [transition request](https://github.com/w3c/csswg-drafts/blob/master/css-writing-modes-3/transition-updated-cr-2017-09.md) sent [09 Nov 2017](https://lists.w3.org/Archives/Member/chairs/2017OctDec/0134.html)
+  * [approved](https://lists.w3.org/Archives/Member/chairs/2017OctDec/0142.html) 21 Nov 2017
+  * next step: [waiting for editors to fix broken links and bad html](https://lists.w3.org/Archives/Member/w3c-css-wg/2017OctDec/0133.html) 21 Nov 2017 done 05 Dec 2017
+  * [publication request](https://lists.w3.org/Archives/Team/webreq/2017Dec/0007.html) 06 Dec 2017
+  * [done](https://www.w3.org/TR/2017/CR-css-writing-modes-3-20171207/) 07 Dec 2017
+
+CSS Color 3
+ * [Transition to CR from Rec; no new features, one normative change from errata](https://lists.w3.org/Archives/Member/chairs/2017OctDec/0145.html) 22 Nov 2017
+ * [approved](https://lists.w3.org/Archives/Member/chairs/2017OctDec/0154.html) 01 Dec 2017
+ * [done](https://www.w3.org/TR/2017/CR-css-color-3-20171205/) 05 Dec 2017
+ 
+Flexbox (updated CR with technical changes)
+  * [group decision](https://lists.w3.org/Archives/Public/www-style/2017Sep/0028.html) 13 Sept 2017
+  * [transition request](https://github.com/w3c/csswg-drafts/blob/master/css-flexbox/transition-updated-cr-2017-09.md) [26 Sept 2017](https://lists.w3.org/Archives/Member/chairs/2017JulSep/0184.html)
+  * [transition decision](https://lists.w3.org/Archives/Member/chairs/2017JulSep/0205.html) 29 Sept 2017
+  * [done](https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/) 19 Oct 2017
+  
+ Backgrounds & Borders (updated CR with technical changes)
+  * [group decision](https://lists.w3.org/Archives/Public/www-style/2017Sep/0054.html)
+  * [transition request](https://github.com/w3c/csswg-drafts/blob/master/css-backgrounds/transition-updated-cr-2017-09.md). 
+  * [done](https://www.w3.org/TR/2017/CR-css-backgrounds-3-20171017/) 17 Oct 2017
+
 Media Queries 4
 * [done](https://www.w3.org/TR/2017/CR-mediaqueries-4-20170905/) 5 Sep 2017
 

css-2015/Overview.bs

@@ -8,9 +8,9 @@ Work Status: Completed
 URL: https://drafts.csswg.org/css-2015/
 Previous Version: https://www.w3.org/TR/2015/NOTE-css-2015-20151013/
 TR: https://www.w3.org/TR/CSS/
-Editor: Tab Atkins Jr., Google, http://xanthir.com/
+Editor: Tab Atkins Jr., Google, http://xanthir.com/, w3cid 42199
 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
-Editor: Florian Rivoal, Vivliostyle, http://florian.rivoal.net, http://vivliostyle.com
+Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net, w3cid 43241
 Abstract: This document collects together into one definition all the specs that
 	together form the current state of Cascading Style Sheets (CSS) as of 2015.
 	The primary audience is CSS implementers, not CSS authors, as this definition

css-2017/Overview.bs

@@ -7,9 +7,9 @@ Group: CSSWG
 Work Status: Completed
 URL: https://drafts.csswg.org/css-2017/
 TR: https://www.w3.org/TR/CSS/
-Editor: Tab Atkins Jr., Google, http://xanthir.com/
+Editor: Tab Atkins Jr., Google, http://xanthir.com/, w3cid 42199
 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
-Editor: Florian Rivoal, Vivliostyle, http://florian.rivoal.net
+Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net, w3cid 43241
 Abstract: This document collects together into one definition all the specs that
 	together form the current state of Cascading Style Sheets (CSS) as of 2017.
 	The primary audience is CSS implementers, not CSS authors, as this definition
@@ -141,7 +141,7 @@ Background: The W3C Process and CSS</h3>
 		<dt><a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Level 3</a>
 		  [[!CSS-SYNTAX-3]]
 		<dd>
-			Replaces CSS2&sect;4.1, CSS2&sect;4.1, CSS2&sect;4.2, CSS2&sect;4.4, and CSS2&sect;G,
+			Replaces CSS2&sect;4.1, CSS2&sect;4.2, CSS2&sect;4.4, and CSS2&sect;G,
 			defining how CSS is parsed.
 
 		<dt><a href="https://www.w3.org/TR/css-style-attr/">CSS Style Attributes</a>

css-align-3/Overview.bs

@@ -1,6 +1,5 @@
-<h1>CSS Box Alignment Module Level 3</h1>
-
 <pre class='metadata'>
+Title: CSS Box Alignment Module Level 3
 Shortname: css-align
 Level: 3
 Group: csswg
@@ -10,6 +9,7 @@ ED: https://drafts.csswg.org/css-align/
 TR: https://www.w3.org/TR/css-align-3/
 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
+Previous Version: https://www.w3.org/TR/2017/WD-css-align-3-20170906/
 Previous Version: https://www.w3.org/TR/2017/WD-css-align-3-20170720/
 Previous Version: https://www.w3.org/TR/2017/WD-css-align-3-20170515/
 Previous Version: https://www.w3.org/TR/2017/WD-css-align-3-20170407/
@@ -361,8 +361,192 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 			</pre>
 	</dl>
 
-	<p class='issue'>
-		Add example images.
+	<aside class=example>
+		The ''<self-position>/start'' and ''<self-position>/end'' keywords
+		are <a>flow-relative</a>:
+		they use the <a>writing mode</a> to determine which side to align to.
+
+		<figure>
+			<img src="images/start-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'start' alignment in various writing systems"
+			     alt="Inline-axis 'start' alignment:
+			     Horizontal Latin and Chinese are left-aligned,
+			     while Arabic and Hebrew are right-aligned.">
+			<img src="images/end-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'end' alignment in various writing systems"
+			     alt="Inline-axis 'end' alignment:
+			     Horizontal Latin and Chinese are right-aligned,
+			     while Arabic and Hebrew are left-aligned.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/end'' in the <a>inline axis</a>
+				(<a href="#flexbox-exception">typically<sup>†</sup></a> 'justify-*')
+			</figcaption>
+		</figure>
+
+		The ''<self-position>/left'' and ''<self-position>/right'' keywords
+		are absolute (not <a>flow-relative</a>).
+
+		<figure>
+			<img src="images/left-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="'left' alignment in various writing systems"
+			     alt="Inline-axis 'left' alignment:
+			     Horizontal text is left-aligned, regardless of writing system.">
+			<img src="images/right-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="'right' alignment in various writing systems"
+			     alt="Inline-axis 'right' alignment:
+			     Horizontal text is right-aligned, regardless of writing system.">
+			<figcaption>
+				''<self-position>/left'' vs ''<self-position>/right''
+			</figcaption>
+		</figure>
+
+		The ''<self-position>/start'' and ''<self-position>/end'' keywords
+		have meaning in both the <a lt="inline axis">inline</a> and <a lt="block axis">block</a> axes:
+		''<self-position>/start'' always orients to the start of the text
+		(top left for left-to-right/top-to-bottom languages like English)
+		while ''<self-position>/end'' always orients to the end of the text.
+
+		<figure>
+			<img src="images/start-block-tb.svg"
+			     style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);"
+			     title="block-axis 'start' alignment in various writing systems"
+			     alt="Block-axis 'start' alignment:
+			     Horizontal text is top-aligned in the vertical axis.">
+			<img src="images/end-block-tb.svg"
+			     style="background: white; padding: 8px; padding-top: calc(8px + 23px);"
+			     title="block-axis 'end' alignment in various writing systems"
+			     alt="Block-axis 'bottom' alignment:
+			     Horizontal text is bottom-aligned in the vertical axis.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/end'' in the <a>block axis</a>
+				(<a href="#flexbox-exception">typically<sup>†</sup></a> 'align-*')
+			</figcaption>
+		</figure>
+
+		The ''<self-position>/start'' and ''<self-position>/end'' keywords
+		use the <a>writing mode</a> of the <a>alignment container</a>,
+		to help keep things consistent.
+		But if alignment using the <a>alignment subject</a>’s <a>writing mode</a> is needed,
+		the ''<self-position>/self-start'' and ''<self-position>/self-end'' keywords can be used.
+
+		<figure>
+			<img src="images/self-v-context-start-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'start' alignment with LTR context"
+			     alt="Inline-axis 'start' alignment in an LTR container:
+			     Alignment uses the context’s start direction, so
+			     the (RTL) Arabic and Hebrew items
+			     are left-aligned alongside the (LTR) Latin and Chinese.">
+			<img src="images/self-v-context-self-start-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'self-start' alignment with LTR context"
+			     alt="Inline-axis 'self-start' alignment in an LTR container:
+			     Horizontal Latin and Chinese items are right-aligned,
+			     while Arabic and Hebrew items are left-aligned.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/self-start'' on the individual items
+			</figcaption>
+		</figure>
+	</aside>
+
+	<aside class=example>
+		The behavior of the alignment keywords is analogous in <a>vertical writing modes</a>:
+		''<self-position>/start'' and ''<self-position>/end''
+		are relative to the start/end of the text in the relevant axis.
+		The ''<self-position>/left'' and ''<self-position>/right'' keywords
+		are interpreted as <a>line-left</a> and <a>line-right</a>,
+		relative to the “left” and “right” sides of LTR/RTL text.
+
+		<figure>
+			<img src="images/start-inline-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'start' alignment in various writing systems"
+			     alt="Inline-axis 'start' alignment in vertical-rl writing:
+			     Vertical Latin and Chinese are top-aligned,
+			     while Arabic and Hebrew are bottom-aligned.">
+			<img src="images/end-inline-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'end' alignment in various writing systems"
+			     alt="Inline-axis 'end' alignment in vertical-rl writing:
+			     Vertical Latin and Chinese are top-aligned,
+			     while Arabic and Hebrew are bottom-aligned.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/end'' in the <a>inline axis</a>
+				(<a href="#flexbox-exception">typically<sup>†</sup></a> 'justify-*')
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/left-inline-rl.svg"
+			     style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);"
+			     title="'left' alignment in various writing systems"
+			     alt="Inline-axis 'left' alignment in vertical-rl writing:
+			     Vertical text is top-aligned, regardless of writing system.">
+			<img src="images/right-inline-rl.svg"
+			     style="background: white; padding: 8px; padding-top: calc(5px + 23px); padding-bottom: 5px;"
+			     title="'right' alignment in various writing systems"
+			     alt="Inline-axis 'right' alignment in vertical-rl writing:
+			     Vertical text is bottom-aligned, regardless of writing system.">
+			<figcaption>
+				''<self-position>/left'' vs ''<self-position>/right''
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/start-block-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="block-axis 'start' alignment in various writing systems"
+			     alt="Block-axis 'start' alignment in vertical-rl writing:
+			     Vertical text is top-aligned in the vertical axis.">
+			<img src="images/end-block-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="block-axis 'end' alignment in various writing systems"
+			     alt="Block-axis 'bottom' alignment in vertical-rl writing:
+			     Vertical text is bottom-aligned in the vertical axis.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/end'' in the <a>block axis</a>
+				(<a href="#flexbox-exception">typically<sup>†</sup></a> 'align-*')
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/self-v-context-start-rl.svg"
+			     style="background: white; padding: 8px; padding-bottom: calc(8px + 30px);"
+			     title="inline-axis 'start' alignment with LTR context"
+			     alt="Inline-axis 'start' alignment in a vertical-rl LTR container:
+			     Alignment uses the context’s start direction, so
+			     the (RTL) Arabic and Hebrew items
+			     are top-aligned alongside the (LTR) Latin and Chinese.">
+			<img src="images/self-v-context-self-start-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'self-start' alignment with LTR context"
+			     alt="Inline-axis 'self-start' alignment in a vertical-rl LTR container:
+			     Horizontal Latin and Chinese items are top-aligned,
+			     while Arabic and Hebrew items are bottom-aligned.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/self-start'' on the individual items
+			</figcaption>
+		</figure>
+	</aside>
+
+	<div class=note id=flexbox-exception>
+		For most layout models (block, table, grid, etc),
+		the 'justify-*' properties always align things in the <a>inline axis</a>,
+		while the 'align-*' properties always align things in the <a>block axis</a>.
+
+		Flexbox, on the other hand, has 'justify-*' align things in the <a>main axis</a>
+		and 'align-*' align things in the <a>cross axis</a>.
+		This depends on the value of 'flex-direction':
+		when 'flex-direction' is ''flex-direction/row'' or ''flex-direction/row-reverse'',
+		it matches the other layout modes
+		(<a>inline axis</a> with 'justify-*', <a>block axis</a> with 'align-*');
+		when 'flex-direction' is ''flex-direction/column'' or ''flex-direction/column-reverse'',
+		it has the opposite correspondence.
+	</div>
 
 	<p class='issue'>
 		Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows.
@@ -1638,6 +1822,11 @@ Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>
 			see subsections below for details.
 
 			Negative values are invalid.
+			Percentages resolve to zero
+			when specified against a content-based size
+			(such as the <a>logical width</a> of a float
+			or the ''height/auto'' <a>logical height</a>
+			of a <a>block-level</a> <a>grid container</a>).
 
 		: <dfn>normal</dfn>
 		:: The ''gap/normal'' represents a UA-dependent length on <a>multi-column elements</a>,
@@ -1998,4 +2187,6 @@ Privacy and Security Considerations</h2>
 Acknowledgments</h2>
 
 	Special thanks goes to David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky,
-	and the participants in the CSSWG's March 2008 F2F alignment discussions.
+	and the participants in the CSSWG's March 2008 F2F alignment discussions
+	for their contributions to the alignment model described herein,
+	and to Melanie Richards for her illustrations of the various <a href="#alignment-values">alignment keywords</a>.