- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 11 Feb 2011 22:27:36 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv9288
Modified Files:
Overview.html Overview.src.html
Log Message:
Rearranged sections, so that sizing stuff has its own section, separate from the image-manipulation properties.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.66
retrieving revision 1.67
diff -u -d -r1.66 -r1.67
--- Overview.html 9 Feb 2011 18:06:06 -0000 1.66
+++ Overview.html 11 Feb 2011 22:27:33 -0000 1.67
@@ -12,7 +12,6 @@
<style>
p { margin: .5em 0; }
dd > p { text-indent: 0; }
- a > b { font-weight: normal; color: #800; }
</style>
<body>
@@ -22,12 +21,12 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
[...3660 lines suppressed...]
- </ol>
- </div>
- </div>
+ <li>Interpolate each component and color-stop of the gradients
+ independently. For linear gradients, the only component is the angle. For
+ radial gradients, the components are the horizontal and vertical position
+ of the center and the horizontal and vertical axis lengths.
+
+ <li>To interpolate a color-stop, first match each color-stop in the start
+ gradient to the corresponding color-stop at the same index in the end
+ gradient. For repeating gradients, the first specified color-stop in the
+ start and end gradients are considered to be at the same index, and all
+ other color-stops following and preceding are indexed appropriately.
+ Then, for each pair of color-stops, interpolate the position and color
+ independently.
+ </ol>
+ <!-- ====================================================================== -->
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.68
retrieving revision 1.69
diff -u -d -r1.68 -r1.69
--- Overview.src.html 9 Feb 2011 21:32:15 -0000 1.68
+++ Overview.src.html 11 Feb 2011 22:27:34 -0000 1.69
@@ -851,8 +851,8 @@
<!-- ====================================================================== -->
-<h4 id="sizing-terms" class="no-num">
-Object-Sizing Terminology</h4>
+<h3 id="sizing-terms">
+Object-Sizing Terminology</h3>
<p>In order to define this handling, we define a few terms, to make it
easier to refer to various concepts:</p>
@@ -930,8 +930,8 @@
<!-- ====================================================================== -->
-<h4 id="object-negotiation" class="no-num">
-CSS⇋Object Negotiation</h4>
+<h3 id="object-negotiation">
+CSS⇋Object Negotiation</h3>
<p>Objects in CSS are sized and rendered as follows:</p>
@@ -957,8 +957,8 @@
<!-- ====================================================================== -->
-<h4 id="default-sizing" class="no-num">
-Default Intrinsic-Size Resolution</h4>
+<h3 id="default-sizing">
+Default Intrinsic-Size Resolution</h3>
<p>In the absence of more specific rules to the contrary, an object's
<i>intrinsic size</i> is resolved to a <i>CSS View Box</i> as follows:
@@ -1019,8 +1019,172 @@
<!-- ====================================================================== -->
-<h3 id="image-resolution">
-Overriding Image Resolutions: the 'image-resolution' property</h3>
+<h3 id="object-fit">
+Sizing Objects: The 'object-fit' Property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:
+ <td><dfn>object-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>no
+ <tr>
+ <th>Percentages:
+ <td>N/A
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>specified value
+ </table>
+
+ <p>The 'object-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>
+ <p>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'.</p>
+ </dd>
+
+ <dt>contain</dt>
+ <dd>
+ <p>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.</p>
+ <p>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.</p>
+ </dd>
+
+ <dt>cover</dt>
+ <dd>
+ <p>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.</p>
+ <p>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.</p>
+ </dd>
+ <!-- Commented out for WD publication
+ <dt>none</dt>
+ <dd>
+ <p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
+ usual</a>. If the content has an intrinsic height and width, do not
+ scale it. Otherwise, this value must be treated as ''fill''.</p>
+ </dd>
+
+ <dt>scale-down <b class=issue>better name?</i></dt>
+ <dd>
+ <p>This value must act identically to ''none'' or ''contain'', whichever
+ would make the contents smaller.</p>
+ </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
+ 'object-position' property for positioning the object with respect to the
+ element's box.</p>
+
+ <div class="figure">
+ <p><img src="img_scale.png" style="border: thin solid black;"
+ alt=""></p>
+ <p class="caption">
+ An example showing how each of the four values of 'object-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 'object-position'.</p>
+ </div>
+
+ <p class="note">Note: the 'object-fit' property has similar semantics to
+ the fit attribute in [[SMIL10]].</p>
+
+ <p>User agents MAY accept 'image-fit' as an alias for 'object-fit', as a
+ previous version of this specification used that name. Authors must not
+ use 'image-fit' in their stylesheets.</p>
+
+<!-- ====================================================================== -->
+
+<h3 id="object-position">
+Positioning Objects: The 'object-position' Property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:
+ <td><dfn>object-position</dfn>
+ <tr>
+ <th>Value:
+ <td>[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | 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>no
+ <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 'object-position' property determines the alignment of the replaced
+ element inside its box. The values have the same meaning as the values for
+ the <a href="http://w3.org/TR/CSS21/colors.html#propdef-background-position">'background-position'</a>
+ property, using the image as the image and the content box as the positioning
+ area. [[!CSS21]]</p>
+
+ <p class="note">Note that areas of the box not covered by the replaced
+ element will show the element's background.</p>
+
+ <p>User agents MAY accept 'image-position' as an alias for 'object-position', as a
+ previous version of this specification used that name. Authors must not
+ use 'image-position' in their stylesheets.</p>
+
+<!-- ====================================================================== -->
+
+<h2 id="image-resolution">
+Overriding Image Resolutions: the 'image-resolution' property</h2>
<p>The <i>image resolution</i> is defined as the number of image
pixels per unit length, e.g., pixels per inch. Some image formats can
@@ -1099,8 +1263,8 @@
<!-- ====================================================================== -->
-<h3 id="image-orientation">
-Orienting an Image on the Page: the 'image-orientation' property</h3>
+<h2 id="image-orientation">
+Orienting an Image on the Page: the 'image-orientation' property</h2>
<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
@@ -1175,8 +1339,8 @@
<!-- ====================================================================== -->
-<h3 id=image-rendering>
-Determining How to Scale an Image: The 'image-rendering' Property</h3>
+<h2 id=image-rendering>
+Determining How to Scale an Image: The 'image-rendering' Property</h2>
<table class=propdef>
<tr>
@@ -1239,170 +1403,6 @@
<!-- ====================================================================== -->
-<h3 id="object-fit">
-Sizing Replaced Elements: The 'object-fit' Property</h3>
-
- <table class="propdef">
- <tr>
- <th>Name:
- <td><dfn>object-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>no
- <tr>
- <th>Percentages:
- <td>N/A
- <tr>
- <th>Media:
- <td>visual
- <tr>
- <th>Computed value:
- <td>specified value
- </table>
-
- <p>The 'object-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>
- <p>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'.</p>
- </dd>
-
- <dt>contain</dt>
- <dd>
- <p>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.</p>
- <p>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.</p>
- </dd>
-
- <dt>cover</dt>
- <dd>
- <p>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.</p>
- <p>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.</p>
- </dd>
- <!-- Commented out for WD publication
- <dt>none</dt>
- <dd>
- <p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
- usual</a>. If the content has an intrinsic height and width, do not
- scale it. Otherwise, this value must be treated as ''fill''.</p>
- </dd>
-
- <dt>scale-down <b class=issue>better name?</i></dt>
- <dd>
- <p>This value must act identically to ''none'' or ''contain'', whichever
- would make the contents smaller.</p>
- </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
- 'object-position' property for positioning the object with respect to the
- element's box.</p>
-
- <div class="figure">
- <p><img src="img_scale.png" style="border: thin solid black;"
- alt=""></p>
- <p class="caption">
- An example showing how each of the four values of 'object-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 'object-position'.</p>
- </div>
-
- <p class="note">Note: the 'object-fit' property has similar semantics to
- the fit attribute in [[SMIL10]].</p>
-
- <p>User agents MAY accept 'image-fit' as an alias for 'object-fit', as a
- previous version of this specification used that name. Authors must not
- use 'image-fit' in their stylesheets.</p>
-
-<!-- ====================================================================== -->
-
-<h3 id="object-position">
-Positioning Replaced Images: The 'object-position' Property</h3>
-
- <table class="propdef">
- <tr>
- <th>Name:
- <td><dfn>object-position</dfn>
- <tr>
- <th>Value:
- <td>[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | 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>no
- <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 'object-position' property determines the alignment of the replaced
- element inside its box. The values have the same meaning as the values for
- the <a href="http://w3.org/TR/CSS21/colors.html#propdef-background-position">'background-position'</a>
- property, using the image as the image and the content box as the positioning
- area. [[!CSS21]]</p>
-
- <p class="note">Note that areas of the box not covered by the replaced
- element will show the element's background.</p>
-
- <p>User agents MAY accept 'image-position' as an alias for 'object-position', as a
- previous version of this specification used that name. Authors must not
- use 'image-position' in their stylesheets.</p>
-
-<!-- ====================================================================== -->
-
<h2 id=serialization>
Serialization</h2>
Received on Friday, 11 February 2011 22:27:38 UTC