99 < link href ="http://www.w3.org/StyleSheets/TR/W3C-ED " rel =stylesheet
1010 type ="text/css ">
1111
12- < style type ="text/css ">
13- p { text-indent : 0 !important ; margin : .5em 0 ; }
14- </ style >
15-
1612 < body >
1713 < div class =head > <!--begin-logo-->
1814 < p > < a href ="http://www.w3.org/ "> < img alt =W3C height =48
1915 src ="http://www.w3.org/Icons/w3c_home " width =72 > </ a > <!--end-logo-->
2016
2117 < h1 > CSS Image Values and Replaced Content Module Level 3</ h1 >
2218
23- < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 23 July 2011</ h2 >
19+ < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 2 August 2011</ h2 >
2420
2521 < dl >
26- < dt > Latest Version :
22+ < dt > This version :
2723
2824 < dd > < a
29- href ="http://dev .w3.org/csswg/ css3-images/ "> http://dev .w3.org/csswg/ css3-images/</ a >
25+ href ="http://www .w3.org/TR/2011/ED- css3-images-20110802 / "> http://www .w3.org/TR/2011/ED- css3-images-20110802 /</ a >
3026
3127
32- < dt > Latest Published Version :
28+ < dt > Latest version :
3329
3430 < dd > < a
3531 href ="http://www.w3.org/TR/css3-images/ "> http://www.w3.org/TR/css3-images/</ a >
3632
37- < dt > Previous Version:
33+ < dt > Editor's draft:
34+
35+ < dd > < a
36+ href ="http://dev.w3.org/csswg/css3-images/ "> http://dev.w3.org/csswg/css3-images/</ a >
37+
38+
39+ < dt > Previous version:
3840
3941 < dd > < a
4042 href ="http://www.w3.org/TR/2011/WD-css3-images-20110217/ "> http://www.w3.org/TR/2011/WD-css3-images-20110217/</ a >
4143
4244 < dd > < a
4345 href ="http://www.w3.org/TR/2009/WD-css3-images-20090723/ "> http://www.w3.org/TR/2009/WD-css3-images-20090723/</ a >
4446
45- < dt > Editor :
47+ < dt > Editors :
4648
4749 < dd > < a href ="http://fantasai.inkedblade.net/contact "> Elika J. Etemad</ a >
4850 (Invited Expert)
@@ -436,7 +438,7 @@ <h3 id=url><span class=secno>4.1. </span> Image References and Image
436438 the SVG directly.</ small > </ p >
437439 </ div >
438440
439- < p class =note > Unfortunately, a UA that doesn't understand the media
441+ < p class =note > Note that a legacy UA that doesn't understand the media
440442 fragments notation will ignore the fragment and simply display the
441443 entirety of an image specified with ‘< code
442444 class =css > url</ code > ’. However, since URLs with media fragment
@@ -690,12 +692,8 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
690692 These are commonly used for subtle shading in background images, buttons,
691693 and many other things. The two functions described in this section allow
692694 an author to specify such an image in a terse syntax, so that the UA can
693- generate the image automatically when rendering the page. Gradients are a
694- type of image, and can be used anywhere an image can, such as in the
695- ‘< code class =property > background-image</ code > ’ or ‘< code
696- class =property > list-style-image</ code > ’ properties. Gradients have
697- no < a href ="#intrinsic-dimensions "> < i > intrinsic dimensions</ i > </ a > . The
698- syntax of a < a href ="#ltgradient "> < i > <gradient> </ i > </ a > is:
695+ generate the image automatically when rendering the page. The syntax of a
696+ < a href ="#ltgradient "> < i > <gradient> </ i > </ a > is:
699697
700698 < pre
701699 class =prod > < dfn id =ltgradient > <gradient> </ dfn > = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</ pre >
@@ -707,6 +705,10 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
707705 href ="#ltrepeating-radial-gradient "> < i > <repeating-radial-gradient> </ i > </ a >
708706 are defined in their applicable sections below.
709707
708+ < p > Gradients are a type of image, and can be used anywhere an image can,
709+ such as in the ‘< code class =property > background-image</ code > ’
710+ or ‘< code class =property > list-style-image</ code > ’ properties.
711+
710712 < div class =example >
711713 < p > As with the other < a href ="#ltimage "> < i > <image> </ i > </ a > types
712714 defined in this specification, gradients can be used in any property that
@@ -720,18 +722,19 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
720722 </ ul >
721723 </ div >
722724
723- < p class =note > In many places this section references a box, such as "the
724- box's top-left corner" or "the box's right side". In all of these
725- circumstances, the "box" refers to a rectangle with the dimensions of the
726- < a href ="#concrete-object-size "> < i > concrete object size</ i > </ a > . A
727- gradient has no intrinsic dimensions. This means that, for example, if you
728- use a gradient in the ‘< code
729- class =property > background-image</ code > ’ property (with ‘< code
730- class =property > background-size</ code > ’ at the default value and
731- ‘< code class =property > background-repeat</ code > ’ not equal to
732- ‘< code class =property > round</ code > ’), the "box" will simply be
733- the size of the background sizing area. If you use a gradient in a
734- list-style-image, the "box" will be a 1em square.
725+ < p > A gradient is drawn into a box with the dimensions of the < a
726+ href ="#concrete-object-size "> < i > concrete object size</ i > </ a > . Elsewhere in
727+ this section this rectangle is simply called the "box".
728+
729+ < p > A gradient has no < a href ="#intrinsic-dimensions "> < i > intrinsic
730+ dimensions</ i > </ a > . This means that, for example, if you use a gradient in
731+ the ‘< code class =property > background-image</ code > ’ property
732+ (with ‘< code class =property > background-size</ code > ’ at the
733+ default value and ‘< code
734+ class =property > background-repeat</ code > ’ not equal to ‘< code
735+ class =property > round</ code > ’), the box will simply be the size of
736+ the background sizing area. Similarly, for a gradient used as a
737+ list-style-image, the box would be a 1em square.
735738
736739 < p class =issue > It has been suggested that several of the controls offered
737740 by gradients are unnecessary. Repeating gradients could potentially be
@@ -1152,12 +1155,41 @@ <h3 id=repeating-gradients><span class=secno>5.3. </span> Repeating
11521155 < p > < img alt ="" src =repeating3.png > </ p >
11531156 </ div >
11541157
1155- < p > If the difference in the positions of the first and last color-stops is
1156- less than 1px, the < i > actual value</ i > of the position of the last
1157- color-stop must be the position of the first color-stop, plus 1px. < span
1158- class =note > This behavior is different from a previous version of the spec
1159- and does not match implementations; the change was made to avoid
1160- non-continuous behavior in this case.</ span > </ p >
1158+ < p > If the distance between the first and last color-stops is zero, the
1159+ gradient must be rendered as a solid-color image equal to the "average"
1160+ color of the gradient, determined by linearly blending the colors of all
1161+ the color-stops in premultipied sRGBA space.
1162+
1163+ < p > If the distance between the first and last color-stops is non-zero, but
1164+ is small enough that the implementation knows that the physical resolution
1165+ of the output device is insufficient to faithfully render the gradient,
1166+ the gradient must be rendered as a solid-color image equal to the weighted
1167+ average color of the gradient, as determined by the following algorithm:
1168+
1169+ < ol >
1170+ < li > Define < var > list</ var > as an initially-empty list of premultiplied
1171+ RGBA colors, and < var > total-length</ var > as the distance between first
1172+ and last color stops.
1173+
1174+ < li > For each adjacent pair of color-stops, define < var > weight</ var > as
1175+ half the distance between the two color-stops, divided by
1176+ < var > total-length</ var > . Add two entries to < var > list</ var > , the first
1177+ obtained by representing the color of the first color-stop in
1178+ premultiplied sRGBA and scaling all of the components by
1179+ < var > weight</ var > , and the second obtained in the same way with the
1180+ second color-stop.
1181+
1182+ < li > Sum the entries of < var > list</ var > component-wise to produce the
1183+ average color.
1184+ </ ol >
1185+
1186+ < p class =note > As usual, implementations may use whatever algorithm they
1187+ wish, so long as it produces the same result as the above.
1188+
1189+ < div class =example >
1190+ < p class =issue > TODO fill in examples here of the 0-length or
1191+ too-small-length cases.</ p >
1192+ </ div >
11611193 <!-- ====================================================================== -->
11621194
11631195 < h3 id =color-stop-syntax > < span class =secno > 5.4. </ span > Gradient
@@ -1585,7 +1617,7 @@ <h3 id=object-fit><span class=secno>6.4. </span> Sizing Objects: the
15851617 href ="#default-object-size "> < i > default object size</ i > </ a > equal to the
15861618 replaced element's used width and height.</ p >
15871619
1588- < dt > scale-down < b class =issue > better name?</ b >
1620+ < dt > scale-down < i class =issue > better name?</ i >
15891621
15901622 < dd >
15911623 < p > Size the content as if ‘< code class =property > none</ code > ’
@@ -2387,61 +2419,59 @@ <h3 id=interpolating-gradients><span class=secno>9.3. </span> Interpolating
23872419
23882420 < ol >
23892421 < li > Convert both the start and end gradients to their explicit forms:
2390- </ ol >
2391-
2392- < dl >
2393- < dt > For linear gradients:
2394-
2395- < dd >
2396- < ul >
2397- < li > If the direction is specified as an <angle> , it is already in its
2398- explicit form.
2399-
2400- < li > Otherwise, if the direction is specified as a single keyword, change
2401- ‘< code class =property > bottom</ code > ’ to ‘< code
2402- class =css > 0deg</ code > ’, ‘< code
2403- class =property > left</ code > ’ to ‘< code
2404- class =css > 90deg</ code > ’, ‘< code
2405- class =property > top</ code > ’ to ‘< code
2406- class =css > 180deg</ code > ’, or ‘< code
2407- class =property > right</ code > ’ to ‘< code
2408- class =css > 270deg</ code > ’.
2409-
2410- < li > Otherwise, if the direction is specified as two keywords, change the
2411- direction to an <angle> in the following ranges that would produce
2412- an equivalent gradient: for ‘< code class =css > bottom
2413- left</ code > ’ or ‘< code class =css > left bottom</ code > ’,
2414- the angle must be between 0deg and 90deg; for ‘< code
2415- class =css > top left</ code > ’ or ‘< code class =css > left
2416- top</ code > ’, the angle must be between 90deg and 180deg; for
2417- ‘< code class =css > top right</ code > ’ or ‘< code
2418- class =css > right top</ code > ’, the angle must be between 180deg and
2419- 270deg; for ‘< code class =css > bottom right</ code > ’ or
2420- ‘< code class =css > right bottom</ code > ’, the angle must be
2421- between 270deg and 360deg.
2422- </ ul >
2423-
2424- < p > If both the start and end gradients had their direction specified with
2425- keywords, and the absolute difference between the angles their
2426- directions mapped to is greater than 180deg, add 360deg to the direction
2427- of the gradient with the smaller angle. < span class =note > This ensures
2428- that a transition from, for example, "right" (270deg) to "bottom" (0deg)
2429- rotates the gradient a quarter-turn clockwise, as expected, rather than
2430- rotating three-quarters of a turn counter-clockwise.</ span > </ p >
2431-
2432- < dt > For radial gradients:
2433-
2434- < dd >
2435- < ul >
2436- < li > If the size is specified as two <length> s or <percentage> s, it
2437- is already in its explicit form.
2422+ < dl >
2423+ < dt > For linear gradients:
2424+
2425+ < dd >
2426+ < ul >
2427+ < li > If the direction is specified as an <angle> , it is already in
2428+ its explicit form.
2429+
2430+ < li > Otherwise, if the direction is specified as a single keyword,
2431+ change ‘< code class =property > bottom</ code > ’ to
2432+ ‘< code class =css > 0deg</ code > ’, ‘< code
2433+ class =property > left</ code > ’ to ‘< code
2434+ class =css > 90deg</ code > ’, ‘< code
2435+ class =property > top</ code > ’ to ‘< code
2436+ class =css > 180deg</ code > ’, or ‘< code
2437+ class =property > right</ code > ’ to ‘< code
2438+ class =css > 270deg</ code > ’.
2439+
2440+ < li > Otherwise, if the direction is specified as two keywords, change
2441+ the direction to an <angle> in the following ranges that would
2442+ produce an equivalent gradient: for ‘< code class =css > bottom
2443+ left</ code > ’ or ‘< code class =css > left
2444+ bottom</ code > ’, the angle must be between 0deg and 90deg; for
2445+ ‘< code class =css > top left</ code > ’ or ‘< code
2446+ class =css > left top</ code > ’, the angle must be between 90deg and
2447+ 180deg; for ‘< code class =css > top right</ code > ’ or
2448+ ‘< code class =css > right top</ code > ’, the angle must be
2449+ between 180deg and 270deg; for ‘< code class =css > bottom
2450+ right</ code > ’ or ‘< code class =css > right
2451+ bottom</ code > ’, the angle must be between 270deg and 360deg.
2452+
2453+ < li > If both the start and end gradients had their direction specified
2454+ with keywords, and the absolute difference between the angles their
2455+ directions mapped to is greater than 180deg, add 360deg to the
2456+ direction of the gradient with the smaller angle. < span
2457+ class =note > This ensures that a transition from, for example, "right"
2458+ (270deg) to "bottom" (0deg) rotates the gradient a quarter-turn
2459+ clockwise, as expected, rather than rotating three-quarters of a turn
2460+ counter-clockwise.</ span >
2461+ </ ul >
2462+
2463+ < dt > For radial gradients:
2464+
2465+ < dd >
2466+ < ul >
2467+ < li > If the size is specified as two <length> s or <percentage> s,
2468+ it is already in its explicit form.
2469+
2470+ < li > Otherwise, the size must be changed to a pair of <length> s that
2471+ would produce an equivalent ending-shape.
2472+ </ ul >
2473+ </ dl >
24382474
2439- < li > Otherwise, the size must be changed to a pair of <length> s that
2440- would produce an equivalent ending-shape.
2441- </ ul >
2442- </ dl >
2443-
2444- < ul >
24452475 < li > Interpolate each component and color-stop of the gradients
24462476 independently. For linear gradients, the only component is the angle. For
24472477 radial gradients, the components are the horizontal and vertical position
@@ -2453,9 +2483,9 @@ <h3 id=interpolating-gradients><span class=secno>9.3. </span> Interpolating
24532483 start and end gradients are considered to be at the same index, and all
24542484 other color-stops following and preceding are indexed appropriately.
24552485 Then, for each pair of color-stops, interpolate the position and color
2456- independently.</ li >
2457- <!-- ====================================================================== -- >
2458- </ ul >
2486+ independently.
2487+ </ ol >
2488+ <!-- ====================================================================== -- >
24592489
24602490 < h2 class =no-num id =changes > Changes Since the 17 February 2011 Working
24612491 Draft</ h2 >
@@ -2678,8 +2708,11 @@ <h3 class=no-num id=informative-references>Informative references</h3>
26782708
26792709 < dt id =CSSOM > [CSSOM]
26802710
2681- < dd > Anne van Kesteren. < cite > CSSOM.</ cite > (forthcoming). W3C Working
2682- Draft. (Work in progress.)</ dd >
2711+ < dd > Anne van Kesteren. < a
2712+ href ="http://www.w3.org/TR/2011/WD-cssom-20110712/ "> < cite > CSSOM.</ cite > </ a >
2713+ 12 July 2011. W3C Working Draft. (Work in progress.) URL: < a
2714+ href ="http://www.w3.org/TR/2011/WD-cssom-20110712/ "> http://www.w3.org/TR/2011/WD-cssom-20110712/</ a >
2715+ </ dd >
26832716 <!---->
26842717
26852718 < dt id =SMIL10 > [SMIL10]
0 commit comments