[css-images-3] Switch image-rendering:pixelated to be slightly smooth. Add new nearest-neighbor value for strict NN. w3c#5837

Author: tabatkins

css-images-3/Overview.bs

@@ -20,13 +20,13 @@ At Risk: 'image-orientation'
 Implementation Report: https://wpt.fyi/results/css/css-images?label=experimental&label=master&aligned
 Previous Version: https://www.w3.org/TR/2019/CR-css-images-3-20191010/
 Previous Version: https://www.w3.org/TR/2012/CR-css3-images-20120417/
-Ignored Terms: <offset>, background positioning area, border image area, <meetorslice>, <ending-shape>, Map, center, content
+Ignored Terms: <offset>, background positioning area, border image area, <meetorslice>, <ending-shape>
 Ignored Vars: start image, end image
-Link Defaults: css2 (property) display
 Include Can I Use Panels: yes
 </pre>
 <pre class=link-defaults>
 spec:svg; type:element; text:feimage
+spec:css-backgrounds-3; type:value; text:center
 </pre>
 
 Introduction {#intro}
@@ -1740,16 +1740,48 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 				only apply it to the most important images on the page.
 			</div>
 
+		<dt><dfn>pixelated</dfn>
+		<dd>
+			The image is scaled in a way that preserves the pixelated nature of the original as much as possible,
+			but allows minor smoothing instead of awkward distortion in some cases.
+
+			For each axis,
+			independently determine the integer multiple of its natural size
+			that puts it closest to the target size
+			and is greater than zero.
+
+			Scale it to this integer-multiple-size as for ''nearest-neighbor'',
+			then scale it the rest of the way to the target size as for ''smooth''.
+
+			Note: At integer multiples of the natural size,
+			this gives the same results as ''nearest-neighbor''.
+			At non-integer multiples, this usually gives better visual results,
+			even for pixel art,
+			but it does incur a performance penalty
+			due to the "two-step" rendering requirement.
+
 		<dt><dfn caniuse="css-crisp-edges">crisp-edges</dfn>
 		<dd>
 			The image must be scaled with an algorithm that preserves contrast and edges in the image,
 			and which does not smooth colors or introduce blur to the image in the process.
-			This is intended for images such as pixel art or line drawings.
 
-		<dt><dfn>pixelated</dfn>
+			This <em>may</em> be identical to ''nearest-neighbor'',
+			but UAs may use any algorithm that meets the requirements.
+
+		<dt><dfn>nearest-neighbor</dfn>
 		<dd>
-			The image must be scaled with the "nearest neighbor" or similar algorithm,
-			to preserve a "pixelated" look as the image changes in size.
+			The image must be scaled with the "nearest neighbor" algorithm:
+			treating the original image's pixel grid as a literal grid of rectangles,
+			scale those to the desired size,
+			then each pixel of the final image
+			takes its color solely from the nearest pixel of the scaled original image.
+
+			Note: If the new size is not an integer multiple of the original size,
+			the NN algorithm can introduce significant "aliasing" bugs;
+			lines that were the same thickness in the original image
+			might be a pixel thinner or thicker in the scaled image,
+			depending on where they appear,
+			etc.
 	</dl>
 
 	This property does not dictate any particular scaling algorithm to be used.
@@ -1786,7 +1818,7 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 			<img src="images/pixel-art-smooth.png">
 			<figcaption>
 				The image scaled with ''crisp-edges''.<br>
-				<small>(Or it might look like ''pixelated'',
+				<small>(Or it might look like ''nearest-neighbor'',
 				or as another type of pixel-scaling algorithm,
 				depending on the browser.)</small>
 			</figcaption>
@@ -1796,7 +1828,7 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 	This property previously accepted the values ''optimizeSpeed'' and ''optimizeQuality''.
 	These are now deprecated;
 	a user agent must accept them as valid values
-	but must treat them as having the same behavior as ''pixelated'' and ''smooth'' respectively,
+	but must treat them as having the same behavior as ''nearest-neighbor'' and ''smooth'' respectively,
 	and authors must not use them.