- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 05 Aug 2011 19:21:26 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv29421
Modified Files:
Overview.html Overview.src.html
Log Message:
Half-done with entering element() changes.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.129
retrieving revision 1.130
diff -u -d -r1.129 -r1.130
--- Overview.html 4 Aug 2011 21:22:41 -0000 1.129
+++ Overview.html 5 Aug 2011 19:21:23 -0000 1.130
@@ -9,6 +9,10 @@
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
+ <style>
+ p { text-indent: 0 !important; margin: 1em 0 !important; }
+ </style>
+
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
@@ -16,10 +20,19 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 August 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 August 2011</h2>
+<<<<<<< Overview.html
+ <dl>
+ <dt>This version:
+
+ <dd><a
+ href="http://www.w3.org/TR/2011/ED-css3-images-20110805/">http://www.w3.org/TR/2011/ED-css3-images-20110805/</a>
+
+=======
<dl><!--<dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110804/">http://www.w3.org/TR/2011/ED-css3-images-20110804/</a>-->
+>>>>>>> 1.129
<dt>Latest version:
@@ -407,14 +420,12 @@
Images: the ‘<code class=css>element()</code>’ notation</h3>
<p>The ‘<code class=css>element()</code>’ function allows an
- author to reference an element in the document that should be used as an
- image. As the referenced element changes, for example, by the user typing
- into a <textarea> element or a script drawing into a <canvas>
- element in HTML, the image produced by the ‘<code
- class=css>element()</code>’ function stays in sync, allowing dynamic
- effects such as script-animated background images or previews of the next
- slide in a slideshow. The syntax for ‘<code
- class=css>element()</code>’ is defined as:
+ author to use an element in the document as an image. As the referenced
+ element changes appearance, the image changes as well. This can be used,
+ for example, to create live previews of the next/previous slide in a
+ slideshow, or to reference a canvas element for a fancy generated gradient
+ or even an animated background. The syntax for ‘<code
+ class=css>element()</code>’ is:
<pre
class=prod><dfn id=ltelement-reference><element-reference></dfn> = element( [<id-selector> | <identifier> ] )</pre>
@@ -431,34 +442,42 @@
identifier</dfn> is the given identifier. (CSS does not define how an
element acquires a <a href="#css-element-reference-identifier"><i>CSS
element reference identifier</i></a>; that is determined by the host
- language.) If no element in the document matches the selector, or no
- element has the identifier as its <a
- href="#css-element-reference-identifier"><i>CSS element reference
- identifier</i></a>, the function represents a fully transparent image with
- no intrinsic dimensions, equivalent to <code>image(transparent)</code>. If
- the document changes so that which element is matched, or whether an
- element is matched at all, changes, the image represented by the function
- must change accordingly.
+ language.)
- <p>If the ‘<code class=css>element()</code>’ function refers to
- an element, then it represents an image with width and height equal to the
- width and height of the margin box of the referenced element. The image
- must be constructed by rendering the referenced element and its
- descendants at the same size that the element would be in its document,
- over an infinite transparent black background, positioned so that the
- edges of the margin box of the element is flush with the edges of the
- image. <span class=note>If the element has decorations or descendants that
- extend outside the margin box, these will be clipped to the margin box in
- the generated image by default. ‘<code
- class=css>background-repeat:extend</code>’ may allow the author to
- override this behavior so that decorations and descendants outside the
- margin box are still painted.</span> If the referenced element or an
- ancestor of the referenced element has a transform applied to it, the
- transform must be ignored for the purpose of constructing this image
- (transforms on descendants must be unaffected).
+ <p>If the ‘<code class=css>element()</code>’ function doesn't
+ reference an element, or it references an element that does not have a
+ rendering (such as an element with display:none, or a <link> element in
+ HTML), or the rendering is not defined within CSS (such as child elements
+ of replaced elements, like the <option> element within the <select>
+ element in HTML), it must represent a solid transparent-black image with
+ no intrinsic dimensions, exactly identical to <code
+ class=css>image(transparent)</code>.
- <p>If the argument passed to ‘<code class=css>element()</code>’
- isn't an ID selector or an ident, it is a syntax error.
+ <p>Otherwise, it represents an image with width and height equal to the
+ bounding box of the referenced element. The image must be constructed by
+ rendering the referenced element and its descendants at the same size that
+ the element would be in its document, over an infinite transparent black
+ background, positioned so that the edges of the referenced element's
+ bounding box is flush with the edges of the image. <span
+ class=note>Because images clip anything outside their bounds by default,
+ this means that decorations that extend outside the bounding box, like
+ box-shadows or some border-images, may be clipped.</span>
+
+ <p>If the referenced element has a transform applied to it or an ancestor,
+ the transform must be ignored when rendering the element as an image. If
+ the referenced element is broken across pages, the element must be
+ displayed as if the pages were joined flush in the pagination direction
+ (elements broken across lines or columns just render with their bounding
+ box, as normal, which may have strange effects).
+
+ <p>Host languages may allow certain elements to be referenced that have a
+ "natural" notion of what it means to be rendered, even if the element is
+ not currently being rendered. For example, an HTML <canvas> element may
+ be created from script and assigned to the <code>CSSElementMap</code>,
+ then referenced from the ‘<code class=css>element()</code>’
+ function without being appended to the document. In this instance, the
+ ‘<code class=css>element()</code>’ function must represent an
+ image with a width, height, and appearance defined by the host language.
<p>Implementations may either re-use existing bitmap data generated for the
referenced element or regenerate the display of the element to maximize
@@ -469,6 +488,8 @@
referenced element, modulo rasterization quality.
<div class=example> TODO: copy an example from the MozHacks article</div>
+<<<<<<< Overview.html
+=======
<p class=issue>For transforms, transforms <strong>on the element</strong>
don't affect the geometry/size of the image (as normal), but do affect the
@@ -520,6 +541,7 @@
-moz-element(%23foo)%3B }%0A%23option1%3Achecked ~ div { background%3A
-moz-element(%23bar)%3B }%0A%23option2%3Achecked ~ div { background%3A
-moz-element(%23baz)%3B }%0A<%2Fstyle>">demo</a>).)</p>
+>>>>>>> 1.129
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id=element-cycles> Detecting and Resolving
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.136
retrieving revision 1.137
diff -u -d -r1.136 -r1.137
--- Overview.src.html 4 Aug 2011 21:22:41 -0000 1.136
+++ Overview.src.html 5 Aug 2011 19:21:23 -0000 1.137
@@ -5,6 +5,9 @@
<title>CSS Image Values and Replaced Content Module Level 3</title>
<link rel="stylesheet" type="text/css" href="http://dev.w3.org/csswg/default.css">
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
+ <style>
+ p { text-indent: 0 !important; margin: 1em 0 !important; }
+ </style>
</head>
<body>
@@ -244,48 +247,21 @@
<h3 id='element-reference'>
Using Elements as Images: the ''element()'' notation</h3>
- <p>The ''element()'' function allows an author to reference an element in
- the document that should be used as an image. As the referenced element
- changes, for example, by the user typing into a <textarea> element or
- a script drawing into a <canvas> element in HTML, the image produced by
- the ''element()'' function stays in sync, allowing dynamic effects such as
- script-animated background images or previews of the next slide in a slideshow.
- The syntax for ''element()'' is defined as:</p>
+ <p>The ''element()'' function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background. The syntax for ''element()'' is:</p>
<pre class=prod><dfn><element-reference></dfn> = element( [<id-selector> | <identifier> ] )</pre>
- <p>where <id-selector> is an ID selector [[!SELECT]], and <identifier>
- is an identifer [[!CSS3VAL]].</p>
+ <p>where <id-selector> is an ID selector [[!SELECT]], and <identifier> is an identifer [[!CSS3VAL]].</p>
- <p>If the argument to the ''element()'' function is an ID selector, the
- function references the element matched by the selector. If it's an identifier,
- the function references the element whose <dfn>CSS element reference identifier</dfn>
- is the given identifier. (CSS does not define how an element acquires a
- <i>CSS element reference identifier</i>; that is determined by the host language.)
- If no element in the document matches the selector, or no element has the
- identifier as its <i>CSS element reference identifier</i>, the function
- represents a fully transparent image with no intrinsic dimensions, equivalent
- to <code>image(transparent)</code>. If the document changes so that which
- element is matched, or whether an element is matched at all, changes, the
- image represented by the function must change accordingly.</p>
+ <p>If the argument to the ''element()'' function is an ID selector, the function references the element matched by the selector. If it's an identifier, the function references the element whose <dfn>CSS element reference identifier</dfn> is the given identifier. (CSS does not define how an element acquires a <i>CSS element reference identifier</i>; that is determined by the host language.)</p>
- <p>If the ''element()'' function refers to an element, then it represents
- an image with width and height equal to the width and height of the margin
- box of the referenced element. The image must be constructed by rendering
- the referenced element and its descendants at the same size that the element
- would be in its document, over an infinite transparent black background,
- positioned so that the edges of the margin box of the element is flush with
- the edges of the image. <span class=note>If the element has decorations
- or descendants that extend outside the margin box, these will be clipped
- to the margin box in the generated image by default. ''background-repeat:extend''
- may allow the author to override this behavior so that decorations and
- descendants outside the margin box are still painted.</span> If the
- referenced element or an ancestor of the referenced element has a transform
- applied to it, the transform must be ignored for the purpose of constructing
- this image (transforms on descendants must be unaffected).</p>
+ <p>If the ''element()'' function doesn't reference an element, or it references an element that does not have a rendering (such as an element with display:none, or a <link> element in HTML), or the rendering is not defined within CSS (such as child elements of replaced elements, like the <option> element within the <select> element in HTML), it must represent a solid transparent-black image with no intrinsic dimensions, exactly identical to <code class=css>image(transparent)</code>.</p>
- <p>If the argument passed to ''element()'' isn't an ID selector or an ident,
- it is a syntax error.</p>
+ <p>Otherwise, it represents an image with width and height equal to the bounding box of the referenced element. The image must be constructed by rendering the referenced element and its descendants at the same size that the element would be in its document, over an infinite transparent black background, positioned so that the edges of the referenced element's bounding box is flush with the edges of the image. <span class=note>Because images clip anything outside their bounds by default, this means that decorations that extend outside the bounding box, like box-shadows or some border-images, may be clipped.</span></p>
+
+ <p>If the referenced element has a transform applied to it or an ancestor, the transform must be ignored when rendering the element as an image. If the referenced element is broken across pages, the element must be displayed as if the pages were joined flush in the pagination direction (elements broken across lines or columns just render with their bounding box, as normal, which may have strange effects).</p>
+
+ <p>Host languages may allow certain elements to be referenced that have a "natural" notion of what it means to be rendered, even if the element is not currently being rendered. For example, an HTML <canvas> element may be created from script and assigned to the <code>CSSElementMap</code>, then referenced from the ''element()'' function without being appended to the document. In this instance, the ''element()'' function must represent an image with a width, height, and appearance defined by the host language.</p>
<p>Implementations may either re-use existing bitmap data generated for the
referenced element or regenerate the display of the element to maximize quality
@@ -299,16 +275,6 @@
TODO: copy an example from the MozHacks article
</div>
- <p class=issue>For transforms, transforms <strong>on the element</strong> don't affect the geometry/size of the image (as normal), but do affect the appearance (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p id%3Dfoo><span id%3Dbar>foofoofoo<br>bar<%2Fspan><%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B width%3A 50px%3B -moz-transform%3Arotate(30deg)%3B}%0Adiv { %0A border%3A thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A background%3A -moz-element(%23foo)%3B%0A}%0A<%2Fstyle>">demo</a>) (this looks kinda weird, but whatever). Transforms on an ancestor are ignored (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p id%3Dfoo><span id%3Dbar>foofoofoo<br>bar<%2Fspan><%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B width%3A 50px%3B -moz-transform%3Arotate(30deg)%3B}%0Adiv { %0A border%3A thick slid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A background%3A -moz-element(%23bar)%3B%0A}%0A<%2Fstyle>">demo</a>).</p>
-
- <p class=issue>For inline elements, the image is sized to the bounding box of the individual pieces, if they're broken across a line (see above demos).</p>
-
- <p class=issue>Elements broken across columns also size themselves according to the bounding box (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p id%3Dfoo>foo foo foo <span id%3Dbar>foo foo<%2Fspan> foo foo foo<%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B width%3A 100px%3B -moz-column-width%3A40px%3B}%0Adiv { %0A border%3A thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A background%3A -moz-element(%23bar)%3B%0A}%0A<%2Fstyle>">demo</a>).</p>
-
- <p class=issue>What happens with elements broken across regions? Pages?</p>
-
- <p class=issue>An <option> element still has a proper renderer (not what's displayed when you're folded up; the display in the tray when it comes out), and thus works fine in element() (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<select id%3Dfoo>%0A <option id%3Dbar>one<%2Foption>%0A <option id%3Dbaz>two<%2Foption>%0A<%2Fselect>%0A<input type%3Dradio name%3Da id%3Dselect><label for%3Dselect>select<%2Flabel>%0A | <input type%3Dradio name%3Da id%3Doption1><label for%3Doption1>option1<%2Flabel>%0A | <input type%3Dradio name%3Da id%3Doption2><label for%3Doption2>option2<%2Flabel>%0A<div><%2Fdiv>%0A<style>%0Adiv { %0A border%3A thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A}%0A%0A%23select%3Achecked ~ div { background%3A -moz-element(%23foo)%3B }%0A%23option1%3Achecked ~ div { background%3A -moz-element(%23bar)%3B }%0A%23option2%3Achecked ~ div { background%3A -moz-element(%23baz)%3B }%0A<%2Fstyle>">demo</a>).)</p>
-
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id='element-cycles'>
Received on Friday, 5 August 2011 19:21:34 UTC