[css-images-3] Editorial reorganization of image-orientation prose.

Author: fantasai

css-images-3/Overview.bs

@@ -1535,13 +1535,6 @@ Image Processing {#image-processing}
 	the resultant image may be "sideways" or even upside-down.
 	The 'image-orientation' property provides a way to apply an "out-of-band" rotation to image source data to correctly orient an image.
 
-	Note: This property is not intended to specify layout transformations
-	such as arbitrary rotation or flipping the image in the horizontal or vertical direction.
-	(See [[CSS-TRANSFORMS-1]] for a feature designed to do that.)
-	It is also not needed to correctly orient an image when printing in landscape versus portrait orientation,
-	as that rotation is done as part of layout. (See [[CSS3PAGE]].)
-	It should only be used to correct incorrectly-oriented images.
-
 	<pre class='propdef'>
 	Name: image-orientation
 	Value: from-image | none | [ <<angle>> || flip ]
@@ -1554,33 +1547,22 @@ Image Processing {#image-processing}
 
 	<strong>This property is <em>optional</em> for implementations.</strong>
 
-	Note: This property previously used ''image-orientation/none'' as its initial value.
-	It is believed that using ''from-image'' as the initial value
-	will produce a generally better user experience,
-	and minimal breakage,
-	but future compat data as UAs attempt to make the change will confirm that.
-	If that is confirmed, then it is likely that this property will be removed from CSS
-	unless use cases other than “correct for incorrect orientation” are raised for its other values.
-
 	This property specifies an orthogonal rotation
 	to be applied to the element’s images
-	before they are laid out.
+	before they are used in the document.
 	It applies to content images
 	(e.g. replaced elements and generated content),
 	as well as to decorative images applied via CSS
 	(such as 'background-image').
 	It does not apply to the rendering of images outside the document,
 	e.g. favicons in the UA’s navigation toolbars or menus, etc.
 
-	CSS layout processing applies to the image <em>after</em> rotation,
-	exactly as if the image were originally encoded in its rotated form.
-	This implies, for example:
-
-	* The intrinsic height and width are derived from the rotated rather than the original image dimensions.
-	* The height (width) property applies to the vertical (horizontal) dimension of the image,
-		<em>after</em> rotation.
-	* The hotspot coordinates of an image 'cursor' are relative to the image after rotation.
-	* Border images (see 'border-image') are sliced after rotation.
+	Note: This property is not intended to specify layout transformations
+	such as arbitrary rotation or flipping the image in the horizontal or vertical direction.
+	(See [[CSS-TRANSFORMS-1]] for a feature designed to do that.)
+	It is also not needed to correctly orient an image when printing in landscape versus portrait orientation,
+	as that rotation is done as part of layout. (See [[CSS3PAGE]].)
+	It should only be used to correct incorrectly-oriented images.
 
 	Values have the following meanings:
 
@@ -1628,13 +1610,23 @@ Image Processing {#image-processing}
 			(so that it lies in the half-open range [''0turn'', ''1turn'')).
 	</dl>
 
-<!--
 	Values other than ''image-orientation/none'' and ''from-image'' are
 	<em>optional</em> to implement and <em>deprecated</em> in CSS.
--->
 
-	The 'image-orientation' property must be applied before any other transformations,
-	such as using CSS Transforms.
+	All CSS layout and rendering processes use the image <em>after</em> rotation,
+	exactly as if the image were originally encoded in its rotated form.
+	This implies, for example:
+
+	* The intrinsic height and width are derived
+		from the rotated rather than the original image dimensions.
+	* The height (width) property applies to
+		the vertical (horizontal) dimension of the image,
+		<em>after</em> rotation.
+	* The hotspot coordinates of an image 'cursor'
+		are relative to the image after rotation.
+	* Border images (see 'border-image') are sliced after rotation.
+	* Other transformations, such as those in [[CSS-TRANSFORMS-1]],
+		are applied to the image <em>after</em> 'image-orientation' is applied.
 
 	<div class="example">
 		The following example rotates the image 90 degrees clockwise:
@@ -1649,6 +1641,14 @@ Image Processing {#image-processing}
 		an angle of -270deg or 450deg.
 	</div>
 
+	Note: This property previously used ''image-orientation/none'' as its initial value.
+	It is believed that using ''from-image'' as the initial value
+	will produce a generally better user experience,
+	and minimal breakage,
+	but future compat data as UAs attempt to make the change will confirm that.
+	If that is confirmed, then it is likely that this property will be removed from CSS
+	unless use cases other than “correct for incorrect orientation” are raised for its other values.
+
 <!--
 ████ ██     ██    ███     ██████   ████████         ████████  ████████ ██    ██ ████████  ████████ ████████  ████ ██    ██  ██████
  ██  ███   ███   ██ ██   ██    ██  ██               ██     ██ ██       ███   ██ ██     ██ ██       ██     ██  ██  ███   ██ ██    ██