csswg/css3-images sprites.svg,NONE,1.1 Overview.html,1.99,1.100 Overview.src.html,1.103,1.104

Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv7326

Modified Files:
	Overview.html Overview.src.html 
Added Files:
	sprites.svg 
Log Message:
Changed the spriting example to use an actual image.


--- NEW FILE: sprites.svg ---
<svg xmlns="http://www.w3.org/2000/svg" fill="#333" width="180" height="20">
	<g transform="translate(0,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
	</g>
	<g transform="translate(20,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
		<path d="M 10 0 A 10,10 0 0,1 17,3 L 10,10 z"/>
	</g>
	<g transform="translate(40,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
		<path d="M 10 0 A 10,10 0 0,1 20,10 L 10,10 z"/>
	</g>
	<g transform="translate(60,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
		<path d="M 10 0 A 10,10 0 0,1 17,17 L 10,10 z"/>
	</g>
	<g transform="translate(80,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
		<path d="M 10 0 A 10,10 0 0,1 10,20 L 10,10 z"/>
	</g>
	<g transform="translate(100,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
		<path d="M 10 0 A 10,10 0 1,1 3,17 L 10,10 z"/>
	</g>
	<g transform="translate(120,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
		<path d="M 10 0 A 10,10 0 1,1 0,10 L 10,10 z"/>
	</g>
	<g transform="translate(140,0)">
		<circle cy="10" cx="10" r="10" fill-opacity=".1"/>
		<path d="M 10 0 A 10,10 0 1,1 3,3 L 10,10 z"/>
	</g>
	<g transform="translate(160,0)">
		<circle class="f" cx="10" cy="10" r="10"/>
	</g>
</svg>
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.99
retrieving revision 1.100
diff -u -d -r1.99 -r1.100
--- Overview.html	23 May 2011 19:51:35 -0000	1.99
+++ Overview.html	23 May 2011 22:14:03 -0000	1.100
@@ -414,13 +414,17 @@
    rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
 
   <div class=example>
-   <p>For example,</p>
+   <p>For example, given the following image* and CSS:</p>
+   <a href=sprites.svg> <img alt="[9 circles, with 0 to 8 eighths filled in]"
+   height=20 src=sprites.svg width=180> </a>
+   <pre>background-image: url('sprites.svg#xywh=40,0,20,20')</pre>
 
-   <pre>background-image: url('sprites.png#xywh=10,30,60,20')</pre>
+   <p>...the background of the element will be the portion of the image that
+    starts at (40px,0px) and is 20px wide and tall, which is just the circle
+    with a quarter filled in.</p>
 
-   <p>uses the 60 pixel by 20 pixel rectangle of <code>sprites.png</code>
-    beginning at the point 10 pixels in from the left, 30 pixels down from
-    the top.
+   <p><small>* SVG-in-&lt;img> support required. Click the picture to view
+    the SVG directly.</small></p>
   </div>
 
   <p class=note>Note however that a UA that doesn't understand the media
@@ -435,7 +439,7 @@
    <p>In the example below, the &lsquo;<code class=css>image()</code>&rsquo;
     notation is used together with the media fragment syntax, so that UAs
     that don't support media fragments fail to parse the second declaration
-    and use the first.
+    and use the first.</p>
 
    <pre>
 <!-- -->background-image: url('swirl.png'); /* old UAs */

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.103
retrieving revision 1.104
diff -u -d -r1.103 -r1.104
--- Overview.src.html	23 May 2011 19:51:35 -0000	1.103
+++ Overview.src.html	23 May 2011 22:14:03 -0000	1.104
@@ -208,12 +208,18 @@
 	[[!MEDIA-FRAGS]]
 
 	<div class="example">
-		<p>For example,</p>
+		<p>For example, given the following image* and CSS:</p>
 
-		<pre>background-image: url('sprites.png#xywh=10,30,60,20')</pre>
+		<a href="sprites.svg">
+			<img src="sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]">
+		</a>
 
-		<p>uses the 60 pixel by 20 pixel rectangle of <code>sprites.png</code> beginning
-		at the point 10 pixels in from the left, 30 pixels down from the top.
+		<pre>background-image: url('sprites.svg#xywh=40,0,20,20')</pre>
+
+		<p>...the background of the element will be the portion of the image that starts at (40px,0px)
+		and is 20px wide and tall, which is just the circle with a quarter filled in.</p>
+
+		<p><small>* SVG-in-&lt;img> support required.  Click the picture to view the SVG directly.</small></p>
 	</div>
 	
 	<p class="note">Note however that a UA that doesn't understand the media
@@ -226,11 +232,11 @@
 	<div class="example">
 		<p>In the example below, the ''image()'' notation is used together with
 		the media fragment syntax, so that UAs that don't support media fragments
-		fail to parse the second declaration and use the first.
+		fail to parse the second declaration and use the first.</p>
+
 		<pre>
 <!-- -->background-image: url('swirl.png'); /* old UAs */
 <!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
-		</div>
 	</div>
 
 <!-- ====================================================================== -->

Received on Monday, 23 May 2011 22:14:07 UTC