- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 09 Feb 2011 18:06:08 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv2940
Modified Files:
Overview.html Overview.src.html
Log Message:
Edits to sizing algorithm:
- More consistent use of "object" instead of "image"
- Use "default object size" in place of "default image sizing area"
because it's a) shorter b) allows default size to have more than
just a width/height (list-style images e.g. have a default ratio)
- Split out default intrinsic-size resolution to its own section
and have focused section on CSS<->object negotiation
- Make CSS<->object negotiation have clear steps
- Various other editorial tweaks
- Mention that CSS View Box clips by default
- Remove conflicts with CSS2.1
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.65
retrieving revision 1.66
diff -u -d -r1.65 -r1.66
--- Overview.html 9 Feb 2011 10:29:57 -0000 1.65
+++ Overview.html 9 Feb 2011 18:06:06 -0000 1.66
@@ -167,6 +167,18 @@
<li><a href="#sizing"><span class=secno>6. </span>Sizing Images and
Objects in CSS</a>
<ul class=toc>
+ <li>
+ <ul class=toc>
+ <li class=no-num><a href="#sizing-terms">Object-Sizing Terminology</a>
+
+
+ <li class=no-num><a href="#object-negotiation">CSS⇋Object
+ Negotiation</a>
+
+ <li class=no-num><a href="#default-sizing">Default Intrinsic-Size
+ Resolution</a>
+ </ul>
+
<li><a href="#image-resolution"><span class=secno>6.1. </span>Overriding
Image Resolutions: the ‘<code
class=property>image-resolution</code>’ property</a>
@@ -1138,10 +1150,12 @@
SVG), and CSS-specific formats (such as the linear-gradient() value type
defined in this specification). As well, a document may contain 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 object and the CSS
- layout algorithms.</p>
+ These images and objects (just <dfn id=objects>objects</dfn> hereafter)
+ may offer many types of sizing information to CSS, or none at all. This
+ section defines generically the size negotiation model between the object
+ and the CSS layout algorithms.</p>
+
+ <h4 class=no-num id=sizing-terms>Object-Sizing Terminology</h4>
<p>In order to define this handling, we define a few terms, to make it
easier to refer to various concepts:</p>
@@ -1166,8 +1180,8 @@
<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 <a
- href="#default-image-sizing-area"><i>default image sizing area</i></a>
- is used. <span class=issue>This is pretty arbitrary.</span></p>
+ href="#default-object-size"><i>default object size</i></a> is used.
+ <span class=issue>This is pretty arbitrary.</span></p>
<dt><dfn id=specified-size>specified size</dfn>
@@ -1183,50 +1197,60 @@
<dd>The CSS View Box is the result of transforming the <a
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> into a
concrete size, based on the specified size and the <a
- href="#default-image-sizing-area"><i>default image sizing area</i></a>.
- A CSS View Box always has a definite height and width.
+ href="#default-object-size"><i>default object size</i></a>. A CSS View
+ Box always has a definite height and width.
- <dt><dfn id=default-image-sizing-area>default image sizing area</dfn>
+ <dt><dfn id=default-object-size>default object size</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
- <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and <a
+ <dd>The default object size is a rectangle with a definite height and
+ width used to determine the size of the CSS View Box 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 property that the image is being used as a value
- in:
- <dl>
- <dt>‘<code class=property>background-image</code>’
-
- <dd>The <a href="#default-image-sizing-area"><i>default image sizing
- area</i></a> is the size of the background positioning area of the
- element.
+ It varies based on the context in which that the image is being laid
+ out.
+ <div class=example>
+ <p>Below are some examples of default object sizing areas:
- <dt>‘<code class=property>list-style-image</code>’
+ <dl>
+ <dt>‘<code class=property>background-image</code>’
- <dd>The <a href="#default-image-sizing-area"><i>default image sizing
- area</i></a> is a 1em square.
+ <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></dd>
+ <!-- list style images prioritize a default ratio of 1:1 over the 1em size
+ <dt>‘<code class=property>list-style-image</code>’</dt>
+ <dd>The <i>default object size</i> is a 1em square. [[CSS21]]</dd>
+-->
- <dt>‘<code class=property>border-image</code>’
+ <dt>‘<code class=property>border-image</code>’
- <dd>The <a href="#default-image-sizing-area"><i>default image sizing
- area</i></a> is the size of the element's <a
- href="http://dev.w3.org/csswg/css3-background/#border-image-area"><i>border
- image area</i></a>.
+ <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>
- <dt>‘<code class=property>cursor</code>’
+ <dt>‘<code class=property>cursor</code>’
- <dd>The <a href="#default-image-sizing-area"><i>default image sizing
- area</i></a> is a UA-defined size that should be based on the size of
- a typical cursor on the UA's operating system.
+ <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>
- <dt>Anything else
+ <dt>replaced elements
- <dd>The <a href="#default-image-sizing-area"><i>default image sizing
- area</i></a> is a rectangle 300px wide and 150px tall.
- </dl>
+ <dd>The <a href="#default-object-size"><i>default object size</i></a>
+ is a rectangle 300px wide and 150px tall. <a href="#CSS21"
+ rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>
+ </dl>
+ </div>
</dl>
- <p>Images and objects in CSS are sized as follows:</p>
+ <h4 class=no-num id=object-negotiation>CSS⇋Object Negotiation</h4>
+
+ <p>Objects in CSS are sized and rendered as follows:</p>
<ol>
<li>When an image or object is specified in a document, such as through
@@ -1238,93 +1262,93 @@
<li>Using the <a href="#intrinsic-dimensions"><i>intrinsic
dimensions</i></a> and the <a href="#specified-size"><i>specified
size</i></a>, CSS then computes a <a href="#css-view-box"><i>CSS View
- Box</i></a> that defines the size of the region the object will render
- in, as follows:
- <ol>
- <li>If the <a href="#specified-size"><i>specified size</i></a> is just
- a definite width and height, the <a href="#css-view-box"><i>CSS View
- Box</i></a> must be that width and height.
+ Box</i></a> that defines the size and position of the region the object
+ will render in.
- <li>If the <a href="#specified-size"><i>specified size</i></a> is just
- a definite width or just a definite height, then the <a
- href="#css-view-box"><i>CSS View Box</i></a> must have the same width
- or height, as appropriate. 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 <a href="#css-view-box"><i>CSS View Box</i></a> must have the
- same aspect ratio.
+ <li>CSS asks the object to render itself into the CSS View Box. CSS does
+ not define how objects render 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.
- <li>Otherwise, if the object has an an <a
- href="#intrinsic-height"><i>intrinsic height</i></a> or <a
- href="#intrinsic-width"><i>intrinsic width</i></a> (whichever is
- missing from the <a href="#specified-size"><i>specified
- size</i></a>), then the <a href="#css-view-box"><i>CSS View
- Box</i></a> must have that height or width.
+ <li>Unless otherwise specified by CSS, the object is then clipped to the
+ CSS View Box.
+ </ol>
- <li>Otherwise, the <a href="#css-view-box"><i>CSS View Box</i></a>
- must have the same width or height (whichever is missing from the
- specified size) as the <a
- href="#default-image-sizing-area"><i>default image sizing
- area</i></a>.
- </ol>
+ <h4 class=no-num id=default-sizing>Default Intrinsic-Size Resolution</h4>
- <li>If the <a href="#specified-size"><i>specified size</i></a> is
- neither a definite width nor height, and has no additional contraints,
- the dimensions of the <a href="#css-view-box"><i>CSS View Box</i></a>
- must be computed as follows:
- <ol>
- <li>If the object has an <a href="#intrinsic-width"><i>intrinsic
- width</i></a> and an <a href="#intrinsic-height"><i>intrinsic
- height</i></a>, the <a href="#css-view-box"><i>CSS View Box</i></a>
- must have that same height and width.
+ <p>In the absence of more specific rules to the contrary, an object's
+ <i>intrinsic size</i> is resolved to a <a href="#css-view-box"><i>CSS
+ View Box</i></a> as follows:
- <li>If the object has only an <a href="#intrinsic-width"><i>intrinsic
- width</i></a> or <a href="#intrinsic-height"><i>intrinsic
- height</i></a>, and no <a
- href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>,
- the <a href="#css-view-box"><i>CSS View Box</i></a> must have that
- width or height, and the height or width (whichever is missing from
- the <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>)
- of the <a href="#default-image-sizing-area"><i>default image sizing
- area</i></a>.
+ <ul>
+ <li>If the <a href="#specified-size"><i>specified size</i></a> is a
+ definite width and height, the <a href="#css-view-box"><i>CSS View
+ Box</i></a> is given that width and height.
- <li>If the object has only an <a
- href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>,
- the <a href="#css-view-box"><i>CSS View Box</i></a> 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 <a
- href="#default-image-sizing-area"><i>default image sizing
- area</i></a>.
+ <li>If the <a href="#specified-size"><i>specified size</i></a> has only a
+ width or height, but not both, then the <a href="#css-view-box"><i>CSS
+ View Box</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 <a href="#css-view-box"><i>CSS View
+ Box</i></a> is given the same aspect ratio.
- <li>Otherwise, the <a href="#css-view-box"><i>CSS View Box</i></a>
- must be the size of the <a
- href="#default-image-sizing-area"><i>default image sizing
- area</i></a>.
- </ol>
+ <li>Otherwise, if the object has the missing dimension as an
+ <i>intrinsic size</i>, then the missing dimension of the <a
+ href="#css-view-box"><i>CSS View Box</i></a> is taken from the
+ object's intrinsic size.
- <li>If the <a href="#specified-size"><i>specified size</i></a> has
- additional constraints, the <a href="#css-view-box"><i>CSS View
- Box</i></a> must be sized to satisfy those constraints. (For example,
- ‘<code class=css>object-fit: contain</code>’ specifies
- slightly more complex handling for sizing replaced elements, and
- ‘<code class=css>background-repeat: round</code>’ can
- adjust the size specified in ‘<code
- class=property>background-size</code>’ so that the image fits an
- even number of times into the background positioning area.)
+ <li>Otherwise, the missing dimension of the <a
+ href="#css-view-box"><i>CSS View Box</i></a> is taken from the <a
+ href="#default-object-size"><i>default object size</i></a>.
</ol>
- </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 render 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>
+ <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="#css-view-box"><i>CSS View Box</i></a> is
+ calculated as follows:
+ <ol>
+ <li>If the object has both an <a href="#intrinsic-width"><i>intrinsic
+ width</i></a> and an <a href="#intrinsic-height"><i>intrinsic
+ height</i></a>, the <a href="#css-view-box"><i>CSS View Box</i></a> is
+ given that same height and width.
+
+ <li>If the object has only an <a href="#intrinsic-width"><i>intrinsic
+ width</i></a> or <a href="#intrinsic-height"><i>intrinsic
+ height</i></a>, and no <a href="#intrinsic-aspect-ratio"><i>intrinsic
+ aspect ratio</i></a>, the <a href="#css-view-box"><i>CSS View
+ Box</i></a> is given that width or height, and missing dimension is
+ taken from the <a href="#default-object-size"><i>default object
+ size</i></a>.
+
+ <li>If the object has only an <a
+ href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, the
+ <a href="#css-view-box"><i>CSS View Box</i></a> 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 <a
+ href="#default-object-size"><i>default object size</i></a>.
+
+ <li>Otherwise, the <a href="#css-view-box"><i>CSS View Box</i></a> is
+ given the size of the <a href="#default-object-size"><i>default object
+ size</i></a>.
+ </ol>
+ </ul>
+
+ <p>If the <a href="#specified-size"><i>specified size</i></a> has
+ additional constraints, the <a href="#css-view-box"><i>CSS View
+ Box</i></a> must be sized to satisfy those constraints. For example, the
+ ‘<code class=property>min-width</code>’, ‘<code
+ class=property>min-height</code>’, ‘<code
+ class=property>max-width</code>’, and ‘<code
+ class=property>max-height</code>’ properties specify slightly more
+ complex handling for sizing replaced elements, and ‘<code
+ class=css>background-repeat: round</code>’ can further adjust the
+ size calculated by ‘<code
+ class=property>background-size</code>’ so that the image fits a
+ whole number of times into the background positioning area.
<div>
<h3 id=image-resolution><span class=secno>6.1. </span>Overriding Image
@@ -2270,6 +2294,16 @@
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
<!---->
+ <dt id=CSS21>[CSS21]
+
+ <dd>Bert Bos; et al. <a
+ href="http://www.w3.org/TR/2009/CR-CSS2-20090908"><cite>Cascading Style
+ 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=CSS3BG>[CSS3BG]
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.66
retrieving revision 1.67
diff -u -d -r1.66 -r1.67
--- Overview.src.html 9 Feb 2011 10:29:57 -0000 1.66
+++ Overview.src.html 9 Feb 2011 18:06:06 -0000 1.67
@@ -796,10 +796,12 @@
CSS-specific formats (such as the linear-gradient() value type defined in this
specification). As well, a document may contain 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
+ <dfn>objects</dfn> hereafter) may offer many types of sizing information to CSS, or none
at all. This section defines generically the size negotiation model between
the object and the CSS layout algorithms.</p>
+ <h4 id="sizing-terms" class="no-num">Object-Sizing Terminology</h4>
+
<p>In order to define this handling, we define a few terms, to make it
easier to refer to various concepts:</p>
@@ -820,7 +822,7 @@
<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
- <i>default image sizing area</i> is used. <span class="issue">This is pretty
+ <i>default object size</i> is used. <span class="issue">This is pretty
arbitrary.</span></p>
</dd>
@@ -832,39 +834,48 @@
<dt><dfn>CSS View Box</dfn></dt>
<dd>The CSS View Box is the result of transforming the <i>intrinsic dimensions</i>
into a concrete size, based on the specified size and the
- <i>default image sizing area</i>. A CSS View Box always has a definite height
+ <i>default object size</i>. A CSS View Box always has a definite height
and width.</dd>
- <dt><dfn>default image sizing area</dfn></dt>
- <dd>The default image sizing area is a rectangle with a definite height and
+ <dt><dfn>default object size</dfn></dt>
+ <dd>The default object size is a rectangle with a definite height and
width used to determine the size of the CSS View Box when both the
<i>intrinsic dimensions</i> and <i>specified size</i> are missing dimensions.
- It varies based on the property that the image is being used as a value in:
+ It varies based on the context in which that the image is being laid out.
+
+ <div class="example">
+ <p>Below are some examples of default object sizing areas:
<dl>
<dt>'background-image'</dt>
- <dd>The <i>default image sizing area</i> is the size of the background
- positioning area of the element.</dd>
-
+ <dd>The <i>default object size</i> is the size of the element's
+ <a href="http://www.w3.org/TR/css3-background/#background-positioning-area">background
+ positioning area</a>. [[CSS3BG]]</dd>
+<!-- list style images prioritize a default ratio of 1:1 over the 1em size
<dt>'list-style-image'</dt>
- <dd>The <i>default image sizing area</i> is a 1em square.</dd>
-
+ <dd>The <i>default object size</i> is a 1em square. [[CSS21]]</dd>
+-->
<dt>'border-image'</dt>
- <dd>The <i>default image sizing area</i> is the size of the element's
- <a href="http://dev.w3.org/csswg/css3-background/#border-image-area"><i>border image area</i></a>.</dd>
+ <dd>The <i>default object size</i> is the size of the element's
+ <a href="http://www.w3.org/TR/css3-background/#border-image-area">border image area</a>.
+ [[CSS3BG]]</dd>
<dt>'cursor'</dt>
- <dd>The <i>default image sizing area</i> is a UA-defined size that should
- be based on the size of a typical cursor on the UA's operating system.</dd>
+ <dd>The <i>default object size</i> is a UA-defined size that should
+ be based on the size of a typical cursor on the UA's operating system.
+ [[CSS21]]</dd>
- <dt>Anything else</dt>
- <dd>The <i>default image sizing area</i> is a rectangle 300px wide and 150px
- tall.</dd>
+ <dt>replaced elements</dt>
+ <dd>The <i>default object size</i> is a rectangle 300px wide and 150px
+ tall. [[CSS21]]</dd>
</dl>
+ </div>
</dd>
</dl>
+
+ <h4 id="object-negotiation" class="no-num">CSS⇋Object Negotiation</h4>
- <p>Images and objects in CSS are sized as follows:</p>
+ <p>Objects in CSS are sized and rendered as follows:</p>
<ol>
<li>When an image or object is specified in a document, such as through url()
@@ -872,72 +883,78 @@
CSS queries the object for its <i>intrinsic dimensions</i>.</li>
<li>Using the <i>intrinsic dimensions</i> and the <i>specified size</i>,
- CSS then computes a <i>CSS View Box</i> that defines the size of the region the
- object will render in, as follows:
+ CSS then computes a <i>CSS View Box</i> that defines the size and position
+ of the region the object will render in.</li>
- <ol>
- <li>If the <i>specified size</i> is just a definite width and height, the
- <i>CSS View Box</i> must be that width and height.</li>
- <li>If the <i>specified size</i> is just a definite width or just a definite
- height, then the <i>CSS View Box</i> must have the same width or height, as
- appropriate. The other dimension is calculated as follows:
+ <li>CSS asks the object to render itself into the CSS View Box. CSS does
+ not define how objects render 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.</li>
- <ol>
- <li>If the object has an <i>intrinsic aspect ratio</i>, the <i>CSS View Box</i>
- must have the same aspect ratio.</li>
+ <li>Unless otherwise specified by CSS, the object is then clipped to the
+ CSS View Box.
+ </ol>
- <li>Otherwise, if the object has an an <i>intrinsic height</i> or
- <i>intrinsic width</i> (whichever is missing from the <i>specified size</i>),
- then the <i>CSS View Box</i> must have that height or width.</li>
+ <h4 id="default-sizing" class="no-num">Default Intrinsic-Size Resolution</h4>
+
+ <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:
- <li>Otherwise, the <i>CSS View Box</i> must have the same width or
- height (whichever is missing from the specified size) as the
- <i>default image sizing area</i>.</li>
- </ol>
- </li>
+ <ul>
+ <li>If the <i>specified size</i> is a definite width and height, the
+ <i>CSS View Box</i> is given that width and height.</li>
- <li>If the <i>specified size</i> is neither a definite width nor height, and
- has no additional contraints, the dimensions of the <i>CSS View Box</i> must
- be computed as follows:
+ <li>If the <i>specified size</i> has only a width or height, but not both,
+ then the <i>CSS View Box</i> is given that specified width or height.
+ The other dimension is calculated as follows:
- <ol>
- <li>If the object has an <i>intrinsic width</i> and an <i>intrinsic height</i>,
- the <i>CSS View Box</i> must have that same height and width.</li>
+ <ol>
+ <li>If the object has an <i>intrinsic aspect ratio</i>, the
+ <i>CSS View Box</i> is given the same aspect ratio.</li>
- <li>If the object has only an <i>intrinsic width</i> or <i>intrinsic height</i>,
- and no <i>intrinsic aspect ratio</i>, the <i>CSS View Box</i> must have that
- width or height, and the height or width (whichever is missing
- from the <i>intrinsic dimensions</i>) of the <i>default image sizing area</i>.</li>
+ <li>Otherwise, if the object has the missing dimension as an
+ <i>intrinsic size</i>, then the missing dimension of the
+ <i>CSS View Box</i> is taken from the object's intrinsic size.</li>
- <li>If the object has only an <i>intrinsic aspect ratio</i>, the
- <i>CSS View Box</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 image sizing area</i>.</li>
+ <li>Otherwise, the missing dimension of the <i>CSS View Box</i>
+ is taken from the <i>default object size</i>.</li>
+ </ol>
+ </li>
- <li>Otherwise, the <i>CSS View Box</i> must be the size of the
- <i>default image sizing area</i>.</li>
- </ol>
- </li>
+ <li>If the <i>specified size</i> has neither a definite width nor height, and
+ has no additional contraints, the dimensions of the <i>CSS View Box</i> is
+ calculated as follows:
- <li>If the <i>specified size</i> has additional constraints, the
- <i>CSS View Box</i> 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.)</li>
+ <ol>
+ <li>If the object has both an <i>intrinsic width</i> and an
+ <i>intrinsic height</i>, the <i>CSS View Box</i> is given that
+ same height and width.</li>
+
+ <li>If the object has only an <i>intrinsic width</i> or
+ <i>intrinsic height</i>, and no <i>intrinsic aspect ratio</i>,
+ the <i>CSS View Box</i> is given that width or height, and
+ missing dimension is taken from the <i>default object size</i>.</li>
+
+ <li>If the object has only an <i>intrinsic aspect ratio</i>, the
+ <i>CSS View Box</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>.</li>
+
+ <li>Otherwise, the <i>CSS View Box</i> is given the size of the
+ <i>default object size</i>.</li>
</ol>
</li>
- </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 render 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>
+ </ul>
+ <p>If the <i>specified size</i> has additional constraints, the
+ <i>CSS View Box</i> must be sized to satisfy those constraints.
+ For example, the 'min-width', 'min-height', 'max-width', and 'max-height'
+ properties specify slightly more complex handling for sizing replaced
+ elements, and ''background-repeat: round'' can further adjust
+ the size calculated by 'background-size' so that the image fits a whole
+ number of times into the background positioning area.
<div>
<h3 id="image-resolution">Overriding Image Resolutions: the 'image-resolution' property</h3>
Received on Wednesday, 9 February 2011 18:06:11 UTC