[css-borders-4][editorial] Fixed Bikeshed errors

Author: SebastianZ

css-borders-4/Overview.bs

@@ -14,7 +14,8 @@ Editor: Sebastian Zartner, Invited Expert, [email protected], w3cid 649
 Editor: Noam Rosenthal, Google, w3cid 121539
 Former Editor: Bert Bos, W3C, [email protected], w3cid 3343
 Abstract: This module contains the features of CSS relating to the borders and decorations of boxes on the page.
-Ignored Terms: total width, border-*-*-radius, corner-*-shape, corner-*-*-shape, corner-*-*, corner-*, box-shadow-*, border-*-clip
+Ignored Terms: border-*-*-radius, border-*-clip, box-shadow-*, corner-*-shape, corner-*-*-shape, corner-*-*, corner-*
+Ignored Vars: block, inline, Li, Ltop, Lbottom, Lleft, Lright, total width, W, Wside, Wleft, Wright, Wtop, Wbottom
 Repository: w3c/csswg-drafts
 WPT Path Prefix: css/css-borders/
 WPT Display: open
@@ -128,11 +129,11 @@ Line Colors: the 'border-color' properties</h3>
 
 		Sample rendering:
 
-		<img src="images/multicolor-border.png" alt="">
+		<img src="images/multicolor-border.png" alt="" width="450">
 
 		The same border colors with ''border-style: dotted'':
 
-		<img src="images/multicolor-border-dotted.png" alt="">
+		<img src="images/multicolor-border-dotted.png" alt="" width="450">
 	</div>
 
 	<pre class="propdef shorthand">
@@ -311,9 +312,7 @@ Line Patterns: the 'border-style' 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" alt="" width="669">
 
 		<figcaption>Example renderings of the predefined border styles.</figcaption>
 	</figure>
@@ -586,9 +585,7 @@ Corners</h2>
 	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" alt="" width="407">
 
 		<figcaption>
 			The effect of a rounded corner when the two borders it connects
@@ -620,6 +617,7 @@ Corners</h2>
 					          describing a quarter-ellipse;
 					          but since the opposite sides have a border thickness
 					          the padding edge curve starts inward from the outer arc's endpoints."
+						width="141"
 					>
 		</table>
 		<figcaption>
@@ -696,9 +694,7 @@ 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" alt="" width="600">
 
 		<figcaption>
 			Given these corner shapes, color and style transitions
@@ -774,7 +770,8 @@ Overlapping Curves</h3>
 
 		<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]"
+			     alt="rectangle with two tiny rounded corners and two very large ones, on opposite corners"
+				 width="539"
 			>
 
 			<figcaption>
@@ -827,6 +824,7 @@ Corner Sizing: the 'border-*-*-radius' properties</h3>
 	<figure>
 		<img src="images/corner.png"
 		     alt="Diagram of the inscribed ellipse"
+			 width="289"
 		>
 
 		<figcaption>
@@ -1253,7 +1251,7 @@ Corner Shaping: the 'corner-*-shape' properties</h3>
 	<div class=example>
 
 		<figure>
-			<img src="images/superellipse-param.svg" width="480" height="360">
+			<img src="images/superellipse-param.svg" alt="" width="480" height="360">
 			<figcaption>
 				Different ''superellipse()'' values for the top right corner: infinity, 1, 0, -1, and -infinity.
 			</figcaption>
@@ -1411,7 +1409,9 @@ while when rendering 'box-shadow' or offsetting for 'overflow-clip-margin', the
 <figure>
 	<img src="images/corner-shape-adjusting.svg"
 		style="background: white;"
-		alt="Adjusting corner shapes">
+		alt="Adjusting corner shapes"
+		width="600"
+	>
 	<figcaption>Borders are aligned to the curve, shadows and clip are aligned to the axis.</figcaption>
 </figure>
 
@@ -1642,7 +1642,10 @@ 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"
+		     alt="Tile for border"
+			 width="81"
+		>
 
 		The image is 81 by 81 pixels and has to be divided into 9 equal parts.
 		The style rules could thus be as follows:
@@ -1657,7 +1660,10 @@ 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"
+		     alt="element with a diamond border"
+			 width="239"
+		>
 	</div>
 
 <div class="example">
@@ -1668,13 +1674,14 @@ Border Images</h2>
 
 	<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."
+		     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."
+			 width="396"
 		>
 
 		<figcaption>
@@ -1701,6 +1708,7 @@ Border Images</h2>
 		          The whole border image effect is outset 31px,
 		          so that the troughs of the waves align
 		          just outside the padding edge."
+		     width="452"
 		>
 
 			<figcaption>
@@ -1866,7 +1874,9 @@ Image Slicing: the 'border-image-slice' property</h3>
 
 	<figure>
 		<img src="images/slice.png"
-		     alt="Diagram: two horizontal cuts and two vertical cuts through an image">
+		     alt="Diagram: two horizontal cuts and two vertical cuts through an image"
+			 width="388"
+		>
 
 		<figcaption>
 			Diagram illustrating the cuts corresponding to the value ''25% 30% 12% 20%''
@@ -3083,7 +3093,7 @@ as described in <a href="https://drafts.csswg.org/css-backgrounds-3/#corner-clip
 Issue: how should this affect clipping replaced elements?
 
 <div algorithm="choose-relevant-side-for-border-shape">
-An element's <dfn>relevant side for border shape</dfn> is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''.
+An element's <dfn>relevant side for border shape</dfn> is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end=]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''.
 	1. If |element|'s [=computed value|computed=] 'border-block-start-style' is not ''border-style/none'', then return [=block-start=].
 	1. If |element|'s [=computed value|computed=] 'border-inline-start-style' is not ''border-style/none'', then return [=inline-start=].
 	1. If |element|'s [=computed value|computed=] 'border-block-end-style' is not ''border-style/none'', then return [=block-end=].