[css-regions-1] Tidy up values & fix build errors. (#12445)

* remove close slashes on img tags

* tidy up references to CSS21 alias

* use <custom-ident> not <ident>

* use <dfn> for defining none keyword behaviour

Author: keithamus

css-regions-1/Overview.bs

@@ -112,15 +112,15 @@ Introduction</h2>
 
 		<figure style="float:left; margin:1em;">
 			<img alt="Article and aside rendering without CSS Regions"
-				src="images/linked-boxes-before.png"/>
+				src="images/linked-boxes-before.png">
 			<figcaption>
 				Rendering without CSS Regions
 			</figcaption>
 		</figure>
 
 		<figure style="float:left; margin:1em;">
 			<img alt="Article and aside rendering with CSS Regions"
-				src="images/linked-boxes-after.png"/>
+				src="images/linked-boxes-after.png">
 			<figcaption>
 				Rendering with CSS Regions
 			</figcaption>
@@ -164,15 +164,15 @@ Introduction</h2>
 
 		<figure>
 			<img alt="Wide nav bar showing all of the links"
-				src="images/menu-wide.png"/>
+				src="images/menu-wide.png">
 			<figcaption>
 				Wide rendering with menu shown
 			</figcaption>
 		</figure>
 
 		<figure>
 			<img alt="Narrow nav bar with some of the links in the menu"
-				src="images/menu-narrow.png"/>
+				src="images/menu-narrow.png">
 			<figcaption>
 				Narrow rendering with menu shown
 			</figcaption>
@@ -381,32 +381,32 @@ The 'flow-into' property</h3>
 
 	<pre class='propdef'>
 		Name: flow-into
-		Value: none | <<ident>> [element | content]?
+		Value: none | <<custom-ident>> [element | content]?
 		Initial: none
 		Applies To: All elements, but not <a href="https://www.w3.org/TR/selectors/#pseudo-elements">pseudo-elements</a> such as <code>::first-line</code>, <code>::first-letter</code>, <code>::before</code> or <code>::after</code>.
 		Inherited: no
 		Computed Value: as specified
 		Animation type: not animatable
 	</pre>
 
-	<dl>
-		<dt>none</dt>
+	<dl dfn-type=value dfn-for=flow-into>
+		<dt><dfn>none</dfn></dt>
 
 		<dd>
 			The element is not moved
 			to a <a>named flow</a>
 			and normal CSS processing takes place.
 		</dd>
 
-		<dt><a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></dt>
+		<dt><code><<custom-ident>> [ element | content ]?</code></dt>
 
 		<dd>
 			If the keyword <dfn>element</dfn> is present
 			or neither keyword is present,
 			then the element is taken out
 			of its parent's flow
 			and placed into the flow
-			with the name '<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>'.
+			with the name '<<custom-ident>>'.
 			If the keyword <dfn>content</dfn> is present,
 			then only the element's contents
 			are placed into the named flow.
@@ -468,7 +468,7 @@ The 'flow-into' property</h3>
 
 	Each <a>CSS Region</a> in a <a>region chain</a>
 	establishes a containing block for absolutely positioned
-	elements in the <a>named flow</a> (see [[!CSS21]]).
+	elements in the <a>named flow</a> (see [[!CSS2]]).
 	That first <a>CSS Region</a> in a <a>region chain</a>
 	establishes the initial containing block for such absolutely
 	positioned elements.
@@ -569,38 +569,37 @@ The 'flow-from' property</h3>
 
 	<pre class='propdef'>
 		Name: flow-from
-		Value: <<ident>> | none
+		Value: <<custom-ident>> | none
 		Initial: none
 		Applies To: Non-replaced <a href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes">block containers</a>. <br/> This might be expanded in future versions of the specification to allow other types of containers to receive flow content.
 		Inherited: no
 		Computed Value: as specified
 		Animation type: not animatable
 	</pre>
 
-	<dl>
-		<dt><strong>none</strong></dt>
+	<dl dfn-type=value dfn-for=flow-from>
+		<dt><dfn>none</dfn></dt>
 
 		<dd>
 			The block container is not a <a>CSS Region</a>.
 		</dd>
 
-		<dt><strong><a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></strong></dt>
+		<dt><<custom-ident>></dt>
 
 		<dd>
 			The block container becomes a <a>CSS Region</a>
 			(except as detailed in the text below),
 			and is ordered in a <a>region chain</a>
 			according to its document order.
-			The content from the flow
-			with the <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
+			The content from the flow with the
+			<<custom-ident>>
 			name will be <a href="#region-flow-break">broken
 			into fragments</a> and visually formatted in the
 			<a href="https://www.w3.org/TR/CSS21/visuren.html#principal-box">principal boxes</a>
 			of the <span>regions</span>
 			in the <a>region chain</a>.
-			<br/>
-			If there is no flow with name
-			<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>,
+
+			If there is no flow with name <<custom-ident>>,
 			then the block container does not
 			format any content visually.
 		</dd>
@@ -626,11 +625,11 @@ The 'flow-from' property</h3>
 
 	Block container pseudo-elements where
 	the value of 'flow-from' computes to an
-	<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
+	<<custom-ident>>
 	and the value of 'content' computes to ''content/none''
 	are generated as <a>CSS Regions</a>,
 	which is an update to the behavior
-	described in [[!CSS21]].
+	described in [[!CSS2]].
 
 	If an element has <a>style containment</a> (See [[!CSS-CONTAIN-1]]),
 	then the 'flow-from' property must be <a for=property>scoped</a> to that element.
@@ -639,7 +638,7 @@ The 'flow-from' property</h3>
 
 		A block container becomes a <a>CSS Region</a>
 		when its 'flow-from' property is set
-		to a valid <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> value,
+		to a valid <<custom-ident>> value,
 		even if there is no content contributing
 		to the referenced flow.
 		For example:
@@ -739,8 +738,7 @@ The 'flow-from' property</h3>
 Cycle Detection</h4>
 
 	<a>named flows</a> containing elements
-	where the value of 'flow-from' computes to an
-	<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
+	where the value of 'flow-from' computes to a <<custom-ident>>
 	can produce nonsensical circular relationships,
 	such as a <a>named flow</a>
 	containing <a>CSS Regions</a>
@@ -755,25 +753,20 @@ Cycle Detection</h4>
 <ul>
 	<li>
 		Every <a>named flow</a> depends on its elements
-		where the value of 'flow-from' computes to an
-		<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>.
+		where the value of 'flow-from' computes to a <<custom-ident>>.
 	</li>
 	<li>
 		Every element in a <a>named flow</a>
-		where the value of 'flow-from' computes to an
-		<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
+		where the value of 'flow-from' computes to a <<custom-ident>>
 		depends on the <a>named flow</a> with the
-		<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
-		name.
+		<<custom-ident>> name.
 	</li>
 </ul>
 
 	If the graph contains a cycle,
 	any elements where the value of 'flow-from'
-	computes to an
-	<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
-	participating in the cycle
-	do not become <a>CSS Regions</a>.
+	computes to a <<custom-ident>> participating
+	in the cycle do not become <a>CSS Regions</a>.
 
 	<div class="note"><span class="note-prefix">Note </span>
 
@@ -979,7 +972,7 @@ The region-fragment property</h3>
 		on the last line,
 		the 'overflow' property controls
 		the visibility of the overflowing content.
-		See the 'overflow' property definition ([[CSS21]]).
+		See the 'overflow' property definition ([[CSS2]]).
 	</div>
 
 <h2 id="cssom_view_and_css_regions">
@@ -1610,7 +1603,7 @@ The Region Flow Content Box (RFCB)</h3>
 	</ul>
 
 	<figure>
-		<img src="images/RFCB.svg" width=600 alt="The ::before, RFCB and ::after boxes contained in the Region Box"/>
+		<img src="images/RFCB.svg" width=600 alt="The ::before, RFCB and ::after boxes contained in the Region Box">
 		<figcaption>
 			The Region Flow Content Box (RFCB)
 		</figcaption>
@@ -1631,7 +1624,7 @@ RFCB 'width' resolution</h4>
 	At various points in the visual formatting of documents containing regions,
 	the used 'width' of RFCBs and regions need to be resolved.
 	In all cases, the resolution is done following the rules for
-	<a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating widths and margins</a> (see [[!CSS21]]).
+	<a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating widths and margins</a> (see [[!CSS2]]).
 	Sometimes, resolving the used 'width' value requires
 	measuring the content's <code>min-content</code>
 	and <code>max-content</code> values
@@ -1674,7 +1667,7 @@ Regions visual formatting steps</h3>
 	</ul>
 
 	<figure>
-		<img src="images/regions-layout-three-steps.svg" width=600 alt="visual representation of the three-step process"/>
+		<img src="images/regions-layout-three-steps.svg" width=600 alt="visual representation of the three-step process">
 		<figcaption>
 			Regions visual formatting steps
 		</figcaption>
@@ -1904,7 +1897,7 @@ Step 1 - Phase 1: Laying out RFCBs with used height of zero</h4>
 	Conceptually, this produces the layout illustrated below.
 
 	<figure>
-		<img src="images/flow-fragment-height-phase-1.png" width=500 alt="Step 1 - Phase 1: Layout RFCBs with used heights of 0"/>
+		<img src="images/flow-fragment-height-phase-1.png" width=500 alt="Step 1 - Phase 1: Layout RFCBs with used heights of 0">
 		<figcaption>
 			Step 1 - Phase 1: Layout RFCBs with used heights of 0
 		</figcaption>
@@ -1941,7 +1934,7 @@ Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</h4>
 	This results in a resolved flow fragment height: FH-C.
 
 	<figure>
-		<img src="images/flow-fragment-height-phase-2.png" width=370 alt="Step 1 - Phase 2: Measure flow fragments heights"/>
+		<img src="images/flow-fragment-height-phase-2.png" width=370 alt="Step 1 - Phase 2: Measure flow fragments heights">
 		<figcaption>
 			Step 1 - Phase 2: Measure flow fragments heights
 		</figcaption>
@@ -1973,7 +1966,7 @@ Step 2: Layout document and regions without named flows</h4>
 	FH-C becomes rC's used 'height'.
 
 	<figure>
-		<img src="images/regions-visual-formatting-step-2.png" width=370 alt="Step 2: Layout document and regions without named flows"/>
+		<img src="images/regions-visual-formatting-step-2.png" width=370 alt="Step 2: Layout document and regions without named flows">
 		<figcaption>
 			Step 2: Layout document and regions without <a>named flows</a>
 		</figcaption>
@@ -2004,7 +1997,7 @@ Step 3: named flows layout</h4>
 	computed in Step 1 Phase 2.
 
 	<figure>
-		<img src="images/regions-visual-formatting-step-3.png" width=370 alt="Step 3: Final result after laying out named flows in regions"/>
+		<img src="images/regions-visual-formatting-step-3.png" width=370 alt="Step 3: Final result after laying out named flows in regions">
 		<figcaption>
 			Step 3: Final result after laying out <a>named flows</a> in regions
 		</figcaption>