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

csswg/css3-images Overview.html,1.203,1.204 Overview.src.html,1.211,1.212

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 11 Nov 2011 00:37:38 +0000
To: public-css-commits@w3.org
Message-Id: <E1ROf7i-000143-Le@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv4059

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Added an example of using element() on things that aren't rendered.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.203
retrieving revision 1.204
diff -u -d -r1.203 -r1.204
--- Overview.html	11 Nov 2011 00:13:42 -0000	1.203
+++ Overview.html	11 Nov 2011 00:37:36 -0000	1.204
@@ -580,9 +580,51 @@
     href="#paint-source"><i title=paint-source>provides a paint
     source</i></a>
 
-   <dd>The function represents an image with the dimensions and appearance of
-    the <a href="#paint-source"><i title=paint-source>paint source</i></a>.
-    The host language defines the dimensions and appearance of paint sources.
+   <dd>
+    <p>The function represents an image with the dimensions and appearance of
+     the <a href="#paint-source"><i title=paint-source>paint source</i></a>.
+     The host language defines the dimensions and appearance of paint
+     sources.
+
+    <div class=example>
+     <p>For example, the &lsquo;<code class=css>element()</code>&rsquo;
+      function can reference an SVG &lt;pattern> element in an HTML document:</p>
+
+     <pre>
+&lt;!DOCTYPE html>
+&lt;svg>
+	&lt;defs>
+		&lt;pattern id='pattern1'>
+			&lt;path d='...'>
+		&lt;/pattern>
+	&lt;/defs>
+&lt;/svg>
+&lt;p style="background: element(#pattern1)">
+	I'm using the pattern as a background!
+	If the pattern is changed or animated, 
+	my background will be updated too!
+&lt;/p></pre>
+
+     <p>HTML also defines that a handful of elements, such as &lt;canvas>,
+      &lt;img>, and &lt;video>, provide a paint source. This means that CSS
+      can, for example, reference a canvas that's being drawn into, but not
+      included in the page:</p>
+
+     <pre>
+&lt;!DOCTYPE html>
+&lt;script>
+	var canvas = document.createElement('canvas');
+	canvas.width = 20; canvas.height = 20;
+	document.CSSElementMap.foo = canvas;
+	drawAnimation(canvas);
+&lt;/script>
+&lt;ul style="list-style-image: element(foo);">
+	&lt;li>I'm using the canvas as a bullet!&lt;/li>
+	&lt;li>So am I!&lt;/li>
+	&lt;li>As the canvas is changed over time with Javascript,
+	    we'll all update our bullet image with it!&lt;/li>
+&lt;/ul></pre>
+    </div>
 
    <dt>The function references an element that is not rendered
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.211
retrieving revision 1.212
diff -u -d -r1.211 -r1.212
--- Overview.src.html	11 Nov 2011 00:13:42 -0000	1.211
+++ Overview.src.html	11 Nov 2011 00:37:36 -0000	1.212
@@ -276,7 +276,45 @@
 		<dd>The function represents a solid-color transparent-black image with no intrinsic dimensions.</dd>
 
 		<dt>The function references an element that is not rendered, but which <i title=paint-source>provides a paint source</i></dt>
-		<dd>The function represents an image with the dimensions and appearance of the <i title=paint-source>paint source</i>.  The host language defines the dimensions and appearance of paint sources.</dd>
+		<dd>
+			<p>The function represents an image with the dimensions and appearance of the <i title=paint-source>paint source</i>.  The host language defines the dimensions and appearance of paint sources.
+
+			<div class='example'>
+				<p>For example, the ''element()'' function can reference an SVG &lt;pattern> element in an HTML document:</p>
+
+				<pre>
+&lt;!DOCTYPE html>
+&lt;svg>
+	&lt;defs>
+		&lt;pattern id='pattern1'>
+			&lt;path d='...'>
+		&lt;/pattern>
+	&lt;/defs>
+&lt;/svg>
+&lt;p style="background: element(#pattern1)">
+	I'm using the pattern as a background!
+	If the pattern is changed or animated, 
+	my background will be updated too!
+&lt;/p></pre>
+
+				<p>HTML also defines that a handful of elements, such as &lt;canvas>, &lt;img>, and &lt;video>, provide a paint source.  This means that CSS can, for example, reference a canvas that's being drawn into, but not included in the page:</p>
+
+				<pre>
+&lt;!DOCTYPE html>
+&lt;script>
+	var canvas = document.createElement('canvas');
+	canvas.width = 20; canvas.height = 20;
+	document.CSSElementMap.foo = canvas;
+	drawAnimation(canvas);
+&lt;/script>
+&lt;ul style="list-style-image: element(foo);">
+	&lt;li>I'm using the canvas as a bullet!&lt;/li>
+	&lt;li>So am I!&lt;/li>
+	&lt;li>As the canvas is changed over time with Javascript,
+	    we'll all update our bullet image with it!&lt;/li>
+&lt;/ul></pre>
+			</div>
+		</dd>
 
 		<dt>The function references an element that is not rendered</dt>
 		<dt>The function references an element that is a descendant of a replaced element</dt>
Received on Friday, 11 November 2011 00:37:41 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 11 November 2011 00:37:41 GMT