- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 06 Feb 2012 09:26:41 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv27490
Modified Files:
Overview.html Overview.src.html
Log Message:
Provided more details on paint sources, specifying exactly how HTML and SVG provide paint sources.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.270
retrieving revision 1.271
diff -u -d -r1.270 -r1.271
--- Overview.html 1 Feb 2012 18:37:56 -0000 1.270
+++ Overview.html 6 Feb 2012 09:26:38 -0000 1.271
@@ -16,7 +16,7 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 February
2012</h2>
<dl>
@@ -24,7 +24,7 @@
<dd><a
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>-->
- <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120201/">http://www.w3.org/TR/2012/WD-css3-images-20120201/</a>-->
+ <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120206/">http://www.w3.org/TR/2012/WD-css3-images-20120206/</a>-->
<dt>Latest Version:
@@ -206,6 +206,10 @@
<li><a href="#element-reference"><span class=secno>3.3. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
notation</a>
+ <ul class=toc>
+ <li><a href="#paint-sources"><span class=secno>3.3.1. </span> Paint
+ Sources</a>
+ </ul>
</ul>
<li><a href="#gradients"><span class=secno>4. </span> Gradients</a>
@@ -808,13 +812,38 @@
regeneration process. That is, the image must look identical to the
referenced element, modulo rasterization quality.
+ <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. Examples of elements that provide paint sources are the
- <linearGradient>, <radialGradient>, and <pattern> elements in
- SVG, or the <img>, <video>, and <canvas> elements in HTML.</p>
+ rendered.
+
+ <p>In HTML, the <img>, <video>, and <canvas> elements provide
+ paint sources (defined in each element's section in HTML5).
+
+ <p>In SVG, any element that provides a <a
+ href="http://www.w3.org/TR/SVG/pservers.html">paint server</a>
+
+ <p> 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:
+
+ <dl>
+ <dt>objectBoundingBox
+
+ <dd>The coordinate system has its origin at the top left corner of the
+ painting area. The width and height of the painting area are the width
+ and height of a single unit in the coordinate system.
+
+ <dt>userSpaceOnUse
+
+ <dd>The coordinate system has its origin at the top left corner of the
+ painting area. Units in the coordinate space are sized equivalently to
+ the CSS ‘<code class=css>px</code>’ unit.
+ </dl>
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id=element-cycles> Detecting and Resolving
@@ -896,11 +925,11 @@
<h3 id=linear-gradients><span class=secno>4.1. </span> Linear Gradients:
the ‘<code class=css>linear-gradient()</code>’ notation</h3>
- <p>A linear gradient is created by specifying a gradient-line and then
+ <p>A linear gradient is created by specifying a gradient line and then
several colors placed along that line. The image is constructed by
creating an infinite canvas and painting it with lines perpendicular to
- the gradient-line, with the color of the painted line being the color of
- the gradient-line where the two intersect. This produces a smooth fade
+ the gradient line, with the color of the painted line being the color of
+ the gradient line where the two intersect. This produces a smooth fade
from each color to the next, progressing in the specified direction.</p>
<!-- ====================================================================== -->
@@ -918,21 +947,21 @@
id=side-or-corner><side-or-corner></dfn> = [left | right] || [top | bottom]</code></pre>
<p>The first argument to the function specifies the <dfn
- id=gradient-line>gradient-line</dfn>, which gives the gradient a direction
+ id=gradient-line>gradient line</dfn>, which gives the gradient a direction
and determines how color-stops are positioned. It may be omitted; if so,
it defaults to "to bottom".
- <p>The <a href="#gradient-line"><i>gradient-line</i></a> may be specified
+ <p>The <a href="#gradient-line"><i>gradient line</i></a> may be specified
in two different ways. The first is by specifying the angle the <a
- href="#gradient-line"><i>gradient-line</i></a> should assume; for the
+ href="#gradient-line"><i>gradient line</i></a> should assume; for the
purposes of this argument, 0deg points upwards, 90deg points toward the
right, and positive angles go clockwise. The starting-point and
- ending-point of the <a href="#gradient-line"><i>gradient-line</i></a> are
+ ending-point of the <a href="#gradient-line"><i>gradient line</i></a> are
determined by extending a line in both directions from the center of the
<a href="#gradient-box"><i>gradient box</i></a> at the angle specified. In
the direction of the angle, the ending-point is the point on the <a
- href="#gradient-line"><i>gradient-line</i></a> where a line drawn
- perpendicular to the <a href="#gradient-line"><i>gradient-line</i></a>
+ href="#gradient-line"><i>gradient line</i></a> where a line drawn
+ perpendicular to the <a href="#gradient-line"><i>gradient line</i></a>
would intersect the corner of the <a href="#gradient-box"><i>gradient
box</i></a> in that direction. The starting-point is determined
identically, except in the opposite direction of the angle.
@@ -949,7 +978,7 @@
corner to angle towards, the gradient must be rendered identically to an
angle-based gradient with an angle chosen such that the endpoint of the
gradient is in the same quadrant as the indicated corner, and a line drawn
- perpendicular to the gradient-line through the center of the <a
+ perpendicular to the gradient line through the center of the <a
href="#gradient-box"><i>gradient box</i></a> intersects the two
neighboring corners.
@@ -961,12 +990,12 @@
<div class=example>
<div style="overflow: hidden"> <img
- alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient-line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient-line are indicated by the intersection of the gradient-line with two additional lines that pass through the bottom-left and top-right corners of the box.]"
+ alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]"
src=gradient-diagram.png style="float: right; margin-left: 1em;">
<p>This example illustrates visually how to calculate the <a
- href="#gradient-line"><i>gradient-line</i></a> from the rules above.
+ href="#gradient-line"><i>gradient line</i></a> from the rules above.
This shows the starting and ending-point of the <a
- href="#gradient-line"><i>gradient-line</i></a>, along with the actual
+ href="#gradient-line"><i>gradient line</i></a>, along with the actual
gradient, produced by an element with ‘<code class=css>background:
linear-gradient(45deg, white, black);</code>’.</p>
@@ -980,8 +1009,8 @@
<p>The gradient's color stops are typically placed between the
starting-point and ending-point on the <a
- href="#gradient-line"><i>gradient-line</i></a>, but this isn't required -
- the <a href="#gradient-line"><i>gradient-line</i></a> extends infinitely
+ href="#gradient-line"><i>gradient line</i></a>, but this isn't required -
+ the <a href="#gradient-line"><i>gradient line</i></a> extends infinitely
in both directions. The starting-point and ending-point are merely
arbitrary location markers - the starting-point defines where 0%, 0px, etc
are located when specifying color-stops, and the ending-point defines
@@ -1011,7 +1040,7 @@
<div class=example>
<p>This demonstrates the use of an angle in the gradient. Note that,
though the angle is not exactly the same as the angle between the
- corners, the <a href="#gradient-line"><i>gradient-line</i></a> is still
+ corners, the <a href="#gradient-line"><i>gradient line</i></a> is still
sized so as to make the gradient yellow exactly at the upper-left corner,
and blue exactly at the lower-right corner.</p>
@@ -1218,28 +1247,26 @@
<h4 class=no-toc id=radial-color-stops><span class=secno>4.2.2. </span>
Placing Color Stops</h4>
- <p>Color-stops are placed on a <dfn id=gradient-ray>gradient-ray</dfn>,
- similar to the <a href="#gradient-line"><i>gradient-line</i></a> of linear
- gradients. The <a href="#gradient-ray"><i>gradient-ray</i></a> is anchored
+ <p>Color-stops are placed on a <dfn id=gradient-ray>gradient ray</dfn>,
+ similar to the <a href="#gradient-line"><i>gradient line</i></a> of linear
+ gradients. The <a href="#gradient-ray"><i>gradient ray</i></a> is anchored
at the center of the gradient and extends toward the right. The 0%
- location is at the start of the <a
- href="#gradient-ray"><i>gradient-ray</i></a>, and the 100% location is on
- the point where the <a href="#gradient-ray"><i>gradient-ray</i></a>
- intersects the <a href="#ending-shape"><i>ending shape</i></a>. Negative
- locations can be specified; though negative locations are never directly
- consulted for rendering, they can affect the color of non-negative
- locations on the <a href="#gradient-ray"><i>gradient-ray</i></a> through
- interpolation. For example, ‘<code class=css>radial-gradient(red
- -50px, yellow 100px)</code>’ produces an elliptical gradient that
- starts with a reddish-orange color in the center (specifically, #f50) and
- transitions to yellow. Locations greater than 100% simply specify a
- location a correspondingly greater distance from the center of the
- gradient.
+ location is at the start of the <a href="#gradient-ray"><i>gradient
+ ray</i></a>, and the 100% location is on the point where the <a
+ href="#gradient-ray"><i>gradient ray</i></a> intersects the <a
+ href="#ending-shape"><i>ending shape</i></a>. Negative locations can be
+ specified; though negative locations are never directly consulted for
+ rendering, they can affect the color of non-negative locations on the <a
+ href="#gradient-ray"><i>gradient ray</i></a> through interpolation. For
+ example, ‘<code class=css>radial-gradient(red -50px, yellow
+ 100px)</code>’ produces an elliptical gradient that starts with a
+ reddish-orange color in the center (specifically, #f50) and transitions to
+ yellow. Locations greater than 100% simply specify a location a
+ correspondingly greater distance from the center of the gradient.
<p>When drawing the concentric ellipses of the gradient, the color of each
- ellipse is the color of the <a
- href="#gradient-ray"><i>gradient-ray</i></a> at the point where the
- ellipse intersects the ray.
+ ellipse is the color of the <a href="#gradient-ray"><i>gradient
+ ray</i></a> at the point where the ellipse intersects the ray.
<h4 class=no-toc id=degenerate-radials><span class=secno>4.2.3. </span>
Degenerate Radial Gradients</h4>
@@ -1447,14 +1474,14 @@
id=ltcolor-stop><color-stop></dfn> = <color> [ <percentage> | <length> ]?</code></pre>
<p>Color-stops are points placed along the line defined by the <a
- href="#gradient-line"><i>gradient-line</i></a> at the beginning of the
+ href="#gradient-line"><i>gradient line</i></a> at the beginning of the
rule. Color-stops must be specified in order. Percentages refer to the
- length of the gradient-line, with 0% being at the starting point and 100%
+ length of the gradient line, with 0% being at the starting point and 100%
being at the ending point. Lengths are measured from the starting-point in
the direction of the ending-point. Color-stops are usually placed between
- the starting-point and ending-point, but that's not required; the
- gradient-line extends infinitely in both directions, and a color-stop can
- be placed at any position on the line.
+ the starting-point and ending-point, but that's not required; the gradient
+ line extends infinitely in both directions, and a color-stop can be placed
+ at any position on the line.
<p>At each color-stop, the line is the color of the color-stop. Between two
color-stops, the line's color is linearly interpolated between the colors
@@ -1890,8 +1917,7 @@
href="#default-object-size"><i>default object size</i></a> equal to the
replaced element's used width and height.</p>
- <p>This will make the contents exactly fill the replaced element's
- content box.</p>
+ <p>This will allow the object to fill the replaced element's content box.</p>
<dt>‘<code class=css>contain</code>’
@@ -1968,17 +1994,16 @@
class=property>object-position</code></a>’ property for positioning
the object with respect to the content box.
- <div class=figure>
- <p><img alt="" src="img_scale.png" style="border: thin solid black;"></p>
-
+ <div class=figure> <img alt src="img_scale.png"
+ style="border: thin solid black;">
<p class=caption>An example showing how four of the values of ‘<a
href="#object-fit0"><code class=property>object-fit</code></a>’
cause the replaced element (blue figure) to be scaled to fit its
- height/width box (shownwith a green background), using the initial value
+ height/width box (shown with a green background), using the initial value
for ‘<a href="#object-position0"><code
class=property>object-position</code></a>’. The fifth value,
- ‘<code class=css><span class=css>scale-down</span>, in this case
- looks identical to </code>’<span class=css>contain</span>.</p>
+ ‘<code class=css>scale-down</code>’, in this case looks
+ identical to ‘<code class=css>contain</code>’.</p>
</div>
<p class=issue>Find some good use-cases and make examples out of them.
@@ -2732,11 +2757,11 @@
<li>gradient box, <a href="#gradient-box"
title="gradient box"><strong>4.</strong></a>
- <li>gradient-line, <a href="#gradient-line"
- title=gradient-line><strong>4.1.1.</strong></a>
+ <li>gradient line, <a href="#gradient-line"
+ title="gradient line"><strong>4.1.1.</strong></a>
- <li>gradient-ray, <a href="#gradient-ray"
- title=gradient-ray><strong>4.2.2.</strong></a>
+ <li>gradient ray, <a href="#gradient-ray"
+ title="gradient ray"><strong>4.2.2.</strong></a>
<li><image>, <a href="#ltimage"
title="<image>"><strong>3.</strong></a>
@@ -2786,7 +2811,7 @@
<li>objects, <a href="#objects" title=objects><strong>5.</strong></a>
<li>paint-source, <a href="#paint-source"
- title=paint-source><strong>3.3.</strong></a>
+ title=paint-source><strong>3.3.1.</strong></a>
<li><position>, <a href="#ltposition"
title="<position>"><strong>4.2.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.280
retrieving revision 1.281
diff -u -d -r1.280 -r1.281
--- Overview.src.html 4 Feb 2012 23:17:10 -0000 1.280
+++ Overview.src.html 6 Feb 2012 09:26:38 -0000 1.281
@@ -439,8 +439,23 @@
the image must look identical to the referenced element, modulo rasterization
quality.</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. Examples of elements that provide paint sources are the <linearGradient>, <radialGradient>, and <pattern> elements in SVG, or the <img>, <video>, and <canvas> elements in HTML.</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>In HTML, the <img>, <video>, and <canvas> elements provide paint sources (defined in each element's section in HTML5).</p>
+
+ <p>In SVG, any element that provides a <a href='http://www.w3.org/TR/SVG/pservers.html'>paint server</p> 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>
+ <dl>
+ <dt>objectBoundingBox</dt>
+ <dd>The coordinate system has its origin at the top left corner of the painting area. The width and height of the painting area are the width and height of a single unit in the coordinate system.</dd>
+
+ <dt>userSpaceOnUse</dt>
+ <dd>The coordinate system has its origin at the top left corner of the painting area. Units in the coordinate space are sized equivalently to the CSS ''px'' unit.</dd>
+ </dl>
+
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id='element-cycles'>
Received on Monday, 6 February 2012 09:26:59 UTC