Move image-* properties to css3-images

Author: fantasai

css3-page/Overview.src.html

@@ -2121,255 +2121,7 @@ <h3 id="best-pg-brk">"Best" page breaks</h3>
 
 <h2 id="image-properties">Image Properties</h2>
 
-<p class="note">The following properties may be transferred to a more appropriate
-CSS module in the future.</p>
-
-<h3 id="image-orientation">Orienting an Image on the Page: the <a href="#propdef-img-orient">image-orientation</a> property</h3>
-
-<p>Images from camera phones, digital cameras or scanners may be encoded sideways.
-For example, the first row of image data may represent the leftmost or
-rightmost column of image pixels. Furthermore, often such devices have limited
-resources, and do not have the capability to rotate the image into an upright
-orientation. However, this type of device may have internal knowledge or can
-accept input from its user as to the rotational correction to perform.</p>
-
-<p>The image-orientation property provides a way to specify an 'out-of-band'
-rotation to be applied to image source data. This facility is not intended to
-specify layout transformations such as arbitrary rotation or flipping the image
-in the horizontal or vertical direction. It is not needed to correctly orient
-an image when printing in landscape versus portrait orientation, as that
-rotation is done as part of layout.</p>
-
-<table class="propdef" summary="image-orientation property definition">
-  <tr>
-    <th>Name:
-    <td><dfn id="propdef-img-orient">image-orientation</dfn>
-  <tr>
-    <th>Value:
-    <td>&lt;angle&gt;
-  <tr>
-    <th>Initial:
-    <td>0deg
-  <tr>
-    <th>Applies to:
-    <td>images
-  <tr>
-    <th>Inherited:
-    <td>N/A
-  <tr>
-    <th>Percentages:
-    <td>N/A
-  <tr>
-    <th>Media:
-    <td>visual
-  <tr>
-    <th>Computed value:
-    <td>normalized angle (''0deg'', ''90deg'', ''180deg'', or ''270deg'')
-</table>
-
-<p>'image-orientation' specifies an orthogonal rotation to be applied to an image
-before it is laid out. CSS layout processing applies to the image after
-rotation. This implies, for example:</p>
-
-<ul>
-<li>The intrinsic height and width are derived from the rotated rather than the
-original image dimensions;</li>
-<li>The height (width) property applies to the vertical (horizontal) dimension
-of the image, <em>after</em> rotation.</li>
-</ul>
-
-<p>The following values for the <span class="property">'image-orientation'</span>
-property apply to an image:</p>
-
-<dl>
-<dt>&lt;angle&gt;</dt>
-<dd>Positive values cause the image to be rotated to the right (in a clockwise
-direction), while negative values cause a rotation to the left. The angular
-value in degrees, radians or grads is rounded to the nearest cardinal angle.
-Values half way between cardinal angles, such as 45deg, round forward, in the
-direction of rotation. Values greater than 360deg or less than -360deg are
-moduloed to produce a value between 0deg and 360deg. Analogous rules apply for
-rad and grad unit values.</dd>
-</dl>
-<pre class="example">
-The following example rotates the image 90 degrees clockwise:
-
-img.ninety     { image-orientation: 90deg }
-...
-&lt;img class="ninety" src=... /&gt;
-</pre>
-
-<h3 id="img-fit">The 'image-fit' Property</h3>
-
-<table class="propdef">
-  <tr>
-    <th>Name:
-    <td><dfn id="propdef-image-fit">image-fit</dfn>
-  <tr>
-    <th>Value:
-    <td>fill | contain | cover
-  <tr>
-    <th>Initial:
-    <td>fill
-  <tr>
-    <th>Applies to:
-    <td>replaced elements
-  <tr>
-    <th>Inherited:
-    <td>yes
-  <tr>
-    <th>Percentages:
-    <td>N/A
-  <tr>
-    <th>Media:
-    <td>visual
-  <tr>
-    <th>Computed value:
-    <td>specified value
-</table>
-
-<p>The 'image-fit' property specifies how the contents of a replaced element
-should be scaled relative to the box established by its used height and width.
-It also enables scaling a replaced element's contents up to a specified maximum
-size or down to a specified minimum size while preserving its aspect ratio.</p>
-
-<p>Not all replaced elements can be scaled, but images typically can.</p>
-
-<p>The contents of a replaced element with an intrinsic aspect ratio (which may be
-derived from intrinsic dimensions) are scaled as follows:</p>
-
-<dl>
-
-<dt>fill</dt>
-<dd>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
-usual</a>. Scale the content height and width independently so that the edges
-of the content just meet the edges of the box established by the used 'height'
-and 'width'.</dd>
-
-<dt>contain</dt>
-<dd>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
-usual</a>, except if both 'height' and 'width' are 'auto', and the used value
-of at least one of 'max-width' and 'max-height' is not 'none', then compute the
-element's used width and used height as though the intrinsic dimensions of the
-contents were infinitely large numbers whose ratio is the actual intrinsic
-ratio of the contents.</dd>
-<dd>Scale the contents of the element, preserving their aspect ratio, to the
-largest size such that the width of the contents is less than or equal to the
-used width of the box and the height of the contents is less than or equal to
-the used height of the box.</dd>
-
-<dt>cover</dt>
-<dd>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
-usual</a>, except if both 'height' and 'width' are 'auto', and the used value
-of at least one of 'min-width' and 'min-height' is not '0', then compute the
-used width and used height of the element as though the intrinsic dimensions of
-the contents were infinitesimally small numbers whose ratio is the actual
-intrinsic ratio of the contents.</dd>
-<dd>Scale the contents of the element, preserving their aspect ratio, to the
-smallest size such that the width of the contents is greater than or equal to
-the used width of the box and the height of the contents is greater than or
-equal to the height of the box.</dd>
-</dl>
-
-<p>The 'overflow' property determines how to render parts of the replaced
-element's content that extend beyond the edges of its box. See the <a href="#propdef-image-position">'image-position'</a> property for positioning the
-object with respect to the element's box.</p>
-<p class="note">
-Note: the 'image-fit' property has similar semantics to the fit attribute in
-[[SMIL10]].</p>
-<div class="figure">
-
-<p><img src="img_scale.png" style="width: 70%; border: thin solid black;" alt="Illustration of the four values"></p>
-<p class="caption">
-An example showing how each of the four values of 'image-fit' causes the
-replaced element (blue figure) to be scaled to fit its height/width box (shown
-with a green background), with overflow 'visible' and 'hidden', using the
-initial value for 'image-position'.</p>
-</div>
-
-<h3 id="img-fit">The 'image-position' Property</h3>
-
-<table class="propdef">
-  <tr>
-    <th>Name:
-    <td><dfn id="propdef-image-posn">image-position</dfn>
-  <tr>
-    <th>Value:
-    <td>[ [ <a class="noxref" href="/TR/CSS21/syndata.html#value-def-percentage"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | <a class="noxref" href="/TR/CSS21/syndata.html#value-def-length"><span class="value-inst-length">&lt;length&gt;</span></a> | left | center | right ] [
-    <a class="noxref" href="/TR/CSS21/syndata.html#value-def-percentage"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | <a class="noxref" href="/TR/CSS21/syndata.html#value-def-length"><span class="value-inst-length">&lt;length&gt;</span></a> | top | center | bottom ]? ] | [
-    [ left | center | right ] || [ top | center | bottom ] ]
-  <tr>
-    <th>Initial:
-    <td>50% 50%
-  <tr>
-    <th>Applies to:
-    <td>replaced elements
-  <tr>
-    <th>Inherited:
-    <td>yes
-  <tr>
-    <th>Percentages:
-    <td>refer to width and height of box itself
-  <tr>
-    <th>Media:
-    <td>visual
-  <tr>
-    <th>Computed value:
-    <td>specified value
-</table>
-
-<p>The 'image-position' property determines the alignment of the replaced element
-inside its box. The values have the same meaning as the values for the
-'background-position' property. See
-<a href="/TR/CSS21/colors.html#propdef-background-position">background-position</a>
-of these values.</p>
-
-<dl>
-
-<dt>&lt;percentage&gt; &lt;percentage&gt;</dt>
-<dd>With a value pair of '0% 0%', the upper left corner of the image is aligned
-with the upper left corner of the box's padding edge. A value pair of '100%
-100%' places the lower right corner of the image in the lower right corner of
-padding area. With a value pair of '14% 84%', the point 14% across and 84% down
-the image is to be placed at the point 14% across and 84% down the padding
-area.</dd>
-
-<dt>&lt;length&gt; &lt;length&gt;</dt>
-<dd>With a value pair of '2cm 2cm', the upper left corner of the image is placed
-2cm to the right and 2cm below the upper left corner of the padding area.</dd>
-
-<dt>'top left', 'left top'</dt>
-<dd>Same as '0% 0%'.</dd>
-
-<dt>'top', 'top center', 'center top'</dt>
-<dd>Same as '50% 0%'.</dd>
-
-<dt>'right top', 'top right'</dt>
-<dd>Same as '100% 0%'.</dd>
-
-<dt>'left', 'left center', 'center left'</dt>
-<dd>Same as '0% 50%'.</dd>
-
-<dt>'center', 'center center'</dt>
-<dd>Same as '50% 50%'.</dd>
-
-<dt>'right', 'right center', 'center right'</dt>
-<dd>Same as '100% 50%'.</dd>
-
-<dt>'bottom left', 'left bottom'</dt>
-<dd>Same as '0% 100%'.</dd>
-
-<dt>'bottom', 'bottom center', 'center bottom'</dt>
-<dd>Same as '50% 100%'.</dd>
-
-<dt>'bottom right', 'right bottom'</dt>
-<dd>Same as '100% 100%'.</dd>
-</dl>
-
-<p>The computed value is the same as the specified value.</p>
-<p class="note">
-Note: areas of the box not covered by the replaced element will show the
-element's background.</p>
+<p class="note">This section has been moved to [CSS3IMAGES].</p>
 
 <h2 class="no-num" id="properties-list">Appendix A: Applicable CSS2.1 Properties</h2>