1616
1717 < h1 > CSS Image Values and Replaced Content Module Level 3</ h1 >
1818
19- < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 1 February
19+ < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 6 February
2020 2012</ h2 >
2121
2222 < dl >
2323 < dt > This Version:
2424
2525 < dd > < a
2626 href ="http://dev.w3.org/csswg/css3-images/ "> http://dev.w3.org/csswg/css3-images/</ a > -->
27- <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120201 /">http://www.w3.org/TR/2012/WD-css3-images-20120201 /</a>-->
27+ <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120206 /">http://www.w3.org/TR/2012/WD-css3-images-20120206 /</a>-->
2828
2929
3030 < dt > Latest Version:
@@ -206,6 +206,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
206206 < li > < a href ="#element-reference "> < span class =secno > 3.3. </ span > Using
207207 Elements as Images: the ‘< code class =css > element()</ code > ’
208208 notation</ a >
209+ < ul class =toc >
210+ < li > < a href ="#paint-sources "> < span class =secno > 3.3.1. </ span > Paint
211+ Sources</ a >
212+ </ ul >
209213 </ ul >
210214
211215 < li > < a href ="#gradients "> < span class =secno > 4. </ span > Gradients</ a >
@@ -808,13 +812,38 @@ <h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
808812 regeneration process. That is, the image must look identical to the
809813 referenced element, modulo rasterization quality.
810814
815+ < h4 id =paint-sources > < span class =secno > 3.3.1. </ span > Paint Sources</ h4 >
816+
811817 < p > Host languages may define that some elements provide a < dfn
812818 id =paint-source title =paint-source > paint source</ dfn > . Paint sources have
813819 an intrinsic width, height, and appearance, separate from the process of
814820 rendering, and so may be used as images even when they're not being
815- rendered. Examples of elements that provide paint sources are the
816- <linearGradient> , <radialGradient> , and <pattern> elements in
817- SVG, or the <img> , <video> , and <canvas> elements in HTML.</ p >
821+ rendered.
822+
823+ < p > In HTML, the <img> , <video> , and <canvas> elements provide
824+ paint sources (defined in each element's section in HTML5).
825+
826+ < p > In SVG, any element that provides a < a
827+ href ="http://www.w3.org/TR/SVG/pservers.html "> paint server</ a >
828+
829+ < p > provides a paint source. In SVG1.1, the <linearGradient> ,
830+ <radialGradient> , and <pattern> elements provide paint sources. They
831+ are drawn as described in the spec, with the coordinate systems defined as
832+ follows:
833+
834+ < dl >
835+ < dt > objectBoundingBox
836+
837+ < dd > The coordinate system has its origin at the top left corner of the
838+ painting area. The width and height of the painting area are the width
839+ and height of a single unit in the coordinate system.
840+
841+ < dt > userSpaceOnUse
842+
843+ < dd > The coordinate system has its origin at the top left corner of the
844+ painting area. Units in the coordinate space are sized equivalently to
845+ the CSS ‘< code class =css > px</ code > ’ unit.
846+ </ dl >
818847 <!-- ====================================================================== -->
819848
820849 < h4 class ="no-num no-toc " id =element-cycles > Detecting and Resolving
@@ -896,11 +925,11 @@ <h2 id=gradients><span class=secno>4. </span> Gradients</h2>
896925 < h3 id =linear-gradients > < span class =secno > 4.1. </ span > Linear Gradients:
897926 the ‘< code class =css > linear-gradient()</ code > ’ notation</ h3 >
898927
899- < p > A linear gradient is created by specifying a gradient- line and then
928+ < p > A linear gradient is created by specifying a gradient line and then
900929 several colors placed along that line. The image is constructed by
901930 creating an infinite canvas and painting it with lines perpendicular to
902- the gradient- line, with the color of the painted line being the color of
903- the gradient- line where the two intersect. This produces a smooth fade
931+ the gradient line, with the color of the painted line being the color of
932+ the gradient line where the two intersect. This produces a smooth fade
904933 from each color to the next, progressing in the specified direction.</ p >
905934 <!-- ====================================================================== -->
906935
@@ -918,21 +947,21 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
918947 id =side-or-corner > <side-or-corner> </ dfn > = [left | right] || [top | bottom]</ code > </ pre >
919948
920949 < p > The first argument to the function specifies the < dfn
921- id =gradient-line > gradient- line</ dfn > , which gives the gradient a direction
950+ id =gradient-line > gradient line</ dfn > , which gives the gradient a direction
922951 and determines how color-stops are positioned. It may be omitted; if so,
923952 it defaults to "to bottom".
924953
925- < p > The < a href ="#gradient-line "> < i > gradient- line</ i > </ a > may be specified
954+ < p > The < a href ="#gradient-line "> < i > gradient line</ i > </ a > may be specified
926955 in two different ways. The first is by specifying the angle the < a
927- href ="#gradient-line "> < i > gradient- line</ i > </ a > should assume; for the
956+ href ="#gradient-line "> < i > gradient line</ i > </ a > should assume; for the
928957 purposes of this argument, 0deg points upwards, 90deg points toward the
929958 right, and positive angles go clockwise. The starting-point and
930- ending-point of the < a href ="#gradient-line "> < i > gradient- line</ i > </ a > are
959+ ending-point of the < a href ="#gradient-line "> < i > gradient line</ i > </ a > are
931960 determined by extending a line in both directions from the center of the
932961 < a href ="#gradient-box "> < i > gradient box</ i > </ a > at the angle specified. In
933962 the direction of the angle, the ending-point is the point on the < a
934- href ="#gradient-line "> < i > gradient- line</ i > </ a > where a line drawn
935- perpendicular to the < a href ="#gradient-line "> < i > gradient- line</ i > </ a >
963+ href ="#gradient-line "> < i > gradient line</ i > </ a > where a line drawn
964+ perpendicular to the < a href ="#gradient-line "> < i > gradient line</ i > </ a >
936965 would intersect the corner of the < a href ="#gradient-box "> < i > gradient
937966 box</ i > </ a > in that direction. The starting-point is determined
938967 identically, except in the opposite direction of the angle.
@@ -949,7 +978,7 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
949978 corner to angle towards, the gradient must be rendered identically to an
950979 angle-based gradient with an angle chosen such that the endpoint of the
951980 gradient is in the same quadrant as the indicated corner, and a line drawn
952- perpendicular to the gradient- line through the center of the < a
981+ perpendicular to the gradient line through the center of the < a
953982 href ="#gradient-box "> < i > gradient box</ i > </ a > intersects the two
954983 neighboring corners.
955984
@@ -961,12 +990,12 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
961990
962991 < div class =example >
963992 < div style ="overflow: hidden "> < img
964- 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.] "
993+ 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.] "
965994 src =gradient-diagram.png style ="float: right; margin-left: 1em; ">
966995 < p > This example illustrates visually how to calculate the < a
967- href ="#gradient-line "> < i > gradient- line</ i > </ a > from the rules above.
996+ href ="#gradient-line "> < i > gradient line</ i > </ a > from the rules above.
968997 This shows the starting and ending-point of the < a
969- href ="#gradient-line "> < i > gradient- line</ i > </ a > , along with the actual
998+ href ="#gradient-line "> < i > gradient line</ i > </ a > , along with the actual
970999 gradient, produced by an element with ‘< code class =css > background:
9711000 linear-gradient(45deg, white, black);</ code > ’.</ p >
9721001
@@ -980,8 +1009,8 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
9801009
9811010 < p > The gradient's color stops are typically placed between the
9821011 starting-point and ending-point on the < a
983- href ="#gradient-line "> < i > gradient- line</ i > </ a > , but this isn't required -
984- the < a href ="#gradient-line "> < i > gradient- line</ i > </ a > extends infinitely
1012+ href ="#gradient-line "> < i > gradient line</ i > </ a > , but this isn't required -
1013+ the < a href ="#gradient-line "> < i > gradient line</ i > </ a > extends infinitely
9851014 in both directions. The starting-point and ending-point are merely
9861015 arbitrary location markers - the starting-point defines where 0%, 0px, etc
9871016 are located when specifying color-stops, and the ending-point defines
@@ -1011,7 +1040,7 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>4.1.2.
10111040 < div class =example >
10121041 < p > This demonstrates the use of an angle in the gradient. Note that,
10131042 though the angle is not exactly the same as the angle between the
1014- corners, the < a href ="#gradient-line "> < i > gradient- line</ i > </ a > is still
1043+ corners, the < a href ="#gradient-line "> < i > gradient line</ i > </ a > is still
10151044 sized so as to make the gradient yellow exactly at the upper-left corner,
10161045 and blue exactly at the lower-right corner.</ p >
10171046
@@ -1218,28 +1247,26 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
12181247 < h4 class =no-toc id =radial-color-stops > < span class =secno > 4.2.2. </ span >
12191248 Placing Color Stops</ h4 >
12201249
1221- < p > Color-stops are placed on a < dfn id =gradient-ray > gradient- ray</ dfn > ,
1222- similar to the < a href ="#gradient-line "> < i > gradient- line</ i > </ a > of linear
1223- gradients. The < a href ="#gradient-ray "> < i > gradient- ray</ i > </ a > is anchored
1250+ < p > Color-stops are placed on a < dfn id =gradient-ray > gradient ray</ dfn > ,
1251+ similar to the < a href ="#gradient-line "> < i > gradient line</ i > </ a > of linear
1252+ gradients. The < a href ="#gradient-ray "> < i > gradient ray</ i > </ a > is anchored
12241253 at the center of the gradient and extends toward the right. The 0%
1225- location is at the start of the < a
1226- href ="#gradient-ray "> < i > gradient-ray</ i > </ a > , and the 100% location is on
1227- the point where the < a href ="#gradient-ray "> < i > gradient-ray</ i > </ a >
1228- intersects the < a href ="#ending-shape "> < i > ending shape</ i > </ a > . Negative
1229- locations can be specified; though negative locations are never directly
1230- consulted for rendering, they can affect the color of non-negative
1231- locations on the < a href ="#gradient-ray "> < i > gradient-ray</ i > </ a > through
1232- interpolation. For example, ‘< code class =css > radial-gradient(red
1233- -50px, yellow 100px)</ code > ’ produces an elliptical gradient that
1234- starts with a reddish-orange color in the center (specifically, #f50) and
1235- transitions to yellow. Locations greater than 100% simply specify a
1236- location a correspondingly greater distance from the center of the
1237- gradient.
1254+ location is at the start of the < a href ="#gradient-ray "> < i > gradient
1255+ ray</ i > </ a > , and the 100% location is on the point where the < a
1256+ href ="#gradient-ray "> < i > gradient ray</ i > </ a > intersects the < a
1257+ href ="#ending-shape "> < i > ending shape</ i > </ a > . Negative locations can be
1258+ specified; though negative locations are never directly consulted for
1259+ rendering, they can affect the color of non-negative locations on the < a
1260+ href ="#gradient-ray "> < i > gradient ray</ i > </ a > through interpolation. For
1261+ example, ‘< code class =css > radial-gradient(red -50px, yellow
1262+ 100px)</ code > ’ produces an elliptical gradient that starts with a
1263+ reddish-orange color in the center (specifically, #f50) and transitions to
1264+ yellow. Locations greater than 100% simply specify a location a
1265+ correspondingly greater distance from the center of the gradient.
12381266
12391267 < p > When drawing the concentric ellipses of the gradient, the color of each
1240- ellipse is the color of the < a
1241- href ="#gradient-ray "> < i > gradient-ray</ i > </ a > at the point where the
1242- ellipse intersects the ray.
1268+ ellipse is the color of the < a href ="#gradient-ray "> < i > gradient
1269+ ray</ i > </ a > at the point where the ellipse intersects the ray.
12431270
12441271 < h4 class =no-toc id =degenerate-radials > < span class =secno > 4.2.3. </ span >
12451272 Degenerate Radial Gradients</ h4 >
@@ -1447,14 +1474,14 @@ <h3 id=color-stop-syntax><span class=secno>4.4. </span> Gradient
14471474 id =ltcolor-stop > <color-stop> </ dfn > = <color> [ <percentage> | <length> ]?</ code > </ pre >
14481475
14491476 < p > Color-stops are points placed along the line defined by the < a
1450- href ="#gradient-line "> < i > gradient- line</ i > </ a > at the beginning of the
1477+ href ="#gradient-line "> < i > gradient line</ i > </ a > at the beginning of the
14511478 rule. Color-stops must be specified in order. Percentages refer to the
1452- length of the gradient- line, with 0% being at the starting point and 100%
1479+ length of the gradient line, with 0% being at the starting point and 100%
14531480 being at the ending point. Lengths are measured from the starting-point in
14541481 the direction of the ending-point. Color-stops are usually placed between
1455- the starting-point and ending-point, but that's not required; the
1456- gradient- line extends infinitely in both directions, and a color-stop can
1457- be placed at any position on the line.
1482+ the starting-point and ending-point, but that's not required; the gradient
1483+ line extends infinitely in both directions, and a color-stop can be placed
1484+ at any position on the line.
14581485
14591486 < p > At each color-stop, the line is the color of the color-stop. Between two
14601487 color-stops, the line's color is linearly interpolated between the colors
@@ -1890,8 +1917,7 @@ <h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
18901917 href ="#default-object-size "> < i > default object size</ i > </ a > equal to the
18911918 replaced element's used width and height.</ p >
18921919
1893- < p > This will make the contents exactly fill the replaced element's
1894- content box.</ p >
1920+ < p > This will allow the object to fill the replaced element's content box.</ p >
18951921
18961922 < dt > ‘< code class =css > contain</ code > ’
18971923
@@ -1968,17 +1994,16 @@ <h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
19681994 class =property > object-position</ code > </ a > ’ property for positioning
19691995 the object with respect to the content box.
19701996
1971- < div class =figure >
1972- < p > < img alt ="" src ="img_scale.png " style ="border: thin solid black; "> </ p >
1973-
1997+ < div class =figure > < img alt src ="img_scale.png "
1998+ style ="border: thin solid black; ">
19741999 < p class =caption > An example showing how four of the values of ‘< a
19752000 href ="#object-fit0 "> < code class =property > object-fit</ code > </ a > ’
19762001 cause the replaced element (blue figure) to be scaled to fit its
1977- height/width box (shownwith a green background), using the initial value
2002+ height/width box (shown with a green background), using the initial value
19782003 for ‘< a href ="#object-position0 "> < code
19792004 class =property > object-position</ code > </ a > ’. The fifth value,
1980- ‘< code class =css > < span class = css > scale-down</ span > , in this case
1981- looks identical to </ code > ’ < span class =css > contain</ span > .</ p >
2005+ ‘< code class =css > scale-down</ code > ’ , in this case looks
2006+ identical to ‘ < code class =css > contain</ code > ’ .</ p >
19822007 </ div >
19832008
19842009 < p class =issue > Find some good use-cases and make examples out of them.
@@ -2732,11 +2757,11 @@ <h2 class=no-num id=index>Index</h2>
27322757 < li > gradient box, < a href ="#gradient-box "
27332758 title ="gradient box "> < strong > 4.</ strong > </ a >
27342759
2735- < li > gradient- line, < a href ="#gradient-line "
2736- title =gradient- line > < strong > 4.1.1.</ strong > </ a >
2760+ < li > gradient line, < a href ="#gradient-line "
2761+ title =" gradient line " > < strong > 4.1.1.</ strong > </ a >
27372762
2738- < li > gradient- ray, < a href ="#gradient-ray "
2739- title =gradient- ray > < strong > 4.2.2.</ strong > </ a >
2763+ < li > gradient ray, < a href ="#gradient-ray "
2764+ title =" gradient ray " > < strong > 4.2.2.</ strong > </ a >
27402765
27412766 < li > <image> , < a href ="#ltimage "
27422767 title ="<image> "> < strong > 3.</ strong > </ a >
@@ -2786,7 +2811,7 @@ <h2 class=no-num id=index>Index</h2>
27862811 < li > objects, < a href ="#objects " title =objects > < strong > 5.</ strong > </ a >
27872812
27882813 < li > paint-source, < a href ="#paint-source "
2789- title =paint-source > < strong > 3.3.</ strong > </ a >
2814+ title =paint-source > < strong > 3.3.1. </ strong > </ a >
27902815
27912816 < li > <position> , < a href ="#ltposition "
27922817 title ="<position> "> < strong > 4.2.1.</ strong > </ a >
0 commit comments