Add cover/contain/rounding constraints to specified size and use them in the default sizing algorithm. Define the specified size for all the relevant contexts appropriately, including assigning the new constraints.

--HG--
extra : rebase_source : bb1f440bc84820aaba2ffa2ad789aba52026039f

Author: tabatkins

css3-images/Overview.html

@@ -260,6 +260,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
     <ul class=toc>
      <li><a href="#sizing-terms"><span class=secno>5.1. </span> Object-Sizing
       Terminology</a>
+      <ul class=toc>
+       <li><a href="#specified-and-default-sizes"><span class=secno>5.1.1.
+        </span> Specified and Default Object Sizes</a>
+      </ul>
 
      <li><a href="#object-negotiation"><span class=secno>5.2. </span>
       CSS&#x21CB;Object Negotiation</a>
@@ -1845,12 +1849,15 @@ <h3 id=sizing-terms><span class=secno>5.1. </span> Object-Sizing
 
    <dt><dfn id=specified-size>specified size</dfn>
 
-   <dd>The specified size of an object is given by CSS, such as through the
-    &lsquo;<code class=property>width</code>&rsquo; and &lsquo;<code
-    class=property>height</code>&rsquo; or &lsquo;<code
+   <dd>The specified size of an object is a set of constraints given by CSS,
+    such as through the &lsquo;<code class=property>width</code>&rsquo; and
+    &lsquo;<code class=property>height</code>&rsquo; or &lsquo;<code
     class=property>background-size</code>&rsquo; properties. The specified
-    size can be a definite width and height, a set of constraints, or a
-    combination thereof.
+    size may be a width and/or a height, or alternately a "cover" or
+    "contain" constraint. Additionally, the specified size may have a
+    horizontal or vertical "rounding" constraint. A <a>later section</a> of
+    this spec defines how the specified size is determined for various
+    contexts.
 
    <dt><dfn id=concrete-object-size>concrete object size</dfn>
 
@@ -1869,57 +1876,114 @@ <h3 id=sizing-terms><span class=secno>5.1. </span> Object-Sizing
      href="#concrete-object-size"><i>concrete object size</i></a> when both
      the <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and
      <a href="#specified-size"><i>specified size</i></a> are missing
-     dimensions. It varies based on the context in which that the image is
-     being laid out.</p>
-
-    <p>The following list defines the <a
-     href="#default-object-size"><i>default object size</i></a> of properties
-     and contexts that appear in CSS 2.1, plus &lsquo;<code
-     class=property>border-image</code>&rsquo; from CSS 3 Backgrounds &amp;
-     Borders. Newer modules that accept an &lsquo;<a href="#image-type"><code
-     class=css>&lt;image></code></a>&rsquo; component value in a new context
-     must define the <a href="#default-object-size"><i>default object
-     size</i></a> in that context. This list is normative, but it is not
-     intended to contradict anything stated in CSS2.1 or CSS3 Backgrounds
-     &amp; Borders.</p>
-
-    <dl>
-     <dt>&lsquo;<code class=property>background-image</code>&rsquo;
-
-     <dd>The <a href="#default-object-size"><i>default object size</i></a> is
-      the size of the element's <a
-      href="http://www.w3.org/TR/css3-background/#background-positioning-area">background
-      positioning area</a>. <a href="#CSS3BG"
-      rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
-
-     <dt>&lsquo;<code class=property>list-style-image</code>&rsquo;
-
-     <dd>The <a href="#default-object-size"><i>default object size</i></a> is
-      a 1em square. <a href="#CSS21"
-      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
-
-     <dt>&lsquo;<code class=property>border-image</code>&rsquo;
-
-     <dd>The <a href="#default-object-size"><i>default object size</i></a> is
-      the size of the element's <a
-      href="http://www.w3.org/TR/css3-background/#border-image-area">border
-      image area</a>. <a href="#CSS3BG"
-      rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
+     dimensions. A <a>later section</a> of this spec defines how the default
+     object size is determined for various contexts.</p>
+  </dl>
 
-     <dt>&lsquo;<code class=property>cursor</code>&rsquo;
+  <h4 id=specified-and-default-sizes><span class=secno>5.1.1. </span>
+   Specified and Default Object Sizes</h4>
+
+  <p>When sizing an object using the <a
+   href="#default-sizing-algorithm"><i>default sizing algorithm</i></a>, the
+   <a href="#specified-size"><i>specified size</i></a> and <a
+   href="#default-object-size"><i>default object size</i></a> can vary based
+   on the context of the object and various CSS properties. This section
+   defines these for the various contexts in which an &lsquo;<a
+   href="#image-type"><code class=css>&lt;image></code></a>&rsquo; component
+   value can appear in CSS 2.1 and CSS3 Backgrounds &amp; Borders. Newer
+   modules that accept an &lsquo;<a href="#image-type"><code
+   class=css>&lt;image></code></a>&rsquo; component value in a new context
+   must define the <a href="#specified-size"><i>specified size</i></a> and <a
+   href="#default-object-size"><i>default object size</i></a> in that
+   context.
+
+  <p class=note>This section is normative, but is not intended to contradict
+   anything stated in CSS2.1 or CSS3 Backgrounds &amp; Borders. Any
+   contradiction should be taken as an error in this spec and reported.
 
-     <dd>The <a href="#default-object-size"><i>default object size</i></a> is
-      a UA-defined size that should be based on the size of a typical cursor
-      on the UA's operating system. <a href="#CSS21"
-      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+  <dl>
+   <dt>&lsquo;<code class=property>background-image</code>&rsquo;
 
-     <dt>replaced elements
+   <dd>
+    <p>If &lsquo;<code class=property>background-size</code>&rsquo; is
+     &lsquo;<code class=css>cover</code>&rsquo; or &lsquo;<code
+     class=css>contain</code>&rsquo;, the <a
+     href="#specified-size"><i>specified size</i></a> has a "cover" or
+     "contain" constraint, respectively. Otherwise, if &lsquo;<code
+     class=property>background-size</code>&rsquo; specifies a
+     non-&lsquo;<code class=css>auto</code>&rsquo; width and/or height, the
+     <a href="#specified-size"><i>specified size</i></a> is that width and/or
+     height. If &lsquo;<code class=property>background-repeat</code>&rsquo;
+     is &lsquo;<code class=css>round</code>&rsquo; in either dimension, the
+     <a href="#specified-size"><i>specified size</i></a> also has a rounding
+     constraint in that dimension.</p>
+
+    <p>The <a href="#default-object-size"><i>default object size</i></a> is
+     the <a
+     href="http://www.w3.org/TR/css3-background/#background-positioning-area">background
+     positioning area</a>. <a href="#CSS3BG"
+     rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a></p>
+
+   <dt>&lsquo;<code class=property>list-style-image</code>&rsquo;
+
+   <dd>The <a href="#specified-size"><i>specified size</i></a> has no
+    constraints. The <a href="#default-object-size"><i>default object
+    size</i></a> is a 1em square.
+
+   <dt>&lsquo;<code class=property>border-image</code>&rsquo;
 
-     <dd>The <a href="#default-object-size"><i>default object size</i></a> is
-      a the largest rectangle that has a 2:1 width:height ratio, is no larger
-      than 300px width and 150px height, and has a width that fits in the
-      device. <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
-    </dl>
+   <dd>
+    <p>When initially sizing an image (before slicing it), the <a
+     href="#specified-size"><i>specified size</i></a> has no constraints, and
+     the <a href="#default-object-size"><i>default object size</i></a> is the
+     <a href="http://www.w3.org/TR/css3-background/#border-image-area">border
+     image area</a>. <a href="#CSS3BG"
+     rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>.</p>
+
+    <p>When sizing the slices, the top and bottom slices' <a
+     href="#specified-size"><i>specified size</i></a>s have a height equal to
+     the top/bottom &lsquo;<code
+     class=property>border-image-width</code>&rsquo;, the left and right
+     slices' <a href="#specified-size"><i>specified size</i></a>s have a
+     width equal to the left/right &lsquo;<code
+     class=property>border-image-width</code>&rsquo;, and the corner slices'
+     <a href="#specified-size"><i>specified size</i></a>s have widths and
+     heights equal to the &lsquo;<code
+     class=property>border-image-width</code>&rsquo; for the two sides
+     they're a part of. If the first keyword of &lsquo;<code
+     class=property>border-image-repeat</code>&rsquo; is &lsquo;<code
+     class=css>round</code>&rsquo;, the top and bottom slices' <a
+     href="#specified-size"><i>specified size</i></a>s have a horizontal
+     rounding constraint. If the second keyword of &lsquo;<code
+     class=property>border-image-repeat</code>&rsquo; is &lsquo;<code
+     class=css>round</code>&rsquo;, the left and right slices' <i>specifies
+     size</i>s have a vertical rounding constraint.</p>
+
+    <p>The middle slice is sized specially to match the width of the
+     top/bottom slices and the height of the left/right slices, and so is not
+     covered by this sizing algorithm.</p>
+
+    <p>The <a href="#default-object-size"><i>default object size</i></a> for
+     each slice is the size of the border image area part they are associated
+     with.</p>
+
+   <dt>&lsquo;<code class=property>cursor</code>&rsquo;
+
+   <dd>The <a href="#specified-size"><i>specified size</i></a> has no
+    constraints. The <a href="#default-object-size"><i>default object
+    size</i></a> is a UA-defined size that should be based on the size of a
+    typical cursor on the UA's operating system. <a href="#CSS21"
+    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+
+   <dt>replaced elements
+
+   <dd>The <a href="#specified-size"><i>specified size</i></a> is defined by
+    &lsquo;<a href="#object-fit0"><code
+    class=property>object-fit</code></a>&rsquo;. The <a
+    href="#default-object-size"><i>default object size</i></a> is the largest
+    rectangle that has a 2:1 width:height ratio, is no larger than 300px
+    width and 150px height, and has a width that fits in the device. <a
+    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
   </dl>
   <!-- ====================================================================== -->
 
@@ -1966,7 +2030,8 @@ <h3 id=default-sizing><span class=secno>5.3. </span> Default Concrete
 
   <p>In the absence of more specific rules, an object's <a
    href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> are resolved
-   to a <a href="#concrete-object-size"><i>concrete object size</i></a> as
+   to a <a href="#concrete-object-size"><i>concrete object size</i></a> with
+   the <dfn id=default-sizing-algorithm>default sizing algorithm</dfn>, as
    follows:
 
   <ul>
@@ -1996,10 +2061,25 @@ <h3 id=default-sizing><span class=secno>5.3. </span> Default Concrete
       from the <a href="#default-object-size"><i>default object size</i></a>.
     </ol>
 
-   <li>If the <a href="#specified-size"><i>specified size</i></a> has neither
-    a definite width nor height, and has no additional contraints, the
-    dimensions of the <a href="#concrete-object-size"><i>concrete object
-    size</i></a> are calculated as follows:
+   <li>If the <a href="#specified-size"><i>specified size</i></a> is a
+    "contain" constraint and the object has an intrinsic aspect ratio, the <a
+    href="#concrete-object-size"><i>concrete object size</i></a> is the
+    largest rectangle with that aspect ratio that completely fits within the
+    <a href="#default-object-size"><i>default object size</i></a>. If the
+    object doesnt' have an intrinsic aspec tratio, the <a
+    href="#concrete-object-size"><i>concrete object size</i></a> is the <a
+    href="#default-object-size"><i>default object size</i></a>.
+
+   <li>If the <a href="#specified-size"><i>specified size</i></a> is a
+    "cover" constraint and the object has an intrinsic aspect ratio, the <a
+    href="#concrete-object-size"><i>concrete object size</i></a> is the
+    smallest rectangle with that aspect ratio that can completely cover
+    within the <a href="#default-object-size"><i>default object size</i></a>.
+    If the object doesnt' have an intrinsic aspec tratio, the <a
+    href="#concrete-object-size"><i>concrete object size</i></a> is the <a
+    href="#default-object-size"><i>default object size</i></a>.
+
+   <li>Otherwise:
     <ol>
      <li>If the object has only an <i>intrinsic aspect ratio</i>, the <a
       href="#concrete-object-size"><i>concrete object size</i></a> must have
@@ -2019,18 +2099,33 @@ <h3 id=default-sizing><span class=secno>5.3. </span> Default Concrete
     </ol>
   </ul>
 
-  <p>If the <a href="#specified-size"><i>specified size</i></a> has
-   additional constraints, the <a href="#concrete-object-size"><i>concrete
-   object size</i></a> must be sized to satisfy those constraints. For
-   example, the &lsquo;<code class=property>min-width</code>&rsquo;,
-   &lsquo;<code class=property>min-height</code>&rsquo;, &lsquo;<code
-   class=property>max-width</code>&rsquo;, and &lsquo;<code
-   class=property>max-height</code>&rsquo;properties specify slightly more
-   complex handling for sizing replaced elements, and &lsquo;<code
-   class=css>background-repeat: round</code>&rsquo; can further adjust the
-   size calculated by &lsquo;<code
-   class=property>background-size</code>&rsquo; so that the image fits a
-   whole number of times into the background positioning area.</p>
+  <p>If the <a href="#specified-size"><i>specified size</i></a> has a
+   horizontal or vertical rounding constraint and the <a
+   href="#concrete-object-size"><i>concrete object size</i></a> in that
+   dimension is non-zero, the <a href="#concrete-object-size"><i>concrete
+   object size</i></a> is then adjusted in that dimension so that it fits a
+   whole number of times into the <a href="#default-object-size"><i>default
+   object size</i></a>, as follows:
+
+  <blockquote>
+   <p>If <var>X</var> is the size of the <a
+    href="#concrete-object-size"><i>concrete object size</i></a> in the given
+    dimension and <var>W</var> is the size of the <a
+    href="#default-object-size"><i>default object size</i></a> in the same
+    dimension, the <a href="#concrete-object-size"><i>concrete object
+    size</i></a> in that dimension is changed to <var>X'</var> = <var>W</var>
+    / round(<var>W</var> / <var>X</var>), where round() is a function that
+    returns the nearest natural number.
+  </blockquote>
+
+  <p>Then, if the object has an intrinsic aspect ratio and the <a
+   href="#specified-size"><i>specified size</i></a> had a horizontal rounding
+   constraint but no height, the height of the <a
+   href="#concrete-object-size"><i>concrete object size</i></a> is adjust so
+   that the <a href="#concrete-object-size"><i>concrete object size</i></a>
+   has the same aspect ratio as the object's intrinsic aspect ratio (and
+   analogously for a <a href="#specified-size"><i>specified size</i></a> with
+   a vertical rounding constraint but no width).</p>
   <!-- ====================================================================== -->
 
   <h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
@@ -2913,6 +3008,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>default object size, <a href="#default-object-size"
     title="default object size"><strong>5.1.</strong></a>
 
+   <li>default sizing algorithm, <a href="#default-sizing-algorithm"
+    title="default sizing algorithm"><strong>5.3.</strong></a>
+
    <li>&lsquo;<code class=css>dpcm</code>&rsquo;, <a href="#dpcm"
     title="''dpcm''"><strong>2.</strong></a>