- 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
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 ‘<code class=css>element()</code>’
+ function can reference an SVG <pattern> element in an HTML document:</p>
+
+ <pre>
+<!DOCTYPE html>
+<svg>
+ <defs>
+ <pattern id='pattern1'>
+ <path d='...'>
+ </pattern>
+ </defs>
+</svg>
+<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!
+</p></pre>
+
+ <p>HTML also defines that a handful of elements, such as <canvas>,
+ <img>, and <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>
+<!DOCTYPE html>
+<script>
+ var canvas = document.createElement('canvas');
+ canvas.width = 20; canvas.height = 20;
+ document.CSSElementMap.foo = canvas;
+ drawAnimation(canvas);
+</script>
+<ul style="list-style-image: element(foo);">
+ <li>I'm using the canvas as a bullet!</li>
+ <li>So am I!</li>
+ <li>As the canvas is changed over time with Javascript,
+ we'll all update our bullet image with it!</li>
+</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 <pattern> element in an HTML document:</p>
+
+ <pre>
+<!DOCTYPE html>
+<svg>
+ <defs>
+ <pattern id='pattern1'>
+ <path d='...'>
+ </pattern>
+ </defs>
+</svg>
+<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!
+</p></pre>
+
+ <p>HTML also defines that a handful of elements, such as <canvas>, <img>, and <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>
+<!DOCTYPE html>
+<script>
+ var canvas = document.createElement('canvas');
+ canvas.width = 20; canvas.height = 20;
+ document.CSSElementMap.foo = canvas;
+ drawAnimation(canvas);
+</script>
+<ul style="list-style-image: element(foo);">
+ <li>I'm using the canvas as a bullet!</li>
+ <li>So am I!</li>
+ <li>As the canvas is changed over time with Javascript,
+ we'll all update our bullet image with it!</li>
+</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 UTC