[css-images-3][editorial] Fixed Bikeshed issues

Author: SebastianZ

css-images-3/Overview.bs

@@ -27,7 +27,11 @@ WPT Path Prefix: css/css-images/
 WPT Display: open
 </pre>
 <pre class=link-defaults>
-spec:css-backgrounds-3; type:value; text:center
+spec:css-backgrounds-3;
+	type:property;
+		text:border-image
+		text:border-image-repeat
+	type:value; text:center
 </pre>
 
 Introduction {#intro}
@@ -374,7 +378,8 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 
 	<div class=example>
 		<div style="overflow: hidden">
-			<img style="float: right; margin-left: 1em;" src='images/gradient-diagram.png' alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner.  There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box.  The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]">
+			<img src="images/gradient-diagram.png" width="454" height="455" style="float: right; margin-left: 1em;"
+			     alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner.  There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box.  The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]">
 
 			This example illustrates visually how to calculate the <a>gradient line</a> from the rules above.
 			This shows the starting and ending point of the <a>gradient line</a>,
@@ -430,7 +435,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 			linear-gradient(to bottom, yellow 0%, blue 100%);
 		</pre>
 
-		<img src="images/linear1.png" alt="" >
+		<img src="images/linear1.png" width="200" height="100" alt="">
 	</div>
 
 	<div class=example>
@@ -444,7 +449,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 			linear-gradient(-45deg, blue, yellow);
 		</pre>
 
-		<img src="images/linear3.png" alt="" >
+		<img src="images/linear3.png" width="200" height="100" alt="">
 	</div>
 
 	<div class=example>
@@ -453,7 +458,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 
 		<pre>linear-gradient(yellow, blue 20%, #0f0);</pre>
 
-		<img src="images/linear4.png" alt="" >
+		<img src="images/linear4.png" width="200" height="100" alt="">
 	</div>
 
 	<div class=example id='corner-gradient-example'>
@@ -465,7 +470,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 
 		<pre>linear-gradient(to top right, red, white, blue)</pre>
 
-		<object data="images/gradient1.svg" width="200" height="100">(Image requires SVG)</object>
+		<img src="images/gradient1.svg" width="200" height="100" alt="">
 	</div>
 
 
@@ -639,7 +644,7 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
 			  [ [ circle               || <<length [0,∞]>> ]                          [ at <<position>> ]? , |
 			    [ ellipse              || <<length-percentage [0,∞]>>{2} ]            [ at <<position>> ]? , |
 			    [ [ circle | ellipse ] || <<radial-extent>> ]                     [ at <<position>> ]? , |
-			    at <<position>></span> ,
+			    at <<position>>,
 			  ]?
 			  <<color-stop-list>>
 			)
@@ -715,23 +720,22 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
 			radial-gradient(farthest-corner at 50% 50%, yellow, green);
 		</pre>
 
-		<img src="images/radial1.png" alt="" >
+		<img src="images/radial1.png" width="200" height="100" alt="">
 
 		<pre>radial-gradient(circle, yellow, green);</pre>
 
-		<img src="images/radial2.png" alt="" >
-
+		<img src="images/radial2.png" width="200" height="100" alt="">
 		<pre>radial-gradient(red, yellow, green);</pre>
 
-		<img src="images/radial3.png" alt="" >
+		<img src="images/radial3.png" width="200" height="100" alt="">
 	</div>
 
 	<div class=example>
 		This image shows a gradient originating from somewhere other than the center of the box:
 
 		<pre>radial-gradient(farthest-side at left bottom, red, yellow 50px, green);</pre>
 
-		<img src="images/radial4.png" alt="" >
+		<img src="images/radial4.png" width="200" height="100" alt="">
 	</div>
 
 	<div class=example>
@@ -742,14 +746,14 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
 			radial-gradient(20px 30px at 20px 30px, red, yellow, green);
 		</pre>
 
-		<img src="images/radial6.png" alt="" >
+		<img src="images/radial6.png" width="200" height="100" alt="">
 
 		<pre>
 			radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
 			radial-gradient(20px 20px at 20px 30px, red, yellow, green);
 		</pre>
 
-		<img src="images/radial7.png" alt="" >
+		<img src="images/radial7.png" width="200" height="100" alt="">
 	</div>
 
 <!--
@@ -790,13 +794,13 @@ Repeating Gradients: the ''repeating-linear-gradient()'' and ''repeating-radial-
 		Repeating gradient syntax is identical to that of non-repeating gradients:
 
 		<pre>repeating-linear-gradient(red, blue 20px, red 40px)</pre>
-		<img src="images/repeating1.png" alt="">
+		<img src="images/repeating1.png" width="200" height="100" alt="">
 
 		<pre>repeating-radial-gradient(red, blue 20px, red 40px)</pre>
-		<img src="images/repeating2.png" alt="">
+		<img src="images/repeating2.png" width="200" height="100" alt="">
 
 		<pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre>
-		<img src="images/repeating3.png" alt="">
+		<img src="images/repeating3.png" width="200" height="100" alt="">
 
 	</div>
 
@@ -1533,7 +1537,7 @@ Sizing Objects: the 'object-fit' property {#the-object-fit}
 	See the 'object-position' property for positioning the object with respect to the content box.
 
 	<figure>
-		<img src="images/img_scale.png" style="border: thin solid black;" alt="">
+		<img src="images/img_scale.png"width="488" height="116" style="border: thin solid black;" alt="">
 
 		<figcaption>
 			An example showing how four of the values of 'object-fit' cause the replaced element (blue figure)
@@ -1931,32 +1935,33 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 		For example, given the following small image:
 
 		<figure>
-			<img src="images/pixel-art-small.gif">
+			<img src="images/pixel-art-small.gif" width="128" height="64" alt="">
 			<figcaption>A small pixel-art image.</figcaption>
 		</figure>
 
 		Scaling it up 3x might look like the following,
 		depending on the value of 'image-rendering':
 
 		<figure>
-			<img src="images/pixel-art-small.gif" width=384>
+			<img src="images/pixel-art-small.gif" width="384" height="192" alt="">
 			<figcaption>The image scaled 3x with ''smooth''</figcaption>
 		</figure>
 
 		<figure>
-			<img src="images/pixel-art-nn.png">
+			<img src="images/pixel-art-nn.png" width="384" height="192" alt="">
 			<figcaption>The image scaled 3x with ''pixelated''</figcaption>
 		</figure>
 
 		<figure>
-			<img src="images/pixel-art-smooth.png">
+			<img src="images/pixel-art-smooth.png" width="384" height="192" alt="">
 			<figcaption>
 				The image scaled 3x with ''crisp-edges''
 				interpreted with an edge-preserving algorithm.
 				<br>
 				(Interpreting as [=nearest neighbor=] would give
 				the same results as ''pixelated'' in this case.)
 			</figcaption>
+		</figure>
 	</div>
 
 	<div algorithm>
@@ -1997,17 +2002,17 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 		they'll act differently:
 
 		<figure>
-			<img src="images/pixel-art-small.gif">
+			<img src="images/pixel-art-small.gif" width="128" height="64" alt="">
 			<figcaption>The same small pixel-art image as before</figcaption>
 		</figure>
 
 		<figure>
-			<img src="images/pixel-art-nn.png" width=320>
+			<img src="images/pixel-art-nn.png" width="384" height="192" alt="">
 			<figcaption>The image scaled 2.5x with ''pixelated''</figcaption>
 		</figure>
 
 		<figure>
-			<img src="images/pixel-art-nn-2p5.png">
+			<img src="images/pixel-art-nn-2p5.png" width="384" height="192" alt="">
 			<figcaption>
 				The image scaled 2.5x with ''crisp-edges''
 				interpreted as [=nearest neighbor=]