w3c
diff --git a/‎css3-images/Overview.html‎
Lines changed: 132 additions & 102 deletions b/‎css3-images/Overview.html‎
Lines changed: 132 additions & 102 deletions
@@ -16,12 +16,12 @@
 
    <h1>CSS Image Values Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 April 2010</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 May 2010</h2>
 
    <dl>
     <dt>This version:</dt>
 
-    <!-- <dd><a href="http://www.w3.org/TR/2010/CR-css3-images-20100408/">http://www.w3.org/TR/2010/CR-css3-images-20100408/</a></dd> -->
+    <!-- <dd><a href="http://www.w3.org/TR/2010/CR-css3-images-20100501/">http://www.w3.org/TR/2010/CR-css3-images-20100501/</a></dd> -->
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
@@ -138,15 +138,17 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
 
     </ul>
 
-   <li><a href="#view-boxes-or-sizing-images-in-css"><span class=secno>8.
-    </span>View Boxes, or Sizing Images in CSS</a>
+   <li><a href="#view-boxes-or-sizing-images-and-objects-"><span
+    class=secno>8. </span>View Boxes, or Sizing Images and Objects in CSS</a>
+    
 
    <li><a href="#resolution-units"><span class=secno>9. </span>Resolution
     Units</a>
 
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
 
    <li class=no-num><a href="#references">References</a>
+
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
   <!--end-toc-->
 
   <div>
+
    <h2 id=intro><span class=secno>1. </span>Introduction</h2>
 
    <p><em>This section is non-normative.</em></p>
@@ -168,7 +171,6 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
     additional notations that allow a 2D image to be given as a list of URIs
     denoting fallbacks, as a slice of a larger image (sprite), and as a
     gradient.</p>
-
   </div>
 
   <div>
@@ -183,7 +185,6 @@ <h2 id=conformance><span class=secno>2. </span>Conformance</h2>
    <p>Conformance to CSS Namespaces is defined for two classes:
 
    <dl>
-
     <dt><dfn id=style-sheet>style sheet</dfn>
 
     <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
@@ -219,6 +220,7 @@ <h2 id=conformance><span class=secno>2. </span>Conformance</h2>
     normative text with <code>class="note"</code>, like this:
 
    <p class=note>Note, this is an informative note.</p>
+
   </div>
 
   <div>
@@ -406,14 +408,14 @@ <h2 id=gradients-><span class=secno>7. </span>Gradients</h2>
 
    <p>In many places this specification references a box, such as "the box's
     top-left corner" or "the box's right side". In all of these
-    circumstances, the "box" refers to the &lsquo;<code class=css><a
-    href="#css-view-box">CSS View Box</a></code>&rsquo; (see the "View Boxes"
-    section of this spec for clarification). A gradient's &lsquo;<code
-    class=css><a href="#image-view-box">Image View Box</a></code>&rsquo; has
-    no intrinsic dimensions. This means that, for example, if you use a
-    gradient in a background-image, the "box" will simply be the size of the
-    background area. If you use a gradient in a list-style-image, the "box"
-    will be a 1em square.</p>
+    circumstances, the "box" refers to the &lsquo;<a
+    href="#css-view-box"><code class=css>CSS View Box</code></a>&rsquo; (see
+    the "View Boxes" section of this spec for clarification). A gradient's
+    &lsquo;<code class=css>Image View Box</code>&rsquo; has no intrinsic
+    dimensions. This means that, for example, if you use a gradient in a
+    background-image, the "box" will simply be the size of the background
+    area. If you use a gradient in a list-style-image, the "box" will be a
+    1em square.</p>
 
    <div class=example>
     <p>As with the other &lt;image&gt; types defined in this specification,
@@ -464,8 +466,6 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>7.1.1.
      the starting-point of the gradient-line. The ending-point is obtained by
      rotating the starting-point 180 degrees around the center of the box.</p>
 
-    <div class=example></div>
-
     <p>If only a <code>&lt;angle&gt;</code> is specified, it specifies the
      direction of the gradient-line, and the starting-point and ending-point
      of the gradient-line are implied by the value of the
@@ -746,7 +746,7 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>7.2.1.
      <code>&lt;angle&gt;</code> in the first argument. The ending-point is
      where this line intersects the gradient-shape.</p>
 
-    <p><code><a href="#ltcolor-stopgt">&lt;color-stop&gt;</a></code> is
+    <p><a href="#ltcolor-stopgt"><code>&lt;color-stop&gt;</code></a> is
      defined identically to its treatment in <code>linear-gradient()</code>.
      As 
E706
in linear gradients, 0% is at the starting-point of the
      gradient-line, and 100% is at the ending-point. Distances past 100% can
@@ -845,104 +845,133 @@ <h3>Repeating Gradients</h3>
    </div>
 
   <div>
-   <h2 id=view-boxes-or-sizing-images-in-css><span class=secno>8. </span>View
-    Boxes, or Sizing Images in CSS</h2>
+   <h2 id=view-boxes-or-sizing-images-and-objects-><span class=secno>8.
+    </span>View Boxes, or Sizing Images and Objects in CSS</h2>
 
    <p>Images used in CSS may come from a number of sources, from defined
     image formats (such as gif, jpeg, etc), dedicated markup formats (such as
     SVG), and CSS-specific formats (such as the linear-gradient() value type
-    defined in this specification). These images may offer many types of
-    sizing information to CSS, or none at all. The concepts &lsquo;<code
-    class=css><a href="#image-view-box">Image View Box</a></code>&rsquo; and
-    &lsquo;<code class=css><a href="#css-view-box">CSS View
-    Box</a></code>&rsquo; are specified here to define exactly how such
-    images are treated within CSS.</p>
+    defined in this specification). As well, a document may conain many other
+    types of objects, such as video, plugins, or nested documents. These
+    images and objects (just "objects" hereafter) may offer many types of
+    sizing information to CSS, or none at all. This section defines
+    generically the size negotiation model between the image or replaced
+    content object and the CSS layout algorithms.</p>
 
-   <p>In order to define this handling, we must define a few new terms, to
-    make it easier to refer to various concepts:</p>
+   <p>In order to define this handling, we must define a few terms, to make
+    it easier to refer to various concepts:</p>
 
    <dl>
-    <dt><dfn id=default-image-sizing-area>default image sizing area</dfn>
-
-    <dd>The default image sizing area is a rectangle with a definite height
-     and width used to resolve the sizing information present in the Image
-     View Box into a CSS View Box. For example, the default image sizing area
-     background-size properties, while the default image sizing area for a
-     list-style-image is a 1em square. The image may end up being drawn
-     larger or smaller than the default image sizing area.
-
-    <dt><dfn id=image-view-box>Image View Box</dfn>
-
-    <dd>The Image View Box is a box defined by an image which represents the
-     image's preferred, natural size. This may have an intrinsic height and
-     intrinsic width, defining a definite box. It may be missing an intrinsic
-     height or an intrinsic width, implying that it may scale along its
-     height or width. It may have an intrinsic size ratio, defining the ratio
-     of its width and height, which may or may not be accompanied by an
-     intrinsic width and/or height. Finally, it may have no intrinsic
-     dimensions at all, implying that the element has no preferred size.
+    <dt><dfn id=intrinsic-dimensions>intrinsic dimensions</dfn>
+
+    <dd>The intrinsic dimensions are defined are the object's preferred,
+     natural size or aspect ratio, if any. There can be an <dfn
+     id=intrinsic-height>intrinsic height</dfn> and <dfn
+     id=intrinsic-width>intrinsic width</dfn>, defining a definite rectangle.
+     (Most bitmap images fall into this category.) There can be an <dfn
+     id=intrinsic-aspect-ratio>intrinsic aspect ratio</dfn> defining the
+     relation of the width to the height, but no definite size. (SVG images
+     designed to scale may fall into this category.) There can be just an
+     intrinsic height or width. Or there can be no intrinsic dimensions at
+     all, implying that the object has no preferred size or aspect ratio.
+     (Embedded documents are often assumed to have no intrinsic size, as are
+     CSS gradients, defined in this specification.)
+     <p>If an object (such as an icon) has multiple sizes, then the largest
+      size is used. If it has multiple aspect ratios of that size (or of no
+      size), then the aspect ratio closest to the aspect ratio of the default
+      image sizing area is use <span class=issue>This is pretty
+      arbitrary</span>.
+
+    <dt><dfn id=specified-size>specified size</dfn>
+
+    <dd>The specified size of an object is given by CSS, such as through the
+     `object-fit` or `background-size` properties. The specified size can be
+     a definite width and height, a set of constraints, or a combination
+     thereof.
 
     <dt><dfn id=css-view-box>CSS View Box</dfn>
 
-    <dd>The CSS View Box is the result of transforming the Image View Box
-     into a concrete size, based on the size of the default image sizing
-     area. A CSS View Box always has a definite height and width.
+    <dd>The CSS View Box is the result of transforming the intrinsic
+     dimensions into a concrete size, based on the specified size and the
+     default image sizing area. A CSS View Box always has a definite height
+     and width.
+
+    <dt><dfn id=default-image-sizing-area>default image sizing area</dfn>
+
+    <dd>The default image sizing area is a rectangle with a definite height
+     and width used to determine the size of the CSS View Box when both the
+     intrinsic dimensions and specified size are missing dimensions.
    </dl>
 
-   <p>The general treatment of images in CSS is as follows:</p>
+   <p>Images and objects in CSS are sized as follows:</p>
 
    <ol>
-    <li>When an image is specified in CSS, such as through a url() value in
-     the background-image property, CSS requests an &lsquo;<code class=css><a
-     href="#image-view-box">Image View Box</a></code>&rsquo; from the image.
-     The Image View Box may have an intrinsic width, an intrinsic height,
-     neither, both, or any combination of those with an intrinsic size ratio.
-
-    <li>The Image View Box is then then transformed into a &lsquo;<code
-     class=css><a href="#css-view-box">CSS View Box</a></code>&rsquo; that
-     defines the actual size that the image will display in as follows:
-     <ol>
+    <li>When an image or object is specified in a document, such as through
+     url() value in a background-image property or a @src attribute on an
+     &lt;img> element, CSS queries the object for its intrinsic size.
 
-      <li>If the Image View Box has an intrinsic width and an intrinsic
-       height, the CSS View Box is that height and width.
-
-      <li>If the Image View Box has only an intrinsic width or only an
-       intrinsic height, and no intrinsic size ratio, the CSS View Box has
-       that intrinsic height or width, and the other dimension is equal to
-       the corresponding dimension of the &lsquo;<code class=css><a
-       href="#default-image-sizing-area">default image sizing
-       area</a></code>&rsquo;.
-
-      <li>If the Image View Box has an intrinsic width or an intrinsic width
-       but not both, and an intrinsic size ratio, the CSS View Box has the
-       same width or height (as appropriate), with the other dimension
-       determined so as to have the same size ratio as the Image View Box.
-
-      <li>If the Image View Box has only an intrinsic size ratio, the CSS
-       View Box has a the largest height and width such that it has the same
-       size ratio as the Image View Box's intrinsic size ratio, and neither
-       its width nor its height are larger than the height or width of the
-       default image sizing area.
-
       <li>If the Image View Box has neither an intrinsic height, nor an
-       intrinsic width, nor an intrinsic size ratio, then the CSS View Box
-       has a size equal to the default image sizing area.
+    <li>Using the intrinsic dimensions and the specified size, CSS then
+     computes a CSS View Box that defines the size of the region the object
+     will render in, as follows:
+     <ol>
+      <li>If the specified size is just a definite width and height, the CSS
+       View Box must be that width and height.
+
+      <li>If the specified size is just a definite width or just a definite
+       height, then the CSS View Box must have the same width or height, as
+       appropriate. The other dimension is calculated as follows:
+       <ol>
+        <li>If the object has an intrinsic aspect ratio, the CSS View Box
+         must have the same aspect ratio..
+
+        <li>Otherwise, if the object has an an intrinsic height or intrinsic
+         width (whichever is missing from the specified size), then the CSS
+         View Box must have that height or width.
+
+        <li>Otherwise, the CSS View Box must have the same width or height
+         (whichever is missing from the specified size) as the default image
+         sizing area.
+       </ol>
+
+      <li>If the specified size is neither a definite width nor height, and
+       has no additional contraints, the dimensions of the CSS View Box must
+       be computed as follows:
+       <ol>
+        <li>If the object has an intrinsic width and an intrinsic height, the
+         CSS View Box must have that same height and width.
+
+        <li>If the object has only an intrinsic width or intrinsic height,
+         and no intrinsic aspect ratio, the CSS View Box must have that
+         height or width, and the width or height (whichever is missing from
+         the intrinsic dimensions) of the default image sizing area.
+
+        <li>If the object has only an intrinsic aspect ratio, the CSS View
+         Box must have that aspect ratio, and additionally be as large as
+         possible without either its height or width exceeding the height or
+         width of the default image sizing area.
+
+        <li>Otherwise, the CSS View Box must be the size of the default image
+         sizing area.
+       </ol>
+
+      <li>If the specified size has additional constraints, the CSS View Box
+       must be sized to satisfy those constraints. (For example,
+       object-fit:contain specifies slightly more complex handling for sizing
+       replaced elements, and background-repeat:round can adjust the size
+       specified in background-size so that the image fits an even number of
+       times into the background positioning area.)
      </ol>
-
-    <li>The image is then given the dimensions of the CSS View Box and asked
-     to render itself according to these dimensions. CSS does not define how
-     image formats may react to a CSS View Box that is a different size than
-     the Image View Box, but commonly the image will scale itself to fit the
-     new dimensions, perhaps scaling both dimensions independently, scaling
-     both dimensions together so that it exactly touches the sides of the
-     view box without going outside of them, seam carving to remove content
-     that does not fit within the dimensions, or any other method.
-
-    <li>After the image is rendered according to the CSS View Box, CSS may
-     clip or otherwise transform the image before displaying it in the
-     document.
    </ol>
+
+   <p>After determining the size of the CSS View Box, CSS positions it within
+    the appropriate area according to any relevant properties, such as
+    object-position or background-position, and asks the object to render
+    itself using the dimensions of the CSS View Box. CSS does not define how
+    objects when the dimensions of the CSS View Box are different than the
+    object's intrinsic dimensions. The object may adjust itself to match the
+    dimensions of the CSS View Box in some way, or even render itself larger
+    or smaller than the CSS View Box to satisfy sizing constraints of its
+    own.</p>
   </div>
 
   <div>
@@ -952,6 +981,7 @@ <h2 id=resolution-units><span class=secno>9. </span>Resolution Units</h2>
     id=ltresolutiongt>&lt;resolution&gt;</dfn> value type:
 
    <dl>
+
     <dt>dpi
 
     <dd>dots per inch
@@ -967,6 +997,7 @@ <h2 id=resolution-units><span class=secno>9. </span>Resolution Units</h2>
 
    <p class=note>The default resolution of raster images in CSS is
     &lsquo;<code class=css>1dppx</code>&rsquo;.</p>
+
   </div>
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -988,8 +1019,8 @@ <h3 class=no-num id=normative-references>Normative references</h3>
     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 8 September
     2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2009/CR-CSS2-20090908">http://www.w3.org/TR/2009/CR-CSS2-20090908</a>
-
     </dd>
+
    <!---->
 
    <dt id=RFC2119>[RFC2119]
@@ -1000,8 +1031,8 @@ <h3 class=no-num id=normative-references>Normative references</h3>
     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
     </dd>
    <!---->
-
   </dl>
+
   <!--end-normative-->
 
   <h3 class=no-num id=informative-references>Informative references</h3>
@@ -1010,7 +1041,6 @@ <h3 class=no-num id=informative-references>Informative references</h3>
 
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
-
     <!---->
 
    <dt id=CSS3BG>[CSS3BG]
@@ -1023,8 +1053,8 @@ <h3 class=no-num id=informative-references>Informative references</h3>
     </dd>
    <!---->
   </dl>
-
   <!--end-informative-->
+
 </html>
 <!-- Keep this comment at the end of the file
 Local variables: