changeset
[css4-images] Added an issue about the ordering of color-stop components.
Fri, 21 Sep 2012 16:01:06 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Fri, 21 Sep 2012 16:01:06 -0700
- changeset 6752
- 54565c24c458
- parent 6751
- 525eb91975a8
- parent 6749
- 8fd5a483c818
- child 6753
- 916361683a2b
[css4-images] Added an issue about the ordering of color-stop components.
1.1 --- a/css-counter-styles/Overview.html Fri Sep 21 16:00:07 2012 -0700 1.2 +++ b/css-counter-styles/Overview.html Fri Sep 21 16:01:06 2012 -0700 1.3 @@ -7,17 +7,17 @@ 1.4 <link href="http://purl.org/dc/terms/" rel=schema.DC> 1.5 <meta content="CSS Counter Styles Level 3" name=DC.title> 1.6 <meta content=text name=DC.type> 1.7 - <meta content=2012-09-13 name=DC.issued> 1.8 + <meta content=2012-09-15 name=DC.issued> 1.9 <meta content="Tab Atkins Jr." name=DC.creator> 1.10 <meta content=W3C name=DC.publisher> 1.11 - <meta content="http://www.w3.org/TR/2012/ED-unknown-shortname-20120913/" 1.12 + <meta content="http://www.w3.org/TR/2012/ED-unknown-shortname-20120915/" 1.13 name=DC.identifier> 1.14 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.15 rel=DC.rights> 1.16 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.17 <link href="../default.css" rel=stylesheet type="text/css"> 1.18 <style> 1.19 - pre > code { white-space: pre-wrap; } 1.20 + pre.stylesheet { white-space: pre-wrap; } 1.21 </style> 1.22 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet 1.23 type="text/css"> 1.24 @@ -381,26 +381,28 @@ 1.25 1.26 <p>The ‘<a href="#descdef-type"><code class=property>type</code></a>’ 1.27 descriptor specifies which algorithm will be used to construct the 1.28 - counter's representation based on the counter value. For example, ‘<code 1.29 - class=css>repeating</code>’ type counter styles just cycle through their 1.30 - symbols repeatedly, while <i>numeric</i> type counter styles interpret 1.31 - their symbols as digits and build their representation accordingly. The 1.32 - types are defined as follows: 1.33 + counter's representation based on the counter value. For example, <a 1.34 + href="#repeating0"><i>repeating</i></a> type counter styles just cycle 1.35 + through their symbols repeatedly, while <a 1.36 + href="#numeric0"><i>numeric</i></a> type counter styles interpret their 1.37 + symbols as digits and build their representation accordingly. The types 1.38 + are defined as follows: 1.39 1.40 <h4 id=repeating><span class=secno>1.1.1. </span> repeating</h4> 1.41 1.42 - <p>If the type is <a href="#repeating">repeating</a>, the ‘<a 1.43 + <p>If the type is <dfn id=repeating0>repeating</dfn>, the ‘<a 1.44 href="#descdef-symbols"><code class=property>symbols</code></a>’ 1.45 descriptor must contain at least one <a href="#counter-symbol"><i>counter 1.46 symbol</i></a>. This type is defined over all counter values. 1.47 1.48 - <p>The <i>repeating</i> counter type cycles repeatedly through its provided 1.49 - symbols, looping back to the beginning when it reaches the end of the 1.50 - list, similar to the default <a href="#disc"><i>disc</i></a> counter 1.51 - style. It can be used for simple bullets (just provide a single <a 1.52 - href="#counter-symbol"><i>counter symbol</i></a>), or for cycling through 1.53 - multiple bullets. The first <a href="#counter-symbol"><i>counter 1.54 - symbol</i></a> is used as the representation of the value 1, the second <a 1.55 + <p>The <a href="#repeating0"><i>repeating</i></a> counter type cycles 1.56 + repeatedly through its provided symbols, looping back to the beginning 1.57 + when it reaches the end of the list, similar to the default <a 1.58 + href="#disc"><i>disc</i></a> counter style. It can be used for simple 1.59 + bullets (just provide a single <a href="#counter-symbol"><i>counter 1.60 + symbol</i></a>), or for cycling through multiple bullets. The first <a 1.61 + href="#counter-symbol"><i>counter symbol</i></a> is used as the 1.62 + representation of the value 1, the second <a 1.63 href="#counter-symbol"><i>counter symbol</i></a> (if it exists) is used as 1.64 the representation of the value 2, etc. 1.65 1.66 @@ -432,20 +434,20 @@ 1.67 1.68 <h4 id=numeric><span class=secno>1.1.2. </span> numeric</h4> 1.69 1.70 - <p>If the type is <a href="#numeric">numeric</a>, the ‘<a 1.71 + <p>If the type is <dfn id=numeric0>numeric</dfn>, the ‘<a 1.72 href="#descdef-symbols"><code class=property>symbols</code></a>’ 1.73 descriptor must contain at least two <a href="#counter-symbol"><i>counter 1.74 symbol</i></a>s. This type is defined over all counter values. 1.75 1.76 - <p>The <i>numeric</i> counter type cycles interprets the list of <a 1.77 - href="#counter-symbol"><i>counter symbol</i></a>s as digits to a number 1.78 - system, similar to the default <a href="#decimal"><i>decimal</i></a> 1.79 - counter style. The first <a href="#counter-symbol"><i>counter 1.80 - symbol</i></a> in the list is interpreted as the digit 0, the second as 1.81 - the digit 1, and so on. If there are <var>length</var> <a 1.82 - href="#counter-symbol"><i>counter symbol</i></a>s, the representation is a 1.83 - base <var>length</var> number using the <a 1.84 - href="#counter-symbol"><i>counter symbol</i></a>s as digits. 1.85 + <p>The <a href="#numeric0"><i>numeric</i></a> counter type cycles 1.86 + interprets the list of <a href="#counter-symbol"><i>counter 1.87 + symbol</i></a>s as digits to a number system, similar to the default <a 1.88 + href="#decimal"><i>decimal</i></a> counter style. The first <a 1.89 + href="#counter-symbol"><i>counter symbol</i></a> in the list is 1.90 + interpreted as the digit 0, the second as the digit 1, and so on. If there 1.91 + are <var>length</var> <a href="#counter-symbol"><i>counter 1.92 + symbol</i></a>s, the representation is a base <var>length</var> number 1.93 + using the <a href="#counter-symbol"><i>counter symbol</i></a>s as digits. 1.94 1.95 <p>To construct the representation, run the following algorithm. Let 1.96 <var>length</var> be the length of the list of <i>counter symbols</i>, 1.97 @@ -504,15 +506,16 @@ 1.98 1.99 <h4 id=alphabetic><span class=secno>1.1.3. </span> alphabetic</h4> 1.100 1.101 - <p>If the type is <a href="#alphabetic">alphabetic</a>, the ‘<a 1.102 + <p>If the type is <dfn id=alphabetic0>alphabetic</dfn>, the ‘<a 1.103 href="#descdef-symbols"><code class=property>symbols</code></a>’ 1.104 descriptor must contain at least two <a href="#counter-symbol"><i>counter 1.105 symbol</i></a>s. This type is defined only over strictly positive counter 1.106 values. 1.107 1.108 - <p>The <i>alphabetic</i> counter type interprets the list of <i>counter 1.109 - symbols</i> as digits to an <em>alphabetic</em> numbering system, similar 1.110 - to the default ‘<a href="#lower-alpha"><code 1.111 + <p>The <a href="#alphabetic0"><i>alphabetic</i></a> counter type interprets 1.112 + the list of <i>counter symbols</i> as digits to an <a 1.113 + href="#alphabetic0"><em>alphabetic</em></a> numbering system, similar to 1.114 + the default ‘<a href="#lower-alpha"><code 1.115 class=css>lower-alpha</code></a>’ counter style. Alphabetic numbering 1.116 systems are commonly used for lists, and also appear in many spreadsheet 1.117 programs to number columns. The first <a href="#counter-symbol"><i>counter 1.118 @@ -612,20 +615,21 @@ 1.119 1.120 <h4 id=symbolic><span class=secno>1.1.4. </span> symbolic</h4> 1.121 1.122 - <p>If the type is <a href="#symbolic">symbolic</a>, the ‘<a 1.123 + <p>If the type is <dfn id=symbolic0>symbolic</dfn>, the ‘<a 1.124 href="#descdef-symbols"><code class=property>symbols</code></a>’ 1.125 descriptor must contain at least one <a href="#counter-symbol"><i>counter 1.126 symbol</i></a>. This type is defined only over strictly positive counter 1.127 values. 1.128 1.129 - <p>The <i>symbolic</i> counter type cycles repeatedly through its provided 1.130 - symbols, doubling, tripling, etc. the symbols on each successive pass 1.131 - through the list. For example, if the original symbols were "*" and "†", 1.132 - then on the second pass they would instead be "**" and "††", while on 1.133 - the third they would be "***" and "†††", etc. It can be used for 1.134 - footnote-style markers, and is also sometimes used for alphabetic-style 1.135 - lists for a slightly different presentation than what the 1.136 - <i>alphabetic</i> type presents. 1.137 + <p>The <a href="#symbolic0"><i>symbolic</i></a> counter type cycles 1.138 + repeatedly through its provided symbols, doubling, tripling, etc. the 1.139 + symbols on each successive pass through the list. For example, if the 1.140 + original symbols were "*" and "†", then on the second pass they would 1.141 + instead be "**" and "††", while on the third they would be "***" and 1.142 + "†††", etc. It can be used for footnote-style markers, and is also 1.143 + sometimes used for alphabetic-style lists for a slightly different 1.144 + presentation than what the <a href="#alphabetic0"><i>alphabetic</i></a> 1.145 + type presents. 1.146 1.147 <p>To construct the representation, run the following algorithm. Let 1.148 <var>length</var> be the length of the list of <a 1.149 @@ -693,17 +697,17 @@ 1.150 this style jumps up to the triple digits with "AAA", "BBB", "CCC", etc. 1.151 </div> 1.152 1.153 - <p>The <i>symbolic</i> type will produce representations with sizes that 1.154 - are linear in the magnitude of the counter value. This can potentially be 1.155 - abused to generate excessively large representations and consume undue 1.156 - amounts of the user's memory or even hang their browser. User agents must 1.157 - support representations at least 20 characters long, but they may choose 1.158 - to instead use the fallback style for representations that would be longer 1.159 - than 20 characters. 1.160 + <p>The <a href="#symbolic0"><i>symbolic</i></a> type will produce 1.161 + representations with sizes that are linear in the magnitude of the counter 1.162 + value. This can potentially be abused to generate excessively large 1.163 + representations and consume undue amounts of the user's memory or even 1.164 + hang their browser. User agents must support representations at least 20 1.165 + characters long, but they may choose to instead use the fallback style for 1.166 + representations that would be longer than 20 characters. 1.167 1.168 <h4 id=non-repeating><span class=secno>1.1.5. </span> non-repeating</h4> 1.169 1.170 - <p>If the type is <a href="#non-repeating">non-repeating</a>, the ‘<a 1.171 + <p>If the type is <dfn id=non-repeating0>non-repeating</dfn>, the ‘<a 1.172 href="#descdef-symbols"><code class=property>symbols</code></a>’ 1.173 descriptor must contain at least one <a href="#counter-symbol"><i>counter 1.174 symbol</i></a>. This type is defined over counter values in a finite 1.175 @@ -711,10 +715,10 @@ 1.176 value</i></a> and having a length equal to the length of the list of <a 1.177 href="#counter-symbol"><i>counter symbol</i></a>s. 1.178 1.179 - <p>The <i>non-repeating</i> counter type is for representing counter styles 1.180 - that only have a finite number of representations. For example, Unicode 1.181 - defines several limited-length runs of special characters meant for lists, 1.182 - such as circled digits. 1.183 + <p>The <a href="#non-repeating0"><i>non-repeating</i></a> counter type is 1.184 + for representing counter styles that only have a finite number of 1.185 + representations. For example, Unicode defines several limited-length runs 1.186 + of special characters meant for lists, such as circled digits. 1.187 1.188 <p>When this type is specified, it may optionally have an integer provided 1.189 after it, which sets the <dfn id=first-symbol-value>first symbol 1.190 @@ -754,19 +758,19 @@ 1.191 1.192 <h4 id=additive><span class=secno>1.1.6. </span> additive</h4> 1.193 1.194 - <p>If the type is <a href="#additive">additive</a>, the ‘<a 1.195 + <p>If the type is <dfn id=additive0>additive</dfn>, the ‘<a 1.196 href="#descdef-additive-symbols"><code 1.197 class=property>additive-symbols</code></a>’ descriptor must contain at 1.198 least one <a href="#additive-tuple"><i>additive tuple</i></a>. This type 1.199 is nominally defined over all counter values (see algorithm, below, for 1.200 exact details) 1.201 1.202 - <p>The <i>additive</i> counter type takes as many of the largest symbols 1.203 - that it can, then as many of the next largest symbol, etc. until the sum 1.204 - of all the symbols equals the counter value. It can be used to implement 1.205 - roman numerals, and additionally is used to represent the numbering system 1.206 - of several languages which use different characters for the digits in 1.207 - differnt positions. 1.208 + <p>The <a href="#additive0"><i>additive</i></a> counter type takes as many 1.209 + of the largest symbols that it can, then as many of the next largest 1.210 + symbol, etc. until the sum of all the symbols equals the counter value. It 1.211 + can be used to implement roman numerals, and additionally is used to 1.212 + represent the numbering system of several languages which use different 1.213 + characters for the digits in differnt positions. 1.214 1.215 <p>To construct the representation, run this algorithm. Let 1.216 <var>value</var> initially be the counter value, <var>S</var> initially be 1.217 @@ -836,25 +840,27 @@ 1.218 </pre> 1.219 </div> 1.220 1.221 - <p>The <i>additive</i> type will produce representations with sizes that 1.222 - are linear in the magnitude of the counter value. This can potentially be 1.223 - abused to generate excessively large representations and consume undue 1.224 - amounts of the user's memory or even hang their browser. User agents must 1.225 - support representations at least 20 characters long, but they may choose 1.226 - to instead use the fallback style for representations that would be longer 1.227 - than 20 characters. 1.228 + <p>The <a href="#additive0"><i>additive</i></a> type will produce 1.229 + representations with sizes that are linear in the magnitude of the counter 1.230 + value. This can potentially be abused to generate excessively large 1.231 + representations and consume undue amounts of the user's memory or even 1.232 + hang their browser. User agents must support representations at least 20 1.233 + characters long, but they may choose to instead use the fallback style for 1.234 + representations that would be longer than 20 characters. 1.235 1.236 <h4 id=override><span class=secno>1.1.7. </span> override</h4> 1.237 1.238 - <p>The <a href="#override">override</a> type allows an author to use the 1.239 + <p>The <dfn id=override0>override</dfn> type allows an author to use the 1.240 <i>algorithm</i> of another counter style, but alter other aspects, such 1.241 - as the negative sign or the suffix. If a counter style uses the 1.242 - <i>override</i> type, any unspecified descriptors must be taken from the 1.243 - specified counter style, rather than taking their initial values. 1.244 - 1.245 - <p>If a @counter-style uses the <i>override</i> type, it must not contain a 1.246 - ‘<a href="#descdef-symbols"><code class=property>symbols</code></a>’ 1.247 - or ‘<a href="#descdef-additive-symbols"><code 1.248 + as the negative sign or the suffix. If a counter style uses the <a 1.249 + href="#override0"><i>override</i></a> type, any unspecified descriptors 1.250 + must be taken from the specified counter style, rather than taking their 1.251 + initial values. 1.252 + 1.253 + <p>If a @counter-style uses the <a href="#override0"><i>override</i></a> 1.254 + type, it must not contain a ‘<a href="#descdef-symbols"><code 1.255 + class=property>symbols</code></a>’ or ‘<a 1.256 + href="#descdef-additive-symbols"><code 1.257 class=property>additive-symbols</code></a>’ descriptor; otherwise it is 1.258 invalid and must be ignored. If the specified counter style name isn't the 1.259 name of any currently-defined counter style, it must be treated as if it 1.260 @@ -997,16 +1003,18 @@ 1.261 the entire descriptor is invalid and must be ignored. 1.262 1.263 <p>If the value is ‘<code class=css>auto</code>’, the range depends on 1.264 - the counter type. For ‘<code class=css>repeating</code>’, ‘<code 1.265 - class=css>numeric</code>’, and ‘<code 1.266 - class=css>non-repeating</code>’ types, it must be treated identically to 1.267 - specifying ‘<code class=css>infinite infinite</code>’. For ‘<code 1.268 - class=css>alphabetic</code>’ and ‘<code class=css>symbolic</code>’, 1.269 - it must be treated identically to ‘<code class=css>1 infinite</code>’. 1.270 - For ‘<code class=css>additive</code>’, it must be treated identically 1.271 - to ‘<code class=css>0 infinite</code>’. For ‘<code 1.272 - class=css>override</code>’, it must be treated according to the type of 1.273 - the counter style it is overriding. 1.274 + the counter type. For ‘<a href="#repeating0"><code 1.275 + class=css>repeating</code></a>’, ‘<a href="#numeric0"><code 1.276 + class=css>numeric</code></a>’, and ‘<a href="#non-repeating0"><code 1.277 + class=css>non-repeating</code></a>’ types, it must be treated 1.278 + identically to specifying ‘<code class=css>infinite infinite</code>’. 1.279 + For ‘<a href="#alphabetic0"><code class=css>alphabetic</code></a>’ and 1.280 + ‘<a href="#symbolic0"><code class=css>symbolic</code></a>’, it must be 1.281 + treated identically to ‘<code class=css>1 infinite</code>’. For ‘<a 1.282 + href="#additive0"><code class=css>additive</code></a>’, it must be 1.283 + treated identically to ‘<code class=css>0 infinite</code>’. For ‘<a 1.284 + href="#override0"><code class=css>override</code></a>’, it must be 1.285 + treated according to the type of the counter style it is overriding. 1.286 1.287 <p>Some counter style types have their own implicit ranges, specified above 1.288 in the individual descriptions for each type. The explicit range given by 1.289 @@ -1067,10 +1075,11 @@ 1.290 values and one that can only represent even values, and specify each as 1.291 the fallback for the other one. Though the fallback graph is circular, at 1.292 no point do you encounter a loop while following these fallbacks - every 1.293 - counter value is represented by one or the other counter style. <span 1.294 - class=issue>Is it useful to allow this case? If it would be significantly 1.295 - easier for implementations to just detect and reject circular fallback 1.296 - graphs, that would probably be acceptable.</span> 1.297 + counter value is represented by one or the other counter style. 1.298 + 1.299 + <p class=issue>Is it useful to allow this case? If it would be 1.300 + significantly easier for implementations to just detect and reject 1.301 + circular fallback graphs, that would probably be acceptable. 1.302 1.303 <h3 id=counter-style-symbols><span class=secno>1.7. </span> Marker 1.304 characters: the ‘<a href="#descdef-symbols"><code 1.305 @@ -1122,12 +1131,15 @@ 1.306 ‘<a href="#descdef-type"><code class=property>type</code></a>’ 1.307 descriptor. The ‘<a href="#descdef-symbols"><code 1.308 class=property>symbols</code></a>’ descriptor must be specified if the 1.309 - counter type is <i>repeating</i>, <i>numeric</i>, <i>alphabetic</i>, 1.310 - <i>symbolic</i>, or <i>non-repeating</i>, and the ‘<a 1.311 + counter type is <a href="#repeating0"><i>repeating</i></a>, <a 1.312 + href="#numeric0"><i>numeric</i></a>, <a 1.313 + href="#alphabetic0"><i>alphabetic</i></a>, <a 1.314 + href="#symbolic0"><i>symbolic</i></a>, or <a 1.315 + href="#non-repeating0"><i>non-repeating</i></a>, and the ‘<a 1.316 href="#descdef-additive-symbols"><code 1.317 class=property>additive-symbols</code></a>’ descriptor must be specified 1.318 - if the counter type is <i>additive</i>; otherwise, the @counter-style is 1.319 - invalid and must be ignored. 1.320 + if the counter type is <a href="#additive0"><i>additive</i></a>; 1.321 + otherwise, the @counter-style is invalid and must be ignored. 1.322 1.323 <p>Some counter styles specify that the ‘<a href="#descdef-symbols"><code 1.324 class=property>symbols</code></a>’ descriptor must have at least two 1.325 @@ -1177,11 +1189,12 @@ 1.326 <pre><dfn 1.327 id=type-symbols-function><symbols-function></dfn> = symbols( <symbols-type>? [ <string> | <image> ]+ )</pre> 1.328 1.329 - <p> Where <symbols-type> is one of the following keywords: ‘<code 1.330 - class=css>repeating</code>’, ‘<code class=css>numeric</code>’, 1.331 - ‘<code class=css>alphabetic</code>’, ‘<code 1.332 - class=css>symbolic</code>’, or ‘<code 1.333 - class=css>non-repeating</code>’. 1.334 + <p> Where <symbols-type> is one of the following keywords: ‘<a 1.335 + href="#repeating0"><code class=css>repeating</code></a>’, ‘<a 1.336 + href="#numeric0"><code class=css>numeric</code></a>’, ‘<a 1.337 + href="#alphabetic0"><code class=css>alphabetic</code></a>’, ‘<a 1.338 + href="#symbolic0"><code class=css>symbolic</code></a>’, or ‘<a 1.339 + href="#non-repeating0"><code class=css>non-repeating</code></a>’. 1.340 1.341 <p> The ‘<a href="#descdef-symbols"><code 1.342 class=css>symbols()</code></a>’ function defines an anonymous counter 1.343 @@ -1196,12 +1209,13 @@ 1.344 title=counter-negative>negative sign</i></a> of "\2D" ("-" hyphen-minus). 1.345 The counter style's <a href="#algorithm"><i 1.346 title=counter-algorithm>algorithm</i></a> is constructed by consulting the 1.347 - previous chapter using the provided type - or ‘<code 1.348 - class=css>symbolic</code>’ if the type was omitted - and the provided 1.349 - <string>s and <image>s as the value of the ‘<a 1.350 - href="#descdef-symbols"><code class=property>symbols</code></a>’ 1.351 - property. If the type is ‘<code class=css>non-repeating</code>’, the 1.352 - <a href="#first-symbol-value"><i>first symbol value</i></a> is ‘<code 1.353 + previous chapter using the provided type - or ‘<a 1.354 + href="#symbolic0"><code class=css>symbolic</code></a>’ if the type was 1.355 + omitted - and the provided <string>s and <image>s as the value of 1.356 + the ‘<a href="#descdef-symbols"><code 1.357 + class=property>symbols</code></a>’ property. If the type is ‘<a 1.358 + href="#non-repeating0"><code class=css>non-repeating</code></a>’, the <a 1.359 + href="#first-symbol-value"><i>first symbol value</i></a> is ‘<code 1.360 class=css>1</code>’. 1.361 1.362 <div class=example> 1.363 @@ -1269,8 +1283,9 @@ 1.364 1.365 <p> The following stylesheet uses the ‘<code 1.366 class=css>@counter-style</code>’ rule to redefine all of the counter 1.367 - styles defined in CSS 2 and CSS 2.1, plus This stylesheet is normative - 1.368 - UAs must include it in their UA stylesheet. 1.369 + styles defined in CSS 2 and CSS 2.1. This stylesheet is normative - UAs 1.370 + must include it in their UA stylesheet (or at least act as if these rules 1.371 + were defined at that level). 1.372 1.373 <h3 id=simple-numeric><span class=secno>3.1. </span> Numeric: ‘<a 1.374 href="#decimal"><code class=css>decimal</code></a>’, ‘<a 1.375 @@ -1283,9 +1298,8 @@ 1.376 href="#georgian"><code class=css>georgian</code></a>’, ‘<a 1.377 href="#hebrew"><code class=css>hebrew</code></a>’</h3> 1.378 1.379 - <pre style="white-space: pre-wrap;"><bdo> 1.380 -@counter-style <dfn 1.381 - id=decimal>decimal</dfn> { 1.382 + <pre class=stylesheet><bdo> 1.383 +@counter-style <dfn id=decimal>decimal</dfn> { 1.384 type: numeric; 1.385 symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 1.386 } 1.387 @@ -1357,7 +1371,7 @@ 1.388 href="#katakana"><code class=css>katakana</code></a>’, ‘<a 1.389 href="#katakana-iroha"><code class=css>katakana-iroha</code></a>’</h3> 1.390 1.391 - <pre style="white-space: pre-wrap;"><bdo> 1.392 + <pre class=stylesheet><bdo> 1.393 @counter-style <dfn 1.394 id=lower-alpha>lower-alpha</dfn> { 1.395 type: alphabetic; 1.396 @@ -1424,7 +1438,7 @@ 1.397 href="#circle"><code class=css>circle</code></a>’, ‘<a 1.398 href="#square"><code class=css>square</code></a>’</h3> 1.399 1.400 - <p>In addition to the above styles, UAs must define three counter styles 1.401 + <p> In addition to the above styles, UAs must define three counter styles 1.402 named ‘<a href="#disc"><code class=css>disc</code></a>’, ‘<a 1.403 href="#circle"><code class=css>circle</code></a>’, and ‘<a 1.404 href="#square"><code class=css>square</code></a>’. They must do so 1.405 @@ -1432,14 +1446,14 @@ 1.406 rendering the bullets with a browser-generated image matching the 1.407 descriptions below the stylesheet. 1.408 1.409 - <p>If a browser chooses to render these counter styles by generating 1.410 + <p> If a browser chooses to render these counter styles by generating 1.411 images, the images must be sized to attractively fill a 1em by 1em 1.412 rectangle. As well, the styles must still be overrideable by a later 1.413 ‘<code class=css>@counter-style</code>’ rule defining a counter style 1.414 of the same name, as if they were defined by a ‘<code 1.415 class=css>@counter-style</code>’ rule in the UA stylesheet. 1.416 1.417 - <pre> 1.418 + <pre class=stylesheet> 1.419 @counter-style <dfn id=disc>disc</dfn> { 1.420 type: repeating; 1.421 symbols: \2022; 1.422 @@ -1481,21 +1495,19 @@ 1.423 <h2 id=complex-predefined-counters><span class=secno>4. </span> Complex 1.424 Predefined Counter Styles</h2> 1.425 1.426 - <p>While authors may define their own counter styles using the ‘<code 1.427 - class=css>@counter-style</code>’ rule defined in the Lists spec <a 1.428 - href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a> or 1.429 - rely on the set of <a href="#ua-stylesheet">predefined counter styles</a>, 1.430 - a few counter styles are described by rules that are too complex to be 1.431 - captured by the predefined algorithms. These counter styles are described 1.432 - in this section. 1.433 - 1.434 - <p>The counter styles specified in this section have custom <a 1.435 + <p> While authors may define their own counter styles using the ‘<code 1.436 + class=css>@counter-style</code>’ rule or rely on the set of <a 1.437 + href="#ua-stylesheet">predefined counter styles</a>, a few counter styles 1.438 + are described by rules that are too complex to be captured by the 1.439 + predefined algorithms. These counter styles are described in this section. 1.440 + 1.441 + <p> Some of the counter styles specified in this section have custom <a 1.442 href="#algorithm"><i title=counter-algorithm>algorithms for generating 1.443 counter values</i></a>, but are otherwise identical to a counter style 1.444 - defined via the ‘<code class=css>@counter-style</code>’ rule, 1.445 - described below. For example, an author can reference one of these styles 1.446 - in an ‘<code class=property>override</code>’ type, reusing the 1.447 - algorithm but swapping out some of the other descriptors. 1.448 + defined via the ‘<code class=css>@counter-style</code>’ rule. For 1.449 + example, an author can reference one of these styles in an ‘<a 1.450 + href="#override0"><code class=property>override</code></a>’ type, 1.451 + reusing the algorithm but swapping out some of the other descriptors. 1.452 1.453 <h3 id=complex-cjk><span class=secno>4.1. </span> Longhand East Asian 1.454 Counter Styles: ‘<a href="#japanese-informal0"><code 1.455 @@ -1516,20 +1528,36 @@ 1.456 href="#trad-chinese-formal0"><code 1.457 class=css>trad-chinese-formal</code></a>’</h3> 1.458 1.459 - <p>Chinese, Japanese, and Korean have longhand counter styles, which have a 1.460 - structure similar to "one hundred thirteen thousand and twenty-three" in 1.461 + <p> Chinese, Japanese, and Korean have longhand counter styles, which have 1.462 + a structure similar to "one hundred thirteen thousand and twenty-three" in 1.463 English. Each has both formal and informal variants. The formal styles are 1.464 typically used in financial and legal documents, as their characters are 1.465 - more difficult to alter. 1.466 - 1.467 - <p class=issue> Rewrite this intro. 1.468 + more difficult to alter into each other. 1.469 + 1.470 + <p> Some of the counter styles can, if limited to a reasonable range, be 1.471 + expressed as ‘<code class=css>@counter-style</code>’ rules. As such, 1.472 + this section is split into two pieces: a required section defining the 1.473 + styles over this limited range, and an optional section defining them over 1.474 + a much larger range that requires custom algorithms for all of the styles. 1.475 1.476 <dl> 1.477 <dt>japanese-informal 1.478 1.479 <dd>description and example of this style 1.480 1.481 - <dt>... 1.482 + <dt>japanese-formal 1.483 + 1.484 + <dd>... 1.485 + 1.486 + <dt>korean-hangul-formal 1.487 + 1.488 + <dd>... 1.489 + 1.490 + <dt>korean-hanja-informal 1.491 + 1.492 + <dd>... 1.493 + 1.494 + <dt>korean-hanja-formal 1.495 1.496 <dd>... 1.497 1.498 @@ -1562,8 +1590,9 @@ 1.499 1.500 <h5 class="no-num no-toc" id=limited-japanese> Japanese</h5> 1.501 1.502 - <pre> 1.503 -@counter-style <dfn id=japanese-informal>japanese-informal</dfn> { 1.504 + <pre class=stylesheet> 1.505 +@counter-style <dfn 1.506 + id=japanese-informal>japanese-informal</dfn> { 1.507 type: additive; 1.508 range: 0 9999; 1.509 additive-symbols: 9000 \4E5D\5343, 8000 \516B\5343, 7000 \4E03\5343, 6000 \516D\5343, 5000 \4E94\5343, 4000 \56DB\5343, 3000 \4E09\5343, 2000 \4E8C\5343, 1000 \5343, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4E94\767E, 400 \56DB\767E, 300 \4E09\767E, 200 \4E8C\767E, 100 \767E, 90 \4E5D\5341, 80 \516B\5341, 70 \4E03\5341, 60 \516D\5341, 50 \4E94\5341, 40 \56DB\5341, 30 \4E09\5341, 20 \4E8C\5341, 10 \5341, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4E94, 4 \56DB, 3 \4E09, 2 \4E8C, 1 \4E00, 0 \3007; 1.510 @@ -1586,7 +1615,7 @@ 1.511 1.512 <h5 class="no-num no-toc" id=limited-korean> Korean</h5> 1.513 1.514 - <pre> 1.515 + <pre class=stylesheet> 1.516 @counter-style <dfn 1.517 id=korean-hangul-formal>korean-hangul-formal</dfn> { 1.518 type: additive; 1.519 @@ -1890,7 +1919,7 @@ 1.520 serve to represent ‘<a href="#simp-chinese-informal0"><code 1.521 class=css>simp-chinese-informal</code></a>’ between 0 and 999: 1.522 1.523 - <pre> 1.524 + <pre class=stylesheet> 1.525 @counter-style simp-chinese-informal { 1.526 type: non-repeating 101; 1.527 fallback: simp-chinese-informal-200; 1.528 @@ -1948,10 +1977,10 @@ 1.529 1.530 <p>The Chinese longhand styles are defined out to 10k with a <a 1.531 href="#cjk-counter-styles">specialized algorithm</a>, while the Japanese 1.532 - and Korean longhand styles are defined similarly as <i>additive</i> 1.533 - styles. However, these styles are defined out to 10<sup>16</sup> in common 1.534 - usage. The following section describes an alternative algorithm for these 1.535 - styles. 1.536 + and Korean longhand styles are defined similarly as <a 1.537 + href="#additive0"><i>additive</i></a> styles. However, these styles are 1.538 + defined out to 10<sup>16</sup> in common usage. The following section 1.539 + describes an alternative algorithm for these styles. 1.540 1.541 <p>The Chinese and Japanese styles are defined for all numbers between 1.542 -10<sup>16</sup> and 10<sup>16</sup>, exclusive; the Korean styles are
2.1 --- a/css-counter-styles/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 2.2 +++ b/css-counter-styles/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 2.3 @@ -4,7 +4,7 @@ 2.4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 2.5 <link rel="stylesheet" type="text/css" href="../default.css"> 2.6 <style> 2.7 - pre > code { white-space: pre-wrap; } 2.8 + pre.stylesheet { white-space: pre-wrap; } 2.9 </style> 2.10 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED"> 2.11 </head><body> 2.12 @@ -66,10 +66,10 @@ 2.13 Unfortunately, the set of potentially useful list styles is too large to specify ahead of time - 2.14 the world contains thousands of languages and hundreds of scripts, 2.15 not to mention the near-infinite stylistic variations found on the web that go beyond mere language-based variation. 2.16 - The ''@counter-style'' rule allows CSS to address this in an open-ended manner, 2.17 - by allowing the author to define their own counter styles. 2.18 - These styles can then be used in the 'list-style-type' property 2.19 - or in the <code title='counter-function'>counter()</code> and <code title='counters-function'>counters()</code> functions. 2.20 + The ''@counter-style'' rule allows CSS to address this in an open-ended manner, 2.21 + by allowing the author to define their own counter styles. 2.22 + These styles can then be used in the 'list-style-type' property 2.23 + or in the <code title='counter-function'>counter()</code> and <code title='counters-function'>counters()</code> functions. 2.24 2.25 <p> 2.26 A <dfn>counter style</dfn> defines how to construct the representation of a counter value. 2.27 @@ -197,7 +197,7 @@ 2.28 2.29 <p>The 'type' descriptor specifies which algorithm will be used to construct 2.30 the counter's representation based on the counter value. For example, 2.31 - ''repeating'' type counter styles just cycle through their symbols repeatedly, 2.32 + <i>repeating</i> type counter styles just cycle through their symbols repeatedly, 2.33 while <i>numeric</i> type counter styles interpret their symbols as digits and 2.34 build their representation accordingly. The types are defined as follows: 2.35 2.36 @@ -205,7 +205,7 @@ 2.37 <h4> 2.38 repeating</h4> 2.39 2.40 - <p>If the type is <a href=#repeating>repeating</a>, the 'symbols' descriptor must contain 2.41 + <p>If the type is <dfn>repeating</dfn>, the 'symbols' descriptor must contain 2.42 at least one <i>counter symbol</i>. This type is defined over all counter 2.43 values. 2.44 2.45 @@ -246,7 +246,7 @@ 2.46 <h4> 2.47 numeric</h4> 2.48 2.49 - <p>If the type is <a href=#numeric>numeric</a>, the 'symbols' descriptor must contain at 2.50 + <p>If the type is <dfn>numeric</dfn>, the 'symbols' descriptor must contain at 2.51 least two <i>counter symbol</i>s. This type is defined over all counter 2.52 values. 2.53 2.54 @@ -311,7 +311,7 @@ 2.55 <h4> 2.56 alphabetic</h4> 2.57 2.58 - <p>If the type is <a href=#alphabetic>alphabetic</a>, the 'symbols' descriptor must contain 2.59 + <p>If the type is <dfn>alphabetic</dfn>, the 'symbols' descriptor must contain 2.60 at least two <i>counter symbol</i>s. This type is defined only over 2.61 strictly positive counter values. 2.62 2.63 @@ -410,7 +410,7 @@ 2.64 <h4> 2.65 symbolic</h4> 2.66 2.67 - <p>If the type is <a href=#symbolic>symbolic</a>, the 'symbols' descriptor must contain at 2.68 + <p>If the type is <dfn>symbolic</dfn>, the 'symbols' descriptor must contain at 2.69 least one <i>counter symbol</i>. This type is defined only over strictly positive 2.70 counter values. 2.71 2.72 @@ -487,7 +487,7 @@ 2.73 <h4> 2.74 non-repeating</h4> 2.75 2.76 - <p>If the type is <a href=#non-repeating>non-repeating</a>, the 'symbols' descriptor must contain 2.77 + <p>If the type is <dfn>non-repeating</dfn>, the 'symbols' descriptor must contain 2.78 at least one <i>counter symbol</i>. This type is defined over counter 2.79 values in a finite range, starting with the <i>first symbol value</i> 2.80 and having a length equal to the length of the list of <i>counter symbol</i>s. 2.81 @@ -534,7 +534,7 @@ 2.82 <h4> 2.83 additive</h4> 2.84 2.85 - <p>If the type is <a href=#additive>additive</a>, the 'additive-symbols' descriptor must 2.86 + <p>If the type is <dfn>additive</dfn>, the 'additive-symbols' descriptor must 2.87 contain at least one <i>additive tuple</i>. This type is nominally 2.88 defined over all counter values (see algorithm, below, for exact details) 2.89 2.90 @@ -611,7 +611,7 @@ 2.91 <h4> 2.92 override</h4> 2.93 2.94 - <p>The <a href=#override>override</a> type allows an author to use the <i>algorithm</i> of another counter style, but alter other aspects, such as the negative sign or the suffix. If a counter style uses the <i>override</i> type, any unspecified descriptors must be taken from the specified counter style, rather than taking their initial values. 2.95 + <p>The <dfn>override</dfn> type allows an author to use the <i>algorithm</i> of another counter style, but alter other aspects, such as the negative sign or the suffix. If a counter style uses the <i>override</i> type, any unspecified descriptors must be taken from the specified counter style, rather than taking their initial values. 2.96 2.97 <p>If a @counter-style uses the <i>override</i> type, it must not contain a 2.98 'symbols' or 'additive-symbols' descriptor; otherwise it is invalid and must 2.99 @@ -760,7 +760,9 @@ 2.100 can only represent even values, and specify each as the fallback for the 2.101 other one. Though the fallback graph is circular, at no point do you encounter 2.102 a loop while following these fallbacks - every counter value is represented 2.103 - by one or the other counter style. <span class='issue'>Is it useful to allow 2.104 + by one or the other counter style. 2.105 + 2.106 + <p class='issue'>Is it useful to allow 2.107 this case? If it would be significantly easier for implementations to just 2.108 detect and reject circular fallback graphs, that would probably be acceptable.</span> 2.109 2.110 @@ -921,17 +923,17 @@ 2.111 Simple Predefined Counter Styles</h2> 2.112 2.113 <p> 2.114 - The following stylesheet uses the ''@counter-style'' rule 2.115 - to redefine all of the counter styles defined in CSS 2 and CSS 2.1, 2.116 - plus 2.117 - This stylesheet is normative - 2.118 - UAs must include it in their UA stylesheet. 2.119 + The following stylesheet uses the ''@counter-style'' rule 2.120 + to redefine all of the counter styles defined in CSS 2 and CSS 2.1. 2.121 + This stylesheet is normative - 2.122 + UAs must include it in their UA stylesheet 2.123 + (or at least act as if these rules were defined at that level). 2.124 2.125 2.126 <h3 id='simple-numeric'> 2.127 Numeric: ''decimal'', ''decimal-leading-zero'', ''cjk-decimal'', ''lower-roman'', ''upper-roman'', ''armenian'', ''georgian'', ''hebrew''</h3> 2.128 2.129 - <pre style="white-space: pre-wrap;"><bdo> 2.130 + <pre class='stylesheet'><bdo> 2.131 @counter-style <dfn>decimal</dfn> { 2.132 type: numeric; 2.133 symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 2.134 @@ -990,7 +992,7 @@ 2.135 <h3 id='simple-alphabetic'> 2.136 Alphabetic: ''lower-alpha'', ''lower-latin'', ''upper-alpha'', ''upper-latin'', ''lower-greek'', ''hiragana'', ''hiragana-iroha'', ''katakana'', ''katakana-iroha''</h3> 2.137 2.138 - <pre style="white-space: pre-wrap;"><bdo> 2.139 + <pre class='stylesheet'><bdo> 2.140 @counter-style <dfn>lower-alpha</dfn> { 2.141 type: alphabetic; 2.142 symbols: a b c d e f g h i j k l m n o p q r s t u v w x y z; 2.143 @@ -1047,11 +1049,20 @@ 2.144 <h3 id='simple-symbolic'> 2.145 Symbolic: ''disc'', ''circle'', ''square''</h3> 2.146 2.147 - <p>In addition to the above styles, UAs must define three counter styles named ''disc'', ''circle'', and ''square''. They must do so either by including the following stylesheet in their UA stylesheet, or by rendering the bullets with a browser-generated image matching the descriptions below the stylesheet. 2.148 - 2.149 - <p>If a browser chooses to render these counter styles by generating images, the images must be sized to attractively fill a 1em by 1em rectangle. As well, the styles must still be overrideable by a later ''@counter-style'' rule defining a counter style of the same name, as if they were defined by a ''@counter-style'' rule in the UA stylesheet. 2.150 - 2.151 - <pre> 2.152 + <p> 2.153 + In addition to the above styles, 2.154 + UAs must define three counter styles named ''disc'', ''circle'', and ''square''. 2.155 + They must do so either by including the following stylesheet in their UA stylesheet, 2.156 + or by rendering the bullets with a browser-generated image matching the descriptions below the stylesheet. 2.157 + 2.158 + <p> 2.159 + If a browser chooses to render these counter styles by generating images, 2.160 + the images must be sized to attractively fill a 1em by 1em rectangle. 2.161 + As well, the styles must still be overrideable by a later ''@counter-style'' rule 2.162 + defining a counter style of the same name, 2.163 + as if they were defined by a ''@counter-style'' rule in the UA stylesheet. 2.164 + 2.165 + <pre class='stylesheet'> 2.166 @counter-style <dfn>disc</dfn> { 2.167 type: repeating; 2.168 symbols: \2022; 2.169 @@ -1090,38 +1101,54 @@ 2.170 <h2 id='complex-predefined-counters'> 2.171 Complex Predefined Counter Styles</h2> 2.172 2.173 - <p>While authors may define their own counter styles using the ''@counter-style'' 2.174 - rule defined in the Lists spec [[!CSS3LIST]] or rely on the set of 2.175 - <a href='#ua-stylesheet'>predefined counter styles</a>, a few counter styles are 2.176 - described by rules that are too complex to be captured by the predefined algorithms. 2.177 - These counter styles are described in this section. 2.178 - 2.179 - <p>The counter styles specified in this section have custom 2.180 - <i title='counter-algorithm'>algorithms for generating counter values</i>, but are 2.181 - otherwise identical to a counter style defined via the ''@counter-style'' rule, 2.182 - described below. For example, an author can reference one of these styles in an 2.183 - 'override' type, reusing the algorithm but swapping out some of the other descriptors. 2.184 + <p> 2.185 + While authors may define their own counter styles using the ''@counter-style'' rule 2.186 + or rely on the set of <a href='#ua-stylesheet'>predefined counter styles</a>, 2.187 + a few counter styles are described by rules that are too complex to be captured by the predefined algorithms. 2.188 + These counter styles are described in this section. 2.189 + 2.190 + <p> 2.191 + Some of the counter styles specified in this section 2.192 + have custom <i title='counter-algorithm'>algorithms for generating counter values</i>, 2.193 + but are otherwise identical to a counter style defined via the ''@counter-style'' rule. 2.194 + For example, an author can reference one of these styles in an 'override' type, 2.195 + reusing the algorithm but swapping out some of the other descriptors. 2.196 2.197 2.198 <h3 id='complex-cjk'> 2.199 Longhand East Asian Counter Styles: ''japanese-informal'', ''japanese-formal'', ''korean-hangul-formal'', ''korean-hanja-informal'', ''korean-hanja-formal'', ''simp-chinese-informal'', ''simp-chinese-formal'', ''trad-chinese-informal'', ''trad-chinese-formal''</h3> 2.200 2.201 - <p>Chinese, Japanese, and Korean have longhand counter styles, which have 2.202 - a structure similar to "one hundred thirteen thousand and twenty-three" in 2.203 - English. Each has both formal and informal variants. 2.204 - The formal styles are typically used in financial and legal documents, as 2.205 - their characters are more difficult to alter. 2.206 - 2.207 - <p class='issue'> 2.208 - Rewrite this intro. 2.209 + <p> 2.210 + Chinese, Japanese, and Korean have longhand counter styles, 2.211 + which have a structure similar to "one hundred thirteen thousand and twenty-three" in English. 2.212 + Each has both formal and informal variants. 2.213 + The formal styles are typically used in financial and legal documents, 2.214 + as their characters are more difficult to alter into each other. 2.215 + 2.216 + <p> 2.217 + Some of the counter styles can, 2.218 + if limited to a reasonable range, 2.219 + be expressed as ''@counter-style'' rules. 2.220 + As such, this section is split into two pieces: 2.221 + a required section defining the styles over this limited range, 2.222 + and an optional section defining them over a much larger range 2.223 + that requires custom algorithms for all of the styles. 2.224 2.225 <dl> 2.226 <dt>japanese-informal 2.227 <dd>description and example of this style 2.228 2.229 - <dt>... 2.230 + <dt>japanese-formal 2.231 <dd>... 2.232 2.233 + <dt>korean-hangul-formal 2.234 + <dd>... 2.235 + 2.236 + <dt>korean-hanja-informal 2.237 + <dd>... 2.238 + 2.239 + <dt>korean-hanja-formal 2.240 + <dd>... 2.241 2.242 <dt>simp-chinese-informal 2.243 <dd>The simplified Chinese informal style. 2.244 @@ -1147,7 +1174,7 @@ 2.245 <h5 id='limited-japanese' class="no-num no-toc"> 2.246 Japanese</h5> 2.247 2.248 - <pre> 2.249 + <pre class='stylesheet'> 2.250 @counter-style <dfn>japanese-informal</dfn> { 2.251 type: additive; 2.252 range: 0 9999; 2.253 @@ -1172,7 +1199,7 @@ 2.254 <h5 id=limited-korean class="no-num no-toc"> 2.255 Korean</h5> 2.256 2.257 -<pre> 2.258 + <pre class='stylesheet'> 2.259 @counter-style <dfn>korean-hangul-formal</dfn> { 2.260 type: additive; 2.261 range: 0 9999; 2.262 @@ -1392,7 +1419,7 @@ 2.263 <div class='issue'> 2.264 <p>It's possible, with some fallback hackery, to represent these styles with a @counter-style rule. For example, the following 11 styles would serve to represent ''simp-chinese-informal'' between 0 and 999: 2.265 2.266 - <pre> 2.267 + <pre class='stylesheet'> 2.268 @counter-style simp-chinese-informal { 2.269 type: non-repeating 101; 2.270 fallback: simp-chinese-informal-200;
3.1 --- a/css3-animations/Overview.html Fri Sep 21 16:00:07 2012 -0700 3.2 +++ b/css3-animations/Overview.html Fri Sep 21 16:01:06 2012 -0700 3.3 @@ -1,12 +1,26 @@ 3.4 <!DOCTYPE html> 3.5 3.6 <html lang=en> 3.7 - <head> 3.8 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 3.9 <title>CSS Animations</title> 3.10 + 3.11 + <link href="http://purl.org/dc/terms/" rel=schema.DC> 3.12 + <meta content="CSS Animations" name=DC.title> 3.13 + <meta content=text name=DC.type> 3.14 + <meta content=2012-09-20 name=DC.issued> 3.15 + <meta content="http://dev.w3.org/csswg/css3-animations/" name=DC.creator> 3.16 + <meta content=W3C name=DC.publisher> 3.17 + <meta content="http://www.w3.org/TR/2012/ED-css3-animations-20120920/" 3.18 + name=DC.identifier> 3.19 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 3.20 + rel=DC.rights> 3.21 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 3.22 <link href="../default.css" rel=stylesheet type="text/css"> 3.23 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 3.24 - type="text/css"> 3.25 + type="text/css"> 3.26 + <style type="text/css"> 3.27 + div.prod { margin: 1em 2em; } 3.28 + </style> 3.29 3.30 <body> 3.31 <div class=head> <!--begin-logo--> 3.32 @@ -15,26 +29,25 @@ 3.33 3.34 <h1>CSS Animations</h1> 3.35 3.36 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 August 2012</h2> 3.37 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 September 3.38 + 2012</h2> 3.39 3.40 <dl> 3.41 <dt>This version: 3.42 3.43 <dd><a 3.44 - href="http://www.w3.org/TR/2012/ED-css3-animations-20120808/">http://dev.w3.org/csswg/css3-animations/</a> 3.45 - <!--http://www.w3.org/TR/2012/WD-css3-animations-20120808/--> 3.46 + href="http://www.w3.org/TR/2012/ED-css3-animations-20120920/">http://dev.w3.org/csswg/css3-animations/</a> 3.47 + <!--http://www.w3.org/TR/2012/WD-css3-animations-20120920/--> 3.48 3.49 <dt>Latest version: 3.50 3.51 <dd><a 3.52 href="http://www.w3.org/TR/css3-animations/">http://www.w3.org/TR/css3-animations/</a> 3.53 - 3.54 3.55 <dt>Editor's draft: 3.56 3.57 <dd><a 3.58 href="http://dev.w3.org/csswg/css3-animations/">http://dev.w3.org/csswg/css3-animations/</a> 3.59 - 3.60 3.61 <dt>Previous version: 3.62 3.63 @@ -571,7 +584,7 @@ 3.64 the lists of values for the other animation properties do not have the 3.65 same length, the length of the ‘<a href="#animation-name"><code 3.66 class=property>animation-name</code></a>’ list determines the number of 3.67 - items in each list examined when starting transitions. The lists are 3.68 + items in each list examined when starting animations. The lists are 3.69 matched up from the first value: excess values at the end are not used. If 3.70 one of the other properties doesn't have enough comma-separated values to 3.71 match the number of values of ‘<a href="#animation-name"><code 3.72 @@ -594,7 +607,9 @@ 3.73 <tr> 3.74 <th><a href="#values">Value</a>: 3.75 3.76 - <td>[ none | IDENT ] [, [ none | IDENT ] ]* 3.77 + <td><a href="#single-animation-name"><single-animation-name></a> [ 3.78 + ‘<code class=css>,</code>’ <a 3.79 + href="#single-animation-name"><single-animation-name></a> ]* 3.80 3.81 <tr> 3.82 <th>Initial: 3.83 @@ -612,9 +627,14 @@ 3.84 <td>no 3.85 3.86 <tr> 3.87 - <th>Computed Value: 3.88 - 3.89 - <td>As specified 3.90 + <th>Animatable: 3.91 + 3.92 + <td>no 3.93 + 3.94 + <tr> 3.95 + <th>Percentages: 3.96 + 3.97 + <td>N/A 3.98 3.99 <tr> 3.100 <th>Media: 3.101 @@ -622,9 +642,9 @@ 3.102 <td>visual 3.103 3.104 <tr> 3.105 - <th>Animatable: 3.106 - 3.107 - <td>no 3.108 + <th>Computed Value: 3.109 + 3.110 + <td>As specified 3.111 3.112 <tr> 3.113 <th>Canonical Order: 3.114 @@ -632,51 +652,55 @@ 3.115 <td><abbr title="follows order of property value definition">per 3.116 grammar</abbr> 3.117 </table> 3.118 + 3.119 + <div class=prod> <dfn 3.120 + id=single-animation-name><single-animation-name></dfn> = none | 3.121 + <IDENT></div> 3.122 <!-- 3.123 - <p> 3.124 - It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied. 3.125 - 3.126 - <div class="example"> 3.127 - <p style="display:none"> 3.128 - Example(s): 3.129 - 3.130 - <pre> 3.131 - @keyframes 'border-bloat' { 3.132 - from { 3.133 - border-width: 0; 3.134 - } 3.135 - to { 3.136 - border-width: 10px; 3.137 - } 3.138 - } 3.139 - 3.140 - @keyframes 'border-diet' { 3.141 - from { 3.142 - border-width: 4px; 3.143 - } 3.144 - to { 3.145 - border-width: 2px; 3.146 - } 3.147 - } 3.148 - 3.149 - div { 3.150 - animation-name: 'border-bloat', 'border-diet'; 3.151 - animation-duration: 10s, 4s; 3.152 - } 3.153 - </pre> 3.154 - <p> 3.155 - The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 3.156 - resulting value for the property will be the addition of the values from the 3.157 - two animations. 3.158 - 3.159 - <p> 3.160 - At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 3.161 - At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 3.162 - At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 3.163 - 'border-diet' as it is no longer executing). 3.164 - 3.165 - </div> 3.166 - --> 3.167 + <p> 3.168 + It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied. 3.169 + 3.170 + <div class="example"> 3.171 + <p style="display:none"> 3.172 + Example(s): 3.173 + 3.174 + <pre> 3.175 + @keyframes 'border-bloat' { 3.176 + from { 3.177 + border-width: 0; 3.178 + } 3.179 + to { 3.180 + border-width: 10px; 3.181 + } 3.182 + } 3.183 + 3.184 + @keyframes 'border-diet' { 3.185 + from { 3.186 + border-width: 4px; 3.187 + } 3.188 + to { 3.189 + border-width: 2px; 3.190 + } 3.191 + } 3.192 + 3.193 + div { 3.194 + animation-name: 'border-bloat', 'border-diet'; 3.195 + animation-duration: 10s, 4s; 3.196 + } 3.197 + </pre> 3.198 + <p> 3.199 + The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 3.200 + resulting value for the property will be the addition of the values from the 3.201 + two animations. 3.202 + 3.203 + <p> 3.204 + At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 3.205 + At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 3.206 + At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 3.207 + 'border-diet' as it is no longer executing). 3.208 + 3.209 + </div> 3.210 + --> 3.211 3.212 <h3 id=animation-duration-property><span class=secno>3.3. </span> The ‘<a 3.213 href="#animation-duration"><code 3.214 @@ -696,7 +720,7 @@ 3.215 <tr> 3.216 <th><a href="#values">Value</a>: 3.217 3.218 - <td> <time> [, <time>]* 3.219 + <td> <span><time></span> [, <span><time></span>]* 3.220 3.221 <tr> 3.222 <th>Initial: 3.223 @@ -714,9 +738,14 @@ 3.224 <td>no 3.225 3.226 <tr> 3.227 - <th>Computed Value: 3.228 - 3.229 - <td>as specified 3.230 + <th>Animatable: 3.231 + 3.232 + <td>no 3.233 + 3.234 + <tr> 3.235 + <th>Percentages: 3.236 + 3.237 + <td>N/A 3.238 3.239 <tr> 3.240 <th>Media: 3.241 @@ -724,9 +753,9 @@ 3.242 <td>visual 3.243 3.244 <tr> 3.245 - <th>Animatable: 3.246 - 3.247 - <td>no 3.248 + <th>Computed Value: 3.249 + 3.250 + <td>as specified 3.251 3.252 <tr> 3.253 <th>Canonical Order: 3.254 @@ -769,13 +798,11 @@ 3.255 <tr> 3.256 <th><a href="#values">Value</a>: 3.257 3.258 - <td> [ ease | linear | ease-in | ease-out | ease-in-out | step-start | 3.259 - step-end | steps(<number> [, [ start | end ] ]?) | 3.260 - cubic-bezier(<number>, <number>, <number>, 3.261 - <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out 3.262 - | step-start | step-end | steps(<number> [, [ start | end ] ]?) | 3.263 - cubic-bezier(<number>, <number>, <number>, 3.264 - <number>) ] ]* 3.265 + <td><a 3.266 + href="#single-animation-timing-function"><single-animation-timing-function></a> 3.267 + [ ‘<code class=css>,</code>’ <a 3.268 + href="#single-animation-timing-function"><single-animation-timing-function></a> 3.269 + ]* 3.270 3.271 <tr> 3.272 <th>Initial: 3.273 @@ -793,9 +820,14 @@ 3.274 <td>no 3.275 3.276 <tr> 3.277 - <th>Computed Value: 3.278 - 3.279 - <td>as specified 3.280 + <th>Animatable: 3.281 + 3.282 + <td>no 3.283 + 3.284 + <tr> 3.285 + <th>Percentages: 3.286 + 3.287 + <td>N/A 3.288 3.289 <tr> 3.290 <th>Media: 3.291 @@ -803,9 +835,9 @@ 3.292 <td>visual 3.293 3.294 <tr> 3.295 - <th>Animatable: 3.296 - 3.297 - <td>no 3.298 + <th>Computed Value: 3.299 + 3.300 + <td>as specified 3.301 3.302 <tr> 3.303 <th>Canonical Order: 3.304 @@ -814,6 +846,13 @@ 3.305 grammar</abbr> 3.306 </table> 3.307 3.308 + <div class=prod> <dfn 3.309 + id=single-animation-timing-function><single-animation-timing-function></dfn> 3.310 + = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end 3.311 + | steps(<number> [, [ start | end ] ]?) | 3.312 + cubic-bezier(<number>, <number>, <number>, 3.313 + <number>)</div> 3.314 + 3.315 <p> For a keyframed animation, the ‘<a 3.316 href="#animation-timing-function"><code 3.317 class=property>animation-timing-function</code></a>’ applies between 3.318 @@ -854,7 +893,11 @@ 3.319 <tr> 3.320 <th><a href="#values">Value</a>: 3.321 3.322 - <td> [ infinite | <number> ] [, [ infinite | <number> ] ]* 3.323 + <td><a 3.324 + href="#single-animation-iteration-count"><single-animation-iteration-count></a> 3.325 + [ ‘<code class=css>,</code>’ <a 3.326 + href="#single-animation-iteration-count"><single-animation-iteration-count></a> 3.327 + ]* 3.328 3.329 <tr> 3.330 <th>Initial: 3.331 @@ -872,9 +915,14 @@ 3.332 <td>no 3.333 3.334 <tr> 3.335 - <th>Computed Value: 3.336 - 3.337 - <td>as specified 3.338 + <th>Animatable: 3.339 + 3.340 + <td>no 3.341 + 3.342 + <tr> 3.343 + <th>Percentages: 3.344 + 3.345 + <td>N/A 3.346 3.347 <tr> 3.348 <th>Media: 3.349 @@ -882,9 +930,9 @@ 3.350 <td>visual 3.351 3.352 <tr> 3.353 - <th>Animatable: 3.354 - 3.355 - <td>no 3.356 + <th>Computed Value: 3.357 + 3.358 + <td>as specified 3.359 3.360 <tr> 3.361 <th>Canonical Order: 3.362 @@ -893,6 +941,10 @@ 3.363 grammar</abbr> 3.364 </table> 3.365 3.366 + <div class=prod> <dfn 3.367 + id=single-animation-iteration-count><single-animation-iteration-count></dfn> 3.368 + = infinite | <number></div> 3.369 + 3.370 <h3 id=animation-direction-property><span class=secno>3.6. </span> The 3.371 ‘<a href="#animation-direction"><code 3.372 class=property>animation-direction</code></a>’ Property</h3> 3.373 @@ -914,8 +966,11 @@ 3.374 <tr> 3.375 <th><a href="#values">Value</a>: 3.376 3.377 - <td> [ normal | reverse | alternate | alternate-reverse ] [, [ normal | 3.378 - reverse | alternate | alternate-reverse ] ]* 3.379 + <td><a 3.380 + href="#single-animation-direction"><single-animation-direction></a> 3.381 + [ ‘<code class=css>,</code>’ <a 3.382 + href="#single-animation-direction"><single-animation-direction></a> 3.383 + ]* 3.384 3.385 <tr> 3.386 <th>Initial: 3.387 @@ -933,9 +988,14 @@ 3.388 <td>no 3.389 3.390 <tr> 3.391 - <th>Computed Value: 3.392 - 3.393 - <td>as specified 3.394 + <th>Animatable: 3.395 + 3.396 + <td>no 3.397 + 3.398 + <tr> 3.399 + <th>Percentages: 3.400 + 3.401 + <td>N/A 3.402 3.403 <tr> 3.404 <th>Media: 3.405 @@ -943,9 +1003,9 @@ 3.406 <td>visual 3.407 3.408 <tr> 3.409 - <th>Animatable: 3.410 - 3.411 - <td>no 3.412 + <th>Computed Value: 3.413 + 3.414 + <td>as specified 3.415 3.416 <tr> 3.417 <th>Canonical Order: 3.418 @@ -954,6 +1014,10 @@ 3.419 grammar</abbr> 3.420 </table> 3.421 3.422 + <div class=prod> <dfn 3.423 + id=single-animation-direction><single-animation-direction></dfn> = 3.424 + normal | reverse | alternate | alternate-reverse</div> 3.425 + 3.426 <dl> 3.427 <dt><dfn id=normal>normal</dfn> 3.428 3.429 @@ -1005,7 +1069,11 @@ 3.430 <tr> 3.431 <th><a href="#values">Value</a>: 3.432 3.433 - <td> [ running | paused ] [, [ running | paused ] ]* 3.434 + <td><a 3.435 + href="#single-animation-play-state"><single-animation-play-state></a> 3.436 + [ ‘<code class=css>,</code>’ <a 3.437 + href="#single-animation-play-state"><single-animation-play-state></a> 3.438 + ]* 3.439 3.440 <tr> 3.441 <th>Initial: 3.442 @@ -1023,9 +1091,14 @@ 3.443 <td>no 3.444 3.445 <tr> 3.446 - <th>Computed Value: 3.447 - 3.448 - <td>as specified 3.449 + <th>Animatable: 3.450 + 3.451 + <td>no 3.452 + 3.453 + <tr> 3.454 + <th>Percentages: 3.455 + 3.456 + <td>N/A 3.457 3.458 <tr> 3.459 <th>Media: 3.460 @@ -1033,9 +1106,9 @@ 3.461 <td>visual 3.462 3.463 <tr> 3.464 - <th>Animatable: 3.465 - 3.466 - <td>no 3.467 + <th>Computed Value: 3.468 + 3.469 + <td>as specified 3.470 3.471 <tr> 3.472 <th>Canonical Order: 3.473 @@ -1044,6 +1117,10 @@ 3.474 grammar</abbr> 3.475 </table> 3.476 3.477 + <div class=prod> <dfn 3.478 + id=single-animation-play-state><single-animation-play-state></dfn> = 3.479 + running | paused</div> 3.480 + 3.481 <h3 id=animation-delay-property><span class=secno>3.8. </span> The ‘<a 3.482 href="#animation-delay"><code class=property>animation-delay</code></a>’ 3.483 Property</h3> 3.484 @@ -1078,7 +1155,7 @@ 3.485 <tr> 3.486 <th><a href="#values">Value</a>: 3.487 3.488 - <td> <time> [, <time>]* 3.489 + <td> <span><time></span> [, <span><time></span>]* 3.490 3.491 <tr> 3.492 <th>Initial: 3.493 @@ -1096,9 +1173,14 @@ 3.494 <td>no 3.495 3.496 <tr> 3.497 - <th>Computed Value: 3.498 - 3.499 - <td>as specified 3.500 + <th>Animatable: 3.501 + 3.502 + <td>no 3.503 + 3.504 + <tr> 3.505 + <th>Percentages: 3.506 + 3.507 + <td>N/A 3.508 3.509 <tr> 3.510 <th>Media: 3.511 @@ -1106,9 +1188,9 @@ 3.512 <td>visual 3.513 3.514 <tr> 3.515 - <th>Animatable: 3.516 - 3.517 - <td>no 3.518 + <th>Computed Value: 3.519 + 3.520 + <td>as specified 3.521 3.522 <tr> 3.523 <th>Canonical Order: 3.524 @@ -1191,8 +1273,11 @@ 3.525 <tr> 3.526 <th><a href="#values">Value</a>: 3.527 3.528 - <td> [ none | forwards | backwards | both ] [, [ none | forwards | 3.529 - backwards | both ] ]* 3.530 + <td><a 3.531 + href="#single-animation-fill-mode"><single-animation-fill-mode></a> 3.532 + [ ‘<code class=css>,</code>’ <a 3.533 + href="#single-animation-fill-mode"><single-animation-fill-mode></a> 3.534 + ]* 3.535 3.536 <tr> 3.537 <th>Initial: 3.538 @@ -1210,9 +1295,14 @@ 3.539 <td>no 3.540 3.541 <tr> 3.542 - <th>Computed Value: 3.543 - 3.544 - <td>as specified 3.545 + <th>Animatable: 3.546 + 3.547 + <td>no 3.548 + 3.549 + <tr> 3.550 + <th>Percentages: 3.551 + 3.552 + <td>N/A 3.553 3.554 <tr> 3.555 <th>Media: 3.556 @@ -1220,9 +1310,9 @@ 3.557 <td>visual 3.558 3.559 <tr> 3.560 - <th>Animatable: 3.561 - 3.562 - <td>no 3.563 + <th>Computed Value: 3.564 + 3.565 + <td>as specified 3.566 3.567 <tr> 3.568 <th>Canonical Order: 3.569 @@ -1231,6 +1321,10 @@ 3.570 grammar</abbr> 3.571 </table> 3.572 3.573 + <div class=prod> <dfn 3.574 + id=single-animation-fill-mode><single-animation-fill-mode></dfn> = 3.575 + none | forwards | backwards | both</div> 3.576 + 3.577 <h3 id=animation-shorthand-property><span class=secno>3.10. </span> The 3.578 ‘<a href="#animation"><code class=property>animation</code></a>’ 3.579 Shorthand Property</h3> 3.580 @@ -1239,18 +1333,6 @@ 3.581 class=property>animation</code></a>’ shorthand property combines seven 3.582 of the animation properties into a single property. 3.583 3.584 - <p> Note that order is important in this property. The first value that can 3.585 - be parsed as a <var><time></var> is assigned to the ‘<a 3.586 - href="#animation-duration"><code 3.587 - class=property>animation-duration</code></a>’. The second value that can 3.588 - be parsed as a <var><time></var> is assigned to ‘<a 3.589 - href="#animation-delay"><code 3.590 - class=property>animation-delay</code></a>’. 3.591 - 3.592 - <p class=issue> An alternative proposal is to accept the font shorthand 3.593 - approach of using a "/" character between the values of the same type. 3.594 - e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 3.595 - 3.596 <table class=propdef> 3.597 <tbody> 3.598 <tr> 3.599 @@ -1261,13 +1343,9 @@ 3.600 <tr> 3.601 <th><a href="#values">Value</a>: 3.602 3.603 - <td> [ <animation-name> || <animation-duration> || 3.604 - <animation-timing-function> || <animation-delay> || 3.605 - <animation-iteration-count> || <animation-direction> || 3.606 - <animation-fill-mode> ] [, [ <animation-name> || 3.607 - <animation-duration> || <animation-timing-function> || 3.608 - <animation-delay> || <animation-iteration-count> || 3.609 - <animation-direction> || <animation-fill-mode> ] ]* 3.610 + <td><a href="#single-animation"><single-animation></a> [ ‘<code 3.611 + class=css>,</code>’ <a 3.612 + href="#single-animation"><single-animation></a> ]* 3.613 3.614 <tr> 3.615 <th>Initial: 3.616 @@ -1285,9 +1363,14 @@ 3.617 <td>see individual properties 3.618 3.619 <tr> 3.620 - <th>Computed Value: 3.621 - 3.622 - <td>see individual properties 3.623 + <th>Animatable: 3.624 + 3.625 + <td>no 3.626 + 3.627 + <tr> 3.628 + <th>Percentages: 3.629 + 3.630 + <td>N/A 3.631 3.632 <tr> 3.633 <th>Media: 3.634 @@ -1295,9 +1378,9 @@ 3.635 <td>visual 3.636 3.637 <tr> 3.638 - <th>Animatable: 3.639 - 3.640 - <td>no 3.641 + <th>Computed Value: 3.642 + 3.643 + <td>see individual properties 3.644 3.645 <tr> 3.646 <th>Canonical Order: 3.647 @@ -1306,6 +1389,25 @@ 3.648 grammar</abbr> 3.649 </table> 3.650 3.651 + <div class=prod> <dfn id=single-animation><single-animation></dfn> = 3.652 + <single-animation-name> || <span><time></span> || 3.653 + <single-animation-timing-function> || <span><time></span> || 3.654 + <single-animation-iteration-count> || 3.655 + <single-animation-direction> || <single-animation-fill-mode></div> 3.656 + 3.657 + <p> Note that order is important within the items in this property: the 3.658 + first value that can be parsed as a <var><time></var> is assigned to 3.659 + the animation-duration, and the second value that can be parsed as a 3.660 + <var><time></var> is assigned to animation-delay. 3.661 + 3.662 + <p class=issue> An alternative proposal is to accept the font shorthand 3.663 + approach of using a "/" character between the values of the same type. 3.664 + e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 3.665 + 3.666 + <p class=issue> Need to also explain how order is important in terms of 3.667 + animation-name versus keywords, and probably also adjust the canonical 3.668 + order to match. 3.669 + 3.670 <h2 id=animation-events><span class=secno>4. </span> Animation Events</h2> 3.671 3.672 <p> Several animation related events are available through the <a 3.673 @@ -1402,7 +1504,6 @@ 3.674 <dt><code>cancelableArg</code> of type <code>boolean</code> 3.675 3.676 <dd> Specifies whether or not the event's default action can be prevented. 3.677 - 3.678 3.679 <dt><code>animationNameArg</code> of type <code>DOMString</code> 3.680 3.681 @@ -1518,7 +1619,6 @@ 3.682 floating point number between 0 and 1. If the value in the CSS style is 3.683 ‘<code class=css>from</code>’ this value will be 0, and if the value 3.684 in the CSS style is ‘<code class=css>to</code>’ this value will be 1. 3.685 - 3.686 3.687 <dt><code><dfn id=CSSKeyframeRule-style>style</dfn></code> of type 3.688 <code>CSSStyleDeclaration</code> 3.689 @@ -1625,8 +1725,8 @@ 3.690 3.691 <h2 id=acknowledgments><span class=secno>6. </span>Acknowledgments</h2> 3.692 3.693 - <p>Thanks especially to the feedback from Tab Atkins, Estelle Weyl, and 3.694 - all the rest of the <a 3.695 + <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, 3.696 + Estelle Weyl, and all the rest of the <a 3.697 href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> 3.698 community. 3.699 3.700 @@ -1646,7 +1746,7 @@ 3.701 Transitions.</cite></a> 3 April 2012. W3C Working Draft. (Work in 3.702 progress.) URL: <a 3.703 href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a> 3.704 - </dd> 3.705 + </dd> 3.706 <!----> 3.707 </dl> 3.708 <!--end-normative--> 3.709 @@ -1689,7 +1789,7 @@ 3.710 3.711 <td>no 3.712 3.713 - <td> 3.714 + <td>N/A 3.715 3.716 <td>visual 3.717 3.718 @@ -1697,8 +1797,8 @@ 3.719 <th><a class=property 3.720 href="#animation-direction">animation-direction</a> 3.721 3.722 - <td>[ normal | reverse | alternate | alternate-reverse ] [, [ normal | 3.723 - reverse | alternate | alternate-reverse ] ]* 3.724 + <td><single-animation-direction> [ ‘,’ 3.725 + <single-animation-direction> ]* 3.726 3.727 <td>‘normal’ 3.728 3.729 @@ -1706,7 +1806,7 @@ 3.730 3.731 <td>no 3.732 3.733 - <td> 3.734 + <td>N/A 3.735 3.736 <td>visual 3.737 3.738 @@ -1722,7 +1822,7 @@ 3.739 3.740 <td>no 3.741 3.742 - <td> 3.743 + <td>N/A 3.744 3.745 <td>visual 3.746 3.747 @@ -1730,8 +1830,8 @@ 3.748 <th><a class=property 3.749 href="#animation-fill-mode">animation-fill-mode</a> 3.750 3.751 - <td>[ none | forwards | backwards | both ] [, [ none | forwards | 3.752 - backwards | both ] ]* 3.753 + <td><single-animation-fill-mode> [ ‘,’ 3.754 + <single-animation-fill-mode> ]* 3.755 3.756 <td>‘none’ 3.757 3.758 @@ -1739,7 +1839,7 @@ 3.759 3.760 <td>no 3.761 3.762 - <td> 3.763 + <td>N/A 3.764 3.765 <td>visual 3.766 3.767 @@ -1747,7 +1847,8 @@ 3.768 <th><a class=property 3.769 href="#animation-iteration-count">animation-iteration-count</a> 3.770 3.771 - <td>[ infinite | <number> ] [, [ infinite | <number> ] ]* 3.772 + <td><single-animation-iteration-count> [ ‘,’ 3.773 + <single-animation-iteration-count> ]* 3.774 3.775 <td>‘1’ 3.776 3.777 @@ -1755,14 +1856,15 @@ 3.778 3.779 <td>no 3.780 3.781 - <td> 3.782 + <td>N/A 3.783 3.784 <td>visual 3.785 3.786 <tr> 3.787 <th><a class=property href="#animation-name">animation-name</a> 3.788 3.789 - <td>[ none | IDENT ] [, [ none | IDENT ] ]* 3.790 + <td><single-animation-name> [ ‘,’ 3.791 + <single-animation-name> ]* 3.792 3.793 <td>‘none’ 3.794 3.795 @@ -1770,7 +1872,7 @@ 3.796 3.797 <td>no 3.798 3.799 - <td> 3.800 + <td>N/A 3.801 3.802 <td>visual 3.803 3.804 @@ -1778,7 +1880,8 @@ 3.805 <th><a class=property 3.806 href="#animation-play-state">animation-play-state</a> 3.807 3.808 - <td>[ running | paused ] [, [ running | paused ] ]* 3.809 + <td><single-animation-play-state> [ ‘,’ 3.810 + <single-animation-play-state> ]* 3.811 3.812 <td>‘running’ 3.813 3.814 @@ -1786,20 +1889,14 @@ 3.815 3.816 <td>no 3.817 3.818 - <td> 3.819 + <td>N/A 3.820 3.821 <td>visual 3.822 3.823 <tr> 3.824 <th><a class=property href="#animation">animation</a> 3.825 3.826 - <td>[ <animation-name> || <animation-duration> || 3.827 - <animation-timing-function> || <animation-delay> || 3.828 - <animation-iteration-count> || <animation-direction> || 3.829 - <animation-fill-mode> ] [, [ <animation-name> || 3.830 - <animation-duration> || <animation-timing-function> || 3.831 - <animation-delay> || <animation-iteration-count> || 3.832 - <animation-direction> || <animation-fill-mode> ] ]* 3.833 + <td><single-animation> [ ‘,’ <single-animation> ]* 3.834 3.835 <td>see individual properties 3.836 3.837 @@ -1807,7 +1904,7 @@ 3.838 3.839 <td>see individual properties 3.840 3.841 - <td> 3.842 + <td>N/A 3.843 3.844 <td>visual 3.845 3.846 @@ -1815,13 +1912,8 @@ 3.847 <th><a class=property 3.848 href="#animation-timing-function">animation-timing-function</a> 3.849 3.850 - <td>[ ease | linear | ease-in | ease-out | ease-in-out | step-start | 3.851 - step-end | steps(<number> [, [ start | end ] ]?) | 3.852 - cubic-bezier(<number>, <number>, <number>, 3.853 - <number>) ] [, [ ease | linear | ease-in | ease-out | 3.854 - ease-in-out | step-start | step-end | steps(<number> [, [ start 3.855 - | end ] ]?) | cubic-bezier(<number>, <number>, 3.856 - <number>, <number>) ] ]* 3.857 + <td><single-animation-timing-function> [ ‘,’ 3.858 + <single-animation-timing-function> ]* 3.859 3.860 <td>‘ease’ 3.861 3.862 @@ -1829,7 +1921,7 @@ 3.863 3.864 <td>no 3.865 3.866 - <td> 3.867 + <td>N/A 3.868 3.869 <td>visual 3.870 </table> 3.871 @@ -1927,6 +2019,32 @@ 3.872 3.873 <li>reverse, <a href="#reverse" title=reverse><strong>3.6.</strong></a> 3.874 3.875 + <li><single-animation>, <a href="#single-animation" 3.876 + title="<single-animation>"><strong>3.10.</strong></a> 3.877 + 3.878 + <li><single-animation-direction>, <a 3.879 + href="#single-animation-direction" 3.880 + title="<single-animation-direction>"><strong>3.6.</strong></a> 3.881 + 3.882 + <li><single-animation-fill-mode>, <a 3.883 + href="#single-animation-fill-mode" 3.884 + title="<single-animation-fill-mode>"><strong>3.9.</strong></a> 3.885 + 3.886 + <li><single-animation-iteration-count>, <a 3.887 + href="#single-animation-iteration-count" 3.888 + title="<single-animation-iteration-count>"><strong>3.5.</strong></a> 3.889 + 3.890 + <li><single-animation-name>, <a href="#single-animation-name" 3.891 + title="<single-animation-name>"><strong>3.2.</strong></a> 3.892 + 3.893 + <li><single-animation-play-state>, <a 3.894 + href="#single-animation-play-state" 3.895 + title="<single-animation-play-state>"><strong>3.7.</strong></a> 3.896 + 3.897 + <li><single-animation-timing-function>, <a 3.898 + href="#single-animation-timing-function" 3.899 + title="<single-animation-timing-function>"><strong>3.4.</strong></a> 3.900 + 3.901 <li>style, <a href="#CSSKeyframeRule-style" 3.902 title=style><strong>5.2.2.</strong></a> 3.903 </ul>
4.1 --- a/css3-animations/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 4.2 +++ b/css3-animations/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 4.3 @@ -5,6 +5,9 @@ 4.4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4.5 <link rel="stylesheet" type="text/css" href="../default.css"> 4.6 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> 4.7 + <style type="text/css"> 4.8 + div.prod { margin: 1em 2em; } 4.9 + </style> 4.10 </head> 4.11 4.12 <body> 4.13 @@ -425,7 +428,7 @@ 4.14 should have a corresponding value for the other animation properties listed below. 4.15 If the lists of values for the other animation properties do not have the same length, 4.16 the length of the 'animation-name' list 4.17 - determines the number of items in each list examined when starting transitions. 4.18 + determines the number of items in each list examined when starting animations. 4.19 The lists are matched up from the first value: 4.20 excess values at the end are not used. 4.21 If one of the other properties doesn't have enough comma-separated values to match the number of values of 'animation-name', 4.22 @@ -441,7 +444,7 @@ 4.23 <td><dfn>animation-name</dfn> 4.24 <tr> 4.25 <th><a href="#values">Value</a>: 4.26 - <td>[ none | IDENT ] [, [ none | IDENT ] ]* 4.27 + <td><span><single-animation-name></span> [ ',' <span><single-animation-name></span> ]* 4.28 <tr> 4.29 <th>Initial: 4.30 <td>''none'' 4.31 @@ -452,19 +455,26 @@ 4.32 <th>Inherited: 4.33 <td>no 4.34 <tr> 4.35 - <th>Computed Value: 4.36 - <td>As specified 4.37 + <th>Animatable: 4.38 + <td>no 4.39 + <tr> 4.40 + <th>Percentages: 4.41 + <td>N/A 4.42 <tr> 4.43 <th>Media: 4.44 <td>visual 4.45 <tr> 4.46 - <th>Animatable: 4.47 - <td>no 4.48 + <th>Computed Value: 4.49 + <td>As specified 4.50 <tr> 4.51 <th>Canonical Order: 4.52 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.53 </table> 4.54 4.55 + <div class="prod"> 4.56 + <dfn id="single-animation-name"><single-animation-name></dfn> = none | <IDENT> 4.57 + </div> 4.58 + 4.59 <!-- 4.60 <p> 4.61 It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied. 4.62 @@ -525,7 +535,7 @@ 4.63 <td><dfn>animation-duration</dfn> 4.64 <tr> 4.65 <th><a href="#values">Value</a>: 4.66 - <td> <time> [, <time>]* 4.67 + <td> <span><time></span> [, <span><time></span>]* 4.68 <tr> 4.69 <th>Initial: 4.70 <td>''0s'' 4.71 @@ -536,14 +546,17 @@ 4.72 <th>Inherited: 4.73 <td>no 4.74 <tr> 4.75 - <th>Computed Value: 4.76 - <td>as specified 4.77 + <th>Animatable: 4.78 + <td>no 4.79 + <tr> 4.80 + <th>Percentages: 4.81 + <td>N/A 4.82 <tr> 4.83 <th>Media: 4.84 <td>visual 4.85 <tr> 4.86 - <th>Animatable: 4.87 - <td>no 4.88 + <th>Computed Value: 4.89 + <td>as specified 4.90 <tr> 4.91 <th>Canonical Order: 4.92 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.93 @@ -574,23 +587,7 @@ 4.94 <td><dfn>animation-timing-function</dfn> 4.95 <tr> 4.96 <th><a href="#values">Value</a>: 4.97 - <td> 4.98 - [ 4.99 - ease | linear | ease-in | ease-out | ease-in-out | 4.100 - step-start | step-end | 4.101 - steps(<number> [, [ start | end ] ]?) | 4.102 - cubic-bezier(<number>, <number>, <number>, 4.103 - <number>) 4.104 - ] 4.105 - [, 4.106 - [ 4.107 - ease | linear | ease-in | ease-out | ease-in-out | 4.108 - step-start | step-end | 4.109 - steps(<number> [, [ start | end ] ]?) | 4.110 - cubic-bezier(<number>, <number>, <number>, 4.111 - <number>) 4.112 - ] 4.113 - ]* 4.114 + <td><span><single-animation-timing-function></span> [ ',' <span><single-animation-timing-function></span> ]* 4.115 <tr> 4.116 <th>Initial: 4.117 <td>''ease'' 4.118 @@ -601,19 +598,31 @@ 4.119 <th>Inherited: 4.120 <td>no 4.121 <tr> 4.122 - <th>Computed Value: 4.123 - <td>as specified 4.124 + <th>Animatable: 4.125 + <td>no 4.126 + <tr> 4.127 + <th>Percentages: 4.128 + <td>N/A 4.129 <tr> 4.130 <th>Media: 4.131 <td>visual 4.132 <tr> 4.133 - <th>Animatable: 4.134 - <td>no 4.135 + <th>Computed Value: 4.136 + <td>as specified 4.137 <tr> 4.138 <th>Canonical Order: 4.139 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.140 </table> 4.141 4.142 + <div class="prod"> 4.143 + <dfn id="single-animation-timing-function"><single-animation-timing-function></dfn> = 4.144 + ease | linear | ease-in | ease-out | ease-in-out | 4.145 + step-start | step-end | 4.146 + steps(<number> [, [ start | end ] ]?) | 4.147 + cubic-bezier(<number>, <number>, <number>, 4.148 + <number>) 4.149 + </div> 4.150 + 4.151 <p> 4.152 For a keyframed animation, 4.153 the 'animation-timing-function' applies between keyframes, 4.154 @@ -645,8 +654,7 @@ 4.155 <td><dfn>animation-iteration-count</dfn> 4.156 <tr> 4.157 <th><a href="#values">Value</a>: 4.158 - <td> [ infinite | <number> ] 4.159 - [, [ infinite | <number> ] ]* 4.160 + <td><span><single-animation-iteration-count></span> [ ',' <span><single-animation-iteration-count></span> ]* 4.161 <tr> 4.162 <th>Initial: 4.163 <td>''1'' 4.164 @@ -657,19 +665,26 @@ 4.165 <th>Inherited: 4.166 <td>no 4.167 <tr> 4.168 - <th>Computed Value: 4.169 - <td>as specified 4.170 + <th>Animatable: 4.171 + <td>no 4.172 + <tr> 4.173 + <th>Percentages: 4.174 + <td>N/A 4.175 <tr> 4.176 <th>Media: 4.177 <td>visual 4.178 <tr> 4.179 - <th>Animatable: 4.180 - <td>no 4.181 + <th>Computed Value: 4.182 + <td>as specified 4.183 <tr> 4.184 <th>Canonical Order: 4.185 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.186 </table> 4.187 4.188 + <div class="prod"> 4.189 + <dfn id="single-animation-iteration-count"><single-animation-iteration-count></dfn> = 4.190 + infinite | <number> 4.191 + </div> 4.192 4.193 <h3 id="animation-direction-property"> 4.194 The 'animation-direction' Property</h3> 4.195 @@ -685,8 +700,7 @@ 4.196 <td><dfn>animation-direction</dfn> 4.197 <tr> 4.198 <th><a href="#values">Value</a>: 4.199 - <td> [ normal | reverse | alternate | alternate-reverse ] 4.200 - [, [ normal | reverse | alternate | alternate-reverse ] ]* 4.201 + <td><span><single-animation-direction></span> [ ',' <span><single-animation-direction></span> ]* 4.202 <tr> 4.203 <th>Initial: 4.204 <td>''normal'' 4.205 @@ -697,19 +711,27 @@ 4.206 <th>Inherited: 4.207 <td>no 4.208 <tr> 4.209 - <th>Computed Value: 4.210 - <td>as specified 4.211 + <th>Animatable: 4.212 + <td>no 4.213 + <tr> 4.214 + <th>Percentages: 4.215 + <td>N/A 4.216 <tr> 4.217 <th>Media: 4.218 <td>visual 4.219 <tr> 4.220 - <th>Animatable: 4.221 - <td>no 4.222 + <th>Computed Value: 4.223 + <td>as specified 4.224 <tr> 4.225 <th>Canonical Order: 4.226 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.227 </table> 4.228 4.229 + <div class="prod"> 4.230 + <dfn id="single-animation-direction"><single-animation-direction></dfn> = 4.231 + normal | reverse | alternate | alternate-reverse 4.232 + </div> 4.233 + 4.234 <dl> 4.235 <dt><dfn>normal</dfn> 4.236 <dd> 4.237 @@ -754,8 +776,7 @@ 4.238 <td><dfn>animation-play-state</dfn> 4.239 <tr> 4.240 <th><a href="#values">Value</a>: 4.241 - <td> [ running | paused ] 4.242 - [, [ running | paused ] ]* 4.243 + <td><span><single-animation-play-state></span> [ ',' <span><single-animation-play-state></span> ]* 4.244 <tr> 4.245 <th>Initial: 4.246 <td>''running'' 4.247 @@ -766,19 +787,26 @@ 4.248 <th>Inherited: 4.249 <td>no 4.250 <tr> 4.251 - <th>Computed Value: 4.252 - <td>as specified 4.253 + <th>Animatable: 4.254 + <td>no 4.255 + <tr> 4.256 + <th>Percentages: 4.257 + <td>N/A 4.258 <tr> 4.259 <th>Media: 4.260 <td>visual 4.261 <tr> 4.262 - <th>Animatable: 4.263 - <td>no 4.264 + <th>Computed Value: 4.265 + <td>as specified 4.266 <tr> 4.267 <th>Canonical Order: 4.268 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.269 </table> 4.270 4.271 + <div class="prod"> 4.272 + <dfn id="single-animation-play-state"><single-animation-play-state></dfn> = 4.273 + running | paused 4.274 + </div> 4.275 4.276 <h3 id="animation-delay-property"> 4.277 The 'animation-delay' Property</h3> 4.278 @@ -804,7 +832,7 @@ 4.279 <td><dfn>animation-delay</dfn> 4.280 <tr> 4.281 <th><a href="#values">Value</a>: 4.282 - <td> <time> [, <time>]* 4.283 + <td> <span><time></span> [, <span><time></span>]* 4.284 <tr> 4.285 <th>Initial: 4.286 <td>''0s'' 4.287 @@ -815,14 +843,17 @@ 4.288 <th>Inherited: 4.289 <td>no 4.290 <tr> 4.291 - <th>Computed Value: 4.292 - <td>as specified 4.293 + <th>Animatable: 4.294 + <td>no 4.295 + <tr> 4.296 + <th>Percentages: 4.297 + <td>N/A 4.298 <tr> 4.299 <th>Media: 4.300 <td>visual 4.301 <tr> 4.302 - <th>Animatable: 4.303 - <td>no 4.304 + <th>Computed Value: 4.305 + <td>as specified 4.306 <tr> 4.307 <th>Canonical Order: 4.308 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.309 @@ -880,8 +911,7 @@ 4.310 <td><dfn>animation-fill-mode</dfn> 4.311 <tr> 4.312 <th><a href="#values">Value</a>: 4.313 - <td> [ none | forwards | backwards | both ] 4.314 - [, [ none | forwards | backwards | both ] ]* 4.315 + <td><span><single-animation-fill-mode></span> [ ',' <span><single-animation-fill-mode></span> ]* 4.316 <tr> 4.317 <th>Initial: 4.318 <td>''none'' 4.319 @@ -892,19 +922,26 @@ 4.320 <th>Inherited: 4.321 <td>no 4.322 <tr> 4.323 - <th>Computed Value: 4.324 - <td>as specified 4.325 + <th>Animatable: 4.326 + <td>no 4.327 + <tr> 4.328 + <th>Percentages: 4.329 + <td>N/A 4.330 <tr> 4.331 <th>Media: 4.332 <td>visual 4.333 <tr> 4.334 - <th>Animatable: 4.335 - <td>no 4.336 + <th>Computed Value: 4.337 + <td>as specified 4.338 <tr> 4.339 <th>Canonical Order: 4.340 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.341 </table> 4.342 4.343 + <div class="prod"> 4.344 + <dfn id="single-animation-fill-mode"><single-animation-fill-mode></dfn> = 4.345 + none | forwards | backwards | both 4.346 + </div> 4.347 4.348 <h3 id="animation-shorthand-property"> 4.349 The 'animation' Shorthand Property 4.350 @@ -912,38 +949,13 @@ 4.351 <p> 4.352 The 'animation' shorthand property combines seven of the animation properties into a single property. 4.353 4.354 - <p> 4.355 - Note that order is important in this property. 4.356 - The first value that can be parsed as a <var><time></var> is assigned to the 'animation-duration'. 4.357 - The second value that can be parsed as a <var><time></var> is assigned to 'animation-delay'. 4.358 - 4.359 - <p class="issue"> 4.360 - An alternative proposal is to accept the font shorthand approach 4.361 - of using a "/" character between the values of the same type. 4.362 - e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 4.363 - 4.364 <table class=propdef> 4.365 <tr> 4.366 <th>Name:</th> 4.367 <td><dfn>animation</dfn> 4.368 <tr> 4.369 <th><a href="#values">Value</a>: 4.370 - <td> 4.371 - [ 4.372 - <animation-name> || <animation-duration> || 4.373 - <animation-timing-function> || <animation-delay> || 4.374 - <animation-iteration-count> || <animation-direction> || 4.375 - <animation-fill-mode> 4.376 - ] 4.377 - [, 4.378 - [ 4.379 - <animation-name> || <animation-duration> || 4.380 - <animation-timing-function> || <animation-delay> || 4.381 - <animation-iteration-count> || <animation-direction> || 4.382 - <animation-fill-mode> 4.383 - ] 4.384 - ]* 4.385 - 4.386 + <td><span><single-animation></span> [ ',' <span><single-animation></span> ]* 4.387 <tr> 4.388 <th>Initial: 4.389 <td>see individual properties 4.390 @@ -954,19 +966,50 @@ 4.391 <th>Inherited: 4.392 <td>see individual properties 4.393 <tr> 4.394 - <th>Computed Value: 4.395 - <td>see individual properties 4.396 + <th>Animatable: 4.397 + <td>no 4.398 + <tr> 4.399 + <th>Percentages: 4.400 + <td>N/A 4.401 <tr> 4.402 <th>Media: 4.403 <td>visual 4.404 <tr> 4.405 - <th>Animatable: 4.406 - <td>no 4.407 + <th>Computed Value: 4.408 + <td>see individual properties 4.409 <tr> 4.410 <th>Canonical Order: 4.411 <td><abbr title="follows order of property value definition">per grammar</abbr> 4.412 </table> 4.413 4.414 + <div class="prod"> 4.415 + <dfn id="single-animation"><single-animation></dfn> = 4.416 + <single-animation-name> || 4.417 + <span><time></span> || 4.418 + <single-animation-timing-function> || 4.419 + <span><time></span> || 4.420 + <single-animation-iteration-count> || 4.421 + <single-animation-direction> || 4.422 + <single-animation-fill-mode> 4.423 + </div> 4.424 + 4.425 + <p> 4.426 + Note that order is important within the items in this property: 4.427 + the first value that can be parsed as a <var><time></var> is assigned to the 4.428 + animation-duration, 4.429 + and the second value that can be parsed as a <var><time></var> is assigned to 4.430 + animation-delay. 4.431 + </p> 4.432 + 4.433 + <p class="issue"> 4.434 + An alternative proposal is to accept the font shorthand approach 4.435 + of using a "/" character between the values of the same type. 4.436 + e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 4.437 + 4.438 + <p class="issue"> 4.439 + Need to also explain how order is important in terms of animation-name 4.440 + versus keywords, and probably also adjust the canonical order to 4.441 + match. 4.442 4.443 <h2 id="animation-events"> 4.444 Animation Events</h2> 4.445 @@ -1305,6 +1348,7 @@ 4.446 4.447 <p>Thanks especially to the feedback from 4.448 Tab Atkins, 4.449 +Carine Bournez, 4.450 Estelle Weyl, 4.451 and all the rest of the 4.452 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
5.1 --- a/css3-background/Makefile Fri Sep 21 16:00:07 2012 -0700 5.2 +++ b/css3-background/Makefile Fri Sep 21 16:01:06 2012 -0700 5.3 @@ -10,25 +10,31 @@ 5.4 # 5.5 # Possible other options to add to the curl command below: 5.6 # -F ids=on 5.7 +# -F omitdchtml=on 5.8 + 5.9 +opts = 5.10 5.11 cdate = $(shell date +%Y%m%d) 5.12 5.13 %.html: %.src.html 5.14 @echo "Calling post-processor to generate $@..." 5.15 @curl -K ~/.curl-w3.org -s -S -F output=html -F file=@$< -F group=CSS \ 5.16 - -F method=file -F date=$(cdate) -F status=$(status) -o $@ \ 5.17 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 5.18 https://cgi.w3.org/member-bin/process.cgi 5.19 %.err: %.src.html 5.20 @echo "Calling post-processor to check $<..." 5.21 @curl -K ~/.curl-w3.org -s -S -F output=err -F file=@$< -F group=CSS \ 5.22 - -F method=file -F date=$(cdate) -F status=$(status) -o $@ \ 5.23 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 5.24 https://cgi.w3.org/member-bin/process.cgi 5.25 5.26 # For Dispositions of Comments in css3-background: 5.27 +%.html: %.txt; awk -f issues-txt-to-html.awk $< >$@ 5.28 5.29 -%.html: %.txt 5.30 - awk -f issues-txt-to-html.awk $< >$@ 5.31 +# Rule to create EPS from FIG 5.32 +%.eps: %.fig; fig2dev -m 0.8 -L eps -F -c $< $@ 5.33 5.34 +# Rule to create raster image versions of EPS images 5.35 +%.png: %.eps; convert -density 96x96 $< $@ 5.36 5.37 5.38 all: check Overview.html 5.39 @@ -56,3 +62,4 @@ 5.40 5.41 .PHONY: check commit update clean 5.42 .DELETE_ON_ERROR: 5.43 +.PRECIOUS: %.png
6.1 --- a/css3-box/Makefile Fri Sep 21 16:00:07 2012 -0700 6.2 +++ b/css3-box/Makefile Fri Sep 21 16:01:06 2012 -0700 6.3 @@ -10,49 +10,56 @@ 6.4 # 6.5 # Possible other options to add to the curl command below: 6.6 # -F ids=on 6.7 +# -F omitdchtml=on 6.8 + 6.9 +opts = 6.10 6.11 cdate = $(shell date +%Y%m%d) 6.12 6.13 %.html: %.src.html 6.14 @echo "Calling post-processor to generate $@..." 6.15 - @curl -F file=@$< -F group=CSS -F output=html -F method=file -s \ 6.16 - -F date=$(cdate) -F status=$(status) \ 6.17 - -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 6.18 + @curl -K ~/.curl-w3.org -s -S -F output=html -F file=@$< -F group=CSS \ 6.19 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 6.20 + https://cgi.w3.org/member-bin/process.cgi 6.21 %.err: %.src.html 6.22 @echo "Calling post-processor to check $<..." 6.23 - @curl -F file=@$< -F group=CSS -F output=err -F method=file -s \ 6.24 - -F date=$(cdate) -F status=$(status) \ 6.25 - -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 6.26 + @curl -K ~/.curl-w3.org -s -S -F output=err -F file=@$< -F group=CSS \ 6.27 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 6.28 + https://cgi.w3.org/member-bin/process.cgi 6.29 6.30 # For Dispositions of Comments in css3-background: 6.31 +%.html: %.txt; awk -f issues-txt-to-html.awk $< >$@ 6.32 6.33 -%.html: %.txt 6.34 - awk -f issues-txt-to-html.awk $< >$@ 6.35 +# Rule to create EPS from FIG 6.36 +%.eps: %.fig; fig2dev -m 0.8 -L eps -F -c $< $@ 6.37 6.38 +# Rule to create raster image versions of EPS images 6.39 +%.png: %.eps; convert -density 96x96 $< $@ 6.40 6.41 6.42 all: check Overview.html 6.43 - @echo Done. 6.44 6.45 +# egrep will exit with a zero exit code if there is anything left 6.46 check: Overview.err 6.47 @cat $< 6.48 - @grep -q '^No errors$$' $< # Force a non-zero exit code if errors 6.49 - 6.50 + @if egrep -v '^(Warning:|\(Processed in .* seconds\)|No errors)' $<;\ 6.51 + then false; else true; fi 6.52 6.53 6.54 # A handy shortcut: 6.55 6.56 -commit: update clean all 6.57 - -hg commit -m 'Generated. Do not edit!' Overview.html 6.58 +commit: update all 6.59 + hg commit -m 'Generated. Do not edit!' Overview.html || true 6.60 hg push 6.61 6.62 update: 6.63 hg pull -u 6.64 6.65 clean: 6.66 - -rm Overview.html 6.67 + rm -f Overview.html Overview.err 6.68 6.69 6.70 6.71 .PHONY: check commit update clean 6.72 +.DELETE_ON_ERROR: 6.73 .PRECIOUS: %.png
7.1 --- a/css3-box/Overview.html Fri Sep 21 16:00:07 2012 -0700 7.2 +++ b/css3-box/Overview.html Fri Sep 21 16:01:06 2012 -0700 7.3 @@ -2,11 +2,23 @@ 7.4 7.5 <html> 7.6 <head 7.7 - profile="http://www.w3.org/2006/03/hcard http://microformats.org/wiki/rel-license"><meta 7.8 - content="text/html; charset=utf-8" http-equiv=content-type> 7.9 - 7.10 + profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://microformats.org/profile/h-card http://microformats.org/profile/hcard http://microformats.org/profile/rel-license "><!-- Note: the h-card profile is for a "microformats 2" vocabulary and 7.11 +is experimental as of September 2012 --> 7.12 + 7.13 + <meta content="text/html; charset=utf-8" http-equiv=content-type> 7.14 <title>CSS basic box model</title> 7.15 7.16 + <link href="http://purl.org/dc/terms/" rel=schema.DC> 7.17 + <meta content="CSS basic box model" name=DC.title> 7.18 + <meta content=text name=DC.type> 7.19 + <meta content=2012-09-21 name=DC.issued> 7.20 + <meta content="Bert Bos" name=DC.creator> 7.21 + <meta content="Anton Prowse" name=DC.creator> 7.22 + <meta content=W3C name=DC.publisher> 7.23 + <meta content="http://www.w3.org/TR/2012/ED-css3-box-20120921/" 7.24 + name=DC.identifier> 7.25 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 7.26 + rel=DC.rights> 7.27 <style type="text/css"> 7.28 ol.stack p {margin-top: 0} 7.29 img.small {max-width: 100%} 7.30 @@ -15,7 +27,7 @@ 7.31 <link href="#index" rel=index> 7.32 <link href="../default.css" rel=stylesheet title=Default type="text/css"> 7.33 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 7.34 - title=Default type="text/css"> 7.35 + title=Default type="text/css"> 7.36 7.37 <body> 7.38 <div class=head> <!--begin-logo--> 7.39 @@ -24,29 +36,35 @@ 7.40 7.41 <h1>CSS basic box model</h1> 7.42 7.43 - <h2 class="no-num no-toc" id=longstatus-date-26-sep-2006>Editor's Draft 16 7.44 - May 2012</h2> 7.45 + <h2 class="no-num no-toc" id=longstatus-date-26-sep-2006>Editor's Draft 21 7.46 + September 2012</h2> 7.47 7.48 <dl> 7.49 <dt>This version: 7.50 7.51 - <dd><a href="http://www.w3.org/TR/2012/ED-css3-box-20120516/"> 7.52 - http://www.w3.org/TR/2012/ED-css3-box-20120516</a> 7.53 + <dd><a 7.54 + href="http://www.w3.org/TR/2012/ED-css3-box-20120921/">http://www.w3.org/TR/2012/ED-css3-box-20120921</a> 7.55 7.56 <dt>Latest version: 7.57 7.58 - <dd><a href="http://www.w3.org/TR/css3-box"> 7.59 - http://www.w3.org/TR/css3-box</a> 7.60 + <dd><a 7.61 + href="http://www.w3.org/TR/css3-box">http://www.w3.org/TR/css3-box</a> 7.62 7.63 <dt>Previous version: 7.64 7.65 - <dd><a href="http://www.w3.org/TR/2002/WD-css3-box-20021024"> 7.66 - http://www.w3.org/TR/2002/WD-css3-box-20021024</a> 7.67 + <dd><a 7.68 + href="http://www.w3.org/TR/2002/WD-css3-box-20021024">http://www.w3.org/TR/2002/WD-css3-box-20021024</a> 7.69 7.70 <dt>Editors: 7.71 7.72 - <dd class=vcard><span class=fn>Bert Bos</span> (<span 7.73 - class=org>W3C</span>) <span class=email>bert@w3.org</span> 7.74 + <dd class="h-card vcard"><a class="p-name fn u-url url" 7.75 + href="http://www.w3.org/People/Bos/" rel=author>Bert Bos</a>, <span 7.76 + class="p-org org">W3C</span>, <a class="u-email email" 7.77 + href="mailto:bert@w3.org"><bert@w3.org></a> 7.78 + 7.79 + <dd class="h-card vcard"><span class="p-name fn">Anton Prowse</span>, 7.80 + <span class="p-org org">Invited Expert</span>, <a class="u-email email" 7.81 + href="mailto:prowse@moonhenge.net"><prowse@moonhenge.net></a> 7.82 </dl> 7.83 <!--begin-copyright--> 7.84 <p class=copyright><a 7.85 @@ -151,160 +169,163 @@ 7.86 <li><a href="#the-viewport-and-the-canvas"><span class=secno>4. </span>The 7.87 viewport and the canvas</a> 7.88 7.89 - <li><a href="#aspect-ratios-of-replaced-elements"><span class=secno>5. 7.90 - </span>Aspect ratios of replaced elements</a> 7.91 - 7.92 - <li><a href="#basic-flow-layout"><span class=secno>6. </span>Basic flow 7.93 - layout</a> 7.94 - 7.95 - <li><a href="#types-of-boxes"><span class=secno>7. </span>Types of 7.96 + <li><a href="#flows"><span class=secno>5. </span>Flows</a> 7.97 + 7.98 + <li><a href="#types-of-boxes"><span class=secno>6. </span>Types of 7.99 boxes</a> 7.100 <ul class=toc> 7.101 - <li><a href="#display"><span class=secno>7.1. </span>The display 7.102 + <li><a href="#display"><span class=secno>6.1. </span>The display 7.103 property</a> 7.104 7.105 <li><a href="#mixing-the-box-model-with-other-formatti"><span 7.106 - class=secno>7.2. </span>Mixing the box model with other formatting 7.107 + class=secno>6.2. </span>Mixing the box model with other formatting 7.108 models</a> 7.109 7.110 <li><a href="#block-level-boxes-containing-blocks-flow"><span 7.111 - class=secno>7.3. </span>Block-level boxes, containing blocks, flows and 7.112 + class=secno>6.3. </span>Block-level boxes, containing blocks, flows and 7.113 anonymous boxes</a> 7.114 7.115 - <li><a href="#run-in-boxes"><span class=secno>7.4. </span>Run-in 7.116 + <li><a href="#run-in-boxes"><span class=secno>6.4. </span>Run-in 7.117 boxes</a> 7.118 7.119 - <li><a href="#compact-boxes"><span class=secno>7.5. </span>Compact 7.120 + <li><a href="#compact-boxes"><span class=secno>6.5. </span>Compact 7.121 boxes</a> 7.122 </ul> 7.123 7.124 - <li><a href="#the-padding-properties"><span class=secno>8. </span>The 7.125 + <li><a href="#the-padding-properties"><span class=secno>7. </span>The 7.126 padding properties</a> 7.127 7.128 - <li><a href="#margins"><span class=secno>9. </span>Margins</a> 7.129 + <li><a href="#margins"><span class=secno>8. </span>Margins</a> 7.130 <ul class=toc> 7.131 - <li><a href="#the-margin-properties"><span class=secno>9.1. </span>The 7.132 + <li><a href="#the-margin-properties"><span class=secno>8.1. </span>The 7.133 margin properties</a> 7.134 - 7.135 - <li><a href="#collapsing-margins"><span class=secno>9.2. 7.136 + </ul> 7.137 + 7.138 + <li><a href="#the-width-and-height-properties"><span class=secno>9. 7.139 + </span>The width and height properties</a> 7.140 + 7.141 + <li><a href="#min-max"><span class=secno>10. </span>The min-width, 7.142 + max-width, min-height and max-height properties</a> 7.143 + 7.144 + <li><a href="#intrinsic"><span class=secno>11. </span>Definition of 7.145 + intrinsic sizes – high quality</a> 7.146 + 7.147 + <li><a href="#intrinsic-low"><span class=secno>12. </span>Definition of 7.148 + intrinsic sizes – low quality</a> 7.149 + 7.150 + <li><a href="#aspect-ratios-of-replaced-elements"><span class=secno>13. 7.151 + </span>Aspect ratios of replaced elements</a> 7.152 + 7.153 + <li><a href="#block-level-formatting"><span class=secno>14. 7.154 + </span>Block-level formatting</a> 7.155 + <ul class=toc> 7.156 + <li><a href="#collapsing-margins"><span class=secno>14.1. 7.157 </span>Collapsing margins</a> 7.158 </ul> 7.159 7.160 - <li><a href="#the-width-and-height-properties"><span class=secno>10. 7.161 - </span>The width and height properties</a> 7.162 - 7.163 - <li><a href="#min-max"><span class=secno>11. </span>The min-width, 7.164 - max-width, min-height and max-height properties</a> 7.165 - 7.166 - <li><a href="#intrinsic"><span class=secno>12. </span>Definition of 7.167 - intrinsic sizes – high quality</a> 7.168 - 7.169 - <li><a href="#intrinsic-low"><span class=secno>13. </span>Definition of 7.170 - intrinsic sizes – low quality</a> 7.171 - 7.172 - <li><a href="#Calculating"><span class=secno>14. </span>Calculating 7.173 + <li><a href="#Calculating"><span class=secno>15. </span>Calculating 7.174 widths, heights and margins</a> 7.175 <ul class=toc> 7.176 - <li><a href="#inline-non-replaced"><span class=secno>14.1. 7.177 + <li><a href="#inline-non-replaced"><span class=secno>15.1. 7.178 </span>Inline, non-replaced elements</a> 7.179 7.180 - <li><a href="#inline-replaced"><span class=secno>14.2. </span>Inline or 7.181 + <li><a href="#inline-replaced"><span class=secno>15.2. </span>Inline or 7.182 floating, replaced elements</a> 7.183 7.184 - <li><a href="#blockwidth"><span class=secno>14.3. </span>Block-level, 7.185 + <li><a href="#blockwidth"><span class=secno>15.3. </span>Block-level, 7.186 non-replaced elements in normal flow when ‘<code 7.187 class=property>overflow</code>’ computes to ‘<code 7.188 class=css>visible</code>’</a> 7.189 7.190 <li><a href="#other-block-level-non-replaced-elements-"><span 7.191 - class=secno>14.4. </span>Other block-level, non-replaced elements in 7.192 + class=secno>15.4. </span>Other block-level, non-replaced elements in 7.193 normal flow</a> 7.194 7.195 <li><a href="#inline-block-or-floating-non-replaced-el"><span 7.196 - class=secno>14.5. </span>‘<code class=property>Inline-block</code>’ 7.197 + class=secno>15.5. </span>‘<code class=property>Inline-block</code>’ 7.198 or floating, non-replaced elements</a> 7.199 7.200 - <li><a href="#abs-non-replaced-width"><span class=secno>14.6. 7.201 + <li><a href="#abs-non-replaced-width"><span class=secno>15.6. 7.202 </span>Absolutely positioned, non-replaced elements</a> 7.203 7.204 - <li><a href="#abs-replaced"><span class=secno>14.7. </span>Absolutely 7.205 + <li><a href="#abs-replaced"><span class=secno>15.7. </span>Absolutely 7.206 positioned, replaced elements</a> 7.207 7.208 <li><a href="#block-level-replaced-elements-in-normal-"><span 7.209 - class=secno>14.8. </span>Block-level, replaced elements in normal 7.210 + class=secno>15.8. </span>Block-level, replaced elements in normal 7.211 flow</a> 7.212 7.213 - <li><a href="#floating-non-replaced-elements"><span class=secno>14.9. 7.214 + <li><a href="#floating-non-replaced-elements"><span class=secno>15.9. 7.215 </span>Floating, non-replaced elements</a> 7.216 7.217 - <li><a href="#root-height"><span class=secno>14.10. </span>Auto heights 7.218 + <li><a href="#root-height"><span class=secno>15.10. </span>Auto heights 7.219 for flow roots</a> 7.220 </ul> 7.221 7.222 - <li><a href="#the-float-property"><span class=secno>15. </span>The float 7.223 + <li><a href="#the-float-property"><span class=secno>16. </span>The float 7.224 property</a> 7.225 <ul class=toc> 7.226 - <li><a href="#introduction-to-floats"><span class=secno>15.1. 7.227 + <li><a href="#introduction-to-floats"><span class=secno>16.1. 7.228 </span>Introduction to floats</a> 7.229 7.230 - <li><a href="#rules-for-positioning-floats"><span class=secno>15.2. 7.231 + <li><a href="#rules-for-positioning-floats"><span class=secno>16.2. 7.232 </span>Rules for positioning floats</a> 7.233 </ul> 7.234 7.235 - <li><a href="#the-clear-property"><span class=secno>16. </span>The clear 7.236 + <li><a href="#the-clear-property"><span class=secno>17. </span>The clear 7.237 property</a> 7.238 7.239 - <li><a href="#the-clear-after-property"><span class=secno>17. </span>The 7.240 + <li><a href="#the-clear-after-property"><span class=secno>18. </span>The 7.241 clear-after property</a> 7.242 7.243 - <li><a href="#overflow0"><span class=secno>18. </span>Overflow</a> 7.244 + <li><a href="#overflow0"><span class=secno>19. </span>Overflow</a> 7.245 <ul class=toc> 7.246 - <li><a href="#overflow"><span class=secno>18.1. </span>The overflow, 7.247 + <li><a href="#overflow"><span class=secno>19.1. </span>The overflow, 7.248 overflow-x and overflow-y properties</a> 7.249 </ul> 7.250 7.251 - <li><a href="#the-visibility-property"><span class=secno>19. </span>The 7.252 + <li><a href="#the-visibility-property"><span class=secno>20. </span>The 7.253 visibility property</a> 7.254 7.255 - <li><a href="#the-alignment-property"><span class=secno>20. </span>The 7.256 + <li><a href="#the-alignment-property"><span class=secno>21. </span>The 7.257 alignment property</a> 7.258 7.259 - <li><a href="#the-child-align-property"><span class=secno>21. </span>The 7.260 + <li><a href="#the-child-align-property"><span class=secno>22. </span>The 7.261 child-align property</a> 7.262 7.263 - <li><a href="#stacking-contexts"><span class=secno>22. </span>Stacking 7.264 + <li><a href="#stacking-contexts"><span class=secno>23. </span>Stacking 7.265 contexts</a> 7.266 <ul class=toc> 7.267 - <li><a href="#definitions"><span class=secno>22.1. 7.268 + <li><a href="#definitions"><span class=secno>23.1. 7.269 </span>Definitions</a> 7.270 7.271 - <li><a href="#painting-order"><span class=secno>22.2. </span>Painting 7.272 + <li><a href="#painting-order"><span class=secno>23.2. </span>Painting 7.273 order</a> 7.274 7.275 - <li><a href="#notes"><span class=secno>22.3. </span>Notes</a> 7.276 - 7.277 - <li><a href="#the-ltnumbergt-value"><span class=secno>22.4. </span>The 7.278 + <li><a href="#notes"><span class=secno>23.3. </span>Notes</a> 7.279 + 7.280 + <li><a href="#the-ltnumbergt-value"><span class=secno>23.4. </span>The 7.281 <number> value</a> 7.282 7.283 - <li><a href="#auto"><span class=secno>22.5. </span>The auto value</a> 7.284 - 7.285 - <li><a href="#complex-size"><span class=secno>22.6. </span>Algorithm for 7.286 + <li><a href="#auto"><span class=secno>23.5. </span>The auto value</a> 7.287 + 7.288 + <li><a href="#complex-size"><span class=secno>23.6. </span>Algorithm for 7.289 shrink-wrapping replaced elements with complex width/height</a> 7.290 </ul> 7.291 7.292 - <li><a href="#the-float-displace-property"><span class=secno>23. 7.293 + <li><a href="#the-float-displace-property"><span class=secno>24. 7.294 </span>The ‘<code class=property>float-displace</code>’ property</a> 7.295 7.296 - <li><a href="#the-indent-edge-reset-property"><span class=secno>24. 7.297 + <li><a href="#the-indent-edge-reset-property"><span class=secno>25. 7.298 </span>The ‘<code class=property>indent-edge-reset</code>’ 7.299 property</a> 7.300 7.301 - <li><a href="#conformance-and-profiles"><span class=secno>25. 7.302 + <li><a href="#conformance-and-profiles"><span class=secno>26. 7.303 </span>Conformance and profiles</a> 7.304 7.305 - <li><a href="#exit"><span class=secno>26. </span>CR exit criteria</a> 7.306 - 7.307 - <li><a href="#acknowledgments"><span class=secno>27. 7.308 + <li><a href="#exit"><span class=secno>27. </span>CR exit criteria</a> 7.309 + 7.310 + <li><a href="#acknowledgments"><span class=secno>28. 7.311 </span>Acknowledgments</a> 7.312 7.313 <li class=no-num><a href="#references">References</a> 7.314 @@ -404,7 +425,9 @@ 7.315 <p class=note>Note: The model in this specification differs from the model 7.316 described in the CSS level 2 specification <a href="#CSS21" 7.317 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, because it is generalized to 7.318 - apply also to vertical text. 7.319 + apply also to vertical text. A document using only features from level 2 7.320 + renders exactly as described there, (except possibly for features that are 7.321 + undefined in that specification and have become defined since). 7.322 7.323 <p>CSS assumes that the document to lay out is modeled as a <span 7.324 class=index id=tree 7.325 @@ -415,34 +438,70 @@ 7.326 has one parent, except for the unique element that has no parent, which is 7.327 called the <dfn id=root-element.>root element.</dfn> 7.328 7.329 + <p class=note>Note that such a tree can be described in XML or SGML, but 7.330 + also in other notations and that it is the definition of that notation, 7.331 + not CSS, that determines the equivalence between the abstract tree and the 7.332 + concrete notation. E.g., SGML often allows white space to be added between 7.333 + elements for readability, which does not result in a string of spaces in 7.334 + the abstract tree. 7.335 + 7.336 <p>CSS describes how each element and each string of text is laid out by 7.337 transforming the document tree into a set of rectangular boxes, whose 7.338 size, position, and stacking level on the <a 7.339 href="#canvas"><em>canvas</em></a> depend on their properties. We say that 7.340 an element <dfn id=generates title="generated box">generates</dfn> one or 7.341 - more boxes. There are <a href="#block-level"><em>block-level</em></a> 7.342 - boxes, <a href="#line-box."><em title="line box">line boxes</em></a> and 7.343 - <a href="#inline-level"><em title=inline-level>inline-level 7.344 - boxes.</em></a> A block-level box is like a paragraph. A line box is like 7.345 - a line of text. Inline-level boxes are like words inside a line. 7.346 - 7.347 - <p>When the specification says a box <a href="#aprime"><var>A</var></a> 7.348 - <dfn id=contains>contains</dfn> a box <a href="#bprime"><var>B</var></a>, 7.349 - then <a href="#bprime"><var>B</var></a> is a box generated by an element 7.350 - that is a descendant of the element that generated <a 7.351 - href="#aprime"><var>A</var></a>. Typically, box <a 7.352 - href="#bprime"><var>B</var></a> is geometrically contained in box <a 7.353 - href="#aprime"><var>A</var></a> as well, but that need not be the case, 7.354 - because of, e.g., overflow or negative margins. 7.355 + more boxes. There are numerous different types of boxes. <span 7.356 + class=issue>[Or maybe only one? I.e., a block-level box is just a normal 7.357 + box that happens to be generated by a block-level element?]</span> A block 7.358 + box is like a paragraph; a line box is like a single line of text; and 7.359 + inline boxes are like words inside a line. 7.360 + 7.361 + <div class=issue> 7.362 + <p>Define the <dfn id=box-tree. title="box tree|tree!!of boxes">box 7.363 + tree.</dfn> (Is the space between words a kind of box as well, or a 7.364 + spacer item? Is the current selection a box? Is there a defined order 7.365 + among sibling boxes? If so, are bidi inline boxes ordered in reading 7.366 + order or in visual order?) 7.367 + 7.368 + <p>[Define the box tree before pagination and then describe how pagination 7.369 + can break one box into two?] 7.370 + 7.371 + <ul> 7.372 + <li>If the parent element is a list item, the boxes go into the parent's 7.373 + block box, not the marker box. 7.374 + 7.375 + <li>If the element is run-in, its boxes go either into a box of its 7.376 + parent element, or into a box of a later sibling. 7.377 + 7.378 + <li>The order of sibling boxes is always such that boxes that belong to 7.379 + elements earlier in the document come before boxes of elements that come 7.380 + later in the document. 7.381 + 7.382 + <li>Note that ‘<code class=property>position</code>’ can put a box 7.383 + into the box of an ancestor (the one establishing the containing block) 7.384 + rather than a parent. 7.385 + 7.386 + <li>Note that ‘<a href="#flow0"><code class=property>flow</code></a>’ 7.387 + puts boxes into a named flow root. 7.388 + </ul> 7.389 + </div> 7.390 + 7.391 + <p>When the specification says a box <var>A</var> <dfn 7.392 + id=contains>contains</dfn> a box <var>B</var> it means <var>B</var> is a 7.393 + child of <var>A</var> in the <a href="#box-tree."><em>box tree.</em></a> 7.394 + Typically, box <var>B</var> is geometrically contained within box 7.395 + <var>A</var> as well, but that need not be the case, because of, e.g., 7.396 + overflow or negative margins. 7.397 7.398 <p class=note>Note: The precise rules are below and in other modules, but 7.399 - in summary, a block-level box contains either other block-level boxes 7.400 - (e.g., a section containing paragraphs, or a table containing rows), or it 7.401 - contains line boxes (e.g., a paragraph containing lines of text). A line 7.402 - box contains inline-level boxes (e.g., a line with words in different 7.403 - styles). An inline-level box may contain either text interspersed with 7.404 - more inline-level boxes, or it may contain a block-level box (e.g., a 7.405 - small table that is rendered inline). 7.406 + in summary, <span class=issue>[write something that helps convey the idea 7.407 + of a flow, e.g.:]</span> a block-level box contains either other 7.408 + block-level boxes (e.g., a section containing paragraphs, or a table 7.409 + containing rows), or it contains line boxes (e.g., a paragraph containing 7.410 + lines of text). A line box contains inline-level boxes (e.g., a line with 7.411 + words in different styles). An inline-level box may contain either text 7.412 + interspersed with more inline-level boxes, or it may contain a block-level 7.413 + box (e.g., a small table that is rendered inline). 7.414 7.415 <div class=figure> 7.416 <p><img alt="Schematic representation of rel" src=box-intro.png> 7.417 @@ -460,7 +519,8 @@ 7.418 <li>The second item. 7.419 </ul></pre> 7.420 7.421 - <p>may result in one block-level box for the <code>ul</code> element, 7.422 + <p>may result in <span class=issue>[rewrite the following 7.423 + sentence?]</span> one block-level box for the <code>ul</code> element, 7.424 containing two block-level boxes for the two <code>li</code> elements, 7.425 each of which has one line box (i.e., one line of text). Both line boxes 7.426 contain two inline-level boxes: one that contains the list bullet and one 7.427 @@ -473,31 +533,61 @@ 7.428 <p>If the document is rendered in a narrow window, it may be that the 7.429 <code>li</code> elements get transformed into even more boxes, because 7.430 the text requires multiple lines. And if the document is rendered on 7.431 - paper, it may be that a page break falls in the middle of the 7.432 - <code>ul</code> element, so that it is not transformed into a single 7.433 - block-level box, but into two smaller ones, each on a different page. 7.434 + paper or in multiple columns, it may be that a page break falls in the 7.435 + middle of the <code>ul</code> element, so that it is not transformed into 7.436 + a single block-level box, but into two smaller ones, each on a different 7.437 + page or column. 7.438 </div> 7.439 7.440 <p>Each box belongs to exactly one element. It is either <a 7.441 href="#generates" title="generated box">generated</a> directly by the 7.442 - element, or it is an <a href="#anonymous-box"><em>anonymous box</em></a> 7.443 - (defined below), which is inserted because the layout rules of CSS require 7.444 - a box to contain a certain kind of other box, but the boxes generated by 7.445 - the child elements are not of that kind. The anonymous box is defined to 7.446 - belong to the parent. 7.447 - 7.448 - <p class=note>Note: This is mainly important for <span class=index 7.449 - id=wysiwyg-document-editors>WYSIWYG document editors</span>: if the user 7.450 - selects a box on the screen in order to set a property, the editor knows 7.451 - which element to set the property on. 7.452 - 7.453 - <p>Properties are set on elements and influence how the element is turned 7.454 - into boxes, but in this specification we refer interchangeably to “the 7.455 - <var>P</var> property of an element” and “the <var>P</var> property of 7.456 - a box” (both of which actually mean “<em>the value</em> of property 7.457 - <var>P</var> of…”), unless it is important to distinguish the box and 7.458 - the element, e.g., because the element has several boxes and they don't 7.459 - all have the same value for the property. 7.460 + element, or it is an <a href="#anonymous-box"><em>anonymous box,</em></a> 7.461 + which has been inserted to ensure that every box and its parent are of 7.462 + mutually compatible types as defined by the layout rules of CSS. An 7.463 + anonymous box is defined to belong to whichever element generates the 7.464 + box's closest element-generated ancestor box. When we need to be precise, 7.465 + we say that the anonymous box is <dfn id=induced>induced,</dfn> rather 7.466 + than generated, by the element it belongs to. 7.467 + 7.468 + <p class=note>For example, an anonymous table wrapper box that is created 7.469 + around a table cell because the table cell element doesn't have a table 7.470 + element as parent, belongs to the parent element of the table cell, not to 7.471 + the table cell itself. 7.472 + 7.473 + <p class=note>An anonymous box is never a <em>principal</em> box. Except 7.474 + for that, an anonymous box cannot be distinguished by its property values 7.475 + and characteristics from a box generated by some hypothetical document 7.476 + element. <span class=issue>Remove this note? Do we actually use the 7.477 + concept of “principal box” anywhere?</span> 7.478 + 7.479 + <p>Properties are set on elements <a href="#CSS3CASCADE" 7.480 + rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a> and influence how 7.481 + the element is turned into boxes. Every box has the same properties with 7.482 + the same values as the element to which it belongs, except for anonymous 7.483 + boxes: inheritable properties on anonymous boxes have the same value as 7.484 + the element, while non-inheritable properties have the initial value. The 7.485 + only property that boxes do not have is the ‘<a href="#display0"><code 7.486 + class=property>display</code></a>’ property. <span 7.487 + class=issue>[Actually, boxes are just rectangles with a border, a 7.488 + background, a position, a bunch of other boxes inside, and a reference to 7.489 + the element they belong to. They don't really have properties. But it is 7.490 + convenient to say the “the box has a font <var>X</var>” rather than 7.491 + the verbose “the element that generated the box has a font 7.492 + <var>X</var>.”</span> 7.493 + 7.494 + <p>Boxes do not have specified values <a href="#CSS3CASCADE" 7.495 + rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>, but they do have 7.496 + computed, used and actual values. 7.497 + 7.498 + <p class=note>Boxes are frequently referred to by their property values. 7.499 + For example, a “floated box” is a box whose computed value of ‘<a 7.500 + href="#float"><code class=property>float</code></a>’ is not ‘<code 7.501 + class=css>none</code>’, and a “positioned box” is a box whose 7.502 + computed value of ‘<code class=property>position</code>’ is not 7.503 + ‘<code class=css>static</code>’. However, terms such as 7.504 + <em>block-level box,</em> <a href="#block-container-box"><em>block 7.505 + container box</em></a> and <em>table box</em> describe characteristics 7.506 + which cannot be deduced solely from a box's property values. 7.507 7.508 <div class=figure id=various> 7.509 <p><img 7.510 @@ -509,8 +599,10 @@ 7.511 7.512 <p>Boxes have padding, a border and margins (see the <a 7.513 href="#various">figure</a>). Different properties determine the thickness 7.514 - of each of these (which may be zero). The margins are also subject to <a 7.515 - href="#collapse."><em title=collapse>collapsing.</em></a> 7.516 + of each of these (which may be zero). The margins of adjacent boxes are 7.517 + also subject to <a href="#collapse."><em 7.518 + title=collapse>collapsing</em></a> (i.e., the actual margin between 7.519 + adjacent boxes may be less than the sum of the boxes' individual margins). 7.520 7.521 <p>Each box has a <dfn id=content-area>content area</dfn> (a.k.a. <dfn 7.522 id=content-box>content box</dfn>). The rectangle that bounds this area is 7.523 @@ -525,8 +617,10 @@ 7.524 the <dfn id=margin-area>margin area</dfn> and its outer edge is the <dfn 7.525 id=margin-edge.>margin edge.</dfn> 7.526 7.527 - <p>When the specification says that the padding or border is “absent” 7.528 - on some side of the box, that actually means that its thickness is zero. 7.529 + <p>When the specification says that the padding or border is <dfn 7.530 + id=ldquoabsentrdquo 7.531 + title="absent|padding!!absent|border!!absent">“absent”</dfn> on some 7.532 + side of the box, that means that its thickness is zero. 7.533 7.534 <p><a href="#line-box."><em title="line box">Line boxes</em></a> cannot 7.535 have any padding, border or margin, and therefore their margin edge, 7.536 @@ -542,18 +636,15 @@ 7.537 href="#CSS3-EXCLUSIONS" 7.538 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>. 7.539 7.540 - <p>A box or element is <dfn id=horizontal>horizontal</dfn> if its ‘<a 7.541 - href="#writing-mode"><code class=property>writing-mode</code></a>’ 7.542 - property is ‘<code class=css>horizontal-tb</code>’, otherwise it is 7.543 - <dfn id=vertical.>vertical.</dfn> The <dfn 7.544 - id=orientation>orientation</dfn> of a box or element is the pair of values 7.545 - of its ‘<a href="#writing-mode"><code 7.546 - class=property>writing-mode</code></a>’ and ‘<a 7.547 - href="#direction"><code class=property>direction</code></a>’ 7.548 + <p>We say that a box or element is <dfn id=horizontal>horizontal</dfn> if 7.549 + its ‘<a href="#writing-mode"><code 7.550 + class=property>writing-mode</code></a>’ property is ‘<code 7.551 + class=css>horizontal-tb</code>’, otherwise it is <dfn 7.552 + id=vertical.>vertical.</dfn> 7.553 7.554 <div class=note> 7.555 - <p>Note that there are theoretically eight possible orientations, but CSS 7.556 - only defines six: 7.557 + <p>Note that there are theoretically eight possible orientations for text, 7.558 + but CSS only defines six: 7.559 7.560 <table class=equiv-table> 7.561 <thead> 7.562 @@ -578,7 +669,7 @@ 7.563 <td> 7.564 <p>Text is written top to bottom and paragraphs grow to the left 7.565 7.566 - <p><img alt="" class=small src=vertical-rl.png> 7.567 + <p><img alt="" class=small src=vertical.png> 7.568 7.569 <td> 7.570 <p>Text is written top to bottom and paragraphs grow to the right 7.571 @@ -591,20 +682,42 @@ 7.572 <td> 7.573 <p>Text is written from right to left and paragraphs grow downwards 7.574 7.575 + <p><img alt="" class=small src=horizontal-rtl.png> 7.576 + 7.577 <td> 7.578 <p>Text is written bottom to top and paragraphs grow to the left 7.579 7.580 + <p><img alt="" class=small src=vertical-rtl.png> 7.581 + 7.582 <td> 7.583 <p>Text is written bottom to top and paragraphs grow to the right 7.584 + 7.585 + <p><img alt="" class=small src=vertical-lr-rtl.png> 7.586 </table> 7.587 7.588 - <p>There is no “horizontal-bt.” 7.589 + <p>There is no “horizontal-bt.” More information about ‘<a 7.590 + href="#writing-mode"><code class=property>writing-mode</code></a>’ and 7.591 + ‘<a href="#direction"><code class=property>direction</code></a>’ can 7.592 + be found in <a href="#CSS3-WRITING-MODES" 7.593 + rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 7.594 </div> 7.595 7.596 - <p>This specification sometimes refers to abstract edges <dfn 7.597 - id=head>head,</dfn> <dfn id=end>end,</dfn> <dfn id=tail>tail</dfn> and 7.598 - <dfn id=start>start,</dfn> which are relative to the orientation of a box. 7.599 - They map to top, right, bottom and left as follows: 7.600 + <p class=mtb>Calculations of the size and position of boxes are usually 7.601 + very similar for horizontal and vertical boxes, except that the horizontal 7.602 + and vertical directions are interchanged. To avoid many almost identical 7.603 + definitions, this specification therefore often uses abstract terms 7.604 + instead of top, right, bottom, left, width and height: four terms (head 7.605 + edge, foot edge, start edge and end edge) for the four edges of a box, 7.606 + four terms (A edge, B edge, C edge and D edge) for the edges of the 7.607 + children of a box and two terms (block dimension and inline dimension for 7.608 + the width and height of a box. 7.609 + 7.610 + <p>The <dfn id=head>head,</dfn> <dfn id=foot>foot,</dfn> <dfn 7.611 + id=start>start</dfn> and <dfn id=end>end</dfn> edge of a box refer to the 7.612 + top, right, bottom and left edges, depending on the ‘<a 7.613 + href="#writing-mode"><code class=property>writing-mode</code></a>’ and 7.614 + ‘<a href="#direction"><code class=property>direction</code></a>’ 7.615 + properties of that box, as follows: 7.616 7.617 <table class=equiv-table> 7.618 <thead> 7.619 @@ -619,13 +732,13 @@ 7.620 7.621 <th>Meaning of “end” 7.622 7.623 - <th>Meaning of “tail” 7.624 + <th>Meaning of “foot” 7.625 7.626 <th>Meaning of “start” 7.627 7.628 <tbody> 7.629 <tr> 7.630 - <th>‘<code class=css>horizontal-tb</code>’ 7.631 + <th rowspan=2>‘<code class=css>horizontal-tb</code>’ 7.632 7.633 <th>‘<code class=css>ltr</code>’ 7.634 7.635 @@ -637,8 +750,7 @@ 7.636 7.637 <td>left 7.638 7.639 - <tr> 7.640 - <th>‘<code class=css>horizontal-tb</code>’ 7.641 + <tr><!-- horizontal-tb --> 7.642 7.643 <th>‘<code class=css>rtl</code>’ 7.644 7.645 @@ -651,7 +763,7 @@ 7.646 <td>right 7.647 7.648 <tr> 7.649 - <th>‘<code class=css>vertical-rl</code>’ 7.650 + <th rowspan=2>‘<code class=css>vertical-rl</code>’ 7.651 7.652 <th>‘<code class=css>ltr</code>’ 7.653 7.654 @@ -663,8 +775,7 @@ 7.655 7.656 <td>top 7.657 7.658 - <tr> 7.659 - <th>‘<code class=css>vertical-rl</code>’ 7.660 + <tr><!-- vertical-rl'' --> 7.661 7.662 <th>‘<code class=css>rtl</code>’ 7.663 7.664 @@ -677,7 +788,7 @@ 7.665 <td>bottom 7.666 7.667 <tr> 7.668 - <th>‘<code class=css>vertical-lr</code>’ 7.669 + <th rowspan=2>‘<code class=css>vertical-lr</code>’ 7.670 7.671 <th>‘<code class=css>rtl</code>’ 7.672 7.673 @@ -689,8 +800,7 @@ 7.674 7.675 <td>top 7.676 7.677 - <tr> 7.678 - <th>‘<code class=css>vertical-lr</code>’ 7.679 + <tr><!-- vertical-lr --> 7.680 7.681 <th>‘<code class=css>ltr</code>’ 7.682 7.683 @@ -703,145 +813,41 @@ 7.684 <td>bottom 7.685 </table> 7.686 7.687 - <p>For example, the “head padding” by default refers to the ‘<a 7.688 - href="#padding-top"><code class=property>padding-top</code></a>’ and the 7.689 - “end border” is by default the ‘<code 7.690 + <p class=note>For example, the “head padding” by default refers to the 7.691 + ‘<a href="#padding-top"><code class=property>padding-top</code></a>’ 7.692 + and the “end border” is by default the ‘<code 7.693 class=property>border-right</code>’. 7.694 7.695 - <div class=issue> 7.696 - <p>[Alternative terminology:] 7.697 - 7.698 - <p>This specification sometimes refers to abstract edges <dfn 7.699 - id=a>A,</dfn> <dfn id=b>B,</dfn> <dfn id=c>C</dfn> and <dfn id=d>D,</dfn> 7.700 - which are relative to the orientation of a box. They map to top, right, 7.701 - bottom and left as follows: 7.702 - 7.703 - <table class=equiv-table> 7.704 - <thead> 7.705 - <tr> 7.706 - <th>Value of ‘<a href="#writing-mode"><code 7.707 - class=property>writing-mode</code></a>’ 7.708 - 7.709 - <th>Value of ‘<a href="#direction"><code 7.710 - class=property>direction</code></a>’ 7.711 - 7.712 - <th>Meaning of “A” 7.713 - 7.714 - <th>Meaning of “B” 7.715 - 7.716 - <th>Meaning of “C” 7.717 - 7.718 - <th>Meaning of “D” 7.719 - 7.720 - <tbody> 7.721 - <tr> 7.722 - <th>‘<code class=css>horizontal-tb</code>’ 7.723 - 7.724 - <th>‘<code class=css>ltr</code>’ 7.725 - 7.726 - <td>top 7.727 - 7.728 - <td>right 7.729 - 7.730 - <td>bottom 7.731 - 7.732 - <td>left 7.733 - 7.734 - <tr> 7.735 - <th>‘<code class=css>horizontal-tb</code>’ 7.736 - 7.737 - <th>‘<code class=css>rtl</code>’ 7.738 - 7.739 - <td>top 7.740 - 7.741 - <td>left 7.742 - 7.743 - <td>bottom 7.744 - 7.745 - <td>right 7.746 - 7.747 - <tr> 7.748 - <th>‘<code class=css>vertical-rl</code>’ 7.749 - 7.750 - <th>‘<code class=css>ltr</code>’ 7.751 - 7.752 - <td>right 7.753 - 7.754 - <td>bottom 7.755 - 7.756 - <td>left 7.757 - 7.758 - <td>top 7.759 - 7.760 - <tr> 7.761 - <th>‘<code class=css>vertical-rl</code>’ 7.762 - 7.763 - <th>‘<code class=css>rtl</code>’ 7.764 - 7.765 - <td>right 7.766 - 7.767 - <td>top 7.768 - 7.769 - <td>left 7.770 - 7.771 - <td>bottom 7.772 - 7.773 - <tr> 7.774 - <th>‘<code class=css>vertical-lr</code>’ 7.775 - 7.776 - <th>‘<code class=css>rtl</code>’ 7.777 - 7.778 - <td>left 7.779 - 7.780 - <td>bottom 7.781 - 7.782 - <td>right 7.783 - 7.784 - <td>top 7.785 - 7.786 - <tr> 7.787 - <th>‘<code class=css>vertical-lr</code>’ 7.788 - 7.789 - <th>‘<code class=css>ltr</code>’ 7.790 - 7.791 - <td>left 7.792 - 7.793 - <td>top 7.794 - 7.795 - <td>right 7.796 - 7.797 - <td>bottom 7.798 - </table> 7.799 - 7.800 - <p>For example, the “A padding” by default refers to the ‘<a 7.801 - href="#padding-top"><code class=property>padding-top</code></a>’ and 7.802 - the “B border” is by default the ‘<code 7.803 - class=property>border-right</code>’. 7.804 - </div> 7.805 - 7.806 - <p>Similarly, the specification sometimes refers to the <dfn id=inline 7.807 - title="inline dimension">inline</dfn> and <dfn id=block-flow 7.808 - title="block flow dimension">block flow</dfn> dimensions of a box, instead 7.809 - of width and height, as follows: 7.810 + <p>Similarly, the specification sometimes refers to the <dfn 7.811 + id=inline-dimension>inline dimension</dfn> and <dfn 7.812 + id=block-dimension>block dimension</dfn> of a box, instead of width and 7.813 + height, as follows: 7.814 7.815 <table class=equiv-table> 7.816 <tbody> 7.817 <tr> 7.818 - <th>Writing mode 7.819 + <th>‘<code class=css>Writing mode</code>’ 7.820 7.821 <th>Meaning of “inline dimension” 7.822 7.823 - <th>Meaning of “block flow dimension” 7.824 - 7.825 - <tr> 7.826 - <td><a href="#horizontal">horizontal</a> 7.827 + <th>Meaning of “block dimension” 7.828 + 7.829 + <tr> 7.830 + <td>‘<code class=css>horizontal-tb</code>’ 7.831 7.832 <td>width 7.833 7.834 <td>height 7.835 7.836 <tr> 7.837 - <td><a href="#vertical.">vertical</a> 7.838 + <td>‘<code class=css>vertical-rl</code>’ 7.839 + 7.840 + <td>height 7.841 + 7.842 + <td>width 7.843 + 7.844 + <tr> 7.845 + <td>‘<code class=css>vertical-lr</code>’ 7.846 7.847 <td>height 7.848 7.849 @@ -853,115 +859,134 @@ 7.850 <a href="#block-flow-direction"><em>block flow direction,</em></a> 7.851 respectively. 7.852 7.853 - <div class=issue> 7.854 - <p>[Alternative terminology:] 7.855 - 7.856 - <p>Similarly, the specification sometimes refers to the <dfn 7.857 - id=b-d>B-D</dfn> and <dfn id=a-c>A-C</dfn> dimensions of a box, instead 7.858 - of width and height, as follows: 7.859 - 7.860 - <table class=equiv-table> 7.861 - <tbody> 7.862 - <tr> 7.863 - <th>Writing mode 7.864 - 7.865 - <th>Meaning of “B-D” 7.866 - 7.867 - <th>Meaning of “A-C” 7.868 - 7.869 - <tr> 7.870 - <td><a href="#horizontal">horizontal</a> 7.871 - 7.872 - <td>width 7.873 - 7.874 - <td>height 7.875 - 7.876 - <tr> 7.877 - <td><a href="#vertical.">vertical</a> 7.878 - 7.879 - <td>height 7.880 - 7.881 - <td>width 7.882 - </table> 7.883 - 7.884 - <p>These correspond to the dimensions in the <a 7.885 - href="#inline-base-direction."><em>inline base direction</em></a> and the 7.886 - <a href="#block-flow-direction"><em>block flow direction,</em></a> 7.887 - respectively. 7.888 - </div> 7.889 - 7.890 - <p>Finally, the <dfn id=headside>headside,</dfn> <dfn 7.891 - id=endside>endside,</dfn> <dfn id=tailside>tailside</dfn> and <dfn 7.892 - id=startside>startside</dfn> of a box are defined as the sides that 7.893 - correspond to the <a href="#head"><em>head,</em></a> <a 7.894 - href="#end"><em>end,</em></a> <a href="#tail"><em>tail</em></a> and <a 7.895 - href="#start"><em>start,</em></a> of the <a 7.896 - href="#containing-block"><em>containing block</em></a> of the box. 7.897 - 7.898 - <div class=example> 7.899 - <p>For example, if a box has a ‘<a href="#writing-mode"><code 7.900 - class=property>writing-mode</code></a>’ of ‘<code 7.901 - class=css>horizontal-tb</code>’, then its top content edge acts as its 7.902 - <a href="#head"><em>head</em></a> content edge, and the <a 7.903 - href="#headside"><em>headside</em></a> edges of its children are 7.904 - therefore their top edges, independent of what their own ‘<a 7.905 - href="#writing-mode"><code class=property>writing-mode</code></a>’ is. 7.906 - 7.907 - <div class=figure> 7.908 - <p><img 7.909 - alt="[Figure: the “head content edge” of the child box the right edge, but the“headside content edge” is the top.]" 7.910 - src=headside> 7.911 - 7.912 - <p class=caption>The second child box is a vertical box and has its 7.913 - “head” content edge on the right. But its “headside” content 7.914 - edge is at the top. 7.915 - </div> 7.916 - </div> 7.917 - 7.918 - <div class=issue> 7.919 - <p>[Alternative terminology:] 7.920 - 7.921 - <p>Finally, the <dfn id=aprime>A′,</dfn> <dfn id=bprime>B′,</dfn> <dfn 7.922 - id=cprime>C′</dfn> and <dfn id=dprime>D′</dfn> sides of a box are 7.923 - defined as the sides that correspond to the <a 7.924 - href="#aprime"><em>A,</em></a> <a href="#bprime"><em>B,</em></a> <a 7.925 - href="#cprime"><em>C</em></a> and <a href="#dprime"><em>D</em></a> sides 7.926 - of the <a href="#containing-block"><em>containing block</em></a> of the 7.927 - box. 7.928 - 7.929 - <div class=example> 7.930 - <p>For example, if a box has a ‘<a href="#writing-mode"><code 7.931 - class=property>writing-mode</code></a>’ of ‘<code 7.932 - class=css>horizontal-tb</code>’, then its top content edge acts as its 7.933 - <a href="#aprime"><em>A</em></a> content edge, and the <a 7.934 - href="#aprime"><em>A′</em></a> edges of its children are therefore 7.935 - their top edges, independent of what their own ‘<a 7.936 - href="#writing-mode"><code class=property>writing-mode</code></a>’ is. 7.937 - 7.938 - 7.939 - <div class=figure> 7.940 - <p><img 7.941 - alt="[Figure: the “A content edge” of the child box the right edge, but the “A′ content edge” is the top.]" 7.942 - src=headside> 7.943 - 7.944 - <p class=caption>The second child box is a vertical box and has its 7.945 - “A” content edge on the right. But its “A′” content edge is 7.946 - at the top. 7.947 - </div> 7.948 - </div> 7.949 - <!-- /figure --></div> 7.950 - <!-- /example --> 7.951 - <!-- /issue --> 7.952 - 7.953 - <p class=issue>Check terms. At Cambridge ftf Aug 2008 we chose: Property 7.954 - name: block-flow with values tb | lr | rl | bt. Descriptive terms: 7.955 - horizontal mode (= tb & bt), vertical mode (= lr & rl). The May 7.956 - 2012 Writing Modes module now has ‘<a href="#writing-mode"><code 7.957 - class=property>writing-mode</code></a>’ with values ‘<code 7.958 - class=css>horizontal-tb</code>’, ‘<code 7.959 - class=css>vertical-rl</code>’ and ‘<code 7.960 - class=css>vertical-lr</code>’ (and no ‘<code class=css>bt</code>’ 7.961 - anymore). 7.962 + <p>An alternative term for the inline dimension is <dfn id=logical-width 7.963 + title="logical width|width!!logical">logical width</dfn> and an 7.964 + alternative term for block dimension is <dfn id=logical-height. 7.965 + title="logical height|height!!logical">logical height.</dfn> These terms 7.966 + occasionally occur in other CSS modules. 7.967 + 7.968 + <p class=note>The block dimension of a box is thus the distance between the 7.969 + head and tail edges, while the inline dimension of the box is the distance 7.970 + between the start and end edges. 7.971 + 7.972 + <p>When boxes are laid out in sequence to form a <a href="#flow0"><em 7.973 + class=index id=flow>flow</em></a> (see below), their edges play different 7.974 + roles in the alignment of the boxes within that flow. The orientation of 7.975 + the flow determines which edge of a box is aligned to which edge of 7.976 + another box. These roles are independent of the orientation of the box 7.977 + itself. We distinguish four roles for the edges of a box, called <dfn 7.978 + id=a-edge>A edge,</dfn> <dfn id=b-edge>B edge,</dfn> <dfn id=c-edge>C 7.979 + edge</dfn> and <dfn id=d-edge.>D edge.</dfn> They depend on the ‘<a 7.980 + href="#writing-mode"><code class=property>writing-mode</code></a>’ and 7.981 + ‘<a href="#direction"><code class=property>direction</code></a>’ 7.982 + properties of the box's <a href="#containing-block0"><em class=index 7.983 + id=containing-block>containing block</em></a> (defined below), and map to 7.984 + the four sides as follows: 7.985 + 7.986 + <table class=equiv-table> 7.987 + <thead> 7.988 + <tr> 7.989 + <th>‘<a href="#writing-mode"><code 7.990 + class=property>writing-mode</code></a>’ of <a 7.991 + href="#containing-block0"><em>containing block</em></a> 7.992 + 7.993 + <th>‘<a href="#direction"><code class=property>direction</code></a>’ 7.994 + of <a href="#containing-block0"><em>containing block</em></a> 7.995 + 7.996 + <th>Meaning of “A” 7.997 + 7.998 + <th>Meaning of “B” 7.999 + 7.1000 + <th>Meaning of “C” 7.1001 + 7.1002 + <th>Meaning of “D” 7.1003 + 7.1004 + <tbody> 7.1005 + <tr> 7.1006 + <th rowspan=2>‘<code class=css>horizontal-tb</code>’ 7.1007 + 7.1008 + <th>‘<code class=css>ltr</code>’ 7.1009 + 7.1010 + <td>top 7.1011 + 7.1012 + <td>right 7.1013 + 7.1014 + <td>bottom 7.1015 + 7.1016 + <td>left 7.1017 + 7.1018 + <tr><!-- horizontal-tb --> 7.1019 + 7.1020 + <th>‘<code class=css>rtl</code>’ 7.1021 + 7.1022 + <td>top 7.1023 + 7.1024 + <td>left 7.1025 + 7.1026 + <td>bottom 7.1027 + 7.1028 + <td>right 7.1029 + 7.1030 + <tr> 7.1031 + <th rowspan=2>‘<code class=css>vertical-rl</code>’ 7.1032 + 7.1033 + <th>‘<code class=css>ltr</code>’ 7.1034 + 7.1035 + <td>right 7.1036 + 7.1037 + <td>bottom 7.1038 + 7.1039 + <td>left 7.1040 + 7.1041 + <td>top 7.1042 + 7.1043 + <tr><!-- vertical-rl --> 7.1044 + 7.1045 + <th>‘<code class=css>rtl</code>’ 7.1046 + 7.1047 + <td>right 7.1048 + 7.1049 + <td>top 7.1050 + 7.1051 + <td>left 7.1052 + 7.1053 + <td>bottom 7.1054 + 7.1055 + <tr> 7.1056 + <th rowspan=2>‘<code class=css>vertical-lr</code>’ 7.1057 + 7.1058 + <th>‘<code class=css>rtl</code>’ 7.1059 + 7.1060 + <td>left 7.1061 + 7.1062 + <td>bottom 7.1063 + 7.1064 + <td>right 7.1065 + 7.1066 + <td>top 7.1067 + 7.1068 + <tr><!-- vertical-lr --> 7.1069 + 7.1070 + <th>‘<code class=css>ltr</code>’ 7.1071 + 7.1072 + <td>left 7.1073 + 7.1074 + <td>top 7.1075 + 7.1076 + <td>right 7.1077 + 7.1078 + <td>bottom 7.1079 + </table> 7.1080 + 7.1081 + <p class=note>For example, block-level boxes in a flow are laid out such 7.1082 + that the A edge of the first box is against the head edge of the 7.1083 + containing block and then the A edge of each subsequent box is put against 7.1084 + the C edge of its predecessor. For typical English text (i.e., <a 7.1085 + href="#horizontal"><em>horizontal</em></a> text), this means the top edge 7.1086 + (= A edge) of the first paragraph is at the top edge (= head edge) of the 7.1087 + document, the top (A edge) of the second paragraph is against the bottom 7.1088 + (C edge) of the first paragraph, and so on, until the bottom (C edge) of 7.1089 + the last paragraph becomes the bottom (tail edge) of the document. 7.1090 7.1091 <h2 id=the-viewport-and-the-canvas><span class=secno>4. </span>The viewport 7.1092 and the canvas</h2> 7.1093 @@ -982,291 +1007,366 @@ 7.1094 where the formatting structure is rendered. The canvas is infinite for 7.1095 each dimension of the space. 7.1096 7.1097 - <h2 id=aspect-ratios-of-replaced-elements><span class=secno>5. 7.1098 - </span>Aspect ratios of replaced elements</h2> 7.1099 - 7.1100 - <p>For the purposes of the width and height calculations below, CSS 7.1101 - distinguishes four kinds of <a href="#replaced-element"><em class=index 7.1102 - id=replaced-elements title="replaced element">replaced elements</em></a>: 7.1103 - 7.1104 - <dl> 7.1105 - <dt>Type 1: replaced elements with both <em class=index 7.1106 - id=intrinsic-width>intrinsic width</em> and <em class=index 7.1107 - id=intrinsic-height.>intrinsic height.</em> 7.1108 - 7.1109 - <dd>These are replaced elements that are meant to be displayed with a 7.1110 - certain fixed factor (the <em>intrinsic ratio</em>) between their width 7.1111 - and height and also have a default size. Different formats may have 7.1112 - different ways of specifying the size, e.g., a width and a ratio, or a 7.1113 - raster and a resolution in dots per inch. Raster images fall in this 7.1114 - category. 7.1115 - 7.1116 - <dt>Type 2: replaced elements with only an <em>intrinsic ratio</em> 7.1117 - 7.1118 - <dd>These are replaced elements that are meant to be displayed with a 7.1119 - certain fixed factor between their width and height, but without a 7.1120 - default size. <span class=index id=svg>SVG</span> images often fall in 7.1121 - the this category. 7.1122 - 7.1123 - <dt>Type 3: replaced elements with a <dfn id=complex-aspect-ratio>complex 7.1124 - aspect ratio</dfn> 7.1125 - 7.1126 - <dd>These are replaced elements that do not have a <em>fixed</em> ratio 7.1127 - between their width and height, but that do have a functional relation 7.1128 - between them in the sense that for every width there is a unique height. 7.1129 - HTML documents are examples of this: the width can be chosen freely, but 7.1130 - at every width there is a definite intrinsic height. 7.1131 - 7.1132 - <dt>Type 4: replaced elements without an intrinsic ratio 7.1133 - 7.1134 - <dd>These are replaced elements that have no relation between their width 7.1135 - and height. Certain <span class=index id=svg0>SVG</span> images are 7.1136 - examples of this. 7.1137 - </dl> 7.1138 - 7.1139 - <p>For <span class=index id=raster-images>raster images</span> without 7.1140 - reliable resolution information, a size of 1 px unit per image source 7.1141 - pixel must be assumed. These images thus are of type 1. 7.1142 + <h2 id=flows><span class=secno>5. </span>Flows</h2> 7.1143 + 7.1144 + <p>The <dfn id=flow0>flow</dfn> (sometimes called <dfn 7.1145 + id=normal-flow>normal flow</dfn>) is one of the two basic kinds of layout 7.1146 + in CSS, together with line layout <a href="#CSS3LINE" 7.1147 + rel=biblioentry>[CSS3LINE]<!--{{CSS3LINE}}--></a>. It can be used, e.g., 7.1148 + to layout a sequence of paragraphs, headings, lists and floated elements 7.1149 + in a single column. Other CSS modules, such as tables <a href="#CSS3TBL" 7.1150 + rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>, positioning <a 7.1151 + href="#CSS3POS" rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>, flex 7.1152 + boxes <a href="#CSS3-FLEXBOX" 7.1153 + rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a> and grid 7.1154 + templates <a href="#CSS3LAYOUT" 7.1155 + rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>, build on the flow 7.1156 + model by defining ways to split a document into more than one flow and 7.1157 + positioning and aligning those flows in various ways on the canvas. 7.1158 + 7.1159 + <p>A flow is constructed starting from a <span class=index id=box 7.1160 + title="flow root!!box">box</span> called the <dfn id=flow-root>flow 7.1161 + root</dfn> by the <a href="#construct-flow">rules below.</a> We say the 7.1162 + flow is <dfn id=channeled>channeled</dfn> by the flow root. 7.1163 + 7.1164 + <p>The <dfn id=initial-flow title="initial flow|flow!!initial">initial 7.1165 + flow</dfn> is the flow that contains the root of the box tree. 7.1166 + 7.1167 + <p>Despite not being a box, the <a 7.1168 + href="#initial-containing-block."><em>initial containing block</em></a> is 7.1169 + said to be the flow root of the initial flow. 7.1170 + 7.1171 + <p class=issue id=pagination-issue>How do we model pagination? If a flow is 7.1172 + broken over two pages or columns, do we call it a single flow or two 7.1173 + flows? I.e., is the page box the flow root of the flow, or is the page box 7.1174 + something else, more like the viewport, which influences the layout of a 7.1175 + flow but isn't part of it? 7.1176 + 7.1177 + <p>Only <a href="#block-container-box"><em 7.1178 + title="block container box">block container boxes</em></a> (defined below) 7.1179 + can be flow roots. (Which implies that the children of a flow root are 7.1180 + laid out in a <a href="#block-formatting-context"><em>block formatting 7.1181 + context.</em></a>) 7.1182 + 7.1183 + <p>Several (combinations of) properties cause an element to generate boxes 7.1184 + that are flow roots. This module defines a few. Other modules may define 7.1185 + more. 7.1186 + 7.1187 + <div class=note> 7.1188 + <p>For example, this module defines that any of the following make a box 7.1189 + into a flow root: 7.1190 + 7.1191 + <ul> 7.1192 + <li>The value of ‘<a href="#float"><code 7.1193 + class=property>float</code></a>’ is not ‘<code 7.1194 + class=property>none</code>’. 7.1195 + 7.1196 + <li>The used value of ‘<a href="#overflow1"><code 7.1197 + class=property>overflow</code></a>’ is not ‘<code 7.1198 + class=property>visible</code>’. 7.1199 + <!-- <li>The box is a table wrapper, a table cell, an inline block, or an 7.1200 + align box. --> 7.1201 + <!-- <li>The value of 'position' is 'absolute' or 'fixed' (see 7.1202 + [CSS3POS]). --> 7.1203 + 7.1204 + <li>The box is vertical and its parent is horizontal. <span 7.1205 + class=issue>[Add link to the relevant section.]</span> 7.1206 + 7.1207 + <li>The box is horizontal and its parent is vertical. 7.1208 + <!-- <li>The value of 'transform' is not 'none'. --> 7.1209 + 7.1210 + <li>The value of ‘<a href="#child-align"><code 7.1211 + class=property>child-align</code></a>’ is not ‘<code 7.1212 + class=property>auto</code>’. <span class=issue>[If ‘<a 7.1213 + href="#child-align"><code class=property>child-align</code></a>’ is 7.1214 + adopted, rather than, say, ‘<code class=css>margin: 7.1215 + fill</code>’]</span> 7.1216 + </ul> 7.1217 + 7.1218 + <p>The table layout module <a href="#CSS3TBL" 7.1219 + rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a> defines that a table cell 7.1220 + generates a box that is a flow root; the positioning module <a 7.1221 + href="#CSS3POS" rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a> defines 7.1222 + that an absolutely positioned element generates a flow root; the grid 7.1223 + template module <a href="#CSS3LAYOUT" 7.1224 + rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a> defines that a 7.1225 + template element generate several flow roots; and the transforms module 7.1226 + <a href="#CSS3-TRANSFORMS" 7.1227 + rel=biblioentry>[CSS3-TRANSFORMS]<!--{{CSS3-TRANSFORMS}}--></a> defines 7.1228 + that an element with a transform generates a flow root 7.1229 + </div> 7.1230 + 7.1231 + <p class=mtb id=construct-flow>The flow of a given <a 7.1232 + href="#flow-root"><em>flow root</em></a> is a set of boxes. A box belongs 7.1233 + to the flow if all of the following are true: 7.1234 + 7.1235 + <ol> 7.1236 + <li>The used value of its ‘<a href="#display0"><code 7.1237 + class=property>display</code></a>’ is ‘<code 7.1238 + class=css>block</code>’, ‘<code class=css>list-item</code>’ or 7.1239 + ‘<code class=css>table</code>’. 7.1240 + 7.1241 + <li>The used value of its ‘<a href="#float"><code 7.1242 + class=property>float</code></a>’ is ‘<code class=css>none</code>’. 7.1243 + 7.1244 + <li>The used value of its ‘<code class=property>position</code>’ is 7.1245 + ‘<code class=css>static</code>’ or ‘<code 7.1246 + class=css>relative</code>’. 7.1247 + 7.1248 + <li>It is either a child of the flow root or a child of a box that belongs 7.1249 + to the flow. 7.1250 + </ol> 7.1251 + 7.1252 + <p class=note>Note that the flow root is itself not part of the flow it 7.1253 + channels and that each flow root channels at most one flow. 7.1254 + 7.1255 + <p class=note>Note that the last rule above implies that a flow with its 7.1256 + flow root together are always a connected subset of the box tree. In other 7.1257 + words; together, they form a subtree of the box tree with possibly some 7.1258 + branches removed. 7.1259 + 7.1260 + <p class=note>Note that the element tree and the box tree are not 7.1261 + necessarily parallel: the element a box belongs to need not be the child 7.1262 + of the element that generated the box's parent. E.g., run-in elements may 7.1263 + generate boxes that become children of boxes from sibling elements; and 7.1264 + the ‘<a href="#flow0"><code class=property>flow</code></a>’ property 7.1265 + <a href="#CSS3LAYOUT" 7.1266 + rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a> and the ‘<code 7.1267 + class=property>position</code>’ property <a href="#CSS3POS" 7.1268 + rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a> may cause an element to 7.1269 + generate a box that becomes the child of a box from a grandparent or other 7.1270 + ancestor element. E.g., ‘<code class=css>DIV {flow: b}</code>’ (see <a 7.1271 + href="#CSS3LAYOUT" rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>) 7.1272 + makes the DIV generate boxes that become children of the box generated by 7.1273 + slot b in some ancestor. And ‘<code class=css>DIV {position: 7.1274 + absolute}</code>’ causes the DIV to generate a box that becomes a child 7.1275 + of the box generated by the ancestor that established the DIV's <a 7.1276 + href="#containing-block0"><em>containing block.</em></a> 7.1277 7.1278 <div class=example> 7.1279 - <p>E.g., in the section on <a href="#inline-replaced">inline replaced 7.1280 - elements,</a> if the replaced element is an HTML document and the height 7.1281 - is specified as ‘<code class=css>auto</code>’, e.g.: 7.1282 - 7.1283 - <pre> 7.1284 -... <object data="example.html" 7.1285 - style="width: 30em; height: auto"></object>... 7.1286 -</pre> 7.1287 - 7.1288 - <p>then the used height will be 150px, which is unlikely to be the real 7.1289 - height of the example.html document. But if the height is specified as 7.1290 - ‘<code class=css>complex</code>’, e.g.: 7.1291 - 7.1292 - <pre> 7.1293 -... <object data="example.html" 7.1294 - style="width: 30em; height: complex"></object>... 7.1295 -</pre> 7.1296 - 7.1297 - <p>then the height will be the height the example.html document normally 7.1298 - has when displayed on its own with the given width. This enables almost 7.1299 - seamless integration of external text in a document, without a scrollbar 7.1300 - or similar. (The external text is still displayed with its own style 7.1301 - sheet.) 7.1302 + <p>For example, the fragment 7.1303 + 7.1304 + <pre><div class=sidebar> 7.1305 + <p>Text in a sidebar. 7.1306 + <p>Here is quote: 7.1307 + <blockquote lang=ja> 7.1308 + <p>... 7.1309 + </blockquote> 7.1310 + <p>Etc. etc. 7.1311 +</div> </pre> 7.1312 + 7.1313 + <p>with the style 7.1314 + 7.1315 + <pre>div.sidebar { writing-mode: tb; float: left } 7.1316 +blockquote[lang|=ja] { writing-mode: rl; height: 10em }</pre> 7.1317 + 7.1318 + <p>defines two flows: 7.1319 + 7.1320 + <ol> 7.1321 + <li>The <code>div</code> is a flow root, because it floats. Its flow 7.1322 + consist of the 1st, 2nd and 4th <code>p</code> and the 7.1323 + <code>blockquote</code>. 7.1324 + 7.1325 + <li>The <code>blockquote</code> is a <a 7.1326 + href="#vertical."><em>vertical</em></a> box inside a <a 7.1327 + href="#horizontal"><em>horizontal</em></a> parent and it is thus a flow 7.1328 + root. Its flow is formed by the 3rd <code>p</code>. 7.1329 + </ol> 7.1330 + 7.1331 + <p>(The <code>div</code> itself belongs to a third flow, but its flow root 7.1332 + is not shown in the fragment.) 7.1333 </div> 7.1334 7.1335 - <div class=example> 7.1336 - <p>An (external) mathematical formula in MathML is an example of replaced 7.1337 - content with an intrinsic width and height. Assume the file m.mml 7.1338 - contains a formula, then the HTML fragment 7.1339 - 7.1340 - <pre> 7.1341 -... derive <img src="m.mml" 7.1342 -alt="that the sum of p(i) for i greater than 0 equals N"> 7.1343 -for the case... 7.1344 -</pre> 7.1345 - 7.1346 - <p>renders the formula at its intrinsic size. 7.1347 - </div> 7.1348 - 7.1349 - <p class=issue>The mathematical formula would however benefit from a way to 7.1350 - negotiate available space against intrinsic size, or even negotiate 7.1351 - available space against the number of boxes, so that the formula could be 7.1352 - broken in two or more boxes and occupy space on two or more lines (similar 7.1353 - to how lines of text are broken or words are hyphenated). But an easier 7.1354 - solution might be to extend HTML with native support for math and CSS with 7.1355 - math boxes, so that replaced elements remain single boxes. 7.1356 - 7.1357 - <h2 id=basic-flow-layout><span class=secno>6. </span>Basic flow layout</h2> 7.1358 - 7.1359 - <p>As described in the introduction, elements give rise to boxes and those 7.1360 - boxes are laid out on a <a href="#canvas"><em>canvas.</em></a> Different 7.1361 - kinds of boxes are laid out differently. This section describes the layout 7.1362 - of one <a href="#flow"><em>flow</em></a> of boxes. 7.1363 - 7.1364 - <p>The approximate model for the layout of a flow of boxes is that sibling 7.1365 - boxes are laid out one after the other in one long series with margins 7.1366 - between them and parent boxes tightly wrap the series of child boxes. The 7.1367 - ‘<a href="#writing-mode"><code class=property>writing-mode</code></a>’ 7.1368 - property of the parent determines if that series grows down (‘<code 7.1369 - class=css>tb</code>’), to the left (‘<code class=css>rl</code>’), to 7.1370 - the right (‘<code class=css>lr</code>’) or up (‘<code 7.1371 - class=css>bt</code>’). Although the rules below depend on terms that are 7.1372 - only defined further down, the rules are given at the outset, to provide 7.1373 - at least an approximate model of how boxes are positioned relative to one 7.1374 - another. 7.1375 - 7.1376 - <p>The following rules define the position of <a 7.1377 - href="#block-level"><em>block-level</em></a> boxes relative to the box 7.1378 - that is their <a href="#flow-root"><em>flow root.</em></a> Other sections 7.1379 - and other modules describe how other boxes are laid out. E.g., floating 7.1380 - boxes are described further down in this module and absolutely positioned 7.1381 - boxes are described in the Absolute Positioning module <a href="#CSS3POS" 7.1382 - rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>. 7.1383 - 7.1384 - <p>Before applying these rules, the width, height and margins of each box 7.1385 - must be computed as described in the sections <a 7.1386 - href="#Calculating">“Calculating widths, heights and margins”</a> and 7.1387 - <a href="#Collapsing">“Collapsing margins.”</a> 7.1388 - 7.1389 - <ul> 7.1390 - <li> 7.1391 - <p>Consider the first box (in document order) of a set of sibling boxes 7.1392 - that all belong to the same flow. There are four cases: 7.1393 - 7.1394 + <p class=note>Note that a flow root is not necessarily block-level, it may 7.1395 + be an ‘<code class=css>inline-block</code>’, e.g. 7.1396 + 7.1397 + <p class=note>Note that a box belongs to at most one flow. (Some boxes do 7.1398 + not belong to any flow, because they are part of a different kind of 7.1399 + layout, such as table layout.) 7.1400 + 7.1401 + <p>An element that generates a flow root box is itself also called a <span 7.1402 + class=index id=flow-root. title="flow root!!element">flow root.</span> 7.1403 + 7.1404 + <p class=note>Note: The terminology in the CSS level 2 specification is 7.1405 + different. A flow root is called “an element that establishes a <span 7.1406 + class=index id=new-formatting-context. 7.1407 + title="formatting context|new formatting context">new formatting 7.1408 + context.</span>” 7.1409 + 7.1410 + <p class=note>A consequence of this terminology is that an <a 7.1411 + href="#elements."><em>element,</em></a> unlike a box, can be the flow root 7.1412 + of several flows. E.g., template elements <a href="#CSS3LAYOUT" 7.1413 + rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a> generate several 7.1414 + flow root boxes. Depending on what properties are set on a list item and 7.1415 + on its marker pseudo-element, a list item can also generate zero, one or 7.1416 + two flow roots. <!-- 7.1417 +<p class=mtb>The following rules define the position of 7.1418 +<em>block-level</em> boxes relative to the box that is their <em>flow 7.1419 +root.</em> Other sections and other modules describe how other boxes 7.1420 +are laid out. E.g., floating boxes are described further down in this 7.1421 +module and absolutely positioned boxes are described in the Absolute 7.1422 +Positioning module [[CSS3POS]]. 7.1423 + 7.1424 +<p>Before applying these rules, the width, height and margins of each 7.1425 +box must be computed as described in the sections <a 7.1426 +href="#Calculating">“Calculating widths, heights and margins”</a> 7.1427 +and <a href="#Collapsing">“Collapsing margins.”</a> 7.1428 + 7.1429 +<ul> 7.1430 + <li> 7.1431 + <p>Consider the first box (in document order) of a set of sibling 7.1432 + boxes that all belong to the same flow. There are four cases: 7.1433 <ol> 7.1434 - <li> 7.1435 - <p>If none of its margins <a href="#collapse.">collapse</a> with its 7.1436 - parent's <a href="#head">head</a> margin and the box is not <a 7.1437 - href="#collapsed-through">collapsed through,</a> then the box is 7.1438 - placed such that the box's <a href="#headside">headside</a> <a 7.1439 - href="#margin-edge.">margin edge</a> touches the parent's <a 7.1440 - href="#head">head</a> <a href="#content-edge.">content edge</a>, the 7.1441 - <a href="#startside">startside</a> <a href="#margin-edge.">margin 7.1442 - edge</a> touches the parent's <a href="#start">start</a> <a 7.1443 - href="#content-edge.">content edge</a> and the <a 7.1444 - href="#endside">endside</a> <a href="#margin-edge.">margin edge</a> 7.1445 - touches the parent's <a href="#end">end</a> <a 7.1446 - href="#content-edge.">content edge.</a> 7.1447 - 7.1448 - <p class=issue>[Add illustration.] 7.1449 - 7.1450 - <p class=issue>[Alternative terminology:] If none of its margins <a 7.1451 - href="#collapse.">collapse</a> with its parent's <a 7.1452 - href="#aprime">A</a> margin and the box is not <a 7.1453 - href="#collapsed-through">collapsed through,</a> then the box is 7.1454 - placed such that the box's <a href="#aprime">A′</a> <a 7.1455 - href="#margin-edge.">margin edge</a> touches the parent's <a 7.1456 - href="#aprime">A</a> <a href="#content-edge.">content edge</a>, the <a 7.1457 - href="#dprime">D′</a> <a href="#margin-edge.">margin edge</a> 7.1458 - touches the parent's <a href="#dprime">D</a> <a 7.1459 - href="#content-edge.">content edge</a> and the <a 7.1460 - href="#bprime">B′</a> <a href="#margin-edge.">margin edge</a> 7.1461 - touches the parent's <a href="#bprime">B</a> <a 7.1462 - href="#content-edge.">content edge.</a> 7.1463 - 7.1464 - <li> 7.1465 - <p>If none of its margins <a href="#collapse.">collapse</a> with its 7.1466 - parent's <a href="#head">head</a> margin but the box is <a 7.1467 - href="#collapsed-through">collapsed through,</a> then its <a 7.1468 - href="#content-edge.">content edge</a> (which is also its <a 7.1469 - href="#border-edge.">border edge</a> and <a 7.1470 - href="#padding-edge.">padding edge</a>) is defined as what it would 7.1471 - have been if the box had a non-zero <a href="#tailside">tailside</a> 7.1472 - border. (I.e., recompute the margins given that border and then apply 7.1473 - the previous rule.) 7.1474 - 7.1475 - <p class=note>Note that the box is effectively invisible, but the edges 7.1476 - have to be defined to position any descendants, such as floating or 7.1477 - absolutely positioned children. 7.1478 - 7.1479 - <li> 7.1480 - <p>If exactly one of its margins collapses with its parent's <a 7.1481 - href="#head">head</a> margin, then the box is placed such that the 7.1482 - box's <a href="#headside">headside</a> <a href="#border-edge.">border 7.1483 - edge</a> touches the parent's <a href="#head">head</a> <a 7.1484 - href="#content-edge.">content edge,</a> the <a 7.1485 - href="#startside">startside</a> <a href="#margin-edge.">margin 7.1486 - edge</a> touches the parent's <a href="#start">start</a> <a 7.1487 - href="#content-edge.">content edge</a> and the <a 7.1488 - href="#endside">endside</a> <a href="#margin-edge.">margin edge</a> 7.1489 - touches the parent's <a href="#end">end</a> <a 7.1490 - href="#content-edge.">content edge.</a> 7.1491 - 7.1492 - <p class=issue>[Add illustration.] 7.1493 - 7.1494 - <li> 7.1495 - <p>If two of its margins collapse with its parent's <a 7.1496 - href="#head">head</a> margin, then its position is such that its <a 7.1497 - href="#content-edge.">content edge</a> (which is also its <a 7.1498 - href="#border-edge.">border edge</a>) touches its parent's <a 7.1499 - href="#head">head</a> <a href="#border-edge.">border edge</a> and that 7.1500 - its <a href="#startside">startside</a> <a href="#margin-edge.">margin 7.1501 - edge</a> touches its parent's <a href="#start">start</a> <a 7.1502 - href="#content-edge.">content edge</a> and its <a 7.1503 - href="#endside">endside</a> <a href="#margin-edge.">margin edge</a> 7.1504 - touches the parent's <a href="#end">end</a> <a 7.1505 - href="#content-edge.">content edge.</a> 7.1506 - 7.1507 - <p class=note>Note that the box is effectively invisible, but the edges 7.1508 - have to be defined to position any descendants. 7.1509 + <li> 7.1510 + <p>If none of its margins <span>collapse</span> with its 7.1511 + parent's <span>head</span> margin and the box is not 7.1512 + <span>collapsed through,</span> then the box is placed such 7.1513 + that the box's margin <span>A edge</span> coincides with the 7.1514 + parent's <span>head</span> <span>content edge</span>, the 7.1515 + margin <span>D edge</span> touches the parent's 7.1516 + <span>start</span> <span>content edge</span> and the margin 7.1517 + <span>B edge</span> touches the parent's <span>end</span> 7.1518 + <span>content edge.</span> 7.1519 + 7.1520 + <div class=figure> 7.1521 + <p><img src="flow1.png" alt="For example:"> 7.1522 + 7.1523 + <p class=caption>In a <em>horizontal</em> <em>containing 7.1524 + block,</em> the top edge (<em>head</em> edge) is used to 7.1525 + position the top edge (<em>A edge</em>) of the first 7.1526 + block-level box. Its left and right edges coincide with the 7.1527 + left and right edges of the block-level box. 7.1528 + </div> 7.1529 + 7.1530 + <li> 7.1531 + <p>If none of its margins <span>collapse</span> with its 7.1532 + parent's <span>head</span> margin but the box 7.1533 + is <span>collapsed through,</span> then its <span>content 7.1534 + edge</span> (which is also its <span>border edge</span> 7.1535 + and <span>padding edge</span>) is defined as what it would 7.1536 + have been if the box had a non-zero <span>tailside</span> 7.1537 + border. (I.e., recompute the margins given that border and 7.1538 + then apply the previous rule.) 7.1539 + 7.1540 + <p class=note>Note that the box is effectively invisible, but 7.1541 + the edges have to be defined to position any descendants, such 7.1542 + as floating or absolutely positioned children. 7.1543 + 7.1544 + <li> 7.1545 + <p>If its <span title="A edge">A</span> margin collapses with 7.1546 + its parent's <span>head</span> margin, then the box is placed 7.1547 + such that the <span>A edge</span> of the box's border touches 7.1548 + the parent's <span>head</span> <span>content edge,</span> the 7.1549 + <span>D edge</span> of the box's margin touches the parent's 7.1550 + <span>start</span> <span>content edge</span> and the <span>B 7.1551 + edge</span> of the box's margin touches the parent's 7.1552 + <span>end</span> <span>content edge.</span> 7.1553 + 7.1554 + <p class=issue>[Add illustration.] 7.1555 + 7.1556 + <li> 7.1557 + <p>If two of its margins collapse with its parent's 7.1558 + <span>head</span> margin, then its position is such that its 7.1559 + <span>content edge</span> (which is also its <span>border 7.1560 + edge</span>) touches its parent's <span>head</span> 7.1561 + <span>border edge</span> and that the <span>D edge</span> of 7.1562 + its margin touches its parent's <span>start</span> 7.1563 + <span>content edge</span> and the <span>B edge</span> of its 7.1564 + margin touches the parent's <span>end</span> <span>content 7.1565 + edge.</span> 7.1566 + 7.1567 + <p class=note>Note that the box is effectively invisible, but 7.1568 + the edges have to be defined to position any descendants. 7.1569 </ol> 7.1570 7.1571 - <li> 7.1572 - <p>For a box that has a preceding sibling in the same flow there are two 7.1573 - cases: 7.1574 - 7.1575 + <li> 7.1576 + <p>For a box that has a preceding sibling in the same flow there 7.1577 + are two cases: 7.1578 <ol> 7.1579 - <li> 7.1580 - <p>If the box is not <a href="#collapsed-through">collapsed 7.1581 - through,</a> it is positioned such that its <a 7.1582 - href="#margin-edge.">margin edge</a> touches the parent's <a 7.1583 - href="#start">start</a> <a href="#content-edge.">content edge</a> and 7.1584 - <a href="#end">end</a> <a href="#content-edge.">content edge</a> and 7.1585 - such that its content edge on the touches the <span 7.1586 - class=issue>[...]</span> 7.1587 - 7.1588 - <li> 7.1589 - <p>A box that has a preceding sibling in the same flow and that is <a 7.1590 - href="#collapsed-through">collapsed through,</a> <span 7.1591 - class=issue>[...]</span> 7.1592 - </ol> 7.1593 - </ul> 7.1594 - 7.1595 - <h2 id=types-of-boxes><span class=secno>7. </span>Types of boxes</h2> 7.1596 + <li> 7.1597 + <p>If the box is not <span>collapsed through,</span> it is 7.1598 + positioned such that the <span>D edge</span> of its margin 7.1599 + touches the parent's <span>start</span> <span>content 7.1600 + edge,</span> the <span>B edge</span> of its margin touches the 7.1601 + parent's <span>end</span> <span>content edge</span> and the 7.1602 + <span>A edge</span> of its border box is at a distance from 7.1603 + the <span>C edge</span> of the preceding sibling's border box 7.1604 + equal to the combined thickness of the margins that collapse 7.1605 + at that edge. 7.1606 + 7.1607 + <li> 7.1608 + <p>A box that has a preceding sibling in the same flow and that 7.1609 + is <span>collapsed 7.1610 + through,</span> <span class=issue>[...]</span> 7.1611 + </ol> 7.1612 +</ul> 7.1613 +--> 7.1614 + 7.1615 + <h2 id=types-of-boxes><span class=secno>6. </span>Types of boxes</h2> 7.1616 7.1617 <p>The layout of boxes in the flow is in large part determined by the 7.1618 interplay of the ‘<a href="#display0"><code 7.1619 class=property>display</code></a>’ properties of an element and its 7.1620 parent, and then fine-tuned with margins and padding. 7.1621 7.1622 - <h3 id=display><span class=secno>7.1. </span>The display property</h3> 7.1623 + <h3 id=display><span class=secno>6.1. </span>The display property</h3> 7.1624 7.1625 <table class=propdef> 7.1626 <tbody> 7.1627 <tr> 7.1628 - <td>Name: 7.1629 + <th>Name: 7.1630 7.1631 <td><dfn id=display0>display</dfn> 7.1632 7.1633 <tr> 7.1634 - <td>Value: 7.1635 + <th>Value: 7.1636 7.1637 <td>inline | block | inline-block | list-item | run-in | compact | table 7.1638 | inline-table | table-row-group | table-header-group | 7.1639 table-footer-group | table-row | table-column-group | table-column | 7.1640 table-cell | table-caption | ruby | ruby-base | ruby-text | 7.1641 - ruby-base-group | ruby-text-group | align-box | none 7.1642 - 7.1643 - <tr> 7.1644 - <td>Initial: 7.1645 + ruby-base-group | ruby-text-group | container | none 7.1646 + 7.1647 + <tr> 7.1648 + <th>Initial: 7.1649 7.1650 <td>inline 7.1651 7.1652 <tr> 7.1653 - <td>Applies to: 7.1654 + <th>Applies to: 7.1655 7.1656 <td>all elements 7.1657 7.1658 <tr> 7.1659 - <td>Inherited: 7.1660 + <th>Inherited: 7.1661 7.1662 <td>no 7.1663 7.1664 <tr> 7.1665 - <td>Percentages: 7.1666 + <th>Animatable: 7.1667 + 7.1668 + <td>no 7.1669 + 7.1670 + <tr> 7.1671 + <th>Percentages: 7.1672 7.1673 <td>N/A 7.1674 7.1675 <tr> 7.1676 - <td>Media: 7.1677 + <th>Media: 7.1678 7.1679 <td>visual (‘<code class=css>none</code>’ applies to all media) 7.1680 7.1681 <tr> 7.1682 - <td>Computed value: 7.1683 + <th>Computed value: 7.1684 7.1685 <td>specified value, except for floats, root elements and positioned 7.1686 elements; see text 7.1687 + 7.1688 + <tr> 7.1689 + <th>Canonical order: 7.1690 + 7.1691 + <td>N/A 7.1692 </table> 7.1693 7.1694 <p class=issue>There is an old proposal to split ‘<a 7.1695 @@ -1295,21 +1395,30 @@ 7.1696 <dl> 7.1697 <dt>inline 7.1698 7.1699 - <dd>Inline boxes. 7.1700 + <dd>One or more <a href="#inline-level"><em>inline-level,</em></a> 7.1701 + <em>inline container</em> boxes. (There may be more than one, e.g., if 7.1702 + the element is broken over two lines or if bidi reordering causes some of 7.1703 + the text in the content to be displayed after the text of some other 7.1704 + element.) 7.1705 7.1706 <dt>block 7.1707 7.1708 - <dd>Block boxes. 7.1709 + <dd>One or more <a href="#block-level"><em>block-level,</em></a> <em>block 7.1710 + container</em> boxes. (There may be more than one box, e.g., if the 7.1711 + element is broken over two columns or pages.) 7.1712 7.1713 <dt>inline-block 7.1714 7.1715 - <dd>A block box, which itself is flowed as a single inline box, similar to 7.1716 - a replaced element. The inside of an inline-block is formatted as a block 7.1717 - box, and the box itself is formatted as an inline box. 7.1718 + <dd>An <em>atomic,</em> <a href="#inline-level"><em>inline-level,</em></a> 7.1719 + <em>block container</em> box. (In other words: the inside of an 7.1720 + inline-block is formatted as a block box, and the box itself is formatted 7.1721 + as an inline box.) The box is a <a href="#flow-root"><em>flow 7.1722 + root.</em></a> 7.1723 7.1724 <dt>list-item 7.1725 7.1726 - <dd>One or more block boxes and one marker box. Marker boxes are defined 7.1727 + <dd>One or more <a href="#block-level"><em>block-level,</em></a> <em>block 7.1728 + container</em> boxes and an optional marker box. Marker boxes are defined 7.1729 in the Lists module <a href="#CSS3LIST" 7.1730 rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>. <span class=issue>If 7.1731 the Lists module is not ready, define the position of the marker and the 7.1732 @@ -1317,16 +1426,20 @@ 7.1733 7.1734 <dt>run-in 7.1735 7.1736 - <dd>Either block or inline boxes, depending on context (see <a 7.1737 - href="#run-in-boxes">Run-in boxes</a>). Properties apply to run-in boxes 7.1738 - based on their final status (<a href="#inline-level">inline-level</a> or 7.1739 - <a href="#block-level">block-level</a>). 7.1740 + <dd>Either one or more <a href="#block-level"><em>block-level,</em></a> 7.1741 + <em>block container</em> boxes, or one or more <a 7.1742 + href="#inline-level"><em>inline-level,</em></a> <em>inline container</em> 7.1743 + boxes, depending on context (see <a href="#run-in-boxes">Run-in 7.1744 + boxes</a>). Properties apply to run-in boxes based on their final status 7.1745 + (<a href="#inline-level">inline-level</a> or <a 7.1746 + href="#block-level">block-level</a>). 7.1747 7.1748 <dt>compact 7.1749 7.1750 - <dd>Either block boxes or a marker box, depending on context (see <a 7.1751 - href="#compact-boxes">Compact boxes</a>). Properties apply to compact 7.1752 - boxes based on their final status. 7.1753 + <dd>Either one or more <a href="#block-level"><em>block-level,</em></a> 7.1754 + <em>block container</em> boxes or a single marker box, depending on 7.1755 + context (see <a href="#compact-boxes">Compact boxes</a>). Properties 7.1756 + apply to compact boxes based on their final status. 7.1757 7.1758 <dt>table, inline-table, table-row-group, table-header-group, 7.1759 table-footer-group, table-row, table-column-group, table-column, 7.1760 @@ -1340,7 +1453,7 @@ 7.1761 <dd>See the Ruby module <a href="#CSS3RUBY" 7.1762 rel=biblioentry>[CSS3RUBY]<!--{{CSS3RUBY}}--></a>. 7.1763 7.1764 - <dt>align-box <span class=issue>or container?</span> 7.1765 + <dt>container <span class=issue>or align-box?</span> 7.1766 7.1767 <dd>Like ‘<code class=css>block</code>’, but forces the element to be 7.1768 a <a href="#flow-root"><em>flow root,</em></a>, which, e.g., stops its 7.1769 @@ -1368,16 +1481,16 @@ 7.1770 7.1771 <p class=note>Note that both ‘<a href="#clear-after"><code 7.1772 class=property>clear-after</code></a>’ and ‘<code 7.1773 - class=css>align-box</code>’ can be used to force the next element after 7.1774 + class=css>container</code>’ can be used to force the next element after 7.1775 this one to start after any floats inside this element, but the effect is 7.1776 - not exactly the same. E.g., ‘<code class=css>display: box</code>’ also 7.1777 - affects certain forms of margin collapsing. 7.1778 - 7.1779 - <p class=note>Note that ‘<code class=css>vertical-al ign</code>’ 7.1780 - applies to ‘<code class=css>align-box</code>’ elements, hence the 7.1781 - name. The ‘<code class=property>vertical-align</code>’ property 7.1782 - doesn't apply to other block-level elements, except ‘<code 7.1783 - class=css>table-cell</code>’ elements. 7.1784 + not exactly the same. E.g., ‘<code class=css>display: 7.1785 + container</code>’ also affects certain forms of margin collapsing. 7.1786 + 7.1787 + <p class=note>Note that ‘<code class=property>vertical-align</code>’ 7.1788 + applies to ‘<code class=css>container</code>’ elements. The ‘<code 7.1789 + class=property>vertical-align</code>’ property doesn't apply to other 7.1790 + block-level elements, except ‘<code class=css>table-cell</code>’ 7.1791 + elements. 7.1792 7.1793 <p class=issue>Any sense in vertically spreading out the contents, 7.1794 something like ‘<code class=css>vertical-align: justify</code>’? 7.1795 @@ -1389,7 +1502,7 @@ 7.1796 7.1797 <div class=example> 7.1798 <p>The ‘<code class=property>vertical-align</code>’ property applies 7.1799 - to ‘<code class=css>align-box</code>’ elements <span 7.1800 + to ‘<code class=css>container</code>’ elements <span 7.1801 class=issue>[check in <a href="#CSS3TEXT" 7.1802 rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>!]</span>, and can thus 7.1803 be used to create vertically centered content, without wrapping the 7.1804 @@ -1399,7 +1512,7 @@ 7.1805 7.1806 <pre> 7.1807 div.slide { 7.1808 - display: align-box; 7.1809 + display: container; 7.1810 height: 15em; 7.1811 vertical-align: middle; 7.1812 border: thin solid } 7.1813 @@ -1424,7 +1537,7 @@ 7.1814 src=align-box.png> 7.1815 7.1816 <p class=caption>The ‘<code class=css>vertical-align: middle</code>’ 7.1817 - causes the content of the ‘<code class=css>align-box</code>’ to be 7.1818 + causes the content of the ‘<code class=css>container</code>’ to be 7.1819 vertically centered. 7.1820 </div> 7.1821 </div> 7.1822 @@ -1484,12 +1597,12 @@ 7.1823 class=property>display</code></a>’ is the same as the specified value. 7.1824 </ol> 7.1825 7.1826 - <h3 id=mixing-the-box-model-with-other-formatti><span class=secno>7.2. 7.1827 + <h3 id=mixing-the-box-model-with-other-formatti><span class=secno>6.2. 7.1828 </span>Mixing the box model with other formatting models</h3> 7.1829 7.1830 <p>There may be documents that combine different layout models, such as 7.1831 documents that combine HTML (typically rendered with the CSS box model) 7.1832 - and <span class=index id=svg1>SVG</span> (rendered with its own graphics 7.1833 + and <span class=index id=svg>SVG</span> (rendered with its own graphics 7.1834 model). If an element that is rendered according to the CSS box model has 7.1835 a child that is to be rendered with a different model, that child needs to 7.1836 have a ‘<a href="#display0"><code class=property>display</code></a>’ 7.1837 @@ -1509,13 +1622,13 @@ 7.1838 indicate that an element is formatted according to a different model than 7.1839 the box model, but separate specifications may do so. 7.1840 7.1841 - <h3 id=block-level-boxes-containing-blocks-flow><span class=secno>7.3. 7.1842 + <h3 id=block-level-boxes-containing-blocks-flow><span class=secno>6.3. 7.1843 </span>Block-level boxes, containing blocks, flows and anonymous boxes</h3> 7.1844 7.1845 <p>A <dfn id=block-level>block-level</dfn> box is a box that has a <a 7.1846 href="#computed-value">computed value</a> for ‘<a href="#display0"><code 7.1847 class=property>display</code></a>’ of ‘<code 7.1848 - class=css>block</code>’, ‘<code class=css>align-box</code>’, 7.1849 + class=css>block</code>’, ‘<code class=css>container</code>’, 7.1850 ‘<code class=css>list-item</code>’, ‘<code 7.1851 class=css>table</code>’, ‘<code class=css>table-*</code>’ (i.e., all 7.1852 table boxes, see <a href="#CSS3TBL" 7.1853 @@ -1575,62 +1688,11 @@ 7.1854 class=css>block</code>’. 7.1855 </ul> 7.1856 7.1857 - <div class=example> 7.1858 - <p>An example of the last point above is this document fragment: 7.1859 - 7.1860 - <pre><p>Somebody whose name I have 7.1861 -forgotten, said, long ago: <q>a box is 7.1862 -a box,</q> and he probably meant it.</p></pre> 7.1863 - 7.1864 - <p>with these style rules: 7.1865 - 7.1866 - <pre>p { display: block } 7.1867 -q { display: block; margin: 1em }</pre> 7.1868 - 7.1869 - <p>The <code>p</code> element has both line boxes and a child box for the 7.1870 - <code>q</code> element, which is a block-level element. The line boxes 7.1871 - before the <code>q</code> are wrapped in an anonymous block-level box and 7.1872 - so are the line boxes after the <code>q</code>. The resulting tree of 7.1873 - boxes might be as follows (refer to the <a href="#When">figure</a>): 7.1874 - 7.1875 - <ul> 7.1876 - <li>block-level box [p] 7.1877 - <ul> 7.1878 - <li>block-level box [anonymous] 7.1879 - <ul> 7.1880 - <li>line box: “Somebody…” 7.1881 - 7.1882 - <li>line box: “forgotten…” 7.1883 - </ul> 7.1884 - 7.1885 - <li>block-level box [q] 7.1886 - <ul> 7.1887 - <li>line box: “a box…” 7.1888 - </ul> 7.1889 - 7.1890 - <li>block-level box [anonymous] 7.1891 - <ul> 7.1892 - <li>line box: “and he…” 7.1893 - </ul> 7.1894 - </ul> 7.1895 - </ul> 7.1896 - 7.1897 - <div class=figure id=When> 7.1898 - <p><img 7.1899 - alt="The P element has two line boxes before the q and one after. The first two are wrapped in an anonymous box, the last one is wrapped in another anonymous box." 7.1900 - src=anonymous.png> 7.1901 - 7.1902 - <p class=caption>When the fragment is rendered, the text before the q is 7.1903 - wrapped in an anonymous block and the text after the q in another. 7.1904 - </div> 7.1905 - </div> 7.1906 - <!--example--> 7.1907 - 7.1908 <p class=note>Note that the anonymous boxes defined in this module are all 7.1909 <a href="#block-level">block-level,</a> but anonymous boxes defined in 7.1910 other modules may be different. 7.1911 7.1912 - <p class=mtb>The <dfn id=containing-block>containing block</dfn> of a box 7.1913 + <p class=mtb>The <dfn id=containing-block0>containing block</dfn> of a box 7.1914 is a rectangle that is associated with the box and that is used in various 7.1915 definitions in this specification. Apart from a size and a position, the 7.1916 rectangle also has ‘<a href="#direction"><code 7.1917 @@ -1711,186 +1773,112 @@ 7.1918 (subtracted from the dimensions of) any containing block formed by that 7.1919 element. 7.1920 7.1921 - <p class=mtb>A <dfn id=flow-root>flow root</dfn> is a box that satisfies at 7.1922 - least one of the following: 7.1923 - 7.1924 - <ul> 7.1925 - <li>The value of ‘<a href="#float"><code 7.1926 - class=property>float</code></a>’ is not ‘<code 7.1927 - class=css>none</code>’. 7.1928 - 7.1929 - <li>The <a href="#used-value."><em>used value</em></a> of ‘<a 7.1930 - href="#overflow1"><code class=property>overflow</code></a>’ is not 7.1931 - ‘<code class=css>visible</code>’. 7.1932 - 7.1933 - <li>The value of ‘<a href="#display0"><code 7.1934 - class=property>display</code></a>’ is ‘<code 7.1935 - class=css>table-cell</code>’, ‘<code 7.1936 - class=css>table-caption</code>’ (see <a href="#CSS3TBL" 7.1937 - rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>), ‘<code 7.1938 - class=css>inline-block</code>’, ‘<code 7.1939 - class=css>inline-table</code>’ or ‘<code 7.1940 - class=css>align-box</code>’. 7.1941 - 7.1942 - <li>The value of ‘<code class=property>position</code>’ is ‘<code 7.1943 - class=css>absolute</code>’ or ‘<code class=css>fixed</code>’ (see 7.1944 - <a href="#CSS3POS" rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>). 7.1945 - 7.1946 - <li>The box is <a href="#vertical."><em>vertical</em></a> and its parent 7.1947 - is <a href="#horizontal"><em>horizontal.</em></a> 7.1948 - 7.1949 - <li>The box is <a href="#horizontal"><em>horizontal</em></a> and its 7.1950 - parent is <a href="#vertical."><em>vertical.</em></a> 7.1951 - 7.1952 - <li>The value of ‘<a href="#transform"><code 7.1953 - class=property>transform</code></a>’ is not ‘<code 7.1954 - class=css>none</code>’. 7.1955 - 7.1956 - <li class=issue>The value of ‘<a href="#child-align"><code 7.1957 - class=property>child-align</code></a>’ is not ‘<code 7.1958 - class=css>auto</code>’. [If ‘<a href="#child-align"><code 7.1959 - class=property>child-align</code></a>’ is adopted, rather than, say, 7.1960 - ‘<code class=css>margin: fill</code>’] 7.1961 - </ul> 7.1962 - 7.1963 - <p class=note>Note that an element with ‘<code class=css>display: 7.1964 - inline</code>’ therefore cannot be a flow root: it doesn't float 7.1965 - (otherwise its ‘<a href="#display0"><code 7.1966 - class=property>display</code></a>’ would be ‘<code 7.1967 - class=css>block</code>’), and neither ‘<a href="#overflow1"><code 7.1968 - class=property>overflow</code></a>’ nor ‘<a href="#writing-mode"><code 7.1969 - class=property>writing-mode</code></a>’ apply to inlines. 7.1970 - 7.1971 - <p class=note>Note: The terminology in the CSS level 2 specification is 7.1972 - different. A flow root is called “an element that establishes a <span 7.1973 - class=index id=new-formatting-context. 7.1974 - title="formatting context|new formatting context">new formatting 7.1975 - context.</span>” 7.1976 - 7.1977 - <p>Other modules may define additional flow roots. <span class=issue>[Can 7.1978 - we thus remove ‘<code class=css>table-caption</code>’, ‘<code 7.1979 - class=css>table-cell</code>’, and ‘<code 7.1980 - class=property>position</code>’ from the list above?]</span> 7.1981 - 7.1982 - <p>The <dfn id=flow>flow</dfn> (a.k.a. <dfn id=normal-flow>normal 7.1983 - flow</dfn>) of a given <a href="#flow-root"><em>flow root</em></a> is a 7.1984 - set of boxes. A box belongs to the flow if all of the following are true: 7.1985 + <h3 id=run-in-boxes><span class=secno>6.4. </span>Run-in boxes</h3> 7.1986 + 7.1987 + <div class=issue> 7.1988 + <p>Compare the rules below with <a 7.1989 + href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0450.html">Elika's 7.1990 + idea:</a> 7.1991 + 7.1992 + <p>Model is this: 7.1993 + 7.1994 + <ul> 7.1995 + <li>run-ins are always treated like elements with ‘<code 7.1996 + class=css>display: inline</code>’ 7.1997 + 7.1998 + <li>except that they mangle the box tree thus: 7.1999 + <ul> 7.2000 + <li>If a run-in is preceded by an inline box (ignoring any anonymous 7.2001 + inline boxes containing only collapsed white space), then it forces 7.2002 + the creation of an anonymous block boundary between it and the 7.2003 + preceding inline. 7.2004 + 7.2005 + <li>If the last run-in in a sequence of run-ins, out-of-flows, and 7.2006 + anonymous inlines containing only white space is immediately followed 7.2007 + (ignoring out-of-flows and white space) by a block box, the entire 7.2008 + sequence (including any descendants) from the first run-in to the last 7.2009 + run-in gets shifted into that block, becoming the first boxes in that 7.2010 + block as if originally parented there. 7.2011 + </ul> 7.2012 + </ul> 7.2013 + 7.2014 + <p>This solves several problems: 7.2015 + 7.2016 + <ul> 7.2017 + <li> 7.2018 + <p>The behavior of the run-in is no longer determined by its contents. 7.2019 + 7.2020 + <li> 7.2021 + <p>We don't have the weird discrepency between 7.2022 + 7.2023 + <pre><run-in>some</run-in> 7.2024 +<p>text</p></pre> 7.2025 + 7.2026 + <p>where "some text" appears on one line but 7.2027 + 7.2028 + <pre><run-in>some</run-in> 7.2029 +text</pre> 7.2030 + 7.2031 + <p>appears on two lines. 7.2032 + 7.2033 + <li> 7.2034 + <p>Multiple run-ins still run-in, so something like 7.2035 + 7.2036 + <pre><dt>implementer 7.2037 +<dt>implementor 7.2038 +<dd>(n.) Someone or something that implements.</pre> 7.2039 + 7.2040 + <p>can render as 7.2041 + 7.2042 + <blockquote> 7.2043 + <p>*implementer, implementor* (n) Someone or something that implements. 7.2044 + </blockquote> 7.2045 + </ul> 7.2046 + </div> 7.2047 + 7.2048 + <p>A ‘<code class=css>run-in</code>’ element (or pseudo-element) 7.2049 + <var>A</var> behaves as follows: 7.2050 7.2051 <ol> 7.2052 - <li>The used value of its ‘<a href="#display0"><code 7.2053 - class=property>display</code></a>’ is ‘<code 7.2054 - class=css>block</code>’, ‘<code class=css>list-item</code>’ or 7.2055 - ‘<code class=css>table</code>’. 7.2056 - 7.2057 - <li>The used value of its ‘<a href="#float"><code 7.2058 - class=property>float</code></a>’ is ‘<code class=css>none</code>’. 7.2059 - 7.2060 - <li>The used value of its ‘<code class=property>position</code>’ is 7.2061 - ‘<code class=css>static</code>’ or ‘<code 7.2062 - class=css>relative</code>’. 7.2063 - 7.2064 - <li>It is either a child of the flow root or a child of a box that belong 7.2065 - to the flow. 7.2066 - </ol> 7.2067 - 7.2068 - <div class=example> 7.2069 - <p>For example, the fragment 7.2070 - 7.2071 - <pre><div class=sidebar> 7.2072 - <p>Text in a sidebar. 7.2073 - <p>Here is quote: 7.2074 - <blockquote lang=ja> 7.2075 - <p>... 7.2076 - </blockquote> 7.2077 - <p>Etc. etc. 7.2078 -</div> </pre> 7.2079 - 7.2080 - <p>with the style 7.2081 - 7.2082 - <pre>div.sidebar { writing-mode: tb; float: left } 7.2083 -blockquote[lang|=ja] { writing-mode: rl; height: 10em }</pre> 7.2084 - 7.2085 - <p>defines two flows: 7.2086 - 7.2087 - <ol> 7.2088 - <li>The <code>div</code> is a flow root, because it floats. Its flow 7.2089 - consist of the 1st, 2nd and 4th <code>p</code> and the 7.2090 - <code>blockquote</code>. 7.2091 - 7.2092 - <li>The <code>blockquote</code> is a <a 7.2093 - href="#vertical."><em>vertical</em></a> box inside a <a 7.2094 - href="#horizontal"><em>horizontal</em></a> parent and it is thus a flow 7.2095 - root. Its flow is formed by the 3rd <code>p</code>. 7.2096 - </ol> 7.2097 - 7.2098 - <p>(The <code>div</code> itself belongs to a third flow, but its flow root 7.2099 - is not shown in the fragment.) 7.2100 - </div> 7.2101 - 7.2102 - <p class=note>Note that a flow root is not necessarily block-level, it may 7.2103 - be an ‘<code class=css>inline-block</code>’, e.g. 7.2104 - 7.2105 - <p>The boxes of a flow are laid out inside their flow root one after the 7.2106 - other in the direction of the ‘<a href="#writing-mode"><code 7.2107 - class=property>writing-mode</code></a>’ property of the flow root and in 7.2108 - the same order as in the source document. Their position is given by how 7.2109 - much their margins overlap (see <a 7.2110 - href="#collapsing-margins">“Collapsing margins”</a>) and by the fact 7.2111 - that their side margin edges coincide with content edges of their 7.2112 - containing blocks. More precisely: Each box's left and right margin edges 7.2113 - coincide with the left and right edges of its containing block (if the 7.2114 - flow root is ‘<code class=css>tb</code>’), or its top and bottom 7.2115 - margin edges coincide with the top and bottom edges of its containing 7.2116 - block (if the flow root is ‘<code class=css>rl</code>’ or ‘<code 7.2117 - class=css>lr</code>’). 7.2118 - 7.2119 - <h3 id=run-in-boxes><span class=secno>7.4. </span>Run-in boxes</h3> 7.2120 - 7.2121 - <p>A ‘<code class=css>run-in</code>’ element (or pseudo-element) <a 7.2122 - href="#aprime"><var>A</var></a> behaves as follows: 7.2123 - 7.2124 - <ol> 7.2125 - <li>If <a href="#aprime"><var>A</var></a> has any children that 7.2126 - <span>inhibit run-in behavior</span> (see below), then <a 7.2127 - href="#aprime"><var>A</var></a> is rendered as if it had ‘<code 7.2128 + <li>If <var>A</var> has any children that <span>inhibit run-in 7.2129 + behavior</span> (see below), then <var>A</var> is rendered as if it had 7.2130 + ‘<code class=css>display: block</code>’. 7.2131 + 7.2132 + <li>Let <var>B</var> be the first of <var>A's</var> following siblings 7.2133 + that is neither floating nor absolutely positioned nor has ‘<code 7.2134 + class=css>display: none</code>’. If <var>B</var> exists and has a 7.2135 + specified value for ‘<a href="#display0"><code 7.2136 + class=property>display</code></a>’ of ‘<code 7.2137 + class=css>block</code>’ or ‘<code class=css>list-item</code>’ and 7.2138 + is not replaced, then <var>A</var> is rendered as an ‘<code 7.2139 + class=css>inline</code>’ element at the start of <var>B's</var> 7.2140 + principal box. <span class=note>Note: <var>A</var> is rendered before 7.2141 + <var>B's</var> ‘<code class=css>:before</code>’ pseudo-element, if 7.2142 + any. See <a href="#CSS3GENCON" 7.2143 + rel=biblioentry>[CSS3GENCON]<!--{{CSS3GENCON}}--></a>.</span> 7.2144 + 7.2145 + <li>Otherwise, <var>A</var> is rendered as if it had ‘<code 7.2146 class=css>display: block</code>’. 7.2147 - 7.2148 - <li>Let <a href="#bprime"><var>B</var></a> be the first of <var>A's</var> 7.2149 - following siblings that is neither floating nor absolutely positioned nor 7.2150 - has ‘<code class=css>display: none</code>’. If <a 7.2151 - href="#bprime"><var>B</var></a> exists and has a specified value for 7.2152 - ‘<a href="#display0"><code class=property>display</code></a>’ of 7.2153 - ‘<code class=css>block</code>’ or ‘<code 7.2154 - class=css>list-item</code>’ and is not replaced, then <a 7.2155 - href="#aprime"><var>A</var></a> is rendered as an ‘<code 7.2156 - class=css>inline</code>’ element at the start of <var>B's</var> 7.2157 - principal box. <span class=note>Note: <a href="#aprime"><var>A</var></a> 7.2158 - is rendered before <var>B's</var> ‘<code class=css>:before</code>’ 7.2159 - pseudo-element, if any. See <a href="#CSS3GENCON" 7.2160 - rel=biblioentry>[CSS3GENCON]<!--{{CSS3GENCON}}--></a>.</span> 7.2161 - 7.2162 - <li>Otherwise, <a href="#aprime"><var>A</var></a> is rendered as if it had 7.2163 - ‘<code class=css>display: block</code>’. 7.2164 </ol> 7.2165 7.2166 <p>In the above, “siblings” and “children” include both normal 7.2167 elements and :before/:after pseudo-elements. 7.2168 7.2169 - <p>An element or pseudo-element <a href="#cprime"><var>C</var></a> <dfn 7.2170 + <p>An element or pseudo-element <var>C</var> <dfn 7.2171 id=inhibits-run-in-behavior>inhibits run-in behavior</dfn> if one or more 7.2172 of the following are true. <span class=note>(Note that the definition is 7.2173 recursive.)</span> 7.2174 7.2175 <ul> 7.2176 - <li><a href="#cprime"><var>C</var></a> is not floating and not absolutely 7.2177 - positioned and the computed value of its ‘<a href="#display0"><code 7.2178 + <li><var>C</var> is not floating and not absolutely positioned and the 7.2179 + computed value of its ‘<a href="#display0"><code 7.2180 class=property>display</code></a>’ is one of ‘<code 7.2181 class=css>block</code>’, ‘<code class=css>list-item</code>’, 7.2182 ‘<code class=css>table</code>’ or ‘<code 7.2183 class=css>run-in</code>’. 7.2184 7.2185 - <li><a href="#cprime"><var>C</var></a> has a computed value for ‘<a 7.2186 - href="#display0"><code class=property>display</code></a>’ of ‘<code 7.2187 + <li><var>C</var> has a computed value for ‘<a href="#display0"><code 7.2188 + class=property>display</code></a>’ of ‘<code 7.2189 class=property>inline</code>’ and it has one or more children that 7.2190 inhibit run-in behavior. (Where “children” includes both normal 7.2191 elements and :before/:after pseudo-elements.) 7.2192 @@ -1932,7 +1920,7 @@ 7.2193 ‘<code class=css>:first-line</code>’ pseudo-element. How about in 7.2194 level 3?</span> 7.2195 7.2196 - <h3 id=compact-boxes><span class=secno>7.5. </span>Compact boxes</h3> 7.2197 + <h3 id=compact-boxes><span class=secno>6.5. </span>Compact boxes</h3> 7.2198 7.2199 <p class=issue>Define here or in extended box module? 7.2200 7.2201 @@ -1974,61 +1962,52 @@ 7.2202 </div> 7.2203 </div> 7.2204 7.2205 - <p>Whether a compact box <a href="#cprime"><var>C</var></a> is displayed as 7.2206 - a block or in the margin is determined as follows. Let <var>N</var> be the 7.2207 - next sibling element in document order in the same flow as <a 7.2208 - href="#cprime"><var>C</var></a>, if any. Let <var>W</var> be the 7.2209 - hypothetical distance between the <a 7.2210 - href="#startside"><em>startside</em></a> margin edge and <a 7.2211 - href="#endside"><em>endside</em></a> margin edge of <a 7.2212 - href="#cprime"><var>C</var></a> if the ‘<a href="#display0"><code 7.2213 - class=property>display</code></a>’ property of <a 7.2214 - href="#cprime"><var>C</var></a> were set to ‘<code 7.2215 - class=css>block</code>’ and any ‘<code class=css>auto</code>’ on its 7.2216 - <a href="#inline"><em>inline dimension</em></a> were replaced by ‘<code 7.2217 - class=css>fit-content</code>’. 7.2218 + <p>Whether a compact box <var>C</var> is displayed as a block or in the 7.2219 + margin is determined as follows. Let <var>N</var> be the next sibling 7.2220 + element in document order in the same flow as <var>C</var>, if any. Let 7.2221 + <var>W</var> be the hypothetical distance between the <em>startside</em> 7.2222 + margin edge and <em>endside</em> margin edge of <var>C</var> if the ‘<a 7.2223 + href="#display0"><code class=property>display</code></a>’ property of 7.2224 + <var>C</var> were set to ‘<code class=css>block</code>’ and any 7.2225 + ‘<code class=css>auto</code>’ on its <a 7.2226 + href="#inline-dimension"><em>inline dimension</em></a> were replaced by 7.2227 + ‘<code class=css>fit-content</code>’. 7.2228 7.2229 <ul> 7.2230 - <li>If there is no such <var>N</var>, then <a 7.2231 - href="#cprime"><var>C</var></a> is displayed as a block. 7.2232 + <li>If there is no such <var>N</var>, then <var>C</var> is displayed as a 7.2233 + block. 7.2234 7.2235 <li>If <var>N</var> has a ‘<a href="#display0"><code 7.2236 class=property>display</code></a>’ of ‘<code 7.2237 - class=css>list-item</code>’, then <a href="#cprime"><var>C</var></a> is 7.2238 + class=css>list-item</code>’, then <var>C</var> is displayed as a block. 7.2239 + 7.2240 + <li>If <var>N</var> is not <a 7.2241 + href="#block-level"><em>block-level</em></a>, then <var>C</var> is 7.2242 displayed as a block. 7.2243 7.2244 - <li>If <var>N</var> is not <a 7.2245 - href="#block-level"><em>block-level</em></a>, then <a 7.2246 - href="#cprime"><var>C</var></a> is displayed as a block. 7.2247 - 7.2248 - <li>If the <a href="#startside"><em>startside</em></a> margin of 7.2249 - <var>N</var> is less than <var>W</var>, then <a 7.2250 - href="#cprime"><var>C</var></a> is displayed as a block. 7.2251 - 7.2252 - <li>Otherwise, <a href="#cprime"><var>C</var></a> is displayed in the 7.2253 - margin. 7.2254 + <li>If the <em>startside</em> margin of <var>N</var> is less than 7.2255 + <var>W</var>, then <var>C</var> is displayed as a block. 7.2256 + 7.2257 + <li>Otherwise, <var>C</var> is displayed in the margin. 7.2258 </ul> 7.2259 7.2260 - <p>If <a href="#cprime"><var>C</var></a> is displayed as a block, it is a 7.2261 - <a href="#block-level"><em>block-level</em></a> element and it is sized 7.2262 - and positioned exactly as if its ‘<a href="#display0"><code 7.2263 + <p>If <var>C</var> is displayed as a block, it is a <a 7.2264 + href="#block-level"><em>block-level</em></a> element and it is sized and 7.2265 + positioned exactly as if its ‘<a href="#display0"><code 7.2266 class=property>display</code></a>’ had been ‘<code 7.2267 class=css>block</code>’. 7.2268 7.2269 - <p>Otherwise, <a href="#cprime"><var>C</var></a> is placed such that its <a 7.2270 - href="#startside"><em>startside</em></a> margin edge aligns with the <a 7.2271 - href="#start"><em>start</em></a> margin edge of its <a 7.2272 - href="#containing-block"><em>containing block</em></a> and its <a 7.2273 - href="#headside"><em>headside</em></a> border edge aligns with the <a 7.2274 - href="#headside"><em>headside</em></a> border edge of <var>N</var>. It is 7.2275 - in this case an <a href="#inline-level"><em>inline-level</em></a> element. 7.2276 - 7.2277 - 7.2278 - <p class=issue>Do we do anything to avoid that floats overlap with <a 7.2279 - href="#cprime"><var>C</var></a>? Do we do anything if <a 7.2280 - href="#cprime"><var>C</var></a> is taller than <var>N</var>? E.g., adjust 7.2281 - the ‘<a href="#min-height"><code class=property>min-height</code></a>’ 7.2282 - of <var>N</var>? 7.2283 + <p>Otherwise, <var>C</var> is placed such that its <em>startside</em> 7.2284 + margin edge aligns with the <a href="#start"><em>start</em></a> margin 7.2285 + edge of its <a href="#containing-block0"><em>containing block</em></a> and 7.2286 + its <em>headside</em> border edge aligns with the <em>headside</em> border 7.2287 + edge of <var>N</var>. It is in this case an <a 7.2288 + href="#inline-level"><em>inline-level</em></a> element. 7.2289 + 7.2290 + <p class=issue>Do we do anything to avoid that floats overlap with 7.2291 + <var>C</var>? Do we do anything if <var>C</var> is taller than 7.2292 + <var>N</var>? E.g., adjust the ‘<a href="#min-height"><code 7.2293 + class=property>min-height</code></a>’ of <var>N</var>? 7.2294 7.2295 <div class=example> 7.2296 <p>Simple example... 7.2297 @@ -2063,62 +2042,77 @@ 7.2298 </div> 7.2299 </div> 7.2300 7.2301 - <h2 id=the-padding-properties><span class=secno>8. </span>The padding 7.2302 + <h2 id=the-padding-properties><span class=secno>7. </span>The padding 7.2303 properties</h2> 7.2304 7.2305 <table class=propdef> 7.2306 <tbody> 7.2307 <tr> 7.2308 - <td>Name: 7.2309 + <th>Name: 7.2310 7.2311 <td><dfn id=padding>padding</dfn> 7.2312 7.2313 <tr> 7.2314 - <td>Value: 7.2315 + <th>Value: 7.2316 7.2317 <td>[ <a href="#ltlengthgt"><var><length></var></a> | <a 7.2318 href="#ltpercentagegt"><var><percentage></var></a> | auto ]{1,4} 7.2319 7.2320 <tr> 7.2321 - <td>Initial: 7.2322 + <th>Initial: 7.2323 7.2324 <td>(see individual properties) 7.2325 7.2326 <tr> 7.2327 - <td>Applies to: 7.2328 + <th>Applies to: 7.2329 7.2330 <td>all elements 7.2331 7.2332 <tr> 7.2333 - <td>Inherited: 7.2334 + <th>Inherited: 7.2335 7.2336 <td>no 7.2337 7.2338 <tr> 7.2339 - <td>Percentages: 7.2340 + <th>Animatable: 7.2341 + 7.2342 + <td>yes 7.2343 + 7.2344 + <tr> 7.2345 + <th>Percentages: 7.2346 7.2347 <td>width* of containing block 7.2348 7.2349 <tr> 7.2350 - <td>Media: 7.2351 + <th>Media: 7.2352 7.2353 <td>visual 7.2354 7.2355 <tr> 7.2356 - <td>Computed value: 7.2357 + <th>Computed value: 7.2358 7.2359 <td>see individual properties 7.2360 7.2361 <tr> 7.2362 + <th>Canonical order: 7.2363 + 7.2364 + <td>N/A 7.2365 + 7.2366 + <tr> 7.2367 <td class=footnote colspan=2>*) if the <a 7.2368 - href="#containing-block"><em>containing block</em></a> is <a 7.2369 + href="#containing-block0"><em>containing block</em></a> is <a 7.2370 href="#horizontal"><em>horizontal,</em></a> otherwise the height 7.2371 + 7.2372 + <tr> 7.2373 + <th>Canonical order: 7.2374 + 7.2375 + <td>N/A 7.2376 </table> 7.2377 7.2378 <table class=propdef> 7.2379 <tbody> 7.2380 <tr> 7.2381 - <td>Name: 7.2382 + <th>Name: 7.2383 7.2384 <td><dfn id=padding-top>padding-top</dfn> , <dfn 7.2385 id=padding-right>padding-right</dfn>, <dfn 7.2386 @@ -2126,45 +2120,60 @@ 7.2387 id=padding-left>padding-left</dfn> 7.2388 7.2389 <tr> 7.2390 - <td>Value: 7.2391 + <th>Value: 7.2392 7.2393 <td>[ <a href="#ltlengthgt"><var><length></var></a> | <a 7.2394 href="#ltpercentagegt"><var><percentage></var></a> | auto ] 7.2395 7.2396 <tr> 7.2397 - <td>Initial: 7.2398 + <th>Initial: 7.2399 7.2400 <td>0 7.2401 7.2402 <tr> 7.2403 - <td>Applies to: 7.2404 + <th>Applies to: 7.2405 7.2406 <td>all elements 7.2407 7.2408 <tr> 7.2409 - <td>Inherited: 7.2410 + <th>Inherited: 7.2411 7.2412 <td>no 7.2413 7.2414 <tr> 7.2415 - <td>Percentages: 7.2416 + <th>Animatable: 7.2417 + 7.2418 + <td>yes 7.2419 + 7.2420 + <tr> 7.2421 + <th>Percentages: 7.2422 7.2423 <td>width* of containing block 7.2424 7.2425 <tr> 7.2426 - <td>Media: 7.2427 + <th>Media: 7.2428 7.2429 <td>visual 7.2430 7.2431 <tr> 7.2432 - <td>Computed value: 7.2433 + <th>Computed value: 7.2434 7.2435 <td><length> 7.2436 7.2437 <tr> 7.2438 + <th>Canonical order: 7.2439 + 7.2440 + <td>N/A 7.2441 + 7.2442 + <tr> 7.2443 <td class=footnote colspan=2>*) if the <a 7.2444 - href="#containing-block"><em>containing block</em></a> is <a 7.2445 + href="#containing-block0"><em>containing block</em></a> is <a 7.2446 href="#horizontal"><em>horizontal,</em></a> otherwise the height 7.2447 + 7.2448 + <tr> 7.2449 + <th>Canonical order: 7.2450 + 7.2451 + <td>N/A 7.2452 </table> 7.2453 7.2454 <p>Sets the thickness of the <a href="#padding-area"><em>padding 7.2455 @@ -2210,18 +2219,18 @@ 7.2456 </pre> 7.2457 </div> 7.2458 7.2459 - <h2 id=margins><span class=secno>9. </span>Margins</h2> 7.2460 + <h2 id=margins><span class=secno>8. </span>Margins</h2> 7.2461 7.2462 <p>Margins in CSS serve to add both horizontal and vertical space between 7.2463 boxes. 7.2464 7.2465 - <h3 id=the-margin-properties><span class=secno>9.1. </span>The margin 7.2466 + <h3 id=the-margin-properties><span class=secno>8.1. </span>The margin 7.2467 properties</h3> 7.2468 7.2469 <table class=propdef> 7.2470 <tbody> 7.2471 <tr> 7.2472 - <td>Name: 7.2473 + <th>Name: 7.2474 7.2475 <td><dfn id=margin-top>margin-top</dfn> , <dfn 7.2476 id=margin-right>margin-right</dfn>, <dfn 7.2477 @@ -2229,95 +2238,125 @@ 7.2478 id=margin-left>margin-left</dfn> 7.2479 7.2480 <tr> 7.2481 - <td>Value: 7.2482 + <th>Value: 7.2483 7.2484 <td><a href="#ltlengthgt"><var><length></var></a> | <a 7.2485 href="#ltpercentagegt"><var><percentage></var></a> | auto 7.2486 7.2487 <tr> 7.2488 - <td>Initial: 7.2489 + <th>Initial: 7.2490 7.2491 <td>0 7.2492 7.2493 <tr> 7.2494 - <td>Applies to: 7.2495 + <th>Applies to: 7.2496 7.2497 <td>see text 7.2498 7.2499 <tr> 7.2500 - <td>Inherited: 7.2501 + <th>Inherited: 7.2502 7.2503 <td>no 7.2504 7.2505 <tr> 7.2506 - <td>Percentages: 7.2507 + <th>Animatable: 7.2508 + 7.2509 + <td>yes 7.2510 + 7.2511 + <tr> 7.2512 + <th>Percentages: 7.2513 7.2514 <td>width* of containing block 7.2515 7.2516 <tr> 7.2517 - <td>Media: 7.2518 + <th>Media: 7.2519 7.2520 <td>visual 7.2521 7.2522 <tr> 7.2523 - <td>Computed value: 7.2524 + <th>Computed value: 7.2525 7.2526 <td>the percentage as specified or the absolute length or ‘<code 7.2527 class=css>auto</code>’ 7.2528 7.2529 <tr> 7.2530 + <th>Canonical order: 7.2531 + 7.2532 + <td>N/A 7.2533 + 7.2534 + <tr> 7.2535 <td class=footnote colspan=2>*) if the <a 7.2536 - href="#containing-block"><em>containing block</em></a> is <a 7.2537 + href="#containing-block0"><em>containing block</em></a> is <a 7.2538 href="#horizontal"><em>horizontal,</em></a> otherwise the height 7.2539 + 7.2540 + <tr> 7.2541 + <th>Canonical order: 7.2542 + 7.2543 + <td>N/A 7.2544 </table> 7.2545 7.2546 <table class=propdef> 7.2547 <tbody> 7.2548 <tr> 7.2549 - <td>Name: 7.2550 + <th>Name: 7.2551 7.2552 <td><dfn id=margin>margin</dfn> 7.2553 7.2554 <tr> 7.2555 - <td>Value: 7.2556 + <th>Value: 7.2557 7.2558 <td>[ <a href="#ltlengthgt"><var><length></var></a> | <a 7.2559 href="#ltpercentagegt"><var><percentage></var></a> | auto]{1,4} 7.2560 7.2561 <tr> 7.2562 - <td>Initial: 7.2563 + <th>Initial: 7.2564 7.2565 <td>(see individual properties) 7.2566 7.2567 <tr> 7.2568 - <td>Applies to: 7.2569 + <th>Applies to: 7.2570 7.2571 <td>see text 7.2572 7.2573 <tr> 7.2574 - <td>Inherited: 7.2575 + <th>Inherited: 7.2576 7.2577 <td>no 7.2578 7.2579 <tr> 7.2580 - <td>Percentages: 7.2581 + <th>Animatable: 7.2582 + 7.2583 + <td>yes 7.2584 + 7.2585 + <tr> 7.2586 + <th>Percentages: 7.2587 7.2588 <td>width* of containing block 7.2589 7.2590 <tr> 7.2591 - <td>Media: 7.2592 + <th>Media: 7.2593 7.2594 <td>visual 7.2595 7.2596 <tr> 7.2597 - <td>Computed value: 7.2598 + <th>Computed value: 7.2599 7.2600 <td>see individual properties 7.2601 7.2602 <tr> 7.2603 + <th>Canonical order: 7.2604 + 7.2605 + <td>N/A 7.2606 + 7.2607 + <tr> 7.2608 <td class=footnote colspan=2>*) if the <a 7.2609 - href="#containing-block"><em>containing block</em></a> is <a 7.2610 + href="#containing-block0"><em>containing block</em></a> is <a 7.2611 href="#horizontal"><em>horizontal,</em></a> otherwise the height 7.2612 + 7.2613 + <tr> 7.2614 + <th>Canonical order: 7.2615 + 7.2616 + <td>N/A 7.2617 </table> 7.2618 7.2619 <div class=issue> 7.2620 @@ -2399,396 +2438,127 @@ 7.2621 margin-left: 2em }</pre> 7.2622 </div> 7.2623 7.2624 - <h3 id=collapsing-margins><span class=secno>9.2. </span>Collapsing margins</h3> 7.2625 - 7.2626 - <p>Certain adjoining margins, as defined in this section, combine to form a 7.2627 - single margin. Those margins are said to <dfn id=collapse.>collapse.</dfn> 7.2628 - Margins are <dfn id=adjoining>adjoining</dfn> if there are no nonempty 7.2629 - content, <a href="#padding-area" title="padding area">padding</a> or <a 7.2630 - href="#border-area" title="border area">border areas</a> or <a 7.2631 - href="#clearance."><em>clearance</em></a> to separate them. 7.2632 - 7.2633 - <div class=example> 7.2634 - <p>For example, in the following fragment with the given style rules: 7.2635 - 7.2636 - <pre>p { display: block; margin-bottom: 2em 0 1em 0 } 7.2637 -div { display: block; margin: 2.5em 0 } 7.2638 -... 7.2639 -<p>First paragraph</p> 7.2640 -<div> 7.2641 - <p>Second paragraph</p> 7.2642 -</div></pre> 7.2643 - 7.2644 - <p>the bottom margin of the first <code>p</code> (=1em), the top margin of 7.2645 - the <code>div</code> (=2.5em) and the top margin of the second 7.2646 - <code>p</code> (=2em) collapse. The result is a single margin of 2.5em 7.2647 - (the maximum of the three) between the bottom of the first <code>p</code> 7.2648 - and the top of the second. 7.2649 - </div> 7.2650 - 7.2651 - <div class=figure> 7.2652 - <p><img alt="Three margins collapse: 1em + 2.5em + 2em" src=collapse1.png> 7.2653 - 7.2654 - 7.2655 - <p class=caption>Schematic representation of the previous example. 7.2656 - </div> 7.2657 - 7.2658 - <div class=example> 7.2659 - <p>In the following fragment, 7.2660 - 7.2661 - <pre>p { display: block; margin: 2em 0 1em 0 } 7.2662 -div { display: block; margin: 2.5em 0; 7.2663 - border: thin solid } 7.2664 -... 7.2665 -<p>First paragraph</p> 7.2666 -<div> 7.2667 - <p>Second paragraph</p> 7.2668 -</div></pre> 7.2669 - 7.2670 - <p>the bottom margin of the first <code>p</code> and the top margin of the 7.2671 - <code>div</code> collapse, but the top margin of the second 7.2672 - <code>p</code> does not collapse with them, because it is not <a 7.2673 - href="#adjoining"><em>adjoining;</em></a> the border of the 7.2674 - <code>div</code> separates them. 7.2675 - </div> 7.2676 - 7.2677 - <div class=figure> 7.2678 - <p><img alt="Only two margins collapse: 1em + 2.5em" src=collapse2.png> 7.2679 - 7.2680 - <p class=caption>Schematic representation of the previous example. 7.2681 - </div> 7.2682 - 7.2683 - <p>If a set of adjoining margins collapses, then the width of the resulting 7.2684 - margin is <var>M</var> - <var>N</var>, where <var>M</var> is the maximum 7.2685 - of the adjoining margins that are positive, or zero if there are none; and 7.2686 - <var>N</var> is the minimum of the adjoining margins that are negative, or 7.2687 - zero if there are none. 7.2688 - 7.2689 - <p>We call an element or box <dfn id=collapsed-through>collapsed 7.2690 - through</dfn> if two of its margins collapse with each other. 7.2691 - 7.2692 - <div class=example> 7.2693 - <p>The most common use of collapsing through elements is that empty 7.2694 - paragraphs don't cause extra white space: 7.2695 - 7.2696 - <pre><p>First paragraph 7.2697 -<p>Second paragraph 7.2698 -<p> 7.2699 -<p>Last paragraph</pre> 7.2700 - 7.2701 - <p>There is equal space between the first and second paragraphs as between 7.2702 - the second and last. 7.2703 - </div> 7.2704 - 7.2705 - <p>The following two sets of rules determine which margins collapse. 7.2706 - 7.2707 - <ul> 7.2708 - <li>Only margins of <a href="#block-level"><em>block-level</em></a> boxes 7.2709 - can collapse. 7.2710 - 7.2711 - <li>Margins of a floated box do not collapse with any other margins. 7.2712 - 7.2713 - <li>Margins of a <a href="#flow-root"><em>flow root</em></a> do not 7.2714 - collapse with its children's margins. 7.2715 - 7.2716 - <li>Margins of an absolutely positioned box (see <a href="#CSS3POS" 7.2717 - rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>) do not collapse with any 7.2718 - other margins. <!-- 7.2719 - <li>Margins of an ''inline-block'' box do not collapse (not even 7.2720 - with its in-flow children). <span class=issue>Assuming the first 7.2721 - rule above (“only block-level”) is correct, this rule seems 7.2722 - redundant, because an inline block is not block-level.</span> 7.2723 - --> 7.2724 - 7.2725 - 7.2726 - <li>Margins of the root element's box do not collapse with any other 7.2727 - margins. 7.2728 - 7.2729 - <li>If a box is <a href="#collapsed-through"><em>collapsed 7.2730 - through</em></a> and it has <a href="#clearance."><em>clearance</em></a> 7.2731 - applied to one of its two collapsed margins, then those two margins do 7.2732 - not collapse with certain of the parent's margins, as follows: If 7.2733 - clearance is applied to, respectively, the top, right, bottom or left 7.2734 - margin, then the two margins do not collapse with the parent's bottom, 7.2735 - left, top or right margin, respectively. 7.2736 - 7.2737 - <li>If a <a href="#horizontal"><em>horizontal</em></a> element has a ‘<a 7.2738 - href="#height"><code class=property>height</code></a>’ that is not 7.2739 - ‘<code class=css>auto</code>’, or if setting its ‘<a 7.2740 - href="#min-height"><code class=property>min-height</code></a>’ and 7.2741 - ‘<a href="#max-height"><code class=property>max-height</code></a>’ to 7.2742 - their initial values would change its used height, then the <a 7.2743 - href="#tail"><em>tail</em></a> margin of the element does not collapse 7.2744 - with any of its children's margins. <span class=issue>[Check with latest 7.2745 - CSS 2.1 if min/max width/height still have this effect.]</span> 7.2746 - 7.2747 - <li>Similarly, if a <a href="#vertical."><em>vertical</em></a> element has 7.2748 - a ‘<a href="#width"><code class=property>width</code></a>’ that is 7.2749 - not ‘<code class=css>auto</code>’, or if setting its ‘<a 7.2750 - href="#min-width"><code class=property>min-width</code></a>’ and ‘<a 7.2751 - href="#max-width"><code class=property>max-width</code></a>’ to their 7.2752 - initial values would change the used width, then the <a 7.2753 - href="#tail"><em>tail</em></a> margin of the element does not collapse 7.2754 - with any of its children's margins. <span class=issue>[Check with latest 7.2755 - CSS 2.1 if min/max width/height still have this effect.]</span> 7.2756 - </ul> 7.2757 - 7.2758 - <p>Except when forbidden by the list above, the following margins collapse: 7.2759 - 7.2760 - 7.2761 - <ul><!-- transitive --> 7.2762 - 7.2763 - <li> 7.2764 - <p>If a margin P collapses with a margin Q and margin Q with a margin R, 7.2765 - then P, Q and R collapse together. (“Collapsing is transitive”) 7.2766 - <!-- parent-child / head --> 7.2767 - 7.2768 - <li> 7.2769 - <p>A margin of a box collapses with the <a href="#head"><em>head</em></a> 7.2770 - margin of its parent box if those two margins are <a 7.2771 - href="#adjoining"><em>adjoining.</em></a> <!-- parent-child / tail --> 7.2772 - 7.2773 - <li> 7.2774 - <p>A margin of a box collapses with the <a href="#tail"><em>tail</em></a> 7.2775 - margin of its parent box if those two margins are <a 7.2776 - href="#adjoining"><em>adjoining.</em></a> <!-- sibling --> 7.2777 - 7.2778 - <li> 7.2779 - <p>The <a href="#head"><em>head</em></a> margin of a box collapses with 7.2780 - the <a href="#tail"><em>tail</em></a> margin of a sibling box if the two 7.2781 - margins are <a href="#adjoining"><em>adjoining.</em></a> 7.2782 - <!-- self top-bottom --> 7.2783 - 7.2784 - <li> 7.2785 - <p>The top and bottom margins of a box A collapse with each other if the 7.2786 - two margins are <a href="#adjoining"><em>adjoining</em></a> and the 7.2787 - parent box B is <a href="#horizontal"><em>horizontal.</em></a> (The box 7.2788 - is <a href="#collapsed-through"><em>“collapsed through.”</em></a>) 7.2789 - <!-- self left-right --> 7.2790 - 7.2791 - <li> 7.2792 - <p>The left and right margins of a box A collapse with each other if the 7.2793 - two margins are <a href="#adjoining"><em>adjoining</em></a> and the 7.2794 - parent box B is <a href="#vertical."><em>vertical.</em></a> (The box is 7.2795 - <a href="#collapsed-through"><em>“collapsed through.”</em></a>) 7.2796 - </ul> 7.2797 - 7.2798 - <p>If a box A is <a href="#collapsed-through"><em>collapsed 7.2799 - through</em></a> and it has the same mode as its parent (i.e., both are <a 7.2800 - href="#horizontal"><em>horizontal</em></a> or both are <a 7.2801 - href="#vertical."><em>vertical</em></a>), then the position of its <a 7.2802 - href="#head"><em>head</em></a> border edge is defined as follows. 7.2803 - 7.2804 - <ul> 7.2805 - <li>If the box A's margins are collapsed with its parent's <a 7.2806 - href="#head"><em>head</em></a> margin, the head border edge of A is 7.2807 - defined to be the same as the parent's head border edge. 7.2808 - 7.2809 - <li>Otherwise, either the parent is not taking part in the margin 7.2810 - collapsing, or only the parent's <a href="#tail"><em>tail</em></a> margin 7.2811 - is involved. The position of A's head border edge is defined to be the 7.2812 - same as it would have been if A had a nonzero <a 7.2813 - href="#tail"><em>tail</em></a> border. 7.2814 - </ul> 7.2815 - 7.2816 - <p class=note>Note that box A itself is invisible and its position has no 7.2817 - effect on the positions of the other elements with whose margins it is 7.2818 - being collapsed; the border edge position is only required for laying out 7.2819 - descendants of A. 7.2820 - 7.2821 - <div class=example> 7.2822 - <p>In a horizontal flow, the bottom margin of an in-flow <a 7.2823 - href="#block-level">block-level</a> element is always adjoining to the 7.2824 - top margin of its next in-flow block-level sibling, unless that sibling 7.2825 - has clearance: 7.2826 - 7.2827 - <pre> 7.2828 -<p style="margin-bottom: 2em">The bottom margin of this 7.2829 -box…</p> 7.2830 - 7.2831 -<p style="margin-top: 3em">… collapses with the top margin 7.2832 -of this box, to yield max(2em, 3em) = 3em margin.</p> 7.2833 -</pre> 7.2834 - 7.2835 - <p>The top margin of an in-flow block-level element is adjoining to its 7.2836 - first in-flow block-level child's top margin if the element has no top 7.2837 - border, no top padding, and the child has no clearance: 7.2838 - 7.2839 - <pre> 7.2840 -<div style="margin-top: 2em; padding: 0; border: 0"> 7.2841 - <p style="margin-top: 3em"> 7.2842 - The top margin of the DIV and the P 7.2843 - collapse, to yield max(2em, 3em) = 3em margin. 7.2844 - </p> 7.2845 -</div> 7.2846 -</pre> 7.2847 - 7.2848 - <p>The bottom margin of an in-flow block-level element with a ‘<a 7.2849 - href="#height"><code class=property>height</code></a>’ of ‘<code 7.2850 - class=css>auto</code>’ and ‘<a href="#min-height"><code 7.2851 - class=property>min-height</code></a>’ less than the element's used 7.2852 - height and ‘<a href="#max-height"><code 7.2853 - class=property>max-height</code></a>’ greater than the element's used 7.2854 - height is adjoining to its last in-flow block-level child's bottom margin 7.2855 - if the element has no bottom padding or border: 7.2856 - 7.2857 - <pre> 7.2858 -<div style="margin-bottom: 2em; padding: 0; border: 0; 7.2859 - height: auto; min-height: 0; max-height: 100em"> 7.2860 - <p style="margin-bottom: 3em"> 7.2861 - The bottom margin of the DIV and the P collapse, to yield max(2em, 7.2862 - 3em) = 3em margin. 7.2863 - </p> 7.2864 -</div> 7.2865 -</pre> 7.2866 - 7.2867 - <p>An element's own margins are adjoining if the ‘<a 7.2868 - href="#min-height"><code class=property>min-height</code></a>’ property 7.2869 - is zero, and it has neither vertical borders nor vertical padding, and it 7.2870 - has a ‘<a href="#height"><code class=property>height</code></a>’ of 7.2871 - either 0 or ‘<code class=css>auto</code>’, and it does not contain a 7.2872 - line box, and all of its in-flow children's margins (if any) are 7.2873 - adjoining: 7.2874 - 7.2875 - <pre> 7.2876 -<div style="margin-top: 2em; margin-bottom: 3em"> 7.2877 - <p style="position: absolute"> 7.2878 - The DIV is empty and its top and bottom margins collapse. 7.2879 - </p> 7.2880 -</div> 7.2881 -</pre> 7.2882 - 7.2883 - <p>When an element's own margins collapse, and that element has had 7.2884 - clearance applied to it, its top margin collapses with the adjoining 7.2885 - margins of subsequent siblings but that resulting margin does not 7.2886 - collapse with the bottom margin of the parent block: 7.2887 - 7.2888 - <pre> 7.2889 -<div style="margin-bottom: 2em"> 7.2890 - <p style="float: left"> 7.2891 - The margins of the next two Ps collapse 7.2892 - <p style="clear: left; margin-top: 4em; margin-bottom: 3em"> 7.2893 - <!-- empty --> 7.2894 - </p> 7.2895 - <p style="margin-top: 1em; margin-bottom: 1em"> 7.2896 - <!-- empty --> 7.2897 - </p> 7.2898 -</div> 7.2899 -</pre> 7.2900 - 7.2901 - <p>The top and bottom margins of the two empty Ps collapse all together. 7.2902 - But they can't collapse with the bottom of the DIV, because one of the 7.2903 - two empty P's has clearance. 7.2904 - 7.2905 - <p class=issue>Check this. This is probably the only possible 7.2906 - interpretation of the rules, but it is certainly not obvious that the 7.2907 - clearance of one element may stop later elements from collapsing… 7.2908 - </div> 7.2909 - 7.2910 - <p>Collapsing is based on the used value of ‘<a href="#padding"><code 7.2911 - class=property>padding</code></a>’, ‘<a href="#margin"><code 7.2912 - class=property>margin</code></a>’, and ‘<code 7.2913 - class=property>border</code>’ (i.e., after resolving any percentages). 7.2914 - The collapsed margin is calculated over the used value of the various 7.2915 - margins. 7.2916 - 7.2917 - <h2 id=the-width-and-height-properties><span class=secno>10. </span>The 7.2918 + <h2 id=the-width-and-height-properties><span class=secno>9. </span>The 7.2919 width and height properties</h2> 7.2920 7.2921 <table class=propdef> 7.2922 <tbody> 7.2923 <tr> 7.2924 - <td>Name: 7.2925 + <th>Name: 7.2926 7.2927 <td><dfn id=width>width</dfn> 7.2928 7.2929 <tr> 7.2930 - <td>Value: 7.2931 + <th>Value: 7.2932 7.2933 <td>[<var><length></var> | <var><percentage></var>] && [border-box 7.2934 | content-box]? | available | min-content | max-content | fit-content | 7.2935 auto 7.2936 7.2937 <tr> 7.2938 - <td>Initial: 7.2939 + <th>Initial: 7.2940 7.2941 <td>auto 7.2942 7.2943 <tr> 7.2944 - <td>Applies to: 7.2945 + <th>Applies to: 7.2946 7.2947 <td>all elements but non-replaced inline elements, table rows, and row 7.2948 groups 7.2949 7.2950 <tr> 7.2951 - <td>Inherited: 7.2952 + <th>Inherited: 7.2953 7.2954 <td>no 7.2955 7.2956 <tr> 7.2957 - <td>Percentages: 7.2958 + <th>Animatable: 7.2959 + 7.2960 + <td>yes 7.2961 + 7.2962 + <tr> 7.2963 + <th>Percentages: 7.2964 7.2965 <td>refer to width of containing block 7.2966 7.2967 <tr> 7.2968 - <td>Media: 7.2969 + <th>Media: 7.2970 7.2971 <td>visual 7.2972 7.2973 <tr> 7.2974 - <td>Computed value: 7.2975 - 7.2976 - <td>the specified keyword, the specified percentage (see prose under 7.2977 - <percentage>) or the absolute length; ‘<code 7.2978 - class=css>auto</code>’ if the property does not apply 7.2979 + <th>Computed value: 7.2980 + 7.2981 + <td>the specified keyword; or the specified percentage (with ‘<code 7.2982 + class=css>border-box</code>’ or ‘<code 7.2983 + class=css>content-box</code>’ if present); or the absolute length 7.2984 + (with ‘<code class=css>border-box</code>’ or ‘<code 7.2985 + class=css>content-box</code>’ if present); or ‘<code 7.2986 + class=css>auto</code>’ if the property does not apply; (also see 7.2987 + prose under <percentage>) 7.2988 + 7.2989 + <tr> 7.2990 + <th>Canonical order: 7.2991 + 7.2992 + <td>the length or percentage before the keyword, if both are present 7.2993 </table> 7.2994 7.2995 <table class=propdef> 7.2996 <tbody> 7.2997 <tr> 7.2998 - <td>Name: 7.2999 + <th>Name: 7.3000 7.3001 <td><dfn id=height>height</dfn> 7.3002 7.3003 <tr> 7.3004 - <td>Value: 7.3005 + <th>Value: 7.3006 7.3007 <td>[<var><length></var> | <var><percentage></var>] && [border-box 7.3008 | content-box]? | available | min-content | max-content | fit-content | 7.3009 complex | auto 7.3010 7.3011 <tr> 7.3012 - <td>Initial: 7.3013 + <th>Initial: 7.3014 7.3015 <td>auto 7.3016 7.3017 <tr> 7.3018 - <td>Applies to: 7.3019 + <th>Applies to: 7.3020 7.3021 <td>all elements but non-replaced inline elements, table columns, and 7.3022 column groups 7.3023 7.3024 <tr> 7.3025 - <td>Inherited: 7.3026 + <th>Inherited: 7.3027 7.3028 <td>no 7.3029 7.3030 <tr> 7.3031 - <td>Percentages: 7.3032 + <th>Animatable: 7.3033 + 7.3034 + <td>yes 7.3035 + 7.3036 + <tr> 7.3037 + <th>Percentages: 7.3038 7.3039 <td>see prose 7.3040 7.3041 <tr> 7.3042 - <td>Media: 7.3043 + <th>Media: 7.3044 7.3045 <td>visual 7.3046 7.3047 <tr> 7.3048 - <td>Computed value: 7.3049 + <th>Computed value: 7.3050 7.3051 <td>the specified keywords, the specified percentage (see prose under 7.3052 <percentage>) or the absolute length; ‘<code 7.3053 class=css>auto</code>’ if the property does not apply 7.3054 + 7.3055 + <tr> 7.3056 + <th>Canonical order: 7.3057 + 7.3058 + <td>the length or percentage before the keyword, if both are present 7.3059 </table> 7.3060 <!-- Nov 2007, ftf: add four keywords and Jason's example of image + caption --> 7.3061 7.3062 @@ -2817,7 +2587,7 @@ 7.3063 with respect to the width (in the case of ‘<a href="#width"><code 7.3064 class=property>width</code></a>’) or height (for ‘<a 7.3065 href="#height"><code class=property>height</code></a>’) of the 7.3066 - generated box's <a href="#containing-block">containing block.</a> 7.3067 + generated box's <a href="#containing-block0">containing block.</a> 7.3068 Negative percentages are illegal. If the containing block's width, resp. 7.3069 height depends on this element, <span class=issue>then the percentage is 7.3070 relative to ‘<code class=css>100vw</code>’, resp. ‘<code 7.3071 @@ -2830,11 +2600,11 @@ 7.3072 7.3073 <dt>available 7.3074 7.3075 - <dd>Equal to the <a href="#containing-block"><em>containing block</em></a> 7.3076 - width or height minus the current element's margin, border, and padding. 7.3077 - <span class=issue>If the required width, resp. height of the containing 7.3078 - block is unknown (depends on this element), then ‘<code 7.3079 - class=css>available</code>’ is equal to ‘<code 7.3080 + <dd>Equal to the <a href="#containing-block0"><em>containing 7.3081 + block</em></a> width or height minus the current element's margin, 7.3082 + border, and padding. <span class=issue>If the required width, resp. 7.3083 + height of the containing block is unknown (depends on this element), then 7.3084 + ‘<code class=css>available</code>’ is equal to ‘<code 7.3085 class=css>100vw</code>’, resp. ‘<code 7.3086 class=css>100vh</code>’.</span> 7.3087 7.3088 @@ -2869,13 +2639,18 @@ 7.3089 purposes of the section on <a href="#Calculating">“Calculating widths, 7.3090 heights and margins,”</a> the element is treated as if its height was 7.3091 ‘<code class=css>auto</code>’ and it had an <em>intrinsic ratio.</em> 7.3092 - 7.3093 </dl> 7.3094 7.3095 <p class=issue>Another possible value is 7.3096 <var><non-negative-number></var>, which would mean ‘<code 7.3097 class=css>min-content</code>’ times that number. 7.3098 7.3099 + <p class=issue>The width property of ‘<a href="#viewport"><code 7.3100 + class=css>@viewport</code></a>’ <a href="#CSS-DEVICE-ADAPT" 7.3101 + rel=biblioentry>[CSS-DEVICE-ADAPT]<!--{{CSS-DEVICE-ADAPT}}--></a> is a 7.3102 + shorthand for min-width and max-width and can have either one or two 7.3103 + values. Anything we can do to alleviate risk of the confusion? 7.3104 + 7.3105 <p class=note>Note that ‘<code class=css>available</code>’, ‘<code 7.3106 class=css>max-content</code>’, ‘<code class=css>min-content</code>’, 7.3107 ‘<code class=css>fit-content</code>’, ‘<code 7.3108 @@ -2982,103 +2757,131 @@ 7.3109 class=property>box-sizing</code></a>’ property). 7.3110 </div> 7.3111 7.3112 - <h2 id=min-max><span class=secno>11. </span>The min-width, max-width, 7.3113 + <h2 id=min-max><span class=secno>10. </span>The min-width, max-width, 7.3114 min-height and max-height properties</h2> 7.3115 7.3116 <table class=propdef> 7.3117 <tbody> 7.3118 <tr> 7.3119 - <td>Name: 7.3120 + <th>Name: 7.3121 7.3122 <td><dfn id=min-width>min-width</dfn>, <dfn 7.3123 id=min-height>min-height</dfn> 7.3124 7.3125 <tr> 7.3126 - <td>Value: 7.3127 - 7.3128 - <td><a href="#ltlengthgt"><var><length></var></a> | <a 7.3129 - href="#ltpercentagegt"><var><percentage></var></a> | available | 7.3130 - min-content | max-content | fit-content 7.3131 - 7.3132 - <tr> 7.3133 - <td>Initial: 7.3134 + <th>Value: 7.3135 + 7.3136 + <td>[ [<a href="#ltlengthgt"><var><length></var></a> | <a 7.3137 + href="#ltpercentagegt"><var><percentage></var></a>] && 7.3138 + [border-box | content-box]? ] | available | min-content | max-content | 7.3139 + fit-content 7.3140 + 7.3141 + <tr> 7.3142 + <th>Initial: 7.3143 7.3144 <td>0 7.3145 7.3146 <tr> 7.3147 - <td>Applies to: 7.3148 + <th>Applies to: 7.3149 7.3150 <td>all elements but non-replaced inline elements, table rows, and row 7.3151 groups 7.3152 7.3153 <tr> 7.3154 - <td>Inherited: 7.3155 + <th>Inherited: 7.3156 7.3157 <td>no 7.3158 7.3159 <tr> 7.3160 - <td>Percentages: 7.3161 + <th>Animatable: 7.3162 + 7.3163 + <td>yes 7.3164 + 7.3165 + <tr> 7.3166 + <th>Percentages: 7.3167 7.3168 <td>refer to width, resp. height of containing block 7.3169 7.3170 <tr> 7.3171 - <td>Media: 7.3172 + <th>Media: 7.3173 7.3174 <td>visual 7.3175 7.3176 <tr> 7.3177 - <td>Computed value: 7.3178 - 7.3179 - <td>the percentage as specified, the keyword as specified, or the 7.3180 - absolute length 7.3181 + <th>Computed value: 7.3182 + 7.3183 + <td>the percentage as specified (with ‘<code 7.3184 + class=css>border-box</code>’ or ‘<code 7.3185 + class=css>content-box</code>’, if present), the keyword as specified, 7.3186 + or the absolute length (with ‘<code class=css>border-box</code>’ or 7.3187 + ‘<code class=css>content-box</code>’, if present) 7.3188 + 7.3189 + <tr> 7.3190 + <th>Canonical order: 7.3191 + 7.3192 + <td>the length or percentage before the keyword, if both are present 7.3193 </table> 7.3194 7.3195 <table class=propdef> 7.3196 <tbody> 7.3197 <tr> 7.3198 - <td>Name: 7.3199 + <th>Name: 7.3200 7.3201 <td><dfn id=max-width>max-width</dfn>, <dfn 7.3202 id=max-height>max-height</dfn> 7.3203 7.3204 <tr> 7.3205 - <td>Value: 7.3206 - 7.3207 - <td><a href="#ltlengthgt"><var><length></var></a> | <a 7.3208 - href="#ltpercentagegt"><var><percentage></var></a> | available | 7.3209 - min-content | max-content | fit-content | none 7.3210 - 7.3211 - <tr> 7.3212 - <td>Initial: 7.3213 + <th>Value: 7.3214 + 7.3215 + <td>[ [<a href="#ltlengthgt"><var><length></var></a> | <a 7.3216 + href="#ltpercentagegt"><var><percentage></var></a>] && 7.3217 + [border-box | content-box]? ] | available | min-content | max-content | 7.3218 + fit-content | none 7.3219 + 7.3220 + <tr> 7.3221 + <th>Initial: 7.3222 7.3223 <td>none 7.3224 7.3225 <tr> 7.3226 - <td>Applies to: 7.3227 + <th>Applies to: 7.3228 7.3229 <td>all elements but non-replaced inline elements, table rows, and row 7.3230 groups 7.3231 7.3232 <tr> 7.3233 - <td>Inherited: 7.3234 + <th>Inherited: 7.3235 7.3236 <td>no 7.3237 7.3238 <tr> 7.3239 - <td>Percentages: 7.3240 + <th>Animatable: 7.3241 + 7.3242 + <td>yes 7.3243 + 7.3244 + <tr> 7.3245 + <th>Percentages: 7.3246 7.3247 <td>refer to width, resp. height of containing block 7.3248 7.3249 <tr> 7.3250 - <td>Media: 7.3251 + <th>Media: 7.3252 7.3253 <td>visual 7.3254 7.3255 <tr> 7.3256 - <td>Computed value: 7.3257 - 7.3258 - <td>the percentage as specified, the keyword as specified, the absolute 7.3259 - length, or ‘<code class=css>none</code>’ 7.3260 + <th>Computed value: 7.3261 + 7.3262 + <td>the percentage as specified (with ‘<code 7.3263 + class=css>border-box</code>’ or ‘<code 7.3264 + class=css>content-box</code>’, if present); the keyword as specified; 7.3265 + the absolute length (with ‘<code class=css>border-box</code>’ or 7.3266 + ‘<code class=css>content-box</code>’, if present); or none 7.3267 + 7.3268 + <tr> 7.3269 + <th>Canonical order: 7.3270 + 7.3271 + <td>the length or percentage before the keyword, if both are present 7.3272 </table> 7.3273 7.3274 <p>These properties allow authors to constrain content widths and heights 7.3275 @@ -3096,7 +2899,7 @@ 7.3276 <dd>Specifies a minimum or maximum for ‘<a href="#width"><code 7.3277 class=property>width</code></a>’ or ‘<a href="#height"><code 7.3278 class=property>height</code></a>’ as a percentage of the corresponding 7.3279 - dimension of the <a href="#containing-block"><em>containing 7.3280 + dimension of the <a href="#containing-block0"><em>containing 7.3281 block.</em></a> Negative percentages are illegal. If the containing 7.3282 block's dimension is negative, the used value is zero. If that containing 7.3283 block's dimension depends on this element's dimension, then the resulting 7.3284 @@ -3155,7 +2958,7 @@ 7.3285 class=property>max-width</code></a>’ act like ‘<code 7.3286 class=css>0</code>’ and ‘<code class=css>none</code>’, resp. 7.3287 7.3288 - <h2 id=intrinsic><span class=secno>12. </span>Definition of intrinsic sizes 7.3289 + <h2 id=intrinsic><span class=secno>11. </span>Definition of intrinsic sizes 7.3290 – high quality</h2> 7.3291 7.3292 <p>The size of a box often depends on the width or height of its content. 7.3293 @@ -3261,7 +3064,7 @@ 7.3294 easy cases (only inline content) but is quicker to compute in complex 7.3295 cases. 7.3296 7.3297 - <h2 id=intrinsic-low><span class=secno>13. </span>Definition of intrinsic 7.3298 + <h2 id=intrinsic-low><span class=secno>12. </span>Definition of intrinsic 7.3299 sizes – low quality</h2> 7.3300 7.3301 <p>UA's may also, if speed is preferred over quality, use the <dfn 7.3302 @@ -3276,7 +3079,6 @@ 7.3303 <br> 7.3304 APREF = 7.3305 max(<var>P<sub>1</sub></var>,<var>P<sub>2</sub></var>,<var>P<sub>3</sub></var>,<var>P<sub>4</sub></var>) 7.3306 - 7.3307 </blockquote> 7.3308 7.3309 <p>where 7.3310 @@ -3349,7 +3151,465 @@ 7.3311 <p>The corresponding definitions for vertical elements are analogous, with 7.3312 width and height swapped. 7.3313 7.3314 - <h2 id=Calculating><span class=secno>14. </span>Calculating widths, heights 7.3315 + <h2 id=aspect-ratios-of-replaced-elements><span class=secno>13. 7.3316 + </span><span class=index id=aspect-ratios>Aspect ratios</span> of replaced 7.3317 + elements</h2> 7.3318 + 7.3319 + <p>For the purposes of the width and height calculations below, CSS 7.3320 + distinguishes four kinds of <a href="#replaced-element"><em class=index 7.3321 + id=replaced-elements title="replaced element">replaced elements</em></a>: 7.3322 + 7.3323 + <dl> 7.3324 + <dt>Type 1: replaced elements with both <em class=index 7.3325 + id=intrinsic-width>intrinsic width</em> and <em class=index 7.3326 + id=intrinsic-height.>intrinsic height.</em> 7.3327 + 7.3328 + <dd>These are replaced elements that are meant to be displayed with a 7.3329 + certain fixed factor (the <em class=index id=intrinsic-ratio>intrinsic 7.3330 + ratio</em>) between their width and height and also have a default size. 7.3331 + Different formats may have different ways of specifying the size, e.g., a 7.3332 + width and a ratio, or a raster and a resolution in dots per inch. Raster 7.3333 + images fall in this category. 7.3334 + 7.3335 + <dt>Type 2: replaced elements with only an <em class=index 7.3336 + id=intrinsic-ratio0>intrinsic ratio</em> 7.3337 + 7.3338 + <dd>These are replaced elements that are meant to be displayed with a 7.3339 + certain fixed factor between their width and height, but without a 7.3340 + default size. <span class=index id=svg0>SVG</span> images often fall in 7.3341 + the this category. 7.3342 + 7.3343 + <dt>Type 3: replaced elements with a <dfn id=complex-aspect-ratio>complex 7.3344 + aspect ratio</dfn> 7.3345 + 7.3346 + <dd>These are replaced elements that do not have a <em>fixed</em> ratio 7.3347 + between their width and height, but that do have a functional relation 7.3348 + between them in the sense that for every width there is a unique height. 7.3349 + HTML documents are examples of this: the width can be chosen freely, but 7.3350 + at every width there is a definite intrinsic height. 7.3351 + 7.3352 + <dt>Type 4: replaced elements without an intrinsic ratio 7.3353 + 7.3354 + <dd>These are replaced elements that have no relation between their width 7.3355 + and height. Certain <span class=index id=svg1>SVG</span> images are 7.3356 + examples of this. 7.3357 + </dl> 7.3358 + 7.3359 + <p>For <span class=index id=raster-images>raster images</span> without 7.3360 + reliable resolution information, a size of 1 px unit per image source 7.3361 + pixel must be assumed. These images thus are of type 1. 7.3362 + 7.3363 + <div class=example> 7.3364 + <p>E.g., according to the section on <a href="#inline-replaced">inline 7.3365 + replaced elements</a> below, if the replaced element is an HTML document 7.3366 + and the height is specified as ‘<code class=css>auto</code>’, e.g.: 7.3367 + 7.3368 + <pre> 7.3369 +... <object data="example.html" 7.3370 + style="width: 30em; height: auto"></object>... 7.3371 +</pre> 7.3372 + 7.3373 + <p>then the used height will be 150px, which is unlikely to be the real 7.3374 + height of the example.html document. But if the height is specified as 7.3375 + ‘<code class=css>complex</code>’, e.g.: 7.3376 + 7.3377 + <pre> 7.3378 +... <object data="example.html" 7.3379 + style="width: 30em; height: complex"></object>... 7.3380 +</pre> 7.3381 + 7.3382 + <p>then the height will be the height the example.html document normally 7.3383 + has when displayed on its own with the given width. This enables almost 7.3384 + seamless integration of external text in a document, without a scrollbar 7.3385 + or other scrolling mechanism. (The external text is still displayed with 7.3386 + its own style sheet.) 7.3387 + </div> 7.3388 + 7.3389 + <div class=example> 7.3390 + <p>An external mathematical formula in MathML is an example of replaced 7.3391 + content with an intrinsic width and height. Assume the file m.mml 7.3392 + contains a formula, then the HTML fragment 7.3393 + 7.3394 + <pre> 7.3395 +... derive <img src="m.mml" 7.3396 +alt="that the sum of p(i) for i greater than 0 equals N"> 7.3397 +for the case... 7.3398 +</pre> 7.3399 + 7.3400 + <p>renders the formula at its intrinsic size. 7.3401 + </div> 7.3402 + 7.3403 + <p class=issue>The mathematical formula would however benefit from a way to 7.3404 + negotiate available space against intrinsic size, or even negotiate 7.3405 + available space against the number of boxes, so that the formula could be 7.3406 + broken in two or more boxes and occupy space on two or more lines (similar 7.3407 + to how lines of text are broken or words are hyphenated). HTML5, unlike 7.3408 + HTML4, has math elements, so formulas can be embedded instead of 7.3409 + transcluded, which would solve the problem if CSS had properties for math 7.3410 + typography… 7.3411 + 7.3412 + <h2 id=block-level-formatting><span class=secno>14. </span>Block-level 7.3413 + formatting</h2> 7.3414 + 7.3415 + <p>In a <dfn id=block-formatting-context>block formatting context,</dfn> 7.3416 + block-level boxes are laid out in the manner of a series of paragraphs. 7.3417 + 7.3418 + <p>The boxes of a <a href="#flow0">flow</a> are laid out one after the 7.3419 + other in the direction of the ‘<a href="#writing-mode"><code 7.3420 + class=property>writing-mode</code></a>’ property of the <a 7.3421 + href="#flow-root">flow root</a> and in the same order as in the source 7.3422 + document. Their position is given by how much their margins overlap (see 7.3423 + <a href="#collapsing-margins">“Collapsing margins”</a>) and by the 7.3424 + fact that their side margin edges coincide with the edges of their 7.3425 + containing block. More precisely: Each box's <a href="#d-edge." 7.3426 + title="D edge">D</a> and <a href="#b-edge">B edge</a> coincide with 7.3427 + respectively the <a href="#start">start</a> and <a href="#end">end</a> 7.3428 + edges of its <a href="#containing-block0">containing block.</a> 7.3429 + 7.3430 + <p class=issue>When is a block formatting context established? 7.3431 + 7.3432 + <p class=issue>TODO: Need to deal with anonymous block boxes. 7.3433 + 7.3434 + <div class=example> 7.3435 + <p>An example of the last point above is this document fragment: 7.3436 + 7.3437 + <pre><p>Somebody whose name I have 7.3438 +forgotten, said, long ago: <q>a box is 7.3439 +a box,</q> and he probably meant it.</p></pre> 7.3440 + 7.3441 + <p>with these style rules: 7.3442 + 7.3443 + <pre>p { display: block } 7.3444 +q { display: block; margin: 1em }</pre> 7.3445 + 7.3446 + <p>The <code>p</code> element has both line boxes and a child box for the 7.3447 + <code>q</code> element, which is a block-level element. The line boxes 7.3448 + before the <code>q</code> are wrapped in an anonymous block-level box and 7.3449 + so are the line boxes after the <code>q</code>. The resulting tree of 7.3450 + boxes might be as follows (refer to the <a href="#When">figure</a>): 7.3451 + 7.3452 + <ul> 7.3453 + <li>block-level box [p] 7.3454 + <ul> 7.3455 + <li>block-level box [anonymous] 7.3456 + <ul> 7.3457 + <li>line box: “Somebody…” 7.3458 + 7.3459 + <li>line box: “forgotten…” 7.3460 + </ul> 7.3461 + 7.3462 + <li>block-level box [q] 7.3463 + <ul> 7.3464 + <li>line box: “a box…” 7.3465 + </ul> 7.3466 + 7.3467 + <li>block-level box [anonymous] 7.3468 + <ul> 7.3469 + <li>line box: “and he…” 7.3470 + </ul> 7.3471 + </ul> 7.3472 + </ul> 7.3473 + 7.3474 + <div class=figure id=When> 7.3475 + <p><img 7.3476 + alt="The P element has two line boxes before the q and one after. The first two are wrapped in an anonymous box, the last one is wrapped in another anonymous box." 7.3477 + src=anonymous.png> 7.3478 + 7.3479 + <p class=caption>When the fragment is rendered, the text before the q is 7.3480 + wrapped in an anonymous block and the text after the q in another. 7.3481 + </div> 7.3482 + </div> 7.3483 + <!--example--> 7.3484 + 7.3485 + <h3 id=collapsing-margins><span class=secno>14.1. </span>Collapsing margins</h3> 7.3486 + 7.3487 + <p>Certain adjoining margins, as defined in this section, combine to form a 7.3488 + single margin. Those margins are said to <dfn id=collapse.>collapse.</dfn> 7.3489 + Margins are <dfn id=adjoining>adjoining</dfn> if there are no nonempty 7.3490 + content, <a href="#padding-area" title="padding area">padding</a> or <a 7.3491 + href="#border-area" title="border area">border areas</a> or <a 7.3492 + href="#clearance."><em>clearance</em></a> to separate them. 7.3493 + 7.3494 + <div class=example> 7.3495 + <p>For example, in the following fragment with the given style rules: 7.3496 + 7.3497 + <pre>p { display: block; margin-bottom: 2em 0 1em 0 } 7.3498 +div { display: block; margin: 2.5em 0 } 7.3499 +... 7.3500 +<p>First paragraph</p> 7.3501 +<div> 7.3502 + <p>Second paragraph</p> 7.3503 +</div></pre> 7.3504 + 7.3505 + <p>the bottom margin of the first <code>p</code> (=1em), the top margin of 7.3506 + the <code>div</code> (=2.5em) and the top margin of the second 7.3507 + <code>p</code> (=2em) collapse. The result is a single margin of 2.5em 7.3508 + (the maximum of the three) between the bottom of the first <code>p</code> 7.3509 + and the top of the second. 7.3510 + </div> 7.3511 + 7.3512 + <div class=figure> 7.3513 + <p><img alt="Three margins collapse: 1em + 2.5em + 2em" src=collapse1.png> 7.3514 + 7.3515 + <p class=caption>Schematic representation of the previous example. 7.3516 + </div> 7.3517 + 7.3518 + <div class=example> 7.3519 + <p>In the following fragment, 7.3520 + 7.3521 + <pre>p { display: block; margin: 2em 0 1em 0 } 7.3522 +div { display: block; margin: 2.5em 0; 7.3523 + border: thin solid } 7.3524 +... 7.3525 +<p>First paragraph</p> 7.3526 +<div> 7.3527 + <p>Second paragraph</p> 7.3528 +</div></pre> 7.3529 + 7.3530 + <p>the bottom margin of the first <code>p</code> and the top margin of the 7.3531 + <code>div</code> collapse, but the top margin of the second 7.3532 + <code>p</code> does not collapse with them, because it is not <a 7.3533 + href="#adjoining"><em>adjoining;</em></a> the border of the 7.3534 + <code>div</code> separates them. 7.3535 + </div> 7.3536 + 7.3537 + <div class=figure> 7.3538 + <p><img alt="Only two margins collapse: 1em + 2.5em" src=collapse2.png> 7.3539 + 7.3540 + <p class=caption>Schematic representation of the previous example. 7.3541 + </div> 7.3542 + 7.3543 + <p>If a set of adjoining margins collapses, then the width of the resulting 7.3544 + margin is <var>M</var> - <var>N</var>, where <var>M</var> is the maximum 7.3545 + of the adjoining margins that are positive, or zero if there are none; and 7.3546 + <var>N</var> is the minimum of the adjoining margins that are negative, or 7.3547 + zero if there are none. 7.3548 + 7.3549 + <p>We call an element or box <dfn id=collapsed-through>collapsed 7.3550 + through</dfn> if two of its margins collapse with each other. 7.3551 + 7.3552 + <div class=example> 7.3553 + <p>The most common use of collapsing through elements is that empty 7.3554 + paragraphs don't cause extra white space: 7.3555 + 7.3556 + <pre><p>First paragraph 7.3557 +<p>Second paragraph 7.3558 +<p> 7.3559 +<p>Last paragraph</pre> 7.3560 + 7.3561 + <p>There is equal space between the first and the second paragraphs as 7.3562 + between the second and the last. 7.3563 + </div> 7.3564 + 7.3565 + <p>The following two sets of rules determine which margins collapse. 7.3566 + 7.3567 + <ul> 7.3568 + <li>Only margins of <a href="#block-level"><em>block-level</em></a> boxes 7.3569 + can collapse. 7.3570 + 7.3571 + <li>Margins of a floated box do not collapse with any other margins. 7.3572 + 7.3573 + <li>Margins of a <a href="#flow-root"><em>flow root</em></a> do not 7.3574 + collapse with its children's margins. 7.3575 + 7.3576 + <li>Margins of an absolutely positioned box (see <a href="#CSS3POS" 7.3577 + rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>) do not collapse with any 7.3578 + other margins. <!-- 7.3579 + <li>Margins of an ''inline-block'' box do not collapse (not even 7.3580 + with its in-flow children). <span class=issue>Assuming the first 7.3581 + rule above (“only block-level”) is correct, this rule seems 7.3582 + redundant, because an inline block is not block-level.</span> 7.3583 + --> 7.3584 + 7.3585 + <li>Margins of the root element's box do not collapse with any other 7.3586 + margins. 7.3587 + 7.3588 + <li>If a box is <a href="#collapsed-through"><em>collapsed 7.3589 + through</em></a> and it has <a href="#clearance."><em>clearance</em></a> 7.3590 + applied to one of its two collapsed margins, then those two margins do 7.3591 + not collapse with certain of the parent's margins, as follows: If 7.3592 + clearance is applied to, respectively, the top, right, bottom or left 7.3593 + margin, then the two margins do not collapse with the parent's bottom, 7.3594 + left, top or right margin, respectively. 7.3595 + 7.3596 + <li>If a <a href="#horizontal"><em>horizontal</em></a> element has a ‘<a 7.3597 + href="#height"><code class=property>height</code></a>’ that is not 7.3598 + ‘<code class=css>auto</code>’, or if setting its ‘<a 7.3599 + href="#min-height"><code class=property>min-height</code></a>’ and 7.3600 + ‘<a href="#max-height"><code class=property>max-height</code></a>’ to 7.3601 + their initial values would change its used height, then the <em>tail</em> 7.3602 + margin of the element does not collapse with any of its children's 7.3603 + margins. <span class=issue>[Check with latest CSS 2.1 if min/max 7.3604 + width/height still have this effect.]</span> 7.3605 + 7.3606 + <li>Similarly, if a <a href="#vertical."><em>vertical</em></a> element has 7.3607 + a ‘<a href="#width"><code class=property>width</code></a>’ that is 7.3608 + not ‘<code class=css>auto</code>’, or if setting its ‘<a 7.3609 + href="#min-width"><code class=property>min-width</code></a>’ and ‘<a 7.3610 + href="#max-width"><code class=property>max-width</code></a>’ to their 7.3611 + initial values would change the used width, then the <em>tail</em> margin 7.3612 + of the element does not collapse with any of its children's margins. 7.3613 + <span class=issue>[Check with latest CSS 2.1 if min/max width/height 7.3614 + still have this effect.]</span> 7.3615 + </ul> 7.3616 + 7.3617 + <p>Except when forbidden by the list above, the following margins collapse: 7.3618 + 7.3619 + <ul><!-- transitive --> 7.3620 + 7.3621 + <li> 7.3622 + <p>If a margin P collapses with a margin Q and margin Q with a margin R, 7.3623 + then P, Q and R collapse together. (“Collapsing is transitive”) 7.3624 + <!-- parent-child / head --> 7.3625 + 7.3626 + <li> 7.3627 + <p>A margin of a box collapses with the <a href="#head"><em>head</em></a> 7.3628 + margin of its parent box if those two margins are <a 7.3629 + href="#adjoining"><em>adjoining.</em></a> <!-- parent-child / tail --> 7.3630 + 7.3631 + <li> 7.3632 + <p>A margin of a box collapses with the <em>tail</em> margin of its 7.3633 + parent box if those two margins are <a 7.3634 + href="#adjoining"><em>adjoining.</em></a> <!-- sibling --> 7.3635 + 7.3636 + <li> 7.3637 + <p>The <a href="#head"><em>head</em></a> margin of a box collapses with 7.3638 + the <em>tail</em> margin of a sibling box if the two margins are <a 7.3639 + href="#adjoining"><em>adjoining.</em></a> <!-- self top-bottom --> 7.3640 + 7.3641 + <li> 7.3642 + <p>The top and bottom margins of a box A collapse with each other if the 7.3643 + two margins are <a href="#adjoining"><em>adjoining</em></a> and the 7.3644 + parent box B is <a href="#horizontal"><em>horizontal.</em></a> (The box 7.3645 + is <a href="#collapsed-through"><em>“collapsed through.”</em></a>) 7.3646 + <!-- self left-right --> 7.3647 + 7.3648 + <li> 7.3649 + <p>The left and right margins of a box A collapse with each other if the 7.3650 + two margins are <a href="#adjoining"><em>adjoining</em></a> and the 7.3651 + parent box B is <a href="#vertical."><em>vertical.</em></a> (The box is 7.3652 + <a href="#collapsed-through"><em>“collapsed through.”</em></a>) 7.3653 + </ul> 7.3654 + 7.3655 + <p>If a box A is <a href="#collapsed-through"><em>collapsed 7.3656 + through</em></a> and it has the same mode as its parent (i.e., both are <a 7.3657 + href="#horizontal"><em>horizontal</em></a> or both are <a 7.3658 + href="#vertical."><em>vertical</em></a>), then the position of its <a 7.3659 + href="#head"><em>head</em></a> border edge is defined as follows. 7.3660 + 7.3661 + <ul> 7.3662 + <li>If the box A's margins are collapsed with its parent's <a 7.3663 + href="#head"><em>head</em></a> margin, the head border edge of A is 7.3664 + defined to be the same as the parent's head border edge. 7.3665 + 7.3666 + <li>Otherwise, either the parent is not taking part in the margin 7.3667 + collapsing, or only the parent's <em>tail</em> margin is involved. The 7.3668 + position of A's head border edge is defined to be the same as it would 7.3669 + have been if A had a nonzero <em>tail</em> border. 7.3670 + </ul> 7.3671 + 7.3672 + <p class=note>Note that box A itself is invisible and its position has no 7.3673 + effect on the positions of the other elements with whose margins it is 7.3674 + being collapsed; the border edge position is only required for laying out 7.3675 + descendants of A. 7.3676 + 7.3677 + <div class=example> 7.3678 + <p>In a horizontal flow, the bottom margin of an in-flow <a 7.3679 + href="#block-level">block-level</a> element is always adjoining to the 7.3680 + top margin of its next in-flow block-level sibling, unless that sibling 7.3681 + has clearance: 7.3682 + 7.3683 + <pre> 7.3684 +<p style="margin-bottom: 2em">The bottom margin of this 7.3685 +box…</p> 7.3686 + 7.3687 +<p style="margin-top: 3em">… collapses with the top margin 7.3688 +of this box, to yield max(2em, 3em) = 3em margin.</p> 7.3689 +</pre> 7.3690 + 7.3691 + <p>The top margin of an in-flow block-level element is adjoining to its 7.3692 + first in-flow block-level child's top margin if the element has no top 7.3693 + border, no top padding, and the child has no clearance: 7.3694 + 7.3695 + <pre> 7.3696 +<div style="margin-top: 2em; padding: 0; border: 0"> 7.3697 + <p style="margin-top: 3em"> 7.3698 + The top margin of the DIV and the P 7.3699 + collapse, to yield max(2em, 3em) = 3em margin. 7.3700 + </p> 7.3701 +</div> 7.3702 +</pre> 7.3703 + 7.3704 + <p>The bottom margin of an in-flow block-level element with a ‘<a 7.3705 + href="#height"><code class=property>height</code></a>’ of ‘<code 7.3706 + class=css>auto</code>’ and ‘<a href="#min-height"><code 7.3707 + class=property>min-height</code></a>’ less than the element's used 7.3708 + height and ‘<a href="#max-height"><code 7.3709 + class=property>max-height</code></a>’ greater than the element's used 7.3710 + height is adjoining to its last in-flow block-level child's bottom margin 7.3711 + if the element has no bottom padding or border: 7.3712 + 7.3713 + <pre> 7.3714 +<div style="margin-bottom: 2em; padding: 0; border: 0; 7.3715 + height: auto; min-height: 0; max-height: 100em"> 7.3716 + <p style="margin-bottom: 3em"> 7.3717 + The bottom margin of the DIV and the P collapse, to yield max(2em, 7.3718 + 3em) = 3em margin. 7.3719 + </p> 7.3720 +</div> 7.3721 +</pre> 7.3722 + 7.3723 + <p>An element's own margins are adjoining if the ‘<a 7.3724 + href="#min-height"><code class=property>min-height</code></a>’ property 7.3725 + is zero, and it has neither vertical borders nor vertical padding, and it 7.3726 + has a ‘<a href="#height"><code class=property>height</code></a>’ of 7.3727 + either 0 or ‘<code class=css>auto</code>’, and it does not contain a 7.3728 + line box, and all of its in-flow children's margins (if any) are 7.3729 + adjoining: 7.3730 + 7.3731 + <pre> 7.3732 +<div style="margin-top: 2em; margin-bottom: 3em"> 7.3733 + <p style="position: absolute"> 7.3734 + The DIV is empty and its top and bottom margins collapse. 7.3735 + </p> 7.3736 +</div> 7.3737 +</pre> 7.3738 + 7.3739 + <p>When an element's own margins collapse, and that element has had 7.3740 + clearance applied to it, its top margin collapses with the adjoining 7.3741 + margins of subsequent siblings but that resulting margin does not 7.3742 + collapse with the bottom margin of the parent block: 7.3743 + 7.3744 + <pre> 7.3745 +<div style="margin-bottom: 2em"> 7.3746 + <p style="float: left"> 7.3747 + The margins of the next two Ps collapse 7.3748 + <p style="clear: left; margin-top: 4em; margin-bottom: 3em"> 7.3749 + <!-- empty --> 7.3750 + </p> 7.3751 + <p style="margin-top: 1em; margin-bottom: 1em"> 7.3752 + <!-- empty --> 7.3753 + </p> 7.3754 +</div> 7.3755 +</pre> 7.3756 + 7.3757 + <p>The top and bottom margins of the two empty Ps collapse all together. 7.3758 + But they can't collapse with the bottom of the DIV, because one of the 7.3759 + two empty P's has clearance. 7.3760 + 7.3761 + <p class=issue>Check this. This is probably the only possible 7.3762 + interpretation of the rules, but it is certainly not obvious that the 7.3763 + clearance of one element may stop later elements from collapsing… 7.3764 + </div> 7.3765 + 7.3766 + <p>Collapsing is based on the used value of ‘<a href="#padding"><code 7.3767 + class=property>padding</code></a>’, ‘<a href="#margin"><code 7.3768 + class=property>margin</code></a>’, and ‘<code 7.3769 + class=property>border</code>’ (i.e., after resolving any percentages). 7.3770 + The collapsed margin is calculated over the used value of the various 7.3771 + margins. 7.3772 + 7.3773 + <h2 id=Calculating><span class=secno>15. </span>Calculating widths, heights 7.3774 and margins</h2> 7.3775 7.3776 <p>The following two algorithms define the <a href="#used-value."><em>used 7.3777 @@ -3564,7 +3824,7 @@ 7.3778 class=property>height</code></a>’. 7.3779 7.3780 <p>The following subsections apply if the element's <a 7.3781 - href="#containing-block"><em>containing block</em></a> is <a 7.3782 + href="#containing-block0"><em>containing block</em></a> is <a 7.3783 href="#horizontal"><em>horizontal.</em></a> If it is <a 7.3784 href="#vertical."><em>vertical,</em></a> the same rules apply, but with 7.3785 every occurrence of “left” replaced by “top,” “right” by 7.3786 @@ -3572,7 +3832,6 @@ 7.3787 “height” by “width” and “width” by “height.” 7.3788 <!-- '100vw' decided at ftf Sep 10, 2007. '100vh' is my sugggestion 7.3789 [BB] --> 7.3790 - 7.3791 7.3792 <p>For the purposes of evaluating percentages in the following subsections, 7.3793 if the width of the containing block is unknown, then assume the width is 7.3794 @@ -3580,7 +3839,7 @@ 7.3795 containing block is unknown, then assume it is ‘<code 7.3796 class=css>100vh</code>’. 7.3797 7.3798 - <h3 id=inline-non-replaced><span class=secno>14.1. </span>Inline, 7.3799 + <h3 id=inline-non-replaced><span class=secno>15.1. </span>Inline, 7.3800 non-replaced elements</h3> 7.3801 7.3802 <p>The ‘<a href="#width"><code class=property>width</code></a>’ and 7.3803 @@ -3596,11 +3855,11 @@ 7.3804 percentages and replacing ‘<code class=css>auto</code>’ by 0. 7.3805 7.3806 <p class=note>Note that this section applies equally when the <a 7.3807 - href="#containing-block"><em>containing block</em></a> is <a 7.3808 + href="#containing-block0"><em>containing block</em></a> is <a 7.3809 href="#horizontal"><em>horizontal</em></a> as when it is <a 7.3810 href="#vertical."><em>vertical.</em></a> 7.3811 7.3812 - <h3 id=inline-replaced><span class=secno>14.2. </span>Inline or floating, 7.3813 + <h3 id=inline-replaced><span class=secno>15.2. </span>Inline or floating, 7.3814 replaced elements</h3> 7.3815 7.3816 <p>The used values of ‘<a href="#margin-left"><code 7.3817 @@ -3703,11 +3962,11 @@ 7.3818 intrinsic width. 7.3819 7.3820 <p class=note>Note that this section applies equally when the <a 7.3821 - href="#containing-block"><em>containing block</em></a> is <a 7.3822 + href="#containing-block0"><em>containing block</em></a> is <a 7.3823 href="#horizontal"><em>horizontal</em></a> as when it is <a 7.3824 href="#vertical."><em>vertical.</em></a> 7.3825 7.3826 - <h3 id=blockwidth><span class=secno>14.3. </span>Block-level, non-replaced 7.3827 + <h3 id=blockwidth><span class=secno>15.3. </span>Block-level, non-replaced 7.3828 elements in normal flow when ‘<a href="#overflow1"><code 7.3829 class=property>overflow</code></a>’ computes to ‘<code 7.3830 class=css>visible</code>’</h3> 7.3831 @@ -3717,41 +3976,41 @@ 7.3832 class=property>overflow</code></a>’ does not compute to ‘<code 7.3833 class=css>visible</code>’ but has been propagated to the viewport. 7.3834 7.3835 - <p>The used values of the <a href="#head">head</a> padding, <a 7.3836 - href="#tail">tail</a> padding, <a href="#head">head</a> margin and <a 7.3837 - href="#tail">tail</a> margin are calculated from their computed values, 7.3838 - with any ‘<code class=css>auto</code>’ values replaced by 0. 7.3839 - 7.3840 - <p>If the computed value of the <a href="#block-flow">block flow 7.3841 - dimension</a> is not ‘<code class=css>auto</code>’, then the used 7.3842 - value is calculated by evaluating the computed value. Otherwise, the <a 7.3843 - href="#block-flow">block flow dimension</a> is the distance between two 7.3844 - edges that are defined as follows: 7.3845 + <p>The used values of the <a href="#head">head</a> padding, 7.3846 + <span>tail</span> padding, <a href="#head">head</a> margin and 7.3847 + <span>tail</span> margin are calculated from their computed values, with 7.3848 + any ‘<code class=css>auto</code>’ values replaced by 0. 7.3849 + 7.3850 + <p>If the computed value of the <span>block flow dimension</span> is not 7.3851 + ‘<code class=css>auto</code>’, then the used value is calculated by 7.3852 + evaluating the computed value. Otherwise, the <span>block flow 7.3853 + dimension</span> is the distance between two edges that are defined as 7.3854 + follows: 7.3855 7.3856 <ul> 7.3857 <li>For the first edge: If the element is the <a 7.3858 href="#root-element.">root element</a> or if it has a non-zero <a 7.3859 href="#head">head</a> padding or a non-zero <a href="#head">head</a> 7.3860 - border, then the first edge is the <a href="#headside">headside</a> <a 7.3861 + border, then the first edge is the <span>headside</span> <a 7.3862 href="#margin-edge."><em>margin edge</em></a> of the first <a 7.3863 href="#line-box.">line box</a> or <span>block-level box</span> (whichever 7.3864 - comes first); otherwise the first edge is the <a 7.3865 - href="#headside">headside</a> <a href="#border-edge."><em>border 7.3866 - edge</em></a> of the first <a href="#line-box.">line box</a> or 7.3867 - <span>block-level box</span> (whichever comes first) that doesn't have 7.3868 - its margins <a href="#collapsed-through">collapsed through.</a> 7.3869 + comes first); otherwise the first edge is the <span>headside</span> <a 7.3870 + href="#border-edge."><em>border edge</em></a> of the first <a 7.3871 + href="#line-box.">line box</a> or <span>block-level box</span> (whichever 7.3872 + comes first) that doesn't have its margins <a 7.3873 + href="#collapsed-through">collapsed through.</a> 7.3874 7.3875 <li>For the second edge: If the element is the <a 7.3876 - href="#root-element.">root element</a> or if it has a non-zero <a 7.3877 - href="#tail">tail</a> padding or a non-zero <a href="#tail">tail</a> 7.3878 - border, then the second edge is the <a href="#tailside">tailside</a> <a 7.3879 + href="#root-element.">root element</a> or if it has a non-zero 7.3880 + <span>tail</span> padding or a non-zero <span>tail</span> border, then 7.3881 + the second edge is the <span>tailside</span> <a 7.3882 href="#margin-edge."><em>margin edge</em></a> of the last <a 7.3883 href="#line-box.">line box</a> or <span>block-level box</span> (whichever 7.3884 - comes last); otherwise the second edge is the <a 7.3885 - href="#tailside">tailside</a> <a href="#border-edge."><em>border 7.3886 - edge</em></a> of the last <a href="#line-box.">line box</a> or 7.3887 - <span>block-level box</span> (whichever comes last) that doesn't have its 7.3888 - margins <a href="#collapsed-through">collapsed through.</a> 7.3889 + comes last); otherwise the second edge is the <span>tailside</span> <a 7.3890 + href="#border-edge."><em>border edge</em></a> of the last <a 7.3891 + href="#line-box.">line box</a> or <span>block-level box</span> (whichever 7.3892 + comes last) that doesn't have its margins <a 7.3893 + href="#collapsed-through">collapsed through.</a> 7.3894 </ul> 7.3895 7.3896 <p class=note>The above reflects the fact that the margins of the element 7.3897 @@ -3791,8 +4050,8 @@ 7.3898 </div> 7.3899 </div> 7.3900 7.3901 - <p>With respect to the <a href="#inline">inline dimension,</a> the 7.3902 - following constraint must hold among the used values of the given 7.3903 + <p>With respect to the <a href="#inline-dimension">inline dimension,</a> 7.3904 + the following constraint must hold among the used values of the given 7.3905 properties. 7.3906 7.3907 <blockquote id=width-constraints> 7.3908 @@ -3831,7 +4090,7 @@ 7.3909 constraint. 7.3910 </ol> 7.3911 7.3912 - <li>If the <a href="#inline">inline dimension</a> is ‘<code 7.3913 + <li>If the <a href="#inline-dimension">inline dimension</a> is ‘<code 7.3914 class=css>auto</code>’, then set the used value of all other properties 7.3915 in the constraint that are ‘<code class=css>auto</code>’ to 0 and set 7.3916 the used value of the inline dimension so that the constraint is 7.3917 @@ -3950,7 +4209,7 @@ 7.3918 <pre>p {margin-right: 2em; margin-left: 4em; alignment: right}</pre> 7.3919 </div> 7.3920 7.3921 - <h3 id=other-block-level-non-replaced-elements-><span class=secno>14.4. 7.3922 + <h3 id=other-block-level-non-replaced-elements-><span class=secno>15.4. 7.3923 </span>Other block-level, non-replaced elements in normal flow</h3> 7.3924 7.3925 <p>This section applies to <a href="#block-level">block-level,</a> 7.3926 @@ -3960,25 +4219,26 @@ 7.3927 class=property>overflow</code></a>’ property's value has been propagated 7.3928 to the viewport). 7.3929 7.3930 - <p>The used values of <a href="#head">head</a> padding, <a 7.3931 - href="#tail">tail</a> padding, <a href="#head">head</a> margin and <a 7.3932 - href="#tail">tail</a> margin are calculated from the computed values, with 7.3933 - any ‘<code class=css>auto</code>’ values replaced by 0. 7.3934 - 7.3935 - <p>If the <a href="#block-flow">block flow dimension</a> is ‘<code 7.3936 + <p>The used values of <a href="#head">head</a> padding, <span>tail</span> 7.3937 + padding, <a href="#head">head</a> margin and <span>tail</span> margin are 7.3938 + calculated from the computed values, with any ‘<code 7.3939 + class=css>auto</code>’ values replaced by 0. 7.3940 + 7.3941 + <p>If the <span>block flow dimension</span> is ‘<code 7.3942 class=css>auto</code>’, the used value is defined by <a 7.3943 href="#root-height">“‘<code class=css>Auto</code>’ heights for flow 7.3944 roots.”</a> Otherwise, the used value is evaluated from the computed 7.3945 value. 7.3946 7.3947 <p>Apply the rules for <a href="#start">start</a> margin, <a 7.3948 - href="#start">start</a> padding, <a href="#inline">inline dimension,</a> 7.3949 - <a href="#end">end</a> padding and <a href="#end">end</a> margin as given 7.3950 - above in <a href="#blockwidth"> “Block-level, non-replaced elements in 7.3951 - normal flow when ‘<code class=property>overflow</code>’ computes to 7.3952 - ‘<code class=css>visible</code>’.”</a> 7.3953 - 7.3954 - <h3 id=inline-block-or-floating-non-replaced-el><span class=secno>14.5. 7.3955 + href="#start">start</a> padding, <a href="#inline-dimension">inline 7.3956 + dimension,</a> <a href="#end">end</a> padding and <a href="#end">end</a> 7.3957 + margin as given above in <a href="#blockwidth"> “Block-level, 7.3958 + non-replaced elements in normal flow when ‘<code 7.3959 + class=property>overflow</code>’ computes to ‘<code 7.3960 + class=css>visible</code>’.”</a> 7.3961 + 7.3962 + <h3 id=inline-block-or-floating-non-replaced-el><span class=secno>15.5. 7.3963 </span>‘<code class=property>Inline-block</code>’ or floating, 7.3964 non-replaced elements</h3> 7.3965 7.3966 @@ -4006,12 +4266,11 @@ 7.3967 this element), then the used value is also defined by <a 7.3968 href="#root-height">“‘<code class=css>Auto</code>’ heights for flow 7.3969 roots.”</a> Otherwise it is calculated by evaluating the computed value. 7.3970 - 7.3971 7.3972 <p>For inline-block boxes, the margin box is used when calculating the 7.3973 height of the line box. <span class=issue>Does this belong here?</span> 7.3974 7.3975 - <h3 id=abs-non-replaced-width><span class=secno>14.6. </span>Absolutely 7.3976 + <h3 id=abs-non-replaced-width><span class=secno>15.6. </span>Absolutely 7.3977 positioned, non-replaced elements</h3> 7.3978 7.3979 <p>For the purposes of this section and the next, the term <dfn 7.3980 @@ -4270,12 +4529,11 @@ 7.3981 class=property>bottom</code>’. 7.3982 </ol> 7.3983 7.3984 - <h3 id=abs-replaced><span class=secno>14.7. </span>Absolutely positioned, 7.3985 + <h3 id=abs-replaced><span class=secno>15.7. </span>Absolutely positioned, 7.3986 replaced elements</h3> 7.3987 7.3988 <p>This situation is similar to the previous one, except that the element 7.3989 may have an intrinsic size or ratio. The sequence of substitutions is now: 7.3990 - 7.3991 7.3992 <ol> 7.3993 <li>The used value of ‘<a href="#width"><code 7.3994 @@ -4380,7 +4638,7 @@ 7.3995 <p>If the second equation is over-constrained, ignore the value for 7.3996 ‘<code class=property>bottom</code>’ and solve for that value. 7.3997 7.3998 - <h3 id=block-level-replaced-elements-in-normal-><span class=secno>14.8. 7.3999 + <h3 id=block-level-replaced-elements-in-normal-><span class=secno>15.8. 7.4000 </span>Block-level, replaced elements in normal flow</h3> 7.4001 7.4002 <p>Apply the rules for <a href="#inline-replaced">inline replaced 7.4003 @@ -4394,7 +4652,7 @@ 7.4004 class=property>border</code>’ and ‘<a href="#padding"><code 7.4005 class=property>padding</code></a>’ as if they were the computed values. 7.4006 7.4007 - <h3 id=floating-non-replaced-elements><span class=secno>14.9. 7.4008 + <h3 id=floating-non-replaced-elements><span class=secno>15.9. 7.4009 </span>Floating, non-replaced elements</h3> 7.4010 7.4011 <p>The used values of the margins are derived from the computed values, 7.4012 @@ -4417,7 +4675,7 @@ 7.4013 computed value were ‘<code class=css>auto</code>’. Otherwise the 7.4014 computed value is evaluated to give the used value. 7.4015 7.4016 - <h3 id=root-height><span class=secno>14.10. </span>Auto heights for flow 7.4017 + <h3 id=root-height><span class=secno>15.10. </span>Auto heights for flow 7.4018 roots</h3> 7.4019 7.4020 <p>In certain cases (see the preceding sections), the height of an element 7.4021 @@ -4425,7 +4683,6 @@ 7.4022 7.4023 <p>If it only has inline-level children, the height is the distance between 7.4024 the top of the topmost line box and the bottom of the bottommost line box. 7.4025 - 7.4026 7.4027 <p>If it has <a href="#block-level">block-level</a> children, the height is 7.4028 the distance between the top margin-edge of the topmost block-level child 7.4029 @@ -4441,50 +4698,60 @@ 7.4030 descendants in the normal flow are taken into account, e.g., floats inside 7.4031 absolutely positioned descendants or other floats are not. 7.4032 7.4033 - <h2 id=the-float-property><span class=secno>15. </span>The float property</h2> 7.4034 + <h2 id=the-float-property><span class=secno>16. </span>The float property</h2> 7.4035 7.4036 <table class=propdef> 7.4037 <tbody> 7.4038 <tr> 7.4039 - <td>Name: 7.4040 + <th>Name: 7.4041 7.4042 <td><dfn id=float>float</dfn> 7.4043 7.4044 <tr> 7.4045 - <td>Value: 7.4046 + <th>Value: 7.4047 7.4048 <td>[ left | right | top | bottom | start | end | none | 7.4049 <var><page-floats></var> ] && contour? 7.4050 7.4051 <tr> 7.4052 - <td>Initial: 7.4053 + <th>Initial: 7.4054 7.4055 <td>none 7.4056 7.4057 <tr> 7.4058 - <td>Applies to: 7.4059 + <th>Applies to: 7.4060 7.4061 <td>all, but see text 7.4062 7.4063 <tr> 7.4064 - <td>Inherited: 7.4065 + <th>Inherited: 7.4066 7.4067 <td>no 7.4068 7.4069 <tr> 7.4070 - <td>Percentages: 7.4071 + <th>Animatable: 7.4072 + 7.4073 + <td>no 7.4074 + 7.4075 + <tr> 7.4076 + <th>Percentages: 7.4077 7.4078 <td>N/A 7.4079 7.4080 <tr> 7.4081 - <td>Media: 7.4082 + <th>Media: 7.4083 7.4084 <td>visual 7.4085 7.4086 <tr> 7.4087 - <td>Computed value: 7.4088 + <th>Computed value: 7.4089 7.4090 <td>as specified 7.4091 + 7.4092 + <tr> 7.4093 + <th>Canonical order: 7.4094 + 7.4095 + <td>order of grammar 7.4096 </table> 7.4097 7.4098 <p class=issue>Adding ‘<a href="#start"><code 7.4099 @@ -4714,7 +4981,7 @@ 7.4100 API may not provide access to the contour of the object. Should there be a 7.4101 sentence about UAs not having to compute a contour in such a case? 7.4102 7.4103 - <h3 id=introduction-to-floats><span class=secno>15.1. </span>Introduction 7.4104 + <h3 id=introduction-to-floats><span class=secno>16.1. </span>Introduction 7.4105 to floats</h3> 7.4106 7.4107 <p>(This section is not normative.) 7.4108 @@ -4749,7 +5016,6 @@ 7.4109 aligned with the top of the line box, and then the inline boxes already on 7.4110 the line are moved accordingly to the right of the float (the right being 7.4111 the other side of the left float) and vice versa for rtl and right floats. 7.4112 - 7.4113 7.4114 <div class=example> 7.4115 <p>In the following document fragment, the containing block is too narrow 7.4116 @@ -4788,7 +5054,6 @@ 7.4117 <div class=example> 7.4118 <p>The following rule floats all IMG boxes with <code>class="icon"</code> 7.4119 to the left (and sets the left margin to ‘<code class=css>0</code>’): 7.4120 - 7.4121 7.4122 <pre> 7.4123 img.icon { 7.4124 @@ -4903,22 +5168,21 @@ 7.4125 </div> 7.4126 </div> 7.4127 7.4128 - <h3 id=rules-for-positioning-floats><span class=secno>15.2. </span>Rules 7.4129 + <h3 id=rules-for-positioning-floats><span class=secno>16.2. </span>Rules 7.4130 for positioning floats</h3> 7.4131 7.4132 <p>Here are the precise rules that govern the positions of floats with a <a 7.4133 href="#horizontal"><em>horizontal</em></a> containing block. References to 7.4134 other elements in these rules refer only to other elements in the same <a 7.4135 - href="#flow"><em>flow</em></a> as the float's parent. 7.4136 + href="#flow0"><em>flow</em></a> as the float's parent. 7.4137 7.4138 <ol> 7.4139 <li>The left <a href="#margin-edge.">margin edge</a> of a left-floating 7.4140 box may not be to the left of the left edge of its <a 7.4141 - href="#containing-block">containing block</a>. An analogous rule holds 7.4142 + href="#containing-block0">containing block</a>. An analogous rule holds 7.4143 for right-floating elements. 7.4144 <!-- The A margin edge of box that floats to the A may not be to A of 7.4145 the A edge of its containing block --> 7.4146 - 7.4147 7.4148 <li>If the current box is left-floating, and there are any left-floating 7.4149 boxes generated by elements earlier in the source document, then for each 7.4150 @@ -4934,7 +5198,7 @@ 7.4151 rules hold for right-floating elements. 7.4152 7.4153 <li>A floating box's top <a href="#margin-edge.">margin edge</a> may not 7.4154 - be higher than the top of its <a href="#containing-block">containing 7.4155 + be higher than the top of its <a href="#containing-block0">containing 7.4156 block</a>. When the float occurs between two collapsing margins, the 7.4157 float is positioned as if it had an otherwise empty <a 7.4158 href="#anonymous-box" title="anonymous box">anonymous block parent</a> 7.4159 @@ -4988,7 +5252,7 @@ 7.4160 <ol> 7.4161 <li>The top <a href="#margin-edge.">margin edge</a> of a top-floating box 7.4162 may not be above the top edge of its <a 7.4163 - href="#containing-block">containing block</a>. An analogous rule holds 7.4164 + href="#containing-block0">containing block</a>. An analogous rule holds 7.4165 for bottom-floating elements. 7.4166 7.4167 <li>If the current box is top-floating, and there are any top-floating 7.4168 @@ -5006,7 +5270,7 @@ 7.4169 7.4170 <li>A floating box's right <a href="#margin-edge.">margin edge</a> may not 7.4171 be to the right of the right edge of its <a 7.4172 - href="#containing-block">containing block</a>. When the float occurs 7.4173 + href="#containing-block0">containing block</a>. When the float occurs 7.4174 between two collapsing margins, the float is positioned as if it had an 7.4175 otherwise empty <a href="#anonymous-box" title="anonymous box">anonymous 7.4176 block parent</a> taking part in the flow. The position of such a parent 7.4177 @@ -5046,7 +5310,6 @@ 7.4178 <p class=note>Note that a box with a value of ‘<a href="#float"><code 7.4179 class=property>float</code></a>’ other than ‘<code 7.4180 class=css>none</code>’ is a <a href="#flow-root"><em>flow root.</em></a> 7.4181 - 7.4182 7.4183 <p>The border box of a table, a <a href="#block-level">block-level</a> 7.4184 replaced element, or an element in the normal flow that is a <a 7.4185 @@ -5060,56 +5323,66 @@ 7.4186 (“Sufficient space” means that the opposite margin does not become 7.4187 negative.)</span> 7.4188 7.4189 - <h2 id=the-clear-property><span class=secno>16. </span>The clear property</h2> 7.4190 + <h2 id=the-clear-property><span class=secno>17. </span>The clear property</h2> 7.4191 7.4192 <table class=propdef> 7.4193 <tbody> 7.4194 <tr> 7.4195 - <td>Name: 7.4196 + <th>Name: 7.4197 7.4198 <td><dfn id=clear>clear</dfn> 7.4199 7.4200 <tr> 7.4201 - <td>Value: 7.4202 + <th>Value: 7.4203 7.4204 <td>none | left | right | both 7.4205 7.4206 <tr> 7.4207 - <td>Initial: 7.4208 + <th>Initial: 7.4209 7.4210 <td>none 7.4211 7.4212 <tr> 7.4213 - <td>Applies to: 7.4214 + <th>Applies to: 7.4215 7.4216 <td><a href="#block-level">block-level</a> elements 7.4217 7.4218 <tr> 7.4219 - <td>Inherited: 7.4220 + <th>Inherited: 7.4221 7.4222 <td>no 7.4223 7.4224 <tr> 7.4225 - <td>Percentages: 7.4226 + <th>Animatable: 7.4227 + 7.4228 + <td>no 7.4229 + 7.4230 + <tr> 7.4231 + <th>Percentages: 7.4232 7.4233 <td>N/A 7.4234 7.4235 <tr> 7.4236 - <td>Media: 7.4237 + <th>Media: 7.4238 7.4239 <td>visual 7.4240 7.4241 <tr> 7.4242 - <td>Computed value: 7.4243 + <th>Computed value: 7.4244 7.4245 <td>as specified 7.4246 + 7.4247 + <tr> 7.4248 + <th>Canonical order: 7.4249 + 7.4250 + <td>N/A 7.4251 </table> 7.4252 7.4253 <p class=issue>[To do: copy from CSS2 <a href="#CSS21" 7.4254 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and generalize to vertical 7.4255 text, define <dfn id=clearance.>clearance.</dfn>] 7.4256 7.4257 - <h2 id=the-clear-after-property><span class=secno>17. </span>The 7.4258 + <h2 id=the-clear-after-property><span class=secno>18. </span>The 7.4259 clear-after property</h2> 7.4260 7.4261 <div class=issue id=contain-floats> 7.4262 @@ -5141,7 +5414,7 @@ 7.4263 href="#height"><code class=property>height</code></a>’ is due to IanH 7.4264 2004-02-29] 7.4265 7.4266 - <li>A new value ‘<code class=css>align-box</code>’ on ‘<a 7.4267 + <li>A new value ‘<code class=css>container</code>’ on ‘<a 7.4268 href="#display0"><code class=property>display</code></a>’. 7.4269 </ol> 7.4270 </div> 7.4271 @@ -5174,6 +5447,11 @@ 7.4272 7.4273 <td>no 7.4274 7.4275 + <tr> 7.4276 + <td>Animatable: 7.4277 + 7.4278 + <td>no 7.4279 + 7.4280 <tr valign=baseline> 7.4281 <td>Percentages: 7.4282 7.4283 @@ -5188,18 +5466,23 @@ 7.4284 <td>Computed value: 7.4285 7.4286 <td>specified value 7.4287 + 7.4288 + <tr> 7.4289 + <th>Canonical order: 7.4290 + 7.4291 + <td>N/A 7.4292 </table> 7.4293 7.4294 <p>It is sometimes useful to make sure that the bottom border of a 7.4295 block-level element goes below floating elements. The ‘<a 7.4296 href="#clear-after"><code class=property>clear-after</code></a>’ 7.4297 property increases the element's padding as needed. More precisely: If 7.4298 - there are any floats in the current <a href="#flow"><em>flow</em></a> up 7.4299 + there are any floats in the current <a href="#flow0"><em>flow</em></a> up 7.4300 to and including the end of this element that float to the indicated 7.4301 - side(s), then find the one whose <a href="#tailside"><em>tailside</em></a> 7.4302 - <a href="#margin-edge."><em>margin edge</em></a> is furthest away from the 7.4303 - <a href="#head"><em>head</em></a> <a href="#content-edge."><em>content 7.4304 - edge</em></a> of the <a href="#containing-block"><em>containing 7.4305 + side(s), then find the one whose <em>tailside</em> <a 7.4306 + href="#margin-edge."><em>margin edge</em></a> is furthest away from the <a 7.4307 + href="#head"><em>head</em></a> <a href="#content-edge."><em>content 7.4308 + edge</em></a> of the <a href="#containing-block0"><em>containing 7.4309 block.</em></a> Then increase the tailside padding of the current element 7.4310 by the minimum amount needed so that the padding edge is at least as far 7.4311 away from the head content edge of the containing block as the tailside 7.4312 @@ -5316,6 +5599,11 @@ 7.4313 7.4314 <td>no 7.4315 7.4316 + <tr> 7.4317 + <td>Animatable: 7.4318 + 7.4319 + <td>no 7.4320 + 7.4321 <tr valign=baseline> 7.4322 <td>Percentages: 7.4323 7.4324 @@ -5330,6 +5618,11 @@ 7.4325 <td>Computed value: 7.4326 7.4327 <td>specified value 7.4328 + 7.4329 + <tr> 7.4330 + <th>Canonical order: 7.4331 + 7.4332 + <td>order of keywords as in grammar 7.4333 </table> 7.4334 7.4335 <p>The following rule would ensure that a SECTION starts below all 7.4336 @@ -5346,7 +5639,7 @@ 7.4337 looks better to indent that line like the other lines of the paragraph. 7.4338 The default is ‘<code class=css>1</code>’, i.e., no protection. 7.4339 7.4340 - <h2 id=overflow0><span class=secno>18. </span>Overflow</h2> 7.4341 + <h2 id=overflow0><span class=secno>19. </span>Overflow</h2> 7.4342 <!-- As per 2009-08-12 telcon, define more precisely what causes 7.4343 overflow and what doesn't. E.g., exclude shadows and anti-aliasing 7.4344 from causing overflow, but relatively and absolutely positioned 7.4345 @@ -5358,7 +5651,7 @@ 7.4346 scroll it (“marquee,” see <a href="#CSS3-MARQUEE" 7.4347 rel=biblioentry>[CSS3-MARQUEE]<!--{{CSS3-MARQUEE}}--></a>). 7.4348 7.4349 - <h3 id=overflow><span class=secno>18.1. </span>The overflow, overflow-x and 7.4350 + <h3 id=overflow><span class=secno>19.1. </span>The overflow, overflow-x and 7.4351 overflow-y properties</h3> 7.4352 7.4353 <p class=issue>In the preceding sections, several things (such as flow 7.4354 @@ -5369,94 +5662,114 @@ 7.4355 <table class=propdef> 7.4356 <tbody> 7.4357 <tr> 7.4358 - <td>Name: 7.4359 + <th>Name: 7.4360 7.4361 <td><dfn id=overflow-x>overflow-x</dfn>, <dfn 7.4362 id=overflow-y>overflow-y</dfn>, 7.4363 7.4364 <tr> 7.4365 - <td>Value: 7.4366 + <th>Value: 7.4367 7.4368 <td>visible | hidden | scroll | auto | no-display | no-content 7.4369 7.4370 <tr> 7.4371 - <td>Initial: 7.4372 + <th>Initial: 7.4373 7.4374 <td>visible 7.4375 7.4376 <tr> 7.4377 - <td>Applies to: 7.4378 + <th>Applies to: 7.4379 7.4380 <td>non-replaced <a href="#block-level"><em>block-level</em></a> 7.4381 elements and non-replaced ‘<code class=css>inline-block</code>’ 7.4382 elements 7.4383 7.4384 <tr> 7.4385 - <td>Inherited: 7.4386 + <th>Inherited: 7.4387 7.4388 <td>no 7.4389 7.4390 <tr> 7.4391 - <td>Percentages: 7.4392 + <th>Animatable: 7.4393 + 7.4394 + <td>no 7.4395 + 7.4396 + <tr> 7.4397 + <th>Percentages: 7.4398 7.4399 <td>N/A 7.4400 7.4401 <tr> 7.4402 - <td>Media: 7.4403 + <th>Media: 7.4404 7.4405 <td>visual 7.4406 7.4407 <tr> 7.4408 - <td>Computed value: 7.4409 + <th>Computed value: 7.4410 7.4411 <td>as specified, except ‘<code class=property>visible</code>’, see 7.4412 text 7.4413 + 7.4414 + <tr> 7.4415 + <th>Canonical order: 7.4416 + 7.4417 + <td>N/A 7.4418 </table> 7.4419 7.4420 <table class=propdef> 7.4421 <tbody> 7.4422 <tr> 7.4423 - <td>Name: 7.4424 + <th>Name: 7.4425 7.4426 <td><dfn id=overflow1>overflow</dfn> 7.4427 7.4428 <tr> 7.4429 - <td>Value: 7.4430 + <th>Value: 7.4431 7.4432 <td>[ visible | hidden | scroll | auto | no-display | no-content ]{1,2} 7.4433 7.4434 <tr> 7.4435 - <td>Initial: 7.4436 + <th>Initial: 7.4437 7.4438 <td>see individual properties 7.4439 7.4440 <tr> 7.4441 - <td>Applies to: 7.4442 + <th>Applies to: 7.4443 7.4444 <td>non-replaced <a href="#block-level"><em>block-level</em></a> 7.4445 elements and non-replaced ‘<code class=css>inline-block</code>’ 7.4446 elements 7.4447 7.4448 <tr> 7.4449 - <td>Inherited: 7.4450 + <th>Inherited: 7.4451 7.4452 <td>no 7.4453 7.4454 <tr> 7.4455 - <td>Percentages: 7.4456 + <th>Animatable: 7.4457 + 7.4458 + <td>no 7.4459 + 7.4460 + <tr> 7.4461 + <th>Percentages: 7.4462 7.4463 <td>N/A 7.4464 7.4465 <tr> 7.4466 - <td>Media: 7.4467 + <th>Media: 7.4468 7.4469 <td>visual 7.4470 7.4471 <tr> 7.4472 - <td>Computed value: 7.4473 + <th>Computed value: 7.4474 7.4475 <td>as specified, except ‘<code class=property>visible</code>’, see 7.4476 text 7.4477 + 7.4478 + <tr> 7.4479 + <th>Canonical order: 7.4480 + 7.4481 + <td>N/A 7.4482 </table> 7.4483 7.4484 <p>These properties specify whether content is clipped when it overflows 7.4485 @@ -5723,50 +6036,60 @@ 7.4486 rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>) can be used to give a 7.4487 visual indication where text has been clipped. 7.4488 7.4489 - <h2 id=the-visibility-property><span class=secno>19. </span>The visibility 7.4490 + <h2 id=the-visibility-property><span class=secno>20. </span>The visibility 7.4491 property</h2> 7.4492 7.4493 <table class=propdef> 7.4494 <tbody> 7.4495 <tr> 7.4496 - <td>Name: 7.4497 + <th>Name: 7.4498 7.4499 <td><dfn id=visibility>visibility</dfn> 7.4500 7.4501 <tr> 7.4502 - <td>Value: 7.4503 + <th>Value: 7.4504 7.4505 <td>visible | hidden | collapse 7.4506 7.4507 <tr> 7.4508 - <td>Initial: 7.4509 + <th>Initial: 7.4510 7.4511 <td> visible 7.4512 7.4513 <tr> 7.4514 - <td>Applies to: 7.4515 + <th>Applies to: 7.4516 7.4517 <td>all elements 7.4518 7.4519 <tr> 7.4520 - <td>Inherited: 7.4521 + <th>Inherited: 7.4522 7.4523 <td>yes 7.4524 7.4525 <tr> 7.4526 - <td>Percentages: 7.4527 + <th>Animatable: 7.4528 + 7.4529 + <td>no 7.4530 + 7.4531 + <tr> 7.4532 + <th>Percentages: 7.4533 7.4534 <td>N/A 7.4535 7.4536 <tr> 7.4537 - <td>Media: 7.4538 + <th>Media: 7.4539 7.4540 <td>visual 7.4541 7.4542 <tr> 7.4543 - <td>Computed value: 7.4544 + <th>Computed value: 7.4545 7.4546 <td>as specified 7.4547 + 7.4548 + <tr> 7.4549 + <th>Canonical order: 7.4550 + 7.4551 + <td>N/A 7.4552 </table> 7.4553 7.4554 <p>This property specifies whether the boxes generated by an element are 7.4555 @@ -5795,50 +6118,60 @@ 7.4556 meaning as ‘<code class=css>hidden</code>’. 7.4557 </dl> 7.4558 7.4559 - <h2 id=the-alignment-property><span class=secno>20. </span>The alignment 7.4560 + <h2 id=the-alignment-property><span class=secno>21. </span>The alignment 7.4561 property</h2> 7.4562 7.4563 <table class=propdef> 7.4564 <tbody> 7.4565 <tr> 7.4566 - <td>Name: 7.4567 + <th>Name: 7.4568 7.4569 <td><dfn id=alignment>alignment</dfn> 7.4570 7.4571 <tr> 7.4572 - <td>Value: 7.4573 + <th>Value: 7.4574 7.4575 <td>top | right | bottom | left | center 7.4576 7.4577 <tr> 7.4578 - <td>Initial: 7.4579 + <th>Initial: 7.4580 7.4581 <td>see text 7.4582 7.4583 <tr> 7.4584 - <td>Applies to: 7.4585 + <th>Applies to: 7.4586 7.4587 <td><a href="#block-level">block-level</a> elements 7.4588 7.4589 <tr> 7.4590 - <td>Inherited: 7.4591 + <th>Inherited: 7.4592 7.4593 <td>no 7.4594 7.4595 <tr> 7.4596 - <td>Percentages: 7.4597 + <th>Animatable: 7.4598 + 7.4599 + <td>no 7.4600 + 7.4601 + <tr> 7.4602 + <th>Percentages: 7.4603 7.4604 <td>N/A 7.4605 7.4606 <tr> 7.4607 - <td>Media: 7.4608 + <th>Media: 7.4609 7.4610 <td>visual 7.4611 7.4612 <tr> 7.4613 - <td>Computed value: 7.4614 + <th>Computed value: 7.4615 7.4616 <td>specified value 7.4617 + 7.4618 + <tr> 7.4619 + <th>Canonical order: 7.4620 + 7.4621 + <td>N/A 7.4622 </table> 7.4623 7.4624 <p class=issue>Another way to allow real centering of boxes would be to 7.4625 @@ -5938,7 +6271,7 @@ 7.4626 <p class=caption>A possible rendering of the example. 7.4627 </div> 7.4628 7.4629 - <h2 id=the-child-align-property><span class=secno>21. </span>The 7.4630 + <h2 id=the-child-align-property><span class=secno>22. </span>The 7.4631 child-align property</h2> 7.4632 7.4633 <p class=issue>Other names: block-align (but note that it influences the 7.4634 @@ -5959,44 +6292,54 @@ 7.4635 <table class=propdef> 7.4636 <tbody> 7.4637 <tr> 7.4638 - <td>Name: 7.4639 + <th>Name: 7.4640 7.4641 <td><dfn id=child-align>child-align</dfn> 7.4642 7.4643 <tr> 7.4644 - <td>Value: 7.4645 + <th>Value: 7.4646 7.4647 <td>top | middle | bottom | left | right | auto 7.4648 7.4649 <tr> 7.4650 - <td>Initial: 7.4651 + <th>Initial: 7.4652 7.4653 <td>auto 7.4654 7.4655 <tr> 7.4656 - <td>Applies to: 7.4657 + <th>Applies to: 7.4658 7.4659 <td>block-level elements, table cells and inline blocks 7.4660 7.4661 <tr> 7.4662 - <td>Inherited: 7.4663 + <th>Inherited: 7.4664 7.4665 <td>yes 7.4666 7.4667 <tr> 7.4668 - <td>Percentages: 7.4669 + <th>Animatable: 7.4670 + 7.4671 + <td>no 7.4672 + 7.4673 + <tr> 7.4674 + <th>Percentages: 7.4675 7.4676 <td>N/A 7.4677 7.4678 <tr> 7.4679 - <td>Media: 7.4680 + <th>Media: 7.4681 7.4682 <td>visual 7.4683 7.4684 <tr> 7.4685 - <td>Computed value: 7.4686 + <th>Computed value: 7.4687 7.4688 <td>the initial value or as specified 7.4689 + 7.4690 + <tr> 7.4691 + <th>Canonical order: 7.4692 + 7.4693 + <td>N/A 7.4694 </table> 7.4695 7.4696 <p>This property describes how block-level content of a block is aligned 7.4697 @@ -6135,12 +6478,12 @@ 7.4698 are calculated first, then the content is vertically aligned according to 7.4699 the property within each portion of the parent block. 7.4700 7.4701 - <h2 id=stacking-contexts><span class=secno>22. </span>Stacking contexts</h2> 7.4702 + <h2 id=stacking-contexts><span class=secno>23. </span>Stacking contexts</h2> 7.4703 7.4704 <p>This section defines the painting order in more detail than described in 7.4705 the rest of the specification. 7.4706 7.4707 - <h3 id=definitions><span class=secno>22.1. </span>Definitions</h3> 7.4708 + <h3 id=definitions><span class=secno>23.1. </span>Definitions</h3> 7.4709 7.4710 <dl> 7.4711 <dt>Tree Order 7.4712 @@ -6161,7 +6504,7 @@ 7.4713 content of the box, and so forth. 7.4714 </dl> 7.4715 7.4716 - <h3 id=painting-order><span class=secno>22.2. </span>Painting order</h3> 7.4717 + <h3 id=painting-order><span class=secno>23.2. </span>Painting order</h3> 7.4718 7.4719 <p>The bottom of the stack is the furthest from the user, the top of the 7.4720 stack is the nearest to the user: 7.4721 @@ -6171,7 +6514,6 @@ 7.4722 src=stack.png> 7.4723 7.4724 <p class=caption>Schematic diagram of a stacking context with four layers. 7.4725 - 7.4726 </div> 7.4727 <!-- 7.4728 <pre> 7.4729 @@ -6337,7 +6679,6 @@ 7.4730 order of the elements applying the underlining (such that the 7.4731 deepest element's underlining, if any, is painted topmost and 7.4732 the root element's underlining, if any, is drawn bottommost). 7.4733 - 7.4734 7.4735 <li>any overlining affecting the text of the element, in tree 7.4736 order of the elements applying the overlining (such that the 7.4737 @@ -6411,7 +6752,7 @@ 7.4738 recommended to draw outlines in this step and not in the steps above.) 7.4739 </ol> 7.4740 7.4741 - <h3 id=notes><span class=secno>22.3. </span>Notes</h3> 7.4742 + <h3 id=notes><span class=secno>23.3. </span>Notes</h3> 7.4743 7.4744 <p>The background of the root element is only painted once, over the whole 7.4745 canvas. 7.4746 @@ -6423,7 +6764,7 @@ 7.4747 class=issue>[Replace 2.1 by 3. Check if inline backgrounds are still 7.4748 undefined, otherwise say result is UA-dependent.]</span> 7.4749 7.4750 - <h3 id=the-ltnumbergt-value><span class=secno>22.4. </span>The 7.4751 + <h3 id=the-ltnumbergt-value><span class=secno>23.4. </span>The 7.4752 <number> value</h3> 7.4753 7.4754 <p>A <a href="#ltnumbergt"><var><number></var></a> value sets the 7.4755 @@ -6455,7 +6796,7 @@ 7.4756 <p class=note>Note that <a href="#ltnumbergt"><var><number></var></a> 7.4757 does not exist in CSS level 2. 7.4758 7.4759 - <h3 id=auto><span class=secno>22.5. </span>The <dfn id=auto0 7.4760 + <h3 id=auto><span class=secno>23.5. </span>The <dfn id=auto0 7.4761 title="auto!!value of 'width' or 'height'">auto</dfn> value</h3> 7.4762 7.4763 <p>We describe the meaning of ‘<code class=css>auto</code>’ on elements 7.4764 @@ -6571,13 +6912,13 @@ 7.4765 the ‘<code class=property>size</code>’ property. 7.4766 7.4767 <li>Otherwise, if the element is a <em>block-level element</em> and its <a 7.4768 - href="#containing-block"><em>containing block</em></a> also has a 7.4769 + href="#containing-block0"><em>containing block</em></a> also has a 7.4770 <em>horizontal flow</em>, <a href="#eq1">equation (1)</a> below 7.4771 determines the width. 7.4772 7.4773 <li>Otherwise, if the element is block-level and the containing block has 7.4774 - a different <a href="#orientation"><em>orientation</em></a>, the computed 7.4775 - value is the <em>intrinsic width</em>. 7.4776 + a different <em>orientation</em>, the computed value is the <em>intrinsic 7.4777 + width</em>. 7.4778 7.4779 <li>Otherwise (i.e., the element is positioned, is a table element or a 7.4780 ruby), see the positioning <a href="#CSS3POS" 7.4781 @@ -6599,7 +6940,7 @@ 7.4782 impose further constraints on the computed value. See <a 7.4783 href="#min-width">below</a>. 7.4784 7.4785 - <h3 id=complex-size><span class=secno>22.6. </span>Algorithm for 7.4786 + <h3 id=complex-size><span class=secno>23.6. </span>Algorithm for 7.4787 shrink-wrapping replaced elements with complex width/height</h3> 7.4788 7.4789 <p><span class=issue>Should this algorithm be defined by CDF/WICD instead? 7.4790 @@ -6644,10 +6985,11 @@ 7.4791 ‘<code class=css>none</code>’. 7.4792 7.4793 <p>The auxiliary width is the width of the <a 7.4794 - href="#containing-block">containing block</a> minus this element's margin, 7.4795 - padding and border, unless the containing block's width depends on this 7.4796 - element's width, in which case the width of the viewport is given. The 7.4797 - suggested height is analogous, but using the containing block's height. 7.4798 + href="#containing-block0">containing block</a> minus this element's 7.4799 + margin, padding and border, unless the containing block's width depends on 7.4800 + this element's width, in which case the width of the viewport is given. 7.4801 + The suggested height is analogous, but using the containing block's 7.4802 + height. 7.4803 7.4804 <p>The returned values are 7.4805 7.4806 @@ -6724,7 +7066,7 @@ 7.4807 UAs will render a 300 by 150px block with scrollbars instead of a block 7.4808 that is as big as neeeded to contain the transclusion. 7.4809 7.4810 - <h2 id=the-float-displace-property><span class=secno>23. </span>The ‘<a 7.4811 + <h2 id=the-float-displace-property><span class=secno>24. </span>The ‘<a 7.4812 href="#float-displace"><code class=property>float-displace</code></a>’ 7.4813 property</h2> 7.4814 7.4815 @@ -6756,6 +7098,11 @@ 7.4816 <td>yes 7.4817 7.4818 <tr> 7.4819 + <td>Animatable: 7.4820 + 7.4821 + <td>no 7.4822 + 7.4823 + <tr> 7.4824 <td><em>Percentages:</em> 7.4825 7.4826 <td>N/A 7.4827 @@ -6771,9 +7118,9 @@ 7.4828 <td>Same as specified value 7.4829 7.4830 <tr> 7.4831 - <td><em>Computed value:</em> 7.4832 - 7.4833 - <td>specified value 7.4834 + <th>Canonical order: 7.4835 + 7.4836 + <td>N/A 7.4837 </table> 7.4838 7.4839 <div class=issue> 7.4840 @@ -6857,7 +7204,7 @@ 7.4841 class=css>line</code>’: 7.4842 7.4843 <p>For all elements <var>E</var>, and all floats <var>F</var> whose parent 7.4844 - is in the same <a href="#flow">flow</a> as <var>E</var>, and all <a 7.4845 + is in the same <a href="#flow0">flow</a> as <var>E</var>, and all <a 7.4846 href="#line-box." title="line box">line boxes</a> <var>L</var> of 7.4847 <var>E</var>: if <var>L</var> contains any inline boxes that are 7.4848 generated by elements that come after <var>F</var> in the document, then 7.4849 @@ -7108,7 +7455,7 @@ 7.4850 will be made narrower as a whole. 7.4851 </div> 7.4852 7.4853 - <h2 id=the-indent-edge-reset-property><span class=secno>24. </span>The 7.4854 + <h2 id=the-indent-edge-reset-property><span class=secno>25. </span>The 7.4855 ‘<a href="#indent-edge-reset"><code 7.4856 class=property>indent-edge-reset</code></a>’ property</h2> 7.4857 7.4858 @@ -7122,8 +7469,7 @@ 7.4859 <tr> 7.4860 <td><em>Value:</em> 7.4861 7.4862 - <td>none | margin-edge | border-edge | padding-edge | content-edge | 7.4863 - inherit 7.4864 + <td>none | margin-edge | border-edge | padding-edge | content-edge 7.4865 7.4866 <tr> 7.4867 <td><em>Initial:</em> 7.4868 @@ -7141,6 +7487,11 @@ 7.4869 <td>no 7.4870 7.4871 <tr> 7.4872 + <td>Animatable: 7.4873 + 7.4874 + <td>yes 7.4875 + 7.4876 + <tr> 7.4877 <td><em>Percentages:</em> 7.4878 7.4879 <td>n/a 7.4880 @@ -7154,6 +7505,11 @@ 7.4881 <td><a href="#computed-value"><em>Computed value:</em></a> 7.4882 7.4883 <td>specified value 7.4884 + 7.4885 + <tr> 7.4886 + <th>Canonical order: 7.4887 + 7.4888 + <td>N/A 7.4889 </table> 7.4890 7.4891 <p>This property determines which edge to use as the <dfn 7.4892 @@ -7186,7 +7542,7 @@ 7.4893 formatting context has a value specified for this property, then the 7.4894 content edge of the root of the formatting context is used. 7.4895 7.4896 - <h2 id=conformance-and-profiles><span class=secno>25. </span>Conformance 7.4897 + <h2 id=conformance-and-profiles><span class=secno>26. </span>Conformance 7.4898 and profiles</h2> 7.4899 7.4900 <p class=issue>Levels 1, 2 and 3… 7.4901 @@ -7195,7 +7551,7 @@ 7.4902 href="#vertical."><em>vertical</em></a> elements or the ‘<a 7.4903 href="#vertical."><code class=css>vertical</code></a>’ media feature. 7.4904 7.4905 - <h2 id=exit><span class=secno>26. </span>CR exit criteria</h2> 7.4906 + <h2 id=exit><span class=secno>27. </span>CR exit criteria</h2> 7.4907 7.4908 <p>As described in the W3C process document, a <a 7.4909 href="http://www.w3.org/2005/10/Process-20051014/tr.html#cfi">Candidate 7.4910 @@ -7257,7 +7613,7 @@ 7.4911 CSS WG) tests have not been produced for those feature(s) by the end of 7.4912 the CR period. 7.4913 7.4914 - <h2 id=acknowledgments><span class=secno>27. </span>Acknowledgments</h2> 7.4915 + <h2 id=acknowledgments><span class=secno>28. </span>Acknowledgments</h2> 7.4916 7.4917 <p class=issue>To do… <!-- 7.4918 <p>[acknowledgments. David Baron, Ian Hickson] 7.4919 @@ -7286,7 +7642,6 @@ 7.4920 7.4921 <p>] 7.4922 --> 7.4923 - 7.4924 7.4925 <h2 class=no-num id=references>References</h2> 7.4926 7.4927 @@ -7303,7 +7658,7 @@ 7.4928 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 7.4929 2011. W3C Recommendation. URL: <a 7.4930 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 7.4931 - </dd> 7.4932 + </dd> 7.4933 <!----> 7.4934 7.4935 <dt id=CSS3-2D-TRANSFORMS>[CSS3-2D-TRANSFORMS] 7.4936 @@ -7313,7 +7668,7 @@ 7.4937 2D Transforms.</cite></a> 15 December 2011. W3C Working Draft. (Work in 7.4938 progress.) URL: <a 7.4939 href="http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/">http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/</a> 7.4940 - </dd> 7.4941 + </dd> 7.4942 <!----> 7.4943 7.4944 <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 7.4945 @@ -7323,17 +7678,27 @@ 7.4946 Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft. 7.4947 (Work in progress.) URL: <a 7.4948 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a> 7.4949 - </dd> 7.4950 + </dd> 7.4951 <!----> 7.4952 7.4953 <dt id=CSS3BG>[CSS3BG] 7.4954 7.4955 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 7.4956 - href="http://www.w3.org/TR/2012/CR-css3-background-20120417/"><cite>CSS 7.4957 - Backgrounds and Borders Module Level 3.</cite></a> 17 April 2012. W3C 7.4958 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 7.4959 + Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 7.4960 Candidate Recommendation. (Work in progress.) URL: <a 7.4961 - href="http://www.w3.org/TR/2012/CR-css3-background-20120417/">http://www.w3.org/TR/2012/CR-css3-background-20120417/</a> 7.4962 - </dd> 7.4963 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 7.4964 + </dd> 7.4965 + <!----> 7.4966 + 7.4967 + <dt id=CSS3CASCADE>[CSS3CASCADE] 7.4968 + 7.4969 + <dd>Håkon Wium Lie. <a 7.4970 + href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3 7.4971 + module: Cascading and inheritance.</cite></a> 15 December 2005. W3C 7.4972 + Working Draft. (Work in progress.) URL: <a 7.4973 + href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a> 7.4974 + </dd> 7.4975 <!----> 7.4976 7.4977 <dt id=CSS3GENCON>[CSS3GENCON] 7.4978 @@ -7343,7 +7708,7 @@ 7.4979 Generated and Replaced Content Module.</cite></a> 14 May 2003. W3C 7.4980 Working Draft. (Work in progress.) URL: <a 7.4981 href="http://www.w3.org/TR/2003/WD-css3-content-20030514">http://www.w3.org/TR/2003/WD-css3-content-20030514</a> 7.4982 - </dd> 7.4983 + </dd> 7.4984 <!----> 7.4985 7.4986 <dt id=CSS3SYN>[CSS3SYN] 7.4987 @@ -7353,17 +7718,17 @@ 7.4988 module: Syntax.</cite></a> 13 August 2003. W3C Working Draft. (Work in 7.4989 progress.) URL: <a 7.4990 href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a> 7.4991 - </dd> 7.4992 + </dd> 7.4993 <!----> 7.4994 7.4995 <dt id=CSS3TEXT>[CSS3TEXT] 7.4996 7.4997 <dd>Elika J. Etemad; Koji Ishii. <a 7.4998 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/"><cite>CSS Text 7.4999 - Level 3.</cite></a> 19 January 2012. W3C Working Draft. (Work in 7.5000 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 7.5001 + Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 7.5002 progress.) URL: <a 7.5003 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 7.5004 - </dd> 7.5005 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 7.5006 + </dd> 7.5007 <!----> 7.5008 7.5009 <dt id=CSS3UI>[CSS3UI] 7.5010 @@ -7373,17 +7738,17 @@ 7.5011 User Interface Module Level 3 (CSS3 UI).</cite></a> 17 January 2012. W3C 7.5012 Working Draft. (Work in progress.) URL: <a 7.5013 href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a> 7.5014 - </dd> 7.5015 + </dd> 7.5016 <!----> 7.5017 7.5018 <dt id=CSS3VAL>[CSS3VAL] 7.5019 7.5020 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 7.5021 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS 7.5022 - Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working 7.5023 - Draft. (Work in progress.) URL: <a 7.5024 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a> 7.5025 - </dd> 7.5026 + href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS 7.5027 + Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate 7.5028 + Recommendation. (Work in progress.) URL: <a 7.5029 + href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> 7.5030 + </dd> 7.5031 <!----> 7.5032 </dl> 7.5033 <!--end-normative--> 7.5034 @@ -7395,6 +7760,16 @@ 7.5035 <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 7.5036 <!----> 7.5037 7.5038 + <dt id=CSS-DEVICE-ADAPT>[CSS-DEVICE-ADAPT] 7.5039 + 7.5040 + <dd>Rune Lillesveen. <a 7.5041 + href="http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/"><cite>CSS 7.5042 + Device Adaptation.</cite></a> 15 September 2011. W3C Working Draft. (Work 7.5043 + in progress.) URL: <a 7.5044 + href="http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/">http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/</a> 7.5045 + </dd> 7.5046 + <!----> 7.5047 + 7.5048 <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS] 7.5049 7.5050 <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a 7.5051 @@ -7402,7 +7777,17 @@ 7.5052 Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working 7.5053 Draft. (Work in progress.) URL: <a 7.5054 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a> 7.5055 - </dd> 7.5056 + </dd> 7.5057 + <!----> 7.5058 + 7.5059 + <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX] 7.5060 + 7.5061 + <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a 7.5062 + href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/"><cite>CSS 7.5063 + Flexible Box Layout Module.</cite></a> 12 June 2012. W3C Working Draft. 7.5064 + (Work in progress.) URL: <a 7.5065 + href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> 7.5066 + </dd> 7.5067 <!----> 7.5068 7.5069 <dt id=CSS3-MARQUEE>[CSS3-MARQUEE] 7.5070 @@ -7412,17 +7797,17 @@ 7.5071 Marquee Module Level 3.</cite></a> 5 December 2008. W3C Candidate 7.5072 Recommendation. (Work in progress.) URL: <a 7.5073 href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205">http://www.w3.org/TR/2008/CR-css3-marquee-20081205</a> 7.5074 - </dd> 7.5075 + </dd> 7.5076 <!----> 7.5077 7.5078 - <dt id=CSS3CASCADE>[CSS3CASCADE] 7.5079 - 7.5080 - <dd>Håkon Wium Lie. <a 7.5081 - href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3 7.5082 - module: Cascading and inheritance.</cite></a> 15 December 2005. W3C 7.5083 - Working Draft. (Work in progress.) URL: <a 7.5084 - href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a> 7.5085 - </dd> 7.5086 + <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS] 7.5087 + 7.5088 + <dd>Simon Fraser; et al. <a 7.5089 + href="http://www.w3.org/TR/2012/WD-css3-transforms-20120403/"><cite>CSS 7.5090 + Transforms.</cite></a> 3 April 2012. W3C Working Draft. (Work in 7.5091 + progress.) URL: <a 7.5092 + href="http://www.w3.org/TR/2012/WD-css3-transforms-20120403/">http://www.w3.org/TR/2012/WD-css3-transforms-20120403/</a> 7.5093 + </dd> 7.5094 <!----> 7.5095 7.5096 <dt id=CSS3GCPM>[CSS3GCPM] 7.5097 @@ -7432,7 +7817,7 @@ 7.5098 Generated Content for Paged Media Module.</cite></a> 8 June 2010. W3C 7.5099 Working Draft. (Work in progress.) URL: <a 7.5100 href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">http://www.w3.org/TR/2010/WD-css3-gcpm-20100608</a> 7.5101 - </dd> 7.5102 + </dd> 7.5103 <!----> 7.5104 7.5105 <dt id=CSS3LAYOUT>[CSS3LAYOUT] 7.5106 @@ -7442,7 +7827,17 @@ 7.5107 Template Layout Module.</cite></a> 29 April 2010. W3C Working Draft. 7.5108 (Work in progress.) URL: <a 7.5109 href="http://www.w3.org/TR/2010/WD-css3-layout-20100429">http://www.w3.org/TR/2010/WD-css3-layout-20100429</a> 7.5110 - </dd> 7.5111 + </dd> 7.5112 + <!----> 7.5113 + 7.5114 + <dt id=CSS3LINE>[CSS3LINE] 7.5115 + 7.5116 + <dd>Michel Suignard; Eric A. Meyer. <a 7.5117 + href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515"><cite>CSS3 7.5118 + module: line.</cite></a> 15 May 2002. W3C Working Draft. (Work in 7.5119 + progress.) URL: <a 7.5120 + href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515">http://www.w3.org/TR/2002/WD-css3-linebox-20020515</a> 7.5121 + </dd> 7.5122 <!----> 7.5123 7.5124 <dt id=CSS3LIST>[CSS3LIST] 7.5125 @@ -7452,7 +7847,7 @@ 7.5126 and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft. 7.5127 (Work in progress.) URL: <a 7.5128 href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a> 7.5129 - </dd> 7.5130 + </dd> 7.5131 <!----> 7.5132 7.5133 <dt id=CSS3PAGE>[CSS3PAGE] 7.5134 @@ -7462,7 +7857,7 @@ 7.5135 Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in 7.5136 progress.) URL: <a 7.5137 href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a> 7.5138 - </dd> 7.5139 + </dd> 7.5140 <!----> 7.5141 7.5142 <dt id=CSS3POS>[CSS3POS] 7.5143 @@ -7478,7 +7873,7 @@ 7.5144 Module.</cite></a> 30 June 2011. W3C Working Draft. (Work in progress.) 7.5145 URL: <a 7.5146 href="http://www.w3.org/TR/2011/WD-css3-ruby-20110630/">http://www.w3.org/TR/2011/WD-css3-ruby-20110630/</a> 7.5147 - </dd> 7.5148 + </dd> 7.5149 <!----> 7.5150 7.5151 <dt id=CSS3TBL>[CSS3TBL] 7.5152 @@ -7490,11 +7885,10 @@ 7.5153 <dt id=MEDIAQ>[MEDIAQ] 7.5154 7.5155 <dd>Florian Rivoal. <a 7.5156 - href="http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/"><cite>Media 7.5157 - Queries.</cite></a> 26 April 2012. W3C Proposed Recommendation. (Work in 7.5158 - progress.) URL: <a 7.5159 - href="http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/">http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/</a> 7.5160 - </dd> 7.5161 + href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media 7.5162 + Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a 7.5163 + href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a> 7.5164 + </dd> 7.5165 <!----> 7.5166 </dl> 7.5167 <!--end-informative--> 7.5168 @@ -7503,47 +7897,46 @@ 7.5169 <!--begin-index--> 7.5170 7.5171 <ul class=indexlist> 7.5172 - <li>A,, <a href="#a" title="A,"><strong>3.</strong></a> 7.5173 - 7.5174 - <li>A-C, <a href="#a-c" title=A-C><strong>3.</strong></a> 7.5175 + <li>absent, <a href="#ldquoabsentrdquo" 7.5176 + title=absent><strong>3.</strong></a> 7.5177 7.5178 <li>adjoining, <a href="#adjoining" 7.5179 - title=adjoining><strong>9.2.</strong></a> 7.5180 + title=adjoining><strong>14.1.</strong></a> 7.5181 + 7.5182 + <li>A edge,, <a href="#a-edge" title="A edge,"><strong>3.</strong></a> 7.5183 7.5184 <li>alignment, <a href="#alignment" 7.5185 - title=alignment><strong>20.</strong></a> 7.5186 - 7.5187 - <li>AMIN, <a href="#amin" title=AMIN><strong>13.</strong></a> 7.5188 + title=alignment><strong>21.</strong></a> 7.5189 + 7.5190 + <li>AMIN, <a href="#amin" title=AMIN><strong>12.</strong></a> 7.5191 7.5192 <li><a href="#ltanglegt"><var><angle></var></a>, <a 7.5193 href="#ltanglegt" title="<angle>"><strong>2.</strong></a> 7.5194 7.5195 <li>anonymous box,, <a href="#anonymous-box" 7.5196 - title="anonymous box,"><strong>7.3.</strong></a> 7.5197 + title="anonymous box,"><strong>6.3.</strong></a> 7.5198 7.5199 <li>approximate intrinsic minimum, <a 7.5200 href="#approximate-intrinsic-minimum" 7.5201 - title="approximate intrinsic minimum"><strong>13.</strong></a> 7.5202 + title="approximate intrinsic minimum"><strong>12.</strong></a> 7.5203 7.5204 <li>approximate intrinsic preferred, <a 7.5205 href="#approximate-intrinsic-preferred" 7.5206 - title="approximate intrinsic preferred"><strong>13.</strong></a> 7.5207 - 7.5208 - <li>APREF, <a href="#apref" title=APREF><strong>13.</strong></a> 7.5209 - 7.5210 - <li>A′,, <a href="#aprime" title="A′,"><strong>3.</strong></a> 7.5211 + title="approximate intrinsic preferred"><strong>12.</strong></a> 7.5212 + 7.5213 + <li>APREF, <a href="#apref" title=APREF><strong>12.</strong></a> 7.5214 + 7.5215 + <li>Aspect ratios, <a href="#aspect-ratios" title="Aspect ratios">13.</a> 7.5216 7.5217 <li>auto 7.5218 <ul> 7.5219 <li>value of ‘<a href="#width"><code 7.5220 class=property>width</code></a>’ or ‘<a href="#height"><code 7.5221 class=property>height</code></a>’, <a href="#auto0" 7.5222 - title="auto, value of 'width' or 'height'"><strong>22.5.</strong></a> 7.5223 + title="auto, value of 'width' or 'height'"><strong>23.5.</strong></a> 7.5224 </ul> 7.5225 7.5226 - <li>B,, <a href="#b" title="B,"><strong>3.</strong></a> 7.5227 - 7.5228 - <li>B-D, <a href="#b-d" title=B-D><strong>3.</strong></a> 7.5229 + <li>B edge,, <a href="#b-edge" title="B edge,"><strong>3.</strong></a> 7.5230 7.5231 <li><a href="#ltbg-positiongt"><var><bg-position></var></a>, <a 7.5232 href="#ltbg-positiongt" 7.5233 @@ -7553,20 +7946,29 @@ 7.5234 <ul> 7.5235 <li>value of ‘<a href="#float-displace"><code 7.5236 class=property>float-displace</code></a>’, <a href="#block" 7.5237 - title="block, value of 'float-displace'"><strong>23.</strong></a> 7.5238 + title="block, value of 'float-displace'"><strong>24.</strong></a> 7.5239 </ul> 7.5240 7.5241 <li>block container box, <a href="#block-container-box" 7.5242 - title="block container box"><strong>7.3.</strong></a> 7.5243 - 7.5244 - <li>block flow dimension, <a href="#block-flow" 7.5245 - title="block flow dimension"><strong>3.</strong></a> 7.5246 + title="block container box"><strong>6.3.</strong></a> 7.5247 + 7.5248 + <li>block dimension, <a href="#block-dimension" 7.5249 + title="block dimension"><strong>3.</strong></a> 7.5250 7.5251 <li>block flow direction, <a href="#block-flow-direction" 7.5252 title="block flow direction"><strong>2.</strong></a> 7.5253 7.5254 + <li>block formatting context,, <a href="#block-formatting-context" 7.5255 + title="block formatting context,"><strong>14.</strong></a> 7.5256 + 7.5257 <li>block-level, <a href="#block-level" 7.5258 - title=block-level><strong>7.3.</strong></a> 7.5259 + title=block-level><strong>6.3.</strong></a> 7.5260 + 7.5261 + <li>border 7.5262 + <ul> 7.5263 + <li>absent, <a href="#ldquoabsentrdquo" 7.5264 + title="border, absent"><strong>3.</strong></a> 7.5265 + </ul> 7.5266 7.5267 <li>border area, <a href="#border-area" 7.5268 title="border area"><strong>3.</strong></a> 7.5269 @@ -7581,43 +7983,48 @@ 7.5270 <ul> 7.5271 <li>value of ‘<a href="#clear-after"><code 7.5272 class=property>clear-after</code></a>’, <a href="#both" 7.5273 - title="both, value of 'clear-after'"><strong>17.</strong></a> 7.5274 + title="both, value of 'clear-after'"><strong>18.</strong></a> 7.5275 </ul> 7.5276 7.5277 <li>box-sizing, <a href="#box-sizing" 7.5278 title=box-sizing><strong>2.</strong></a> 7.5279 7.5280 - <li>B′,, <a href="#bprime" title="B′,"><strong>3.</strong></a> 7.5281 - 7.5282 - <li>C, <a href="#c" title=C><strong>3.</strong></a> 7.5283 + <li>box tree, <a href="#box-tree." 7.5284 + title="box tree"><strong>3.</strong></a> 7.5285 7.5286 <li>canvas, <a href="#canvas" title=canvas><strong>4.</strong></a> 7.5287 7.5288 + <li>C edge, <a href="#c-edge" title="C edge"><strong>3.</strong></a> 7.5289 + 7.5290 + <li>channeled, <a href="#channeled" 7.5291 + title=channeled><strong>5.</strong></a> 7.5292 + 7.5293 <li>child-align, <a href="#child-align" 7.5294 - title=child-align><strong>21.</strong></a> 7.5295 - 7.5296 - <li>clear, <a href="#clear" title=clear><strong>16.</strong></a> 7.5297 + title=child-align><strong>22.</strong></a> 7.5298 + 7.5299 + <li>clear, <a href="#clear" title=clear><strong>17.</strong></a> 7.5300 7.5301 <li>clear-after, <a href="#clear-after" 7.5302 - title=clear-after><strong>17.</strong></a> 7.5303 + title=clear-after><strong>18.</strong></a> 7.5304 7.5305 <li>clearance., <a href="#clearance." 7.5306 - title=clearance.><strong>16.</strong></a> 7.5307 + title=clearance.><strong>17.</strong></a> 7.5308 7.5309 <li>collapse., <a href="#collapse." 7.5310 - title=collapse.><strong>9.2.</strong></a> 7.5311 + title=collapse.><strong>14.1.</strong></a> 7.5312 7.5313 <li>collapsed through, <a href="#collapsed-through" 7.5314 - title="collapsed through"><strong>9.2.</strong></a> 7.5315 + title="collapsed through"><strong>14.1.</strong></a> 7.5316 7.5317 <li>complex aspect ratio, <a href="#complex-aspect-ratio" 7.5318 - title="complex aspect ratio"><strong>5.</strong></a> 7.5319 + title="complex aspect ratio"><strong>13.</strong></a> 7.5320 7.5321 <li>computed value, <a href="#computed-value" 7.5322 title="computed value"><strong>2.</strong></a> 7.5323 7.5324 <li>containing block, <a href="#containing-block" 7.5325 - title="containing block"><strong>7.3.</strong></a> 7.5326 + title="containing block">3.</a>, <a href="#containing-block0" 7.5327 + title="containing block"><strong>6.3.</strong></a> 7.5328 7.5329 <li>contains, <a href="#contains" title=contains><strong>3.</strong></a> 7.5330 7.5331 @@ -7630,92 +8037,108 @@ 7.5332 <li>content edge., <a href="#content-edge." 7.5333 title="content edge."><strong>3.</strong></a> 7.5334 7.5335 - <li>C′, <a href="#cprime" title="C′"><strong>3.</strong></a> 7.5336 - 7.5337 - <li>D,, <a href="#d" title="D,"><strong>3.</strong></a> 7.5338 + <li>D edge., <a href="#d-edge." title="D edge."><strong>3.</strong></a> 7.5339 7.5340 <li>direction, <a href="#direction" 7.5341 title=direction><strong>2.</strong></a> 7.5342 7.5343 - <li>display, <a href="#display0" title=display><strong>7.1.</strong></a> 7.5344 + <li>display, <a href="#display0" title=display><strong>6.1.</strong></a> 7.5345 7.5346 <li>document tree, <a href="#tree" title="document tree">3.</a> 7.5347 7.5348 - <li>D′, <a href="#dprime" title="D′"><strong>3.</strong></a> 7.5349 - 7.5350 <li>element, <a href="#elements." title=element><strong>3.</strong></a> 7.5351 7.5352 <li>element tree, <a href="#tree" title="element tree">3.</a> 7.5353 7.5354 - <li>end,, <a href="#end" title="end,"><strong>3.</strong></a> 7.5355 - 7.5356 - <li>endside,, <a href="#endside" title="endside,"><strong>3.</strong></a> 7.5357 + <li>end, <a href="#end" title=end><strong>3.</strong></a> 7.5358 7.5359 <li>exclusion zone, <a href="#exclusion-zone" 7.5360 - title="exclusion zone"><strong>15.</strong></a> 7.5361 - 7.5362 - <li>float, <a href="#float" title=float><strong>15.</strong></a> 7.5363 + title="exclusion zone"><strong>16.</strong></a> 7.5364 + 7.5365 + <li>float, <a href="#float" title=float><strong>16.</strong></a> 7.5366 7.5367 <li>float-displace, <a href="#float-displace" 7.5368 - title=float-displace><strong>23.</strong></a> 7.5369 - 7.5370 - <li>flow, <a href="#flow" title=flow><strong>7.3.</strong></a> 7.5371 + title=float-displace><strong>24.</strong></a> 7.5372 + 7.5373 + <li>flow, <a href="#flow" title=flow>3.</a>, <a href="#flow0" 7.5374 + title=flow><strong>5.</strong></a> 7.5375 + <ul> 7.5376 + <li>initial, <a href="#initial-flow" 7.5377 + title="flow, initial"><strong>5.</strong></a> 7.5378 + </ul> 7.5379 7.5380 <li>flow root, <a href="#flow-root" 7.5381 - title="flow root"><strong>7.3.</strong></a> 7.5382 + title="flow root"><strong>5.</strong></a> 7.5383 + <ul> 7.5384 + <li>box, <a href="#box" title="flow root, box">5.</a> 7.5385 + 7.5386 + <li>element, <a href="#flow-root." title="flow root, element">5.</a> 7.5387 + </ul> 7.5388 + 7.5389 + <li>foot,, <a href="#foot" title="foot,"><strong>3.</strong></a> 7.5390 7.5391 <li>formatting context, <a href="#new-formatting-context." 7.5392 - title="formatting context">7.3.</a> 7.5393 + title="formatting context">5.</a> 7.5394 7.5395 <li>generated box, <a href="#generates" 7.5396 title="generated box"><strong>3.</strong></a> 7.5397 7.5398 <li>head,, <a href="#head" title="head,"><strong>3.</strong></a> 7.5399 7.5400 - <li>headside,, <a href="#headside" 7.5401 - title="headside,"><strong>3.</strong></a> 7.5402 - 7.5403 - <li>height, <a href="#height" title=height><strong>10.</strong></a> 7.5404 + <li>height, <a href="#height" title=height><strong>9.</strong></a> 7.5405 + <ul> 7.5406 + <li>logical, <a href="#logical-height." 7.5407 + title="height, logical"><strong>3.</strong></a> 7.5408 + </ul> 7.5409 7.5410 <li>horizontal, <a href="#horizontal" 7.5411 title=horizontal><strong>3.</strong></a> 7.5412 7.5413 - <li>IMIN, <a href="#imin" title=IMIN><strong>12.</strong></a> 7.5414 + <li>IMIN, <a href="#imin" title=IMIN><strong>11.</strong></a> 7.5415 7.5416 <li>indent-edge-reset, <a href="#indent-edge-reset" 7.5417 - title=indent-edge-reset><strong>24.</strong></a> 7.5418 + title=indent-edge-reset><strong>25.</strong></a> 7.5419 + 7.5420 + <li>induced,, <a href="#induced" title="induced,"><strong>3.</strong></a> 7.5421 7.5422 <li>inhibits run-in behavior, <a href="#inhibits-run-in-behavior" 7.5423 - title="inhibits run-in behavior"><strong>7.4.</strong></a> 7.5424 + title="inhibits run-in behavior"><strong>6.4.</strong></a> 7.5425 7.5426 <li>initial containing block., <a href="#initial-containing-block." 7.5427 - title="initial containing block."><strong>7.3.</strong></a> 7.5428 + title="initial containing block."><strong>6.3.</strong></a> 7.5429 + 7.5430 + <li>initial flow, <a href="#initial-flow" 7.5431 + title="initial flow"><strong>5.</strong></a> 7.5432 7.5433 <li>inline base direction., <a href="#inline-base-direction." 7.5434 title="inline base direction."><strong>2.</strong></a> 7.5435 7.5436 - <li>inline dimension, <a href="#inline" 7.5437 + <li>inline dimension, <a href="#inline-dimension" 7.5438 title="inline dimension"><strong>3.</strong></a> 7.5439 7.5440 <li>inline-level, <a href="#inline-level" 7.5441 - title=inline-level><strong>7.3.</strong></a> 7.5442 + title=inline-level><strong>6.3.</strong></a> 7.5443 7.5444 <li>intrinsic, <a href="#intrinsic0" 7.5445 title=intrinsic><strong>2.</strong></a> 7.5446 7.5447 <li>intrinsic height., <a href="#intrinsic-height." 7.5448 - title="intrinsic height.">5.</a> 7.5449 + title="intrinsic height.">13.</a> 7.5450 7.5451 <li>intrinsic minimum, <a href="#intrinsic-minimum" 7.5452 - title="intrinsic minimum"><strong>12.</strong></a> 7.5453 + title="intrinsic minimum"><strong>11.</strong></a> 7.5454 7.5455 <li>intrinsic preferred, <a href="#intrinsic-preferred" 7.5456 - title="intrinsic preferred"><strong>12.</strong></a> 7.5457 + title="intrinsic preferred"><strong>11.</strong></a> 7.5458 + 7.5459 + <li>intrinsic ratio, <a href="#intrinsic-ratio" 7.5460 + title="intrinsic ratio">13.</a>, <a href="#intrinsic-ratio0" 7.5461 + title="intrinsic ratio">13.</a> 7.5462 7.5463 <li>intrinsic width, <a href="#intrinsic-width" 7.5464 - title="intrinsic width">5.</a> 7.5465 - 7.5466 - <li>IPREF, <a href="#ipref" title=IPREF><strong>12.</strong></a> 7.5467 + title="intrinsic width">13.</a> 7.5468 + 7.5469 + <li>IPREF, <a href="#ipref" title=IPREF><strong>11.</strong></a> 7.5470 7.5471 <li><a href="#ltlengthgt"><var><length></var></a>, <a 7.5472 href="#ltlengthgt" title="<length>"><strong>2.</strong></a> 7.5473 @@ -7723,86 +8146,93 @@ 7.5474 <li>line box., <a href="#line-box." 7.5475 title="line box."><strong>2.</strong></a> 7.5476 7.5477 - <li>margin, <a href="#margin" title=margin><strong>9.1.</strong></a> 7.5478 + <li>logical height, <a href="#logical-height." 7.5479 + title="logical height"><strong>3.</strong></a> 7.5480 + 7.5481 + <li>logical width, <a href="#logical-width" 7.5482 + title="logical width"><strong>3.</strong></a> 7.5483 + 7.5484 + <li>margin, <a href="#margin" title=margin><strong>8.1.</strong></a> 7.5485 7.5486 <li>margin area, <a href="#margin-area" 7.5487 title="margin area"><strong>3.</strong></a> 7.5488 7.5489 <li>margin-bottom, <a href="#margin-bottom" 7.5490 - title=margin-bottom><strong>9.1.</strong></a> 7.5491 + title=margin-bottom><strong>8.1.</strong></a> 7.5492 7.5493 <li>margin edge., <a href="#margin-edge." 7.5494 title="margin edge."><strong>3.</strong></a> 7.5495 7.5496 <li>margin-left, <a href="#margin-left" 7.5497 - title=margin-left><strong>9.1.</strong></a> 7.5498 + title=margin-left><strong>8.1.</strong></a> 7.5499 7.5500 <li>margin-right, <a href="#margin-right" 7.5501 - title=margin-right><strong>9.1.</strong></a> 7.5502 + title=margin-right><strong>8.1.</strong></a> 7.5503 7.5504 <li>margin-top, <a href="#margin-top" 7.5505 - title=margin-top><strong>9.1.</strong></a> 7.5506 + title=margin-top><strong>8.1.</strong></a> 7.5507 7.5508 <li>max-height, <a href="#max-height" 7.5509 - title=max-height><strong>11.</strong></a> 7.5510 + title=max-height><strong>10.</strong></a> 7.5511 7.5512 <li>max-width, <a href="#max-width" 7.5513 - title=max-width><strong>11.</strong></a> 7.5514 + title=max-width><strong>10.</strong></a> 7.5515 7.5516 <li>min-height, <a href="#min-height" 7.5517 - title=min-height><strong>11.</strong></a> 7.5518 + title=min-height><strong>10.</strong></a> 7.5519 7.5520 <li>min-width, <a href="#min-width" 7.5521 - title=min-width><strong>11.</strong></a> 7.5522 + title=min-width><strong>10.</strong></a> 7.5523 7.5524 <li>new formatting context, <a href="#new-formatting-context." 7.5525 - title="new formatting context">7.3.</a> 7.5526 + title="new formatting context">5.</a> 7.5527 7.5528 <li>no-content, <a href="#no-content" 7.5529 - title=no-content><strong>18.1.</strong></a> 7.5530 + title=no-content><strong>19.1.</strong></a> 7.5531 7.5532 <li>no-display, <a href="#no-display" 7.5533 - title=no-display><strong>18.1.</strong></a> 7.5534 + title=no-display><strong>19.1.</strong></a> 7.5535 7.5536 <li>none 7.5537 <ul> 7.5538 <li>value of ‘<a href="#clear-after"><code 7.5539 class=property>clear-after</code></a>’, <a href="#none" 7.5540 - title="none, value of 'clear-after'"><strong>17.</strong></a> 7.5541 + title="none, value of 'clear-after'"><strong>18.</strong></a> 7.5542 7.5543 <li>value of ‘<a href="#indent-edge-reset"><code 7.5544 class=property>indent-edge-reset</code></a>’, <a href="#none0" 7.5545 - title="none, value of 'indent-edge-reset'"><strong>24.</strong></a> 7.5546 + title="none, value of 'indent-edge-reset'"><strong>25.</strong></a> 7.5547 </ul> 7.5548 7.5549 <li>Non-transparent, <a href="#non-transparent" 7.5550 - title=Non-transparent><strong>15.</strong></a> 7.5551 + title=Non-transparent><strong>16.</strong></a> 7.5552 7.5553 <li>normal flow, <a href="#normal-flow" 7.5554 - title="normal flow"><strong>7.3.</strong></a> 7.5555 + title="normal flow"><strong>5.</strong></a> 7.5556 7.5557 <li><a href="#ltnumbergt"><var><number></var></a>, <a 7.5558 href="#ltnumbergt" title="<number>"><strong>2.</strong></a> 7.5559 7.5560 - <li>orientation, <a href="#orientation" 7.5561 - title=orientation><strong>3.</strong></a> 7.5562 - 7.5563 <li>overflow, <a href="#overflow1" 7.5564 - title=overflow><strong>18.1.</strong></a> 7.5565 + title=overflow><strong>19.1.</strong></a> 7.5566 7.5567 <li>overflow-x, <a href="#overflow-x" 7.5568 - title=overflow-x><strong>18.1.</strong></a> 7.5569 + title=overflow-x><strong>19.1.</strong></a> 7.5570 7.5571 <li>overflow-y, <a href="#overflow-y" 7.5572 - title=overflow-y><strong>18.1.</strong></a> 7.5573 - 7.5574 - <li>padding, <a href="#padding" title=padding><strong>8.</strong></a> 7.5575 + title=overflow-y><strong>19.1.</strong></a> 7.5576 + 7.5577 + <li>padding, <a href="#padding" title=padding><strong>7.</strong></a> 7.5578 + <ul> 7.5579 + <li>absent, <a href="#ldquoabsentrdquo" 7.5580 + title="padding, absent"><strong>3.</strong></a> 7.5581 + </ul> 7.5582 7.5583 <li>padding area, <a href="#padding-area" 7.5584 title="padding area"><strong>3.</strong></a> 7.5585 7.5586 <li>padding-bottom, <a href="#padding-bottom" 7.5587 - title=padding-bottom><strong>8.</strong></a> 7.5588 + title=padding-bottom><strong>7.</strong></a> 7.5589 7.5590 <li>padding box., <a href="#padding-box." 7.5591 title="padding box."><strong>3.</strong></a> 7.5592 @@ -7811,66 +8241,61 @@ 7.5593 title="padding edge."><strong>3.</strong></a> 7.5594 7.5595 <li>padding-left, <a href="#padding-left" 7.5596 - title=padding-left><strong>8.</strong></a> 7.5597 + title=padding-left><strong>7.</strong></a> 7.5598 7.5599 <li>padding-right, <a href="#padding-right" 7.5600 - title=padding-right><strong>8.</strong></a> 7.5601 + title=padding-right><strong>7.</strong></a> 7.5602 7.5603 <li>padding-top, <a href="#padding-top" 7.5604 - title=padding-top><strong>8.</strong></a> 7.5605 + title=padding-top><strong>7.</strong></a> 7.5606 7.5607 <li><a href="#ltpercentagegt"><var><percentage></var></a>, <a 7.5608 href="#ltpercentagegt" title="<percentage>"><strong>2.</strong></a> 7.5609 - 7.5610 7.5611 <li>principal box, <a href="#principal-box" 7.5612 - title="principal box"><strong>7.3.</strong></a> 7.5613 - 7.5614 - <li>raster images, <a href="#raster-images" title="raster images">5.</a> 7.5615 + title="principal box"><strong>6.3.</strong></a> 7.5616 + 7.5617 + <li>raster images, <a href="#raster-images" title="raster images">13.</a> 7.5618 7.5619 <li>reference indent edge, <a href="#reference-indent-edge" 7.5620 - title="reference indent edge"><strong>24.</strong></a> 7.5621 + title="reference indent edge"><strong>25.</strong></a> 7.5622 7.5623 <li>relative indent, <a href="#relative-indent" 7.5624 - title="relative indent"><strong>23.</strong></a> 7.5625 + title="relative indent"><strong>24.</strong></a> 7.5626 7.5627 <li>replaced element, <a href="#replaced-element" 7.5628 title="replaced element"><strong>2.</strong></a>, <a 7.5629 - href="#replaced-elements" title="replaced element">5.</a> 7.5630 + href="#replaced-elements" title="replaced element">13.</a> 7.5631 7.5632 <li>root element., <a href="#root-element." 7.5633 title="root element."><strong>3.</strong></a> 7.5634 7.5635 <li>scrolling mechanism, <a href="#scrolling-mechanism" 7.5636 - title="scrolling mechanism"><strong>18.1.</strong></a> 7.5637 + title="scrolling mechanism"><strong>19.1.</strong></a> 7.5638 7.5639 <li>"shrink-wrapped", <a href="#shrink-wrapped" 7.5640 - title=""shrink-wrapped""><strong>22.5.</strong></a> 7.5641 - 7.5642 - <li>start,, <a href="#start" title="start,"><strong>3.</strong></a> 7.5643 - 7.5644 - <li>startside, <a href="#startside" 7.5645 - title=startside><strong>3.</strong></a> 7.5646 + title=""shrink-wrapped""><strong>23.5.</strong></a> 7.5647 + 7.5648 + <li>start, <a href="#start" title=start><strong>3.</strong></a> 7.5649 7.5650 <li>static position, <a href="#static-position" 7.5651 - title="static position"><strong>14.6.</strong></a> 7.5652 + title="static position"><strong>15.6.</strong></a> 7.5653 7.5654 <li><stretch>, <a href="#ltstretchgt" 7.5655 - title="<stretch>"><strong>9.1.</strong></a> 7.5656 - 7.5657 - <li>SVG, <a href="#svg" title=SVG>5.</a>, <a href="#svg0" 7.5658 - title=SVG>5.</a>, <a href="#svg1" title=SVG>7.2.</a>, <a href="#svg2" 7.5659 - title=SVG>22.5.</a> 7.5660 - 7.5661 - <li>tail, <a href="#tail" title=tail><strong>3.</strong></a> 7.5662 - 7.5663 - <li>tailside, <a href="#tailside" title=tailside><strong>3.</strong></a> 7.5664 + title="<stretch>"><strong>8.1.</strong></a> 7.5665 + 7.5666 + <li>SVG, <a href="#svg" title=SVG>6.2.</a>, <a href="#svg0" 7.5667 + title=SVG>13.</a>, <a href="#svg1" title=SVG>13.</a>, <a href="#svg2" 7.5668 + title=SVG>23.5.</a> 7.5669 7.5670 <li>transform, <a href="#transform" 7.5671 title=transform><strong>2.</strong></a> 7.5672 7.5673 <li>tree 7.5674 <ul> 7.5675 + <li>of boxes, <a href="#box-tree." 7.5676 + title="tree, of boxes"><strong>3.</strong></a> 7.5677 + 7.5678 <li>of elements, <a href="#tree" title="tree, of elements">3.</a> 7.5679 </ul> 7.5680 7.5681 @@ -7883,15 +8308,16 @@ 7.5682 <li>viewport, <a href="#viewport" title=viewport><strong>4.</strong></a> 7.5683 7.5684 <li>visibility, <a href="#visibility" 7.5685 - title=visibility><strong>19.</strong></a> 7.5686 - 7.5687 - <li>width, <a href="#width" title=width><strong>10.</strong></a> 7.5688 + title=visibility><strong>20.</strong></a> 7.5689 + 7.5690 + <li>width, <a href="#width" title=width><strong>9.</strong></a> 7.5691 + <ul> 7.5692 + <li>logical, <a href="#logical-width" 7.5693 + title="width, logical"><strong>3.</strong></a> 7.5694 + </ul> 7.5695 7.5696 <li>writing-mode, <a href="#writing-mode" 7.5697 title=writing-mode><strong>2.</strong></a> 7.5698 - 7.5699 - <li>WYSIWYG document editors, <a href="#wysiwyg-document-editors" 7.5700 - title="WYSIWYG document editors">3.</a> 7.5701 </ul> 7.5702 <!--end-index--> 7.5703 7.5704 @@ -7947,21 +8373,6 @@ 7.5705 <td>visual 7.5706 7.5707 <tr> 7.5708 - <th><a class=property href="#clear">clear</a> 7.5709 - 7.5710 - <td>none | left | right | both 7.5711 - 7.5712 - <td>none 7.5713 - 7.5714 - <td>block-level elements 7.5715 - 7.5716 - <td>no 7.5717 - 7.5718 - <td>N/A 7.5719 - 7.5720 - <td>visual 7.5721 - 7.5722 - <tr> 7.5723 <th><a class=property href="#clear-after">clear-after</a> 7.5724 7.5725 <td>none | left | right | top | bottom | inside | outside | start | end 7.5726 @@ -7978,13 +8389,28 @@ 7.5727 <td>visual 7.5728 7.5729 <tr> 7.5730 + <th><a class=property href="#clear">clear</a> 7.5731 + 7.5732 + <td>none | left | right | both 7.5733 + 7.5734 + <td>none 7.5735 + 7.5736 + <td>block-level elements 7.5737 + 7.5738 + <td>no 7.5739 + 7.5740 + <td>N/A 7.5741 + 7.5742 + <td>visual 7.5743 + 7.5744 + <tr> 7.5745 <th><a class=property href="#display0">display</a> 7.5746 7.5747 <td>inline | block | inline-block | list-item | run-in | compact | table 7.5748 | inline-table | table-row-group | table-header-group | 7.5749 table-footer-group | table-row | table-column-group | table-column | 7.5750 table-cell | table-caption | ruby | ruby-base | ruby-text | 7.5751 - ruby-base-group | ruby-text-group | align-box | none 7.5752 + ruby-base-group | ruby-text-group | container | none 7.5753 7.5754 <td>inline 7.5755 7.5756 @@ -7997,6 +8423,21 @@ 7.5757 <td>visual (‘none’ applies to all media) 7.5758 7.5759 <tr> 7.5760 + <th><a class=property href="#float-displace">float-displace</a> 7.5761 + 7.5762 + <td>line | indent | block | block-within-page 7.5763 + 7.5764 + <td>line 7.5765 + 7.5766 + <td>all block-level elements 7.5767 + 7.5768 + <td>yes 7.5769 + 7.5770 + <td>N/A 7.5771 + 7.5772 + <td>visual 7.5773 + 7.5774 + <tr> 7.5775 <th><a class=property href="#float">float</a> 7.5776 7.5777 <td>[ left | right | top | bottom | start | end | none | 7.5778 @@ -8013,21 +8454,6 @@ 7.5779 <td>visual 7.5780 7.5781 <tr> 7.5782 - <th><a class=property href="#float-displace">float-displace</a> 7.5783 - 7.5784 - <td>line | indent | block | block-within-page 7.5785 - 7.5786 - <td>line 7.5787 - 7.5788 - <td>all block-level elements 7.5789 - 7.5790 - <td>yes 7.5791 - 7.5792 - <td>N/A 7.5793 - 7.5794 - <td>visual 7.5795 - 7.5796 - <tr> 7.5797 <th><a class=property href="#height">height</a> 7.5798 7.5799 <td>[<length> | <percentage>] && [border-box | content-box]? | 7.5800 @@ -8047,8 +8473,7 @@ 7.5801 <tr> 7.5802 <th><a class=property href="#indent-edge-reset">indent-edge-reset</a> 7.5803 7.5804 - <td>none | margin-edge | border-edge | padding-edge | content-edge | 7.5805 - inherit 7.5806 + <td>none | margin-edge | border-edge | padding-edge | content-edge 7.5807 7.5808 <td>none 7.5809 7.5810 @@ -8097,8 +8522,9 @@ 7.5811 <th><a class=property href="#max-width">max-width</a>, <a class=property 7.5812 href="#max-height">max-height</a> 7.5813 7.5814 - <td><length> | <percentage> | available | min-content | 7.5815 - max-content | fit-content | none 7.5816 + <td>[ [<length> | <percentage>] && [border-box | 7.5817 + content-box]? ] | available | min-content | max-content | fit-content | 7.5818 + none 7.5819 7.5820 <td>none 7.5821 7.5822 @@ -8115,8 +8541,8 @@ 7.5823 <th><a class=property href="#min-width">min-width</a>, <a class=property 7.5824 href="#min-height">min-height</a> 7.5825 7.5826 - <td><length> | <percentage> | available | min-content | 7.5827 - max-content | fit-content 7.5828 + <td>[ [<length> | <percentage>] && [border-box | 7.5829 + content-box]? ] | available | min-content | max-content | fit-content 7.5830 7.5831 <td>0 7.5832
8.1 --- a/css3-box/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 8.2 +++ b/css3-box/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 8.3 @@ -1,7 +1,13 @@ 8.4 <!doctype html public '-//W3C//DTD HTML 4.01//EN'> 8.5 8.6 -<head profile="http://www.w3.org/2006/03/hcard 8.7 - http://microformats.org/wiki/rel-license"> 8.8 +<head profile=" 8.9 +http://microformats.org/profile/h-card 8.10 +http://microformats.org/profile/hcard 8.11 +http://microformats.org/profile/rel-license 8.12 +"> 8.13 + 8.14 +<!-- Note: the h-card profile is for a "microformats 2" vocabulary and 8.15 +is experimental as of September 2012 --> 8.16 8.17 <meta content="text/html; charset=utf-8" http-equiv=content-type> 8.18 <title>CSS basic box model</title> 8.19 @@ -29,17 +35,31 @@ 8.20 <h2 class="no-num no-toc">[LONGSTATUS] [DATE: 26 Sep 2006]</h2> 8.21 <dl> 8.22 <dt>This version: 8.23 - <dd><a href="[VERSION]"> 8.24 - http://www.w3.org/TR/[YEAR]/ED-css3-box-[CDATE]</a> 8.25 + 8.26 + <dd><a href="[VERSION]" 8.27 + >http://www.w3.org/TR/[YEAR]/ED-css3-box-[CDATE]</a> 8.28 + 8.29 <dt>Latest version: 8.30 - <dd><a href="http://www.w3.org/TR/css3-box"> 8.31 - http://www.w3.org/TR/css3-box</a> 8.32 + 8.33 + <dd><a href="http://www.w3.org/TR/css3-box" 8.34 + >http://www.w3.org/TR/css3-box</a> 8.35 + 8.36 <dt>Previous version: 8.37 - <dd><a href="http://www.w3.org/TR/2002/WD-css3-box-20021024"> 8.38 - http://www.w3.org/TR/2002/WD-css3-box-20021024</a> 8.39 + 8.40 + <dd><a href="http://www.w3.org/TR/2002/WD-css3-box-20021024" 8.41 + >http://www.w3.org/TR/2002/WD-css3-box-20021024</a> 8.42 + 8.43 <dt>Editors: 8.44 - <dd class=vcard><span class=fn>Bert Bos</span> (<span 8.45 - class=org>W3C</span>) <span class=email>bert@w3.org</span> 8.46 + 8.47 + <dd class="h-card vcard"><a class="p-name fn u-url url" rel=author 8.48 + href="http://www.w3.org/People/Bos/" >Bert Bos</a>, <span 8.49 + class="p-org org" >W3C</span>, <a class="u-email email" 8.50 + href="mailto:bert@w3.org" ><bert@w3.org></a> 8.51 + 8.52 + <dd class="h-card vcard"><span class="p-name fn" >Anton 8.53 + Prowse</span>, <span class="p-org org" >Invited Expert</span>, <a 8.54 + class="u-email email" href="mailto:prowse@moonhenge.net" 8.55 + ><prowse@moonhenge.net></a> 8.56 </dl> 8.57 <!--copyright--> 8.58 <hr title="Separator for header"> 8.59 @@ -90,7 +110,6 @@ 8.60 8.61 8.62 <h2 class="no-num no-toc">Table of contents</h2> 8.63 - 8.64 <!--toc--> 8.65 8.66 8.67 @@ -163,7 +182,10 @@ 8.68 8.69 <p class=note>Note: The model in this specification differs from the 8.70 model described in the CSS level 2 specification [[!CSS21]], because 8.71 -it is generalized to apply also to vertical text. 8.72 +it is generalized to apply also to vertical text. A document using 8.73 +only features from level 2 renders exactly as described there, (except 8.74 +possibly for features that are undefined in that specification and 8.75 +have become defined since). 8.76 8.77 <p>CSS assumes that the document to lay out is modeled as a <span 8.78 class=index title="tree!!of elements|document tree|element 8.79 @@ -173,31 +195,68 @@ 8.80 list. Each child has one parent, except for the unique element that 8.81 has no parent, which is called the <dfn>root element.</dfn> 8.82 8.83 +<p class=note>Note that such a tree can be described in XML or SGML, 8.84 +but also in other notations and that it is the definition of that 8.85 +notation, not CSS, that determines the equivalence between the 8.86 +abstract tree and the concrete notation. E.g., SGML often allows white 8.87 +space to be added between elements for readability, which does not 8.88 +result in a string of spaces in the abstract tree. 8.89 + 8.90 <p>CSS describes how each element and each string of text is laid out 8.91 by transforming the document tree into a set of rectangular boxes, 8.92 whose size, position, and stacking level on the <em>canvas</em> depend 8.93 on their properties. We say that an element <dfn title="generated 8.94 -box">generates</dfn> one or more boxes. There are <em>block-level</em> 8.95 -boxes, <em title="line box">line boxes</em> and <em 8.96 -title="inline-level">inline-level boxes.</em> A block-level box is 8.97 -like a paragraph. A line box is like a line of text. Inline-level 8.98 -boxes are like words inside a line. 8.99 +box">generates</dfn> one or more boxes. There are numerous different 8.100 +types of boxes. <span class=issue>[Or maybe only one? I.e., a 8.101 +block-level box is just a normal box that happens to be generated by a 8.102 +block-level element?]</span> A block box is like a paragraph; a line 8.103 +box is like a single line of text; and inline boxes are like words 8.104 +inside a line. 8.105 + 8.106 +<div class="issue"> 8.107 +<p>Define the <dfn title="box tree|tree!!of boxes" >box 8.108 +tree.</dfn> (Is the space 8.109 +between words a kind of box as well, or a spacer item? Is the current 8.110 +selection a box? Is there a defined order among sibling boxes? If so, 8.111 +are bidi inline boxes ordered in reading order or in visual order?) 8.112 + 8.113 +<p>[Define the box tree before pagination and then describe how 8.114 +pagination can break one box into two?] 8.115 + 8.116 +<ul> 8.117 +<li>If the parent element is a list item, the boxes go into the 8.118 +parent's block box, not the marker box. 8.119 + 8.120 +<li>If the element is run-in, its boxes go either into a box of its 8.121 +parent element, or into a box of a later sibling. 8.122 + 8.123 +<li>The order of sibling boxes is always such that boxes that belong 8.124 +to elements earlier in the document come before boxes of elements that 8.125 +come later in the document. 8.126 + 8.127 +<li>Note that 'position' can put a box into the box of an ancestor 8.128 +(the one establishing the containing block) rather than a parent. 8.129 + 8.130 +<li>Note that 'flow' puts boxes into a named flow root. 8.131 +</ul> 8.132 +</div> 8.133 8.134 <p>When the specification says a box <var>A</var> <dfn>contains</dfn> 8.135 -a box <var>B</var>, then <var>B</var> is a box generated by an element 8.136 -that is a descendant of the element that generated 8.137 -<var>A</var>. Typically, box <var>B</var> is geometrically 8.138 -contained in box <var>A</var> as well, but that need not be the case, 8.139 -because of, e.g., overflow or negative margins. 8.140 - 8.141 -<p class=note>Note: The precise rules are below and in other modules, but in 8.142 -summary, a block-level box contains either other block-level boxes (e.g., a 8.143 -section containing paragraphs, or a table containing rows), or it contains 8.144 -line boxes (e.g., a paragraph containing lines of text). A line box contains 8.145 -inline-level boxes (e.g., a line with words in different styles). An 8.146 -inline-level box may contain either text interspersed with more inline-level 8.147 -boxes, or it may contain a block-level box (e.g., a small table that is 8.148 -rendered inline). 8.149 +a box <var>B</var> it means <var>B</var> is a child of <var>A</var> in 8.150 +the <em>box tree.</em> Typically, box <var>B</var> is geometrically 8.151 +contained within box <var>A</var> as well, but that need not be the 8.152 +case, because of, e.g., overflow or negative margins. 8.153 + 8.154 +<p class=note>Note: The precise rules are below and in other modules, 8.155 +but in summary, <span class=issue>[write something that helps convey 8.156 +the idea of a flow, e.g.:]</span> a block-level box contains either other 8.157 +block-level boxes (e.g., a section containing paragraphs, or a table 8.158 +containing rows), or it contains line boxes (e.g., a paragraph 8.159 +containing lines of text). A line box contains inline-level boxes 8.160 +(e.g., a line with words in different styles). An inline-level box may 8.161 +contain either text interspersed with more inline-level boxes, or it 8.162 +may contain a block-level box (e.g., a small table that is rendered 8.163 +inline). 8.164 8.165 <div class=figure> 8.166 <p><img src="box-intro.png" alt="Schematic representation of rel"> 8.167 @@ -214,11 +273,12 @@ 8.168 <li>The second item. 8.169 </ul></pre> 8.170 8.171 -<p>may result in one block-level box for the <code>ul</code> element, 8.172 -containing two block-level boxes for the two <code>li</code> elements, each 8.173 -of which has one line box (i.e., one line of text). Both line boxes contain 8.174 -two inline-level boxes: one that contains the list bullet and one that 8.175 -contains the text. 8.176 +<p>may result in <span class=issue>[rewrite the following 8.177 +sentence?]</span> one block-level box for the <code>ul</code> element, 8.178 +containing two block-level boxes for the two <code>li</code> elements, 8.179 +each of which has one line box (i.e., one line of text). Both line 8.180 +boxes contain two inline-level boxes: one that contains the list 8.181 +bullet and one that contains the text. 8.182 8.183 <p>Note how the <code>li</code> is transformed into multiple boxes, including 8.184 one that contains “generated content,” viz., the list bullet, 8.185 @@ -226,32 +286,57 @@ 8.186 8.187 <p>If the document is rendered in a narrow window, it may be that the 8.188 <code>li</code> elements get transformed into even more boxes, because the 8.189 -text requires multiple lines. And if the document is rendered on paper, it 8.190 +text requires multiple lines. And if the document is rendered on paper 8.191 +or in multiple columns, it 8.192 may be that a page break falls in the middle of the <code>ul</code> element, 8.193 so that it is not transformed into a single block-level box, but into two 8.194 -smaller ones, each on a different page. 8.195 +smaller ones, each on a different page or column. 8.196 </div> 8.197 8.198 <p>Each box belongs to exactly one element. It is either <span 8.199 title="generated box">generated</span> directly by the element, or it 8.200 -is an <em>anonymous box</em> (defined below), which is inserted 8.201 -because the layout rules of CSS require a box to contain a certain 8.202 -kind of other box, but the boxes generated by the child elements are 8.203 -not of that kind. The anonymous box is defined to belong to the 8.204 -parent. 8.205 - 8.206 -<p class=note>Note: This is mainly important for <span 8.207 -class=index>WYSIWYG document editors</span>: if the user selects a box 8.208 -on the screen in order to set a property, the editor knows which 8.209 -element to set the property on. 8.210 - 8.211 -<p>Properties are set on elements and influence how the element is turned 8.212 -into boxes, but in this specification we refer interchangeably to “the 8.213 -<var>P</var> property of an element” and “the <var>P</var> 8.214 -property of a box” (both of which actually mean “<em>the 8.215 -value</em> of property <var>P</var> of…”), unless it is 8.216 -important to distinguish the box and the element, e.g., because the element 8.217 -has several boxes and they don't all have the same value for the property. 8.218 +is an <em>anonymous box,</em> which has been inserted to ensure that 8.219 +every box and its parent are of mutually compatible types as defined 8.220 +by the layout rules of CSS. An anonymous box is defined to belong to 8.221 +whichever element generates the box's closest element-generated 8.222 +ancestor box. When we need to be precise, we say that the anonymous 8.223 +box is <dfn>induced,</dfn> rather than generated, by the element it 8.224 +belongs to. 8.225 + 8.226 +<p class=note>For example, an anonymous table wrapper box that is 8.227 +created around a table cell because the table cell element doesn't 8.228 +have a table element as parent, belongs to the parent element of the 8.229 +table cell, not to the table cell itself. 8.230 + 8.231 +<p class=note>An anonymous box is never a <em>principal</em> 8.232 +box. Except for that, an anonymous box cannot be distinguished by its 8.233 +property values and characteristics from a box generated by some 8.234 +hypothetical document element. <span class=issue>Remove this note? Do 8.235 +we actually use the concept of “principal box” anywhere?</span> 8.236 + 8.237 +<p>Properties are set on elements [[!CSS3CASCADE]] and influence how 8.238 +the element is turned into boxes. Every box has the same properties 8.239 +with the same values as the element to which it belongs, except for 8.240 +anonymous boxes: inheritable properties on anonymous boxes have the 8.241 +same value as the element, while non-inheritable properties have the 8.242 +initial value. The only property that boxes do not have is the 8.243 +'display' property. <span class=issue>[Actually, boxes are just 8.244 +rectangles with a border, a background, a position, a bunch of other 8.245 +boxes inside, and a reference to the element they belong to. They 8.246 +don't really have properties. But it is convenient to say the “the box 8.247 +has a font <var>X</var>” rather than the verbose “the element that 8.248 +generated the box has a font <var>X</var>.”</span> 8.249 + 8.250 +<p>Boxes do not have specified values [[!CSS3CASCADE]], but they do 8.251 +have computed, used and actual values. 8.252 + 8.253 +<p class=note>Boxes are frequently referred to by their property 8.254 +values. For example, a “floated box” is a box whose computed value of 8.255 +'float' is not ''none'', and a “positioned box” is a box whose 8.256 +computed value of 'position' is not ''static''. However, terms such as 8.257 +<em>block-level box,</em> <em>block container box</em> and <em>table 8.258 +box</em> describe characteristics which cannot be deduced solely from 8.259 +a box's property values. 8.260 8.261 <div class=figure id=various> 8.262 <p><img src="box.png" alt="Diagram of a typical box, showing the 8.263 @@ -262,8 +347,11 @@ 8.264 8.265 <p>Boxes have padding, a border and margins (see the <a 8.266 href="#various">figure</a>). Different properties determine the 8.267 -thickness of each of these (which may be zero). The margins are also 8.268 -subject to <em title="collapse">collapsing.</em> 8.269 +thickness of each of these (which may be zero). The margins of 8.270 +adjacent boxes are also subject to <em 8.271 +title="collapse">collapsing</em> (i.e., the actual margin between 8.272 +adjacent boxes may be less than the sum of the boxes' individual 8.273 +margins). 8.274 8.275 <p>Each box has a <dfn>content area</dfn> (a.k.a. <dfn>content 8.276 box</dfn>). The rectangle that bounds this area is the <dfn>content 8.277 @@ -276,9 +364,10 @@ 8.278 Finally, outside the border is the <dfn>margin area</dfn> and its 8.279 outer edge is the <dfn>margin edge.</dfn> 8.280 8.281 -<p>When the specification says that the padding or border is 8.282 -“absent” on some side of the box, that actually means that its 8.283 -thickness is zero. 8.284 +<p>When the specification says that the padding or border is <dfn 8.285 +title="absent|padding!!absent|border!!absent" 8.286 +>“absent”</dfn> on some side of the box, that means that 8.287 +its thickness is zero. 8.288 8.289 <p><em title="line box">Line boxes</em> cannot have any padding, 8.290 border or margin, and therefore their margin edge, border edge, 8.291 @@ -291,14 +380,13 @@ 8.292 <p class=note>Note that the edges always form rectangles, even if 8.293 there is a 'border-radius' [[CSS3BG]] or a shape [[CSS3-EXCLUSIONS]]. 8.294 8.295 -<p>A box or element is <dfn>horizontal</dfn> if its 'writing-mode' 8.296 -property is ''horizontal-tb'', otherwise it is <dfn>vertical.</dfn> 8.297 -The <dfn>orientation</dfn> of a box or element is the pair of values 8.298 -of its 'writing-mode' and 'direction' 8.299 +<p>We say that a box or element is <dfn>horizontal</dfn> if its 8.300 +'writing-mode' property is ''horizontal-tb'', otherwise it is 8.301 +<dfn>vertical.</dfn> 8.302 8.303 <div class=note> 8.304 -<p>Note that there are theoretically eight possible orientations, but 8.305 -CSS only defines six: 8.306 +<p>Note that there are theoretically eight possible orientations for 8.307 +text, but CSS only defines six: 8.308 8.309 <table class=equiv-table> 8.310 <thead> 8.311 @@ -316,7 +404,7 @@ 8.312 src="horizontal.png" alt=""> 8.313 <td> 8.314 <p>Text is written top to bottom and paragraphs grow to 8.315 - the left <p><img class=small src="vertical-rl.png" 8.316 + the left <p><img class=small src="vertical.png" 8.317 alt=""> 8.318 <td> 8.319 <p>Text is written top to bottom and paragraphs grow to 8.320 @@ -326,22 +414,36 @@ 8.321 <th>'direction: rtl' 8.322 <td> 8.323 <p>Text is written from right to left and paragraphs 8.324 - grow downwards 8.325 + grow downwards <p><img class=small 8.326 + src="horizontal-rtl.png" alt=""> 8.327 <td> 8.328 <p>Text is written bottom to top and paragraphs grow to 8.329 - the left 8.330 + the left <p><img class=small src="vertical-rtl.png" 8.331 + alt=""> 8.332 <td> 8.333 <p>Text is written bottom to top and paragraphs grow to 8.334 - the right 8.335 + the right <p><img class=small src="vertical-lr-rtl.png" 8.336 + alt=""> 8.337 </table> 8.338 8.339 -<p>There is no “horizontal-bt.” 8.340 +<p>There is no “horizontal-bt.” More information about 'writing-mode' 8.341 +and 'direction' can be found in [[!CSS3-WRITING-MODES]]. 8.342 </div> 8.343 8.344 -<p>This specification sometimes refers to abstract edges 8.345 -<dfn>head,</dfn> <dfn>end,</dfn> <dfn>tail</dfn> and <dfn>start,</dfn> 8.346 -which are relative to the orientation of a box. They map to top, 8.347 -right, bottom and left as follows: 8.348 +<p class=mtb>Calculations of the size and position of boxes are 8.349 +usually very similar for horizontal and vertical boxes, except that 8.350 +the horizontal and vertical directions are interchanged. To avoid many 8.351 +almost identical definitions, this specification therefore often uses 8.352 +abstract terms instead of top, right, bottom, left, width and height: 8.353 +four terms (head edge, foot edge, start edge and end edge) for the 8.354 +four edges of a box, four terms (A edge, B edge, C edge and D edge) 8.355 +for the edges of the children of a box and two terms (block dimension 8.356 +and inline dimension for the width and height of a box. 8.357 + 8.358 +<p>The <dfn>head,</dfn> <dfn>foot,</dfn> <dfn>start</dfn> and 8.359 +<dfn>end</dfn> edge of a box refer to the top, right, bottom and left 8.360 +edges, depending on the 'writing-mode' and 'direction' properties of 8.361 +that box, as follows: 8.362 8.363 <table class=equiv-table> 8.364 <thead> 8.365 @@ -350,155 +452,97 @@ 8.366 <th>Value of 'direction' 8.367 <th>Meaning of “head” 8.368 <th>Meaning of “end” 8.369 - <th>Meaning of “tail” 8.370 + <th>Meaning of “foot” 8.371 <th>Meaning of “start” 8.372 <tbody> 8.373 - <tr><th>''horizontal-tb'' <th>''ltr'' 8.374 - <td>top <td>right <td>bottom <td>left 8.375 - <tr><th>''horizontal-tb'' <th>''rtl'' 8.376 - <td>top <td>left <td>bottom <td>right 8.377 - <tr><th>''vertical-rl'' <th>''ltr'' 8.378 - <td>right <td>bottom <td>left <td>top 8.379 - <tr><th>''vertical-rl'' <th>''rtl'' 8.380 - <td>right <td>top <td>left <td>bottom 8.381 - <tr><th>''vertical-lr'' <th>''rtl'' 8.382 - <td>left <td>bottom <td>right <td>top 8.383 - <tr><th>''vertical-lr'' <th>''ltr'' 8.384 - <td>left <td>top <td>right <td>bottom 8.385 + <tr><th rowspan=2>''horizontal-tb'' <th>''ltr'' 8.386 + <td>top <td>right <td>bottom <td>left 8.387 + <tr><!-- horizontal-tb --><th>''rtl'' 8.388 + <td>top <td>left <td>bottom <td>right 8.389 + <tr><th rowspan=2>''vertical-rl'' <th>''ltr'' 8.390 + <td>right <td>bottom <td>left <td>top 8.391 + <tr><!-- vertical-rl'' --><th>''rtl'' 8.392 + <td>right <td>top <td>left <td>bottom 8.393 + <tr><th rowspan=2>''vertical-lr'' <th>''rtl'' 8.394 + <td>left <td>bottom <td>right <td>top 8.395 + <tr><!-- vertical-lr --><th>''ltr'' 8.396 + <td>left <td>top <td>right <td>bottom 8.397 </table> 8.398 8.399 -<p>For example, the “head padding” by default refers to the 8.400 +<p class=note>For example, the “head padding” by default refers to the 8.401 'padding-top' and the “end border” is by default the 'border-right'. 8.402 8.403 -<div class=issue> 8.404 -<p>[Alternative terminology:] 8.405 - 8.406 -<p>This specification sometimes refers to abstract edges 8.407 -<dfn>A,</dfn> <dfn>B,</dfn> <dfn>C</dfn> and <dfn>D,</dfn> 8.408 -which are relative to the orientation of a box. They map to top, 8.409 -right, bottom and left as follows: 8.410 +<p>Similarly, the specification sometimes refers to the <dfn>inline 8.411 +dimension</dfn> and <dfn>block dimension</dfn> of a box, instead of 8.412 +width and height, as follows: 8.413 + 8.414 + <table class=equiv-table> 8.415 + <tr> 8.416 + <th>'Writing mode' 8.417 + <th>Meaning of “inline dimension” 8.418 + <th>Meaning of “block dimension” 8.419 + <tr><td>''horizontal-tb'' <td>width <td>height 8.420 + <tr><td>''vertical-rl'' <td>height <td>width 8.421 + <tr><td>''vertical-lr'' <td>height <td>width 8.422 + </table> 8.423 + 8.424 +<p>These correspond to the dimensions in the <em>inline base 8.425 +direction</em> and the <em>block flow direction,</em> respectively. 8.426 + 8.427 +<p>An alternative term for the inline dimension is <dfn title="logical 8.428 +width|width!!logical" >logical width</dfn> and an alternative term for 8.429 +block dimension is <dfn title="logical height|height!!logical" 8.430 +>logical height.</dfn> These terms occasionally occur in other CSS 8.431 +modules. 8.432 + 8.433 +<p class=note>The block dimension of a box is thus the distance 8.434 +between the head and tail edges, while the inline dimension of the box 8.435 +is the distance between the start and end edges. 8.436 + 8.437 +<p>When boxes are laid out in sequence to form a <em class=index 8.438 +>flow</em> (see below), their edges play different roles in the 8.439 +alignment of the boxes within that flow. The orientation of the flow 8.440 +determines which edge of a box is aligned to which edge of another 8.441 +box. These roles are independent of the orientation of the box 8.442 +itself. We distinguish four roles for the edges of a box, called 8.443 +<dfn>A edge,</dfn> <dfn>B edge,</dfn> <dfn>C edge</dfn> and <dfn>D 8.444 +edge.</dfn> They depend on the 'writing-mode' and 'direction' 8.445 +properties of the box's <em class=index >containing block</em> 8.446 +(defined below), and map to the four sides as follows: 8.447 8.448 <table class=equiv-table> 8.449 <thead> 8.450 <tr> 8.451 - <th>Value of 'writing-mode' 8.452 - <th>Value of 'direction' 8.453 + <th>'writing-mode' of <em>containing block</em> 8.454 + <th>'direction' of <em>containing block</em> 8.455 <th>Meaning of “A” 8.456 <th>Meaning of “B” 8.457 <th>Meaning of “C” 8.458 <th>Meaning of “D” 8.459 <tbody> 8.460 - <tr><th>''horizontal-tb'' <th>''ltr'' 8.461 + <tr><th rowspan=2>''horizontal-tb'' <th>''ltr'' 8.462 <td>top <td>right <td>bottom <td>left 8.463 - <tr><th>''horizontal-tb'' <th>''rtl'' 8.464 + <tr><!-- horizontal-tb --><th>''rtl'' 8.465 <td>top <td>left <td>bottom <td>right 8.466 - <tr><th>''vertical-rl'' <th>''ltr'' 8.467 + <tr><th rowspan=2>''vertical-rl'' <th>''ltr'' 8.468 <td>right <td>bottom <td>left <td>top 8.469 - <tr><th>''vertical-rl'' <th>''rtl'' 8.470 + <tr><!-- vertical-rl --><th>''rtl'' 8.471 <td>right <td>top <td>left <td>bottom 8.472 - <tr><th>''vertical-lr'' <th>''rtl'' 8.473 + <tr><th rowspan=2>''vertical-lr'' <th>''rtl'' 8.474 <td>left <td>bottom <td>right <td>top 8.475 - <tr><th>''vertical-lr'' <th>''ltr'' 8.476 + <tr><!-- vertical-lr --><th>''ltr'' 8.477 <td>left <td>top <td>right <td>bottom 8.478 </table> 8.479 8.480 -<p>For example, the “A padding” by default refers to the 8.481 -'padding-top' and the “B border” is by default the 'border-right'. 8.482 -</div> 8.483 - 8.484 -<p>Similarly, the specification sometimes refers to the 8.485 -<dfn title="inline dimension">inline</dfn> and <dfn title="block flow 8.486 -dimension">block flow</dfn> dimensions of a box, instead of width and 8.487 -height, as follows: 8.488 - 8.489 - <table class=equiv-table> 8.490 - <tr> 8.491 - <th>Writing mode 8.492 - <th>Meaning of “inline dimension” 8.493 - <th>Meaning of “block flow dimension” 8.494 - <tr><td><span>horizontal</span> <td>width <td>height 8.495 - <tr><td><span>vertical</span> <td>height <td>width 8.496 - </table> 8.497 - 8.498 -<p>These correspond to the dimensions in the <em>inline base 8.499 -direction</em> and the <em>block flow direction,</em> respectively. 8.500 - 8.501 -<div class=issue> 8.502 -<p>[Alternative terminology:] 8.503 - 8.504 -<p>Similarly, the specification sometimes refers to the <dfn>B-D</dfn> 8.505 -and <dfn>A-C</dfn> dimensions of a box, instead of width and height, 8.506 -as follows: 8.507 - 8.508 - <table class=equiv-table> 8.509 - <tr> 8.510 - <th>Writing mode 8.511 - <th>Meaning of “B-D” 8.512 - <th>Meaning of “A-C” 8.513 - <tr><td><span>horizontal</span> <td>width <td>height 8.514 - <tr><td><span>vertical</span> <td>height <td>width 8.515 - </table> 8.516 - 8.517 -<p>These correspond to the dimensions in the <em>inline base 8.518 -direction</em> and the <em>block flow direction,</em> respectively. 8.519 -</div> 8.520 - 8.521 -<p>Finally, the <dfn>headside,</dfn> <dfn>endside,</dfn> 8.522 -<dfn>tailside</dfn> and <dfn>startside</dfn> of a box are defined as 8.523 -the sides that correspond to the <em>head,</em> <em>end,</em> 8.524 -<em>tail</em> and <em>start,</em> of the <em>containing block</em> of 8.525 -the box. 8.526 - 8.527 -<div class=example> 8.528 - <p>For example, if a box has a 'writing-mode' of ''horizontal-tb'', 8.529 - then its top content edge acts as its <em>head</em> content edge, 8.530 - and the <em>headside</em> edges of its children are therefore their 8.531 - top edges, independent of what their own 'writing-mode' is. 8.532 - 8.533 - <div class=figure> 8.534 - <p><img src="headside" alt="[Figure: the “head content edge” of 8.535 - the child box the right edge, but the“headside content edge” is 8.536 - the top.]"> 8.537 - 8.538 - <p class=caption>The second child box is a vertical box and has 8.539 - its “head” content edge on the right. But its “headside” 8.540 - content edge is at the top. 8.541 - </div> 8.542 -</div> 8.543 - 8.544 -<div class=issue> 8.545 -<p>[Alternative terminology:] 8.546 - 8.547 -<p>Finally, the <dfn>A′,</dfn> <dfn>B′,</dfn> 8.548 -<dfn>C′</dfn> and <dfn>D′</dfn> sides of a box are defined 8.549 -as the sides that correspond to the <em>A,</em> <em>B,</em> <em>C</em> 8.550 -and <em>D</em> sides of the <em>containing block</em> of the box. 8.551 - 8.552 -<div class=example> 8.553 - <p>For example, if a box has a 'writing-mode' of ''horizontal-tb'', 8.554 - then its top content edge acts as its <em>A</em> content edge, and 8.555 - the <em>A′</em> edges of its children are therefore their top 8.556 - edges, independent of what their own 'writing-mode' is. 8.557 - 8.558 - <div class=figure> 8.559 - <p><img src="headside" alt="[Figure: the “A content edge” of 8.560 - the child box the right edge, but the “A′ content edge” is 8.561 - the top.]"> 8.562 - 8.563 - <p class=caption>The second child box is a vertical box and has 8.564 - its “A” content edge on the right. But its “A′” content edge 8.565 - is at the top. 8.566 - </div> 8.567 -</div><!-- /figure --> 8.568 -</div><!-- /example --> 8.569 -</div><!-- /issue --> 8.570 - 8.571 -<p class=issue>Check terms. At Cambridge ftf Aug 2008 we chose: 8.572 -Property name: block-flow with values tb | lr | rl | bt. Descriptive 8.573 -terms: horizontal mode (= tb & bt), vertical mode (= lr & 8.574 -rl). The May 2012 Writing Modes module now has 'writing-mode' with 8.575 -values ''horizontal-tb'', ''vertical-rl'' and ''vertical-lr'' (and no 8.576 -''bt'' anymore). 8.577 +<p class=note>For example, block-level boxes in a flow are laid out 8.578 +such that the A edge of the first box is against the head edge of the 8.579 +containing block and then the A edge of each subsequent box is put 8.580 +against the C edge of its predecessor. For typical English text (i.e., 8.581 +<em>horizontal</em> text), this means the top edge (= A edge) of the 8.582 +first paragraph is at the top edge (= head edge) of the document, the 8.583 +top (A edge) of the second paragraph is against the bottom (C edge) of 8.584 +the first paragraph, and so on, until the bottom (C edge) of the last 8.585 +paragraph becomes the bottom (tail edge) of the document. 8.586 8.587 8.588 8.589 @@ -522,116 +566,171 @@ 8.590 8.591 8.592 8.593 -<h2>Aspect ratios of replaced elements</h2> 8.594 - 8.595 -<p>For the purposes of the width and height calculations below, CSS 8.596 -distinguishes four kinds of <em title="replaced element" 8.597 -class=index>replaced elements</em>: 8.598 - 8.599 -<dl> 8.600 -<dt>Type 1: replaced elements with both <em class=index>intrinsic 8.601 -width</em> and <em class=index>intrinsic height.</em> <dd>These are 8.602 -replaced elements that are meant to be displayed with a certain fixed 8.603 -factor (the <em>intrinsic ratio</em>) between their width and height 8.604 -and also have a default size. Different formats may have different 8.605 -ways of specifying the size, e.g., a width and a ratio, or a raster 8.606 -and a resolution in dots per inch. Raster images fall in this 8.607 -category. 8.608 - 8.609 -<dt>Type 2: replaced elements with only an <em>intrinsic ratio</em> 8.610 -<dd>These are replaced elements that are meant to be displayed with a 8.611 -certain fixed factor between their width and height, but without a 8.612 -default size. <span class=index>SVG</span> images often fall in the 8.613 -this category. 8.614 - 8.615 -<dt>Type 3: replaced elements with a <dfn>complex aspect ratio</dfn> 8.616 -<dd>These are replaced elements that do not have a <em>fixed</em> 8.617 -ratio between their width and height, but that do have a functional 8.618 -relation between them in the sense that for every width there is a 8.619 -unique height. HTML documents are examples of this: the width can be 8.620 -chosen freely, but at every width there is a definite intrinsic 8.621 -height. 8.622 - 8.623 -<dt>Type 4: replaced elements without an intrinsic ratio <dd>These are 8.624 -replaced elements that have no relation between their width and 8.625 -height. Certain <span class=index>SVG</span> images are examples of 8.626 -this. 8.627 -</dl> 8.628 - 8.629 -<p>For <span class=index>raster images</span> without reliable 8.630 -resolution information, a size of 1 px unit per image source pixel 8.631 -must be assumed. These images thus are of type 1. 8.632 +<h2>Flows</h2> 8.633 + 8.634 +<p>The <dfn>flow</dfn> (sometimes called <dfn>normal flow</dfn>) is 8.635 +one of the two basic kinds of layout in CSS, together with line layout 8.636 +[[CSS3LINE]]. It can be used, e.g., to layout a sequence of 8.637 +paragraphs, headings, lists and floated elements in a single 8.638 +column. Other CSS modules, such as tables [[CSS3TBL]], positioning 8.639 +[[CSS3POS]], flex boxes [[CSS3-FLEXBOX]] and grid templates 8.640 +[[CSS3LAYOUT]], build on the flow model by defining ways to split a 8.641 +document into more than one flow and positioning and aligning those 8.642 +flows in various ways on the canvas. 8.643 + 8.644 +<p>A flow is constructed starting from a <span class=index title="flow 8.645 +root!!box" >box</span> called the <dfn>flow root</dfn> by the <a 8.646 +href="#construct-flow">rules below.</a> We say the flow is 8.647 +<dfn>channeled</dfn> by the flow root. 8.648 + 8.649 +<p>The <dfn title="initial flow|flow!!initial" >initial flow</dfn> is 8.650 +the flow that contains the root of the box tree. 8.651 + 8.652 +<p>Despite not being a box, the <em>initial containing block</em> is 8.653 +said to be the flow root of the initial flow. 8.654 + 8.655 +<p class=issue id=pagination-issue>How do we model pagination? If a 8.656 +flow is broken over two pages or columns, do we call it a single flow 8.657 +or two flows? I.e., is the page box the flow root of the flow, or is 8.658 +the page box something else, more like the viewport, which influences 8.659 +the layout of a flow but isn't part of it? 8.660 + 8.661 +<p>Only <em title="block container box" >block container boxes</em> 8.662 +(defined below) can be flow roots. (Which implies that the children of 8.663 +a flow root are laid out in a <em>block formatting context.</em>) 8.664 + 8.665 +<p>Several (combinations of) properties cause an element to generate 8.666 +boxes that are flow roots. This module defines a few. Other modules 8.667 +may define more. 8.668 + 8.669 +<div class=note> 8.670 +<p>For example, this module defines that any of the following make a 8.671 +box into a flow root: 8.672 +<ul> 8.673 + <li>The value of 'float' is not 'none'. 8.674 + 8.675 + <li>The used value of 'overflow' is not 'visible'. 8.676 + 8.677 + <!-- <li>The box is a table wrapper, a table cell, an inline block, or an 8.678 + align box. --> 8.679 + 8.680 + <!-- <li>The value of 'position' is 'absolute' or 'fixed' (see 8.681 + [CSS3POS]). --> 8.682 + 8.683 + <li>The box is vertical and its parent is horizontal. <span 8.684 + class=issue>[Add link to the relevant section.]</span> 8.685 + 8.686 + <li>The box is horizontal and its parent is vertical. 8.687 + 8.688 + <!-- <li>The value of 'transform' is not 'none'. --> 8.689 + 8.690 + <li>The value of 'child-align' is not 'auto'. <span class=issue>[If 8.691 + 'child-align' is adopted, rather than, say, 'margin: fill']</span> 8.692 +</ul> 8.693 + 8.694 +<p>The table layout module [[CSS3TBL]] defines that a table cell 8.695 +generates a box that is a flow root; the positioning module 8.696 +[[CSS3POS]] defines that an absolutely positioned element generates a 8.697 +flow root; the grid template module [[CSS3LAYOUT]] defines that a 8.698 +template element generate several flow roots; and the transforms 8.699 +module [[CSS3-TRANSFORMS]] defines that an element with a transform 8.700 +generates a flow root 8.701 +</div> 8.702 + 8.703 +<p class=mtb id=construct-flow>The flow of a given <em>flow root</em> 8.704 +is a set of boxes. A box belongs to the flow if all of the following 8.705 +are true: 8.706 +<ol> 8.707 + <li>The used value of its 'display' is ''block'', ''list-item'' or 8.708 + ''table''. 8.709 + 8.710 + <li>The used value of its 'float' is ''none''. 8.711 + 8.712 + <li>The used value of its 'position' is ''static'' or ''relative''. 8.713 + 8.714 + <li>It is either a child of the flow root or a child of a box that 8.715 + belongs to the flow. 8.716 +</ol> 8.717 + 8.718 +<p class=note>Note that the flow root is itself not part of the flow 8.719 +it channels and that each flow root channels at most one flow. 8.720 + 8.721 +<p class=note>Note that the last rule above implies that a flow with 8.722 +its flow root together are always a connected subset of the box 8.723 +tree. In other words; together, they form a subtree of the box tree 8.724 +with possibly some branches removed. 8.725 + 8.726 +<p class=note>Note that the element tree and the box tree are not 8.727 +necessarily parallel: the element a box belongs to need not be the 8.728 +child of the element that generated the box's parent. E.g., run-in 8.729 +elements may generate boxes that become children of boxes from sibling 8.730 +elements; and the 'flow' property [[CSS3LAYOUT]] and the 'position' 8.731 +property [[CSS3POS]] may cause an element to generate a box that 8.732 +becomes the child of a box from a grandparent or other ancestor 8.733 +element. E.g., 'DIV {flow: b}' (see [[CSS3LAYOUT]]) makes the DIV 8.734 +generate boxes that become children of the box generated by slot b in 8.735 +some ancestor. And 'DIV {position: absolute}' causes the DIV to 8.736 +generate a box that becomes a child of the box generated by the 8.737 +ancestor that established the DIV's <em>containing block.</em> 8.738 8.739 <div class=example> 8.740 -<p>E.g., in the section on <a href="#inline-replaced">inline replaced 8.741 -elements,</a> if the replaced element is an HTML document and the 8.742 -height is specified as ''auto'', e.g.: 8.743 -<pre> 8.744 -... <object data="example.html" 8.745 - style="width: 30em; height: auto"></object>... 8.746 -</pre> 8.747 -<p>then the used height will be 150px, which is unlikely to be the 8.748 -real height of the example.html document. But if the height is 8.749 -specified as ''complex'', e.g.: 8.750 -<pre> 8.751 -... <object data="example.html" 8.752 - style="width: 30em; height: complex"></object>... 8.753 -</pre> 8.754 -<p>then the height will be the height the example.html document 8.755 -normally has when displayed on its own with the given width. This 8.756 -enables almost seamless integration of external text in a document, 8.757 -without a scrollbar or similar. (The external text is still displayed 8.758 -with its own style sheet.) 8.759 +<p>For example, the fragment 8.760 +<pre><div class=sidebar> 8.761 + <p>Text in a sidebar. 8.762 + <p>Here is quote: 8.763 + <blockquote lang=ja> 8.764 + <p>... 8.765 + </blockquote> 8.766 + <p>Etc. etc. 8.767 +</div> </pre> 8.768 + 8.769 +<p>with the style 8.770 +<pre>div.sidebar { writing-mode: tb; float: left } 8.771 +blockquote[lang|=ja] { writing-mode: rl; height: 10em }</pre> 8.772 + 8.773 +<p>defines two flows: 8.774 +<ol> 8.775 + <li>The <code>div</code> is a flow root, because it floats. Its flow 8.776 + consist of the 1st, 2nd and 4th <code>p</code> and the 8.777 + <code>blockquote</code>. 8.778 + 8.779 + <li>The <code>blockquote</code> is a <em>vertical</em> box inside a 8.780 + <em>horizontal</em> parent and it is thus a flow root. Its flow is 8.781 + formed by the 3rd <code>p</code>. 8.782 +</ol> 8.783 +<p>(The <code>div</code> itself belongs to a third flow, but its flow 8.784 +root is not shown in the fragment.) 8.785 </div> 8.786 8.787 -<div class=example> 8.788 -<p>An (external) mathematical formula in MathML is an example of 8.789 -replaced content with an intrinsic width and height. Assume the file m.mml 8.790 -contains a formula, then the HTML fragment 8.791 - 8.792 -<pre> 8.793 -... derive <img src="m.mml" 8.794 -alt="that the sum of p(i) for i greater than 0 equals N"> 8.795 -for the case... 8.796 -</pre> 8.797 - 8.798 -<p>renders the formula at its intrinsic size. 8.799 -</div> 8.800 - 8.801 -<p class=issue>The mathematical formula would however benefit from a 8.802 -way to negotiate available space against intrinsic size, or even 8.803 -negotiate available space against the number of boxes, so that the 8.804 -formula could be broken in two or more boxes and occupy space on two 8.805 -or more lines (similar to how lines of text are broken or words are 8.806 -hyphenated). But an easier solution might be to extend HTML with 8.807 -native support for math and CSS with math boxes, so that replaced 8.808 -elements remain single boxes. 8.809 - 8.810 - 8.811 - 8.812 -<h2>Basic flow layout</h2> 8.813 - 8.814 -<p>As described in the introduction, elements give rise to boxes and 8.815 -those boxes are laid out on a <em>canvas.</em> Different kinds of 8.816 -boxes are laid out differently. This section describes the layout of 8.817 -one <em>flow</em> of boxes. 8.818 - 8.819 -<p>The approximate model for the layout of a flow of boxes is that 8.820 -sibling boxes are laid out one after the other in one long series with 8.821 -margins between them and parent boxes tightly wrap the series of child 8.822 -boxes. The 'writing-mode' property of the parent determines if that series 8.823 -grows down (''tb''), to the left (''rl''), to the right (''lr'') or up 8.824 -(''bt''). Although the rules below depend on terms that are only 8.825 -defined further down, the rules are given at the outset, to provide at 8.826 -least an approximate model of how boxes are positioned relative to one 8.827 -another. 8.828 - 8.829 -<p>The following rules define the position of <em>block-level</em> 8.830 -boxes relative to the box that is their <em>flow root.</em> Other 8.831 -sections and other modules describe how other boxes are laid out. 8.832 -E.g., floating boxes are described further down in this module and 8.833 -absolutely positioned boxes are described in the Absolute Positioning 8.834 -module [[CSS3POS]]. 8.835 +<p class=note>Note that a flow root is not necessarily block-level, it may 8.836 +be an ''inline-block'', e.g. 8.837 + 8.838 +<p class=note>Note that a box belongs to at most one flow. (Some boxes 8.839 +do not belong to any flow, because they are part of a different kind of 8.840 +layout, such as table layout.) 8.841 + 8.842 +<p>An element that generates a flow root box is itself also called a 8.843 +<span class=index title="flow root!!element">flow root.</span> 8.844 + 8.845 +<p class=note>Note: The terminology in the CSS level 2 specification 8.846 +is different. A flow root is called “an element that establishes a 8.847 +<span class=index title="formatting context|new formatting 8.848 +context">new formatting context.</span>” 8.849 + 8.850 +<p class=note>A consequence of this terminology is that an 8.851 +<em>element,</em> unlike a box, can be the flow root of several 8.852 +flows. E.g., template elements [[CSS3LAYOUT]] generate several flow 8.853 +root boxes. Depending on what properties are set on a list item and on 8.854 +its marker pseudo-element, a list item can also generate zero, one or 8.855 +two flow roots. 8.856 + 8.857 +<!-- 8.858 +<p class=mtb>The following rules define the position of 8.859 +<em>block-level</em> boxes relative to the box that is their <em>flow 8.860 +root.</em> Other sections and other modules describe how other boxes 8.861 +are laid out. E.g., floating boxes are described further down in this 8.862 +module and absolutely positioned boxes are described in the Absolute 8.863 +Positioning module [[CSS3POS]]. 8.864 8.865 <p>Before applying these rules, the width, height and margins of each 8.866 box must be computed as described in the sections <a 8.867 @@ -645,28 +744,24 @@ 8.868 <ol> 8.869 <li> 8.870 <p>If none of its margins <span>collapse</span> with its 8.871 - parent's <span>head</span> margin and the box is 8.872 - not <span>collapsed through,</span> then the box is placed 8.873 - such that the box's <span>headside</span> <span>margin 8.874 - edge</span> touches the 8.875 - parent's <span>head</span> <span>content edge</span>, 8.876 - the <span>startside</span> <span>margin edge</span> touches 8.877 - the parent's <span>start</span> <span>content edge</span> and 8.878 - the <span>endside</span> <span>margin edge</span> touches the 8.879 - parent's <span>end</span> <span>content edge.</span> 8.880 - 8.881 - <p class=issue>[Add illustration.] 8.882 - 8.883 - <p class=issue>[Alternative terminology:] If none of its 8.884 - margins <span>collapse</span> with its parent's <span>A</span> 8.885 - margin and the box is not <span>collapsed through,</span> then 8.886 - the box is placed such that the box's <span>A′</span> 8.887 - <span>margin edge</span> touches the parent's <span>A</span> 8.888 - <span>content edge</span>, the <span>D′</span> 8.889 - <span>margin edge</span> touches the parent's <span>D</span> 8.890 - <span>content edge</span> and the <span>B′</span> 8.891 - <span>margin edge</span> touches the parent's <span>B</span> 8.892 - <span>content edge.</span> 8.893 + parent's <span>head</span> margin and the box is not 8.894 + <span>collapsed through,</span> then the box is placed such 8.895 + that the box's margin <span>A edge</span> coincides with the 8.896 + parent's <span>head</span> <span>content edge</span>, the 8.897 + margin <span>D edge</span> touches the parent's 8.898 + <span>start</span> <span>content edge</span> and the margin 8.899 + <span>B edge</span> touches the parent's <span>end</span> 8.900 + <span>content edge.</span> 8.901 + 8.902 + <div class=figure> 8.903 + <p><img src="flow1.png" alt="For example:"> 8.904 + 8.905 + <p class=caption>In a <em>horizontal</em> <em>containing 8.906 + block,</em> the top edge (<em>head</em> edge) is used to 8.907 + position the top edge (<em>A edge</em>) of the first 8.908 + block-level box. Its left and right edges coincide with the 8.909 + left and right edges of the block-level box. 8.910 + </div> 8.911 8.912 <li> 8.913 <p>If none of its margins <span>collapse</span> with its 8.914 @@ -683,28 +778,27 @@ 8.915 as floating or absolutely positioned children. 8.916 8.917 <li> 8.918 - <p>If exactly one of its margins collapses with its 8.919 - parent's <span>head</span> margin, then the box is placed such 8.920 - that the box's <span>headside</span> <span>border edge</span> 8.921 - touches the parent's <span>head</span> <span>content 8.922 - edge,</span> the <span>startside</span> <span>margin 8.923 - edge</span> touches the 8.924 - parent's <span>start</span> <span>content edge</span> and 8.925 - the <span>endside</span> <span>margin edge</span> touches the 8.926 - parent's <span>end</span> <span>content edge.</span> 8.927 + <p>If its <span title="A edge">A</span> margin collapses with 8.928 + its parent's <span>head</span> margin, then the box is placed 8.929 + such that the <span>A edge</span> of the box's border touches 8.930 + the parent's <span>head</span> <span>content edge,</span> the 8.931 + <span>D edge</span> of the box's margin touches the parent's 8.932 + <span>start</span> <span>content edge</span> and the <span>B 8.933 + edge</span> of the box's margin touches the parent's 8.934 + <span>end</span> <span>content edge.</span> 8.935 8.936 <p class=issue>[Add illustration.] 8.937 8.938 <li> 8.939 - <p>If two of its margins collapse with its 8.940 - parent's <span>head</span> margin, then its position is such 8.941 - that its <span>content edge</span> (which is also 8.942 - its <span>border edge</span>) touches its 8.943 - parent's <span>head</span> <span>border edge</span> and that 8.944 - its <span>startside</span> <span>margin edge</span> touches 8.945 - its parent's <span>start</span> <span>content edge</span> and 8.946 - its <span>endside</span> <span>margin edge</span> touches the 8.947 - parent's <span>end</span> <span>content edge.</span> 8.948 + <p>If two of its margins collapse with its parent's 8.949 + <span>head</span> margin, then its position is such that its 8.950 + <span>content edge</span> (which is also its <span>border 8.951 + edge</span>) touches its parent's <span>head</span> 8.952 + <span>border edge</span> and that the <span>D edge</span> of 8.953 + its margin touches its parent's <span>start</span> 8.954 + <span>content edge</span> and the <span>B edge</span> of its 8.955 + margin touches the parent's <span>end</span> <span>content 8.956 + edge.</span> 8.957 8.958 <p class=note>Note that the box is effectively invisible, but 8.959 the edges have to be defined to position any descendants. 8.960 @@ -716,11 +810,14 @@ 8.961 <ol> 8.962 <li> 8.963 <p>If the box is not <span>collapsed through,</span> it is 8.964 - positioned such that its <span>margin edge</span> touches the 8.965 - parent's <span>start</span> <span>content edge</span> 8.966 - and <span>end</span> <span>content edge</span> and such that 8.967 - its content edge on the touches 8.968 - the <span class=issue>[...]</span> 8.969 + positioned such that the <span>D edge</span> of its margin 8.970 + touches the parent's <span>start</span> <span>content 8.971 + edge,</span> the <span>B edge</span> of its margin touches the 8.972 + parent's <span>end</span> <span>content edge</span> and the 8.973 + <span>A edge</span> of its border box is at a distance from 8.974 + the <span>C edge</span> of the preceding sibling's border box 8.975 + equal to the combined thickness of the margins that collapse 8.976 + at that edge. 8.977 8.978 <li> 8.979 <p>A box that has a preceding sibling in the same flow and that 8.980 @@ -728,7 +825,7 @@ 8.981 through,</span> <span class=issue>[...]</span> 8.982 </ol> 8.983 </ul> 8.984 - 8.985 +--> 8.986 8.987 8.988 <h2>Types of boxes</h2> 8.989 @@ -740,20 +837,22 @@ 8.990 <h3 id=display>The display property</h3> 8.991 8.992 <table class="propdef"> 8.993 - <tr><td>Name: <td><dfn>display</dfn> 8.994 - <tr><td>Value: <td>inline | block | inline-block | list-item | 8.995 + <tr><th>Name: <td><dfn>display</dfn> 8.996 + <tr><th>Value: <td>inline | block | inline-block | list-item | 8.997 run-in | compact | table | inline-table | table-row-group | 8.998 table-header-group | table-footer-group | table-row | 8.999 table-column-group | table-column | table-cell | table-caption | 8.1000 ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | 8.1001 - align-box | none 8.1002 - <tr><td>Initial: <td>inline 8.1003 - <tr><td>Applies to:<td>all elements 8.1004 - <tr><td>Inherited: <td>no 8.1005 - <tr><td>Percentages: <td>N/A 8.1006 - <tr><td>Media: <td>visual (''none'' applies to all media) 8.1007 - <tr><td>Computed value: <td>specified value, except for floats, root 8.1008 + container | none 8.1009 + <tr><th>Initial: <td>inline 8.1010 + <tr><th>Applies to:<td>all elements 8.1011 + <tr><th>Inherited: <td>no 8.1012 + <tr><th>Animatable: <td>no 8.1013 + <tr><th>Percentages: <td>N/A 8.1014 + <tr><th>Media: <td>visual (''none'' applies to all media) 8.1015 + <tr><th>Computed value: <td>specified value, except for floats, root 8.1016 elements and positioned elements; see text 8.1017 + <tr><th>Canonical order: <td>N/A 8.1018 </table> 8.1019 8.1020 <p class=issue>There is an old proposal to split 'display' into 8.1021 @@ -776,29 +875,39 @@ 8.1022 The values are as follows: 8.1023 8.1024 <dl> 8.1025 - <dt>inline <dd>Inline boxes. 8.1026 - 8.1027 - <dt>block <dd>Block boxes. 8.1028 - 8.1029 - <dt>inline-block <dd>A block box, which itself is flowed as a single 8.1030 - inline box, similar to a replaced element. The inside of an 8.1031 + <dt>inline <dd>One or more <em>inline-level,</em> <em>inline 8.1032 + container</em> boxes. (There may be more than one, e.g., if the 8.1033 + element is broken over two lines or if bidi reordering causes some 8.1034 + of the text in the content to be displayed after the text of some 8.1035 + other element.) 8.1036 + 8.1037 + <dt>block <dd>One or more <em>block-level,</em> <em>block 8.1038 + container</em> boxes. (There may be more than one box, e.g., if the 8.1039 + element is broken over two columns or pages.) 8.1040 + 8.1041 + <dt>inline-block <dd>An <em>atomic,</em> <em>inline-level,</em> 8.1042 + <em>block container</em> box. (In other words: the inside of an 8.1043 inline-block is formatted as a block box, and the box itself is 8.1044 - formatted as an inline box. 8.1045 - 8.1046 - <dt>list-item <dd>One or more block boxes and one marker box. Marker 8.1047 + formatted as an inline box.) The box is a <em>flow root.</em> 8.1048 + 8.1049 + <dt>list-item <dd>One or more <em>block-level,</em> <em>block 8.1050 + container</em> boxes and an optional marker box. Marker 8.1051 boxes are defined in the Lists module [[CSS3LIST]]. <span 8.1052 class=issue>If the Lists module is not ready, define the position of 8.1053 the marker and the list-style property here? Or refer to CSS 2.1 8.1054 instead?</span> 8.1055 8.1056 - <dt>run-in <dd>Either block or inline boxes, depending on context 8.1057 - (see <a href="#run-in-boxes">Run-in boxes</a>). Properties apply to 8.1058 - run-in boxes based on their final status (<span>inline-level</span> 8.1059 - or <span>block-level</span>). 8.1060 - 8.1061 - <dt>compact <dd>Either block boxes or a marker box, depending on 8.1062 - context (see <a href="#compact-boxes">Compact boxes</a>). Properties 8.1063 - apply to compact boxes based on their final status. 8.1064 + <dt>run-in <dd>Either one or more <em>block-level,</em> <em>block 8.1065 + container</em> boxes, or one or more <em>inline-level,</em> 8.1066 + <em>inline container</em> boxes, depending on context (see <a 8.1067 + href="#run-in-boxes">Run-in boxes</a>). Properties apply to run-in 8.1068 + boxes based on their final status (<span>inline-level</span> or 8.1069 + <span>block-level</span>). 8.1070 + 8.1071 + <dt>compact <dd>Either one or more <em>block-level,</em> <em>block 8.1072 + container</em> boxes or a single marker box, depending on context 8.1073 + (see <a href="#compact-boxes">Compact boxes</a>). Properties apply 8.1074 + to compact boxes based on their final status. 8.1075 8.1076 <dt>table, inline-table, table-row-group, table-header-group, 8.1077 table-footer-group, table-row, table-column-group, table-column, 8.1078 @@ -807,7 +916,7 @@ 8.1079 <dt>ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group 8.1080 <dd>See the Ruby module [[CSS3RUBY]]. 8.1081 8.1082 - <dt>align-box <span class=issue>or container?</span> <dd>Like 8.1083 + <dt>container <span class=issue>or align-box?</span> <dd>Like 8.1084 ''block'', but forces the element to be a <em>flow root,</em>, 8.1085 which, e.g., stops its margins from collapsing with margins of child 8.1086 elements and includes floating children in its 8.1087 @@ -829,14 +938,14 @@ 8.1088 an element to generate boxes that affect formatting but are not 8.1089 visible themselves. 8.1090 8.1091 -<p class=note>Note that both 'clear-after' and ''align-box'' can be 8.1092 +<p class=note>Note that both 'clear-after' and ''container'' can be 8.1093 used to force the next element after this one to start after any 8.1094 floats inside this element, but the effect is not exactly the same. 8.1095 -E.g., 'display: box' also affects certain forms of margin 8.1096 +E.g., 'display: container' also affects certain forms of margin 8.1097 collapsing. 8.1098 8.1099 -<p class=note>Note that 'vertical-al ign' applies to ''align-box'' 8.1100 -elements, hence the name. The 'vertical-align' property doesn't apply 8.1101 +<p class=note>Note that 'vertical-align' applies to ''container'' 8.1102 +elements. The 'vertical-align' property doesn't apply 8.1103 to other block-level elements, except ''table-cell'' elements. 8.1104 8.1105 <p class=issue>Any sense in vertically spreading out the contents, 8.1106 @@ -846,7 +955,7 @@ 8.1107 ''top-box'', ''middle-box'' and ''bottom-box''? 8.1108 8.1109 <div class=example> 8.1110 -<p>The 'vertical-align' property applies to ''align-box'' 8.1111 +<p>The 'vertical-align' property applies to ''container'' 8.1112 elements <span class=issue>[check in [[!CSS3TEXT]]!]</span>, and can 8.1113 thus be used to create vertically centered content, without wrapping 8.1114 the content in a table (which may not be always possible, and also 8.1115 @@ -854,7 +963,7 @@ 8.1116 8.1117 <pre> 8.1118 div.slide { 8.1119 - display: align-box; 8.1120 + display: container; 8.1121 height: 15em; 8.1122 vertical-align: middle; 8.1123 border: thin solid } 8.1124 @@ -879,7 +988,7 @@ 8.1125 items in the center"> 8.1126 8.1127 <p class=caption>The 'vertical-align: middle' causes the content of 8.1128 - the ''align-box'' to be vertically centered. 8.1129 + the ''container'' to be vertically centered. 8.1130 </div> 8.1131 </div> 8.1132 8.1133 @@ -944,7 +1053,7 @@ 8.1134 boxes</h3> 8.1135 8.1136 <p>A <dfn>block-level</dfn> box is a box that has a <span>computed 8.1137 -value</span> for 'display' of ''block'', ''align-box'', ''list-item'', 8.1138 +value</span> for 'display' of ''block'', ''container'', ''list-item'', 8.1139 ''table'', ''table-*'' (i.e., all table boxes, see [[CSS3TBL]]), 8.1140 ''run-in'' (under 8.1141 certain circumstances, see <a href="#run-in-boxes">“Run-in boxes” 8.1142 @@ -990,54 +1099,6 @@ 8.1143 ''block''. 8.1144 </ul> 8.1145 8.1146 -<div class=example> 8.1147 -<p>An example of the last point above is this document fragment: 8.1148 - 8.1149 -<pre><p>Somebody whose name I have 8.1150 -forgotten, said, long ago: <q>a box is 8.1151 -a box,</q> and he probably meant it.</p></pre> 8.1152 - 8.1153 -<p>with these style rules: 8.1154 -<pre>p { display: block } 8.1155 -q { display: block; margin: 1em }</pre> 8.1156 - 8.1157 -<p>The <code>p</code> element has both line boxes and a child box for the 8.1158 -<code>q</code> element, which is a block-level element. The line boxes before 8.1159 -the <code>q</code> are wrapped in an anonymous block-level box and so are the 8.1160 -line boxes after the <code>q</code>. The resulting tree of boxes might be as 8.1161 -follows (refer to the <a href="#When">figure</a>): 8.1162 -<ul> 8.1163 - <li>block-level box [p] 8.1164 - <ul> 8.1165 - <li>block-level box [anonymous] 8.1166 - <ul> 8.1167 - <li>line box: “Somebody…” 8.1168 - <li>line box: “forgotten…” 8.1169 - </ul> 8.1170 - 8.1171 - <li>block-level box [q] 8.1172 - <ul> 8.1173 - <li>line box: “a box…” 8.1174 - </ul> 8.1175 - 8.1176 - <li>block-level box [anonymous] 8.1177 - <ul> 8.1178 - <li>line box: “and he…” 8.1179 - </ul> 8.1180 - 8.1181 - </ul> 8.1182 -</ul> 8.1183 - 8.1184 -<div class=figure id=When> 8.1185 - <p><img alt="The P element has two line boxes before the q and one 8.1186 - after. The first two are wrapped in an anonymous box, the last one 8.1187 - is wrapped in another anonymous box." src="anonymous.png"> 8.1188 - 8.1189 - <p class="caption">When the fragment is rendered, the text before 8.1190 - the q is wrapped in an anonymous block and the text after the q in 8.1191 - another. 8.1192 -</div> 8.1193 -</div><!--example--> 8.1194 8.1195 <p class=note>Note that the anonymous boxes defined in this module are 8.1196 all <span>block-level,</span> but anonymous boxes defined in other 8.1197 @@ -1106,101 +1167,67 @@ 8.1198 should be excluded from (subtracted from the dimensions of) any 8.1199 containing block formed by that element. 8.1200 8.1201 -<p class=mtb>A <dfn>flow root</dfn> is a box that satisfies at least one of 8.1202 -the following: 8.1203 + 8.1204 + 8.1205 + 8.1206 + 8.1207 + 8.1208 + 8.1209 +<h3 id=run-in-boxes>Run-in boxes</h3> 8.1210 + 8.1211 +<div class=issue> 8.1212 +<p>Compare the rules below with <a 8.1213 +href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0450.html" 8.1214 +>Elika's idea:</a> 8.1215 + 8.1216 +<p>Model is this: 8.1217 <ul> 8.1218 - <li>The value of 'float' is not ''none''. 8.1219 - <li>The <em>used value</em> of 'overflow' is not ''visible''. 8.1220 - <li>The value of 'display' is ''table-cell'', ''table-caption'' (see 8.1221 - [[CSS3TBL]]), ''inline-block'', ''inline-table'' or ''align-box''. 8.1222 - <li>The value of 'position' is ''absolute'' or ''fixed'' (see 8.1223 - [[CSS3POS]]). 8.1224 - <li>The box is <em>vertical</em> and its parent is 8.1225 - <em>horizontal.</em> 8.1226 - <li>The box is <em>horizontal</em> and its parent is 8.1227 - <em>vertical.</em> 8.1228 - <li>The value of 'transform' is not ''none''. 8.1229 - <li class=issue>The value of 'child-align' is not ''auto''. [If 8.1230 - 'child-align' is adopted, rather than, say, 'margin: fill'] 8.1231 + <li>run-ins are always treated like elements with ''display: 8.1232 + inline'' 8.1233 + 8.1234 + <li>except that they mangle the box tree thus: 8.1235 + <ul> 8.1236 + <li>If a run-in is preceded by an inline box (ignoring any anonymous 8.1237 + inline boxes containing only collapsed white space), 8.1238 + then it forces the creation of an anonymous block boundary 8.1239 + between it and the preceding inline. 8.1240 + 8.1241 + <li>If the last run-in in a sequence of run-ins, out-of-flows, 8.1242 + and anonymous inlines containing only white space 8.1243 + is immediately followed (ignoring out-of-flows and white 8.1244 + space) by a block box, the entire sequence (including any 8.1245 + descendants) from the first run-in to the last run-in gets 8.1246 + shifted into that block, becoming the first boxes in that 8.1247 + block as if originally parented there. 8.1248 + 8.1249 + </ul> 8.1250 </ul> 8.1251 8.1252 - <p class=note>Note that an element with 'display: inline' therefore 8.1253 - cannot be a flow root: it doesn't float (otherwise its 'display' 8.1254 - would be ''block''), and neither 'overflow' nor 'writing-mode' 8.1255 - apply to inlines. 8.1256 - 8.1257 - <p class=note>Note: The terminology in the CSS level 2 specification is 8.1258 - different. A flow root is called “an element that establishes a 8.1259 - <span class=index title="formatting context|new formatting 8.1260 - context">new formatting context.</span>” 8.1261 - 8.1262 -<p>Other modules may define additional flow roots. <span 8.1263 -class=issue>[Can we thus remove ''table-caption'', ''table-cell'', and 8.1264 -'position' from the list above?]</span> 8.1265 - 8.1266 -<p>The <dfn>flow</dfn> (a.k.a. <dfn>normal flow</dfn>) of a given 8.1267 -<em>flow root</em> is a set of boxes. A box belongs to the flow if all 8.1268 -of the following are true: 8.1269 -<ol> 8.1270 - <li>The used value of its 'display' is ''block'', ''list-item'' or 8.1271 - ''table''. 8.1272 - 8.1273 - <li>The used value of its 'float' is ''none''. 8.1274 - 8.1275 - <li>The used value of its 'position' is ''static'' or ''relative''. 8.1276 - 8.1277 - <li>It is either a child of the flow root or a child of a box that 8.1278 - belong to the flow. 8.1279 -</ol> 8.1280 - 8.1281 - 8.1282 - 8.1283 -<div class=example> 8.1284 -<p>For example, the fragment 8.1285 -<pre><div class=sidebar> 8.1286 - <p>Text in a sidebar. 8.1287 - <p>Here is quote: 8.1288 - <blockquote lang=ja> 8.1289 - <p>... 8.1290 - </blockquote> 8.1291 - <p>Etc. etc. 8.1292 -</div> </pre> 8.1293 - 8.1294 -<p>with the style 8.1295 -<pre>div.sidebar { writing-mode: tb; float: left } 8.1296 -blockquote[lang|=ja] { writing-mode: rl; height: 10em }</pre> 8.1297 - 8.1298 -<p>defines two flows: 8.1299 -<ol> 8.1300 - <li>The <code>div</code> is a flow root, because it floats. Its flow 8.1301 - consist of the 1st, 2nd and 4th <code>p</code> and the 8.1302 - <code>blockquote</code>. 8.1303 - 8.1304 - <li>The <code>blockquote</code> is a <em>vertical</em> box inside a 8.1305 - <em>horizontal</em> parent and it is thus a flow root. Its flow is 8.1306 - formed by the 3rd <code>p</code>. 8.1307 -</ol> 8.1308 -<p>(The <code>div</code> itself belongs to a third flow, but its flow 8.1309 -root is not shown in the fragment.) 8.1310 + 8.1311 +<p>This solves several problems: 8.1312 +<ul> 8.1313 + <li><p>The behavior of the run-in is no longer determined by its contents. 8.1314 + 8.1315 + <li><p>We don't have the weird discrepency between 8.1316 + <pre><run-in>some</run-in> 8.1317 +<p>text</p></pre> 8.1318 + <p>where "some text" appears on one line but 8.1319 + <pre><run-in>some</run-in> 8.1320 +text</pre> 8.1321 + <p>appears on two lines. 8.1322 + 8.1323 + <li><p>Multiple run-ins still run-in, so something like 8.1324 + <pre><dt>implementer 8.1325 +<dt>implementor 8.1326 +<dd>(n.) Someone or something that implements.</pre> 8.1327 + <p>can render as 8.1328 + <blockquote> 8.1329 + <p>*implementer, implementor* (n) Someone or something that 8.1330 + implements. 8.1331 + </blockquote> 8.1332 +</ul> 8.1333 </div> 8.1334 8.1335 -<p class=note>Note that a flow root is not necessarily block-level, it may 8.1336 -be an ''inline-block'', e.g. 8.1337 - 8.1338 -<p>The boxes of a flow are laid out inside their flow root one after 8.1339 -the other in the direction of the 'writing-mode' property of the 8.1340 -flow root and in the same order as in the source document. Their 8.1341 -position is given by how much their margins overlap (see <a 8.1342 -href="#collapsing-margins">“Collapsing margins”</a>) and by the fact 8.1343 -that their side margin edges coincide with content edges of their 8.1344 -containing blocks. More precisely: Each box's left and right margin 8.1345 -edges coincide with the left and right edges of its containing block 8.1346 -(if the flow root is ''tb''), or its top and bottom margin edges 8.1347 -coincide with the top and bottom edges of its containing block (if the 8.1348 -flow root is ''rl'' or ''lr''). 8.1349 - 8.1350 -<h3 id=run-in-boxes>Run-in boxes</h3> 8.1351 - 8.1352 <p>A ''run-in'' element (or pseudo-element) <var>A</var> behaves as 8.1353 follows: 8.1354 8.1355 @@ -1397,32 +1424,38 @@ 8.1356 <h2>The padding properties</h2> 8.1357 8.1358 <table class="propdef"> 8.1359 - <tr><td>Name: <td><dfn>padding</dfn> 8.1360 - <tr><td>Value: <td>[ <var><length></var> | 8.1361 + <tr><th>Name: <td><dfn>padding</dfn> 8.1362 + <tr><th>Value: <td>[ <var><length></var> | 8.1363 <var><percentage></var> | auto ]{1,4} 8.1364 - <tr><td>Initial: <td>(see individual properties) 8.1365 - <tr><td>Applies to: <td>all elements 8.1366 - <tr><td>Inherited: <td>no 8.1367 - <tr><td>Percentages: <td>width* of containing block 8.1368 - <tr><td>Media: <td>visual 8.1369 - <tr><td>Computed value: <td>see individual properties 8.1370 + <tr><th>Initial: <td>(see individual properties) 8.1371 + <tr><th>Applies to: <td>all elements 8.1372 + <tr><th>Inherited: <td>no 8.1373 + <tr><th>Animatable: <td>yes 8.1374 + <tr><th>Percentages: <td>width* of containing block 8.1375 + <tr><th>Media: <td>visual 8.1376 + <tr><th>Computed value: <td>see individual properties 8.1377 + <tr><th>Canonical order: <td>N/A 8.1378 <tr><td colspan="2" class="footnote">*) if the <em>containing 8.1379 block</em> is <em>horizontal,</em> otherwise the height 8.1380 + <tr><th>Canonical order: <td>N/A 8.1381 </table> 8.1382 8.1383 <table class="propdef"> 8.1384 - <tr><td>Name: <td><dfn>padding-top</dfn> , <dfn>padding-right</dfn>, 8.1385 + <tr><th>Name: <td><dfn>padding-top</dfn> , <dfn>padding-right</dfn>, 8.1386 <dfn>padding-bottom</dfn>, <dfn>padding-left</dfn> 8.1387 - <tr><td>Value: <td>[ <var><length></var> | 8.1388 + <tr><th>Value: <td>[ <var><length></var> | 8.1389 <var><percentage></var> | auto ] 8.1390 - <tr><td>Initial: <td>0 8.1391 - <tr><td>Applies to: <td>all elements 8.1392 - <tr><td>Inherited: <td>no 8.1393 - <tr><td>Percentages: <td>width* of containing block 8.1394 - <tr><td>Media: <td>visual 8.1395 - <tr><td>Computed value: <td><length> 8.1396 + <tr><th>Initial: <td>0 8.1397 + <tr><th>Applies to: <td>all elements 8.1398 + <tr><th>Inherited: <td>no 8.1399 + <tr><th>Animatable: <td>yes 8.1400 + <tr><th>Percentages: <td>width* of containing block 8.1401 + <tr><th>Media: <td>visual 8.1402 + <tr><th>Computed value: <td><length> 8.1403 + <tr><th>Canonical order: <td>N/A 8.1404 <tr><td colspan="2" class="footnote">*) if the <em>containing 8.1405 block</em> is <span><em>horizontal,</em></span> otherwise the height 8.1406 + <tr><th>Canonical order: <td>N/A 8.1407 </table> 8.1408 8.1409 <p>Sets the thickness of the <em>padding area.</em> The value may not be 8.1410 @@ -1473,33 +1506,39 @@ 8.1411 <h3>The margin properties</h3> 8.1412 8.1413 <table class="propdef"> 8.1414 - <tr><td>Name: <td><dfn>margin-top</dfn> , <dfn>margin-right</dfn>, 8.1415 + <tr><th>Name: <td><dfn>margin-top</dfn> , <dfn>margin-right</dfn>, 8.1416 <dfn>margin-bottom</dfn>, <dfn>margin-left</dfn> 8.1417 - <tr><td>Value: <td><var><length></var> | 8.1418 + <tr><th>Value: <td><var><length></var> | 8.1419 <var><percentage></var> | auto 8.1420 - <tr><td>Initial: <td>0 8.1421 - <tr><td>Applies to: <td>see text 8.1422 - <tr><td>Inherited: <td>no 8.1423 - <tr><td>Percentages: <td>width* of containing block 8.1424 - <tr><td>Media: <td>visual 8.1425 - <tr><td>Computed value: <td>the percentage as specified or the 8.1426 + <tr><th>Initial: <td>0 8.1427 + <tr><th>Applies to: <td>see text 8.1428 + <tr><th>Inherited: <td>no 8.1429 + <tr><th>Animatable: <td>yes 8.1430 + <tr><th>Percentages: <td>width* of containing block 8.1431 + <tr><th>Media: <td>visual 8.1432 + <tr><th>Computed value: <td>the percentage as specified or the 8.1433 absolute length or ''auto'' 8.1434 + <tr><th>Canonical order: <td>N/A 8.1435 <tr><td colspan="2" class="footnote">*) if the <em>containing 8.1436 block</em> is <em>horizontal,</em> otherwise the height 8.1437 + <tr><th>Canonical order: <td>N/A 8.1438 </table> 8.1439 8.1440 <table class=propdef> 8.1441 - <tr><td>Name: <td><dfn>margin</dfn> 8.1442 - <tr><td>Value: <td>[ <var><length></var> | 8.1443 + <tr><th>Name: <td><dfn>margin</dfn> 8.1444 + <tr><th>Value: <td>[ <var><length></var> | 8.1445 <var><percentage></var> | auto]{1,4} 8.1446 - <tr><td>Initial: <td>(see individual properties) 8.1447 - <tr><td>Applies to: <td>see text 8.1448 - <tr><td>Inherited: <td>no 8.1449 - <tr><td>Percentages: <td>width* of containing block 8.1450 - <tr><td>Media: <td>visual 8.1451 - <tr><td>Computed value: <td>see individual properties 8.1452 + <tr><th>Initial: <td>(see individual properties) 8.1453 + <tr><th>Applies to: <td>see text 8.1454 + <tr><th>Inherited: <td>no 8.1455 + <tr><th>Animatable: <td>yes 8.1456 + <tr><th>Percentages: <td>width* of containing block 8.1457 + <tr><th>Media: <td>visual 8.1458 + <tr><th>Computed value: <td>see individual properties 8.1459 + <tr><th>Canonical order: <td>N/A 8.1460 <tr><td colspan="2" class="footnote">*) if the <em>containing 8.1461 block</em> is <em>horizontal,</em> otherwise the height 8.1462 + <tr><th>Canonical order: <td>N/A 8.1463 </table> 8.1464 8.1465 <div class=issue> 8.1466 @@ -1567,308 +1606,49 @@ 8.1467 8.1468 8.1469 8.1470 -<h3 id=collapsing-margins>Collapsing margins</h3> 8.1471 - 8.1472 -<p>Certain adjoining margins, as defined in this section, combine to 8.1473 -form a single margin. Those margins are said to <dfn>collapse.</dfn> 8.1474 -Margins are <dfn>adjoining</dfn> if there are no nonempty content, 8.1475 -<span title="padding area">padding</span> or <span title="border 8.1476 -area">border areas</span> or <em>clearance</em> to separate them. 8.1477 - 8.1478 -<div class=example> 8.1479 -<p>For example, in the following fragment with the given style rules: 8.1480 -<pre>p { display: block; margin-bottom: 2em 0 1em 0 } 8.1481 -div { display: block; margin: 2.5em 0 } 8.1482 -... 8.1483 -<p>First paragraph</p> 8.1484 -<div> 8.1485 - <p>Second paragraph</p> 8.1486 -</div></pre> 8.1487 - 8.1488 -<p>the bottom margin of the first <code>p</code> (=1em), the top margin of 8.1489 -the <code>div</code> (=2.5em) and the top margin of the second <code>p</code> 8.1490 -(=2em) collapse. The result is a single margin of 2.5em (the maximum of the 8.1491 -three) between the bottom of the first <code>p</code> and the top of the 8.1492 -second. 8.1493 -</div> 8.1494 - 8.1495 -<div class=figure> 8.1496 - <p><img src="collapse1.png" alt="Three margins collapse: 1em + 2.5em + 2em"> 8.1497 - <p class=caption>Schematic representation of the previous example. 8.1498 -</div> 8.1499 - 8.1500 -<div class=example> 8.1501 -<p>In the following fragment, 8.1502 -<pre>p { display: block; margin: 2em 0 1em 0 } 8.1503 -div { display: block; margin: 2.5em 0; 8.1504 - border: thin solid } 8.1505 -... 8.1506 -<p>First paragraph</p> 8.1507 -<div> 8.1508 - <p>Second paragraph</p> 8.1509 -</div></pre> 8.1510 - 8.1511 -<p>the bottom margin of the first <code>p</code> and the top margin of 8.1512 -the <code>div</code> collapse, but the top margin of the second 8.1513 -<code>p</code> does not collapse with them, because it is not 8.1514 -<em>adjoining;</em> the border of the <code>div</code> separates them. 8.1515 -</div> 8.1516 - 8.1517 -<div class=figure> 8.1518 - <p><img src="collapse2.png" alt="Only two margins collapse: 1em + 2.5em"> 8.1519 - <p class=caption>Schematic representation of the previous example. 8.1520 -</div> 8.1521 - 8.1522 -<p>If a set of adjoining margins collapses, then the width of the resulting 8.1523 -margin is <var>M</var> - <var>N</var>, where <var>M</var> is the maximum of 8.1524 -the adjoining margins that are positive, or zero if there are none; and 8.1525 -<var>N</var> is the minimum of the adjoining margins that are negative, or 8.1526 -zero if there are none. 8.1527 - 8.1528 -<p>We call an element or box <dfn>collapsed through</dfn> if two of 8.1529 -its margins collapse with each other. 8.1530 - 8.1531 -<div class=example> 8.1532 -<p>The most common use of collapsing through elements is that empty 8.1533 -paragraphs don't cause extra white space: 8.1534 - 8.1535 -<pre><p>First paragraph 8.1536 -<p>Second paragraph 8.1537 -<p> 8.1538 -<p>Last paragraph</pre> 8.1539 - 8.1540 -<p>There is equal space between the first and second paragraphs as 8.1541 -between the second and last. 8.1542 -</div> 8.1543 - 8.1544 -<p>The following two sets of rules determine which margins collapse. 8.1545 - 8.1546 -<ul> 8.1547 - <li>Only margins of <em>block-level</em> boxes can collapse. 8.1548 - 8.1549 - <li>Margins of a floated box do not collapse with any other margins. 8.1550 - 8.1551 - <li>Margins of a <em>flow root</em> do not collapse with its 8.1552 - children's margins. 8.1553 - 8.1554 - <li>Margins of an absolutely positioned box (see [[CSS3POS]]) do not 8.1555 - collapse with any other margins. 8.1556 - 8.1557 - <!-- 8.1558 - <li>Margins of an ''inline-block'' box do not collapse (not even 8.1559 - with its in-flow children). <span class=issue>Assuming the first 8.1560 - rule above (“only block-level”) is correct, this rule seems 8.1561 - redundant, because an inline block is not block-level.</span> 8.1562 - --> 8.1563 - 8.1564 - <li>Margins of the root element's box do not collapse with any other 8.1565 - margins. 8.1566 - 8.1567 - <li>If a box is <em>collapsed through</em> and it has 8.1568 - <em>clearance</em> applied to one of its two collapsed margins, then 8.1569 - those two margins do not collapse with certain of the parent's 8.1570 - margins, as follows: If clearance is applied to, respectively, the 8.1571 - top, right, bottom or left margin, then the two margins do not 8.1572 - collapse with the parent's bottom, left, top or right margin, 8.1573 - respectively. 8.1574 - 8.1575 - <li>If a <em>horizontal</em> element has a 'height' that is not 8.1576 - ''auto'', or if setting its 'min-height' and 'max-height' to their 8.1577 - initial values would change its used height, then the <em>tail</em> 8.1578 - margin of the element does not collapse with any of its children's 8.1579 - margins. <span class=issue>[Check with latest CSS 2.1 if min/max 8.1580 - width/height still have this effect.]</span> 8.1581 - 8.1582 - <li>Similarly, if a <em>vertical</em> element has a 'width' that is 8.1583 - not ''auto'', or if setting its 'min-width' and 'max-width' to their 8.1584 - initial values would change the used width, then the <em>tail</em> 8.1585 - margin of the element does not collapse with any of its children's 8.1586 - margins. <span class=issue>[Check with latest CSS 2.1 if min/max 8.1587 - width/height still have this effect.]</span> 8.1588 -</ul> 8.1589 - 8.1590 -<p>Except when forbidden by the list above, the following margins 8.1591 -collapse: 8.1592 - 8.1593 -<ul> 8.1594 - <!-- transitive --> 8.1595 - <li> 8.1596 - <p>If a margin P collapses with a margin Q and margin Q with a 8.1597 - margin R, then P, Q and R collapse together. (“Collapsing is 8.1598 - transitive”) 8.1599 - 8.1600 - <!-- parent-child / head --> 8.1601 - <li> 8.1602 - <p>A margin of a box collapses with the <em>head</em> margin of 8.1603 - its parent box if those two margins are <em>adjoining.</em> 8.1604 - 8.1605 - <!-- parent-child / tail --> 8.1606 - <li> 8.1607 - <p>A margin of a box collapses with the <em>tail</em> margin of 8.1608 - its parent box if those two margins are <em>adjoining.</em> 8.1609 - 8.1610 - <!-- sibling --> 8.1611 - <li> 8.1612 - <p>The <em>head</em> margin of a box collapses with the 8.1613 - <em>tail</em> margin of a sibling box if the two margins are 8.1614 - <em>adjoining.</em> 8.1615 - 8.1616 - <!-- self top-bottom --> 8.1617 - <li> 8.1618 - <p>The top and bottom margins of a box A collapse with each other 8.1619 - if the two margins are <em>adjoining</em> and the parent box B is 8.1620 - <em>horizontal.</em> (The box is <em>“collapsed through.”</em>) 8.1621 - 8.1622 - <!-- self left-right --> 8.1623 - <li> 8.1624 - <p>The left and right margins of a box A collapse with each other 8.1625 - if the two margins are <em>adjoining</em> and the parent box B is 8.1626 - <em>vertical.</em> (The box is <em>“collapsed through.”</em>) 8.1627 -</ul> 8.1628 - 8.1629 -<p>If a box A is <em>collapsed through</em> and it has the same mode 8.1630 -as its parent (i.e., both are <em>horizontal</em> or both are 8.1631 -<em>vertical</em>), then the position of its <em>head</em> border edge 8.1632 -is defined as follows. 8.1633 - 8.1634 -<ul> 8.1635 - <li>If the box A's margins are collapsed with its parent's 8.1636 - <em>head</em> margin, the head border edge of A is defined to be the 8.1637 - same as the parent's head border edge. 8.1638 - 8.1639 - <li>Otherwise, either the parent is not taking part in the margin 8.1640 - collapsing, or only the parent's <em>tail</em> margin is involved. 8.1641 - The position of A's head border edge is defined to be the same as it 8.1642 - would have been if A had a nonzero <em>tail</em> border. 8.1643 -</ul> 8.1644 - 8.1645 - <p class=note>Note that box A itself is invisible and its position 8.1646 - has no effect on the positions of the other elements with whose 8.1647 - margins it is being collapsed; the border edge position is only 8.1648 - required for laying out descendants of A. 8.1649 - 8.1650 -<div class=example> 8.1651 -<p>In a horizontal flow, the bottom margin of an in-flow 8.1652 -<span>block-level</span> element is always adjoining to the top margin 8.1653 -of its next in-flow block-level sibling, unless that sibling has 8.1654 -clearance: 8.1655 - 8.1656 -<pre> 8.1657 -<p style="margin-bottom: 2em">The bottom margin of this 8.1658 -box…</p> 8.1659 - 8.1660 -<p style="margin-top: 3em">… collapses with the top margin 8.1661 -of this box, to yield max(2em, 3em) = 3em margin.</p> 8.1662 -</pre> 8.1663 - 8.1664 -<p>The top margin of an in-flow block-level element is adjoining to 8.1665 -its first in-flow block-level child's top margin if the element has no 8.1666 -top border, no top padding, and the child has no clearance: 8.1667 - 8.1668 -<pre> 8.1669 -<div style="margin-top: 2em; padding: 0; border: 0"> 8.1670 - <p style="margin-top: 3em"> 8.1671 - The top margin of the DIV and the P 8.1672 - collapse, to yield max(2em, 3em) = 3em margin. 8.1673 - </p> 8.1674 -</div> 8.1675 -</pre> 8.1676 - 8.1677 -<p>The bottom margin of an in-flow block-level element with a 'height' 8.1678 -of ''auto'' and 'min-height' less than the element's used height and 8.1679 -'max-height' greater than the element's used height is adjoining to 8.1680 -its last in-flow block-level child's bottom margin if the element has 8.1681 -no bottom padding or border: 8.1682 - 8.1683 -<pre> 8.1684 -<div style="margin-bottom: 2em; padding: 0; border: 0; 8.1685 - height: auto; min-height: 0; max-height: 100em"> 8.1686 - <p style="margin-bottom: 3em"> 8.1687 - The bottom margin of the DIV and the P collapse, to yield max(2em, 8.1688 - 3em) = 3em margin. 8.1689 - </p> 8.1690 -</div> 8.1691 -</pre> 8.1692 - 8.1693 -<p>An element's own margins are adjoining if the 'min-height' property is 8.1694 -zero, and it has neither vertical borders nor vertical padding, and it has a 8.1695 -'height' of either 0 or ''auto'', and it does not contain a line box, and all 8.1696 -of its in-flow children's margins (if any) are adjoining: 8.1697 - 8.1698 -<pre> 8.1699 -<div style="margin-top: 2em; margin-bottom: 3em"> 8.1700 - <p style="position: absolute"> 8.1701 - The DIV is empty and its top and bottom margins collapse. 8.1702 - </p> 8.1703 -</div> 8.1704 -</pre> 8.1705 - 8.1706 -<p>When an element's own margins collapse, and that element has had 8.1707 -clearance applied to it, its top margin collapses with the adjoining 8.1708 -margins of subsequent siblings but that resulting margin does not 8.1709 -collapse with the bottom margin of the parent block: 8.1710 - 8.1711 -<pre> 8.1712 -<div style="margin-bottom: 2em"> 8.1713 - <p style="float: left"> 8.1714 - The margins of the next two Ps collapse 8.1715 - <p style="clear: left; margin-top: 4em; margin-bottom: 3em"> 8.1716 - <!-- empty --> 8.1717 - </p> 8.1718 - <p style="margin-top: 1em; margin-bottom: 1em"> 8.1719 - <!-- empty --> 8.1720 - </p> 8.1721 -</div> 8.1722 -</pre> 8.1723 - 8.1724 -<p>The top and bottom margins of the two empty Ps collapse all 8.1725 -together. But they can't collapse with the bottom of the DIV, because 8.1726 -one of the two empty P's has clearance. 8.1727 - 8.1728 -<p class=issue>Check this. This is probably the only possible 8.1729 -interpretation of the rules, but it is certainly not obvious that the 8.1730 -clearance of one element may stop later elements from 8.1731 -collapsing… 8.1732 -</div> 8.1733 - 8.1734 -<p>Collapsing is based on the used value of 'padding', 'margin', and 'border' 8.1735 -(i.e., after resolving any percentages). The collapsed margin is calculated 8.1736 -over the used value of the various margins. 8.1737 8.1738 8.1739 8.1740 <h2>The width and height properties</h2> 8.1741 8.1742 <table class=propdef> 8.1743 - <tr><td>Name: <td><dfn>width</dfn> 8.1744 - <tr><td>Value: <td>[<var><length></var> | <var><percentage></var>] && 8.1745 + <tr><th>Name: <td><dfn>width</dfn> 8.1746 + <tr><th>Value: <td>[<var><length></var> | <var><percentage></var>] && 8.1747 [border-box | content-box]? | available | min-content | 8.1748 max-content | fit-content | auto 8.1749 - <tr><td>Initial: <td>auto 8.1750 - <tr><td>Applies to: <td>all elements but non-replaced inline 8.1751 + <tr><th>Initial: <td>auto 8.1752 + <tr><th>Applies to: <td>all elements but non-replaced inline 8.1753 elements, table rows, and row groups 8.1754 - <tr><td>Inherited: <td>no 8.1755 - <tr><td>Percentages: <td>refer to width of containing block 8.1756 - <tr><td>Media: <td>visual 8.1757 - <tr><td>Computed value: <td>the specified keyword, the specified 8.1758 + <tr><th>Inherited: <td>no 8.1759 + <tr><th>Animatable: <td>yes 8.1760 + <tr><th>Percentages: <td>refer to width of containing block 8.1761 + <tr><th>Media: <td>visual 8.1762 + <tr><th>Computed value: <td>the specified keyword; or the specified 8.1763 + percentage (with ''border-box'' or ''content-box'' if present); or 8.1764 + the absolute length (with ''border-box'' or ''content-box'' if 8.1765 + present); or ''auto'' if the property does not apply; (also see 8.1766 + prose under <percentage>) 8.1767 + <tr><th>Canonical order: <td>the length or percentage before the 8.1768 + keyword, if both are present 8.1769 +</table> 8.1770 + 8.1771 +<table class=propdef> 8.1772 + <tr><th>Name: <td><dfn>height</dfn> 8.1773 + <tr><th>Value: <td>[<var><length></var> | <var><percentage></var>] && 8.1774 + [border-box | content-box]? | available | min-content | 8.1775 + max-content | fit-content | complex | auto 8.1776 + <tr><th>Initial: <td>auto 8.1777 + <tr><th>Applies to: <td>all elements but non-replaced inline 8.1778 + elements, table columns, and column groups 8.1779 + <tr><th>Inherited: <td>no 8.1780 + <tr><th>Animatable: <td>yes 8.1781 + <tr><th>Percentages: <td>see prose 8.1782 + <tr><th>Media: <td>visual 8.1783 + <tr><th>Computed value: <td>the specified keywords, the specified 8.1784 percentage (see prose under <percentage>) or the absolute 8.1785 length; ''auto'' if the property does not apply 8.1786 -</table> 8.1787 - 8.1788 -<table class=propdef> 8.1789 - <tr><td>Name: <td><dfn>height</dfn> 8.1790 - <tr><td>Value: <td>[<var><length></var> | <var><percentage></var>] && 8.1791 - [border-box | content-box]? | available | min-content | 8.1792 - max-content | fit-content | complex | auto 8.1793 - <tr><td>Initial: <td>auto 8.1794 - <tr><td>Applies to: <td>all elements but non-replaced inline 8.1795 - elements, table columns, and column groups 8.1796 - <tr><td>Inherited: <td>no 8.1797 - <tr><td>Percentages: <td>see prose 8.1798 - <tr><td>Media: <td>visual 8.1799 - <tr><td>Computed value: <td>the specified keywords, the specified 8.1800 - percentage (see prose under <percentage>) or the absolute 8.1801 - length; ''auto'' if the property does not apply 8.1802 + <tr><th>Canonical order: <td>the length or percentage before the 8.1803 + keyword, if both are present 8.1804 </table> 8.1805 8.1806 <!-- Nov 2007, ftf: add four keywords and Jason's example of image + caption --> 8.1807 @@ -1928,6 +1708,11 @@ 8.1808 <var><non-negative-number></var>, which would mean 8.1809 ''min-content'' times that number. 8.1810 8.1811 +<p class=issue>The width property of ''@viewport'' 8.1812 +[[CSS-DEVICE-ADAPT]] is a shorthand for min-width and max-width and 8.1813 +can have either one or two values. Anything we can do to alleviate 8.1814 +risk of the confusion? 8.1815 + 8.1816 <p class=note>Note that ''available'', ''max-content'', 8.1817 ''min-content'', ''fit-content'', ''border-box'', ''content-box'' and 8.1818 ''complex'' do not exist in level 2. 8.1819 @@ -2018,35 +1803,45 @@ 8.1820 max-height properties</h2> 8.1821 8.1822 <table class=propdef> 8.1823 - <tr><td>Name: <td><dfn>min-width</dfn>, <dfn>min-height</dfn> 8.1824 - <tr><td>Value: <td><var><length></var> 8.1825 - | <var><percentage></var> | available | min-content | max-content 8.1826 - | fit-content 8.1827 - <tr><td>Initial: <td>0 8.1828 - <tr><td>Applies to: <td>all elements but non-replaced 8.1829 + <tr><th>Name: <td><dfn>min-width</dfn>, <dfn>min-height</dfn> 8.1830 + <tr><th>Value: <td>[ [<var><length></var> | 8.1831 + <var><percentage></var>] && [border-box | content-box]? ] | 8.1832 + available | min-content | max-content | fit-content 8.1833 + <tr><th>Initial: <td>0 8.1834 + <tr><th>Applies to: <td>all elements but non-replaced 8.1835 inline elements, table rows, and row groups 8.1836 - <tr><td>Inherited: <td>no 8.1837 - <tr><td>Percentages: <td>refer to width, resp. height of 8.1838 + <tr><th>Inherited: <td>no 8.1839 + <tr><th>Animatable: <td>yes 8.1840 + <tr><th>Percentages: <td>refer to width, resp. height of 8.1841 containing block 8.1842 - <tr><td>Media: <td>visual 8.1843 - <tr><td>Computed value: <td>the percentage as specified, the keyword 8.1844 - as specified, or the absolute length 8.1845 + <tr><th>Media: <td>visual 8.1846 + <tr><th>Computed value: <td>the percentage as specified (with 8.1847 + ''border-box'' or ''content-box'', if present), the keyword as 8.1848 + specified, or the absolute length (with ''border-box'' or 8.1849 + ''content-box'', if present) 8.1850 + <tr><th>Canonical order: <td>the length or percentage before the 8.1851 + keyword, if both are present 8.1852 </table> 8.1853 8.1854 <table class=propdef> 8.1855 - <tr><td>Name: <td><dfn>max-width</dfn>, <dfn>max-height</dfn> 8.1856 - <tr><td>Value: <td><var><length></var> 8.1857 - | <var><percentage></var> | available | min-content | max-content 8.1858 - | fit-content | none 8.1859 - <tr><td>Initial: <td>none 8.1860 - <tr><td>Applies to: <td>all elements but non-replaced inline 8.1861 + <tr><th>Name: <td><dfn>max-width</dfn>, <dfn>max-height</dfn> 8.1862 + <tr><th>Value: <td>[ [<var><length></var> | 8.1863 + <var><percentage></var>] && [border-box | content-box]? ] | 8.1864 + available | min-content | max-content | fit-content | none 8.1865 + <tr><th>Initial: <td>none 8.1866 + <tr><th>Applies to: <td>all elements but non-replaced inline 8.1867 elements, table rows, and row groups 8.1868 - <tr><td>Inherited: <td>no 8.1869 - <tr><td>Percentages: <td>refer to width, resp. height of 8.1870 + <tr><th>Inherited: <td>no 8.1871 + <tr><th>Animatable: <td>yes 8.1872 + <tr><th>Percentages: <td>refer to width, resp. height of 8.1873 containing block 8.1874 - <tr><td>Media: <td>visual 8.1875 - <tr><td>Computed value: <td>the percentage as specified, the keyword 8.1876 - as specified, the absolute length, or ''none'' 8.1877 + <tr><th>Media: <td>visual 8.1878 + <tr><th>Computed value: <td>the percentage as specified (with 8.1879 + ''border-box'' or ''content-box'', if present); the keyword as 8.1880 + specified; the absolute length (with ''border-box'' or 8.1881 + ''content-box'', if present); or none 8.1882 + <tr><th>Canonical order: <td>the length or percentage before the 8.1883 + keyword, if both are present 8.1884 </table> 8.1885 8.1886 <p>These properties allow authors to constrain content widths and 8.1887 @@ -2254,6 +2049,438 @@ 8.1888 8.1889 8.1890 8.1891 +<h2><span class=index>Aspect ratios</span> of replaced elements</h2> 8.1892 + 8.1893 +<p>For the purposes of the width and height calculations below, CSS 8.1894 +distinguishes four kinds of <em title="replaced element" 8.1895 +class=index>replaced elements</em>: 8.1896 + 8.1897 +<dl> 8.1898 +<dt>Type 1: replaced elements with both <em class=index >intrinsic 8.1899 +width</em> and <em class=index >intrinsic height.</em> <dd>These are 8.1900 +replaced elements that are meant to be displayed with a certain fixed 8.1901 +factor (the <em class=index >intrinsic ratio</em>) between their width 8.1902 +and height and also have a default size. Different formats may have 8.1903 +different ways of specifying the size, e.g., a width and a ratio, or a 8.1904 +raster and a resolution in dots per inch. Raster images fall in this 8.1905 +category. 8.1906 + 8.1907 +<dt>Type 2: replaced elements with only an <em class=index >intrinsic 8.1908 +ratio</em> <dd>These are replaced elements that are meant to be 8.1909 +displayed with a certain fixed factor between their width and height, 8.1910 +but without a default size. <span class=index>SVG</span> images often 8.1911 +fall in the this category. 8.1912 + 8.1913 +<dt>Type 3: replaced elements with a <dfn>complex aspect ratio</dfn> 8.1914 +<dd>These are replaced elements that do not have a <em>fixed</em> 8.1915 +ratio between their width and height, but that do have a functional 8.1916 +relation between them in the sense that for every width there is a 8.1917 +unique height. HTML documents are examples of this: the width can be 8.1918 +chosen freely, but at every width there is a definite intrinsic 8.1919 +height. 8.1920 + 8.1921 +<dt>Type 4: replaced elements without an intrinsic ratio <dd>These are 8.1922 +replaced elements that have no relation between their width and 8.1923 +height. Certain <span class=index>SVG</span> images are examples of 8.1924 +this. 8.1925 +</dl> 8.1926 + 8.1927 +<p>For <span class=index>raster images</span> without reliable 8.1928 +resolution information, a size of 1 px unit per image source pixel 8.1929 +must be assumed. These images thus are of type 1. 8.1930 + 8.1931 +<div class=example> 8.1932 +<p>E.g., according to the section on <a href="#inline-replaced">inline 8.1933 +replaced elements</a> below, if the replaced element is an HTML 8.1934 +document and the height is specified as ''auto'', e.g.: 8.1935 +<pre> 8.1936 +... <object data="example.html" 8.1937 + style="width: 30em; height: auto"></object>... 8.1938 +</pre> 8.1939 +<p>then the used height will be 150px, which is unlikely to be the 8.1940 +real height of the example.html document. But if the height is 8.1941 +specified as ''complex'', e.g.: 8.1942 +<pre> 8.1943 +... <object data="example.html" 8.1944 + style="width: 30em; height: complex"></object>... 8.1945 +</pre> 8.1946 +<p>then the height will be the height the example.html document 8.1947 +normally has when displayed on its own with the given width. This 8.1948 +enables almost seamless integration of external text in a document, 8.1949 +without a scrollbar or other scrolling mechanism. (The external text 8.1950 +is still displayed with its own style sheet.) 8.1951 +</div> 8.1952 + 8.1953 +<div class=example> 8.1954 +<p>An external mathematical formula in MathML is an example of 8.1955 +replaced content with an intrinsic width and height. Assume the file 8.1956 +m.mml contains a formula, then the HTML fragment 8.1957 + 8.1958 +<pre> 8.1959 +... derive <img src="m.mml" 8.1960 +alt="that the sum of p(i) for i greater than 0 equals N"> 8.1961 +for the case... 8.1962 +</pre> 8.1963 + 8.1964 +<p>renders the formula at its intrinsic size. 8.1965 +</div> 8.1966 + 8.1967 +<p class=issue>The mathematical formula would however benefit from a 8.1968 +way to negotiate available space against intrinsic size, or even 8.1969 +negotiate available space against the number of boxes, so that the 8.1970 +formula could be broken in two or more boxes and occupy space on two 8.1971 +or more lines (similar to how lines of text are broken or words are 8.1972 +hyphenated). HTML5, unlike HTML4, has math elements, so formulas can 8.1973 +be embedded instead of transcluded, which would solve the problem if 8.1974 +CSS had properties for math typography… 8.1975 + 8.1976 + 8.1977 + 8.1978 + 8.1979 +<h2>Block-level formatting</h2> 8.1980 + 8.1981 +<p>In a <dfn>block formatting context,</dfn> block-level boxes are 8.1982 +laid out in the manner of a series of paragraphs. 8.1983 + 8.1984 +<p>The boxes of a <span>flow</span> are laid out one after the other 8.1985 +in the direction of the 'writing-mode' property of the <span>flow 8.1986 +root</span> and in the same order as in the source document. Their 8.1987 +position is given by how much their margins overlap (see <a 8.1988 +href="#collapsing-margins">“Collapsing margins”</a>) and by the fact 8.1989 +that their side margin edges coincide with the edges of their 8.1990 +containing block. More precisely: Each box's <span title="D 8.1991 +edge">D</span> and <span>B edge</span> coincide with respectively the 8.1992 +<span>start</span> and <span>end</span> edges of its <span>containing 8.1993 +block.</span> 8.1994 + 8.1995 +<p class="issue">When is a block formatting context established? 8.1996 + 8.1997 +<p class=issue>TODO: Need to deal with anonymous block boxes. 8.1998 + 8.1999 +<div class=example> 8.2000 +<p>An example of the last point above is this document fragment: 8.2001 + 8.2002 +<pre><p>Somebody whose name I have 8.2003 +forgotten, said, long ago: <q>a box is 8.2004 +a box,</q> and he probably meant it.</p></pre> 8.2005 + 8.2006 +<p>with these style rules: 8.2007 +<pre>p { display: block } 8.2008 +q { display: block; margin: 1em }</pre> 8.2009 + 8.2010 +<p>The <code>p</code> element has both line boxes and a child box for the 8.2011 +<code>q</code> element, which is a block-level element. The line boxes before 8.2012 +the <code>q</code> are wrapped in an anonymous block-level box and so are the 8.2013 +line boxes after the <code>q</code>. The resulting tree of boxes might be as 8.2014 +follows (refer to the <a href="#When">figure</a>): 8.2015 +<ul> 8.2016 + <li>block-level box [p] 8.2017 + <ul> 8.2018 + <li>block-level box [anonymous] 8.2019 + <ul> 8.2020 + <li>line box: “Somebody…” 8.2021 + <li>line box: “forgotten…” 8.2022 + </ul> 8.2023 + 8.2024 + <li>block-level box [q] 8.2025 + <ul> 8.2026 + <li>line box: “a box…” 8.2027 + </ul> 8.2028 + 8.2029 + <li>block-level box [anonymous] 8.2030 + <ul> 8.2031 + <li>line box: “and he…” 8.2032 + </ul> 8.2033 + 8.2034 + </ul> 8.2035 +</ul> 8.2036 + 8.2037 +<div class=figure id=When> 8.2038 + <p><img alt="The P element has two line boxes before the q and one 8.2039 + after. The first two are wrapped in an anonymous box, the last one 8.2040 + is wrapped in another anonymous box." src="anonymous.png"> 8.2041 + 8.2042 + <p class="caption">When the fragment is rendered, the text before 8.2043 + the q is wrapped in an anonymous block and the text after the q in 8.2044 + another. 8.2045 +</div> 8.2046 +</div><!--example--> 8.2047 + 8.2048 + 8.2049 + 8.2050 +<h3 id=collapsing-margins>Collapsing margins</h3> 8.2051 + 8.2052 +<p>Certain adjoining margins, as defined in this section, combine to 8.2053 +form a single margin. Those margins are said to <dfn>collapse.</dfn> 8.2054 +Margins are <dfn>adjoining</dfn> if there are no nonempty content, 8.2055 +<span title="padding area">padding</span> or <span title="border 8.2056 +area">border areas</span> or <em>clearance</em> to separate them. 8.2057 + 8.2058 +<div class=example> 8.2059 +<p>For example, in the following fragment with the given style rules: 8.2060 +<pre>p { display: block; margin-bottom: 2em 0 1em 0 } 8.2061 +div { display: block; margin: 2.5em 0 } 8.2062 +... 8.2063 +<p>First paragraph</p> 8.2064 +<div> 8.2065 + <p>Second paragraph</p> 8.2066 +</div></pre> 8.2067 + 8.2068 +<p>the bottom margin of the first <code>p</code> (=1em), the top margin of 8.2069 +the <code>div</code> (=2.5em) and the top margin of the second <code>p</code> 8.2070 +(=2em) collapse. The result is a single margin of 2.5em (the maximum of the 8.2071 +three) between the bottom of the first <code>p</code> and the top of the 8.2072 +second. 8.2073 +</div> 8.2074 + 8.2075 +<div class=figure> 8.2076 + <p><img src="collapse1.png" alt="Three margins collapse: 1em + 2.5em + 2em"> 8.2077 + <p class=caption>Schematic representation of the previous example. 8.2078 +</div> 8.2079 + 8.2080 +<div class=example> 8.2081 +<p>In the following fragment, 8.2082 +<pre>p { display: block; margin: 2em 0 1em 0 } 8.2083 +div { display: block; margin: 2.5em 0; 8.2084 + border: thin solid } 8.2085 +... 8.2086 +<p>First paragraph</p> 8.2087 +<div> 8.2088 + <p>Second paragraph</p> 8.2089 +</div></pre> 8.2090 + 8.2091 +<p>the bottom margin of the first <code>p</code> and the top margin of 8.2092 +the <code>div</code> collapse, but the top margin of the second 8.2093 +<code>p</code> does not collapse with them, because it is not 8.2094 +<em>adjoining;</em> the border of the <code>div</code> separates them. 8.2095 +</div> 8.2096 + 8.2097 +<div class=figure> 8.2098 + <p><img src="collapse2.png" alt="Only two margins collapse: 1em + 2.5em"> 8.2099 + <p class=caption>Schematic representation of the previous example. 8.2100 +</div> 8.2101 + 8.2102 +<p>If a set of adjoining margins collapses, then the width of the resulting 8.2103 +margin is <var>M</var> - <var>N</var>, where <var>M</var> is the maximum of 8.2104 +the adjoining margins that are positive, or zero if there are none; and 8.2105 +<var>N</var> is the minimum of the adjoining margins that are negative, or 8.2106 +zero if there are none. 8.2107 + 8.2108 +<p>We call an element or box <dfn>collapsed through</dfn> if two of 8.2109 +its margins collapse with each other. 8.2110 + 8.2111 +<div class=example> 8.2112 +<p>The most common use of collapsing through elements is that empty 8.2113 +paragraphs don't cause extra white space: 8.2114 + 8.2115 +<pre><p>First paragraph 8.2116 +<p>Second paragraph 8.2117 +<p> 8.2118 +<p>Last paragraph</pre> 8.2119 + 8.2120 +<p>There is equal space between the first and the second paragraphs as 8.2121 +between the second and the last. 8.2122 +</div> 8.2123 + 8.2124 +<p>The following two sets of rules determine which margins collapse. 8.2125 + 8.2126 +<ul> 8.2127 + <li>Only margins of <em>block-level</em> boxes can collapse. 8.2128 + 8.2129 + <li>Margins of a floated box do not collapse with any other margins. 8.2130 + 8.2131 + <li>Margins of a <em>flow root</em> do not collapse with its 8.2132 + children's margins. 8.2133 + 8.2134 + <li>Margins of an absolutely positioned box (see [[CSS3POS]]) do not 8.2135 + collapse with any other margins. 8.2136 + 8.2137 + <!-- 8.2138 + <li>Margins of an ''inline-block'' box do not collapse (not even 8.2139 + with its in-flow children). <span class=issue>Assuming the first 8.2140 + rule above (“only block-level”) is correct, this rule seems 8.2141 + redundant, because an inline block is not block-level.</span> 8.2142 + --> 8.2143 + 8.2144 + <li>Margins of the root element's box do not collapse with any other 8.2145 + margins. 8.2146 + 8.2147 + <li>If a box is <em>collapsed through</em> and it has 8.2148 + <em>clearance</em> applied to one of its two collapsed margins, then 8.2149 + those two margins do not collapse with certain of the parent's 8.2150 + margins, as follows: If clearance is applied to, respectively, the 8.2151 + top, right, bottom or left margin, then the two margins do not 8.2152 + collapse with the parent's bottom, left, top or right margin, 8.2153 + respectively. 8.2154 + 8.2155 + <li>If a <em>horizontal</em> element has a 'height' that is not 8.2156 + ''auto'', or if setting its 'min-height' and 'max-height' to their 8.2157 + initial values would change its used height, then the <em>tail</em> 8.2158 + margin of the element does not collapse with any of its children's 8.2159 + margins. <span class=issue>[Check with latest CSS 2.1 if min/max 8.2160 + width/height still have this effect.]</span> 8.2161 + 8.2162 + <li>Similarly, if a <em>vertical</em> element has a 'width' that is 8.2163 + not ''auto'', or if setting its 'min-width' and 'max-width' to their 8.2164 + initial values would change the used width, then the <em>tail</em> 8.2165 + margin of the element does not collapse with any of its children's 8.2166 + margins. <span class=issue>[Check with latest CSS 2.1 if min/max 8.2167 + width/height still have this effect.]</span> 8.2168 +</ul> 8.2169 + 8.2170 +<p>Except when forbidden by the list above, the following margins 8.2171 +collapse: 8.2172 + 8.2173 +<ul> 8.2174 + <!-- transitive --> 8.2175 + <li> 8.2176 + <p>If a margin P collapses with a margin Q and margin Q with a 8.2177 + margin R, then P, Q and R collapse together. (“Collapsing is 8.2178 + transitive”) 8.2179 + 8.2180 + <!-- parent-child / head --> 8.2181 + <li> 8.2182 + <p>A margin of a box collapses with the <em>head</em> margin of 8.2183 + its parent box if those two margins are <em>adjoining.</em> 8.2184 + 8.2185 + <!-- parent-child / tail --> 8.2186 + <li> 8.2187 + <p>A margin of a box collapses with the <em>tail</em> margin of 8.2188 + its parent box if those two margins are <em>adjoining.</em> 8.2189 + 8.2190 + <!-- sibling --> 8.2191 + <li> 8.2192 + <p>The <em>head</em> margin of a box collapses with the 8.2193 + <em>tail</em> margin of a sibling box if the two margins are 8.2194 + <em>adjoining.</em> 8.2195 + 8.2196 + <!-- self top-bottom --> 8.2197 + <li> 8.2198 + <p>The top and bottom margins of a box A collapse with each other 8.2199 + if the two margins are <em>adjoining</em> and the parent box B is 8.2200 + <em>horizontal.</em> (The box is <em>“collapsed through.”</em>) 8.2201 + 8.2202 + <!-- self left-right --> 8.2203 + <li> 8.2204 + <p>The left and right margins of a box A collapse with each other 8.2205 + if the two margins are <em>adjoining</em> and the parent box B is 8.2206 + <em>vertical.</em> (The box is <em>“collapsed through.”</em>) 8.2207 +</ul> 8.2208 + 8.2209 +<p>If a box A is <em>collapsed through</em> and it has the same mode 8.2210 +as its parent (i.e., both are <em>horizontal</em> or both are 8.2211 +<em>vertical</em>), then the position of its <em>head</em> border edge 8.2212 +is defined as follows. 8.2213 + 8.2214 +<ul> 8.2215 + <li>If the box A's margins are collapsed with its parent's 8.2216 + <em>head</em> margin, the head border edge of A is defined to be the 8.2217 + same as the parent's head border edge. 8.2218 + 8.2219 + <li>Otherwise, either the parent is not taking part in the margin 8.2220 + collapsing, or only the parent's <em>tail</em> margin is involved. 8.2221 + The position of A's head border edge is defined to be the same as it 8.2222 + would have been if A had a nonzero <em>tail</em> border. 8.2223 +</ul> 8.2224 + 8.2225 + <p class=note>Note that box A itself is invisible and its position 8.2226 + has no effect on the positions of the other elements with whose 8.2227 + margins it is being collapsed; the border edge position is only 8.2228 + required for laying out descendants of A. 8.2229 + 8.2230 +<div class=example> 8.2231 +<p>In a horizontal flow, the bottom margin of an in-flow 8.2232 +<span>block-level</span> element is always adjoining to the top margin 8.2233 +of its next in-flow block-level sibling, unless that sibling has 8.2234 +clearance: 8.2235 + 8.2236 +<pre> 8.2237 +<p style="margin-bottom: 2em">The bottom margin of this 8.2238 +box…</p> 8.2239 + 8.2240 +<p style="margin-top: 3em">… collapses with the top margin 8.2241 +of this box, to yield max(2em, 3em) = 3em margin.</p> 8.2242 +</pre> 8.2243 + 8.2244 +<p>The top margin of an in-flow block-level element is adjoining to 8.2245 +its first in-flow block-level child's top margin if the element has no 8.2246 +top border, no top padding, and the child has no clearance: 8.2247 + 8.2248 +<pre> 8.2249 +<div style="margin-top: 2em; padding: 0; border: 0"> 8.2250 + <p style="margin-top: 3em"> 8.2251 + The top margin of the DIV and the P 8.2252 + collapse, to yield max(2em, 3em) = 3em margin. 8.2253 + </p> 8.2254 +</div> 8.2255 +</pre> 8.2256 + 8.2257 +<p>The bottom margin of an in-flow block-level element with a 'height' 8.2258 +of ''auto'' and 'min-height' less than the element's used height and 8.2259 +'max-height' greater than the element's used height is adjoining to 8.2260 +its last in-flow block-level child's bottom margin if the element has 8.2261 +no bottom padding or border: 8.2262 + 8.2263 +<pre> 8.2264 +<div style="margin-bottom: 2em; padding: 0; border: 0; 8.2265 + height: auto; min-height: 0; max-height: 100em"> 8.2266 + <p style="margin-bottom: 3em"> 8.2267 + The bottom margin of the DIV and the P collapse, to yield max(2em, 8.2268 + 3em) = 3em margin. 8.2269 + </p> 8.2270 +</div> 8.2271 +</pre> 8.2272 + 8.2273 +<p>An element's own margins are adjoining if the 'min-height' property is 8.2274 +zero, and it has neither vertical borders nor vertical padding, and it has a 8.2275 +'height' of either 0 or ''auto'', and it does not contain a line box, and all 8.2276 +of its in-flow children's margins (if any) are adjoining: 8.2277 + 8.2278 +<pre> 8.2279 +<div style="margin-top: 2em; margin-bottom: 3em"> 8.2280 + <p style="position: absolute"> 8.2281 + The DIV is empty and its top and bottom margins collapse. 8.2282 + </p> 8.2283 +</div> 8.2284 +</pre> 8.2285 + 8.2286 +<p>When an element's own margins collapse, and that element has had 8.2287 +clearance applied to it, its top margin collapses with the adjoining 8.2288 +margins of subsequent siblings but that resulting margin does not 8.2289 +collapse with the bottom margin of the parent block: 8.2290 + 8.2291 +<pre> 8.2292 +<div style="margin-bottom: 2em"> 8.2293 + <p style="float: left"> 8.2294 + The margins of the next two Ps collapse 8.2295 + <p style="clear: left; margin-top: 4em; margin-bottom: 3em"> 8.2296 + <!-- empty --> 8.2297 + </p> 8.2298 + <p style="margin-top: 1em; margin-bottom: 1em"> 8.2299 + <!-- empty --> 8.2300 + </p> 8.2301 +</div> 8.2302 +</pre> 8.2303 + 8.2304 +<p>The top and bottom margins of the two empty Ps collapse all 8.2305 +together. But they can't collapse with the bottom of the DIV, because 8.2306 +one of the two empty P's has clearance. 8.2307 + 8.2308 +<p class=issue>Check this. This is probably the only possible 8.2309 +interpretation of the rules, but it is certainly not obvious that the 8.2310 +clearance of one element may stop later elements from 8.2311 +collapsing… 8.2312 +</div> 8.2313 + 8.2314 +<p>Collapsing is based on the used value of 'padding', 'margin', and 'border' 8.2315 +(i.e., after resolving any percentages). The collapsed margin is calculated 8.2316 +over the used value of the various margins. 8.2317 + 8.2318 + 8.2319 + 8.2320 + 8.2321 + 8.2322 + 8.2323 <h2 id=Calculating>Calculating widths, heights and margins</h2> 8.2324 8.2325 <p>The following two algorithms define the <em>used value</em> of 8.2326 @@ -3029,15 +3256,17 @@ 8.2327 <h2>The float property</h2> 8.2328 8.2329 <table class=propdef> 8.2330 - <tr><td>Name: <td><dfn>float</dfn> 8.2331 - <tr><td>Value: <td>[ left | right | top | bottom | start | end | none | 8.2332 + <tr><th>Name: <td><dfn>float</dfn> 8.2333 + <tr><th>Value: <td>[ left | right | top | bottom | start | end | none | 8.2334 <var><page-floats></var> ] && contour? 8.2335 - <tr><td>Initial: <td>none 8.2336 - <tr><td>Applies to: <td>all, but see text 8.2337 - <tr><td>Inherited: <td>no 8.2338 - <tr><td>Percentages: <td>N/A 8.2339 - <tr><td>Media: <td>visual 8.2340 - <tr><td>Computed value: <td>as specified 8.2341 + <tr><th>Initial: <td>none 8.2342 + <tr><th>Applies to: <td>all, but see text 8.2343 + <tr><th>Inherited: <td>no 8.2344 + <tr><th>Animatable: <td>no 8.2345 + <tr><th>Percentages: <td>N/A 8.2346 + <tr><th>Media: <td>visual 8.2347 + <tr><th>Computed value: <td>as specified 8.2348 + <tr><th>Canonical order: <td>order of grammar 8.2349 </table> 8.2350 8.2351 <p class=issue>Adding ''start'' and ''end'' was decided at 2009-12-02 8.2352 @@ -3564,14 +3793,16 @@ 8.2353 <h2>The clear property</h2> 8.2354 8.2355 <table class=propdef> 8.2356 - <tr><td>Name: <td><dfn>clear</dfn> 8.2357 - <tr><td>Value: <td>none | left | right | both 8.2358 - <tr><td>Initial: <td>none 8.2359 - <tr><td>Applies to: <td><span>block-level</span> elements 8.2360 - <tr><td>Inherited: <td>no 8.2361 - <tr><td>Percentages: <td>N/A 8.2362 - <tr><td>Media: <td>visual 8.2363 - <tr><td>Computed value: <td>as specified 8.2364 + <tr><th>Name: <td><dfn>clear</dfn> 8.2365 + <tr><th>Value: <td>none | left | right | both 8.2366 + <tr><th>Initial: <td>none 8.2367 + <tr><th>Applies to: <td><span>block-level</span> elements 8.2368 + <tr><th>Inherited: <td>no 8.2369 + <tr><th>Animatable: <td>no 8.2370 + <tr><th>Percentages: <td>N/A 8.2371 + <tr><th>Media: <td>visual 8.2372 + <tr><th>Computed value: <td>as specified 8.2373 + <tr><th>Canonical order: <td>N/A 8.2374 </table> 8.2375 8.2376 <p class=issue>[To do: copy from CSS2 [[!CSS21]] and generalize to 8.2377 @@ -3604,7 +3835,7 @@ 8.2378 floats. [The idea to add the functionality to 'height' is due to IanH 8.2379 2004-02-29] 8.2380 8.2381 -<li>A new value ''align-box'' on 'display'. 8.2382 +<li>A new value ''container'' on 'display'. 8.2383 </ol> 8.2384 </div> 8.2385 8.2386 @@ -3631,6 +3862,10 @@ 8.2387 <td>Inherited: 8.2388 <td>no 8.2389 8.2390 + <tr> 8.2391 + <td>Animatable: 8.2392 + <td>no 8.2393 + 8.2394 <tr valign="baseline"> 8.2395 <td>Percentages: 8.2396 <td>N/A 8.2397 @@ -3642,7 +3877,10 @@ 8.2398 <tr> 8.2399 <td>Computed value: 8.2400 <td>specified value 8.2401 - 8.2402 + 8.2403 + <tr> 8.2404 + <th>Canonical order: 8.2405 + <td>N/A 8.2406 </tbody> 8.2407 </table> 8.2408 8.2409 @@ -3732,6 +3970,10 @@ 8.2410 <td>Inherited: 8.2411 <td>no 8.2412 8.2413 + <tr> 8.2414 + <td>Animatable: 8.2415 + <td>no 8.2416 + 8.2417 <tr valign="baseline"> 8.2418 <td>Percentages: 8.2419 <td>N/A 8.2420 @@ -3743,7 +3985,10 @@ 8.2421 <tr> 8.2422 <td>Computed value: 8.2423 <td>specified value 8.2424 - 8.2425 + 8.2426 + <tr> 8.2427 + <th>Canonical order: 8.2428 + <td>order of keywords as in grammar 8.2429 </tbody> 8.2430 </table> 8.2431 8.2432 @@ -3781,28 +4026,32 @@ 8.2433 them in terms of “overflow-x and/or -y” or similar. 8.2434 8.2435 <table class=propdef> 8.2436 - <tr><td>Name: <td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn>, 8.2437 - <tr><td>Value: <td>visible | hidden | scroll | auto | no-display | no-content 8.2438 - <tr><td>Initial: <td>visible 8.2439 - <tr><td>Applies to: <td>non-replaced <em>block-level</em> elements 8.2440 + <tr><th>Name: <td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn>, 8.2441 + <tr><th>Value: <td>visible | hidden | scroll | auto | no-display | no-content 8.2442 + <tr><th>Initial: <td>visible 8.2443 + <tr><th>Applies to: <td>non-replaced <em>block-level</em> elements 8.2444 and non-replaced ''inline-block'' elements 8.2445 - <tr><td>Inherited: <td>no 8.2446 - <tr><td>Percentages: <td>N/A 8.2447 - <tr><td>Media: <td>visual 8.2448 - <tr><td>Computed value:<td>as specified, except 'visible', see text 8.2449 + <tr><th>Inherited: <td>no 8.2450 + <tr><th>Animatable: <td>no 8.2451 + <tr><th>Percentages: <td>N/A 8.2452 + <tr><th>Media: <td>visual 8.2453 + <tr><th>Computed value:<td>as specified, except 'visible', see text 8.2454 + <tr><th>Canonical order: <td>N/A 8.2455 </table> 8.2456 8.2457 <table class=propdef> 8.2458 - <tr><td>Name: <td><dfn>overflow</dfn> 8.2459 - <tr><td>Value: <td>[ visible | hidden | scroll | auto | no-display | 8.2460 + <tr><th>Name: <td><dfn>overflow</dfn> 8.2461 + <tr><th>Value: <td>[ visible | hidden | scroll | auto | no-display | 8.2462 no-content ]{1,2} 8.2463 - <tr><td>Initial: <td>see individual properties 8.2464 - <tr><td>Applies to: <td>non-replaced <em>block-level</em> elements 8.2465 + <tr><th>Initial: <td>see individual properties 8.2466 + <tr><th>Applies to: <td>non-replaced <em>block-level</em> elements 8.2467 and non-replaced ''inline-block'' elements 8.2468 - <tr><td>Inherited: <td>no 8.2469 - <tr><td>Percentages: <td>N/A 8.2470 - <tr><td>Media: <td>visual 8.2471 - <tr><td>Computed value:<td>as specified, except 'visible', see text 8.2472 + <tr><th>Inherited: <td>no 8.2473 + <tr><th>Animatable: <td>no 8.2474 + <tr><th>Percentages: <td>N/A 8.2475 + <tr><th>Media: <td>visual 8.2476 + <tr><th>Computed value:<td>as specified, except 'visible', see text 8.2477 + <tr><th>Canonical order: <td>N/A 8.2478 </table> 8.2479 8.2480 <p>These properties specify whether content is clipped when it 8.2481 @@ -4040,14 +4289,16 @@ 8.2482 <h2>The visibility property</h2> 8.2483 8.2484 <table class=propdef> 8.2485 - <tr><td>Name: <td><dfn>visibility</dfn> 8.2486 - <tr><td>Value: <td>visible | hidden | collapse 8.2487 - <tr><td>Initial: <td> visible 8.2488 - <tr><td>Applies to: <td>all elements 8.2489 - <tr><td>Inherited: <td>yes 8.2490 - <tr><td>Percentages: <td>N/A 8.2491 - <tr><td>Media: <td>visual 8.2492 - <tr><td>Computed value: <td>as specified 8.2493 + <tr><th>Name: <td><dfn>visibility</dfn> 8.2494 + <tr><th>Value: <td>visible | hidden | collapse 8.2495 + <tr><th>Initial: <td> visible 8.2496 + <tr><th>Applies to: <td>all elements 8.2497 + <tr><th>Inherited: <td>yes 8.2498 + <tr><th>Animatable: <td>no 8.2499 + <tr><th>Percentages: <td>N/A 8.2500 + <tr><th>Media: <td>visual 8.2501 + <tr><th>Computed value: <td>as specified 8.2502 + <tr><th>Canonical order: <td>N/A 8.2503 </table> 8.2504 8.2505 <p>This property specifies whether the boxes generated by an element 8.2506 @@ -4073,14 +4324,16 @@ 8.2507 <h2>The alignment property</h2> 8.2508 8.2509 <table class=propdef> 8.2510 - <tr><td>Name: <td><dfn>alignment</dfn> 8.2511 - <tr><td>Value: <td>top | right | bottom | left | center 8.2512 - <tr><td>Initial: <td>see text 8.2513 - <tr><td>Applies to: <td><span>block-level</span> elements 8.2514 - <tr><td>Inherited: <td>no 8.2515 - <tr><td>Percentages: <td>N/A 8.2516 - <tr><td>Media: <td>visual 8.2517 - <tr><td>Computed value: <td>specified value 8.2518 + <tr><th>Name: <td><dfn>alignment</dfn> 8.2519 + <tr><th>Value: <td>top | right | bottom | left | center 8.2520 + <tr><th>Initial: <td>see text 8.2521 + <tr><th>Applies to: <td><span>block-level</span> elements 8.2522 + <tr><th>Inherited: <td>no 8.2523 + <tr><th>Animatable: <td>no 8.2524 + <tr><th>Percentages: <td>N/A 8.2525 + <tr><th>Media: <td>visual 8.2526 + <tr><th>Computed value: <td>specified value 8.2527 + <tr><th>Canonical order: <td>N/A 8.2528 </table> 8.2529 8.2530 <p class=issue>Another way to allow real centering of boxes would be 8.2531 @@ -4166,14 +4419,16 @@ 8.2532 <a href="/Style/CSS/Tracker/issues/53">ISSUE-53.</a> 8.2533 8.2534 <table class=propdef> 8.2535 - <tr><td>Name: <td><dfn>child-align</dfn> 8.2536 - <tr><td>Value: <td>top | middle | bottom | left | right | auto 8.2537 - <tr><td>Initial: <td>auto 8.2538 - <tr><td>Applies to: <td>block-level elements, table cells and inline blocks 8.2539 - <tr><td>Inherited: <td>yes 8.2540 - <tr><td>Percentages: <td>N/A 8.2541 - <tr><td>Media: <td>visual 8.2542 - <tr><td>Computed value: <td>the initial value or as specified 8.2543 + <tr><th>Name: <td><dfn>child-align</dfn> 8.2544 + <tr><th>Value: <td>top | middle | bottom | left | right | auto 8.2545 + <tr><th>Initial: <td>auto 8.2546 + <tr><th>Applies to: <td>block-level elements, table cells and inline blocks 8.2547 + <tr><th>Inherited: <td>yes 8.2548 + <tr><th>Animatable: <td>no 8.2549 + <tr><th>Percentages: <td>N/A 8.2550 + <tr><th>Media: <td>visual 8.2551 + <tr><th>Computed value: <td>the initial value or as specified 8.2552 + <tr><th>Canonical order: <td>N/A 8.2553 </table> 8.2554 8.2555 <p>This property describes how block-level content of a block is 8.2556 @@ -4818,6 +5073,10 @@ 8.2557 <td>yes 8.2558 8.2559 <tr> 8.2560 + <td>Animatable: 8.2561 + <td>no 8.2562 + 8.2563 + <tr> 8.2564 <td><em>Percentages:</em> 8.2565 <td>N/A 8.2566 8.2567 @@ -4830,9 +5089,8 @@ 8.2568 <td>Same as specified value 8.2569 8.2570 <tr> 8.2571 - <td><em>Computed value:</em> 8.2572 - <td>specified value 8.2573 - 8.2574 + <th>Canonical order: 8.2575 + <td>N/A 8.2576 </tbody> 8.2577 </table> 8.2578 8.2579 @@ -5153,8 +5411,7 @@ 8.2580 8.2581 <tr> 8.2582 <td><em>Value:</em> 8.2583 - <td>none | margin-edge | border-edge | padding-edge | content-edge | 8.2584 - inherit 8.2585 + <td>none | margin-edge | border-edge | padding-edge | content-edge 8.2586 8.2587 <tr> 8.2588 <td><em>Initial:</em> 8.2589 @@ -5169,6 +5426,10 @@ 8.2590 <td>no 8.2591 8.2592 <tr> 8.2593 + <td>Animatable: 8.2594 + <td>yes 8.2595 + 8.2596 + <tr> 8.2597 <td><em>Percentages:</em> 8.2598 <td>n/a 8.2599 8.2600 @@ -5179,7 +5440,10 @@ 8.2601 <tr> 8.2602 <td><em>Computed value:</em> 8.2603 <td>specified value 8.2604 - 8.2605 + 8.2606 + <tr> 8.2607 + <th>Canonical order: 8.2608 + <td>N/A 8.2609 </tbody> 8.2610 </table> 8.2611
9.1 Binary file css3-box/flow1.png has changed
10.1 Binary file css3-box/horizontal-rtl.png has changed
11.1 Binary file css3-box/horizontal.png has changed
12.1 Binary file css3-box/vertical-lr-rtl.png has changed
13.1 Binary file css3-box/vertical-lr.png has changed
14.1 Binary file css3-box/vertical-rl.png has changed
15.1 Binary file css3-box/vertical-rtl.png has changed
16.1 Binary file css3-box/vertical.png has changed
17.1 --- a/css3-color/Makefile Fri Sep 21 16:00:07 2012 -0700 17.2 +++ b/css3-color/Makefile Fri Sep 21 16:01:06 2012 -0700 17.3 @@ -1,39 +1,65 @@ 17.4 # Calling the post-processor with file-upload. Assumes the username 17.5 -# and password are in ~/.curl-w3.org 17.6 +# and password are in ~/.curl-w3.org (user = USER:PASS) 17.7 # 17.8 -# Possible other options: 17.9 -# -F date=YYYY-MM-DD 17.10 +# To set a date other than today, use: make cdate=YYYYMMDD 17.11 +# 17.12 +# To set the status, modify one of the "this version" URLs: 17.13 +# http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]/ 17.14 +# Or set that URL to [VERSION] and call Make as: make status=CR 17.15 +# 17.16 +# 17.17 +# Possible other options to add to the curl command below: 17.18 # -F ids=on 17.19 +# -F omitdchtml=on 17.20 + 17.21 +opts = 17.22 + 17.23 +cdate = $(shell date +%Y%m%d) 17.24 17.25 %.html: %.src.html 17.26 @echo "Calling post-processor to generate $@..." 17.27 - @curl -F file=@$< -F group=CSS -F output=html -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 17.28 + @curl -K ~/.curl-w3.org -s -S -F output=html -F file=@$< -F group=CSS \ 17.29 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 17.30 + https://cgi.w3.org/member-bin/process.cgi 17.31 %.err: %.src.html 17.32 @echo "Calling post-processor to check $<..." 17.33 - @curl -F file=@$< -F group=CSS -F output=err -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 17.34 + @curl -K ~/.curl-w3.org -s -S -F output=err -F file=@$< -F group=CSS \ 17.35 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 17.36 + https://cgi.w3.org/member-bin/process.cgi 17.37 17.38 +# For Dispositions of Comments in css3-background: 17.39 +%.html: %.txt; awk -f issues-txt-to-html.awk $< >$@ 17.40 + 17.41 +# Rule to create EPS from FIG 17.42 +%.eps: %.fig; fig2dev -m 0.8 -L eps -F -c $< $@ 17.43 + 17.44 +# Rule to create raster image versions of EPS images 17.45 +%.png: %.eps; convert -density 96x96 $< $@ 17.46 17.47 17.48 all: check Overview.html 17.49 - @echo Done. 17.50 17.51 +# egrep will exit with a zero exit code if there is anything left 17.52 check: Overview.err 17.53 @cat $< 17.54 - @grep -q '^No errors$$' $< # Force a non-zero exit code if errors 17.55 - 17.56 + @if egrep -v '^(Warning:|\(Processed in .* seconds\)|No errors)' $<;\ 17.57 + then false; else true; fi 17.58 17.59 17.60 # A handy shortcut: 17.61 17.62 -commit: update clean all 17.63 - cvs commit -m 'Generated. Do not edit!' Overview.html 17.64 +commit: update all 17.65 + hg commit -m 'Generated. Do not edit!' Overview.html || true 17.66 + hg push 17.67 17.68 update: 17.69 - cvs update 17.70 + hg pull -u 17.71 17.72 clean: 17.73 - rm Overview.html 17.74 + rm -f Overview.html Overview.err 17.75 17.76 17.77 17.78 .PHONY: check commit update clean 17.79 +.DELETE_ON_ERROR: 17.80 +.PRECIOUS: %.png
18.1 --- a/css3-conditional/Overview.html Fri Sep 21 16:00:07 2012 -0700 18.2 +++ b/css3-conditional/Overview.html Fri Sep 21 16:01:06 2012 -0700 18.3 @@ -10,15 +10,15 @@ 18.4 <link href="http://purl.org/dc/terms/" rel=schema.DC> 18.5 <meta content="CSS Conditional Rules Module Level 3" name=DC.title> 18.6 <meta content=text name=DC.type> 18.7 - <meta content=2012-09-10 name=DC.issued> 18.8 + <meta content=2012-09-20 name=DC.issued> 18.9 <meta content="http://dev.w3.org/csswg/css3-conditional/" name=DC.creator> 18.10 <meta content=W3C name=DC.publisher> 18.11 - <meta content="http://www.w3.org/TR/2012/WD-css3-conditional-20120910/" 18.12 + <meta content="http://www.w3.org/TR/2012/ED-css3-conditional-20120920/" 18.13 name=DC.identifier> 18.14 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 18.15 rel=DC.rights> 18.16 <link href="../default.css" rel=stylesheet type="text/css"> 18.17 - <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet 18.18 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 18.19 type="text/css"> 18.20 18.21 <body> 18.22 @@ -28,14 +28,14 @@ 18.23 18.24 <h1>CSS Conditional Rules Module Level 3</h1> 18.25 18.26 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 10 18.27 - September 2012</h2> 18.28 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 September 18.29 + 2012</h2> 18.30 18.31 <dl> 18.32 <dt>This version: 18.33 18.34 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120910/"> 18.35 - http://www.w3.org/TR/2012/WD-css3-conditional-20120910/</a> 18.36 + <dd><a href="http://www.w3.org/TR/2012/ED-css3-conditional-20120920/"> 18.37 + http://www.w3.org/TR/2012/ED-css3-conditional-20120920/</a> 18.38 18.39 <dt>Latest version: 18.40 18.41 @@ -112,41 +112,35 @@ 18.42 <h2 class="no-num no-toc" id=status>Status of this document</h2> 18.43 <!--begin-status--> 18.44 18.45 - <p><em>This section describes the status of this document at the time of 18.46 - its publication. Other documents may supersede this document. A list of 18.47 - current W3C publications and the latest revision of this technical report 18.48 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 18.49 - index at http://www.w3.org/TR/.</a></em> 18.50 - 18.51 - <p>Publication as a Working Draft does not imply endorsement by the W3C 18.52 - Membership. This is a draft document and may be updated, replaced or 18.53 - obsoleted by other documents at any time. It is inappropriate to cite this 18.54 - document as other than work in progress. 18.55 + <p>This is a public copy of the editors' draft. It is provided for 18.56 + discussion only and may change at any moment. Its publication here does 18.57 + not imply endorsement of its contents by W3C. Don't cite this document 18.58 + other than as work in progress. 18.59 18.60 <p>The (<a 18.61 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 18.62 - mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see 18.63 - <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred 18.64 - for discussion of this specification. When sending e-mail, please put the 18.65 - text “css3-conditional” in the subject, preferably like this: 18.66 + mailing list <a 18.67 + href="mailto:www-style@w3.org?Subject=%5Bcss3-conditional%5D%20PUT%20SUBJECT%20HERE"> 18.68 + www-style@w3.org</a> (see <a 18.69 + href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 18.70 + discussion of this specification. When sending e-mail, please put the text 18.71 + “css3-conditional” in the subject, preferably like this: 18.72 “[<!---->css3-conditional<!---->] <em>…summary of comment…</em>” 18.73 18.74 - <p>This document was produced by the <a 18.75 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of 18.76 - the <a href="http://www.w3.org/Style/">Style Activity</a>). 18.77 + <p>This document was produced by the <a href="/Style/CSS/members">CSS 18.78 + Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 18.79 18.80 <p>This document was produced by a group operating under the <a 18.81 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 18.82 - 2004 W3C Patent Policy</a>. W3C maintains a <a 18.83 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 18.84 + href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent 18.85 + Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" 18.86 rel=disclosure>public list of any patent disclosures</a> made in 18.87 connection with the deliverables of the group; that page also includes 18.88 instructions for disclosing a patent. An individual who has actual 18.89 knowledge of a patent which the individual believes contains <a 18.90 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 18.91 + href="/Consortium/Patent-Policy-20040205/#def-essential">Essential 18.92 Claim(s)</a> must disclose the information in accordance with <a 18.93 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 18.94 - 6 of the W3C Patent Policy</a>.</p> 18.95 + href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 18.96 + W3C Patent Policy</a>.</p> 18.97 <!--end-status--> 18.98 18.99 <p>The following features are at risk: 18.100 @@ -207,9 +201,6 @@ 18.101 <ul class=toc> 18.102 <li><a href="#support-definition"><span class=secno>6.1. 18.103 </span>Definition of support</a> 18.104 - 18.105 - <li><a href="#partial-implementations"><span class=secno>6.2. 18.106 - </span>Partial implementations</a> 18.107 </ul> 18.108 18.109 <li><a href="#at-document"><span class=secno>7. </span>Document queries: 18.110 @@ -815,38 +806,34 @@ 18.111 <h3 id=support-definition><span class=secno>6.1. </span>Definition of 18.112 support</h3> 18.113 18.114 - <p>A CSS processor is considered to <dfn id=dfn-support>support</dfn> a 18.115 - declaration (consisting of a property and value) if it implements the 18.116 - given value of the given property. 18.117 - 18.118 - <h3 id=partial-implementations><span class=secno>6.2. </span>Partial 18.119 - implementations</h3> 18.120 - 18.121 <p>For forward-compatibility, <a 18.122 href="http://www.w3.org/TR/CSS21/syndata.html#declaration">section 4.1.8 18.123 (Declarations and properties)</a> of <a href="#CSS21" 18.124 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines rules for handling 18.125 - invalid properties and values. CSS processors that partially implement a 18.126 - specification <strong>must</strong> treat any part of a value that they: 18.127 + invalid properties and values. CSS processors that do not implement or 18.128 + partially implement a specification <strong>must</strong> treat any part 18.129 + of a value that they do not implement, or do not have a usable level of 18.130 + support for, as invalid according to this rule for handling invalid 18.131 + properties and values, and therefore <strong>must</strong> discard the 18.132 + declaration as a parse error. 18.133 18.134 - <ul> 18.135 - <li>do not implement, or 18.136 + <p>A CSS processor is considered to <dfn id=dfn-support>support</dfn> a 18.137 + declaration (consisting of a property and value) if it accepts that 18.138 + declaration (rather than discarding it as a parse error). If a processor 18.139 + does not implement, with a usable level of support, the value given, then 18.140 + it <strong>must not</strong> accept the declaration or claim support for 18.141 + it. 18.142 18.143 - <li>do not have a usable level of support for, 18.144 - </ul> 18.145 - 18.146 - <p>as invalid according to this rule for handling invalid properties and 18.147 - values, and <strong>must not</strong> accept or support a declaration 18.148 - containing such a value. This allows authors to use fallback (either in 18.149 - the <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of 18.150 - declarations that are overridden by later declarations or with the new 18.151 - capabilities provided by the ‘<a href="#dfn-support"><code 18.152 - class=css>@supports</code></a>’ rule in this specification) that works 18.153 - correctly for the features implemented. This applies especially to 18.154 - compound values; implementations must implement all parts of the value in 18.155 - order to consider the declaration supported, either inside a ruleset or in 18.156 - the declaration condition of an ‘<a href="#dfn-support"><code 18.157 - class=css>@supports</code></a>’ rule. 18.158 + <p>These rules (and the equivalence between them) allow authors to use 18.159 + fallback (either in the <a href="#CSS1" 18.160 + rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of declarations that are 18.161 + overridden by later declarations or with the new capabilities provided by 18.162 + the ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ rule 18.163 + in this specification) that works correctly for the features implemented. 18.164 + This applies especially to compound values; implementations must implement 18.165 + all parts of the value in order to consider the declaration supported, 18.166 + either inside a ruleset or in the declaration condition of an ‘<a 18.167 + href="#dfn-support"><code class=css>@supports</code></a>’ rule. 18.168 18.169 <h2 id=at-document><span class=secno>7. </span>Document queries: the 18.170 ‘<code class=css>@document</code>’ rule</h2> 18.171 @@ -1069,7 +1056,7 @@ 18.172 ; 18.173 18.174 url_match_fn 18.175 - : (URI | FUNCTION) S* 18.176 + : (URI | FUNCTION S* STRING S* ')' ) S* 18.177 ;</pre> 18.178 18.179 <h2 id=apis><span class=secno>8. </span>APIs</h2> 18.180 @@ -1133,8 +1120,19 @@ 18.181 <dl class=idl-attributes> 18.182 <dt><code>conditionText</code> of type <code>DOMString</code> 18.183 18.184 - <dd>The <code>conditionText</code> attribute, on getting, must return the 18.185 - result of serializing the associated condition. 18.186 + <dd> 18.187 + <p>The <code>conditionText</code> attribute represents the condition of 18.188 + the rule. Since what this condition does varies between the derived 18.189 + interfaces of <a 18.190 + href="#cssconditionrule"><code>CSSConditionRule</code></a>, those 18.191 + derived interfaces may specify different behavior for this attribute 18.192 + (see, for example, <a href="#cssmediarule"><code>CSSMediaRule</code></a> 18.193 + below). In the absence of such rule-specific behavior, the following 18.194 + rules apply: 18.195 + 18.196 + <p>The <code>conditionText</code> attribute, on getting, must return the 18.197 + result of serializing the associated condition. 18.198 + 18.199 <p>On setting the <code>conditionText</code> attribute these steps must 18.200 be run: 18.201 18.202 @@ -1400,8 +1398,8 @@ 18.203 <p> Thanks to the ideas and feedback from Tab Atkins, <span lang=tr>Tantek 18.204 Çelik</span>, Alex Danilo, Elika Etemad, Pascal Germroth, <span 18.205 lang=de>Björn Höhrmann</span>, Paul Irish, Vitor Menezes, Alex 18.206 - Mogilevsky, Chris Moschini, Ben Ward, Zack Weinberg, Estelle Weyl, Boris 18.207 - Zbarsky, and all the rest of the <a 18.208 + Mogilevsky, Chris Moschini, Simon Sapin, Ben Ward, Zack Weinberg, Estelle 18.209 + Weyl, Boris Zbarsky, and all the rest of the <a 18.210 href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> 18.211 community. 18.212
19.1 --- a/css3-conditional/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 19.2 +++ b/css3-conditional/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 19.3 @@ -18,7 +18,7 @@ 19.4 <dl> 19.5 <dt>This version: 19.6 <dd><a href="[VERSION]"> 19.7 - http://www.w3.org/TR/[YEAR]/WD-css3-conditional-[CDATE]/</a> 19.8 + http://www.w3.org/TR/[YEAR]/ED-css3-conditional-[CDATE]/</a> 19.9 19.10 <dt>Latest version: 19.11 <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a> 19.12 @@ -40,7 +40,7 @@ 19.13 19.14 <dd><a 19.15 href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 19.16 - with subject line “<kbd>[css3-conditional] <var>… message topic 19.17 + with subject line “<kbd>[[SHORTNAME]] <var>… message topic 19.18 …</var></kbd>” 19.19 19.20 <dt>Test suite: 19.21 @@ -564,26 +564,28 @@ 19.22 19.23 <h3 id="support-definition">Definition of support</h3> 19.24 19.25 +<p>For forward-compatibility, 19.26 +<a href="http://www.w3.org/TR/CSS21/syndata.html#declaration">section 4.1.8 19.27 +(Declarations and properties)</a> of [[!CSS21]] 19.28 +defines rules for handling invalid properties and values. 19.29 +CSS processors that 19.30 +do not implement or partially implement a specification 19.31 +<strong>must</strong> treat any part of a value that they 19.32 +do not implement, or 19.33 +do not have a usable level of support for, 19.34 +as invalid according to this rule 19.35 +for handling invalid properties and values, 19.36 +and therefore <strong>must</strong> discard the declaration as a parse error.</p> 19.37 + 19.38 <p>A CSS processor is considered to <dfn id="dfn-support">support</dfn> 19.39 -a declaration (consisting of a property and value) if it implements the 19.40 -given value of the given property.</p> 19.41 +a declaration (consisting of a property and value) if it accepts that 19.42 +declaration (rather than discarding it as a parse error). 19.43 +If a processor does not implement, with a usable level of support, 19.44 +the value given, 19.45 +then it <strong>must not</strong> 19.46 +accept the declaration or claim support for it.</p> 19.47 19.48 -<h3 id="partial-implementations">Partial implementations</h3> 19.49 - 19.50 -<p>For forward-compatibility, <a 19.51 -href="http://www.w3.org/TR/CSS21/syndata.html#declaration">section 4.1.8 19.52 -(Declarations and properties)</a> of [[!CSS21]] defines rules for 19.53 -handling invalid properties and values. CSS processors that partially 19.54 -implement a specification <strong>must</strong> treat any part of a 19.55 -value that they:</p> 19.56 -<ul> 19.57 - <li>do not implement, or</li> 19.58 - <li>do not have a usable level of support for,</li> 19.59 -</ul> 19.60 -<p>as invalid according to this rule 19.61 -for handling invalid properties and values, 19.62 -and <strong>must not</strong> 19.63 -accept or support a declaration containing such a value. This allows 19.64 +<p>These rules (and the equivalence between them) allow 19.65 authors to use fallback (either in the [[CSS1]] sense of declarations 19.66 that are overridden by later declarations or with the new capabilities 19.67 provided by the ''@supports'' rule in this specification) that works 19.68 @@ -785,7 +787,7 @@ 19.69 ; 19.70 19.71 url_match_fn 19.72 - : (URI | FUNCTION) S* 19.73 + : (URI | FUNCTION S* STRING S* ')' ) S* 19.74 ;</pre> 19.75 19.76 <h2 id="apis">APIs</h2> 19.77 @@ -841,8 +843,20 @@ 19.78 }</pre> 19.79 19.80 <dl class='idl-attributes'> 19.81 + 19.82 <dt><code>conditionText</code> of type <code>DOMString</code> 19.83 - <dd>The <code>conditionText</code> attribute, on getting, must return 19.84 + <dd> 19.85 + <p>The <code>conditionText</code> attribute represents 19.86 + the condition of the rule. 19.87 + Since what this condition does 19.88 + varies between the derived interfaces of <code>CSSConditionRule</code>, 19.89 + those derived interfaces 19.90 + may specify different behavior for this attribute 19.91 + (see, for example, <code>CSSMediaRule</code> below). 19.92 + In the absence of such rule-specific behavior, 19.93 + the following rules apply:</p> 19.94 + 19.95 + <p>The <code>conditionText</code> attribute, on getting, must return 19.96 the result of serializing the associated condition. 19.97 19.98 <p>On setting the <code>conditionText</code> attribute these steps 19.99 @@ -1096,6 +1110,7 @@ 19.100 Vitor Menezes, 19.101 Alex Mogilevsky, 19.102 Chris Moschini, 19.103 +Simon Sapin, 19.104 Ben Ward, 19.105 Zack Weinberg, 19.106 Estelle Weyl,
20.1 --- a/css3-flexbox/Overview.html Fri Sep 21 16:00:07 2012 -0700 20.2 +++ b/css3-flexbox/Overview.html Fri Sep 21 16:01:06 2012 -0700 20.3 @@ -2042,7 +2042,7 @@ 20.4 <a href="#flex-components">longhand</a> and specifies the <dfn 20.5 id=flex-basis>flex basis</dfn>: the initial <a href="#main-size"><i>main 20.6 size</i></a> of the <a href="#flex-item"><i>flex item</i></a>, before 20.7 - free space is distributed according to the flex ratios. When omitted 20.8 + free space is distributed according to the flex factors. When omitted 20.9 from the ‘<a href="#flex"><code class=property>flex</code></a>’ 20.10 shorthand, its specified value is the length zero. 20.11 20.12 @@ -2056,7 +2056,7 @@ 20.13 src="images/rel-vs-abs-flex.svg" width=504> <figcaption> A diagram 20.14 showing the difference between "absolute" flex (starting from a basis of 20.15 zero) and "relative" flex (starting from a basis of the item's content 20.16 - size). The three items have flex ratios of ‘<code 20.17 + size). The three items have flex factors of ‘<code 20.18 class=css>1</code>’, ‘<code class=css>1</code>’, and ‘<code 20.19 class=css>2</code>’, respectively. </figcaption> </figure> 20.20 20.21 @@ -2084,7 +2084,7 @@ 20.22 <p> A unitless zero that is not already preceded by two flex factors must 20.23 be interpreted as a flex factor. To avoid misinterpretation or invalid 20.24 declarations, authors must specify a zero <var><flex-basis></var> 20.25 - component with a unit or precede it by both flex ratios. 20.26 + component with a unit or precede it by two flex factors. 20.27 20.28 <h3 id=flex-common><span class=secno>7.2. </span> Common Values of ‘<a 20.29 href="#flex"><code class=property>flex</code></a>’</h3> 20.30 @@ -2140,7 +2140,7 @@ 20.31 href="#flex-basis"><i>flex basis</i></a> to zero, resulting in an item 20.32 that receives the specified proportion of the free space in the flex 20.33 container. If all items in the flex container use this pattern, their 20.34 - sizes will be proportional to the specified flex ratio. 20.35 + sizes will be proportional to the specified flex factor. 20.36 </dl> 20.37 20.38 <p> By default, flex items won't shrink below their minimum content size 20.39 @@ -3373,7 +3373,7 @@ 20.40 <p> To resolve the flexible lengths of the items within a flex line: 20.41 20.42 <ol> 20.43 - <li> <strong>Determine the used flex ratio.</strong> Sum the outer <a 20.44 + <li> <strong>Determine the used flex factor.</strong> Sum the outer <a 20.45 href="#hypothetical-main-size"><i>hypothetical main sizes</i></a> of all 20.46 items on the line. If the sum is less than the flex container's inner 20.47 main size, use the <a href="#flex-grow-factor"><i>flex grow 20.48 @@ -3381,11 +3381,11 @@ 20.49 href="#flex-shrink-factor"><i>flex shrink factor</i></a>. 20.50 20.51 <li> <strong>Size inflexible items.</strong> For any items that have a 20.52 - flex ratio of zero, set their used main size to their <a 20.53 + flex factor of zero, set their used main size to their <a 20.54 href="#hypothetical-main-size"><i>hypothetical main size</i></a>. 20.55 20.56 <li> <strong>Check that you can distribute any space.</strong> If all the 20.57 - flex items on the line are either frozen or have a flex ratio of zero, 20.58 + flex items on the line are either frozen or have a flex factor of zero, 20.59 exit the algorithm. 20.60 20.61 <li> <strong>Calculate free space.</strong> Sum the outer <a 20.62 @@ -3394,12 +3394,12 @@ 20.63 is the free space. 20.64 20.65 <li> <strong>Distribute free space proportional to the flex 20.66 - ratios.</strong> If the sign of the free space is positive and the 20.67 + factors.</strong> If the sign of the free space is positive and the 20.68 algorithm is using the <a href="#flex-grow-factor"><i>flex grow 20.69 factor</i></a>, or if the sign of the free space is negative and the 20.70 algorithm is using the <a href="#flex-shrink-factor"><i>flex shrink 20.71 factor</i></a>, distribute the free space to each flexible item's main 20.72 - size in proportion to the item's flex ratio: 20.73 + size in proportion to the item's flex factor: 20.74 <dl> 20.75 <dt>If the free space is positive 20.76 20.77 @@ -3415,11 +3415,12 @@ 20.78 <dd> For every item on the line, multiply its <a 20.79 href="#flex-shrink-factor"><i>flex shrink factor</i></a> by its outer 20.80 <a href="#flex-base-size"><i>flex base size</i></a>, and note this as 20.81 - its <dfn id=flex-shrink-ratio>flex shrink ratio</dfn>. Find the ratio 20.82 - of the item's <a href="#flex-shrink-ratio"><i>flex shrink ratio</i></a> 20.83 - to the sum of the <a href="#flex-shrink-ratio"><i>flex shrink 20.84 - ratios</i></a> of all items on the line. Set the item's main size to 20.85 - its <a href="#flex-base-size"><i>flex base size</i></a> minus a 20.86 + its <dfn id=scaled-flex-shrink-factor>scaled flex shrink factor</dfn>. 20.87 + Find the ratio of the item's <a 20.88 + href="#scaled-flex-shrink-factor"><i>scaled flex shrink factor</i></a> 20.89 + to the sum of the <a href="#scaled-flex-shrink-factor"><i>scaled flex 20.90 + shrink factors</i></a> of all items on the line. Set the item's main 20.91 + size to its <a href="#flex-base-size"><i>flex base size</i></a> minus a 20.92 fraction of the absolute value of the free space proportional to the 20.93 ratio. <span class=note>Note this may result in a negative inner main 20.94 size; it will be corrected in the next step.</span> 20.95 @@ -4391,9 +4392,6 @@ 20.96 <li>flex shrink factor, <a href="#flex-shrink-factor" 20.97 title="flex shrink factor"><strong>7.1.</strong></a> 20.98 20.99 - <li>flex shrink ratio, <a href="#flex-shrink-ratio" 20.100 - title="flex shrink ratio"><strong>9.7.</strong></a> 20.101 - 20.102 <li>‘<a href="#align-content-flex-start"><code 20.103 class=css>flex-start</code></a>’, <a href="#align-content-flex-start" 20.104 title="''flex-start''"><strong>8.4.</strong></a>, <a 20.105 @@ -4474,6 +4472,9 @@ 20.106 class=css>row-reverse</code></a>’, <a href="#flex-flow-row-reverse" 20.107 title="''row-reverse''"><strong>5.1.</strong></a> 20.108 20.109 + <li>scaled flex shrink factor, <a href="#scaled-flex-shrink-factor" 20.110 + title="scaled flex shrink factor"><strong>9.7.</strong></a> 20.111 + 20.112 <li>single-line, <a href="#single-line" 20.113 title=single-line><strong>6.</strong></a> 20.114
21.1 --- a/css3-flexbox/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 21.2 +++ b/css3-flexbox/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 21.3 @@ -1522,7 +1522,7 @@ 21.4 sets the 'flex-basis' <a href="#flex-components">longhand</a> 21.5 and specifies the <dfn>flex basis</dfn>: 21.6 the initial <i>main size</i> of the <i>flex item</i>, 21.7 - before free space is distributed according to the flex ratios. 21.8 + before free space is distributed according to the flex factors. 21.9 When omitted from the 'flex' shorthand, its specified value is the length zero. 21.10 <p> 21.11 If the specified 'flex-basis' is <a href="#flex-basis-auto">''auto''</a>, 21.12 @@ -1535,7 +1535,7 @@ 21.13 (starting from a basis of zero) 21.14 and "relative" flex 21.15 (starting from a basis of the item's content size). 21.16 - The three items have flex ratios of ''1'', ''1'', and ''2'', respectively. 21.17 + The three items have flex factors of ''1'', ''1'', and ''2'', respectively. 21.18 </figcaption> 21.19 </figure> 21.20 21.21 @@ -1556,7 +1556,7 @@ 21.22 must be interpreted as a flex factor. 21.23 To avoid misinterpretation or invalid declarations, 21.24 authors must specify a zero <var><flex-basis></var> component 21.25 - with a unit or precede it by both flex ratios. 21.26 + with a unit or precede it by two flex factors. 21.27 21.28 <h3 id='flex-common'> 21.29 Common Values of 'flex'</h3> 21.30 @@ -1602,7 +1602,7 @@ 21.31 Makes the flex item flexible and sets the <i>flex basis</i> to zero, 21.32 resulting in an item that receives the specified proportion of the free space in the flex container. 21.33 If all items in the flex container use this pattern, 21.34 - their sizes will be proportional to the specified flex ratio. 21.35 + their sizes will be proportional to the specified flex factor. 21.36 </dl> 21.37 21.38 <p> 21.39 @@ -2670,7 +2670,7 @@ 21.40 21.41 <ol> 21.42 <li> 21.43 - <strong>Determine the used flex ratio.</strong> 21.44 + <strong>Determine the used flex factor.</strong> 21.45 Sum the outer <i>hypothetical main sizes</i> of all items on the line. 21.46 If the sum is less than the flex container's inner main size, 21.47 use the <i>flex grow factor</i> for the rest of this algorithm; 21.48 @@ -2678,14 +2678,14 @@ 21.49 21.50 <li> 21.51 <strong>Size inflexible items.</strong> 21.52 - For any items that have a flex ratio of zero, 21.53 + For any items that have a flex factor of zero, 21.54 set their used main size 21.55 to their <i>hypothetical main size</i>. 21.56 21.57 <li> 21.58 <strong>Check that you can distribute any space.</strong> 21.59 If all the flex items on the line are either frozen 21.60 - or have a flex ratio of zero, 21.61 + or have a flex factor of zero, 21.62 exit the algorithm. 21.63 21.64 <li> 21.65 @@ -2695,11 +2695,11 @@ 21.66 This is the free space. 21.67 21.68 <li> 21.69 - <strong>Distribute free space proportional to the flex ratios.</strong> 21.70 + <strong>Distribute free space proportional to the flex factors.</strong> 21.71 If the sign of the free space is positive and the algorithm is using the <i>flex grow factor</i>, 21.72 or if the sign of the free space is negative and the algorithm is using the <i>flex shrink factor</i>, 21.73 distribute the free space to each flexible item's main size 21.74 - in proportion to the item's flex ratio: 21.75 + in proportion to the item's flex factor: 21.76 21.77 <dl> 21.78 <dt>If the free space is positive</dt> 21.79 @@ -2716,9 +2716,9 @@ 21.80 For every item on the line, 21.81 multiply its <i>flex shrink factor</i> 21.82 by its outer <i>flex base size</i>, 21.83 - and note this as its <dfn>flex shrink ratio</dfn>. 21.84 - Find the ratio of the item's <i>flex shrink ratio</i> 21.85 - to the sum of the <i>flex shrink ratios</i> of all items on the line. 21.86 + and note this as its <dfn>scaled flex shrink factor</dfn>. 21.87 + Find the ratio of the item's <i>scaled flex shrink factor</i> 21.88 + to the sum of the <i>scaled flex shrink factors</i> of all items on the line. 21.89 Set the item's main size 21.90 to its <i>flex base size</i> 21.91 minus a fraction of the absolute value of the free space
22.1 --- a/css3-layout/Makefile Fri Sep 21 16:00:07 2012 -0700 22.2 +++ b/css3-layout/Makefile Fri Sep 21 16:01:06 2012 -0700 22.3 @@ -10,25 +10,31 @@ 22.4 # 22.5 # Possible other options to add to the curl command below: 22.6 # -F ids=on 22.7 +# -F omitdchtml=on 22.8 + 22.9 +opts = 22.10 22.11 cdate = $(shell date +%Y%m%d) 22.12 22.13 %.html: %.src.html 22.14 @echo "Calling post-processor to generate $@..." 22.15 @curl -K ~/.curl-w3.org -s -S -F output=html -F file=@$< -F group=CSS \ 22.16 - -F method=file -F date=$(cdate) -F status=$(status) -o $@ \ 22.17 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 22.18 https://cgi.w3.org/member-bin/process.cgi 22.19 %.err: %.src.html 22.20 @echo "Calling post-processor to check $<..." 22.21 @curl -K ~/.curl-w3.org -s -S -F output=err -F file=@$< -F group=CSS \ 22.22 - -F method=file -F date=$(cdate) -F status=$(status) -o $@ \ 22.23 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 22.24 https://cgi.w3.org/member-bin/process.cgi 22.25 22.26 # For Dispositions of Comments in css3-background: 22.27 +%.html: %.txt; awk -f issues-txt-to-html.awk $< >$@ 22.28 22.29 -%.html: %.txt 22.30 - awk -f issues-txt-to-html.awk $< >$@ 22.31 +# Rule to create EPS from FIG 22.32 +%.eps: %.fig; fig2dev -m 0.8 -L eps -F -c $< $@ 22.33 22.34 +# Rule to create raster image versions of EPS images 22.35 +%.png: %.eps; convert -density 96x96 $< $@ 22.36 22.37 22.38 all: check Overview.html 22.39 @@ -56,3 +62,4 @@ 22.40 22.41 .PHONY: check commit update clean 22.42 .DELETE_ON_ERROR: 22.43 +.PRECIOUS: %.png
23.1 --- a/css3-text-decor/Overview.html Fri Sep 21 16:00:07 2012 -0700 23.2 +++ b/css3-text-decor/Overview.html Fri Sep 21 16:01:06 2012 -0700 23.3 @@ -9,11 +9,11 @@ 23.4 <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)" 23.5 name=DC.title> 23.6 <meta content=text name=DC.type> 23.7 - <meta content=2012-09-05 name=DC.issued> 23.8 + <meta content=2012-09-19 name=DC.issued> 23.9 <meta content="Elika J. Etemad" name=DC.creator> 23.10 <meta content="Koji Ishii" name=DC.creator> 23.11 <meta content=W3C name=DC.publisher> 23.12 - <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120905/" 23.13 + <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120919/" 23.14 name=DC.identifier> 23.15 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 23.16 rel=DC.rights> 23.17 @@ -30,8 +30,8 @@ 23.18 23.19 <h1>CSS Text Decoration Module Level 3</h1> 23.20 23.21 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 5 September 23.22 - 2012</h2> 23.23 + <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 19 23.24 + September 2012</h2> 23.25 23.26 <dl> 23.27 <dt>This version:</dt> 23.28 @@ -40,7 +40,7 @@ 23.29 --> 23.30 23.31 <dd><a 23.32 - href="http://www.w3.org/TR/2012/WD-css3-text-20120905/">http://www.w3.org/TR/2012/WD-css3-text-20120905/</a> 23.33 + href="http://www.w3.org/TR/2012/WD-css3-text-20120919/">http://www.w3.org/TR/2012/WD-css3-text-20120919/</a> 23.34 23.35 <dt>Latest version: 23.36 23.37 @@ -161,6 +161,108 @@ 23.38 class=css>ink</code>’ value 23.39 </ul> 23.40 23.41 + <h2 class="no-num no-toc" id=contents> Table of Contents</h2> 23.42 + <!--begin-toc--> 23.43 + 23.44 + <ul class=toc> 23.45 + <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 23.46 + <ul class=toc> 23.47 + <li><a href="#placement"><span class=secno>1.1. </span> Module 23.48 + Interactions</a> 23.49 + 23.50 + <li><a href="#values"><span class=secno>1.2. </span> Values</a> 23.51 + 23.52 + <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a> 23.53 + </ul> 23.54 + 23.55 + <li><a href="#line-decoration"><span class=secno>2. </span> Line 23.56 + Decoration: Underline, Overline, and Strike-Through</a> 23.57 + <ul class=toc> 23.58 + <li><a href="#text-decoration-line-property"><span class=secno>2.1. 23.59 + </span> Text Decoration Lines: the ‘<code 23.60 + class=property>text-decoration-line</code>’ property</a> 23.61 + 23.62 + <li><a href="#text-decoration-color-property"><span class=secno>2.2. 23.63 + </span> Text Decoration Color: the ‘<code 23.64 + class=property>text-decoration-color</code>’ property</a> 23.65 + 23.66 + <li><a href="#text-decoration-style-property"><span class=secno>2.3. 23.67 + </span> Text Decoration Style: the ‘<code 23.68 + class=property>text-decoration-style</code>’ property</a> 23.69 + 23.70 + <li><a href="#text-decoration-property"><span class=secno>2.4. </span> 23.71 + Text Decoration Shorthand: the ‘<code 23.72 + class=property>text-decoration</code>’ property</a> 23.73 + 23.74 + <li><a href="#text-decoration-skip-property"><span class=secno>2.5. 23.75 + </span> Text Decoration Line Continuity: the ‘<code 23.76 + class=property>text-decoration-skip</code>’ property</a> 23.77 + <ul class=toc> 23.78 + <li><a href="#text-underline-position-property"><span 23.79 + class=secno>2.5.1. </span> Text Underline Position: the ‘<code 23.80 + class=property>text-underline-position</code>’ property</a> 23.81 + </ul> 23.82 + 23.83 + <li><a href="#emphasis-marks"><span class=secno>2.6. </span> Emphasis 23.84 + Marks</a> 23.85 + <ul class=toc> 23.86 + <li><a href="#text-emphasis-style-property"><span class=secno>2.6.1. 23.87 + </span> Emphasis Mark Style: the ‘<code 23.88 + class=property>text-emphasis-style</code>’ property</a> 23.89 + 23.90 + <li><a href="#text-emphasis-color-property"><span class=secno>2.6.2. 23.91 + </span> Emphasis Mark Color: the ‘<code 23.92 + class=property>text-emphasis-color</code>’ property</a> 23.93 + 23.94 + <li><a href="#text-emphasis-property"><span class=secno>2.6.3. </span> 23.95 + Emphasis Mark Shorthand: the ‘<code 23.96 + class=property>text-emphasis</code>’ property</a> 23.97 + 23.98 + <li><a href="#text-emphasis-position-property"><span 23.99 + class=secno>2.6.4. </span> Emphasis Mark Position: the ‘<code 23.100 + class=property>text-emphasis-position</code>’ property</a> 23.101 + </ul> 23.102 + 23.103 + <li><a href="#text-shadow-property"><span class=secno>2.7. </span> Text 23.104 + Shadows: the ‘<code class=property>text-shadow</code>’ property</a> 23.105 + </ul> 23.106 + 23.107 + <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 23.108 + <ul class=toc> 23.109 + <li><a href="#conventions"><span class=secno>3.1. </span> Document 23.110 + Conventions</a> 23.111 + 23.112 + <li><a href="#conformance-classes"><span class=secno>3.2. </span> 23.113 + Conformance Classes</a> 23.114 + 23.115 + <li><a href="#partial"><span class=secno>3.3. </span> Partial 23.116 + Implementations</a> 23.117 + 23.118 + <li><a href="#experimental"><span class=secno>3.4. </span> Experimental 23.119 + Implementations</a> 23.120 + 23.121 + <li><a href="#testing"><span class=secno>3.5. </span>Non-Experimental 23.122 + Implementations</a> 23.123 + 23.124 + <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR Exit 23.125 + Criteria</a> 23.126 + </ul> 23.127 + 23.128 + <li class=no-num><a href="#acknowledgements"> Appendix A: 23.129 + Acknowledgements</a> 23.130 + 23.131 + <li class=no-num><a href="#appendix-b-references">Appendix B: 23.132 + References</a> 23.133 + <ul class=toc> 23.134 + <li class=no-num><a href="#normative-ref">Normative references</a> 23.135 + 23.136 + <li class=no-num><a href="#informative-ref">Informative references</a> 23.137 + </ul> 23.138 + 23.139 + <li class=no-num><a href="#changes">Appendix C: Changes</a> 23.140 + </ul> 23.141 + <!--end-toc--> 23.142 + 23.143 <h2 id=intro><span class=secno>1. </span> Introduction</h2> 23.144 23.145 <p>[document here]
24.1 --- a/css3-text-decor/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 24.2 +++ b/css3-text-decor/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 24.3 @@ -109,6 +109,11 @@ 24.4 <li>the 'text-decoration-skip' property / ''ink'' value 24.5 </ul> 24.6 24.7 +<h2 class="no-num no-toc" id="contents"> 24.8 +Table of Contents</h2> 24.9 + 24.10 +<!--toc--> 24.11 + 24.12 <h2 id="intro"> 24.13 Introduction</h2> 24.14
25.1 Binary file css3-text-decor/text-emphasis-ja.gif has changed
26.1 Binary file css3-text-decor/text-emphasis-ruby.png has changed
27.1 Binary file css3-text-decor/text-emphasis-v.gif has changed
28.1 Binary file css3-text-decor/text-emphasis-zh.gif has changed
29.1 Binary file css3-text-decor/underline-averaging.gif has changed
30.1 Binary file css3-text-decor/underline-example.png has changed
31.1 Binary file css3-text-decor/underline-position-alphabetic.png has changed
32.1 Binary file css3-text-decor/underline-position-below.png has changed
33.1 Binary file css3-text-decor/underline-position-left.png has changed
34.1 Binary file css3-text-decor/underline-position-right.png has changed
35.1 --- a/css3-text/Overview.html Fri Sep 21 16:00:07 2012 -0700 35.2 +++ b/css3-text/Overview.html Fri Sep 21 16:01:06 2012 -0700 35.3 @@ -8,11 +8,11 @@ 35.4 <link href="http://purl.org/dc/terms/" rel=schema.DC> 35.5 <meta content="CSS Text Module Level 3 (CSS3 Text)" name=DC.title> 35.6 <meta content=text name=DC.type> 35.7 - <meta content=2012-09-05 name=DC.issued> 35.8 + <meta content=2012-09-19 name=DC.issued> 35.9 <meta content="Elika J. Etemad" name=DC.creator> 35.10 <meta content="Koji Ishii" name=DC.creator> 35.11 <meta content=W3C name=DC.publisher> 35.12 - <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120905/" 35.13 + <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120919/" 35.14 name=DC.identifier> 35.15 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 35.16 rel=DC.rights> 35.17 @@ -46,8 +46,8 @@ 35.18 35.19 <h1>CSS Text Module Level 3</h1> 35.20 35.21 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 5 September 35.22 - 2012</h2> 35.23 + <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 19 35.24 + September 2012</h2> 35.25 35.26 <dl> 35.27 <dt>This version:</dt> 35.28 @@ -56,7 +56,7 @@ 35.29 --> 35.30 35.31 <dd><a 35.32 - href="http://www.w3.org/TR/2012/WD-css3-text-20120905/">http://www.w3.org/TR/2012/WD-css3-text-20120905/</a> 35.33 + href="http://www.w3.org/TR/2012/WD-css3-text-20120919/">http://www.w3.org/TR/2012/WD-css3-text-20120919/</a> 35.34 35.35 <dt>Latest version: 35.36 35.37 @@ -1262,8 +1262,8 @@ 35.38 <li>breaks before the Katakana-Hiragana prolonged sound mark: 35.39 ー U+30FC, ｰ U+FF70 35.40 </ul> 35.41 - If the <a href="#content-language"><i>content language</i></a> is Chinese 35.42 - or Japanese, then additionally: 35.43 + If the <a href="#content-language"><i>content language</i></a> is 35.44 + Chinese, Japanese, or Korean, then additionally: 35.45 <ul> 35.46 <li>breaks before hyphens:<br> 35.47 ‐ U+2010, – U+2013, 〜 U+301C, ゠ U+30A0 35.48 @@ -1280,8 +1280,8 @@ 35.49 <li>breaks between some inseparable characters:<br> 35.50 ‥ U+2025, … U+2026 35.51 </ul> 35.52 - If the <a href="#content-language"><i>content language</i></a> is Chinese 35.53 - or Japanese, then additionally: 35.54 + If the <a href="#content-language"><i>content language</i></a> is 35.55 + Chinese, Japanese, or Korean, then additionally: 35.56 <ul> 35.57 <li>breaks before certain centered punctuation marks:<br> 35.58 : U+003A, ; U+003B, ・ U+30FB, ： U+FF1A, ； U+FF1B, 35.59 @@ -3146,8 +3146,8 @@ 35.60 name=text-emphasis-style></a> <a name=text-emphasis-color></a> <a 35.61 name=text-emphasis></a> <a name=text-emphasis-position></a> <a 35.62 name=text-shadow></a> Text decoration has moved to <a 35.63 - href="http://www.w3.org/TR/css3-text-decor/">CSS Text Decoration Module 35.64 - Level 3</a>. [[CSS3TXTDECOR]] 35.65 + href="../css3-text-decor/">CSS Text Decoration Module Level 3</a>. 35.66 + [[CSS3TXTDECOR]] 35.67 35.68 <h2 id=conformance><span class=secno>11. </span> Conformance</h2> 35.69 35.70 @@ -3462,10 +3462,10 @@ 35.71 <dt id=CSS3VAL>[CSS3VAL] 35.72 35.73 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 35.74 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS 35.75 - Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working 35.76 - Draft. (Work in progress.) URL: <a 35.77 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a> 35.78 + href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS 35.79 + Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate 35.80 + Recommendation. (Work in progress.) URL: <a 35.81 + href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> 35.82 </dd> 35.83 <!----> 35.84
36.1 --- a/css3-text/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 36.2 +++ b/css3-text/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 36.3 @@ -2345,7 +2345,7 @@ 36.4 <a name="text-emphasis-position"></a> 36.5 <a name="text-shadow"></a> 36.6 Text decoration has moved to 36.7 - <a href="http://www.w3.org/TR/css3-text-decor/">CSS Text Decoration Module Level 3</a>. 36.8 + <a href="../css3-text-decor/">CSS Text Decoration Module Level 3</a>. 36.9 [[CSS3TXTDECOR]] 36.10 36.11 <h2 id="conformance">
37.1 Binary file css3-text/text-emphasis-ja.gif has changed
38.1 Binary file css3-text/text-emphasis-ruby.png has changed
39.1 Binary file css3-text/text-emphasis-v.gif has changed
40.1 Binary file css3-text/text-emphasis-zh.gif has changed
41.1 Binary file css3-text/underline-averaging.gif has changed
42.1 Binary file css3-text/underline-example.png has changed
43.1 Binary file css3-text/underline-position-alphabetic.png has changed
44.1 Binary file css3-text/underline-position-below.png has changed
45.1 Binary file css3-text/underline-position-left.png has changed
46.1 Binary file css3-text/underline-position-right.png has changed
47.1 --- a/css3-transitions/Overview.html Fri Sep 21 16:00:07 2012 -0700 47.2 +++ b/css3-transitions/Overview.html Fri Sep 21 16:01:06 2012 -0700 47.3 @@ -2,11 +2,21 @@ 47.4 "http://www.w3.org/TR/html4/strict.dtd"> 47.5 47.6 <html lang=en> 47.7 - <head> 47.8 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 47.9 <title>CSS Transitions</title> 47.10 + 47.11 + <link href="http://purl.org/dc/terms/" rel=schema.DC> 47.12 + <meta content="CSS Transitions" name=DC.title> 47.13 + <meta content=text name=DC.type> 47.14 + <meta content=2012-09-20 name=DC.issued> 47.15 + <meta content="http://dev.w3.org/csswg/css3-transitions/" name=DC.creator> 47.16 + <meta content=W3C name=DC.publisher> 47.17 + <meta content="http://www.w3.org/TR/2012/ED-css3-transitions-20120920/" 47.18 + name=DC.identifier> 47.19 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 47.20 + rel=DC.rights> 47.21 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 47.22 <link href="../default.css" rel=stylesheet type="text/css"> 47.23 - 47.24 <style type="text/css"> 47.25 table.animatable-properties { 47.26 border-collapse: collapse; 47.27 @@ -15,9 +25,10 @@ 47.28 padding: 0.2em 1em; 47.29 border: 1px solid black; 47.30 } 47.31 + div.prod { margin: 1em 2em; } 47.32 </style> 47.33 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 47.34 - type="text/css"> 47.35 + type="text/css"> 47.36 47.37 <body> 47.38 <div class=head> <!--begin-logo--> 47.39 @@ -26,14 +37,15 @@ 47.40 47.41 <h1>CSS Transitions</h1> 47.42 47.43 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2012</h2> 47.44 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 September 47.45 + 2012</h2> 47.46 47.47 <dl> 47.48 <dt>This version: 47.49 47.50 - <dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120712/"> 47.51 + <dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120920/"> 47.52 http://dev.w3.org/csswg/css3-transitions/</a> 47.53 - <!--http://www.w3.org/TR/2012/WD-css3-transitions-20120712/--> 47.54 + <!--http://www.w3.org/TR/2012/WD-css3-transitions-20120920/--> 47.55 47.56 <dt>Latest version: 47.57 47.58 @@ -44,7 +56,6 @@ 47.59 47.60 <dd><a 47.61 href="http://dev.w3.org/csswg/css3-transitions/">http://dev.w3.org/csswg/css3-transitions/</a> 47.62 - 47.63 47.64 <dt>Previous version: 47.65 47.66 @@ -253,7 +264,7 @@ 47.67 properties. For example: 47.68 47.69 <div class=example> 47.70 - <p style="display:none"> Example(s):</p> 47.71 + <p style="display:none"> Example(s): 47.72 47.73 <pre> 47.74 div { 47.75 @@ -272,7 +283,7 @@ 47.76 from the same index in all the lists. For example: 47.77 47.78 <div class=example> 47.79 - <p style="display:none"> Example(s):</p> 47.80 + <p style="display:none"> Example(s): 47.81 47.82 <pre> 47.83 div { 47.84 @@ -304,7 +315,7 @@ 47.85 class=property>transition-property</code></a>’. </span> 47.86 47.87 <div class=example> 47.88 - <p style="display:none"> Example(s):</p> 47.89 + <p style="display:none"> Example(s): 47.90 47.91 <pre> 47.92 div { 47.93 @@ -343,8 +354,11 @@ 47.94 <tr> 47.95 <td> <em>Value:</em> 47.96 47.97 - <td> none | [ all | <IDENT> ] [ ‘<code class=css>,</code>’ [ 47.98 - all | <IDENT> ] ]* 47.99 + <td> none | <a 47.100 + href="#single-transition-property"><single-transition-property></a> 47.101 + [ ‘<code class=css>,</code>’ <a 47.102 + href="#single-transition-property"><single-transition-property></a> 47.103 + ]* 47.104 47.105 <tr> 47.106 <td> <em>Initial:</em> 47.107 @@ -362,6 +376,11 @@ 47.108 <td> no 47.109 47.110 <tr> 47.111 + <td> <em>Animatable:</em> 47.112 + 47.113 + <td> no 47.114 + 47.115 + <tr> 47.116 <td> <em>Percentages:</em> 47.117 47.118 <td> N/A 47.119 @@ -375,8 +394,18 @@ 47.120 <td> <em>Computed value:</em> 47.121 47.122 <td> Same as specified value. 47.123 + 47.124 + <tr> 47.125 + <td> <em>Canonical order:</em> 47.126 + 47.127 + <td> <abbr title="follows order of property value definition">per 47.128 + grammar</abbr> 47.129 </table> 47.130 47.131 + <div class=prod> <dfn 47.132 + id=single-transition-property><single-transition-property></dfn> = 47.133 + all | <IDENT></div> 47.134 + 47.135 <p> A value of ‘<code class=property>none</code>’ means that no 47.136 property will transition. Otherwise, a list of properties to be 47.137 transitioned, or the keyword ‘<code class=property>all</code>’ which 47.138 @@ -441,7 +470,7 @@ 47.139 <tr> 47.140 <td> <em>Value:</em> 47.141 47.142 - <td> <time> [, <time>]* 47.143 + <td> <span><time></span> [, <span><time></span>]* 47.144 47.145 <tr> 47.146 <td> <em>Initial:</em> 47.147 @@ -459,6 +488,11 @@ 47.148 <td> no 47.149 47.150 <tr> 47.151 + <td> <em>Animatable:</em> 47.152 + 47.153 + <td> no 47.154 + 47.155 + <tr> 47.156 <td> <em>Percentages:</em> 47.157 47.158 <td> N/A 47.159 @@ -472,6 +506,12 @@ 47.160 <td> <em>Computed value:</em> 47.161 47.162 <td> Same as specified value. 47.163 + 47.164 + <tr> 47.165 + <td> <em>Canonical order:</em> 47.166 + 47.167 + <td> <abbr title="follows order of property value definition">per 47.168 + grammar</abbr> 47.169 </table> 47.170 47.171 <p> This property specifies how long the transition from the old value to 47.172 @@ -540,18 +580,15 @@ 47.173 <td> <em>Name:</em> 47.174 47.175 <td> <dfn id=transition-timing-function>transition-timing-function</dfn> 47.176 - 47.177 47.178 <tr> 47.179 <td> <em>Value:</em> 47.180 47.181 - <td> [ ease | linear | ease-in | ease-out | ease-in-out | step-start | 47.182 - step-end | steps(<integer>[, [ start | end ] ]?) | 47.183 - cubic-bezier(<number>, <number>, <number>, 47.184 - <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out 47.185 - | step-start | step-end | steps(<number>[, [ start | end ] ]?) | 47.186 - cubic-bezier(<number>, <number>, <number>, 47.187 - <number>) ] ]* 47.188 + <td> <a 47.189 + href="#single-transition-timing-function"><single-transition-timing-function></a> 47.190 + [ ‘<code class=css>,</code>’ <a 47.191 + href="#single-transition-timing-function"><single-transition-timing-function></a> 47.192 + ]* 47.193 47.194 <tr> 47.195 <td> <em>Initial:</em> 47.196 @@ -569,6 +606,11 @@ 47.197 <td> no 47.198 47.199 <tr> 47.200 + <td> <em>Animatable:</em> 47.201 + 47.202 + <td> no 47.203 + 47.204 + <tr> 47.205 <td> <em>Percentages:</em> 47.206 47.207 <td> N/A 47.208 @@ -582,8 +624,21 @@ 47.209 <td> <em>Computed value:</em> 47.210 47.211 <td> Same as specified value. 47.212 + 47.213 + <tr> 47.214 + <td> <em>Canonical order:</em> 47.215 + 47.216 + <td> <abbr title="follows order of property value definition">per 47.217 + grammar</abbr> 47.218 </table> 47.219 47.220 + <div class=prod> <dfn 47.221 + id=single-transition-timing-function><single-transition-timing-function></dfn> 47.222 + = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end 47.223 + | steps(<integer>[, [ start | end ] ]?) | 47.224 + cubic-bezier(<number>, <number>, <number>, 47.225 + <number>)</div> 47.226 + 47.227 <p> The timing functions have the following definitions. 47.228 47.229 <dl> 47.230 @@ -605,7 +660,6 @@ 47.231 <dt> ease-out 47.232 47.233 <dd> The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0). 47.234 - 47.235 47.236 <dt> ease-in-out 47.237 47.238 @@ -677,7 +731,7 @@ 47.239 <tr> 47.240 <td> <em>Value:</em> 47.241 47.242 - <td> <time> [, <time>]* 47.243 + <td> <span><time></span> [, <span><time></span>]* 47.244 47.245 <tr> 47.246 <td> <em>Initial:</em> 47.247 @@ -695,6 +749,11 @@ 47.248 <td> no 47.249 47.250 <tr> 47.251 + <td> <em>Animatable:</em> 47.252 + 47.253 + <td> no 47.254 + 47.255 + <tr> 47.256 <td> <em>Percentages:</em> 47.257 47.258 <td> N/A 47.259 @@ -708,6 +767,12 @@ 47.260 <td> <em>Computed value:</em> 47.261 47.262 <td> Same as specified value. 47.263 + 47.264 + <tr> 47.265 + <td> <em>Canonical order:</em> 47.266 + 47.267 + <td> <abbr title="follows order of property value definition">per 47.268 + grammar</abbr> 47.269 </table> 47.270 <!-- ======================================================================================================= --> 47.271 47.272 @@ -719,14 +784,6 @@ 47.273 shorthand property combines the four properties described above into a 47.274 single property. 47.275 47.276 - <p> Note that order is important in this property. The first value that can 47.277 - be parsed as a time is assigned to the transition-duration. The second 47.278 - value that can be parsed as a time is assigned to transition-delay. 47.279 - 47.280 - <p class=issue> An alternative proposal is to accept the font shorthand 47.281 - approach of using a "/" character between the values of the same type. 47.282 - e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 47.283 - 47.284 <table class=propdef> 47.285 <tbody> 47.286 <tr> 47.287 @@ -737,22 +794,9 @@ 47.288 <tr> 47.289 <td> <em>Value:</em> 47.290 47.291 - <td> [<‘<a href="#transition-property"><code 47.292 - class=property>transition-property</code></a>’> || <‘<a 47.293 - href="#transition-duration"><code 47.294 - class=property>transition-duration</code></a>’> || <‘<a 47.295 - href="#transition-timing-function"><code 47.296 - class=property>transition-timing-function</code></a>’> || 47.297 - <‘<a href="#transition-delay"><code 47.298 - class=property>transition-delay</code></a>’> [, [<‘<a 47.299 - href="#transition-property"><code 47.300 - class=property>transition-property</code></a>’> || <‘<a 47.301 - href="#transition-duration"><code 47.302 - class=property>transition-duration</code></a>’> || <‘<a 47.303 - href="#transition-timing-function"><code 47.304 - class=property>transition-timing-function</code></a>’> || 47.305 - <‘<a href="#transition-delay"><code 47.306 - class=property>transition-delay</code></a>’>]]* 47.307 + <td> <a href="#single-transition"><single-transition></a> [ 47.308 + ‘<code class=css>,</code>’ <a 47.309 + href="#single-transition"><single-transition></a> ]* 47.310 47.311 <tr> 47.312 <td> <em>Initial:</em> 47.313 @@ -770,6 +814,11 @@ 47.314 <td> no 47.315 47.316 <tr> 47.317 + <td> <em>Animatable:</em> 47.318 + 47.319 + <td> no 47.320 + 47.321 + <tr> 47.322 <td> <em>Percentages:</em> 47.323 47.324 <td> N/A 47.325 @@ -783,8 +832,36 @@ 47.326 <td> <em>Computed value:</em> 47.327 47.328 <td> Same as specified value. 47.329 + 47.330 + <tr> 47.331 + <td> <em>Canonical order:</em> 47.332 + 47.333 + <td> <abbr title="follows order of property value definition">per 47.334 + grammar</abbr> 47.335 </table> 47.336 47.337 + <div class=prod> <dfn id=single-transition><single-transition></dfn> 47.338 + = [ none | <a 47.339 + href="#single-transition-property"><single-transition-property></a> 47.340 + ] || <span><time></span> || <a 47.341 + href="#single-transition-timing-function"><single-transition-timing-function></a> 47.342 + || <span><time></span></div> 47.343 + 47.344 + <p> Note that order is important within the items in this property: the 47.345 + first value that can be parsed as a time is assigned to the 47.346 + transition-duration, and the second value that can be parsed as a time is 47.347 + assigned to transition-delay. 47.348 + 47.349 + <p class=issue> An alternative proposal is to accept the font shorthand 47.350 + approach of using a "/" character between the values of the same type. 47.351 + e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 47.352 + 47.353 + <p> If there is more than one <a 47.354 + href="#single-transition"><single-transition></a> in the shorthand, 47.355 + and any of the transitions has ‘<code class=css>none</code>’ as the <a 47.356 + href="#single-transition-property"><single-transition-property></a>, 47.357 + then the declaration is invalid. 47.358 + 47.359 <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2> 47.360 47.361 <p> When the computed value of an animatable property changes, 47.362 @@ -800,7 +877,7 @@ 47.363 animatable property would first have its new computed value. 47.364 47.365 <div class=example id=manual-reversing-example> 47.366 - <p style="display:none"> Example(s):</p> 47.367 + <p style="display:none"> Example(s): 47.368 47.369 <p>This provides a way for authors to specify different values of the 47.370 ‘<code class=css>transition-*</code>’ properties for the 47.371 @@ -818,7 +895,7 @@ 47.372 transition. Since it's the new values of these ‘<code 47.373 class=css>transition-*</code>’ properties that affect the transition, 47.374 these values will be used for the transitions <em>to</em> the associated 47.375 - transitioning values. For example:</p> 47.376 + transitioning values. For example: 47.377 47.378 <pre>li { 47.379 transition: background-color linear 1s; 47.380 @@ -838,7 +915,7 @@ 47.381 class=property>blue</code>’ to ‘<code class=property>green</code>’ 47.382 takes 2 seconds. However, when the list item leaves the :hover state, the 47.383 transition from ‘<code class=property>green</code>’ to ‘<code 47.384 - class=property>blue</code>’ takes 1 second.</p> 47.385 + class=property>blue</code>’ takes 1 second. 47.386 </div> 47.387 47.388 <p> When the computed value of a property changes, implementations must 47.389 @@ -918,7 +995,6 @@ 47.390 <ol> 47.391 <li> Use the B and A states as its "from" and "to" states respectively. It 47.392 does not use the current value as its from state, due to the rules below. 47.393 - 47.394 47.395 <li> Execute with the same duration T, but starting as if the transition 47.396 had already begun, without any transition delay, at the moment which 47.397 @@ -982,7 +1058,7 @@ 47.398 47.399 <dd> 47.400 <p> The <code>TransitionEvent</code> interface provides specific 47.401 - contextual information associated with transitions.</p> 47.402 + contextual information associated with transitions. 47.403 47.404 <dl> 47.405 <dt> <b>IDL Definition</b> 47.406 @@ -1048,7 +1124,6 @@ 47.407 <dt> <code class=method-name><a 47.408 id=Events-TransitionEvent-initTransitionEvent 47.409 name=Events-TransitionEvent-initTransitionEvent>initTransitionEvent</a></code> 47.410 - 47.411 47.412 <dd> 47.413 <div class=method> The <code>initTransitionEvent</code> method is 47.414 @@ -1061,7 +1136,7 @@ 47.415 times during that phase if necessary. If called multiple times, the 47.416 final invocation takes precedence. 47.417 <p class=issue>Should new events being created still have init*Event 47.418 - methods?</p> 47.419 + methods? 47.420 47.421 <div class=parameters> <b>Parameters</b> 47.422 <div class=paramtable> 47.423 @@ -1562,8 +1637,9 @@ 47.424 47.425 <h2 id=acknowledgments><span class=secno>8. </span>Acknowledgments</h2> 47.426 47.427 - <p>Thanks especially to the feedback from Tab Atkins, Aryeh Gregor, Vincent 47.428 - Hardy, Cameron McCormack, Alex Mogilevsky, and all the rest of the <a 47.429 + <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, Aryeh 47.430 + Gregor, Vincent Hardy, Cameron McCormack, Alex Mogilevsky, and all the 47.431 + rest of the <a 47.432 href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> 47.433 community. 47.434 47.435 @@ -1584,7 +1660,7 @@ 47.436 Transforms.</cite></a> 3 April 2012. W3C Working Draft. (Work in 47.437 progress.) URL: <a 47.438 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120403/">http://www.w3.org/TR/2012/WD-css3-transforms-20120403/</a> 47.439 - </dd> 47.440 + </dd> 47.441 <!----> 47.442 </dl> 47.443 <!--end-normative--> 47.444 @@ -1604,7 +1680,7 @@ 47.445 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 47.446 2011. W3C Recommendation. URL: <a 47.447 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 47.448 - </dd> 47.449 + </dd> 47.450 <!----> 47.451 47.452 <dt id=CSS3-IMAGES>[CSS3-IMAGES] 47.453 @@ -1614,7 +1690,7 @@ 47.454 Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C 47.455 Candidate Recommendation. (Work in progress.) URL: <a 47.456 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a> 47.457 - </dd> 47.458 + </dd> 47.459 <!----> 47.460 </dl> 47.461 <!--end-informative--> 47.462 @@ -1641,27 +1717,6 @@ 47.463 47.464 <tbody> 47.465 <tr> 47.466 - <th><a class=property href="#transition">transition</a> 47.467 - 47.468 - <td>[<‘transition-property’> || 47.469 - <‘transition-duration’> || 47.470 - <‘transition-timing-function’> || 47.471 - <‘transition-delay’> [, [<‘transition-property’> || 47.472 - <‘transition-duration’> || 47.473 - <‘transition-timing-function’> || 47.474 - <‘transition-delay’>]]* 47.475 - 47.476 - <td>see individual properties 47.477 - 47.478 - <td>all elements, :before and :after pseudo elements 47.479 - 47.480 - <td>no 47.481 - 47.482 - <td>N/A 47.483 - 47.484 - <td>interactive 47.485 - 47.486 - <tr> 47.487 <th><a class=property href="#transition-delay">transition-delay</a> 47.488 47.489 <td><time> [, <time>]* 47.490 @@ -1696,7 +1751,8 @@ 47.491 <th><a class=property 47.492 href="#transition-property">transition-property</a> 47.493 47.494 - <td>none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]* 47.495 + <td>none | <single-transition-property> [ ‘,’ 47.496 + <single-transition-property> ]* 47.497 47.498 <td>all 47.499 47.500 @@ -1709,16 +1765,26 @@ 47.501 <td>visual 47.502 47.503 <tr> 47.504 + <th><a class=property href="#transition">transition</a> 47.505 + 47.506 + <td><single-transition> [ ‘,’ <single-transition> ]* 47.507 + 47.508 + <td>see individual properties 47.509 + 47.510 + <td>all elements, :before and :after pseudo elements 47.511 + 47.512 + <td>no 47.513 + 47.514 + <td>N/A 47.515 + 47.516 + <td>interactive 47.517 + 47.518 + <tr> 47.519 <th><a class=property 47.520 href="#transition-timing-function">transition-timing-function</a> 47.521 47.522 - <td>[ ease | linear | ease-in | ease-out | ease-in-out | step-start | 47.523 - step-end | steps(<integer>[, [ start | end ] ]?) | 47.524 - cubic-bezier(<number>, <number>, <number>, 47.525 - <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out 47.526 - | step-start | step-end | steps(<number>[, [ start | end ] ]?) | 47.527 - cubic-bezier(<number>, <number>, <number>, 47.528 - <number>) ] ]* 47.529 + <td><single-transition-timing-function> [ ‘,’ 47.530 + <single-transition-timing-function> ]* 47.531 47.532 <td>ease 47.533 47.534 @@ -1739,6 +1805,17 @@ 47.535 <li>combined duration, <a href="#combined-duration" 47.536 title="combined duration"><strong>3.</strong></a> 47.537 47.538 + <li><single-transition>, <a href="#single-transition" 47.539 + title="<single-transition>"><strong>2.5.</strong></a> 47.540 + 47.541 + <li><single-transition-property>, <a 47.542 + href="#single-transition-property" 47.543 + title="<single-transition-property>"><strong>2.1.</strong></a> 47.544 + 47.545 + <li><single-transition-timing-function>, <a 47.546 + href="#single-transition-timing-function" 47.547 + title="<single-transition-timing-function>"><strong>2.3.</strong></a> 47.548 + 47.549 <li>transition, <a href="#transition" 47.550 title=transition><strong>2.5.</strong></a> 47.551
48.1 --- a/css3-transitions/Overview.src.html Fri Sep 21 16:00:07 2012 -0700 48.2 +++ b/css3-transitions/Overview.src.html Fri Sep 21 16:01:06 2012 -0700 48.3 @@ -14,6 +14,7 @@ 48.4 padding: 0.2em 1em; 48.5 border: 1px solid black; 48.6 } 48.7 + div.prod { margin: 1em 2em; } 48.8 </style> 48.9 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> 48.10 </head> 48.11 @@ -200,7 +201,7 @@ 48.12 <em>Value:</em> 48.13 </td> 48.14 <td> 48.15 - none | [ all | <IDENT> ] [ ',' [ all | <IDENT> ] ]* 48.16 + none | <span><single-transition-property></span> [ ',' <span><single-transition-property></span> ]* 48.17 </td> 48.18 </tr> 48.19 <tr> 48.20 @@ -229,6 +230,14 @@ 48.21 </tr> 48.22 <tr> 48.23 <td> 48.24 + <em>Animatable:</em> 48.25 + </td> 48.26 + <td> 48.27 + no 48.28 + </td> 48.29 + </tr> 48.30 + <tr> 48.31 + <td> 48.32 <em>Percentages:</em> 48.33 </td> 48.34 <td> 48.35 @@ -251,9 +260,21 @@ 48.36 Same as specified value. 48.37 </td> 48.38 </tr> 48.39 + <tr> 48.40 + <td> 48.41 + <em>Canonical order:</em> 48.42 + </td> 48.43 + <td> 48.44 + <abbr title="follows order of property value definition">per grammar</abbr> 48.45 + </td> 48.46 + </tr> 48.47 </tbody> 48.48 </table> 48.49 48.50 + <div class="prod"> 48.51 + <dfn id="single-transition-property"><single-transition-property></dfn> = all | <IDENT> 48.52 + </div> 48.53 + 48.54 <p> 48.55 A value of 'none' means that no property will transition. 48.56 Otherwise, a list of properties to be transitioned, or the 48.57 @@ -319,7 +340,7 @@ 48.58 <em>Value:</em> 48.59 </td> 48.60 <td> 48.61 - <time> [, <time>]* 48.62 + <span><time></span> [, <span><time></span>]* 48.63 </td> 48.64 </tr> 48.65 <tr> 48.66 @@ -348,6 +369,14 @@ 48.67 </tr> 48.68 <tr> 48.69 <td> 48.70 + <em>Animatable:</em> 48.71 + </td> 48.72 + <td> 48.73 + no 48.74 + </td> 48.75 + </tr> 48.76 + <tr> 48.77 + <td> 48.78 <em>Percentages:</em> 48.79 </td> 48.80 <td> 48.81 @@ -370,6 +399,14 @@ 48.82 Same as specified value. 48.83 </td> 48.84 </tr> 48.85 + <tr> 48.86 + <td> 48.87 + <em>Canonical order:</em> 48.88 + </td> 48.89 + <td> 48.90 + <abbr title="follows order of property value definition">per grammar</abbr> 48.91 + </td> 48.92 + </tr> 48.93 </tbody> 48.94 </table> 48.95 <p> 48.96 @@ -466,7 +503,7 @@ 48.97 <em>Value:</em> 48.98 </td> 48.99 <td> 48.100 - [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] ]* 48.101 + <span><single-transition-timing-function></span> [ ',' <span><single-transition-timing-function></span> ]* 48.102 </td> 48.103 </tr> 48.104 <tr> 48.105 @@ -495,6 +532,14 @@ 48.106 </tr> 48.107 <tr> 48.108 <td> 48.109 + <em>Animatable:</em> 48.110 + </td> 48.111 + <td> 48.112 + no 48.113 + </td> 48.114 + </tr> 48.115 + <tr> 48.116 + <td> 48.117 <em>Percentages:</em> 48.118 </td> 48.119 <td> 48.120 @@ -517,8 +562,19 @@ 48.121 Same as specified value. 48.122 </td> 48.123 </tr> 48.124 + <tr> 48.125 + <td> 48.126 + <em>Canonical order:</em> 48.127 + </td> 48.128 + <td> 48.129 + <abbr title="follows order of property value definition">per grammar</abbr> 48.130 + </td> 48.131 + </tr> 48.132 </tbody> 48.133 </table> 48.134 + <div class="prod"> 48.135 + <dfn id="single-transition-timing-function"><single-transition-timing-function></dfn> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) 48.136 + </div> 48.137 <p> 48.138 The timing functions have the following definitions. 48.139 </p> 48.140 @@ -613,7 +669,7 @@ 48.141 <em>Value:</em> 48.142 </td> 48.143 <td> 48.144 - <time> [, <time>]* 48.145 + <span><time></span> [, <span><time></span>]* 48.146 </td> 48.147 </tr> 48.148 <tr> 48.149 @@ -642,6 +698,14 @@ 48.150 </tr> 48.151 <tr> 48.152 <td> 48.153 + <em>Animatable:</em> 48.154 + </td> 48.155 + <td> 48.156 + no 48.157 + </td> 48.158 + </tr> 48.159 + <tr> 48.160 + <td> 48.161 <em>Percentages:</em> 48.162 </td> 48.163 <td> 48.164 @@ -664,6 +728,14 @@ 48.165 Same as specified value. 48.166 </td> 48.167 </tr> 48.168 + <tr> 48.169 + <td> 48.170 + <em>Canonical order:</em> 48.171 + </td> 48.172 + <td> 48.173 + <abbr title="follows order of property value definition">per grammar</abbr> 48.174 + </td> 48.175 + </tr> 48.176 </tbody> 48.177 </table><!-- ======================================================================================================= --> 48.178 <h3 id=transition-shorthand-property><a id=the-transition-shorthand-property-> 48.179 @@ -672,16 +744,6 @@ 48.180 <p> 48.181 The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property. 48.182 </p> 48.183 - <p> 48.184 - Note that order is important in this property. The first value that can be 48.185 - parsed as a time is assigned to the transition-duration. The second value that 48.186 - can be parsed as a time is assigned to transition-delay. 48.187 - </p> 48.188 - <p class="issue"> 48.189 - An alternative proposal is to accept the font shorthand approach of 48.190 - using a "/" character between the values of the same type. e.g. 2s/4s would 48.191 - mean a duration of 2 seconds and a delay of 4 seconds. 48.192 - </p> 48.193 <table class="propdef"> 48.194 <tbody> 48.195 <tr> 48.196 @@ -697,7 +759,7 @@ 48.197 <em>Value:</em> 48.198 </td> 48.199 <td> 48.200 - [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 48.201 + <span><single-transition></span> [ ',' <span><single-transition></span> ]* 48.202 </td> 48.203 </tr> 48.204 <tr> 48.205 @@ -726,6 +788,14 @@ 48.206 </tr> 48.207 <tr> 48.208 <td> 48.209 + <em>Animatable:</em> 48.210 + </td> 48.211 + <td> 48.212 + no 48.213 + </td> 48.214 + </tr> 48.215 + <tr> 48.216 + <td> 48.217 <em>Percentages:</em> 48.218 </td> 48.219 <td> 48.220 @@ -748,9 +818,42 @@ 48.221 Same as specified value. 48.222 </td> 48.223 </tr> 48.224 + <tr> 48.225 + <td> 48.226 + <em>Canonical order:</em> 48.227 + </td> 48.228 + <td> 48.229 + <abbr title="follows order of property value definition">per grammar</abbr> 48.230 + </td> 48.231 + </tr> 48.232 </tbody> 48.233 </table> 48.234 48.235 + <div class="prod"> 48.236 + <dfn id="single-transition"><single-transition></dfn> = [ none | <span><single-transition-property></span> ] || <span><time></span> || <span><single-transition-timing-function></span> || <span><time></span> 48.237 + </div> 48.238 + 48.239 + <p> 48.240 + Note that order is important within the items in this property: 48.241 + the first value that can be parsed as a time is assigned to the 48.242 + transition-duration, 48.243 + and the second value that can be parsed as a time is assigned to 48.244 + transition-delay. 48.245 + </p> 48.246 + 48.247 + <p class="issue"> 48.248 + An alternative proposal is to accept the font shorthand approach of 48.249 + using a "/" character between the values of the same type. e.g. 2s/4s would 48.250 + mean a duration of 2 seconds and a delay of 4 seconds. 48.251 + </p> 48.252 + 48.253 + <p> 48.254 + If there is more than one <span><single-transition></span> in the shorthand, 48.255 + and any of the transitions has 48.256 + ''none'' as the <span><single-transition-property></span>, 48.257 + then the declaration is invalid. 48.258 + </p> 48.259 + 48.260 <h2 id="starting"> 48.261 Starting of transitions 48.262 </h2> 48.263 @@ -1493,6 +1596,7 @@ 48.264 48.265 <p>Thanks especially to the feedback from 48.266 Tab Atkins, 48.267 +Carine Bournez, 48.268 Aryeh Gregor, 48.269 Vincent Hardy, 48.270 Cameron McCormack,
49.1 --- a/selectors3/Makefile Fri Sep 21 16:00:07 2012 -0700 49.2 +++ b/selectors3/Makefile Fri Sep 21 16:01:06 2012 -0700 49.3 @@ -1,46 +1,65 @@ 49.4 # Calling the post-processor with file-upload. Assumes the username 49.5 -# and password are in ~/.curl-w3.org 49.6 +# and password are in ~/.curl-w3.org (user = USER:PASS) 49.7 # 49.8 # To set a date other than today, use: make cdate=YYYYMMDD 49.9 # 49.10 -# Possible other options: 49.11 +# To set the status, modify one of the "this version" URLs: 49.12 +# http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]/ 49.13 +# Or set that URL to [VERSION] and call Make as: make status=CR 49.14 +# 49.15 +# 49.16 +# Possible other options to add to the curl command below: 49.17 # -F ids=on 49.18 +# -F omitdchtml=on 49.19 + 49.20 +opts = 49.21 49.22 cdate = $(shell date +%Y%m%d) 49.23 49.24 %.html: %.src.html 49.25 @echo "Calling post-processor to generate $@..." 49.26 - @curl -F file=@$< -F group=CSS -F output=html -F method=file -s \ 49.27 - -F date=$(cdate) \ 49.28 - -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 49.29 + @curl -K ~/.curl-w3.org -s -S -F output=html -F file=@$< -F group=CSS \ 49.30 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 49.31 + https://cgi.w3.org/member-bin/process.cgi 49.32 %.err: %.src.html 49.33 @echo "Calling post-processor to check $<..." 49.34 - @curl -F file=@$< -F group=CSS -F output=err -F method=file -s \ 49.35 - -F date=$(cdate) \ 49.36 - -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 49.37 + @curl -K ~/.curl-w3.org -s -S -F output=err -F file=@$< -F group=CSS \ 49.38 + -F method=file -F date=$(cdate) -F status=$(status) $(opts) -o $@ \ 49.39 + https://cgi.w3.org/member-bin/process.cgi 49.40 49.41 +# For Dispositions of Comments in css3-background: 49.42 +%.html: %.txt; awk -f issues-txt-to-html.awk $< >$@ 49.43 + 49.44 +# Rule to create EPS from FIG 49.45 +%.eps: %.fig; fig2dev -m 0.8 -L eps -F -c $< $@ 49.46 + 49.47 +# Rule to create raster image versions of EPS images 49.48 +%.png: %.eps; convert -density 96x96 $< $@ 49.49 49.50 49.51 all: check Overview.html 49.52 - @echo Done. 49.53 49.54 +# egrep will exit with a zero exit code if there is anything left 49.55 check: Overview.err 49.56 @cat $< 49.57 - @grep -q '^No errors$$' $< # Force a non-zero exit code if errors 49.58 - 49.59 + @if egrep -v '^(Warning:|\(Processed in .* seconds\)|No errors)' $<;\ 49.60 + then false; else true; fi 49.61 49.62 49.63 # A handy shortcut: 49.64 49.65 -commit: update clean all 49.66 - cvs commit -m 'Generated. Do not edit!' Overview.html 49.67 +commit: update all 49.68 + hg commit -m 'Generated. Do not edit!' Overview.html || true 49.69 + hg push 49.70 49.71 update: 49.72 - cvs update 49.73 + hg pull -u 49.74 49.75 clean: 49.76 - rm Overview.html 49.77 + rm -f Overview.html Overview.err 49.78 49.79 49.80 49.81 .PHONY: check commit update clean 49.82 +.DELETE_ON_ERROR: 49.83 +.PRECIOUS: %.png
