W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2011

csswg/css3-images Overview.html,1.66,1.67 Overview.src.html,1.68,1.69

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 11 Feb 2011 22:27:36 +0000
To: public-css-commits@w3.org
Message-Id: <E1Po1Si-0002QY-Aq@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv9288

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Rearranged sections, so that sizing stuff has its own section, separate from the image-manipulation properties.


Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.66
retrieving revision 1.67
diff -u -d -r1.66 -r1.67
--- Overview.html	9 Feb 2011 18:06:06 -0000	1.66
+++ Overview.html	11 Feb 2011 22:27:33 -0000	1.67
@@ -12,7 +12,6 @@
   <style>
 	p { margin: .5em 0; }
 	dd > p { text-indent: 0; }
-	a > b { font-weight: normal; color: #800; }
   </style>
 
  <body>
@@ -22,12 +21,12 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
[...3660 lines suppressed...]
-    </ol>
-   </div>
-  </div>
+   <li>Interpolate each component and color-stop of the gradients
+    independently. For linear gradients, the only component is the angle. For
+    radial gradients, the components are the horizontal and vertical position
+    of the center and the horizontal and vertical axis lengths.
+
+   <li>To interpolate a color-stop, first match each color-stop in the start
+    gradient to the corresponding color-stop at the same index in the end
+    gradient. For repeating gradients, the first specified color-stop in the
+    start and end gradients are considered to be at the same index, and all
+    other color-stops following and preceding are indexed appropriately.
+    Then, for each pair of color-stops, interpolate the position and color
+    independently.
+  </ol>
+  <!-- ====================================================================== -->
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.68
retrieving revision 1.69
diff -u -d -r1.68 -r1.69
--- Overview.src.html	9 Feb 2011 21:32:15 -0000	1.68
+++ Overview.src.html	11 Feb 2011 22:27:34 -0000	1.69
@@ -851,8 +851,8 @@
 
 <!-- ====================================================================== -->
 
-<h4 id="sizing-terms" class="no-num">
-Object-Sizing Terminology</h4>
+<h3 id="sizing-terms">
+Object-Sizing Terminology</h3>
 
 	<p>In order to define this handling, we define a few terms, to make it 
 	easier to refer to various concepts:</p>
@@ -930,8 +930,8 @@
 
 <!-- ====================================================================== -->
 
-<h4 id="object-negotiation" class="no-num">
-CSS⇋Object Negotiation</h4>
+<h3 id="object-negotiation">
+CSS⇋Object Negotiation</h3>
 
 	<p>Objects in CSS are sized and rendered as follows:</p>
 
@@ -957,8 +957,8 @@
 
 <!-- ====================================================================== -->
 
-<h4 id="default-sizing" class="no-num">
-Default Intrinsic-Size Resolution</h4>
+<h3 id="default-sizing">
+Default Intrinsic-Size Resolution</h3>
 
 	<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:
@@ -1019,8 +1019,172 @@
 
 <!-- ====================================================================== -->
 
-<h3 id="image-resolution">
-Overriding Image Resolutions: the 'image-resolution' property</h3>
+<h3 id="object-fit">
+Sizing Objects: The 'object-fit' Property</h3>
+
+	<table class="propdef">
+		<tr>
+			<th>Name:
+			<td><dfn>object-fit</dfn>
+		<tr>
+			<th>Value:
+			<td>fill | contain | cover
+		<tr>
+			<th>Initial:
+			<td>fill
+		<tr>
+			<th>Applies to:
+			<td>replaced elements
+		<tr>
+			<th>Inherited:
+			<td>no
+		<tr>
+			<th>Percentages:
+			<td>N/A
+		<tr>
+			<th>Media:
+			<td>visual
+		<tr>
+			<th>Computed value:
+			<td>specified value
+	</table>
+
+	<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>
+
+	<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>
+
+	<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>
+		</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>
+		</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>
+		</dd>
+	<!-- Commented out for WD publication
+		<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>
+		</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>
+		</dd>
+	-->
+	</dl>
+
+	<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>
+
+	<div class="figure">
+	  <p><img src="img_scale.png" style="border: thin solid black;"
+				 alt=""></p>
+	  <p class="caption">
+	  An example showing how each of the four values of 'object-fit' causes the
+	  replaced element (blue figure) to be scaled to fit its height/width box (shown
+	  with a green background), with overflow 'visible' and 'hidden', using the
+	  initial value for 'object-position'.</p>
+	</div>
+
+	<p class="note">Note: the 'object-fit' property has similar semantics to
+	the fit attribute in [[SMIL10]].</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>
+
+<!-- ====================================================================== -->
+
+<h3 id="object-position">
+Positioning Objects: The 'object-position' Property</h3>
+
+	<table class="propdef">
+		<tr>
+			<th>Name:
+			<td><dfn>object-position</dfn>
+		<tr>
+			<th>Value:
+			<td>[ [ &lt;percentage> | &lt;length> | left | center | right ] [ &lt;percentage> | &lt;length> | top | center | bottom ]? ] | [
+			[ left | center | right ] || [ top | center | bottom ] ]
+		<tr>
+			<th>Initial:
+			<td>50% 50%
+		<tr>
+			<th>Applies to:
+			<td>replaced elements
+		<tr>
+			<th>Inherited:
+			<td>no
+		<tr>
+			<th>Percentages:
+			<td>refer to width and height of box itself
+		<tr>
+			<th>Media:
+			<td>visual
+		<tr>
+			<th>Computed value:
+			<td>specified value
+	</table>
+
+	<p>The 'object-position' property determines the alignment of the replaced
+	element inside its box. The values have the same meaning as the values for
+	the <a href="http://w3.org/TR/CSS21/colors.html#propdef-background-position">'background-position'</a>
+	property, using the image as the image and the content box as the positioning
+	area. [[!CSS21]]</p>
+
+	<p class="note">Note that areas of the box not covered by the replaced
+	element will show the element's background.</p>
+
+	<p>User agents MAY accept 'image-position' as an alias for 'object-position', as a
+	previous version of this specification used that name.  Authors must not
+	use 'image-position' in their stylesheets.</p>
+
+<!-- ====================================================================== -->
+
+<h2 id="image-resolution">
+Overriding Image Resolutions: the 'image-resolution' property</h2>
 
 	<p>The <i>image resolution</i> is defined as the number of image
 	pixels per unit length, e.g., pixels per inch. Some image formats can
@@ -1099,8 +1263,8 @@
 
 <!-- ====================================================================== -->
 
-<h3 id="image-orientation">
-Orienting an Image on the Page: the 'image-orientation' property</h3>
+<h2 id="image-orientation">
+Orienting an Image on the Page: the 'image-orientation' property</h2>
 
 	<p>Images from camera phones, digital cameras or scanners may be encoded sideways.
 	For example, the first row of image data may represent the leftmost or
@@ -1175,8 +1339,8 @@
 
 <!-- ====================================================================== -->
 
-<h3 id=image-rendering>
-Determining How to Scale an Image: The 'image-rendering' Property</h3>
+<h2 id=image-rendering>
+Determining How to Scale an Image: The 'image-rendering' Property</h2>
 
 	<table class=propdef>
 		<tr>
@@ -1239,170 +1403,6 @@
 
 <!-- ====================================================================== -->
 
-<h3 id="object-fit">
-Sizing Replaced Elements: The 'object-fit' Property</h3>
-
-	<table class="propdef">
-		<tr>
-			<th>Name:
-			<td><dfn>object-fit</dfn>
-		<tr>
-			<th>Value:
-			<td>fill | contain | cover
-		<tr>
-			<th>Initial:
-			<td>fill
-		<tr>
-			<th>Applies to:
-			<td>replaced elements
-		<tr>
-			<th>Inherited:
-			<td>no
-		<tr>
-			<th>Percentages:
-			<td>N/A
-		<tr>
-			<th>Media:
-			<td>visual
-		<tr>
-			<th>Computed value:
-			<td>specified value
-	</table>
-
-	<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>
-
-	<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>
-
-	<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>
-		</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>
-		</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>
-		</dd>
-	<!-- Commented out for WD publication
-		<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>
-		</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>
-		</dd>
-	-->
-	</dl>
-
-	<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>
-
-	<div class="figure">
-	  <p><img src="img_scale.png" style="border: thin solid black;"
-				 alt=""></p>
-	  <p class="caption">
-	  An example showing how each of the four values of 'object-fit' causes the
-	  replaced element (blue figure) to be scaled to fit its height/width box (shown
-	  with a green background), with overflow 'visible' and 'hidden', using the
-	  initial value for 'object-position'.</p>
-	</div>
-
-	<p class="note">Note: the 'object-fit' property has similar semantics to
-	the fit attribute in [[SMIL10]].</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>
-
-<!-- ====================================================================== -->
-
-<h3 id="object-position">
-Positioning Replaced Images: The 'object-position' Property</h3>
-
-	<table class="propdef">
-		<tr>
-			<th>Name:
-			<td><dfn>object-position</dfn>
-		<tr>
-			<th>Value:
-			<td>[ [ &lt;percentage> | &lt;length> | left | center | right ] [ &lt;percentage> | &lt;length> | top | center | bottom ]? ] | [
-			[ left | center | right ] || [ top | center | bottom ] ]
-		<tr>
-			<th>Initial:
-			<td>50% 50%
-		<tr>
-			<th>Applies to:
-			<td>replaced elements
-		<tr>
-			<th>Inherited:
-			<td>no
-		<tr>
-			<th>Percentages:
-			<td>refer to width and height of box itself
-		<tr>
-			<th>Media:
-			<td>visual
-		<tr>
-			<th>Computed value:
-			<td>specified value
-	</table>
-
-	<p>The 'object-position' property determines the alignment of the replaced
-	element inside its box. The values have the same meaning as the values for
-	the <a href="http://w3.org/TR/CSS21/colors.html#propdef-background-position">'background-position'</a>
-	property, using the image as the image and the content box as the positioning
-	area. [[!CSS21]]</p>
-
-	<p class="note">Note that areas of the box not covered by the replaced
-	element will show the element's background.</p>
-
-	<p>User agents MAY accept 'image-position' as an alias for 'object-position', as a
-	previous version of this specification used that name.  Authors must not
-	use 'image-position' in their stylesheets.</p>
-
-<!-- ====================================================================== -->
-
 <h2 id=serialization>
 Serialization</h2>
 
Received on Friday, 11 February 2011 22:27:38 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:01 UTC