- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 28 Feb 2012 19:16:11 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv24151
Modified Files:
Overview.html Overview.src.html
Log Message:
In element(), create a stricter definition of 'bounding box' and use that to size the image. Also several editorial fixes.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.301
retrieving revision 1.302
diff -u -d -r1.301 -r1.302
--- Overview.html 28 Feb 2012 02:04:02 -0000 1.301
+++ Overview.html 28 Feb 2012 19:16:08 -0000 1.302
@@ -714,17 +714,48 @@
</div>
<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:
+ class=css>element()</code>’ function can vary based on what the
+ function references:
<dl>
- <dt>The function doesn't reference an element
+ <dt>an <a href="#element-not-rendered"><i
+ title=element-not-rendered>element that is rendered</i></a> and is not a
+ descendant of a replaced element
- <dd>The function represents an <a href="#invalid-image"><i>invalid
- image</i></a>.
+ <dd>
+ <p>The function represents an image with width and height equal to the <a
+ href="#bounding-box"><i>bounding box</i></a> 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 border box is flush with the edges
+ of the image. <span class=note>Note: Because images clip anything
+ outside their bounds by default, this means that decorations that extend
+ outside the border box, like box-shadows or some border-images, may be
+ clipped.</span></p>
- <dt>The function references an <a href="#element-not-rendered"><i
+ <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 page content areas were joined flush in the
+ pagination direction (elements broken across lines or columns just
+ render with their border box, as normal, which may have unintended
+ visual effects).</p>
+
+ <div class=example>
+ <p>As a somewhat silly example, a <p> element can be reused as a
+ background elsewhere in the document:</p>
+
+ <pre>
+<style>
+#src { color: white; background: lime; width: 300px; height: 40px; }
+#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
+</style>
+<p id='src'>I'm an ordinary element!</p>
+<p id='dst'>I'm using the previous element as my background!</p></pre>
+ <img alt="" src=element-function.png></div>
+
+ <dt>an <a href="#element-not-rendered"><i
title=element-not-rendered>element that is not rendered</i></a>, but
which <a href="#paint-source"><i title=paint-source>provides a paint
source</i></a>
@@ -775,11 +806,7 @@
</ul></pre>
</div>
- <dt>The function references an <a href="#element-not-rendered"><i
- title=element-not-rendered>element that is not rendered</i></a>
-
- <dt>The function references an element that is a descendant of a replaced
- element
+ <dt>anything else
<dd>
<p>The function represents an <a href="#invalid-image"><i>invalid
@@ -814,42 +841,12 @@
The descendants of a replaced element like an IFRAME
can't be used in element() either.
</li>
+ <li style="background: element(#four);">
+ There's no element with an id of "four", so this also
+ gets rendered as a transparent image.
+ </li>
</ul></pre>
</div>
-
- <dt>Otherwise
-
- <dd>
- <p>The function represents an image with width and height equal to the
- border 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 border box is flush with the edges of the image. <span
- class=note>Note: Because images clip anything outside their bounds by
- default, this means that decorations that extend outside the border 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 page content areas were joined flush in the
- pagination direction (elements broken across lines or columns just
- render with their border box, as normal, which may have unintended
- visual effects).</p>
-
- <div class=example>
- <p>As a somewhat silly example, a <p> element can be reused as a
- background elsewhere in the document:</p>
-
- <pre>
-<style>
-#src { color: white; background: lime; width: 300px; height: 40px; }
-#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
-</style>
-<p id='src'>I'm an ordinary element!</p>
-<p id='dst'>I'm using the previous element as my background!</p></pre>
- <img alt="" src=element-function.png></div>
</dl>
<p>Implementations may either re-use existing bitmap data generated for the
@@ -876,6 +873,15 @@
behavior in some contexts, such as the ‘<code
class=css>image()</code>’ notation.
+ <p>The <dfn id=bounding-box>bounding box</dfn> of an element rendered using
+ a CSS rendering model is the smallest rectangle that contains the <a
+ href="http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area">border
+ image areas</a> of all the fragments of the principal box. For an element
+ rendered using the SVG rendering model, <a
+ href="http://www.w3.org/TR/SVG/coords.html">the bounding box is defined by
+ SVG</a>. <span class=note>The SVG 1.1 definition of "bounding box" does
+ not account for stroke width. This is expected to change in SVG 2.</span>
+
<h4 class=no-num id=paint-sources> Paint Sources</h4>
<p>Host languages may define that some elements provide a <dfn
@@ -2802,6 +2808,9 @@
<li>authoring tool, <a href="#authoring-tool"
title="authoring tool"><strong>7.2.</strong></a>
+ <li>bounding box, <a href="#bounding-box"
+ title="bounding box"><strong>3.3.</strong></a>
+
<li>‘<code class=css>closest-corner</code>’, <a
href="#radial-closest-corner"
title="''closest-corner''"><strong>4.2.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.311
retrieving revision 1.312
diff -u -d -r1.311 -r1.312
--- Overview.src.html 28 Feb 2012 02:04:02 -0000 1.311
+++ Overview.src.html 28 Feb 2012 19:16:08 -0000 1.312
@@ -339,13 +339,31 @@
<p class='note'>Note: A future version of this specification may allow more than just ID selectors to be passed to ''element()'', allowing an example like this to be done with even less javascript - something like ''background: element(.current-slide + .slide);''.</p>
</div>
- <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>The image represented by the ''element()'' function can vary based on what the function references:</p>
<dl>
- <dt>The function doesn't reference an element</dt>
- <dd>The function represents an <i>invalid image</i>.</dd>
+ <dt>an <i title="element-not-rendered">element that is rendered</i> and is not a descendant of a replaced element</dt>
+ <dd>
+ <p>The function represents an image with width and height equal to the <i>bounding box</i> 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 border box is flush with the edges of the image. <span class=note>Note: Because images clip anything outside their bounds by default, this means that decorations that extend outside the border box, like box-shadows or some border-images, may be clipped.</span></p>
- <dt>The function references an <i title='element-not-rendered'>element that is not rendered</i>, but which <i title='paint-source'>provides a paint source</i></dt>
+ <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 page content areas were joined flush in the pagination direction (elements broken across lines or columns just render with their border box, as normal, which may have unintended visual effects).</p>
+
+ <div class='example'>
+ <p>As a somewhat silly example, a <p> element can be reused as a background elsewhere in the document:</p>
+
+ <pre>
+<style>
+#src { color: white; background: lime; width: 300px; height: 40px; }
+#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
+</style>
+<p id='src'>I'm an ordinary element!</p>
+<p id='dst'>I'm using the previous element as my background!</p></pre>
+
+ <img src="element-function.png" alt="">
+ </div>
+ </dd>
+
+ <dt>an <i title='element-not-rendered'>element that is not rendered</i>, but which <i title='paint-source'>provides a paint source</i></dt>
<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.</p>
@@ -386,8 +404,7 @@
</div>
</dd>
- <dt>The function references an <i title='element-not-rendered'>element that is not rendered</i></dt>
- <dt>The function references an element that is a descendant of a replaced element</dt>
+ <dt>anything else</dt>
<dd>
<p>The function represents an <i>invalid image</i>.</p>
@@ -418,30 +435,13 @@
The descendants of a replaced element like an IFRAME
can't be used in element() either.
</li>
+ <li style="background: element(#four);">
+ There's no element with an id of "four", so this also
+ gets rendered as a transparent image.
+ </li>
</ul></pre>
</div>
</dd>
-
- <dt>Otherwise</dt>
- <dd>
- <p>The function represents an image with width and height equal to the border 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 border box is flush with the edges of the image. <span class=note>Note: Because images clip anything outside their bounds by default, this means that decorations that extend outside the border 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 page content areas were joined flush in the pagination direction (elements broken across lines or columns just render with their border box, as normal, which may have unintended visual effects).</p>
-
- <div class='example'>
- <p>As a somewhat silly example, a <p> element can be reused as a background elsewhere in the document:</p>
-
- <pre>
-<style>
-#src { color: white; background: lime; width: 300px; height: 40px; }
-#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
-</style>
-<p id='src'>I'm an ordinary element!</p>
-<p id='dst'>I'm using the previous element as my background!</p></pre>
-
- <img src="element-function.png" alt="">
- </div>
- </dd>
</dl>
<p>Implementations may either re-use existing bitmap data generated for the
@@ -456,6 +456,8 @@
<p>An <dfn title="invalid image|invalid images">invalid image</dfn> is rendered as a solid-color ''rgba(0,0,0,0)'' image with no intrinsic dimensions. However, <i>invalid images</i> have special behavior in some contexts, such as the ''image()'' notation.</p>
+ <p>The <dfn>bounding box</dfn> of an element rendered using a CSS rendering model is the smallest rectangle that contains the <a href="http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area">border image areas</a> of all the fragments of the principal box. For an element rendered using the SVG rendering model, <a href="http://www.w3.org/TR/SVG/coords.html">the bounding box is defined by SVG</a>. <span class='note'>The SVG 1.1 definition of "bounding box" does not account for stroke width. This is expected to change in SVG 2.</span></p>
+
<h4 id='paint-sources' class='no-num'>
Paint Sources</h4>
Received on Tuesday, 28 February 2012 19:16:20 UTC