1. Restore default sizing algorithm to its previous scope.

2. Add contain/cover sizing as a separate algorithm, using same wording
   as object-fit's contain/cover values
3. Better explanations of how these algorithms relate to the rest of CSS.

Author: fantasai

css3-images/Overview.html

@@ -249,8 +249,15 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
      <li><a href="#object-negotiation"><span class=secno>5.2. </span>
       CSS&#x21CB;Object Negotiation</a>
 
-     <li><a href="#default-sizing"><span class=secno>5.3. </span> Default
+     <li><a href="#concrete-size-resolution"><span class=secno>5.3. </span>
       Concrete Object Size Resolution</a>
+      <ul class=toc>
+       <li><a href="#default-sizing"><span class=secno>5.3.1. </span> Default
+        Sizing Algorithm</a>
+
+       <li><a href="#cover-contain"><span class=secno>5.3.2. </span> Cover
+        and Contain Constraint Sizing</a>
+      </ul>
 
      <li><a href="#object-sizing-examples"><span class=secno>5.4. </span>
       Examples of CSS Object Sizing</a>
@@ -1679,13 +1686,12 @@ <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 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
+   <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
     class=property>background-size</code>&rsquo; properties. The specified
-    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.
+    size can be a definite width and height, a set of constraints, or a
+    combination thereof.
 
    <dt><dfn id=concrete-object-size>concrete object size</dfn>
 
@@ -1746,32 +1752,53 @@ <h3 id=object-negotiation><span class=secno>5.2. </span> CSS&#x21CB;Object
   </ol>
   <!-- ====================================================================== -->
 
-  <h3 id=default-sizing><span class=secno>5.3. </span> Default Concrete
+  <h3 id=concrete-size-resolution><span class=secno>5.3. </span> Concrete
    Object Size Resolution</h3>
 
-  <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> with
-   the <dfn id=default-sizing-algorithm>default sizing algorithm</dfn>, as
-   follows:
+  <p>Currently the rules for sizing objects are described in each context
+   that such objects are used. This section defines some common sizing
+   constraints and how to resolve them so that future specs can refer to them
+   instead of redefining size resolution in each instance.
+
+  <h4 id=default-sizing><span class=secno>5.3.1. </span> Default Sizing
+   Algorithm</h4>
+
+  <p>The <dfn id=default-sizing-algorithm>default sizing algorithm</dfn> is a
+   set of rules commonly used to find an object's <a
+   href="#concrete-object-size"><i>concrete object size</i></a>. It resolves
+   the simultaneous constraints presented by the object's <a
+   href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and either an
+   unconstrained <a href="#specified-size"><i>specified size</i></a> or one
+   consisting of only a definite width and/or height.
+
+  <p>Some object sizing rules (such as those for &lsquo;<code
+   class=property>list-style-image</code>&rsquo;) correspond exactly to the
+   <a href="#default-sizing-algorithm"><i>default sizing algorithm</i></a>.
+   Others (such as those for &lsquo;<code
+   class=property>border-image</code>&rsquo;) invoke the default sizing
+   algorithm but also apply additional sizing rules before arriving at a
+   final <a href="#concrete-object-size"><i>concrete object size</i></a>.
+
+  <p>The <a href="#default-sizing-algorithm"><i>default sizing
+   algorithm</i></a> is defined as follows:
 
   <ul>
    <li>If the <a href="#specified-size"><i>specified size</i></a> is a
     definite width and height, the <a
     href="#concrete-object-size"><i>concrete object size</i></a> is given
     that width and height.
 
-   <li>If the <a href="#specified-size"><i>specified size</i></a> has only a
-    width or height, but not both, then the <a
+   <li>If the <a href="#specified-size"><i>specified size</i></a> is only a
+    width or height (but not both) then the <a
     href="#concrete-object-size"><i>concrete object size</i></a> is given
     that specified width or height. The other dimension is calculated as
     follows:
     <ol>
      <li>If the object has an <a href="#intrinsic-aspect-ratio"><i>intrinsic
       aspect ratio</i></a>, the missing dimension of the <a
       href="#concrete-object-size"><i>concrete object size</i></a> is
-      calculated using the <i>intrinsic aspect-ratio</i> and the present
-      dimension.
+      calculated using the <a href="#intrinsic-aspect-ratio"><i>intrinsic
+      aspect ratio</i></a> and the present dimension.
 
      <li>Otherwise, if the missing dimension is present in the object's <a
       href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>, the
@@ -1783,25 +1810,8 @@ <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> 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:
+   <li>If the <a href="#specified-size"><i>specified size</i></a> has no
+    constraints:
     <ol>
      <li>If the object has only an <a
       href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, the
@@ -1825,33 +1835,35 @@ <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 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).
+  <h4 id=cover-contain><span class=secno>5.3.2. </span> Cover and Contain
+   Constraint Sizing</h4>
+
+  <p>Two other common specified sizes are the <a
+   href="#contain-constraint"><i>contain constraint</i></a> and the <a
+   href="#cover-constraint"><i>cover constraint</i></a>, both of which are
+   resolved against a specified <dfn id=constraint-rectangle>constraint
+   rectangle</dfn> using the object's <a
+   href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>:
+
+  <ul>
+   <li>A <dfn id=contain-constraint>contain constraint</dfn> is resolved by
+    setting the <a href="#concrete-object-size"><i>concrete object
+    size</i></a> to the largest rectangle that has the object's <a
+    href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a> and
+    additionally has neither width nor height larger than the constraint
+    rectangle's width and height, respectively.
+
+   <li>A <dfn id=cover-constraint>cover constraint</dfn> is resolved by
+    setting the <a href="#concrete-object-size"><i>concrete object
+    size</i></a> to the smallest rectangle that has the object's <a
+    href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a> and
+    additionally has neither width nor height smaller than the constraint
+    rectangle's width and height, respectively.
+  </ul>
+
+  <p>In both cases, if the object doesn't have an intrinsic aspect ratio, the
+   <a href="#concrete-object-size"><i>concrete object size</i></a> is the
+   specified constraint rectangle.
 
   <h3 id=object-sizing-examples><span class=secno>5.4. </span> Examples of
    CSS Object Sizing</h3>
@@ -1880,11 +1892,12 @@ <h3 id=object-sizing-examples><span class=secno>5.4. </span> Examples of
      &lsquo;<code class=property>background-size</code>&rsquo; property can
      give a sizing constraint, invoking either the <a
      href="#default-sizing-algorithm"><i>default sizing algorithm</i></a> or
-     one of the <i title="contain constraint">contain</i> or <i
-     title="cover constraint">cover</i> constraints. The concrete object size
-     is further adjusted in later steps if &lsquo;<code
-     class=property>background-repeat</code>&rsquo; has a &lsquo;<code
-     class=css>round</code>&rsquo; value. <a href="#CSS3BG"
+     one of the <a href="#contain-constraint"><i
+     title="contain constraint">contain</i></a> or <a
+     href="#cover-constraint"><i title="cover constraint">cover</i></a>
+     constraints. The concrete object size is further adjusted in later steps
+     if &lsquo;<code class=property>background-repeat</code>&rsquo; has a
+     &lsquo;<code class=css>round</code>&rsquo; value. <a href="#CSS3BG"
      rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
 
     <dt>&lsquo;<code class=property>list-style-image</code>&rsquo;
@@ -2767,11 +2780,20 @@ <h2 class=no-num id=index>Index</h2>
    <li>concrete object size, <a href="#concrete-object-size"
     title="concrete object size"><strong>5.1.</strong></a>
 
+   <li>constraint rectangle, <a href="#constraint-rectangle"
+    title="constraint rectangle"><strong>5.3.2.</strong></a>
+
+   <li>contain constraint, <a href="#contain-constraint"
+    title="contain constraint"><strong>5.3.2.</strong></a>
+
+   <li>cover constraint, <a href="#cover-constraint"
+    title="cover constraint"><strong>5.3.2.</strong></a>
+
    <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>
+    title="default sizing algorithm"><strong>5.3.1.</strong></a>
 
    <li>&lsquo;<code class=css>dpcm</code>&rsquo;, <a href="#dpcm"
     title="''dpcm''"><strong>2.</strong></a>

css3-images/Overview.src.html

@@ -1062,7 +1062,7 @@ <h3 id="sizing-terms">
 		</dd>
 
 		<dt><dfn>specified size</dfn></dt>
-		<dd>The specified size of an object is a set of constraints given by CSS, such as through the 'width' and 'height' or 'background-size' properties.  The specified 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.</dd>
+		<dd>The specified size of an object is given by CSS, such as through the 'width' and 'height' or 'background-size' properties. The specified size can be a definite width and height, a set of constraints, or a combination thereof.</dd>
 
 		<dt><dfn>concrete object size</dfn></dt>
 		<dd>The <i>concrete object size</i> is the result of combining an object's <i>intrinsic dimensions</i> and <i>specified size</i> with the <i>default object size</i> of the context it's used in, producing a rectangle with a definite width and height.</dd>
@@ -1107,30 +1107,45 @@ <h3 id="object-negotiation">
 
 <!-- ====================================================================== -->
 
-<h3 id="default-sizing">
-Default Concrete Object Size Resolution</h3>
+<h3 id="concrete-size-resolution">
+Concrete Object Size Resolution</h3>
 
-	<p>In the absence of more specific rules, an object's <i>intrinsic dimensions</i> are resolved to a <i>concrete object size</i> with the <dfn>default sizing algorithm</dfn>, as follows:</p>
+	<p>Currently the rules for sizing objects are described in each context that
+	such objects are used. This section defines some common sizing constraints
+	and how to resolve them so that future specs can refer to them instead of
+	redefining size resolution in each instance.
+
+<h4 id="default-sizing">
+Default Sizing Algorithm</h4>
+
+	<p>The <dfn>default sizing algorithm</dfn> is a set of rules commonly used
+	to find an object's <i>concrete object size</i>. It resolves the simultaneous
+	constraints presented by the object's <i>intrinsic dimensions</i> and either an
+	unconstrained <i>specified size</i> or one consisting of only a definite width
+	and/or height.
+
+	<p>Some object sizing rules (such as those for 'list-style-image') correspond
+	exactly to the <i>default sizing algorithm</i>. Others (such as those for
+	'border-image') invoke the default sizing algorithm but also apply additional
+	sizing rules before arriving at a final <i>concrete object size</i>.
+
+	<p>The <i>default sizing algorithm</i> is defined as follows:
 
 	<ul>
 		<li>If the <i>specified size</i> is a definite width and height, the <i>concrete object size</i> is given that width and height.</li>
 
-		<li>If the <i>specified size</i> has only a width or height, but not both, then the <i>concrete object size</i> is given that specified width or height. The other dimension is calculated as follows:
+		<li>If the <i>specified size</i> is only a width or height (but not both) then the <i>concrete object size</i> is given that specified width or height. The other dimension is calculated as follows:
 
 			<ol>
-				<li>If the object has an <i>intrinsic aspect ratio</i>, the missing dimension of the <i>concrete object size</i> is calculated using the <i>intrinsic aspect-ratio</i> and the present dimension.</li>
+				<li>If the object has an <i>intrinsic aspect ratio</i>, the missing dimension of the <i>concrete object size</i> is calculated using the <i>intrinsic aspect ratio</i> and the present dimension.</li>
 
 				<li>Otherwise, if the missing dimension is present in the object's <i>intrinsic dimensions</i>, the missing dimension is taken from the object's <i>intrinsic dimensions</i>.</li>
 
 				<li>Otherwise, the missing dimension of the <i>concrete object size</i> is taken from the <i>default object size</i>.</li>
 			</ol>
 		</li>
 
-		<li>If the <i>specified size</i> is a "contain" constraint and the object has an intrinsic aspect ratio, the <i>concrete object size</i> is the largest rectangle with that aspect ratio that completely fits within the <i>default object size</i>.  If the object doesnt' have an intrinsic aspec tratio, the <i>concrete object size</i> is the <i>default object size</i>.</li>
-
-		<li>If the <i>specified size</i> is a "cover" constraint and the object has an intrinsic aspect ratio, the <i>concrete object size</i> is the smallest rectangle with that aspect ratio that can completely cover within the <i>default object size</i>.  If the object doesnt' have an intrinsic aspec tratio, the <i>concrete object size</i> is the <i>default object size</i>.</li>
-
-		<li>Otherwise:
+		<li>If the <i>specified size</i> has no constraints:
 
 			<ol>
 				<li>If the object has only an <i>intrinsic aspect ratio</i>, the <i>concrete object size</i> 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 <i>default object size</i>.  Otherwise, the width and height of the <i>concrete object size</i> is the same as the object's <i>intrinsic width</i> and <i>intrinsic height</i>, if they exist.</li>
@@ -1140,13 +1155,27 @@ <h3 id="default-sizing">
 		</li>
 	</ul>
 
-	<p>If the <i>specified size</i> has a horizontal or vertical rounding constraint and the <i>concrete object size</i> in that dimension is non-zero, the <i>concrete object size</i> is then adjusted in that dimension so that it fits a whole number of times into the <i>default object size</i>, as follows:</p>
+<h4 id="cover-contain">
+Cover and Contain Constraint Sizing</h4>
+
+	<p>Two other common specified sizes are the <i>contain constraint</i> and
+	the <i>cover constraint</i>, both of which are resolved against a specified
+	<dfn>constraint rectangle</dfn> using the object's <i>intrinsic aspect ratio</i>:
 
-	<blockquote>
-		<p>If <var>X</var> is the size of the <i>concrete object size</i> in the given dimension and <var>W</var> is the size of the <i>default object size</i> in the same dimension, the <i>concrete object size</i> 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.</p>
-	</blockquote>
+	<ul>
+		<li>A <dfn>contain constraint</dfn> is resolved by setting the
+		<i>concrete object size</i> to the largest rectangle that has the object's
+		<i>intrinsic aspect ratio</i> and additionally has neither width nor height
+		larger than the constraint rectangle's width and height, respectively.</li>
+
+		<li>A <dfn>cover constraint</dfn> is resolved by setting the
+		<i>concrete object size</i> to the smallest rectangle that has the object's
+		<i>intrinsic aspect ratio</i> and additionally has neither width nor height
+		smaller than the constraint rectangle's width and height, respectively.</li>
+	</ul>
 
-	<p>Then, if the object has an intrinsic aspect ratio and the <i>specified size</i> had a horizontal rounding constraint but no height, the height of the <i>concrete object size</i> is adjust so that the <i>concrete object size</i> has the same aspect ratio as the object's intrinsic aspect ratio (and analogously for a <i>specified size</i> with a vertical rounding constraint but no width).</p>
+	<p>In both cases, if the object doesn't have an intrinsic aspect ratio,
+	the <i>concrete object size</i> is the specified constraint rectangle.
 
 <h3 id='object-sizing-examples'>
 Examples of CSS Object Sizing</h3>