You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<dd><ahref="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>”
43
38
44
39
<dt>Editors:</dt>
@@ -88,14 +83,16 @@ <h2 id="intro">
88
83
<p>In CSS Levels 1 and 2, image values, such as those used in the
89
84
'background-image' property, could only be given by a single URL
90
85
value. This module introduces additional ways of representing 2D
91
-
images, for example as <ahref="#image-notation">a list of URIs denoting fallbacks</a>, as <ahref="#element-reference">a
92
-
reference to an element</a>, or as <ahref="#gradients">a gradient</a>.</p>
86
+
images, for example as <ahref="#image-notation">a list of URIs denoting fallbacks</a>,
87
+
<!-- as <a href="#element-reference">a reference to an element</a>, -->
88
+
or as <ahref="#gradients">a gradient</a>.</p>
93
89
94
90
<p>This module also defines several properties for <ahref="#image-processing">manipulating
95
-
raster images</a> and for <ahref="#object-fit">sizing</a> or <ahref="#object-position">positioning</a> replaced elements
91
+
raster images</a> and for <ahref="#object-fit">sizing</a> or
92
+
<ahref="#object-position">positioning</a> replaced elements
96
93
such as images within the box determined by the CSS layout algorithms.
97
-
It also defines in a generic way CSS's <ahref="#sizing">sizing algorithm</a> for images
98
-
and other replaced elements.
94
+
It also defines in a generic way CSS's <ahref="#sizing">sizing algorithm</a>
95
+
for images and other replaced elements.
99
96
100
97
<h3id="placement">
101
98
Module Interactions</h3>
@@ -156,8 +153,10 @@ <h2 id="image-values">
156
153
Image Values: the <image> type</h2>
157
154
158
155
<p>The ''<image>'' value type denotes a 2D image. It can be a
<p>Each ''<string>'' or ''<url>'' inside ''image()'' represents an image, just as if the <ahref="#url">''url()'' notation</a> had been used. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [[!CSS3VAL]]) when a specified ''image()'' value is computed.</p>
207
+
<p>Each ''<string>'' or ''<url>'' inside ''image()'' represents an image, just as if the <ahref="#url-notation">''url()'' notation</a> had been used. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [[!CSS3VAL]]) when a specified ''image()'' value is computed.</p>
<p>Color-stops are placed on a <dfn>gradient ray</dfn>, similar to the <i>gradient line</i> of linear gradients. The <i>gradient ray</i> is anchored at the center of the gradient and extends toward the right. The 0% location is at the start of the <i>gradient ray</i>, and the 100% location is on the point where the <i>gradient ray</i> intersects the <i>ending shape</i>. A color-stop can be placed at a negative location; though the negative region of the <i>gradient ray</i> is never directly consulted for rendering, color stops placed there can affect the color of non-negative locations on the <i>gradient ray</i> through interpolation or repetition (see <ahref='#repeating-gradient'>repeating gradients</a>). For example, ''radial-gradient(red -50px, yellow 100px)'' 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>
799
+
<p>Color-stops are placed on a <dfn>gradient ray</dfn>, similar to the <i>gradient line</i> of linear gradients. The <i>gradient ray</i> is anchored at the center of the gradient and extends toward the right. The 0% location is at the start of the <i>gradient ray</i>, and the 100% location is on the point where the <i>gradient ray</i> intersects the <i>ending shape</i>. A color-stop can be placed at a negative location; though the negative region of the <i>gradient ray</i> is never directly consulted for rendering, color stops placed there can affect the color of non-negative locations on the <i>gradient ray</i> through interpolation or repetition (see <ahref='#repeating-gradients'>repeating gradients</a>). For example, ''radial-gradient(red -50px, yellow 100px)'' 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>
801
800
802
801
<p>The color of the gradient at any point is determined by first finding the unique ellipse passing through that point with the same center, orientation, and ratio between major and minor axises as the ending-shape. The point's color is then the color of the <i>gradient ray</i> at the location where this ellipse intersects it.</p>
<dd>The rules for calculating the <i>concrete object size</i> of a background
1194
1193
are defined in <ahref="http://www.w3.org/TR/CSS21/colors.html#background-properties">CSS2.1§14.2.1</a> and
1195
1194
<ahref="http://www.w3.org/TR/css3-background/#the-background-size">CSS3BG§3.9</a>. CSS2.1 uses the <i>default sizing algorithm</i> with no <i>specified size</i> and the <i>background positioning area</i> as the <i>default object size</i>. [[!CSS21]] In CSS3, 'background-size' property can give a sizing constraint, invoking either the <i>default sizing algorithm</i> or one of the <ititle="contain constraint">contain</i> or <ititle="cover constraint">cover</i> constraints. The concrete object size is further adjusted in later steps if 'background-repeat' has a ''round'' value. [[CSS3BG]]
<dd>Border images are sized twice: first the entire image is sized to determine the slice points, then the slices are sized to decorate the border.
1206
1205
The first sizing operation is defined in <ahref="http://www.w3.org/TR/css3-background/#the-border-image-slice">CSS3BG§6.2</a> and uses the <i>default sizing algorithm</i> with no <i>specified size</i>, and the <ahref="http://www.w3.org/TR/css3-background/#border-image-area">border image area</a> as the <i>default object size</i>.
1207
1206
The second operation is defined in <ahref="http://www.w3.org/TR/css3-background/#border-image-process">CSS3BG§6.2</a>: the <i>default sizing algorithm</i> is used to determine an initial size for each slice with the corresponding <i>border image area</i> part as the default object size. By default the <i>specified size</i> matches this <i>default object size</i>; however the 'border-image-repeat' property can drop the specified size in one or more directions and may also apply an additional rounding step. [[CSS3BG]]</p>
<dd>The rules for calculating the <i>concrete object size</i> of a cursor are defined in
1212
1211
<ahref="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2.1 § 18.1: Cursors</a>. The <i>default object size</i> is a UA-defined size that should be based on the size of a typical cursor on the UA's operating system. [[!CSS21]]</dd>
<dd><ahref="http://www.w3.org/TR/CSS21/">CSS 2.1</a> defines the sizing of replaced elements (including those inserted as <ahref="http://www.w3.org/TR/CSS21/generate.html#content">generated content</a> via 'content') in sections <ahref="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">10.3.2</a>, <ahref="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>, <ahref="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">10.6.2</a>, and <ahref="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>. [[!CSS21]] The 'object-fit' property defined below defines how the <i>concrete object size</i> corresponds to the element's used width and height; by default they coincide.</dd>
0 commit comments