[css-images-3] Add image-rendering example.

Author: tabatkins

css-images-3/Overview.bs

@@ -12,7 +12,7 @@ Abstract: This module contains the features of CSS level 3 relating to the <<ima
 Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/27
 Previous Version: http://www.w3.org/TR/2012/CR-css3-images-20120417/
 Previous Version: http://www.w3.org/TR/2012/WD-css3-images-20120112/
-Ignored Terms: <offset>, background positioning area, border image area, <meetorslice>, <ending-shape>, Map, center
+Ignored Terms: <offset>, background positioning area, border image area, <meetorslice>, <ending-shape>, Map, center, content
 Link Defaults: css21 (property) display
 </pre>
 
@@ -1885,6 +1885,38 @@ Determing How To Scale an Image: the 'image-rendering' property {#the-image-rend
 	a user agent might scale images with nearest-neighbor interpolation by default,
 	and switch to EPX interpolation in low-load situations.
 
+	<div class='example'>
+		For example, given the following small image:
+
+		<figure>
+			<img src="images/pixel-art-small.png">
+			<figcaption>A small pixel-art image.
+		</figure>
+
+		Scaling it up 3x might look like the following,
+		depending on the value of 'image-rendering':
+
+		<figure>
+			<img src="images/pixel-art-small.png" width=384>
+			<figcaption>The image scaled with ''image-rendering/auto''</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/pixel-art-nn.png">
+			<figcaption>The image scaled with ''pixelated''</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/pixel-art-smooth.png">
+			<figcaption>
+				The image scaled with ''crisp-edges''.<br>
+				<small>(Or it might look like ''pixelated'',
+				or as another type of pixel-scaling algorithm,
+				depending on the browser.)</small>
+			</figcaption>
+		</figure>
+	</div>
+
 	This property previously accepted the values ''optimizeSpeed'' and ''optimizeQuality''.
 	These are now deprecated;
 	a user agent must accept them as valid values