1717
1818 < h1 > CSS Image Values and Replaced Content Module Level 3</ h1 >
1919
20- < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 19 September
21- 2011</ h2 >
20+ < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 3 October 2011</ h2 >
2221
2322 < dl >
2423 < dt > This Version:</ dt >
25- <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110919 /">http://www.w3.org/TR/2011/WD-css3-images-20110919 /</a>-->
24+ <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111003 /">http://www.w3.org/TR/2011/WD-css3-images-20111003 /</a>-->
2625
2726 < dd > < a
2827 href ="http://dev.w3.org/csswg/css3-images/ "> http://dev.w3.org/csswg/css3-images/</ a >
@@ -64,13 +63,13 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 September
6463 < p class =copyright > < a
6564 href ="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright "
6665 rel =license > Copyright</ a > © 2011 < a
67- href ="http://www.w3.org/ "> < acronym title =" World Wide Web
68- Consortium "> W3C</ acronym > </ a > < sup > ®</ sup > (< a
69- href ="http://www.csail.mit.edu/ "> < acronym title =" Massachusetts Institute
70- of Technology "> MIT</ acronym > </ a > , < a href =" http://www.ercim.eu/ " > < acronym
71- title =" European Research Consortium for Informatics and
72- Mathematics "> ERCIM</ acronym > </ a > , < a
73- href ="http://www.keio.ac.jp/ "> Keio</ a > ), All Rights Reserved. W3C < a
66+ href ="http://www.w3.org/ "> < acronym
67+ title =" World Wide Web Consortium "> W3C</ acronym > </ a > < sup > ®</ sup > (< a
68+ href ="http://www.csail.mit.edu/ "> < acronym
69+ title =" Massachusetts Institute of Technology "> MIT</ acronym > </ a > , < a
70+ href =" http://www.ercim.eu/ " > < acronym
71+ title =" European Research Consortium for Informatics and Mathematics "> ERCIM</ acronym > </ a > ,
72+ < a href ="http://www.keio.ac.jp/ "> Keio</ a > ), All Rights Reserved. W3C < a
7473 href ="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer "> liability</ a > ,
7574 < a
7675 href ="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks "> trademark</ a >
@@ -367,8 +366,8 @@ <h2 id=image><span class=secno>4. </span> Image Values: the <image> type</h2>
367366
368367 < p > The <image> value type denotes a 2D image. It is defined as
369368
370- < pre
371- class = prod > < dfn id =ltimage > <image> </ dfn > = <url> | <image-list> | <element-reference> | <image-combination> | <gradient> </ pre >
369+ < pre class = prod > < dfn
370+ id =ltimage > <image> </ dfn > = <url> | <image-list> | <element-reference> | <image-combination> | <gradient> </ pre >
372371
373372 < p > Image values can be used in many CSS properties, including the
374373 ‘< code class =property > background-image</ code > ’, ‘< code
@@ -529,8 +528,8 @@ <h3 id=element-reference><span class=secno>4.3. </span> Using Elements as
529528 or even an animated background. The syntax for ‘< code
530529 class =css > element()</ code > ’ is:
531530
532- < pre
533- class = prod > < dfn id =ltelement-reference > <element-reference> </ dfn > = element( [<id-selector> | <identifier> ] )</ pre >
531+ < pre class = prod > < dfn
532+ id =ltelement-reference > <element-reference> </ dfn > = element( [<id-selector> | <identifier> ] )</ pre >
534533
535534 < p > where <id-selector> is an ID selector < a href ="#SELECT "
536535 rel =biblioentry > [SELECT]<!--{{!SELECT}}--> </ a > , and <identifier> is an
@@ -647,8 +646,8 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
647646 generate the image automatically when rendering the page. The syntax of a
648647 < a href ="#ltgradient "> < i > <gradient> </ i > </ a > is:
649648
650- < pre
651- class = prod > < dfn id =ltgradient > <gradient> </ dfn > = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</ pre >
649+ < pre class = prod > < dfn
650+ id =ltgradient > <gradient> </ dfn > = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</ pre >
652651
653652 < p > where < a href ="#ltlinear-gradient "> < i > <linear-gradient> </ i > </ a > , < a
654653 href ="#ltradial-gradient "> < i > <radial-gradient> </ i > </ a > , < a
@@ -703,13 +702,14 @@ <h3 id=linear-gradients><span class=secno>5.1. </span> Linear Gradients</h3>
703702 < h4 class =no-toc id =linear-gradient-syntax > < span class =secno > 5.1.1. </ span >
704703 linear-gradient() syntax</ h4 >
705704
706- < pre
707- class = prod > < code > < dfn id =ltlinear-gradient > <linear-gradient> </ dfn > = linear-gradient(
705+ < pre class = prod > < code > < dfn
706+ id =ltlinear-gradient > <linear-gradient> </ dfn > = linear-gradient(
708707 [ [ <angle> | [ to <side-or-corner> ] ] ,]?
709708 <color-stop> [, <color-stop> ]+
710709)
711710
712- < dfn id =side-or-corner > <side-or-corner> </ dfn > = [left | right] || [top | bottom]</ code > </ pre >
711+ < dfn
712+ id =side-or-corner > <side-or-corner> </ dfn > = [left | right] || [top | bottom]</ code > </ pre >
713713
714714 < p > The first argument to the function specifies the < dfn
715715 id =gradient-line > gradient-line</ dfn > , which gives the gradient a direction
@@ -748,14 +748,9 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span>
748748 < p >
749749
750750 < div class =example >
751- < div style ="overflow: hidden "> < img alt ="[An image showing a box with a
752- background shading gradually from white in the bottom-left corner to
753- black in the top-right corner. There is a line, illustrating the
754- gradient-line, angled at 45 degrees and passing through the center of the
755- box. The starting-point and ending-point of the gradient-line are
756- indicated by the intersection of the gradient-line with two additional
757- lines that pass through the bottom-left and top-right corners of the
758- box.] " src =gradient-diagram.png style ="float: right; margin-left: 1em; ">
751+ < div style ="overflow: hidden "> < img
752+ 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.] "
753+ src =gradient-diagram.png style ="float: right; margin-left: 1em; ">
759754 < p > This example illustrates visually how to calculate the < a
760755 href ="#gradient-line "> < i > gradient-line</ i > </ a > from the rules above.
761756 This shows the starting and ending-point of the < a
@@ -860,7 +855,8 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
860855 radial-gradient() Syntax</ h4 >
861856
862857 < pre class =prod >
863- < dfn id =ltradial-gradient > <radial-gradient> </ dfn > = radial-gradient(
858+ < dfn
859+ id =ltradial-gradient > <radial-gradient> </ dfn > = radial-gradient(
864860 [<position>,]?
865861 [[
866862 [<shape> || <size>]
@@ -912,7 +908,8 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
912908
913909 < p > The < a href ="#ltsize "> < i > <size> </ i > </ a > keyword is defined as:</ p >
914910
915- < pre > < code > < dfn id =ltsize > <size> </ dfn > = closest-side | closest-corner | farthest-side | farthest-corner | contain | cover</ code > </ pre >
911+ < pre > < code > < dfn
912+ id =ltsize > <size> </ dfn > = closest-side | closest-corner | farthest-side | farthest-corner | contain | cover</ code > </ pre >
916913
917914 < p > Its values are defined in the list below. For the purpose of these
918915 definitions, consider the box edges as extending infinitely in both
@@ -1063,12 +1060,7 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
10631060 < p > When drawing the concentric ellipses of the gradient, the color of each
10641061 ellipse is the color of the < a
10651062 href ="#gradient-ray "> < i > gradient-ray</ i > </ a > at the point where the
1066- ellipse intersects the ray.
1067-
1068- < p class =issue > Brad suggests that we could drop the position/sizing
1069- arguments and just use background-position and background-size. This would
1070- force all non-background uses of radial gradient to be centered and
1071- box-filling. Is this acceptable or not?</ p >
1063+ ellipse intersects the ray.</ p >
10721064 <!-- ====================================================================== -->
10731065
10741066 < h4 class =no-toc id =radial-gradient-examples > < span class =secno > 5.2.2.
@@ -1131,13 +1123,15 @@ <h3 id=repeating-gradients><span class=secno>5.3. </span> Repeating
11311123 functions. These two functions take the same values and are interpreted
11321124 the same as their respective non-repeating siblings defined previously:
11331125
1134- < pre
1135- class =prod > < code > < dfn id =ltrepeating-linear-gradient > <repeating-linear-gradient> </ dfn > = repeating-linear-gradient(
1136- [ [ <angle> | [ to < a href ="#side-or-corner "> < code > <side-or-corner> </ code > </ a > ] ] ,]?
1126+ < pre class =prod > < code > < dfn
1127+ id =ltrepeating-linear-gradient > <repeating-linear-gradient> </ dfn > = repeating-linear-gradient(
1128+ [ [ <angle> | [ to < a
1129+ href ="#side-or-corner "> < code > <side-or-corner> </ code > </ a > ] ] ,]?
11371130 <color-stop> [, <color-stop> ]+
11381131)
11391132
1140- < dfn id =ltrepeating-radial-gradient > <repeating-radial-gradient> </ dfn > = repeating-radial-gradient(
1133+ < dfn
1134+ id =ltrepeating-radial-gradient > <repeating-radial-gradient> </ dfn > = repeating-radial-gradient(
11411135 [<'background-position'>,]?
11421136 [[
11431137 [<shape> || <size>]
@@ -1243,8 +1237,8 @@ <h3 id=repeating-gradients><span class=secno>5.3. </span> Repeating
12431237 < h3 id =color-stop-syntax > < span class =secno > 5.4. </ span > Gradient
12441238 Color-Stops</ h3 >
12451239
1246- < pre
1247- class = prod > < code > < dfn id =ltcolor-stop > <color-stop> </ dfn > = <color> [ <percentage> | <length> ]?</ code > </ pre >
1240+ < pre class = prod > < code > < dfn
1241+ id =ltcolor-stop > <color-stop> </ dfn > = <color> [ <percentage> | <length> ]?</ code > </ pre >
12481242
12491243 < p > Color-stops are points placed along the line defined by the < a
12501244 href ="#gradient-line "> < i > gradient-line</ i > </ a > at the beginning of the
@@ -2099,10 +2093,10 @@ <h3 class=no-num id=normative-references>Normative references</h3>
20992093 < dt id =CSS21 > [CSS21]
21002094
21012095 < dd > Bert Bos; et al. < a
2102- href ="http://www.w3.org/TR/2011/REC-CSS2-20110607 "> < cite > Cascading Style
2096+ href ="http://www.w3.org/TR/2011/REC-CSS2-20110607/ "> < cite > Cascading Style
21032097 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</ cite > </ a > 7 June
21042098 2011. W3C Recommendation. URL: < a
2105- href ="http://www.w3.org/TR/2011/REC-CSS2-20110607 "> http://www.w3.org/TR/2011/REC-CSS2-20110607</ a >
2099+ href ="http://www.w3.org/TR/2011/REC-CSS2-20110607/ "> http://www.w3.org/TR/2011/REC-CSS2-20110607/ </ a >
21062100 </ dd >
21072101 <!---->
21082102
@@ -2273,8 +2267,8 @@ <h2 class=no-num id=index>Index</h2>
22732267 < li > <color-stop> , < a href ="#ltcolor-stop "
22742268 title ="<color-stop> "> < strong > 5.4.</ strong > </ a >
22752269
2276- < li > concrete object size, < a href ="#concrete-object-size " title =" concrete
2277- object size "> < strong > 6.1.</ strong > </ a >
2270+ < li > concrete object size, < a href ="#concrete-object-size "
2271+ title =" concrete object size "> < strong > 6.1.</ strong > </ a >
22782272
22792273 < li > contain, < a href ="#radial-contain "
22802274 title =contain > < strong > 5.2.1.</ strong > </ a >
@@ -2283,17 +2277,17 @@ <h2 class=no-num id=index>Index</h2>
22832277
22842278
22852279 < li > CSS element reference identifier, < a
2286- href ="#css-element-reference-identifier " title =" CSS element reference
2287- identifier "> < strong > 4.3.</ strong > </ a >
2280+ href ="#css-element-reference-identifier "
2281+ title =" CSS element reference identifier "> < strong > 4.3.</ strong > </ a >
22882282
22892283 < li > CSSOM-capable, < a href ="#cssom-capable "
22902284 title =CSSOM-capable > < strong > 2.</ strong > </ a >
22912285
2292- < li > default object size, < a href ="#default-object-size " title =" default
2293- object size "> < strong > 6.1.</ strong > </ a >
2286+ < li > default object size, < a href ="#default-object-size "
2287+ title =" default object size "> < strong > 6.1.</ strong > </ a >
22942288
2295- < li > degenerate shape, < a href ="#degenerate-shape " title =" degenerate
2296- shape "> < strong > 5.2.1.</ strong > </ a >
2289+ < li > degenerate shape, < a href ="#degenerate-shape "
2290+ title =" degenerate shape "> < strong > 5.2.1.</ strong > </ a >
22972291
22982292 < li > dpcm, < a href ="#dpcm " title =dpcm > < strong > 3.</ strong > </ a >
22992293
@@ -2344,14 +2338,14 @@ <h2 class=no-num id=index>Index</h2>
23442338 < li > intrinsic aspect ratio, < a href ="#intrinsic-aspect-ratio "
23452339 title ="intrinsic aspect ratio "> < strong > 6.1.</ strong > </ a >
23462340
2347- < li > intrinsic dimensions, < a href ="#intrinsic-dimensions " title =" intrinsic
2348- dimensions "> < strong > 6.1.</ strong > </ a >
2341+ < li > intrinsic dimensions, < a href ="#intrinsic-dimensions "
2342+ title =" intrinsic dimensions "> < strong > 6.1.</ strong > </ a >
23492343
2350- < li > intrinsic height, < a href ="#intrinsic-height " title =" intrinsic
2351- height "> < strong > 6.1.</ strong > </ a >
2344+ < li > intrinsic height, < a href ="#intrinsic-height "
2345+ title =" intrinsic height "> < strong > 6.1.</ strong > </ a >
23522346
2353- < li > intrinsic width, < a href ="#intrinsic-width " title =" intrinsic
2354- width "> < strong > 6.1.</ strong > </ a >
2347+ < li > intrinsic width, < a href ="#intrinsic-width "
2348+ title =" intrinsic width "> < strong > 6.1.</ strong > </ a >
23552349
23562350 < li > <linear-gradient> , < a href ="#ltlinear-gradient "
23572351 title ="<linear-gradient> "> < strong > 5.1.1.</ strong > </ a >
@@ -2393,8 +2387,8 @@ <h2 class=no-num id=index>Index</h2>
23932387 < li > <size> , < a href ="#ltsize "
23942388 title ="<size> "> < strong > 5.2.1.</ strong > </ a >
23952389
2396- < li > specified size, < a href ="#specified-size " title =" specified
2397- size "> < strong > 6.1.</ strong > </ a >
2390+ < li > specified size, < a href ="#specified-size "
2391+ title =" specified size "> < strong > 6.1.</ strong > </ a >
23982392
23992393 < li > transition-capable, < a href ="#transition-capable "
24002394 title =transition-capable > < strong > 2.</ strong > </ a >
0 commit comments