- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 07 Mar 2011 23:28:53 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv29753
Modified Files:
Overview.html Overview.src.html
Log Message:
Rewrote the object-fit section to better hook into the sizing algorithm.
Added a note to object-fit about its effects on SVG sizing.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.74
retrieving revision 1.75
diff -u -d -r1.74 -r1.75
--- Overview.html 23 Feb 2011 16:37:54 -0000 1.74
+++ Overview.html 7 Mar 2011 23:28:51 -0000 1.75
@@ -15,8 +15,7 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 February
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 March 2011</h2>
<dl>
<dt>Latest Version:
@@ -1415,83 +1414,69 @@
contents of a replaced element should be scaled relative to the box
established by its used height and width. It also enables scaling a
replaced element's contents up to a specified maximum size or down to a
- specified minimum size while preserving its aspect ratio.
+ specified minimum size while preserving its aspect ratio. This property
+ never affects the size of the replaced element; it only affects the size
+ of the contents of the replaced element.
<p>Not all replaced elements can be scaled, but images typically can.
- <p>The contents of a replaced element with an intrinsic aspect ratio (which
- may be derived from intrinsic dimensions) are scaled as follows:
+ <p>If the replaced element's content do not have an intrinsic aspect ratio
+ (which may be derived from an intrinsic width and height), all of the
+ values for ‘<a href="#object-fit0"><code
+ class=property>object-fit</code></a>’ are treated as ‘<code
+ class=css>fill</code>’. Otherwise, the contents are scaled as
+ follows:
<dl>
<dt>fill
<dd>
- <p>Determine the used ‘<code class=property>height</code>’
- and ‘<code class=property>width</code>’ <a
- href="/TR/CSS21/visudet.html">as usual</a>. Scale the content height and
- width independently so that the edges of the content just meet the edges
- of the box established by the used ‘<code
- class=property>height</code>’ and ‘<code
- class=property>width</code>’.</p>
+ <p>Set the content's size to the <a
+ href="#concrete-object-size"><i>concrete object size</i></a> obtained by
+ running the <i title=default-sizing>object sizing algorithm</i> with a
+ <a href="#specified-size"><i>specified size</i></a> and a <a
+ href="#default-object-size"><i>default object size</i></a> equal to the
+ replaced element's used width and height.</p>
+
+ <p>This will make the contents exactly fill the replaced element.</p>
<dt>contain
<dd>
- <p>Determine the used ‘<code class=property>height</code>’
- and ‘<code class=property>width</code>’ <a
- href="/TR/CSS21/visudet.html">as usual</a>, except if both ‘<code
- class=property>height</code>’ and ‘<code
- class=property>width</code>’ are ‘<code
- class=css>auto</code>’, and the used value of at least one of
- ‘<code class=property>max-width</code>’ and ‘<code
- class=property>max-height</code>’ is not ‘<code
- class=property>none</code>’, then compute the element's used width
- and used height as though the intrinsic dimensions of the contents were
- infinitely large numbers whose ratio is the actual intrinsic ratio of
- the contents.</p>
-
- <p>Scale the contents of the element, preserving their aspect ratio, to
- the largest size such that the width of the contents is less than or
- equal to the used width of the box and the height of the contents is
- less than or equal to the used height of the box.</p>
+ <p>Set the content's size to the largest width and height that has the
+ same aspect ratio as the content's intrinsic aspect ratio, and
+ additionally has neither width nor height larger than the replaced
+ element's used width and height, respectively.</p>
<dt>cover
<dd>
- <p>Determine the used ‘<code class=property>height</code>’
- and ‘<code class=property>width</code>’ <a
- href="/TR/CSS21/visudet.html">as usual</a>, except if both ‘<code
- class=property>height</code>’ and ‘<code
- class=property>width</code>’ are ‘<code
- class=css>auto</code>’, and the used value of at least one of
- ‘<code class=property>min-width</code>’ and ‘<code
- class=property>min-height</code>’ is not ‘<code
- class=css>0</code>’, then compute the used width and used height
- of the element as though the intrinsic dimensions of the contents were
- infinitesimally small numbers whose ratio is the actual intrinsic ratio
- of the contents.</p>
-
- <p>Scale the contents of the element, preserving their aspect ratio, to
- the smallest size such that the width of the contents is greater than or
- equal to the used width of the box and the height of the contents is
- greater than or equal to the height of the box.</p>
+ <p>Set the content's size to the smallest width and height that has the
+ same aspect ratio as the content's intrinsic aspect ratio, and
+ additionally has neither width nor height smaller than the replaced
+ element's used width and height, respectively.</p>
<dt>none
<dd>
- <p>Determine the used ‘<code class=property>height</code>’
- and ‘<code class=property>width</code>’ <a
- href="/TR/CSS21/visudet.html">as usual</a>. If the content has an
- intrinsic height and width, do not scale it. Otherwise, this value must
- be treated as ‘<code class=css>fill</code>’.</p>
+ <p>Set the content's size to the <a
+ href="#concrete-object-size"><i>concrete object size</i></a> obtained by
+ running the <i title=default-sizing>object sizing algorithm</i> with no
+ <a href="#specified-size"><i>specified size</i></a>, and a <a
+ href="#default-object-size"><i>default object size</i></a> equal to the
+ replaced element's used width and height.</p>
<dt>scale-down <b class=issue>better name?</b>
<dd>
- <p>This value must act identically to ‘<code
- class=css>none</code>’ or ‘<code
- class=css>contain</code>’, whichever would make the contents
- smaller.</p>
+ <p>Size the content as if ‘<code class=property>none</code>’
+ or ‘<code class=property>contain</code>’ were specified,
+ whichever would result in a smaller size.</p>
+
+ <p class=note>Note that both ‘<code
+ class=property>none</code>’ and ‘<code
+ class=property>contain</code>’ respect the content's intrinsic
+ aspect ratio, so the concept of "smaller" is well-defined.</p>
</dl>
<p class=issue>ISSUE: ‘<code class=property>none</code>’ and
@@ -1500,10 +1485,11 @@
is there existing content behavior (perhaps surrounding <object>) that
requires one of these values?
- <p>The ‘<code class=property>overflow</code>’ property
- determines how to render parts of the replaced element's content that
- extend beyond the edges of its box. See the ‘<a
- href="#object-position0"><code
+ <p>If the content does not completely fill the replaced element, the
+ unfilled space shows the replaced element's background. The ‘<code
+ class=property>overflow</code>’ property determines how to render
+ parts of the replaced element's content that extend beyond the edges of
+ its box. See the ‘<a href="#object-position0"><code
class=property>object-position</code></a>’ property for positioning
the object with respect to the element's box.
@@ -1526,6 +1512,16 @@
to the fit attribute in <a href="#SMIL10"
rel=biblioentry>[SMIL10]<!--{{SMIL10}}--></a>.
+ <p class=note>Note: Per the <i title=object-negotiation>CSS⇋Object
+ Negotiation</i> algorithm, the <a href="#concrete-object-size"><i>concrete
+ object size</i></a> (or, in this case, the size of the content) does not
+ directly scale the object itself - it is merely passed to the object as
+ information about the size of the visible canvas. How to then draw into
+ that size is up to the image format. In particular, raster images always
+ scale to the given size, while SVG uses the given size as the size of the
+ "SVG Viewport" (a term defined by SVG) and then uses the values of several
+ attributes on the root <svg> element to determine how to draw itself.
+
<p>User agents MAY accept ‘<code
class=property>image-fit</code>’ as an alias for ‘<a
href="#object-fit0"><code class=property>object-fit</code></a>’, as
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.76
retrieving revision 1.77
diff -u -d -r1.76 -r1.77
--- Overview.src.html 23 Feb 2011 16:37:54 -0000 1.76
+++ Overview.src.html 7 Mar 2011 23:28:51 -0000 1.77
@@ -1060,63 +1060,59 @@
<p>The 'object-fit' property specifies how the contents of a replaced element
should be scaled relative to the box established by its used height and width.
It also enables scaling a replaced element's contents up to a specified maximum
- size or down to a specified minimum size while preserving its aspect ratio.</p>
+ size or down to a specified minimum size while preserving its aspect ratio.
+ This property never affects the size of the replaced element; it only affects
+ the size of the contents of the replaced element.</p>
<p>Not all replaced elements can be scaled, but images typically can.</p>
- <p>The contents of a replaced element with an intrinsic aspect ratio (which may be
- derived from intrinsic dimensions) are scaled as follows:</p>
+ <p>If the replaced element's content do not have an intrinsic aspect ratio
+ (which may be derived from an intrinsic width and height), all of the values
+ for 'object-fit' are treated as ''fill''. Otherwise, the contents are scaled
+ as follows:</p>
<dl>
<dt>fill</dt>
<dd>
- <p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
- usual</a>. Scale the content height and width independently so that the edges
- of the content just meet the edges of the box established by the used 'height'
- and 'width'.</p>
+ <p>Set the content's size to the <i>concrete object size</i> obtained
+ by running the <i title=default-sizing>object sizing algorithm</i> with
+ a <i>specified size</i> and a <i>default object size</i> equal to the
+ replaced element's used width and height.</p>
+
+ <p>This will make the contents exactly fill the replaced element.</p>
</dd>
<dt>contain</dt>
<dd>
- <p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
- usual</a>, except if both 'height' and 'width' are ''auto'', and the used value
- of at least one of 'max-width' and 'max-height' is not 'none', then compute the
- element's used width and used height as though the intrinsic dimensions of the
- contents were infinitely large numbers whose ratio is the actual intrinsic
- ratio of the contents.</p>
- <p>Scale the contents of the element, preserving their aspect ratio, to the
- largest size such that the width of the contents is less than or equal to the
- used width of the box and the height of the contents is less than or equal to
- the used height of the box.</p>
+ <p>Set the content's size to the largest width and height that has the
+ same aspect ratio as the content's intrinsic aspect ratio, and additionally
+ has neither width nor height larger than the replaced element's used
+ width and height, respectively.</p>
</dd>
<dt>cover</dt>
<dd>
- <p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
- usual</a>, except if both 'height' and 'width' are ''auto'', and the used value
- of at least one of 'min-width' and 'min-height' is not ''0'', then compute the
-
-
- used width and used height of the element as though the intrinsic dimensions of
- the contents were infinitesimally small numbers whose ratio is the actual
- intrinsic ratio of the contents.</p>
- <p>Scale the contents of the element, preserving their aspect ratio, to the
- smallest size such that the width of the contents is greater than or equal to
- the used width of the box and the height of the contents is greater than or
- equal to the height of the box.</p>
+ <p>Set the content's size to the smallest width and height that has
+ the same aspect ratio as the content's intrinsic aspect ratio, and
+ additionally has neither width nor height smaller than the replaced
+ element's used width and height, respectively.</p>
</dd>
<dt>none</dt>
<dd>
- <p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
- usual</a>. If the content has an intrinsic height and width, do not
- scale it. Otherwise, this value must be treated as ''fill''.</p>
+ <p>Set the content's size to the <i>concrete object size</i> obtained
+ by running the <i title=default-sizing>object sizing algorithm</i> with
+ no <i>specified size</i>, and a <i>default object size</i> equal to
+ the replaced element's used width and height.</p>
</dd>
<dt>scale-down <b class=issue>better name?</i></dt>
<dd>
- <p>This value must act identically to ''none'' or ''contain'', whichever
- would make the contents smaller.</p>
+ <p>Size the content as if 'none' or 'contain' were specified, whichever
+ would result in a smaller size.</p>
+
+ <p class=note>Note that both 'none' and 'contain' respect the content's
+ intrinsic aspect ratio, so the concept of "smaller" is well-defined.</p>
</dd>
</dl>
@@ -1124,10 +1120,11 @@
discussion on use-cases for each. Particularly, is there existing content behavior
(perhaps surrounding <object>) that requires one of these values?</p>
- <p>The 'overflow' property determines how to render parts of the replaced
- element's content that extend beyond the edges of its box. See the
- 'object-position' property for positioning the object with respect to the
- element's box.</p>
+ <p>If the content does not completely fill the replaced element, the unfilled
+ space shows the replaced element's background. The 'overflow' property determines
+ how to render parts of the replaced element's content that extend beyond the
+ edges of its box. See the 'object-position' property for positioning the object
+ with respect to the element's box.</p>
<div class="figure">
<p><img src="img_scale.png" style="border: thin solid black;"
@@ -1142,6 +1139,15 @@
<p class="note">Note: the 'object-fit' property has similar semantics to
the fit attribute in [[SMIL10]].</p>
+ <p class=note>Note: Per the <i title=object-negotiation>CSS⇋Object Negotiation</i>
+ algorithm, the <i>concrete object size</i> (or, in this case, the size of the
+ content) does not directly scale the object itself - it is merely passed to
+ the object as information about the size of the visible canvas. How to then
+ draw into that size is up to the image format. In particular, raster images
+ always scale to the given size, while SVG uses the given size as the size of
+ the "SVG Viewport" (a term defined by SVG) and then uses the values of several
+ attributes on the root <svg> element to determine how to draw itself.</p>
+
<p>User agents MAY accept 'image-fit' as an alias for 'object-fit', as a
previous version of this specification used that name. Authors must not
use 'image-fit' in their stylesheets.</p>
Received on Monday, 7 March 2011 23:28:55 UTC