- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 08 Aug 2011 18:29:05 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv11302
Modified Files:
Overview.html Overview.src.html
Log Message:
Reworked the element() section further, now properly talking about "paint sources".
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.130
retrieving revision 1.131
diff -u -d -r1.130 -r1.131
--- Overview.html 5 Aug 2011 19:21:23 -0000 1.130
+++ Overview.html 8 Aug 2011 18:29:02 -0000 1.131
@@ -20,19 +20,10 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 August 2011</h2>
-
-<<<<<<< Overview.html
- <dl>
- <dt>This version:
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 August 2011</h2>
- <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
+ <dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110808/">http://www.w3.org/TR/2011/ED-css3-images-20110808/</a>-->
<dt>Latest version:
@@ -444,40 +435,54 @@
element reference identifier</i></a>; that is determined by the host
language.)
- <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>The image represented by the ‘<code
+ class=css>element()</code>’ function can vary based on a number of
+ factors. The function must represent the image described by the first set
+ of conditions, following, that are true:
- <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>
+ <dl>
+ <dt>The function doesn't reference an element
- <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).
+ <dd>The function represents a solid-color transparent-black image with no
+ intrinsic dimensions.
- <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.
+ <dt>The function references an element that is not rendered, but which <a
+ href="#paint-source"><i title=paint-source>represents 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.
+
+ <dt>The function references an element that is not rendered
+
+ <dt>The function references an element that is a descendant of a replaced
+ element
+
+ <dd>The function represents a solid-color transparent-black image with no
+ intrinsic dimensions.
+
+ <dt>Otherwise
+
+ <dd>
+ <p>The function 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 canvas, 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 unintended visual
+ effects).</p>
+ </dl>
<p>Implementations may either re-use existing bitmap data generated for the
referenced element or regenerate the display of the element to maximize
@@ -487,61 +492,17 @@
regeneration process. That is, the image must look identical to the
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
- 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 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 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 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 class=issue>What happens with elements broken across regions? Pages?
+ <div class=example>
+ <p class=issue>TODO: Create examples of all of the above cases.</p>
+ </div>
- <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>
->>>>>>> 1.129
+ <p>Host languages may define that some elements represent a <dfn
+ id=paint-source title=paint-source>paint source</dfn>. Paint sources have
+ an intrinsic width, height, and appearance, separate from the process of
+ rendering, and so may be used as images even when they're not being
+ rendered. Examples of paint sources are the <linearGradient>,
+ <radialGradient>, and <pattern> elements in SVG, or the <img>,
+ <video>, and <canvas> elements in HTML.</p>
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id=element-cycles> Detecting and Resolving
@@ -560,7 +521,7 @@
element B, add an edge to the graph by having A depend on B. If a
dependency cycle is detected, any ‘<code
class=css>element()</code>’ functions that produced a dependency in
- the cycle represent a fully transparent image with no intrinsic
+ the cycle must represent a fully transparent image with no intrinsic
dimensions.
<p class=issue>Someone else needs to review this and make sure that I'm not
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.137
retrieving revision 1.138
diff -u -d -r1.137 -r1.138
--- Overview.src.html 5 Aug 2011 19:21:23 -0000 1.137
+++ Overview.src.html 8 Aug 2011 18:29:02 -0000 1.138
@@ -255,13 +255,26 @@
<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 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>The image represented by the ''element()'' function can vary based on a number of factors. The function must represent the image described by the first set of conditions, following, that are true:</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>
+ <dl>
+ <dt>The function doesn't reference an element</dt>
+ <dd>The function represents a solid-color transparent-black image with no intrinsic dimensions.</dd>
- <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>
+ <dt>The function references an element that is not rendered, but which <i title=paint-source>represents 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>
- <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>
+ <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>
+ <dd>The function represents a solid-color transparent-black image with no intrinsic dimensions.</dd>
+
+ <dt>Otherwise</dt>
+ <dd>
+ <p>The function 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 canvas, 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 unintended visual effects).</p>
+ </dd>
+ </dl>
<p>Implementations may either re-use existing bitmap data generated for the
referenced element or regenerate the display of the element to maximize quality
@@ -272,9 +285,11 @@
quality.</p>
<div class=example>
- TODO: copy an example from the MozHacks article
+ <p class=issue>TODO: Create examples of all of the above cases.</p>
</div>
+ <p>Host languages may define that some elements represent a <dfn title="paint-source">paint source</dfn>. Paint sources have an intrinsic width, height, and appearance, separate from the process of rendering, and so may be used as images even when they're not being rendered. Examples of paint sources are the <linearGradient>, <radialGradient>, and <pattern> elements in SVG, or the <img>, <video>, and <canvas> elements in HTML.</p>
+
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id='element-cycles'>
@@ -289,7 +304,7 @@
on each of its children. Then, whenever a property on an element A uses
the ''element()'' function to refer to an element B, add an edge to the
graph by having A depend on B. If a dependency cycle is detected, any
- ''element()'' functions that produced a dependency in the cycle represent
+ ''element()'' functions that produced a dependency in the cycle must represent
a fully transparent image with no intrinsic dimensions.</p>
<p class=issue>Someone else needs to review this and make sure that I'm
Received on Monday, 8 August 2011 18:29:06 UTC