@@ -167,6 +167,18 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
167167 < li > < a href ="#sizing "> < span class =secno > 6. </ span > Sizing Images and
168168 Objects in CSS</ a >
169169 < ul class =toc >
170+ < li >
171+ < ul class =toc >
172+ < li class =no-num > < a href ="#sizing-terms "> Object-Sizing Terminology</ a >
173+
174+
175+ < li class =no-num > < a href ="#object-negotiation "> CSS⇋Object
176+ Negotiation</ a >
177+
178+ < li class =no-num > < a href ="#default-sizing "> Default Intrinsic-Size
179+ Resolution</ a >
180+ </ ul >
181+
170182 < li > < a href ="#image-resolution "> < span class =secno > 6.1. </ span > Overriding
171183 Image Resolutions: the ‘< code
172184 class =property > image-resolution</ code > ’ property</ a >
@@ -1138,10 +1150,12 @@ <h2 id=sizing><span class=secno>6. </span>Sizing Images and Objects in CSS</h2>
11381150 SVG), and CSS-specific formats (such as the linear-gradient() value type
11391151 defined in this specification). As well, a document may contain many
11401152 other types of objects, such as video, plugins, or nested documents.
1141- These images and objects (just "objects" hereafter) may offer many types
1142- of sizing information to CSS, or none at all. This section defines
1143- generically the size negotiation model between the object and the CSS
1144- layout algorithms.</ p >
1153+ These images and objects (just < dfn id =objects > objects</ dfn > hereafter)
1154+ may offer many types of sizing information to CSS, or none at all. This
1155+ section defines generically the size negotiation model between the object
1156+ and the CSS layout algorithms.</ p >
1157+
1158+ < h4 class =no-num id =sizing-terms > Object-Sizing Terminology</ h4 >
11451159
11461160 < p > In order to define this handling, we define a few terms, to make it
11471161 easier to refer to various concepts:</ p >
@@ -1166,8 +1180,8 @@ <h2 id=sizing><span class=secno>6. </span>Sizing Images and Objects in CSS</h2>
11661180 < p > If an object (such as an icon) has multiple sizes, then the largest
11671181 size is used. If it has multiple aspect ratios of that size (or of no
11681182 size), then the aspect ratio closest to the aspect ratio of the < a
1169- href ="#default-image-sizing-area "> < i > default image sizing area </ i > </ a >
1170- is used. < span class =issue > This is pretty arbitrary.</ span > </ p >
1183+ href ="#default-object-size "> < i > default object size </ i > </ a > is used.
1184+ < span class =issue > This is pretty arbitrary.</ span > </ p >
11711185
11721186 < dt > < dfn id =specified-size > specified size</ dfn >
11731187
@@ -1183,50 +1197,60 @@ <h2 id=sizing><span class=secno>6. </span>Sizing Images and Objects in CSS</h2>
11831197 < dd > The CSS View Box is the result of transforming the < a
11841198 href ="#intrinsic-dimensions "> < i > intrinsic dimensions</ i > </ a > into a
11851199 concrete size, based on the specified size and the < a
1186- href ="#default-image-sizing-area "> < i > default image sizing area </ i > </ a > .
1187- A CSS View Box always has a definite height and width.
1200+ href ="#default-object-size "> < i > default object size </ i > </ a > . A CSS View
1201+ Box always has a definite height and width.
11881202
1189- < dt > < dfn id =default-image-sizing-area > default image sizing area </ dfn >
1203+ < dt > < dfn id =default-object-size > default object size </ dfn >
11901204
1191- < dd > The default image sizing area is a rectangle with a definite height
1192- and width used to determine the size of the CSS View Box when both the
1193- < a href ="#intrinsic-dimensions "> < i > intrinsic dimensions</ i > </ a > and < a
1205+ < dd > The default object size is a rectangle with a definite height and
1206+ width used to determine the size of the CSS View Box when both the < a
1207+ href ="#intrinsic-dimensions "> < i > intrinsic dimensions</ i > </ a > and < a
11941208 href ="#specified-size "> < i > specified size</ i > </ a > are missing dimensions.
1195- It varies based on the property that the image is being used as a value
1196- in:
1197- < dl >
1198- < dt > ‘< code class =property > background-image</ code > ’
1199-
1200- < dd > The < a href ="#default-image-sizing-area "> < i > default image sizing
1201- area</ i > </ a > is the size of the background positioning area of the
1202- element.
1203-
1204- < dt > ‘< code class =property > list-style-image</ code > ’
1205-
1206- < dd > The < a href ="#default-image-sizing-area "> < i > default image sizing
1207- area</ i > </ a > is a 1em square.
1209+ It varies based on the context in which that the image is being laid
1210+ out.
1211+ < div class =example >
1212+ < p > Below are some examples of default object sizing areas:
1213+
1214+ < dl >
1215+ < dt > ‘< code class =property > background-image</ code > ’
1216+
1217+ < dd > The < a href ="#default-object-size "> < i > default object size</ i > </ a >
1218+ is the size of the element's < a
1219+ href ="http://www.w3.org/TR/css3-background/#background-positioning-area "> background
1220+ positioning area</ a > . < a href ="#CSS3BG "
1221+ rel =biblioentry > [CSS3BG]<!--{{CSS3BG}}--> </ a > </ dd >
1222+ <!-- list style images prioritize a default ratio of 1:1 over the 1em size
1223+ <dt>‘<code class=property>list-style-image</code>’</dt>
1224+ <dd>The <i>default object size</i> is a 1em square. [[CSS21]]</dd>
1225+ -->
12081226
1209- < dt > ‘< code class =property > border-image</ code > ’
1227+ < dt > ‘< code class =property > border-image</ code > ’
12101228
1211- < dd > The < a href ="#default-image-sizing-area "> < i > default image sizing
1212- area</ i > </ a > is the size of the element's < a
1213- href ="http://dev.w3.org/csswg/css3-background/#border-image-area "> < i > border
1214- image area</ i > </ a > .
1229+ < dd > The < a href ="#default-object-size "> < i > default object size</ i > </ a >
1230+ is the size of the element's < a
1231+ href ="http://www.w3.org/TR/css3-background/#border-image-area "> border
1232+ image area</ a > . < a href ="#CSS3BG "
1233+ rel =biblioentry > [CSS3BG]<!--{{CSS3BG}}--> </ a >
12151234
1216- < dt > ‘< code class =property > cursor</ code > ’
1235+ < dt > ‘< code class =property > cursor</ code > ’
12171236
1218- < dd > The < a href ="#default-image-sizing-area "> < i > default image sizing
1219- area</ i > </ a > is a UA-defined size that should be based on the size of
1220- a typical cursor on the UA's operating system.
1237+ < dd > The < a href ="#default-object-size "> < i > default object size</ i > </ a >
1238+ is a UA-defined size that should be based on the size of a typical
1239+ cursor on the UA's operating system. < a href ="#CSS21 "
1240+ rel =biblioentry > [CSS21]<!--{{CSS21}}--> </ a >
12211241
1222- < dt > Anything else
1242+ < dt > replaced elements
12231243
1224- < dd > The < a href ="#default-image-sizing-area "> < i > default image sizing
1225- area</ i > </ a > is a rectangle 300px wide and 150px tall.
1226- </ dl >
1244+ < dd > The < a href ="#default-object-size "> < i > default object size</ i > </ a >
1245+ is a rectangle 300px wide and 150px tall. < a href ="#CSS21 "
1246+ rel =biblioentry > [CSS21]<!--{{CSS21}}--> </ a >
1247+ </ dl >
1248+ </ div >
12271249 </ dl >
12281250
1229- < p > Images and objects in CSS are sized as follows:</ p >
1251+ < h4 class =no-num id =object-negotiation > CSS⇋Object Negotiation</ h4 >
1252+
1253+ < p > Objects in CSS are sized and rendered as follows:</ p >
12301254
12311255 < ol >
12321256 < li > When an image or object is specified in a document, such as through
@@ -1238,93 +1262,93 @@ <h2 id=sizing><span class=secno>6. </span>Sizing Images and Objects in CSS</h2>
12381262 < li > Using the < a href ="#intrinsic-dimensions "> < i > intrinsic
12391263 dimensions</ i > </ a > and the < a href ="#specified-size "> < i > specified
12401264 size</ i > </ a > , CSS then computes a < a href ="#css-view-box "> < i > CSS View
1241- Box</ i > </ a > that defines the size of the region the object will render
1242- in, as follows:
1265+ Box</ i > </ a > that defines the size and position of the region the object
1266+ will render in.
1267+
1268+ < li > CSS asks the object to render itself into the CSS View Box. CSS does
1269+ not define how objects render when the dimensions of the CSS View Box
1270+ are different than the object's intrinsic dimensions. The object may
1271+ adjust itself to match the dimensions of the CSS View Box in some way,
1272+ or even render itself larger or smaller than the CSS View Box to satisfy
1273+ sizing constraints of its own.
1274+
1275+ < li > Unless otherwise specified by CSS, the object is then clipped to the
1276+ CSS View Box.
1277+ </ ol >
1278+
1279+ < h4 class =no-num id =default-sizing > Default Intrinsic-Size Resolution</ h4 >
1280+
1281+ < p > In the absence of more specific rules to the contrary, an object's
1282+ < i > intrinsic size</ i > is resolved to a < a href ="#css-view-box "> < i > CSS
1283+ View Box</ i > </ a > as follows:
1284+
1285+ < ul >
1286+ < li > If the < a href ="#specified-size "> < i > specified size</ i > </ a > is a
1287+ definite width and height, the < a href ="#css-view-box "> < i > CSS View
1288+ Box</ i > </ a > is given that width and height.
1289+
1290+ < li > If the < a href ="#specified-size "> < i > specified size</ i > </ a > has only a
1291+ width or height, but not both, then the < a href ="#css-view-box "> < i > CSS
1292+ View Box</ i > </ a > is given that specified width or height. The other
1293+ dimension is calculated as follows:
12431294 < ol >
1244- < li > If the < a href ="#specified-size "> < i > specified size</ i > </ a > is just
1245- a definite width and height, the < a href ="#css-view-box "> < i > CSS View
1246- Box</ i > </ a > must be that width and height.
1247-
1248- < li > If the < a href ="#specified-size "> < i > specified size</ i > </ a > is just
1249- a definite width or just a definite height, then the < a
1250- href ="#css-view-box "> < i > CSS View Box</ i > </ a > must have the same width
1251- or height, as appropriate. The other dimension is calculated as
1252- follows:
1253- < ol >
1254- < li > If the object has an < a
1255- href ="#intrinsic-aspect-ratio "> < i > intrinsic aspect ratio</ i > </ a > ,
1256- the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a > must have the
1257- same aspect ratio.
1258-
1259- < li > Otherwise, if the object has an an < a
1260- href ="#intrinsic-height "> < i > intrinsic height</ i > </ a > or < a
1261- href ="#intrinsic-width "> < i > intrinsic width</ i > </ a > (whichever is
1262- missing from the < a href ="#specified-size "> < i > specified
1263- size</ i > </ a > ), then the < a href ="#css-view-box "> < i > CSS View
1264- Box</ i > </ a > must have that height or width.
1265-
1266- < li > Otherwise, the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a >
1267- must have the same width or height (whichever is missing from the
1268- specified size) as the < a
1269- href ="#default-image-sizing-area "> < i > default image sizing
1270- area</ i > </ a > .
1271- </ ol >
1272-
1273- < li > If the < a href ="#specified-size "> < i > specified size</ i > </ a > is
1274- neither a definite width nor height, and has no additional contraints,
1275- the dimensions of the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a >
1276- must be computed as follows:
1277- < ol >
1278- < li > If the object has an < a href ="#intrinsic-width "> < i > intrinsic
1279- width</ i > </ a > and an < a href ="#intrinsic-height "> < i > intrinsic
1280- height</ i > </ a > , the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a >
1281- must have that same height and width.
1282-
1283- < li > If the object has only an < a href ="#intrinsic-width "> < i > intrinsic
1284- width</ i > </ a > or < a href ="#intrinsic-height "> < i > intrinsic
1285- height</ i > </ a > , and no < a
1286- href ="#intrinsic-aspect-ratio "> < i > intrinsic aspect ratio</ i > </ a > ,
1287- the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a > must have that
1288- width or height, and the height or width (whichever is missing from
1289- the < a href ="#intrinsic-dimensions "> < i > intrinsic dimensions</ i > </ a > )
1290- of the < a href ="#default-image-sizing-area "> < i > default image sizing
1291- area</ i > </ a > .
1292-
1293- < li > If the object has only an < a
1294- href ="#intrinsic-aspect-ratio "> < i > intrinsic aspect ratio</ i > </ a > ,
1295- the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a > must have that
1296- aspect ratio, and additionally be as large as possible without
1297- either its height or width exceeding the height or width of the < a
1298- href ="#default-image-sizing-area "> < i > default image sizing
1299- area</ i > </ a > .
1300-
1301- < li > Otherwise, the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a >
1302- must be the size of the < a
1303- href ="#default-image-sizing-area "> < i > default image sizing
1304- area</ i > </ a > .
1305- </ ol >
1306-
1307- < li > If the < a href ="#specified-size "> < i > specified size</ i > </ a > has
1308- additional constraints, the < a href ="#css-view-box "> < i > CSS View
1309- Box</ i > </ a > must be sized to satisfy those constraints. (For example,
1310- ‘< code class =css > object-fit: contain</ code > ’ specifies
1311- slightly more complex handling for sizing replaced elements, and
1312- ‘< code class =css > background-repeat: round</ code > &rs
5D61
quo; can
1313- adjust the size specified in ‘< code
1314- class =property > background-size</ code > ’ so that the image fits an
1315- even number of times into the background positioning area.)
1295+ < li > If the object has an < a href ="#intrinsic-aspect-ratio "> < i > intrinsic
1296+ aspect ratio</ i > </ a > , the < a href ="#css-view-box "> < i > CSS View
1297+ Box</ i > </ a > is given the same aspect ratio.
1298+
1299+ < li > Otherwise, if the object has the missing dimension as an
1300+ < i > intrinsic size</ i > , then the missing dimension of the < a
1301+ href ="#css-view-box "> < i > CSS View Box</ i > </ a > is taken from the
1302+ object's intrinsic size.
1303+
1304+ < li > Otherwise, the missing dimension of the < a
1305+ href ="#css-view-box "> < i > CSS View Box</ i > </ a > is taken from the < a
1306+ href ="#default-object-size "> < i > default object size</ i > </ a > .
13161307 </ ol >
1317- </ ol >
13181308
1319- < p > After determining the size of the CSS View Box, CSS positions it within
1320- the appropriate area according to any relevant properties, such as
1321- object-position or background-position, and asks the object to render
1322- itself using the dimensions of the CSS View Box. CSS does not define how
1323- objects render when the dimensions of the CSS View Box are different than
1324- the object's intrinsic dimensions. The object may adjust itself to match
1325- the dimensions of the CSS View Box in some way, or even render itself
1326- larger or smaller than the CSS View Box to satisfy sizing constraints of
1327- its own.</ p >
1309+ < li > If the < a href ="#specified-size "> < i > specified size</ i > </ a > has
1310+ neither a definite width nor height, and has no additional contraints,
1311+ the dimensions of the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a > is
1312+ calculated as follows:
1313+ < ol >
1314+ < li > If the object has both an < a href ="#intrinsic-width "> < i > intrinsic
1315+ width</ i > </ a > and an < a href ="#intrinsic-height "> < i > intrinsic
1316+ height</ i > </ a > , the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a > is
1317+ given that same height and width.
1318+
1319+ < li > If the object has only an < a href ="#intrinsic-width "> < i > intrinsic
1320+ width</ i > </ a > or < a href ="#intrinsic-height "> < i > intrinsic
1321+ height</ i > </ a > , and no < a href ="#intrinsic-aspect-ratio "> < i > intrinsic
1322+ aspect ratio</ i > </ a > , the < a href ="#css-view-box "> < i > CSS View
1323+ Box</ i > </ a > is given that width or height, and missing dimension is
1324+ taken from the < a href ="#default-object-size "> < i > default object
1325+ size</ i > </ a > .
1326+
1327+ < li > If the object has only an < a
1328+ href ="#intrinsic-aspect-ratio "> < i > intrinsic aspect ratio</ i > </ a > , the
1329+ < a href ="#css-view-box "> < i > CSS View Box</ i > </ a > must have that aspect
1330+ ratio, and additionally be as large as possible without either its
1331+ height or width exceeding the height or width of the < a
1332+ href ="#default-object-size "> < i > default object size</ i > </ a > .
1333+
1334+ < li > Otherwise, the < a href ="#css-view-box "> < i > CSS View Box</ i > </ a > is
1335+ given the size of the < a href ="#default-object-size "> < i > default object
1336+ size</ i > </ a > .
1337+ </ ol >
1338+ </ ul >
1339+
1340+ < p > If the < a href ="#specified-size "> < i > specified size</ i > </ a > has
1341+ additional constraints, the < a href ="#css-view-box "> < i > CSS View
1342+ Box</ i > </ a > must be sized to satisfy those constraints. For example, the
1343+ ‘< code class =property > min-width</ code > ’, ‘< code
1344+ class =property > min-height</ code > ’, ‘< code
1345+ class =property > max-width</ code > ’, and ‘< code
1346+ class =property > max-height</ code > ’ properties specify slightly more
1347+ complex handling for sizing replaced elements, and ‘< code
1348+ class =css > background-repeat: round</ code > ’ can further adjust the
1349+ size calculated by ‘< code
1350+ class =property > background-size</ code > ’ so that the image fits a
1351+ whole number of times into the background positioning area.
13281352
13291353 < div >
13301354 < h3 id =image-resolution > < span class =secno > 6.1. </ span > Overriding Image
@@ -2270,6 +2294,16 @@ <h3 class=no-num id=informative-references>Informative references</h3>
22702294 < dt style ="display: none "> <!-- keeps the doc valid if the DL is empty -->
22712295 <!---->
22722296
2297+ < dt id =CSS21 > [CSS21]
2298+
2299+ < dd > Bert Bos; et al. < a
2300+ href ="http://www.w3.org/TR/2009/CR-CSS2-20090908 "> < cite > Cascading Style
2301+ Sheets Level 2 Revision 1 (CSS 2.1) Specification.</ cite > </ a > 8 September
2302+ 2009. W3C Candidate Recommendation. (Work in progress.) URL: < a
2303+ href ="http://www.w3.org/TR/2009/CR-CSS2-20090908 "> http://www.w3.org/TR/2009/CR-CSS2-20090908</ a >
2304+ </ dd >
2305+ <!---->
2306+
22732307 < dt id =CSS3BG > [CSS3BG]
22742308
22752309 < dd > Bert Bos; Elika J. Etemad; Brad Kemper. < a
0 commit comments