Clean up

Tidied up the non-normative intro based on recent resolutions. Also deferred the gap decorations section to CSS-GAPS, as we previously did for the alignment properties to CSS-ALIGN.

Author: rachelandrew

css-multicol-2/Overview.bs

@@ -82,54 +82,33 @@ Introduction</h2>
 		and the column widths will vary depending on the available width.
 	</div>
 
-	The shorthand 'columns' property can be used to set either,
-	or both, properties in one declaration.
+	If a 'column-height' is set,
+	and there is more content that will fit in one row of columns at the specified height,
+	multiple rows of columns are created in the block direction.
 
 	<div class=example>
-		In these examples, the number of columns, the width of columns, and
-		both the number and width are set, respectively:
-
-		<pre highlight="css">
-		body { columns: 2 }
-		body { columns: 12em }
-		body { columns: 2 12em }
-		</pre>
-
-	</div>
-
-	Another group of properties introduced in this module describe
-	gaps and rules between columns.
+		<pre highlight="css">body { column-height: 10em; column-count: 3 }</pre>
 
-	<div class=example>
-		<pre highlight="css">
-		body {
-			column-gap: 1em;
-			column-rule: thin solid black;
-		}
-		</pre>
-
-		The first declaration in the example above sets the gap
-		between two adjacent columns to be 1em.
-		Column gaps are similar to padding areas.
-		In the middle of the gap there will be a rule
-		which is described by the 'column-rule' property.
+		In this case, the number of columns is fixed
+		and the column widths will vary depending on the available width.
+		If there is more content than will fit into three columns of height 10em,
+		a new row of columns is created in the block direction.
 	</div>
 
-	The values of the 'column-rule' property are similar to those of the CSS 'border' properties.
-	Like 'border', 'column-rule' is a shorthand property.
+	The shorthand 'columns' property can be used to set all three properties in one declaration.
 
 	<div class=example>
-		In this example, the shorthand 'column-rule' declaration from the
-		above example has been expanded:
+		In these examples, the number of columns, the width of columns, and
+		both the number and width of columns,
+		and the width and height of columns are set, respectively:
 
 		<pre highlight="css">
-		body {
-			column-gap: 1em;
-			column-rule-width: thin;
-			column-rule-style: solid;
-			column-rule-color: black;
-		}
+		body { columns: 2 }
+		body { columns: 12em }
+		body { columns: 2 12em }
+		body { columns: 12em / 14em }
 		</pre>
+
 	</div>
 
 	The 'column-fill' and 'column-span' properties
@@ -150,9 +129,6 @@ Introduction</h2>
 		multicol-fill-balance-029.html
 	</wpt>
 
-	This specification introduces ten new properties,
-	all of which are used in the examples above.
-
 	If all column properties have their initial value,
 	the layout of an element will be identical
 	to a multi-column layout with only one column.
@@ -1205,19 +1181,6 @@ without caring about the <em>contents</em>.
 	multicol-rule-nested-balancing-004.html
 	</wpt>
 
-	A [=column rule=] is drawn in the middle of the [=column gap=]
-	with the endpoints at opposing content edges of the [=multicol container=].
-	Column rules do not take up space.
-	That is, the presence or thickness of a [=column rule=] will not alter the placement of anything else.
-	If a [=column rule=] is wider than its gap,
-	the adjacent column boxes will overlap the rule,
-	and the rule may possibly extend outside the box of the [=multicol container=].
-	Column rules are painted just above the border of the [=multicol container=].
-	For scrollable multicol containers,
-	note that while the border and background of the [=multicol container=] obviously aren't scrolled,
-	the rules need to scroll along with the columns.
-	Column rules are only drawn between two columns that both have content.
-
 	<wpt title="Basic column rule tests">
 	multicol-rule-003.xht
 	multicol-rule-004.xht
@@ -1290,28 +1253,15 @@ without caring about the <em>contents</em>.
 	If there is a rule between rows,
 	it will appear in the middle of the gap.
 
-<h3 id='crc'>The Color of Column Rules: the
-'column-rule-color' property</h3>
+<h3 id='crc'>The Color, Width, and Style of Column Rules: the
+gap decoration properties</h3>
 
-	<pre class=propdef>
-	Name: column-rule-color
-	Value: <<color>>
-	Initial: currentcolor
-	Applies to: multicol containers
-	Inherited: no
-	Percentages: N/A
-	Computed value: computed color
-	Animation type: by computed value type
-	</pre>
-
-	<dl>
-		<dt><dfn value for=column-rule-color><<color>></dfn></dt>
-		<dd>
-			Specifies the color of the [=column rule=].
-		</dd>
-	</dl>
+	The gap decoration properties of 'column-rule' and 'row-rule',
+	along with their longhands 'column-rule-color', 'row-rule-color',
+	'column-rule-style', 'row-rule-style', 'column-rule-width', 'row-rule-width'
+	are defined in [[!CSS-GAPS]].
 
-	<wpt>
+	<wpt title="Tests for column-rule-color in multicol">
 	multicol-rule-color-001.xht
 	multicol-rule-color-inherit-001.xht
 	multicol-rule-color-inherit-002.xht
@@ -1321,71 +1271,13 @@ without caring about the <em>contents</em>.
 	animation/column-rule-color-interpolation.html
 	</wpt>
 
-<h3 id='crs'>The Style Of Column Rules: the 'column-rule-style' property</h3>
-
-	<pre class=propdef>
-	Name: column-rule-style
-	Value: <<line-style>>
-	Initial: none
-	Applies to: multicol containers
-	Inherited: no
-	Percentages: N/A
-	Computed value: specified keyword
-	Animation type: discrete
-	</pre>
-
-	The 'column-rule-style' property sets the style of the rule between columns of an element.
-	The <<line-style>> values are interpreted as in the <a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a>.
-
-	<wpt>
+	<wpt title="Tests for column-rule-style in multicol.">
 	parsing/column-rule-style-computed.html
 	parsing/column-rule-style-valid.html
 	parsing/column-rule-style-invalid.html
 	</wpt>
 
-	The ''border-style/none'' and ''hidden'' values force the used value of 'column-rule-width' to be ''0''.
-
-<h3 id='crw'>The Width Of Column Rules: the 'column-rule-width' property</h3>
-
-	<pre class=propdef>
-	Name: column-rule-width
-	Value: <<line-width>>
-	Initial: medium
-	Applies to: multicol containers
-	Inherited: no
-	Percentages: N/A
-	Computed value: absolute length, [=snapped as a border width=]
-	Animation type: by computed value type
-	</pre>
-
-	This property sets the width of the rule between columns.
-	Negative values are not allowed.
-
-	<wpt>
-	multicol-rule-fraction-001.xht
-	multicol-rule-fraction-003.xht
-	multicol-rule-px-001.xht
-	multicol-rule-percent-001.xht
-	subpixel-column-rule-width.tentative.html
-	parsing/column-rule-width-computed.html
-	parsing/column-rule-width-invalid.html
-	parsing/column-rule-width-valid.html
-	animation/column-rule-width-interpolation.html
-	</wpt>
-
-<h3 id="cr">Column Rule Shorthand: the 'column-rule' property</h3>
-
-	<pre class="propdef shorthand">
-	Name: column-rule
-	Value: <<'column-rule-width'>> || <<'column-rule-style'>> || <<'column-rule-color'>>
-	</pre>
-
-	This property is a shorthand for setting
-	'column-rule-width', 'column-rule-style', and 'column-rule-color'
-	at the same place in the style sheet.
-	Omitted values are set to their initial values.
-
-	<wpt>
+	<wpt title="Tests for column-rule-style in multicol.">
 
 	multicol-shorthand-001.xht
 	multicol-rule-shorthand-001.xht
@@ -1408,30 +1300,11 @@ without caring about the <em>contents</em>.
 	parsing/column-rule-shorthand.html
 	</wpt>
 
-	<div class=example>
-		In this example, the [=column rule=] and the [=column gap=] have the same width.
-		Therefore, they will occupy exactly the same space.
-
-		<pre highlight="css">
-		body {
-			column-gap: 35px;
-			column-rule-width: 35px;
-			column-rule-style: solid;
-			column-rule-color: black;
-		}
-		</pre>
-
-		<figure>
-			<img src="images/rule-same-width-as-gap.svg" alt="The rule completely covers any gap." no-autosize>
-			<figcaption>The column rule and column gap occupy the same space.</figcaption>
-		</figure>
-
 		<wpt>
 		equal-gap-and-rule.html
 		multicol-rule-samelength-001.xht
 		fixed-size-child-with-overflow.html
 		</wpt>
-	</div>
 
 <h2 id="column-breaks">
 Column Breaks</h2>