- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 28 Feb 2012 23:42:54 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv1500/css3-images
Modified Files:
Overview.html Overview.src.html
Log Message:
Change the span.note/.issue styling to more closely match the blocks.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.315
retrieving revision 1.316
diff -u -d -r1.315 -r1.316
--- Overview.html 28 Feb 2012 22:58:21 -0000 1.315
+++ Overview.html 28 Feb 2012 23:42:52 -0000 1.316
@@ -499,13 +499,14 @@
<dfn
id=image-decl-type><image-decl></dfn> = [ <url> | <string> | <element-reference> ] [ ltr | rtl ]?</pre>
- <p>Each <code><string></code> or <code><url></code> inside
- ‘<code class=css>image()</code>’ represents an image, just as
- if the <a href="#url">‘<code class=css>url()</code>’
- notation</a> had been used. As usual for URLs in CSS, relative URLs are
- resolved to an absolute URL (as described in Values & Units <a
- href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>) when a
- specified ‘<code class=css>image()</code>’ value is computed.
+ <p>Each ‘<code class=css><string></code>’ or ‘<code
+ class=css><url></code>’ inside ‘<code
+ class=css>image()</code>’ represents an image, just as if the <a
+ href="#url">‘<code class=css>url()</code>’ notation</a> had
+ been used. As usual for URLs in CSS, relative URLs are resolved to an
+ absolute URL (as described in Values & Units <a href="#CSS3VAL"
+ rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>) when a specified
+ ‘<code class=css>image()</code>’ value is computed.
<h4 id=image-fragments><span class=secno>3.2.1. </span> Image Fragments</h4>
@@ -700,14 +701,13 @@
<p>where ‘<code class=css><id-selector></code>’ is an ID
selector <a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>.
- <p>If the argument to the ‘<code class=css>element()</code>’
- function is an ID selector, the function references the element matched by
- the selector. If multiple elements are matched by the selector, the
+ <p>The ‘<code class=css>element()</code>’ function references
+ the element matched by its argument. If multiple elements are matched, the
function references the first such element.
<p>The image represented by the ‘<code
- class=css>element()</code>’ function can vary based on what the
- function references:
+ class=css>element()</code>’ function can vary based on whether the
+ element is visible in the document:
<dl>
<dt>an <a href="#element-not-rendered"><i
@@ -715,24 +715,52 @@
descendant of a replaced element
<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 is 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 image area 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, may be clipped.</span></p>
+ <p>The function represents an image with its intrinsic size equal to the
+ <dfn id=decorated-bounding-box>decorated bounding box</dfn> of the
+ referenced element:
+
+ <ul>
+ <li>for an element rendered using a CSS rendering model, the <a
+ href="#decorated-bounding-box"><i>decorated bounding box</i></a> 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
+
+ <li>for an element rendered using the SVG rendering model, <a
+ href="http://www.w3.org/TR/SVG/coords.html">the decorated bounding box
+ is defined by SVG</a>
+ </ul>
+
+ <p class=note>Note: Because images clip anything outside their bounds by
+ default, this means that decorations that extend outside the <a
+ href="#decorated-bounding-box"><i>decorated bounding box</i></a>, like
+ box shadows, may be clipped.</p>
+
+ <p>The image is constructed by rendering the referenced element and its
+ descendants (at the same size that they would be in the document) over
+ an infinite ‘<code class=css>transparent</code>’ canvas,
+ positioned so that the edges of the <a
+ href="#decorated-bounding-box"><i>decorated bounding box</i></a> are
+ flush with the edges of the image.</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 is
+ image. [[!CSS-TRANSFORMS]]</p>
+
+ <p>If the referenced element is broken across pages, the element is
displayed as if the page content areas were joined flush in the
pagination direction, with pages' edges corresponding to the initial
containing block's start edge aligned. <span class=note>Elements broken
across lines or columns are just rendered with their <a
- href="#bounding-box"><i>bounding box</i></a>.</span></p>
+ href="#decorated-bounding-box"><i>decorated bounding box</i></a>.</span></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 at the image's size (for example, if the implementation
+ detects that the referenced element is an SVG fragment); in the latter
+ case, the layout of the referenced element in the image must not be
+ changed by the regeneration process. That is, the image must look
+ identical to the referenced element, modulo rasterization quality.</p>
<div class=example>
<p>As a somewhat silly example, a <code><p></code> element can be
@@ -753,10 +781,10 @@
source</i></a>
<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.</p>
+ <p>The function represents an image with the intrinsic size and
+ appearance of the <a href="#paint-source"><i title=paint-source>paint
+ source</i></a>. The host language defines the size and appearance of
+ paint sources.</p>
<div class=example>
<p>For example, the ‘<code class=css>element()</code>’
@@ -843,8 +871,19 @@
</div>
</dl>
- <p class=note>Host languages may define additional ways to match this ID
- selector. For example, in HTML an element can be assigned to the <a
+ <p>An element is <dfn id=element-not-rendered
+ title=element-not-rendered>not rendered</dfn> if it does not have an
+ associated box. This can happen, for example, if the element or an
+ ancestor is ‘<code class=css>display:none</code>’, or if the
+ element is not in a rendered document. Host languages may define
+ additional ways in which an element can be considered not rendered; for
+ example, in SVG, any descendant of a <code><defs></code> element is
+ considered to be not rendered.
+
+ <p class=note>Host languages may define additional ways for an element to
+ match the ID selector provided to ‘<code
+ class=css>element()</code>’. For example, in HTML an element can be
+ assigned to the <a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-csselementmap"><code>CSSElementMap</code></a>.
If an element matching the ID selector is not found in the document, the
ID is then looked up in the <code>CSSElementMap</code>.
@@ -888,49 +927,26 @@
boxes to help navigate through the page.
</div>
- <p>Implementations may either re-use existing bitmap data generated for the
- referenced element or regenerate the display of the element to maximize
- quality at the image's size (for example, if the implementation detects
- that the referenced element is an SVG fragment); in the latter case, the
- layout of the referenced element in the image must not be changed by the
- regeneration process. That is, the image must look identical to the
- referenced element, modulo rasterization quality.
-
- <p>An element is <dfn id=element-not-rendered
- title=element-not-rendered>not rendered</dfn> if it does not have an
- associated box. This can happen, for example, if the element or an
- ancestor is ‘<code class=css>display:none</code>’, or if the
- element is not in a rendered document. Host languages may define
- additional ways in which an element can be considered not rendered; for
- example, in SVG, any descendant of a <code><defs></code> element is
- considered to be not rendered.
-
- <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 id=paint-sources><span class=secno>3.3.1. </span> Paint Sources</h4>
<p>Host languages may define that some elements provide 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.
+ rendered as part of the document.
- <p>In HTML, the <img>, <video>, and <canvas> elements provide
- paint sources (defined in each element's section in <a
+ <p>In HTML, the <code><img></code>, <code><video></code>, and
+ <code><canvas></code> elements provide paint sources (defined in each
+ element's section in <a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5</a>).
<p>In SVG, any element that provides a <a
href="http://www.w3.org/TR/SVG/pservers.html">paint server</a> provides a
- paint source. In SVG1.1, the <linearGradient>, <radialGradient>, and
- <pattern> elements provide paint sources. They are drawn as described
- in the spec, with the coordinate systems defined as follows:
+ paint source. <span class=note>Note: In SVG1.1, the
+ <code><linearGradient></code>, <code><radialGradient></code>, and
+ <code><pattern></code> elements provide paint sources.</span> They are
+ drawn as described in the spec, with the coordinate systems defined as
+ follows:
<dl>
<dt>objectBoundingBox
@@ -2840,9 +2856,6 @@
<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>
@@ -2857,6 +2870,9 @@
<li>concrete object size, <a href="#concrete-object-size"
title="concrete object size"><strong>5.1.</strong></a>
+ <li>decorated bounding box, <a href="#decorated-bounding-box"
+ title="decorated bounding box"><strong>3.3.</strong></a>
+
<li>default object size, <a href="#default-object-size"
title="default object size"><strong>5.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.325
retrieving revision 1.326
diff -u -d -r1.325 -r1.326
--- Overview.src.html 28 Feb 2012 22:58:21 -0000 1.325
+++ Overview.src.html 28 Feb 2012 23:42:52 -0000 1.326
@@ -202,7 +202,7 @@
<pre class='prod'><dfn id='image-list-type'><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
<dfn id='image-decl-type'><image-decl></dfn> = [ <url> | <string> | <element-reference> ] [ ltr | rtl ]?</pre>
- <p>Each <code><string></code> or <code><url></code> inside ''image()'' represents an image, just as if the <a href="#url">''url()'' notation</a> had been used. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [[!CSS3VAL]]) when a specified ''image()'' value is computed.</p>
+ <p>Each ''<string>'' or ''<url>'' inside ''image()'' represents an image, just as if the <a href="#url">''url()'' notation</a> had been used. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [[!CSS3VAL]]) when a specified ''image()'' value is computed.</p>
<h4>
Image Fragments</h4>
@@ -319,16 +319,30 @@
<p>where ''<id-selector>'' is an ID selector [[!SELECT]].</p>
- <p>If the argument to the ''element()'' function is an ID selector, the function references the element matched by the selector. If multiple elements are matched by the selector, the function references the first such element.</p>
+ <p>The ''element()'' function references the element matched by its argument. If multiple elements are matched, the function references the first such element.</p>
- <p>The image represented by the ''element()'' function can vary based on what the function references:</p>
+ <p>The image represented by the ''element()'' function can vary based on whether the element is visible in the document:</p>
<dl>
<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 is 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 image area 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, may be clipped.</span></p>
+ <p>The function represents an image with its intrinsic size equal to the <dfn>decorated bounding box</dfn> of the referenced 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 is displayed as if the page content areas were joined flush in the pagination direction, with pages' edges corresponding to the initial containing block's start edge aligned. <span class='note'>Elements broken across lines or columns are just rendered with their <i>bounding box</i>.</span></p>
+ <ul>
+ <li>for an element rendered using a CSS rendering model, the <i>decorated bounding box</i> 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</li>
+
+ <li>for an element rendered using the SVG rendering model, <a href="http://www.w3.org/TR/SVG/coords.html">the decorated bounding box is defined by SVG</a></li>
+ </ul>
+
+ <p class=note>Note: Because images clip anything outside their bounds by default, this means that decorations that extend outside the <i>decorated bounding box</i>, like box shadows, may be clipped.</p>
+
+ <p>The image is constructed by rendering the referenced element and its descendants (at the same size that they would be in the document) over an infinite ''transparent'' canvas, positioned so that the edges of the <i>decorated bounding box</i> are flush with the edges of the image.</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. [[!CSS-TRANSFORMS]]</p>
+
+ <p>If the referenced element is broken across pages, the element is displayed as if the page content areas were joined flush in the pagination direction, with pages' edges corresponding to the initial containing block's start edge aligned. <span class='note'>Elements broken across lines or columns are just rendered with their <i>decorated bounding box</i>.</span></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 at the image's size (for example, if the implementation detects that the referenced element is an SVG fragment); in the latter case, the layout of the referenced element in the image must not be changed by the regeneration process. That is, the image must look identical to the referenced element, modulo rasterization quality.</p>
<div class='example'>
<p>As a somewhat silly example, a <code><p></code> element can be reused as a background elsewhere in the document:</p>
@@ -347,7 +361,7 @@
<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>
+ <p>The function represents an image with the intrinsic size and appearance of the <i title=paint-source>paint source</i>. The host language defines the size and appearance of paint sources.</p>
<div class='example'>
<p>For example, the ''element()'' function can reference an SVG <code><pattern></code> element in an HTML document:</p>
@@ -426,7 +440,9 @@
</dd>
</dl>
- <p class='note'>Host languages may define additional ways to match this ID selector. For example, in HTML an element can be assigned to the <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-csselementmap'><code>CSSElementMap</code></a>. If an element matching the ID selector is not found in the document, the ID is then looked up in the <code>CSSElementMap</code>.</p>
+ <p>An element is <dfn id='element-not-rendered' title='element-not-rendered'>not rendered</dfn> if it does not have an associated box. This can happen, for example, if the element or an ancestor is ''display:none'', or if the element is not in a rendered document. Host languages may define additional ways in which an element can be considered not rendered; for example, in SVG, any descendant of a <code><defs></code> element is considered to be not rendered.</p>
+
+ <p class='note'>Host languages may define additional ways for an element to match the ID selector provided to ''element()''. For example, in HTML an element can be assigned to the <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-csselementmap'><code>CSSElementMap</code></a>. If an element matching the ID selector is not found in the document, the ID is then looked up in the <code>CSSElementMap</code>.</p>
<div class='example'>
<p>The ''element()'' function can be put to many uses. For example, it can be used to show a preview of the previous or next slide in a slideshow:</p>
@@ -459,26 +475,14 @@
<p>In this example, the <code>navigateSlides</code> function updates HTML's <code>CSSElementMap</code> to always point to the next and previous slides, which are then displayed in small floating boxes alongside the slides. Since you can't interact with the slides through the ''element()'' function (it's just an image), you could even use <code>click</code> handlers on the preview boxes to help navigate through the page.
</div>
- <p>Implementations may either re-use existing bitmap data generated for the
- referenced element or regenerate the display of the element to maximize quality
- at the image's size (for example, if the implementation detects that the referenced
- element is an SVG fragment); in the latter case, the layout of the referenced
- element in the image must not be changed by the regeneration process. That is,
- the image must look identical to the referenced element, modulo rasterization
- quality.</p>
-
- <p>An element is <dfn id='element-not-rendered' title='element-not-rendered'>not rendered</dfn> if it does not have an associated box. This can happen, for example, if the element or an ancestor is ''display:none'', or if the element is not in a rendered document. Host languages may define additional ways in which an element can be considered not rendered; for example, in SVG, any descendant of a <code><defs></code> element is considered to be not rendered.</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'>
Paint Sources</h4>
- <p>Host languages may define that some elements provide 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.</p>
+ <p>Host languages may define that some elements provide 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 as part of the document.</p>
- <p>In HTML, the <img>, <video>, and <canvas> elements provide paint sources (defined in each element's section in <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/'>HTML5</a>).</p>
+ <p>In HTML, the <code><img></code>, <code><video></code>, and <code><canvas></code> elements provide paint sources (defined in each element's section in <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/'>HTML5</a>).</p>
- <p>In SVG, any element that provides a <a href='http://www.w3.org/TR/SVG/pservers.html'>paint server</a> provides a paint source. In SVG1.1, the <linearGradient>, <radialGradient>, and <pattern> elements provide paint sources. They are drawn as described in the spec, with the coordinate systems defined as follows:</p>
+ <p>In SVG, any element that provides a <a href='http://www.w3.org/TR/SVG/pservers.html'>paint server</a> provides a paint source. <span class='note'>Note: In SVG1.1, the <code><linearGradient></code>, <code><radialGradient></code>, and <code><pattern></code> elements provide paint sources.</span> They are drawn as described in the spec, with the coordinate systems defined as follows:</p>
<dl>
<dt>objectBoundingBox</dt>
Received on Tuesday, 28 February 2012 23:42:57 UTC