[css-backgrounds-3][css-backgrounds-4][css-borders-4][editorial] Fixed Bikeshed issues

Author: SebastianZ

css-backgrounds-3/Overview.bs

@@ -20,27 +20,33 @@ WPT Path Prefix: css/css-backgrounds/
 WPT Display: closed
 At risk: animatability of 'box-shadow'
 At risk: applicability of 'border' and its longhands to [=ruby base containers=] and [=ruby annotation containers=]
-Ignored Vars: width of background positioning area, width of background image, height of background positioning area, height of background image, X, X', Li, Ltop, Lbottom, Lleft, Lright, Wside, Wleft, Wright, Wtop, Wbottom, spread distance
+Ignored Vars: width of background positioning area, width of background image, height of background positioning area, height of background image, X, X', Li, Ltop, Lbottom, Lleft, Lright, spread, Wside, Wleft, Wright, Wtop, Wbottom, spread distance
 </pre>
 <pre class="link-defaults">
-spec:css2; type:type; text:<uri>
-spec:css2; type:property; text:display
-spec:css2; type:value; text:table
-spec:css2; type:value; text:inline-table
-spec:css2; type:value; text:table-cell
-spec:css2; type:property; text:overflow
-spec:css2; type:value; for:overflow; text:visible
-spec:css2; type:dfn; text:viewport
 spec:css-break-4; type:dfn; text:fragment
-spec:css-color-4; type:property; text:color
-spec:css-color-4; type:value; text:transparent
-spec:selectors-3; type:selector; text: ::first-letter
-spec:selectors-3; type:selector; text: ::first-line
+spec:css-color-4;
+	type:property; text:color
+	type:value; text:transparent
+spec:css-sizing-3; type:dfn;
+	text:size
+	text:width
+	text:height
 spec:css-values-3; type:type; text:<position>
+spec:css2;
+	type:dfn; text:viewport
+	type:property;
+		text:display
+		text:overflow
+	type:type; text:<uri>
+	type:value;
+		text:table
+		text:inline-table
+		text:table-cell
+		for:overflow; text:visible
+spec:selectors-3; type:selector;
+	text: ::first-letter
+	text: ::first-line
 spec:html; type:element; text:body
-spec:css-sizing-3; type:dfn; text:size
-spec:css-sizing-3; type:dfn; text:width
-spec:css-sizing-3; type:dfn; text:height
 </pre>
 
 <h2 id="introduction">Introduction</h2>
@@ -59,7 +65,7 @@ spec:css-sizing-3; type:dfn; text:height
 	  but margins have no influence on the background and border.)
 
 	<figure>
-		<img src="images/box.png"
+		<img src="images/box.png" width="458" height="278"
 		     alt="Diagram of a typical box, showing the content, padding, border and margin areas"
 		>
 
@@ -530,7 +536,7 @@ Tiling Images: the 'background-repeat' property</h3>
 		</pre>
 
 		<figure>
-			<img src="images/bg-repeat.png"
+			<img src="images/bg-repeat.png" width="243" height="334"
 			     alt="A centered background image, with copies repeated up and down the border, padding, and content areas."
 			>
 
@@ -552,7 +558,7 @@ Tiling Images: the 'background-repeat' property</h3>
 		</pre>
 
 		<figure>
-			<img src="images/bg-space.png"
+			<img src="images/bg-space.png" width="250" height="365"
 			     alt="Image of an element with a dotted background"
 			>
 
@@ -830,8 +836,9 @@ Affixing Images: the 'background-attachment' property</h3>
 				With a value pair of ''75% 50%'',
 				the point 75% across and 50% down the image
 				is to be placed at the point 75% across and 50% down the area.
+
 				<figure>
-					<img src="images/bg-pos.png"
+					<img src="images/bg-pos.png" width="397" height="269"
 					     alt="Diagram of image position within element"
 					>
 					<figcaption>
@@ -2046,8 +2053,8 @@ Line Colors: the 'border-color' properties</h3>
 	but behind the element's content (in case it overlaps).
 
 	<figure>
-		<img src="images/borderstyles.png"
-		     alt="Examples of border styles"
+		<img src="images/borderstyles.png" width="669" height="383"
+		     alt=""
 		>
 
 		<figcaption>Example renderings of the predefined border styles.</figcaption>
@@ -2367,7 +2374,7 @@ Curve Radii: the 'border-radius' properties</h3>
 	Negative values are invalid.
 
 	<figure>
-		<img src="images/corner.png"
+		<img src="images/corner.png" width="289" height="179"
 		     alt="Diagram of the inscribed ellipse"
 		>
 
@@ -2446,8 +2453,8 @@ Corner Shaping</h3>
 	follow the curve of the border.
 
 	<figure>
-		<img src="images/smooth-radius.png"
-		     alt="The effect of rounded corners on unequal borders"
+		<img src="images/smooth-radius.png" width="407" height="176"
+		     alt=""
 		>
 
 		<figcaption>
@@ -2474,7 +2481,7 @@ Corner Shaping</h3>
 					border-top-right-radius: 100%; }
 					</pre>
 				<td>
-					<img src="images/partial-curve.png"
+					<img src="images/partial-curve.png" width="141" height="142"
 					     alt="The curved corner is an arc from the top left corner
 					          sweeping across the top right corner to the bottom right corner,
 					          describing a quarter-ellipse;
@@ -2506,7 +2513,7 @@ Corner Shaping</h3>
 
 	This is done by computing the corresponding [=outset-adjusted border radius=].
 
-	To compute the <dfn export>outset-adjusted border radius</dfn> given the 2-dimensional [=size=]s |edge|, |radius|, and |outset|:
+	To compute the <dfn export>outset-adjusted border radius</dfn> given the 2-dimensional [=size=]'s |edge|, |radius|, and |outset|:
 		1. Let |coverage| be <code>2 * min(|radius|'s [=width=] / |edge|'s [=width=], |radius|'s [=height=] / |edge|'s [=height=])</code>.
 		1. Let |adustedRadiusWidth| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=width=], and |outset|'s [=width=].
 		1. Let |adustedRadiusHeight| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=height=], and |outset|'s [=height=].
@@ -2518,8 +2525,8 @@ Corner Shaping</h3>
 		1. Return <code>|radius| + |outset| * (1 - (1 - |ratio|)<sup>3</sup> * (1 - |coverage|<sup>3</sup>))</code>.
 
 		Note: this algorithm is designed to reduce the effect of the |outset| (or spread) on the shape of the corner.
-		The |coverage| factor makes this reduction more pronounced for rectangular shapes (where the [=border-radius=] is close to 0),
-		and less pronounced for elliptical shapes (where the [=border-radius=] is close to 50%).
+		The |coverage| factor makes this reduction more pronounced for rectangular shapes (where the [=border radius=] is close to 0),
+		and less pronounced for elliptical shapes (where the [=border radius=] is close to 50%).
 </div>
 
 
@@ -2580,8 +2587,8 @@ Color and Style Transitions</h3>
 	or what function maps from this ratio to a point on the curve.
 
 	<figure>
-		<img src="images/transition-region.png"
-		     alt="Illustration of the transition region on curved corners"
+		<img src="images/transition-region.png" width="600" height="178"
+		     alt=""
 		>
 
 		<figcaption>
@@ -2657,8 +2664,8 @@ Overlapping Curves</h3>
 		See borders B in the figure.
 
 		<figure id=reduced-radius>
-			<img src="images/corner-large-mix.png"
-			     alt="[image: rectangle with two tiny rounded corners and two very large ones, on opposite corners]"
+			<img src="images/corner-large-mix.png" width="539" height="168"
+			     alt="rectangle with two tiny rounded corners and two very large ones, on opposite corners"
 			>
 
 			<figcaption>
@@ -2704,7 +2711,9 @@ Border Images</h2>
 		The image to tile is as follows.
 		Apart from the diamonds, it is transparent:
 
-		<img src="images/border.png" alt="Tile for border">
+		<img src="images/border.png" width="81" height="81"
+		     alt="Tile for border"
+		>
 
 		The image is 81 by 81 pixels and has to be divided into 9 equal parts.
 		The style rules could thus be as follows:
@@ -2719,51 +2728,53 @@ Border Images</h2>
 		The result, when applied to a DIV of 12 by 5em,
 		will be similar to this:
 
-		<img src="images/borderresult.png" alt="element with a diamond border">
+		<img src="images/borderresult.png" width="239" height="116"
+		     alt="Element with a diamond border"
+		>
 	</div>
 
-<div class="example">
-	This shows a more complicated example,
-	demonstrating how the border image corresponds to the fallback border-style
-	but can also extend beyond the border area.
-	The border image is a wavy green border with an extended corner effect:
+	<div class="example">
+		This shows a more complicated example,
+		demonstrating how the border image corresponds to the fallback border-style
+		but can also extend beyond the border area.
+		The border image is a wavy green border with an extended corner effect:
 
-	<figure>
-		<img src="images/groovy-border-image-slice.png"
-		alt="Diagram: The border image shows a wavy green border
-		     with more exaggerated waves towards the corners,
-		     which are capped by a disconnected green circle.
-		     Four cuts at 124px offsets from each side
-		     divide the image into 124px-wide square corners,
-		     124px-wide but thin side slices,
-		     and a small center square."
-		>
+		<figure>
+			<img src="images/groovy-border-image-slice.png" width="396" height="375"
+			     alt="Diagram: The border image shows a wavy green border
+			          with more exaggerated waves towards the corners,
+			          which are capped by a disconnected green circle.
+			          Four cuts at 124px offsets from each side
+			          divide the image into 124px-wide square corners,
+			          124px-wide but thin side slices,
+			          and a small center square."
+			>
 
-		<figcaption>
-			The 'border-image-source' image,
-			with the four 'border-image-slice' cuts at 124px
-			dividing the image into nine parts.
-		</figcaption>
-	</figure>
+			<figcaption>
+				The 'border-image-source' image,
+				with the four 'border-image-slice' cuts at 124px
+				dividing the image into nine parts.
+			</figcaption>
+		</figure>
 
-	The rest of the border properties then interact
-	to lay out the tiles as follows:
+		The rest of the border properties then interact
+		to lay out the tiles as follows:
 
-	<figure>
-		<img src="images/border-image.png"
-		     alt="Diagram: The image-less (fallback) rendering
-		          has a green double border.
-		          The rendering with border-image shows the wavy green border,
-		          ith the waves getting longer as they reach the corners.
-		          The corner tiles render as 124px-wide squares
-		          and the side tiles repeat a whole number of times
-		          to fill the space in between.
-		          Because of the gradual corner effects,
-		          the tiles extend deep into the padding area.
-		          The whole border image effect is outset 31px,
-		          so that the troughs of the waves align
-		          just outside the padding edge."
-		>
+		<figure>
+			<img src="images/border-image.png" width="452" height="537"
+			     alt="Diagram: The image-less (fallback) rendering
+			          has a green double border.
+			          The rendering with border-image shows the wavy green border,
+			          ith the waves getting longer as they reach the corners.
+			          The corner tiles render as 124px-wide squares
+			          and the side tiles repeat a whole number of times
+			          to fill the space in between.
+			          Because of the gradual corner effects,
+			          the tiles extend deep into the padding area.
+			          The whole border image effect is outset 31px,
+			          so that the troughs of the waves align
+			          just outside the padding edge."
+			>
 
 			<figcaption>
 				Diagram of all border-image properties and how they interact,
@@ -2932,8 +2943,9 @@ Image Slicing: the 'border-image-slice' property</h3>
 	with no [=specified size=] and the [=border image area=] as the [=default object size=].
 
 	<figure>
-		<img src="images/slice.png"
-		     alt="Diagram: two horizontal cuts and two vertical cuts through an image">
+		<img src="images/slice.png" width="388" height="304"
+		     alt="Diagram: two horizontal cuts and two vertical cuts through an image"
+		>
 
 		<figcaption>
 			Diagram illustrating the cuts corresponding to the value ''25% 30% 12% 20%''
@@ -3467,7 +3479,7 @@ Border Image Shorthand: the 'border-image' property</h3>
 		            12px 12px 0px 8px rgba(0,0,0,0.4) inset</b>;
 		</pre>
 		<figure>
-			<img src="images/spread-blur.png"
+			<img src="images/spread-blur.png" width="251" height="244"
 			     alt="The sample code above would create a 100px&times;100px orange box with a 12px blue border,
 			          whose top right / bottom left corners are sharp and tob left / bottom right corners are elliptically curved.
 			          Two shadows are created: an inner one, which due to its offset and spread creates a 20px-wide band of darker orange along the top and left sides of the box (curving to match the rounded top left border shape);
@@ -3610,7 +3622,7 @@ Shadow Shape, Spread, and Knockout</h4>
 	the corner radii of the shadow are also increased (decreased, for inner shadows)
 	from the border-box (padding-box) radii by adding (subtracting)
 	the [=spread distance=] (and flooring at zero).
-	For outer shadows, the [=border-radius=] is then [=outset-adjusted border radius|adjusted=], independently in each dimension,
+	For outer shadows, the [=border radius=] is then [=outset-adjusted border radius|adjusted=], independently in each dimension,
 	to preserve the sharpness of rounded corners.
 
 	The 'border-image' does not affect the shape of the box-shadow.

css-backgrounds-4/Overview.bs

@@ -49,7 +49,7 @@ Introduction</h2>
 	  but margins have no influence on the background and border.)
 
 	<figure>
-		<img src="images/box.png"
+		<img src="images/box.png" width="458" height="278"
 		     alt="Diagram of a typical box, showing the content, padding, border and margin areas"
 		>
 
@@ -390,15 +390,18 @@ Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-rep
 		}
 		</pre>
 
-		<div class="figure">
-			<p><img src="images/bg-repeat.png" alt="A centered background image, with
-			copies repeated up and down the border, padding and content
-			areas.">
-
-			<p class="caption">The effect of ''repeat'': One copy
-			of the background image is centered, and other copies are put above
-			and below it to make a vertical band behind the element.
-		</div>
+		<figure>
+			<img src="images/bg-repeat.png" width="243" height="334"
+			     alt="A centered background image, with copies repeated up and down the border, padding, and content areas."
+			>
+
+			<figcaption>
+				The effect of ''repeat-y'':
+				One copy of the background image is centered,
+				and other copies are put above and below it
+				to make a vertical band behind the element.
+			</figcaption>
+		</figure>
 	</div>
 
 	<p>See the section [[#layering]] for how
@@ -517,13 +520,17 @@ Tiling Images Shorthand: the 'background-repeat' property</h3>
 		}
 		</pre>
 
-		<div class=figure>
-			<p><img src="images/bg-space.png" alt="Image of an element with a dotted background">
-
-			<p class=caption>The effect of ''background-repeat/space'': the image of a dot is
-			tiled to cover the whole background and the images are equally
-			spaced.
-		</div>
+		<figure>
+			<img src="images/bg-space.png" width="250" height="365"
+			     alt="Image of an element with a dotted background"
+			>
+
+			<figcaption>
+				The effect of ''background-repeat/space'':
+				the image of a dot is tiled to cover the whole background
+				and the images are equally spaced.
+			</figcaption>
+		</figure>
 	</div>
 
 	<p>See the section [[#layering]] for how 'background-repeat' interacts with other
@@ -756,7 +763,7 @@ Background Positioning: the 'background-position-x', 'background-position-y', 'b
 				is to be placed at the point 75% across and 50% down the area.
 
 				<figure>
-					<img src="images/bg-pos.png"
+					<img src="images/bg-pos.png" width="397" height="269"
 					     alt="Diagram of image position within element"
 					>
 					<figcaption>
@@ -1003,6 +1010,7 @@ Painting Area: the 'background-clip' property</h3>
 		background-clip/clip-text-on-body-not-propagated-to-root.html
 		background-clip/clip-text-on-body-propagated-to-root.html
 		background-clip/clip-text-on-root.html
+		background-clip/clip-text-out-of-flow-child.html
 		background-clip/clip-text-text-decorations.html
 		background-clip/clip-text-text-emphasis.html
 		background-clip_padding-box.html