- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 11 Aug 2011 02:26:37 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv24070
Modified Files:
Overview.html Overview.src.html
Log Message:
Added logical keywords for the linear gradients.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.137
retrieving revision 1.138
diff -u -d -r1.137 -r1.138
--- Overview.html 9 Aug 2011 22:24:41 -0000 1.137
+++ Overview.html 11 Aug 2011 02:26:35 -0000 1.138
@@ -20,10 +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 9 August 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 August 2011</h2>
<dl><!--<dt>This version:</dt>
- <dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110809/">http://www.w3.org/TR/2011/ED-css3-images-20110809/</a>-->
+ <dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110811/">http://www.w3.org/TR/2011/ED-css3-images-20110811/</a>-->
<dt>Latest version:
@@ -158,11 +158,7 @@
Image Slices: the ‘<code class=css>url()</code>’
notation</a>
- <li><a href="#image-notation"><span class=secno>4.2. </span> Image
- Fallbacks: the ‘<code class=css>image()</code>’
- notation</a>
-
- <li><a href="#element-reference"><span class=secno>4.3. </span> Using
+ <li><a href="#element-reference"><span class=secno>4.2. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
notation</a>
</ul>
@@ -406,97 +402,12 @@
<p class=note>Note that a legacy UA that doesn't understand the media
fragments notation will ignore the fragment and simply display the
entirety of an image specified with ‘<code
- class=css>url</code>’. However, since URLs with media fragment
- identifiers can also be used in the ‘<code
- class=css>image()</code>’ notation defined below, authors can take
- advantage of CSS's forward-compatible parsing rules to provide a fallback
- when using an image fragment URL:
-
- <div class=example>
- <p>In the example below, the ‘<code class=css>image()</code>’
- notation is used together with the media fragment syntax, so that UAs
- that don't support media fragments fail to parse the second declaration
- and use the first.</p>
-
- <pre>
-<!-- -->background-image: url('swirl.png'); /* old UAs */
-<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
- </div>
- <!-- ====================================================================== -->
-
- <h3 id=image-notation><span class=secno>4.2. </span> Image Fallbacks: the
- ‘<code class=css>image()</code>’ notation</h3>
-
- <p>The ‘<code class=css>image()</code>’ function allows an
- author to specify an image with fallback images to be used if the original
- image can't be decoded or is a type that the browser doesn't recognize.
- Additionally, the author can specify a color as an ultimate fallback to be
- used when none of the images can be.
-
- <p>So that authors can take advantage of CSS's forwards-compatible parsing
- rules to provide a fallback for image slices, implementations that support
- the ‘<code class=css>image()</code>’ notation <em>must</em>
- support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
- for images. <a href="#MEDIA-FRAGS"
- rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
-
- <p>The ‘<code class=css>image()</code>’ notation is defined as:
-
-
- <pre class=prod><dfn id=ltimage-list><image-list></dfn> =
- image( [ <string> , ]* [ <string> | <color> ] )</pre>
-
- <p>Each <code><string></code> must be a URL.
-
- <p>Multiple arguments can be given separated by commas, in which case the
- function represents the first <string> representing an image that the
- browser can successfully load and display. The final argument can specify
- a <color> to serve as an ultimate fallback; this can be used, e.g. for
- ‘<code class=property>background-image</code>’, to ensure
- adequate contrast if none of the preceding <image-decl>s can be used.
- If the final argument is a <color>, it represents a solid-color image
- of the given color with no <a href="#intrinsic-dimensions"><i>intrinsic
- dimensions</i></a>.
-
- <div class=example>
- <p>The rule below would tell the UA to load ‘<code
- class=css>wavy.svg</code>’ if it can; failing that to load
- ‘<code class=css>wavy.png</code>’; failing that to display
- ‘<code class=css>wavy.gif</code>’; and finally, if none of
- the images can be loaded and displayed, to use the color ‘<code
- class=css>rgba(0,0,255,0.5)</code>’ to create a dimensionless
- background image. For example, the browser might not understand how to
- render SVG images, the PNG may be malformed, and the GIF might not exist
- on the server and return an HTML 404 error page instead of an image.</p>
-
- <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
-
- <p>The ‘<code class=property>background-size</code>’ property
- specifies that dimensionless images by default stretch to cover the
- entire background positioning area <a href="#CSS3BG"
- rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>, so if none of the
- specified images can be displayed the background will be painted
- semi-transparent blue. As with any image, this fallback will be painted
- over the ‘<code class=property>background-color</code>’ (if
- any).</p>
- </div>
-
- <div class=example>
- <p>At times, one may need a solid-color image for a property or function
- that does not accept the <color> type directly. The ‘<code
- class=css>image()</code>’ function can be used for this: by
- specifying <em>only</em> a color without any URLs, the function
- immediately falls back to representing a solid-color image of the chosen
- color.
-
- <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
-
- <p>In the above, the background is the image "bg-image.png", overlaid with
- partially-transparent blue.
- </div>
+ class=css>url</code>’. A future level of this module is intended to
+ introduce an alternate image-referencing function that is guaranteed to
+ support image fragments.</p>
<!-- ====================================================================== -->
- <h3 id=element-reference><span class=secno>4.3. </span> Using Elements as
+ <h3 id=element-reference><span class=secno>4.2. </span> Using Elements as
Images: the ‘<code class=css>element()</code>’ notation</h3>
<p>The ‘<code class=css>element()</code>’ function allows an
@@ -692,7 +603,9 @@
<color-stop>[, <color-stop>]+
)
-<side-or-corner> = [left | right] || [top | bottom]</code></pre>
+<side-or-corner> =
+ [ [left | right] || [top | bottom] ] |
+ [ [start | end] || [before |after] ]</code></pre>
<p>The first argument to the function specifies the <dfn
id=gradient-line>gradient-line</dfn>, which gives the gradient a direction
@@ -714,16 +627,22 @@
starting-point is determined identically, except in the opposite direction
of the angle.
- <p>Alternately, the direction may be specified with a keyword. If the
- argument is "to top", "to right", "to bottom", or "to left", the gradient
- must be rendered identically to "0deg", "90deg", "180deg", or "270deg",
- respectively. If the argument specifies a 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
+ <p>Alternately, the direction may be specified with keywords that denote
+ the direction, either physically or logically (that is, based on writing
+ mode). If the argument is "to top", "to right", "to bottom", or "to left",
+ the gradient must be rendered identically to "0deg", "90deg", "180deg", or
+ "270deg", respectively. If the argument is "to start", "to end", "to
+ before", or "to after", the gradient must be rendered identically to the
+ equivalent physical keyword, based on the writing mode of the element the
+ gradient is used in. If the argument specifies a 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 box intersects the two neighboring
corners.
+ <p>
+
<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
@@ -762,6 +681,8 @@
<h4 class=no-toc id=linear-gradient-examples><span class=secno>5.1.2.
</span> Linear Gradient Examples</h4>
+ <p class=issue>Add some example of the logical keywords for direction.
+
<p>All of the following ‘<code
class=css>linear-gradient()</code>’ examples are presumed to be
backgrounds applied to a box that is 200px wide and 100px tall.
@@ -1041,7 +962,9 @@
<color-stop>[, <color-stop>]+
)
-<side-or-corner> = [left | right] || [top | bottom]
+<side-or-corner> =
+ [ [left | right] || [top | bottom] ] |
+ [ [start | end] || [before |after] ]
<dfn id=ltrepeating-radial-gradient><repeating-radial-gradient></dfn> = repeating-radial-gradient(
[<bg-position>,]?
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.144
retrieving revision 1.145
diff -u -d -r1.144 -r1.145
--- Overview.src.html 9 Aug 2011 22:24:42 -0000 1.144
+++ Overview.src.html 11 Aug 2011 02:26:35 -0000 1.145
@@ -240,63 +240,7 @@
<p><small>* SVG-in-<img> support required. Click the picture to view the SVG directly.</small></p>
</div>
- <p class="note">Note that a legacy UA that doesn't understand the media
- fragments notation will ignore the fragment and simply display the
- entirety of an image specified with ''url''. However, since URLs with
- media fragment identifiers can also be used in the ''image()'' notation
- defined below, authors can take advantage of CSS's forward-compatible
- parsing rules to provide a fallback when using an image fragment URL:</p>
-
- <div class="example">
- <p>In the example below, the ''image()'' notation is used together with
- the media fragment syntax, so that UAs that don't support media fragments
- fail to parse the second declaration and use the first.</p>
-
- <pre>
-<!-- -->background-image: url('swirl.png'); /* old UAs */
-<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
- </div>
-
-<!-- ====================================================================== -->
-
-<h3 id="image-notation">
-Image Fallbacks: the ''image()'' notation</h3>
-
- <p>The ''image()'' function allows an author to specify an image with fallback images to be used if the original image can't be decoded or is a type that the browser doesn't recognize. Additionally, the author can specify a color as an ultimate fallback to be used when none of the images can be.</p>
-
- <p>So that authors can take advantage of CSS's forwards-compatible parsing
- rules to provide a fallback for image slices, implementations that support
- the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
- form of media fragment identifiers for images. [[!MEDIA-FRAGS]]
-
- <p>The ''image()'' notation is defined as:
-
- <pre class='prod'><dfn><image-list></dfn> =
- image( [ <string> , ]* [ <string> | <color> ] )</pre>
-
- <p>Each <code><string></code> must be a URL.</p>
-
- <p>Multiple arguments can be given separated by commas, in which case the function represents the first <string> representing an image that the browser can successfully load and display. The final argument can specify a <color> to serve as an ultimate fallback; this can be used, e.g. for 'background-image', to ensure adequate contrast if none of the preceding <image-decl>s can be used. If the final argument is a <color>, it represents a solid-color image of the given color with no <i>intrinsic dimensions</i>.
-
- <div class="example">
- <p>The rule below would tell the UA to load ''wavy.svg'' if it can; failing that to load ''wavy.png''; failing that to display ''wavy.gif''; and finally, if none of the images can be loaded and displayed, to use the color ''rgba(0,0,255,0.5)'' to create a dimensionless background image. For example, the browser might not understand how to render SVG images, the PNG may be malformed, and the GIF might not exist on the server and return an HTML 404 error page instead of an image.</p>
-
- <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
-
- <p>The 'background-size' property specifies that dimensionless images
- by default stretch to cover the entire background positioning area
- [[CSS3BG]], so if none of the specified images can be displayed
- the background will be painted semi-transparent blue. As with any image,
- this fallback will be painted over the 'background-color' (if any).</p>
- </div>
-
- <div class='example'>
- <p>At times, one may need a solid-color image for a property or function that does not accept the <color> type directly. The ''image()'' function can be used for this: by specifying <em>only</em> a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.
-
- <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
-
- <p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
- </div>
+ <p class="note">Note that a legacy UA that doesn't understand the media fragments notation will ignore the fragment and simply display the entirety of an image specified with ''url''. A future level of this module is intended to introduce an alternate image-referencing function that is guaranteed to support image fragments.</p>
<!-- ====================================================================== -->
@@ -429,7 +373,9 @@
<color-stop>[, <color-stop>]+
)
-<side-or-corner> = [left | right] || [top | bottom]</code></pre>
+<side-or-corner> =
+ [ [left | right] || [top | bottom] ] |
+ [ [start | end] || [before |after] ]</code></pre>
<p>The first argument to the function specifies the <dfn>gradient-line</dfn>,
which gives the gradient a direction and determines how color-stops are
@@ -447,7 +393,9 @@
direction. The starting-point is determined identically, except in the
opposite direction of the angle.</p>
- <p>Alternately, the direction may be specified with a keyword. If the argument is "to top", "to right", "to bottom", or "to left", the gradient must be rendered identically to "0deg", "90deg", "180deg", or "270deg", respectively. If the argument specifies a 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 box intersects the two neighboring corners.</p>
+ <p>Alternately, the direction may be specified with keywords that denote the direction, either physically or logically (that is, based on writing mode). If the argument is "to top", "to right", "to bottom", or "to left", the gradient must be rendered identically to "0deg", "90deg", "180deg", or "270deg", respectively. If the argument is "to start", "to end", "to before", or "to after", the gradient must be rendered identically to the equivalent physical keyword, based on the writing mode of the element the gradient is used in. If the argument specifies a 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 box intersects the two neighboring corners.</p>
+
+ <p>
<div class=example>
<div style="overflow: hidden">
@@ -478,6 +426,8 @@
<h4 class='no-toc' id='linear-gradient-examples'>
Linear Gradient Examples</h4>
+ <p class=issue>Add some example of the logical keywords for direction.</p>
+
<p>All of the following ''linear-gradient()'' examples are presumed to be
backgrounds applied to a box that is 200px wide and 100px tall.</p>
@@ -721,7 +671,9 @@
<color-stop>[, <color-stop>]+
)
-<side-or-corner> = [left | right] || [top | bottom]
+<side-or-corner> =
+ [ [left | right] || [top | bottom] ] |
+ [ [start | end] || [before |after] ]
<dfn><repeating-radial-gradient></dfn> = repeating-radial-gradient(
[<bg-position>,]?
Received on Thursday, 11 August 2011 02:26:44 UTC