Don't normatively redefine that which is defined in CSS2.1 and CSS3 Backgrounds.

Author: fantasai

css3-images/Overview.html

@@ -245,21 +245,20 @@ <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>
 
      <li><a href="#default-sizing"><span class=secno>5.3. </span> Default
       Concrete Object Size Resolution</a>
 
-     <li><a href="#object-fit"><span class=secno>5.4. </span> Sizing Objects:
+     <li><a href="#object-sizing-examples"><span class=secno>5.4. </span>
+      Examples of CSS Object Sizing</a>
+
+     <li><a href="#object-fit"><span class=secno>5.5. </span> Sizing Objects:
       the &lsquo;<code class=property>object-fit</code>&rsquo; property</a>
 
-     <li><a href="#object-position"><span class=secno>5.5. </span>
+     <li><a href="#object-position"><span class=secno>5.6. </span>
       Positioning Objects: the &lsquo;<code
       class=property>object-position</code>&rsquo; property</a>
     </ul>
@@ -1707,129 +1706,6 @@ <h3 id=sizing-terms><span class=secno>5.1. </span> Object-Sizing
      <a href="#specified-size"><i>specified size</i></a> are missing
      dimensions.
   </dl>
-
-  <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.
-
-  <dl>
-   <dt>&lsquo;<code class=property>background-image</code>&rsquo;
-
-   <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>
-    <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>&lsquo;<code class=property>content</code>&rsquo; (non-replaced)
-
-   <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 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>.
-
-   <dt>replaced elements
-
-   <dd>Replaced elements are not sized by the <a
-    href="#default-sizing-algorithm"><i>default sizing algorithm</i></a>.
-    Instead, CSS 2.1 defines how to size them in sections <a
-    href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a> and
-    <a
-    href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>.
-    <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
-
-   <dt>contents of 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 used
-    width and height of the replaced element.
-  </dl>
   <!-- ====================================================================== -->
 
   <h3 id=object-negotiation><span class=secno>5.2. </span> CSS&#x21CB;Object
@@ -1975,10 +1851,112 @@ <h3 id=default-sizing><span class=secno>5.3. </span> Default Concrete
    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>
+   a vertical rounding constraint but no width).
+
+  <h3 id=object-sizing-examples><span class=secno>5.4. </span> Examples of
+   CSS Object Sizing</h3>
+
+  <div class=example>
+   <p>The following examples show how the <a
+    href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> and <a
+    href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds &amp;
+    Borders</a> sizing algorithms correspond to concepts defined in this
+    specification.
+
+   <dl>
+    <dt>&lsquo;<code class=property>background-image</code>&rsquo;
+
+    <dd>The rules for calculating the <a
+     href="#concrete-object-size"><i>concrete object size</i></a> of a
+     background are defined in <a
+     href="http://www.w3.org/TR/CSS21/colors.html#background-properties">CSS2.1§14.2.1</a>
+     and <a
+     href="http://www.w3.org/TR/css3-background/#the-background-size">CSS3BG§3.9</a>.
+     CSS2.1 uses the <a href="#default-sizing-algorithm"><i>default sizing
+     algorithm</i></a> with no <a href="#specified-size"><i>specified
+     size</i></a> and the <i>background positioning area</i> as the <a
+     href="#default-object-size"><i>default object size</i></a>. <a
+     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> In CSS3,
+     &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"
+     rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
+
+    <dt>&lsquo;<code class=property>list-style-image</code>&rsquo;
+
+    <dd>The rules for calculating the <a
+     href="#concrete-object-size"><i>concrete object size</i></a> of a
+     list-style image are defined in <a
+     href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS2.1§12.5.1</a>.
+     They use the <a href="#default-sizing-algorithm"><i>default sizing
+     algorithm</i></a> with no <a href="#specified-size"><i>specified
+     size</i></a> and a <a href="#default-object-size"><i>default object
+     size</i></a> of 1em square.
+
+    <dt>&lsquo;<code class=property>border-image</code>&rsquo;
+
+    <dd>Border images are sized twice: first the entire image is sized to
+     determine the slice points, then the slices are sized to decorate the
+     border. The first sizing operation is defined in <a
+     href="http://www.w3.org/TR/css3-background/#the-border-image-slice">CSS3BG§6.2</a>
+     and uses the <a href="#default-sizing-algorithm"><i>default sizing
+     algorithm</i></a> with no <a href="#specified-size"><i>specified
+     size</i></a>, and the <a
+     href="http://www.w3.org/TR/css3-background/#border-image-area">border
+     image area</a> as the <a href="#default-object-size"><i>default object
+     size</i></a>. The second operation is defined in <a
+     href="http://www.w3.org/TR/css3-background/#border-image-process">CSS3BG§6.2</a>:
+     the <a href="#default-sizing-algorithm"><i>default sizing
+     algorithm</i></a> is used to determine an initial size for each slice
+     with the corresponding <i>border image area</i> part as the default
+     object size. By default the <a href="#specified-size"><i>specified
+     size</i></a> matches this <a href="#default-object-size"><i>default
+     object size</i></a>; however the &lsquo;<code
+     class=property>border-image-repeat</code>&rsquo; property can drop the
+     specified size in one or more directions and may also apply an
+     additional rounding step. <a href="#CSS3BG"
+     rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
+
+    <dt>&lsquo;<code class=property>cursor</code>&rsquo;
+
+    <dd>The rules for calculating the <a
+     href="#concrete-object-size"><i>concrete object size</i></a> of a cursor
+     are defined in <a
+     href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2.1 § 18.1:
+     Cursors</a>. 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><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> defines the sizing
+     of replaced elements (including those inserted as <a
+     href="http://www.w3.org/TR/CSS21/generate.html#content">generated
+     content</a>) in sections <a
+     href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">10.3.2</a>,
+     <a
+     href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>,
+     <a
+     href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">10.6.2</a>,
+     and <a
+     href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>.
+     <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The
+     &lsquo;<a href="#object-fit0"><code
+     class=property>object-fit</code></a>&rsquo; property defined below
+     defines how the <a href="#concrete-object-size"><i>concrete object
+     size</i></a> corresponds to the element's used width and height; by
+     default they coincide.
+   </dl>
+  </div>
   <!-- ====================================================================== -->
 
-  <h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
+  <h3 id=object-fit><span class=secno>5.5. </span> Sizing Objects: the
    &lsquo;<a href="#object-fit0"><code
    class=property>object-fit</code></a>&rsquo; property</h3>
 
@@ -2118,7 +2096,7 @@ <h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
    attributes on the root &lt;svg> element to determine how to draw itself.</p>
   <!-- ====================================================================== -->
 
-  <h3 id=object-position><span class=secno>5.5. </span> Positioning Objects:
+  <h3 id=object-position><span class=secno>5.6. </span> Positioning Objects:
    the &lsquo;<a href="#object-position0"><code
    class=property>object-position</code></a>&rsquo; property</h3>
 
@@ -2874,10 +2852,10 @@ <h2 class=no-num id=index>Index</h2>
     title="&lt;linear-gradient>"><strong>4.1.1.</strong></a>
 
    <li>object-fit, <a href="#object-fit0"
-    title=object-fit><strong>5.4.</strong></a>
+    title=object-fit><strong>5.5.</strong></a>
 
    <li>object-position, <a href="#object-position0"
-    title=object-position><strong>5.5.</strong></a>
+    title=object-position><strong>5.6.</strong></a>
 
    <li>objects, <a href="#objects" title=objects><strong>5.</strong></a>