Wed, 08 Aug 2012 09:06:37 -0700
merge
cssom-view/Overview.src.html | file | annotate | diff | comparison | revisions | |
cssom/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-module/Overview.html Tue Jul 31 14:04:38 2012 -0700 1.2 +++ b/css-module/Overview.html Wed Aug 08 09:06:37 2012 -0700 1.3 @@ -37,13 +37,13 @@ 1.4 <h1>CSS <var class=replaceme>TEMPLATE</var> Module Level <var 1.5 class=replaceme>N</var></h1> 1.6 1.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 April 2012</h2> 1.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 July 2012</h2> 1.9 1.10 <dl> 1.11 <dt>This version: 1.12 1.13 <dd><a class=replaceme 1.14 - href="http://www.w3.org/TR/2012/ED-cssN-FIXME-20120410/">http://www.w3.org/TR/2012/ED-cssN-FIXME-20120410/</a> 1.15 + href="http://www.w3.org/TR/2012/ED-cssN-FIXME-20120731/">http://www.w3.org/TR/2012/ED-cssN-FIXME-20120731/</a> 1.16 1.17 1.18 <dt>Latest version: 1.19 @@ -73,8 +73,8 @@ 1.20 1.21 <dd><a 1.22 href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 1.23 - with subject line “<kbd>[cssN-FIXME] <var>… message topic 1.24 - …</var></kbd>” 1.25 + with subject line “<kbd>[cssN-FIXME] <var>… message topic 1.26 + …</var></kbd>” 1.27 1.28 <dt>Editors: 1.29 1.30 @@ -90,8 +90,8 @@ 1.31 <!--begin-copyright--> 1.32 <p class=copyright><a 1.33 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.34 - rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 1.35 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.36 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 1.37 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.38 href="http://www.csail.mit.edu/"><abbr 1.39 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 1.40 href="http://www.ercim.eu/"><abbr 1.41 @@ -109,16 +109,11 @@ 1.42 1.43 <h2 class="no-num no-toc" id=abstract>Abstract</h2> 1.44 1.45 - <p><a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 1.46 - the rendering of structured documents (such as HTML and XML) on screen, on 1.47 - paper, in speech, etc. This module contains the features of CSS relating 1.48 - to <var class=replaceme>DESCRIBE HERE</var>. It includes and extends the 1.49 - functionality of <var class=replaceme>CSS level 2 <a href="#CSS21" 1.50 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS 1.51 - level 1 <a href="#CSS1" 1.52 - rel=biblioentry>[CSS1]<!--{{CSS1}}--></a></var>. The main extensions 1.53 - compared to <var class=replaceme>level 2</var> are <var 1.54 - class=replaceme>SUMMARIZE HERE</var>. 1.55 + <p>This module contains the features of CSS relating to <var 1.56 + class=replaceme>DESCRIBE HERE</var>. <a 1.57 + href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 1.58 + rendering of structured documents (such as HTML and XML) on screen, on 1.59 + paper, in speech, etc. 1.60 1.61 <h2 class="no-num no-toc" id=status>Status of this document</h2> 1.62 <!--begin-status--> 1.63 @@ -135,9 +130,8 @@ 1.64 www-style@w3.org</a> (see <a 1.65 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 1.66 discussion of this specification. When sending e-mail, please put the text 1.67 - “cssN-FIXME” in the subject, preferably like this: 1.68 - “[<!---->cssN-FIXME<!---->] <em>…summary of 1.69 - comment…</em>” 1.70 + “cssN-FIXME” in the subject, preferably like this: 1.71 + “[<!---->cssN-FIXME<!---->] <em>…summary of comment…</em>” 1.72 1.73 <p>This document was produced by the <a href="/Style/CSS/members">CSS 1.74 Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 1.75 @@ -155,7 +149,7 @@ 1.76 W3C Patent Policy</a>.</p> 1.77 <!--end-status--> 1.78 1.79 - <p>The following features are at risk: … 1.80 + <p>The following features are at risk: … 1.81 1.82 <h2 class="no-num no-toc" id=contents> Table of contents</h2> 1.83 <!--begin-toc--> 1.84 @@ -173,8 +167,8 @@ 1.85 section</a> 1.86 <ul class=toc> 1.87 <li><a href="#the-display-model"><span class=secno>2.1. </span> Internal 1.88 - display model: the ‘<code 1.89 - class=property>display-inside</code>’ property</a> 1.90 + display model: the ‘<code class=property>display-inside</code>’ 1.91 + property</a> 1.92 </ul> 1.93 1.94 <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 1.95 @@ -271,16 +265,16 @@ 1.96 1.97 <p>To refer to HTML, use <a href="#HTML40" 1.98 rel=biblioentry>[HTML40]<!--{{HTML40}}--></a> (note the double square 1.99 - brackets). To make a normative reference, insert a “!”, like 1.100 - this: <a href="#CSS3SYN" rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> 1.101 - The currently available <a 1.102 + brackets). To make a normative reference, insert a “!”, like this: <a 1.103 + href="#CSS3SYN" rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> The 1.104 + currently available <a 1.105 href="https://www.w3.org/Style/Group/css3-src/biblio.ref">list of 1.106 bibliographic data</a> can of course be extended. 1.107 1.108 - <p>We write about a property such as ‘<code 1.109 - class=property>display-model</code>’ like this and about a piece of 1.110 - CSS code like this: ‘<code class=css>foo: bar</code>’. Inline 1.111 - HTML and XML are similar, but use the CODE element: <code 1.112 + <p>We write about a property such as ‘<code 1.113 + class=property>display-model</code>’ like this and about a piece of CSS 1.114 + code like this: ‘<code class=css>foo: bar</code>’. Inline HTML and XML 1.115 + are similar, but use the CODE element: <code 1.116 class=html><blockquote>...</blockquote></code> and <code 1.117 class=xml><r:xyz>...</r:xyz></code>. 1.118 1.119 @@ -328,8 +322,8 @@ 1.120 <p>A formal definition of a property looks like this: 1.121 1.122 <h3 id=the-display-model><span class=secno>2.1. </span> Internal display 1.123 - model: the ‘<a href="#display-inside"><code 1.124 - class=property>display-inside</code></a>’ property</h3> 1.125 + model: the ‘<a href="#display-inside"><code 1.126 + class=property>display-inside</code></a>’ property</h3> 1.127 1.128 <table class=propdef> 1.129 <tbody> 1.130 @@ -369,7 +363,7 @@ 1.131 <td>visual 1.132 1.133 <tr> 1.134 - <th>Computed value: 1.135 + <th>Computed value: 1.136 1.137 <td>specified value 1.138 1.139 @@ -386,8 +380,7 @@ 1.140 </table> 1.141 1.142 <dl> 1.143 - <dt><dfn id=value-name>‘<code 1.144 - class=css>value-name</code>’</dfn> 1.145 + <dt><dfn id=value-name>‘<code class=css>value-name</code>’</dfn> 1.146 1.147 <dd>Define values using a DL 1.148 </dl> 1.149 @@ -413,8 +406,8 @@ 1.150 <p>Don't forget to write the longdesc. 1.151 1.152 <p class=issue>An open issue or editorial remark is OK in a WD, but they 1.153 - should be resolved/removed before the document goes to “CR” 1.154 - (Candidate Recommendation). Use class=“issue”. 1.155 + should be resolved/removed before the document goes to “CR” (Candidate 1.156 + Recommendation). Use class=“issue”. 1.157 1.158 <h2 id=conformance><span class=secno>3. </span> Conformance</h2> 1.159 1.160 @@ -611,7 +604,7 @@ 1.161 1.162 <dd>Bert Bos; et al. <a 1.163 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 1.164 - Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 1.165 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 1.166 2011. W3C Recommendation. URL: <a 1.167 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 1.168 </dd> 1.169 @@ -646,19 +639,9 @@ 1.170 <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.171 <!----> 1.172 1.173 - <dt id=CSS1>[CSS1] 1.174 - 1.175 - <dd>Håkon Wium Lie; Bert Bos. <a 1.176 - href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style 1.177 - Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C 1.178 - Recommendation. URL: <a 1.179 - href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a> 1.180 - </dd> 1.181 - <!----> 1.182 - 1.183 <dt id=CSS3COLOR>[CSS3COLOR] 1.184 1.185 - <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 1.186 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 1.187 href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 1.188 Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 1.189 href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 1.190 @@ -718,8 +701,8 @@ 1.191 1.192 <li>terms, <a href="#terms" title=terms>2.</a> 1.193 1.194 - <li>‘<code class=css>value-name</code>’, <a href="#value-name" 1.195 - title="''value-name''"><strong>2.1.</strong></a> 1.196 + <li>‘<a href="#value-name"><code class=css>value-name</code></a>’, <a 1.197 + href="#value-name" title="''value-name''"><strong>2.1.</strong></a> 1.198 1.199 <li>variant, <a href="#variants" title=variant>2.</a> 1.200 1.201 @@ -739,7 +722,7 @@ 1.202 1.203 <th>Initial 1.204 1.205 - <th>Applies to 1.206 + <th>Applies to 1.207 1.208 <th>Inh. 1.209
2.1 --- a/css3-animations/Overview.html Tue Jul 31 14:04:38 2012 -0700 2.2 +++ b/css3-animations/Overview.html Wed Aug 08 09:06:37 2012 -0700 2.3 @@ -15,14 +15,14 @@ 2.4 2.5 <h1>CSS Animations</h1> 2.6 2.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2012</h2> 2.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 August 2012</h2> 2.9 2.10 <dl> 2.11 <dt>This version: 2.12 2.13 <dd><a 2.14 - href="http://www.w3.org/TR/2012/ED-css3-animations-20120712/">http://dev.w3.org/csswg/css3-animations/</a> 2.15 - <!--http://www.w3.org/TR/2012/WD-css3-animations-20120712/--> 2.16 + href="http://www.w3.org/TR/2012/ED-css3-animations-20120808/">http://dev.w3.org/csswg/css3-animations/</a> 2.17 + <!--http://www.w3.org/TR/2012/WD-css3-animations-20120808/--> 2.18 2.19 <dt>Latest version: 2.20 2.21 @@ -411,7 +411,9 @@ 2.22 class=css>100%</code>’ or ‘<code class=css>to</code>’ keyframe is 2.23 not specified, then the user agent constructs a ‘<code 2.24 class=css>100%</code>’ keyframe using the computed values of the 2.25 - properties being animated. 2.26 + properties being animated. If a keyframe selector specifies negative 2.27 + percentage values or values higher than 100%, then the keyframe will be 2.28 + ignored. 2.29 2.30 <p> The <dfn id=keyframe-declaration-block>keyframe declaration block</dfn> 2.31 for a keyframe rule consists of properties and values. Properties that are 2.32 @@ -1677,6 +1679,118 @@ 2.33 2.34 <tbody> 2.35 <tr> 2.36 + <th><a class=property href="#animation-delay">animation-delay</a> 2.37 + 2.38 + <td><time> [, <time>]* 2.39 + 2.40 + <td>‘0s’ 2.41 + 2.42 + <td>all elements 2.43 + 2.44 + <td>no 2.45 + 2.46 + <td> 2.47 + 2.48 + <td>visual 2.49 + 2.50 + <tr> 2.51 + <th><a class=property 2.52 + href="#animation-direction">animation-direction</a> 2.53 + 2.54 + <td>[ normal | reverse | alternate | alternate-reverse ] [, [ normal | 2.55 + reverse | alternate | alternate-reverse ] ]* 2.56 + 2.57 + <td>‘normal’ 2.58 + 2.59 + <td>all elements 2.60 + 2.61 + <td>no 2.62 + 2.63 + <td> 2.64 + 2.65 + <td>visual 2.66 + 2.67 + <tr> 2.68 + <th><a class=property 2.69 + href="#animation-duration">animation-duration</a> 2.70 + 2.71 + <td><time> [, <time>]* 2.72 + 2.73 + <td>‘0s’ 2.74 + 2.75 + <td>all elements 2.76 + 2.77 + <td>no 2.78 + 2.79 + <td> 2.80 + 2.81 + <td>visual 2.82 + 2.83 + <tr> 2.84 + <th><a class=property 2.85 + href="#animation-fill-mode">animation-fill-mode</a> 2.86 + 2.87 + <td>[ none | forwards | backwards | both ] [, [ none | forwards | 2.88 + backwards | both ] ]* 2.89 + 2.90 + <td>‘none’ 2.91 + 2.92 + <td>all elements 2.93 + 2.94 + <td>no 2.95 + 2.96 + <td> 2.97 + 2.98 + <td>visual 2.99 + 2.100 + <tr> 2.101 + <th><a class=property 2.102 + href="#animation-iteration-count">animation-iteration-count</a> 2.103 + 2.104 + <td>[ infinite | <number> ] [, [ infinite | <number> ] ]* 2.105 + 2.106 + <td>‘1’ 2.107 + 2.108 + <td>all elements 2.109 + 2.110 + <td>no 2.111 + 2.112 + <td> 2.113 + 2.114 + <td>visual 2.115 + 2.116 + <tr> 2.117 + <th><a class=property href="#animation-name">animation-name</a> 2.118 + 2.119 + <td>[ none | IDENT ] [, [ none | IDENT ] ]* 2.120 + 2.121 + <td>‘none’ 2.122 + 2.123 + <td>all elements 2.124 + 2.125 + <td>no 2.126 + 2.127 + <td> 2.128 + 2.129 + <td>visual 2.130 + 2.131 + <tr> 2.132 + <th><a class=property 2.133 + href="#animation-play-state">animation-play-state</a> 2.134 + 2.135 + <td>[ running | paused ] [, [ running | paused ] ]* 2.136 + 2.137 + <td>‘running’ 2.138 + 2.139 + <td>all elements 2.140 + 2.141 + <td>no 2.142 + 2.143 + <td> 2.144 + 2.145 + <td>visual 2.146 + 2.147 + <tr> 2.148 <th><a class=property href="#animation">animation</a> 2.149 2.150 <td>[ <animation-name> || <animation-duration> || 2.151 @@ -1693,119 +1807,7 @@ 2.152 2.153 <td>see individual properties 2.154 2.155 - <td>see individual properties 2.156 - 2.157 - <td>visual 2.158 - 2.159 - <tr> 2.160 - <th><a class=property href="#animation-delay">animation-delay</a> 2.161 - 2.162 - <td><time> [, <time>]* 2.163 - 2.164 - <td>‘0s’ 2.165 - 2.166 - <td>all elements 2.167 - 2.168 - <td>no 2.169 - 2.170 - <td>as specified 2.171 - 2.172 - <td>visual 2.173 - 2.174 - <tr> 2.175 - <th><a class=property 2.176 - href="#animation-direction">animation-direction</a> 2.177 - 2.178 - <td>[ normal | reverse | alternate | alternate-reverse ] [, [ normal | 2.179 - reverse | alternate | alternate-reverse ] ]* 2.180 - 2.181 - <td>‘normal’ 2.182 - 2.183 - <td>all elements 2.184 - 2.185 - <td>no 2.186 - 2.187 - <td>as specified 2.188 - 2.189 - <td>visual 2.190 - 2.191 - <tr> 2.192 - <th><a class=property 2.193 - href="#animation-duration">animation-duration</a> 2.194 - 2.195 - <td><time> [, <time>]* 2.196 - 2.197 - <td>‘0s’ 2.198 - 2.199 - <td>all elements 2.200 - 2.201 - <td>no 2.202 - 2.203 - <td>as specified 2.204 - 2.205 - <td>visual 2.206 - 2.207 - <tr> 2.208 - <th><a class=property 2.209 - href="#animation-fill-mode">animation-fill-mode</a> 2.210 - 2.211 - <td>[ none | forwards | backwards | both ] [, [ none | forwards | 2.212 - backwards | both ] ]* 2.213 - 2.214 - <td>‘none’ 2.215 - 2.216 - <td>all elements 2.217 - 2.218 - <td>no 2.219 - 2.220 - <td>as specified 2.221 - 2.222 - <td>visual 2.223 - 2.224 - <tr> 2.225 - <th><a class=property 2.226 - href="#animation-iteration-count">animation-iteration-count</a> 2.227 - 2.228 - <td>[ infinite | <number> ] [, [ infinite | <number> ] ]* 2.229 - 2.230 - <td>‘1’ 2.231 - 2.232 - <td>all elements 2.233 - 2.234 - <td>no 2.235 - 2.236 - <td>as specified 2.237 - 2.238 - <td>visual 2.239 - 2.240 - <tr> 2.241 - <th><a class=property href="#animation-name">animation-name</a> 2.242 - 2.243 - <td>[ none | IDENT ] [, [ none | IDENT ] ]* 2.244 - 2.245 - <td>‘none’ 2.246 - 2.247 - <td>all elements 2.248 - 2.249 - <td>no 2.250 - 2.251 - <td>As specified 2.252 - 2.253 - <td>visual 2.254 - 2.255 - <tr> 2.256 - <th><a class=property 2.257 - href="#animation-play-state">animation-play-state</a> 2.258 - 2.259 - <td>[ running | paused ] [, [ running | paused ] ]* 2.260 - 2.261 - <td>‘running’ 2.262 - 2.263 - <td>all elements 2.264 - 2.265 - <td>no 2.266 - 2.267 - <td>as specified 2.268 + <td> 2.269 2.270 <td>visual 2.271 2.272 @@ -1827,7 +1829,7 @@ 2.273 2.274 <td>no 2.275 2.276 - <td>as specified 2.277 + <td> 2.278 2.279 <td>visual 2.280 </table>
3.1 --- a/css3-animations/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 3.2 +++ b/css3-animations/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 3.3 @@ -248,7 +248,11 @@ 3.4 using the computed values of the properties being animated. 3.5 If a ''100%'' or ''to'' keyframe is not specified, 3.6 then the user agent constructs a ''100%'' keyframe 3.7 - using the computed values of the properties being animated. 3.8 + using the computed values of the properties being animated. 3.9 + If a keyframe selector specifies 3.10 + negative percentage values or 3.11 + values higher than 100%, 3.12 + then the keyframe will be ignored. 3.13 3.14 <p> 3.15 The <dfn>keyframe declaration block</dfn> for a keyframe rule
4.1 --- a/css3-background/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 4.2 +++ b/css3-background/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 4.3 @@ -6,7 +6,7 @@ 4.4 <title>CSS Backgrounds and Borders Module Level 3</title> 4.5 <link rel=contents href="#contents"> 4.6 <link rel=index href="#index"> 4.7 - <link rel="stylesheet" type="text/css" href="default.css"> 4.8 + <link rel="stylesheet" type="text/css" href="../default.css"> 4.9 <style type="text/css"> 4.10 .prod { font-family: inherit; font-size: inherit } 4.11 pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em } 4.12 @@ -28,14 +28,15 @@ 4.13 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 4.14 <dl> 4.15 <dt>This version: 4.16 - <dd><a href="http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]/">[VERSION]</a> 4.17 + <dd><!-- <a href="http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]/">[VERSION]</a> --> 4.18 + <a href="http://dev.w3.org/csswg/css3-background/">http://dev.w3.org/csswg/css3-background/</a> 4.19 <dt>Latest version: 4.20 <dd><a 4.21 href="http://www.w3.org/TR/css3-background/">[LATEST]</a> 4.22 <dt>Latest editor's draft: 4.23 <dd><a href="http://dev.w3.org/csswg/css3-background/">http://dev.w3.org/csswg/css3-background/</a> 4.24 <dt>Previous version: 4.25 - <dd><a href="http://www.w3.org/TR/2012/CR-css3-background-20120417/">http://www.w3.org/TR/2012/CR-css3-background-20120417/</a> 4.26 + <dd><a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 4.27 <dt>Issue Tracking: 4.28 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/11">http://www.w3.org/Style/CSS/Tracker/products/11</a> 4.29 <dt>Feedback: 4.30 @@ -83,7 +84,7 @@ 4.31 list</a> for this module. A <a href="http://www.w3.org/Style/CSS/Test/">test 4.32 suite</a> and implementation report for CSS Backgrounds and Borders Level 3 4.33 will be developed during the Candidate Recommendation phase, which will last 4.34 -a minimum of three months, and at least until 25 July 2012. See the 4.35 +a minimum of three months, and at least until 25 July 2012. See the 4.36 section <a href="#exit">“CR exit criteria”</a> for more details. 4.37 4.38 <p>The changes to this specification since the previous drafts are
5.1 --- a/css3-break/Overview.html Tue Jul 31 14:04:38 2012 -0700 5.2 +++ b/css3-break/Overview.html Wed Aug 08 09:06:37 2012 -0700 5.3 @@ -17,11 +17,11 @@ 5.4 5.5 <h1 id=css-fragmentation-module>CSS Fragmentation Module Level 3</h1> 5.6 5.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 July 2012</h2> 5.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 August 2012</h2> 5.9 5.10 <dl> 5.11 <dt>This version:</dt> 5.12 - <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-break-20120718/">http://www.w3.org/TR/2012/WD-css3-break-20120718/</a></dd> --> 5.13 + <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-break-20120808/">http://www.w3.org/TR/2012/WD-css3-break-20120808/</a></dd> --> 5.14 5.15 <dd><a 5.16 href="http://dev.w3.org/csswg/css3-break/">http://dev.w3.org/csswg/css3-break/</a> 5.17 @@ -38,7 +38,8 @@ 5.18 5.19 <dt>Previous version: 5.20 5.21 - <dd>None 5.22 + <dd><a 5.23 + href="http://www.w3.org/TR/2012/WD-css3-break-20120228/">http://www.w3.org/TR/2012/WD-css3-break-20120228/</a> 5.24 5.25 <dt>Editors: 5.26 5.27 @@ -150,8 +151,13 @@ 5.28 class=property>break-inside</code>’ properties</a> 5.29 5.30 <li><a href="#widows-orphans"><span class=secno>3.2. </span> Breaks 5.31 - inside elements: ‘<code class=property>orphans</code>’, ‘<code 5.32 + Between Lines: ‘<code class=property>orphans</code>’, ‘<code 5.33 class=property>widows</code>’</a> 5.34 + 5.35 + <li><a href="#page-break"><span class=secno>3.3. </span> Page Break 5.36 + Aliases: the ‘<code class=property>page-break-before</code>’, 5.37 + ‘<code class=property>page-break-after</code>’, and ‘<code 5.38 + class=property>page-break-inside</code>’ properties</a> 5.39 </ul> 5.40 5.41 <li><a href="#breaking-rules"><span class=secno>4. </span> Rules for 5.42 @@ -182,8 +188,8 @@ 5.43 <li><a href="#break-margins"><span class=secno>5.2. </span> Margins at 5.44 Breaks</a> 5.45 5.46 - <li><a href="#break-decoration"><span class=secno>5.3. </span> 5.47 - Decorating Box Breaks</a> 5.48 + <li><a href="#break-decoration"><span class=secno>5.3. </span> Splitting 5.49 + Boxes at Breaks</a> 5.50 </ul> 5.51 5.52 <li><a href="#conformance"><span class=secno>6. </span> Conformance</a> 5.53 @@ -207,6 +213,8 @@ 5.54 Criteria</a> 5.55 </ul> 5.56 5.57 + <li class=no-num><a href="#changes"> Changes</a> 5.58 + 5.59 <li class=no-num><a href="#acknowledgments"> Acknowledgments</a> 5.60 5.61 <li class=no-num><a href="#references">References</a> 5.62 @@ -325,7 +333,7 @@ 5.63 always consists of only one fragment. A box in a fragmented flow consists 5.64 of one or more fragments. 5.65 5.66 - <dt><dfn id=available-fragmentainer-extent>available fragmentainer 5.67 + <dt><dfn id=remaining-fragmentainer-extent>remaining fragmentainer 5.68 extent</dfn> 5.69 5.70 <dd> The remaining extent on the fragmentainer available to a given 5.71 @@ -482,8 +490,8 @@ 5.72 <tr> 5.73 <td><em>Applies to:</em> 5.74 5.75 - <td>block-level elements, block containers, table row groups, table rows 5.76 - (but see prose) 5.77 + <td>elements that establish formatting contexts, block containers, table 5.78 + row groups, and table rows (but see prose) 5.79 5.80 <tr> 5.81 <td><em>Inherited:</em> 5.82 @@ -536,14 +544,14 @@ 5.83 5.84 <dt>‘<code class=css>recto</code>’ 5.85 5.86 - <dd> Force one or two page breaks before/after the principle box so that 5.87 + <dd> Force one or two page breaks before/after the principal box so that 5.88 the next page is formatted as either a left page or a right page, 5.89 whichever is second (according to the page progression) in a page spread. 5.90 5.91 5.92 <dt>‘<code class=css>verso</code>’ 5.93 5.94 - <dd> Force one or two page breaks before/after the principle box so that 5.95 + <dd> Force one or two page breaks before/after the principal box so that 5.96 the next page is formatted as either a left page or a right page, 5.97 whichever is first (according to the page progression) in a page spread. 5.98 5.99 @@ -592,19 +600,15 @@ 5.100 href="#breaking-rules">rules for breaking</a> for the exact rules on how 5.101 these properties affect forced breaks. 5.102 5.103 - <p> User Agents must apply these properties to block-level boxes and to 5.104 - table rows, table row groups, and—in the case of ‘<a 5.105 - href="#break-inside"><code 5.106 - class=property>break-inside</code></a>’—block containers in the normal 5.107 - flow of the root fragmented element. User agents should also apply these 5.108 + <p> User Agents must apply these properties to boxes in the normal flow of 5.109 + the root fragmented element. User agents should also apply these 5.110 properties to floated boxes whose containing block is in the normal flow 5.111 of the root fragmented element. User agents may also apply these 5.112 properties to other boxes. 5.113 5.114 - <h3 id=widows-orphans><span class=secno>3.2. </span> Breaks inside 5.115 - elements: ‘<a href="#orphans"><code 5.116 - class=property>orphans</code></a>’, ‘<a href="#widows"><code 5.117 - class=property>widows</code></a>’</h3> 5.118 + <h3 id=widows-orphans><span class=secno>3.2. </span> Breaks Between Lines: 5.119 + ‘<a href="#orphans"><code class=property>orphans</code></a>’, ‘<a 5.120 + href="#widows"><code class=property>widows</code></a>’</h3> 5.121 5.122 <table class=propdef summary="property definition"> 5.123 <tbody> 5.124 @@ -713,6 +717,48 @@ 5.125 href="#orphans"><code class=property>orphans</code></a>’, the rule 5.126 simply becomes that all lines in the block must be kept together. 5.127 5.128 + <h3 id=page-break><span class=secno>3.3. </span> Page Break Aliases: the 5.129 + ‘<code class=property>page-break-before</code>’, ‘<code 5.130 + class=property>page-break-after</code>’, and ‘<code 5.131 + class=property>page-break-inside</code>’ properties</h3> 5.132 + 5.133 + <p>For compatibility with <a 5.134 + href="http://www.w3.org/TR/CSS21/page.html">CSS Level 2</a>, UAs that 5.135 + conform to <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 5.136 + must alias the ‘<code class=property>page-break-before</code>’, 5.137 + ‘<code class=property>page-break-after</code>’, and ‘<code 5.138 + class=property>page-break-inside</code>’ properties to ‘<a 5.139 + href="#break-before"><code class=property>break-before</code></a>’, 5.140 + ‘<a href="#break-after"><code class=property>break-after</code></a>’, 5.141 + and ‘<a href="#break-inside"><code 5.142 + class=property>break-inside</code></a>’ by treating the ‘<code 5.143 + class=css>page-break-*</code>’ properties as shorthands for the ‘<code 5.144 + class=css>break-*</code>’ properties with the following value mappings: 5.145 + 5.146 + <table class=data> 5.147 + <thead> 5.148 + <tr> 5.149 + <th>Shorthand (‘<code class=css>page-break-*</code>’) Values 5.150 + 5.151 + <th>Longhand (‘<code class=css>break-*</code>’) Values 5.152 + 5.153 + <tbody> 5.154 + <tr> 5.155 + <td>‘<code class=css>auto | left | right</code>’ 5.156 + 5.157 + <td>‘<code class=css>auto | left | right</code>’ 5.158 + 5.159 + <tr> 5.160 + <td>‘<code class=css>avoid</code>’ 5.161 + 5.162 + <td>‘<code class=css>avoid-page</code>’ 5.163 + 5.164 + <tr> 5.165 + <td>‘<code class=css>always</code>’ 5.166 + 5.167 + <td>‘<code class=css>page</code>’ 5.168 + </table> 5.169 + 5.170 <h2 id=breaking-rules><span class=secno>4. </span> Rules for Breaking</h2> 5.171 5.172 <p> A fragmented flow may be broken across fragmentainers at a number of <a 5.173 @@ -799,7 +845,7 @@ 5.174 of fragmentainers they span: 5.175 5.176 <dl> 5.177 - <dt><dfn id=page-break>page break</dfn> 5.178 + <dt><dfn id=page-break0>page break</dfn> 5.179 5.180 <dd> A break between two <a 5.181 href="http://www.w3.org/TR/css3-page/#page-box">page boxes</a>. <a 5.182 @@ -817,7 +863,7 @@ 5.183 <dd> A break between two <a 5.184 href="http://www.w3.org/TR/css3-multicol/#column-box">column boxes</a>. 5.185 Note that if the column boxes are on different pages, then the break is 5.186 - also a <a href="#page-break"><i>page break</i></a>. Similarly, if the 5.187 + also a <a href="#page-break0"><i>page break</i></a>. Similarly, if the 5.188 column boxes are in different regions, then the break is also a <a 5.189 href="#region-break"><i>region break</i></a>. <a href="#CSS3COL" 5.190 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 5.191 @@ -827,7 +873,7 @@ 5.192 <dd> A break between two <a 5.193 href="http://www.w3.org/TR/css3-regions/#regions">regions</a>. Note that 5.194 if the region boxes are on different pages, then the break is also a <a 5.195 - href="#page-break"><i>page break</i></a>. <a href="#CSS3-REGIONS" 5.196 + href="#page-break0"><i>page break</i></a>. <a href="#CSS3-REGIONS" 5.197 rel=biblioentry>[CSS3-REGIONS]<!--{{!CSS3-REGIONS}}--></a> 5.198 </dl> 5.199 5.200 @@ -938,8 +984,8 @@ 5.201 <div class=example id=widows-orphans-example> 5.202 <p> Suppose, for example, that the style sheet contains ‘<code 5.203 class=css>orphans : 4</code>’, ‘<code class=css>widows : 2</code>’, 5.204 - and there are 20 lines (line boxes) available at the bottom of the 5.205 - current page, and the next block in normal flow is considered for 5.206 + and there is space for 20 lines (line boxes) available at the bottom of 5.207 + the current page, and the next block in normal flow is considered for 5.208 placement:</p> 5.209 5.210 <ul> 5.211 @@ -998,7 +1044,7 @@ 5.212 continuing progress from the breakpoint on the previous, but 5.213 recalculating sizes and positions using its own size as if the entire 5.214 element were fragmented across fragmentainers of this size. Progress is 5.215 - measured in percentages (not absolute lengths) of used/available 5.216 + measured in percentages (not absolute lengths) of used/remaining 5.217 fragmentainer extent and in amount of used/remaining content. However, 5.218 when laying out <a href="#monolithic"><i>monolithic</i></a> elements, the 5.219 UA may instead maintain a consistent measure and resolved extent across 5.220 @@ -1041,11 +1087,11 @@ 5.221 <!-- -->Second page in case the 'width' computes to 'length' value 5.222 <!-- --> 5.223 <!-- -->+-----------------+ 5.224 -<!-- --> |#`````````##``````````# 5.225 -<!-- --> |# left ## right # 5.226 -<!-- --> |# float ## float # 5.227 -<!-- --> |# cont. ## cont. # 5.228 -<!-- --> |####################### 5.229 +<!-- -->|#`````````##``````````# 5.230 +<!-- -->|# left ## right # 5.231 +<!-- -->|# float ## float # 5.232 +<!-- -->|# cont. ## cont. # 5.233 +<!-- -->|####################### 5.234 <!-- -->|.................| 5.235 <!-- -->|............... | 5.236 <!-- -->|.................| 5.237 @@ -1164,64 +1210,73 @@ 5.238 5.239 <h3 id=break-margins><span class=secno>5.2. </span> Margins at Breaks</h3> 5.240 5.241 - <p> When an unforced break occurs between block-level boxes, any adjoining 5.242 - margins are set to zero. When a forced break occurs there, any margins 5.243 - before the break are truncated, but margins after the break are preserved. 5.244 - 5.245 + <p> When an unforced break occurs between block-level boxes, any margins 5.246 + adjoining the break are truncated. When a forced break occurs there, 5.247 + adjoining margins before the break are truncated, but margins after the 5.248 + break are preserved. 5.249 5.250 - <h3 id=break-decoration><span class=secno>5.3. </span> Decorating Box 5.251 + <h3 id=break-decoration><span class=secno>5.3. </span> Splitting Boxes at 5.252 Breaks</h3> 5.253 5.254 - <p> When a break splits a box, the ‘<code 5.255 + <p> Where a break splits a box, the ‘<code 5.256 class=property>box-decoration-break</code>’ property controls whether 5.257 - the box's margins, borders, and padding wrap the fragment effect where the 5.258 - split occurs. If they do not (i.e. ‘<code class=css>slice</code>’ is 5.259 - specified), the box's background and side margins, border, and padding 5.260 - extend from the effective break point to the end of the fragmentainer (and 5.261 - across the ensuing blank fragmentainer if one is generated due to ‘<code 5.262 - class=css>left</code>’ or ‘<code class=css>right</code>’ breaking). 5.263 - <span class=issue>Does this use up height?</span> 5.264 + the box's margins, borders, padding, and other decorations wrap the 5.265 + resulting fragments where the split occurs. <a href="#CSS3BG" 5.266 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> 5.267 5.268 - <div class=issue style="counter-increment: none"> 5.269 - <p>For ‘<code class=css>clone</code>’, if the box is tight-wrapping 5.270 - around the content (which, we believe it should), it makes sense not to 5.271 - use up specified height. But there isn't a very strong reason for 5.272 - ‘<code class=css>slice</code>’ to use or not use up specified height. 5.273 - So for consistency, we suggest that neither uses up specified height. 5.274 + <p class=issue> Move ‘<code class=property>box-decoration-break</code>’ 5.275 + definition here? 5.276 5.277 + <p> If the box is inline or is a block-level box with its extent specified 5.278 + as a <var><length></var> or <var><percentage></var>, then the 5.279 + fragmented content box ends at the break point and resumes after the 5.280 + break. Otherwise, the content box extends to fill any <a 5.281 + href="#remaining-fragmentainer-extent"><i>remaining fragmentainer 5.282 + extent</i></a> before the content resumes (leaving room for any 5.283 + margins/borders/padding applied by ‘<code 5.284 + class=css>box-decoration-break: clone</code>’). 5.285 + 5.286 + <p> In all cases, the extra extent contributed by fragmenting the box (i.e. 5.287 + the distance from the break point to the edge of the fragmentainer) does 5.288 + not consume any specified <var><length></var> or 5.289 + <var><percentage></var> extent. <figure> <figcaption> The diagrams 5.290 + below illustrate the differences between fragmented boxes in the first 5.291 + category (gapping across the remaining fragmentainer extent) and those in 5.292 + the second (filling the remaining fragmentainer extent). </figcaption> 5.293 <pre> 5.294 -+-----------------+ 5.295 -| ............... | 5.296 -| .............. | 5.297 -| ............... | 5.298 -| .............. | 5.299 -| ............ | 5.300 -| ############### | 5.301 -| # this box # | 5.302 -| # is # | << box-break: clone 5.303 -| # fragmented # | 5.304 -| ############### | <-+ 5.305 -| | | remaining 5.306 -| | | blank 5.307 -| | | space 5.308 -+-----------------+ <-+ 5.309 + slice clone 5.310 ++-----------------+ +-----------------+ 5.311 +| ............... | | ............... | 5.312 +| .............. | | .............. | 5.313 +| ............... | | ............... | 5.314 +| .............. | | .............. | 5.315 +| ............ | | ............ | 5.316 +| ############### | | ############### | 5.317 +| # this box # | | # this box # | 5.318 +| # is # | | # is # | << fixed-height block 5.319 +| # fragmented # | | # fragmented # | 5.320 +| | | ############### | <-+ 5.321 +| | | | | remaining 5.322 +| | | | | blank 5.323 +| | | | | space 5.324 ++-----------------+ +-----------------+ <-+ 5.325 5.326 -+-----------------+ 5.327 -| ............... | 5.328 -| .............. | 5.329 -| ............... | 5.330 -| .............. | 5.331 -| ............ | 5.332 -| ############### | 5.333 -| # this box # | 5.334 -| # is # | << box-break: slice 5.335 -| # fragmented # | 5.336 -| # # | <-+ 5.337 -| # # | | remaining 5.338 -| # # | | blank 5.339 -| # # | | space 5.340 -+-----------------+ <-+</pre> 5.341 - </div> 5.342 ++-----------------+ +-----------------+ 5.343 +| ............... | | ............... | 5.344 +| .............. | | .............. | 5.345 +| ............... | | ............... | 5.346 +| .............. | | .............. | 5.347 +| ............ | | ............ | 5.348 +| ############### | | ############### | 5.349 +| # this box # | | # this box # | 5.350 +| # is # | | # is # | << auto-height block 5.351 +| # fragmented # | | # fragmented # | 5.352 +| # # | | # # | <-+ 5.353 +| # # | | # # | | remaining 5.354 +| # # | | # # | | blank 5.355 +| # # | | ############### | | space 5.356 ++-----------------+ +-----------------+ <-+</pre> 5.357 + </figure> 5.358 5.359 <h2 id=conformance><span class=secno>6. </span> Conformance</h2> 5.360 5.361 @@ -1393,13 +1448,45 @@ 5.362 <p> The specification will remain Candidate Recommendation for at least six 5.363 months. 5.364 5.365 + <h2 class=no-num id=changes> Changes</h2> 5.366 + 5.367 + <p>The following significant changes were made since the <a 5.368 + href="http://www.w3.org/TR/2012/WD-css3-break-20120228/">28 February 2012 5.369 + Working Draft</a>: 5.370 + 5.371 + <ul> 5.372 + <li>Added ‘<code class=css>recto</code>’ and ‘<code 5.373 + class=css>verso</code>’ values to ‘<a href="#break-before"><code 5.374 + class=property>break-before</code></a>’ and ‘<a 5.375 + href="#break-after"><code class=property>break-after</code></a>’. 5.376 + 5.377 + <li>Better definitions for handling <a 5.378 + href="#monolithic"><i>monolithic</i></a> elements. 5.379 + 5.380 + <li>Improved some terminology and added more terms (<a 5.381 + href="#remaining-fragmentainer-extent"><i>remaining fragmentainer 5.382 + extent</i></a> and <a href="#fragmentation-direction"><i>fragmentation 5.383 + direction</i></a>). 5.384 + 5.385 + <li>Defined handling of <a href="#box-break">backgrounds/borders and 5.386 + specified height</a> when a box is fragmented. 5.387 + 5.388 + <li>Defined <a href="#page-break">aliasing</a> of ‘<code 5.389 + class=css>break-*</code>’ and ‘<code class=css>page-break-*</code>’ 5.390 + properties. 5.391 + 5.392 + <li>Various minor clarifications. 5.393 + </ul> 5.394 + 5.395 <h2 class=no-num id=acknowledgments> Acknowledgments</h2> 5.396 5.397 - <p> The editors would like to extend special thanks to Michael Day, and the 5.398 - former <a href="#CSS3PAGE" 5.399 + <p> The editors would like to thank Michael Day, Alex Mogilevsky, and 5.400 + Florian Rivoal for their contributions to this module. Special thanks go 5.401 + to the former <a href="#CSS3PAGE" 5.402 rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> editors Jim Bigelow 5.403 (HP), Melinda Grant (HP), Håkon Wium Lie (Opera), and Jacob Refstrup (HP) 5.404 - for their contributions to this specification. 5.405 + for their contributions to this specification, which is a successor of 5.406 + their work there. 5.407 5.408 <h2 class=no-num id=references>References</h2> 5.409 5.410 @@ -1431,6 +1518,16 @@ 5.411 </dd> 5.412 <!----> 5.413 5.414 + <dt id=CSS3BG>[CSS3BG] 5.415 + 5.416 + <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 5.417 + href="http://www.w3.org/TR/2012/CR-css3-background-20120417/"><cite>CSS 5.418 + Backgrounds and Borders Module Level 3.</cite></a> 17 April 2012. W3C 5.419 + Candidate Recommendation. (Work in progress.) URL: <a 5.420 + href="http://www.w3.org/TR/2012/CR-css3-background-20120417/">http://www.w3.org/TR/2012/CR-css3-background-20120417/</a> 5.421 + </dd> 5.422 + <!----> 5.423 + 5.424 <dt id=CSS3COL>[CSS3COL] 5.425 5.426 <dd>Håkon Wium Lie. <a 5.427 @@ -1480,16 +1577,6 @@ 5.428 </dd> 5.429 <!----> 5.430 5.431 - <dt id=CSS3BG>[CSS3BG] 5.432 - 5.433 - <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 5.434 - href="http://www.w3.org/TR/2012/CR-css3-background-20120417/"><cite>CSS 5.435 - Backgrounds and Borders Module Level 3.</cite></a> 17 April 2012. W3C 5.436 - Candidate Recommendation. (Work in progress.) URL: <a 5.437 - href="http://www.w3.org/TR/2012/CR-css3-background-20120417/">http://www.w3.org/TR/2012/CR-css3-background-20120417/</a> 5.438 - </dd> 5.439 - <!----> 5.440 - 5.441 <dt id=CSS3COLOR>[CSS3COLOR] 5.442 5.443 <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 5.444 @@ -1518,10 +1605,6 @@ 5.445 <li>authoring tool, <a href="#authoring-tool" 5.446 title="authoring tool"><strong>6.2.</strong></a> 5.447 5.448 - <li>available fragmentainer extent, <a 5.449 - href="#available-fragmentainer-extent" 5.450 - title="available fragmentainer extent"><strong>2.</strong></a> 5.451 - 5.452 <li>avoid break values, <a href="#avoid-break-values" 5.453 title="avoid break values"><strong>3.1.</strong></a> 5.454 5.455 @@ -1577,7 +1660,7 @@ 5.456 5.457 <li>orphans, <a href="#orphans" title=orphans><strong>3.2.</strong></a> 5.458 5.459 - <li>page break, <a href="#page-break" 5.460 + <li>page break, <a href="#page-break0" 5.461 title="page break"><strong>4.2.</strong></a> 5.462 5.463 <li>pagination, <a href="#pagination" 5.464 @@ -1586,6 +1669,10 @@ 5.465 <li>region break, <a href="#region-break" 5.466 title="region break"><strong>4.2.</strong></a> 5.467 5.468 + <li>remaining fragmentainer extent, <a 5.469 + href="#remaining-fragmentainer-extent" 5.470 + title="remaining fragmentainer extent"><strong>2.</strong></a> 5.471 + 5.472 <li>renderer, <a href="#renderer" title=renderer><strong>6.2.</strong></a> 5.473 5.474 5.475 @@ -1662,8 +1749,8 @@ 5.476 5.477 <td>auto 5.478 5.479 - <td>block-level elements, block containers, table row groups, table rows 5.480 - (but see prose) 5.481 + <td>elements that establish formatting contexts, block containers, table 5.482 + row groups, and table rows (but see prose) 5.483 5.484 <td>no 5.485
6.1 --- a/css3-break/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 6.2 +++ b/css3-break/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 6.3 @@ -23,7 +23,7 @@ 6.4 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd> 6.5 6.6 <dt>Previous version:</dt> 6.7 - <dd>None</dd> 6.8 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-break-20120228/">http://www.w3.org/TR/2012/WD-css3-break-20120228/</a></dd> 6.9 6.10 <dt>Editors:</dt> 6.11 <dd class="vcard"><span class="fn">Rossen Atanassov</span>, <span class="org"><a class="fn org url" href="http://www.microsoft.com/">Microsoft Corporation</a></span>, <span class="email">ratan@microsoft.com</span></dd> 6.12 @@ -153,7 +153,7 @@ 6.13 The portion of a box that belongs to exactly one <i>fragmentainer</i>. 6.14 A box in continuous flow always consists of only one fragment. 6.15 A box in a fragmented flow consists of one or more fragments. 6.16 - <dt><dfn>available fragmentainer extent</dfn></dt> 6.17 + <dt><dfn>remaining fragmentainer extent</dfn></dt> 6.18 <dd> 6.19 The remaining extent on the fragmentainer available to a given element, 6.20 i.e. between the end of preceding content on fragmentainer and the 6.21 @@ -268,7 +268,7 @@ 6.22 <td>auto 6.23 <tr> 6.24 <td><em>Applies to:</em> 6.25 - <td>block-level elements, block containers, table row groups, table rows (but see prose) 6.26 + <td>elements that establish formatting contexts, block containers, table row groups, and table rows (but see prose) 6.27 <tr> 6.28 <td><em>Inherited:</em> 6.29 <td>no 6.30 @@ -311,13 +311,13 @@ 6.31 </dd> 6.32 <dt>''recto'' 6.33 <dd> 6.34 - Force one or two page breaks before/after the principle box so that 6.35 + Force one or two page breaks before/after the principal box so that 6.36 the next page is formatted as either a left page or a right page, 6.37 whichever is second (according to the page progression) in a page spread. 6.38 </dd> 6.39 <dt>''verso'' 6.40 <dd> 6.41 - Force one or two page breaks before/after the principle box so that 6.42 + Force one or two page breaks before/after the principal box so that 6.43 the next page is formatted as either a left page or a right page, 6.44 whichever is first (according to the page progression) in a page spread. 6.45 </dd> 6.46 @@ -361,16 +361,14 @@ 6.47 for the exact rules on how these properties affect forced breaks. 6.48 </p> 6.49 <p> 6.50 - User Agents must apply these properties to block-level boxes and to table rows, 6.51 - table row groups, and—in the case of 'break-inside'—block containers 6.52 - in the normal flow of the root fragmented element. User agents should also apply 6.53 - these properties to floated boxes whose containing block is in the normal flow 6.54 - of the root fragmented element. User agents may also apply these properties to 6.55 - other boxes. 6.56 + User Agents must apply these properties to boxes in the normal flow of the root fragmented element. 6.57 + User agents should also apply these properties to floated boxes 6.58 + whose containing block is in the normal flow of the root fragmented element. 6.59 + User agents may also apply these properties to other boxes. 6.60 </p> 6.61 6.62 <h3 id="widows-orphans"> 6.63 -Breaks inside elements: 'orphans', 'widows'</h3> 6.64 +Breaks Between Lines: 'orphans', 'widows'</h3> 6.65 6.66 <table class="propdef" summary="property definition"> 6.67 <tr> 6.68 @@ -461,6 +459,31 @@ 6.69 simply becomes that all lines in the block must be kept together. 6.70 </p> 6.71 6.72 +<h3 id="page-break"> 6.73 +Page Break Aliases: the 'page-break-before', 'page-break-after', and 'page-break-inside' properties</h3> 6.74 + 6.75 + <p>For compatibility with <a href="http://www.w3.org/TR/CSS21/page.html">CSS Level 2</a>, 6.76 + UAs that conform to [[!CSS21]] must alias the 6.77 + 'page-break-before', 'page-break-after', and 'page-break-inside' properties 6.78 + to 'break-before', 'break-after', and 'break-inside' 6.79 + by treating the 'page-break-*' properties as shorthands for the 'break-*' properties 6.80 + with the following value mappings: 6.81 + 6.82 + <table class="data"> 6.83 + <thead> 6.84 + <tr><th>Shorthand ('page-break-*') Values 6.85 + <th>Longhand ('break-*') Values 6.86 + </thead> 6.87 + <tbody> 6.88 + <tr><td>''auto | left | right'' 6.89 + <td>''auto | left | right'' 6.90 + <tr><td>''avoid'' 6.91 + <td>''avoid-page'' 6.92 + <tr><td>''always'' 6.93 + <td>''page'' 6.94 + </tbody> 6.95 + </table> 6.96 + 6.97 <h2 id="breaking-rules"> 6.98 Rules for Breaking</h2> 6.99 6.100 @@ -688,7 +711,7 @@ 6.101 <div class="example" id="widows-orphans-example"> 6.102 <p> 6.103 Suppose, for example, that the style sheet contains ''orphans : 4'', 6.104 - ''widows : 2'', and there are 20 lines (line boxes) available 6.105 + ''widows : 2'', and there is space for 20 lines (line boxes) available 6.106 at the bottom of the current page, and the next block in normal flow 6.107 is considered for placement: 6.108 </p> 6.109 @@ -754,7 +777,7 @@ 6.110 progress from the breakpoint on the previous, but recalculating sizes 6.111 and positions using its own size as if the entire element were fragmented 6.112 across fragmentainers of this size. Progress is measured in percentages 6.113 - (not absolute lengths) of used/available fragmentainer extent and in amount of 6.114 + (not absolute lengths) of used/remaining fragmentainer extent and in amount of 6.115 used/remaining content. 6.116 However, when laying out <i>monolithic</i> elements, 6.117 the UA may instead maintain a consistent measure and resolved extent 6.118 @@ -798,11 +821,11 @@ 6.119 <!-- -->Second page in case the 'width' computes to 'length' value 6.120 <!-- --> 6.121 <!-- -->+-----------------+ 6.122 -<!-- --> |#`````````##``````````# 6.123 -<!-- --> |# left ## right # 6.124 -<!-- --> |# float ## float # 6.125 -<!-- --> |# cont. ## cont. # 6.126 -<!-- --> |####################### 6.127 +<!-- -->|#`````````##``````````# 6.128 +<!-- -->|# left ## right # 6.129 +<!-- -->|# float ## float # 6.130 +<!-- -->|# cont. ## cont. # 6.131 +<!-- -->|####################### 6.132 <!-- -->|.................| 6.133 <!-- -->|............... | 6.134 <!-- -->|.................| 6.135 @@ -924,63 +947,83 @@ 6.136 Margins at Breaks</h3> 6.137 6.138 <p> 6.139 - When an unforced break occurs between block-level boxes, any adjoining 6.140 - margins are set to zero. When a forced break occurs there, any margins 6.141 - before the break are truncated, but margins after the break are preserved. 6.142 + When an unforced break occurs between block-level boxes, 6.143 + any margins adjoining the break are truncated. 6.144 + When a forced break occurs there, adjoining margins before the break are truncated, 6.145 + but margins after the break are preserved. 6.146 </p> 6.147 6.148 <h3 id="break-decoration"> 6.149 -Decorating Box Breaks</h3> 6.150 +Splitting Boxes at Breaks</h3> 6.151 6.152 <p> 6.153 - When a break splits a box, the 'box-decoration-break' property controls 6.154 - whether the box's margins, borders, and padding wrap the fragment effect 6.155 - where the split occurs. If they do not (i.e. ''slice'' is specified), 6.156 - the box's background and side margins, border, and padding extend from 6.157 - the effective break point to the end of the fragmentainer (and across the 6.158 - ensuing blank fragmentainer if one is generated due to ''left'' or ''right'' 6.159 - breaking). <span class="issue">Does this use up height?</span> 6.160 + Where a break splits a box, the 'box-decoration-break' property controls 6.161 + whether the box's margins, borders, padding, and other decorations 6.162 + wrap the resulting fragments where the split occurs. [[!CSS3BG]] 6.163 </p> 6.164 6.165 - <div class=issue style="counter-increment: none"> 6.166 - <p>For ''clone'', if the box is tight-wrapping around the content (which, 6.167 - we believe it should), it makes sense not to use up specified height. 6.168 - But there isn't a very strong reason for ''slice'' to use or not use up 6.169 - specified height. So for consistency, we suggest that neither uses up 6.170 - specified height. 6.171 + <p class="issue"> 6.172 + Move 'box-decoration-break' definition here? 6.173 + </p> 6.174 + 6.175 + <p> 6.176 + If the box is inline or is a block-level box with its extent specified 6.177 + as a <var><length></var> or <var><percentage></var>, 6.178 + then the fragmented content box ends at the break point and resumes after the break. 6.179 + Otherwise, 6.180 + the content box extends to fill any <i>remaining fragmentainer extent</i> 6.181 + before the content resumes 6.182 + (leaving room for any margins/borders/padding applied by ''box-decoration-break: clone''). 6.183 + 6.184 + 6.185 + <p> 6.186 + In all cases, 6.187 + the extra extent contributed by fragmenting the box 6.188 + (i.e. the distance from the break point to the edge of the fragmentainer) 6.189 + does not consume any specified <var><length></var> 6.190 + or <var><percentage></var> extent. 6.191 + 6.192 + 6.193 + <figure> 6.194 + <figcaption> 6.195 + The diagrams below illustrate the differences between fragmented boxes 6.196 + in the first category (gapping across the remaining fragmentainer extent) 6.197 + and those in the second (filling the remaining fragmentainer extent). 6.198 + </figcaption> 6.199 <pre> 6.200 -+-----------------+ 6.201 -| ............... | 6.202 -| .............. | 6.203 -| ............... | 6.204 -| .............. | 6.205 -| ............ | 6.206 -| ############### | 6.207 -| # this box # | 6.208 -| # is # | << box-break: clone 6.209 -| # fragmented # | 6.210 -| ############### | <-+ 6.211 -| | | remaining 6.212 -| | | blank 6.213 -| | | space 6.214 -+-----------------+ <-+ 6.215 + slice clone 6.216 ++-----------------+ +-----------------+ 6.217 +| ............... | | ............... | 6.218 +| .............. | | .............. | 6.219 +| ............... | | ............... | 6.220 +| .............. | | .............. | 6.221 +| ............ | | ............ | 6.222 +| ############### | | ############### | 6.223 +| # this box # | | # this box # | 6.224 +| # is # | | # is # | << fixed-height block 6.225 +| # fragmented # | | # fragmented # | 6.226 +| | | ############### | <-+ 6.227 +| | | | | remaining 6.228 +| | | | | blank 6.229 +| | | | | space 6.230 ++-----------------+ +-----------------+ <-+ 6.231 6.232 -+-----------------+ 6.233 -| ............... | 6.234 -| .............. | 6.235 -| ............... | 6.236 -| .............. | 6.237 -| ............ | 6.238 -| ############### | 6.239 -| # this box # | 6.240 -| # is # | << box-break: slice 6.241 -| # fragmented # | 6.242 -| # # | <-+ 6.243 -| # # | | remaining 6.244 -| # # | | blank 6.245 -| # # | | space 6.246 -+-----------------+ <-+</pre> 6.247 - </div> 6.248 ++-----------------+ +-----------------+ 6.249 +| ............... | | ............... | 6.250 +| .............. | | .............. | 6.251 +| ............... | | ............... | 6.252 +| .............. | | .............. | 6.253 +| ............ | | ............ | 6.254 +| ############### | | ############### | 6.255 +| # this box # | | # this box # | 6.256 +| # is # | | # is # | << auto-height block 6.257 +| # fragmented # | | # fragmented # | 6.258 +| # # | | # # | <-+ 6.259 +| # # | | # # | | remaining 6.260 +| # # | | # # | | blank 6.261 +| # # | | ############### | | space 6.262 ++-----------------+ +-----------------+ <-+</pre> 6.263 + </figure> 6.264 6.265 <h2 id="conformance"> 6.266 Conformance</h2> 6.267 @@ -1144,19 +1187,38 @@ 6.268 The specification will remain Candidate Recommendation for at least six months. 6.269 </p> 6.270 6.271 +<h2 class="no-num" id="changes"> 6.272 +Changes</h2> 6.273 + 6.274 + <p>The following significant changes were made since the 6.275 + <a href="http://www.w3.org/TR/2012/WD-css3-break-20120228/">28 February 2012 Working Draft</a>: 6.276 + 6.277 + <ul> 6.278 + <li>Added ''recto'' and ''verso'' values to 'break-before' and 'break-after'. 6.279 + <li>Better definitions for handling <i>monolithic</i> elements. 6.280 + <li>Improved some terminology and added more terms (<i>remaining fragmentainer extent</i> and <i>fragmentation direction</i>). 6.281 + <li>Defined handling of <a href="#box-break">backgrounds/borders and specified height</a> when a box is fragmented. 6.282 + <li>Defined <a href="#page-break">aliasing</a> of 'break-*' and 'page-break-*' properties. 6.283 + <li>Various minor clarifications. 6.284 + </ul> 6.285 + 6.286 <h2 class="no-num" id="acknowledgments"> 6.287 Acknowledgments</h2> 6.288 6.289 <p> 6.290 - The editors would like to extend special thanks to 6.291 + The editors would like to thank 6.292 Michael Day, 6.293 - and the former [[CSS3PAGE]] editors 6.294 + Alex Mogilevsky, 6.295 + and Florian Rivoal 6.296 + for their contributions to this module. 6.297 + Special thanks go to the former [[CSS3PAGE]] editors 6.298 Jim Bigelow (HP), 6.299 Melinda Grant (HP), 6.300 Håkon Wium Lie (Opera), 6.301 and 6.302 Jacob Refstrup (HP) 6.303 - for their contributions to this specification. 6.304 + for their contributions to this specification, 6.305 + which is a successor of their work there. 6.306 </p> 6.307 <h2 class="no-num" id="references">References</h2> 6.308 <h3 class="no-num" id="normative-references">Normative references</h3>
7.1 --- a/css3-conditional/Overview.html Tue Jul 31 14:04:38 2012 -0700 7.2 +++ b/css3-conditional/Overview.html Wed Aug 08 09:06:37 2012 -0700 7.3 @@ -207,8 +207,8 @@ 7.4 <li><a href="#the-csssupportsrule-interface"><span class=secno>8.2. 7.5 </span> The <code>CSSSupportsRule</code> interface</a> 7.6 7.7 - <li><a href="#supports-property-api"><span class=secno>8.3. 7.8 - </span>supportsProperty() function</a> 7.9 + <li><a href="#window-api"><span class=secno>8.3. </span>supportsCSS() 7.10 + function</a> 7.11 </ul> 7.12 7.13 <li><a href="#conformance"><span class=secno>9. </span>Conformance</a> 7.14 @@ -1058,25 +1058,27 @@ 7.15 <h3 id=the-csssupportsrule-interface><span class=secno>8.2. </span> The 7.16 <code>CSSSupportsRule</code> interface</h3> 7.17 7.18 - <p>The <code>CSSSupportsRule</code> interface represents a ‘<code 7.19 - class=css>@media</code>’ rule. 7.20 + <p class=issue>Should there be an interface containing the methods common 7.21 + to CSSMediaRule, CSSSupportsRule, and CSSDocumentRule, from which they all 7.22 + derive? Should it be called CSSGroupRule? CSSConditionalRule? 7.23 + 7.24 + <p>The <code>CSSSupportsRule</code> interface represents a ‘<a 7.25 + href="#dfn-support"><code class=css>@supports</code></a>’ rule. 7.26 7.27 <pre class=idl>interface CSSSupportsRule : CSSRule { 7.28 - attribute DOMString supportsCondition; 7.29 + attribute DOMString conditionText; 7.30 readonly attribute CSSRuleList cssRules; 7.31 unsigned long insertRule (DOMString rule, unsigned long index); 7.32 void deleteRule (unsigned long index); 7.33 }</pre> 7.34 7.35 <dl class=idl-attributes> 7.36 - <dt><a href="#supportscondition"><code>supportsCondition</code></a> of 7.37 - type <code>DOMString</code>, readonly 7.38 + <dt><code>conditionText</code> of type <code>DOMString</code>, readonly 7.39 7.40 - <dd>The <ocde>supportsCondition attribute, on getting, must return the 7.41 + <dd>The <code>conditionText</code> attribute, on getting, must return the 7.42 result of serializing the associated support condition. 7.43 - <p>On setting the <a 7.44 - href="#supportscondition"><code>supportsCondition</code></a> attribute 7.45 - these steps must be run: 7.46 + <p>On setting the <code>conditionText</code> attribute these steps must 7.47 + be run: 7.48 7.49 <ol> 7.50 <li>Trim the given value of white space. 7.51 @@ -1089,15 +1091,15 @@ 7.52 <li>Otherwise, do nothing. 7.53 </ol> 7.54 7.55 - <p class=issue>This name sucks. Suggestions? 7.56 + <p class=issue>Should this be called <code>conditionText</code> or 7.57 + <code>supportsText</code>?</p> 7.58 7.59 - <dt><code>cssRules</code> of type <code>CSSRuleList</code>, readonly 7.60 + <dt><code>cssRules</code> of type <code>CSSRuleList</code>, readonly 7.61 7.62 - <dd>The <code>cssRules</code> attribute must return a 7.63 - <code>CSSRuleList</code> object for the list of CSS rules specified with 7.64 - the ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ 7.65 - rule. 7.66 - </ocde> 7.67 + <dd>The <code>cssRules</code> attribute must return a 7.68 + <code>CSSRuleList</code> object for the list of CSS rules specified with 7.69 + the ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ 7.70 + rule. 7.71 </dl> 7.72 7.73 <dl class=idl-methods> 7.74 @@ -1117,15 +1119,14 @@ 7.75 7.76 <p class=issue>Define the CSSDocumentRule interface. 7.77 7.78 - <h3 id=supports-property-api><span class=secno>8.3. 7.79 - </span>supportsProperty() function</h3> 7.80 + <h3 id=window-api><span class=secno>8.3. </span>supportsCSS() function</h3> 7.81 7.82 <pre class=idl>partial interface Window { 7.83 - boolean supportsProperty (DOMString property, DOMString value); 7.84 + boolean supportsCSS (DOMString property, DOMString value); 7.85 };</pre> 7.86 7.87 - <p>The <code>supportsProperty</code> function must return <code>true</code> 7.88 - if the implementation <a href="#dfn-support"><i>supports</i></a> the value 7.89 + <p>The <code>supportsCSS</code> function must return <code>true</code> if 7.90 + the implementation <a href="#dfn-support"><i>supports</i></a> the value 7.91 given by <var>value</var> for the property given by <var>property</var>, 7.92 and <code>false</code> otherwise. 7.93
8.1 --- a/css3-conditional/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 8.2 +++ b/css3-conditional/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 8.3 @@ -800,21 +800,25 @@ 8.4 <h3 id="the-csssupportsrule-interface"> 8.5 The <code>CSSSupportsRule</code> interface</h3> 8.6 8.7 -<p>The <code>CSSSupportsRule</code> interface represents a ''@media'' rule.</p> 8.8 +<p class="issue">Should there be an interface containing the methods 8.9 +common to CSSMediaRule, CSSSupportsRule, and CSSDocumentRule, from which 8.10 +they all derive? Should it be called CSSGroupRule? CSSConditionalRule?</p> 8.11 + 8.12 +<p>The <code>CSSSupportsRule</code> interface represents a ''@supports'' rule.</p> 8.13 8.14 <pre class='idl'>interface CSSSupportsRule : CSSRule { 8.15 - attribute DOMString supportsCondition; 8.16 + attribute DOMString conditionText; 8.17 readonly attribute CSSRuleList cssRules; 8.18 unsigned long insertRule (DOMString rule, unsigned long index); 8.19 void deleteRule (unsigned long index); 8.20 }</pre> 8.21 8.22 <dl class='idl-attributes'> 8.23 - <dt><code>supportsCondition</code> of type <code>DOMString</code>, readonly 8.24 - <dd>The <ocde>supportsCondition</code> attribute, on getting, must return 8.25 + <dt><code>conditionText</code> of type <code>DOMString</code>, readonly 8.26 + <dd>The <code>conditionText</code> attribute, on getting, must return 8.27 the result of serializing the associated support condition. 8.28 8.29 - <p>On setting the <code>supportsCondition</code> attribute these steps 8.30 + <p>On setting the <code>conditionText</code> attribute these steps 8.31 must be run: 8.32 8.33 <ol> 8.34 @@ -825,7 +829,8 @@ 8.35 <li>Otherwise, do nothing. 8.36 </ol> 8.37 8.38 - <p class='issue'>This name sucks. Suggestions? 8.39 + <p class="issue">Should this be called <code>conditionText</code> or 8.40 + <code>supportsText</code>?</p> 8.41 8.42 <dt><code>cssRules</code> of type <code>CSSRuleList</code>, readonly 8.43 <dd>The <code>cssRules</code> attribute must return a <code>CSSRuleList</code> 8.44 @@ -846,13 +851,13 @@ 8.45 <p class='issue'>Define the CSSDocumentRule interface. 8.46 8.47 8.48 -<h3 id="supports-property-api">supportsProperty() function</h3> 8.49 +<h3 id="window-api">supportsCSS() function</h3> 8.50 8.51 <pre class='idl'>partial interface Window { 8.52 - boolean supportsProperty (DOMString property, DOMString value); 8.53 + boolean supportsCSS (DOMString property, DOMString value); 8.54 };</pre> 8.55 8.56 -<p>The <code>supportsProperty</code> function must return <code>true</code> 8.57 +<p>The <code>supportsCSS</code> function must return <code>true</code> 8.58 if the implementation <i>supports</i> the value given by <var>value</var> for 8.59 the property given by <var>property</var>, and <code>false</code> otherwise. 8.60
9.1 --- a/css3-exclusions/Exclusions.src.html Tue Jul 31 14:04:38 2012 -0700 9.2 +++ b/css3-exclusions/Exclusions.src.html Wed Aug 08 09:06:37 2012 -0700 9.3 @@ -131,11 +131,12 @@ 9.4 </div> 9.5 <p> 9.6 The area used for excluding inline flow content around an exclusion box. The 9.7 - exclusion area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> 9.8 + <span>exclusion area</span> is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> 9.9 border box</a>. 9.10 This specification's 9.11 - 'shape-outside' property can be used to define arbitrary, non-rectangular exclusion 9.12 - areas. 9.13 + 'shape-outside' property 9.14 + can be used to define arbitrary, 9.15 + non-rectangular <span>exclusion areas</span>. 9.16 </p> 9.17 9.18 <dfn>Float area</dfn> 9.19 @@ -201,14 +202,14 @@ 9.20 9.21 <h2 id="exclusions">Exclusions</h2> 9.22 <p> 9.23 - Exclusion elements define exclusion areas that contribute to their containing block's 9.24 + Exclusion elements define <span>exclusion areas</span> that contribute to their containing block's 9.25 <span>wrapping context</span>. As a consequence, exclusions impact the layout of their 9.26 containing block's descendants. 9.27 <p> 9.28 9.29 <p> 9.30 Elements layout their inline content in their <span>content area</span> and wrap around the 9.31 - areas in their associated <span>wrapping context</span>. If the element is itself an exclusion, it 9.32 + <span>exclusion areas</span> in their associated <span>wrapping context</span>. If the element is itself an exclusion, it 9.33 does not wrap around its own exclusion shape and the impact of other exclusions on other 9.34 exclusions is controlled by the 'z-index' property as explained in the 9.35 <a href="#exclusions-order">exclusions order</a> section. 9.36 @@ -282,12 +283,12 @@ 9.37 </dd> 9.38 <dt><dfn title="'wrap-flow'!!'start'">start</dfn></dt> 9.39 <dd> 9.40 - Inline flow content can flow before the start edge of the exclusion area but 9.41 + Inline flow content can flow before the start edge of the <span>exclusion area</span> but 9.42 must leave the area after the end edge of the exclusion empty. 9.43 </dd> 9.44 <dt><dfn title="'wrap-flow'!!'end'">end</dfn></dt> 9.45 <dd> 9.46 - Inline flow content can flow after the end edge of the exclusion area but 9.47 + Inline flow content can flow after the end edge of the <span>exclusion area</span> but 9.48 must leave the area before the start edge of the exclusion empty. 9.49 </dd> 9.50 <dt><dfn title="'wrap-flow'!!'minimum'">minimum</dfn></dt> 9.51 @@ -319,7 +320,7 @@ 9.52 'maximum' or 'clear' on an element makes that element an <span>exclusion element</a>. 9.53 It's <span>exclusion shape</span> is contributed to its containing block's 9.54 <span>wrapping context</span>, causing the containing block's descendants to wrap around 9.55 - its exclusion area. 9.56 + its <span>exclusion area</span>. 9.57 </p> 9.58 9.59 <p>An <span>exclusion element</span> establishes a 9.60 @@ -356,12 +357,13 @@ 9.61 9.62 <div class="example"> 9.63 <p> 9.64 - The 'wrap-flow' property values applied to an absolutely positioned element. 9.65 + The 'wrap-flow' property values applied to exclusions as grid items. 9.66 </p> 9.67 <code class="html"><pre> 9.68 9.69 <div id="grid"> 9.70 - <div id="exclusion">Donec metus …</div> 9.71 + <div id="top-right" class="exclusion"></div> 9.72 + <div id="bottom-left" class="exclusion"></div> 9.73 <div id="content">Lorem ipsum…</div> 9.74 </div> 9.75 9.76 @@ -370,21 +372,28 @@ 9.77 width: 30em; 9.78 height: 30em; 9.79 display: grid; 9.80 - grid-columns: 50% 25% 25%; 9.81 - grid-rows: 40% 20% 40%; 9.82 + grid-columns: 25% 25% 25% 25%; 9.83 + grid-rows: 25% 25% 25% 25%; 9.84 + 9.85 +#top-right { 9.86 + grid-column: 3; 9.87 + grid-row: 2; 9.88 } 9.89 9.90 -#exclusion { 9.91 - grid-row: 2; 9.92 +#bottom-left { 9.93 grid-column: 2; 9.94 + grid-row: 3; 9.95 +} 9.96 + 9.97 +.exclusion { 9.98 wrap-flow: <see below> 9.99 } 9.100 9.101 #content { 9.102 grid-row: 1; 9.103 - grid-row-span: 3; 9.104 + grid-row-span: 4; 9.105 grid-column: 1; 9.106 - grid-column-span: 3; 9.107 + grid-column-span: 4; 9.108 } 9.109 </style> 9.110 </pre></code> 9.111 @@ -393,31 +402,31 @@ 9.112 blue area is the exclusion box (positioned by the grid).</p> 9.113 <table class="example-table"> 9.114 <tr> 9.115 - <td><code class="html">#exclusion{ wrap-flow: auto; }</code></td> 9.116 - <td><code class="html">#exclusion{ wrap-flow: both; }</code></td> 9.117 + <td><code class="html">.exclusion{ wrap-flow: auto; }</code></td> 9.118 + <td><code class="html">.exclusion{ wrap-flow: both; }</code></td> 9.119 </tr> 9.120 <tr> 9.121 <td><img src="images/exclusion_wrap_side_auto.png" alt="Example rendering for wrap-side: auto" /></td> 9.122 <td><img src="images/exclusion_wrap_side_both.png" alt="Example rendering for wrap-side: both" /></td> 9.123 </tr> 9.124 <tr> 9.125 - <td><code class="html">#exclusion{ wrap-flow: start; }</code></td> 9.126 - <td><code class="html">#exclusion{ wrap-flow: end; }</code></td> 9.127 + <td><code class="html">.exclusion{ wrap-flow: start; }</code></td> 9.128 + <td><code class="html">.exclusion{ wrap-flow: end; }</code></td> 9.129 </tr> 9.130 <tr> 9.131 <td><img src="images/exclusion_wrap_side_left.png" alt="Example rendering for wrap-side: start" /></td> 9.132 <td><img src="images/exclusion_wrap_side_right.png" alt="Example rendering for wrap-side: end" /></td> 9.133 </tr> 9.134 <tr> 9.135 - <td><code class="html">#exclusion{ wrap-flow: minimum; }</code></td> 9.136 - <td><code class="html">#exclusion{ wrap-flow: maximum; }</code></td> 9.137 + <td><code class="html">.exclusion{ wrap-flow: minimum; }</code></td> 9.138 + <td><code class="html">.exclusion{ wrap-flow: maximum; }</code></td> 9.139 </tr> 9.140 <tr> 9.141 <td><img src="images/exclusion_wrap_side_minimum.png" alt="Example rendering for wrap-side: minimum" /></td> 9.142 <td><img src="images/exclusion_wrap_side_maximum.png" alt="Example rendering for wrap-side: maximum" /></td> 9.143 </tr> 9.144 <tr> 9.145 - <td><code class="html">#exclusion{ wrap-flow: clear; }</code></td> 9.146 + <td><code class="html">.exclusion{ wrap-flow: clear; }</code></td> 9.147 <td></td> 9.148 </tr> 9.149 <tr> 9.150 @@ -432,25 +441,35 @@ 9.151 9.152 <h3 id="scope-and-effect-of-exclusions">Scope and effect of exclusions</h3> 9.153 <p> 9.154 - An <span>exclusion</span> affects the inline flow content descended from the exclusion's containing 9.155 - blocks (defined in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details"> 9.156 - CSS 2.1 10.1</a>) and that of all descendant elements of the same containing 9.157 - block. All inline flow content inside the containing block of the exclusions is 9.158 - affected. To stop the effect of exclusions defined outside an element, the 'wrap-through' 9.159 - property can be used (see the <a href="#propagation-of-exclusions">propagation of exclusions</a> 9.160 + An <span>exclusion</span> affects 9.161 + the inline flow content descended 9.162 + from the exclusion's containing block 9.163 + (defined in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details"> 9.164 + CSS 2.1 10.1</a>) 9.165 + and that of all descendant elements 9.166 + of the same containing block. 9.167 + All inline flow content 9.168 + inside the containing block 9.169 + of the exclusions is affected. 9.170 + To stop the effect of exclusions 9.171 + defined outside an element, 9.172 + the 'wrap-through' property can be used 9.173 + (see the <a href="#propagation-of-exclusions">propagation of exclusions</a> 9.174 section below). 9.175 </p> 9.176 9.177 <p> 9.178 - For exclusions with 'position:fixed', the containing block is that of the root 9.179 - element. 9.180 + As a reminder, 9.181 + for exclusions with 'position:fixed', 9.182 + the containing block is that 9.183 + of the root element. 9.184 </p> 9.185 9.186 <h4 id="wrap-margin-property">The 'wrap-margin' property</h4> 9.187 <p> 9.188 The 'wrap-margin' property can be used to offset the inline flow content wrapping 9.189 on the outside of exclusions. Offsets created by the 'wrap-margin' property are 9.190 - offset from the outside of the exclusion. This property takes on positive values 9.191 + offset from the outside of the exclusion on all sides. This property takes on positive values 9.192 only. 9.193 </p> 9.194 <table class="propdef"> 9.195 @@ -488,6 +507,13 @@ 9.196 </tr> 9.197 </table> 9.198 9.199 + <div class="example"> 9.200 + <p>A 'wrap-margin' creating an offset 9.201 + from a circle shape. </p> 9.202 + <img src="images/wrap-margin.png" 9.203 + alt="Example of a wrap-margin offset"/> 9.204 + </div> 9.205 + 9.206 <!-- End secion "wrap-margin property" --> 9.207 9.208 <h4 id="wrap-padding-property">The 'wrap-padding' Property</h4> 9.209 @@ -815,7 +841,7 @@ 9.210 <li><strong>Step 2</strong>: resolve <span>wrapping context</span>s and lay out each containing block in turn: 9.211 <ul> 9.212 <li><strong>Step 2-A</strong>: resolve the position and size of exclusion boxes</li> 9.213 - <li><strong>Step 2-B</strong>: lay out containing block, wrapping around exclusion areas</li> 9.214 + <li><strong>Step 2-B</strong>: lay out containing block, wrapping around <span>exclusion areas</span></li> 9.215 </ul> 9.216 </li> 9.217 </ul> 9.218 @@ -1064,7 +1090,7 @@ 9.219 <h4 id="floats-and-exclusions-similarities">Similarities</h4> 9.220 9.221 <p>There are similarities between floats an exclusions in that inline content wraps around floats 9.222 - and also wraps around exclusion areas. However, there are very significant differences.</p> 9.223 + and also wraps around <span>exclusion areas</span>. However, there are very significant differences.</p> 9.224 9.225 <h4 id="floats-and-exclusions-differences">Differences</h4> 9.226 9.227 @@ -1462,15 +1488,27 @@ 9.228 </div> 9.229 9.230 <div> 9.231 - <p>The above figure shows how 'shape-outside' shapes impact the exclusion areas. 9.232 - The red box represents an element's content box and 'A', 'B', 'C' and 'C' 9.233 - represent exclusions with a complex shape and their 'wrap-flow' property set 9.234 - to 'both', 'start', 'end' and 'clear', respectively.</p> 9.235 + <p>The above figure shows how 9.236 + 'shape-outside' shapes 9.237 + impact the <span>exclusion areas</span>. 9.238 + The red box represents an element's content box 9.239 + and 'A', 'B', 'C' and 'C' represent exclusions 9.240 + with a complex shape 9.241 + and their 'wrap-flow' property 9.242 + set to 'both', 'start', 'end' and 'clear', 9.243 + respectively.</p> 9.244 9.245 - <p>As illustrated in the picture, when an exclusion allows wrapping on all sides, 9.246 - text can flow inside 'holes' in the exclusion (as for exclusion 'A'). Otherwise, 9.247 - the exclusion clears the area on the side(s) defined by 'wrap-flow', as illustrated 9.248 - for 'B', 'C' and 'D' above.</p> 9.249 + <p>As illustrated in the picture, 9.250 + when an exclusion allows wrapping 9.251 + on all sides, 9.252 + text can flow inside 'holes' 9.253 + in the exclusion 9.254 + (as for exclusion 'A'). 9.255 + Otherwise, the exclusion clears 9.256 + the area on the side(s) 9.257 + defined by 'wrap-flow', 9.258 + as illustrated 9.259 + for 'B', 'C' and 'D' above.</p> 9.260 </div> 9.261 <!-- End section "The shape-outside Property" --> 9.262 9.263 @@ -1685,7 +1723,6 @@ 9.264 <!-- End section "Shape Shorthand property --> 9.265 <!-- End section "Declaring Shapes" --> 9.266 9.267 - <p>The shape properties apply to 9.268 <!-- End section "Shapes" --> 9.269 <h2 id="conformance">Conformance</h2> 9.270 <h3 id="conventions">Document Conventions</h3> 9.271 @@ -1847,9 +1884,11 @@ 9.272 Chris Jones, 9.273 Marcus Mielke, 9.274 Alex Mogilevsky, 9.275 + Hans Muller, 9.276 Mihnea Ovidenie, 9.277 Virgil Palanciuc, 9.278 Peter Sorotokin, 9.279 + Bear Travis, 9.280 Eugene Veselov, 9.281 Stephen Zilles 9.282 and the CSS Working Group members. 9.283 @@ -1885,6 +1924,7 @@ 9.284 <h3>Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3> 9.285 <ul> 9.286 <li>Added wrap-flow:minimum</li> 9.287 + <li>Clarified processing model</li> 9.288 </ul> 9.289 9.290 <h3>Since <a href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">December 13th 2011</a></h3>
10.1 --- a/css3-exclusions/Overview.html Tue Jul 31 14:04:38 2012 -0700 10.2 +++ b/css3-exclusions/Overview.html Wed Aug 08 09:06:37 2012 -0700 10.3 @@ -40,14 +40,14 @@ 10.4 10.5 <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1> 10.6 10.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 July 2012</h2> 10.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 August 2012</h2> 10.9 10.10 <dl> 10.11 <dt>This version: 10.12 10.13 <dd><a 10.14 href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd> 10.15 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120727/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120727/</a></dd>--> 10.16 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120806/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120806/</a></dd>--> 10.17 10.18 <dt>Latest version: 10.19 10.20 @@ -393,11 +393,11 @@ 10.21 </div> 10.22 10.23 <p> The area used for excluding inline flow content around an exclusion 10.24 - box. The exclusion area is equivalent to the <a 10.25 - href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> border box</a>. 10.26 - This specification's ‘<a href="#shape-outside"><code 10.27 + box. The <a href="#exclusion-area">exclusion area</a> is equivalent to the 10.28 + <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> border 10.29 + box</a>. This specification's ‘<a href="#shape-outside"><code 10.30 class=property>shape-outside</code></a>’ property can be used to define 10.31 - arbitrary, non-rectangular exclusion areas. 10.32 + arbitrary, non-rectangular <a href="#exclusion-area">exclusion areas</a>. 10.33 10.34 <p><dfn id=float-area>Float area</dfn> 10.35 10.36 @@ -466,20 +466,21 @@ 10.37 10.38 <h2 id=exclusions><span class=secno>3. </span>Exclusions</h2> 10.39 10.40 - <p> Exclusion elements define exclusion areas that contribute to their 10.41 - containing block's <a href="#wrapping-context">wrapping context</a>. As a 10.42 - consequence, exclusions impact the layout of their containing block's 10.43 - descendants. 10.44 + <p> Exclusion elements define <a href="#exclusion-area">exclusion areas</a> 10.45 + that contribute to their containing block's <a 10.46 + href="#wrapping-context">wrapping context</a>. As a consequence, 10.47 + exclusions impact the layout of their containing block's descendants. 10.48 10.49 <p> 10.50 10.51 <p> Elements layout their inline content in their <a 10.52 - href="#content-area">content area</a> and wrap around the areas in their 10.53 - associated <a href="#wrapping-context">wrapping context</a>. If the 10.54 - element is itself an exclusion, it does not wrap around its own exclusion 10.55 - shape and the impact of other exclusions on other exclusions is controlled 10.56 - by the ‘<code class=property>z-index</code>’ property as explained in 10.57 - the <a href="#exclusions-order">exclusions order</a> section. 10.58 + href="#content-area">content area</a> and wrap around the <a 10.59 + href="#exclusion-area">exclusion areas</a> in their associated <a 10.60 + href="#wrapping-context">wrapping context</a>. If the element is itself an 10.61 + exclusion, it does not wrap around its own exclusion shape and the impact 10.62 + of other exclusions on other exclusions is controlled by the ‘<code 10.63 + class=property>z-index</code>’ property as explained in the <a 10.64 + href="#exclusions-order">exclusions order</a> section. 10.65 10.66 <p> The <a href="#shapes">shape properties</a> can be used to change the 10.67 shape of <a href="#exclusion-area">exclusion areas</a>. 10.68 @@ -567,13 +568,15 @@ 10.69 10.70 <dt><dfn id=start title="'wrap-flow'!!'start'">start</dfn> 10.71 10.72 - <dd> Inline flow content can flow before the start edge of the exclusion 10.73 - area but must leave the area after the end edge of the exclusion empty. 10.74 + <dd> Inline flow content can flow before the start edge of the <a 10.75 + href="#exclusion-area">exclusion area</a> but must leave the area after 10.76 + the end edge of the exclusion empty. 10.77 10.78 <dt><dfn id=end title="'wrap-flow'!!'end'">end</dfn> 10.79 10.80 - <dd> Inline flow content can flow after the end edge of the exclusion area 10.81 - but must leave the area before the start edge of the exclusion empty. 10.82 + <dd> Inline flow content can flow after the end edge of the <a 10.83 + href="#exclusion-area">exclusion area</a> but must leave the area before 10.84 + the start edge of the exclusion empty. 10.85 10.86 <dt><dfn id=minimum title="'wrap-flow'!!'minimum'">minimum</dfn> 10.87 10.88 @@ -608,7 +611,7 @@ 10.89 <span>exclusion element. It's <span>exclusion shape</span> is contributed 10.90 to its containing block's <a href="#wrapping-context">wrapping 10.91 context</a>, causing the containing block's descendants to wrap around its 10.92 - exclusion area. </span> 10.93 + <a href="#exclusion-area">exclusion area</a>. </span> 10.94 10.95 <p>An <a href="#exclusion-element">exclusion element</a> establishes a new 10.96 <a href="">block formatting context</a> (see <a href="#CSS21" 10.97 @@ -655,13 +658,14 @@ 10.98 10.99 <div class=example> 10.100 <p> The ‘<a href="#wrap-flow"><code 10.101 - class=property>wrap-flow</code></a>’ property values applied to an 10.102 - absolutely positioned element.</p> 10.103 + class=property>wrap-flow</code></a>’ property values applied to 10.104 + exclusions as grid items.</p> 10.105 <code class=html></code> 10.106 <pre> 10.107 10.108 <div id="grid"> 10.109 - <div id="exclusion">Donec metus …</div> 10.110 + <div id="top-right" class="exclusion"></div> 10.111 + <div id="bottom-left" class="exclusion"></div> 10.112 <div id="content">Lorem ipsum…</div> 10.113 </div> 10.114 10.115 @@ -670,21 +674,28 @@ 10.116 width: 30em; 10.117 height: 30em; 10.118 display: grid; 10.119 - grid-columns: 50% 25% 25%; 10.120 - grid-rows: 40% 20% 40%; 10.121 + grid-columns: 25% 25% 25% 25%; 10.122 + grid-rows: 25% 25% 25% 25%; 10.123 + 10.124 +#top-right { 10.125 + grid-column: 3; 10.126 + grid-row: 2; 10.127 } 10.128 10.129 -#exclusion { 10.130 - grid-row: 2; 10.131 +#bottom-left { 10.132 grid-column: 2; 10.133 + grid-row: 3; 10.134 +} 10.135 + 10.136 +.exclusion { 10.137 wrap-flow: <see below> 10.138 } 10.139 10.140 #content { 10.141 grid-row: 1; 10.142 - grid-row-span: 3; 10.143 + grid-row-span: 4; 10.144 grid-column: 1; 10.145 - grid-column-span: 3; 10.146 + grid-column-span: 4; 10.147 } 10.148 </style> 10.149 </pre> 10.150 @@ -698,9 +709,9 @@ 10.151 <table class=example-table> 10.152 <tbody> 10.153 <tr> 10.154 - <td><code class=html>#exclusion{ wrap-flow: auto; }</code> 10.155 - 10.156 - <td><code class=html>#exclusion{ wrap-flow: both; }</code> 10.157 + <td><code class=html>.exclusion{ wrap-flow: auto; }</code> 10.158 + 10.159 + <td><code class=html>.exclusion{ wrap-flow: both; }</code> 10.160 10.161 <tr> 10.162 <td><img alt="Example rendering for wrap-side: auto" 10.163 @@ -710,9 +721,9 @@ 10.164 src="images/exclusion_wrap_side_both.png"> 10.165 10.166 <tr> 10.167 - <td><code class=html>#exclusion{ wrap-flow: start; }</code> 10.168 - 10.169 - <td><code class=html>#exclusion{ wrap-flow: end; }</code> 10.170 + <td><code class=html>.exclusion{ wrap-flow: start; }</code> 10.171 + 10.172 + <td><code class=html>.exclusion{ wrap-flow: end; }</code> 10.173 10.174 <tr> 10.175 <td><img alt="Example rendering for wrap-side: start" 10.176 @@ -722,9 +733,9 @@ 10.177 src="images/exclusion_wrap_side_right.png"> 10.178 10.179 <tr> 10.180 - <td><code class=html>#exclusion{ wrap-flow: minimum; }</code> 10.181 - 10.182 - <td><code class=html>#exclusion{ wrap-flow: maximum; }</code> 10.183 + <td><code class=html>.exclusion{ wrap-flow: minimum; }</code> 10.184 + 10.185 + <td><code class=html>.exclusion{ wrap-flow: maximum; }</code> 10.186 10.187 <tr> 10.188 <td><img alt="Example rendering for wrap-side: minimum" 10.189 @@ -734,7 +745,7 @@ 10.190 src="images/exclusion_wrap_side_maximum.png"> 10.191 10.192 <tr> 10.193 - <td><code class=html>#exclusion{ wrap-flow: clear; }</code> 10.194 + <td><code class=html>.exclusion{ wrap-flow: clear; }</code> 10.195 10.196 <td> 10.197 10.198 @@ -752,7 +763,7 @@ 10.199 and effect of exclusions</h3> 10.200 10.201 <p> An <span>exclusion</span> affects the inline flow content descended 10.202 - from the exclusion's containing blocks (defined in <a 10.203 + from the exclusion's containing block (defined in <a 10.204 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details"> 10.205 CSS 2.1 10.1</a>) and that of all descendant elements of the same 10.206 containing block. All inline flow content inside the containing block of 10.207 @@ -762,8 +773,9 @@ 10.208 href="#propagation-of-exclusions">propagation of exclusions</a> section 10.209 below). 10.210 10.211 - <p> For exclusions with ‘<code class=css>position:fixed</code>’, the 10.212 - containing block is that of the root element. 10.213 + <p> As a reminder, for exclusions with ‘<code 10.214 + class=css>position:fixed</code>’, the containing block is that of the 10.215 + root element. 10.216 10.217 <h4 id=wrap-margin-property><span class=secno>3.2.1. </span>The ‘<a 10.218 href="#wrap-margin"><code class=property>wrap-margin</code></a>’ 10.219 @@ -774,7 +786,8 @@ 10.220 the inline flow content wrapping on the outside of exclusions. Offsets 10.221 created by the ‘<a href="#wrap-margin"><code 10.222 class=property>wrap-margin</code></a>’ property are offset from the 10.223 - outside of the exclusion. This property takes on positive values only. 10.224 + outside of the exclusion on all sides. This property takes on positive 10.225 + values only. 10.226 10.227 <table class=propdef> 10.228 <tbody> 10.229 @@ -818,6 +831,12 @@ 10.230 10.231 <td>the absolute length 10.232 </table> 10.233 + 10.234 + <div class=example> 10.235 + <p>A ‘<a href="#wrap-margin"><code 10.236 + class=property>wrap-margin</code></a>’ creating an offset from a circle 10.237 + shape.</p> 10.238 + <img alt="Example of a wrap-margin offset" src="images/wrap-margin.png"></div> 10.239 <!-- End secion "wrap-margin property" --> 10.240 10.241 <h4 id=wrap-padding-property><span class=secno>3.2.2. </span>The ‘<a 10.242 @@ -1210,7 +1229,7 @@ 10.243 exclusion boxes 10.244 10.245 <li><strong>Step 2-B</strong>: lay out containing block, wrapping around 10.246 - exclusion areas 10.247 + <a href="#exclusion-area">exclusion areas</a> 10.248 </ul> 10.249 </ul> 10.250 10.251 @@ -1499,8 +1518,9 @@ 10.252 </span>Similarities</h4> 10.253 10.254 <p>There are similarities between floats an exclusions in that inline 10.255 - content wraps around floats and also wraps around exclusion areas. 10.256 - However, there are very significant differences. 10.257 + content wraps around floats and also wraps around <a 10.258 + href="#exclusion-area">exclusion areas</a>. However, there are very 10.259 + significant differences. 10.260 10.261 <h4 id=floats-and-exclusions-differences><span class=secno>3.6.2. 10.262 </span>Differences</h4> 10.263 @@ -1958,15 +1978,16 @@ 10.264 10.265 <div> 10.266 <p>The above figure shows how ‘<a href="#shape-outside"><code 10.267 - class=property>shape-outside</code></a>’ shapes impact the exclusion 10.268 - areas. The red box represents an element's content box and ‘<code 10.269 - class=property>A</code>’, ‘<code class=property>B</code>’, ‘<code 10.270 - class=property>C</code>’ and ‘<code class=property>C</code>’ 10.271 - represent exclusions with a complex shape and their ‘<a 10.272 - href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property 10.273 - set to ‘<code class=property>both</code>’, ‘<code 10.274 - class=property>start</code>’, ‘<code class=property>end</code>’ and 10.275 - ‘<code class=property>clear</code>’, respectively.</p> 10.276 + class=property>shape-outside</code></a>’ shapes impact the <a 10.277 + href="#exclusion-area">exclusion areas</a>. The red box represents an 10.278 + element's content box and ‘<code class=property>A</code>’, ‘<code 10.279 + class=property>B</code>’, ‘<code class=property>C</code>’ and 10.280 + ‘<code class=property>C</code>’ represent exclusions with a complex 10.281 + shape and their ‘<a href="#wrap-flow"><code 10.282 + class=property>wrap-flow</code></a>’ property set to ‘<code 10.283 + class=property>both</code>’, ‘<code class=property>start</code>’, 10.284 + ‘<code class=property>end</code>’ and ‘<code 10.285 + class=property>clear</code>’, respectively.</p> 10.286 10.287 <p>As illustrated in the picture, when an exclusion allows wrapping on all 10.288 sides, text can flow inside ‘<code class=property>holes</code>’ in 10.289 @@ -2235,8 +2256,7 @@ 10.290 --> 10.291 <!-- End section "Shape Shorthand property --> 10.292 <!-- End section "Declaring Shapes" --> 10.293 - 10.294 - <p>The shape properties apply to <!-- End section "Shapes" --> 10.295 + <!-- End section "Shapes" --> 10.296 10.297 <h2 id=conformance><span class=secno>5. </span>Conformance</h2> 10.298 10.299 @@ -2412,9 +2432,9 @@ 10.300 10.301 <p>This specification is made possible by input from Andrei Bucur, 10.302 Alexandru Chiculita, Arron Eicholz, Daniel Glazman, Arno Gourdol, Chris 10.303 - Jones, Marcus Mielke, Alex Mogilevsky, Mihnea Ovidenie, Virgil Palanciuc, 10.304 - Peter Sorotokin, Eugene Veselov, Stephen Zilles and the CSS Working Group 10.305 - members. 10.306 + Jones, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea Ovidenie, 10.307 + Virgil Palanciuc, Peter Sorotokin, Bear Travis, Eugene Veselov, Stephen 10.308 + Zilles and the CSS Working Group members. 10.309 10.310 <h2 class=no-num id=references>References</h2> 10.311 10.312 @@ -2819,6 +2839,8 @@ 10.313 10.314 <ul> 10.315 <li>Added wrap-flow:minimum 10.316 + 10.317 + <li>Clarified processing model 10.318 </ul> 10.319 10.320 <h3 id=since-december-13th-2011><span class=secno>5.8. </span>Since <a
11.1 --- a/css3-exclusions/examples/example-1.html Tue Jul 31 14:04:38 2012 -0700 11.2 +++ b/css3-exclusions/examples/example-1.html Wed Aug 08 09:06:37 2012 -0700 11.3 @@ -25,7 +25,6 @@ 11.4 } 11.5 11.6 .container{ 11.7 - font-size:13px; 11.8 text-align:justify; 11.9 -webkit-hyphens:auto; 11.10 11.11 @@ -34,47 +33,70 @@ 11.12 11.13 width: 30em; 11.14 height: 30em; 11.15 - overflow: visible; 11.16 + overflow: hidden; 11.17 } 11.18 11.19 .container p { 11.20 - font-size: 18px; 11.21 + font-size: 1.2em; 11.22 color: #808080; 11.23 } 11.24 11.25 .exclusion{ 11.26 position:absolute; 11.27 - top: 12em; /* 40% of 30em */ 11.28 - left: 15em; /* 50% of 30em */ 11.29 - height: 6em; /* 20% of 30em */ 11.30 - width: 7.5em; /* 25% of 30 em */ 11.31 background: rgba(70, 164, 233, 0.5); 11.32 /* flow text around this element */ 11.33 - -webkit-wrap-shape-mode: around; 11.34 + --webkit-wrap-shape-mode: around; 11.35 + 11.36 + --webkit-render-wrap-shape: auto; 11.37 } 11.38 11.39 #exclusion1{ 11.40 - margin-left: 0px; 11.41 - margin-top: 0px; 11.42 + top: 7.5em; 11.43 + left: 15em; 11.44 + height: 7.5em; 11.45 + width: 7.5em; 11.46 + } 11.47 + 11.48 + #exclusion2{ 11.49 + top: 15em; 11.50 + left: 7.5em; 11.51 + height: 7.5em; 11.52 + width: 7.5em; 11.53 + } 11.54 + 11.55 + .rect1{ 11.56 + /* regular box */ 11.57 + /* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); */ 11.58 + 11.59 + /* emulate wrap-flow: end */ 11.60 + -webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 7.5em -15em, 7.5em -15em, 0px); 11.61 + 11.62 + /* emulate wrap-flow: start */ 11.63 + --webkit-wrap-shape: polygon(0em, 0px 15em, 0px 15em, 7.5em 0em, 7.5em 0em, 0px); 11.64 + 11.65 + /* emulate wrap-flow: both */ 11.66 + --webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); 11.67 + 11.68 + /* emulate wrap-flow: clear */ 11.69 + --webkit-wrap-shape: polygon(-15em, 0px 15em, 0px 15em, 7.5em -15em, 7.5em -15em, 0px); 11.70 } 11.71 11.72 - .rect{ 11.73 + .rect2{ 11.74 /* regular box */ 11.75 - /* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 6em 0px, 6em 0px, 0px); */ 11.76 + /* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); */ 11.77 11.78 /* emulate wrap-flow: end */ 11.79 - -webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 6em -15em, 6em -15em, 0px); 11.80 + -webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 7.5em -15em, 7.5em -15em, 0px); 11.81 11.82 /* emulate wrap-flow: start */ 11.83 - -webkit-wrap-shape: polygon(0em, 0px 15em, 0px 15em, 6em 0em, 6em 0em, 0px); 11.84 + -webkit-wrap-shape: polygon(0em, 0px 22.5em, 0px 22.5em, 7.5em 0em, 7.5em 0em, 0px); 11.85 11.86 /* emulate wrap-flow: both */ 11.87 - -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 6em 0px, 6em 0px, 0px); 11.88 + --webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); 11.89 11.90 /* emulate wrap-flow: clear */ 11.91 - x-webkit-wrap-shape: polygon(-15em, 0px 15em, 0px 15em, 6em -15em, 6em -15em, 0px); 11.92 + --webkit-wrap-shape: polygon(-7.5em, 0px 22.5em, 0px 22.5em, 7.5em -7.5em, 7.5em -7.5em, 0px); 11.93 } 11.94 - 11.95 #workspace{ 11.96 position:relative; 11.97 width:80%; 11.98 @@ -89,6 +111,7 @@ 11.99 border: 1px solid gray; 11.100 top: 0px; 11.101 opacity: 0.5; 11.102 + width: 7.5em; 11.103 } 11.104 11.105 .row { 11.106 @@ -97,44 +120,47 @@ 11.107 border: 1px solid gray; 11.108 left: 0px; 11.109 opacity: 0.5; 11.110 + height: 7.5em; 11.111 } 11.112 11.113 #col-1 { 11.114 left: 0px; 11.115 - width: 15em; 11.116 } 11.117 11.118 #col-2 { 11.119 - left: 15em; 11.120 - width: 7.5em; 11.121 + left: 7.5em; 11.122 } 11.123 11.124 #col-3 { 11.125 - left: 22.5em; 11.126 - width: 7.5em; 11.127 + left: 15em; 11.128 } 11.129 11.130 + #col-4 { 11.131 + left: 22.5em; 11.132 + } 11.133 11.134 #row-1 { 11.135 top: 0px; 11.136 - height: 12em; 11.137 } 11.138 11.139 #row-2 { 11.140 - top: 12em; 11.141 - height: 6em; 11.142 + top: 7.5em; 11.143 } 11.144 11.145 #row-3 { 11.146 - top: 18em; 11.147 - height: 12em; 11.148 + top: 15em; 11.149 + } 11.150 + 11.151 + #row-4 { 11.152 + top: 22.5em; 11.153 } 11.154 </style> 11.155 </head> 11.156 <body> 11.157 11.158 <div id="workspace"> 11.159 - <div id="exclusion1" class="exclusion rect"></div> 11.160 + <div id="exclusion1" class="exclusion rect1"></div> 11.161 + <div id="exclusion2" class="exclusion rect2"></div> 11.162 <div style="position:absolute;"> 11.163 <div class="container"> 11.164 <p>Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu.</p> 11.165 @@ -142,10 +168,12 @@ 11.166 <div id="col-1" class="col"></div> 11.167 <div id="col-2" class="col"></div> 11.168 <div id="col-3" class="col"></div> 11.169 + <div id="col-4" class="col"></div> 11.170 11.171 <div id="row-1" class="row"></div> 11.172 <div id="row-2" class="row"></div> 11.173 <div id="row-3" class="row"></div> 11.174 + <div id="row-4" class="row"></div> 11.175 11.176 </div> 11.177 </div>
12.1 Binary file css3-exclusions/images/exclusion_wrap_side_auto.png has changed
13.1 Binary file css3-exclusions/images/exclusion_wrap_side_both.png has changed
14.1 Binary file css3-exclusions/images/exclusion_wrap_side_clear.png has changed
15.1 Binary file css3-exclusions/images/exclusion_wrap_side_left.png has changed
16.1 Binary file css3-exclusions/images/exclusion_wrap_side_maximum.png has changed
17.1 Binary file css3-exclusions/images/exclusion_wrap_side_minimum.png has changed
18.1 Binary file css3-exclusions/images/exclusion_wrap_side_right.png has changed
19.1 Binary file css3-exclusions/images/wrap-margin.png has changed
20.1 --- a/css3-flexbox/Overview.html Tue Jul 31 14:04:38 2012 -0700 20.2 +++ b/css3-flexbox/Overview.html Wed Aug 08 09:06:37 2012 -0700 20.3 @@ -206,11 +206,11 @@ 20.4 20.5 <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1> 20.6 20.7 - <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 25 July 2012</h2> 20.8 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 7 August 2012</h2> 20.9 20.10 <dl> 20.11 <dt>This version: 20.12 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120725/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120725/</a>--> 20.13 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120807/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120807/</a>--> 20.14 20.15 20.16 <dd><a 20.17 @@ -382,16 +382,19 @@ 20.18 20.19 <li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a> 20.20 <ul class=toc> 20.21 - <li><a href="#item-margins"><span class=secno>4.1. </span> Flex Item 20.22 + <li><a href="#abspos-items"><span class=secno>4.1. </span> 20.23 + Absolutely-Positioned Flex Items</a> 20.24 + 20.25 + <li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item 20.26 Margins</a> 20.27 20.28 - <li><a href="#painting"><span class=secno>4.2. </span> Flex Item 20.29 + <li><a href="#painting"><span class=secno>4.3. </span> Flex Item 20.30 Painting</a> 20.31 20.32 - <li><a href="#visibility-collapse"><span class=secno>4.3. </span> 20.33 + <li><a href="#visibility-collapse"><span class=secno>4.4. </span> 20.34 Collapsed Items</a> 20.35 20.36 - <li><a href="#min-size-auto"><span class=secno>4.4. </span> Implied 20.37 + <li><a href="#min-size-auto"><span class=secno>4.5. </span> Implied 20.38 Minimum Size of Flex Items</a> 20.39 </ul> 20.40 20.41 @@ -425,8 +428,8 @@ 20.42 <li><a href="#flex-property"><span class=secno>7.1. </span> The ‘<code 20.43 class=property>flex</code>’ Shorthand</a> 20.44 20.45 - <li><a href="#flex-examples"><span class=secno>7.2. </span> Common 20.46 - Values of ‘<code class=property>flex</code>’</a> 20.47 + <li><a href="#flex-common"><span class=secno>7.2. </span> Common Values 20.48 + of ‘<code class=property>flex</code>’</a> 20.49 20.50 <li><a href="#flex-components"><span class=secno>7.3. </span> Components 20.51 of Flexibility</a> 20.52 @@ -616,9 +619,9 @@ 20.53 later in the content to the top, and ‘<a href="#align-self"><code 20.54 class=property>align-self</code></a>’ to center it horizontally. 20.55 20.56 - <li> An ‘<a href="#align-self-auto"><code class=css>auto</code></a>’ 20.57 - margin above the purchase button forces it to the bottom of the entry 20.58 - box, regardless of the height of the description. 20.59 + <li> An <a href="#auto-margins">‘<code class=css>auto</code>’ 20.60 + margin</a> above the purchase button forces it to the bottom of the 20.61 + entry box, regardless of the height of the description. 20.62 </ul> 20.63 20.64 <pre> 20.65 @@ -753,7 +756,8 @@ 20.66 laid out using the flex layout model. 20.67 20.68 <p> Unlike block and inline layout, whose layout calculations are biased to 20.69 - the writing mode directions, flex layout is biased to the <a 20.70 + the <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-box">block 20.71 + and inline flow directions</a>, flex layout is biased to the <a 20.72 href="#flex-flow-property">flex flow</a> directions. To make it easier to 20.73 talk about flex layout, this section defines a set of flex flow–relative 20.74 terms. The ‘<a href="#flex-flow"><code 20.75 @@ -786,14 +790,14 @@ 20.76 20.77 <dt class=size>main size property 20.78 20.79 - <dd> A <a href="#flex-item"><i>flex item</i></a>‘<code class=css>s width 20.80 - or height, whichever is in the <a href="#main-dimension"><i>main 20.81 - dimension</i></a>, is the item</code>’s <dfn id=main-size>main 20.82 - size</dfn>. The <a href="#flex-item"><i>flex item</i></a>‘<code 20.83 - class=css>s <dfn id=main-size-property>main size property</dfn> is either 20.84 - the </code>’width' or ‘<code class=property>height</code>’ 20.85 - property, whichever is in the <a href="#main-dimension"><i>main 20.86 - dimension</i></a>. 20.87 + <dd> A <a href="#flex-item"><i>flex item</i></a>'s width or height, 20.88 + whichever is in the <a href="#main-dimension"><i>main dimension</i></a>, 20.89 + is the item's <dfn id=main-size>main size</dfn>. The <a 20.90 + href="#flex-item"><i>flex item</i></a>'s <dfn 20.91 + id=main-size-property>main size property</dfn> is either the ‘<code 20.92 + class=property>width</code>’ or ‘<code 20.93 + class=property>height</code>’ property, whichever is in the <a 20.94 + href="#main-dimension"><i>main dimension</i></a>. 20.95 </dl> 20.96 20.97 <dl id=cross> 20.98 @@ -826,9 +830,9 @@ 20.99 href="#cross-dimension"><i>cross dimension</i></a>. 20.100 </dl> 20.101 20.102 - <h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the 20.103 - ‘<a href="#flex"><code class=css>flex</code></a>’ and ‘<a 20.104 - href="#display-inline-flex"><code class=css>inline-flex</code></a>’ 20.105 + <h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the <a 20.106 + href="#display-flex">‘<code class=css>flex</code>’</a> and <a 20.107 + href="#display-inline-flex">‘<code class=css>inline-flex</code>’</a> 20.108 ‘<code class=property>display</code>’ values</h2> 20.109 20.110 <table class=propdef> 20.111 @@ -889,13 +893,13 @@ 20.112 ‘<a href="#display-inline-flex"><code 20.113 class=css>inline-flex</code></a>’ and the element is floated or 20.114 absolutely positioned, the computed value of ‘<code 20.115 - class=property>display</code>’ is ‘<a href="#flex"><code 20.116 - class=css>flex</code></a>’. The table in <a 20.117 + class=property>display</code>’ is <a href="#display-flex">‘<code 20.118 + class=css>flex</code>’</a>. The table in <a 20.119 href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 20.120 9.7</a> is thus amended to contain an additional row, with ‘<a 20.121 href="#display-inline-flex"><code class=css>inline-flex</code></a>’ in 20.122 - the "Specified Value" column and ‘<a href="#flex"><code 20.123 - class=css>flex</code></a>’ in the "Computed Value" column. 20.124 + the "Specified Value" column and <a href="#display-flex">‘<code 20.125 + class=css>flex</code>’</a> in the "Computed Value" column. 20.126 20.127 <h2 id=flex-items><span class=secno>4. </span> Flex Items</h2> 20.128 20.129 @@ -911,6 +915,9 @@ 20.130 space</a> is not rendered, as if it were ‘<code 20.131 class=css>display:none</code>’. 20.132 20.133 + <p class=note> Authors reading this spec may want to <a 20.134 + href="#item-margins">skip past these box-generation details</a>. 20.135 + 20.136 <p> A <a href="#flex-item"><i>flex item</i></a> establishes a new 20.137 formatting context for its contents. The type of this formatting context 20.138 is determined by its ‘<code class=property>display</code>’ value, as 20.139 @@ -926,9 +933,6 @@ 20.140 specification that defines a new ‘<code class=property>display</code>’ 20.141 value specific to flex items. 20.142 20.143 - <p class=note> Authors reading this spec may want to <a 20.144 - href="#item-margins">skip past these box-generation details</a>. 20.145 - 20.146 <div class=example> 20.147 <p>Examples of flex items: 20.148 20.149 @@ -975,35 +979,93 @@ 20.150 table</code>’, the table wrapper box becomes the <a 20.151 href="#flex-item"><i>flex item</i></a>, and the ‘<a href="#order"><code 20.152 class=property>order</code></a>’ and ‘<a href="#align-self"><code 20.153 - class=property>align-self</code></a>’ properties apply to it. However, 20.154 - like ‘<code class=property>width</code>’ and ‘<code 20.155 + class=property>align-self</code></a>’ properties apply to it. The 20.156 + contents of any caption boxes contribute to the calculation of the table 20.157 + wrapper box's min-content and max-content sizes. However, like ‘<code 20.158 + class=property>width</code>’ and ‘<code 20.159 class=property>height</code>’, the ‘<a href="#flex"><code 20.160 class=property>flex</code></a>’ longhands apply to the table box as 20.161 - follows: The contents of any caption boxes contribute to the calculation 20.162 - of the table wrapper box's min-content and max-content sizes. However, the 20.163 - <a href="#flex-item"><i>flex item</i></a>‘<code class=css>s final size 20.164 - is calculated by first laying out the captions, and then performing layout 20.165 - as if the distance between the table wrapper box</code>’s edges and the 20.166 - table box's content edges were all part of the table box's border+padding 20.167 - area, and the table box were the <a href="#flex-item"><i>flex 20.168 - item</i></a>. 20.169 - 20.170 - <p id=abspos-items> The <a 20.171 - href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">hypothetical 20.172 - box</a> used to calculate the <i>static position</i> <a href="#CSS21" 20.173 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> of an absolutely-positioned 20.174 - <a href="#flex-item"><i>flex item</i></a> corresponds to that of an 20.175 - anonymous empty flex item whose <i>main-axis</i> position, after <a 20.176 - href="#order-property">reordering</a> coincides with the <a 20.177 - href="#main-start"><i>main-start</i></a> edge of any subsequent real flex 20.178 - item on the flex line, and, being hypothetical, has no effect on flex 20.179 - layout. If there is no subsequent real flex item, the hypothetical box's 20.180 - <i>main-axis</i> position is that of a hypothetical last item on the flex 20.181 - line, after any packing spaces that were introduced around any previous 20.182 - real items due to ‘<code class=css>content-justify: 20.183 - space-around</code>’. 20.184 - 20.185 - <h3 id=item-margins><span class=secno>4.1. </span> Flex Item Margins</h3> 20.186 + follows: the <a href="#flex-item"><i>flex item</i></a>'s final size 20.187 + is calculated by performing layout as if the distance between the table 20.188 + wrapper box's edges and the table box's content edges were all part of the 20.189 + table box's border+padding area, and the table box were the <a 20.190 + href="#flex-item"><i>flex item</i></a>. 20.191 + 20.192 + <h3 id=abspos-items><span class=secno>4.1. </span> Absolutely-Positioned 20.193 + Flex Items</h3> 20.194 + 20.195 + <p> An absolutely-positioned <a href="#flex-item"><i>flex item</i></a> does 20.196 + not participate in flex layout beyond the <a 20.197 + href="#algo-flex-order">reordering step</a>. However, if both ‘<code 20.198 + class=property>left</code>’ and ‘<code class=property>right</code>’ 20.199 + or both ‘<code class=property>top</code>’ and ‘<code 20.200 + class=property>bottom</code>’ are ‘<code class=css>auto</code>’, 20.201 + then the used value of those properties are computed from its <dfn 20.202 + id=flex-item-static-position>static position</dfn>, as follows: 20.203 + 20.204 + <p> If both ‘<code class=property>left</code>’ and ‘<code 20.205 + class=property>right</code>’ are ‘<code class=css>auto</code>’, the 20.206 + <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 20.207 + <a href="#main-start"><i>main-start</i></a> or <a 20.208 + href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 20.209 + horizontal axis) is aligned with the <a 20.210 + href="#flex-item-static-position"><i>static position</i></a>. If both 20.211 + ‘<code class=property>top</code>’ and ‘<code 20.212 + class=property>bottom</code>’ are ‘<code class=css>auto</code>’, the 20.213 + <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 20.214 + <a href="#main-start"><i>main-start</i></a> or <a 20.215 + href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 20.216 + vertical axis) is aligned with the <a 20.217 + href="#flex-item-static-position"><i>static position</i></a>. 20.218 + 20.219 + <p> In the <a href="#main-axis"><i>main axis</i></a>, 20.220 + 20.221 + <ol> 20.222 + <li> If there is a subsequent in-flow <a href="#flex-item"><i>flex 20.223 + item</i></a> on the same <i>flex line</i>, the <a 20.224 + href="#flex-item-static-position"><i>static position</i></a> is the outer 20.225 + <a href="#main-start"><i>main-start</i></a> edge of that <a 20.226 + href="#flex-item"><i>flex item</i></a>. 20.227 + 20.228 + <li> Otherwise, if there is a preceding in-flow <a 20.229 + href="#flex-item"><i>flex item</i></a> on the same <i>flex line</i>, the 20.230 + <a href="#flex-item-static-position"><i>static position</i></a> is the 20.231 + outer <a href="#main-end"><i>main-end</i></a> edge of that <a 20.232 + href="#flex-item"><i>flex item</i></a>. 20.233 + 20.234 + <li> Otherwise, the <a href="#flex-item-static-position"><i>static 20.235 + position</i></a> is determined by the value of ‘<a 20.236 + href="#justify-content"><code 20.237 + class=property>justify-content</code></a>’ on the <a 20.238 + href="#flex-container"><i>flex container</i></a> as if the <a 20.239 + href="#flex-item-static-position"><i>static position</i></a> were 20.240 + represented by a zero-sized flex item. 20.241 + </ol> 20.242 + 20.243 + <p> In the <a href="#cross-axis"><i>cross axis</i></a>, 20.244 + 20.245 + <ol> 20.246 + <li> If there is a preceding in-flow <a href="#flex-item"><i>flex 20.247 + item</i></a>, the <a href="#flex-item-static-position"><i>static 20.248 + position</i></a> is the <a href="#cross-start"><i>cross-start</i></a> 20.249 + edge of the <i>flex-line</i> that item is in. 20.250 + 20.251 + <li> Otherwise, the <a href="#flex-item-static-position"><i>static 20.252 + position</i></a> is the <i>cross-start edge</i> of the first <i>flex 20.253 + line</i>. 20.254 + </ol> 20.255 + 20.256 + <p class=note> The static position is intended to more-or-less match the 20.257 + position of an anonymous 0×0 in-flow <a href="#align-self">‘<code 20.258 + class=css>flex-start</code>’-aligned</a> flex item that participates in 20.259 + flex layout, the primary difference being that any packing spaces due to 20.260 + ‘<code class=css>justify-content: space-around</code>’ or ‘<code 20.261 + class=css>justify-content: space-between</code>’ are suppressed around 20.262 + the hypothetical item: between it and the next item if there is a real 20.263 + item after it, else between it and the previous item (if any) if there 20.264 + isn't. 20.265 + 20.266 + <h3 id=item-margins><span class=secno>4.2. </span> Flex Item Margins</h3> 20.267 20.268 <p> The margins of adjacent <a href="#flex-item"><i>flex items</i></a> do 20.269 not collapse. Auto margins absorb extra space in the corresponding 20.270 @@ -1011,19 +1073,19 @@ 20.271 apart; see <a href="#auto-margins">Aligning with ‘<code 20.272 class=css>auto</code>’ margins</a>. 20.273 20.274 - <h3 id=painting><span class=secno>4.2. </span> Flex Item Painting</h3> 20.275 + <h3 id=painting><span class=secno>4.3. </span> Flex Item Painting</h3> 20.276 20.277 <p> <a href="#flex-item"><i>Flex items</i></a> paint exactly the same as 20.278 - block-level elements in the normal flow, except that ‘<code 20.279 - class=property>z-index</code>’ values other than ‘<a 20.280 - href="#align-self-auto"><code class=css>auto</code></a>’ create a 20.281 - stacking context even if ‘<code class=property>position</code>’ is 20.282 - ‘<code class=css>static</code>’. 20.283 + block-level elements in the normal flow, except that <a 20.284 + href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">‘<code 20.285 + class=property>z-index</code>’</a> values other than ‘<code 20.286 + class=css>auto</code>’ create a stacking context even if ‘<code 20.287 + class=property>position</code>’ is ‘<code class=css>static</code>’. 20.288 20.289 <p class=note> Note: Descendants that are positioned outside a flex item 20.290 still participate in any stacking context established by the flex item. 20.291 20.292 - <h3 id=visibility-collapse><span class=secno>4.3. </span> Collapsed Items</h3> 20.293 + <h3 id=visibility-collapse><span class=secno>4.4. </span> Collapsed Items</h3> 20.294 20.295 <p> Specifying ‘<code class=css>visibility:collapse</code>’ on a flex 20.296 item causes it to become a <dfn id=collapsed-flex-item 20.297 @@ -1156,7 +1218,7 @@ 20.298 class=css>visibility: collapse</code>’ is still recommended for dynamic 20.299 cases.) 20.300 20.301 - <h3 id=min-size-auto><span class=secno>4.4. </span> Implied Minimum Size of 20.302 + <h3 id=min-size-auto><span class=secno>4.5. </span> Implied Minimum Size of 20.303 Flex Items</h3> 20.304 20.305 <p> To provide a more reasonable default minimum size for flex items, this 20.306 @@ -1194,7 +1256,8 @@ 20.307 <dt><dfn id=min-auto title="min-width/height:auto">auto</dfn> 20.308 20.309 <dd> When used as the value of a flex item's min main size property, this 20.310 - keyword indicates a minimum main size of the min-content size. 20.311 + keyword indicates a minimum of the min-content size, to help ensure that 20.312 + the item is large enough to fit its contents. 20.313 <p class=note> It is intended that this will compute to the ‘<code 20.314 class=css>min-content</code>’ keyword when the specification defining 20.315 it (<a 20.316 @@ -1221,7 +1284,8 @@ 20.317 amounts of content, the layout engine must traverse all of this content 20.318 before finding its minimum size, whereas if the author sets an explicit 20.319 minimum, this is not necessary. (For items with small amounts of content, 20.320 - however, this traversal is trivial and therefore not a problem.) 20.321 + however, this traversal is trivial and therefore not a performance 20.322 + concern.) 20.323 </div> 20.324 20.325 <h2 id=ordering-and-orientation><span class=secno>5. </span> Ordering and 20.326 @@ -1326,11 +1390,10 @@ 20.327 of the current <i>writing mode</i>. The <a 20.328 href="#main-start"><i>main-start</i></a> and <a 20.329 href="#main-end"><i>main-end</i></a> directions are equivalent to the <a 20.330 - href="http://www.w3.org/TR/css3-writing-modes/#before">before</a>/<a 20.331 - href="http://www.w3.org/TR/css3-writing-modes/#head">head</a> and <a 20.332 - href="http://www.w3.org/TR/css3-writing-modes/#after">after</a>/<a 20.333 - href="http://www.w3.org/TR/css3-writing-modes/#foot">foot</a> directions, 20.334 - respectively, of the current <i>writing mode</i>. 20.335 + href="http://www.w3.org/TR/css3-writing-modes/#before">before</a>/head 20.336 + and <a 20.337 + href="http://www.w3.org/TR/css3-writing-modes/#after">after</a>/foot 20.338 + directions, respectively, of the current <i>writing mode</i>. 20.339 20.340 <dt><dfn id=flex-flow-column-reverse>‘<code 20.341 class=css>column-reverse</code>’</dfn> 20.342 @@ -1719,10 +1782,10 @@ 20.343 #main > aside { width: 200px; order: 3; }</pre> 20.344 20.345 <p> As an added bonus, the columns will all be <a 20.346 - href="#align-items-stretch">equal-height</a> by default, and the main 20.347 - content will be as wide as necessary to fill the screen. Additionally, 20.348 - this can then be combined with media queries to switch to an all-vertical 20.349 - layout on narrow screens: 20.350 + href="#align-stretch">equal-height</a> by default, and the main content 20.351 + will be as wide as necessary to fill the screen. Additionally, this can 20.352 + then be combined with media queries to switch to an all-vertical layout 20.353 + on narrow screens: 20.354 20.355 <pre> 20.356 @media all and (max-width: 600px) { 20.357 @@ -1911,40 +1974,89 @@ 20.358 not a <a href="#flex-item"><i>flex item</i></a>, ‘<a href="#flex"><code 20.359 class=property>flex</code></a>’ has no effect. 20.360 20.361 - <p> The <var><'flex-basis'></var> component sets the <dfn 20.362 - id=flex-basis>flex basis</dfn>, which is the initial <a 20.363 - href="#main-size"><i>main size</i></a> of the <a href="#flex-item"><i>flex 20.364 - item</i></a>, before free space is distributed according to the flex 20.365 - ratios. If omitted, the <a href="#flex-basis"><i>flex basis</i></a> 20.366 - defaults to ‘<code class=css>0%</code>’. <span class=note>Note that 20.367 - this is different from the initial value of ‘<a 20.368 - href="#flex-basis0"><code class=property>flex-basis</code></a>’, which 20.369 - is ‘<a href="#align-self-auto"><code 20.370 - class=css>auto</code></a>’.</span> Zero values for the 20.371 - <var><'flex-basis'></var> component must be specified with a 20.372 - unit. Unitless zero will either be interpreted as one of the flex ratios, 20.373 - or will make the declaration invalid. 20.374 - 20.375 - <p> The <var><'flex-grow'></var> and 20.376 - <var><'flex-shrink'></var> components set the <dfn 20.377 - id=flex-grow-ratio>flex grow ratio</dfn> and <dfn 20.378 - id=flex-shrink-ratio>flex shrink ratio</dfn>, which determine how much the 20.379 - <a href="#flex-item"><i>flex item</i></a> will grow or shrink relative to 20.380 - the rest of the <a href="#flex-item"><i>flex items</i></a> in the flex 20.381 - container when free space is distributed. When omitted, they are set to 20.382 - ‘<code class=css>1</code>’. <span class=note>Note that this is 20.383 - different from the initial value of ‘<a href="#flex-grow"><code 20.384 - class=property>flex-grow</code></a>’, which is ‘<code 20.385 - class=css>0</code>’.</span> 20.386 - 20.387 - <p> The keyword ‘<code class=property>none</code>’ computes to ‘<code 20.388 - class=css>0 0 auto</code>’. <figure> <img height=240 20.389 - src="images/rel-vs-abs-flex.svg" width=504> <figcaption> A diagram showing 20.390 - the difference between "absolute" flex (starting from a basis of zero) and 20.391 - "relative" flex (starting from a basis of the item's content size). 20.392 - </figcaption> </figure> 20.393 - 20.394 - <h3 id=flex-examples><span class=secno>7.2. </span> Common Values of ‘<a 20.395 + <dl> 20.396 + <dt><var><‘<a href="#flex-grow"><code 20.397 + class=property>flex-grow</code></a>’></var> 20.398 + 20.399 + <dd> 20.400 + <p> This <var><number></var> component sets ‘<a 20.401 + href="#flex-grow"><code class=property>flex-grow</code></a>’ <a 20.402 + href="#flex-components">longhand</a> and specifies the <dfn 20.403 + id=flex-grow-ratio>flex grow ratio</dfn>, which determines how much the 20.404 + <a href="#flex-item"><i>flex item</i></a> will grow relative to the rest 20.405 + of the <a href="#flex-item"><i>flex items</i></a> in the flex container 20.406 + when positive free space is distributed. When omitted, it is set to 20.407 + ‘<code class=css>1</code>’. 20.408 + 20.409 + <dt><var><‘<a href="#flex-shrink"><code 20.410 + class=property>flex-shrink</code></a>’></var> 20.411 + 20.412 + <dd> 20.413 + <p> This <var><number></var> component sets ‘<a 20.414 + href="#flex-shrink"><code class=property>flex-shrink</code></a>’ <a 20.415 + href="#flex-components">longhand</a> and specifies the <dfn 20.416 + id=flex-shrink-ratio>flex shrink ratio</dfn>, which determines how much 20.417 + the <a href="#flex-item"><i>flex item</i></a> will shrink relative to 20.418 + the rest of the <a href="#flex-item"><i>flex items</i></a> in the flex 20.419 + container when negative free space is distributed. When omitted, it is 20.420 + set to ‘<code class=css>1</code>’. 20.421 + 20.422 + <dt><var><‘<a href="#flex-basis-propdef"><code 20.423 + class=property>flex-basis</code></a>’></var> 20.424 + 20.425 + <dd> 20.426 + <p> This component, which takes the same values as the ‘<code 20.427 + class=property>width</code>’ property, sets the ‘<a 20.428 + href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’ 20.429 + <a href="#flex-components">longhand</a> and specifies the <dfn 20.430 + id=flex-basis>flex basis</dfn>: the initial <a href="#main-size"><i>main 20.431 + size</i></a> of the <a href="#flex-item"><i>flex item</i></a>, before 20.432 + free space is distributed according to the flex ratios. When omitted 20.433 + from the ‘<a href="#flex"><code class=property>flex</code></a>’ 20.434 + shorthand, its specified value is the length zero. 20.435 + 20.436 + <p class=note> If not omitted, a zero 20.437 + <var><'flex-basis'></var> component must be either 20.438 + specified with a unit or preceded by both flex ratios. Otherwise it will 20.439 + either be interpreted as one of the flex ratios, or will make the 20.440 + declaration invalid. 20.441 + 20.442 + <p> If the specified ‘<a href="#flex-basis-propdef"><code 20.443 + class=property>flex-basis</code></a>’ is <a 20.444 + href="#flex-basis-auto">‘<code class=css>auto</code>’</a>, the used 20.445 + <a href="#flex-basis"><i>flex basis</i></a> is the value of the 20.446 + element's <a href="#main-size-property"><i>main size property</i></a>. 20.447 + (This can itself be the keyword ‘<code class=css>auto</code>’, which 20.448 + sizes the element based on its contents.) <figure> <img height=240 20.449 + src="images/rel-vs-abs-flex.svg" width=504> <figcaption> A diagram 20.450 + showing the difference between "absolute" flex (starting from a basis of 20.451 + zero) and "relative" flex (starting from a basis of the item's content 20.452 + size). The three items have flex ratios of ‘<code 20.453 + class=css>1</code>’, ‘<code class=css>1</code>’, and ‘<code 20.454 + class=css>2</code>’, respectively. </figcaption> </figure> 20.455 + 20.456 + <dt><dfn id=flex-none>‘<code class=css>none</code>’</dfn> 20.457 + 20.458 + <dd> 20.459 + <p>The keyword ‘<a href="#flex-none"><code 20.460 + class=property>none</code></a>’ computes to ‘<code class=css>0 0 20.461 + auto</code>’. 20.462 + </dl> 20.463 + 20.464 + <p> The initial values of the ‘<a href="#flex"><code 20.465 + class=property>flex</code></a>’ components are equivalent to <a 20.466 + href="#flex-initial">‘<code class=css>flex: 0 1 auto</code>’</a>. 20.467 + 20.468 + <p class=note> Note that the initial values of ‘<a 20.469 + href="#flex-grow"><code class=property>flex-grow</code></a>’ and ‘<a 20.470 + href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’ 20.471 + are different from their defaults when omitted in the ‘<a 20.472 + href="#flex"><code class=property>flex</code></a>’ shorthand. This so 20.473 + that the ‘<a href="#flex"><code class=property>flex</code></a>’ 20.474 + shorthand can better accommodate the most <a href="#flex-common">common 20.475 + cases</a>. 20.476 + 20.477 + <h3 id=flex-common><span class=secno>7.2. </span> Common Values of ‘<a 20.478 href="#flex"><code class=property>flex</code></a>’</h3> 20.479 20.480 <p><em>This section is informative.</em> 20.481 @@ -1953,50 +2065,48 @@ 20.482 href="#flex"><code class=property>flex</code></a>’ values: 20.483 20.484 <dl> 20.485 + <dt id=flex-initial>‘<code class=css>flex: 0 auto</code>’ 20.486 + 20.487 <dt>‘<code class=css>flex: initial</code>’ 20.488 20.489 - <dd> Equivalent to ‘<code class=css>flex: 0 1 auto</code>’. The value 20.490 - sets the size of the item according to the ‘<code 20.491 + <dd> Equivalent to ‘<code class=css>flex: 0 1 auto</code>’. (This is 20.492 + the initial value.) Sizes the item based on the ‘<code 20.493 class=property>width</code>’/‘<code class=property>height</code>’ 20.494 - properties and makes the flex item inflexible when there is positive free 20.495 - space, but allows it to shrink to its <a 20.496 - href="#min-size-auto">minimum</a> when there is insufficient space. (If 20.497 - the ‘<code class=property>width</code>’/‘<code 20.498 - class=property>height</code>’ used as the <a href="#flex-basis"><i>flex 20.499 - basis</i></a> computes to ‘<a href="#align-self-auto"><code 20.500 - class=css>auto</code></a>’, this will size the flex item based on its 20.501 - contents.) The alignment properties or ‘<a 20.502 - href="#align-self-auto"><code class=css>auto</code></a>’ margins may be 20.503 - used to align flex items within the flex container. 20.504 + properties. (If the item's <a href="#main-size-property"><i>main size 20.505 + property</i></a> computes to ‘<code class=css>auto</code>’, this will 20.506 + size the flex item based on its contents.) Makes the flex item inflexible 20.507 + when there is positive free space, but allows it to shrink to its <a 20.508 + href="#min-size-auto">minimum</a> when there is insufficient space. The 20.509 + <a href="#alignment">alignment abilities</a> or <a 20.510 + href="#auto-margins">‘<code class=css>auto</code>’ margins</a> can be 20.511 + used to align flex items along the <a href="#main-axis"><i>main 20.512 + axis</i></a>. 20.513 20.514 <dt>‘<code class=css>flex: auto</code>’ 20.515 20.516 - <dd> Equivalent to ‘<code class=css>flex: 1 1 auto</code>’. This value 20.517 - makes the flex item flexible, and sets the <a href="#flex-basis"><i>flex 20.518 - basis</i></a> according to the ‘<code 20.519 + <dd> Equivalent to ‘<code class=css>flex: 1 1 auto</code>’. Sizes the 20.520 + item based on the ‘<code class=property>width</code>’/‘<code 20.521 + class=property>height</code>’ properties, but makes them fully 20.522 + flexible, so that they absorb any free space along the <a 20.523 + href="#main-axis"><i>main axis</i></a>. If all items are either ‘<code 20.524 + class=css>flex: auto</code>’, ‘<code class=css>flex: 20.525 + initial</code>’, or ‘<code class=css>flex: none</code>’, any 20.526 + positive free space after the items have been sized will be distributed 20.527 + evenly to the items with ‘<code class=css>flex: auto</code>’. 20.528 + 20.529 + <dt>‘<code class=css>flex: none</code>’ 20.530 + 20.531 + <dd> Equivalent to ‘<code class=css>flex: 0 0 auto</code>’. This value 20.532 + sizes the item according to the ‘<code 20.533 class=property>width</code>’/‘<code class=property>height</code>’ 20.534 - properties. If all items are either ‘<code class=css>flex: 20.535 - auto</code>’ or ‘<code class=css>flex: none</code>’, any free space 20.536 - after the items have been sized will be distributed evenly to the items 20.537 - with ‘<code class=css>flex: auto</code>’. 20.538 - 20.539 - <dt>‘<code class=css>flex: none</code>’ 20.540 - 20.541 - <dd> Equivalent to ‘<code class=css>flex: 0 0 auto</code>’. This value 20.542 - makes the flex item inflexible, and sets the size of the item according 20.543 - to the ‘<code class=property>width</code>’/‘<code 20.544 - class=property>height</code>’ properties. To size things normally but 20.545 - still use the <a href="#alignment">alignment abilities</a> of flex 20.546 - layout, set all the flex items to ‘<code class=css>flex: none</code>’ 20.547 - and then use ‘<a href="#align-self-auto"><code 20.548 - class=css>auto</code></a>’ margins or the alignment properties. This is 20.549 - similar to ‘<code class=css>initial</code>’, except that flex items 20.550 - are not allowed to shrink, even in overflow situations. 20.551 + properties, but makes the flex item fully inflexible. This is similar to 20.552 + <a href="#flex-initial">‘<code class=css>initial</code>’</a>, except 20.553 + that flex items are not allowed to shrink, even in overflow situations. 20.554 20.555 <dt>‘<code class=css>flex: <positive-number></code>’ 20.556 20.557 <dd> Equivalent to ‘<code class=css>flex: <positive-number> 1 20.558 - 0%</code>’. This value makes the flex item flexible, and sets the <a 20.559 + 0px</code>’. Makes the flex item flexible and sets the <a 20.560 href="#flex-basis"><i>flex basis</i></a> to zero, resulting in an item 20.561 that receives the specified proportion of the free space in the flex 20.562 container. If all items in the flex container use this pattern, their 20.563 @@ -2006,18 +2116,20 @@ 20.564 <p> By default, flex items won't shrink below their minimum content size 20.565 (the length of the longest word or fixed-size element). To change this, 20.566 set the ‘<code class=property>min-width</code>’ or ‘<code 20.567 - class=property>min-height</code>’ property. 20.568 + class=property>min-height</code>’ property. (See <a 20.569 + href="#min-size-auto">Implied Minimum Size of Flex Items</a>.) 20.570 20.571 <h3 id=flex-components><span class=secno>7.3. </span> Components of 20.572 Flexibility</h3> 20.573 20.574 - <p> Individual components of flexibility can be controlled by separate 20.575 - properties. 20.576 + <p> Individual components of flexibility can be controlled by independent 20.577 + longhand properties. 20.578 20.579 <p class=note> Authors are encouraged to control flexibility using the 20.580 ‘<a href="#flex"><code class=property>flex</code></a>’ shorthand 20.581 rather than with component properties, as the shorthand correctly resets 20.582 - any unspecified components to accommodate common uses. 20.583 + any unspecified components to accommodate <a href="#flex-common">common 20.584 + uses</a>. 20.585 20.586 <h4 id=flex-grow-property><span class=secno>7.3.1. </span> The ‘<a 20.587 href="#flex-grow"><code class=property>flex-grow</code></a>’ property</h4> 20.588 @@ -2135,14 +2247,15 @@ 20.589 are invalid. 20.590 20.591 <h4 id=flex-basis-property><span class=secno>7.3.3. </span> The ‘<a 20.592 - href="#flex-basis0"><code class=property>flex-basis</code></a>’ property</h4> 20.593 + href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’ 20.594 + property</h4> 20.595 20.596 <table class=propdef> 20.597 <tbody> 20.598 <tr> 20.599 <th>Name: 20.600 20.601 - <td><dfn id=flex-basis0>flex-basis</dfn> 20.602 + <td><dfn id=flex-basis-propdef>flex-basis</dfn> 20.603 20.604 <tr> 20.605 <th><a href="#values">Value</a>: 20.606 @@ -2193,31 +2306,23 @@ 20.607 grammar</abbr> 20.608 </table> 20.609 20.610 - <p> The ‘<a href="#flex-basis0"><code 20.611 + <p> The ‘<a href="#flex-basis-propdef"><code 20.612 class=property>flex-basis</code></a>’ property sets the <a 20.613 href="#flex-basis"><i>flex basis</i></a>. Negative lengths are invalid. 20.614 20.615 - <p> If the computed value is ‘<a href="#align-self-auto"><code 20.616 - class=css>auto</code></a>’ on a <a href="#flex-item"><i>flex 20.617 - item</i></a>, the used value of ‘<a href="#flex-basis0"><code 20.618 - class=property>flex-basis</code></a>’ is the used value of the element's 20.619 - <a href="#main-size-property"><i>main size property</i></a>. Otherwise, 20.620 - the used value of ‘<a href="#flex-basis0"><code 20.621 - class=property>flex-basis</code></a>’ is resolved the same way as the <a 20.622 - href="#main-size-property"><i>main size property</i></a>. 20.623 - 20.624 - <p> As with ‘<code class=property>width</code>’, percentage values of 20.625 - ‘<a href="#flex-basis0"><code class=property>flex-basis</code></a>’ 20.626 - are resolved against the flex item's containing block, i.e. its flex 20.627 - container. And <a 20.628 - href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">as with 20.629 - ‘<code class=property>width</code>’</a> in <a href="#CSS21" 20.630 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, if that containing block's 20.631 - size is indefinite, the result is undefined. 20.632 - 20.633 - <p> Like the ‘<code class=property>width</code>’ and ‘<code 20.634 - class=property>height</code>’ properties, ‘<a 20.635 - href="#flex-basis0"><code class=property>flex-basis</code></a>’ 20.636 + <p> Except for <dfn id=flex-basis-auto title="flex-basis: auto">‘<code 20.637 + class=css>auto</code>’</dfn>, which retrieves the value of the <a 20.638 + href="#main-size-property"><i>main size property</i></a>, ‘<a 20.639 + href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’ 20.640 + is resolved the same way as <a 20.641 + href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">‘<code 20.642 + class=property>width</code>’</a> in horizontal writing modes <a 20.643 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>: percentage 20.644 + values of ‘<a href="#flex-basis-propdef"><code 20.645 + class=property>flex-basis</code></a>’ are resolved against the flex 20.646 + item's containing block, i.e. its flex container, and if that containing 20.647 + block's size is indefinite, the result is undefined. Similarly, ‘<a 20.648 + href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’ 20.649 determines the size of the content box, unless otherwise specified such as 20.650 by ‘<code class=property>box-sizing</code>’ <a href="#CSS3UI" 20.651 rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a>. 20.652 @@ -2245,16 +2350,15 @@ 20.653 Box Alignment is finished and defines their effect for other layout modes. 20.654 20.655 20.656 - <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<a 20.657 - href="#align-self-auto"><code class=css>auto</code></a>’ margins</h3> 20.658 + <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<code 20.659 + class=css>auto</code>’ margins</h3> 20.660 20.661 <p> <em>This section is non-normative. The normative definition of how 20.662 margins affect flex items is in the <a href="#layout-algorithm">Flex 20.663 Layout Algorithm</a> section.</em> 20.664 20.665 - <p> Margins on flex items that are ‘<a href="#align-self-auto"><code 20.666 - class=css>auto</code></a>’ have an effect very similar to auto margins 20.667 - in normal flow: 20.668 + <p> Auto margins on flex items have an effect very similar to auto margins 20.669 + in block flow: 20.670 20.671 <ul> 20.672 <li> During calculations of flex bases and flexible lengths, auto margins 20.673 @@ -2273,12 +2377,11 @@ 20.674 margins will have stolen all the free space left over after flexing. 20.675 20.676 <div class=example> 20.677 - <p> One use of ‘<a href="#align-self-auto"><code 20.678 - class=css>auto</code></a>’ margins in the main axis is to separate flex 20.679 - items into distinct "groups". The following example shows how to use this 20.680 - to reproduce a common UI pattern - a single bar of actions with some 20.681 - aligned on the left and others aligned on the right. <figure> 20.682 - <figcaption> Sample rendering of the code below. </figcaption> 20.683 + <p> One use of ‘<code class=css>auto</code>’ margins in the main axis 20.684 + is to separate flex items into distinct "groups". The following example 20.685 + shows how to use this to reproduce a common UI pattern - a single bar of 20.686 + actions with some aligned on the left and others aligned on the right. 20.687 + <figure> <figcaption> Sample rendering of the code below. </figcaption> 20.688 <ul id=auto-bar> 20.689 <li><a href="#">About</a> 20.690 20.691 @@ -2311,8 +2414,8 @@ 20.692 20.693 <div class=example> 20.694 <p> The figure below illustrates the difference in cross-axis alignment in 20.695 - overflow situations between using ‘<a href="#align-self-auto"><code 20.696 - class=css>auto</code></a>’ margins and using the <a 20.697 + overflow situations between using <a href="#auto-margins">‘<code 20.698 + class=css>auto</code>’ margins</a> and using the <a 20.699 href="#align-items-property">alignment properties</a>. <figure> 20.700 <div style="display:table; margin: 0 auto 1em;"> 20.701 <div class=cross-auto-figure 20.702 @@ -2411,7 +2514,7 @@ 20.703 over the alignment of items when they overflow the line. 20.704 20.705 <dl> 20.706 - <dt><dfn id=justify-content-flex-start>‘<code 20.707 + <dt><dfn id=justify-flex-start>‘<code 20.708 class=css>flex-start</code>’</dfn> 20.709 20.710 <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the 20.711 @@ -2421,8 +2524,7 @@ 20.712 of the line, and each subsequent <a href="#flex-item"><i>flex 20.713 item</i></a> is placed flush with the preceding item. 20.714 20.715 - <dt><dfn id=justify-content-flex-end>‘<code 20.716 - class=css>flex-end</code>’</dfn> 20.717 + <dt><dfn id=justify-flex-end>‘<code class=css>flex-end</code>’</dfn> 20.718 20.719 <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the end 20.720 of the line. The <a href="#main-end"><i>main-end</i></a> margin edge of 20.721 @@ -2431,8 +2533,7 @@ 20.722 preceding <a href="#flex-item"><i>flex item</i></a> is placed flush with 20.723 the subsequent item. 20.724 20.725 - <dt><dfn id=justify-content-center>‘<code 20.726 - class=css>center</code>’</dfn> 20.727 + <dt><dfn id=justify-center>‘<code class=css>center</code>’</dfn> 20.728 20.729 <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the 20.730 center of the line. The <a href="#flex-item"><i>flex items</i></a> on the 20.731 @@ -2444,14 +2545,14 @@ 20.732 free-space is negative, the <a href="#flex-item"><i>flex items</i></a> 20.733 will overflow equally in both directions.) 20.734 20.735 - <dt><dfn id=justify-content-space-between>‘<code 20.736 + <dt><dfn id=justify-space-between>‘<code 20.737 class=css>space-between</code>’</dfn> 20.738 20.739 <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in 20.740 the line. If the leftover free-space is negative or there is only a 20.741 single <a href="#flex-item"><i>flex item</i></a> on the line, this value 20.742 - is identical to ‘<a href="#align-content-flex-start"><code 20.743 - class=css>flex-start</code></a>’. Otherwise, the <a 20.744 + is identical to <a href="#justify-flex-start">‘<code 20.745 + class=css>flex-start</code>’</a>. Otherwise, the <a 20.746 href="#main-start"><i>main-start</i></a> margin edge of the first <a 20.747 href="#flex-item"><i>flex item</i></a> on the line is placed flush with 20.748 the <a href="#main-start"><i>main-start</i></a> edge of the line, the <a 20.749 @@ -2462,14 +2563,14 @@ 20.750 distributed so that the empty space between any two adjacent items is the 20.751 same. 20.752 20.753 - <dt><dfn id=justify-content-space-around>‘<code 20.754 + <dt><dfn id=justify-space-around>‘<code 20.755 class=css>space-around</code>’</dfn> 20.756 20.757 <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in 20.758 the line, with half-size spaces on either end. If the leftover free-space 20.759 is negative or there is only a single <a href="#flex-item"><i>flex 20.760 - item</i></a> on the line, this value is identical to ‘<a 20.761 - href="#align-content-center"><code class=css>center</code></a>’. 20.762 + item</i></a> on the line, this value is identical to <a 20.763 + href="#justify-center">‘<code class=css>center</code>’</a>. 20.764 Otherwise, the <a href="#flex-item"><i>flex items</i></a> on the line are 20.765 distributed such that the empty space between any two adjacent <a 20.766 href="#flex-item"><i>flex items</i></a> on the line is the same, and the 20.767 @@ -2571,9 +2672,9 @@ 20.768 <tr> 20.769 <th>Computed Value: 20.770 20.771 - <td>‘<a href="#align-self-auto"><code class=css>auto</code></a>’ 20.772 - computes to parent's ‘<a href="#align-items"><code 20.773 - class=property>align-items</code></a>’; otherwise as specified 20.774 + <td>‘<code class=css>auto</code>’ computes to parent's ‘<a 20.775 + href="#align-items"><code class=property>align-items</code></a>’; 20.776 + otherwise as specified 20.777 20.778 <tr> 20.779 <th>Media: 20.780 @@ -2608,7 +2709,7 @@ 20.781 href="#align-items"><code class=property>align-items</code></a>’ on 20.782 their associated flex container.) 20.783 20.784 - <p> A value of <dfn id=align-self-auto>‘<code 20.785 + <p> A value of <dfn id=align-self-auto title="align-self: auto">‘<code 20.786 class=css>auto</code>’</dfn> for ‘<a href="#align-self"><code 20.787 class=property>align-self</code></a>’ computes to the value of ‘<a 20.788 href="#align-items"><code class=property>align-items</code></a>’ on the 20.789 @@ -2617,21 +2718,20 @@ 20.790 alignments are defined as: 20.791 20.792 <dl> 20.793 - <dt><dfn id=align-items-flex-start>‘<code 20.794 - class=css>flex-start</code>’</dfn> 20.795 + <dt><dfn id=align-flex-start>‘<code class=css>flex-start</code>’</dfn> 20.796 + 20.797 20.798 <dd> The <a href="#cross-start"><i>cross-start</i></a> margin edge of the 20.799 <a href="#flex-item"><i>flex item</i></a> is placed flush with the <a 20.800 href="#cross-start"><i>cross-start</i></a> edge of the line. 20.801 20.802 - <dt><dfn id=align-items-flex-end>‘<code 20.803 - class=css>flex-end</code>’</dfn> 20.804 + <dt><dfn id=align-flex-end>‘<code class=css>flex-end</code>’</dfn> 20.805 20.806 <dd> The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a 20.807 href="#flex-item"><i>flex item</i></a> is placed flush with the <a 20.808 href="#cross-end"><i>cross-end</i></a> edge of the line. 20.809 20.810 - <dt><dfn id=align-items-center>‘<code class=css>center</code>’</dfn> 20.811 + <dt><dfn id=align-center>‘<code class=css>center</code>’</dfn> 20.812 20.813 <dd> The <a href="#flex-item"><i>flex item</i></a>'s margin box is 20.814 centered in the <a href="#cross-axis"><i>cross axis</i></a> within the 20.815 @@ -2639,14 +2739,13 @@ 20.816 line is less than that of the <a href="#flex-item"><i>flex item</i></a>, 20.817 it will overflow equally in both directions.) 20.818 20.819 - <dt><dfn id=align-items-baseline>‘<code 20.820 - class=css>baseline</code>’</dfn> 20.821 + <dt><dfn id=align-baseline>‘<code class=css>baseline</code>’</dfn> 20.822 20.823 <dd> 20.824 <p> If the <a href="#flex-item"><i>flex item</i></a>'s inline axis 20.825 is the same as the <a href="#cross-axis"><i>cross axis</i></a>, this 20.826 - value is identical to ‘<a href="#align-content-flex-start"><code 20.827 - class=css>flex-start</code></a>’. 20.828 + value is identical to <a href="#align-flex-start">‘<code 20.829 + class=css>flex-start</code>’</a>. 20.830 20.831 <p> Otherwise, it <dfn id=baseline-participation>participates in baseline 20.832 alignment</dfn>: all participating <a href="#flex-item"><i>flex 20.833 @@ -2656,17 +2755,16 @@ 20.834 against the <a href="#cross-start"><i>cross-start</i></a> edge of the 20.835 line. 20.836 20.837 - <dt><dfn id=align-items-stretch>‘<code class=css>stretch</code>’</dfn> 20.838 - 20.839 + <dt><dfn id=align-stretch>‘<code class=css>stretch</code>’</dfn> 20.840 20.841 <dd> 20.842 <p> If the <a href="#cross-size-property"><i>cross size property</i></a> 20.843 - of the <a href="#flex-item"><i>flex item</i></a> is ‘<a 20.844 - href="#align-self-auto"><code class=css>auto</code></a>’, its used 20.845 - value is the length necessary to make the <a href="#cross-size"><i>cross 20.846 - size</i></a> of the item's margin box as close to the same size as the 20.847 - line as possible, while still respecting the constraints imposed by 20.848 - ‘<code class=css>min/max-width/height</code>’. 20.849 + of the <a href="#flex-item"><i>flex item</i></a> is ‘<code 20.850 + class=css>auto</code>’, its used value is the length necessary to make 20.851 + the <a href="#cross-size"><i>cross size</i></a> of the item's margin box 20.852 + as close to the same size as the line as possible, while still 20.853 + respecting the constraints imposed by ‘<code 20.854 + class=css>min/max-width/height</code>’. 20.855 20.856 <p class=note> Note that if the flex container's height is constrained 20.857 this value may cause the contents of the <a href="#flex-item"><i>flex 20.858 @@ -2782,9 +2880,9 @@ 20.859 20.860 <dd> Lines are evenly distributed in the flex container. If the leftover 20.861 free-space is negative or there is only a single line in the flex 20.862 - container, this value is identical to ‘<a 20.863 - href="#align-content-flex-start"><code 20.864 - class=css>flex-start</code></a>’. Otherwise, the <a 20.865 + container, this value is identical to <a 20.866 + href="#align-content-flex-start">‘<code 20.867 + class=css>flex-start</code>’</a>. Otherwise, the <a 20.868 href="#cross-start"><i>cross-start</i></a> edge of the first line in the 20.869 flex container is placed flush with the <a 20.870 href="#cross-start"><i>cross-start</i></a> content edge of the flex 20.871 @@ -2799,8 +2897,8 @@ 20.872 20.873 <dd> Lines are evenly distributed in the flex container, with half-size 20.874 spaces on either end. If the leftover free-space is negative or there is 20.875 - only a single line in the flex container, this value is identical to 20.876 - ‘<a href="#align-content-center"><code class=css>center</code></a>’. 20.877 + only a single line in the flex container, this value is identical to <a 20.878 + href="#align-content-center">‘<code class=css>center</code>’</a>. 20.879 Otherwise, the lines in the flex container are distributed such that the 20.880 empty space between any two adjacent lines is the same, and the empty 20.881 space before the first and after the last lines in the flex container are 20.882 @@ -2810,9 +2908,9 @@ 20.883 class=css>stretch</code>’</dfn> 20.884 20.885 <dd> Lines stretch to take up the remaining space. If the leftover 20.886 - free-space is negative, this value is identical to ‘<a 20.887 - href="#align-content-flex-start"><code 20.888 - class=css>flex-start</code></a>’. Otherwise, the free-space is split 20.889 + free-space is negative, this value is identical to <a 20.890 + href="#align-content-flex-start">‘<code 20.891 + class=css>flex-start</code>’</a>. Otherwise, the free-space is split 20.892 equally between all of the lines, increasing their cross size. 20.893 </dl> 20.894 20.895 @@ -2911,7 +3009,8 @@ 20.896 20.897 <dd> 20.898 <p> The inline-axis baseline of a table box is the baseline of its first 20.899 - row. 20.900 + row. However, when calculating the baseline of an inline-block, table 20.901 + boxes must be skipped. 20.902 20.903 <p> The block-axis baseline of a table is undefined. 20.904 </dl> 20.905 @@ -3021,20 +3120,19 @@ 20.906 <li> If the item has a <a href="#definite-size"><i>definite</i></a> flex 20.907 basis, that's the <a href="#flex-base-size"><i>flex base size</i></a>. 20.908 20.909 - <li> If the flex basis is ‘<a href="#align-self-auto"><code 20.910 - class=css>auto</code></a>’ or depends on its available size, and the 20.911 - flex container is being sized under a min-content or max-content 20.912 - constraint (e.g. when performing <a 20.913 + <li> If the flex basis is ‘<code class=css>auto</code>’ or depends 20.914 + on its available size, and the flex container is being sized under a 20.915 + min-content or max-content constraint (e.g. when performing <a 20.916 href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">automatic 20.917 table layout</a> <a href="#CSS21" 20.918 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), size the item under that 20.919 constraint. The <a href="#flex-base-size"><i>flex base size</i></a> is 20.920 the item's resulting main size. 20.921 20.922 - <li> Otherwise, if the flex basis is ‘<a href="#align-self-auto"><code 20.923 - class=css>auto</code></a>’ or depends on its available size, the 20.924 - available main size is infinite, and the flex item's inline axis is 20.925 - parallel to the main axis, lay the item out using <a 20.926 + <li> Otherwise, if the flex basis is ‘<code class=css>auto</code>’ 20.927 + or depends on its available size, the available main size is infinite, 20.928 + and the flex item's inline axis is parallel to the main axis, lay the 20.929 + item out using <a 20.930 href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the 20.931 rules for a box in an orthogonal flow</a> <a href="#CSS3-WRITING-MODES" 20.932 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 20.933 @@ -3042,10 +3140,10 @@ 20.934 max-content main size. 20.935 20.936 <li> Otherwise, lay out the item into the available space using its flex 20.937 - basis in place of its main size, and treating ‘<a 20.938 - href="#align-self-auto"><code class=css>auto</code></a>’ as ‘<code 20.939 - class=css>max-content</code>’. The <a href="#flex-base-size"><i>flex 20.940 - base size</i></a> is the item's resulting main size. 20.941 + basis in place of its main size, and treating ‘<code 20.942 + class=css>auto</code>’ as ‘<code class=css>max-content</code>’. 20.943 + The <a href="#flex-base-size"><i>flex base size</i></a> is the item's 20.944 + resulting main size. 20.945 </ul> 20.946 The <a href="#hypothetical-main-size"><i>hypothetical main size</i></a> 20.947 is the item's <a href="#flex-base-size"><i>flex base size</i></a> clamped 20.948 @@ -3061,9 +3159,8 @@ 20.949 size contribution of an item is its outer <a 20.950 href="#hypothetical-main-size"><i>hypothetical main size</i></a> when 20.951 sized under a min-content/max-content constraint (respectively). For this 20.952 - computation, ‘<a href="#align-self-auto"><code 20.953 - class=css>auto</code></a>’ margins are treated as ‘<code 20.954 - class=css>0</code>’. 20.955 + computation, ‘<code class=css>auto</code>’ margins are treated as 20.956 + ‘<code class=css>0</code>’. 20.957 </ol> 20.958 20.959 <h3 id=main-sizing><span class=secno>9.3. </span> Main Size Determination</h3> 20.960 @@ -3107,9 +3204,8 @@ 20.961 <li id=algo-cross-item> <strong>Determine the <dfn 20.962 id=hypothetical-cross-size>hypothetical cross size</dfn> of each 20.963 item</strong> by performing layout with the used main size and the 20.964 - available space, treating ‘<a href="#align-self-auto"><code 20.965 - class=css>auto</code></a>’ as ‘<code class=css>fit-content</code>’. 20.966 - 20.967 + available space, treating ‘<code class=css>auto</code>’ as ‘<code 20.968 + class=css>fit-content</code>’. 20.969 20.970 <li id=algo-cross-line> <strong>Calculate the cross size of each flex 20.971 line.</strong> 20.972 @@ -3122,14 +3218,13 @@ 20.973 <ol> 20.974 <li> Collect all the flex items whose inline-axis is parallel to the 20.975 main-axis, whose ‘<a href="#align-self"><code 20.976 - class=property>align-self</code></a>’ is ‘<a 20.977 - href="#align-items-baseline"><code class=css>baseline</code></a>’, 20.978 - and whose cross-axis margins are both non-‘<a 20.979 - href="#align-self-auto"><code class=css>auto</code></a>’. Find the 20.980 - largest of the distances between each item's baseline and its 20.981 - hypothetical outer cross-start edge, and the largest of the distances 20.982 - between each item's baseline and its hypothetical outer cross-end edge, 20.983 - and sum these two values. 20.984 + class=property>align-self</code></a>’ is <a 20.985 + href="#align-baseline">‘<code class=css>baseline</code>’</a>, and 20.986 + whose cross-axis margins are both non-‘<code 20.987 + class=css>auto</code>’. Find the largest of the distances between 20.988 + each item's baseline and its hypothetical outer cross-start edge, and 20.989 + the largest of the distances between each item's baseline and its 20.990 + hypothetical outer cross-end edge, and sum these two values. 20.991 20.992 <li> Among all the items not collected by the previous step, find the 20.993 largest outer <a href="#hypothetical-cross-size"><i>hypothetical cross 20.994 @@ -3169,12 +3264,11 @@ 20.995 20.996 <li id=algo-stretch> <strong>Determine the used cross size of each flex 20.997 item.</strong> If a flex item has ‘<code class=css>align-self: 20.998 - stretch</code>’, its cross size property is ‘<a 20.999 - href="#align-self-auto"><code class=css>auto</code></a>’, and neither 20.1000 - of its cross-axis margins are ‘<a href="#align-self-auto"><code 20.1001 - class=css>auto</code></a>’, the used outer cross size is the used cross 20.1002 - size of its flex line, clamped according to the item's min and max cross 20.1003 - size properties. Otherwise, the used cross size is the item's <a 20.1004 + stretch</code>’, its cross size property is ‘<code 20.1005 + class=css>auto</code>’, and neither of its cross-axis margins are 20.1006 + ‘<code class=css>auto</code>’, the used outer cross size is the used 20.1007 + cross size of its flex line, clamped according to the item's min and max 20.1008 + cross size properties. Otherwise, the used cross size is the item's <a 20.1009 href="#hypothetical-cross-size"><i>hypothetical cross size</i></a>. 20.1010 </ol> 20.1011 20.1012 @@ -3185,10 +3279,9 @@ 20.1013 space.</strong> For each flex line: 20.1014 <ol> 20.1015 <li> If the remaining free space is positive and at least one main-axis 20.1016 - margin on this line is ‘<a href="#align-self-auto"><code 20.1017 - class=css>auto</code></a>’, distribute the free space equally among 20.1018 - these margins. Otherwise, set all ‘<a href="#align-self-auto"><code 20.1019 - class=css>auto</code></a>’ margins to zero. 20.1020 + margin on this line is ‘<code class=css>auto</code>’, distribute 20.1021 + the free space equally among these margins. Otherwise, set all ‘<code 20.1022 + class=css>auto</code>’ margins to zero. 20.1023 20.1024 <li> Align the items along the main-axis per ‘<a 20.1025 href="#justify-content"><code 20.1026 @@ -3199,21 +3292,17 @@ 20.1027 <h3 id=cross-alignment><span class=secno>9.6. </span> Cross-Axis Alignment</h3> 20.1028 20.1029 <ol class=continue> 20.1030 - <li id=algo-cross-margins> <strong>Resolve cross-axis ‘<a 20.1031 - href="#align-self-auto"><code class=css>auto</code></a>’ 20.1032 - margins.</strong> If a flex item has ‘<a href="#align-self-auto"><code 20.1033 - class=css>auto</code></a>’ cross-axis margins, and its outer cross size 20.1034 - (treating those ‘<a href="#align-self-auto"><code 20.1035 - class=css>auto</code></a>’ margins as zero) is less than the cross size 20.1036 - of its flex line, distribute the difference in those sizes equally to the 20.1037 - ‘<a href="#align-self-auto"><code class=css>auto</code></a>’ margins. 20.1038 - 20.1039 + <li id=algo-cross-margins> <strong>Resolve cross-axis ‘<code 20.1040 + class=css>auto</code>’ margins.</strong> If a flex item has ‘<code 20.1041 + class=css>auto</code>’ cross-axis margins, and its outer cross size 20.1042 + (treating those ‘<code class=css>auto</code>’ margins as zero) is 20.1043 + less than the cross size of its flex line, distribute the difference in 20.1044 + those sizes equally to the ‘<code class=css>auto</code>’ margins. 20.1045 20.1046 <li id=algo-cross-align> <strong>Align all flex items along the 20.1047 cross-axis</strong> per ‘<a href="#align-self"><code 20.1048 class=property>align-self</code></a>’, if neither of the item's 20.1049 - cross-axis margins are ‘<a href="#align-self-auto"><code 20.1050 - class=css>auto</code></a>’. 20.1051 + cross-axis margins are ‘<code class=css>auto</code>’. 20.1052 20.1053 <li id=algo-cross-container> <strong>Determine the flex container's used 20.1054 cross size:</strong> 20.1055 @@ -3494,7 +3583,7 @@ 20.1056 <li> Run the entire flex layout algorithm (without regards to 20.1057 pagination), except treat any ‘<a href="#align-self"><code 20.1058 class=property>align-self</code></a>’ other than ‘<code 20.1059 - class=css>start</code>’ or ‘<a href="#align-items-baseline"><code 20.1060 + class=css>start</code>’ or ‘<a href="#align-baseline"><code 20.1061 class=css>baseline</code></a>’ as ‘<code 20.1062 class=css>start</code>’. 20.1063 20.1064 @@ -3740,12 +3829,12 @@ 20.1065 20.1066 <h2 class=no-num id=acknowledgments>Acknowledgments</h2> 20.1067 20.1068 - <p>Thanks for feedback and contributions to Andrew Fedoniouk, Arron 20.1069 - Eicholz, James Elmore, Ben Horst, Boris Zbarsky, Brad Kemper, Brian 20.1070 - Heuston, Christian Stockwell, Christoph Päper, Daniel Holbert, Erik 20.1071 - Anderson, Eugene Veselov, Fantasai, John Jansen, Markus Mielke, Ning 20.1072 - Rogers, Ojan Vafai, Peter Salas, Phil Cupp, Robert O'Callahan, Rossen 20.1073 - Atanassov, Shinichiro Hamaji, Tony Chang. 20.1074 + <p>Thanks for feedback and contributions to Erik Anderson, Tony Chang, Phil 20.1075 + Cupp, Arron Eicholz, James Elmore, Andrew Fedoniouk, Brian Heuston, 20.1076 + Shinichiro Hamaji, Daniel Holbert, Ben Horst, John Jansen, Brad Kemper, 20.1077 + Kang-hao Lu, Markus Mielke, Robert O'Callahan, Christoph Päper, Ning 20.1078 + Rogers, Peter Salas, Morten Stenshorne, Christian Stockwell, Ojan Vafai, 20.1079 + Eugene Veselov, Boris Zbarsky. 20.1080 20.1081 <h2 class=no-num id=references>References</h2> 20.1082 20.1083 @@ -3850,11 +3939,13 @@ 20.1084 <li>Defined <a href="#painting">painting behavior of flex items</a>. 20.1085 20.1086 <li>Made ‘<code class=property>z-index</code>’ automatically apply to 20.1087 - flex items. <!-- 20.1088 - <li>Defined which properties affect placeholders. 20.1089 - <li>Defined which properties apply to the table wrapper box vs. the table box of a table element. 20.1090 ---> 20.1091 - 20.1092 + flex items. 20.1093 + 20.1094 + <li>Changed how absolutely-positioned flex container children are handled 20.1095 + so that they don't impact layout. 20.1096 + 20.1097 + <li>Defined which properties apply to the table wrapper box vs. the table 20.1098 + box of a table element. 20.1099 20.1100 <li>Defined interaction of ‘<a href="#order"><code 20.1101 class=property>order</code></a>’ and <a 20.1102 @@ -3966,7 +4057,7 @@ 20.1103 <td>visual 20.1104 20.1105 <tr> 20.1106 - <th><a class=property href="#flex-basis0">flex-basis</a> 20.1107 + <th><a class=property href="#flex-basis-propdef">flex-basis</a> 20.1108 20.1109 <td><'width'> 20.1110 20.1111 @@ -4110,28 +4201,27 @@ 20.1112 <li>align-self, <a href="#align-self" 20.1113 title=align-self><strong>8.3.</strong></a> 20.1114 20.1115 + <li>align-self: auto, <a href="#align-self-auto" 20.1116 + title="align-self: auto"><strong>8.3.</strong></a> 20.1117 + 20.1118 <li>authoring tool, <a href="#authoring-tool" 20.1119 title="authoring tool"><strong>11.2.</strong></a> 20.1120 20.1121 - <li>‘<a href="#align-self-auto"><code class=css>auto</code></a>’, <a 20.1122 - href="#align-self-auto" title="''auto''"><strong>8.3.</strong></a> 20.1123 - 20.1124 - <li>‘<a href="#align-items-baseline"><code 20.1125 - class=css>baseline</code></a>’, <a href="#align-items-baseline" 20.1126 - title="''baseline''"><strong>8.3.</strong></a> 20.1127 + <li>‘<a href="#align-baseline"><code class=css>baseline</code></a>’, 20.1128 + <a href="#align-baseline" title="''baseline''"><strong>8.3.</strong></a> 20.1129 20.1130 <li>‘<a href="#align-content-center"><code 20.1131 - class=css>center</code></a>’, <a href="#align-content-center" 20.1132 - title="''center''"><strong>8.4.</strong></a>, <a 20.1133 - href="#align-items-center" title="''center''"><strong>8.3.</strong></a>, 20.1134 - <a href="#justify-content-center" 20.1135 + class=css>center</code></a>’, <a href="#align-center" 20.1136 + title="''center''"><strong>8.3.</strong></a>, <a 20.1137 + href="#align-content-center" 20.1138 + title="''center''"><strong>8.4.</strong></a>, <a href="#justify-center" 20.1139 title="''center''"><strong>8.2.</strong></a> 20.1140 20.1141 <li>collapsed, <a href="#collapsed-flex-item" 20.1142 - title=collapsed><strong>4.3.</strong></a> 20.1143 + title=collapsed><strong>4.4.</strong></a> 20.1144 20.1145 <li>collapsed flex item, <a href="#collapsed-flex-item" 20.1146 - title="collapsed flex item"><strong>4.3.</strong></a> 20.1147 + title="collapsed flex item"><strong>4.4.</strong></a> 20.1148 20.1149 <li>‘<a href="#flex-flow-column"><code class=css>column</code></a>’, 20.1150 <a href="#flex-flow-column" title="''column''"><strong>5.1.</strong></a> 20.1151 @@ -4180,9 +4270,12 @@ 20.1152 <li>flex basis, <a href="#flex-basis" 20.1153 title="flex basis"><strong>7.1.</strong></a> 20.1154 20.1155 - <li>flex-basis, <a href="#flex-basis0" 20.1156 + <li>flex-basis, <a href="#flex-basis-propdef" 20.1157 title=flex-basis><strong>7.3.3.</strong></a> 20.1158 20.1159 + <li>flex-basis: auto, <a href="#flex-basis-auto" 20.1160 + title="flex-basis: auto"><strong>7.3.3.</strong></a> 20.1161 + 20.1162 <li>flex container, <a href="#flex-container" 20.1163 title="flex container"><strong>3.</strong></a> 20.1164 20.1165 @@ -4191,11 +4284,9 @@ 20.1166 20.1167 <li>‘<a href="#align-content-flex-end"><code 20.1168 class=css>flex-end</code></a>’, <a href="#align-content-flex-end" 20.1169 - title="''flex-end''"><strong>8.4.</strong></a>, <a 20.1170 - href="#align-items-flex-end" 20.1171 + title="''flex-end''"><strong>8.4.</strong></a>, <a href="#align-flex-end" 20.1172 title="''flex-end''"><strong>8.3.</strong></a>, <a 20.1173 - href="#justify-content-flex-end" 20.1174 - title="''flex-end''"><strong>8.2.</strong></a> 20.1175 + href="#justify-flex-end" title="''flex-end''"><strong>8.2.</strong></a> 20.1176 20.1177 <li>flex-flow, <a href="#flex-flow" 20.1178 title=flex-flow><strong>5.3.</strong></a> 20.1179 @@ -4230,9 +4321,9 @@ 20.1180 <li>‘<a href="#align-content-flex-start"><code 20.1181 class=css>flex-start</code></a>’, <a href="#align-content-flex-start" 20.1182 title="''flex-start''"><strong>8.4.</strong></a>, <a 20.1183 - href="#align-items-flex-start" 20.1184 + href="#align-flex-start" 20.1185 title="''flex-start''"><strong>8.3.</strong></a>, <a 20.1186 - href="#justify-content-flex-start" 20.1187 + href="#justify-flex-start" 20.1188 title="''flex-start''"><strong>8.2.</strong></a> 20.1189 20.1190 <li>flex-wrap, <a href="#flex-wrap" 20.1191 @@ -4281,11 +4372,14 @@ 20.1192 title=main-start><strong>2.</strong></a> 20.1193 20.1194 <li>min-width/height:auto, <a href="#min-auto" 20.1195 - title="min-width/height:auto"><strong>4.4.</strong></a> 20.1196 + title="min-width/height:auto"><strong>4.5.</strong></a> 20.1197 20.1198 <li>multi-line, <a href="#multi-line" 20.1199 title=multi-line><strong>6.</strong></a> 20.1200 20.1201 + <li>‘<a href="#flex-none"><code class=css>none</code></a>’, <a 20.1202 + href="#flex-none" title="''none''"><strong>7.1.</strong></a> 20.1203 + 20.1204 <li>‘<a href="#flex-flow-nowrap"><code class=css>nowrap</code></a>’, 20.1205 <a href="#flex-flow-nowrap" title="''nowrap''"><strong>5.2.</strong></a> 20.1206 20.1207 @@ -4314,21 +4408,23 @@ 20.1208 class=css>space-around</code></a>’, <a 20.1209 href="#align-content-space-around" 20.1210 title="''space-around''"><strong>8.4.</strong></a>, <a 20.1211 - href="#justify-content-space-around" 20.1212 + href="#justify-space-around" 20.1213 title="''space-around''"><strong>8.2.</strong></a> 20.1214 20.1215 <li>‘<a href="#align-content-space-between"><code 20.1216 class=css>space-between</code></a>’, <a 20.1217 href="#align-content-space-between" 20.1218 title="''space-between''"><strong>8.4.</strong></a>, <a 20.1219 - href="#justify-content-space-between" 20.1220 + href="#justify-space-between" 20.1221 title="''space-between''"><strong>8.2.</strong></a> 20.1222 20.1223 + <li>static position, <a href="#flex-item-static-position" 20.1224 + title="static position"><strong>4.1.</strong></a> 20.1225 + 20.1226 <li>‘<a href="#align-content-stretch"><code 20.1227 class=css>stretch</code></a>’, <a href="#align-content-stretch" 20.1228 - title="''stretch''"><strong>8.4.</strong></a>, <a 20.1229 - href="#align-items-stretch" title="''stretch''"><strong>8.3.</strong></a> 20.1230 - 20.1231 + title="''stretch''"><strong>8.4.</strong></a>, <a href="#align-stretch" 20.1232 + title="''stretch''"><strong>8.3.</strong></a> 20.1233 20.1234 <li>strut size, <a href="#strut-size" 20.1235 title="strut size"><strong>9.4.</strong></a>
21.1 --- a/css3-flexbox/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 21.2 +++ b/css3-flexbox/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 21.3 @@ -345,7 +345,7 @@ 21.4 and 'align-self' to center it horizontally. 21.5 21.6 <li> 21.7 - An ''auto'' margin above the purchase button 21.8 + An <a href="#auto-margins">''auto'' margin</a> above the purchase button 21.9 forces it to the bottom of the entry box, 21.10 regardless of the height of the description. 21.11 </ul> 21.12 @@ -458,7 +458,7 @@ 21.13 21.14 <p> 21.15 Unlike block and inline layout, 21.16 - whose layout calculations are biased to the writing mode directions, 21.17 + whose layout calculations are biased to the <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-box">block and inline flow directions</a>, 21.18 flex layout is biased to the <a href="#flex-flow-property">flex flow</a> directions. 21.19 To make it easier to talk about flex layout, 21.20 this section defines a set of flex flow–relative terms. 21.21 @@ -490,10 +490,10 @@ 21.22 <dt class='size'>main size 21.23 <dt class='size'>main size property 21.24 <dd> 21.25 - A <i>flex item</i>'s width or height, 21.26 + A <i>flex item</i>'s width or height, 21.27 whichever is in the <i>main dimension</i>, 21.28 is the item's <dfn>main size</dfn>. 21.29 - The <i>flex item</i>'s <dfn>main size property</dfn> is 21.30 + The <i>flex item</i>'s <dfn>main size property</dfn> is 21.31 either the 'width' or 'height' property, 21.32 whichever is in the <i>main dimension</i>. 21.33 </dl> 21.34 @@ -523,7 +523,7 @@ 21.35 </dl> 21.36 21.37 <h2 id='flex-containers'> 21.38 -Flex Containers: the ''flex'' and ''inline-flex'' 'display' values</h2> 21.39 +Flex Containers: the <a href="#display-flex">''flex''</a> and <a href="#display-inline-flex">''inline-flex''</a> 'display' values</h2> 21.40 21.41 <table class="propdef"> 21.42 <tr> 21.43 @@ -572,11 +572,11 @@ 21.44 <p> 21.45 If an element's specified 'display' is ''inline-flex'' 21.46 and the element is floated or absolutely positioned, 21.47 - the computed value of 'display' is ''flex''. 21.48 + the computed value of 'display' is <a href="#display-flex">''flex''</a>. 21.49 The table in <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a> is thus amended 21.50 to contain an additional row, 21.51 with ''inline-flex'' in the "Specified Value" column 21.52 - and ''flex'' in the "Computed Value" column. 21.53 + and <a href="#display-flex">''flex''</a> in the "Computed Value" column. 21.54 21.55 <h2 id='flex-items'> 21.56 Flex Items</h2> 21.57 @@ -591,6 +591,10 @@ 21.58 <a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a> 21.59 is not rendered, as if it were ''display:none''. 21.60 21.61 + <p class="note"> 21.62 + Authors reading this spec may want to 21.63 + <a href="#item-margins">skip past these box-generation details</a>. 21.64 + 21.65 <p> 21.66 A <i>flex item</i> establishes a new formatting context for its contents. 21.67 The type of this formatting context is determined by its 'display' value, as usual. 21.68 @@ -606,10 +610,6 @@ 21.69 is expected to be superseded by a future specification 21.70 that defines a new 'display' value specific to flex items. 21.71 21.72 - <p class="note"> 21.73 - Authors reading this spec may want to 21.74 - <a href="#item-margins">skip past these box-generation details</a>. 21.75 - 21.76 <div class="example"> 21.77 <p>Examples of flex items: 21.78 <pre> 21.79 @@ -649,30 +649,76 @@ 21.80 <p id="table-items"> 21.81 On a flex item with ''display: table'', the table wrapper box becomes the <i>flex item</i>, 21.82 and the 'order' and 'align-self' properties apply to it. 21.83 - However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows: 21.84 The contents of any caption boxes contribute to the calculation of 21.85 the table wrapper box's min-content and max-content sizes. 21.86 - However, the <i>flex item</i>'s final size is calculated by 21.87 - first laying out the captions, 21.88 - and then performing layout as if the distance between 21.89 + However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows: 21.90 + the <i>flex item</i>'s final size is calculated 21.91 + by performing layout as if the distance between 21.92 the table wrapper box's edges and the table box's content edges 21.93 were all part of the table box's border+padding area, 21.94 and the table box were the <i>flex item</i>. 21.95 21.96 - <p id='abspos-items'> 21.97 - The <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">hypothetical box</a> used to calculate the <i>static position</i> [[!CSS21]] 21.98 - of an absolutely-positioned <i>flex item</i> corresponds to 21.99 - that of an anonymous empty flex item 21.100 - whose <i>main-axis</i> position, 21.101 - after <a href="#order-property">reordering</a> 21.102 - coincides with the <i>main-start</i> edge of 21.103 - any subsequent real flex item on the flex line, 21.104 - and, being hypothetical, has no effect on flex layout. 21.105 - If there is no subsequent real flex item, 21.106 - the hypothetical box's <i>main-axis</i> position is 21.107 - that of a hypothetical last item on the flex line, 21.108 - after any packing spaces that were introduced 21.109 - around any previous real items due to ''content-justify: space-around''. 21.110 +<h3 id='abspos-items'> 21.111 +Absolutely-Positioned Flex Items</h3> 21.112 + 21.113 + <p> 21.114 + An absolutely-positioned <i>flex item</i> does not participate in flex layout 21.115 + beyond the <a href="#algo-flex-order">reordering step</a>. 21.116 + However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'', 21.117 + then the used value of those properties 21.118 + are computed from its <dfn id='flex-item-static-position'>static position</dfn>, as follows: 21.119 + 21.120 + <p> 21.121 + If both 'left' and 'right' are ''auto'', 21.122 + the <i>flex item</i> must be positioned so that 21.123 + its <i>main-start</i> or <i>cross-start</i> edge 21.124 + (whichever is in the horizontal axis) 21.125 + is aligned with the <i>static position</i>. 21.126 + If both 'top' and 'bottom' are ''auto'', 21.127 + the <i>flex item</i> must be positioned so that 21.128 + its <i>main-start</i> or <i>cross-start</i> edge 21.129 + (whichever is in the vertical axis) 21.130 + is aligned with the <i>static position</i>. 21.131 + 21.132 + <p> 21.133 + In the <i>main axis</i>, 21.134 + 21.135 + <ol> 21.136 + <li> 21.137 + If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>, 21.138 + the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>. 21.139 + 21.140 + <li> 21.141 + Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>, 21.142 + the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>. 21.143 + 21.144 + <li> 21.145 + Otherwise, the <i>static position</i> is determined 21.146 + by the value of 'justify-content' on the <i>flex container</i> 21.147 + as if the <i>static position</i> were represented by a zero-sized flex item. 21.148 + </ol> 21.149 + 21.150 + <p> 21.151 + In the <i>cross axis</i>, 21.152 + 21.153 + <ol> 21.154 + <li> 21.155 + If there is a preceding in-flow <i>flex item</i>, 21.156 + the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex-line</i> 21.157 + that item is in. 21.158 + <li> 21.159 + Otherwise, the <i>static position</i> is the <i>cross-start edge</i> of the first <i>flex line</i>. 21.160 + </ol> 21.161 + 21.162 + <p class='note'> 21.163 + The static position is intended to more-or-less match the position of 21.164 + an anonymous 0×0 in-flow <a href="#align-self">''flex-start''-aligned</a> 21.165 + flex item that participates in flex layout, 21.166 + the primary difference being that any packing spaces due to 21.167 + ''justify-content: space-around'' or ''justify-content: space-between'' 21.168 + are suppressed around the hypothetical item: 21.169 + between it and the next item if there is a real item after it, 21.170 + else between it and the previous item (if any) if there isn't. 21.171 21.172 <h3 id='item-margins'> 21.173 Flex Item Margins</h3> 21.174 @@ -688,7 +734,8 @@ 21.175 21.176 <p> 21.177 <i>Flex items</i> paint exactly the same as block-level elements in the normal flow, 21.178 - except that 'z-index' values other than ''auto'' create a stacking context 21.179 + except that <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">'z-index'</a> 21.180 + values other than ''auto'' create a stacking context 21.181 even if 'position' is ''static''. 21.182 <p class="note"> 21.183 Note: Descendants that are positioned outside a flex item still participate 21.184 @@ -850,7 +897,8 @@ 21.185 <dt><dfn title="min-width/height:auto" id='min-auto'>auto</dfn> 21.186 <dd> 21.187 When used as the value of a flex item's min main size property, 21.188 - this keyword indicates a minimum main size of the min-content size. 21.189 + this keyword indicates a minimum of the min-content size, 21.190 + to help ensure that the item is large enough to fit its contents. 21.191 21.192 <p class='note'> 21.193 It is intended that this will compute to the ''min-content'' keyword 21.194 @@ -864,21 +912,23 @@ 21.195 21.196 <div class="note" id="min-size-opt"> 21.197 <p> 21.198 - Note that while a content-based minimum size is often appropriate, 21.199 - and helps prevent content from overlapping or spilling outside its container, 21.200 - in some cases it is not: 21.201 + Note that while a content-based minimum size is often appropriate, 21.202 + and helps prevent content from overlapping or spilling outside its container, 21.203 + in some cases it is not: 21.204 + 21.205 <p> 21.206 - In particular, if flex sizing is being used for a major content area of a document, 21.207 - it is better to set an explicit font-relative minimum width such as ''min-width: 12em''. 21.208 - A content-based minimum width could result in a large table or large image 21.209 - stretching the size of the entire content area into an overflow zone, 21.210 - and thereby making lines of text gratuitously long and hard to read. 21.211 + In particular, if flex sizing is being used for a major content area of a document, 21.212 + it is better to set an explicit font-relative minimum width such as ''min-width: 12em''. 21.213 + A content-based minimum width could result in a large table or large image 21.214 + stretching the size of the entire content area into an overflow zone, 21.215 + and thereby making lines of text gratuitously long and hard to read. 21.216 + 21.217 <p> 21.218 - Note also, when content-based sizing is used on an item with large amounts of content, 21.219 - the layout engine must traverse all of this content before finding its minimum size, 21.220 - whereas if the author sets an explicit minimum, this is not necessary. 21.221 - (For items with small amounts of content, however, 21.222 - this traversal is trivial and therefore not a problem.) 21.223 + Note also, when content-based sizing is used on an item with large amounts of content, 21.224 + the layout engine must traverse all of this content before finding its minimum size, 21.225 + whereas if the author sets an explicit minimum, this is not necessary. 21.226 + (For items with small amounts of content, however, 21.227 + this traversal is trivial and therefore not a performance concern.) 21.228 </div> 21.229 21.230 <h2> 21.231 @@ -950,8 +1000,8 @@ 21.232 <a href="http://www.w3.org/TR/css3-writing-modes/#block-axis">block axis</a> 21.233 of the current <i>writing mode</i>. 21.234 The <i>main-start</i> and <i>main-end</i> directions are equivalent to the 21.235 - <a href="http://www.w3.org/TR/css3-writing-modes/#before">before</a>/<a href="http://www.w3.org/TR/css3-writing-modes/#head">head</a> and 21.236 - <a href="http://www.w3.org/TR/css3-writing-modes/#after">after</a>/<a href="http://www.w3.org/TR/css3-writing-modes/#foot">foot</a> directions, respectively, 21.237 + <a href="http://www.w3.org/TR/css3-writing-modes/#before">before</a>/head and 21.238 + <a href="http://www.w3.org/TR/css3-writing-modes/#after">after</a>/foot directions, respectively, 21.239 of the current <i>writing mode</i>. 21.240 21.241 <dt><dfn id='flex-flow-column-reverse'>''column-reverse''</dfn> 21.242 @@ -1239,7 +1289,7 @@ 21.243 21.244 <p> 21.245 As an added bonus, 21.246 - the columns will all be <a href="#align-items-stretch">equal-height</a> by default, 21.247 + the columns will all be <a href="#align-stretch">equal-height</a> by default, 21.248 and the main content will be as wide as necessary to fill the screen. 21.249 Additionally, 21.250 this can then be combined with media queries to switch to an all-vertical layout on narrow screens: 21.251 @@ -1417,40 +1467,69 @@ 21.252 If an element is not a <i>flex item</i>, 21.253 'flex' has no effect. 21.254 21.255 + <dl> 21.256 + <dt><var><'flex-grow'></var> 21.257 + <dd> 21.258 + <p> 21.259 + This <var><number></var> component sets 'flex-grow' <a href="#flex-components">longhand</a> 21.260 + and specifies the <dfn>flex grow ratio</dfn>, 21.261 + which determines how much the <i>flex item</i> will grow 21.262 + relative to the rest of the <i>flex items</i> in the flex container 21.263 + when positive free space is distributed. 21.264 + When omitted, it is set to ''1''. 21.265 + 21.266 + <dt><var><'flex-shrink'></var> 21.267 + <dd> 21.268 + <p> 21.269 + This <var><number></var> component sets 'flex-shrink' <a href="#flex-components">longhand</a> 21.270 + and specifies the <dfn>flex shrink ratio</dfn>, 21.271 + which determines how much the <i>flex item</i> will shrink 21.272 + relative to the rest of the <i>flex items</i> in the flex container 21.273 + when negative free space is distributed. 21.274 + When omitted, it is set to ''1''. 21.275 + 21.276 + <dt><var><'flex-basis'></var> 21.277 + <dd> 21.278 + <p> 21.279 + This component, which takes the same values as the 'width' property, 21.280 + sets the 'flex-basis' <a href="#flex-components">longhand</a> 21.281 + and specifies the <dfn>flex basis</dfn>: 21.282 + the initial <i>main size</i> of the <i>flex item</i>, 21.283 + before free space is distributed according to the flex ratios. 21.284 + When omitted from the 'flex' shorthand, its specified value is the length zero. 21.285 + <p class="note"> 21.286 + If not omitted, a zero <var><'flex-basis'></var> component 21.287 + must be either specified with a unit or preceded by both flex ratios. 21.288 + Otherwise it will either be interpreted as one of the flex ratios, 21.289 + or will make the declaration invalid. 21.290 + <p> 21.291 + If the specified 'flex-basis' is <a href="#flex-basis-auto">''auto''</a>, 21.292 + the used <i>flex basis</i> is the value of the element's <i>main size property</i>. 21.293 + (This can itself be the keyword ''auto'', which sizes the element based on its contents.) 21.294 + <figure> 21.295 + <img src='images/rel-vs-abs-flex.svg' width='504' height='240'> 21.296 + <figcaption> 21.297 + A diagram showing the difference between "absolute" flex 21.298 + (starting from a basis of zero) 21.299 + and "relative" flex 21.300 + (starting from a basis of the item's content size). 21.301 + The three items have flex ratios of ''1'', ''1'', and ''2'', respectively. 21.302 + </figcaption> 21.303 + </figure> 21.304 + 21.305 + <dt><dfn id="flex-none">''none''</dfn> 21.306 + <dd> 21.307 + <p>The keyword 'none' computes to ''0 0 auto''. 21.308 + </dl> 21.309 + 21.310 <p> 21.311 - The <var><'flex-basis'></var> component sets the <dfn>flex basis</dfn>, 21.312 - which is the initial <i>main size</i> of the <i>flex item</i>, 21.313 - before free space is distributed according to the flex ratios. 21.314 - If omitted, the <i>flex basis</i> defaults to ''0%''. 21.315 - <span class='note'>Note that this is different from the initial value of 'flex-basis', which is ''auto''.</span> 21.316 - Zero values for the <var><'flex-basis'></var> component must be specified with a unit. 21.317 - Unitless zero will either be interpreted as one of the flex ratios, 21.318 - or will make the declaration invalid. 21.319 - 21.320 - <p> 21.321 - The <var><'flex-grow'></var> and <var><'flex-shrink'></var> components 21.322 - set the <dfn>flex grow ratio</dfn> and <dfn>flex shrink ratio</dfn>, 21.323 - which determine how much the <i>flex item</i> will grow or shrink 21.324 - relative to the rest of the <i>flex items</i> in the flex container 21.325 - when free space is distributed. 21.326 - When omitted, they are set to ''1''. 21.327 - <span class='note'>Note that this is different from the initial value of 'flex-grow', which is ''0''.</span> 21.328 - 21.329 - <p> 21.330 - The keyword 'none' computes to ''0 0 auto''. 21.331 - 21.332 - <figure> 21.333 - <img src='images/rel-vs-abs-flex.svg' width='504' height='240'> 21.334 - <figcaption> 21.335 - A diagram showing the difference between "absolute" flex 21.336 - (starting from a basis of zero) 21.337 - and "relative" flex 21.338 - (starting from a basis of the item's content size). 21.339 - </figcaption> 21.340 - </figure> 21.341 - 21.342 - 21.343 -<h3 id='flex-examples'> 21.344 + The initial values of the 'flex' components are equivalent to <a href="#flex-initial">''flex: 0 1 auto''</a>. 21.345 + <p class="note"> 21.346 + Note that the initial values of 'flex-grow' and 'flex-basis' 21.347 + are different from their defaults when omitted in the 'flex' shorthand. 21.348 + This so that the 'flex' shorthand can better accommodate the most <a href="#flex-common">common cases</a>. 21.349 + 21.350 +<h3 id='flex-common'> 21.351 Common Values of 'flex'</h3> 21.352 21.353 <p><em>This section is informative.</em> 21.354 @@ -1459,41 +1538,40 @@ 21.355 The list below summarizes the effects of the most common 'flex' values: 21.356 21.357 <dl> 21.358 + <dt id="flex-initial">''flex: 0 auto'' 21.359 <dt>''flex: initial'' 21.360 <dd> 21.361 - Equivalent to ''flex: 0 1 auto''. 21.362 - The value sets the size of the item according to the 'width'/'height' properties 21.363 - and makes the flex item inflexible when there is positive free space, 21.364 + Equivalent to ''flex: 0 1 auto''. (This is the initial value.) 21.365 + Sizes the item based on the 'width'/'height' properties. 21.366 + (If the item's <i>main size property</i> computes to ''auto'', 21.367 + this will size the flex item based on its contents.) 21.368 + Makes the flex item inflexible when there is positive free space, 21.369 but allows it to shrink to its <a href="#min-size-auto">minimum</a> when there is insufficient space. 21.370 - (If the 'width'/'height' used as the <i>flex basis</i> computes to ''auto'', 21.371 - this will size the flex item based on its contents.) 21.372 - The alignment properties or ''auto'' margins may be used to align flex items within the flex container. 21.373 + The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins">''auto'' margins</a> 21.374 + can be used to align flex items along the <i>main axis</i>. 21.375 21.376 <dt>''flex: auto'' 21.377 <dd> 21.378 Equivalent to ''flex: 1 1 auto''. 21.379 - This value makes the flex item flexible, 21.380 - and sets the <i>flex basis</i> according to the 'width'/'height' properties. 21.381 - If all items are either ''flex: auto'' or ''flex: none'', 21.382 - any free space after the items have been sized will be distributed evenly to the items with ''flex: auto''. 21.383 + Sizes the item based on the 'width'/'height' properties, 21.384 + but makes them fully flexible, so that they absorb any free space along the <i>main axis</i>. 21.385 + If all items are either ''flex: auto'', ''flex: initial'', or ''flex: none'', 21.386 + any positive free space after the items have been sized will be distributed evenly to the items with ''flex: auto''. 21.387 21.388 <dt>''flex: none'' 21.389 <dd> 21.390 Equivalent to ''flex: 0 0 auto''. 21.391 - This value makes the flex item inflexible, 21.392 - and sets the size of the item according to the 'width'/'height' properties. 21.393 - To size things normally but still use the <a href="#alignment">alignment abilities</a> of flex layout, 21.394 - set all the flex items to ''flex: none'' 21.395 - and then use ''auto'' margins or the alignment properties. 21.396 - This is similar to ''initial'', 21.397 + This value sizes the item according to the 'width'/'height' properties, 21.398 + but makes the flex item fully inflexible. 21.399 + This is similar to <a href="#flex-initial">''initial''</a>, 21.400 except that flex items are not allowed to shrink, 21.401 even in overflow situations. 21.402 21.403 <dt>''flex: <positive-number>'' 21.404 <dd> 21.405 - Equivalent to ''flex: <positive-number> 1 0%''. 21.406 - This value makes the flex item flexible, 21.407 - and sets the <i>flex basis</i> to zero, resulting in an item that receives the specified proportion of the free space in the flex container. 21.408 + Equivalent to ''flex: <positive-number> 1 0px''. 21.409 + Makes the flex item flexible and sets the <i>flex basis</i> to zero, 21.410 + resulting in an item that receives the specified proportion of the free space in the flex container. 21.411 If all items in the flex container use this pattern, 21.412 their sizes will be proportional to the specified flex ratio. 21.413 </dl> 21.414 @@ -1502,18 +1580,19 @@ 21.415 By default, flex items won't shrink below their minimum content size 21.416 (the length of the longest word or fixed-size element). 21.417 To change this, set the 'min-width' or 'min-height' property. 21.418 + (See <a href="#min-size-auto">Implied Minimum Size of Flex Items</a>.) 21.419 21.420 <h3 id='flex-components'> 21.421 Components of Flexibility</h3> 21.422 21.423 <p> 21.424 - Individual components of flexibility can be controlled by separate properties. 21.425 + Individual components of flexibility can be controlled by independent longhand properties. 21.426 21.427 <p class='note'> 21.428 Authors are encouraged to control flexibility using the 'flex' shorthand 21.429 rather than with component properties, 21.430 as the shorthand correctly resets any unspecified components 21.431 - to accommodate common uses. 21.432 + to accommodate <a href="#flex-common">common uses</a>. 21.433 21.434 <h4 id='flex-grow-property'> 21.435 The 'flex-grow' property</h4> 21.436 @@ -1595,7 +1674,7 @@ 21.437 <table class=propdef> 21.438 <tr> 21.439 <th>Name: 21.440 - <td><dfn>flex-basis</dfn> 21.441 + <td><dfn id="flex-basis-propdef">flex-basis</dfn> 21.442 <tr> 21.443 <th><a href="#values">Value</a>: 21.444 <td><var><'width'></var> 21.445 @@ -1628,22 +1707,16 @@ 21.446 <p> 21.447 The 'flex-basis' property sets the <i>flex basis</i>. 21.448 Negative lengths are invalid. 21.449 - 21.450 + 21.451 <p> 21.452 - If the computed value is ''auto'' on a <i>flex item</i>, 21.453 - the used value of 'flex-basis' is the used value of the element's <i>main size property</i>. 21.454 - Otherwise, 21.455 - the used value of 'flex-basis' is resolved the same way as the <i>main size property</i>. 21.456 - 21.457 - <p> 21.458 - As with 'width', percentage values of 'flex-basis' are resolved against 21.459 - the flex item's containing block, i.e. its flex container. 21.460 - And <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">as with 'width'</a> in [[!CSS21]], 21.461 + Except for <dfn title="flex-basis: auto" id="flex-basis-auto">''auto''</dfn>, 21.462 + which retrieves the value of the <i>main size property</i>, 21.463 + 'flex-basis' is resolved the same way as <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">'width'</a> in horizontal writing modes [[!CSS21]]: 21.464 + percentage values of 'flex-basis' are resolved against 21.465 + the flex item's containing block, i.e. its flex container, 21.466 + and 21.467 if that containing block's size is indefinite, the result is undefined. 21.468 - 21.469 - <p> 21.470 - Like the 'width' and 'height' properties, 21.471 - 'flex-basis' determines the size of the content box, 21.472 + Similarly, 'flex-basis' determines the size of the content box, 21.473 unless otherwise specified 21.474 such as by 'box-sizing' [[CSS3UI]]. 21.475 21.476 @@ -1680,7 +1753,7 @@ 21.477 The normative definition of how margins affect flex items is in the <a href="#layout-algorithm">Flex Layout Algorithm</a> section.</em> 21.478 21.479 <p> 21.480 - Margins on flex items that are ''auto'' have an effect very similar to auto margins in normal flow: 21.481 + Auto margins on flex items have an effect very similar to auto margins in block flow: 21.482 21.483 <ul> 21.484 <li> 21.485 @@ -1740,7 +1813,7 @@ 21.486 <div class='example'> 21.487 <p> 21.488 The figure below illustrates the difference in cross-axis alignment in overflow situations between 21.489 - using ''auto'' margins 21.490 + using <a href="#auto-margins">''auto'' margins</a> 21.491 and using the <a href='#align-items-property'>alignment properties</a>. 21.492 21.493 <figure> 21.494 @@ -1814,21 +1887,21 @@ 21.495 It also exerts some control over the alignment of items when they overflow the line. 21.496 21.497 <dl> 21.498 - <dt><dfn id='justify-content-flex-start'>''flex-start''</dfn> 21.499 + <dt><dfn id='justify-flex-start'>''flex-start''</dfn> 21.500 <dd> 21.501 <i>Flex items</i> are packed toward the start of the line. 21.502 The <i>main-start</i> margin edge of the first <i>flex item</i> on the line 21.503 is placed flush with the <i>main-start</i> edge of the line, 21.504 and each subsequent <i>flex item</i> is placed flush with the preceding item. 21.505 21.506 - <dt><dfn id='justify-content-flex-end'>''flex-end''</dfn> 21.507 + <dt><dfn id='justify-flex-end'>''flex-end''</dfn> 21.508 <dd> 21.509 <i>Flex items</i> are packed toward the end of the line. 21.510 The <i>main-end</i> margin edge of the last <i>flex item</i> 21.511 is placed flush with the <i>main-end</i> edge of the line, 21.512 and each preceding <i>flex item</i> is placed flush with the subsequent item. 21.513 21.514 - <dt><dfn id='justify-content-center'>''center''</dfn> 21.515 + <dt><dfn id='justify-center'>''center''</dfn> 21.516 <dd> 21.517 <i>Flex items</i> are packed toward the center of the line. 21.518 The <i>flex items</i> on the line are placed flush with each other 21.519 @@ -1838,12 +1911,12 @@ 21.520 (If the leftover free-space is negative, 21.521 the <i>flex items</i> will overflow equally in both directions.) 21.522 21.523 - <dt><dfn id='justify-content-space-between'>''space-between''</dfn> 21.524 + <dt><dfn id='justify-space-between'>''space-between''</dfn> 21.525 <dd> 21.526 <i>Flex items</i> are evenly distributed in the line. 21.527 If the leftover free-space is negative 21.528 or there is only a single <i>flex item</i> on the line, 21.529 - this value is identical to ''flex-start''. 21.530 + this value is identical to <a href="#justify-flex-start">''flex-start''</a>. 21.531 Otherwise, 21.532 the <i>main-start</i> margin edge of the first <i>flex item</i> on the line 21.533 is placed flush with the <i>main-start</i> edge of the line, 21.534 @@ -1852,13 +1925,13 @@ 21.535 and the remaining <i>flex items</i> on the line are distributed 21.536 so that the empty space between any two adjacent items is the same. 21.537 21.538 - <dt><dfn id='justify-content-space-around'>''space-around''</dfn> 21.539 + <dt><dfn id='justify-space-around'>''space-around''</dfn> 21.540 <dd> 21.541 <i>Flex items</i> are evenly distributed in the line, 21.542 with half-size spaces on either end. 21.543 If the leftover free-space is negative or 21.544 there is only a single <i>flex item</i> on the line, 21.545 - this value is identical to ''center''. 21.546 + this value is identical to <a href="#justify-center">''center''</a>. 21.547 Otherwise, the <i>flex items</i> on the line are distributed 21.548 such that the empty space between any two adjacent <i>flex items</i> on the line is the same, 21.549 and the empty space before the first and after the last <i>flex items</i> on the line are half the size of the other empty spaces. 21.550 @@ -1943,33 +2016,33 @@ 21.551 'align-self' always matches the value of 'align-items' on their associated flex container.) 21.552 21.553 <p> 21.554 - A value of <dfn id="align-self-auto">''auto''</dfn> for 'align-self' 21.555 + A value of <dfn title="align-self: auto" id="align-self-auto">''auto''</dfn> for 'align-self' 21.556 computes to the value of 'align-items' on the element's parent, 21.557 or <a href='#align-items-stretch'>''stretch''</a> if the element has no parent. 21.558 The alignments are defined as: 21.559 21.560 <dl> 21.561 - <dt><dfn id="align-items-flex-start">''flex-start''</dfn> 21.562 + <dt><dfn id="align-flex-start">''flex-start''</dfn> 21.563 <dd> 21.564 The <i>cross-start</i> margin edge of the <i>flex item</i> 21.565 is placed flush with the <i>cross-start</i> edge of the line. 21.566 21.567 - <dt><dfn id="align-items-flex-end">''flex-end''</dfn> 21.568 + <dt><dfn id="align-flex-end">''flex-end''</dfn> 21.569 <dd> 21.570 The <i>cross-end</i> margin edge of the <i>flex item</i> 21.571 is placed flush with the <i>cross-end</i> edge of the line. 21.572 21.573 - <dt><dfn id="align-items-center">''center''</dfn> 21.574 + <dt><dfn id="align-center">''center''</dfn> 21.575 <dd> 21.576 The <i>flex item</i>'s margin box is centered in the <i>cross axis</i> within the line. 21.577 (If the <i>cross size</i> of the flex line is less than that of the <i>flex item</i>, 21.578 it will overflow equally in both directions.) 21.579 21.580 - <dt><dfn id="align-items-baseline">''baseline''</dfn> 21.581 + <dt><dfn id="align-baseline">''baseline''</dfn> 21.582 <dd> 21.583 <p> 21.584 If the <i>flex item</i>'s inline axis is the same as the <i>cross axis</i>, 21.585 - this value is identical to ''flex-start''. 21.586 + this value is identical to <a href="#align-flex-start">''flex-start''</a>. 21.587 21.588 <p> 21.589 Otherwise, 21.590 @@ -1980,10 +2053,10 @@ 21.591 is placed flush against the <i>cross-start</i> edge of the line. 21.592 21.593 21.594 - <dt><dfn id="align-items-stretch">''stretch''</dfn> 21.595 + <dt><dfn id="align-stretch">''stretch''</dfn> 21.596 <dd> 21.597 <p> 21.598 - If the <i>cross size property</i> of the <i>flex item</i> is ''auto'', 21.599 + If the <i>cross size property</i> of the <i>flex item</i> is ''auto'', 21.600 its used value is the length necessary to make the <i>cross size</i> of the item's margin box as close to the same size as the line as possible, 21.601 while still respecting the constraints imposed by 'min/max-width/height'. 21.602 21.603 @@ -2074,7 +2147,7 @@ 21.604 Lines are evenly distributed in the flex container. 21.605 If the leftover free-space is negative 21.606 or there is only a single line in the flex container, 21.607 - this value is identical to ''flex-start''. 21.608 + this value is identical to <a href="#align-content-flex-start">''flex-start''</a>. 21.609 Otherwise, 21.610 the <i>cross-start</i> edge of the first line in the flex container 21.611 is placed flush with the <i>cross-start</i> content edge of the flex container, 21.612 @@ -2089,7 +2162,7 @@ 21.613 with half-size spaces on either end. 21.614 If the leftover free-space is negative 21.615 or there is only a single line in the flex container, 21.616 - this value is identical to ''center''. 21.617 + this value is identical to <a href="#align-content-center">''center''</a>. 21.618 Otherwise, the lines in the flex container are distributed 21.619 such that the empty space between any two adjacent lines is the same, 21.620 and the empty space before the first and after the last lines in the flex container 21.621 @@ -2099,7 +2172,7 @@ 21.622 <dd> 21.623 Lines stretch to take up the remaining space. 21.624 If the leftover free-space is negative, 21.625 - this value is identical to ''flex-start''. 21.626 + this value is identical to <a href="#align-content-flex-start">''flex-start''</a>. 21.627 Otherwise, 21.628 the free-space is split equally between all of the lines, 21.629 increasing their cross size. 21.630 @@ -2191,6 +2264,8 @@ 21.631 <dd> 21.632 <p> 21.633 The inline-axis baseline of a table box is the baseline of its first row. 21.634 + However, when calculating the baseline of an inline-block, 21.635 + table boxes must be skipped. 21.636 21.637 <p> 21.638 The block-axis baseline of a table is undefined. 21.639 @@ -2421,7 +2496,7 @@ 21.640 <ol> 21.641 <li> 21.642 Collect all the flex items whose inline-axis is parallel to the main-axis, 21.643 - whose 'align-self' is ''baseline'', 21.644 + whose 'align-self' is <a href="#align-baseline">''baseline''</a>, 21.645 and whose cross-axis margins are both non-''auto''. 21.646 Find the largest of the distances between each item's baseline and its hypothetical outer cross-start edge, 21.647 and the largest of the distances between each item's baseline and its hypothetical outer cross-end edge, 21.648 @@ -3109,30 +3184,29 @@ 21.649 21.650 <p>Thanks for feedback and contributions to 21.651 21.652 -Andrew Fedoniouk, 21.653 +Erik Anderson, 21.654 +Tony Chang, 21.655 +Phil Cupp, 21.656 Arron Eicholz, 21.657 James Elmore, 21.658 +Andrew Fedoniouk, 21.659 +Brian Heuston, 21.660 +Shinichiro Hamaji, 21.661 +Daniel Holbert, 21.662 Ben Horst, 21.663 -Boris Zbarsky, 21.664 +John Jansen, 21.665 Brad Kemper, 21.666 -Brian Heuston, 21.667 +Kang-hao Lu, 21.668 +Markus Mielke, 21.669 +Robert O'Callahan, 21.670 +Christoph Päper, 21.671 +Ning Rogers, 21.672 +Peter Salas, 21.673 +Morten Stenshorne, 21.674 Christian Stockwell, 21.675 -Christoph Päper, 21.676 -Daniel Holbert, 21.677 -Erik Anderson, 21.678 +Ojan Vafai, 21.679 Eugene Veselov, 21.680 -Fantasai, 21.681 -John Jansen, 21.682 -Markus Mielke, 21.683 -Ning Rogers, 21.684 -Ojan Vafai, 21.685 -Peter Salas, 21.686 -Phil Cupp, 21.687 -Robert O'Callahan, 21.688 -Rossen Atanassov, 21.689 -Shinichiro Hamaji, 21.690 -Tony Chang. 21.691 - 21.692 +Boris Zbarsky. 21.693 21.694 21.695 21.696 @@ -3153,10 +3227,8 @@ 21.697 <li>All children of a flex container now become flex items (not just those that are not ''inline''). 21.698 <li>Defined <a href="#painting">painting behavior of flex items</a>. 21.699 <li>Made 'z-index' automatically apply to flex items. 21.700 -<!-- 21.701 - <li>Defined which properties affect placeholders. 21.702 + <li>Changed how absolutely-positioned flex container children are handled so that they don't impact layout. 21.703 <li>Defined which properties apply to the table wrapper box vs. the table box of a table element. 21.704 ---> 21.705 <li>Defined interaction of 'order' and <a href="http://www.w3.org/TR/css3-speech/">speech</a>, <a href="http://www.w3.org/TR/css3-ui/#nav-index">'nav-index'</a>. 21.706 <li>Corrected errors in the <a href="#layout-algorithm">flex layout algorithm</a>. 21.707 <li>Added or rewrote many examples to make them more realistic and more interesting.
22.1 --- a/css3-flexbox/issues-lc-2012.html Tue Jul 31 14:04:38 2012 -0700 22.2 +++ b/css3-flexbox/issues-lc-2012.html Wed Aug 08 09:06:37 2012 -0700 22.3 @@ -125,6 +125,7 @@ 22.4 Comment: <a href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0077.html">http://lists.w3.org/Archives/Public/www-style/2012Jul/0077.html</a> 22.5 Response: <a href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0095.html">http://lists.w3.org/Archives/Public/www-style/2012Jul/0095.html</a> 22.6 Closed: Rejected 22.7 +Verified: <a href="http://lists.w3.org/Archives/Public/www-archive/2012Aug/0003.html">http://lists.w3.org/Archives/Public/www-archive/2012Aug/0003.html</a> 22.8 </pre> 22.9 <pre class="a" id="issue-11"> 22.10 Issue 11. <a href="#issue-11">#</a> 22.11 @@ -161,6 +162,7 @@ 22.12 Comment: <a href="http://www.w3.org/mid/4FF46931.30407@csail.mit.edu">http://www.w3.org/mid/4FF46931.30407@csail.mit.edu</a> 22.13 Response: <a href="http://www.w3.org/mid/4FF50153.8040801@inkedblade.net">http://www.w3.org/mid/4FF50153.8040801@inkedblade.net</a> 22.14 Closed: Rejected 22.15 +Verified: <a href="http://lists.w3.org/Archives/Public/www-archive/2012Aug/0003.html">http://lists.w3.org/Archives/Public/www-archive/2012Aug/0003.html</a> 22.16 </pre> 22.17 <pre class="a" id="issue-15"> 22.18 Issue 15. <a href="#issue-15">#</a> 22.19 @@ -184,7 +186,7 @@ 22.20 Comment: <a href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0167.html">http://lists.w3.org/Archives/Public/www-style/2012Jul/0167.html</a> 22.21 Closed: Accepted 22.22 </pre> 22.23 -<pre class="a open" id="issue-18"> 22.24 +<pre class="a" id="issue-18"> 22.25 Issue 18. <a href="#issue-18">#</a> 22.26 Summary: Absolutely-positioned flex items should not affect layout in flex container 22.27 From: John Hax
23.1 --- a/css3-flexbox/issues-lc-2012.txt Tue Jul 31 14:04:38 2012 -0700 23.2 +++ b/css3-flexbox/issues-lc-2012.txt Wed Aug 08 09:06:37 2012 -0700 23.3 @@ -31,7 +31,7 @@ 23.4 Summary: order might be too generic of a name 23.5 From: fantasai 23.6 Comment: http://www.w3.org/mid/4FBD8B99.4090101@inkedblade.net 23.7 -Open 23.8 +Closed: Rejected 23.9 ---- 23.10 Issue 5. 23.11 Summary: Paint flex items atomically? 23.12 @@ -79,6 +79,7 @@ 23.13 Comment: http://lists.w3.org/Archives/Public/www-style/2012Jul/0077.html 23.14 Response: http://lists.w3.org/Archives/Public/www-style/2012Jul/0095.html 23.15 Closed: Rejected 23.16 +Verified: http://lists.w3.org/Archives/Public/www-archive/2012Aug/0003.html 23.17 ---- 23.18 Issue 11. 23.19 Summary: Clarifications to Chapter 4 23.20 @@ -111,6 +112,7 @@ 23.21 Comment: http://www.w3.org/mid/4FF46931.30407@csail.mit.edu 23.22 Response: http://www.w3.org/mid/4FF50153.8040801@inkedblade.net 23.23 Closed: Rejected 23.24 +Verified: http://lists.w3.org/Archives/Public/www-archive/2012Aug/0003.html 23.25 ---- 23.26 Issue 15. 23.27 Summary: sign error in algorithm
24.1 --- a/css3-grid-layout/Overview.html Tue Jul 31 14:04:38 2012 -0700 24.2 +++ b/css3-grid-layout/Overview.html Wed Aug 08 09:06:37 2012 -0700 24.3 @@ -1,3905 +1,3678 @@ 24.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 24.5 -"http://www.w3.org/TR/html4/strict.dtd"> 24.6 - 24.7 -<html lang=en> 24.8 - <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type> 24.9 - 24.10 - <title>CSS Grid Layout</title> 24.11 - <link href="../default.css" rel=stylesheet type="text/css"> 24.12 - <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 24.13 - type="text/css"> 24.14 - 24.15 - <style type="text/css"> 24.16 - .example { 24.17 - clear:both 24.18 - } 24.19 - 24.20 - th { 24.21 - text-align:left 24.22 - } 24.23 - 24.24 - .pseudo-code { 24.25 - font-family:monospace 24.26 - } 24.27 - .pseudo-code > ol { 24.28 - list-style-type:decimal 24.29 - } 24.30 - .pseudo-code > ol > li > ol { 24.31 - list-style-type:lower-latin 24.32 - } 24.33 - .pseudo-code > ol > li > ol > li > ol { 24.34 - list-style-type:lower-roman 24.35 - } 24.36 - .pseudo-code ul { 24.37 - list-style-type:disc 24.38 - } 24.39 - 24.40 - dd > p:nth-child(1) { 24.41 - margin-top:0 24.42 - } 24.43 - </style> 24.44 - 24.45 - <body> 24.46 - <div class=head> <!--begin-logo--> 24.47 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 24.48 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 24.49 - 24.50 - <h1 class=title id=title>CSS Grid Layout</h1> 24.51 - 24.52 - <h2 class="no-num no-toc" id=longstatus-date-3-march-2012>Editor's Draft, 24.53 - 20 April 2012</h2> 24.54 - 24.55 - <dl> 24.56 - <dt>This version:</dt> 24.57 - <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-grid-layout-20120420/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120420/</a> --> 24.58 - 24.59 - <dd><a 24.60 - href="http://dev.w3.org/csswg/css3-grid-layout/">http://dev.w3.org/csswg/css3-grid-layout/</a> 24.61 - 24.62 - 24.63 - <dt>Latest version: 24.64 - 24.65 - <dd><a 24.66 - href="http://www.w3.org/TR/css3-grid-layout/">http://www.w3.org/TR/css3-grid-layout/</a> 24.67 - 24.68 - 24.69 - <dt>Editor's draft: 24.70 - 24.71 - <dd><a 24.72 - href="http://dev.w3.org/csswg/css3-grid-layout/">http://dev.w3.org/csswg/css3-grid-layout/</a> 24.73 - 24.74 - 24.75 - <dt>Previous version 24.76 - 24.77 - <dd><a 24.78 - href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/</a> 24.79 - 24.80 - <dt>Issues List: 24.81 - 24.82 - <dd><a 24.83 - href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Grid+Layout&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED">In 24.84 - Bugzilla</a> 24.85 - 24.86 - <dt>Discussion: 24.87 - 24.88 - <dd><a 24.89 - href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 24.90 - with subject line “<kbd>[css3-grid-layout] <var>… message 24.91 - topic …</var></kbd>” 24.92 - 24.93 - <dt>Editors: 24.94 - 24.95 - <dd><a href="mailto:alexmog@microsoft.com">Alex Mogilevsky</a>, Microsoft 24.96 - Corporation 24.97 - 24.98 - <dd><a href="mailto:pcupp@microsoft.com">Phil Cupp</a>, Microsoft 24.99 - Corporation 24.100 - 24.101 - <dd><a href="mailto:mmielke@microsoft.com">Markus Mielke</a>, Microsoft 24.102 - Corporation 24.103 - 24.104 - <dd><a href="mailto:daniel.glazman@disruptive-innovations.com">Daniel 24.105 - Glazman</a>, Disruptive Innovations 24.106 - </dl> 24.107 - <!--begin-copyright--> 24.108 - <p class=copyright><a 24.109 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 24.110 - rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 24.111 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 24.112 - href="http://www.csail.mit.edu/"><abbr 24.113 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 24.114 - href="http://www.ercim.eu/"><abbr 24.115 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 24.116 - <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 24.117 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 24.118 - <a 24.119 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 24.120 - and <a 24.121 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 24.122 - use</a> rules apply.</p> 24.123 - <!--end-copyright--> 24.124 - <hr title="Separator for header"> 24.125 - </div> 24.126 - 24.127 - <h2 class="no-num no-toc" id=abstract0>Abstract</h2> 24.128 - 24.129 - <div id=abstract> 24.130 - <p> Grid Layout contains features targeted at web application authors. The 24.131 - Grid can be used to achieve many different layouts. It excels at dividing 24.132 - up space for major regions of an application, or defining the 24.133 - relationship in terms of size, position, and layer between parts of a 24.134 - control built from HTML primitives.</p> 24.135 - 24.136 - <p> Like tables, the Grid enables an author to align elements into columns 24.137 - and rows, but unlike tables, the Grid doesn't have content structure, and 24.138 - thus enables a wide variety of layouts not possible with tables. For 24.139 - example, the children of the Grid can position themselves with <a 24.140 - href="#grid-line"><i>Grid lines</i></a> such that they overlap and layer 24.141 - similar to positioned elements.</p> 24.142 - 24.143 - <p> In addition, the absence of content structure in the Grid helps to 24.144 - manage changes to layout by using fluid and source order independent 24.145 - layout techniques. By combining media queries with the CSS properties 24.146 - that control layout of the Grid and its children, authors can adapt their 24.147 - layout to changes in device form factors, orientation, and available 24.148 - space, without needing to alter the semantic nature of their content.</p> 24.149 - </div> 24.150 - 24.151 - <h2 class="no-num no-toc" id=status-of-this-document>Status of This 24.152 - Document</h2> 24.153 - 24.154 - <p>This is a public copy of the editors' draft. It is provided for 24.155 - discussion only and may change at any moment. Its publication here does 24.156 - not imply endorsement of its contents by W3C. Don't cite this document 24.157 - other than as work in progress. 24.158 - 24.159 - <p> If you wish to make comments regarding this document, please send them 24.160 - to <a href="mailto:www-style@w3.org">www-style@w3.org</a> (<a 24.161 - href="mailto:www-style-request@w3.org?subject=subscribe">subscribe</a>, <a 24.162 - href="http://lists.w3.org/Archives/Public/www-style/">archives</a>). All 24.163 - feedback is welcome. 24.164 - 24.165 - <p>This document was produced by a group operating under the <a 24.166 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 24.167 - 2004 W3C Patent Policy</a>. W3C maintains a <a 24.168 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 24.169 - rel=disclosure>public list of any patent disclosures</a> made in 24.170 - connection with the deliverables of the group; that page also includes 24.171 - instructions for disclosing a patent. An individual who has actual 24.172 - knowledge of a patent which the individual believes contains <a 24.173 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 24.174 - Claim(s)</a> must disclose the information in accordance with <a 24.175 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 24.176 - 6 of the W3C Patent Policy</a>. 24.177 - 24.178 - <h2 class="no-num no-toc" id=table>Table of contents</h2> 24.179 - <!--begin-toc--> 24.180 - 24.181 - <ul class=toc> 24.182 - <li><a href="#dependencies-on-other-modules"><span class=secno>1. 24.183 - </span>Dependencies on other modules</a> 24.184 - 24.185 - <li><a href="#introduction0"><span class=secno>2. </span>Introduction</a> 24.186 - <ul class=toc> 24.187 - <li><a href="#basic-capabilities-of-the-grid"><span class=secno>2.1. 24.188 - </span>Basic Capabilities of the Grid</a> 24.189 - 24.190 - <li><a href="#adapting-layouts-to-available-space"><span 24.191 - class=secno>2.2. </span>Adapting Layouts to Available Space</a> 24.192 - 24.193 - <li><a href="#source-independence0"><span class=secno>2.3. </span>Source 24.194 - Independence</a> 24.195 - 24.196 - <li><a href="#grid-layering-of-elements0"><span class=secno>2.4. 24.197 - </span>Grid Layering of Elements</a> 24.198 - </ul> 24.199 - 24.200 - <li><a href="#core-concepts-of-the-grid"><span class=secno>3. </span>Core 24.201 - Concepts of the Grid</a> 24.202 - <ul class=toc> 24.203 - <li><a href="#grid-tracks"><span class=secno>3.1. </span>Grid Tracks</a> 24.204 - 24.205 - 24.206 - <li><a href="#grid-lines"><span class=secno>3.2. </span>Grid Lines</a> 24.207 - 24.208 - <li><a href="#grid-cells"><span class=secno>3.3. </span>Grid Cells</a> 24.209 - </ul> 24.210 - 24.211 - <li><a href="#grid-declaration0"><span class=secno>4. </span>Grid 24.212 - Declaration</a> 24.213 - 24.214 - <li><a href="#grid-items0"><span class=secno>5. </span>Grid Items</a> 24.215 - 24.216 - <li><a href="#defining-grid-rows-columns-and-lines0"><span class=secno>6. 24.217 - </span>Defining Grid Rows, Columns and Lines</a> 24.218 - <ul class=toc> 24.219 - <li><a href="#grid-rows-and-columns0"><span class=secno>6.1. </span>Grid 24.220 - Rows and Columns</a> 24.221 - 24.222 - <li><a href="#named-grid-lines"><span class=secno>6.2. </span>Named Grid 24.223 - Lines</a> 24.224 - 24.225 - <li><a href="#starting-and-ending-grid-lines"><span class=secno>6.3. 24.226 - </span>Starting and Ending Grid Lines</a> 24.227 - 24.228 - <li><a href="#repeating-columns-and-rows"><span class=secno>6.4. 24.229 - </span>Repeating Columns and Rows</a> 24.230 - 24.231 - <li><a href="#grid-columns-and-grid-rows-properties"><span 24.232 - class=secno>6.5. </span>Grid-columns and Grid-rows Properties</a> 24.233 - <ul class=toc> 24.234 - <li><a href="#fraction-values-fr0"><span class=secno>6.5.1. 24.235 - </span>Fraction Values: ‘<code 24.236 - class=property>fr</code>’</a> 24.237 - 24.238 - <li><a href="#computed-values-for-grid-rows-and-grid-c"><span 24.239 - class=secno>6.5.2. </span>Computed Values for Grid-rows and 24.240 - Grid-columns</a> 24.241 - </ul> 24.242 - 24.243 - <li><a href="#defining-grid-cells-with-a-template0"><span 24.244 - class=secno>6.6. </span>Defining Grid Cells with a Template</a> 24.245 - </ul> 24.246 - 24.247 - <li><a href="#placing-grid-items"><span class=secno>7. </span>Placing Grid 24.248 - Items</a> 24.249 - <ul class=toc> 24.250 - <li><a href="#anonymous-grid-cells0"><span class=secno>7.1. 24.251 - </span>Anonymous Grid Cells</a> 24.252 - 24.253 - <li><a href="#grid-row-span-and-grid-column-span0"><span 24.254 - class=secno>7.2. </span>Grid-row-span and Grid-column-span</a> 24.255 - 24.256 - <li><a href="#implicit-columns-and-rows"><span class=secno>7.3. 24.257 - </span>Implicit Columns and Rows</a> 24.258 - <ul class=toc> 24.259 - <li><a href="#defining-a-default-size-for-implicit-col"><span 24.260 - class=secno>7.3.1. </span>Defining a Default Size for Implicit 24.261 - Columns and Rows</a> 24.262 - </ul> 24.263 - 24.264 - <li><a href="#automatic-placement-of-grid-items0"><span class=secno>7.4. 24.265 - </span>Automatic Placement of Grid Items</a> 24.266 - <ul class=toc> 24.267 - <li><a href="#automatic-grid-item-placement-algorithm0"><span 24.268 - class=secno>7.4.1. </span>Automatic Grid Item Placement Algorithm</a> 24.269 - 24.270 - </ul> 24.271 - </ul> 24.272 - 24.273 - <li><a href="#grid-item-alignment0"><span class=secno>8. </span>Grid Item 24.274 - Alignment</a> 24.275 - <ul class=toc> 24.276 - <li><a href="#calculating-the-size-of-grid-items"><span class=secno>8.1. 24.277 - </span>Calculating the Size of Grid Items</a> 24.278 - </ul> 24.279 - 24.280 - <li><a href="#drawing-order-of-grid-items0"><span class=secno>9. 24.281 - </span>Drawing Order of Grid Items</a> 24.282 - 24.283 - <li><a href="#calculating-the-size-of-grid-tracks"><span class=secno>10. 24.284 - </span>Calculating the Size of Grid Tracks</a> 24.285 - <ul class=toc> 24.286 - <li><a href="#definition-of-terms-for-use-in-calculati"><span 24.287 - class=secno>10.1. </span>Definition of Terms for use in Calculating 24.288 - Grid Track Sizes</a> 24.289 - 24.290 - <li><a href="#grid-track-sizing-algorithm0"><span class=secno>10.2. 24.291 - </span>Grid Track Sizing Algorithm</a> 24.292 - </ul> 24.293 - 24.294 - <li><a href="#shrink-to-fit-behavior-of-grid-elements0"><span 24.295 - class=secno>11. </span>Shrink-to-fit Behavior of Grid Elements</a> 24.296 - 24.297 - <li class=no-num><a href="#changes-from-previous-version">Changes from 24.298 - Previous Working Draft</a> 24.299 - <ul class=toc> 24.300 - <li class=no-num><a 24.301 - href="#changes-from-previous-version-12-april-2012">Changes made in 12 24.302 - April 2012 Editor's Draft</a> 24.303 - </ul> 24.304 - 24.305 - <li class=no-num><a href="#acknowledgements">Acknowledgements</a> 24.306 - 24.307 - <li class=no-num><a href="#references"> References</a> 24.308 - <ul class=toc> 24.309 - <li class=no-num><a href="#normative-references"> Normative 24.310 - references</a> 24.311 - 24.312 - <li class=no-num><a href="#other-references"> Other references</a> 24.313 - </ul> 24.314 - 24.315 - <li class=no-num><a href="#index"> Index</a> 24.316 - 24.317 - <li class=no-num><a href="#property-index"> Property index</a> 24.318 - </ul> 24.319 - <!--end-toc--> 24.320 - 24.321 - <div class=section id=dependencies> 24.322 - <h2 id=dependencies-on-other-modules><span class=secno>1. 24.323 - </span>Dependencies on other modules</h2> 24.324 - 24.325 - <p> This CSS3 module has normative references to the following other CSS3 24.326 - modules:</p> 24.327 - 24.328 - <ul> 24.329 - <li><a href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> 24.330 - 24.331 - <li><a href="#CSS3-WRITING-MODES" 24.332 - rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> 24.333 - </ul> 24.334 - 24.335 - <p> This CSS3 module has non-normative (informative) references to the 24.336 - following other CSS3 modules:</p> 24.337 - 24.338 - <ul> 24.339 - <li><a href="#CSS3LAYOUT" 24.340 - rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a> 24.341 - </ul> 24.342 - </div> 24.343 - <!--End section: Dependencies --> 24.344 - 24.345 - <div class=section id=Introduction> 24.346 - <h2 id=introduction0><span class=secno>2. </span>Introduction</h2> 24.347 - 24.348 - <div class=section id=basic-capabilities> 24.349 - <h3 id=basic-capabilities-of-the-grid><span class=secno>2.1. </span>Basic 24.350 - Capabilities of the Grid</h3> 24.351 - 24.352 - <div class=sidefigure> <img 24.353 - alt="Image: Application layout example requiring horizontal and vertical alignment." 24.354 - class=figure src="images/basic-form.png"> 24.355 - <p class=caption>Application layout example requiring horizontal and 24.356 - vertical alignment.</p> 24.357 - </div> 24.358 - 24.359 - <p> As websites evolved from simple documents into complex, interactive 24.360 - applications, tools for document layout, e.g. floats, were not 24.361 - necessarily well suited for application layout. By using a combination 24.362 - of tables, JavaScript, or careful measurements on floated elements, 24.363 - authors discovered workarounds to achieve desired layouts. Layouts that 24.364 - adapted to the available space were often brittle and resulted in 24.365 - counter-intuitive behavior as space became constrained. As an 24.366 - alternative, authors of many web applications opted for a fixed layout 24.367 - that cannot take advantage of changes in the available rendering space 24.368 - on a screen.</p> 24.369 - 24.370 - <p> The layout capabilities of the Grid address these problems. The Grid 24.371 - provides a mechanism for authors to divide available space for layout 24.372 - into columns and rows using a set of predictable sizing behaviors. 24.373 - Authors can then precisely position and size the building block elements 24.374 - of their application by referencing the <a href="#grid-line"><i>Grid 24.375 - lines</i></a> between the columns and rows, or by defining and 24.376 - referencing a <a href="#grid-cell-concept"><i>Grid cell</i></a>, which 24.377 - is a rectangular space covering an intersection of columns and rows. 24.378 - Figure 1 illustrates a basic layout which can be achieved with the Grid. 24.379 - </p> 24.380 - <!--End Section: Basic Capabilities of the Grid--></div> 24.381 - 24.382 - <div class=section id=adapting-to-available-space> 24.383 - <h3 id=adapting-layouts-to-available-space><span class=secno>2.2. 24.384 - </span>Adapting Layouts to Available Space</h3> 24.385 - 24.386 - <div class=sidefigure> 24.387 - <p> <img 24.388 - alt="Image: Five grid items arranged according to content size and available space." 24.389 - src="images/game-smaller.png"></p> 24.390 - 24.391 - <p class=caption>Five grid items arranged according to content size and 24.392 - available space.</p> 24.393 - </div> 24.394 - 24.395 - <div class=sidefigure> 24.396 - <p> <img 24.397 - alt="Image: Growth in the grid due to an increase in available space." 24.398 - src="images/game-larger.png"></p> 24.399 - 24.400 - <p class=caption>Growth in the grid due to an increase in available 24.401 - space.</p> 24.402 - </div> 24.403 - 24.404 - <p> The <a href="#grid-element"><i>Grid element</i></a> can be used to 24.405 - intelligently reflow elements within a webpage. Figure 2 represents a 24.406 - game with five major areas in the layout: the game title, stats area, 24.407 - game board, score area, and control area. The author's intent is to 24.408 - divide the space for the game such that: 24.409 - 24.410 - <ul> 24.411 - <li>The stats area always appears immediately under the game title. 24.412 - 24.413 - <li>The game board appears to the right of the stats and title. 24.414 - 24.415 - <li>The top of the game title and the game board should always align. 24.416 - 24.417 - <li>The bottom of the game board and the stats area align when the game 24.418 - has reached its minimum height, but otherwise the game board will 24.419 - stretch to take advantage of all the screen real-estate available to 24.420 - it. 24.421 - 24.422 - <li>The score area should align into the column created by the game and 24.423 - stats area, while the controls are centered under the board. 24.424 - </ul> 24.425 - 24.426 - <p> As an alternative to using script to control the absolute position, 24.427 - width, and height of all elements, the author can use the <a 24.428 - href="#grid-element"><i>Grid element</i></a>, as shown in Figure 3. The 24.429 - following example shows how an author might achieve all the sizing, 24.430 - placement, and alignment rules declaratively.</p> 24.431 - 24.432 - <p> Note that there are multiple ways to specify the structure of the <a 24.433 - href="#grid-element"><i>Grid element</i></a> and to position and size <a 24.434 - href="#grid-item"><i>Grid items</i></a>, each optimized for different 24.435 - scenarios. This example illustrates one that an author may use to define 24.436 - the position and space for each <a href="#grid-item"><i>Grid 24.437 - item</i></a> using the ‘<a href="#grid-rows"><code 24.438 - class=property>grid-rows</code></a>’ and ‘<a 24.439 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.440 - properties of the <a href="#grid-element"><i>Grid element</i></a>, and 24.441 - the ‘<a href="#grid-row"><code 24.442 - class=property>grid-row</code></a>’, ‘<a 24.443 - href="#grid-column"><code class=property>grid-column</code></a>’, 24.444 - ‘<a href="#grid-row-span"><code 24.445 - class=property>grid-row-span</code></a>’ and ‘<a 24.446 - href="#grid-column-span"><code 24.447 - class=property>grid-column-span</code></a>’ properties on each <a 24.448 - href="#grid-item"><i>Grid item</i></a>.</p> 24.449 - 24.450 - <pre class=example><style type="text/css"> 24.451 - #grid { 24.452 - display: grid; 24.453 - 24.454 - /* Two columns: the first sized to content, the second receives the remaining space, */ 24.455 - /* but is never smaller than the minimum size of the board or the game controls, which */ 24.456 - /* occupy this column. */ 24.457 - grid-columns: auto minmax(min-content, 1fr); 24.458 - 24.459 - /* Three rows: the first and last sized to content, the middle row receives the */ 24.460 - /* remaining space, but is never smaller than the minimum height of the board or stats */ 24.461 - /* areas. */ 24.462 - grid-rows: auto minmax(min-content, 1fr) auto 24.463 - } 24.464 - 24.465 - /* Each part of the game is positioned between grid lines by referencing the starting grid */ 24.466 - /* line and then specifying, if more than one, the number of rows or columns spanned to */ 24.467 - /* determine the ending grid line, which establishes bounds for the part. */ 24.468 - #title { grid-column: 1; grid-row: 1 } 24.469 - #score { grid-column: 1; grid-row: 3 } 24.470 - #stats { grid-column: 1; grid-row: 2; grid-row-align: start } 24.471 - #board { grid-column: 2; grid-row: 1; grid-row-span: 2 } 24.472 - #controls { grid-column: 2; grid-row: 3; grid-column-align: center } 24.473 -</style> 24.474 - 24.475 -<div id="grid"> 24.476 - <div id="title">Game Title</div> 24.477 - <div id="score">Score</div> 24.478 - <div id="stats">Stats</div> 24.479 - <div id="board">Board</div> 24.480 - <div id="controls">Controls</div> 24.481 -</div></pre> 24.482 - <!--End Section: Adapting to Available Space for Layout--></div> 24.483 - 24.484 - <div class=section id=source-independence> 24.485 - <h3 id=source-independence0><span class=secno>2.3. </span>Source 24.486 - Independence</h3> 24.487 - 24.488 - <div class=sidefigure> 24.489 - <p> <img alt="Image: An arrangement suitable for portrait orientation." 24.490 - src="images/game-portrait.png"></p> 24.491 - 24.492 - <p class=caption>An arrangement suitable for ‘<code 24.493 - class=css>portrait</code>’ orientation.</p> 24.494 - </div> 24.495 - 24.496 - <div class=sidefigure> 24.497 - <p> <img alt="Image: An arrangment suitable for landscape orientation." 24.498 - src="images/game-landscape.png"></p> 24.499 - 24.500 - <p class=caption>An arrangment suitable for ‘<code 24.501 - class=css>landscape</code>’ orientation.</p> 24.502 - </div> 24.503 - 24.504 - <p> Continuing the prior example, the author also wants the game to adapt 24.505 - to the space available on traditional computer monitors, handheld 24.506 - devices, or tablet computers. Also, the game should optimize the 24.507 - placement of the components when viewed either in landscape or portrait 24.508 - orientation (Figures 4 and 5). By combining the CSS markup for the <a 24.509 - href="#grid-element"><i>Grid element</i></a> with media queries, the 24.510 - author is able to use the same semantic markup, but rearranged 24.511 - independent of its source order, to achieve the desired layout in both 24.512 - orientations.</p> 24.513 - 24.514 - <p> The following example leverages the <a href="#grid-element"><i>Grid 24.515 - element</i></a>’s ability to name the space which will be occupied 24.516 - by a <a href="#grid-item"><i>Grid item</i></a>. This allows the author 24.517 - to avoid rewriting rules for <a href="#grid-item"><i>Grid items</i></a> 24.518 - as the <a href="#grid-element"><i>Grid element</i></a>’s 24.519 - definition changes.</p> 24.520 - 24.521 - <pre class=example><style type="text/css"> 24.522 - @media (orientation: portrait) { 24.523 - #grid { 24.524 - display: grid; 24.525 - 24.526 - /* The rows, columns and cells of the grid are defined visually using the */ 24.527 - /* grid-template property. Each string is a row, and each letter a cell. */ 24.528 - /* The max number of letters in any one string determines the number of */ 24.529 - /* columns. */ 24.530 - grid-template: "ta" 24.531 - "sa" 24.532 - "bb" 24.533 - "cc"; 24.534 - 24.535 - /* Columns and rows created with the template property can be assigned a sizing */ 24.536 - /* function with the grid-columns and grid-rows properties. */ 24.537 - grid-columns: auto minmax(min-content, 1fr); 24.538 - grid-rows: auto auto minmax(min-content, 1fr) auto 24.539 - } 24.540 - } 24.541 - 24.542 - @media (orientation: landscape) { 24.543 - #grid { 24.544 - display: grid; 24.545 - 24.546 - /* Again the template property defines cells of the same name, but this time */ 24.547 - /* positioned differently to better suit a landscape orientation. */ 24.548 - grid-template: "tb" 24.549 - "ab" 24.550 - "sc"; 24.551 - 24.552 - grid-columns: auto minmax(min-content, 1fr); 24.553 - grid-rows: auto minmax(min-content, 1fr) auto 24.554 - } 24.555 - } 24.556 - 24.557 - /* The grid-cell property places a grid item into named region (cell) of the grid. */ 24.558 - #title { grid-cell: "t" } 24.559 - #score { grid-cell: "s" } 24.560 - #stats { grid-cell: "a" } 24.561 - #board { grid-cell: "b" } 24.562 - #controls { grid-cell: "c" } 24.563 -</style> 24.564 - 24.565 -<div id="grid"> 24.566 - <div id="title">Game Title</div> 24.567 - <div id="score">Score</div> 24.568 - <div id="stats">Stats</div> 24.569 - <div id="board">Board</div> 24.570 - <div id="controls">Controls</div> 24.571 -</div></pre> 24.572 - <!--End Section: Source Independence--></div> 24.573 - 24.574 - <div class=section id=grid-layering-of-elements> 24.575 - <h3 id=grid-layering-of-elements0><span class=secno>2.4. </span>Grid 24.576 - Layering of Elements</h3> 24.577 - 24.578 - <div class=sidefigure> 24.579 - <p> <img alt="Image: A control composed of layered HTML elements." 24.580 - src="images/control-layering-and-alignment.png"></p> 24.581 - 24.582 - <p class=caption>A control composed of layered HTML elements.</p> 24.583 - </div> 24.584 - 24.585 - <p> In the example shown in Figure 6, the author is creating a custom 24.586 - slider control. The control has six parts. The lower and upper labels 24.587 - align to the left and right edges of the control. The track of the 24.588 - slider spans the area between the labels. The lower and upper fill parts 24.589 - touch beneath the thumb, and the thumb is a fixed width and height that 24.590 - can be moved along the track by updating the two fraction-sized columns. 24.591 - </p> 24.592 - 24.593 - <p> Prior to the <a href="#grid-element"><i>Grid element</i></a>, the 24.594 - author would have likely used absolute positioning to control the top 24.595 - and left coordinates, along with the width and height of each HTML 24.596 - element that comprises the control. By leveraging the <a 24.597 - href="#grid-element"><i>Grid element</i></a>, the author can instead 24.598 - limit script usage to handling mouse events on the thumb, which snaps to 24.599 - various positions along the track as the ‘<a 24.600 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.601 - property of the <a href="#grid-element"><i>Grid element</i></a> is 24.602 - updated.</p> 24.603 - 24.604 - <pre class=example><style type="text/css"> 24.605 - #grid { 24.606 - display: grid; 24.607 - 24.608 - /* The grid-columns and rows properties also support naming grid lines which can then */ 24.609 - /* be used to position grid items. The line names are assigned on either side of a */ 24.610 - /* column or row sizing function where the line would logically exist. */ 24.611 - grid-columns: 24.612 - "start" auto 24.613 - "track-start" 0.5fr 24.614 - "thumb-start" auto 24.615 - "fill-split" auto 24.616 - "thumb-end" 0.5fr 24.617 - "track-end" auto 24.618 - "end"; 24.619 - } 24.620 - 24.621 - /* Grid-column and grid-row accept a starting and optional endling line. Below the lines */ 24.622 - /* are referred to by name. Beyond any semantic advantage, the names also allow the author */ 24.623 - /* to avoid renumbering the grid-row and column properties of the grid items. This is */ 24.624 - /* similar to the concept demonstrated in the prior example with the grid-template */ 24.625 - /* property during orientation changes, but grid lines can also work with layered grid */ 24.626 - /* items that have overlapping cells of different shapes like the thumb and track parts */ 24.627 - /* in this example. */ 24.628 - #lower-label { grid-column: "start" } 24.629 - #track { grid-column: "track-start" "track-end"; grid-row-align: center } 24.630 - #upper-label { grid-column: "track-end"; } 24.631 - 24.632 - /* Fill parts are drawn above the track so set z-index to 5. */ 24.633 - #lower-fill { grid-column: "track-start" "fill-split"; grid-row-align: center; z-index: 5 } 24.634 - #upper-fill { grid-column: "fill-split" "track-end"; grid-row-align: center; z-index: 5 } 24.635 - 24.636 - /* Thumb is the topmost part; assign it the highest z-index value. */ 24.637 - #thumb { grid-column: "thumb-start" "thumb-end"; z-index: 10 } 24.638 -</style> 24.639 - 24.640 -<div id="grid"> 24.641 - <div id="lower-label">Lower Label</div> 24.642 - <div id="upper-label">Upper Label</div> 24.643 - <div id="track">Track</div> 24.644 - <div id="lower-fill">Lower Fill</div> 24.645 - <div id="upper-fill">Upper Fill</div> 24.646 - <div id="thumb">Thumb</div> 24.647 -</div></pre> 24.648 - <!--End Section: Grid Layering of Elements--></div> 24.649 - <!--End Section: Introduction--></div> 24.650 - 24.651 - <div class=section id=grid-concepts> 24.652 - <h2 id=core-concepts-of-the-grid><span class=secno>3. </span>Core Concepts 24.653 - of the Grid</h2> 24.654 - 24.655 - <div class=sidefigure> <img 24.656 - alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Cells and Items." 24.657 - class=figure src="images/grid-concepts.png"> 24.658 - <p class=caption>A diagram illustrating the relationship between the <a 24.659 - href="#grid-element"><i>Grid element</i></a> and its Tracks, Lines, 24.660 - Cells and Items.</p> 24.661 - </div> 24.662 - 24.663 - <p> A <dfn id=grid-element>Grid element</dfn> is declared in markup by 24.664 - setting the display property of an element to ‘<a 24.665 - href="#grid"><code class=css>grid</code></a>’ or ‘<a 24.666 - href="#inline-grid"><code class=css>inline-grid</code></a>’. Child 24.667 - elements of the Grid are termed <a href="#grid-item"><i>Grid 24.668 - items</i></a> and may be positioned and sized by the <a 24.669 - href="#grid-element"><i>Grid element</i></a> by leveraging the following 24.670 - logical concepts.</p> 24.671 - 24.672 - <ul> 24.673 - <li><a href="#grid-track"><i>Grid tracks</i></a> 24.674 - 24.675 - <li><a href="#grid-line"><i>Grid lines</i></a> 24.676 - 24.677 - <li><a href="#grid-cell-concept"><i>Grid cells</i></a> 24.678 - </ul> 24.679 - 24.680 - <p> Figure 7 illustrates the relationship between these concepts and the 24.681 - markup in the subsections that follow produce the result shown in the 24.682 - figure.</p> 24.683 - 24.684 - <div class=section id=grid-concepts-tracks> 24.685 - <h3 id=grid-tracks><span class=secno>3.1. </span>Grid Tracks</h3> 24.686 - 24.687 - <p> <dfn id=grid-track>Grid Track</dfn>s are the columns and rows of the 24.688 - Grid defined with the ‘<a href="#grid-rows"><code 24.689 - class=property>grid-rows</code></a>’ and ‘<a 24.690 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.691 - properties on the <a href="#grid-element"><i>Grid element</i></a>. Each 24.692 - Track is defined by declaring a sequential list of sizing functions, one 24.693 - for each Track. Tracks define the space between <a 24.694 - href="#grid-line"><i>Grid lines</i></a>.</p> 24.695 - 24.696 - <pre class=example><style type="text/css"> 24.697 - #grid { 24.698 - display: grid; 24.699 - grid-columns: 150px 1fr; /* two columns */ 24.700 - grid-rows: 50px 1fr 50px /* three rows */ 24.701 - } 24.702 -</style></pre> 24.703 - <!--End Section: Grid Tracks--></div> 24.704 - 24.705 - <div class=section id=grid-concepts-lines> 24.706 - <h3 id=grid-lines><span class=secno>3.2. </span>Grid Lines</h3> 24.707 - 24.708 - <p> <dfn id=grid-line>Grid Line</dfn>s are the horizontal or vertical 24.709 - dividing lines that exist on either side of a column or row. <a 24.710 - href="#grid-line"><i>Grid lines</i></a> may be referred to by their <a 24.711 - href="#grid-line"><i>Grid line</i></a> number, or they may be named by 24.712 - the author. Authors use one or more quoted strings to assign names to a 24.713 - <a href="#grid-line"><i>Grid line</i></a> before or after a <a 24.714 - href="#grid-track"><i>Grid track</i></a> definition wherever the desired 24.715 - <a href="#grid-line"><i>Grid line</i></a> would logically exist. A <a 24.716 - href="#grid-item"><i>Grid item</i></a> then uses the <a 24.717 - href="#grid-line"><i>Grid lines</i></a> to determine its position and 24.718 - available space within the Grid by referencing the <a 24.719 - href="#grid-line"><i>Grid lines</i></a> using the properties ‘<a 24.720 - href="#grid-row"><code class=property>grid-row</code></a>’ and 24.721 - ‘<a href="#grid-column"><code 24.722 - class=property>grid-column</code></a>’. ‘<a 24.723 - href="#grid-row"><code class=property>grid-row</code></a>’ and 24.724 - ‘<a href="#grid-column"><code 24.725 - class=property>grid-column</code></a>’ accept a starting and 24.726 - optional ending Line.</p> 24.727 - 24.728 - <p> The following two examples create three column <a 24.729 - href="#grid-line"><i>Grid lines</i></a> and four row <a 24.730 - href="#grid-line"><i>Grid lines</i></a>. The first example demonstrates 24.731 - how an author would refer to the <a href="#grid-line"><i>Grid 24.732 - lines</i></a> using <a href="#grid-line"><i>Grid line</i></a> numbers. 24.733 - The second example uses explicitly named <a href="#grid-line"><i>Grid 24.734 - lines</i></a>.</p> 24.735 - 24.736 - <pre class=example><style type="text/css"> 24.737 - #grid { 24.738 - display: grid; 24.739 - grid-columns: 150px 1fr; 24.740 - grid-rows: 50px 1fr 50px 24.741 - } 24.742 - 24.743 - #item1 { grid-column: 2; grid-row: 1 4 } 24.744 -</style></pre> 24.745 - 24.746 - <pre class=example><style type="text/css"> 24.747 - /* equivalent layout to the prior example, but using named lines */ 24.748 - #grid { 24.749 - display: grid; 24.750 - grid-columns: 150px "item1-start" 1fr "item1-end"; 24.751 - grid-rows: "item1-start" 50px 1fr 50px "item1-end" 24.752 - } 24.753 - 24.754 - #item1 { 24.755 - grid-column: "item1-start" "item1-end"; 24.756 - grid-row: "item1-start" "item1-end" 24.757 - } 24.758 -</style></pre> 24.759 - <!--End Section: Grid Lines--></div> 24.760 - 24.761 - <div class=section id=grid-concepts-cells> 24.762 - <h3 id=grid-cells><span class=secno>3.3. </span>Grid Cells</h3> 24.763 - 24.764 - <p> <dfn id=grid-cell-concept>Grid Cell</dfn>s are the logical space used 24.765 - to lay out one or more <a href="#grid-item"><i>Grid items</i></a>. <a 24.766 - href="#grid-cell-concept"><i>Grid cells</i></a> may be defined 24.767 - explicitly using the ‘<a href="#grid-template"><code 24.768 - class=property>grid-template</code></a>’ property, or implicitly 24.769 - by referencing a region of the Grid using the properties ‘<a 24.770 - href="#grid-row"><code class=property>grid-row</code></a>’ and 24.771 - ‘<a href="#grid-column"><code 24.772 - class=property>grid-column</code></a>’ on a <a 24.773 - href="#grid-item"><i>Grid item</i></a>.</p> 24.774 - 24.775 - <p> Whether a <a href="#grid-cell-concept"><i>Grid cell</i></a> is 24.776 - created explicitly or implicitly, there is no difference in the layout 24.777 - or drawing order of the <a href="#grid-item"><i>Grid items</i></a> which 24.778 - are associated with that <a href="#grid-cell-concept"><i>Grid 24.779 - cell</i></a>. <a href="#grid-cell-concept"><i>Grid cells</i></a> cannot 24.780 - be styled. Only the syntax used to refer to a region of space on the 24.781 - Grid differs between the implicit and explicit approach to provide 24.782 - authors with the tools to best suit their scenarios as illustrated in 24.783 - prior examples.</p> 24.784 - 24.785 - <pre class=example><style type="text/css"> 24.786 - /* using the template syntax */ 24.787 - #grid { 24.788 - display: grid; 24.789 - grid-template: "ad" 24.790 - "bd" 24.791 - "cd"; 24.792 - grid-columns: 150px 1fr; 24.793 - grid-rows: 50px 1fr 50px 24.794 - } 24.795 - 24.796 - #item2 { grid-cell: "b" } 24.797 - #item3 { grid-cell: "b" } 24.798 - 24.799 - /* Align items 2 and 3 at different points in the Grid Cell "b". */ 24.800 - /* By default, Grid Items are stretched to fit their Grid Cell */ 24.801 - /* and these items would layer one over the other. */ 24.802 - #item2 { grid-row-align: start } 24.803 - #item3 { grid-column-align: end; grid-row-align: end }</style></pre> 24.804 - <!--End Section: Grid Cells--></div> 24.805 - <!--End Section: Core Concepts of the Grid--></div> 24.806 - 24.807 - <div class=section id=grid-declaration> 24.808 - <h2 id=grid-declaration0><span class=secno>4. </span>Grid Declaration</h2> 24.809 - 24.810 - <p> A <a href="#grid-element"><i>Grid element</i></a> is declared by 24.811 - setting the display property.</p> 24.812 - 24.813 - <table class=propdef id=display-property> 24.814 - <tbody> 24.815 - <tr> 24.816 - <td>Name: 24.817 - 24.818 - <td>display 24.819 - 24.820 - <tr> 24.821 - <td>Value: 24.822 - 24.823 - <td> [ ...existing values... | <span class=normref><strong><dfn 24.824 - id=grid>grid</dfn> | <dfn 24.825 - id=inline-grid>inline-grid</dfn></strong></span> | 24.826 - 24.827 - <tr> 24.828 - <td>Computed value: 24.829 - 24.830 - <td>specified value 24.831 - </table> 24.832 - 24.833 - <dl> 24.834 - <dt><a name=value-def-display-grid>grid</a> 24.835 - 24.836 - <dd>A value of grid causes an element to display as a block-level <a 24.837 - href="#grid-element"><i>Grid element</i></a>. 24.838 - 24.839 - <dt><a name=value-def-display-inline-grid>inline-grid</a> 24.840 - 24.841 - <dd>A value of inline-grid causes an element to display as an 24.842 - inline-level <a href="#grid-element"><i>Grid element</i></a>. 24.843 - </dl> 24.844 - 24.845 - <p>The baseline of an inline <a href="#grid-element"><i>Grid 24.846 - element</i></a> is the bottom edge of the margin box.</p> 24.847 - <!--End Section: Grid Declaration--></div> 24.848 - 24.849 - <div class=section id=grid-items> 24.850 - <h2 id=grid-items0><span class=secno>5. </span>Grid Items</h2> 24.851 - 24.852 - <p> The <a href="#grid-element"><i>Grid element</i></a> performs layout on 24.853 - <a href="#grid-item"><i>Grid items</i></a>. <dfn id=grid-item>Grid 24.854 - Item</dfn>s are considered block-level children, replaced, inline-block 24.855 - children, and atomic, inline-level children of the <a 24.856 - href="#grid-element"><i>Grid element</i></a>.</p> 24.857 - 24.858 - <p> Contiguous runs of non-replaced, inline content are wrapped in an 24.859 - anonymous, block-level box, which is then treated as a <a 24.860 - href="#grid-item"><i>Grid item</i></a> for the purposes of Grid layout. 24.861 - Out-of-flow elements (except floats, which are out-of-flow, but are 24.862 - irrelevant to Grid layout since <a href="#grid-item"><i>Grid 24.863 - items</i></a> can't float) leave behind a "placeholder" in their original 24.864 - source location which is treated like a non-replaced, inline element for 24.865 - the purpose of this wrapping. Any indirect descendants of the <a 24.866 - href="#grid-element"><i>Grid element</i></a>, including block elements 24.867 - that are contained in inline elements, are not <a 24.868 - href="#grid-item"><i>Grid items</i></a>.</p> 24.869 - 24.870 - <p> The following example produces two <a href="#grid-item">Grid 24.871 - Items</a>: the first <a href="#grid-item"><i>Grid item</i></a> is the 24.872 - anonymous block-level box wrapping the <code>A</code> and the subsequent 24.873 - <code><span></code>; the second <a href="#grid-item"><i>Grid 24.874 - item</i></a> is created by the block-level box of the <code>C 24.875 - <div></code>.</p> 24.876 - 24.877 - <pre 24.878 - class=example><div style="display:grid;">A<span>B</span><div>C</div></div></pre> 24.879 - <!--End Section: Grid Items--></div> 24.880 - 24.881 - <div class=section id=defining-grid-rows-columns-and-lines> 24.882 - <h2 id=defining-grid-rows-columns-and-lines0><span class=secno>6. 24.883 - </span>Defining Grid Rows, Columns and Lines</h2> 24.884 - 24.885 - <div class=section id=grid-rows-and-columns> 24.886 - <h3 id=grid-rows-and-columns0><span class=secno>6.1. </span>Grid Rows and 24.887 - Columns</h3> 24.888 - 24.889 - <div class=sidefigure> <img alt="Image: Grid Lines." class=figure 24.890 - src="images/grid-lines.png"> 24.891 - <p class=caption>Grid Lines.</p> 24.892 - </div> 24.893 - 24.894 - <p> <a href="#grid-element"><i>Grid elements</i></a> use <a 24.895 - href="#grid-line"><i>Grid lines</i></a> to divide their space. There are 24.896 - two sets of <a href="#grid-line"><i>Grid lines</i></a>: one set defined 24.897 - by the columns that run in the direction of block progression, and 24.898 - another orthogonal set defined by rows. Block progression is a 24.899 - writing-mode term that defines a logical direction. In English it means 24.900 - vertical.</p> 24.901 - 24.902 - <p> A <a href="#grid-track"><i>Grid track</i></a> is a generic term for a 24.903 - column or row which separates two <a href="#grid-line"><i>Grid 24.904 - lines</i></a>. Each <a href="#grid-track"><i>Grid track</i></a> is 24.905 - assigned a sizing function, which controls how wide or tall the column 24.906 - or row may grow, and thus how far apart two <a href="#grid-line"><i>Grid 24.907 - lines</i></a> are. The sizing function specified can be a length, a 24.908 - percentage of the <a href="#grid-element"><i>Grid 24.909 - element</i></a>’s size, derived from the contents occupying the 24.910 - column or row, or a proportion of the space which remains in the <a 24.911 - href="#grid-element"><i>Grid element</i></a>. In the last case, 24.912 - remaining space refers to the width or height of the <a 24.913 - href="#grid-element"><i>Grid element</i></a> after accounting for space 24.914 - already consumed by columns and rows sized with a length, percentage or 24.915 - content. The size can also be specified as a range using a minmax 24.916 - function, which can combine any of the previously mentioned mechanisms 24.917 - to define a min and max size for the column or row.</p> 24.918 - 24.919 - <p> In the following example there are two columns and three rows. The 24.920 - first column is 150px wide beginning from the starting edge of the <a 24.921 - href="#grid-element"><i>Grid element</i></a>’s content box. The 24.922 - second column uses fractional sizing, which is a function of the 24.923 - remaining space in the Grid. Its size will vary as the width of the <a 24.924 - href="#grid-element"><i>Grid element</i></a> changes. If the used width 24.925 - of the <a href="#grid-element"><i>Grid element</i></a> is 200px, then 24.926 - the second column 50px wide. If the used width of the <a 24.927 - href="#grid-element"><i>Grid element</i></a> is 100px, then the second 24.928 - column is 0px and any content positioned in the column will be 24.929 - overflowing the <a href="#grid-element"><i>Grid element</i></a>. Sizing 24.930 - occurs in a similar fashion for the rows.</p> 24.931 - 24.932 - <pre class=example><style type="text/css"> 24.933 - #grid { 24.934 - display: grid; 24.935 - grid-columns: 150px 1fr; 24.936 - grid-rows: 50px 1fr 50px 24.937 - } 24.938 -</style></pre> 24.939 - <!--End Section: Grid Rows, Columns and Implicit Grid Lines--></div> 24.940 - 24.941 - <div class=section id=grid-named-grid-lines> 24.942 - <h3 id=named-grid-lines><span class=secno>6.2. </span>Named Grid Lines</h3> 24.943 - 24.944 - <div class=sidefigure> <img alt="Image: Named Grid Lines." class=figure 24.945 - src="images/grid-named-lines.png"> 24.946 - <p class=caption>Named Grid Lines.</p> 24.947 - </div> 24.948 - 24.949 - <p> A <a href="#grid-line"><i>Grid line</i></a> exists on either side of 24.950 - a column or row. The <a href="#grid-line"><i>Grid line</i></a> may be 24.951 - named using one or more quoted strings which are positioned in the 24.952 - ‘<a href="#grid-rows"><code 24.953 - class=property>grid-rows</code></a>’ or ‘<a 24.954 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.955 - definitions where the <a href="#grid-line"><i>Grid line</i></a> would 24.956 - logically occur (in between the sizing functions that define the Grid's 24.957 - columns and rows). Each name associated with a <a 24.958 - href="#grid-line"><i>Grid line</i></a> must be unique for the set of 24.959 - columns or rows. If the name is specified multiple times in the same 24.960 - column or row definition, it is associated with the first <a 24.961 - href="#grid-line"><i>Grid line</i></a> to which the name was assigned. 24.962 - When a name is not specified, <a href="#grid-line"><i>Grid lines</i></a> 24.963 - can be referred to in the order which they occur. The first line is 1, 24.964 - the second 2 and so on. The next example builds on the prior by 24.965 - assigning each line one or more names.</p> 24.966 - 24.967 - <pre class=example><style type="text/css"> 24.968 - #grid { 24.969 - display: grid; 24.970 - grid-columns: "first" "nav" 150px "main" 1fr "last"; 24.971 - grid-rows: "first" "header" 50px "main" 1fr "footer" 50px "last"; 24.972 - } 24.973 -</style></pre> 24.974 - <!--End Section: Named Grid Lines--></div> 24.975 - 24.976 - <div class=section id=grid-starting-and-ending-lines> 24.977 - <h3 id=starting-and-ending-grid-lines><span class=secno>6.3. 24.978 - </span>Starting and Ending Grid Lines</h3> 24.979 - 24.980 - <p> In addition to any explicitly named <a href="#grid-line"><i>Grid 24.981 - lines</i></a> defined by the author, a <a href="#grid-element"><i>Grid 24.982 - element</i></a> also has four implicitly defined <a 24.983 - href="#grid-line"><i>Grid lines</i></a>: a start and end line for both 24.984 - columns and rows. The <dfn id=start-line>start</dfn> line is always 24.985 - positioned on the starting edge of the <a href="#grid-element"><i>Grid 24.986 - element</i></a>’s content box. The <dfn id=end-line>end</dfn> line 24.987 - is positioned at the ending edge of the <a href="#grid-element"><i>Grid 24.988 - element</i></a>’s content box, or at the same location as the last 24.989 - explicitly or implicitly defined <a href="#grid-line"><i>Grid 24.990 - line</i></a> when it extends past the content box of the <a 24.991 - href="#grid-element"><i>Grid element</i></a>.</p> 24.992 - 24.993 - <p> In the following example, the ‘<a href="#end-line"><code 24.994 - class=css>end</code></a>’ column <a href="#grid-line"><i>Grid 24.995 - line</i></a> is positioned on the ending edge of the <a 24.996 - href="#grid-element"><i>Grid element</i></a>’s content box. The 24.997 - ‘<a href="#end-line"><code class=css>end</code></a>’ row <a 24.998 - href="#grid-line"><i>Grid line</i></a> is positioned past the ending 24.999 - edge in overflow at the same location as the <a 24.1000 - href="#grid-line"><i>Grid line</i></a> named "last."</p> 24.1001 - 24.1002 - <pre class=example><style type="text/css"> 24.1003 - #grid { 24.1004 - display: grid; 24.1005 - width: auto; 24.1006 - height: 500px; 24.1007 - grid-columns: 50px 1fr; 24.1008 - grid-rows: "first" 250px 250px 250px "last"; 24.1009 - } 24.1010 - 24.1011 - #item { 24.1012 - /* cover explicitly defined columns and rows */ 24.1013 - grid-column: 1 3; 24.1014 - grid-row: "first" "last"; 24.1015 - 24.1016 - /* equivalent (assuming no implicitly created tracks) */ 24.1017 - grid-column: start end; 24.1018 - grid-row: start end; 24.1019 - } 24.1020 -</style></pre> 24.1021 - <!--End Section: Starting and Ending Grid Lines--></div> 24.1022 - 24.1023 - <div class=section id=grid-repeating-columns-and-rows> 24.1024 - <h3 id=repeating-columns-and-rows><span class=secno>6.4. </span>Repeating 24.1025 - Columns and Rows</h3> 24.1026 - 24.1027 - <p> If there are large number of columns or rows that are the same or 24.1028 - exhibit a recurring pattern, a repeat function can be applied to define 24.1029 - the columns or rows in a more compact form.</p> 24.1030 - 24.1031 - <p> The next two examples are equivalent. There is a single row, and a 24.1032 - pattern of repetitive column <a href="#grid-line"><i>Grid lines</i></a>: 24.1033 - a 250px column followed by a 10px gutter. Note that when the repeat 24.1034 - function is used with <a href="#grid-line"><i>Grid line</i></a> naming, 24.1035 - that the names are assigned to the first occurrence of the pattern.</p> 24.1036 - 24.1037 - <pre class=example><style type="text/css"> 24.1038 - #grid { 24.1039 - display: grid; 24.1040 - grid-columns: 10px "content" 250px 10px 250px 10px 250px 10px 250px 10px; 24.1041 - grid-rows: 1fr; 24.1042 - } 24.1043 - 24.1044 - /* Equivalent definition. */ 24.1045 - #grid { 24.1046 - display: grid; 24.1047 - grid-columns: 10px repeat(4, "content" 250px 10px); 24.1048 - grid-rows: 1fr; 24.1049 - } 24.1050 -</style></pre> 24.1051 - 24.1052 - <p class=issue> Consider not allowing named lines in the repeat syntax.</p> 24.1053 - <!--End Section: Repeating Columns and Rows--></div> 24.1054 - 24.1055 - <div class=section id=grid-columns-and-rows-properties> 24.1056 - <h3 id=grid-columns-and-grid-rows-properties><span class=secno>6.5. 24.1057 - </span>Grid-columns and Grid-rows Properties</h3> 24.1058 - 24.1059 - <p> The following grammar expresses the allowable values for the 24.1060 - ‘<a href="#grid-rows"><code 24.1061 - class=property>grid-rows</code></a>’ and ‘<a 24.1062 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.1063 - properties.</p> 24.1064 - <code></code> 24.1065 - <pre><track-list> => [ [ <string> ]* <track-group> [ <string> ]* ]+ | none 24.1066 -<track-group> => <track-minmax> | [ repeat( <positive-integer> , [ [ <string> ]* <track-minmax> [ <string> ]* ]+ ) ] 24.1067 -<track-minmax> => minmax( <track-breadth> , <track-breadth> ) | auto | <track-breadth> 24.1068 -<track-breadth> => <length> | <percentage> | <fraction> | min-content | max-content</pre> 24.1069 - <br> 24.1070 - 24.1071 - <p>Where:</p> 24.1072 - 24.1073 - <ul> 24.1074 - <li><dfn id=length>length</dfn> is as defined by CSS3 Values. <a 24.1075 - href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> 24.1076 - 24.1077 - <li><i>percentage</i> expresses a size for a <a 24.1078 - href="#grid-track"><i>Grid track</i></a> as a percentage of the <a 24.1079 - href="#grid-element"><i>Grid element</i></a>’s logical width (for 24.1080 - columns) or logical height (for rows). When the width or height of the 24.1081 - <a href="#grid-element"><i>Grid element</i></a> is dependent on 24.1082 - content, the result is undefined. 24.1083 - 24.1084 - <li><dfn id=fraction>fraction</dfn> is a non-negative floating-point 24.1085 - number followed by ‘<code class=property>fr</code>’. Each 24.1086 - ‘<a href="#fraction"><code 24.1087 - class=property>fraction</code></a>’ value takes a share of the 24.1088 - remaining space proportional to its number. See <a 24.1089 - href="#fraction-values"><i>fraction values</i></a> for more details. 24.1090 - 24.1091 - <li><dfn id=max-content>max-content</dfn> is a keyword which refers to 24.1092 - the maximum of the max sizes of <a href="#grid-item"><i>Grid 24.1093 - items</i></a> occupying the <a href="#grid-track"><i>Grid 24.1094 - track</i></a>. 24.1095 - 24.1096 - <li><dfn id=min-content>min-content</dfn> is a keyword which refers to 24.1097 - the maximum of the min sizes of <a href="#grid-item"><i>Grid 24.1098 - items</i></a> occupying the <a href="#grid-track"><i>Grid 24.1099 - track</i></a>. 24.1100 - 24.1101 - <li><dfn id=minmax>minmax(min, max)</dfn> defines a size range. The size 24.1102 - used should be greater than or equal to ‘<code 24.1103 - class=property>min</code>’ and less than or equal to ‘<code 24.1104 - class=property>max</code>’. If ‘<code 24.1105 - class=property>max</code>’ < ‘<code 24.1106 - class=property>min</code>’, then ‘<code 24.1107 - class=property>max</code>’ is ignored and ‘<code 24.1108 - class=css>minmax(min,max)</code>’ is treated as ‘<code 24.1109 - class=css>minmax(min,min)</code>’. 24.1110 - 24.1111 - <li><dfn id=auto>auto</dfn> is equivalent to ‘<code 24.1112 - class=css>minmax(min-content, max-content)</code>’. 24.1113 - </ul> 24.1114 - 24.1115 - <p class=issue> Consider whether having undefined behavior for 24.1116 - percentage-sized tracks in content-sized grids is appropriate. CSS2.1 24.1117 - and CSS3 leave percentage width undefined, although there appears to be 24.1118 - consistency between browser implementations.</p> 24.1119 - <br> 24.1120 - 24.1121 - <table class=propdef id=grid-columns-property> 24.1122 - <tbody> 24.1123 - <tr> 24.1124 - <td>Name: 24.1125 - 24.1126 - <td><dfn id=grid-columns>grid-columns</dfn> 24.1127 - 24.1128 - <tr> 24.1129 - <td>Value: 24.1130 - 24.1131 - <td>see grammar above 24.1132 - 24.1133 - <tr> 24.1134 - <td>Initial: 24.1135 - 24.1136 - <td>none 24.1137 - 24.1138 - <tr> 24.1139 - <td>Applies to: 24.1140 - 24.1141 - <td>non-replaced elements with a computed value of ‘<a 24.1142 - href="#grid"><code class=css>grid</code></a>’ or ‘<a 24.1143 - href="#inline-grid"><code class=css>inline-grid</code></a>’ for 24.1144 - display. 24.1145 - 24.1146 - <tr> 24.1147 - <td>Inherited: 24.1148 - 24.1149 - <td>no 24.1150 - 24.1151 - <tr> 24.1152 - <td>Percentages: 24.1153 - 24.1154 - <td>n/a 24.1155 - 24.1156 - <tr> 24.1157 - <td>Media: 24.1158 - 24.1159 - <td>visual, paged 24.1160 - 24.1161 - <tr> 24.1162 - <td>Computed value: 24.1163 - 24.1164 - <td>see text 24.1165 - </table> 24.1166 - 24.1167 - <table class=propdef id=grid-rows-property> 24.1168 - <tbody> 24.1169 - <tr> 24.1170 - <td>Name: 24.1171 - 24.1172 - <td><dfn id=grid-rows>grid-rows</dfn> 24.1173 - 24.1174 - <tr> 24.1175 - <td>Value: 24.1176 - 24.1177 - <td>see grammar above 24.1178 - 24.1179 - <tr> 24.1180 - <td>Initial: 24.1181 - 24.1182 - <td>none 24.1183 - 24.1184 - <tr> 24.1185 - <td>Applies to: 24.1186 - 24.1187 - <td>non-replaced elements with a computed value of ‘<a 24.1188 - href="#grid"><code class=css>grid</code></a>’ or ‘<a 24.1189 - href="#inline-grid"><code class=css>inline-grid</code></a>’ for 24.1190 - display. 24.1191 - 24.1192 - <tr> 24.1193 - <td>Inherited: 24.1194 - 24.1195 - <td>no 24.1196 - 24.1197 - <tr> 24.1198 - <td>Percentages: 24.1199 - 24.1200 - <td>n/a 24.1201 - 24.1202 - <tr> 24.1203 - <td>Media: 24.1204 - 24.1205 - <td>visual, paged 24.1206 - 24.1207 - <tr> 24.1208 - <td>Computed value: 24.1209 - 24.1210 - <td>see text 24.1211 - </table> 24.1212 - 24.1213 - <p>The following example:</p> 24.1214 - 24.1215 - <ul> 24.1216 - <li>Adds one <a href="#grid-line"><i>Grid line</i></a> 100 pixels from 24.1217 - the ‘<a href="#start-row-align"><code 24.1218 - class=css>start</code></a>’ of the grid. 24.1219 - 24.1220 - <li>Adds another <a href="#grid-line"><i>Grid line</i></a> 1/2 of the 24.1221 - remaining space away. 24.1222 - 24.1223 - <li>Adds another <a href="#grid-line"><i>Grid line</i></a> whose 24.1224 - distance from the prior <a href="#grid-line"><i>Grid line</i></a> will 24.1225 - be based on the maximum content size of elements occupying the column. 24.1226 - 24.1227 - <li>Adds another <a href="#grid-line"><i>Grid line</i></a> whose 24.1228 - distance from the prior <a href="#grid-line"><i>Grid line</i></a> is 24.1229 - based on the minimum content size of all elements occupying the column, 24.1230 - or 1/2 the remaining space, whichever is greater. 24.1231 - </ul> 24.1232 - 24.1233 - <pre 24.1234 - class=example>div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre> 24.1235 - 24.1236 - <p>Additional examples of valid <a href="#grid-track"><i>Grid 24.1237 - track</i></a> definitions:</p> 24.1238 - 24.1239 - <pre class=example> /* examples of valid track definitions */ 24.1240 - grid-rows: 1fr minmax(min-content, 1fr); 24.1241 - grid-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr)); 24.1242 - grid-rows: (10px); 24.1243 - grid-rows: calc(4em - 5px)</pre> 24.1244 - <!--End Section: Grid-columns and Grid-rows Properties--></div> 24.1245 - 24.1246 - <div class=section id=fraction-values-fr> 24.1247 - <h4 id=fraction-values-fr0><span class=secno>6.5.1. </span>Fraction 24.1248 - Values: ‘<code class=property>fr</code>’</h4> 24.1249 - 24.1250 - <p><dfn id=fraction-values>Fraction values</dfn> are new units applicable 24.1251 - to the ‘<a href="#grid-rows"><code 24.1252 - class=property>grid-rows</code></a>’ and ‘<a 24.1253 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.1254 - properties:</p> 24.1255 - 24.1256 - <dl> 24.1257 - <dt>fr 24.1258 - 24.1259 - <dd>Fraction of available space. 24.1260 - </dl> 24.1261 - 24.1262 - <p> The distribution of fractional space occurs after all ‘<a 24.1263 - href="#length"><code class=css>length</code></a>’ or content-based 24.1264 - row and column sizes have reached their maximum. The total size of the 24.1265 - rows or columns is then subtracted from the available space and the 24.1266 - remainder is divided proportionately among the fractional rows and 24.1267 - columns.</p> 24.1268 - 24.1269 - <p> Each column or row's proportional share can be computed as the column 24.1270 - or row's <code><fraction> * <remaining space> / <sum of 24.1271 - all fractions></code>. Note that fractions occurring within a 24.1272 - ‘<code class=css>minmax</code>’ function are only counted in 24.1273 - the sum if in the ‘<code class=css>max</code>’ position. 24.1274 - Further, fractions that occur in the ‘<code 24.1275 - class=css>min</code>’ position are treated as an absolute length 24.1276 - of <code>0px</code>.</p> 24.1277 - 24.1278 - <p> When remaining space cannot be determined because the width or height 24.1279 - of the <a href="#grid-element"><i>Grid element</i></a> is undefined, 24.1280 - fraction-sized <a href="#grid-track"><i>Grid tracks</i></a> are sized to 24.1281 - their contents while retaining their respective proportions. In such 24.1282 - cases the size of each fractional <a href="#grid-track"><i>Grid 24.1283 - track</i></a> can be computed by determining the ‘<a 24.1284 - href="#max-content"><code class=property>max-content</code></a>’ 24.1285 - size of each fractional <a href="#grid-track"><i>Grid track</i></a> and 24.1286 - dividing that size by the respective ‘<a href="#fraction"><code 24.1287 - class=property>fraction</code></a>’. The maximum value of those 24.1288 - results is treated as the <code>1fr</code> value, which is then 24.1289 - multiplied by each <a href="#grid-track"><i>Grid track</i></a>’s 24.1290 - ‘<a href="#fraction"><code 24.1291 - class=property>fraction</code></a>’ to determine its final size.</p> 24.1292 - <!--End Section: Fraction Values: 'fr'--></div> 24.1293 - 24.1294 - <div class=section id=computed-values-grid-rows-and-columns> 24.1295 - <h4 id=computed-values-for-grid-rows-and-grid-c><span class=secno>6.5.2. 24.1296 - </span>Computed Values for Grid-rows and Grid-columns</h4> 24.1297 - 24.1298 - <p> The computed size of all <a href="#grid-track"><i>Grid tracks</i></a> 24.1299 - as returned for the ‘<a href="#grid-rows"><code 24.1300 - class=property>grid-rows</code></a>’ and ‘<a 24.1301 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.1302 - properties are normalized to used pixel values. All <a 24.1303 - href="#grid-track"><i>Grid tracks</i></a> are included in the computed 24.1304 - value reported for ‘<a href="#grid-rows"><code 24.1305 - class=property>grid-rows</code></a>’ and ‘<a 24.1306 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.1307 - regardless of how the <a href="#grid-track"><i>Grid tracks</i></a> were 24.1308 - created, e.g. implicit tracks may be created by <a 24.1309 - href="#grid-item"><i>Grid items</i></a> referencing a <a 24.1310 - href="#grid-line"><i>Grid line</i></a> not explicitly defined by a 24.1311 - ‘<a href="#grid-rows"><code 24.1312 - class=property>grid-rows</code></a>’ or ‘<a 24.1313 - href="#grid-columns"><code class=property>grid-columns</code></a>’ 24.1314 - property. The computed value includes any used values for named lines; 24.1315 - any duplicate names must be removed. User agents may use the repeat 24.1316 - syntax to avoid expansive string length due to implicit <a 24.1317 - href="#grid-track"><i>Grid track</i></a> creation, large spanning values 24.1318 - or high repeat counts specified by the author.</p> 24.1319 - 24.1320 - <p> The algorithm used to apply repeat syntax to used <a 24.1321 - href="#grid-track"><i>Grid track</i></a> values and <a 24.1322 - href="#grid-line"><i>Grid line</i></a> names is user agent specific. See 24.1323 - below for example inputs and outputs.</p> 24.1324 - 24.1325 - <pre class=example><style type="text/css"> 24.1326 - #grid { 24.1327 - width: 500px; 24.1328 - grid-columns: "a" auto "b" minmax(min-content, 1fr) "b" "c" "d" repeat(2, "e" 40px) repeat(5, auto); 24.1329 - } 24.1330 -</style> 24.1331 -<div id="grid"> 24.1332 - <div style="grid-column:1; width:50px"></div> 24.1333 - <div style="grid-column:9; width:50px"></div> 24.1334 -</div> 24.1335 -<script type="text/javascript"> 24.1336 - // Returns '"a" 50px "b" 320px "c" "d" repeat(2, "e" 40px) repeat(4, 0px) 50px'. 24.1337 - var gridElement = document.getElementById("grid"); 24.1338 - window.getComputedStyle(gridElement, null).getPropertyValue("grid-columns"); 24.1339 -</script></pre> 24.1340 - <!--End Section: Fraction Values: 'fr'--></div> 24.1341 - 24.1342 - <div class=section id=defining-grid-cells-with-a-template> 24.1343 - <h3 id=defining-grid-cells-with-a-template0><span class=secno>6.6. 24.1344 - </span>Defining Grid Cells with a Template</h3> 24.1345 - 24.1346 - <p> <a href="#grid-cell-concept"><i>Grid cells</i></a> can also be 24.1347 - defined explicitly using one-letter names via the ‘<a 24.1348 - href="#grid-template"><code 24.1349 - class=property>grid-template</code></a>’ property. The ‘<a 24.1350 - href="#grid-template"><code 24.1351 - class=property>grid-template</code></a>’ property provides a 24.1352 - visualization of the <a href="#grid-element"><i>Grid 24.1353 - element</i></a>’s structure while simultaneously defining the <a 24.1354 - href="#grid-cell-concept"><i>Grid cells</i></a> which can be used to 24.1355 - position and size the child elements of the Grid.</p> 24.1356 - 24.1357 - <p> In the following example, a ‘<a href="#grid-template"><code 24.1358 - class=property>grid-template</code></a>’ property is used to 24.1359 - create a page layout where cells are defined for header content 24.1360 - <code>h</code>, navigational content <code>n</code>, footer content 24.1361 - <code>f</code>, and main content <code>m</code>. A row is created for 24.1362 - every separate string listed for the grid-template property, and a 24.1363 - column is created for each letter in each string. Note that all strings 24.1364 - must be the same length, and non-rectangular grid-template regions are 24.1365 - not allowed and cause the declaration to be dropped. Accordingly, in the 24.1366 - following example, the template creates three rows, two columns, and 24.1367 - four cells. Columns are the tracks that run in the inline direction and 24.1368 - rows are the tracks running in the direction of block progression. See 24.1369 - Grid Writing Modes for more details.</p> 24.1370 - 24.1371 - <p> The ‘<a href="#grid-cell"><code 24.1372 - class=property>grid-cell</code></a>’ property is specified on <a 24.1373 - href="#grid-item"><i>Grid items</i></a> to position the <a 24.1374 - href="#grid-item"><i>Grid item</i></a> inside the explicitly named <a 24.1375 - href="#grid-cell-concept"><i>Grid cell</i></a>.</p> 24.1376 - 24.1377 - <pre class=example><style type="text/css"> 24.1378 - #grid { 24.1379 - display: grid; 24.1380 - grid-template: "hh" 24.1381 - "nm" 24.1382 - "ff" 24.1383 - } 24.1384 - #grid > a { 24.1385 - display:block; /* make anchor tags valid Grid Items */ 24.1386 - grid-cell: "n"; 24.1387 - } 24.1388 -</style></pre> 24.1389 - 24.1390 - <table class=propdef id=grid-template-property> 24.1391 - <tbody> 24.1392 - <tr> 24.1393 - <td>Name: 24.1394 - 24.1395 - <td><dfn id=grid-template>grid-template</dfn> 24.1396 - 24.1397 - <tr> 24.1398 - <td>Value: 24.1399 - 24.1400 - <td><string>+ | <dfn id=none-template>none</dfn> 24.1401 - 24.1402 - <tr> 24.1403 - <td>Initial: 24.1404 - 24.1405 - <td>none 24.1406 - 24.1407 - <tr> 24.1408 - <td>Applies to: 24.1409 - 24.1410 - <td>Grid elements 24.1411 - 24.1412 - <tr> 24.1413 - <td>Inherited: 24.1414 - 24.1415 - <td>no 24.1416 - 24.1417 - <tr> 24.1418 - <td>Percentages: 24.1419 - 24.1420 - <td>n/a 24.1421 - 24.1422 - <tr> 24.1423 - <td>Media: 24.1424 - 24.1425 - <td>visual, paged 24.1426 - 24.1427 - <tr> 24.1428 - <td>Computed value: 24.1429 - 24.1430 - <td>specified value 24.1431 - </table> 24.1432 - 24.1433 - <table class=propdef id=grid-cell-property> 24.1434 - <tbody> 24.1435 - <tr> 24.1436 - <td>Name: 24.1437 - 24.1438 - <td><dfn id=grid-cell>grid-cell</dfn> 24.1439 - 24.1440 - <tr> 24.1441 - <td>Value: 24.1442 - 24.1443 - <td><string> | <dfn id=none-cell>none</dfn> 24.1444 - 24.1445 - <tr> 24.1446 - <td>Initial: 24.1447 - 24.1448 - <td>none 24.1449 - 24.1450 - <tr> 24.1451 - <td>Applies to: 24.1452 - 24.1453 - <td>Grid Item elements 24.1454 - 24.1455 - <tr> 24.1456 - <td>Inherited: 24.1457 - 24.1458 - <td>no 24.1459 - 24.1460 - <tr> 24.1461 - <td>Percentages: 24.1462 - 24.1463 - <td>n/a 24.1464 - 24.1465 - <tr> 24.1466 - <td>Media: 24.1467 - 24.1468 - <td>visual, paged 24.1469 - 24.1470 - <tr> 24.1471 - <td>Computed value: 24.1472 - 24.1473 - <td>specified value 24.1474 - </table> 24.1475 - <!--End Section: Defining Grid Cells with a Template--></div> 24.1476 - <!--End Section: Defining Grid Rows and Columns--></div> 24.1477 - 24.1478 - <div class=section id=grid-item-placement> 24.1479 - <h2 id=placing-grid-items><span class=secno>7. </span>Placing Grid Items</h2> 24.1480 - 24.1481 - <p>The properties ‘<a href="#grid-row"><code 24.1482 - class=property>grid-row</code></a>’ and ‘<a 24.1483 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.1484 - are used to place <a href="#grid-item"><i>Grid items</i></a> in the Grid.</p> 24.1485 - 24.1486 - <table class=propdef id=grid-column-property> 24.1487 - <tbody> 24.1488 - <tr> 24.1489 - <td>Name: 24.1490 - 24.1491 - <td><dfn id=grid-column>grid-column</dfn> 24.1492 - 24.1493 - <tr> 24.1494 - <td>Value: 24.1495 - 24.1496 - <td>[ [ <integer> | <string> | <dfn 24.1497 - id=start-column-position>start</dfn> ] [ <integer> | 24.1498 - <string> | <dfn id=end-column-position>end</dfn> ]? ] | <dfn 24.1499 - id=auto-column-position>auto</dfn> 24.1500 - 24.1501 - <tr> 24.1502 - <td>Initial: 24.1503 - 24.1504 - <td>auto 24.1505 - 24.1506 - <tr> 24.1507 - <td>Applies to: 24.1508 - 24.1509 - <td>Grid Item elements 24.1510 - 24.1511 - <tr> 24.1512 - <td>Inherited: 24.1513 - 24.1514 - <td>no 24.1515 - 24.1516 - <tr> 24.1517 - <td>Percentages: 24.1518 - 24.1519 - <td>n/a 24.1520 - 24.1521 - <tr> 24.1522 - <td>Media: 24.1523 - 24.1524 - <td>visual, paged 24.1525 - 24.1526 - <tr> 24.1527 - <td>Computed value: 24.1528 - 24.1529 - <td>see text 24.1530 - </table> 24.1531 - 24.1532 - <table class=propdef id=grid-row-property> 24.1533 - <tbody> 24.1534 - <tr> 24.1535 - <td>Name: 24.1536 - 24.1537 - <td><dfn id=grid-row>grid-row</dfn> 24.1538 - 24.1539 - <tr> 24.1540 - <td>Value: 24.1541 - 24.1542 - <td>[ [ <integer> | <string> | <dfn 24.1543 - id=start-row-position>start</dfn> ] [ <integer> | <string> 24.1544 - | <dfn id=end-row-position>end</dfn> ]? ] | <dfn 24.1545 - id=auto-row-position>auto</dfn> 24.1546 - 24.1547 - <tr> 24.1548 - <td>Initial: 24.1549 - 24.1550 - <td>auto 24.1551 - 24.1552 - <tr> 24.1553 - <td>Applies to: 24.1554 - 24.1555 - <td>Grid Item elements 24.1556 - 24.1557 - <tr> 24.1558 - <td>Inherited: 24.1559 - 24.1560 - <td>no 24.1561 - 24.1562 - <tr> 24.1563 - <td>Percentages: 24.1564 - 24.1565 - <td>n/a 24.1566 - 24.1567 - <tr> 24.1568 - <td>Media: 24.1569 - 24.1570 - <td>visual, paged 24.1571 - 24.1572 - <tr> 24.1573 - <td>Computed value: 24.1574 - 24.1575 - <td>see text 24.1576 - </table> 24.1577 - 24.1578 - <p> ‘<a href="#grid-row"><code 24.1579 - class=property>grid-row</code></a>’ and ‘<a 24.1580 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.1581 - properties that refer to an undefined <a href="#grid-line"><i>Grid 24.1582 - line</i></a> will compute to their initial values.</p> 24.1583 - 24.1584 - <div class=section id=anonymous-grid-cells> 24.1585 - <h3 id=anonymous-grid-cells0><span class=secno>7.1. </span>Anonymous Grid 24.1586 - Cells</h3> 24.1587 - 24.1588 - <p> Each <a href="#grid-item"><i>Grid item</i></a> is contained by a <a 24.1589 - href="#grid-cell-concept"><i>Grid cell</i></a>, i.e. the <a 24.1590 - href="#grid-cell-concept"><i>Grid cell</i></a> serves as the containing 24.1591 - block for the <a href="#grid-item"><i>Grid item</i></a>. The dimensions 24.1592 - of an anonymous <a href="#grid-cell-concept"><i>Grid cell</i></a> are 24.1593 - determined by naming the starting and ending <a 24.1594 - href="#grid-line"><i>Grid lines</i></a> using the ‘<a 24.1595 - href="#grid-row"><code class=property>grid-row</code></a>’ and 24.1596 - ‘<a href="#grid-column"><code 24.1597 - class=property>grid-column</code></a>’ properties on the <a 24.1598 - href="#grid-item"><i>Grid item</i></a> which the <a 24.1599 - href="#grid-cell-concept"><i>Grid cell</i></a> surrounds. The starting 24.1600 - and ending lines may be referred to by a string name, if one was defined 24.1601 - by the author, the <a href="#start-column-position">start</a> and <a 24.1602 - href="#end-column-position">end</a> line keywords, or the <a 24.1603 - href="#grid-line"><i>Grid line</i></a>’s number.</p> 24.1604 - 24.1605 - <p> The following example positions the first <a 24.1606 - href="#grid-item"><i>Grid item</i></a> to cover all rows and columns of 24.1607 - the <a href="#grid-element"><i>Grid element</i></a> using the <a 24.1608 - href="#start-column-position">start</a> and <a 24.1609 - href="#end-column-position">end</a> keywords. The second <a 24.1610 - href="#grid-item"><i>Grid item</i></a> is positioned to cover the first 24.1611 - row. Note that when only the starting <a href="#grid-line"><i>Grid 24.1612 - line</i></a> of the ‘<a href="#grid-row"><code 24.1613 - class=property>grid-row</code></a>’ or ‘<a 24.1614 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.1615 - properties are specified for the <a href="#grid-cell-concept"><i>Grid 24.1616 - cell</i></a>, that the <a href="#grid-cell-concept"><i>Grid cell</i></a> 24.1617 - is assumed to extend to the subsequent <a href="#grid-line"><i>Grid 24.1618 - line</i></a>.</p> 24.1619 - 24.1620 - <pre class=example><style type="text/css"> 24.1621 - /* covers the <a 24.1622 - href="#grid-element"><i>Grid element</i></a>’s content box */ 24.1623 - #item1 { 24.1624 - grid-row: start end; 24.1625 - grid-column: start end; 24.1626 - } 24.1627 - 24.1628 - /* covers the first row */ 24.1629 - #item2 { 24.1630 - grid-row: start; /* extends to row Grid Line 2 */ 24.1631 - grid-column: start end; 24.1632 - } 24.1633 -</style></pre> 24.1634 - 24.1635 - <p> The next example defines rows for header and footer <a 24.1636 - href="#grid-item"><i>Grid items</i></a> sized to content, as well as a 24.1637 - main region that receives all remaining space. A single column which 24.1638 - receives all horizontal space in the Grid's content box is also defined. 24.1639 - </p> 24.1640 - 24.1641 - <pre class=example><style type="text/css"> 24.1642 - #grid { 24.1643 - display: grid; 24.1644 - grid-rows: "header" auto "main" 1fr "footer" auto; 24.1645 - grid-columns: 1fr; 24.1646 - } 24.1647 - 24.1648 - #header { grid-row: "header"; grid-column: start } 24.1649 - #main { grid-row: "main"; grid-column: start } 24.1650 - #footer { grid-row: "footer"; grid-column: start } 24.1651 - 24.1652 - /* Equivalent to the above using grid line numbers instead of names. */ 24.1653 - #header { grid-row: 1; grid-column: 1 } 24.1654 - #main { grid-row: 2; grid-column: 1 } 24.1655 - #footer { grid-row: 3; grid-column: 1 } 24.1656 -</style></pre> 24.1657 - <!--End Section: Anonymous Grid Cells--></div> 24.1658 - 24.1659 - <div id=grid-row-span-and-grid-column-span> 24.1660 - <h3 id=grid-row-span-and-grid-column-span0><span class=secno>7.2. 24.1661 - </span>Grid-row-span and Grid-column-span</h3> 24.1662 - 24.1663 - <p> As an alternative to specifying an ending line for a <a 24.1664 - href="#grid-cell-concept"><i>Grid cell</i></a> or <a 24.1665 - href="#grid-item"><i>Grid item</i></a>, ‘<a 24.1666 - href="#grid-row-span"><code 24.1667 - class=property>grid-row-span</code></a>’ and ‘<a 24.1668 - href="#grid-column-span"><code 24.1669 - class=property>grid-column-span</code></a>’ properties are 24.1670 - available to specify a distance (line count) from the starting line to 24.1671 - the ending line to define the dimensions of a <a 24.1672 - href="#grid-cell-concept"><i>Grid cell</i></a>. Note that when ‘<a 24.1673 - href="#grid-column-span"><code 24.1674 - class=property>grid-column-span</code></a>’ and a ‘<a 24.1675 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.1676 - ending line are both specified for a <a href="#grid-item"><i>Grid 24.1677 - item</i></a>, that the ending line has priority. In such cases the 24.1678 - computed value of ‘<a href="#grid-column-span"><code 24.1679 - class=property>grid-column-span</code></a>’ will be the <a 24.1680 - href="#grid-line"><i>Grid line</i></a> number of the specified column 24.1681 - ending line minus the <a href="#grid-line"><i>Grid line</i></a> number 24.1682 - of the specified column starting line. The same holds true for the 24.1683 - related row properties.</p> 24.1684 - 24.1685 - <pre class=example><style type="text/css"> 24.1686 -#item { 24.1687 - /* the following two property definitions are equivalent */ 24.1688 - /* both place the item between the first and third line */ 24.1689 - /* which is covering the first and second row of the Grid */ 24.1690 - grid-row: 1 3; 24.1691 - grid-row: 1; grid-row-span: 2; 24.1692 -} 24.1693 -</style></pre> 24.1694 - 24.1695 - <table class=propdef id=grid-column-span-property> 24.1696 - <tbody> 24.1697 - <tr> 24.1698 - <td>Name: 24.1699 - 24.1700 - <td><dfn id=grid-column-span>grid-column-span</dfn> 24.1701 - 24.1702 - <tr> 24.1703 - <td>Value: 24.1704 - 24.1705 - <td><integer> 24.1706 - 24.1707 - <tr> 24.1708 - <td>Initial: 24.1709 - 24.1710 - <td>1 24.1711 - 24.1712 - <tr> 24.1713 - <td>Applies to: 24.1714 - 24.1715 - <td>Grid Item elements 24.1716 - 24.1717 - <tr> 24.1718 - <td>Inherited: 24.1719 - 24.1720 - <td>no 24.1721 - 24.1722 - <tr> 24.1723 - <td>Percentages: 24.1724 - 24.1725 - <td>n/a 24.1726 - 24.1727 - <tr> 24.1728 - <td>Media: 24.1729 - 24.1730 - <td>visual, paged 24.1731 - 24.1732 - <tr> 24.1733 - <td>Computed value: 24.1734 - 24.1735 - <td>specified value 24.1736 - </table> 24.1737 - 24.1738 - <table class=propdef id=grid-row-span-property> 24.1739 - <tbody> 24.1740 - <tr> 24.1741 - <td>Name: 24.1742 - 24.1743 - <td><dfn id=grid-row-span>grid-row-span</dfn> 24.1744 - 24.1745 - <tr> 24.1746 - <td>Value: 24.1747 - 24.1748 - <td><integer> 24.1749 - 24.1750 - <tr> 24.1751 - <td>Initial: 24.1752 - 24.1753 - <td>1 24.1754 - 24.1755 - <tr> 24.1756 - <td>Applies to: 24.1757 - 24.1758 - <td>Grid Item elements 24.1759 - 24.1760 - <tr> 24.1761 - <td>Inherited: 24.1762 - 24.1763 - <td>no 24.1764 - 24.1765 - <tr> 24.1766 - <td>Percentages: 24.1767 - 24.1768 - <td>n/a 24.1769 - 24.1770 - <tr> 24.1771 - <td>Media: 24.1772 - 24.1773 - <td>visual, paged 24.1774 - 24.1775 - <tr> 24.1776 - <td>Computed value: 24.1777 - 24.1778 - <td>specified value 24.1779 - </table> 24.1780 - <!--End Section: Grid-row-span and Grid-column-span--></div> 24.1781 - 24.1782 - <div class=section id=grid-implicit-columns-and-rows> 24.1783 - <h3 id=implicit-columns-and-rows><span class=secno>7.3. </span>Implicit 24.1784 - Columns and Rows</h3> 24.1785 - 24.1786 - <div class=sidefigure> 24.1787 - <p> <img 24.1788 - alt="Image: A Grid with an implicit row and two implicit columns." 24.1789 - src="images/implicit-columns-and-rows.png"></p> 24.1790 - 24.1791 - <p class=caption>A Grid with an implicit row and two implicit columns.</p> 24.1792 - </div> 24.1793 - 24.1794 - <p> <a href="#grid-line"><i>Grid line</i></a> numbers referred to by 24.1795 - ‘<a href="#grid-row"><code 24.1796 - class=property>grid-row</code></a>’ or ‘<a 24.1797 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.1798 - properties on a <a href="#grid-item"><i>Grid item</i></a> are not 24.1799 - required to refer to a <a href="#grid-line"><i>Grid line</i></a> that 24.1800 - was defined using the ‘<a href="#grid-columns"><code 24.1801 - class=property>grid-columns</code></a>’ or ‘<a 24.1802 - href="#grid-rows"><code class=property>grid-rows</code></a>’ 24.1803 - properties on the <a href="#grid-element"><i>Grid element</i></a>. In 24.1804 - cases where the specified position is outside those explicitly specified 24.1805 - on the <a href="#grid-element"><i>Grid element</i></a>, implicit columns 24.1806 - and rows fill gaps added as needed to create additional <a 24.1807 - href="#grid-line"><i>Grid lines</i></a> until the reference can be 24.1808 - resolved. Note that quoted <a href="#grid-line"><i>Grid line</i></a> 24.1809 - names that don't resolve to an explicitly defined <a 24.1810 - href="#grid-line"><i>Grid line</i></a> are treated as though the author 24.1811 - specified the ‘<a href="#start-line"><code 24.1812 - class=css>start</code></a>’ <a href="#grid-line"><i>Grid 24.1813 - line</i></a> and don't trigger implicit <a href="#grid-track"><i>Grid 24.1814 - track</i></a> creation.</p> 24.1815 - 24.1816 - <p> Figure 10 illustrates the placement of <a href="#grid-item"><i>Grid 24.1817 - items</i></a> resulting from the markup shown in the following example. 24.1818 - Note that <a href="#grid-item"><i>Grid item</i></a> <code>B</code> is 24.1819 - positioned on <a href="#grid-line"><i>Grid line</i></a> 5 which creates 24.1820 - a 5th column to contain <a href="#grid-item"><i>Grid item</i></a> 24.1821 - <code>B</code>. Further, columns 3 and 4 are created as implicit 24.1822 - auto-width columns without content resulting in a used column width of 24.1823 - 0px.</p> 24.1824 - 24.1825 - <pre class=example><style type="text/css"> 24.1826 - #grid { display: grid; grid-columns: 20px; grid-rows: 20px } 24.1827 - #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start } 24.1828 - #B { grid-column: 5; grid-row: 1; grid-row-span: 2; } 24.1829 - #C { grid-column: 1; grid-row: 2; grid-column-span: 2; } 24.1830 -</style> 24.1831 - 24.1832 -<div id="grid"> 24.1833 - <div id="A">A</div> 24.1834 - <div id="B">B</div> 24.1835 - <div id="C">C</div> 24.1836 -</div></pre> 24.1837 - 24.1838 - <div id=defining-default-size-for-implicit-columns-and-rows> 24.1839 - <h4 id=defining-a-default-size-for-implicit-col><span class=secno>7.3.1. 24.1840 - </span>Defining a Default Size for Implicit Columns and Rows</h4> 24.1841 - 24.1842 - <p> By default, any implicit columns or rows created are auto sized to 24.1843 - content. The default size can be changed using the ‘<a 24.1844 - href="#grid-column-sizing"><code 24.1845 - class=property>grid-column-sizing</code></a>’ and ‘<a 24.1846 - href="#grid-row-sizing"><code 24.1847 - class=property>grid-row-sizing</code></a>’ properties. The 24.1848 - properties accept any valid single column or row sizing function.</p> 24.1849 - 24.1850 - <table class=propdef id=grid-column-sizing-property> 24.1851 - <tbody> 24.1852 - <tr> 24.1853 - <td>Name: 24.1854 - 24.1855 - <td><dfn id=grid-column-sizing>grid-column-sizing</dfn> 24.1856 - 24.1857 - <tr> 24.1858 - <td>Value: 24.1859 - 24.1860 - <td><track-minmax> (see <a 24.1861 - href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows 24.1862 - Properties</a>) 24.1863 - 24.1864 - <tr> 24.1865 - <td>Initial: 24.1866 - 24.1867 - <td>auto 24.1868 - 24.1869 - <tr> 24.1870 - <td>Applies to: 24.1871 - 24.1872 - <td>Grid elements 24.1873 - 24.1874 - <tr> 24.1875 - <td>Inherited: 24.1876 - 24.1877 - <td>no 24.1878 - 24.1879 - <tr> 24.1880 - <td>Percentages: 24.1881 - 24.1882 - <td>see <a href="#grid-columns-and-rows-properties">Grid Columns and 24.1883 - Grid Rows Properties</a> 24.1884 - 24.1885 - <tr> 24.1886 - <td>Media: 24.1887 - 24.1888 - <td>visual, paged 24.1889 - 24.1890 - <tr> 24.1891 - <td>Computed value: 24.1892 - 24.1893 - <td>see <a href="#computed-values-grid-rows-and-columns">Computed 24.1894 - Values for Grid-rows and Grid-columns</a> 24.1895 - </table> 24.1896 - 24.1897 - <table class=propdef id=grid-row-sizing-property> 24.1898 - <tbody> 24.1899 - <tr> 24.1900 - <td>Name: 24.1901 - 24.1902 - <td><dfn id=grid-row-sizing>grid-row-sizing</dfn> 24.1903 - 24.1904 - <tr> 24.1905 - <td>Value: 24.1906 - 24.1907 - <td><track-minmax> (see <a 24.1908 - href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows 24.1909 - Properties</a>) 24.1910 - 24.1911 - <tr> 24.1912 - <td>Initial: 24.1913 - 24.1914 - <td>auto 24.1915 - 24.1916 - <tr> 24.1917 - <td>Applies to: 24.1918 - 24.1919 - <td>Grid elements 24.1920 - 24.1921 - <tr> 24.1922 - <td>Inherited: 24.1923 - 24.1924 - <td>no 24.1925 - 24.1926 - <tr> 24.1927 - <td>Percentages: 24.1928 - 24.1929 - <td>see <a href="#grid-columns-and-rows-properties">Grid Columns and 24.1930 - Grid Rows Properties</a> 24.1931 - 24.1932 - <tr> 24.1933 - <td>Media: 24.1934 - 24.1935 - <td>visual, paged 24.1936 - 24.1937 - <tr> 24.1938 - <td>Computed value: 24.1939 - 24.1940 - <td>see <a href="#computed-values-grid-rows-and-columns">Computed 24.1941 - Values for Grid-rows and Grid-columns</a> 24.1942 - </table> 24.1943 - <!--End Section: Defining a Default Size for Implicit Columns and Rows--> 24.1944 - </div> 24.1945 - <!--End Section: Implicit Columns and Rows--></div> 24.1946 - 24.1947 - <div class=section id=automatic-placement-of-grid-items> 24.1948 - <h3 id=automatic-placement-of-grid-items0><span class=secno>7.4. 24.1949 - </span>Automatic Placement of Grid Items</h3> 24.1950 - 24.1951 - <p> <a href="#grid-item"><i>Grid items</i></a> can be automatically 24.1952 - placed into an unoccupied space of the Grid. The ‘<a 24.1953 - href="#grid-flow"><code class=property>grid-flow</code></a>’ 24.1954 - property controls the direction in which the search for unoccupied space 24.1955 - takes place, and whether rows or columns are added as needed to 24.1956 - accomodate the content. Note that <a href="#grid-cell-concept"><i>Grid 24.1957 - cells</i></a> cannot be automatically placed.</p> 24.1958 - 24.1959 - <p> A ‘<a href="#grid-flow"><code 24.1960 - class=property>grid-flow</code></a>’ value of ‘<a 24.1961 - href="#rows"><code class=css>rows</code></a>’ will search across 24.1962 - columns and then rows for unoccupied space, and will create additional 24.1963 - rows as needed to accomodate content. Similarly, a ‘<a 24.1964 - href="#grid-flow"><code class=property>grid-flow</code></a>’ value 24.1965 - of ‘<a href="#columns"><code class=css>columns</code></a>’ 24.1966 - searches rows first and creates additional columns as needed until 24.1967 - sufficient space is found.</p> 24.1968 - 24.1969 - <table class=propdef id=grid-flow-property> 24.1970 - <tbody> 24.1971 - <tr> 24.1972 - <td>Name: 24.1973 - 24.1974 - <td><dfn id=grid-flow>grid-flow</dfn> 24.1975 - 24.1976 - <tr> 24.1977 - <td>Value: 24.1978 - 24.1979 - <td><dfn id=none-flow>none</dfn> | <dfn id=rows>rows</dfn> | <dfn 24.1980 - id=columns>columns</dfn> 24.1981 - 24.1982 - <tr> 24.1983 - <td>Initial: 24.1984 - 24.1985 - <td>none 24.1986 - 24.1987 - <tr> 24.1988 - <td>Applies to: 24.1989 - 24.1990 - <td>Grid elements 24.1991 - 24.1992 - <tr> 24.1993 - <td>Inherited: 24.1994 - 24.1995 - <td>no 24.1996 - 24.1997 - <tr> 24.1998 - <td>Percentages: 24.1999 - 24.2000 - <td>n/a 24.2001 - 24.2002 - <tr> 24.2003 - <td>Media: 24.2004 - 24.2005 - <td>visual, paged 24.2006 - 24.2007 - <tr> 24.2008 - <td>Computed value: 24.2009 - 24.2010 - <td>specified value 24.2011 - </table> 24.2012 - 24.2013 - <div class=sidefigure> 24.2014 - <p> <img alt="Image: A form arranged using automatic placement." 24.2015 - src="images/auto-placed-form.png"></p> 24.2016 - 24.2017 - <p class=caption>A form arranged using automatic placement.</p> 24.2018 - </div> 24.2019 - 24.2020 - <p> The search for unoccupied space is conducted one <a 24.2021 - href="#grid-item"><i>Grid item</i></a> at a time. First <a 24.2022 - href="#grid-item"><i>Grid items</i></a> which have a constraint on 24.2023 - either their ‘<a href="#grid-row"><code 24.2024 - class=property>grid-row</code></a>’ or ‘<a 24.2025 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.2026 - are placed, followed by <a href="#grid-item"><i>Grid items</i></a> which 24.2027 - have both a ‘<a href="#grid-row"><code 24.2028 - class=property>grid-row</code></a>’ and ‘<a 24.2029 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.2030 - value of ‘<a href="#auto-row-position"><code 24.2031 - class=css>auto</code></a>’. If ‘<a href="#grid-flow"><code 24.2032 - class=property>grid-flow</code></a>’ is ‘<a 24.2033 - href="#rows"><code class=css>rows</code></a>’, <a 24.2034 - href="#grid-item"><i>Grid items</i></a> having an ‘<a 24.2035 - href="#auto-row-position"><code class=css>auto</code></a>’ value 24.2036 - for ‘<a href="#grid-row"><code 24.2037 - class=property>grid-row</code></a>’ are placed before those with 24.2038 - an auto value for ‘<a href="#grid-column"><code 24.2039 - class=property>grid-column</code></a>’. The reverse is true when 24.2040 - ‘<a href="#grid-flow"><code 24.2041 - class=property>grid-flow</code></a>’ is ‘<a 24.2042 - href="#columns"><code class=css>columns</code></a>’ .</p> 24.2043 - 24.2044 - <p> In the following example, there are three columns, each auto-sized to 24.2045 - their contents. No rows are explicitly defined. The ‘<a 24.2046 - href="#grid-flow"><code class=property>grid-flow</code></a>’ 24.2047 - property is ‘<a href="#rows"><code 24.2048 - class=css>rows</code></a>’ which instructs the grid to search 24.2049 - across its three columns starting with the first row, then the next, 24.2050 - adding rows as needed until sufficient space is located to accomodate 24.2051 - the position of any auto-placed <a href="#grid-item"><i>Grid 24.2052 - item</i></a>. Figure 11 illustrates the result.</p> 24.2053 - 24.2054 - <pre class=example><style type="text/css"> 24.2055 - form { 24.2056 - display: grid; 24.2057 - grid-columns: "labels" auto "controls" auto "oversized" auto; 24.2058 - grid-flow: rows 24.2059 - } 24.2060 - form > * { 24.2061 - /* Ensure that children of the grid are all valid grid items by setting */ 24.2062 - /* display to 'block'. */ 24.2063 - display: block; 24.2064 - } 24.2065 - form > input, form > select { 24.2066 - /* Place all controls in the "controls" column and automatically find the */ 24.2067 - /* next available row. */ 24.2068 - grid-column: "controls"; 24.2069 - grid-row: auto 24.2070 - } 24.2071 - form > label { 24.2072 - /* Place all labels in the "labels" column and automatically find the next 24.2073 - /* available row. */ 24.2074 - grid-column: "labels"; 24.2075 - grid-row: auto 24.2076 - } 24.2077 - 24.2078 - #department { 24.2079 - /* Auto place this item in the "oversized" column in the first row where a cell that */ 24.2080 - /* spans three rows won't overlap other explicitly placed items or cells or any items */ 24.2081 - /* automatically placed prior to this cell. */ 24.2082 - grid-column: "oversized"; 24.2083 - grid-row: auto; 24.2084 - grid-row-span: 3; 24.2085 - } 24.2086 - 24.2087 - /* Place all the buttons of the form in the explicitly defined grid cell. */ 24.2088 - #buttons { 24.2089 - grid-row: auto; 24.2090 - 24.2091 - /* Ensure the button cell spans the entire grid element in the column direction. */ 24.2092 - grid-column: start end; 24.2093 - grid-column-align: end 24.2094 - } 24.2095 -</style> 24.2096 -<form action="#"> 24.2097 - <label for="firstname">First name:</label> 24.2098 - <input type="text" id="firstname" name="firstname" /> 24.2099 - <label for="lastname">Last name:</label> 24.2100 - <input type="text" id="lastname" name="lastname" /> 24.2101 - <label for="address">Address:</label> 24.2102 - <input type="text" id="address" name="address" /> 24.2103 - <label for="address2">Address 2:</label> 24.2104 - <input type="text" id="address2" name="address2" /> 24.2105 - <label for="city">City:</label> 24.2106 - <input type="text" id="city" name="city" /> 24.2107 - <label for="state">State:</label> 24.2108 - <select type="text" id="state" name="state"> 24.2109 - <option value="WA">Washington</option> 24.2110 - </select> 24.2111 - <label for="zip">Zip:</label> 24.2112 - <input type="text" id="zip" name="zip" /> 24.2113 - 24.2114 - <div id="department"> 24.2115 - <label for="department">Department:</label> 24.2116 - <select id="department" name="department" multiple> 24.2117 - <option value="finance">Finance</option> 24.2118 - <option value="humanresources">Human Resources</option> 24.2119 - <option value="marketing">Marketing</option> 24.2120 - <option value="payroll">Payroll</option> 24.2121 - <option value="shipping">Shipping</option> 24.2122 - </select> 24.2123 - </div> 24.2124 - 24.2125 - <div id="buttons"> 24.2126 - <button id="cancel">Cancel</button> 24.2127 - <button id="back">Back</button> 24.2128 - <button id="next">Next</button> 24.2129 - </div> 24.2130 -</form></pre> 24.2131 - 24.2132 - <div class=section id=automatic-grid-item-placement-algorithm> 24.2133 - <h4 id=automatic-grid-item-placement-algorithm0><span class=secno>7.4.1. 24.2134 - </span>Automatic Grid Item Placement Algorithm</h4> 24.2135 - 24.2136 - <p> The following summarizes the algorithm for auto placement of <a 24.2137 - href="#grid-item"><i>Grid items</i></a>. For each <a 24.2138 - href="#grid-item"><i>Grid item</i></a> in source order:</p> 24.2139 - 24.2140 - <ol> 24.2141 - <li>If both ‘<a href="#grid-row"><code 24.2142 - class=property>grid-row</code></a>’ and ‘<a 24.2143 - href="#grid-column"><code class=property>grid-column</code></a>’ 24.2144 - are not ‘<a href="#auto-row-position"><code 24.2145 - class=css>auto</code></a>’ the <a href="#grid-item"><i>Grid 24.2146 - item</i></a> is placed as specified: 24.2147 - <ol> 24.2148 - <li>If ‘<a href="#grid-row"><code 24.2149 - class=property>grid-row</code></a>’ is not ‘<a 24.2150 - href="#auto-row-position"><code class=css>auto</code></a>’, 24.2151 - the <a href="#grid-item"><i>Grid item</i></a> is placed between the 24.2152 - starting and ending lines specified by the ‘<a 24.2153 - href="#grid-row"><code class=property>grid-row</code></a>’ 24.2154 - property. An implicit <a href="#grid-line"><i>Grid line</i></a> 24.2155 - number is assigned as the starting line for ‘<a 24.2156 - href="#grid-column"><code 24.2157 - class=property>grid-column</code></a>’ such that the <a 24.2158 - href="#grid-item"><i>Grid item</i></a> does not overlap <a 24.2159 - href="#grid-item"><i>Grid items</i></a> already placed in the Grid. 24.2160 - If necessary, new column <a href="#grid-line"><i>Grid lines</i></a> 24.2161 - are created to satisfy this constraint. 24.2162 - 24.2163 - <li>If ‘<a href="#grid-column"><code 24.2164 - class=property>grid-column</code></a>’ is not ‘<a 24.2165 - href="#auto-row-position"><code class=css>auto</code></a>’, 24.2166 - the <a href="#grid-item"><i>Grid item</i></a> is placed between the 24.2167 - starting and ending lines specified by the ‘<a 24.2168 - href="#grid-column"><code 24.2169 - class=property>grid-column</code></a>’ property. An implicit 24.2170 - <a href="#grid-line"><i>Grid line</i></a> number is assigned as the 24.2171 - starting line for ‘<a href="#grid-row"><code 24.2172 - class=property>grid-row</code></a>’ such that the <a 24.2173 - href="#grid-item"><i>Grid item</i></a> does not overlap <a 24.2174 - href="#grid-item"><i>Grid items</i></a> already placed in the Grid. 24.2175 - If necessary, new row <a href="#grid-line"><i>Grid lines</i></a> are 24.2176 - created to satisfy this constraint. 24.2177 - </ol> 24.2178 - 24.2179 - <li>Otherwise when both ‘<a href="#grid-column"><code 24.2180 - class=property>grid-column</code></a>’ and ‘<a 24.2181 - href="#grid-row"><code class=property>grid-row</code></a>’ are 24.2182 - ‘<a href="#auto-row-position"><code 24.2183 - class=css>auto</code></a>’, beginning with the implicit <a 24.2184 - href="#grid-line"><i>Grid line</i></a> numbers of the previously 24.2185 - placed <a href="#grid-item"><i>Grid item</i></a>, or (1, 1) if this is 24.2186 - the first <a href="#grid-item"><i>Grid item</i></a> to be 24.2187 - automatically placed: 24.2188 - <ol> 24.2189 - <li>Place the <a href="#grid-item"><i>Grid item</i></a> in the <a 24.2190 - href="#grid-cell-concept"><i>Grid cell</i></a> currently defined by 24.2191 - the ‘<a href="#grid-row"><code 24.2192 - class=property>grid-row</code></a>’ and ‘<a 24.2193 - href="#grid-column"><code 24.2194 - class=property>grid-column</code></a>’ auto position if not 24.2195 - already occupied by another <a href="#grid-item"><i>Grid 24.2196 - item</i></a>. 24.2197 - 24.2198 - <li>Otherwise: 24.2199 - <ol> 24.2200 - <li>If grid-flow is ‘<a href="#rows"><code 24.2201 - class=css>rows</code></a>’, increment the ‘<a 24.2202 - href="#grid-column"><code 24.2203 - class=property>grid-column</code></a>’. If the ‘<a 24.2204 - href="#grid-column"><code 24.2205 - class=property>grid-column</code></a>’ value is outside of 24.2206 - bounds of the grid (as defined at this point, explicitly or by 24.2207 - previously placed items), set ‘<a href="#grid-column"><code 24.2208 - class=property>grid-column</code></a>’ to one and increment 24.2209 - ‘<a href="#grid-row"><code 24.2210 - class=property>grid-row</code></a>’ (creating new row <a 24.2211 - href="#grid-line"><i>Grid lines</i></a> as needed). 24.2212 - 24.2213 - <li>If grid-flow is ‘<a href="#columns"><code 24.2214 - class=css>columns</code></a>’, increment ‘<a 24.2215 - href="#grid-row"><code class=property>grid-row</code></a>’. 24.2216 - If the ‘<a href="#grid-row"><code 24.2217 - class=property>grid-row</code></a>’ value is outside of 24.2218 - bounds of the grid (as defined at this point, explicitly or by 24.2219 - previously placed items), set ‘<a href="#grid-row"><code 24.2220 - class=property>grid-row</code></a>’ to one and increment 24.2221 - ‘<a href="#grid-column"><code 24.2222 - class=property>grid-column</code></a>’ (creating new column 24.2223 - <a href="#grid-line"><i>Grid lines</i></a> as needed). 24.2224 - </ol> 24.2225 - </ol> 24.2226 - </ol> 24.2227 - <!--End Section: Automatic Grid Item Placement Algorithm--></div> 24.2228 - <!--End Section: Grid Item Auto Placement--></div> 24.2229 - <!--End Section: Grid Item Placement--></div> 24.2230 - 24.2231 - <div class=section id=grid-item-alignment> 24.2232 - <h2 id=grid-item-alignment0><span class=secno>8. </span>Grid Item 24.2233 - Alignment</h2> 24.2234 - 24.2235 - <div class=sidefigure> 24.2236 - <div class=figure> 24.2237 - <p> <img alt="Image: Latin-based language row and column orientation." 24.2238 - src="images/horizontal-tb-dir-ltr.png"></p> 24.2239 - 24.2240 - <p class=caption>Latin-based language row and column orientation.</p> 24.2241 - </div> 24.2242 - 24.2243 - <div class=figure> 24.2244 - <p> <img alt="Image: Arabic language row and column orientation." 24.2245 - src="images/horizontal-tb-dir-rtl.png"></p> 24.2246 - 24.2247 - <p class=caption>Arabic language row and column orientation.</p> 24.2248 - </div> 24.2249 - 24.2250 - <div class=figure> 24.2251 - <p> <img alt="Image: East Asian language row and column orientation." 24.2252 - src="images/vertical-rl.png"></p> 24.2253 - 24.2254 - <p class=caption>East Asian language row and column orientation.</p> 24.2255 - </div> 24.2256 - </div> 24.2257 - 24.2258 - <p> A <a href="#grid-item"><i>Grid item</i></a>’s alignment within 24.2259 - its Cell can be controlled by using the ‘<a 24.2260 - href="#grid-column-align"><code 24.2261 - class=property>grid-column-align</code></a>’ and ‘<a 24.2262 - href="#grid-row-align"><code 24.2263 - class=property>grid-row-align</code></a>’ properties. Alignment 24.2264 - refers to the logical edges of the <a href="#grid-item"><i>Grid 24.2265 - item</i></a>’s Cell.</p> 24.2266 - 24.2267 - <p> The ‘<a href="#start-row-align"><code 24.2268 - class=css>start</code></a>’ edge of a column is defined by the text 24.2269 - flow direction. The ‘<a href="#start-row-align"><code 24.2270 - class=css>start</code></a>’ edge of a row is defined by block flow 24.2271 - direction. The alignment values refer to the edge of the <a 24.2272 - href="#grid-item"><i>Grid item</i></a>’s Cell against which the <a 24.2273 - href="#grid-item"><i>Grid item</i></a> will align one of its edges. Which 24.2274 - edge of the <a href="#grid-item"><i>Grid item</i></a> actually aligns 24.2275 - against the specified edge of the Cell is dependent on whether the <a 24.2276 - href="#grid-item"><i>Grid item</i></a> shares the same inline text 24.2277 - direction and block flow direction as the <a href="#grid-element"><i>Grid 24.2278 - element</i></a>. All descriptions below assume that the <a 24.2279 - href="#grid-item"><i>Grid item</i></a> shares the same inline text 24.2280 - direction and block flow direction as the <a href="#grid-element"><i>Grid 24.2281 - element</i></a>. Refer to the <a 24.2282 - href="http://dev.w3.org/csswg/css3-writing-modes/">CSS Writing Modes 24.2283 - Module Level 3</a> for more details about the relationship between parent 24.2284 - and child elements with differing writing-modes, and for the definitions 24.2285 - of inline direction and block flow direction.</p> 24.2286 - 24.2287 - <p> Figures 12, 13, and 14 illustrate the placement and orientation of the 24.2288 - <a href="#grid-element"><i>Grid element</i></a>’s rows, columns, 24.2289 - and <a href="#grid-item"><i>Grid items</i></a> using different writing 24.2290 - modes on the <a href="#grid-element"><i>Grid element</i></a>. In each of 24.2291 - the figures, the markup shown in the following example is used to place 24.2292 - <a href="#grid-item"><i>Grid item</i></a> A in column 1, row 1, and <a 24.2293 - href="#grid-item"><i>Grid item</i></a> B in column 2, row 2. <a 24.2294 - href="#grid-item"><i>Grid item</i></a> A is aligned in each figure to the 24.2295 - starting edges of its row and column. <a href="#grid-item"><i>Grid 24.2296 - item</i></a> B is aligned in each figure to the ending edges of its row 24.2297 - and column.</p> 24.2298 - 24.2299 - <pre class=example><style type="text/css"> 24.2300 - #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr } 24.2301 - #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start } 24.2302 - #B { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: end } 24.2303 -</style> 24.2304 - 24.2305 -<div id="grid"> 24.2306 - <div id="A">A</div> 24.2307 - <div id="B">B</div> 24.2308 -</div></pre> 24.2309 - 24.2310 - <table class=propdef id=grid-column-align-property> 24.2311 - <tbody> 24.2312 - <tr> 24.2313 - <td>Name: 24.2314 - 24.2315 - <td><dfn id=grid-column-align>grid-column-align</dfn> 24.2316 - 24.2317 - <tr> 24.2318 - <td>Value: 24.2319 - 24.2320 - <td><dfn id=start-column-align>start</dfn> | <dfn 24.2321 - id=end-column-align>end</dfn> | <dfn 24.2322 - id=center-column-align>center</dfn> | <dfn 24.2323 - id=stretch-column-align>stretch</dfn> 24.2324 - 24.2325 - <tr> 24.2326 - <td>Initial: 24.2327 - 24.2328 - <td>‘<a href="#stretch-column-align"><code 24.2329 - class=css>stretch</code></a>’ 24.2330 - 24.2331 - <tr> 24.2332 - <td>Applies to: 24.2333 - 24.2334 - <td>Grid Item elements 24.2335 - 24.2336 - <tr> 24.2337 - <td>Inherited: 24.2338 - 24.2339 - <td>no 24.2340 - 24.2341 - <tr> 24.2342 - <td>Percentages: 24.2343 - 24.2344 - <td>n/a 24.2345 - 24.2346 - <tr> 24.2347 - <td>Media: 24.2348 - 24.2349 - <td>visual, paged 24.2350 - 24.2351 - <tr> 24.2352 - <td>Computed value: 24.2353 - 24.2354 - <td>specified value 24.2355 - </table> 24.2356 - 24.2357 - <ul> 24.2358 - <li>‘<a href="#start-column-align"><code 24.2359 - class=css>start</code></a>’ aligns the starting edge of the <a 24.2360 - href="#grid-item"><i>Grid item</i></a>’s margin box to the 24.2361 - starting edge of the <a href="#grid-item"><i>Grid item</i></a>’s 24.2362 - column. 24.2363 - 24.2364 - <li>‘<a href="#end-column-align"><code 24.2365 - class=css>end</code></a>’ aligns the end edge of the <a 24.2366 - href="#grid-item"><i>Grid item</i></a>’s margin box to the end 24.2367 - edge of the <a href="#grid-item"><i>Grid item</i></a>’s column. 24.2368 - 24.2369 - <li>‘<a href="#center-column-align"><code 24.2370 - class=css>center</code></a>’ places the center of the <a 24.2371 - href="#grid-item"><i>Grid item</i></a>’s margin box at the center 24.2372 - of the the <a href="#grid-item"><i>Grid item</i></a>’s column. 24.2373 - 24.2374 - <li>‘<a href="#stretch-column-align"><code 24.2375 - class=css>stretch</code></a>’ ensures that the <a 24.2376 - href="#grid-item"><i>Grid item</i></a>’s margin box is equal to 24.2377 - the size of the <a href="#grid-item"><i>Grid item</i></a>’s 24.2378 - column. 24.2379 - </ul> 24.2380 - 24.2381 - <table class=propdef id=grid-row-align-property> 24.2382 - <tbody> 24.2383 - <tr> 24.2384 - <td>Name: 24.2385 - 24.2386 - <td><dfn id=grid-row-align>grid-row-align</dfn> 24.2387 - 24.2388 - <tr> 24.2389 - <td>Value: 24.2390 - 24.2391 - <td><dfn id=start-row-align>start</dfn> | <dfn 24.2392 - id=end-row-align>end</dfn> | <dfn id=center-row-align>center</dfn> | 24.2393 - <dfn id=stretch-row-align>stretch</dfn> 24.2394 - 24.2395 - <tr> 24.2396 - <td>Initial: 24.2397 - 24.2398 - <td>‘<a href="#stretch-row-align"><code 24.2399 - class=css>stretch</code></a>’ 24.2400 - 24.2401 - <tr> 24.2402 - <td>Applies to: 24.2403 - 24.2404 - <td>Grid Item elements 24.2405 - 24.2406 - <tr> 24.2407 - <td>Inherited: 24.2408 - 24.2409 - <td>no 24.2410 - 24.2411 - <tr> 24.2412 - <td>Percentages: 24.2413 - 24.2414 - <td>n/a 24.2415 - 24.2416 - <tr> 24.2417 - <td>Media: 24.2418 - 24.2419 - <td>visual, paged 24.2420 - 24.2421 - <tr> 24.2422 - <td>Computed value: 24.2423 - 24.2424 - <td>specified value 24.2425 - </table> 24.2426 - 24.2427 - <ul> 24.2428 - <li>‘<a href="#start-row-align"><code 24.2429 - class=css>start</code></a>’ aligns the starting edge of the <a 24.2430 - href="#grid-item"><i>Grid item</i></a>’s margin box to the 24.2431 - starting edge of the <a href="#grid-item"><i>Grid item</i></a>’s 24.2432 - row. 24.2433 - 24.2434 - <li>‘<a href="#end-row-align"><code class=css>end</code></a>’ 24.2435 - aligns the end edge of the <a href="#grid-item"><i>Grid 24.2436 - item</i></a>’s margin box to the end edge of the <a 24.2437 - href="#grid-item"><i>Grid item</i></a>’s row. 24.2438 - 24.2439 - <li>‘<a href="#center-row-align"><code 24.2440 - class=css>center</code></a>’ places the center of the <a 24.2441 - href="#grid-item"><i>Grid item</i></a>’s margin box at the center 24.2442 - of the the <a href="#grid-item"><i>Grid item</i></a>’s row. 24.2443 - 24.2444 - <li>‘<a href="#stretch-row-align"><code 24.2445 - class=css>stretch</code></a>’ ensures that the <a 24.2446 - href="#grid-item"><i>Grid item</i></a>’s margin box is equal to 24.2447 - the size of the <a href="#grid-item"><i>Grid item</i></a>’s row. 24.2448 - </ul> 24.2449 - 24.2450 - <div class=section id=calculating-size-of-grid-item> 24.2451 - <h3 id=calculating-the-size-of-grid-items><span class=secno>8.1. 24.2452 - </span>Calculating the Size of Grid Items</h3> 24.2453 - 24.2454 - <p> The values ‘<a href="#start-row-align"><code 24.2455 - class=css>start</code></a>’, ‘<a href="#end-row-align"><code 24.2456 - class=css>end</code></a>’, and ‘<a 24.2457 - href="#center-row-align"><code class=css>center</code></a>’ all 24.2458 - cause the <a href="#grid-item"><i>Grid item</i></a> to produce a box 24.2459 - sized shrink-to-fit for its cell in accordance with the <a 24.2460 - href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a>. 24.2461 - Note that percentage lengths specified on a <a href="#grid-item"><i>Grid 24.2462 - item</i></a> resolve against the dimensions of the <a 24.2463 - href="#grid-cell-concept"><i>Grid cell</i></a> (i.e. the <a 24.2464 - href="#grid-cell-concept"><i>Grid cell</i></a> serves as the containing 24.2465 - block for the <a href="#grid-item"><i>Grid item</i></a>). Percentages 24.2466 - specified for margin-top, padding-top, margin-bottom, and padding-bottom 24.2467 - resolve against the height of the grid cell, rather than the width of 24.2468 - the grid cell. If the ‘<a href="#min-content"><code 24.2469 - class=property>min-content</code></a>’ size of the <a 24.2470 - href="#grid-item"><i>Grid item</i></a>’s box is greater than the 24.2471 - size of its Cell, it will overflow the bounds of its Cell in a direction 24.2472 - determined by its alignment.</p> 24.2473 - 24.2474 - <p> A value of ‘<a href="#stretch-row-align"><code 24.2475 - class=property>stretch</code></a>’ causes the <a 24.2476 - href="#grid-item"><i>Grid item</i></a>’s width to shrink or grow 24.2477 - in accordance with the equation for calculating containing block width 24.2478 - described in <a href="http://www.w3.org/TR/css3-box/#blockwidth">section 24.2479 - 9.3 of the CSS3 Box Model</a>. Note that this calculation is symmetric 24.2480 - for both the width and height of the <a href="#grid-item"><i>Grid 24.2481 - item</i></a>.</p> 24.2482 - <!--End Section: Grid Item Alignment and Overflow--></div> 24.2483 - <!--End Section: Grid Item Alignment--></div> 24.2484 - 24.2485 - <div class=section id=drawing-order-of-grid-items> 24.2486 - <h2 id=drawing-order-of-grid-items0><span class=secno>9. </span>Drawing 24.2487 - Order of Grid Items</h2> 24.2488 - 24.2489 - <div class=sidefigure> 24.2490 - <p> <img 24.2491 - alt="Image: Drawing order controlled by z-index and source order." 24.2492 - src="images/drawing-order.png"></p> 24.2493 - 24.2494 - <p class=caption>Drawing order controlled by z-index and source order.</p> 24.2495 - </div> 24.2496 - 24.2497 - <p> <a href="#grid-item"><i>Grid items</i></a> do not directly affect each 24.2498 - other's placement in the <a href="#grid-element"><i>Grid element</i></a>. 24.2499 - A <a href="#grid-item"><i>Grid item</i></a> may affect the position of a 24.2500 - <a href="#grid-line"><i>Grid line</i></a> in a column or row that uses a 24.2501 - contents-based relative size, which in turn affects the position or size 24.2502 - of another <a href="#grid-item"><i>Grid item</i></a>, but there is no 24.2503 - direct interaction between <a href="#grid-item"><i>Grid items</i></a>. <a 24.2504 - href="#grid-item"><i>Grid items</i></a> may overlap because the <a 24.2505 - href="#grid-item"><i>Grid item</i></a>’s Cell is defined to 24.2506 - intersect with the Cell of another <a href="#grid-item"><i>Grid 24.2507 - item</i></a>. <a href="#grid-item"><i>Grid item</i></a> boxes in 24.2508 - non-intersecting Cells may also overlap because of negative margins.</p> 24.2509 - 24.2510 - <p> In cases where boxes overlap, <a 24.2511 - href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">‘<code 24.2512 - class=property>z-index</code>’</a> provides control over the 24.2513 - drawing order of <a href="#grid-item"><i>Grid items</i></a>. Both <a 24.2514 - href="#grid-element"><i>Grid elements</i></a> and <a 24.2515 - href="#grid-item"><i>Grid items</i></a> generate a stacking context as 24.2516 - described for floats (step 5, section 14) in the <a 24.2517 - href="http://www.w3.org/TR/2007/WD-css3-box-20070809/#stacking">CSS3 Box 24.2518 - Model</a>.</p> 24.2519 - 24.2520 - <p> Figure 15 illustrates the drawing order of the markup shown in the 24.2521 - following example.</p> 24.2522 - 24.2523 - <pre class=example><style type="text/css"> 24.2524 - #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr } 24.2525 - #A { grid-column: 1; grid-row: 2; grid-column-span: 2; grid-row-align: end } 24.2526 - #B { grid-column: 1; grid-row: 1; z-index: 10 } 24.2527 - #C { grid-column: 2; grid-row: 1; grid-row-align: start; margin-left: -20px } 24.2528 - #D { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: start } 24.2529 - #E { grid-column: 1; grid-row: 1; 24.2530 - grid-column-span: 2; grid-row-span: 2; z-index: 5; 24.2531 - grid-column-align: center; grid-row-align: center 24.2532 - } 24.2533 -</style> 24.2534 - 24.2535 -<div id="grid"> 24.2536 - <div id="A">A</div> 24.2537 - <div id="B">B</div> 24.2538 - <div id="C">C</div> 24.2539 - <div id="D">D</div> 24.2540 - <div id="E">E</div> 24.2541 -</div></pre> 24.2542 - <!--End Section: Drawing Order of Grid Items--></div> 24.2543 - 24.2544 - <div class=section id=calculating-size-of-grid-tracks> 24.2545 - <h2 id=calculating-the-size-of-grid-tracks><span class=secno>10. 24.2546 - </span>Calculating the Size of Grid Tracks</h2> 24.2547 - 24.2548 - <div class=section 24.2549 - id=definition-of-terms-for-grid-track-sizing-calculations> 24.2550 - <h3 id=definition-of-terms-for-use-in-calculati><span class=secno>10.1. 24.2551 - </span>Definition of Terms for use in Calculating Grid Track Sizes</h3> 24.2552 - 24.2553 - <dl> 24.2554 - <dt> <dfn id=AvailableSpace-definition>AvailableSpace</dfn> 24.2555 - 24.2556 - <dd>The <a href="#grid-element"><i>Grid element</i></a>’s content 24.2557 - box size in the applicable dimension. 24.2558 - 24.2559 - <dt> <dfn 24.2560 - id=MaxTrackSizingFunction-definition>MaxTrackSizingFunction</dfn> 24.2561 - 24.2562 - <dd>One of the <a 24.2563 - href="#grid-columns-and-rows-properties"><track-breadth></a> 24.2564 - sizing functions assigned as the maximum breadth of a <a 24.2565 - href="#grid-track"><i>Grid track</i></a>. 24.2566 - 24.2567 - <dt> <dfn 24.2568 - id=MinTrackSizingFunction-definition>MinTrackSizingFunction</dfn> 24.2569 - 24.2570 - <dd>One of the <a 24.2571 - href="#grid-columns-and-rows-properties"><track-breadth></a> 24.2572 - sizing functions assigned as the minimum breadth of a <a 24.2573 - href="#grid-track"><i>Grid track</i></a>. 24.2574 - 24.2575 - <dt> <dfn id=RemainingSpace-definition>RemainingSpace</dfn> 24.2576 - 24.2577 - <dd>The max of zero and the AvailableSpace less the sum of all <a 24.2578 - href="#grid-track"><i>Grid track</i></a> UsedBreadth values. This is 24.2579 - undefined if AvailableSpace is undefined (i.e. the Grid element is 24.2580 - shrink-to-fit or the height is auto.) 24.2581 - 24.2582 - <dt> <dfn id=SpanCount-definition>SpanCount</dfn> 24.2583 - 24.2584 - <dd>The number of <a href="#grid-track"><i>Grid tracks</i></a> crossed 24.2585 - by a <a href="#grid-item"><i>Grid item</i></a> in the applicable 24.2586 - dimension. 24.2587 - </dl> 24.2588 - <!--End Section: Definition of Terms for use in Calculating Grid Track Sizes--> 24.2589 - </div> 24.2590 - 24.2591 - <div class=section id=grid-track-sizing-algorithm> 24.2592 - <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid 24.2593 - Track Sizing Algorithm</h3> 24.2594 - 24.2595 - <ol> 24.2596 - <li>Call ComputedUsedBreadthOfGridTracks for Grid Columns to resolve 24.2597 - their logical width. 24.2598 - 24.2599 - <li>Call ComputedUsedBreadthOfGridTracks for Grid Rows to resolve their 24.2600 - logical height. The logical width of Grid Columns from the prior step 24.2601 - is used in the formatting of <a href="#grid-item"><i>Grid items</i></a> 24.2602 - in content-sized Grid Rows to determine their required height. 24.2603 - 24.2604 - <li>If the minimum content size of any <a href="#grid-item"><i>Grid 24.2605 - item</i></a> has changed based on available height for the <a 24.2606 - href="#grid-item"><i>Grid item</i></a> as computed in step 2, adjust 24.2607 - the min content size of the <a href="#grid-item"><i>Grid item</i></a> 24.2608 - and restart the <a href="#grid-track"><i>Grid track</i></a> Sizing 24.2609 - algorithm (once only). 24.2610 - </ol> 24.2611 - 24.2612 - <dl> 24.2613 - <dt> <dfn 24.2614 - id=function-ComputeUsedBreadthOfGridTracks>ComputeUsedBreadthOfGridTracks</dfn> 24.2615 - 24.2616 - 24.2617 - <dd> 24.2618 - <p> This is the core <a href="#grid-track"><i>Grid track</i></a> sizing 24.2619 - algorithm. It is run for Grid columns and Grid rows. The goal of the 24.2620 - function is to ensure:</p> 24.2621 - 24.2622 - <ol> 24.2623 - <li>That each <a href="#grid-track"><i>Grid track</i></a> satisfies 24.2624 - its MinTrackSizingFunction 24.2625 - 24.2626 - <li>That each <a href="#grid-track"><i>Grid track</i></a> grows from 24.2627 - the breadth which satisfied its MinTrackSizingFunction to a breadth 24.2628 - which satifies its MaxTrackSizingFunction, subject to RemainingSpace. 24.2629 - </ol> 24.2630 - 24.2631 - <p> For the purposes of resolving the breadth that satisfies the 24.2632 - MinTrackSizingFunction and MaxTrackSizingFunction, each <a 24.2633 - href="#grid-track"><i>Grid track</i></a> falls into one of three 24.2634 - categories:</p> 24.2635 - 24.2636 - <ol> 24.2637 - <li>A percentage or length value which can be trivially resolved. 24.2638 - 24.2639 - <li>A min-content or max-content value which will be resolved based on 24.2640 - the measurements of the <a href="#grid-item"><i>Grid items</i></a> 24.2641 - which cover the <a href="#grid-track"><i>Grid track</i></a>. 24.2642 - 24.2643 - <li>A fraction value which can only be resolved after determining the 24.2644 - RemainingSpace in the <a href="#grid-element"><i>Grid 24.2645 - element</i></a>’s content box after having considered all 24.2646 - contributions from the prior two categories of <a 24.2647 - href="#grid-track"><i>Grid tracks</i></a>. 24.2648 - </ol> 24.2649 - 24.2650 - <p> The breadths which satisfy MinTrackSizingFunctions and 24.2651 - MaxTrackSizingFunctions for the first category of <a 24.2652 - href="#grid-track"><i>Grid tracks</i></a> are resolved in step 1 24.2653 - during <a href="#grid-track"><i>Grid track</i></a> variable 24.2654 - initialization. The breadths which satisfy the MinTrackSizingFunctions 24.2655 - and the MaxTrackSizingFunctions for the second category of 24.2656 - content-sized <a href="#grid-track"><i>Grid tracks</i></a> are 24.2657 - resolved in step 2. At the end of step 2, the first goal of 24.2658 - ComputeUsedBreadthOfGridTracks function has been satisfied: the 24.2659 - UsedBreadth variable of each GridTrack now satisfies its 24.2660 - MinTrackSizingFunction. The MaxBreadth variable for each <a 24.2661 - href="#grid-track"><i>Grid track</i></a> now contains the resolved 24.2662 - value for its MaxTrackSizingFunction.</p> 24.2663 - 24.2664 - <p> In step 3, the second goal of this function is satisified as each 24.2665 - (non-fraction-sized) <a href="#grid-track"><i>Grid track</i></a> 24.2666 - attempts to grow from the UsedBreadth value to the MaxBreadth value, 24.2667 - subject to RemainingSpace.</p> 24.2668 - 24.2669 - <p> Finally in step 4, the third category of fraction-sized <a 24.2670 - href="#grid-track"><i>Grid tracks</i></a> can be resolved using what 24.2671 - is now the RemainingSpace having updated the UsedBreadth of each <a 24.2672 - href="#grid-track"><i>Grid track</i></a> at the end of step 3.</p> 24.2673 - 24.2674 - <dl> 24.2675 - <dt> <dfn 24.2676 - id=function-ComputeUsedBreadthOfGridTracks-inputs>Inputs</dfn> 24.2677 - 24.2678 - <dd> 24.2679 - <ul> 24.2680 - <li>GridTracks: The set of <a href="#grid-track"><i>Grid 24.2681 - tracks</i></a> for which the <a href="#grid-track"><i>Grid 24.2682 - track</i></a> variable UsedBreadth will be computed. 24.2683 - </ul> 24.2684 - </dl> 24.2685 - 24.2686 - <dl> 24.2687 - <dt> <dfn 24.2688 - id=function-ComputeUsedBreadthOfGridTracks-algorithm>Algorithm</dfn> 24.2689 - 24.2690 - <dd class=pseudo-code> 24.2691 - <ol> 24.2692 - <li>Initialize per <a href="#grid-track"><i>Grid track</i></a> 24.2693 - variables 24.2694 - <ol> 24.2695 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.2696 - GridTracks 24.2697 - <ol> 24.2698 - <li>If t.MinTrackSizingFunction is a percentage or length, then 24.2699 - t.UsedBreadth = resolved length 24.2700 - 24.2701 - <li>If t.MinTrackSizingFunction is min-content, max-content, or 24.2702 - a fraction, then t.UsedBreadth = 0 24.2703 - 24.2704 - <li>If t.MaxTrackSizingFunction is percentage or length, then 24.2705 - t.MaxBreadth = resolved length 24.2706 - <ol> 24.2707 - <li>If the resolved length of the MaxTrackSizingFunction is 24.2708 - less than the MinTrackSizingFunction, t.MaxBreadth = 24.2709 - t.UsedBreadth. 24.2710 - </ol> 24.2711 - 24.2712 - <li>If t.MaxTrackSizingFunction is min-content, or max-content, 24.2713 - then t.MaxBreadth = Infinity 24.2714 - 24.2715 - <li>If t.MaxTrackSizingFunction is a fraction, then t.MaxBreadth 24.2716 - = t.UsedBreadth 24.2717 - 24.2718 - <li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = null 24.2719 - </ol> 24.2720 - </ol> 24.2721 - 24.2722 - <li>Resolve content-based TrackSizingFunctions 24.2723 - <ol> 24.2724 - <li>Call ResolveContentBasedTrackSizingFunctions, with arguments: 24.2725 - <ul> 24.2726 - <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a>. 24.2727 - </ul> 24.2728 - </ol> 24.2729 - 24.2730 - <li>Grow all <a href="#grid-track"><i>Grid tracks</i></a> in 24.2731 - GridTracks from their UsedBreadth up to their MaxBreadth value 24.2732 - until RemainingSpace is exhausted. 24.2733 - <ol> 24.2734 - <li>If RemainingSpace == defined 24.2735 - <ol> 24.2736 - <li>Iterate over all GridTracks and assign UsedBreadth to 24.2737 - UpdatedTrackBreadth 24.2738 - 24.2739 - <li>Call DistributeSpaceToTracks, with arguments: 24.2740 - <ul> 24.2741 - <li>SpaceToDistribute: RemainingSpace 24.2742 - 24.2743 - <li>TrackGrowthConstraint: A function which given a <a 24.2744 - href="#grid-track"><i>Grid track</i></a> returns its 24.2745 - MaxBreadth. 24.2746 - 24.2747 - <li>TracksForGrowth: All <a href="#grid-track"><i>Grid 24.2748 - tracks</i></a> 24.2749 - 24.2750 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The 24.2751 - empty set. 24.2752 - 24.2753 - <li>CurrentBreadth: A function which given a <a 24.2754 - href="#grid-track"><i>Grid track</i></a> returns the 24.2755 - UsedBreadth. 24.2756 - </ul> 24.2757 - 24.2758 - <li>Iterate over all GridTracks and assign UpdatedTrackBreadth 24.2759 - to UsedBreadth 24.2760 - </ol> 24.2761 - 24.2762 - <li>Else 24.2763 - <ol> 24.2764 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.2765 - GridTracks 24.2766 - <ol> 24.2767 - <li>t.UsedBreadth = t.MaxBreadth 24.2768 - </ol> 24.2769 - </ol> 24.2770 - </ol> 24.2771 - 24.2772 - <li>Grow all <a href="#grid-track"><i>Grid tracks</i></a> having a 24.2773 - fraction as the MaxTrackSizingFunction 24.2774 - <ol> 24.2775 - <li>normalizedFractionBreadth = 0 24.2776 - 24.2777 - <li>If RemainingSpace == defined 24.2778 - <ol> 24.2779 - <li>normalizedFractionBreadth = Call 24.2780 - ComputeNormalizedFractionBreadth, with arguments: 24.2781 - <ul> 24.2782 - <li>GridTracks: GridTracks 24.2783 - 24.2784 - <li>SpaceToFill: AvailableSpace 24.2785 - </ul> 24.2786 - </ol> 24.2787 - 24.2788 - <li>Else 24.2789 - <ol> 24.2790 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.2791 - GridTracks having a fraction as the MaxTrackSizingFunction 24.2792 - <ol> 24.2793 - <li>normalizedFractionBreadth = Max( 24.2794 - normalizedFractionBreadth, t.UsedBreadth / 24.2795 - t.MaxTrackSizingFunction.FractionValue ) 24.2796 - </ol> 24.2797 - 24.2798 - <li>For each <a href="#grid-item"><i>Grid item</i></a> i, which 24.2799 - crosses a set of GridTracks s 24.2800 - <ol> 24.2801 - <li>itemNormalizedFractionBreadth = Call 24.2802 - ComputeNormalizedFractionBreadth, with arguments: 24.2803 - <ul> 24.2804 - <li>GridTracks: s 24.2805 - 24.2806 - <li>SpaceToFill: max-content size of i 24.2807 - </ul> 24.2808 - 24.2809 - <li>normalizedFractionBreadth = Max( 24.2810 - normalizedFractionBreadth, itemNormalizedFractionBreadth ) 24.2811 - </ol> 24.2812 - </ol> 24.2813 - 24.2814 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.2815 - GridTracks 24.2816 - <ol> 24.2817 - <li>t.UsedBreadth = Max( t.UsedBreadth, 24.2818 - normalizedFractionBreadth * 24.2819 - t.MaxTrackSizingFunction.FractionValue ) 24.2820 - </ol> 24.2821 - </ol> 24.2822 - </ol> 24.2823 - </dl> 24.2824 - </dd> 24.2825 - <!--End Function Definition: ComputeUsedBreadthOfGridTracks--> 24.2826 - </dl> 24.2827 - 24.2828 - <dl> 24.2829 - <dt> <dfn 24.2830 - id=function-ResolveContentBasedTrackSizingFunctions>ResolveContentBasedTrackSizingFunctions</dfn> 24.2831 - 24.2832 - 24.2833 - <dd> 24.2834 - <p> The purpose of this function is to resolve the contribution that 24.2835 - each <a href="#grid-item"><i>Grid item</i></a> makes to any 24.2836 - min-content or max-content TrackSizingFunctions for the <a 24.2837 - href="#grid-track"><i>Grid tracks</i></a> it covers. There are four 24.2838 - permutations: min-content or max-content in either the 24.2839 - MinTrackSizingFunction or MaxTrackSizingFunction. 24.2840 - MinTrackSizingFunctions are resolved before MaxTrackSizingFunctions, 24.2841 - and min-content contributions are resolved before max-content 24.2842 - contributions. Note that when resolving min-content contributions they 24.2843 - may grow tracks that have either min-content or max-content keywords, 24.2844 - as seen in 3.a.i and 3.b.i below.</p> 24.2845 - 24.2846 - <p class=issue> Currently this algorithm embodies several heuristics 24.2847 - which regulate the growth of spanning <a href="#grid-item"><i>Grid 24.2848 - items</i></a> to accomodate certain use cases. (E.g. the game example 24.2849 - in Figures 2 and 3 above.) These heuristics should be a normative part 24.2850 - of this specification to ensure interoperability. To the extent 24.2851 - additional use cases can be identified that cannot be satisfied by 24.2852 - following the current heuristics, the normative algorithm can be 24.2853 - updated, or additional mechanisms can be introduced for fine-grained 24.2854 - control of content-based TrackSizingFunction.</p> 24.2855 - 24.2856 - <dl> 24.2857 - <dt> <dfn 24.2858 - id=function-ResolveContentBasedTrackSizingFunctions-inputs>Inputs</dfn> 24.2859 - 24.2860 - 24.2861 - <dd> 24.2862 - <ul> 24.2863 - <li>GridItems: The set of <a href="#grid-item"><i>Grid items</i></a> 24.2864 - for which min-content or max-content keywords should be resolved. 24.2865 - </ul> 24.2866 - </dl> 24.2867 - 24.2868 - <dl> 24.2869 - <dt> <dfn 24.2870 - id=function-ResolveContentBasedTrackSizingFunctions-algorithm>Algorithm</dfn> 24.2871 - 24.2872 - 24.2873 - <dd class=pseudo-code> 24.2874 - <ol> 24.2875 - <li>Filter all <a href="#grid-item"><i>Grid items</i></a> into a set 24.2876 - g, such that each <a href="#grid-item"><i>Grid item</i></a> has 24.2877 - either a SpanCount of 1 or does not cross a fraction-sized <a 24.2878 - href="#grid-track"><i>Grid track</i></a> 24.2879 - 24.2880 - <li>Group all <a href="#grid-item"><i>Grid items</i></a> in set g by 24.2881 - their SpanCount ascending 24.2882 - 24.2883 - <li>For each group of <a href="#grid-item"><i>Grid items</i></a> 24.2884 - <ol> 24.2885 - <li>Resolve content-based MinTrackSizingFunctions 24.2886 - <ol> 24.2887 - <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.2888 - arguments: 24.2889 - <ul> 24.2890 - <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.2891 - in the current group. 24.2892 - 24.2893 - <li>AdditionalSpaceRequiredByItem: A function which given a <a 24.2894 - href="#grid-item"><i>Grid item</i></a> returns the 24.2895 - min-content size of that <a href="#grid-item"><i>Grid 24.2896 - item</i></a> less the summed UsedBreadth of all <a 24.2897 - href="#grid-track"><i>Grid tracks</i></a> it covers. 24.2898 - 24.2899 - <li>TrackGrowthConstraint: A function which given a <a 24.2900 - href="#grid-track"><i>Grid track</i></a> returns its 24.2901 - MaxBreadth. 24.2902 - 24.2903 - <li>TracksForGrowth: A function which given a <a 24.2904 - href="#grid-item"><i>Grid item</i></a> returns the set of <a 24.2905 - href="#grid-track"><i>Grid tracks</i></a> covered by that <a 24.2906 - href="#grid-item"><i>Grid item</i></a> that have a 24.2907 - min-content or max-content MinTrackSizingFunction. 24.2908 - 24.2909 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A 24.2910 - function which given a set of <a href="#grid-track"><i>Grid 24.2911 - tracks</i></a> returns the subset of <a 24.2912 - href="#grid-track"><i>Grid tracks</i></a> having a 24.2913 - min-content or max-content MaxTrackSizingFunction. If that 24.2914 - set is the empty set, return the input set instead. 24.2915 - 24.2916 - <li>Accumulator: A function which given a <a 24.2917 - href="#grid-track"><i>Grid track</i></a> returns a reference 24.2918 - to its UsedBreadth variable. 24.2919 - </ul> 24.2920 - 24.2921 - <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.2922 - arguments: 24.2923 - <ul> 24.2924 - <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.2925 - in the current group. 24.2926 - 24.2927 - <li>AdditionalSpaceRequiredByItem: A function which given a <a 24.2928 - href="#grid-item"><i>Grid item</i></a> returns the 24.2929 - max-content size of that <a href="#grid-item"><i>Grid 24.2930 - item</i></a> less the summed UsedBreadth of all <a 24.2931 - href="#grid-track"><i>Grid tracks</i></a> it covers. 24.2932 - 24.2933 - <li>TrackGrowthConstraint: A function which given a <a 24.2934 - href="#grid-track"><i>Grid track</i></a> returns its 24.2935 - MaxBreadth. 24.2936 - 24.2937 - <li>TracksForGrowth: A function which given a <a 24.2938 - href="#grid-item"><i>Grid item</i></a> returns the set of <a 24.2939 - href="#grid-track"><i>Grid tracks</i></a> covered by that <a 24.2940 - href="#grid-item"><i>Grid item</i></a> that have a 24.2941 - max-content MinTrackSizingFunction. 24.2942 - 24.2943 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A 24.2944 - function which given a set of <a href="#grid-track"><i>Grid 24.2945 - tracks</i></a> returns the subset of <a 24.2946 - href="#grid-track"><i>Grid tracks</i></a> having a 24.2947 - max-content MaxTrackSizingFunction. If that set is the empty 24.2948 - set, return the input set instead. 24.2949 - 24.2950 - <li>Accumulator: A function which given a <a 24.2951 - href="#grid-track"><i>Grid track</i></a> returns a reference 24.2952 - to its UsedBreadth variable. 24.2953 - </ul> 24.2954 - </ol> 24.2955 - 24.2956 - <li>Resolve content-based MaxTrackSizingFunctions 24.2957 - <ol> 24.2958 - <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.2959 - arguments: 24.2960 - <ul> 24.2961 - <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.2962 - in the current group. 24.2963 - 24.2964 - <li>AdditionalSpaceRequiredByItem: A function which given a <a 24.2965 - href="#grid-item"><i>Grid item</i></a> returns the 24.2966 - min-content size of that <a href="#grid-item"><i>Grid 24.2967 - item</i></a> less the summed MaxBreadth (unless the 24.2968 - MaxBreadth is infinite, in which case use the UsedBreadth) of 24.2969 - all <a href="#grid-track"><i>Grid tracks</i></a> it covers. 24.2970 - 24.2971 - <li>TrackGrowthConstraint: A function which given a <a 24.2972 - href="#grid-track"><i>Grid track</i></a> returns its 24.2973 - MaxBreadth. 24.2974 - 24.2975 - <li>TracksForGrowth: A function which given a <a 24.2976 - href="#grid-item"><i>Grid item</i></a> returns the set of <a 24.2977 - href="#grid-track"><i>Grid tracks</i></a> covered by that <a 24.2978 - href="#grid-item"><i>Grid item</i></a> that have a 24.2979 - min-content or max-content MaxTrackSizingFunction. 24.2980 - 24.2981 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The 24.2982 - identity function. 24.2983 - 24.2984 - <li>Accumulator: A function which given a <a 24.2985 - href="#grid-track"><i>Grid track</i></a> returns a reference 24.2986 - to its MaxBreadth variable. 24.2987 - </ul> 24.2988 - 24.2989 - <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.2990 - arguments: 24.2991 - <ul> 24.2992 - <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.2993 - in the current group. 24.2994 - 24.2995 - <li>AdditionalSpaceRequiredByItem: A function which given a <a 24.2996 - href="#grid-item"><i>Grid item</i></a> returns the 24.2997 - max-content size of that <a href="#grid-item"><i>Grid 24.2998 - item</i></a> less the summed MaxBreadth (unless the 24.2999 - MaxBreadth is infinite, in which case use the UsedBreadth) of 24.3000 - all <a href="#grid-track"><i>Grid tracks</i></a> it covers. 24.3001 - 24.3002 - <li>TrackGrowthConstraint: A function which given a <a 24.3003 - href="#grid-track"><i>Grid track</i></a> returns infinity if 24.3004 - the <a href="#grid-track"><i>Grid track</i></a>’s 24.3005 - SpanGroupInWhichMaxBreadthWasMadeFinite is equal to the 24.3006 - current group; otherwise return the <a 24.3007 - href="#grid-track"><i>Grid track</i></a>’s MaxBreadth. 24.3008 - 24.3009 - <li>TracksForGrowth: A function which given a <a 24.3010 - href="#grid-item"><i>Grid item</i></a> returns the set of <a 24.3011 - href="#grid-track"><i>Grid tracks</i></a> covered by that <a 24.3012 - href="#grid-item"><i>Grid item</i></a> that have a 24.3013 - max-content MaxTrackSizingFunction. 24.3014 - 24.3015 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The 24.3016 - identity function. 24.3017 - 24.3018 - <li>Accumulator: A function which given a <a 24.3019 - href="#grid-track"><i>Grid track</i></a> returns a reference 24.3020 - to its MaxBreadth variable. 24.3021 - </ul> 24.3022 - </ol> 24.3023 - </ol> 24.3024 - 24.3025 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t from the 24.3026 - set of all <a href="#grid-track"><i>Grid tracks</i></a> 24.3027 - <ol> 24.3028 - <li>If t.MaxBreadth == infinity then t.MaxBreadth = t.UsedBreadth 24.3029 - </ol> 24.3030 - </ol> 24.3031 - </dl> 24.3032 - </dd> 24.3033 - <!--End Function Definition: ResolveContentBasedTrackSizingFunctions--> 24.3034 - </dl> 24.3035 - 24.3036 - <dl> 24.3037 - <dt> <dfn 24.3038 - id=function-ResolveContentBasedTrackSizingFunctionsForItems>ResolveContentBasedTrackSizingFunctionsForItems</dfn> 24.3039 - 24.3040 - 24.3041 - <dd> 24.3042 - <p> The above function, ResolveContentBasedTrackSizingFunctions, groups 24.3043 - <a href="#grid-item"><i>Grid items</i></a> based on the number of <a 24.3044 - href="#grid-track"><i>Grid tracks</i></a> each <a 24.3045 - href="#grid-item"><i>Grid item</i></a> spanned. 24.3046 - ResolveContentBasedTrackSizingFunctionsForItems, below, then calls 24.3047 - DistributeSpaceToTracks for each <a href="#grid-item"><i>Grid 24.3048 - item</i></a> in the group to determine how much each <a 24.3049 - href="#grid-item"><i>Grid item</i></a> needs to grow the <a 24.3050 - href="#grid-track"><i>Grid tracks</i></a> that it covers. The maximum 24.3051 - contribution made by any <a href="#grid-item"><i>Grid item</i></a> is 24.3052 - accumulated into a temporary, per-<a href="#grid-track"><i>Grid 24.3053 - track</i></a> variable, and at the end of the group, the space is 24.3054 - recorded into a final <a href="#grid-track"><i>Grid track</i></a> 24.3055 - variable as determined by the Accumulator function.</p> 24.3056 - 24.3057 - <dl> 24.3058 - <dt> <dfn 24.3059 - id=function-ResolveContentBasedTrackSizingFunctionsForItems-inputs>Inputs</dfn> 24.3060 - 24.3061 - 24.3062 - <dd> 24.3063 - <ul> 24.3064 - <li>GridItems: The set of <a href="#grid-item"><i>Grid items</i></a> 24.3065 - which will contribute to the growth of <a 24.3066 - href="#grid-track"><i>Grid tracks</i></a>. 24.3067 - 24.3068 - <li>AdditionalSpaceRequiredByItem: A function which returns the 24.3069 - difference between either the min-content or max-content for the <a 24.3070 - href="#grid-item"><i>Grid item</i></a> and the space already 24.3071 - allocated to the <a href="#grid-track"><i>Grid tracks</i></a> 24.3072 - covered by the <a href="#grid-item"><i>Grid item</i></a> in earlier 24.3073 - phases of the algorithm. 24.3074 - 24.3075 - <li>TrackGrowthConstraint: A function which given a <a 24.3076 - href="#grid-track"><i>Grid track</i></a> returns a value that 24.3077 - limits the amount by which it may be grown by the <a 24.3078 - href="#grid-item"><i>Grid items</i></a> which cover it. 24.3079 - 24.3080 - <li>TracksForGrowth: A function which given a <a 24.3081 - href="#grid-item"><i>Grid item</i></a> identifies the set of <a 24.3082 - href="#grid-track"><i>Grid tracks</i></a> to be grown in this phase 24.3083 - of the algorithm. 24.3084 - 24.3085 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A function 24.3086 - which identifies a subset of <a href="#grid-track"><i>Grid 24.3087 - tracks</i></a> from TracksForGrowth that may be grown in this phase 24.3088 - of the algorithm after all <a href="#grid-track"><i>Grid 24.3089 - tracks</i></a> in the TracksForGrowth set have already grown to 24.3090 - their TrackGrowthConstraint. 24.3091 - 24.3092 - <li>Accumulator: A function which given a <a 24.3093 - href="#grid-track"><i>Grid track</i></a> returns the variable used 24.3094 - to accumulate the results of the UpdatedTrackBreadth from 24.3095 - DistributeSpaceToTracks. 24.3096 - </ul> 24.3097 - </dl> 24.3098 - 24.3099 - <dl> 24.3100 - <dt> <dfn 24.3101 - id=function-ResolveContentBasedTrackSizingFunctionsForItems-algorithm>Algorithm</dfn> 24.3102 - 24.3103 - 24.3104 - <dd class=pseudo-code> 24.3105 - <ol> 24.3106 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t 24.3107 - <ol> 24.3108 - <li>t.UpdatedTrackBreadth = Accumulator( t ) 24.3109 - </ol> 24.3110 - 24.3111 - <li>For each <a href="#grid-item"><i>Grid item</i></a> i in 24.3112 - GridItems 24.3113 - <ol> 24.3114 - <li>Call DistributeSpaceToTracks, with arguments: 24.3115 - <ul> 24.3116 - <li>SpaceToDistribute: AdditionalSpaceRequiredByItem( i ) 24.3117 - 24.3118 - <li>TrackGrowthConstraint: TrackGrowthConstraint 24.3119 - 24.3120 - <li>TracksForGrowth: TracksForGrowth( i ) 24.3121 - 24.3122 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: 24.3123 - SubsetOfTracksForGrowthBeyondTrackGrowthConstraint( 24.3124 - TracksForGrowth( i ) ) 24.3125 - 24.3126 - <li>CurrentBreadth: A function which given a <a 24.3127 - href="#grid-track"><i>Grid track</i></a> returns the 24.3128 - UsedBreadth of the <a href="#grid-track"><i>Grid track</i></a> 24.3129 - if Accumulator returns infinity; otherwise the value of the 24.3130 - Accumulator is returned. 24.3131 - </ul> 24.3132 - </ol> 24.3133 - 24.3134 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t 24.3135 - <ol> 24.3136 - <li>If Accumulator( t ) == infinity and t.UpdatedTrackBreadth != 24.3137 - infinity 24.3138 - <ol> 24.3139 - <li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = RecipientTracks 24.3140 - </ol> 24.3141 - 24.3142 - <li>Accumulator( t ) = t.UpdatedTrackBreadth 24.3143 - </ol> 24.3144 - </ol> 24.3145 - </dl> 24.3146 - </dd> 24.3147 - <!--End Function Definition: ResolveContentBasedTrackSizingFunctionsForItems--> 24.3148 - </dl> 24.3149 - 24.3150 - <dl> 24.3151 - <dt> <dfn 24.3152 - id=function-DistributeSpaceToTracks>DistributeSpaceToTracks</dfn> 24.3153 - 24.3154 - <dd> 24.3155 - <p> Ensures that for each <a href="#grid-track"><i>Grid track</i></a> 24.3156 - in RecipientTracks, a value will be computed, UpdatedTrackBreadth, 24.3157 - that represents the <a href="#grid-track"><i>Grid 24.3158 - track</i></a>’s share of SpaceToDistribute.</p> 24.3159 - 24.3160 - <p> There are two parts to this function. The first for loop in step 2 24.3161 - is giving each <a href="#grid-track"><i>Grid track</i></a> an equal 24.3162 - share of the space, but without exceeding their TrackGrowthConstraint 24.3163 - values. Because there are different MaxBreadths assigned to the 24.3164 - different <a href="#grid-track"><i>Grid tracks</i></a>, the first loop 24.3165 - can result in their uneven growth.</p> 24.3166 - 24.3167 - <p> If the first loop completes having grown every <a 24.3168 - href="#grid-track"><i>Grid track</i></a> to its TrackGrowthConstraint, 24.3169 - and there is still SpaceToDistribute, then 24.3170 - SubsetOfTracksForGrowthBeyondTrackGrowthConstraint are further grown 24.3171 - equally until SpaceToDistribute is exhausted.</p> 24.3172 - 24.3173 - <p> Note that <a href="#grid-track"><i>Grid tracks</i></a> considered 24.3174 - by this function may have a TrackGrowthConstraint equal to Infinity, 24.3175 - which signals that these tracks have not yet been grown by a <a 24.3176 - href="#grid-item"><i>Grid item</i></a>. These tracks can therefore be 24.3177 - grown without exceeding the TrackGrowthConstraint of the track. By 24.3178 - only growing tracks up to their TrackGrowthConstraint value, we can 24.3179 - ensure that the grid remains "tight" - that is, that track breadth is 24.3180 - as close to the content size of the <a href="#grid-item"><i>Grid 24.3181 - items</i></a> inside as possible. Only once all <a 24.3182 - href="#grid-track"><i>Grid tracks</i></a> have a CurrentBreadth equal 24.3183 - to a TrackGrowthConstraint do we move to the second for loop and grow 24.3184 - tracks further, thereby making the <a href="#grid-element"><i>Grid 24.3185 - element</i></a> less tight.</p> 24.3186 - 24.3187 - <dl> 24.3188 - <dt> <dfn id=function-DistributeSpaceToTracks-inputs>Inputs</dfn> 24.3189 - 24.3190 - <dd> 24.3191 - <ul> 24.3192 - <li>SpaceToDistribute: A length to be distributed among the supplied 24.3193 - set of <a href="#grid-track"><i>Grid tracks</i></a>. 24.3194 - 24.3195 - <li>TrackGrowthConstraint: A function which given a <a 24.3196 - href="#grid-track"><i>Grid track</i></a> returns the maximum 24.3197 - breadth of the track, unless the track is in the 24.3198 - SubsetOfTracksForGrowthBeyoundTrackGrowthConstraint. 24.3199 - 24.3200 - <li>TracksForGrowth: A set of <a href="#grid-track"><i>Grid 24.3201 - tracks</i></a> to be grown up to their TrackGrowthConstraint while 24.3202 - SpaceToDistribute remains. 24.3203 - 24.3204 - <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A subset of 24.3205 - <a href="#grid-track"><i>Grid tracks</i></a> from TracksForGrowth 24.3206 - that may be grown beyond their TrackGrowthConstraint after all <a 24.3207 - href="#grid-track"><i>Grid tracks</i></a> in the TracksForGrowth 24.3208 - set have already grown to their TrackGrowthConstraint if there is 24.3209 - remaining SpaceToDistribute. 24.3210 - 24.3211 - <li>CurrentBreadth: A function which given a <a 24.3212 - href="#grid-track"><i>Grid track</i></a> returns a value to use as 24.3213 - a starting point from which to grow this track. 24.3214 - </ul> 24.3215 - </dl> 24.3216 - 24.3217 - <dl> 24.3218 - <dt> <dfn 24.3219 - id=function-DistributeSpaceToTracks-algorithm>Algorithm</dfn> 24.3220 - 24.3221 - <dd class=pseudo-code> 24.3222 - <ol> 24.3223 - <li>Sort TracksForGrowth by TrackGrowthConstraint( t ) - 24.3224 - CurrentBreadth( t ) ascending (where t is an element in the 24.3225 - RecipientTrack set). 24.3226 - 24.3227 - <li>For i = 0 to TracksForGrowth.length - 1 24.3228 - <ol> 24.3229 - <li>t = TracksForGrowth[i] 24.3230 - 24.3231 - <li>share = Min ((SpaceToDistribute / ( TracksForGrowth.length - i 24.3232 - )), (TrackGrowthConstraint( t ) - CurrentBreadth( t ))) 24.3233 - 24.3234 - <li>t.TempBreadth = CurrentBreadth( t ) + share 24.3235 - 24.3236 - <li>SpaceToDistribute -= share 24.3237 - </ol> 24.3238 - 24.3239 - <li>If SpaceToDistribute > 0 24.3240 - <ol> 24.3241 - <li>Let tracks = 24.3242 - SubsetOfTracksForGrowthBeyondTrackGrowthConstraint( 24.3243 - TracksForGrowth ) 24.3244 - 24.3245 - <li>For i = 0 to tracks.length - 1 24.3246 - <ol> 24.3247 - <li>t = tracks[i] 24.3248 - 24.3249 - <li>share = SpaceToDistribute / ( tracks.length - i ) 24.3250 - 24.3251 - <li>t.TempBreadth += share 24.3252 - 24.3253 - <li>SpaceToDistribute -= share 24.3254 - </ol> 24.3255 - </ol> 24.3256 - 24.3257 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.3258 - TracksForGrowth 24.3259 - <ol> 24.3260 - <li>If t.UpdatedTrackBreadth == infinity 24.3261 - <ol> 24.3262 - <li>t.UpdatedTrackBreadth = t.TempBreadth 24.3263 - </ol> 24.3264 - 24.3265 - <li>Else 24.3266 - <ol> 24.3267 - <li>t.UpdatedTrackBreadth = Max( t.UpdatedTrackBreadth, 24.3268 - t.TempBreadth ) 24.3269 - </ol> 24.3270 - </ol> 24.3271 - </ol> 24.3272 - </dl> 24.3273 - </dd> 24.3274 - <!--End Function Definition: DistributeSpaceToTracks--> 24.3275 - </dl> 24.3276 - 24.3277 - <dl> 24.3278 - <dt> <dfn 24.3279 - id=function-CalculateNormalizedFractionBreadth>CalculateNormalizedFractionBreadth</dfn> 24.3280 - 24.3281 - 24.3282 - <dd> This method computes a ‘<code class=css>1fr</code>’ 24.3283 - value, referred to as the NormalizedFractionBreadth, for a set of <a 24.3284 - href="#grid-track"><i>Grid tracks</i></a>. The value computed will 24.3285 - ensure that when the NormalizedFractionBreadth is multiplied by the 24.3286 - fractions associated with GridTracks, that the UsedBreadths of 24.3287 - GridTracks will increase by an amount equal to the maximum of zero and 24.3288 - the specified SpaceToFill less the sum of the current UsedBreadths. 24.3289 - <dl> 24.3290 - <dt> <dfn 24.3291 - id=function-CalculateNormalizedFractionBreadth-inputs>Inputs</dfn> 24.3292 - 24.3293 - <dd> 24.3294 - <ul> 24.3295 - <li>GridTracks: The set of <a href="#grid-track"><i>Grid 24.3296 - tracks</i></a> whose fraction sizing functions are considered for 24.3297 - the purposes of a computing a NormalizedFractionBreadth that will 24.3298 - cause GridTracks to fill SpaceToFill. 24.3299 - 24.3300 - <li>SpaceToFill: The space to be filled by GridTracks. 24.3301 - </ul> 24.3302 - </dl> 24.3303 - 24.3304 - <dl> 24.3305 - <dt> <dfn 24.3306 - id=function-CalculateNormalizedFractionBreadth-returns>Returns</dfn> 24.3307 - 24.3308 - <dd> 24.3309 - <ul> 24.3310 - <li>The 1fr value required by GridTracks to fill SpaceToFill. 24.3311 - </ul> 24.3312 - </dl> 24.3313 - 24.3314 - <dl> 24.3315 - <dt> <dfn 24.3316 - id=function-CalculateNormalizedFractionBreadth-algorithm>Algorithm</dfn> 24.3317 - 24.3318 - 24.3319 - <dd class=pseudo-code> 24.3320 - <ol> 24.3321 - <li>allocatedSpace = the sum of the UsedBreadth for each <a 24.3322 - href="#grid-track"><i>Grid track</i></a> in GridTracks 24.3323 - 24.3324 - <li>fractionTracks = the subset of GridTracks whose 24.3325 - MaxTrackSizingFunction is a fraction 24.3326 - 24.3327 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.3328 - fractionTracks 24.3329 - <ol> 24.3330 - <li>t.NormalizedFractionValue = t.UsedBreadth / 24.3331 - t.MaxTrackSizingFunction.FractionValue 24.3332 - </ol> 24.3333 - 24.3334 - <li>Sort fractionTracks by their NormalizedFractionValue 24.3335 - 24.3336 - <li>spaceNeededFromFractionTracks = SpaceToFill - allocatedSpace 24.3337 - 24.3338 - <li>currentBandFractionValue = accumulatedFractions = 0 24.3339 - 24.3340 - <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.3341 - fractionTracks 24.3342 - <ol> 24.3343 - <li>If t.NormalizedFractionValue > currentBandFractionBreadth 24.3344 - <ol> 24.3345 - <li>If t.NormalizedFractionValue * accumulatedFractions > 24.3346 - spaceNeededFromFractionTracks then break from for loop 24.3347 - 24.3348 - <li>currentBandFractionBreadth = t.NormalizedFractionValue 24.3349 - </ol> 24.3350 - 24.3351 - <li>accumulatedFractions += t.MaxTrackSizingFunction.FractionValue 24.3352 - 24.3353 - <li>spaceNeededFromFractionTracks += t.UsedBreadth 24.3354 - </ol> 24.3355 - 24.3356 - <li>return spaceNeededFromFractionTracks / accumulatedFractions 24.3357 - </ol> 24.3358 - </dl> 24.3359 - </dd> 24.3360 - <!--End Function Definition: CalculateNormalizedFractionBreadth--> 24.3361 - </dl> 24.3362 - <!--End Section: Grid Track Sizing Algorithm--></div> 24.3363 - <!--End Section: Calculating the Size of Grid Tracks--></div> 24.3364 - 24.3365 - <div class=section id=shrink-to-fit-behavior-of-grid-elements> 24.3366 - <h2 id=shrink-to-fit-behavior-of-grid-elements0><span class=secno>11. 24.3367 - </span>Shrink-to-fit Behavior of Grid Elements</h2> 24.3368 - 24.3369 - <p>The <a href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box 24.3370 - Model</a> defines the shrink-to-fit behavior of an element as 24.3371 - min(max(preferred minimum width, available width), preferred width), with 24.3372 - available width defined in the Box Model spec. Accordingly, for the <a 24.3373 - href="#grid-element"><i>Grid element</i></a> we define the preferred 24.3374 - minimum width as the sum of the UsedBreadths of the <a 24.3375 - href="#grid-track"><i>Grid tracks</i></a> just before step 3 in 24.3376 - ComputeUsedBreadthOfGridTracks, and the preferred width as the sum of the 24.3377 - UsedBreadths of the <a href="#grid-track"><i>Grid tracks</i></a> after 24.3378 - the entire track sizing algorithm has been run with infinite space.</p> 24.3379 - <!--End Section: Shrink-to-fit Behavior of Grid Elements--></div> 24.3380 - 24.3381 - <h2 class=no-num id=changes-from-previous-version>Changes from <a 24.3382 - href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/">Previous 24.3383 - Working Draft</a></h2> 24.3384 - 24.3385 - <div> 24.3386 - <h3 class=no-num id=changes-from-previous-version-12-april-2012>Changes 24.3387 - made in 12 April 2012 Editor's Draft</h3> 24.3388 - 24.3389 - <ul> 24.3390 - <li>Section 4: Added the definition of the baseline of an inline grid. 24.3391 - 24.3392 - <li>Section 6.4: Changed repeat syntax from using square brackets to a 24.3393 - repeat() function. Also removed discussion of whitespace, which is not 24.3394 - needed under the new syntax. 24.3395 - 24.3396 - <li>Section 6.5: Updated grammar to remove quotes from keywords, and 24.3397 - updated repeating syntax. 24.3398 - 24.3399 - <li>Section 6.5: Removed "fit-content" as a synonym for "auto" value in 24.3400 - grid-row and grid-column properties 24.3401 - 24.3402 - <li>Section 6.6 (was 7.2): Moved this section into Section 6, which 24.3403 - describes Defining the Grid. 24.3404 - 24.3405 - <li>Section 6.6: Specified that non-rectangular grid-template regions are 24.3406 - not allowed and neither are strings of unequal lengths. 24.3407 - 24.3408 - <li>Section 6.6: Updated text describing grid-template and writing-mode 24.3409 - sensitivity to make it clear that grid-template also refers to logical 24.3410 - positions. 24.3411 - 24.3412 - <li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth 24.3413 - in step 4, rather than all Grid Tracks. 24.3414 - 24.3415 - <li>Section 10.2: Fixed minor spelling error "Contstriant" 24.3416 - 24.3417 - <li>Section 11: Added a definition of the preferred minimum width and the 24.3418 - preferred width of the Grid element to clarify shrink-to-fit behavior. 24.3419 - </ul> 24.3420 - </div> 24.3421 - 24.3422 - <h2 class=no-num id=acknowledgements>Acknowledgements</h2> 24.3423 - 24.3424 - <p> This specification is made possible by input from Erik Anderson, Rossen 24.3425 - Atanassov, Arron Eicholz, Sylvain Galineau, John Jansen, Chris Jones, 24.3426 - Kathy Kam, Veljko Miljanic, Peter Salas, Christian Stockwell, Eugene 24.3427 - Veselov, and the CSS Working Group members. Thanks to Eliot Graff for 24.3428 - editorial input. 24.3429 - 24.3430 - <h2 class=no-num id=references> References</h2> 24.3431 - 24.3432 - <h3 class=no-num id=normative-references> Normative references</h3> 24.3433 - <!--begin-normative--> 24.3434 - <!-- Sorted by label --> 24.3435 - 24.3436 - <dl class=bibliography> 24.3437 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 24.3438 - <!----> 24.3439 - 24.3440 - <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 24.3441 - 24.3442 - <dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a 24.3443 - href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/"><cite>CSS 24.3444 - Writing Modes Module Level 3.</cite></a> 1 September 2011. W3C Working 24.3445 - Draft. (Work in progress.) URL: <a 24.3446 - href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/</a> 24.3447 - </dd> 24.3448 - <!----> 24.3449 - 24.3450 - <dt id=CSS3VAL>[CSS3VAL] 24.3451 - 24.3452 - <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 24.3453 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS 24.3454 - Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working 24.3455 - Draft. (Work in progress.) URL: <a 24.3456 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a> 24.3457 - </dd> 24.3458 - <!----> 24.3459 - </dl> 24.3460 - <!--end-normative--> 24.3461 - 24.3462 - <h3 class=no-num id=other-references> Other references</h3> 24.3463 - <!--begin-informative--> 24.3464 - <!-- Sorted by label --> 24.3465 - 24.3466 - <dl class=bibliography> 24.3467 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 24.3468 - <!----> 24.3469 - 24.3470 - <dt id=CSS3LAYOUT>[CSS3LAYOUT] 24.3471 - 24.3472 - <dd>Bert Bos; César Acebal. <a 24.3473 - href="http://www.w3.org/TR/2010/WD-css3-layout-20100429"><cite>CSS 24.3474 - Template Layout Module.</cite></a> 29 April 2010. W3C Working Draft. 24.3475 - (Work in progress.) URL: <a 24.3476 - href="http://www.w3.org/TR/2010/WD-css3-layout-20100429">http://www.w3.org/TR/2010/WD-css3-layout-20100429</a> 24.3477 - </dd> 24.3478 - <!----> 24.3479 - </dl> 24.3480 - <!--end-informative--> 24.3481 - 24.3482 - <h2 class=no-num id=index> Index</h2> 24.3483 - <!--begin-index--> 24.3484 - 24.3485 - <ul class=indexlist> 24.3486 - <li>Algorithm, <a 24.3487 - href="#function-CalculateNormalizedFractionBreadth-algorithm" 24.3488 - title=Algorithm><strong>10.2.</strong></a>, <a 24.3489 - href="#function-ComputeUsedBreadthOfGridTracks-algorithm" 24.3490 - title=Algorithm><strong>10.2.</strong></a>, <a 24.3491 - href="#function-DistributeSpaceToTracks-algorithm" 24.3492 - title=Algorithm><strong>10.2.</strong></a>, <a 24.3493 - href="#function-ResolveContentBasedTrackSizingFunctions-algorithm" 24.3494 - title=Algorithm><strong>10.2.</strong></a>, <a 24.3495 - href="#function-ResolveContentBasedTrackSizingFunctionsForItems-algorithm" 24.3496 - title=Algorithm><strong>10.2.</strong></a> 24.3497 - 24.3498 - <li>auto, <a href="#auto" title=auto><strong>6.5.</strong></a>, <a 24.3499 - href="#auto-column-position" title=auto><strong>7.</strong></a>, <a 24.3500 - href="#auto-row-position" title=auto><strong>7.</strong></a> 24.3501 - 24.3502 - <li>AvailableSpace, <a href="#AvailableSpace-definition" 24.3503 - title=AvailableSpace><strong>10.1.</strong></a> 24.3504 - 24.3505 - <li>CalculateNormalizedFractionBreadth, <a 24.3506 - href="#function-CalculateNormalizedFractionBreadth" 24.3507 - title=CalculateNormalizedFractionBreadth><strong>10.2.</strong></a> 24.3508 - 24.3509 - <li>center, <a href="#center-column-align" 24.3510 - title=center><strong>8.</strong></a>, <a href="#center-row-align" 24.3511 - title=center><strong>8.</strong></a> 24.3512 - 24.3513 - <li>columns, <a href="#columns" title=columns><strong>7.4.</strong></a> 24.3514 - 24.3515 - <li>ComputeUsedBreadthOfGridTracks, <a 24.3516 - href="#function-ComputeUsedBreadthOfGridTracks" 24.3517 - title=ComputeUsedBreadthOfGridTracks><strong>10.2.</strong></a> 24.3518 - 24.3519 - <li>DistributeSpaceToTracks, <a href="#function-DistributeSpaceToTracks" 24.3520 - title=DistributeSpaceToTracks><strong>10.2.</strong></a> 24.3521 - 24.3522 - <li>end, <a href="#end-column-align" title=end><strong>8.</strong></a>, <a 24.3523 - href="#end-column-position" title=end><strong>7.</strong></a>, <a 24.3524 - href="#end-line" title=end><strong>6.3.</strong></a>, <a 24.3525 - href="#end-row-align" title=end><strong>8.</strong></a>, <a 24.3526 - href="#end-row-position" title=end><strong>7.</strong></a> 24.3527 - 24.3528 - <li>fraction, <a href="#fraction" title=fraction><strong>6.5.</strong></a> 24.3529 - 24.3530 - 24.3531 - <li>Fraction values, <a href="#fraction-values" 24.3532 - title="Fraction values"><strong>6.5.1.</strong></a> 24.3533 - 24.3534 - <li>grid, <a href="#grid" title=grid><strong>4.</strong></a> 24.3535 - 24.3536 - <li>Grid Cell, <a href="#grid-cell-concept" 24.3537 - title="Grid Cell"><strong>3.3.</strong></a> 24.3538 - 24.3539 - <li>grid-cell, <a href="#grid-cell" 24.3540 - title=grid-cell><strong>6.6.</strong></a> 24.3541 - 24.3542 - <li>grid-column, <a href="#grid-column" 24.3543 - title=grid-column><strong>7.</strong></a> 24.3544 - 24.3545 - <li>grid-column-align, <a href="#grid-column-align" 24.3546 - title=grid-column-align><strong>8.</strong></a> 24.3547 - 24.3548 - <li>grid-columns, <a href="#grid-columns" 24.3549 - title=grid-columns><strong>6.5.</strong></a> 24.3550 - 24.3551 - <li>grid-column-sizing, <a href="#grid-column-sizing" 24.3552 - title=grid-column-sizing><strong>7.3.1.</strong></a> 24.3553 - 24.3554 - <li>grid-column-span, <a href="#grid-column-span" 24.3555 - title=grid-column-span><strong>7.2.</strong></a> 24.3556 - 24.3557 - <li>Grid element, <a href="#grid-element" 24.3558 - title="Grid element"><strong>3.</strong></a> 24.3559 - 24.3560 - <li>grid-flow, <a href="#grid-flow" 24.3561 - title=grid-flow><strong>7.4.</strong></a> 24.3562 - 24.3563 - <li>Grid Item, <a href="#grid-item" 24.3564 - title="Grid Item"><strong>5.</strong></a> 24.3565 - 24.3566 - <li>Grid Line, <a href="#grid-line" 24.3567 - title="Grid Line"><strong>3.2.</strong></a> 24.3568 - 24.3569 - <li>grid-row, <a href="#grid-row" title=grid-row><strong>7.</strong></a> 24.3570 - 24.3571 - <li>grid-row-align, <a href="#grid-row-align" 24.3572 - title=grid-row-align><strong>8.</strong></a> 24.3573 - 24.3574 - <li>grid-rows, <a href="#grid-rows" 24.3575 - title=grid-rows><strong>6.5.</strong></a> 24.3576 - 24.3577 - <li>grid-row-sizing, <a href="#grid-row-sizing" 24.3578 - title=grid-row-sizing><strong>7.3.1.</strong></a> 24.3579 - 24.3580 - <li>grid-row-span, <a href="#grid-row-span" 24.3581 - title=grid-row-span><strong>7.2.</strong></a> 24.3582 - 24.3583 - <li>grid-template, <a href="#grid-template" 24.3584 - title=grid-template><strong>6.6.</strong></a> 24.3585 - 24.3586 - <li>Grid Track, <a href="#grid-track" 24.3587 - title="Grid Track"><strong>3.1.</strong></a> 24.3588 - 24.3589 - <li>inline-grid, <a href="#inline-grid" 24.3590 - title=inline-grid><strong>4.</strong></a> 24.3591 - 24.3592 - <li>Inputs, <a href="#function-CalculateNormalizedFractionBreadth-inputs" 24.3593 - title=Inputs><strong>10.2.</strong></a>, <a 24.3594 - href="#function-ComputeUsedBreadthOfGridTracks-inputs" 24.3595 - title=Inputs><strong>10.2.</strong></a>, <a 24.3596 - href="#function-DistributeSpaceToTracks-inputs" 24.3597 - title=Inputs><strong>10.2.</strong></a>, <a 24.3598 - href="#function-ResolveContentBasedTrackSizingFunctions-inputs" 24.3599 - title=Inputs><strong>10.2.</strong></a>, <a 24.3600 - href="#function-ResolveContentBasedTrackSizingFunctionsForItems-inputs" 24.3601 - title=Inputs><strong>10.2.</strong></a> 24.3602 - 24.3603 - <li>length, <a href="#length" title=length><strong>6.5.</strong></a> 24.3604 - 24.3605 - <li>max-content, <a href="#max-content" 24.3606 - title=max-content><strong>6.5.</strong></a> 24.3607 - 24.3608 - <li>MaxTrackSizingFunction, <a href="#MaxTrackSizingFunction-definition" 24.3609 - title=MaxTrackSizingFunction><strong>10.1.</strong></a> 24.3610 - 24.3611 - <li>min-content, <a href="#min-content" 24.3612 - title=min-content><strong>6.5.</strong></a> 24.3613 - 24.3614 - <li>minmax(min, max), <a href="#minmax" 24.3615 - title="minmax(min, max)"><strong>6.5.</strong></a> 24.3616 - 24.3617 - <li>MinTrackSizingFunction, <a href="#MinTrackSizingFunction-definition" 24.3618 - title=MinTrackSizingFunction><strong>10.1.</strong></a> 24.3619 - 24.3620 - <li>none, <a href="#none-cell" title=none><strong>6.6.</strong></a>, <a 24.3621 - href="#none-flow" title=none><strong>7.4.</strong></a>, <a 24.3622 - href="#none-template" title=none><strong>6.6.</strong></a> 24.3623 - 24.3624 - <li>RemainingSpace, <a href="#RemainingSpace-definition" 24.3625 - title=RemainingSpace><strong>10.1.</strong></a> 24.3626 - 24.3627 - <li>ResolveContentBasedTrackSizingFunctions, <a 24.3628 - href="#function-ResolveContentBasedTrackSizingFunctions" 24.3629 - title=ResolveContentBasedTrackSizingFunctions><strong>10.2.</strong></a> 24.3630 - 24.3631 - <li>ResolveContentBasedTrackSizingFunctionsForItems, <a 24.3632 - href="#function-ResolveContentBasedTrackSizingFunctionsForItems" 24.3633 - title=ResolveContentBasedTrackSizingFunctionsForItems><strong>10.2.</strong></a> 24.3634 - 24.3635 - 24.3636 - <li>Returns, <a 24.3637 - href="#function-CalculateNormalizedFractionBreadth-returns" 24.3638 - title=Returns><strong>10.2.</strong></a> 24.3639 - 24.3640 - <li>rows, <a href="#rows" title=rows><strong>7.4.</strong></a> 24.3641 - 24.3642 - <li>SpanCount, <a href="#SpanCount-definition" 24.3643 - title=SpanCount><strong>10.1.</strong></a> 24.3644 - 24.3645 - <li>start, <a href="#start-column-align" 24.3646 - title=start><strong>8.</strong></a>, <a href="#start-column-position" 24.3647 - title=start><strong>7.</strong></a>, <a href="#start-line" 24.3648 - title=start><strong>6.3.</strong></a>, <a href="#start-row-align" 24.3649 - title=start><strong>8.</strong></a>, <a href="#start-row-position" 24.3650 - title=start><strong>7.</strong></a> 24.3651 - 24.3652 - <li>stretch, <a href="#stretch-column-align" 24.3653 - title=stretch><strong>8.</strong></a>, <a href="#stretch-row-align" 24.3654 - title=stretch><strong>8.</strong></a> 24.3655 - </ul> 24.3656 - <!--end-index--> 24.3657 - 24.3658 - <h2 class=no-num id=property-index> Property index</h2> 24.3659 - <!--begin-properties--> 24.3660 - 24.3661 - <table class=proptable> 24.3662 - <thead> 24.3663 - <tr> 24.3664 - <th>properties 24.3665 - 24.3666 - <th>Values 24.3667 - 24.3668 - <th>Initial 24.3669 - 24.3670 - <th>Applies to 24.3671 - 24.3672 - <th>Inh. 24.3673 - 24.3674 - <th>Percentages 24.3675 - 24.3676 - <th>Media 24.3677 - 24.3678 - <tbody> 24.3679 - <tr> 24.3680 - <th><span class=property>display</span> 24.3681 - 24.3682 - <td>[ ...existing values... | grid | inline-grid | 24.3683 - 24.3684 - <td>specified value 24.3685 - 24.3686 - <tr> 24.3687 - <th><a class=property href="#grid-cell">grid-cell</a> 24.3688 - 24.3689 - <td><string> | none 24.3690 - 24.3691 - <td>none 24.3692 - 24.3693 - <td>Grid Item elements 24.3694 - 24.3695 - <td>no 24.3696 - 24.3697 - <td>n/a 24.3698 - 24.3699 - <td>visual, paged 24.3700 - 24.3701 - <tr> 24.3702 - <th><a class=property href="#grid-column">grid-column</a> 24.3703 - 24.3704 - <td>[ [ <integer> | <string> | start ] [ <integer> | 24.3705 - <string> | end ]? ] | auto 24.3706 - 24.3707 - <td>auto 24.3708 - 24.3709 - <td>Grid Item elements 24.3710 - 24.3711 - <td>no 24.3712 - 24.3713 - <td>n/a 24.3714 - 24.3715 - <td>visual, paged 24.3716 - 24.3717 - <tr> 24.3718 - <th><a class=property href="#grid-column-align">grid-column-align</a> 24.3719 - 24.3720 - <td>start | end | center | stretch 24.3721 - 24.3722 - <td>‘stretch’ 24.3723 - 24.3724 - <td>Grid Item elements 24.3725 - 24.3726 - <td>no 24.3727 - 24.3728 - <td>n/a 24.3729 - 24.3730 - <td>visual, paged 24.3731 - 24.3732 - <tr> 24.3733 - <th><a class=property href="#grid-columns">grid-columns</a> 24.3734 - 24.3735 - <td>see grammar above 24.3736 - 24.3737 - <td>none 24.3738 - 24.3739 - <td>non-replaced elements with a computed value of ‘grid’ or 24.3740 - ‘inline-grid’ for display. 24.3741 - 24.3742 - <td>no 24.3743 - 24.3744 - <td>n/a 24.3745 - 24.3746 - <td>visual, paged 24.3747 - 24.3748 - <tr> 24.3749 - <th><a class=property href="#grid-column-sizing">grid-column-sizing</a> 24.3750 - 24.3751 - <td><track-minmax> (see Grid Columns and Grid Rows Properties) 24.3752 - 24.3753 - <td>auto 24.3754 - 24.3755 - <td>Grid elements 24.3756 - 24.3757 - <td>no 24.3758 - 24.3759 - <td>see Grid Columns and Grid Rows Properties 24.3760 - 24.3761 - <td>visual, paged 24.3762 - 24.3763 - <tr> 24.3764 - <th><a class=property href="#grid-column-span">grid-column-span</a> 24.3765 - 24.3766 - <td><integer> 24.3767 - 24.3768 - <td>1 24.3769 - 24.3770 - <td>Grid Item elements 24.3771 - 24.3772 - <td>no 24.3773 - 24.3774 - <td>n/a 24.3775 - 24.3776 - <td>visual, paged 24.3777 - 24.3778 - <tr> 24.3779 - <th><a class=property href="#grid-flow">grid-flow</a> 24.3780 - 24.3781 - <td>none | rows | columns 24.3782 - 24.3783 - <td>none 24.3784 - 24.3785 - <td>Grid elements 24.3786 - 24.3787 - <td>no 24.3788 - 24.3789 - <td>n/a 24.3790 - 24.3791 - <td>visual, paged 24.3792 - 24.3793 - <tr> 24.3794 - <th><a class=property href="#grid-row">grid-row</a> 24.3795 - 24.3796 - <td>[ [ <integer> | <string> | start ] [ <integer> | 24.3797 - <string> | end ]? ] | auto 24.3798 - 24.3799 - <td>auto 24.3800 - 24.3801 - <td>Grid Item elements 24.3802 - 24.3803 - <td>no 24.3804 - 24.3805 - <td>n/a 24.3806 - 24.3807 - <td>visual, paged 24.3808 - 24.3809 - <tr> 24.3810 - <th><a class=property href="#grid-row-align">grid-row-align</a> 24.3811 - 24.3812 - <td>start | end | center | stretch 24.3813 - 24.3814 - <td>‘stretch’ 24.3815 - 24.3816 - <td>Grid Item elements 24.3817 - 24.3818 - <td>no 24.3819 - 24.3820 - <td>n/a 24.3821 - 24.3822 - <td>visual, paged 24.3823 - 24.3824 - <tr> 24.3825 - <th><a class=property href="#grid-rows">grid-rows</a> 24.3826 - 24.3827 - <td>see grammar above 24.3828 - 24.3829 - <td>none 24.3830 - 24.3831 - <td>non-replaced elements with a computed value of ‘grid’ or 24.3832 - ‘inline-grid’ for display. 24.3833 - 24.3834 - <td>no 24.3835 - 24.3836 - <td>n/a 24.3837 - 24.3838 - <td>visual, paged 24.3839 - 24.3840 - <tr> 24.3841 - <th><a class=property href="#grid-row-sizing">grid-row-sizing</a> 24.3842 - 24.3843 - <td><track-minmax> (see Grid Columns and Grid Rows Properties) 24.3844 - 24.3845 - <td>auto 24.3846 - 24.3847 - <td>Grid elements 24.3848 - 24.3849 - <td>no 24.3850 - 24.3851 - <td>see Grid Columns and Grid Rows Properties 24.3852 - 24.3853 - <td>visual, paged 24.3854 - 24.3855 - <tr> 24.3856 - <th><a class=property href="#grid-row-span">grid-row-span</a> 24.3857 - 24.3858 - <td><integer> 24.3859 - 24.3860 - <td>1 24.3861 - 24.3862 - <td>Grid Item elements 24.3863 - 24.3864 - <td>no 24.3865 - 24.3866 - <td>n/a 24.3867 - 24.3868 - <td>visual, paged 24.3869 - 24.3870 - <tr> 24.3871 - <th><a class=property href="#grid-template">grid-template</a> 24.3872 - 24.3873 - <td><string>+ | none 24.3874 - 24.3875 - <td>none 24.3876 - 24.3877 - <td>Grid elements 24.3878 - 24.3879 - <td>no 24.3880 - 24.3881 - <td>n/a 24.3882 - 24.3883 - <td>visual, paged 24.3884 - </table> 24.3885 - <!--end-properties--> 24.3886 -</html> 24.3887 -<!-- Keep this comment at the end of the file 24.3888 -Local variables: 24.3889 -mode: sgml 24.3890 -sgml-declaration:"~/SGML/HTML4.decl" 24.3891 -sgml-default-doctype-name:"html" 24.3892 -sgml-minimize-attributes:t 24.3893 -sgml-nofill-elements:("pre" "style" "br") 24.3894 -sgml-live-element-indicator:t 24.3895 -sgml-omittag:nil 24.3896 -sgml-shorttag:nil 24.3897 -sgml-namecase-general:t 24.3898 -sgml-general-insert-case:lower 24.3899 -sgml-always-quote-attributes:t 24.3900 -sgml-indent-step:nil 24.3901 -sgml-indent-data:t 24.3902 -sgml-parent-document:nil 24.3903 -sgml-exposed-tags:nil 24.3904 -sgml-local-catalogs:nil 24.3905 -sgml-local-ecat-files:nil 24.3906 -End: 24.3907 ---> 24.3908 - 24.3909 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 24.3910 +"http://www.w3.org/TR/html4/strict.dtd"> 24.3911 + 24.3912 +<html lang=en> 24.3913 + <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type> 24.3914 + 24.3915 + <title>CSS Grid Layout</title> 24.3916 + <link href="../default.css" rel=stylesheet type="text/css"> 24.3917 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 24.3918 + type="text/css"> 24.3919 + 24.3920 + <style type="text/css"> 24.3921 + .example { 24.3922 + clear:both 24.3923 + } 24.3924 + 24.3925 + th { 24.3926 + text-align:left 24.3927 + } 24.3928 + 24.3929 + .pseudo-code { 24.3930 + font-family:monospace 24.3931 + } 24.3932 + .pseudo-code > ol { 24.3933 + list-style-type:decimal 24.3934 + } 24.3935 + .pseudo-code > ol > li > ol { 24.3936 + list-style-type:lower-latin 24.3937 + } 24.3938 + .pseudo-code > ol > li > ol > li > ol { 24.3939 + list-style-type:lower-roman 24.3940 + } 24.3941 + .pseudo-code ul { 24.3942 + list-style-type:disc 24.3943 + } 24.3944 + 24.3945 + dd > p:nth-child(1) { 24.3946 + margin-top:0 24.3947 + } 24.3948 + </style> 24.3949 + 24.3950 + <body> 24.3951 + <div class=head> <!--begin-logo--> 24.3952 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 24.3953 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 24.3954 + 24.3955 + <h1 class=title id=title>CSS Grid Layout</h1> 24.3956 + 24.3957 + <h2 class="no-num no-toc" id=longstatus-date-3-march-2012>Editor's Draft, 24.3958 + 2 August 2012</h2> 24.3959 + 24.3960 + <dl> 24.3961 + <dt>This version:</dt> 24.3962 + <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-grid-layout-20120802/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120802/</a> --> 24.3963 + 24.3964 + <dd><a 24.3965 + href="http://dev.w3.org/csswg/css3-grid-layout/">http://dev.w3.org/csswg/css3-grid-layout/</a> 24.3966 + 24.3967 + 24.3968 + <dt>Latest version: 24.3969 + 24.3970 + <dd><a 24.3971 + href="http://www.w3.org/TR/css3-grid-layout/">http://www.w3.org/TR/css3-grid-layout/</a> 24.3972 + 24.3973 + 24.3974 + <dt>Editor's draft: 24.3975 + 24.3976 + <dd><a 24.3977 + href="http://dev.w3.org/csswg/css3-grid-layout/">http://dev.w3.org/csswg/css3-grid-layout/</a> 24.3978 + 24.3979 + 24.3980 + <dt>Previous version 24.3981 + 24.3982 + <dd><a 24.3983 + href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/</a> 24.3984 + 24.3985 + <dt>Issues List: 24.3986 + 24.3987 + <dd><a 24.3988 + href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Grid+Layout&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED">In 24.3989 + Bugzilla</a> 24.3990 + 24.3991 + <dt>Discussion: 24.3992 + 24.3993 + <dd><a 24.3994 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 24.3995 + with subject line “<kbd>[css3-grid-layout] <var>… message topic 24.3996 + …</var></kbd>” 24.3997 + 24.3998 + <dt>Editors: 24.3999 + 24.4000 + <dd><a href="mailto:alexmog@microsoft.com">Alex Mogilevsky</a>, Microsoft 24.4001 + Corporation 24.4002 + 24.4003 + <dd><a href="mailto:pcupp@microsoft.com">Phil Cupp</a>, Microsoft 24.4004 + Corporation 24.4005 + 24.4006 + <dd><a href="mailto:mmielke@microsoft.com">Markus Mielke</a>, Microsoft 24.4007 + Corporation 24.4008 + 24.4009 + <dd><a href="mailto:daniel.glazman@disruptive-innovations.com">Daniel 24.4010 + Glazman</a>, Disruptive Innovations 24.4011 + </dl> 24.4012 + <!--begin-copyright--> 24.4013 + <p class=copyright><a 24.4014 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 24.4015 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 24.4016 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 24.4017 + href="http://www.csail.mit.edu/"><abbr 24.4018 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 24.4019 + href="http://www.ercim.eu/"><abbr 24.4020 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 24.4021 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 24.4022 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 24.4023 + <a 24.4024 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 24.4025 + and <a 24.4026 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 24.4027 + use</a> rules apply.</p> 24.4028 + <!--end-copyright--> 24.4029 + <hr title="Separator for header"> 24.4030 + </div> 24.4031 + 24.4032 + <h2 class="no-num no-toc" id=abstract0>Abstract</h2> 24.4033 + 24.4034 + <div id=abstract> 24.4035 + <p> Grid Layout contains features targeted at web application authors. The 24.4036 + Grid can be used to achieve many different layouts. It excels at dividing 24.4037 + up space for major regions of an application, or defining the 24.4038 + relationship in terms of size, position, and layer between parts of a 24.4039 + control built from HTML primitives.</p> 24.4040 + 24.4041 + <p> Like tables, the Grid enables an author to align elements into columns 24.4042 + and rows, but unlike tables, the Grid doesn't have content structure, and 24.4043 + thus enables a wide variety of layouts not possible with tables. For 24.4044 + example, the children of the Grid can position themselves with <a 24.4045 + href="#grid-line"><i>Grid lines</i></a> such that they overlap and layer 24.4046 + similar to positioned elements.</p> 24.4047 + 24.4048 + <p> In addition, the absence of content structure in the Grid helps to 24.4049 + manage changes to layout by using fluid and source order independent 24.4050 + layout techniques. By combining media queries with the CSS properties 24.4051 + that control layout of the Grid and its children, authors can adapt their 24.4052 + layout to changes in device form factors, orientation, and available 24.4053 + space, without needing to alter the semantic nature of their content.</p> 24.4054 + </div> 24.4055 + 24.4056 + <h2 class="no-num no-toc" id=status-of-this-document>Status of This 24.4057 + Document</h2> 24.4058 + 24.4059 + <p>This is a public copy of the editors' draft. It is provided for 24.4060 + discussion only and may change at any moment. Its publication here does 24.4061 + not imply endorsement of its contents by W3C. Don't cite this document 24.4062 + other than as work in progress. 24.4063 + 24.4064 + <p> If you wish to make comments regarding this document, please send them 24.4065 + to <a href="mailto:www-style@w3.org">www-style@w3.org</a> (<a 24.4066 + href="mailto:www-style-request@w3.org?subject=subscribe">subscribe</a>, <a 24.4067 + href="http://lists.w3.org/Archives/Public/www-style/">archives</a>). All 24.4068 + feedback is welcome. 24.4069 + 24.4070 + <p>This document was produced by a group operating under the <a 24.4071 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 24.4072 + 2004 W3C Patent Policy</a>. W3C maintains a <a 24.4073 + href="http://www.w3.org/2004/01/pp-impl/32061/status" 24.4074 + rel=disclosure>public list of any patent disclosures</a> made in 24.4075 + connection with the deliverables of the group; that page also includes 24.4076 + instructions for disclosing a patent. An individual who has actual 24.4077 + knowledge of a patent which the individual believes contains <a 24.4078 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 24.4079 + Claim(s)</a> must disclose the information in accordance with <a 24.4080 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 24.4081 + 6 of the W3C Patent Policy</a>. 24.4082 + 24.4083 + <h2 class="no-num no-toc" id=table>Table of contents</h2> 24.4084 + <!--begin-toc--> 24.4085 + 24.4086 + <ul class=toc> 24.4087 + <li><a href="#dependencies-on-other-modules"><span class=secno>1. 24.4088 + </span>Dependencies on other modules</a> 24.4089 + 24.4090 + <li><a href="#introduction0"><span class=secno>2. </span>Introduction</a> 24.4091 + <ul class=toc> 24.4092 + <li><a href="#basic-capabilities-of-the-grid"><span class=secno>2.1. 24.4093 + </span>Basic Capabilities of the Grid</a> 24.4094 + 24.4095 + <li><a href="#adapting-layouts-to-available-space"><span 24.4096 + class=secno>2.2. </span>Adapting Layouts to Available Space</a> 24.4097 + 24.4098 + <li><a href="#source-independence0"><span class=secno>2.3. </span>Source 24.4099 + Independence</a> 24.4100 + 24.4101 + <li><a href="#grid-layering-of-elements0"><span class=secno>2.4. 24.4102 + </span>Grid Layering of Elements</a> 24.4103 + </ul> 24.4104 + 24.4105 + <li><a href="#core-concepts-of-the-grid"><span class=secno>3. </span>Core 24.4106 + Concepts of the Grid</a> 24.4107 + <ul class=toc> 24.4108 + <li><a href="#grid-tracks"><span class=secno>3.1. </span>Grid Tracks</a> 24.4109 + 24.4110 + 24.4111 + <li><a href="#grid-lines"><span class=secno>3.2. </span>Grid Lines</a> 24.4112 + 24.4113 + <li><a href="#grid-areas"><span class=secno>3.3. </span>Grid Areas</a> 24.4114 + </ul> 24.4115 + 24.4116 + <li><a href="#grid-declaration0"><span class=secno>4. </span>Grid 24.4117 + Declaration</a> 24.4118 + 24.4119 + <li><a href="#grid-items0"><span class=secno>5. </span>Grid items</a> 24.4120 + 24.4121 + <li><a href="#defining-grid-rows-columns-and-lines0"><span class=secno>6. 24.4122 + </span>Defining Grid Rows, Columns and Lines</a> 24.4123 + <ul class=toc> 24.4124 + <li><a href="#grid-rows-and-columns0"><span class=secno>6.1. </span>Grid 24.4125 + Rows and Columns</a> 24.4126 + 24.4127 + <li><a href="#named-grid-lines"><span class=secno>6.2. </span>Named Grid 24.4128 + Lines</a> 24.4129 + 24.4130 + <li><a href="#repeating-columns-and-rows"><span class=secno>6.3. 24.4131 + </span>Repeating Columns and Rows</a> 24.4132 + 24.4133 + <li><a href="#grid-definition-columns-and-grid-definit"><span 24.4134 + class=secno>6.4. </span>Grid-definition-columns and 24.4135 + Grid-definition-rows Properties</a> 24.4136 + <ul class=toc> 24.4137 + <li><a href="#fraction-values-fr0"><span class=secno>6.4.1. 24.4138 + </span>Fraction Values: ‘<code class=property>fr</code>’</a> 24.4139 + 24.4140 + <li><a href="#computed-values-for-grid-definition-rows"><span 24.4141 + class=secno>6.4.2. </span>Computed Values for grid-definition-rows 24.4142 + and grid-definition-columns</a> 24.4143 + </ul> 24.4144 + 24.4145 + <li><a href="#defining-grid-areas-with-a-template0"><span 24.4146 + class=secno>6.5. </span>Defining Grid Areas with a Template</a> 24.4147 + </ul> 24.4148 + 24.4149 + <li><a href="#placing-grid-items"><span class=secno>7. </span>Placing Grid 24.4150 + Items</a> 24.4151 + <ul class=toc> 24.4152 + <li><a href="#grid-row-span-and-grid-column-span0"><span 24.4153 + class=secno>7.1. </span>Grid-row-span and Grid-column-span</a> 24.4154 + 24.4155 + <li><a href="#the-grid-area-shorthand0"><span class=secno>7.2. 24.4156 + </span>The Grid Area shorthand</a> 24.4157 + 24.4158 + <li><a href="#anonymous-grid-areas0"><span class=secno>7.3. 24.4159 + </span>Anonymous Grid Areas</a> 24.4160 + 24.4161 + <li><a href="#implicit-columns-and-rows"><span class=secno>7.4. 24.4162 + </span>Implicit Columns and Rows</a> 24.4163 + <ul class=toc> 24.4164 + <li><a href="#defining-a-default-size-for-implicit-col"><span 24.4165 + class=secno>7.4.1. </span>Defining a Default Size for Implicit 24.4166 + Columns and Rows</a> 24.4167 + </ul> 24.4168 + 24.4169 + <li><a href="#automatic-placement-of-grid-items0"><span class=secno>7.5. 24.4170 + </span>Automatic Placement of Grid Items</a> 24.4171 + <ul class=toc> 24.4172 + <li><a href="#automatic-grid-item-placement-algorithm0"><span 24.4173 + class=secno>7.5.1. </span>Automatic Grid Item Placement Algorithm</a> 24.4174 + 24.4175 + </ul> 24.4176 + </ul> 24.4177 + 24.4178 + <li><a href="#grid-item-alignment0"><span class=secno>8. </span>Grid Item 24.4179 + Alignment</a> 24.4180 + 24.4181 + <li><a href="#drawing-order-of-grid-items0"><span class=secno>9. 24.4182 + </span>Drawing Order of Grid Items</a> 24.4183 + 24.4184 + <li><a href="#calculating-the-size-of-grid-tracks"><span class=secno>10. 24.4185 + </span>Calculating the Size of Grid Tracks</a> 24.4186 + <ul class=toc> 24.4187 + <li><a href="#definition-of-terms-for-use-in-calculati"><span 24.4188 + class=secno>10.1. </span>Definition of Terms for use in Calculating 24.4189 + Grid Track Sizes</a> 24.4190 + 24.4191 + <li><a href="#grid-track-sizing-algorithm0"><span class=secno>10.2. 24.4192 + </span>Grid Track Sizing Algorithm</a> 24.4193 + </ul> 24.4194 + 24.4195 + <li><a href="#defining-the-shrink-to-fit-behavior-of-g"><span 24.4196 + class=secno>11. </span>Defining the Shrink-to-fit Behavior of Grid 24.4197 + Elements</a> 24.4198 + 24.4199 + <li class=no-num><a href="#changes-from-previous-version">Changes from 24.4200 + Previous Working Draft</a> 24.4201 + <ul class=toc> 24.4202 + <li class=no-num><a 24.4203 + href="#changes-from-previous-version-12-april-2012">Changes made in 12 24.4204 + April 2012 Editor's Draft</a> 24.4205 + 24.4206 + <li class=no-num><a 24.4207 + href="#changes-from-previous-version-2-august-2012">Changes made in 2 24.4208 + August 2012 Editor's Draft</a> 24.4209 + </ul> 24.4210 + 24.4211 + <li class=no-num><a href="#acknowledgements">Acknowledgements</a> 24.4212 + 24.4213 + <li class=no-num><a href="#references"> References</a> 24.4214 + <ul class=toc> 24.4215 + <li class=no-num><a href="#normative-references"> Normative 24.4216 + references</a> 24.4217 + 24.4218 + <li class=no-num><a href="#other-references"> Other references</a> 24.4219 + </ul> 24.4220 + 24.4221 + <li class=no-num><a href="#index"> Index</a> 24.4222 + 24.4223 + <li class=no-num><a href="#property-index"> Property index</a> 24.4224 + </ul> 24.4225 + <!--end-toc--> 24.4226 + 24.4227 + <div class=section id=dependencies> 24.4228 + <h2 id=dependencies-on-other-modules><span class=secno>1. 24.4229 + </span>Dependencies on other modules</h2> 24.4230 + 24.4231 + <p> This CSS3 module has normative references to the following other CSS3 24.4232 + modules:</p> 24.4233 + 24.4234 + <ul> 24.4235 + <li><a href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> 24.4236 + 24.4237 + <li><a href="#CSS3-ALIGN" 24.4238 + rel=biblioentry>[CSS3-ALIGN]<!--{{!CSS3-ALIGN}}--></a> 24.4239 + </ul> 24.4240 + 24.4241 + <p> This CSS3 module has non-normative (informative) references to the 24.4242 + following other CSS3 modules:</p> 24.4243 + 24.4244 + <ul> 24.4245 + <li><a href="#CSS3LAYOUT" 24.4246 + rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a> 24.4247 + </ul> 24.4248 + </div> 24.4249 + <!--End section: Dependencies --> 24.4250 + 24.4251 + <div class=section id=Introduction> 24.4252 + <h2 id=introduction0><span class=secno>2. </span>Introduction</h2> 24.4253 + 24.4254 + <div class=section id=basic-capabilities> 24.4255 + <h3 id=basic-capabilities-of-the-grid><span class=secno>2.1. </span>Basic 24.4256 + Capabilities of the Grid</h3> 24.4257 + 24.4258 + <div class=sidefigure> <img 24.4259 + alt="Image: Application layout example requiring horizontal and vertical alignment." 24.4260 + class=figure src="images/basic-form.png"> 24.4261 + <p class=caption>Application layout example requiring horizontal and 24.4262 + vertical alignment.</p> 24.4263 + </div> 24.4264 + 24.4265 + <p> As websites evolved from simple documents into complex, interactive 24.4266 + applications, tools for document layout, e.g. floats, were not 24.4267 + necessarily well suited for application layout. By using a combination 24.4268 + of tables, JavaScript, or careful measurements on floated elements, 24.4269 + authors discovered workarounds to achieve desired layouts. Layouts that 24.4270 + adapted to the available space were often brittle and resulted in 24.4271 + counter-intuitive behavior as space became constrained. As an 24.4272 + alternative, authors of many web applications opted for a fixed layout 24.4273 + that cannot take advantage of changes in the available rendering space 24.4274 + on a screen.</p> 24.4275 + 24.4276 + <p> The layout capabilities of the Grid address these problems. The Grid 24.4277 + provides a mechanism for authors to divide available space for layout 24.4278 + into columns and rows using a set of predictable sizing behaviors. 24.4279 + Authors can then precisely position and size the building block elements 24.4280 + of their application by referencing the <a href="#grid-line"><i>Grid 24.4281 + lines</i></a> between the columns and rows, or by defining and 24.4282 + referencing a <a href="#grid-area-concept"><i>Grid area</i></a>, which 24.4283 + is a rectangular space covering an intersection of columns and rows. 24.4284 + Figure 1 illustrates a basic layout which can be achieved with the Grid. 24.4285 + </p> 24.4286 + <!--End Section: Basic Capabilities of the Grid--></div> 24.4287 + 24.4288 + <div class=section id=adapting-to-available-space> 24.4289 + <h3 id=adapting-layouts-to-available-space><span class=secno>2.2. 24.4290 + </span>Adapting Layouts to Available Space</h3> 24.4291 + 24.4292 + <div class=sidefigure> 24.4293 + <p> <img 24.4294 + alt="Image: Five grid items arranged according to content size and available space." 24.4295 + src="images/game-smaller.png"></p> 24.4296 + 24.4297 + <p class=caption>Five grid items arranged according to content size and 24.4298 + available space.</p> 24.4299 + </div> 24.4300 + 24.4301 + <div class=sidefigure> 24.4302 + <p> <img 24.4303 + alt="Image: Growth in the grid due to an increase in available space." 24.4304 + src="images/game-larger.png"></p> 24.4305 + 24.4306 + <p class=caption>Growth in the grid due to an increase in available 24.4307 + space.</p> 24.4308 + </div> 24.4309 + 24.4310 + <p> The <a href="#grid-element"><i>Grid element</i></a> can be used to 24.4311 + intelligently reflow elements within a webpage. Figure 2 represents a 24.4312 + game with five major areas in the layout: the game title, stats area, 24.4313 + game board, score area, and control area. The author's intent is to 24.4314 + divide the space for the game such that: 24.4315 + 24.4316 + <ul> 24.4317 + <li>The stats area always appears immediately under the game title. 24.4318 + 24.4319 + <li>The game board appears to the right of the stats and title. 24.4320 + 24.4321 + <li>The top of the game title and the game board should always align. 24.4322 + 24.4323 + <li>The bottom of the game board and the stats area align when the game 24.4324 + has reached its minimum height, but otherwise the game board will 24.4325 + stretch to take advantage of all the screen real-estate available to 24.4326 + it. 24.4327 + 24.4328 + <li>The score area should align into the column created by the game and 24.4329 + stats area, while the controls are centered under the board. 24.4330 + </ul> 24.4331 + 24.4332 + <p> As an alternative to using script to control the absolute position, 24.4333 + width, and height of all elements, the author can use the <a 24.4334 + href="#grid-element"><i>Grid element</i></a>, as shown in Figure 3. The 24.4335 + following example shows how an author might achieve all the sizing, 24.4336 + placement, and alignment rules declaratively.</p> 24.4337 + 24.4338 + <p> Note that there are multiple ways to specify the structure of the <a 24.4339 + href="#grid-element"><i>Grid element</i></a> and to position and size <a 24.4340 + href="#grid-item"><i>Grid items</i></a>, each optimized for different 24.4341 + scenarios. This example illustrates one that an author may use to define 24.4342 + the position and space for each <i>Grid item</i> using the ‘<a 24.4343 + href="#grid-definition-rows"><code 24.4344 + class=property>grid-definition-rows</code></a>’ and ‘<a 24.4345 + href="#grid-definition-columns"><code 24.4346 + class=property>grid-definition-columns</code></a>’ properties of the 24.4347 + <a href="#grid-element"><i>Grid element</i></a>, and the ‘<a 24.4348 + href="#grid-row"><code class=property>grid-row</code></a>’, ‘<a 24.4349 + href="#grid-column"><code class=property>grid-column</code></a>’, 24.4350 + ‘<a href="#grid-row-span"><code 24.4351 + class=property>grid-row-span</code></a>’ and ‘<a 24.4352 + href="#grid-column-span"><code 24.4353 + class=property>grid-column-span</code></a>’ properties on each <i>Grid 24.4354 + item</i>.</p> 24.4355 + 24.4356 + <pre class=example><style type="text/css"> 24.4357 +<style type="text/css"> 24.4358 + #grid { 24.4359 + display: grid; 24.4360 + 24.4361 + /* Two columns: the first sized to content, the second receives the remaining space, */ 24.4362 + /* but is never smaller than the minimum size of the board or the game controls, which */ 24.4363 + /* occupy this column. */ 24.4364 + grid-columns: auto minmax(min-content, 1fr); 24.4365 + 24.4366 + /* Three rows: the first and last sized to content, the middle row receives the */ 24.4367 + /* remaining space, but is never smaller than the minimum height of the board or stats */ 24.4368 + /* areas. */ 24.4369 + grid-rows: auto minmax(min-content, 1fr) auto 24.4370 + } 24.4371 + 24.4372 + /* Each part of the game is positioned between grid lines by referencing the starting grid */ 24.4373 + /* line and then specifying, if more than one, the number of rows or columns spanned to */ 24.4374 + /* determine the ending grid line, which establishes bounds for the part. */ 24.4375 + #title { grid-column: 1; grid-row: 1 } 24.4376 + #score { grid-column: 1; grid-row: 3 } 24.4377 + #stats { grid-column: 1; grid-row: 2; justify-self: start } 24.4378 + #board { grid-column: 2; grid-row: 1; grid-row-span: 2 } 24.4379 + #controls { grid-column: 2; grid-row: 3; align-self: center } 24.4380 +</style> 24.4381 + 24.4382 +<div id="grid"> 24.4383 + <div id="title">Game Title</div> 24.4384 + <div id="score">Score</div> 24.4385 + <div id="stats">Stats</div> 24.4386 + <div id="board">Board</div> 24.4387 + <div id="controls">Controls</div> 24.4388 +</div></pre> 24.4389 + <!--End Section: Adapting to Available Space for Layout--></div> 24.4390 + 24.4391 + <div class=section id=source-independence> 24.4392 + <h3 id=source-independence0><span class=secno>2.3. </span>Source 24.4393 + Independence</h3> 24.4394 + 24.4395 + <div class=sidefigure> 24.4396 + <p> <img alt="Image: An arrangement suitable for portrait orientation." 24.4397 + src="images/game-portrait.png"></p> 24.4398 + 24.4399 + <p class=caption>An arrangement suitable for ‘<code 24.4400 + class=css>portrait</code>’ orientation.</p> 24.4401 + </div> 24.4402 + 24.4403 + <div class=sidefigure> 24.4404 + <p> <img alt="Image: An arrangment suitable for landscape orientation." 24.4405 + src="images/game-landscape.png"></p> 24.4406 + 24.4407 + <p class=caption>An arrangment suitable for ‘<code 24.4408 + class=css>landscape</code>’ orientation.</p> 24.4409 + </div> 24.4410 + 24.4411 + <p> Continuing the prior example, the author also wants the game to adapt 24.4412 + to the space available on traditional computer monitors, handheld 24.4413 + devices, or tablet computers. Also, the game should optimize the 24.4414 + placement of the components when viewed either in landscape or portrait 24.4415 + orientation (Figures 4 and 5). By combining the CSS markup for the <a 24.4416 + href="#grid-element"><i>Grid element</i></a> with media queries, the 24.4417 + author is able to use the same semantic markup, but rearranged 24.4418 + independent of its source order, to achieve the desired layout in both 24.4419 + orientations.</p> 24.4420 + 24.4421 + <p> The following example leverages the <a href="#grid-element"><i>Grid 24.4422 + element</i></a>’s ability to name the space which will be occupied by 24.4423 + a <i>Grid item</i>. This allows the author to avoid rewriting rules for 24.4424 + <a href="#grid-item"><i>Grid items</i></a> as the <a 24.4425 + href="#grid-element"><i>Grid element</i></a>’s definition changes.</p> 24.4426 + 24.4427 + <pre class=example><style type="text/css"> 24.4428 + @media (orientation: portrait) { 24.4429 + #grid { 24.4430 + display: grid; 24.4431 + 24.4432 + /* The rows, columns and areas of the grid are defined visually using the */ 24.4433 + /* grid-template property. Each string is a row, and each word an area. */ 24.4434 + /* The number of words in a string determines the number of */ 24.4435 + /* columns. Note the number of words in each string must be identical. */ 24.4436 + grid-template: "title stats" 24.4437 + "score stats" 24.4438 + "board board" 24.4439 + "ctrls ctrls"; 24.4440 + 24.4441 + /* Columns and rows created with the template property can be assigned a sizing */ 24.4442 + /* function with the grid-definition-columns and grid-definition-rows properties. */ 24.4443 + grid-definition-columns: auto minmax(min-content, 1fr); 24.4444 + grid-definition-rows: auto auto minmax(min-content, 1fr) auto 24.4445 + } 24.4446 + } 24.4447 + 24.4448 + @media (orientation: landscape) { 24.4449 + #grid { 24.4450 + display: grid; 24.4451 + 24.4452 + /* Again the template property defines areas of the same name, but this time */ 24.4453 + /* positioned differently to better suit a landscape orientation. */ 24.4454 + grid-template: "title board" 24.4455 + "stats board" 24.4456 + "score ctrls"; 24.4457 + 24.4458 + grid-definition-columns: auto minmax(min-content, 1fr); 24.4459 + grid-definition-rows: auto minmax(min-content, 1fr) auto 24.4460 + } 24.4461 + } 24.4462 + 24.4463 + /* The grid-area property places a grid item into named region (area) of the grid. */ 24.4464 + #title { grid-area: title } 24.4465 + #score { grid-area: score } 24.4466 + #stats { grid-area: stats } 24.4467 + #board { grid-area: board } 24.4468 + #controls { grid-area: ctrls } 24.4469 +</style> 24.4470 + 24.4471 +<div id="grid"> 24.4472 + <div id="title">Game Title</div> 24.4473 + <div id="score">Score</div> 24.4474 + <div id="stats">Stats</div> 24.4475 + <div id="board">Board</div> 24.4476 + <div id="controls">Controls</div> 24.4477 +</div></pre> 24.4478 + <!--End Section: Source Independence--></div> 24.4479 + 24.4480 + <div class=section id=grid-layering-of-elements> 24.4481 + <h3 id=grid-layering-of-elements0><span class=secno>2.4. </span>Grid 24.4482 + Layering of Elements</h3> 24.4483 + 24.4484 + <div class=sidefigure> 24.4485 + <p> <img alt="Image: A control composed of layered HTML elements." 24.4486 + src="images/control-layering-and-alignment.png"></p> 24.4487 + 24.4488 + <p class=caption>A control composed of layered HTML elements.</p> 24.4489 + </div> 24.4490 + 24.4491 + <p> In the example shown in Figure 6, the author is creating a custom 24.4492 + slider control. The control has six parts. The lower and upper labels 24.4493 + align to the left and right edges of the control. The track of the 24.4494 + slider spans the area between the labels. The lower and upper fill parts 24.4495 + touch beneath the thumb, and the thumb is a fixed width and height that 24.4496 + can be moved along the track by updating the two fraction-sized columns. 24.4497 + </p> 24.4498 + 24.4499 + <p> Prior to the <a href="#grid-element"><i>Grid element</i></a>, the 24.4500 + author would have likely used absolute positioning to control the top 24.4501 + and left coordinates, along with the width and height of each HTML 24.4502 + element that comprises the control. By leveraging the <a 24.4503 + href="#grid-element"><i>Grid element</i></a>, the author can instead 24.4504 + limit script usage to handling mouse events on the thumb, which snaps to 24.4505 + various positions along the track as the ‘<a 24.4506 + href="#grid-definition-columns"><code 24.4507 + class=property>grid-definition-columns</code></a>’ property of the <a 24.4508 + href="#grid-element"><i>Grid element</i></a> is updated.</p> 24.4509 + 24.4510 + <pre class=example><style type="text/css"> 24.4511 + #grid { 24.4512 + display: grid; 24.4513 + 24.4514 + /* The grid-definition-columns and rows properties also support naming grid lines */ 24.4515 + /* which can then be used to position grid items. The line names are assigned on */ 24.4516 + /* either side of a column or row sizing function where the line would logically exist. */ 24.4517 + grid-definition-columns: 24.4518 + "start" auto 24.4519 + "track-start" 0.5fr 24.4520 + "thumb-start" auto 24.4521 + "fill-split" auto 24.4522 + "thumb-end" 0.5fr 24.4523 + "track-end" auto 24.4524 + "end"; 24.4525 + } 24.4526 + 24.4527 + /* grid-column and grid-row accept a starting and optional endling line. */ 24.4528 + /* Below the lines are referred to by name. Beyond any semantic advantage, the names */ 24.4529 + /* also allow the author to avoid renumbering the grid-row and */ 24.4530 + /* column properties of the grid items. This is similar to the concept demonstrated in the */ 24.4531 + /* prior example with the grid-template property during orientation changes, but */ 24.4532 + /* grid lines can also work with layered grid items that have overlapping areas of */ 24.4533 + /* different shapes like the thumb and track parts in this example. */ 24.4534 + #lower-label { grid-column: "start" } 24.4535 + #track { grid-column: "track-start" "track-end"; align-self: center } 24.4536 + #upper-label { grid-column: "track-end"; } 24.4537 + 24.4538 + /* Fill parts are drawn above the track so set z-index to 5. */ 24.4539 + #lower-fill { grid-column: "track-start" "fill-split"; align-self: center; z-index: 5 } 24.4540 + #upper-fill { grid-column: "fill-split" "track-end"; align-self: center; z-index: 5 } 24.4541 + 24.4542 + /* Thumb is the topmost part; assign it the highest z-index value. */ 24.4543 + #thumb { grid-column: "thumb-start" "thumb-end"; z-index: 10 } 24.4544 +</style> 24.4545 + 24.4546 +<div id="grid"> 24.4547 + <div id="lower-label">Lower Label</div> 24.4548 + <div id="upper-label">Upper Label</div> 24.4549 + <div id="track">Track</div> 24.4550 + <div id="lower-fill">Lower Fill</div> 24.4551 + <div id="upper-fill">Upper Fill</div> 24.4552 + <div id="thumb">Thumb</div> 24.4553 +</div></pre> 24.4554 + <!--End Section: Grid Layering of Elements--></div> 24.4555 + <!--End Section: Introduction--></div> 24.4556 + 24.4557 + <div class=section id=grid-concepts> 24.4558 + <h2 id=core-concepts-of-the-grid><span class=secno>3. </span>Core Concepts 24.4559 + of the Grid</h2> 24.4560 + 24.4561 + <div class=sidefigure> <img 24.4562 + alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Areas and Items." 24.4563 + class=figure src="images/grid-concepts.png"> 24.4564 + <p class=caption>A diagram illustrating the relationship between the <a 24.4565 + href="#grid-element"><i>Grid element</i></a> and its Tracks, Lines, 24.4566 + Areas and Items.</p> 24.4567 + </div> 24.4568 + 24.4569 + <p> A <dfn id=grid-element>Grid element</dfn> is declared in markup by 24.4570 + setting the display property of an element to ‘<a href="#grid"><code 24.4571 + class=css>grid</code></a>’ or ‘<a href="#inline-grid"><code 24.4572 + class=css>inline-grid</code></a>’. Child elements of the Grid are 24.4573 + termed <a href="#grid-item"><i>Grid items</i></a> and may be positioned 24.4574 + and sized by the <a href="#grid-element"><i>Grid element</i></a> by 24.4575 + leveraging the following logical concepts.</p> 24.4576 + 24.4577 + <ul> 24.4578 + <li><a href="#grid-track"><i>Grid tracks</i></a> 24.4579 + 24.4580 + <li><a href="#grid-line"><i>Grid lines</i></a> 24.4581 + 24.4582 + <li><a href="#grid-area-concept"><i>Grid areas</i></a> 24.4583 + </ul> 24.4584 + 24.4585 + <p> Figure 7 illustrates the relationship between these concepts and the 24.4586 + markup in the subsections that follow produce the result shown in the 24.4587 + figure.</p> 24.4588 + 24.4589 + <div class=section id=grid-concepts-tracks> 24.4590 + <h3 id=grid-tracks><span class=secno>3.1. </span>Grid Tracks</h3> 24.4591 + 24.4592 + <p> <dfn id=grid-track>Grid Track</dfn>s are the columns and rows of the 24.4593 + Grid defined with the ‘<a href="#grid-definition-rows"><code 24.4594 + class=property>grid-definition-rows</code></a>’ and ‘<a 24.4595 + href="#grid-definition-columns"><code 24.4596 + class=property>grid-definition-columns</code></a>’ properties on the 24.4597 + <a href="#grid-element"><i>Grid element</i></a>. Each Track is defined 24.4598 + by declaring a sequential list of sizing functions, one for each Track. 24.4599 + Tracks define the space between <a href="#grid-line"><i>Grid 24.4600 + lines</i></a>.</p> 24.4601 + 24.4602 + <pre class=example><style type="text/css"> 24.4603 + #grid { 24.4604 + display: grid; 24.4605 + grid-definition-columns: 150px 1fr; /* two columns */ 24.4606 + grid-definition-rows: 50px 1fr 50px /* three rows */ 24.4607 + } 24.4608 +</style></pre> 24.4609 + <!--End Section: Grid Tracks--></div> 24.4610 + 24.4611 + <div class=section id=grid-concepts-lines> 24.4612 + <h3 id=grid-lines><span class=secno>3.2. </span>Grid Lines</h3> 24.4613 + 24.4614 + <p> <dfn id=grid-line>Grid Line</dfn>s are the horizontal or vertical 24.4615 + dividing lines that exist on either side of a column or row. <a 24.4616 + href="#grid-line"><i>Grid lines</i></a> may be referred to by their <a 24.4617 + href="#grid-line"><i>Grid line</i></a> number, or they may be named by 24.4618 + the author. Authors use one or more quoted strings to assign names to a 24.4619 + <a href="#grid-line"><i>Grid line</i></a> before or after a <a 24.4620 + href="#grid-track"><i>Grid track</i></a> definition wherever the desired 24.4621 + <a href="#grid-line"><i>Grid line</i></a> would logically exist. A 24.4622 + <i>Grid item</i> then uses the <a href="#grid-line"><i>Grid 24.4623 + lines</i></a> to determine its position and available space within the 24.4624 + Grid by referencing the <a href="#grid-line"><i>Grid lines</i></a> using 24.4625 + the properties ‘<a href="#grid-row"><code 24.4626 + class=property>grid-row</code></a>’ and ‘<a 24.4627 + href="#grid-column"><code class=property>grid-column</code></a>’. 24.4628 + ‘<a href="#grid-row"><code class=property>grid-row</code></a>’ and 24.4629 + ‘<a href="#grid-column"><code class=property>grid-column</code></a>’ 24.4630 + accept a starting and optional ending Line.</p> 24.4631 + 24.4632 + <p> The following two examples create three column <a 24.4633 + href="#grid-line"><i>Grid lines</i></a> and four row <a 24.4634 + href="#grid-line"><i>Grid lines</i></a>. The first example demonstrates 24.4635 + how an author would refer to the <a href="#grid-line"><i>Grid 24.4636 + lines</i></a> using <a href="#grid-line"><i>Grid line</i></a> numbers. 24.4637 + The second example uses explicitly named <a href="#grid-line"><i>Grid 24.4638 + lines</i></a>.</p> 24.4639 + 24.4640 + <pre class=example><style type="text/css"> 24.4641 + #grid { 24.4642 + display: grid; 24.4643 + grid-definition-columns: 150px 1fr; 24.4644 + grid-definition-rows: 50px 1fr 50px 24.4645 + } 24.4646 + 24.4647 + #item1 { grid-column: 2; grid-row: 1 4 } 24.4648 +</style></pre> 24.4649 + 24.4650 + <pre class=example><style type="text/css"> 24.4651 + /* equivalent layout to the prior example, but using named lines */ 24.4652 + #grid { 24.4653 + display: grid; 24.4654 + grid-definition-columns: 150px "item1-start" 1fr "item1-end"; 24.4655 + grid-definition-rows: "item1-start" 50px 1fr 50px "item1-end" 24.4656 + } 24.4657 + 24.4658 + #item1 { 24.4659 + grid-column: "item1-start" "item1-end"; 24.4660 + grid-row: "item1-start" "item1-end" 24.4661 + } 24.4662 +</style></pre> 24.4663 + <!--End Section: Grid Lines--></div> 24.4664 + 24.4665 + <div class=section id=grid-concepts-areas> 24.4666 + <h3 id=grid-areas><span class=secno>3.3. </span>Grid Areas</h3> 24.4667 + 24.4668 + <p> <dfn id=grid-area-concept>Grid Area</dfn>s are the logical space used 24.4669 + to lay out one or more <a href="#grid-item"><i>Grid items</i></a>. <a 24.4670 + href="#grid-area-concept"><i>Grid areas</i></a> may be defined 24.4671 + explicitly using the ‘<a href="#grid-template"><code 24.4672 + class=property>grid-template</code></a>’ property, or implicitly by 24.4673 + referencing a region of the Grid using the properties ‘<a 24.4674 + href="#grid-row"><code class=property>grid-row</code></a>’ and ‘<a 24.4675 + href="#grid-column"><code class=property>grid-column</code></a>’ on a 24.4676 + <i>Grid item</i>.</p> 24.4677 + 24.4678 + <p> Whether a <a href="#grid-area-concept"><i>Grid area</i></a> is 24.4679 + created explicitly or implicitly, there is no difference in the layout 24.4680 + or drawing order of the <a href="#grid-item"><i>Grid items</i></a> which 24.4681 + are associated with that <a href="#grid-area-concept"><i>Grid 24.4682 + area</i></a>. <a href="#grid-area-concept"><i>Grid areas</i></a> cannot 24.4683 + be styled. Only the syntax used to refer to a region of space on the 24.4684 + Grid differs between the implicit and explicit approach to provide 24.4685 + authors with the tools to best suit their scenarios as illustrated in 24.4686 + prior examples.</p> 24.4687 + 24.4688 + <pre class=example><style type="text/css"> 24.4689 + /* using the template syntax */ 24.4690 + #grid { 24.4691 + display: grid; 24.4692 + grid-template: ". a" 24.4693 + "b a" 24.4694 + ". a"; 24.4695 + grid-definition-columns: 150px 1fr; 24.4696 + grid-definition-rows: 50px 1fr 50px 24.4697 + } 24.4698 + 24.4699 + #item1 { grid-area: "a" } 24.4700 + #item2 { grid-area: "b" } 24.4701 + #item3 { grid-area: "b" } 24.4702 + 24.4703 + /* Align items 2 and 3 at different points in the Grid Area "b". */ 24.4704 + /* By default, Grid Items are stretched to fit their Grid Area */ 24.4705 + /* and these items would layer one over the other. */ 24.4706 + #item2 { align-self: head } 24.4707 + #item3 { justify-self: end; align-self: foot }</style></pre> 24.4708 + <!--End Section: Grid Areas--></div> 24.4709 + <!--End Section: Core Concepts of the Grid--></div> 24.4710 + 24.4711 + <div class=section id=grid-declaration> 24.4712 + <h2 id=grid-declaration0><span class=secno>4. </span>Grid Declaration</h2> 24.4713 + 24.4714 + <p> A <a href="#grid-element"><i>Grid element</i></a> is declared by 24.4715 + setting the display property.</p> 24.4716 + 24.4717 + <table class=propdef id=display-property> 24.4718 + <tbody> 24.4719 + <tr> 24.4720 + <td>Name: 24.4721 + 24.4722 + <td>display 24.4723 + 24.4724 + <tr> 24.4725 + <td>Value: 24.4726 + 24.4727 + <td> [ ...existing values... | <dfn id=grid>grid</dfn> | <dfn 24.4728 + id=inline-grid>inline-grid</dfn> | 24.4729 + 24.4730 + <tr> 24.4731 + <td>Computed value: 24.4732 + 24.4733 + <td>specified value 24.4734 + </table> 24.4735 + 24.4736 + <dl> 24.4737 + <dt><a name=value-def-display-grid>grid</a> 24.4738 + 24.4739 + <dd>A value of grid causes an element to display as a block-level <a 24.4740 + href="#grid-element"><i>Grid element</i></a>. 24.4741 + 24.4742 + <dt><a name=value-def-display-inline-grid>inline-grid</a> 24.4743 + 24.4744 + <dd>A value of inline-grid causes an element to display as an 24.4745 + inline-level <a href="#grid-element"><i>Grid element</i></a>. 24.4746 + </dl> 24.4747 + 24.4748 + <p>The baseline of an inline <a href="#grid-element"><i>Grid 24.4749 + element</i></a> is the bottom edge of the margin box.</p> 24.4750 + <!--End Section: Grid Declaration--></div> 24.4751 + 24.4752 + <div class=section id=grid-items> 24.4753 + <h2 id=grid-items0><span class=secno>5. </span>Grid items</h2> 24.4754 + 24.4755 + <p> The contents of a <a href="#grid-element"><i>grid element</i></a> 24.4756 + consists of zero or more <dfn id=grid-item>grid items</dfn>: each child 24.4757 + of a <a href="#grid-element"><i>grid element</i></a> becomes a <i>grid 24.4758 + item</i>, and each contiguous run of text that is directly contained 24.4759 + inside a <a href="#grid-element"><i>grid element</i></a> is wrapped in an 24.4760 + anonymous <i>grid item</i>. However, an anonymous grid item that contains 24.4761 + only <a 24.4762 + href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white 24.4763 + space</a> is not rendered, as if it were ‘<code 24.4764 + class=css>display:none</code>’. 24.4765 + 24.4766 + <p> A <i>grid item</i> establishes a new formatting context for its 24.4767 + contents. The type of this formatting context is determined by its 24.4768 + ‘<code class=property>display</code>’ value, as usual. The computed 24.4769 + ‘<code class=property>display</code>’ of a <i>grid item</i> is 24.4770 + determined by applying the table in <a 24.4771 + href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 24.4772 + 9.7</a>. However, grid items are grid-level boxes, not block-level boxes: 24.4773 + they participate in the <a href="#grid-element"><i>grid 24.4774 + element</i></a>‘<code class=css>s formatting context, not in a block 24.4775 + formatting context. </code> 24.4776 + 24.4777 + <div class=example> 24.4778 + <p>Examples of grid items: 24.4779 + 24.4780 + <pre> 24.4781 +<div style="display:grid"> 24.4782 + 24.4783 + <!-- grid item: block child --> 24.4784 + <div id="item1">block</div> 24.4785 + 24.4786 + <!-- grid item: floated element; floating is ignored --> 24.4787 + <div id="item2" style="float: left;">float</div> 24.4788 + 24.4789 + <!-- grid item: anonymous block box around inline content --> 24.4790 + anonymous item 3 24.4791 + 24.4792 + <!-- grid item: inline child --> 24.4793 + <span> 24.4794 + item 4 24.4795 + <!-- grid items do not split around blocks --> 24.4796 + <div id=not-an-item>item 4</div> 24.4797 + item 4 24.4798 + </span> 24.4799 +</div></pre> 24.4800 + </div> 24.4801 + 24.4802 + <p> Some values of ’display' trigger the generation of anonymous boxes. 24.4803 + For example, a misparented ‘<code class=css>table-cell</code>’ child 24.4804 + is fixed up by <a 24.4805 + href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating 24.4806 + anonymous ‘<code class=css>table</code>’ and ‘<code 24.4807 + class=css>table-row</code>’ elements</a> around it. <a href="#CSS21" 24.4808 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> This fixup must occur 24.4809 + <em>before</em> a grid element's children are promoted to <a 24.4810 + href="#grid-item"><i>grid items</i></a>. For example, given two 24.4811 + contiguous child elements with ‘<code 24.4812 + class=css>display:table-cell</code>’, an anonymous table wrapper box 24.4813 + around them becomes the <i>grid item</i>. 24.4814 + 24.4815 + <p class=note> Future display types may generate anonymous containers 24.4816 + (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins). It is 24.4817 + intended that grid item determination run after these operations. 24.4818 + <!--End Section: Grid Items--> 24.4819 + </div> 24.4820 + 24.4821 + <div class=section id=defining-grid-rows-columns-and-lines> 24.4822 + <h2 id=defining-grid-rows-columns-and-lines0><span class=secno>6. 24.4823 + </span>Defining Grid Rows, Columns and Lines</h2> 24.4824 + 24.4825 + <div class=section id=grid-rows-and-columns> 24.4826 + <h3 id=grid-rows-and-columns0><span class=secno>6.1. </span>Grid Rows and 24.4827 + Columns</h3> 24.4828 + 24.4829 + <div class=sidefigure> <img alt="Image: Grid Lines." class=figure 24.4830 + src="images/grid-lines.png"> 24.4831 + <p class=caption>Grid Lines.</p> 24.4832 + </div> 24.4833 + 24.4834 + <p> <a href="#grid-element"><i>Grid elements</i></a> use <a 24.4835 + href="#grid-line"><i>Grid lines</i></a> to divide their space. There are 24.4836 + two sets of <a href="#grid-line"><i>Grid lines</i></a>: one set defined 24.4837 + by the columns that run in the direction of block progression, and 24.4838 + another orthogonal set defined by rows. Block progression is a 24.4839 + writing-mode term that defines a logical direction. In English it means 24.4840 + vertical.</p> 24.4841 + 24.4842 + <p> A <a href="#grid-track"><i>Grid track</i></a> is a generic term for a 24.4843 + column or row which separates two <a href="#grid-line"><i>Grid 24.4844 + lines</i></a>. Each <a href="#grid-track"><i>Grid track</i></a> is 24.4845 + assigned a sizing function, which controls how wide or tall the column 24.4846 + or row may grow, and thus how far apart two <a href="#grid-line"><i>Grid 24.4847 + lines</i></a> are. The sizing function specified can be a length, a 24.4848 + percentage of the <a href="#grid-element"><i>Grid element</i></a>’s 24.4849 + size, derived from the contents occupying the column or row, or a 24.4850 + proportion of the space which remains in the <a 24.4851 + href="#grid-element"><i>Grid element</i></a>. In the last case, 24.4852 + remaining space refers to the width or height of the <a 24.4853 + href="#grid-element"><i>Grid element</i></a> after accounting for space 24.4854 + already consumed by columns and rows sized with a length, percentage or 24.4855 + content. The size can also be specified as a range using a minmax 24.4856 + function, which can combine any of the previously mentioned mechanisms 24.4857 + to define a min and max size for the column or row.</p> 24.4858 + 24.4859 + <p> In the following example there are two columns and three rows. The 24.4860 + first column is 150px wide beginning from the starting edge of the <a 24.4861 + href="#grid-element"><i>Grid element</i></a>’s content box. The second 24.4862 + column uses fractional sizing, which is a function of the remaining 24.4863 + space in the Grid. Its size will vary as the width of the <a 24.4864 + href="#grid-element"><i>Grid element</i></a> changes. If the used width 24.4865 + of the <a href="#grid-element"><i>Grid element</i></a> is 200px, then 24.4866 + the second column 50px wide. If the used width of the <a 24.4867 + href="#grid-element"><i>Grid element</i></a> is 100px, then the second 24.4868 + column is 0px and any content positioned in the column will be 24.4869 + overflowing the <a href="#grid-element"><i>Grid element</i></a>. Sizing 24.4870 + occurs in a similar fashion for the rows.</p> 24.4871 + 24.4872 + <pre class=example><style type="text/css"> 24.4873 + #grid { 24.4874 + display: grid; 24.4875 + grid-definition-columns: 150px 1fr; 24.4876 + grid-definition-rows: 50px 1fr 50px 24.4877 + } 24.4878 +</style></pre> 24.4879 + <!--End Section: Grid Rows, Columns and Implicit Grid Lines--></div> 24.4880 + 24.4881 + <div class=section id=grid-named-grid-lines> 24.4882 + <h3 id=named-grid-lines><span class=secno>6.2. </span>Named Grid Lines</h3> 24.4883 + 24.4884 + <div class=sidefigure> <img alt="Image: Named Grid Lines." class=figure 24.4885 + src="images/grid-named-lines.png"> 24.4886 + <p class=caption>Named Grid Lines.</p> 24.4887 + </div> 24.4888 + 24.4889 + <p> A <a href="#grid-line"><i>Grid line</i></a> exists on either side of 24.4890 + a column or row. The <a href="#grid-line"><i>Grid line</i></a> may be 24.4891 + named using one or more quoted strings which are positioned in the ‘<a 24.4892 + href="#grid-definition-rows"><code 24.4893 + class=property>grid-definition-rows</code></a>’ or ‘<a 24.4894 + href="#grid-definition-columns"><code 24.4895 + class=property>grid-definition-columns</code></a>’ definitions where 24.4896 + the <a href="#grid-line"><i>Grid line</i></a> would logically occur (in 24.4897 + between the sizing functions that define the Grid's columns and rows). 24.4898 + Each name associated with a <a href="#grid-line"><i>Grid line</i></a> 24.4899 + must be unique for the set of columns or rows. If the name is specified 24.4900 + multiple times in the same column or row definition, it is associated 24.4901 + with the first <a href="#grid-line"><i>Grid line</i></a> to which the 24.4902 + name was assigned. When a name is not specified, <a 24.4903 + href="#grid-line"><i>Grid lines</i></a> can be referred to in the order 24.4904 + which they occur. The first line is 1, the second 2 and so on. The next 24.4905 + example builds on the prior by assigning each line one or more names.</p> 24.4906 + 24.4907 + <pre class=example><style type="text/css"> 24.4908 + #grid { 24.4909 + display: grid; 24.4910 + grid-definition-columns: "first" "nav" 150px "main" 1fr "last"; 24.4911 + grid-definition-rows: "first" "header" 50px "main" 1fr "footer" 50px "last"; 24.4912 + } 24.4913 +</style></pre> 24.4914 + <!--End Section: Named Grid Lines--></div> 24.4915 + 24.4916 + <div class=section id=grid-repeating-columns-and-rows> 24.4917 + <h3 id=repeating-columns-and-rows><span class=secno>6.3. </span>Repeating 24.4918 + Columns and Rows</h3> 24.4919 + 24.4920 + <p> If there are large number of columns or rows that are the same or 24.4921 + exhibit a recurring pattern, a repeat function can be applied to define 24.4922 + the columns or rows in a more compact form.</p> 24.4923 + 24.4924 + <p> The next two examples are equivalent. There is a single row, and a 24.4925 + pattern of repetitive column <a href="#grid-line"><i>Grid lines</i></a>: 24.4926 + a 250px column followed by a 10px gutter. Note that when the repeat 24.4927 + function is used with <a href="#grid-line"><i>Grid line</i></a> naming, 24.4928 + that the names are assigned to the first occurrence of the pattern.</p> 24.4929 + 24.4930 + <pre class=example><style type="text/css"> 24.4931 + #grid { 24.4932 + display: grid; 24.4933 + grid-definition-columns: 10px "content" 250px 10px 250px 10px 250px 10px 250px 10px; 24.4934 + grid-definition-rows: 1fr; 24.4935 + } 24.4936 + 24.4937 + /* Equivalent definition. */ 24.4938 + #grid { 24.4939 + display: grid; 24.4940 + grid-definition-columns: 10px repeat(4, "content" 250px 10px); 24.4941 + grid-definition-rows: 1fr; 24.4942 + } 24.4943 +</style></pre> 24.4944 + <!--End Section: Repeating Columns and Rows--></div> 24.4945 + 24.4946 + <div class=section id=grid-definition-columns-and-rows-properties> 24.4947 + <h3 id=grid-definition-columns-and-grid-definit><span class=secno>6.4. 24.4948 + </span>Grid-definition-columns and Grid-definition-rows Properties</h3> 24.4949 + 24.4950 + <p> The following grammar expresses the allowable values for the ‘<a 24.4951 + href="#grid-definition-rows"><code 24.4952 + class=property>grid-definition-rows</code></a>’ and ‘<a 24.4953 + href="#grid-definition-columns"><code 24.4954 + class=property>grid-definition-columns</code></a>’ properties.</p> 24.4955 + <code></code> 24.4956 + <pre><track-list> => [ [ <string> ]* <track-group> [ <string> ]* ]+ | none 24.4957 +<track-group> => <track-minmax> | [ repeat( <positive-integer> , [ [ <string> ]* <track-minmax> [ <string> ]* ]+ ) ] 24.4958 +<track-minmax> => minmax( <track-breadth> , <track-breadth> ) | auto | <track-breadth> 24.4959 +<track-breadth> => <length> | <percentage> | <fraction> | min-content | max-content</pre> 24.4960 + <br> 24.4961 + 24.4962 + <p>Where:</p> 24.4963 + 24.4964 + <ul> 24.4965 + <li><dfn id=length>length</dfn> is as defined by CSS3 Values. <a 24.4966 + href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> 24.4967 + 24.4968 + <li><i>percentage</i> expresses a size for a <a 24.4969 + href="#grid-track"><i>Grid track</i></a> as a percentage of the <a 24.4970 + href="#grid-element"><i>Grid element</i></a>’s logical width (for 24.4971 + columns) or logical height (for rows). When the width or height of the 24.4972 + <a href="#grid-element"><i>Grid element</i></a> is dependent on 24.4973 + content, the result is undefined. 24.4974 + 24.4975 + <li><dfn id=fraction>fraction</dfn> is a non-negative floating-point 24.4976 + number followed by ‘<code class=property>fr</code>’. Each ‘<a 24.4977 + href="#fraction"><code class=property>fraction</code></a>’ value 24.4978 + takes a share of the remaining space proportional to its number. See <a 24.4979 + href="#fraction-values"><i>fraction values</i></a> for more details. 24.4980 + 24.4981 + <li><dfn id=max-content>max-content</dfn> is a keyword which refers to 24.4982 + the maximum of the max sizes of <a href="#grid-item"><i>Grid 24.4983 + items</i></a> occupying the <a href="#grid-track"><i>Grid 24.4984 + track</i></a>. 24.4985 + 24.4986 + <li><dfn id=min-content>min-content</dfn> is a keyword which refers to 24.4987 + the maximum of the min sizes of <a href="#grid-item"><i>Grid 24.4988 + items</i></a> occupying the <a href="#grid-track"><i>Grid 24.4989 + track</i></a>. 24.4990 + 24.4991 + <li><dfn id=minmax>minmax(min, max)</dfn> defines a size range. The size 24.4992 + used should be greater than or equal to ‘<code 24.4993 + class=property>min</code>’ and less than or equal to ‘<code 24.4994 + class=property>max</code>’. If ‘<code class=property>max</code>’ 24.4995 + < ‘<code class=property>min</code>’, then ‘<code 24.4996 + class=property>max</code>’ is ignored and ‘<code 24.4997 + class=css>minmax(min,max)</code>’ is treated as ‘<code 24.4998 + class=css>minmax(min,min)</code>’. 24.4999 + 24.5000 + <li><dfn id=auto>auto</dfn> is equivalent to ‘<code 24.5001 + class=css>minmax(min-content, max-content)</code>’. 24.5002 + </ul> 24.5003 + 24.5004 + <p class=issue> Consider whether having undefined behavior for 24.5005 + percentage-sized tracks in content-sized grids is appropriate. CSS2.1 24.5006 + and CSS3 leave percentage width undefined, although there appears to be 24.5007 + consistency between browser implementations.</p> 24.5008 + <br> 24.5009 + 24.5010 + <table class=propdef id=grid-definition-columns-property> 24.5011 + <tbody> 24.5012 + <tr> 24.5013 + <td>Name: 24.5014 + 24.5015 + <td><dfn id=grid-definition-columns>grid-definition-columns</dfn> 24.5016 + 24.5017 + <tr> 24.5018 + <td>Value: 24.5019 + 24.5020 + <td>see grammar above 24.5021 + 24.5022 + <tr> 24.5023 + <td>Initial: 24.5024 + 24.5025 + <td>none 24.5026 + 24.5027 + <tr> 24.5028 + <td>Applies to: 24.5029 + 24.5030 + <td>non-replaced elements with a computed value of ‘<a 24.5031 + href="#grid"><code class=css>grid</code></a>’ or ‘<a 24.5032 + href="#inline-grid"><code class=css>inline-grid</code></a>’ for 24.5033 + display. 24.5034 + 24.5035 + <tr> 24.5036 + <td>Inherited: 24.5037 + 24.5038 + <td>no 24.5039 + 24.5040 + <tr> 24.5041 + <td>Percentages: 24.5042 + 24.5043 + <td>n/a 24.5044 + 24.5045 + <tr> 24.5046 + <td>Media: 24.5047 + 24.5048 + <td>visual, paged 24.5049 + 24.5050 + <tr> 24.5051 + <td>Computed value: 24.5052 + 24.5053 + <td>see text 24.5054 + </table> 24.5055 + 24.5056 + <table class=propdef id=grid-definition-rows-property> 24.5057 + <tbody> 24.5058 + <tr> 24.5059 + <td>Name: 24.5060 + 24.5061 + <td><dfn id=grid-definition-rows>grid-definition-rows</dfn> 24.5062 + 24.5063 + <tr> 24.5064 + <td>Value: 24.5065 + 24.5066 + <td>see grammar above 24.5067 + 24.5068 + <tr> 24.5069 + <td>Initial: 24.5070 + 24.5071 + <td>none 24.5072 + 24.5073 + <tr> 24.5074 + <td>Applies to: 24.5075 + 24.5076 + <td>non-replaced elements with a computed value of ‘<a 24.5077 + href="#grid"><code class=css>grid</code></a>’ or ‘<a 24.5078 + href="#inline-grid"><code class=css>inline-grid</code></a>’ for 24.5079 + display. 24.5080 + 24.5081 + <tr> 24.5082 + <td>Inherited: 24.5083 + 24.5084 + <td>no 24.5085 + 24.5086 + <tr> 24.5087 + <td>Percentages: 24.5088 + 24.5089 + <td>n/a 24.5090 + 24.5091 + <tr> 24.5092 + <td>Media: 24.5093 + 24.5094 + <td>visual, paged 24.5095 + 24.5096 + <tr> 24.5097 + <td>Computed value: 24.5098 + 24.5099 + <td>see text 24.5100 + </table> 24.5101 + 24.5102 + <p>The following example:</p> 24.5103 + 24.5104 + <ul> 24.5105 + <li>Adds one <a href="#grid-line"><i>Grid line</i></a> 100 pixels from 24.5106 + the ‘<code class=css>start</code>’ of the grid. 24.5107 + 24.5108 + <li>Adds another <a href="#grid-line"><i>Grid line</i></a> 1/2 of the 24.5109 + remaining space away. 24.5110 + 24.5111 + <li>Adds another <a href="#grid-line"><i>Grid line</i></a> whose 24.5112 + distance from the prior <a href="#grid-line"><i>Grid line</i></a> will 24.5113 + be based on the maximum content size of elements occupying the column. 24.5114 + 24.5115 + <li>Adds another <a href="#grid-line"><i>Grid line</i></a> whose 24.5116 + distance from the prior <a href="#grid-line"><i>Grid line</i></a> is 24.5117 + based on the minimum content size of all elements occupying the column, 24.5118 + or 1/2 the remaining space, whichever is greater. 24.5119 + </ul> 24.5120 + 24.5121 + <pre 24.5122 + class=example>div { grid-definition-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre> 24.5123 + 24.5124 + <p>Additional examples of valid <a href="#grid-track"><i>Grid 24.5125 + track</i></a> definitions:</p> 24.5126 + 24.5127 + <pre class=example> /* examples of valid track definitions */ 24.5128 + grid-definition-rows: 1fr minmax(min-content, 1fr); 24.5129 + grid-definition-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr)); 24.5130 + grid-definition-rows: (10px); 24.5131 + grid-definition-rows: calc(4em - 5px)</pre> 24.5132 + <!--End Section: grid-definition-columns and grid-definition-rows Properties--> 24.5133 + </div> 24.5134 + 24.5135 + <div class=section id=fraction-values-fr> 24.5136 + <h4 id=fraction-values-fr0><span class=secno>6.4.1. </span>Fraction 24.5137 + Values: ‘<code class=property>fr</code>’</h4> 24.5138 + 24.5139 + <p><dfn id=fraction-values>Fraction values</dfn> are new units applicable 24.5140 + to the ‘<a href="#grid-definition-rows"><code 24.5141 + class=property>grid-definition-rows</code></a>’ and ‘<a 24.5142 + href="#grid-definition-columns"><code 24.5143 + class=property>grid-definition-columns</code></a>’ properties:</p> 24.5144 + 24.5145 + <dl> 24.5146 + <dt>fr 24.5147 + 24.5148 + <dd>Fraction of available space. 24.5149 + </dl> 24.5150 + 24.5151 + <p> The distribution of fractional space occurs after all ‘<a 24.5152 + href="#length"><code class=css>length</code></a>’ or content-based row 24.5153 + and column sizes have reached their maximum. The total size of the rows 24.5154 + or columns is then subtracted from the available space and the remainder 24.5155 + is divided proportionately among the fractional rows and columns.</p> 24.5156 + 24.5157 + <p> Each column or row's proportional share can be computed as the column 24.5158 + or row's <code><fraction> * <remaining space> / <sum of 24.5159 + all fractions></code>. Note that fractions occurring within a 24.5160 + ‘<code class=css>minmax</code>’ function are only counted in the sum 24.5161 + if in the ‘<code class=css>max</code>’ position. Further, fractions 24.5162 + that occur in the ‘<code class=css>min</code>’ position are treated 24.5163 + as an absolute length of <code>0px</code>.</p> 24.5164 + 24.5165 + <p> When remaining space cannot be determined because the width or height 24.5166 + of the <a href="#grid-element"><i>Grid element</i></a> is undefined, 24.5167 + fraction-sized <a href="#grid-track"><i>Grid tracks</i></a> are sized to 24.5168 + their contents while retaining their respective proportions. In such 24.5169 + cases the size of each fractional <a href="#grid-track"><i>Grid 24.5170 + track</i></a> can be computed by determining the ‘<a 24.5171 + href="#max-content"><code class=property>max-content</code></a>’ size 24.5172 + of each fractional <a href="#grid-track"><i>Grid track</i></a> and 24.5173 + dividing that size by the respective ‘<a href="#fraction"><code 24.5174 + class=property>fraction</code></a>’. The maximum value of those 24.5175 + results is treated as the <code>1fr</code> value, which is then 24.5176 + multiplied by each <a href="#grid-track"><i>Grid track</i></a>’s ‘<a 24.5177 + href="#fraction"><code class=property>fraction</code></a>’ to 24.5178 + determine its final size.</p> 24.5179 + <!--End Section: Fraction Values: 'fr'--></div> 24.5180 + 24.5181 + <div class=section id=computed-values-grid-rows-and-columns> 24.5182 + <h4 id=computed-values-for-grid-definition-rows><span class=secno>6.4.2. 24.5183 + </span>Computed Values for grid-definition-rows and 24.5184 + grid-definition-columns</h4> 24.5185 + 24.5186 + <p> The computed size of all <a href="#grid-track"><i>Grid tracks</i></a> 24.5187 + as returned for the ‘<a href="#grid-definition-rows"><code 24.5188 + class=property>grid-definition-rows</code></a>’ and ‘<a 24.5189 + href="#grid-definition-columns"><code 24.5190 + class=property>grid-definition-columns</code></a>’ properties are 24.5191 + normalized to used pixel values. All <a href="#grid-track"><i>Grid 24.5192 + tracks</i></a> are included in the computed value reported for ‘<a 24.5193 + href="#grid-definition-rows"><code 24.5194 + class=property>grid-definition-rows</code></a>’ and ‘<a 24.5195 + href="#grid-definition-columns"><code 24.5196 + class=property>grid-definition-columns</code></a>’ regardless of how 24.5197 + the <a href="#grid-track"><i>Grid tracks</i></a> were created, e.g. 24.5198 + implicit tracks may be created by <a href="#grid-item"><i>Grid 24.5199 + items</i></a> referencing a <a href="#grid-line"><i>Grid line</i></a> 24.5200 + not explicitly defined by a ‘<a href="#grid-definition-rows"><code 24.5201 + class=property>grid-definition-rows</code></a>’ or ‘<a 24.5202 + href="#grid-definition-columns"><code 24.5203 + class=property>grid-definition-columns</code></a>’ property. The 24.5204 + computed value includes any used values for named lines; any duplicate 24.5205 + names must be removed. User agents may use the repeat syntax to avoid 24.5206 + expansive string length due to implicit <a href="#grid-track"><i>Grid 24.5207 + track</i></a> creation, large spanning values or high repeat counts 24.5208 + specified by the author.</p> 24.5209 + 24.5210 + <p> The algorithm used to apply repeat syntax to used <a 24.5211 + href="#grid-track"><i>Grid track</i></a> values and <a 24.5212 + href="#grid-line"><i>Grid line</i></a> names is user agent specific. See 24.5213 + below for example inputs and outputs.</p> 24.5214 + 24.5215 + <pre class=example><style type="text/css"> 24.5216 + #grid { 24.5217 + width: 500px; 24.5218 + grid-definition-columns: 24.5219 + "a" auto 24.5220 + "b" minmax(min-content, 1fr) 24.5221 + "b" "c" "d" repeat(2, "e" 40px) 24.5222 + repeat(5, auto); 24.5223 + } 24.5224 +</style> 24.5225 +<div id="grid"> 24.5226 + <div style="grid-column:1; width:50px"></div> 24.5227 + <div style="grid-column:9; width:50px"></div> 24.5228 +</div> 24.5229 +<script type="text/javascript"> 24.5230 + // Returns '"a" 50px "b" 320px "c" "d" repeat(2, "e" 40px) repeat(4, 0px) 50px'. 24.5231 + var gridElement = document.getElementById("grid"); 24.5232 + window.getComputedStyle(gridElement, null).getPropertyValue("grid-definition-columns"); 24.5233 +</script></pre> 24.5234 + <!--End Section: Fraction Values: 'fr'--></div> 24.5235 + 24.5236 + <div class=section id=defining-grid-areas-with-a-template> 24.5237 + <h3 id=defining-grid-areas-with-a-template0><span class=secno>6.5. 24.5238 + </span>Defining Grid Areas with a Template</h3> 24.5239 + 24.5240 + <p> <a href="#grid-area-concept"><i>Grid areas</i></a> can also be 24.5241 + defined explicitly using <a 24.5242 + href="http://www.w3.org/TR/css3-syntax/Overview.html#identifiers">identifiers</a> 24.5243 + via the ‘<a href="#grid-template"><code 24.5244 + class=property>grid-template</code></a>’ property. The ‘<a 24.5245 + href="#grid-template"><code class=property>grid-template</code></a>’ 24.5246 + property provides a visualization of the <a href="#grid-element"><i>Grid 24.5247 + element</i></a>’s structure while simultaneously defining the <a 24.5248 + href="#grid-area-concept"><i>Grid areas</i></a> which can be used to 24.5249 + position and size the child elements of the Grid.</p> 24.5250 + 24.5251 + <p> A row is created for every separate string listed for the 24.5252 + grid-template property, and a column is created for each identifier or 24.5253 + period in each string. Note that all strings must have the same number 24.5254 + of columns. A period represents an unnamed area in the <a 24.5255 + href="#grid-element"><i>grid element</i></a> that cannot be used to 24.5256 + position or size a <i>grid item</i>. An identifier creates a named <a 24.5257 + href="#grid-area-concept"><i>grid area</i></a> that can be used to 24.5258 + position and size <a href="#grid-item"><i>grid items</i></a>. No two <a 24.5259 + href="#grid-area-concept"><i>grid areas</i></a> may have the same 24.5260 + identifier. Duplicate identifiers define a <a 24.5261 + href="#grid-area-concept"><i>grid area</i></a> which spans multiple 24.5262 + tracks, and must therefore therefore be geometrically adjacent to each 24.5263 + other, forming a rectangular shape. A declaration which fails to meet 24.5264 + these criteria will be dropped.</p> 24.5265 + 24.5266 + <p> In the following example, a ‘<a href="#grid-template"><code 24.5267 + class=property>grid-template</code></a>’ property is used to create a 24.5268 + page layout where areas are defined for header content 24.5269 + <code>head</code>, navigational content <code>nav</code>, footer content 24.5270 + <code>foot</code>, and main content <code>main</code>. Accordingly, the 24.5271 + template creates three rows, two columns, and four areas. The 24.5272 + <code>head</code> area spans both columns and the first row of the grid. 24.5273 + Columns are the tracks that run in the inline direction and rows are the 24.5274 + tracks running in the direction of block progression. See Grid Writing 24.5275 + Modes for more details.</p> 24.5276 + 24.5277 + <p> The ‘<a href="#grid-area"><code 24.5278 + class=property>grid-area</code></a>’ property, defined in further 24.5279 + detail below, is specified on <a href="#grid-item"><i>Grid items</i></a> 24.5280 + to position the <i>Grid item</i> inside an explicitly named <a 24.5281 + href="#grid-area-concept"><i>Grid area</i></a>. The ‘<a 24.5282 + href="#grid-area"><code class=property>grid-area</code></a>’ property, 24.5283 + defined in further detail below, is specified on <a 24.5284 + href="#grid-item"><i>Grid items</i></a> to position the <i>Grid item</i> 24.5285 + inside an explicitly named <a href="#grid-area-concept"><i>Grid 24.5286 + area</i></a>.</p> 24.5287 + 24.5288 + <pre class=example><style type="text/css"> 24.5289 + #grid { 24.5290 + display: grid; 24.5291 + grid-template: "head head" 24.5292 + "nav main" 24.5293 + "foot ." 24.5294 + } 24.5295 + #grid > a { 24.5296 + grid-area: "nav"; 24.5297 + } 24.5298 +</style></pre> 24.5299 + 24.5300 + <table class=propdef id=grid-template-property> 24.5301 + <tbody> 24.5302 + <tr> 24.5303 + <td>Name: 24.5304 + 24.5305 + <td><dfn id=grid-template>grid-template</dfn> 24.5306 + 24.5307 + <tr> 24.5308 + <td>Value: 24.5309 + 24.5310 + <td>[ " [ IDENT | . ]+ " ]+ | <dfn id=none-template>none</dfn> 24.5311 + 24.5312 + <tr> 24.5313 + <td>Initial: 24.5314 + 24.5315 + <td>none 24.5316 + 24.5317 + <tr> 24.5318 + <td>Applies to: 24.5319 + 24.5320 + <td>Grid elements 24.5321 + 24.5322 + <tr> 24.5323 + <td>Inherited: 24.5324 + 24.5325 + <td>no 24.5326 + 24.5327 + <tr> 24.5328 + <td>Percentages: 24.5329 + 24.5330 + <td>n/a 24.5331 + 24.5332 + <tr> 24.5333 + <td>Media: 24.5334 + 24.5335 + <td>visual, paged 24.5336 + 24.5337 + <tr> 24.5338 + <td>Computed value: 24.5339 + 24.5340 + <td>specified value 24.5341 + </table> 24.5342 + <!--End Section: Defining Grid Areas with a Template--></div> 24.5343 + <!--End Section: Defining Grid Rows and Columns--></div> 24.5344 + 24.5345 + <div class=section id=grid-item-placement> 24.5346 + <h2 id=placing-grid-items><span class=secno>7. </span>Placing Grid Items</h2> 24.5347 + 24.5348 + <p>The properties ‘<a href="#grid-row"><code 24.5349 + class=property>grid-row</code></a>’ and ‘<a href="#grid-column"><code 24.5350 + class=property>grid-column</code></a>’ are used to place <a 24.5351 + href="#grid-item"><i>Grid items</i></a> in the Grid. Numbers and strings 24.5352 + refer to <a href="#grid-line"><i>Grid lines</i></a>. The properties will 24.5353 + accept a mandatory starting <a href="#grid-line"><i>Grid line</i></a> and 24.5354 + an optional ending <a href="#grid-line"><i>Grid line</i></a> which must 24.5355 + be greater than the starting <a href="#grid-line"><i>Grid line</i></a>. A 24.5356 + value of ‘<a href="#none-area"><code class=property>auto</code></a>’ 24.5357 + will result in the placement of the <i>Grid item</i> according to the 24.5358 + automatic placement algorithm described in section 7.4. An IDENT refers 24.5359 + to a named <a href="#grid-area-concept"><i>Grid area</i></a> and will 24.5360 + compute to the row or column associated with that <a 24.5361 + href="#grid-area-concept"><i>Grid area</i></a>. ‘<a 24.5362 + href="#grid-row"><code class=property>grid-row</code></a>’ and ‘<a 24.5363 + href="#grid-column"><code class=property>grid-column</code></a>’ 24.5364 + properties that refer to an undefined <a href="#grid-line"><i>Grid 24.5365 + line</i></a> or an undefined <a href="#grid-area-concept"><i>Grid 24.5366 + area</i></a> via an IDENT will compute to their initial values.</p> 24.5367 + 24.5368 + <table class=propdef id=grid-column-property> 24.5369 + <tbody> 24.5370 + <tr> 24.5371 + <td>Name: 24.5372 + 24.5373 + <td><dfn id=grid-column>grid-column</dfn> 24.5374 + 24.5375 + <tr> 24.5376 + <td>Value: 24.5377 + 24.5378 + <td>[ [ <integer> | <string> ] [ <integer> | 24.5379 + <string> ]? ] | IDENT | <dfn id=auto-column-position>auto</dfn> 24.5380 + 24.5381 + <tr> 24.5382 + <td>Initial: 24.5383 + 24.5384 + <td>auto 24.5385 + 24.5386 + <tr> 24.5387 + <td>Applies to: 24.5388 + 24.5389 + <td>Grid Item elements 24.5390 + 24.5391 + <tr> 24.5392 + <td>Inherited: 24.5393 + 24.5394 + <td>no 24.5395 + 24.5396 + <tr> 24.5397 + <td>Percentages: 24.5398 + 24.5399 + <td>n/a 24.5400 + 24.5401 + <tr> 24.5402 + <td>Media: 24.5403 + 24.5404 + <td>visual, paged 24.5405 + 24.5406 + <tr> 24.5407 + <td>Computed value: 24.5408 + 24.5409 + <td>see text 24.5410 + </table> 24.5411 + 24.5412 + <table class=propdef id=grid-row-property> 24.5413 + <tbody> 24.5414 + <tr> 24.5415 + <td>Name: 24.5416 + 24.5417 + <td><dfn id=grid-row>grid-row</dfn> 24.5418 + 24.5419 + <tr> 24.5420 + <td>Value: 24.5421 + 24.5422 + <td>[ [ <integer> | <string> ] [ <integer> | 24.5423 + <string> ]? ] | IDENT | <dfn id=auto-row-position>auto</dfn> 24.5424 + 24.5425 + <tr> 24.5426 + <td>Initial: 24.5427 + 24.5428 + <td>auto 24.5429 + 24.5430 + <tr> 24.5431 + <td>Applies to: 24.5432 + 24.5433 + <td>Grid Item elements 24.5434 + 24.5435 + <tr> 24.5436 + <td>Inherited: 24.5437 + 24.5438 + <td>no 24.5439 + 24.5440 + <tr> 24.5441 + <td>Percentages: 24.5442 + 24.5443 + <td>n/a 24.5444 + 24.5445 + <tr> 24.5446 + <td>Media: 24.5447 + 24.5448 + <td>visual, paged 24.5449 + 24.5450 + <tr> 24.5451 + <td>Computed value: 24.5452 + 24.5453 + <td>see text 24.5454 + </table> 24.5455 + 24.5456 + <div id=grid-row-span-and-grid-column-span> 24.5457 + <h3 id=grid-row-span-and-grid-column-span0><span class=secno>7.1. 24.5458 + </span>Grid-row-span and Grid-column-span</h3> 24.5459 + 24.5460 + <p> As an alternative to specifying an ending line for a <a 24.5461 + href="#grid-area-concept"><i>Grid area</i></a> or <i>Grid item</i>, 24.5462 + ‘<a href="#grid-row-span"><code 24.5463 + class=property>grid-row-span</code></a>’ and ‘<a 24.5464 + href="#grid-column-span"><code 24.5465 + class=property>grid-column-span</code></a>’ properties are available 24.5466 + to specify a distance (line count) from the starting line to the ending 24.5467 + line to define the dimensions of a <a href="#grid-area-concept"><i>Grid 24.5468 + area</i></a>. An IDENT refers to a named <a 24.5469 + href="#grid-area-concept"><i>Grid area</i></a> and will compute to the 24.5470 + row or column span associated with that <a 24.5471 + href="#grid-area-concept"><i>Grid area</i></a>. Note that when ‘<a 24.5472 + href="#grid-column-span"><code 24.5473 + class=property>grid-column-span</code></a>’ and a ‘<a 24.5474 + href="#grid-column"><code class=property>grid-column</code></a>’ 24.5475 + ending line are both specified for a <i>Grid item</i>, that the ending 24.5476 + line has priority. In such cases the computed value of ‘<a 24.5477 + href="#grid-column-span"><code 24.5478 + class=property>grid-column-span</code></a>’ will be the <a 24.5479 + href="#grid-line"><i>Grid line</i></a> number of the specified column 24.5480 + ending line minus the <a href="#grid-line"><i>Grid line</i></a> number 24.5481 + of the specified column starting line. The same holds true for the 24.5482 + related row properties.</p> 24.5483 + 24.5484 + <pre class=example><style type="text/css"> 24.5485 +#item { 24.5486 + /* the following two property definitions are equivalent */ 24.5487 + /* both place the item between the first and third line */ 24.5488 + /* which is covering the first and second row of the Grid */ 24.5489 + grid-row: 1 3; 24.5490 + grid-row: 1; grid-row-span: 2; 24.5491 +} 24.5492 +</style></pre> 24.5493 + 24.5494 + <table class=propdef id=grid-column-span-property> 24.5495 + <tbody> 24.5496 + <tr> 24.5497 + <td>Name: 24.5498 + 24.5499 + <td><dfn id=grid-column-span>grid-column-span</dfn> 24.5500 + 24.5501 + <tr> 24.5502 + <td>Value: 24.5503 + 24.5504 + <td><integer> | IDENT 24.5505 + 24.5506 + <tr> 24.5507 + <td>Initial: 24.5508 + 24.5509 + <td>1 24.5510 + 24.5511 + <tr> 24.5512 + <td>Applies to: 24.5513 + 24.5514 + <td>Grid Item elements 24.5515 + 24.5516 + <tr> 24.5517 + <td>Inherited: 24.5518 + 24.5519 + <td>no 24.5520 + 24.5521 + <tr> 24.5522 + <td>Percentages: 24.5523 + 24.5524 + <td>n/a 24.5525 + 24.5526 + <tr> 24.5527 + <td>Media: 24.5528 + 24.5529 + <td>visual, paged 24.5530 + 24.5531 + <tr> 24.5532 + <td>Computed value: 24.5533 + 24.5534 + <td>specified value 24.5535 + </table> 24.5536 + 24.5537 + <table class=propdef id=grid-row-span-property> 24.5538 + <tbody> 24.5539 + <tr> 24.5540 + <td>Name: 24.5541 + 24.5542 + <td><dfn id=grid-row-span>grid-row-span</dfn> 24.5543 + 24.5544 + <tr> 24.5545 + <td>Value: 24.5546 + 24.5547 + <td><integer> | IDENT 24.5548 + 24.5549 + <tr> 24.5550 + <td>Initial: 24.5551 + 24.5552 + <td>1 24.5553 + 24.5554 + <tr> 24.5555 + <td>Applies to: 24.5556 + 24.5557 + <td>Grid Item elements 24.5558 + 24.5559 + <tr> 24.5560 + <td>Inherited: 24.5561 + 24.5562 + <td>no 24.5563 + 24.5564 + <tr> 24.5565 + <td>Percentages: 24.5566 + 24.5567 + <td>n/a 24.5568 + 24.5569 + <tr> 24.5570 + <td>Media: 24.5571 + 24.5572 + <td>visual, paged 24.5573 + 24.5574 + <tr> 24.5575 + <td>Computed value: 24.5576 + 24.5577 + <td>specified value 24.5578 + </table> 24.5579 + <!--End Section: Grid-row-span and Grid-column-span--></div> 24.5580 + 24.5581 + <div class=section id=the-grid-area-shorthand> 24.5582 + <h3 id=the-grid-area-shorthand0><span class=secno>7.2. </span>The Grid 24.5583 + Area shorthand</h3> 24.5584 + 24.5585 + <p>The ‘<a href="#grid-area"><code 24.5586 + class=property>grid-area</code></a>’ property is a shorthand for the 24.5587 + ‘<a href="#grid-column"><code 24.5588 + class=property>grid-column</code></a>’, ‘<a href="#grid-row"><code 24.5589 + class=property>grid-row</code></a>’, ‘<a 24.5590 + href="#grid-column-span"><code 24.5591 + class=property>grid-column-span</code></a>’, and ‘<a 24.5592 + href="#grid-row-span"><code class=property>grid-row-span</code></a>’ 24.5593 + properties. Assigning an IDENT to the ‘<a href="#grid-area"><code 24.5594 + class=property>grid-area</code></a>’ property will set all four 24.5595 + properties to the IDENT value. Specifying two integers will specify the 24.5596 + row position and column position, respectively. Specifying three 24.5597 + integers will specify the row and column positions, and set both the row 24.5598 + and column spans to the value of the third integer. Specifying four 24.5599 + integers will specify the row and column positions, and the row and 24.5600 + column spans, respectively. Specifying four strings will specify the 24.5601 + top, right, bottom, and left <a href="#grid-line"><i>Grid lines</i></a> 24.5602 + for the <i>Grid item</i>, respectively. Specifying auto will set auto 24.5603 + row and column positions to be resolved in accordance with ‘<a 24.5604 + href="#grid-flow"><code class=property>grid-flow</code></a>’ property, 24.5605 + as well as optionally specified row and column spans similar to the int 24.5606 + syntax specified above.</p> 24.5607 + 24.5608 + <table class=propdef id=grid-area-property> 24.5609 + <tbody> 24.5610 + <tr> 24.5611 + <td>Name: 24.5612 + 24.5613 + <td><dfn id=grid-area>grid-area</dfn> 24.5614 + 24.5615 + <tr> 24.5616 + <td>Value: 24.5617 + 24.5618 + <td>IDENT | <br> 24.5619 + [ <int> ]{2,4} | <br> 24.5620 + [ <string> ]{4} | <br> 24.5621 + [ <dfn id=none-area>auto</dfn> [ <int> ]{0,2} ] 24.5622 + 24.5623 + <tr> 24.5624 + <td>Initial: 24.5625 + 24.5626 + <td>none 24.5627 + 24.5628 + <tr> 24.5629 + <td>Applies to: 24.5630 + 24.5631 + <td>Grid Item elements 24.5632 + 24.5633 + <tr> 24.5634 + <td>Inherited: 24.5635 + 24.5636 + <td>no 24.5637 + 24.5638 + <tr> 24.5639 + <td>Percentages: 24.5640 + 24.5641 + <td>n/a 24.5642 + 24.5643 + <tr> 24.5644 + <td>Media: 24.5645 + 24.5646 + <td>visual, paged 24.5647 + 24.5648 + <tr> 24.5649 + <td>Computed value: 24.5650 + 24.5651 + <td>specified value 24.5652 + </table> 24.5653 + 24.5654 + <p> Note that the use of a shorthand property resets all properties 24.5655 + covered by that property to their initial value, except for the 24.5656 + properties explicitly set by the shorthand property.</p> 24.5657 + <!--End Section: The grid area shorthand--></div> 24.5658 + 24.5659 + <div class=section id=anonymous-grid-areas> 24.5660 + <h3 id=anonymous-grid-areas0><span class=secno>7.3. </span>Anonymous Grid 24.5661 + Areas</h3> 24.5662 + 24.5663 + <p> Each <i>Grid item</i> is contained by a <a 24.5664 + href="#grid-area-concept"><i>Grid area</i></a>, i.e. the <a 24.5665 + href="#grid-area-concept"><i>Grid area</i></a> serves as the containing 24.5666 + block for the <i>Grid item</i>. The dimensions of an anonymous <a 24.5667 + href="#grid-area-concept"><i>Grid area</i></a> are determined by naming 24.5668 + the starting and ending <a href="#grid-line"><i>Grid lines</i></a> using 24.5669 + the ‘<a href="#grid-row"><code class=property>grid-row</code></a>’ 24.5670 + and ‘<a href="#grid-column"><code 24.5671 + class=property>grid-column</code></a>’ properties on the <i>Grid 24.5672 + item</i> which the <a href="#grid-area-concept"><i>Grid area</i></a> 24.5673 + surrounds. The starting and ending lines may be referred to by a string 24.5674 + name, if one was defined by the author, the <a 24.5675 + href="#start-column-position">start</a> and <a 24.5676 + href="#end-column-position">end</a> line keywords, or the <a 24.5677 + href="#grid-line"><i>Grid line</i></a>’s number.</p> 24.5678 + 24.5679 + <p> The following example positions the first <i>Grid item</i> to cover 24.5680 + all rows and columns of the <a href="#grid-element"><i>Grid 24.5681 + element</i></a> using the <a href="#start-column-position">start</a> and 24.5682 + <a href="#end-column-position">end</a> keywords. The second <i>Grid 24.5683 + item</i> is positioned to cover the first row. Note that when only the 24.5684 + starting <a href="#grid-line"><i>Grid line</i></a> of the ‘<a 24.5685 + href="#grid-row"><code class=property>grid-row</code></a>’ or ‘<a 24.5686 + href="#grid-column"><code class=property>grid-column</code></a>’ 24.5687 + properties are specified for the <a href="#grid-area-concept"><i>Grid 24.5688 + area</i></a>, that the <a href="#grid-area-concept"><i>Grid area</i></a> 24.5689 + is assumed to extend to the subsequent <a href="#grid-line"><i>Grid 24.5690 + line</i></a>.</p> 24.5691 + 24.5692 + <pre class=example><style type="text/css"> 24.5693 + /* covers the <a 24.5694 + href="#grid-element"><i>Grid element</i></a>’s content box */ 24.5695 + #item1 { 24.5696 + grid-row: start end; 24.5697 + grid-column: start end; 24.5698 + } 24.5699 + 24.5700 + /* covers the first row */ 24.5701 + #item2 { 24.5702 + grid-row: start; /* extends to row Grid Line 2 */ 24.5703 + grid-column: start end; 24.5704 + } 24.5705 +</style></pre> 24.5706 + 24.5707 + <p> The next example defines rows for header and footer <a 24.5708 + href="#grid-item"><i>Grid items</i></a> sized to content, as well as a 24.5709 + main region that receives all remaining space. A single column which 24.5710 + receives all horizontal space in the Grid's content box is also defined. 24.5711 + </p> 24.5712 + 24.5713 + <pre class=example><style type="text/css"> 24.5714 + #grid { 24.5715 + display: grid; 24.5716 + grid-definition-rows: "header" auto "main" 1fr "footer" auto; 24.5717 + grid-definition-columns: 1fr; 24.5718 + } 24.5719 + 24.5720 + #header { grid-row: "header"; grid-column: start } 24.5721 + #main { grid-row: "main"; grid-column: start } 24.5722 + #footer { grid-row: "footer"; grid-column: start } 24.5723 + 24.5724 + /* Equivalent to the above using grid line numbers instead of names. */ 24.5725 + #header { grid-row: 1; grid-column: 1 } 24.5726 + #main { grid-row: 2; grid-column: 1 } 24.5727 + #footer { grid-row: 3; grid-column: 1 } 24.5728 +</style></pre> 24.5729 + <!--End Section: Anonymous Grid Areas--></div> 24.5730 + 24.5731 + <div class=section id=grid-implicit-columns-and-rows> 24.5732 + <h3 id=implicit-columns-and-rows><span class=secno>7.4. </span>Implicit 24.5733 + Columns and Rows</h3> 24.5734 + 24.5735 + <div class=sidefigure> 24.5736 + <p> <img 24.5737 + alt="Image: A Grid with an implicit row and two implicit columns." 24.5738 + src="images/implicit-columns-and-rows.png"></p> 24.5739 + 24.5740 + <p class=caption>A Grid with an implicit row and two implicit columns.</p> 24.5741 + </div> 24.5742 + 24.5743 + <p> <a href="#grid-line"><i>Grid line</i></a> numbers referred to by 24.5744 + ‘<a href="#grid-row"><code class=property>grid-row</code></a>’ or 24.5745 + ‘<a href="#grid-column"><code class=property>grid-column</code></a>’ 24.5746 + properties on a <i>Grid item</i> are not required to refer to a <a 24.5747 + href="#grid-line"><i>Grid line</i></a> that was defined using the ‘<a 24.5748 + href="#grid-definition-columns"><code 24.5749 + class=property>grid-definition-columns</code></a>’ or ‘<a 24.5750 + href="#grid-definition-rows"><code 24.5751 + class=property>grid-definition-rows</code></a>’ properties on the <a 24.5752 + href="#grid-element"><i>Grid element</i></a>. In cases where the 24.5753 + specified position is outside those explicitly specified on the <a 24.5754 + href="#grid-element"><i>Grid element</i></a>, implicit columns and rows 24.5755 + fill gaps added as needed to create additional <a 24.5756 + href="#grid-line"><i>Grid lines</i></a> until the reference can be 24.5757 + resolved. Note that quoted <a href="#grid-line"><i>Grid line</i></a> 24.5758 + names that don't resolve to an explicitly defined <a 24.5759 + href="#grid-line"><i>Grid line</i></a> are treated as though the author 24.5760 + specified the ‘<a href="#start-line"><code 24.5761 + class=css>start</code></a>’ <a href="#grid-line"><i>Grid line</i></a> 24.5762 + and don't trigger implicit <a href="#grid-track"><i>Grid track</i></a> 24.5763 + creation.</p> 24.5764 + 24.5765 + <p> Figure 10 illustrates the placement of <a href="#grid-item"><i>Grid 24.5766 + items</i></a> resulting from the markup shown in the following example. 24.5767 + Note that <i>Grid item</i> <code>B</code> is positioned on <a 24.5768 + href="#grid-line"><i>Grid line</i></a> 5 which creates a 5th column to 24.5769 + contain <i>Grid item</i> <code>B</code>. Further, columns 3 and 4 are 24.5770 + created as implicit auto-width columns without content resulting in a 24.5771 + used column width of 0px.</p> 24.5772 + 24.5773 + <pre class=example><style type="text/css"> 24.5774 + #grid { display: grid; grid-definition-columns: 20px; grid-definition-rows: 20px } 24.5775 + #A { grid-column: 1; grid-row: 1; justify-self: start; align-self: head } 24.5776 + #B { grid-column: 5; grid-row: 1; grid-row-span: 2; } 24.5777 + #C { grid-column: 1; grid-row: 2; grid-column-span: 2; } 24.5778 +</style> 24.5779 + 24.5780 +<div id="grid"> 24.5781 + <div id="A">A</div> 24.5782 + <div id="B">B</div> 24.5783 + <div id="C">C</div> 24.5784 +</div></pre> 24.5785 + 24.5786 + <div id=defining-default-size-for-implicit-columns-and-rows> 24.5787 + <h4 id=defining-a-default-size-for-implicit-col><span class=secno>7.4.1. 24.5788 + </span>Defining a Default Size for Implicit Columns and Rows</h4> 24.5789 + 24.5790 + <p> By default, any implicit columns or rows created are auto sized to 24.5791 + content. The default size can be changed using the ‘<a 24.5792 + href="#grid-column-sizing"><code 24.5793 + class=property>grid-column-sizing</code></a>’ and ‘<a 24.5794 + href="#grid-row-sizing"><code 24.5795 + class=property>grid-row-sizing</code></a>’ properties. The properties 24.5796 + accept any valid single column or row sizing function.</p> 24.5797 + 24.5798 + <table class=propdef id=grid-column-sizing-property> 24.5799 + <tbody> 24.5800 + <tr> 24.5801 + <td>Name: 24.5802 + 24.5803 + <td><dfn id=grid-column-sizing>grid-column-sizing</dfn> 24.5804 + 24.5805 + <tr> 24.5806 + <td>Value: 24.5807 + 24.5808 + <td><track-minmax> (see <a 24.5809 + href="#grid-definition-columns-and-rows-properties">Grid Columns and 24.5810 + Grid Rows Properties</a>) 24.5811 + 24.5812 + <tr> 24.5813 + <td>Initial: 24.5814 + 24.5815 + <td>auto 24.5816 + 24.5817 + <tr> 24.5818 + <td>Applies to: 24.5819 + 24.5820 + <td>Grid elements 24.5821 + 24.5822 + <tr> 24.5823 + <td>Inherited: 24.5824 + 24.5825 + <td>no 24.5826 + 24.5827 + <tr> 24.5828 + <td>Percentages: 24.5829 + 24.5830 + <td>see <a href="#grid-definition-columns-and-rows-properties">Grid 24.5831 + Columns and Grid Rows Properties</a> 24.5832 + 24.5833 + <tr> 24.5834 + <td>Media: 24.5835 + 24.5836 + <td>visual, paged 24.5837 + 24.5838 + <tr> 24.5839 + <td>Computed value: 24.5840 + 24.5841 + <td>see <a href="#computed-values-grid-rows-and-columns">Computed 24.5842 + Values for grid-definition-rows and grid-definition-columns</a> 24.5843 + </table> 24.5844 + 24.5845 + <table class=propdef id=grid-row-sizing-property> 24.5846 + <tbody> 24.5847 + <tr> 24.5848 + <td>Name: 24.5849 + 24.5850 + <td><dfn id=grid-row-sizing>grid-row-sizing</dfn> 24.5851 + 24.5852 + <tr> 24.5853 + <td>Value: 24.5854 + 24.5855 + <td><track-minmax> (see <a 24.5856 + href="#grid-definition-columns-and-rows-properties">Grid Columns and 24.5857 + Grid Rows Properties</a>) 24.5858 + 24.5859 + <tr> 24.5860 + <td>Initial: 24.5861 + 24.5862 + <td>auto 24.5863 + 24.5864 + <tr> 24.5865 + <td>Applies to: 24.5866 + 24.5867 + <td>Grid elements 24.5868 + 24.5869 + <tr> 24.5870 + <td>Inherited: 24.5871 + 24.5872 + <td>no 24.5873 + 24.5874 + <tr> 24.5875 + <td>Percentages: 24.5876 + 24.5877 + <td>see <a href="#grid-definition-columns-and-rows-properties">Grid 24.5878 + Columns and Grid Rows Properties</a> 24.5879 + 24.5880 + <tr> 24.5881 + <td>Media: 24.5882 + 24.5883 + <td>visual, paged 24.5884 + 24.5885 + <tr> 24.5886 + <td>Computed value: 24.5887 + 24.5888 + <td>see <a href="#computed-values-grid-rows-and-columns">Computed 24.5889 + Values for grid-definition-rows and grid-definition-columns</a> 24.5890 + </table> 24.5891 + <!--End Section: Defining a Default Size for Implicit Columns and Rows--> 24.5892 + </div> 24.5893 + <!--End Section: Implicit Columns and Rows--></div> 24.5894 + 24.5895 + <div class=section id=automatic-placement-of-grid-items> 24.5896 + <h3 id=automatic-placement-of-grid-items0><span class=secno>7.5. 24.5897 + </span>Automatic Placement of Grid Items</h3> 24.5898 + 24.5899 + <p> <a href="#grid-item"><i>Grid items</i></a> can be automatically 24.5900 + placed into an unoccupied space of the Grid. The ‘<a 24.5901 + href="#grid-flow"><code class=property>grid-flow</code></a>’ property 24.5902 + controls the direction in which the search for unoccupied space takes 24.5903 + place, and whether rows or columns are added as needed to accomodate the 24.5904 + content.</p> 24.5905 + 24.5906 + <p> A ‘<a href="#grid-flow"><code 24.5907 + class=property>grid-flow</code></a>’ value of ‘<a href="#rows"><code 24.5908 + class=css>rows</code></a>’ will place <i>grid item</i>s in row-major 24.5909 + order by searching across columns and then rows for unoccupied space, 24.5910 + and will create additional rows as needed to accomodate content <i>grid 24.5911 + item</i>s. Similarly, a ‘<a href="#grid-flow"><code 24.5912 + class=property>grid-flow</code></a>’ value of ‘<a 24.5913 + href="#columns"><code class=css>columns</code></a>’ will place <i>grid 24.5914 + item</i>s in column-major order, creating new columns as needed.</p> 24.5915 + 24.5916 + <table class=propdef id=grid-flow-property> 24.5917 + <tbody> 24.5918 + <tr> 24.5919 + <td>Name: 24.5920 + 24.5921 + <td><dfn id=grid-flow>grid-flow</dfn> 24.5922 + 24.5923 + <tr> 24.5924 + <td>Value: 24.5925 + 24.5926 + <td><dfn id=none-flow>none</dfn> | <dfn id=rows>rows</dfn> | <dfn 24.5927 + id=columns>columns</dfn> 24.5928 + 24.5929 + <tr> 24.5930 + <td>Initial: 24.5931 + 24.5932 + <td>none 24.5933 + 24.5934 + <tr> 24.5935 + <td>Applies to: 24.5936 + 24.5937 + <td>Grid elements 24.5938 + 24.5939 + <tr> 24.5940 + <td>Inherited: 24.5941 + 24.5942 + <td>no 24.5943 + 24.5944 + <tr> 24.5945 + <td>Percentages: 24.5946 + 24.5947 + <td>n/a 24.5948 + 24.5949 + <tr> 24.5950 + <td>Media: 24.5951 + 24.5952 + <td>visual, paged 24.5953 + 24.5954 + <tr> 24.5955 + <td>Computed value: 24.5956 + 24.5957 + <td>specified value 24.5958 + </table> 24.5959 + 24.5960 + <div class=sidefigure> 24.5961 + <p> <img alt="Image: A form arranged using automatic placement." 24.5962 + src="images/auto-placed-form.png"></p> 24.5963 + 24.5964 + <p class=caption>A form arranged using automatic placement.</p> 24.5965 + </div> 24.5966 + 24.5967 + <p> The search for unoccupied space is conducted one <i>Grid item</i> at 24.5968 + a time. <a href="#grid-item"><i>Grid items</i></a> which have a 24.5969 + constraint on their major axis are placed first (the major axis being 24.5970 + rows for a ‘<a href="#grid-flow"><code 24.5971 + class=property>grid-flow</code></a>’ value of ‘<a href="#rows"><code 24.5972 + class=css>rows</code></a>’ and columns for a ‘<a 24.5973 + href="#grid-flow"><code class=property>grid-flow</code></a>’ value of 24.5974 + ‘<a href="#columns"><code class=property>columns</code></a>’‘<code 24.5975 + class=css>). Note that constraint means a value other than 24.5976 + </code>’‘<a href="#none-area"><code 24.5977 + class=property>auto</code></a>’‘<code class=css> for the applicable 24.5978 + </code>’grid-row' or ‘<a href="#grid-column"><code 24.5979 + class=property>grid-column</code></a>’ property. After this step, the 24.5980 + number of minor-axis tracks must be determined for conducting the second 24.5981 + phase of the auto-placement algorithm.</p> 24.5982 + 24.5983 + <p> For the purposes of operating the auto-placement algorithm on items 24.5984 + that have no constraint on their major axis, the number of tracks on the 24.5985 + minor axis must be determined. The number of tracks will be the largest 24.5986 + number implied by the ‘<a href="#grid-template"><code 24.5987 + class=property>grid-template</code></a>’ property, the ‘<code 24.5988 + class=property>grid-row-definition</code>’ and ‘<code 24.5989 + class=property>grid-column-definition</code>’ properties, the position 24.5990 + and size of any explicitly-defined <a href="#grid-item"><i>grid 24.5991 + items</i></a>, or any minor-axis ‘<a href="#none-area"><code 24.5992 + class=css>auto</code></a>’ values resolved by the previous phase of 24.5993 + the algorithm. Note that any ‘<a href="#none-area"><code 24.5994 + class=css>auto</code></a>’ values still unresolved will be treated as 24.5995 + 1 for the purposes of this determination.</p> 24.5996 + 24.5997 + <p> To position all remaining items that have ‘<a 24.5998 + href="#none-area"><code class=css>auto</code></a>’ values left 24.5999 + unresolved, starting at position 1,1 on the grid, determine the minimum 24.6000 + value along the minor axis that a <i>grid item</i> can be placed at 24.6001 + while not overlapping the <a href="#grid-area-concept"><i>grid 24.6002 + area</i></a> of any other <i>grid item</i>, or exceeding the previously 24.6003 + determined maximum track along the minor axis. If no such value can be 24.6004 + found along the minor axis, increment the major axis value, creating new 24.6005 + major axis tracks as necessary.</p> 24.6006 + 24.6007 + <p> In the following example, there are three columns, each auto-sized to 24.6008 + their contents. No rows are explicitly defined. The ‘<a 24.6009 + href="#grid-flow"><code class=property>grid-flow</code></a>’ property 24.6010 + is ‘<a href="#rows"><code class=css>rows</code></a>’ which instructs 24.6011 + the grid to search across its three columns starting with the first row, 24.6012 + then the next, adding rows as needed until sufficient space is located 24.6013 + to accomodate the position of any auto-placed <i>Grid item</i>. Figure 24.6014 + 11 illustrates the result.</p> 24.6015 + 24.6016 + <pre class=example><style type="text/css"> 24.6017 + form { 24.6018 + display: grid; 24.6019 + grid-definition-columns: "labels" auto "controls" auto "oversized" auto; 24.6020 + grid-flow: rows 24.6021 + } 24.6022 + form > input, form > select { 24.6023 + /* Place all controls in the "controls" column and automatically find the */ 24.6024 + /* next available row. */ 24.6025 + grid-column: "controls"; 24.6026 + grid-row: auto 24.6027 + } 24.6028 + form > label { 24.6029 + /* Place all labels in the "labels" column and automatically find the next 24.6030 + /* available row. */ 24.6031 + grid-column: "labels"; 24.6032 + grid-row: auto 24.6033 + } 24.6034 + 24.6035 + #department { 24.6036 + /* Auto place this item in the "oversized" column in the first row where an area that */ 24.6037 + /* spans three rows won't overlap other explicitly placed items or areas or any items */ 24.6038 + /* automatically placed prior to this area. */ 24.6039 + grid-column: "oversized"; 24.6040 + grid-row: auto; 24.6041 + grid-row-span: 3; 24.6042 + } 24.6043 + 24.6044 + /* Place all the buttons of the form in the explicitly defined grid area. */ 24.6045 + #buttons { 24.6046 + grid-row: auto; 24.6047 + 24.6048 + /* Ensure the button area spans the entire grid element in the column direction. */ 24.6049 + grid-column-span: 3; 24.6050 + justify-self: end 24.6051 + } 24.6052 +</style> 24.6053 +<form action="#"> 24.6054 + <label for="firstname">First name:</label> 24.6055 + <input type="text" id="firstname" name="firstname" /> 24.6056 + <label for="lastname">Last name:</label> 24.6057 + <input type="text" id="lastname" name="lastname" /> 24.6058 + <label for="address">Address:</label> 24.6059 + <input type="text" id="address" name="address" /> 24.6060 + <label for="address2">Address 2:</label> 24.6061 + <input type="text" id="address2" name="address2" /> 24.6062 + <label for="city">City:</label> 24.6063 + <input type="text" id="city" name="city" /> 24.6064 + <label for="state">State:</label> 24.6065 + <select type="text" id="state" name="state"> 24.6066 + <option value="WA">Washington</option> 24.6067 + </select> 24.6068 + <label for="zip">Zip:</label> 24.6069 + <input type="text" id="zip" name="zip" /> 24.6070 + 24.6071 + <div id="department"> 24.6072 + <label for="department">Department:</label> 24.6073 + <select id="department" name="department" multiple> 24.6074 + <option value="finance">Finance</option> 24.6075 + <option value="humanresources">Human Resources</option> 24.6076 + <option value="marketing">Marketing</option> 24.6077 + </select> 24.6078 + </div> 24.6079 + 24.6080 + <div id="buttons"> 24.6081 + <button id="cancel">Cancel</button> 24.6082 + <button id="back">Back</button> 24.6083 + <button id="next">Next</button> 24.6084 + </div> 24.6085 +</form></pre> 24.6086 + 24.6087 + <div class=section id=automatic-grid-item-placement-algorithm> 24.6088 + <h4 id=automatic-grid-item-placement-algorithm0><span class=secno>7.5.1. 24.6089 + </span>Automatic Grid Item Placement Algorithm</h4> 24.6090 + 24.6091 + <p> The following summarizes the algorithm for auto placement of <a 24.6092 + href="#grid-item"><i>Grid items</i></a>:</p> 24.6093 + 24.6094 + <ol> 24.6095 + <li>For each <i>Grid item</i> with a major-axis position that is not 24.6096 + ‘<a href="#none-area"><code class=css>auto</code></a>’ in source 24.6097 + order: 24.6098 + </ol> 24.6099 + 24.6100 + <ol> 24.6101 + <li>Resolve the ‘<a href="#none-area"><code 24.6102 + class=css>auto</code></a>’ value for its minor-axis position to the 24.6103 + minimum value that ensures this item's <a 24.6104 + href="#grid-area-concept"><i>grid area</i></a> will not overlap the <a 24.6105 + href="#grid-area-concept"><i>grid area</i></a> of any explicitly or 24.6106 + previously auto-placed item. 24.6107 + </ol> 24.6108 + 24.6109 + <ul> 24.6110 + <li>Determine the maximum number of minor tracks based on maximum track 24.6111 + number implied by the ‘<a href="#grid-template"><code 24.6112 + class=property>grid-template</code></a>’ property, the ‘<code 24.6113 + class=property>grid-row-definition</code>’ and ‘<code 24.6114 + class=property>grid-column-definition</code>’ properties, the 24.6115 + position and size of any explicitly-defined <a 24.6116 + href="#grid-item"><i>grid items</i></a>, or any minor-axis ‘<a 24.6117 + href="#none-area"><code class=css>auto</code></a>’ values resolved 24.6118 + by the step 1 of the algorithm 24.6119 + 24.6120 + <li>Position the <i>auto-placement cursor</i> at position 1,1 in the 24.6121 + grid. 24.6122 + 24.6123 + <li>For each <i>grid item</i> having an unresolved value of ‘<a 24.6124 + href="#none-area"><code class=css>auto</code></a>’, in source order: 24.6125 + 24.6126 + <ol> 24.6127 + <li>If the minor-axis position is not ‘<a href="#none-area"><code 24.6128 + class=css>auto</code></a>’, then: 24.6129 + <ol> 24.6130 + <li>Set the minor-axis position of the cursor to be equal to the 24.6131 + minor-axis position of the <i>grid item</i>. 24.6132 + 24.6133 + <li>Increment the <i>auto-placement cursor</i> along the major-axis 24.6134 + until a value is found where the <i>grid item</i> does not overlap 24.6135 + the <a href="#grid-area-concept"><i>grid area</i></a> of any other 24.6136 + <i>grid item</i> (creating new major-axis tracks as necessary). 24.6137 + </ol> 24.6138 + 24.6139 + <li>If the minor and major-axis positions are both ‘<a 24.6140 + href="#none-area"><code class=css>auto</code></a>’, then: 24.6141 + <ol> 24.6142 + <li>Increment the minor-axis position of the <i>auto-placement 24.6143 + cursor</i> until this item's <a href="#grid-area-concept"><i>grid 24.6144 + area</i></a> does not overlap another item's <a 24.6145 + href="#grid-area-concept"><i>grid area</i></a>, or causes the <a 24.6146 + href="#grid-area-concept"><i>grid area</i></a> to exceed the 24.6147 + maximum number of minor-axis tracks previously determined in step 24.6148 + 2. 24.6149 + 24.6150 + <li>If this item's position is still unresolved after the previous 24.6151 + step, then increment the cursor's major-axis position and reset 24.6152 + the minor-axis position to 1 (creating new major-axis tracks if 24.6153 + necessary. 24.6154 + </ol> 24.6155 + </ol> 24.6156 + </li> 24.6157 + <!--End Section: Automatic Grid Item Placement Algorithm--> 24.6158 + </ul> 24.6159 + </div> 24.6160 + <!--End Section: Grid Item Auto Placement--></div> 24.6161 + <!--End Section: Grid Item Placement--></div> 24.6162 + 24.6163 + <div class=section id=grid-item-alignment> 24.6164 + <h2 id=grid-item-alignment0><span class=secno>8. </span>Grid Item 24.6165 + Alignment</h2> 24.6166 + 24.6167 + <p> A <i>Grid item</i>’s alignment within its Area can be controlled by 24.6168 + using the ‘<code class=property>justify-self</code>’ and ‘<code 24.6169 + class=property>align-self</code>’ properties. Refer to the <a 24.6170 + href="http://dev.w3.org/csswg/css3-align/">CSS Box Alignment Level 3</a> 24.6171 + for more details about these properties.</p> 24.6172 + <!--End Section: Grid Item Alignment--></div> 24.6173 + 24.6174 + <div class=section id=drawing-order-of-grid-items> 24.6175 + <h2 id=drawing-order-of-grid-items0><span class=secno>9. </span>Drawing 24.6176 + Order of Grid Items</h2> 24.6177 + 24.6178 + <div class=sidefigure> 24.6179 + <p> <img 24.6180 + alt="Image: Drawing order controlled by z-index and source order." 24.6181 + src="images/drawing-order.png"></p> 24.6182 + 24.6183 + <p class=caption>Drawing order controlled by z-index and source order.</p> 24.6184 + </div> 24.6185 + 24.6186 + <p> <a href="#grid-item"><i>Grid items</i></a> do not directly affect each 24.6187 + other's placement in the <a href="#grid-element"><i>Grid element</i></a>. 24.6188 + A <i>Grid item</i> may affect the position of a <a 24.6189 + href="#grid-line"><i>Grid line</i></a> in a column or row that uses a 24.6190 + contents-based relative size, which in turn affects the position or size 24.6191 + of another <i>Grid item</i>, but there is no direct interaction between 24.6192 + <a href="#grid-item"><i>Grid items</i></a>. <a href="#grid-item"><i>Grid 24.6193 + items</i></a> may overlap because the <i>Grid item</i>’s Area is 24.6194 + defined to intersect with the Area of another <i>Grid item</i>. <i>Grid 24.6195 + item</i> boxes in non-intersecting Areas may also overlap because of 24.6196 + negative margins.</p> 24.6197 + 24.6198 + <p> In cases where boxes overlap, <a 24.6199 + href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">‘<code 24.6200 + class=property>z-index</code>’</a> provides control over the drawing 24.6201 + order of <a href="#grid-item"><i>Grid items</i></a>. Both <a 24.6202 + href="#grid-element"><i>Grid elements</i></a> and <a 24.6203 + href="#grid-item"><i>Grid items</i></a> generate a stacking context as 24.6204 + described for floats (step 5, section 14) in the <a 24.6205 + href="http://www.w3.org/TR/2007/WD-css3-box-20070809/#stacking">CSS3 Box 24.6206 + Model</a>.</p> 24.6207 + 24.6208 + <p> Figure 15 illustrates the drawing order of the markup shown in the 24.6209 + following example.</p> 24.6210 + 24.6211 + <pre class=example><style type="text/css"> 24.6212 + #grid { display: grid; grid-definition-columns: 1fr 1fr; grid-definition-rows: 1fr 1fr } 24.6213 + #A { grid-column: 1; grid-row: 2; grid-column-span: 2; align-self: foot } 24.6214 + #B { grid-column: 1; grid-row: 1; z-index: 10 } 24.6215 + #C { grid-column: 2; grid-row: 1; align-self: head; margin-left: -20px } 24.6216 + #D { grid-column: 2; grid-row: 2; justify-self: end; align-self: head } 24.6217 + #E { grid-column: 1; grid-row: 1; 24.6218 + grid-column-span: 2; grid-row-span: 2; z-index: 5; 24.6219 + justify-self: center; align-self: center 24.6220 + } 24.6221 +</style> 24.6222 + 24.6223 +<div id="grid"> 24.6224 + <div id="A">A</div> 24.6225 + <div id="B">B</div> 24.6226 + <div id="C">C</div> 24.6227 + <div id="D">D</div> 24.6228 + <div id="E">E</div> 24.6229 +</div></pre> 24.6230 + <!--End Section: Drawing Order of Grid Items--></div> 24.6231 + 24.6232 + <div class=section id=calculating-size-of-grid-tracks> 24.6233 + <h2 id=calculating-the-size-of-grid-tracks><span class=secno>10. 24.6234 + </span>Calculating the Size of Grid Tracks</h2> 24.6235 + 24.6236 + <div class=section 24.6237 + id=definition-of-terms-for-grid-track-sizing-calculations> 24.6238 + <h3 id=definition-of-terms-for-use-in-calculati><span class=secno>10.1. 24.6239 + </span>Definition of Terms for use in Calculating Grid Track Sizes</h3> 24.6240 + 24.6241 + <dl> 24.6242 + <dt> <dfn id=AvailableSpace-definition>AvailableSpace</dfn> 24.6243 + 24.6244 + <dd>The <a href="#grid-element"><i>Grid element</i></a>’s content box 24.6245 + size in the applicable dimension. 24.6246 + 24.6247 + <dt> <dfn 24.6248 + id=MaxTrackSizingFunction-definition>MaxTrackSizingFunction</dfn> 24.6249 + 24.6250 + <dd>One of the <a 24.6251 + href="#grid-definition-columns-and-rows-properties"><track-breadth></a> 24.6252 + sizing functions assigned as the maximum breadth of a <a 24.6253 + href="#grid-track"><i>Grid track</i></a>. 24.6254 + 24.6255 + <dt> <dfn 24.6256 + id=MinTrackSizingFunction-definition>MinTrackSizingFunction</dfn> 24.6257 + 24.6258 + <dd>One of the <a 24.6259 + href="#grid-definition-columns-and-rows-properties"><track-breadth></a> 24.6260 + sizing functions assigned as the minimum breadth of a <a 24.6261 + href="#grid-track"><i>Grid track</i></a>. 24.6262 + 24.6263 + <dt> <dfn id=RemainingSpace-definition>RemainingSpace</dfn> 24.6264 + 24.6265 + <dd>The max of zero and the AvailableSpace less the sum of all <a 24.6266 + href="#grid-track"><i>Grid track</i></a> UsedBreadth values. This is 24.6267 + undefined if AvailableSpace is undefined (i.e. the Grid element is 24.6268 + shrink-to-fit or the height is auto.) 24.6269 + 24.6270 + <dt> <dfn id=SpanCount-definition>SpanCount</dfn> 24.6271 + 24.6272 + <dd>The number of <a href="#grid-track"><i>Grid tracks</i></a> crossed 24.6273 + by a <i>Grid item</i> in the applicable dimension. 24.6274 + </dl> 24.6275 + <!--End Section: Definition of Terms for use in Calculating Grid Track Sizes--> 24.6276 + </div> 24.6277 + 24.6278 + <div class=section id=grid-track-sizing-algorithm> 24.6279 + <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid 24.6280 + Track Sizing Algorithm</h3> 24.6281 + 24.6282 + <ol> 24.6283 + <li>Call ComputedUsedBreadthOfGridTracks for Grid Columns to resolve 24.6284 + their logical width. 24.6285 + 24.6286 + <li>Call ComputedUsedBreadthOfGridTracks for Grid Rows to resolve their 24.6287 + logical height. The logical width of Grid Columns from the prior step 24.6288 + is used in the formatting of <a href="#grid-item"><i>Grid items</i></a> 24.6289 + in content-sized Grid Rows to determine their required height. 24.6290 + 24.6291 + <li>If the minimum content size of any <i>Grid item</i> has changed 24.6292 + based on available height for the <i>Grid item</i> as computed in step 24.6293 + 2, adjust the min content size of the <i>Grid item</i> and restart the 24.6294 + <a href="#grid-track"><i>Grid track</i></a> Sizing algorithm (once 24.6295 + only). 24.6296 + </ol> 24.6297 + 24.6298 + <dl> 24.6299 + <dt> <dfn 24.6300 + id=function-ComputeUsedBreadthOfGridTracks>ComputeUsedBreadthOfGridTracks</dfn> 24.6301 + 24.6302 + 24.6303 + <dd> 24.6304 + <p> This is the core <a href="#grid-track"><i>Grid track</i></a> sizing 24.6305 + algorithm. It is run for Grid columns and Grid rows. The goal of the 24.6306 + function is to ensure:</p> 24.6307 + 24.6308 + <ol> 24.6309 + <li>That each <a href="#grid-track"><i>Grid track</i></a> satisfies 24.6310 + its MinTrackSizingFunction 24.6311 + 24.6312 + <li>That each <a href="#grid-track"><i>Grid track</i></a> grows from 24.6313 + the breadth which satisfied its MinTrackSizingFunction to a breadth 24.6314 + which satifies its MaxTrackSizingFunction, subject to RemainingSpace. 24.6315 + </ol> 24.6316 + 24.6317 + <p> For the purposes of resolving the breadth that satisfies the 24.6318 + MinTrackSizingFunction and MaxTrackSizingFunction, each <a 24.6319 + href="#grid-track"><i>Grid track</i></a> falls into one of three 24.6320 + categories:</p> 24.6321 + 24.6322 + <ol> 24.6323 + <li>A percentage or length value which can be trivially resolved. 24.6324 + 24.6325 + <li>A min-content or max-content value which will be resolved based on 24.6326 + the measurements of the <a href="#grid-item"><i>Grid items</i></a> 24.6327 + which cover the <a href="#grid-track"><i>Grid track</i></a>. 24.6328 + 24.6329 + <li>A fraction value which can only be resolved after determining the 24.6330 + RemainingSpace in the <a href="#grid-element"><i>Grid 24.6331 + element</i></a>’s content box after having considered all 24.6332 + contributions from the prior two categories of <a 24.6333 + href="#grid-track"><i>Grid tracks</i></a>. 24.6334 + </ol> 24.6335 + 24.6336 + <p> The breadths which satisfy MinTrackSizingFunctions and 24.6337 + MaxTrackSizingFunctions for the first category of <a 24.6338 + href="#grid-track"><i>Grid tracks</i></a> are resolved in step 1 24.6339 + during <a href="#grid-track"><i>Grid track</i></a> variable 24.6340 + initialization. The breadths which satisfy the MinTrackSizingFunctions 24.6341 + and the MaxTrackSizingFunctions for the second category of 24.6342 + content-sized <a href="#grid-track"><i>Grid tracks</i></a> are 24.6343 + resolved in step 2. At the end of step 2, the first goal of 24.6344 + ComputeUsedBreadthOfGridTracks function has been satisfied: the 24.6345 + UsedBreadth variable of each GridTrack now satisfies its 24.6346 + MinTrackSizingFunction. The MaxBreadth variable for each <a 24.6347 + href="#grid-track"><i>Grid track</i></a> now contains the resolved 24.6348 + value for its MaxTrackSizingFunction.</p> 24.6349 + 24.6350 + <p> In step 3, the second goal of this function is satisified as each 24.6351 + (non-fraction-sized) <a href="#grid-track"><i>Grid track</i></a> 24.6352 + attempts to grow from the UsedBreadth value to the MaxBreadth value, 24.6353 + subject to RemainingSpace.</p> 24.6354 + 24.6355 + <p> Finally in step 4, the third category of fraction-sized <a 24.6356 + href="#grid-track"><i>Grid tracks</i></a> can be resolved using what 24.6357 + is now the RemainingSpace having updated the UsedBreadth of each <a 24.6358 + href="#grid-track"><i>Grid track</i></a> at the end of step 3.</p> 24.6359 + 24.6360 + <dl> 24.6361 + <dt> <dfn 24.6362 + id=function-ComputeUsedBreadthOfGridTracks-inputs>Inputs</dfn> 24.6363 + 24.6364 + <dd> 24.6365 + <ul> 24.6366 + <li>GridTracks: The set of <a href="#grid-track"><i>Grid 24.6367 + tracks</i></a> for which the <a href="#grid-track"><i>Grid 24.6368 + track</i></a> variable UsedBreadth will be computed. 24.6369 + </ul> 24.6370 + </dl> 24.6371 + 24.6372 + <dl> 24.6373 + <dt> <dfn 24.6374 + id=function-ComputeUsedBreadthOfGridTracks-algorithm>Algorithm</dfn> 24.6375 + 24.6376 + <dd class=pseudo-code> 24.6377 + <ol> 24.6378 + <li>Initialize per <a href="#grid-track"><i>Grid track</i></a> 24.6379 + variables 24.6380 + <ol> 24.6381 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.6382 + GridTracks 24.6383 + <ol> 24.6384 + <li>If t.MinTrackSizingFunction is a percentage or length, then 24.6385 + t.UsedBreadth = resolved length 24.6386 + 24.6387 + <li>If t.MinTrackSizingFunction is min-content, max-content, or 24.6388 + a fraction, then t.UsedBreadth = 0 24.6389 + 24.6390 + <li>If t.MaxTrackSizingFunction is percentage or length, then 24.6391 + t.MaxBreadth = resolved length 24.6392 + <ol> 24.6393 + <li>If the resolved length of the MaxTrackSizingFunction is 24.6394 + less than the MinTrackSizingFunction, t.MaxBreadth = 24.6395 + t.UsedBreadth. 24.6396 + </ol> 24.6397 + 24.6398 + <li>If t.MaxTrackSizingFunction is min-content, or max-content, 24.6399 + then t.MaxBreadth = Infinity 24.6400 + 24.6401 + <li>If t.MaxTrackSizingFunction is a fraction, then t.MaxBreadth 24.6402 + = t.UsedBreadth 24.6403 + 24.6404 + <li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = null 24.6405 + </ol> 24.6406 + </ol> 24.6407 + 24.6408 + <li>Resolve content-based TrackSizingFunctions 24.6409 + <ol> 24.6410 + <li>Call ResolveContentBasedTrackSizingFunctions, with arguments: 24.6411 + <ul> 24.6412 + <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a>. 24.6413 + </ul> 24.6414 + </ol> 24.6415 + 24.6416 + <li>Grow all <a href="#grid-track"><i>Grid tracks</i></a> in 24.6417 + GridTracks from their UsedBreadth up to their MaxBreadth value 24.6418 + until RemainingSpace is exhausted. 24.6419 + <ol> 24.6420 + <li>If RemainingSpace is defined 24.6421 + <ol> 24.6422 + <li>Iterate over all GridTracks and assign UsedBreadth to 24.6423 + UpdatedTrackBreadth 24.6424 + 24.6425 + <li>Call DistributeSpaceToTracks, with arguments: 24.6426 + <ul> 24.6427 + <li>SpaceToDistribute: RemainingSpace 24.6428 + 24.6429 + <li>TrackGrowthConstraint: A function which given a <a 24.6430 + href="#grid-track"><i>Grid track</i></a> returns its 24.6431 + MaxBreadth. 24.6432 + 24.6433 + <li>TracksForGrowth: All <a href="#grid-track"><i>Grid 24.6434 + tracks</i></a> 24.6435 + 24.6436 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The 24.6437 + empty set. 24.6438 + 24.6439 + <li>CurrentBreadth: A function which given a <a 24.6440 + href="#grid-track"><i>Grid track</i></a> returns the 24.6441 + UsedBreadth. 24.6442 + </ul> 24.6443 + 24.6444 + <li>Iterate over all GridTracks and assign UpdatedTrackBreadth 24.6445 + to UsedBreadth 24.6446 + </ol> 24.6447 + 24.6448 + <li>Else 24.6449 + <ol> 24.6450 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.6451 + GridTracks 24.6452 + <ol> 24.6453 + <li>t.UsedBreadth = t.MaxBreadth 24.6454 + </ol> 24.6455 + </ol> 24.6456 + </ol> 24.6457 + 24.6458 + <li>Grow all <a href="#grid-track"><i>Grid tracks</i></a> having a 24.6459 + fraction as the MaxTrackSizingFunction 24.6460 + <ol> 24.6461 + <li>normalizedFractionBreadth = 0 24.6462 + 24.6463 + <li>If RemainingSpace is defined 24.6464 + <ol> 24.6465 + <li>normalizedFractionBreadth = Call 24.6466 + ComputeNormalizedFractionBreadth, with arguments: 24.6467 + <ul> 24.6468 + <li>GridTracks: GridTracks 24.6469 + 24.6470 + <li>SpaceToFill: AvailableSpace 24.6471 + </ul> 24.6472 + </ol> 24.6473 + 24.6474 + <li>Else 24.6475 + <ol> 24.6476 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.6477 + GridTracks having a fraction as the MaxTrackSizingFunction 24.6478 + <ol> 24.6479 + <li>normalizedFractionBreadth = Max( 24.6480 + normalizedFractionBreadth, t.UsedBreadth / 24.6481 + t.MaxTrackSizingFunction.FractionValue ) 24.6482 + </ol> 24.6483 + 24.6484 + <li>For each <i>Grid item</i> i, which crosses a set of 24.6485 + GridTracks s 24.6486 + <ol> 24.6487 + <li>itemNormalizedFractionBreadth = Call 24.6488 + ComputeNormalizedFractionBreadth, with arguments: 24.6489 + <ul> 24.6490 + <li>GridTracks: s 24.6491 + 24.6492 + <li>SpaceToFill: max-content size of i 24.6493 + </ul> 24.6494 + 24.6495 + <li>normalizedFractionBreadth = Max( 24.6496 + normalizedFractionBreadth, itemNormalizedFractionBreadth ) 24.6497 + </ol> 24.6498 + </ol> 24.6499 + 24.6500 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.6501 + GridTracks 24.6502 + <ol> 24.6503 + <li>t.UsedBreadth = Max( t.UsedBreadth, 24.6504 + normalizedFractionBreadth * 24.6505 + t.MaxTrackSizingFunction.FractionValue ) 24.6506 + </ol> 24.6507 + </ol> 24.6508 + </ol> 24.6509 + </dl> 24.6510 + </dd> 24.6511 + <!--End Function Definition: ComputeUsedBreadthOfGridTracks--> 24.6512 + </dl> 24.6513 + 24.6514 + <dl> 24.6515 + <dt> <dfn 24.6516 + id=function-ResolveContentBasedTrackSizingFunctions>ResolveContentBasedTrackSizingFunctions</dfn> 24.6517 + 24.6518 + 24.6519 + <dd> 24.6520 + <p> The purpose of this function is to resolve the contribution that 24.6521 + each <i>Grid item</i> makes to any min-content or max-content 24.6522 + TrackSizingFunctions for the <a href="#grid-track"><i>Grid 24.6523 + tracks</i></a> it covers. There are four permutations: min-content or 24.6524 + max-content in either the MinTrackSizingFunction or 24.6525 + MaxTrackSizingFunction. MinTrackSizingFunctions are resolved before 24.6526 + MaxTrackSizingFunctions, and min-content contributions are resolved 24.6527 + before max-content contributions. Note that when resolving min-content 24.6528 + contributions they may grow tracks that have either min-content or 24.6529 + max-content keywords, as seen in 3.a.i and 3.b.i below.</p> 24.6530 + 24.6531 + <p class=issue> Currently this algorithm embodies several heuristics 24.6532 + which regulate the growth of spanning <a href="#grid-item"><i>Grid 24.6533 + items</i></a> to accomodate certain use cases. (E.g. the game example 24.6534 + in Figures 2 and 3 above.) These heuristics should be a normative part 24.6535 + of this specification to ensure interoperability. To the extent 24.6536 + additional use cases can be identified that cannot be satisfied by 24.6537 + following the current heuristics, the normative algorithm can be 24.6538 + updated, or additional mechanisms can be introduced for fine-grained 24.6539 + control of content-based TrackSizingFunction.</p> 24.6540 + 24.6541 + <dl> 24.6542 + <dt> <dfn 24.6543 + id=function-ResolveContentBasedTrackSizingFunctions-inputs>Inputs</dfn> 24.6544 + 24.6545 + 24.6546 + <dd> 24.6547 + <ul> 24.6548 + <li>GridItems: The set of <a href="#grid-item"><i>Grid items</i></a> 24.6549 + for which min-content or max-content keywords should be resolved. 24.6550 + </ul> 24.6551 + </dl> 24.6552 + 24.6553 + <dl> 24.6554 + <dt> <dfn 24.6555 + id=function-ResolveContentBasedTrackSizingFunctions-algorithm>Algorithm</dfn> 24.6556 + 24.6557 + 24.6558 + <dd class=pseudo-code> 24.6559 + <ol> 24.6560 + <li>Filter all <a href="#grid-item"><i>Grid items</i></a> into a set 24.6561 + g, such that each <i>Grid item</i> has either a SpanCount of 1 or 24.6562 + does not cross a fraction-sized <a href="#grid-track"><i>Grid 24.6563 + track</i></a> 24.6564 + 24.6565 + <li>Group all <a href="#grid-item"><i>Grid items</i></a> in set g by 24.6566 + their SpanCount ascending 24.6567 + 24.6568 + <li>For each group of <a href="#grid-item"><i>Grid items</i></a> 24.6569 + <ol> 24.6570 + <li>Resolve content-based MinTrackSizingFunctions 24.6571 + <ol> 24.6572 + <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.6573 + arguments: 24.6574 + <ul> 24.6575 + <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.6576 + in the current group. 24.6577 + 24.6578 + <li>AdditionalSpaceRequiredByItem: A function which given a 24.6579 + <i>Grid item</i> returns the min-content size of that <i>Grid 24.6580 + item</i> less the summed UsedBreadth of all <a 24.6581 + href="#grid-track"><i>Grid tracks</i></a> it covers. 24.6582 + 24.6583 + <li>TrackGrowthConstraint: A function which given a <a 24.6584 + href="#grid-track"><i>Grid track</i></a> returns its 24.6585 + MaxBreadth. 24.6586 + 24.6587 + <li>TracksForGrowth: A function which given a <i>Grid item</i> 24.6588 + returns the set of <a href="#grid-track"><i>Grid 24.6589 + tracks</i></a> covered by that <i>Grid item</i> that have a 24.6590 + min-content or max-content MinTrackSizingFunction. 24.6591 + 24.6592 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A 24.6593 + function which given a set of <a href="#grid-track"><i>Grid 24.6594 + tracks</i></a> returns the subset of <a 24.6595 + href="#grid-track"><i>Grid tracks</i></a> having a 24.6596 + min-content or max-content MaxTrackSizingFunction. If that 24.6597 + set is the empty set, return the input set instead. 24.6598 + 24.6599 + <li>Accumulator: A function which given a <a 24.6600 + href="#grid-track"><i>Grid track</i></a> returns a reference 24.6601 + to its UsedBreadth variable. 24.6602 + </ul> 24.6603 + 24.6604 + <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.6605 + arguments: 24.6606 + <ul> 24.6607 + <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.6608 + in the current group. 24.6609 + 24.6610 + <li>AdditionalSpaceRequiredByItem: A function which given a 24.6611 + <i>Grid item</i> returns the max-content size of that <i>Grid 24.6612 + item</i> less the summed UsedBreadth of all <a 24.6613 + href="#grid-track"><i>Grid tracks</i></a> it covers. 24.6614 + 24.6615 + <li>TrackGrowthConstraint: A function which given a <a 24.6616 + href="#grid-track"><i>Grid track</i></a> returns its 24.6617 + MaxBreadth. 24.6618 + 24.6619 + <li>TracksForGrowth: A function which given a <i>Grid item</i> 24.6620 + returns the set of <a href="#grid-track"><i>Grid 24.6621 + tracks</i></a> covered by that <i>Grid item</i> that have a 24.6622 + max-content MinTrackSizingFunction. 24.6623 + 24.6624 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A 24.6625 + function which given a set of <a href="#grid-track"><i>Grid 24.6626 + tracks</i></a> returns the subset of <a 24.6627 + href="#grid-track"><i>Grid tracks</i></a> having a 24.6628 + max-content MaxTrackSizingFunction. If that set is the empty 24.6629 + set, return the input set instead. 24.6630 + 24.6631 + <li>Accumulator: A function which given a <a 24.6632 + href="#grid-track"><i>Grid track</i></a> returns a reference 24.6633 + to its UsedBreadth variable. 24.6634 + </ul> 24.6635 + </ol> 24.6636 + 24.6637 + <li>Resolve content-based MaxTrackSizingFunctions 24.6638 + <ol> 24.6639 + <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.6640 + arguments: 24.6641 + <ul> 24.6642 + <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.6643 + in the current group. 24.6644 + 24.6645 + <li>AdditionalSpaceRequiredByItem: A function which given a 24.6646 + <i>Grid item</i> returns the min-content size of that <i>Grid 24.6647 + item</i> less the summed MaxBreadth (unless the MaxBreadth is 24.6648 + infinite, in which case use the UsedBreadth) of all <a 24.6649 + href="#grid-track"><i>Grid tracks</i></a> it covers. 24.6650 + 24.6651 + <li>TrackGrowthConstraint: A function which given a <a 24.6652 + href="#grid-track"><i>Grid track</i></a> returns its 24.6653 + MaxBreadth. 24.6654 + 24.6655 + <li>TracksForGrowth: A function which given a <i>Grid item</i> 24.6656 + returns the set of <a href="#grid-track"><i>Grid 24.6657 + tracks</i></a> covered by that <i>Grid item</i> that have a 24.6658 + min-content or max-content MaxTrackSizingFunction. 24.6659 + 24.6660 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The 24.6661 + identity function. 24.6662 + 24.6663 + <li>Accumulator: A function which given a <a 24.6664 + href="#grid-track"><i>Grid track</i></a> returns a reference 24.6665 + to its MaxBreadth variable. 24.6666 + </ul> 24.6667 + 24.6668 + <li>Call ResolveContentBasedTrackSizingFunctionsForItems, with 24.6669 + arguments: 24.6670 + <ul> 24.6671 + <li>GridItems: All <a href="#grid-item"><i>Grid items</i></a> 24.6672 + in the current group. 24.6673 + 24.6674 + <li>AdditionalSpaceRequiredByItem: A function which given a 24.6675 + <i>Grid item</i> returns the max-content size of that <i>Grid 24.6676 + item</i> less the summed MaxBreadth (unless the MaxBreadth is 24.6677 + infinite, in which case use the UsedBreadth) of all <a 24.6678 + href="#grid-track"><i>Grid tracks</i></a> it covers. 24.6679 + 24.6680 + <li>TrackGrowthConstraint: A function which given a <a 24.6681 + href="#grid-track"><i>Grid track</i></a> returns infinity if 24.6682 + the <a href="#grid-track"><i>Grid track</i></a>’s 24.6683 + SpanGroupInWhichMaxBreadthWasMadeFinite is equal to the 24.6684 + current group; otherwise return the <a 24.6685 + href="#grid-track"><i>Grid track</i></a>’s MaxBreadth. 24.6686 + 24.6687 + <li>TracksForGrowth: A function which given a <i>Grid item</i> 24.6688 + returns the set of <a href="#grid-track"><i>Grid 24.6689 + tracks</i></a> covered by that <i>Grid item</i> that have a 24.6690 + max-content MaxTrackSizingFunction. 24.6691 + 24.6692 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: The 24.6693 + identity function. 24.6694 + 24.6695 + <li>Accumulator: A function which given a <a 24.6696 + href="#grid-track"><i>Grid track</i></a> returns a reference 24.6697 + to its MaxBreadth variable. 24.6698 + </ul> 24.6699 + </ol> 24.6700 + </ol> 24.6701 + 24.6702 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t from the 24.6703 + set of all <a href="#grid-track"><i>Grid tracks</i></a> 24.6704 + <ol> 24.6705 + <li>If t.MaxBreadth == infinity then t.MaxBreadth = t.UsedBreadth 24.6706 + </ol> 24.6707 + </ol> 24.6708 + </dl> 24.6709 + </dd> 24.6710 + <!--End Function Definition: ResolveContentBasedTrackSizingFunctions--> 24.6711 + </dl> 24.6712 + 24.6713 + <dl> 24.6714 + <dt> <dfn 24.6715 + id=function-ResolveContentBasedTrackSizingFunctionsForItems>ResolveContentBasedTrackSizingFunctionsForItems</dfn> 24.6716 + 24.6717 + 24.6718 + <dd> 24.6719 + <p> The above function, ResolveContentBasedTrackSizingFunctions, groups 24.6720 + <a href="#grid-item"><i>Grid items</i></a> based on the number of <a 24.6721 + href="#grid-track"><i>Grid tracks</i></a> each <i>Grid item</i> 24.6722 + spanned. ResolveContentBasedTrackSizingFunctionsForItems, below, then 24.6723 + calls DistributeSpaceToTracks for each <i>Grid item</i> in the group 24.6724 + to determine how much each <i>Grid item</i> needs to grow the <a 24.6725 + href="#grid-track"><i>Grid tracks</i></a> that it covers. The maximum 24.6726 + contribution made by any <i>Grid item</i> is accumulated into a 24.6727 + temporary, per-<a href="#grid-track"><i>Grid track</i></a> variable, 24.6728 + and at the end of the group, the space is recorded into a final <a 24.6729 + href="#grid-track"><i>Grid track</i></a> variable as determined by the 24.6730 + Accumulator function.</p> 24.6731 + 24.6732 + <dl> 24.6733 + <dt> <dfn 24.6734 + id=function-ResolveContentBasedTrackSizingFunctionsForItems-inputs>Inputs</dfn> 24.6735 + 24.6736 + 24.6737 + <dd> 24.6738 + <ul> 24.6739 + <li>GridItems: The set of <a href="#grid-item"><i>Grid items</i></a> 24.6740 + which will contribute to the growth of <a 24.6741 + href="#grid-track"><i>Grid tracks</i></a>. 24.6742 + 24.6743 + <li>AdditionalSpaceRequiredByItem: A function which returns the 24.6744 + difference between either the min-content or max-content for the 24.6745 + <i>Grid item</i> and the space already allocated to the <a 24.6746 + href="#grid-track"><i>Grid tracks</i></a> covered by the <i>Grid 24.6747 + item</i> in earlier phases of the algorithm. 24.6748 + 24.6749 + <li>TrackGrowthConstraint: A function which given a <a 24.6750 + href="#grid-track"><i>Grid track</i></a> returns a value that 24.6751 + limits the amount by which it may be grown by the <a 24.6752 + href="#grid-item"><i>Grid items</i></a> which cover it. 24.6753 + 24.6754 + <li>TracksForGrowth: A function which given a <i>Grid item</i> 24.6755 + identifies the set of <a href="#grid-track"><i>Grid tracks</i></a> 24.6756 + to be grown in this phase of the algorithm. 24.6757 + 24.6758 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A function 24.6759 + which identifies a subset of <a href="#grid-track"><i>Grid 24.6760 + tracks</i></a> from TracksForGrowth that may be grown in this phase 24.6761 + of the algorithm after all <a href="#grid-track"><i>Grid 24.6762 + tracks</i></a> in the TracksForGrowth set have already grown to 24.6763 + their TrackGrowthConstraint. 24.6764 + 24.6765 + <li>Accumulator: A function which given a <a 24.6766 + href="#grid-track"><i>Grid track</i></a> returns the variable used 24.6767 + to accumulate the results of the UpdatedTrackBreadth from 24.6768 + DistributeSpaceToTracks. 24.6769 + </ul> 24.6770 + </dl> 24.6771 + 24.6772 + <dl> 24.6773 + <dt> <dfn 24.6774 + id=function-ResolveContentBasedTrackSizingFunctionsForItems-algorithm>Algorithm</dfn> 24.6775 + 24.6776 + 24.6777 + <dd class=pseudo-code> 24.6778 + <ol> 24.6779 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t 24.6780 + <ol> 24.6781 + <li>t.UpdatedTrackBreadth = Accumulator( t ) 24.6782 + </ol> 24.6783 + 24.6784 + <li>For each <i>Grid item</i> i in GridItems 24.6785 + <ol> 24.6786 + <li>Call DistributeSpaceToTracks, with arguments: 24.6787 + <ul> 24.6788 + <li>SpaceToDistribute: AdditionalSpaceRequiredByItem( i ) 24.6789 + 24.6790 + <li>TrackGrowthConstraint: TrackGrowthConstraint 24.6791 + 24.6792 + <li>TracksForGrowth: TracksForGrowth( i ) 24.6793 + 24.6794 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: 24.6795 + SubsetOfTracksForGrowthBeyondTrackGrowthConstraint( 24.6796 + TracksForGrowth( i ) ) 24.6797 + 24.6798 + <li>CurrentBreadth: A function which given a <a 24.6799 + href="#grid-track"><i>Grid track</i></a> returns the 24.6800 + UsedBreadth of the <a href="#grid-track"><i>Grid track</i></a> 24.6801 + if Accumulator returns infinity; otherwise the value of the 24.6802 + Accumulator is returned. 24.6803 + </ul> 24.6804 + </ol> 24.6805 + 24.6806 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t 24.6807 + <ol> 24.6808 + <li>If Accumulator( t ) == infinity and t.UpdatedTrackBreadth != 24.6809 + infinity 24.6810 + <ol> 24.6811 + <li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = GridItems 24.6812 + </ol> 24.6813 + 24.6814 + <li>Accumulator( t ) = t.UpdatedTrackBreadth 24.6815 + </ol> 24.6816 + </ol> 24.6817 + </dl> 24.6818 + </dd> 24.6819 + <!--End Function Definition: ResolveContentBasedTrackSizingFunctionsForItems--> 24.6820 + </dl> 24.6821 + 24.6822 + <dl> 24.6823 + <dt> <dfn 24.6824 + id=function-DistributeSpaceToTracks>DistributeSpaceToTracks</dfn> 24.6825 + 24.6826 + <dd> 24.6827 + <p> Ensures that for each <a href="#grid-track"><i>Grid track</i></a> 24.6828 + in RecipientTracks, a value will be computed, UpdatedTrackBreadth, 24.6829 + that represents the <a href="#grid-track"><i>Grid track</i></a>’s 24.6830 + share of SpaceToDistribute.</p> 24.6831 + 24.6832 + <p> There are two parts to this function. The first for loop in step 2 24.6833 + is giving each <a href="#grid-track"><i>Grid track</i></a> an equal 24.6834 + share of the space, but without exceeding their TrackGrowthConstraint 24.6835 + values. Because there are different MaxBreadths assigned to the 24.6836 + different <a href="#grid-track"><i>Grid tracks</i></a>, the first loop 24.6837 + can result in their uneven growth.</p> 24.6838 + 24.6839 + <p> If the first loop completes having grown every <a 24.6840 + href="#grid-track"><i>Grid track</i></a> to its TrackGrowthConstraint, 24.6841 + and there is still SpaceToDistribute, then 24.6842 + SubsetOfTracksForGrowthBeyondTrackGrowthConstraint are further grown 24.6843 + equally until SpaceToDistribute is exhausted.</p> 24.6844 + 24.6845 + <p> Note that <a href="#grid-track"><i>Grid tracks</i></a> considered 24.6846 + by this function may have a TrackGrowthConstraint equal to Infinity, 24.6847 + which signals that these tracks have not yet been grown by a <i>Grid 24.6848 + item</i>. These tracks can therefore be grown without exceeding the 24.6849 + TrackGrowthConstraint of the track. By only growing tracks up to their 24.6850 + TrackGrowthConstraint value, we can ensure that the grid remains 24.6851 + "tight" - that is, that track breadth is as close to the content size 24.6852 + of the <a href="#grid-item"><i>Grid items</i></a> inside as possible. 24.6853 + Only once all <a href="#grid-track"><i>Grid tracks</i></a> have a 24.6854 + CurrentBreadth equal to a TrackGrowthConstraint do we move to the 24.6855 + second for loop and grow tracks further, thereby making the <a 24.6856 + href="#grid-element"><i>Grid element</i></a> less tight.</p> 24.6857 + 24.6858 + <dl> 24.6859 + <dt> <dfn id=function-DistributeSpaceToTracks-inputs>Inputs</dfn> 24.6860 + 24.6861 + <dd> 24.6862 + <ul> 24.6863 + <li>SpaceToDistribute: A length to be distributed among the supplied 24.6864 + set of <a href="#grid-track"><i>Grid tracks</i></a>. 24.6865 + 24.6866 + <li>TrackGrowthConstraint: A function which given a <a 24.6867 + href="#grid-track"><i>Grid track</i></a> returns the maximum 24.6868 + breadth of the track, unless the track is in the 24.6869 + SubsetOfTracksForGrowthBeyoundTrackGrowthConstraint. 24.6870 + 24.6871 + <li>TracksForGrowth: A set of <a href="#grid-track"><i>Grid 24.6872 + tracks</i></a> to be grown up to their TrackGrowthConstraint while 24.6873 + SpaceToDistribute remains. 24.6874 + 24.6875 + <li>SubsetOfTracksForGrowthBeyondTrackGrowthConstraint: A subset of 24.6876 + <a href="#grid-track"><i>Grid tracks</i></a> from TracksForGrowth 24.6877 + that may be grown beyond their TrackGrowthConstraint after all <a 24.6878 + href="#grid-track"><i>Grid tracks</i></a> in the TracksForGrowth 24.6879 + set have already grown to their TrackGrowthConstraint if there is 24.6880 + remaining SpaceToDistribute. 24.6881 + 24.6882 + <li>CurrentBreadth: A function which given a <a 24.6883 + href="#grid-track"><i>Grid track</i></a> returns a value to use as 24.6884 + a starting point from which to grow this track. 24.6885 + </ul> 24.6886 + </dl> 24.6887 + 24.6888 + <dl> 24.6889 + <dt> <dfn 24.6890 + id=function-DistributeSpaceToTracks-algorithm>Algorithm</dfn> 24.6891 + 24.6892 + <dd class=pseudo-code> 24.6893 + <ol> 24.6894 + <li>Sort TracksForGrowth by TrackGrowthConstraint( t ) - 24.6895 + CurrentBreadth( t ) ascending (where t is an element in the 24.6896 + RecipientTrack set). 24.6897 + 24.6898 + <li>For i = 0 to TracksForGrowth.length - 1 24.6899 + <ol> 24.6900 + <li>t = TracksForGrowth[i] 24.6901 + 24.6902 + <li>share = Min ((SpaceToDistribute / ( TracksForGrowth.length - i 24.6903 + )), (TrackGrowthConstraint( t ) - CurrentBreadth( t ))) 24.6904 + 24.6905 + <li>t.TempBreadth = CurrentBreadth( t ) + share 24.6906 + 24.6907 + <li>SpaceToDistribute -= share 24.6908 + </ol> 24.6909 + 24.6910 + <li>If SpaceToDistribute > 0 24.6911 + <ol> 24.6912 + <li>Let tracks = 24.6913 + SubsetOfTracksForGrowthBeyondTrackGrowthConstraint( 24.6914 + TracksForGrowth ) 24.6915 + 24.6916 + <li>For i = 0 to tracks.length - 1 24.6917 + <ol> 24.6918 + <li>t = tracks[i] 24.6919 + 24.6920 + <li>share = SpaceToDistribute / ( tracks.length - i ) 24.6921 + 24.6922 + <li>t.TempBreadth += share 24.6923 + 24.6924 + <li>SpaceToDistribute -= share 24.6925 + </ol> 24.6926 + </ol> 24.6927 + 24.6928 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.6929 + TracksForGrowth 24.6930 + <ol> 24.6931 + <li>If t.UpdatedTrackBreadth == infinity 24.6932 + <ol> 24.6933 + <li>t.UpdatedTrackBreadth = t.TempBreadth 24.6934 + </ol> 24.6935 + 24.6936 + <li>Else 24.6937 + <ol> 24.6938 + <li>t.UpdatedTrackBreadth = Max( t.UpdatedTrackBreadth, 24.6939 + t.TempBreadth ) 24.6940 + </ol> 24.6941 + </ol> 24.6942 + </ol> 24.6943 + </dl> 24.6944 + </dd> 24.6945 + <!--End Function Definition: DistributeSpaceToTracks--> 24.6946 + </dl> 24.6947 + 24.6948 + <dl> 24.6949 + <dt> <dfn 24.6950 + id=function-CalculateNormalizedFractionBreadth>CalculateNormalizedFractionBreadth</dfn> 24.6951 + 24.6952 + 24.6953 + <dd> This method computes a ‘<code class=css>1fr</code>’ value, 24.6954 + referred to as the NormalizedFractionBreadth, for a set of <a 24.6955 + href="#grid-track"><i>Grid tracks</i></a>. The value computed will 24.6956 + ensure that when the NormalizedFractionBreadth is multiplied by the 24.6957 + fractions associated with GridTracks, that the UsedBreadths of 24.6958 + GridTracks will increase by an amount equal to the maximum of zero and 24.6959 + the specified SpaceToFill less the sum of the current UsedBreadths. 24.6960 + <dl> 24.6961 + <dt> <dfn 24.6962 + id=function-CalculateNormalizedFractionBreadth-inputs>Inputs</dfn> 24.6963 + 24.6964 + <dd> 24.6965 + <ul> 24.6966 + <li>GridTracks: The set of <a href="#grid-track"><i>Grid 24.6967 + tracks</i></a> whose fraction sizing functions are considered for 24.6968 + the purposes of a computing a NormalizedFractionBreadth that will 24.6969 + cause GridTracks to fill SpaceToFill. 24.6970 + 24.6971 + <li>SpaceToFill: The space to be filled by GridTracks. 24.6972 + </ul> 24.6973 + </dl> 24.6974 + 24.6975 + <dl> 24.6976 + <dt> <dfn 24.6977 + id=function-CalculateNormalizedFractionBreadth-returns>Returns</dfn> 24.6978 + 24.6979 + <dd> 24.6980 + <ul> 24.6981 + <li>The 1fr value required by GridTracks to fill SpaceToFill. 24.6982 + </ul> 24.6983 + </dl> 24.6984 + 24.6985 + <dl> 24.6986 + <dt> <dfn 24.6987 + id=function-CalculateNormalizedFractionBreadth-algorithm>Algorithm</dfn> 24.6988 + 24.6989 + 24.6990 + <dd class=pseudo-code> 24.6991 + <ol> 24.6992 + <li>allocatedSpace = the sum of the UsedBreadth for each <a 24.6993 + href="#grid-track"><i>Grid track</i></a> in GridTracks 24.6994 + 24.6995 + <li>fractionTracks = the subset of GridTracks whose 24.6996 + MaxTrackSizingFunction is a fraction 24.6997 + 24.6998 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.6999 + fractionTracks 24.7000 + <ol> 24.7001 + <li>t.NormalizedFractionValue = t.UsedBreadth / 24.7002 + t.MaxTrackSizingFunction.FractionValue 24.7003 + </ol> 24.7004 + 24.7005 + <li>Sort fractionTracks by their NormalizedFractionValue ascending 24.7006 + 24.7007 + <li>spaceNeededFromFractionTracks = SpaceToFill - allocatedSpace 24.7008 + 24.7009 + <li>currentBandFractionBreadth = accumulatedFractions = 0 24.7010 + 24.7011 + <li>For each <a href="#grid-track"><i>Grid track</i></a> t in 24.7012 + fractionTracks 24.7013 + <ol> 24.7014 + <li>If t.NormalizedFractionValue > currentBandFractionBreadth 24.7015 + <ol> 24.7016 + <li>If t.NormalizedFractionValue * accumulatedFractions > 24.7017 + spaceNeededFromFractionTracks then break from for loop 24.7018 + 24.7019 + <li>currentBandFractionBreadth = t.NormalizedFractionValue 24.7020 + </ol> 24.7021 + 24.7022 + <li>accumulatedFractions += t.MaxTrackSizingFunction.FractionValue 24.7023 + 24.7024 + <li>spaceNeededFromFractionTracks += t.UsedBreadth 24.7025 + </ol> 24.7026 + 24.7027 + <li>return spaceNeededFromFractionTracks / accumulatedFractions 24.7028 + </ol> 24.7029 + </dl> 24.7030 + </dd> 24.7031 + <!--End Function Definition: CalculateNormalizedFractionBreadth--> 24.7032 + </dl> 24.7033 + <!--End Section: Grid Track Sizing Algorithm--></div> 24.7034 + <!--End Section: Calculating the Size of Grid Tracks--></div> 24.7035 + 24.7036 + <div class=section id=defining-shrink-to-fit-behavior-of-grid-elements> 24.7037 + <h2 id=defining-the-shrink-to-fit-behavior-of-g><span class=secno>11. 24.7038 + </span>Defining the Shrink-to-fit Behavior of Grid Elements</h2> 24.7039 + 24.7040 + <p>The <a href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box 24.7041 + Model</a> defines the shrink-to-fit behavior of an element as 24.7042 + min(max(preferred minimum width, available width), preferred width), with 24.7043 + available width defined in the Box Model spec. Accordingly, for the <a 24.7044 + href="#grid-element"><i>Grid element</i></a> we define the preferred 24.7045 + minimum width as the sum of the UsedBreadths of the <a 24.7046 + href="#grid-track"><i>Grid tracks</i></a> just before step 3 in 24.7047 + ComputeUsedBreadthOfGridTracks, and the preferred width as the sum of the 24.7048 + UsedBreadths of the <a href="#grid-track"><i>Grid tracks</i></a> after 24.7049 + the entire track sizing algorithm has been run with infinite space.</p> 24.7050 + <!--End Section: Defining the Shrink-to-fit Behavior of Grid Elements--></div> 24.7051 + 24.7052 + <h2 class=no-num id=changes-from-previous-version>Changes from <a 24.7053 + href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/">Previous 24.7054 + Working Draft</a></h2> 24.7055 + 24.7056 + <div> 24.7057 + <h3 class=no-num id=changes-from-previous-version-12-april-2012>Changes 24.7058 + made in 12 April 2012 Editor's Draft</h3> 24.7059 + 24.7060 + <ul> 24.7061 + <li>Section 4: Added the definition of the baseline of an inline grid. 24.7062 + 24.7063 + <li>Section 6.4: Changed repeat syntax from using simple brackets to a 24.7064 + repeat() function. Also removed discussion of whitespace, which is not 24.7065 + needed under the new syntax. 24.7066 + 24.7067 + <li>Section 6.5: Updated grammar to remove quotes from keywords, and 24.7068 + updated repeating syntax. 24.7069 + 24.7070 + <li>Section 6.5: Removed "fit-content" as a synonym for "auto" value in 24.7071 + grid-row and grid-column properties 24.7072 + 24.7073 + <li>Section 6.6 (was 7.2): Moved this section into Section 6, which 24.7074 + describes Defining the Grid. 24.7075 + 24.7076 + <li>Section 6.6: Specified that non-rectangular grid-template regions are 24.7077 + not allowed, and that one column is created for each letter in a 24.7078 + template string. 24.7079 + 24.7080 + <li>Section 6.6: Updated text describing grid-template and writing-mode 24.7081 + sensitivity. 24.7082 + 24.7083 + <li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth 24.7084 + in step 4, rather than all Grid Tracks. 24.7085 + 24.7086 + <li>Section 10.2: Fixed minor spelling error "Contstriant" 24.7087 + 24.7088 + <li>Section 11: Added a definition of the preferred minimum width and the 24.7089 + preferred width of the Grid element. 24.7090 + </ul> 24.7091 + 24.7092 + <h3 class=no-num id=changes-from-previous-version-2-august-2012>Changes 24.7093 + made in 2 August 2012 Editor's Draft</h3> 24.7094 + 24.7095 + <ul> 24.7096 + <li>Section 2.2: Updated Example I, and other examples, to use the latest 24.7097 + Box Alignment Level 3 syntax. 24.7098 + 24.7099 + <li>Section 3.3: Changed "Grid Cells to "Grid Areas" throughout the spec. 24.7100 + 24.7101 + <li>Section 5: Updated this section to be in alignment with the Flexible 24.7102 + Box spec on anonymous items. 24.7103 + 24.7104 + <li>Section 6.3: Removed this from the spec. 24.7105 + 24.7106 + <li>Section 6.3: (was 6.4) Removed issue 1 about named lines in the 24.7107 + repeat syntax; will track the issue via Bugzilla. 24.7108 + 24.7109 + <li>Section 6.4: (was 6.5) Renamed Grid-columns and Grid-rows to 24.7110 + Grid-column-definition and Grid-row-definition throughout the spec. 24.7111 + 24.7112 + <li>Section 6.5: (was 6.6) Update the grid-template property to accept 24.7113 + IDENTS for naming grid areas instead of characters. 24.7114 + 24.7115 + <li>Section 6.5: (was 6.6) Added support for periods to create an unamed 24.7116 + region of the grid using the grid-template property. 24.7117 + 24.7118 + <li>Section 6.5: (was 6.6) Removed discussion of grid-cell property (now 24.7119 + grid-area) to section 7. 24.7120 + 24.7121 + <li>Section 7: Updated usage and syntax of grid-row, grid-column, 24.7122 + grid-row-span and grid-column-span properties to include the use of 24.7123 + IDENTS. 24.7124 + 24.7125 + <li>Section 7.2: Updated usage and syntax of grid-area property (was 24.7126 + grid-cell) as a shorthand property for other grid sizing and positioning 24.7127 + properties. 24.7128 + 24.7129 + <li>Section 7.5: Updated description and algorithm for automatic 24.7130 + placement of Grid Items. 24.7131 + 24.7132 + <li>Section 10.2: Corrected typo in CalculateNormalizedFractionBreadth - 24.7133 + NormalizedFractionValue ==> NormalizedFractionBreadth. 24.7134 + 24.7135 + <li>Section 10.2: Changed CalculateNormalizedFractionBreadth to sort by 24.7136 + NormalizedFractionValue ascending. 24.7137 + 24.7138 + <li>Section 10.2: Changed syntax from "== defined" to "is defined". 24.7139 + 24.7140 + <li>Section 10.2: Fixed ResolveContentBasedTrackSizingFunctionsForItems 24.7141 + to use GridItems instead of RecipientTracks. 24.7142 + </ul> 24.7143 + </div> 24.7144 + 24.7145 + <h2 class=no-num id=acknowledgements>Acknowledgements</h2> 24.7146 + 24.7147 + <p> This specification is made possible by input from Erik Anderson, Rossen 24.7148 + Atanassov, Arron Eicholz, Sylvain Galineau, John Jansen, Chris Jones, 24.7149 + Kathy Kam, Veljko Miljanic, Peter Salas, Christian Stockwell, Eugene 24.7150 + Veselov, and the CSS Working Group members. Thanks to Eliot Graff for 24.7151 + editorial input. 24.7152 + 24.7153 + <h2 class=no-num id=references> References</h2> 24.7154 + 24.7155 + <h3 class=no-num id=normative-references> Normative references</h3> 24.7156 + <!--begin-normative--> 24.7157 + <!-- Sorted by label --> 24.7158 + 24.7159 + <dl class=bibliography> 24.7160 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 24.7161 + <!----> 24.7162 + 24.7163 + <dt id=CSS21>[CSS21] 24.7164 + 24.7165 + <dd>Bert Bos; et al. <a 24.7166 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 24.7167 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 24.7168 + 2011. W3C Recommendation. URL: <a 24.7169 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 24.7170 + </dd> 24.7171 + <!----> 24.7172 + 24.7173 + <dt id=CSS3-ALIGN>[CSS3-ALIGN] 24.7174 + 24.7175 + <dd>Elika J. Etemad. <a 24.7176 + href="http://www.w3.org/TR/2012/WD-css3-align-20120612/"><cite>CSS Box 24.7177 + Alignment Module Level 3.</cite></a> 12 June 2012. W3C Working Draft. 24.7178 + (Work in progress.) URL: <a 24.7179 + href="http://www.w3.org/TR/2012/WD-css3-align-20120612/">http://www.w3.org/TR/2012/WD-css3-align-20120612/</a> 24.7180 + </dd> 24.7181 + <!----> 24.7182 + 24.7183 + <dt id=CSS3VAL>[CSS3VAL] 24.7184 + 24.7185 + <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 24.7186 + href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS 24.7187 + Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working 24.7188 + Draft. (Work in progress.) URL: <a 24.7189 + href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a> 24.7190 + </dd> 24.7191 + <!----> 24.7192 + </dl> 24.7193 + <!--end-normative--> 24.7194 + 24.7195 + <h3 class=no-num id=other-references> Other references</h3> 24.7196 + <!--begin-informative--> 24.7197 + <!-- Sorted by label --> 24.7198 + 24.7199 + <dl class=bibliography> 24.7200 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 24.7201 + <!----> 24.7202 + 24.7203 + <dt id=CSS3LAYOUT>[CSS3LAYOUT] 24.7204 + 24.7205 + <dd>Bert Bos; César Acebal. <a 24.7206 + href="http://www.w3.org/TR/2010/WD-css3-layout-20100429"><cite>CSS 24.7207 + Template Layout Module.</cite></a> 29 April 2010. W3C Working Draft. 24.7208 + (Work in progress.) URL: <a 24.7209 + href="http://www.w3.org/TR/2010/WD-css3-layout-20100429">http://www.w3.org/TR/2010/WD-css3-layout-20100429</a> 24.7210 + </dd> 24.7211 + <!----> 24.7212 + </dl> 24.7213 + <!--end-informative--> 24.7214 + 24.7215 + <h2 class=no-num id=index> Index</h2> 24.7216 + <!--begin-index--> 24.7217 + 24.7218 + <ul class=indexlist> 24.7219 + <li>Algorithm, <a 24.7220 + href="#function-CalculateNormalizedFractionBreadth-algorithm" 24.7221 + title=Algorithm><strong>10.2.</strong></a>, <a 24.7222 + href="#function-ComputeUsedBreadthOfGridTracks-algorithm" 24.7223 + title=Algorithm><strong>10.2.</strong></a>, <a 24.7224 + href="#function-DistributeSpaceToTracks-algorithm" 24.7225 + title=Algorithm><strong>10.2.</strong></a>, <a 24.7226 + href="#function-ResolveContentBasedTrackSizingFunctions-algorithm" 24.7227 + title=Algorithm><strong>10.2.</strong></a>, <a 24.7228 + href="#function-ResolveContentBasedTrackSizingFunctionsForItems-algorithm" 24.7229 + title=Algorithm><strong>10.2.</strong></a> 24.7230 + 24.7231 + <li>auto, <a href="#auto" title=auto><strong>6.4.</strong></a>, <a 24.7232 + href="#auto-column-position" title=auto><strong>7.</strong></a>, <a 24.7233 + href="#auto-row-position" title=auto><strong>7.</strong></a>, <a 24.7234 + href="#none-area" title=auto><strong>7.2.</strong></a> 24.7235 + 24.7236 + <li>AvailableSpace, <a href="#AvailableSpace-definition" 24.7237 + title=AvailableSpace><strong>10.1.</strong></a> 24.7238 + 24.7239 + <li>CalculateNormalizedFractionBreadth, <a 24.7240 + href="#function-CalculateNormalizedFractionBreadth" 24.7241 + title=CalculateNormalizedFractionBreadth><strong>10.2.</strong></a> 24.7242 + 24.7243 + <li>columns, <a href="#columns" title=columns><strong>7.5.</strong></a> 24.7244 + 24.7245 + <li>ComputeUsedBreadthOfGridTracks, <a 24.7246 + href="#function-ComputeUsedBreadthOfGridTracks" 24.7247 + title=ComputeUsedBreadthOfGridTracks><strong>10.2.</strong></a> 24.7248 + 24.7249 + <li>DistributeSpaceToTracks, <a href="#function-DistributeSpaceToTracks" 24.7250 + title=DistributeSpaceToTracks><strong>10.2.</strong></a> 24.7251 + 24.7252 + <li>fraction, <a href="#fraction" title=fraction><strong>6.4.</strong></a> 24.7253 + 24.7254 + 24.7255 + <li>Fraction values, <a href="#fraction-values" 24.7256 + title="Fraction values"><strong>6.4.1.</strong></a> 24.7257 + 24.7258 + <li>grid, <a href="#grid" title=grid><strong>4.</strong></a> 24.7259 + 24.7260 + <li>Grid Area, <a href="#grid-area-concept" 24.7261 + title="Grid Area"><strong>3.3.</strong></a> 24.7262 + 24.7263 + <li>grid-area, <a href="#grid-area" 24.7264 + title=grid-area><strong>7.2.</strong></a> 24.7265 + 24.7266 + <li>grid-column, <a href="#grid-column" 24.7267 + title=grid-column><strong>7.</strong></a> 24.7268 + 24.7269 + <li>grid-column-sizing, <a href="#grid-column-sizing" 24.7270 + title=grid-column-sizing><strong>7.4.1.</strong></a> 24.7271 + 24.7272 + <li>grid-column-span, <a href="#grid-column-span" 24.7273 + title=grid-column-span><strong>7.1.</strong></a> 24.7274 + 24.7275 + <li>grid-definition-columns, <a href="#grid-definition-columns" 24.7276 + title=grid-definition-columns><strong>6.4.</strong></a> 24.7277 + 24.7278 + <li>grid-definition-rows, <a href="#grid-definition-rows" 24.7279 + title=grid-definition-rows><strong>6.4.</strong></a> 24.7280 + 24.7281 + <li>Grid element, <a href="#grid-element" 24.7282 + title="Grid element"><strong>3.</strong></a> 24.7283 + 24.7284 + <li>grid-flow, <a href="#grid-flow" 24.7285 + title=grid-flow><strong>7.5.</strong></a> 24.7286 + 24.7287 + <li>grid items, <a href="#grid-item" 24.7288 + title="grid items"><strong>5.</strong></a> 24.7289 + 24.7290 + <li>Grid Line, <a href="#grid-line" 24.7291 + title="Grid Line"><strong>3.2.</strong></a> 24.7292 + 24.7293 + <li>grid-row, <a href="#grid-row" title=grid-row><strong>7.</strong></a> 24.7294 + 24.7295 + <li>grid-row-sizing, <a href="#grid-row-sizing" 24.7296 + title=grid-row-sizing><strong>7.4.1.</strong></a> 24.7297 + 24.7298 + <li>grid-row-span, <a href="#grid-row-span" 24.7299 + title=grid-row-span><strong>7.1.</strong></a> 24.7300 + 24.7301 + <li>grid-template, <a href="#grid-template" 24.7302 + title=grid-template><strong>6.5.</strong></a> 24.7303 + 24.7304 + <li>Grid Track, <a href="#grid-track" 24.7305 + title="Grid Track"><strong>3.1.</strong></a> 24.7306 + 24.7307 + <li>inline-grid, <a href="#inline-grid" 24.7308 + title=inline-grid><strong>4.</strong></a> 24.7309 + 24.7310 + <li>Inputs, <a href="#function-CalculateNormalizedFractionBreadth-inputs" 24.7311 + title=Inputs><strong>10.2.</strong></a>, <a 24.7312 + href="#function-ComputeUsedBreadthOfGridTracks-inputs" 24.7313 + title=Inputs><strong>10.2.</strong></a>, <a 24.7314 + href="#function-DistributeSpaceToTracks-inputs" 24.7315 + title=Inputs><strong>10.2.</strong></a>, <a 24.7316 + href="#function-ResolveContentBasedTrackSizingFunctions-inputs" 24.7317 + title=Inputs><strong>10.2.</strong></a>, <a 24.7318 + href="#function-ResolveContentBasedTrackSizingFunctionsForItems-inputs" 24.7319 + title=Inputs><strong>10.2.</strong></a> 24.7320 + 24.7321 + <li>length, <a href="#length" title=length><strong>6.4.</strong></a> 24.7322 + 24.7323 + <li>max-content, <a href="#max-content" 24.7324 + title=max-content><strong>6.4.</strong></a> 24.7325 + 24.7326 + <li>MaxTrackSizingFunction, <a href="#MaxTrackSizingFunction-definition" 24.7327 + title=MaxTrackSizingFunction><strong>10.1.</strong></a> 24.7328 + 24.7329 + <li>min-content, <a href="#min-content" 24.7330 + title=min-content><strong>6.4.</strong></a> 24.7331 + 24.7332 + <li>minmax(min, max), <a href="#minmax" 24.7333 + title="minmax(min, max)"><strong>6.4.</strong></a> 24.7334 + 24.7335 + <li>MinTrackSizingFunction, <a href="#MinTrackSizingFunction-definition" 24.7336 + title=MinTrackSizingFunction><strong>10.1.</strong></a> 24.7337 + 24.7338 + <li>none, <a href="#none-flow" title=none><strong>7.5.</strong></a>, <a 24.7339 + href="#none-template" title=none><strong>6.5.</strong></a> 24.7340 + 24.7341 + <li>RemainingSpace, <a href="#RemainingSpace-definition" 24.7342 + title=RemainingSpace><strong>10.1.</strong></a> 24.7343 + 24.7344 + <li>ResolveContentBasedTrackSizingFunctions, <a 24.7345 + href="#function-ResolveContentBasedTrackSizingFunctions" 24.7346 + title=ResolveContentBasedTrackSizingFunctions><strong>10.2.</strong></a> 24.7347 + 24.7348 + <li>ResolveContentBasedTrackSizingFunctionsForItems, <a 24.7349 + href="#function-ResolveContentBasedTrackSizingFunctionsForItems" 24.7350 + title=ResolveContentBasedTrackSizingFunctionsForItems><strong>10.2.</strong></a> 24.7351 + 24.7352 + 24.7353 + <li>Returns, <a 24.7354 + href="#function-CalculateNormalizedFractionBreadth-returns" 24.7355 + title=Returns><strong>10.2.</strong></a> 24.7356 + 24.7357 + <li>rows, <a href="#rows" title=rows><strong>7.5.</strong></a> 24.7358 + 24.7359 + <li>SpanCount, <a href="#SpanCount-definition" 24.7360 + title=SpanCount><strong>10.1.</strong></a> 24.7361 + </ul> 24.7362 + <!--end-index--> 24.7363 + 24.7364 + <h2 class=no-num id=property-index> Property index</h2> 24.7365 + <!--begin-properties--> 24.7366 + 24.7367 + <table class=proptable> 24.7368 + <thead> 24.7369 + <tr> 24.7370 + <th>Property 24.7371 + 24.7372 + <th>Values 24.7373 + 24.7374 + <th>Initial 24.7375 + 24.7376 + <th>Applies to 24.7377 + 24.7378 + <th>Inh. 24.7379 + 24.7380 + <th>Percentages 24.7381 + 24.7382 + <th>Media 24.7383 + 24.7384 + <tbody> 24.7385 + <tr> 24.7386 + <th><span class=property>display</span> 24.7387 + 24.7388 + <td>[ ...existing values... | grid | inline-grid | 24.7389 + 24.7390 + <td>specified value 24.7391 + 24.7392 + <tr> 24.7393 + <th><a class=property href="#grid-area">grid-area</a> 24.7394 + 24.7395 + <td>IDENT | [ <int> ]{2,4} | [ <string> ]{4} | [ auto [ 24.7396 + <int> ]{0,2} ] 24.7397 + 24.7398 + <td>none 24.7399 + 24.7400 + <td>Grid Item elements 24.7401 + 24.7402 + <td>no 24.7403 + 24.7404 + <td>n/a 24.7405 + 24.7406 + <td>visual, paged 24.7407 + 24.7408 + <tr> 24.7409 + <th><a class=property href="#grid-column">grid-column</a> 24.7410 + 24.7411 + <td>[ [ <integer> | <string> ] [ <integer> | 24.7412 + <string> ]? ] | IDENT | auto 24.7413 + 24.7414 + <td>auto 24.7415 + 24.7416 + <td>Grid Item elements 24.7417 + 24.7418 + <td>no 24.7419 + 24.7420 + <td>n/a 24.7421 + 24.7422 + <td>visual, paged 24.7423 + 24.7424 + <tr> 24.7425 + <th><a class=property href="#grid-column-sizing">grid-column-sizing</a> 24.7426 + 24.7427 + <td><track-minmax> (see Grid Columns and Grid Rows Properties) 24.7428 + 24.7429 + <td>auto 24.7430 + 24.7431 + <td>Grid elements 24.7432 + 24.7433 + <td>no 24.7434 + 24.7435 + <td>see Grid Columns and Grid Rows Properties 24.7436 + 24.7437 + <td>visual, paged 24.7438 + 24.7439 + <tr> 24.7440 + <th><a class=property href="#grid-column-span">grid-column-span</a> 24.7441 + 24.7442 + <td><integer> | IDENT 24.7443 + 24.7444 + <td>1 24.7445 + 24.7446 + <td>Grid Item elements 24.7447 + 24.7448 + <td>no 24.7449 + 24.7450 + <td>n/a 24.7451 + 24.7452 + <td>visual, paged 24.7453 + 24.7454 + <tr> 24.7455 + <th><a class=property 24.7456 + href="#grid-definition-columns">grid-definition-columns</a> 24.7457 + 24.7458 + <td>see grammar above 24.7459 + 24.7460 + <td>none 24.7461 + 24.7462 + <td>non-replaced elements with a computed value of ‘grid’ or 24.7463 + ‘inline-grid’ for display. 24.7464 + 24.7465 + <td>no 24.7466 + 24.7467 + <td>n/a 24.7468 + 24.7469 + <td>visual, paged 24.7470 + 24.7471 + <tr> 24.7472 + <th><a class=property 24.7473 + href="#grid-definition-rows">grid-definition-rows</a> 24.7474 + 24.7475 + <td>see grammar above 24.7476 + 24.7477 + <td>none 24.7478 + 24.7479 + <td>non-replaced elements with a computed value of ‘grid’ or 24.7480 + ‘inline-grid’ for display. 24.7481 + 24.7482 + <td>no 24.7483 + 24.7484 + <td>n/a 24.7485 + 24.7486 + <td>visual, paged 24.7487 + 24.7488 + <tr> 24.7489 + <th><a class=property href="#grid-flow">grid-flow</a> 24.7490 + 24.7491 + <td>none | rows | columns 24.7492 + 24.7493 + <td>none 24.7494 + 24.7495 + <td>Grid elements 24.7496 + 24.7497 + <td>no 24.7498 + 24.7499 + <td>n/a 24.7500 + 24.7501 + <td>visual, paged 24.7502 + 24.7503 + <tr> 24.7504 + <th><a class=property href="#grid-row">grid-row</a> 24.7505 + 24.7506 + <td>[ [ <integer> | <string> ] [ <integer> | 24.7507 + <string> ]? ] | IDENT | auto 24.7508 + 24.7509 + <td>auto 24.7510 + 24.7511 + <td>Grid Item elements 24.7512 + 24.7513 + <td>no 24.7514 + 24.7515 + <td>n/a 24.7516 + 24.7517 + <td>visual, paged 24.7518 + 24.7519 + <tr> 24.7520 + <th><a class=property href="#grid-row-sizing">grid-row-sizing</a> 24.7521 + 24.7522 + <td><track-minmax> (see Grid Columns and Grid Rows Properties) 24.7523 + 24.7524 + <td>auto 24.7525 + 24.7526 + <td>Grid elements 24.7527 + 24.7528 + <td>no 24.7529 + 24.7530 + <td>see Grid Columns and Grid Rows Properties 24.7531 + 24.7532 + <td>visual, paged 24.7533 + 24.7534 + <tr> 24.7535 + <th><a class=property href="#grid-row-span">grid-row-span</a> 24.7536 + 24.7537 + <td><integer> | IDENT 24.7538 + 24.7539 + <td>1 24.7540 + 24.7541 + <td>Grid Item elements 24.7542 + 24.7543 + <td>no 24.7544 + 24.7545 + <td>n/a 24.7546 + 24.7547 + <td>visual, paged 24.7548 + 24.7549 + <tr> 24.7550 + <th><a class=property href="#grid-template">grid-template</a> 24.7551 + 24.7552 + <td>[ " [ IDENT | . ]+ " ]+ | none 24.7553 + 24.7554 + <td>none 24.7555 + 24.7556 + <td>Grid elements 24.7557 + 24.7558 + <td>no 24.7559 + 24.7560 + <td>n/a 24.7561 + 24.7562 + <td>visual, paged 24.7563 + </table> 24.7564 + <!--end-properties--> 24.7565 +</html> 24.7566 +<!-- Keep this comment at the end of the file 24.7567 +Local variables: 24.7568 +mode: sgml 24.7569 +sgml-declaration:"~/SGML/HTML4.decl" 24.7570 +sgml-default-doctype-name:"html" 24.7571 +sgml-minimize-attributes:t 24.7572 +sgml-nofill-elements:("pre" "style" "br") 24.7573 +sgml-live-element-indicator:t 24.7574 +sgml-omittag:nil 24.7575 +sgml-shorttag:nil 24.7576 +sgml-namecase-general:t 24.7577 +sgml-general-insert-case:lower 24.7578 +sgml-always-quote-attributes:t 24.7579 +sgml-indent-step:nil 24.7580 +sgml-indent-data:t 24.7581 +sgml-parent-document:nil 24.7582 +sgml-exposed-tags:nil 24.7583 +sgml-local-catalogs:nil 24.7584 +sgml-local-ecat-files:nil 24.7585 +End: 24.7586 +-->
25.1 --- a/css3-grid-layout/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 25.2 +++ b/css3-grid-layout/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 25.3 @@ -1,4 +1,4 @@ 25.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 25.5 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 25.6 <html lang="en"> 25.7 <head> 25.8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 25.9 @@ -106,7 +106,7 @@ 25.10 </p> 25.11 <ul> 25.12 <li>[[!CSS3VAL]]</li> 25.13 - <li>[[!CSS3-WRITING-MODES]]</li> 25.14 + <li>[[!CSS3-ALIGN]]</li> 25.15 </ul> 25.16 <p> 25.17 This CSS3 module has non-normative (informative) references to the following other CSS3 modules: 25.18 @@ -133,7 +133,7 @@ 25.19 </p> 25.20 25.21 <p> 25.22 - The layout capabilities of the Grid address these problems. The Grid provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application by referencing the <i>Grid lines</i> between the columns and rows, or by defining and referencing a <i>Grid cell</i>, which is a rectangular space covering an intersection of columns and rows. Figure 1 illustrates a basic layout which can be achieved with the Grid. 25.23 + The layout capabilities of the Grid address these problems. The Grid provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application by referencing the <i>Grid lines</i> between the columns and rows, or by defining and referencing a <i>Grid area</i>, which is a rectangular space covering an intersection of columns and rows. Figure 1 illustrates a basic layout which can be achieved with the Grid. 25.24 </p> 25.25 25.26 <!--End Section: Basic Capabilities of the Grid--> 25.27 @@ -175,11 +175,12 @@ 25.28 <p> 25.29 Note that there are multiple ways to specify the structure of the <i>Grid element</i> and to position and size <i>Grid items</i>, each optimized for different scenarios. 25.30 This example illustrates one that an author may use to define the position and space for each <i>Grid item</i> using the 25.31 - 'grid-rows' and 'grid-columns' properties of the <i>Grid element</i>, 25.32 + 'grid-definition-rows' and 'grid-definition-columns' properties of the <i>Grid element</i>, 25.33 and the 'grid-row', 'grid-column', 'grid-row-span' and 'grid-column-span' properties on each <i>Grid item</i>. 25.34 </p> 25.35 25.36 <pre class="example"><style type="text/css"> 25.37 +<style type="text/css"> 25.38 #grid { 25.39 display: grid; 25.40 25.41 @@ -199,17 +200,17 @@ 25.42 /* determine the ending grid line, which establishes bounds for the part. */ 25.43 #title { grid-column: 1; grid-row: 1 } 25.44 #score { grid-column: 1; grid-row: 3 } 25.45 - #stats { grid-column: 1; grid-row: 2; grid-row-align: start } 25.46 + #stats { grid-column: 1; grid-row: 2; justify-self: start } 25.47 #board { grid-column: 2; grid-row: 1; grid-row-span: 2 } 25.48 - #controls { grid-column: 2; grid-row: 3; grid-column-align: center } 25.49 + #controls { grid-column: 2; grid-row: 3; align-self: center } 25.50 </style> 25.51 25.52 <div id="grid"> 25.53 - <div id="title">Game Title</div> 25.54 - <div id="score">Score</div> 25.55 - <div id="stats">Stats</div> 25.56 - <div id="board">Board</div> 25.57 - <div id="controls">Controls</div> 25.58 + <div id="title">Game Title</div> 25.59 + <div id="score">Score</div> 25.60 + <div id="stats">Stats</div> 25.61 + <div id="board">Board</div> 25.62 + <div id="controls">Controls</div> 25.63 </div></pre> 25.64 <!--End Section: Adapting to Available Space for Layout--> 25.65 </div> 25.66 @@ -244,19 +245,19 @@ 25.67 #grid { 25.68 display: grid; 25.69 25.70 - /* The rows, columns and cells of the grid are defined visually using the */ 25.71 - /* grid-template property. Each string is a row, and each letter a cell. */ 25.72 - /* The max number of letters in any one string determines the number of */ 25.73 - /* columns. */ 25.74 - grid-template: "ta" 25.75 - "sa" 25.76 - "bb" 25.77 - "cc"; 25.78 + /* The rows, columns and areas of the grid are defined visually using the */ 25.79 + /* grid-template property. Each string is a row, and each word an area. */ 25.80 + /* The number of words in a string determines the number of */ 25.81 + /* columns. Note the number of words in each string must be identical. */ 25.82 + grid-template: "title stats" 25.83 + "score stats" 25.84 + "board board" 25.85 + "ctrls ctrls"; 25.86 25.87 /* Columns and rows created with the template property can be assigned a sizing */ 25.88 - /* function with the grid-columns and grid-rows properties. */ 25.89 - grid-columns: auto minmax(min-content, 1fr); 25.90 - grid-rows: auto auto minmax(min-content, 1fr) auto 25.91 + /* function with the grid-definition-columns and grid-definition-rows properties. */ 25.92 + grid-definition-columns: auto minmax(min-content, 1fr); 25.93 + grid-definition-rows: auto auto minmax(min-content, 1fr) auto 25.94 } 25.95 } 25.96 25.97 @@ -264,23 +265,23 @@ 25.98 #grid { 25.99 display: grid; 25.100 25.101 - /* Again the template property defines cells of the same name, but this time */ 25.102 + /* Again the template property defines areas of the same name, but this time */ 25.103 /* positioned differently to better suit a landscape orientation. */ 25.104 - grid-template: "tb" 25.105 - "ab" 25.106 - "sc"; 25.107 + grid-template: "title board" 25.108 + "stats board" 25.109 + "score ctrls"; 25.110 25.111 - grid-columns: auto minmax(min-content, 1fr); 25.112 - grid-rows: auto minmax(min-content, 1fr) auto 25.113 + grid-definition-columns: auto minmax(min-content, 1fr); 25.114 + grid-definition-rows: auto minmax(min-content, 1fr) auto 25.115 } 25.116 } 25.117 25.118 - /* The grid-cell property places a grid item into named region (cell) of the grid. */ 25.119 - #title { grid-cell: "t" } 25.120 - #score { grid-cell: "s" } 25.121 - #stats { grid-cell: "a" } 25.122 - #board { grid-cell: "b" } 25.123 - #controls { grid-cell: "c" } 25.124 + /* The grid-area property places a grid item into named region (area) of the grid. */ 25.125 + #title { grid-area: title } 25.126 + #score { grid-area: score } 25.127 + #stats { grid-area: stats } 25.128 + #board { grid-area: board } 25.129 + #controls { grid-area: ctrls } 25.130 </style> 25.131 25.132 <div id="grid"> 25.133 @@ -313,16 +314,16 @@ 25.134 Prior to the <i>Grid element</i>, the author would have likely used absolute positioning to control the top and left coordinates, 25.135 along with the width and height of each HTML element that comprises the control. 25.136 By leveraging the <i>Grid element</i>, the author can instead limit script usage to handling mouse events on the thumb, 25.137 - which snaps to various positions along the track as the 'grid-columns' property of the <i>Grid element</i> is updated. 25.138 + which snaps to various positions along the track as the 'grid-definition-columns' property of the <i>Grid element</i> is updated. 25.139 </p> 25.140 <pre class="example"><style type="text/css"> 25.141 #grid { 25.142 display: grid; 25.143 25.144 - /* The grid-columns and rows properties also support naming grid lines which can then */ 25.145 - /* be used to position grid items. The line names are assigned on either side of a */ 25.146 - /* column or row sizing function where the line would logically exist. */ 25.147 - grid-columns: 25.148 + /* The grid-definition-columns and rows properties also support naming grid lines */ 25.149 + /* which can then be used to position grid items. The line names are assigned on */ 25.150 + /* either side of a column or row sizing function where the line would logically exist. */ 25.151 + grid-definition-columns: 25.152 "start" auto 25.153 "track-start" 0.5fr 25.154 "thumb-start" auto 25.155 @@ -332,20 +333,20 @@ 25.156 "end"; 25.157 } 25.158 25.159 - /* Grid-column and grid-row accept a starting and optional endling line. Below the lines */ 25.160 - /* are referred to by name. Beyond any semantic advantage, the names also allow the author */ 25.161 - /* to avoid renumbering the grid-row and column properties of the grid items. This is */ 25.162 - /* similar to the concept demonstrated in the prior example with the grid-template */ 25.163 - /* property during orientation changes, but grid lines can also work with layered grid */ 25.164 - /* items that have overlapping cells of different shapes like the thumb and track parts */ 25.165 - /* in this example. */ 25.166 + /* grid-column and grid-row accept a starting and optional endling line. */ 25.167 + /* Below the lines are referred to by name. Beyond any semantic advantage, the names */ 25.168 + /* also allow the author to avoid renumbering the grid-row and */ 25.169 + /* column properties of the grid items. This is similar to the concept demonstrated in the */ 25.170 + /* prior example with the grid-template property during orientation changes, but */ 25.171 + /* grid lines can also work with layered grid items that have overlapping areas of */ 25.172 + /* different shapes like the thumb and track parts in this example. */ 25.173 #lower-label { grid-column: "start" } 25.174 - #track { grid-column: "track-start" "track-end"; grid-row-align: center } 25.175 + #track { grid-column: "track-start" "track-end"; align-self: center } 25.176 #upper-label { grid-column: "track-end"; } 25.177 25.178 /* Fill parts are drawn above the track so set z-index to 5. */ 25.179 - #lower-fill { grid-column: "track-start" "fill-split"; grid-row-align: center; z-index: 5 } 25.180 - #upper-fill { grid-column: "fill-split" "track-end"; grid-row-align: center; z-index: 5 } 25.181 + #lower-fill { grid-column: "track-start" "fill-split"; align-self: center; z-index: 5 } 25.182 + #upper-fill { grid-column: "fill-split" "track-end"; align-self: center; z-index: 5 } 25.183 25.184 /* Thumb is the topmost part; assign it the highest z-index value. */ 25.185 #thumb { grid-column: "thumb-start" "thumb-end"; z-index: 10 } 25.186 @@ -369,8 +370,8 @@ 25.187 <div id="grid-concepts" class="section"> 25.188 <h2>Core Concepts of the Grid</h2> 25.189 <div class="sidefigure"> 25.190 - <img class="figure" alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Cells and Items." src="images/grid-concepts.png" /> 25.191 - <p class="caption">A diagram illustrating the relationship between the <i>Grid element</i> and its Tracks, Lines, Cells and Items.</p> 25.192 + <img class="figure" alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Areas and Items." src="images/grid-concepts.png" /> 25.193 + <p class="caption">A diagram illustrating the relationship between the <i>Grid element</i> and its Tracks, Lines, Areas and Items.</p> 25.194 </div> 25.195 <p> 25.196 A <dfn id="grid-element">Grid element</dfn> is declared in markup by setting the display property of an element to ''grid'' or ''inline-grid''. Child elements of the Grid are termed <i>Grid items</i> and may be positioned and sized by the <i>Grid element</i> by leveraging the following logical concepts. 25.197 @@ -378,7 +379,7 @@ 25.198 <ul> 25.199 <li><i>Grid tracks</i></li> 25.200 <li><i>Grid lines</i></li> 25.201 - <li><i>Grid cells</i></li> 25.202 + <li><i>Grid areas</i></li> 25.203 </ul> 25.204 <p> 25.205 Figure 7 illustrates the relationship between these concepts and the markup in the subsections that follow produce the result shown in the figure. 25.206 @@ -387,13 +388,13 @@ 25.207 <div id="grid-concepts-tracks" class="section"> 25.208 <h3>Grid Tracks</h3> 25.209 <p> 25.210 - <dfn id="grid-track">Grid Track</dfn>s are the columns and rows of the Grid defined with the 'grid-rows' and 'grid-columns' properties on the <i>Grid element</i>. Each Track is defined by declaring a sequential list of sizing functions, one for each Track. Tracks define the space between <i>Grid lines</i>. 25.211 + <dfn id="grid-track">Grid Track</dfn>s are the columns and rows of the Grid defined with the 'grid-definition-rows' and 'grid-definition-columns' properties on the <i>Grid element</i>. Each Track is defined by declaring a sequential list of sizing functions, one for each Track. Tracks define the space between <i>Grid lines</i>. 25.212 </p> 25.213 <pre class="example"><style type="text/css"> 25.214 #grid { 25.215 display: grid; 25.216 - grid-columns: 150px 1fr; /* two columns */ 25.217 - grid-rows: 50px 1fr 50px /* three rows */ 25.218 + grid-definition-columns: 150px 1fr; /* two columns */ 25.219 + grid-definition-rows: 50px 1fr 50px /* three rows */ 25.220 } 25.221 </style></pre> 25.222 <!--End Section: Grid Tracks--> 25.223 @@ -410,8 +411,8 @@ 25.224 <pre class="example"><style type="text/css"> 25.225 #grid { 25.226 display: grid; 25.227 - grid-columns: 150px 1fr; 25.228 - grid-rows: 50px 1fr 50px 25.229 + grid-definition-columns: 150px 1fr; 25.230 + grid-definition-rows: 50px 1fr 50px 25.231 } 25.232 25.233 #item1 { grid-column: 2; grid-row: 1 4 } 25.234 @@ -421,8 +422,8 @@ 25.235 /* equivalent layout to the prior example, but using named lines */ 25.236 #grid { 25.237 display: grid; 25.238 - grid-columns: 150px "item1-start" 1fr "item1-end"; 25.239 - grid-rows: "item1-start" 50px 1fr 50px "item1-end" 25.240 + grid-definition-columns: 150px "item1-start" 1fr "item1-end"; 25.241 + grid-definition-rows: "item1-start" 50px 1fr 50px "item1-end" 25.242 } 25.243 25.244 #item1 { 25.245 @@ -432,34 +433,35 @@ 25.246 </style></pre> 25.247 <!--End Section: Grid Lines--> 25.248 </div> 25.249 - <div id="grid-concepts-cells" class="section"> 25.250 - <h3>Grid Cells</h3> 25.251 + <div id="grid-concepts-areas" class="section"> 25.252 + <h3>Grid Areas</h3> 25.253 <p> 25.254 - <dfn id="grid-cell-concept">Grid Cell</dfn>s are the logical space used to lay out one or more <i>Grid items</i>. <i>Grid cells</i> may be defined explicitly using the 'grid-template' property, or implicitly by referencing a region of the Grid using the properties 'grid-row' and 'grid-column' on a <i>Grid item</i>. 25.255 + <dfn id="grid-area-concept">Grid Area</dfn>s are the logical space used to lay out one or more <i>Grid items</i>. <i>Grid areas</i> may be defined explicitly using the 'grid-template' property, or implicitly by referencing a region of the Grid using the properties 'grid-row' and 'grid-column' on a <i>Grid item</i>. 25.256 </p> 25.257 <p> 25.258 - Whether a <i>Grid cell</i> is created explicitly or implicitly, there is no difference in the layout or drawing order of the <i>Grid items</i> which are associated with that <i>Grid cell</i>. <i>Grid cells</i> cannot be styled. Only the syntax used to refer to a region of space on the Grid differs between the implicit and explicit approach to provide authors with the tools to best suit their scenarios as illustrated in prior examples. 25.259 + Whether a <i>Grid area</i> is created explicitly or implicitly, there is no difference in the layout or drawing order of the <i>Grid items</i> which are associated with that <i>Grid area</i>. <i>Grid areas</i> cannot be styled. Only the syntax used to refer to a region of space on the Grid differs between the implicit and explicit approach to provide authors with the tools to best suit their scenarios as illustrated in prior examples. 25.260 </p> 25.261 <pre class="example"><style type="text/css"> 25.262 /* using the template syntax */ 25.263 #grid { 25.264 display: grid; 25.265 - grid-template: "ad" 25.266 - "bd" 25.267 - "cd"; 25.268 - grid-columns: 150px 1fr; 25.269 - grid-rows: 50px 1fr 50px 25.270 + grid-template: ". a" 25.271 + "b a" 25.272 + ". a"; 25.273 + grid-definition-columns: 150px 1fr; 25.274 + grid-definition-rows: 50px 1fr 50px 25.275 } 25.276 25.277 - #item2 { grid-cell: "b" } 25.278 - #item3 { grid-cell: "b" } 25.279 + #item1 { grid-area: "a" } 25.280 + #item2 { grid-area: "b" } 25.281 + #item3 { grid-area: "b" } 25.282 25.283 - /* Align items 2 and 3 at different points in the Grid Cell "b". */ 25.284 - /* By default, Grid Items are stretched to fit their Grid Cell */ 25.285 + /* Align items 2 and 3 at different points in the Grid Area "b". */ 25.286 + /* By default, Grid Items are stretched to fit their Grid Area */ 25.287 /* and these items would layer one over the other. */ 25.288 - #item2 { grid-row-align: start } 25.289 - #item3 { grid-column-align: end; grid-row-align: end }</style></pre> 25.290 - <!--End Section: Grid Cells--> 25.291 + #item2 { align-self: head } 25.292 + #item3 { justify-self: end; align-self: foot }</style></pre> 25.293 + <!--End Section: Grid Areas--> 25.294 </div> 25.295 25.296 <!--End Section: Core Concepts of the Grid--> 25.297 @@ -480,7 +482,7 @@ 25.298 <tr> 25.299 <td>Value:</td> 25.300 <td> 25.301 - [ ...existing values... | <span class="normref"><strong><dfn id="grid">grid</dfn> | <dfn id="inline-grid">inline-grid</dfn></strong></span> | 25.302 + [ ...existing values... | <dfn id="grid">grid</dfn> | <dfn id="inline-grid">inline-grid</dfn> | 25.303 </td> 25.304 </tr> 25.305 <tr> 25.306 @@ -495,29 +497,73 @@ 25.307 <dt><a name="value-def-display-inline-grid">inline-grid</a></dt> 25.308 <dd>A value of inline-grid causes an element to display as an inline-level <i>Grid element</i>.</dd> 25.309 </dl> 25.310 - <p>The baseline of an inline <i>Grid element</i> is the bottom edge of the margin box.</p> 25.311 - 25.312 + <p>The baseline of an inline <i>Grid element</i> is the bottom edge of the margin box.</p> 25.313 + 25.314 <!--End Section: Grid Declaration--> 25.315 </div> 25.316 25.317 - <div id="grid-items" class="section"> 25.318 - <h2>Grid Items</h2> 25.319 - <p> 25.320 - The <i>Grid element</i> performs layout on <i>Grid items</i>. <dfn id="grid-item">Grid Item</dfn>s are considered block-level children, replaced, inline-block children, and atomic, inline-level children of the <i>Grid element</i>. 25.321 - </p> 25.322 - <p> 25.323 - Contiguous runs of non-replaced, inline content are wrapped in an anonymous, block-level box, which is then treated as a <i>Grid item</i> for the purposes of Grid layout. 25.324 - Out-of-flow elements (except floats, which are out-of-flow, but are irrelevant to Grid layout since <i>Grid items</i> can't float) leave behind a "placeholder" in their original source location which is treated like a non-replaced, inline element for the purpose of this wrapping. 25.325 - Any indirect descendants of the <i>Grid element</i>, including block elements that are contained in inline elements, are not <i>Grid items</i>. 25.326 - </p> 25.327 - <p> 25.328 - The following example produces two <a href="#grid-item">Grid Items</a>: the first <i>Grid item</i> is the anonymous block-level box 25.329 - wrapping the <code>A</code> and the subsequent <code><span></code>; the second <i>Grid item</i> is created by the block-level box of the <code>C <div></code>. 25.330 - </p> 25.331 - <pre class="example"><div style="display:grid;">A<span>B</span><div>C</div></div></pre> 25.332 + <div id="grid-items" class="section"> 25.333 + <h2>Grid items</h2> 25.334 + <p> 25.335 + The contents of a <i>grid element</i> consists of zero or more <dfn id="grid-item">grid items</dfn>: 25.336 + each child of a <i>grid element</i> 25.337 + becomes a <i>grid item</i>, 25.338 + and each contiguous run of text that is directly contained inside a <i>grid element</i> 25.339 + is wrapped in an anonymous <i>grid item</i>. 25.340 + However, an anonymous grid item that contains only 25.341 + <a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a> 25.342 + is not rendered, as if it were ''display:none''. 25.343 + 25.344 + <p> 25.345 + A <i>grid item</i> establishes a new formatting context for its contents. 25.346 + The type of this formatting context is determined by its 'display' value, as usual. 25.347 + The computed 'display' of a <i>grid item</i> 25.348 + is determined by applying the table in 25.349 + <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a>. 25.350 + However, grid items are grid-level boxes, not block-level boxes: 25.351 + they participate in the <i>grid element</i>'s formatting context, 25.352 + not in a block formatting context. 25.353 + 25.354 + <div class="example"> 25.355 + <p>Examples of grid items: 25.356 + <pre> 25.357 +<div style="display:grid"> 25.358 + 25.359 + <!-- grid item: block child --> 25.360 + <div id="item1">block</div> 25.361 + 25.362 + <!-- grid item: floated element; floating is ignored --> 25.363 + <div id="item2" style="float: left;">float</div> 25.364 + 25.365 + <!-- grid item: anonymous block box around inline content --> 25.366 + anonymous item 3 25.367 + 25.368 + <!-- grid item: inline child --> 25.369 + <span> 25.370 + item 4 25.371 + <!-- grid items do not split around blocks --> 25.372 + <div id=not-an-item>item 4</div> 25.373 + item 4 25.374 + </span> 25.375 +</div></pre> 25.376 + </div> 25.377 + 25.378 + <p> 25.379 + Some values of 'display' trigger the generation of anonymous boxes. 25.380 + For example, a misparented ''table-cell'' child is fixed up 25.381 + by <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating anonymous ''table'' and ''table-row'' elements</a> around it. [[!CSS21]] 25.382 + This fixup must occur <em>before</em> a grid element's children are promoted to <i>grid items</i>. 25.383 + For example, given two contiguous child elements with ''display:table-cell'', 25.384 + an anonymous table wrapper box around them becomes the <i>grid item</i>. 25.385 + 25.386 + <p class='note'> 25.387 + Future display types may generate anonymous containers (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins). 25.388 + It is intended that grid item determination run after these operations. 25.389 + 25.390 + 25.391 <!--End Section: Grid Items--> 25.392 </div> 25.393 - 25.394 + 25.395 <div class="section" id="defining-grid-rows-columns-and-lines"> 25.396 <h2>Defining Grid Rows, Columns and Lines</h2> 25.397 25.398 @@ -539,8 +585,8 @@ 25.399 <pre class="example"><style type="text/css"> 25.400 #grid { 25.401 display: grid; 25.402 - grid-columns: 150px 1fr; 25.403 - grid-rows: 50px 1fr 50px 25.404 + grid-definition-columns: 150px 1fr; 25.405 + grid-definition-rows: 50px 1fr 50px 25.406 } 25.407 </style></pre> 25.408 <!--End Section: Grid Rows, Columns and Implicit Grid Lines--> 25.409 @@ -553,49 +599,17 @@ 25.410 <p class="caption">Named Grid Lines.</p> 25.411 </div> 25.412 <p> 25.413 - A <i>Grid line</i> exists on either side of a column or row. The <i>Grid line</i> may be named using one or more quoted strings which are positioned in the 'grid-rows' or 'grid-columns' definitions where the <i>Grid line</i> would logically occur (in between the sizing functions that define the Grid's columns and rows). Each name associated with a <i>Grid line</i> must be unique for the set of columns or rows. If the name is specified multiple times in the same column or row definition, it is associated with the first <i>Grid line</i> to which the name was assigned. When a name is not specified, <i>Grid lines</i> can be referred to in the order which they occur. The first line is 1, the second 2 and so on. The next example builds on the prior by assigning each line one or more names. 25.414 + A <i>Grid line</i> exists on either side of a column or row. The <i>Grid line</i> may be named using one or more quoted strings which are positioned in the 'grid-definition-rows' or 'grid-definition-columns' definitions where the <i>Grid line</i> would logically occur (in between the sizing functions that define the Grid's columns and rows). Each name associated with a <i>Grid line</i> must be unique for the set of columns or rows. If the name is specified multiple times in the same column or row definition, it is associated with the first <i>Grid line</i> to which the name was assigned. When a name is not specified, <i>Grid lines</i> can be referred to in the order which they occur. The first line is 1, the second 2 and so on. The next example builds on the prior by assigning each line one or more names. 25.415 </p> 25.416 <pre class="example"><style type="text/css"> 25.417 #grid { 25.418 display: grid; 25.419 - grid-columns: "first" "nav" 150px "main" 1fr "last"; 25.420 - grid-rows: "first" "header" 50px "main" 1fr "footer" 50px "last"; 25.421 + grid-definition-columns: "first" "nav" 150px "main" 1fr "last"; 25.422 + grid-definition-rows: "first" "header" 50px "main" 1fr "footer" 50px "last"; 25.423 } 25.424 </style></pre> 25.425 <!--End Section: Named Grid Lines--> 25.426 </div> 25.427 - 25.428 - <div class="section" id="grid-starting-and-ending-lines"> 25.429 - <h3>Starting and Ending Grid Lines</h3> 25.430 - <p> 25.431 - In addition to any explicitly named <i>Grid lines</i> defined by the author, a <i>Grid element</i> also has four implicitly defined <i>Grid lines</i>: a start and end line for both columns and rows. The <dfn id="start-line">start</dfn> line is always positioned on the starting edge of the <i>Grid element</i>’s content box. The <dfn id="end-line">end</dfn> line is positioned at the ending edge of the <i>Grid element</i>’s content box, or at the same location as the last explicitly or implicitly defined <i>Grid line</i> when it extends past the content box of the <i>Grid element</i>. 25.432 - </p> 25.433 - <p> 25.434 - In the following example, the ‘<a href="#end-line"><code 25.435 - class=css>end</code></a>’ column <i>Grid line</i> is positioned on the ending edge of the <i>Grid element</i>’s content box. The ‘<a href="#end-line"><code 25.436 - class=css>end</code></a>’ row <i>Grid line</i> is positioned past the ending edge in overflow at the same location as the <i>Grid line</i> named "last." 25.437 - </p> 25.438 - <pre class="example"><style type="text/css"> 25.439 - #grid { 25.440 - display: grid; 25.441 - width: auto; 25.442 - height: 500px; 25.443 - grid-columns: 50px 1fr; 25.444 - grid-rows: "first" 250px 250px 250px "last"; 25.445 - } 25.446 - 25.447 - #item { 25.448 - /* cover explicitly defined columns and rows */ 25.449 - grid-column: 1 3; 25.450 - grid-row: "first" "last"; 25.451 - 25.452 - /* equivalent (assuming no implicitly created tracks) */ 25.453 - grid-column: start end; 25.454 - grid-row: start end; 25.455 - } 25.456 -</style></pre> 25.457 - <!--End Section: Starting and Ending Grid Lines--> 25.458 - </div> 25.459 25.460 <div class="section" id="grid-repeating-columns-and-rows"> 25.461 <h3>Repeating Columns and Rows</h3> 25.462 @@ -608,27 +622,24 @@ 25.463 <pre class="example"><style type="text/css"> 25.464 #grid { 25.465 display: grid; 25.466 - grid-columns: 10px "content" 250px 10px 250px 10px 250px 10px 250px 10px; 25.467 - grid-rows: 1fr; 25.468 + grid-definition-columns: 10px "content" 250px 10px 250px 10px 250px 10px 250px 10px; 25.469 + grid-definition-rows: 1fr; 25.470 } 25.471 25.472 /* Equivalent definition. */ 25.473 #grid { 25.474 display: grid; 25.475 - grid-columns: 10px repeat(4, "content" 250px 10px); 25.476 - grid-rows: 1fr; 25.477 + grid-definition-columns: 10px repeat(4, "content" 250px 10px); 25.478 + grid-definition-rows: 1fr; 25.479 } 25.480 </style></pre> 25.481 - <p class="issue"> 25.482 - Consider not allowing named lines in the repeat syntax. 25.483 - </p> 25.484 <!--End Section: Repeating Columns and Rows--> 25.485 </div> 25.486 25.487 - <div class="section" id="grid-columns-and-rows-properties"> 25.488 - <h3>Grid-columns and Grid-rows Properties</h3> 25.489 + <div class="section" id="grid-definition-columns-and-rows-properties"> 25.490 + <h3>Grid-definition-columns and Grid-definition-rows Properties</h3> 25.491 <p> 25.492 - The following grammar expresses the allowable values for the 'grid-rows' and 'grid-columns' properties. 25.493 + The following grammar expresses the allowable values for the 'grid-definition-rows' and 'grid-definition-columns' properties. 25.494 </p> 25.495 <code><pre><track-list> => [ [ <string> ]* <track-group> [ <string> ]* ]+ | none 25.496 <track-group> => <track-minmax> | [ repeat( <positive-integer> , [ [ <string> ]* <track-minmax> [ <string> ]* ]+ ) ] 25.497 @@ -657,11 +668,11 @@ 25.498 Consider whether having undefined behavior for percentage-sized tracks in content-sized grids is appropriate. CSS2.1 and CSS3 leave percentage width undefined, although there appears to be consistency between browser implementations. 25.499 </p> 25.500 <br> 25.501 - <table id="grid-columns-property" class="propdef"> 25.502 + <table id="grid-definition-columns-property" class="propdef"> 25.503 <tbody> 25.504 <tr> 25.505 <td>Name:</td> 25.506 - <td><dfn id="grid-columns">grid-columns</dfn></td> 25.507 + <td><dfn id="grid-definition-columns">grid-definition-columns</dfn></td> 25.508 </tr> 25.509 <tr> 25.510 <td>Value:</td> 25.511 @@ -694,11 +705,11 @@ 25.512 </tbody> 25.513 </table> 25.514 25.515 - <table id="grid-rows-property" class="propdef"> 25.516 + <table id="grid-definition-rows-property" class="propdef"> 25.517 <tbody> 25.518 <tr> 25.519 <td>Name:</td> 25.520 - <td><dfn id="grid-rows">grid-rows</dfn></td> 25.521 + <td><dfn id="grid-definition-rows">grid-definition-rows</dfn></td> 25.522 </tr> 25.523 <tr> 25.524 <td>Value:</td> 25.525 @@ -741,20 +752,20 @@ 25.526 the minimum content size of all elements occupying the column, or 1/2 the 25.527 remaining space, whichever is greater.</li> 25.528 </ul> 25.529 - <pre class="example">div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre> 25.530 + <pre class="example">div { grid-definition-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre> 25.531 25.532 <p>Additional examples of valid <i>Grid track</i> definitions:</p> 25.533 <pre class="example"> /* examples of valid track definitions */ 25.534 - grid-rows: 1fr minmax(min-content, 1fr); 25.535 - grid-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr)); 25.536 - grid-rows: (10px); 25.537 - grid-rows: calc(4em - 5px)</pre> 25.538 - <!--End Section: Grid-columns and Grid-rows Properties--> 25.539 + grid-definition-rows: 1fr minmax(min-content, 1fr); 25.540 + grid-definition-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr)); 25.541 + grid-definition-rows: (10px); 25.542 + grid-definition-rows: calc(4em - 5px)</pre> 25.543 + <!--End Section: grid-definition-columns and grid-definition-rows Properties--> 25.544 </div> 25.545 25.546 <div id="fraction-values-fr" class="section"> 25.547 <h4>Fraction Values: 'fr'</h4> 25.548 - <p><dfn id="fraction-values">Fraction values</dfn> are new units applicable to the 'grid-rows' and 'grid-columns' properties:</p> 25.549 + <p><dfn id="fraction-values">Fraction values</dfn> are new units applicable to the 'grid-definition-rows' and 'grid-definition-columns' properties:</p> 25.550 <dl> 25.551 <dt>fr</dt> 25.552 <dd>Fraction of available space. </dd> 25.553 @@ -783,10 +794,10 @@ 25.554 </div> 25.555 25.556 <div id="computed-values-grid-rows-and-columns" class="section"> 25.557 - <h4>Computed Values for Grid-rows and Grid-columns</h4> 25.558 + <h4>Computed Values for grid-definition-rows and grid-definition-columns</h4> 25.559 <p> 25.560 - The computed size of all <i>Grid tracks</i> as returned for the 'grid-rows' and 'grid-columns' properties are normalized to used pixel values. 25.561 - All <i>Grid tracks</i> are included in the computed value reported for 'grid-rows' and 'grid-columns' regardless of how the <i>Grid tracks</i> were created, e.g. implicit tracks may be created by <i>Grid items</i> referencing a <i>Grid line</i> not explicitly defined by a 'grid-rows' or 'grid-columns' property. 25.562 + The computed size of all <i>Grid tracks</i> as returned for the 'grid-definition-rows' and 'grid-definition-columns' properties are normalized to used pixel values. 25.563 + All <i>Grid tracks</i> are included in the computed value reported for 'grid-definition-rows' and 'grid-definition-columns' regardless of how the <i>Grid tracks</i> were created, e.g. implicit tracks may be created by <i>Grid items</i> referencing a <i>Grid line</i> not explicitly defined by a 'grid-definition-rows' or 'grid-definition-columns' property. 25.564 25.565 The computed value includes any used values for named lines; any duplicate names must be removed. User agents may use the repeat syntax to avoid expansive string length due to implicit <i>Grid track</i> creation, 25.566 large spanning values or high repeat counts specified by the author. 25.567 @@ -797,7 +808,11 @@ 25.568 <pre class="example"><style type="text/css"> 25.569 #grid { 25.570 width: 500px; 25.571 - grid-columns: "a" auto "b" minmax(min-content, 1fr) "b" "c" "d" repeat(2, "e" 40px) repeat(5, auto); 25.572 + grid-definition-columns: 25.573 + "a" auto 25.574 + "b" minmax(min-content, 1fr) 25.575 + "b" "c" "d" repeat(2, "e" 40px) 25.576 + repeat(5, auto); 25.577 } 25.578 </style> 25.579 <div id="grid"> 25.580 @@ -807,33 +822,36 @@ 25.581 <script type="text/javascript"> 25.582 // Returns '"a" 50px "b" 320px "c" "d" repeat(2, "e" 40px) repeat(4, 0px) 50px'. 25.583 var gridElement = document.getElementById("grid"); 25.584 - window.getComputedStyle(gridElement, null).getPropertyValue("grid-columns"); 25.585 + window.getComputedStyle(gridElement, null).getPropertyValue("grid-definition-columns"); 25.586 </script></pre> 25.587 <!--End Section: Fraction Values: 'fr'--> 25.588 </div> 25.589 25.590 - <div id="defining-grid-cells-with-a-template" class="section"> 25.591 - <h3>Defining Grid Cells with a Template</h3> 25.592 + <div id="defining-grid-areas-with-a-template" class="section"> 25.593 + <h3>Defining Grid Areas with a Template</h3> 25.594 <p> 25.595 - <i>Grid cells</i> can also be defined explicitly using one-letter names via the 'grid-template' property. The 'grid-template' property provides a visualization of the <i>Grid element</i>’s structure while simultaneously defining the <i>Grid cells</i> which can be used to position and size the child elements of the Grid. 25.596 + <i>Grid areas</i> can also be defined explicitly using <a href="http://www.w3.org/TR/css3-syntax/Overview.html#identifiers">identifiers</a> via the 'grid-template' property. The 'grid-template' property provides a visualization of the <i>Grid element</i>’s structure while simultaneously defining the <i>Grid areas</i> which can be used to position and size the child elements of the Grid. 25.597 + </p> 25.598 + <p> 25.599 + A row is created for every separate string listed for the grid-template property, and a column is created for each identifier or period in each string. Note that all strings must have the same number of columns. A period represents an unnamed area in the <i>grid element</i> that cannot be used to position or size a <i>grid item</i>. An identifier creates a named <i>grid area</i> that can be used to position and size <i>grid items</i>. No two <i>grid areas</i> may have the same identifier. Duplicate identifiers define a <i>grid area</i> which spans multiple tracks, and must therefore therefore be geometrically adjacent to each other, forming a rectangular shape. A declaration which fails to meet these criteria will be dropped. 25.600 + </p> 25.601 + <p> 25.602 + In the following example, a 'grid-template' property is used to create a page layout where areas are defined for header content <code>head</code>, navigational content <code>nav</code>, footer content <code>foot</code>, and main content <code>main</code>. Accordingly, the template creates three rows, two columns, and four areas. The <code>head</code> area spans both columns and the first row of the grid. Columns are the tracks that run in the inline direction and rows are the tracks running in the direction of block progression. See Grid Writing Modes for more details. 25.603 </p> 25.604 <p> 25.605 - In the following example, a 'grid-template' property is used to create a page layout where cells are defined for header content <code>h</code>, navigational content <code>n</code>, footer content <code>f</code>, and main content <code>m</code>. A row is created for every separate string listed for the grid-template property, and a column is created for each letter in each string. Note that all strings must be the same length, and non-rectangular grid-template regions are not allowed and cause the declaration to be dropped. Accordingly, in the following example, the template creates three rows, two columns, and four cells. Columns are the tracks that run in the inline direction and rows are the tracks running in the direction of block progression. See Grid Writing Modes for more details. 25.606 - </p> 25.607 - <p> 25.608 - The 'grid-cell' property is specified on <i>Grid items</i> to position the <i>Grid item</i> inside the explicitly named <i>Grid cell</i>. 25.609 + The 'grid-area' property, defined in further detail below, is specified on <i>Grid items</i> to position the <i>Grid item</i> inside an explicitly named <i>Grid area</i>. 25.610 + The 'grid-area' property, defined in further detail below, is specified on <i>Grid items</i> to position the <i>Grid item</i> inside an explicitly named <i>Grid area</i>. 25.611 </p> 25.612 25.613 <pre class="example"><style type="text/css"> 25.614 #grid { 25.615 display: grid; 25.616 - grid-template: "hh" 25.617 - "nm" 25.618 - "ff" 25.619 + grid-template: "head head" 25.620 + "nav main" 25.621 + "foot ." 25.622 } 25.623 #grid > a { 25.624 - display:block; /* make anchor tags valid Grid Items */ 25.625 - grid-cell: "n"; 25.626 + grid-area: "nav"; 25.627 } 25.628 </style></pre> 25.629 25.630 @@ -845,7 +863,7 @@ 25.631 </tr> 25.632 <tr> 25.633 <td>Value:</td> 25.634 - <td><string>+ | <dfn id="none-template">none</dfn></td> 25.635 + <td>[ " [ IDENT | . ]+ " ]+ | <dfn id="none-template">none</dfn></td> 25.636 </tr> 25.637 <tr> 25.638 <td>Initial:</td> 25.639 @@ -873,45 +891,8 @@ 25.640 </tr> 25.641 </tbody> 25.642 </table> 25.643 - 25.644 - <table id="grid-cell-property" class="propdef"> 25.645 - <tbody> 25.646 - <tr> 25.647 - <td>Name:</td> 25.648 - <td><dfn id="grid-cell">grid-cell</dfn></td> 25.649 - </tr> 25.650 - <tr> 25.651 - <td>Value:</td> 25.652 - <td><string> | <dfn id="none-cell">none</dfn></td> 25.653 - </tr> 25.654 - <tr> 25.655 - <td>Initial:</td> 25.656 - <td>none</td> 25.657 - </tr> 25.658 - <tr> 25.659 - <td>Applies to:</td> 25.660 - <td>Grid Item elements</td> 25.661 - </tr> 25.662 - <tr> 25.663 - <td>Inherited:</td> 25.664 - <td>no</td> 25.665 - </tr> 25.666 - <tr> 25.667 - <td>Percentages:</td> 25.668 - <td>n/a</td> 25.669 - </tr> 25.670 - <tr> 25.671 - <td>Media:</td> 25.672 - <td>visual, paged</td> 25.673 - </tr> 25.674 - <tr> 25.675 - <td>Computed value:</td> 25.676 - <td>specified value</td> 25.677 - </tr> 25.678 - </tbody> 25.679 - </table> 25.680 25.681 - <!--End Section: Defining Grid Cells with a Template--> 25.682 + <!--End Section: Defining Grid Areas with a Template--> 25.683 </div> 25.684 25.685 <!--End Section: Defining Grid Rows and Columns--> 25.686 @@ -920,7 +901,7 @@ 25.687 25.688 <div id="grid-item-placement" class="section"> 25.689 <h2>Placing Grid Items</h2> 25.690 - <p>The properties 'grid-row' and 'grid-column' are used to place <i>Grid items</i> in the Grid.</p> 25.691 + <p>The properties 'grid-row' and 'grid-column' are used to place <i>Grid items</i> in the Grid. Numbers and strings refer to <i>Grid lines</i>. The properties will accept a mandatory starting <i>Grid line</i> and an optional ending <i>Grid line</i> which must be greater than the starting <i>Grid line</i>. A value of 'auto' will result in the placement of the <i>Grid item</i> according to the automatic placement algorithm described in section 7.4. An IDENT refers to a named <i>Grid area</i> and will compute to the row or column associated with that <i>Grid area</i>. 'grid-row' and 'grid-column' properties that refer to an undefined <i>Grid line</i> or an undefined <i>Grid area</i> via an IDENT will compute to their initial values.</p> 25.692 <table id="grid-column-property" class="propdef"> 25.693 <tbody> 25.694 <tr> 25.695 @@ -929,7 +910,7 @@ 25.696 </tr> 25.697 <tr> 25.698 <td>Value:</td> 25.699 - <td>[ [ <integer> | <string> | <dfn id="start-column-position">start</dfn> ] [ <integer> | <string> | <dfn id="end-column-position">end</dfn> ]? ] | <dfn id="auto-column-position">auto</dfn></td> 25.700 + <td>[ [ <integer> | <string> ] [ <integer> | <string> ]? ] | IDENT | <dfn id="auto-column-position">auto</dfn></td> 25.701 </tr> 25.702 <tr> 25.703 <td>Initial:</td> 25.704 @@ -966,7 +947,7 @@ 25.705 </tr> 25.706 <tr> 25.707 <td>Value:</td> 25.708 - <td>[ [ <integer> | <string> | <dfn id="start-row-position">start</dfn> ] [ <integer> | <string> | <dfn id="end-row-position">end</dfn> ]? ] | <dfn id="auto-row-position">auto</dfn></td> 25.709 + <td>[ [ <integer> | <string> ] [ <integer> | <string> ]? ] | IDENT | <dfn id="auto-row-position">auto</dfn></td> 25.710 </tr> 25.711 <tr> 25.712 <td>Initial:</td> 25.713 @@ -994,59 +975,11 @@ 25.714 </tr> 25.715 </tbody> 25.716 </table> 25.717 - 25.718 - <p> 25.719 - 'grid-row' and 'grid-column' properties that refer to an undefined <i>Grid line</i> will compute to their initial values. 25.720 - </p> 25.721 - 25.722 - 25.723 - <div id="anonymous-grid-cells" class="section"> 25.724 - <h3>Anonymous Grid Cells</h3> 25.725 - <p> 25.726 - Each <i>Grid item</i> is contained by a <i>Grid cell</i>, i.e. the <i>Grid cell</i> serves as the containing block for the <i>Grid item</i>. The dimensions of an anonymous <i>Grid cell</i> are determined by naming the starting and ending <i>Grid lines</i> using the 'grid-row' and 'grid-column' properties on the <i>Grid item</i> which the <i>Grid cell</i> surrounds. The starting and ending lines may be referred to by a string name, if one was defined by the author, the <a href="#start-column-position">start</a> and <a href="#end-column-position">end</a> line keywords, or the <i>Grid line</i>’s number. 25.727 - </p> 25.728 - <p> 25.729 - The following example positions the first <i>Grid item</i> to cover all rows and columns of the <i>Grid element</i> using the <a href="#start-column-position">start</a> and <a href="#end-column-position">end</a> keywords. The second <i>Grid item</i> is positioned to cover the first row. Note that when only the starting <i>Grid line</i> of the 'grid-row' or 'grid-column' properties are specified for the <i>Grid cell</i>, that the <i>Grid cell</i> is assumed to extend to the subsequent <i>Grid line</i>. 25.730 - </p> 25.731 - <pre class="example"><style type="text/css"> 25.732 - /* covers the <i>Grid element</i>’s content box */ 25.733 - #item1 { 25.734 - grid-row: start end; 25.735 - grid-column: start end; 25.736 - } 25.737 - 25.738 - /* covers the first row */ 25.739 - #item2 { 25.740 - grid-row: start; /* extends to row Grid Line 2 */ 25.741 - grid-column: start end; 25.742 - } 25.743 -</style></pre> 25.744 - <p> 25.745 - The next example defines rows for header and footer <i>Grid items</i> sized to content, as well as a main region that receives all remaining space. A single column which receives all horizontal space in the Grid's content box is also defined. 25.746 - </p> 25.747 - <pre class="example"><style type="text/css"> 25.748 - #grid { 25.749 - display: grid; 25.750 - grid-rows: "header" auto "main" 1fr "footer" auto; 25.751 - grid-columns: 1fr; 25.752 - } 25.753 - 25.754 - #header { grid-row: "header"; grid-column: start } 25.755 - #main { grid-row: "main"; grid-column: start } 25.756 - #footer { grid-row: "footer"; grid-column: start } 25.757 - 25.758 - /* Equivalent to the above using grid line numbers instead of names. */ 25.759 - #header { grid-row: 1; grid-column: 1 } 25.760 - #main { grid-row: 2; grid-column: 1 } 25.761 - #footer { grid-row: 3; grid-column: 1 } 25.762 -</style></pre> 25.763 - <!--End Section: Anonymous Grid Cells--> 25.764 - </div> 25.765 - 25.766 - <div id="grid-row-span-and-grid-column-span"> 25.767 + 25.768 + <div id="grid-row-span-and-grid-column-span"> 25.769 <h3>Grid-row-span and Grid-column-span</h3> 25.770 <p> 25.771 - As an alternative to specifying an ending line for a <i>Grid cell</i> or <i>Grid item</i>, 'grid-row-span' and 'grid-column-span' properties are available to specify a distance (line count) from the starting line to the ending line to define the dimensions of a <i>Grid cell</i>. 25.772 + As an alternative to specifying an ending line for a <i>Grid area</i> or <i>Grid item</i>, 'grid-row-span' and 'grid-column-span' properties are available to specify a distance (line count) from the starting line to the ending line to define the dimensions of a <i>Grid area</i>. An IDENT refers to a named <i>Grid area</i> and will compute to the row or column span associated with that <i>Grid area</i>. 25.773 Note that when 'grid-column-span' and a 'grid-column' ending line are both specified for a <i>Grid item</i>, that the ending line has priority. In such cases the computed value of 'grid-column-span' will be the <i>Grid line</i> number of the specified column ending line minus the <i>Grid line</i> number of the specified column starting line. 25.774 The same holds true for the related row properties. 25.775 </p> 25.776 @@ -1068,7 +1001,7 @@ 25.777 </tr> 25.778 <tr> 25.779 <td>Value:</td> 25.780 - <td><integer></td> 25.781 + <td><integer> | IDENT </td> 25.782 </tr> 25.783 <tr> 25.784 <td>Initial:</td> 25.785 @@ -1105,7 +1038,7 @@ 25.786 </tr> 25.787 <tr> 25.788 <td>Value:</td> 25.789 - <td><integer></td> 25.790 + <td><integer> | IDENT</td> 25.791 </tr> 25.792 <tr> 25.793 <td>Initial:</td> 25.794 @@ -1135,6 +1068,102 @@ 25.795 </table> 25.796 <!--End Section: Grid-row-span and Grid-column-span--> 25.797 </div> 25.798 + 25.799 + 25.800 + <div id="the-grid-area-shorthand" class="section"> 25.801 + <h3>The Grid Area shorthand</h3> 25.802 + 25.803 + <p>The 'grid-area' property is a shorthand for the 'grid-column', 'grid-row', 'grid-column-span', and 'grid-row-span' properties. Assigning an IDENT to the 'grid-area' property will set all four properties to the IDENT value. Specifying two integers will specify the row position and column position, respectively. Specifying three integers will specify the row and column positions, and set both the row and column spans to the value of the third integer. Specifying four integers will specify the row and column positions, and the row and column spans, respectively. Specifying four strings will specify the top, right, bottom, and left <i>Grid lines</i> for the <i>Grid item</i>, respectively. Specifying auto will set auto row and column positions to be resolved in accordance with 'grid-flow' property, as well as optionally specified row and column spans similar to the int syntax specified above.</p> 25.804 + 25.805 + <table id="grid-area-property" class="propdef"> 25.806 + <tbody> 25.807 + <tr> 25.808 + <td>Name:</td> 25.809 + <td><dfn id="grid-area">grid-area</dfn></td> 25.810 + </tr> 25.811 + <tr> 25.812 + <td>Value:</td> 25.813 + <td>IDENT | <br> [ <int> ]{2,4} | <br> [ <string> ]{4} | <br> [ <dfn id="none-area">auto</dfn> [ <int> ]{0,2} ]</td> 25.814 + </tr> 25.815 + <tr> 25.816 + <td>Initial:</td> 25.817 + <td>none</td> 25.818 + </tr> 25.819 + <tr> 25.820 + <td>Applies to:</td> 25.821 + <td>Grid Item elements</td> 25.822 + </tr> 25.823 + <tr> 25.824 + <td>Inherited:</td> 25.825 + <td>no</td> 25.826 + </tr> 25.827 + <tr> 25.828 + <td>Percentages:</td> 25.829 + <td>n/a</td> 25.830 + </tr> 25.831 + <tr> 25.832 + <td>Media:</td> 25.833 + <td>visual, paged</td> 25.834 + </tr> 25.835 + <tr> 25.836 + <td>Computed value:</td> 25.837 + <td>specified value</td> 25.838 + </tr> 25.839 + </tbody> 25.840 + </table> 25.841 + 25.842 + <p> 25.843 + Note that the use of a shorthand property resets all properties covered by that property to their initial value, except for the properties explicitly set by the shorthand property. 25.844 + </p> 25.845 + 25.846 + <!--End Section: The grid area shorthand--> 25.847 + </div> 25.848 + 25.849 + 25.850 + 25.851 + <div id="anonymous-grid-areas" class="section"> 25.852 + <h3>Anonymous Grid Areas</h3> 25.853 + <p> 25.854 + Each <i>Grid item</i> is contained by a <i>Grid area</i>, i.e. the <i>Grid area</i> serves as the containing block for the <i>Grid item</i>. The dimensions of an anonymous <i>Grid area</i> are determined by naming the starting and ending <i>Grid lines</i> using the 'grid-row' and 'grid-column' properties on the <i>Grid item</i> which the <i>Grid area</i> surrounds. The starting and ending lines may be referred to by a string name, if one was defined by the author, the <a href="#start-column-position">start</a> and <a href="#end-column-position">end</a> line keywords, or the <i>Grid line</i>’s number. 25.855 + </p> 25.856 + <p> 25.857 + The following example positions the first <i>Grid item</i> to cover all rows and columns of the <i>Grid element</i> using the <a href="#start-column-position">start</a> and <a href="#end-column-position">end</a> keywords. The second <i>Grid item</i> is positioned to cover the first row. Note that when only the starting <i>Grid line</i> of the 'grid-row' or 'grid-column' properties are specified for the <i>Grid area</i>, that the <i>Grid area</i> is assumed to extend to the subsequent <i>Grid line</i>. 25.858 + </p> 25.859 + <pre class="example"><style type="text/css"> 25.860 + /* covers the <i>Grid element</i>’s content box */ 25.861 + #item1 { 25.862 + grid-row: start end; 25.863 + grid-column: start end; 25.864 + } 25.865 + 25.866 + /* covers the first row */ 25.867 + #item2 { 25.868 + grid-row: start; /* extends to row Grid Line 2 */ 25.869 + grid-column: start end; 25.870 + } 25.871 +</style></pre> 25.872 + <p> 25.873 + The next example defines rows for header and footer <i>Grid items</i> sized to content, as well as a main region that receives all remaining space. A single column which receives all horizontal space in the Grid's content box is also defined. 25.874 + </p> 25.875 + <pre class="example"><style type="text/css"> 25.876 + #grid { 25.877 + display: grid; 25.878 + grid-definition-rows: "header" auto "main" 1fr "footer" auto; 25.879 + grid-definition-columns: 1fr; 25.880 + } 25.881 + 25.882 + #header { grid-row: "header"; grid-column: start } 25.883 + #main { grid-row: "main"; grid-column: start } 25.884 + #footer { grid-row: "footer"; grid-column: start } 25.885 + 25.886 + /* Equivalent to the above using grid line numbers instead of names. */ 25.887 + #header { grid-row: 1; grid-column: 1 } 25.888 + #main { grid-row: 2; grid-column: 1 } 25.889 + #footer { grid-row: 3; grid-column: 1 } 25.890 +</style></pre> 25.891 + <!--End Section: Anonymous Grid Areas--> 25.892 + </div> 25.893 + 25.894 25.895 <div id="grid-implicit-columns-and-rows" class="section"> 25.896 <h3>Implicit Columns and Rows</h3> 25.897 @@ -1146,7 +1175,7 @@ 25.898 </div> 25.899 25.900 <p> 25.901 - <i>Grid line</i> numbers referred to by 'grid-row' or 'grid-column' properties on a <i>Grid item</i> are not required to refer to a <i>Grid line</i> that was defined using the 'grid-columns' or 'grid-rows' properties on the <i>Grid element</i>. In cases where the specified position is outside those explicitly specified on the <i>Grid element</i>, implicit columns and rows fill gaps added as needed to create additional <i>Grid lines</i> until the reference can be resolved. 25.902 + <i>Grid line</i> numbers referred to by 'grid-row' or 'grid-column' properties on a <i>Grid item</i> are not required to refer to a <i>Grid line</i> that was defined using the 'grid-definition-columns' or 'grid-definition-rows' properties on the <i>Grid element</i>. In cases where the specified position is outside those explicitly specified on the <i>Grid element</i>, implicit columns and rows fill gaps added as needed to create additional <i>Grid lines</i> until the reference can be resolved. 25.903 Note that quoted <i>Grid line</i> names that don't resolve to an explicitly defined <i>Grid line</i> are treated as though the author specified the ‘<a href="#start-line"><code 25.904 class=css>start</code></a>’ <i>Grid line</i> and don't trigger implicit <i>Grid track</i> creation. 25.905 25.906 @@ -1157,8 +1186,8 @@ 25.907 </p> 25.908 25.909 <pre class="example"><style type="text/css"> 25.910 - #grid { display: grid; grid-columns: 20px; grid-rows: 20px } 25.911 - #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start } 25.912 + #grid { display: grid; grid-definition-columns: 20px; grid-definition-rows: 20px } 25.913 + #A { grid-column: 1; grid-row: 1; justify-self: start; align-self: head } 25.914 #B { grid-column: 5; grid-row: 1; grid-row-span: 2; } 25.915 #C { grid-column: 1; grid-row: 2; grid-column-span: 2; } 25.916 </style> 25.917 @@ -1183,7 +1212,7 @@ 25.918 </tr> 25.919 <tr> 25.920 <td>Value:</td> 25.921 - <td><track-minmax> (see <a href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a>)</td> 25.922 + <td><track-minmax> (see <a href="#grid-definition-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a>)</td> 25.923 </tr> 25.924 <tr> 25.925 <td>Initial:</td> 25.926 @@ -1199,7 +1228,7 @@ 25.927 </tr> 25.928 <tr> 25.929 <td>Percentages:</td> 25.930 - <td>see <a href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a></td> 25.931 + <td>see <a href="#grid-definition-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a></td> 25.932 </tr> 25.933 <tr> 25.934 <td>Media:</td> 25.935 @@ -1207,7 +1236,7 @@ 25.936 </tr> 25.937 <tr> 25.938 <td>Computed value:</td> 25.939 - <td>see <a href="#computed-values-grid-rows-and-columns">Computed Values for Grid-rows and Grid-columns</a></td> 25.940 + <td>see <a href="#computed-values-grid-rows-and-columns">Computed Values for grid-definition-rows and grid-definition-columns</a></td> 25.941 </tr> 25.942 </tbody> 25.943 </table> 25.944 @@ -1220,7 +1249,7 @@ 25.945 </tr> 25.946 <tr> 25.947 <td>Value:</td> 25.948 - <td><track-minmax> (see <a href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a>)</td> 25.949 + <td><track-minmax> (see <a href="#grid-definition-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a>)</td> 25.950 </tr> 25.951 <tr> 25.952 <td>Initial:</td> 25.953 @@ -1236,7 +1265,7 @@ 25.954 </tr> 25.955 <tr> 25.956 <td>Percentages:</td> 25.957 - <td>see <a href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a></td> 25.958 + <td>see <a href="#grid-definition-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a></td> 25.959 </tr> 25.960 <tr> 25.961 <td>Media:</td> 25.962 @@ -1244,7 +1273,7 @@ 25.963 </tr> 25.964 <tr> 25.965 <td>Computed value:</td> 25.966 - <td>see <a href="#computed-values-grid-rows-and-columns">Computed Values for Grid-rows and Grid-columns</a></td> 25.967 + <td>see <a href="#computed-values-grid-rows-and-columns">Computed Values for grid-definition-rows and grid-definition-columns</a></td> 25.968 </tr> 25.969 </tbody> 25.970 </table> 25.971 @@ -1259,12 +1288,10 @@ 25.972 <p> 25.973 <i>Grid items</i> can be automatically placed into an unoccupied space of the Grid. 25.974 The 'grid-flow' property controls the direction in which the search for unoccupied space takes place, and whether rows or columns are added as needed to accomodate the content. 25.975 - Note that <i>Grid cells</i> cannot be automatically placed. 25.976 </p> 25.977 <p> 25.978 - A 'grid-flow' value of ''rows'' will search across columns and then rows for unoccupied space, and will create additional rows 25.979 - as needed to accomodate content. Similarly, a 'grid-flow' value of ''columns'' searches rows first and creates additional 25.980 - columns as needed until sufficient space is found. 25.981 + A 'grid-flow' value of ''rows'' will place <i>grid item</i>s in row-major order by searching across columns and then rows for unoccupied space, and will create additional rows 25.982 + as needed to accomodate content <i>grid item</i>s. Similarly, a 'grid-flow' value of ''columns'' will place <i>grid item</i>s in column-major order, creating new columns as needed. 25.983 </p> 25.984 <table id="grid-flow-property" class="propdef"> 25.985 <tbody> 25.986 @@ -1310,12 +1337,14 @@ 25.987 </div> 25.988 <p> 25.989 The search for unoccupied space is conducted one <i>Grid item</i> at a time. 25.990 - First <i>Grid items</i> which have a constraint on either their 'grid-row' or 'grid-column' are placed, followed by 25.991 - <i>Grid items</i> which have both a 'grid-row' and 'grid-column' value of ''auto''. 25.992 - If 'grid-flow' is ''rows'', <i>Grid items</i> having an ''auto'' value for 'grid-row' are placed before those with 25.993 - an auto value for 'grid-column'. The reverse is true when 'grid-flow' is ''columns'' 25.994 -. 25.995 + <i>Grid items</i> which have a constraint on their major axis are placed first (the major axis being rows for a 'grid-flow' value of ''rows'' and columns for a 'grid-flow' value of 'columns''). Note that constraint means a value other than ''auto'' for the applicable 'grid-row' or 'grid-column' property. After this step, the number of minor-axis tracks must be determined for conducting the second phase of the auto-placement algorithm. 25.996 </p> 25.997 + <p> 25.998 + For the purposes of operating the auto-placement algorithm on items that have no constraint on their major axis, the number of tracks on the minor axis must be determined. The number of tracks will be the largest number implied by the 'grid-template' property, the 'grid-row-definition' and 'grid-column-definition' properties, the position and size of any explicitly-defined <i>grid items</i>, or any minor-axis ''auto'' values resolved by the previous phase of the algorithm. Note that any ''auto'' values still unresolved will be treated as 1 for the purposes of this determination. 25.999 + </p> 25.1000 + <p> 25.1001 + To position all remaining items that have ''auto'' values left unresolved, starting at position 1,1 on the grid, determine the minimum value along the minor axis that a <i>grid item</i> can be placed at while not overlapping the <i>grid area</i> of any other <i>grid item</i>, or exceeding the previously determined maximum track along the minor axis. If no such value can be found along the minor axis, increment the major axis value, creating new major axis tracks as necessary. 25.1002 + </p> 25.1003 <p> 25.1004 In the following example, there are three columns, each auto-sized to their contents. 25.1005 No rows are explicitly defined. The 'grid-flow' property is ''rows'' which instructs the grid 25.1006 @@ -1327,14 +1356,9 @@ 25.1007 <pre class="example"><style type="text/css"> 25.1008 form { 25.1009 display: grid; 25.1010 - grid-columns: "labels" auto "controls" auto "oversized" auto; 25.1011 + grid-definition-columns: "labels" auto "controls" auto "oversized" auto; 25.1012 grid-flow: rows 25.1013 } 25.1014 - form > * { 25.1015 - /* Ensure that children of the grid are all valid grid items by setting */ 25.1016 - /* display to 'block'. */ 25.1017 - display: block; 25.1018 - } 25.1019 form > input, form > select { 25.1020 /* Place all controls in the "controls" column and automatically find the */ 25.1021 /* next available row. */ 25.1022 @@ -1349,21 +1373,21 @@ 25.1023 } 25.1024 25.1025 #department { 25.1026 - /* Auto place this item in the "oversized" column in the first row where a cell that */ 25.1027 - /* spans three rows won't overlap other explicitly placed items or cells or any items */ 25.1028 - /* automatically placed prior to this cell. */ 25.1029 + /* Auto place this item in the "oversized" column in the first row where an area that */ 25.1030 + /* spans three rows won't overlap other explicitly placed items or areas or any items */ 25.1031 + /* automatically placed prior to this area. */ 25.1032 grid-column: "oversized"; 25.1033 grid-row: auto; 25.1034 grid-row-span: 3; 25.1035 } 25.1036 25.1037 - /* Place all the buttons of the form in the explicitly defined grid cell. */ 25.1038 + /* Place all the buttons of the form in the explicitly defined grid area. */ 25.1039 #buttons { 25.1040 grid-row: auto; 25.1041 25.1042 - /* Ensure the button cell spans the entire grid element in the column direction. */ 25.1043 - grid-column: start end; 25.1044 - grid-column-align: end 25.1045 + /* Ensure the button area spans the entire grid element in the column direction. */ 25.1046 + grid-column-span: 3; 25.1047 + justify-self: end 25.1048 } 25.1049 </style> 25.1050 <form action="#"> 25.1051 @@ -1390,8 +1414,6 @@ 25.1052 <option value="finance">Finance</option> 25.1053 <option value="humanresources">Human Resources</option> 25.1054 <option value="marketing">Marketing</option> 25.1055 - <option value="payroll">Payroll</option> 25.1056 - <option value="shipping">Shipping</option> 25.1057 </select> 25.1058 </div> 25.1059 25.1060 @@ -1404,24 +1426,30 @@ 25.1061 <div id="automatic-grid-item-placement-algorithm" class="section"> 25.1062 <h4>Automatic Grid Item Placement Algorithm</h4> 25.1063 <p> 25.1064 - The following summarizes the algorithm for auto placement of <i>Grid items</i>. For each <i>Grid item</i> in source order: 25.1065 + The following summarizes the algorithm for auto placement of <i>Grid items</i>: 25.1066 </p> 25.1067 <ol> 25.1068 - <li>If both 'grid-row' and 'grid-column' are not ''auto'' the <i>Grid item</i> is placed as specified: 25.1069 + <li>For each <i>Grid item</i> with a major-axis position that is not ''auto'' in source order:</li> 25.1070 + <ol> 25.1071 + <li>Resolve the ''auto'' value for its minor-axis position to the minimum value that ensures this item's <i>grid area</i> will not overlap the <i>grid area</i> of any explicitly or previously auto-placed item.</li> 25.1072 + </ol> 25.1073 + </li> 25.1074 + <li>Determine the maximum number of minor tracks based on maximum track number implied by the 'grid-template' property, the 'grid-row-definition' and 'grid-column-definition' properties, the position and size of any explicitly-defined <i>grid items</i>, or any minor-axis ''auto'' values resolved by the step 1 of the algorithm </li> 25.1075 + <li>Position the <i>auto-placement cursor</i> at position 1,1 in the grid.</li> 25.1076 + <li>For each <i>grid item</i> having an unresolved value of ''auto'', in source order: 25.1077 <ol> 25.1078 - <li>If 'grid-row' is not ''auto'', the <i>Grid item</i> is placed between the starting and ending lines specified by the 'grid-row' property. An implicit <i>Grid line</i> number is assigned as the starting line for 'grid-column' such that the <i>Grid item</i> does not overlap <i>Grid items</i> already placed in the Grid. If necessary, new column <i>Grid lines</i> are created to satisfy this constraint.</li> 25.1079 - <li>If 'grid-column' is not ''auto'', the <i>Grid item</i> is placed between the starting and ending lines specified by the 'grid-column' property. An implicit <i>Grid line</i> number is assigned as the starting line for 'grid-row' such that the <i>Grid item</i> does not overlap <i>Grid items</i> already placed in the Grid. If necessary, new row <i>Grid lines</i> are created to satisfy this constraint.</li> 25.1080 - </ol> 25.1081 - </li> 25.1082 - <li>Otherwise when both 'grid-column' and 'grid-row' are ''auto'', beginning with the implicit <i>Grid line</i> numbers of the previously placed <i>Grid item</i>, or (1, 1) if this is the first <i>Grid item</i> to be automatically placed: 25.1083 - <ol> 25.1084 - <li>Place the <i>Grid item</i> in the <i>Grid cell</i> currently defined by the 'grid-row' and 'grid-column' auto position if not already occupied by another <i>Grid item</i>.</li> 25.1085 - <li>Otherwise: 25.1086 - <ol> 25.1087 - <li>If grid-flow is ''rows'', increment the 'grid-column'. If the 'grid-column' value is outside of bounds of the grid (as defined at this point, explicitly or by previously placed items), set 'grid-column' to one and increment 'grid-row' (creating new row <i>Grid lines</i> as needed).</li> 25.1088 - <li>If grid-flow is ''columns'', increment 'grid-row'. If the 'grid-row' value is outside of bounds of the grid (as defined at this point, explicitly or by previously placed items), set 'grid-row' to one and increment 'grid-column' (creating new column <i>Grid lines</i> as needed).</li> 25.1089 - </ol> 25.1090 - </li> 25.1091 + <li>If the minor-axis position is not ''auto'', then: 25.1092 + <ol> 25.1093 + <li>Set the minor-axis position of the cursor to be equal to the minor-axis position of the <i>grid item</i>.</li> 25.1094 + <li>Increment the <i>auto-placement cursor</i> along the major-axis until a value is found where the <i>grid item</i> does not overlap the <i>grid area</i> of any other <i>grid item</i> (creating new major-axis tracks as necessary).</li> 25.1095 + </ol> 25.1096 + </li> 25.1097 + <li>If the minor and major-axis positions are both ''auto'', then: 25.1098 + <ol> 25.1099 + <li>Increment the minor-axis position of the <i>auto-placement cursor</i> until this item's <i>grid area</i> does not overlap another item's <i>grid area</i>, or causes the <i>grid area</i> to exceed the maximum number of minor-axis tracks previously determined in step 2.</li> 25.1100 + <li>If this item's position is still unresolved after the previous step, then increment the cursor's major-axis position and reset the minor-axis position to 1 (creating new major-axis tracks if necessary.</li> 25.1101 + </ol> 25.1102 + </li> 25.1103 </ol> 25.1104 </li> 25.1105 </ol> 25.1106 @@ -1437,173 +1465,11 @@ 25.1107 25.1108 <div id="grid-item-alignment" class="section"> 25.1109 <h2>Grid Item Alignment</h2> 25.1110 - <div class="sidefigure"> 25.1111 - <div class="figure"> 25.1112 - <p> 25.1113 - <img alt="Image: Latin-based language row and column orientation." src="images/horizontal-tb-dir-ltr.png" /> 25.1114 - </p> 25.1115 - <p class="caption">Latin-based language row and column orientation.</p> 25.1116 - </div> 25.1117 - <div class="figure"> 25.1118 - <p> 25.1119 - <img alt="Image: Arabic language row and column orientation." src="images/horizontal-tb-dir-rtl.png" /> 25.1120 - </p> 25.1121 - <p class="caption">Arabic language row and column orientation.</p> 25.1122 - </div> 25.1123 - <div class="figure"> 25.1124 - <p> 25.1125 - <img alt="Image: East Asian language row and column orientation." src="images/vertical-rl.png" /> 25.1126 - </p> 25.1127 - <p class="caption">East Asian language row and column orientation.</p> 25.1128 - </div> 25.1129 - </div> 25.1130 <p> 25.1131 - A <i>Grid item</i>’s alignment within its Cell can be controlled by using the 25.1132 - 'grid-column-align' and 'grid-row-align' properties. 25.1133 - Alignment refers to the logical edges of the <i>Grid item</i>’s Cell. 25.1134 + A <i>Grid item</i>’s alignment within its Area can be controlled by using the 25.1135 + 'justify-self' and 'align-self' properties. 25.1136 + Refer to the <a href="http://dev.w3.org/csswg/css3-align/">CSS Box Alignment Level 3</a> for more details about these properties. 25.1137 </p> 25.1138 - <p> 25.1139 - The ''start'' edge of a column is defined by the text flow direction. 25.1140 - The ''start'' edge of a row is defined by block flow direction. 25.1141 - The alignment values refer to the edge of the <i>Grid item</i>’s Cell against which the 25.1142 - <i>Grid item</i> will align one of its edges. 25.1143 - Which edge of the <i>Grid item</i> actually aligns against the specified edge of the Cell is dependent on 25.1144 - whether the <i>Grid item</i> shares the same inline text direction and block flow direction as the <i>Grid element</i>. 25.1145 - All descriptions below assume that the <i>Grid item</i> shares the same inline text direction and block flow direction 25.1146 - as the <i>Grid element</i>. 25.1147 - Refer to the <a href="http://dev.w3.org/csswg/css3-writing-modes/">CSS Writing Modes Module Level 3</a> for more details about the relationship between parent and child elements with differing writing-modes, 25.1148 - and for the definitions of inline direction and block flow direction. 25.1149 - </p> 25.1150 - <p> 25.1151 - Figures 12, 13, and 14 illustrate the placement and orientation of the <i>Grid element</i>’s rows, columns, and 25.1152 - <i>Grid items</i> using different writing modes on the <i>Grid element</i>. 25.1153 - In each of the figures, the markup shown in the following example is used to place <i>Grid item</i> A in column 1, row 1, and <i>Grid item</i> B in column 2, row 2. 25.1154 - <i>Grid item</i> A is aligned in each figure to the starting edges of its row and column. 25.1155 - <i>Grid item</i> B is aligned in each figure to the ending edges of its row and column. 25.1156 - </p> 25.1157 - <pre class="example"><style type="text/css"> 25.1158 - #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr } 25.1159 - #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start } 25.1160 - #B { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: end } 25.1161 -</style> 25.1162 - 25.1163 -<div id="grid"> 25.1164 - <div id="A">A</div> 25.1165 - <div id="B">B</div> 25.1166 -</div></pre> 25.1167 - <table id="grid-column-align-property" class="propdef"> 25.1168 - <tbody> 25.1169 - <tr> 25.1170 - <td>Name:</td> 25.1171 - <td><dfn id="grid-column-align">grid-column-align</dfn></td> 25.1172 - </tr> 25.1173 - <tr> 25.1174 - <td>Value:</td> 25.1175 - <td><dfn id="start-column-align">start</dfn> | <dfn id="end-column-align">end</dfn> | <dfn id="center-column-align">center</dfn> | <dfn id="stretch-column-align">stretch</dfn></td> 25.1176 - </tr> 25.1177 - <tr> 25.1178 - <td>Initial:</td> 25.1179 - <td>‘<a href="#stretch-column-align"><code 25.1180 - class=css>stretch</code></a>’</td> 25.1181 - </tr> 25.1182 - <tr> 25.1183 - <td>Applies to:</td> 25.1184 - <td>Grid Item elements</td> 25.1185 - </tr> 25.1186 - <tr> 25.1187 - <td>Inherited:</td> 25.1188 - <td>no</td> 25.1189 - </tr> 25.1190 - <tr> 25.1191 - <td>Percentages:</td> 25.1192 - <td>n/a</td> 25.1193 - </tr> 25.1194 - <tr> 25.1195 - <td>Media:</td> 25.1196 - <td>visual, paged</td> 25.1197 - </tr> 25.1198 - <tr> 25.1199 - <td>Computed value:</td> 25.1200 - <td>specified value</td> 25.1201 - </tr> 25.1202 - </tbody> 25.1203 - </table> 25.1204 - <ul> 25.1205 - <li>‘<a href="#start-column-align"><code 25.1206 - class=css>start</code></a>’ aligns the starting edge of the <i>Grid item</i>’s margin box to the starting edge of the <i>Grid item</i>’s column.</li> 25.1207 - <li>‘<a href="#end-column-align"><code 25.1208 - class=css>end</code></a>’ aligns the end edge of the <i>Grid item</i>’s margin box to the end edge of the <i>Grid item</i>’s column.</li> 25.1209 - <li>‘<a href="#center-column-align"><code 25.1210 - class=css>center</code></a>’ places the center of the <i>Grid item</i>’s margin box at the center of the the <i>Grid item</i>’s column.</li> 25.1211 - <li>‘<a href="#stretch-column-align"><code 25.1212 - class=css>stretch</code></a>’ ensures that the <i>Grid item</i>’s margin box is equal to the size of the <i>Grid item</i>’s column.</li> 25.1213 - </ul> 25.1214 - 25.1215 - <table id="grid-row-align-property" class="propdef"> 25.1216 - <tbody> 25.1217 - <tr> 25.1218 - <td>Name:</td> 25.1219 - <td><dfn id="grid-row-align">grid-row-align</dfn></td> 25.1220 - </tr> 25.1221 - <tr> 25.1222 - <td>Value:</td> 25.1223 - <td><dfn id="start-row-align">start</dfn> | <dfn id="end-row-align">end</dfn> | <dfn id="center-row-align">center</dfn> | <dfn id="stretch-row-align">stretch</dfn></td> 25.1224 - </tr> 25.1225 - <tr> 25.1226 - <td>Initial:</td> 25.1227 - <td>‘<a href="#stretch-row-align"><code 25.1228 - class=css>stretch</code></a>’</td> 25.1229 - </tr> 25.1230 - <tr> 25.1231 - <td>Applies to:</td> 25.1232 - <td>Grid Item elements</td> 25.1233 - </tr> 25.1234 - <tr> 25.1235 - <td>Inherited:</td> 25.1236 - <td>no</td> 25.1237 - </tr> 25.1238 - <tr> 25.1239 - <td>Percentages:</td> 25.1240 - <td>n/a</td> 25.1241 - </tr> 25.1242 - <tr> 25.1243 - <td>Media:</td> 25.1244 - <td>visual, paged</td> 25.1245 - </tr> 25.1246 - <tr> 25.1247 - <td>Computed value:</td> 25.1248 - <td>specified value</td> 25.1249 - </tr> 25.1250 - </tbody> 25.1251 - </table> 25.1252 - 25.1253 - <ul> 25.1254 - <li>‘<a href="#start-row-align"><code 25.1255 - class=css>start</code></a>’ aligns the starting edge of the <i>Grid item</i>’s margin box to the starting edge of the <i>Grid item</i>’s row.</li> 25.1256 - <li>‘<a href="#end-row-align"><code 25.1257 - class=css>end</code></a>’ aligns the end edge of the <i>Grid item</i>’s margin box to the end edge of the <i>Grid item</i>’s row.</li> 25.1258 - <li>‘<a href="#center-row-align"><code 25.1259 - class=css>center</code></a>’ places the center of the <i>Grid item</i>’s margin box at the center of the the <i>Grid item</i>’s row.</li> 25.1260 - <li>‘<a href="#stretch-row-align"><code 25.1261 - class=css>stretch</code></a>’ ensures that the <i>Grid item</i>’s margin box is equal to the size of the <i>Grid item</i>’s row.</li> 25.1262 - </ul> 25.1263 - 25.1264 - <div id="calculating-size-of-grid-item" class="section"> 25.1265 - <h3>Calculating the Size of Grid Items</h3> 25.1266 - <p> 25.1267 - The values ''start'', ''end'', and ''center'' all cause the <i>Grid item</i> 25.1268 - to produce a box sized shrink-to-fit for its cell in accordance with the <a href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a>. Note that percentage lengths specified on a <i>Grid item</i> resolve against the dimensions of the <i>Grid cell</i> (i.e. the <i>Grid cell</i> serves as the containing block for the <i>Grid item</i>). Percentages specified for margin-top, padding-top, margin-bottom, and padding-bottom resolve against the height of the grid cell, rather than the width of the grid cell. 25.1269 - If the 'min-content' size of the <i>Grid item</i>’s box is greater than the size of its Cell, 25.1270 - it will overflow the bounds of its Cell in a direction determined by its alignment. 25.1271 - </p> 25.1272 - <p> 25.1273 - A value of 'stretch' causes the <i>Grid item</i>’s width to shrink or grow in accordance with the equation for calculating containing block width 25.1274 - described in <a href="http://www.w3.org/TR/css3-box/#blockwidth">section 9.3 of the CSS3 Box Model</a>. Note that this calculation is symmetric for both the width and height 25.1275 - of the <i>Grid item</i>. 25.1276 - </p> 25.1277 - <!--End Section: Grid Item Alignment and Overflow--> 25.1278 - </div> 25.1279 - 25.1280 <!--End Section: Grid Item Alignment--> 25.1281 </div> 25.1282 25.1283 @@ -1619,8 +1485,8 @@ 25.1284 <i>Grid items</i> do not directly affect each other's placement in the <i>Grid element</i>. 25.1285 A <i>Grid item</i> may affect the position of a <i>Grid line</i> in a column or row that uses a contents-based relative size, 25.1286 which in turn affects the position or size of another <i>Grid item</i>, but there is no direct interaction between <i>Grid items</i>. 25.1287 - <i>Grid items</i> may overlap because the <i>Grid item</i>’s Cell is defined to intersect with the Cell of another <i>Grid item</i>. 25.1288 - <i>Grid item</i> boxes in non-intersecting Cells may also overlap because of negative margins. 25.1289 + <i>Grid items</i> may overlap because the <i>Grid item</i>’s Area is defined to intersect with the Area of another <i>Grid item</i>. 25.1290 + <i>Grid item</i> boxes in non-intersecting Areas may also overlap because of negative margins. 25.1291 </p> 25.1292 <p> 25.1293 In cases where boxes overlap, <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">'z-index'</a> provides control over the drawing order of <i>Grid items</i>. 25.1294 @@ -1630,14 +1496,14 @@ 25.1295 Figure 15 illustrates the drawing order of the markup shown in the following example. 25.1296 </p> 25.1297 <pre class="example"><style type="text/css"> 25.1298 - #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr } 25.1299 - #A { grid-column: 1; grid-row: 2; grid-column-span: 2; grid-row-align: end } 25.1300 + #grid { display: grid; grid-definition-columns: 1fr 1fr; grid-definition-rows: 1fr 1fr } 25.1301 + #A { grid-column: 1; grid-row: 2; grid-column-span: 2; align-self: foot } 25.1302 #B { grid-column: 1; grid-row: 1; z-index: 10 } 25.1303 - #C { grid-column: 2; grid-row: 1; grid-row-align: start; margin-left: -20px } 25.1304 - #D { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: start } 25.1305 + #C { grid-column: 2; grid-row: 1; align-self: head; margin-left: -20px } 25.1306 + #D { grid-column: 2; grid-row: 2; justify-self: end; align-self: head } 25.1307 #E { grid-column: 1; grid-row: 1; 25.1308 grid-column-span: 2; grid-row-span: 2; z-index: 5; 25.1309 - grid-column-align: center; grid-row-align: center 25.1310 + justify-self: center; align-self: center 25.1311 } 25.1312 </style> 25.1313 25.1314 @@ -1664,11 +1530,11 @@ 25.1315 <dt> 25.1316 <dfn id="MaxTrackSizingFunction-definition">MaxTrackSizingFunction</dfn> 25.1317 </dt> 25.1318 - <dd>One of the <a href="#grid-columns-and-rows-properties"><track-breadth></a> sizing functions assigned as the maximum breadth of a <i>Grid track</i>.</dd> 25.1319 + <dd>One of the <a href="#grid-definition-columns-and-rows-properties"><track-breadth></a> sizing functions assigned as the maximum breadth of a <i>Grid track</i>.</dd> 25.1320 <dt> 25.1321 <dfn id="MinTrackSizingFunction-definition">MinTrackSizingFunction</dfn> 25.1322 </dt> 25.1323 - <dd>One of the <a href="#grid-columns-and-rows-properties"><track-breadth></a> sizing functions assigned as the minimum breadth of a <i>Grid track</i>.</dd> 25.1324 + <dd>One of the <a href="#grid-definition-columns-and-rows-properties"><track-breadth></a> sizing functions assigned as the minimum breadth of a <i>Grid track</i>.</dd> 25.1325 <dt> 25.1326 <dfn id="RemainingSpace-definition">RemainingSpace</dfn> 25.1327 </dt> 25.1328 @@ -1766,7 +1632,7 @@ 25.1329 </li> 25.1330 <li>Grow all <i>Grid tracks</i> in GridTracks from their UsedBreadth up to their MaxBreadth value until RemainingSpace is exhausted. 25.1331 <ol> 25.1332 - <li>If RemainingSpace == defined 25.1333 + <li>If RemainingSpace is defined 25.1334 <ol> 25.1335 <li>Iterate over all GridTracks and assign UsedBreadth to UpdatedTrackBreadth</li> 25.1336 <li>Call DistributeSpaceToTracks, with arguments: 25.1337 @@ -1795,7 +1661,7 @@ 25.1338 <li>Grow all <i>Grid tracks</i> having a fraction as the MaxTrackSizingFunction 25.1339 <ol> 25.1340 <li>normalizedFractionBreadth = 0 25.1341 - <li>If RemainingSpace == defined 25.1342 + <li>If RemainingSpace is defined 25.1343 <ol> 25.1344 <li>normalizedFractionBreadth = Call ComputeNormalizedFractionBreadth, with arguments: 25.1345 <ul> 25.1346 @@ -1987,7 +1853,7 @@ 25.1347 <ol> 25.1348 <li>If Accumulator( t ) == infinity and t.UpdatedTrackBreadth != infinity 25.1349 <ol> 25.1350 - <li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = RecipientTracks</li> 25.1351 + <li>t.SpanGroupInWhichMaxBreadthWasMadeFinite = GridItems</li> 25.1352 </ol> 25.1353 </li> 25.1354 <li>Accumulator( t ) = t.UpdatedTrackBreadth</li> 25.1355 @@ -2122,9 +1988,9 @@ 25.1356 <li>t.NormalizedFractionValue = t.UsedBreadth / t.MaxTrackSizingFunction.FractionValue</li> 25.1357 </ol> 25.1358 </li> 25.1359 - <li>Sort fractionTracks by their NormalizedFractionValue</li> 25.1360 + <li>Sort fractionTracks by their NormalizedFractionValue ascending</li> 25.1361 <li>spaceNeededFromFractionTracks = SpaceToFill - allocatedSpace</li> 25.1362 - <li>currentBandFractionValue = accumulatedFractions = 0</li> 25.1363 + <li>currentBandFractionBreadth = accumulatedFractions = 0</li> 25.1364 <li>For each <i>Grid track</i> t in fractionTracks 25.1365 <ol> 25.1366 <li>If t.NormalizedFractionValue > currentBandFractionBreadth 25.1367 @@ -2151,29 +2017,50 @@ 25.1368 <!--End Section: Calculating the Size of Grid Tracks--> 25.1369 </div> 25.1370 25.1371 - <div id="shrink-to-fit-behavior-of-grid-elements" class="section"> 25.1372 - <h2>Shrink-to-fit Behavior of Grid Elements</h2> 25.1373 + <div id="defining-shrink-to-fit-behavior-of-grid-elements" class="section"> 25.1374 + <h2>Defining the Shrink-to-fit Behavior of Grid Elements</h2> 25.1375 25.1376 - <p>The <a href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a> defines the shrink-to-fit behavior of an element as min(max(preferred minimum width, available width), preferred width), with available width defined in the Box Model spec. Accordingly, for the <i>Grid element</i> we define the preferred minimum width as the sum of the UsedBreadths of the <i>Grid tracks</i> just before step 3 in ComputeUsedBreadthOfGridTracks, and the preferred width as the sum of the UsedBreadths of the <i>Grid tracks</i> after the entire track sizing algorithm has been run with infinite space.</p> 25.1377 - 25.1378 - <!--End Section: Shrink-to-fit Behavior of Grid Elements--> 25.1379 - </div> 25.1380 + <p>The <a href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a> defines the shrink-to-fit behavior of an element as min(max(preferred minimum width, available width), preferred width), with available width defined in the Box Model spec. Accordingly, for the <i>Grid element</i> we define the preferred minimum width as the sum of the UsedBreadths of the <i>Grid tracks</i> just before step 3 in ComputeUsedBreadthOfGridTracks, and the preferred width as the sum of the UsedBreadths of the <i>Grid tracks</i> after the entire track sizing algorithm has been run with infinite space.</p> 25.1381 + 25.1382 + <!--End Section: Defining the Shrink-to-fit Behavior of Grid Elements--> 25.1383 + </div> 25.1384 25.1385 <h2 id="changes-from-previous-version" class="no-num">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/">Previous Working Draft</a></h2> 25.1386 <div> 25.1387 <h3 id="changes-from-previous-version-12-april-2012" class="no-num">Changes made in 12 April 2012 Editor's Draft</h3> 25.1388 <ul> 25.1389 - <li>Section 4: Added the definition of the baseline of an inline grid.</li> 25.1390 - <li>Section 6.4: Changed repeat syntax from using square brackets to a repeat() function. Also removed discussion of whitespace, which is not needed under the new syntax.</li> 25.1391 - <li>Section 6.5: Updated grammar to remove quotes from keywords, and updated repeating syntax.</li> 25.1392 - <li>Section 6.5: Removed "fit-content" as a synonym for "auto" value in grid-row and grid-column properties</li> 25.1393 - <li>Section 6.6 (was 7.2): Moved this section into Section 6, which describes Defining the Grid.</li> 25.1394 - <li>Section 6.6: Specified that non-rectangular grid-template regions are not allowed and neither are strings of unequal lengths.</li> 25.1395 - <li>Section 6.6: Updated text describing grid-template and writing-mode sensitivity to make it clear that grid-template also refers to logical positions.</li> 25.1396 - <li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth in step 4, rather than all Grid Tracks.</li> 25.1397 + <li>Section 4: Added the definition of the baseline of an inline grid.</li> 25.1398 + <li>Section 6.4: Changed repeat syntax from using simple brackets to a repeat() function. Also removed discussion of whitespace, which is not needed under the new syntax.</li> 25.1399 + <li>Section 6.5: Updated grammar to remove quotes from keywords, and updated repeating syntax.</li> 25.1400 + <li>Section 6.5: Removed "fit-content" as a synonym for "auto" value in grid-row and grid-column properties</li> 25.1401 + <li>Section 6.6 (was 7.2): Moved this section into Section 6, which describes Defining the Grid.</li> 25.1402 + <li>Section 6.6: Specified that non-rectangular grid-template regions are not allowed, and that one column is created for each letter in a template string.</li> 25.1403 + <li>Section 6.6: Updated text describing grid-template and writing-mode sensitivity.</li> 25.1404 + <li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth in step 4, rather than all Grid Tracks.</li> 25.1405 <li>Section 10.2: Fixed minor spelling error "Contstriant"</li> 25.1406 - <li>Section 11: Added a definition of the preferred minimum width and the preferred width of the Grid element to clarify shrink-to-fit behavior.</li> 25.1407 + <li>Section 11: Added a definition of the preferred minimum width and the preferred width of the Grid element.</li> 25.1408 </ul> 25.1409 + 25.1410 + <h3 id="changes-from-previous-version-2-august-2012" class="no-num">Changes made in 2 August 2012 Editor's Draft</h3> 25.1411 + <ul> 25.1412 + <li>Section 2.2: Updated Example I, and other examples, to use the latest Box Alignment Level 3 syntax.</li> 25.1413 + <li>Section 3.3: Changed "Grid Cells to "Grid Areas" throughout the spec.</li> 25.1414 + <li>Section 5: Updated this section to be in alignment with the Flexible Box spec on anonymous items.</li> 25.1415 + <li>Section 6.3: Removed this from the spec.</li> 25.1416 + <li>Section 6.3: (was 6.4) Removed issue 1 about named lines in the repeat syntax; will track the issue via Bugzilla.</li> 25.1417 + <li>Section 6.4: (was 6.5) Renamed Grid-columns and Grid-rows to Grid-column-definition and Grid-row-definition throughout the spec.</li> 25.1418 + <li>Section 6.5: (was 6.6) Update the grid-template property to accept IDENTS for naming grid areas instead of characters.</li> 25.1419 + <li>Section 6.5: (was 6.6) Added support for periods to create an unamed region of the grid using the grid-template property.</li> 25.1420 + <li>Section 6.5: (was 6.6) Removed discussion of grid-cell property (now grid-area) to section 7.</li> 25.1421 + <li>Section 7: Updated usage and syntax of grid-row, grid-column, grid-row-span and grid-column-span properties to include the use of IDENTS.</li> 25.1422 + <li>Section 7.2: Updated usage and syntax of grid-area property (was grid-cell) as a shorthand property for other grid sizing and positioning properties.</li> 25.1423 + <li>Section 7.5: Updated description and algorithm for automatic placement of Grid Items.</li> 25.1424 + <li>Section 10.2: Corrected typo in CalculateNormalizedFractionBreadth - NormalizedFractionValue ==> NormalizedFractionBreadth.</li> 25.1425 + <li>Section 10.2: Changed CalculateNormalizedFractionBreadth to sort by NormalizedFractionValue ascending.</li> 25.1426 + <li>Section 10.2: Changed syntax from "== defined" to "is defined".</li> 25.1427 + <li>Section 10.2: Fixed ResolveContentBasedTrackSizingFunctionsForItems to use GridItems instead of RecipientTracks.</li> 25.1428 + </ul> 25.1429 + 25.1430 </div> 25.1431 25.1432 <h2 class="no-num">Acknowledgements</h2>
26.1 --- a/css3-layout/Overview.html Tue Jul 31 14:04:38 2012 -0700 26.2 +++ b/css3-layout/Overview.html Wed Aug 08 09:06:37 2012 -0700 26.3 @@ -54,13 +54,13 @@ 26.4 <h1>CSS Grid Template Layout Module</h1> 26.5 <!--=================================================================--> 26.6 <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft 26.7 - 23 May 2012</h2> 26.8 + 7 August 2012</h2> 26.9 26.10 <dl> 26.11 <dt>This version: 26.12 26.13 <dd><a 26.14 - href="http://www.w3.org/TR/2012/ED-css3-layout-20120523/">http://www.w3.org/TR/2012/ED-css3-layout-20120523/</a> 26.15 + href="http://www.w3.org/TR/2012/ED-css3-layout-20120807/">http://www.w3.org/TR/2012/ED-css3-layout-20120807/</a> 26.16 26.17 26.18 <dt>Latest version: 26.19 @@ -2587,11 +2587,12 @@ 26.20 class=property>height</code></a>’ work on an element that is flowed into 26.21 a slot? If the grid template assigns a fixed height to the slot, it is 26.22 obvious what a percentage means, but if the slot's height is ‘<code 26.23 - class=css>max-content' and an element in the slot has 'height: 110%', 26.24 - there is a conflict… </code> 26.25 + class=css>max-content</code>’ and an element in the slot has ‘<code 26.26 + class=css>height: 110%</code>’, there is a conflict… 26.27 26.28 <div class=issue> 26.29 - <p>Allowing multiple values on 'flow' could be an easy way to duplicate 26.30 + <p>Allowing multiple values on ‘<a href="#flow0"><code 26.31 + class=property>flow</code></a>’ could be an easy way to duplicate 26.32 elements. E.g., this style 26.33 26.34 <pre> 26.35 @@ -2614,22 +2615,30 @@ 26.36 26.37 <p>would repeat the H1 at the top of all three columns. With <a 26.38 href="#region-based">region-based styling,</a> the three instances could 26.39 - even be styled differently, e.g., with generated content: 26.40 - 'H1::flow(b)::before {content: "cont'd "}' 26.41 + even be styled differently, e.g., with generated content: ‘<code 26.42 + class=css>H1::flow(b)::before {content: "cont'd "}</code>’ 26.43 </div> 26.44 <!--=================================================================--> 26.45 26.46 <div class=grid> 26.47 <h3 class=grid id=absolute-positioning-using-a-grid-grid-p><span 26.48 - class=secno>3.2. </span>Absolute positioning using a grid: 26.49 - 'grid-position-x' and 'grid-position-y'</h3> 26.50 - 26.51 - <p class=issue>Trying to combine 'grid-row/column' and 26.52 - 'grid-row/column-span', because they should not cascade independently. 26.53 - (If one style rule tries to place by start/end lines, and another tries 26.54 - to place by span, the result of the cascade will be a mess.) 26.55 - 26.56 - <p>The 'grid-position-x' and 'grid-position-y' properties can absolutely 26.57 + class=secno>3.2. </span>Absolute positioning using a grid: ‘<a 26.58 + href="#grid-position-x"><code 26.59 + class=property>grid-position-x</code></a>’ and ‘<a 26.60 + href="#grid-position-y"><code 26.61 + class=property>grid-position-y</code></a>’</h3> 26.62 + 26.63 + <p class=issue>Trying to combine ‘<code 26.64 + class=css>grid-row/column</code>’ and ‘<code 26.65 + class=css>grid-row/column-span</code>’, because they should not cascade 26.66 + independently. (If one style rule tries to place by start/end lines, and 26.67 + another tries to place by span, the result of the cascade will be a 26.68 + mess.) 26.69 + 26.70 + <p>The ‘<a href="#grid-position-x"><code 26.71 + class=property>grid-position-x</code></a>’ and ‘<a 26.72 + href="#grid-position-y"><code 26.73 + class=property>grid-position-y</code></a>’ properties can absolutely 26.74 position an element relative to a grid. 26.75 26.76 <table class=propdef> 26.77 @@ -2655,7 +2664,7 @@ 26.78 <tr> 26.79 <th>Applies to: 26.80 26.81 - <td>elements with 'position: absolute' 26.82 + <td>elements with ‘<code class=css>position: absolute</code>’ 26.83 26.84 <tr> 26.85 <th>Inherited: 26.86 @@ -2696,10 +2705,10 @@ 26.87 <var><span></var> = <var><integer></var> 26.88 </pre> 26.89 26.90 - <p>If the value is ’auto'‘<code class=css>, the element is positioned 26.91 - with </code>’top' and ‘<a href="#bottom"><code 26.92 - class=property>bottom</code></a>’ (for ‘<a 26.93 - href="#grid-position-y"><code 26.94 + <p>If the value is ‘<code class=css>auto</code>’, the element is 26.95 + positioned with ‘<a href="#top"><code class=property>top</code></a>’ 26.96 + and ‘<a href="#bottom"><code class=property>bottom</code></a>’ (for 26.97 + ‘<a href="#grid-position-y"><code 26.98 class=property>grid-position-y</code></a>’) or ‘<a href="#left"><code 26.99 class=property>left</code></a>’ and ‘<a href="#right"><code 26.100 class=property>right</code></a>’ (for ‘<a 26.101 @@ -3165,6 +3174,13 @@ 26.102 of the contents of slots</h3> 26.103 26.104 <div class=issue> 26.105 + <p>Remove this section and refer to Elika's css3-align: ‘<code 26.106 + class=property>justify-content</code>’ and ‘<code 26.107 + class=property>align-content</code>’ 26.108 + <!-- Make drafts of template and grid for Aug 2012 ftf --> 26.109 + </div> 26.110 + 26.111 + <div class=issue> 26.112 <p>Add the effect of ‘<code class=css>margin-{top,bottom}: 26.113 auto</code>’, generalized from flexbox? (By reference to css3-box?) 26.114 26.115 @@ -3849,6 +3865,11 @@ 26.116 <td>no 26.117 26.118 <tr> 26.119 + <td>Animatable: 26.120 + 26.121 + <td>no 26.122 + 26.123 + <tr> 26.124 <td>Percentages: 26.125 26.126 <td>N/A 26.127 @@ -3862,6 +3883,12 @@ 26.128 <td>Computed value: 26.129 26.130 <td>specified value 26.131 + 26.132 + <tr> 26.133 + <td>Canonical order: 26.134 + 26.135 + <td><abbr title="follows order of property value definition">per 26.136 + grammar</abbr> 26.137 </table> 26.138 26.139 <p>A value of ‘<code class=css>none</code>’ means the element's 26.140 @@ -5312,10 +5339,9 @@ 26.141 <dt id=MEDIAQ>[MEDIAQ] 26.142 26.143 <dd>Florian Rivoal. <a 26.144 - href="http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/"><cite>Media 26.145 - Queries.</cite></a> 26 April 2012. W3C Proposed Recommendation. (Work in 26.146 - progress.) URL: <a 26.147 - href="http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/">http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/</a> 26.148 + href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media 26.149 + Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a 26.150 + href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a> 26.151 </dd> 26.152 <!----> 26.153 26.154 @@ -5592,25 +5618,9 @@ 26.155 26.156 <td>no 26.157 26.158 - <td>no 26.159 - 26.160 <td>N/A 26.161 26.162 - <tr> 26.163 - <th><a class=property href="#grid0">grid</a> 26.164 - 26.165 - <td>none | [ [ <string> [ / <row-height> ]? ]+ ] 26.166 - <col-width>* 26.167 - 26.168 - <td>none 26.169 - 26.170 - <td>block container elements 26.171 - 26.172 - <td>no 26.173 - 26.174 - <td>see individual properties 26.175 - 26.176 - <td>see individual properties 26.177 + <td>visual 26.178 26.179 <tr> 26.180 <th><a class=property href="#grid-columns0">grid-columns</a> 26.181 @@ -5623,10 +5633,10 @@ 26.182 26.183 <td>no 26.184 26.185 - <td>yes, between grids with the same number of tracks 26.186 - 26.187 <td>N/A 26.188 26.189 + <td>visual 26.190 + 26.191 <tr> 26.192 <th><a class=property href="#grid-position0">grid-position</a> 26.193 26.194 @@ -5638,10 +5648,10 @@ 26.195 26.196 <td>no 26.197 26.198 - <td>no 26.199 - 26.200 <td>N/A 26.201 26.202 + <td>visual 26.203 + 26.204 <tr> 26.205 <th><a class=property href="#grid-position-x">grid-position-x</a>, <a 26.206 class=property href="#grid-position-y">grid-position-y</a> 26.207 @@ -5651,14 +5661,14 @@ 26.208 26.209 <td>auto 26.210 26.211 - <td>elements with 'position: absolute' 26.212 + <td>elements with ‘position: absolute’ 26.213 26.214 <td>no 26.215 26.216 - <td>no 26.217 - 26.218 <td>N/A 26.219 26.220 + <td>visual 26.221 + 26.222 <tr> 26.223 <th><a class=property href="#grid-rows0">grid-rows</a> 26.224 26.225 @@ -5670,10 +5680,26 @@ 26.226 26.227 <td>no 26.228 26.229 - <td>yes, between grids with the same number of tracks 26.230 - 26.231 <td>N/A 26.232 26.233 + <td>visual 26.234 + 26.235 + <tr> 26.236 + <th><a class=property href="#grid0">grid</a> 26.237 + 26.238 + <td>none | [ [ <string> [ / <row-height> ]? ]+ ] 26.239 + <col-width>* 26.240 + 26.241 + <td>none 26.242 + 26.243 + <td>block container elements 26.244 + 26.245 + <td>no 26.246 + 26.247 + <td>see individual properties 26.248 + 26.249 + <td>visual 26.250 + 26.251 <tr> 26.252 <th><a class=property href="#grid-template1">grid-template</a> 26.253 26.254 @@ -5685,9 +5711,9 @@ 26.255 26.256 <td>no 26.257 26.258 - <td>no 26.259 - 26.260 <td>N/A 26.261 + 26.262 + <td>visual 26.263 </table> 26.264 <!--end-properties--> 26.265 </html>
27.1 --- a/css3-layout/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 27.2 +++ b/css3-layout/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 27.3 @@ -1969,7 +1969,7 @@ 27.4 <p class=issue>Does a percentage 'height' work on an element that is 27.5 flowed into a slot? If the grid template assigns a fixed height to the 27.6 slot, it is obvious what a percentage means, but if the slot's height 27.7 -is ''max-content' and an element in the slot has 'height: 110%', there 27.8 +is ''max-content'' and an element in the slot has 'height: 110%', there 27.9 is a conflict… 27.10 27.11 <div class=issue> 27.12 @@ -1997,7 +1997,7 @@ 27.13 <p>would repeat the H1 at the top of all three 27.14 columns. With <a href="#region-based" >region-based styling,</a> the 27.15 three instances could even be styled differently, e.g., with generated 27.16 -content: 'H1::flow(b)::before {content: "cont'd "}' 27.17 +content: ''H1::flow(b)::before {content: "cont'd "}'' 27.18 </div> 27.19 27.20 <!--=================================================================--> 27.21 @@ -3004,9 +3004,12 @@ 27.22 <tr><td>Applies to: <td><span title="template element">template 27.23 elements</span> 27.24 <tr><td>Inherited: <td>no 27.25 +<tr><td>Animatable: <td>no 27.26 <tr><td>Percentages: <td>N/A 27.27 <tr><td>Media: <td>visual 27.28 <tr><td>Computed value: <td>specified value 27.29 +<tr><td>Canonical order: <td><abbr title="follows order of property 27.30 +value definition">per grammar</abbr> 27.31 </table> 27.32 27.33 <p>A value of ''none'' means the element's template has no chains.
28.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 28.2 +++ b/css3-sizing/Overview.html Wed Aug 08 09:06:37 2012 -0700 28.3 @@ -0,0 +1,1327 @@ 28.4 +<!DOCTYPE html> 28.5 + 28.6 +<html lang=en> 28.7 + <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type> 28.8 + 28.9 + <title>CSS Intrinsic & Extrinsic Sizing Module Level 3 (CSS3 TMPL)</title> 28.10 + <link href="#contents" rel=contents> 28.11 + <link href="#index" rel=index> 28.12 + <link href="../default.css" rel=stylesheet type="text/css"> 28.13 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 28.14 + type="text/css"> 28.15 + 28.16 + <style type="text/css"> 28.17 + /* delete this block when you've cleared out all the .replaceme elements */ 28.18 + .replaceme { 28.19 + border: solid red; 28.20 + padding: 0 0.5em; 28.21 + margin: 0 0.1em; 28.22 + background: yellow; 28.23 + color: green; 28.24 + } 28.25 + .replaceme:before { 28.26 + content: "FIXME("; 28.27 + color: black; 28.28 + } 28.29 + .replaceme:after { 28.30 + content: ")"; 28.31 + color: black; 28.32 + } 28.33 + </style> 28.34 + 28.35 + <body> 28.36 + <div class=head> <!--begin-logo--> 28.37 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 28.38 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 28.39 + 28.40 + <h1>CSS Intrinsic & Extrinsic Sizing Module Level 3</h1> 28.41 + 28.42 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 August 2012</h2> 28.43 + 28.44 + <dl><!-- 28.45 + <dt>This version: 28.46 + <dd><a href="http://www.w3.org/TR/2012/ED-css3-sizing-20120801/" class="replaceme">http://www.w3.org/TR/2012/ED-css3-sizing-20120801/</a> 28.47 +--> 28.48 + 28.49 + <dt>Latest version: 28.50 + 28.51 + <dd><a 28.52 + href="http://dev.w3.org/csswg/css3-sizing/">http://dev.w3.org/csswg/css3-sizing/</a> 28.53 + 28.54 + 28.55 + <dt>Editor's draft: 28.56 + 28.57 + <dd><a 28.58 + href="http://dev.w3.org/csswg/css3-sizing/">http://dev.w3.org/csswg/css3-sizing/</a> 28.59 + 28.60 + 28.61 + <dt>Issue Tracking: 28.62 + 28.63 + <dd><a 28.64 + href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Sizing&resolution=---">W3C 28.65 + Bugzilla</a> 28.66 + 28.67 + <dt>Feedback: 28.68 + 28.69 + <dd><a 28.70 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 28.71 + with subject line “<kbd>[css3-sizing] <var>… message topic 28.72 + …</var></kbd>” 28.73 + 28.74 + <dt>Editors: 28.75 + 28.76 + <dd class=hcard><a class="fn url" 28.77 + href="http://www.xanthir.com/contact">Tab Atkins Jr.</a>, <span 28.78 + class=org>Google Inc.</span> 28.79 + 28.80 + <dd class=hcard><a class="fn url" 28.81 + href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>, <span 28.82 + class=org>Mozilla</span> 28.83 + </dl> 28.84 + <!--begin-copyright--> 28.85 + <p class=copyright><a 28.86 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 28.87 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 28.88 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 28.89 + href="http://www.csail.mit.edu/"><abbr 28.90 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 28.91 + href="http://www.ercim.eu/"><abbr 28.92 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 28.93 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 28.94 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 28.95 + <a 28.96 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 28.97 + and <a 28.98 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 28.99 + use</a> rules apply.</p> 28.100 + <!--end-copyright--> 28.101 + <hr title="Separator for header"> 28.102 + </div> 28.103 + 28.104 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 28.105 + 28.106 + <p>This module contains the features of CSS relating to <var 28.107 + class=replaceme>DESCRIBE HERE</var>. <a 28.108 + href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 28.109 + rendering of structured documents (such as HTML and XML) on screen, on 28.110 + paper, in speech, etc. 28.111 + 28.112 + <h2 class="no-num no-toc" id=status>Status of this document</h2> 28.113 + <!--begin-status--> 28.114 + 28.115 + <p>This is a public copy of the editors' draft. It is provided for 28.116 + discussion only and may change at any moment. Its publication here does 28.117 + not imply endorsement of its contents by W3C. Don't cite this document 28.118 + other than as work in progress. 28.119 + 28.120 + <p>The (<a 28.121 + href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 28.122 + mailing list <a 28.123 + href="mailto:www-style@w3.org?Subject=%5Bcss3-sizing%5D%20PUT%20SUBJECT%20HERE"> 28.124 + www-style@w3.org</a> (see <a 28.125 + href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 28.126 + discussion of this specification. When sending e-mail, please put the text 28.127 + “css3-sizing” in the subject, preferably like this: 28.128 + “[<!---->css3-sizing<!---->] <em>…summary of comment…</em>” 28.129 + 28.130 + <p>This document was produced by the <a href="/Style/CSS/members">CSS 28.131 + Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 28.132 + 28.133 + <p>This document was produced by a group operating under the <a 28.134 + href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent 28.135 + Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" 28.136 + rel=disclosure>public list of any patent disclosures</a> made in 28.137 + connection with the deliverables of the group; that page also includes 28.138 + instructions for disclosing a patent. An individual who has actual 28.139 + knowledge of a patent which the individual believes contains <a 28.140 + href="/Consortium/Patent-Policy-20040205/#def-essential">Essential 28.141 + Claim(s)</a> must disclose the information in accordance with <a 28.142 + href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 28.143 + W3C Patent Policy</a>.</p> 28.144 + <!--end-status--> 28.145 + 28.146 + <p>The following features are at risk: … 28.147 + 28.148 + <h2 class="no-num no-toc" id=contents> Table of contents</h2> 28.149 + <!--begin-toc--> 28.150 + 28.151 + <ul class=toc> 28.152 + <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 28.153 + <ul class=toc> 28.154 + <li><a href="#placement"><span class=secno>1.1. </span> Module 28.155 + interactions</a> 28.156 + 28.157 + <li><a href="#values"><span class=secno>1.2. </span> Values</a> 28.158 + </ul> 28.159 + 28.160 + <li><a href="#terms"><span class=secno>2. </span> Terminology</a> 28.161 + 28.162 + <li><a href="#size-keywords"><span class=secno>3. </span> New Sizing 28.163 + Keywords</a> 28.164 + <ul class=toc> 28.165 + <li><a href="#width-height-keywords"><span class=secno>3.1. </span> New 28.166 + Keywords for ‘<code class=property>width</code>’ and ‘<code 28.167 + class=property>height</code>’</a> 28.168 + 28.169 + <li><a href="#the-contain-floats-value"><span class=secno>3.2. </span> 28.170 + Containing Floats</a> 28.171 + 28.172 + <li><a href="#column-sizing"><span class=secno>3.3. </span> Column 28.173 + Sizing Keywords</a> 28.174 + </ul> 28.175 + 28.176 + <li><a href="#intrinsic-sizing"><span class=secno>4. </span> Intrinsic 28.177 + Sizing Determination</a> 28.178 + <ul class=toc> 28.179 + <li><a href="#replaced-intrinsic"><span class=secno>4.1. </span> 28.180 + Intrinsic Sizes of Replaced Elements</a> 28.181 + 28.182 + <li><a href="#inline-intrinsic"><span class=secno>4.2. </span> Intrinsic 28.183 + Sizes of Non-Replaced Inlines</a> 28.184 + 28.185 + <li><a href="#block-intrinsic"><span class=secno>4.3. </span> Intrinsic 28.186 + Sizes of Non-Replaced Blocks</a> 28.187 + 28.188 + <li><a href="#table-intrinsic"><span class=secno>4.4. </span> Intrinsic 28.189 + Sizes in Table Layout</a> 28.190 + 28.191 + <li><a href="#multicol-intrinsic"><span class=secno>4.5. </span> 28.192 + Intrinsic Sizes in Multi-column Layout</a> 28.193 + </ul> 28.194 + 28.195 + <li><a href="#extrinsic-sizing"><span class=secno>5. </span> Extrinsic 28.196 + Sizing</a> 28.197 + 28.198 + <li><a href="#conformance"><span class=secno>6. </span> Conformance</a> 28.199 + <ul class=toc> 28.200 + <li><a href="#conventions"><span class=secno>6.1. </span> Document 28.201 + conventions</a> 28.202 + 28.203 + <li><a href="#conformance-classes"><span class=secno>6.2. </span> 28.204 + Conformance classes</a> 28.205 + 28.206 + <li><a href="#partial"><span class=secno>6.3. </span> Partial 28.207 + implementations</a> 28.208 + 28.209 + <li><a href="#experimental"><span class=secno>6.4. </span> Experimental 28.210 + implementations</a> 28.211 + 28.212 + <li><a href="#testing"><span class=secno>6.5. </span> Non-experimental 28.213 + implementations</a> 28.214 + 28.215 + <li><a href="#cr-exit-criteria"><span class=secno>6.6. </span> CR exit 28.216 + criteria</a> 28.217 + </ul> 28.218 + 28.219 + <li class=no-num><a href="#acknowledgments"> Acknowledgments</a> 28.220 + 28.221 + <li class=no-num><a href="#references"> References</a> 28.222 + <ul class=toc> 28.223 + <li class=no-num><a href="#normative-references"> Normative 28.224 + references</a> 28.225 + 28.226 + <li class=no-num><a href="#other-references"> Other references</a> 28.227 + </ul> 28.228 + 28.229 + <li class=no-num><a href="#index"> Index</a> 28.230 + 28.231 + <li class=no-num><a href="#property-index"> Property index</a> 28.232 + </ul> 28.233 + <!--end-toc--> 28.234 + 28.235 + <h2 id=intro><span class=secno>1. </span> Introduction</h2> 28.236 + 28.237 + <p><em>This section is not normative.</em> 28.238 + 28.239 + <p> CSS layout has several different concepts of automatic sizing that are 28.240 + used in various layout calculations. This section defines some more 28.241 + precise terminology to help connect the layout behaviors of this spec to 28.242 + the calculations used in other modules, and some new keywords for the 28.243 + ‘<code class=property>width</code>’ and ‘<code 28.244 + class=property>height</code>’ properties to allow authors to assign 28.245 + elements the dimensions resulting from these size calculations. 28.246 + 28.247 + <h3 id=placement><span class=secno>1.1. </span> Module interactions</h3> 28.248 + 28.249 + <p class=replaceme>Explain, normatively, how this module affects the 28.250 + definition of CSS. 28.251 + 28.252 + <p>This module replaces and extends the <var class=replaceme>SUMMARIZE 28.253 + HERE</var> features defined in <a href="#CSS21" 28.254 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <var 28.255 + class=replaceme>W.X and Y.Z</var>. 28.256 + 28.257 + <p class=replaceme>All properties in this module apply to the 28.258 + <code>::first-line</code> and <code>::first-letter</code> pseudo-elements. 28.259 + <!-- HANDLE, THEN REMOVE THIS COMMENT 28.260 + Properties that affect box layout should be excluded from ::first-line. 28.261 + Properties that take things out-of-flow or alter box construction should 28.262 + be excluded from both ::first-line and ::first-letter. (A special exception 28.263 + is made for float on ::first-letter, which is defined to emulate drop-caps.) 28.264 + Examples of ::first-line / ::first-letter statements: 28.265 + http://dev.w3.org/csswg/css3-background/#placement 28.266 + (All properties apply to ::first-letter; some apply to ::first-line) 28.267 + --> 28.268 + 28.269 + 28.270 + <h3 id=values><span class=secno>1.2. </span> Values</h3> 28.271 + 28.272 + <p>This specification follows the <a 28.273 + href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 28.274 + definition conventions</a> from <a href="#CSS21" 28.275 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 28.276 + this specification are defined in CSS Level 2 Revision 1 <a 28.277 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 28.278 + modules may expand the definitions of these value types: for example <a 28.279 + href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 28.280 + when combined with this module, expands the definition of the 28.281 + <color> value type as used in this specification. 28.282 + 28.283 + <p>In addition to the property-specific values listed in their definitions, 28.284 + all properties defined in this specification also accept the <a 28.285 + href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 28.286 + keyword as their property value. For readability it has not been repeated 28.287 + explicitly. 28.288 + 28.289 + <h2 id=terms><span class=secno>2. </span> Terminology</h2> 28.290 + 28.291 + <dl> 28.292 + <dt><dfn id=size>size</dfn> 28.293 + 28.294 + <dd> A one- or two-dimensional measurement: a <a 28.295 + href="http://www.w3.org/TR/css3-writing-modes/#measure"><i>measure</i></a> 28.296 + and/or <a 28.297 + href="http://www.w3.org/TR/css3-writing-modes/#extent"><i>extent</i></a>; 28.298 + alternatively a width and/or height. 28.299 + 28.300 + <dt><dfn id=definite-size title="definite|definite size">definite 28.301 + size</dfn> 28.302 + 28.303 + <dd> A size that can be determined without measuring content; that is, a 28.304 + <var><length></var>, a size of the <i>initial containing block</i>, or 28.305 + a <var><percentage></var> that is resolved against a <a 28.306 + href="#definite-size"><i>definite</i></a> size. 28.307 + 28.308 + <dt><dfn id=indefinite-size title="indefinite|indefinite size">indefinite 28.309 + size</dfn> 28.310 + 28.311 + <dd> A size that is not <a href="#definite-size"><i>definite</i></a>. An 28.312 + <a href="#indefinite-size"><i>indefinite</i></a> <a 28.313 + href="#available-size"><i>available size</i></a> is essentially infinite. 28.314 + 28.315 + 28.316 + <dt><dfn id=available-size 28.317 + title="available|available size|available measure|available extent">available 28.318 + size</dfn> 28.319 + 28.320 + <dd> The space into which a box is laid out, typically either a 28.321 + measurement of its <i>containing block</i> or an infinite size. 28.322 + 28.323 + <dt><dfn id=fallback-size title="fallback|fallback size">fallback 28.324 + size</dfn> 28.325 + 28.326 + <dd> Some sizing algorithms do not work well with an infinite size. In 28.327 + these cases, the fallback size is used instead. Unless otherwise 28.328 + specified, this is the size of the initial containing block. 28.329 + 28.330 + <dt><dfn id=fill-available-measure>fill-available measure</dfn> 28.331 + 28.332 + <dd> Roughly, the measure a box would take if it filled its <a 28.333 + href="#available-size"><i>available measure</i></a>. The exact definition 28.334 + is given in XXX. 28.335 + <p class=note> Note: This is called the <i>available width</i> in <a 28.336 + href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 28.337 + and computed by the rules in <a 28.338 + href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>. 28.339 + 28.340 + 28.341 + <dt><dfn id=max-content-measure>max-content measure</dfn> 28.342 + 28.343 + <dd> Roughly, the narrowest measure a box could take while fitting around 28.344 + its contents if <em>none</em> of the optional soft wrap opportunities 28.345 + within the box were taken. The exact definition is given in XXX. 28.346 + <p class=note> Note: This is called the <i>preferred width</i> in <a 28.347 + href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 28.348 + and the <i>maximum cell width</i> in <a 28.349 + href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 28.350 + 28.351 + 28.352 + <dt><dfn id=min-content-measure>min-content measure</dfn> 28.353 + 28.354 + <dd> Roughly, the narrowest measure a box could take while fitting around 28.355 + its contents if <em>all</em> soft wrap opportunities within the box were 28.356 + taken. The exact definition is given in XXX. 28.357 + <p class=note> Note: This is called the <i>preferred minimum width</i> in 28.358 + <a 28.359 + href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 28.360 + and the <i>minimum content width</i> in <a 28.361 + href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 28.362 + 28.363 + 28.364 + <dt><dfn id=fit-content-measure>fit-content measure</dfn> 28.365 + 28.366 + <dd> If the <a href="#available-size"><i>available</i></a> measure is 28.367 + finite, equal to <code>min(<a href="#max-content"><i>max-content</i></a>, 28.368 + max(<a href="#min-content"><i>min-content</i></a>, <a 28.369 + href="#fill-available"><i>fill-available</i></a>))</code>. Otherwise, 28.370 + equal to the <a href="#max-content-measure"><i>max-content 28.371 + measure</i></a>. 28.372 + <p class=note> Note: This is called the <i>shrink-to-fit</i> width in <a 28.373 + href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 28.374 + and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS 28.375 + Multi-column Layout § 3.4</a>. 28.376 + 28.377 + <dt><dfn id=fill-available-extent>fill-available extent</dfn> 28.378 + 28.379 + <dd> Roughly, the extent a box would take if it filled its <a 28.380 + href="#available-size"><i>available extent</i></a>. The exact definition 28.381 + is given in XXX. 28.382 + 28.383 + <dt><dfn id=max-content-extent>max-content extent</dfn> 28.384 + 28.385 + <dd> Roughly, the extent of the content after layout. 28.386 + 28.387 + <dt><dfn id=min-content-extent>min-content extent</dfn> 28.388 + 28.389 + <dd> Equivalent to the <a href="#max-content-extent"><i>max-content 28.390 + extent</i></a>. <span class=issue>Or should this be the minimum between 28.391 + allowed break points? It might make sense in multi-col contexts to have 28.392 + min-content and max-content extents be different, even if they are the 28.393 + same elsewhere.</span> 28.394 + 28.395 + <dt><dfn id=fit-content-extent>fit-content extent</dfn> 28.396 + 28.397 + <dd> Analogous to the <a href="#fit-content-measure"><i>fit-content 28.398 + measure</i></a>. 28.399 + 28.400 + <dt><dfn id=max-size-contribution>max-size contribution</dfn> 28.401 + 28.402 + <dd> The size that a box contributes to its containing block's 28.403 + <i>max-content size</i>. 28.404 + 28.405 + <dt><dfn id=min-size-contribution>min-size contribution</dfn> 28.406 + 28.407 + <dd> The size that a box contributes to its containing block's 28.408 + <i>min-content size</i>. 28.409 + 28.410 + <dt><dfn id=max-size-constraint>max-size constraint</dfn> 28.411 + 28.412 + <dd> A sizing constraint imposed by the box's containing block that causes 28.413 + it to produce its <a href="#max-size-contribution"><i>max-size 28.414 + contribution</i></a>. 28.415 + 28.416 + <dt><dfn id=min-size-constraint>min-size constraint</dfn> 28.417 + 28.418 + <dd> A sizing constraint imposed by the box's containing block that causes 28.419 + it to produce its <a href="#min-size-contribution"><i>min-size 28.420 + contribution</i></a>. 28.421 + </dl> 28.422 + 28.423 + <h2 id=size-keywords><span class=secno>3. </span> New Sizing Keywords</h2> 28.424 + 28.425 + <h3 id=width-height-keywords><span class=secno>3.1. </span> New Keywords 28.426 + for ‘<code class=property>width</code>’ and ‘<code 28.427 + class=property>height</code>’</h3> 28.428 + 28.429 + <table class=propdef> 28.430 + <tbody> 28.431 + <tr> 28.432 + <th>Properties: 28.433 + 28.434 + <td>‘<code class=property>width</code>’, ‘<code 28.435 + class=property>min-width</code>’, ‘<code 28.436 + class=property>max-width</code>’, ‘<code 28.437 + class=property>height</code>’, ‘<code 28.438 + class=property>min-height</code>’, ‘<code 28.439 + class=property>max-height</code>’ 28.440 + 28.441 + <tr> 28.442 + <th>New Values: 28.443 + 28.444 + <td>‘<a href="#fill-available"><code 28.445 + class=css>fill-available</code></a>’ | ‘<a 28.446 + href="#max-content"><code class=css>max-content</code></a>’ | ‘<a 28.447 + href="#min-content"><code class=css>min-content</code></a>’ | ‘<a 28.448 + href="#fit-content"><code class=css>fit-content</code></a>’ 28.449 + 28.450 + <tr> 28.451 + <th>Initial: 28.452 + 28.453 + <td>as defined in <a href="#CSS21" 28.454 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 28.455 + href="#CSS3-FLEXBOX" 28.456 + rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a> 28.457 + 28.458 + <tr> 28.459 + <th>Applies to: 28.460 + 28.461 + <td>as defined in <a href="#CSS21" 28.462 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.463 + 28.464 + <tr> 28.465 + <th>Inherited: 28.466 + 28.467 + <td>as defined in <a href="#CSS21" 28.468 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.469 + 28.470 + <tr> 28.471 + <th>Percentages: 28.472 + 28.473 + <td>as defined in <a href="#CSS21" 28.474 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.475 + 28.476 + <tr> 28.477 + <th>Media: 28.478 + 28.479 + <td>as defined in <a href="#CSS21" 28.480 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.481 + 28.482 + <tr> 28.483 + <th>Computed value: 28.484 + 28.485 + <td>specified value if keyword specified, else as defined in <a 28.486 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.487 + </table> 28.488 + 28.489 + <p>There are four types of automatically-determined sizes in CSS (which are 28.490 + represented in the width and height properties by the keywords defined 28.491 + above): 28.492 + 28.493 + <dl> 28.494 + <dt><dfn id=fill-available>‘<code 28.495 + class=css>fill-available</code>’</dfn> 28.496 + 28.497 + <dd> Use the <a href="#fill-available-measure"><i>fill-available 28.498 + measure</i></a> or <a href="#fill-available-extent"><i>fill-available 28.499 + extent</i></a>, as appropriate to the writing mode. 28.500 + 28.501 + <dt><dfn id=max-content>‘<code class=css>max-content</code>’</dfn> 28.502 + 28.503 + <dd> Use the <a href="#max-content-measure"><i>max-content measure</i></a> 28.504 + or <a href="#max-content-extent"><i>max-content extent</i></a>, as 28.505 + appropriate to the writing mode. 28.506 + 28.507 + <dt><dfn id=min-content>‘<code class=css>min-content</code>’</dfn> 28.508 + 28.509 + <dd> Use the <a href="#min-content-measure"><i>min-content measure</i></a> 28.510 + or <a href="#min-content-extent"><i>min-content extent</i></a>, as 28.511 + appropriate to the writing mode. 28.512 + 28.513 + <dt><dfn id=fit-content>‘<code class=css>fit-content</code>’</dfn> 28.514 + 28.515 + <dd> Use the <a href="#fit-content-measure"><i>fit-content measure</i></a> 28.516 + or <a href="#fit-content-extent"><i>fit-content extent</i></a>, as 28.517 + appropriate to the writing mode. 28.518 + </dl> 28.519 + 28.520 + <h3 id=the-contain-floats-value><span class=secno>3.2. </span> Containing 28.521 + Floats</h3> 28.522 + 28.523 + <table class=propdef> 28.524 + <tbody> 28.525 + <tr> 28.526 + <th>Properties: 28.527 + 28.528 + <td>‘<code class=property>min-width</code>’, ‘<code 28.529 + class=property>min-height</code>’ 28.530 + 28.531 + <tr> 28.532 + <th>New Value: 28.533 + 28.534 + <td>‘<a href="#contain-floats"><code 28.535 + class=css>contain-floats</code></a>’ 28.536 + 28.537 + <tr> 28.538 + <th>Initial: 28.539 + 28.540 + <td>as defined in <a href="#CSS21" 28.541 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 28.542 + href="#CSS3-FLEXBOX" 28.543 + rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a> 28.544 + 28.545 + <tr> 28.546 + <th>Applies to: 28.547 + 28.548 + <td>as defined in <a href="#CSS21" 28.549 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.550 + 28.551 + <tr> 28.552 + <th>Inherited: 28.553 + 28.554 + <td>as defined in <a href="#CSS21" 28.555 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.556 + 28.557 + <tr> 28.558 + <th>Percentages: 28.559 + 28.560 + <td>as defined in <a href="#CSS21" 28.561 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.562 + 28.563 + <tr> 28.564 + <th>Media: 28.565 + 28.566 + <td>as defined in <a href="#CSS21" 28.567 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.568 + 28.569 + <tr> 28.570 + <th>Computed value: 28.571 + 28.572 + <td>specified value if keyword specified, else as defined in <a 28.573 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 28.574 + </table> 28.575 + 28.576 + <dl> 28.577 + <dt><dfn id=contain-floats>‘<code 28.578 + class=css>contain-floats</code>’</dfn> 28.579 + 28.580 + <dd> Equivalent to ‘<a href="#min-content"><code 28.581 + class=css>min-content</code></a>’ except that when applied to the 28.582 + extent of a block box it forces the inner extent to be large enough to 28.583 + contain the margin boxes of any floats that originate inside the block 28.584 + and that participate in the same block formatting context as the block's 28.585 + immediate contents. 28.586 + </dl> 28.587 + 28.588 + <h3 id=column-sizing><span class=secno>3.3. </span> Column Sizing Keywords</h3> 28.589 + 28.590 + <table class=propdef> 28.591 + <tbody> 28.592 + <tr> 28.593 + <th>Property: 28.594 + 28.595 + <td>‘<code class=property>column-width</code>’ 28.596 + 28.597 + <tr> 28.598 + <th>New Values: 28.599 + 28.600 + <td>‘<a href="#min-content"><code class=css>min-content</code></a>’ 28.601 + | ‘<a href="#max-content"><code class=css>max-content</code></a>’ | 28.602 + ‘<a href="#fill-available"><code 28.603 + class=css>fill-available</code></a>’ | ‘<a 28.604 + href="#fit-content"><code class=css>fit-content</code></a>’ 28.605 + 28.606 + <tr> 28.607 + <th>Initial: 28.608 + 28.609 + <td>as defined in <a href="#CSS3COL" 28.610 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 28.611 + 28.612 + <tr> 28.613 + <th>Applies to: 28.614 + 28.615 + <td>as defined in <a href="#CSS3COL" 28.616 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 28.617 + 28.618 + <tr> 28.619 + <th>Inherited: 28.620 + 28.621 + <td>as defined in <a href="#CSS3COL" 28.622 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 28.623 + 28.624 + <tr> 28.625 + <th>Percentages: 28.626 + 28.627 + <td>as defined in <a href="#CSS3COL" 28.628 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 28.629 + 28.630 + <tr> 28.631 + <th>Media: 28.632 + 28.633 + <td>as defined in <a href="#CSS3COL" 28.634 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 28.635 + 28.636 + <tr> 28.637 + <th>Computed value: 28.638 + 28.639 + <td>specified value if keyword specified, else as defined in <a 28.640 + href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 28.641 + </table> 28.642 + 28.643 + <p>When used as values for <a 28.644 + href="http://www.w3.org/TR/css3-multicol/#cw">‘<code 28.645 + class=property>column-width</code>’</a>, the new keywords specify the 28.646 + optimal column width: 28.647 + 28.648 + <dl> 28.649 + <dt>‘<a href="#min-content"><code class=css>min-content</code></a>’ 28.650 + 28.651 + <dd>Specifies the optimal column width as the <a 28.652 + href="#min-content-measure"><i>min-content measure</i></a> of the 28.653 + multi-column element's contents. 28.654 + 28.655 + <dt>‘<a href="#max-content"><code class=css>max-content</code></a>’ 28.656 + 28.657 + <dd>Specifies the optimal column width as the <a 28.658 + href="#max-content-measure"><i>max-content measure</i></a> of the 28.659 + multi-column element's contents. 28.660 + 28.661 + <dt>‘<a href="#fill-available"><code 28.662 + class=css>fill-available</code></a>’ 28.663 + 28.664 + <dd>Specifies the optimal column width as the <a 28.665 + href="#fill-available-measure"><i>fill-available measure</i></a> of the 28.666 + multi-column element. 28.667 + 28.668 + <dt>‘<a href="#fit-content"><code class=css>fit-content</code></a>’ 28.669 + 28.670 + <dd>Specifies the optimal column width as <code>min(<a 28.671 + href="#max-content"><i>max-content</i></a>, max(<a 28.672 + href="#min-content"><i>min-content</i></a>, <a 28.673 + href="#fill-available"><i>fill-available</i></a>))</code>. 28.674 + </dl> 28.675 + 28.676 + <h2 id=intrinsic-sizing><span class=secno>4. </span> Intrinsic Sizing 28.677 + Determination</h2> 28.678 + 28.679 + <p> <dfn id=intrinsic-sizing0>Intrinsic sizing</dfn> determines sizes based 28.680 + on the contents of an element, without regard for its context. 28.681 + 28.682 + <h3 id=replaced-intrinsic><span class=secno>4.1. </span> Intrinsic Sizes of 28.683 + Replaced Elements</h3> 28.684 + 28.685 + <p> For replaced elements, the <a 28.686 + href="#min-content"><i>min-content</i></a> and <a 28.687 + href="#max-content"><i>max-content</i></a> sizes are equivalent and 28.688 + correspond to the used size of the replaced element according to the 28.689 + ‘<code class=css>auto</code>’ size calculation in the corresponding 28.690 + dimension. (See <a href="#CSS3-IMAGES" 28.691 + rel=biblioentry>[CSS3-IMAGES]<!--{{!CSS3-IMAGES}}--></a>.) 28.692 + 28.693 + <h3 id=inline-intrinsic><span class=secno>4.2. </span> Intrinsic Sizes of 28.694 + Non-Replaced Inlines</h3> 28.695 + 28.696 + <p> The <a href="#min-content-measure"><i>min-content measure</i></a> of an 28.697 + inline box is the length of the largest unbreakable sequence of inline 28.698 + content. The <i>min-measure contribution</i> of an inline box is its <a 28.699 + href="#min-content-measure"><i>min-content measure</i></a>, plus any 28.700 + inline-axis margin, border, and padding adjacent to that sequence. 28.701 + 28.702 + <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of an 28.703 + inline box is the length of the largest sequence of inline content on a 28.704 + single line when only forced line breaks are taken. The <i>max-measure 28.705 + contribution</i> of an inline box is its <a 28.706 + href="#max-content-measure"><i>max-content measure</i></a>, plus any 28.707 + inline-axis margin, border, and padding adjacent to that sequence. 28.708 + 28.709 + <p> The <a href="#min-content-extent"><i>min-content extent</i></a>, <a 28.710 + href="#max-content-extent"><i>max-content extent</i></a>, <i>min-extent 28.711 + contribution</i>, and <i>max-content contribution</i> of an inline box are 28.712 + the distance from the head edge of the first line box to the foot edge of 28.713 + the last line box on which the inline appears. 28.714 + 28.715 + <h3 id=block-intrinsic><span class=secno>4.3. </span> Intrinsic Sizes of 28.716 + Non-Replaced Blocks</h3> 28.717 + 28.718 + <p> The <a href="#min-content-measure"><i>min-content measure</i></a> of a 28.719 + block box is the largest <i>min-measure contribution</i> of its in-flow or 28.720 + floated children. 28.721 + 28.722 + <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a 28.723 + block box is the measure of the box after layout, if all children are 28.724 + sized under a <a href="#max-size-constraint"><i>max-size 28.725 + constraint</i></a>. 28.726 + 28.727 + <p> If the computed measure of a block box is ‘<a 28.728 + href="#min-content"><code class=css>min-content</code></a>’, ‘<a 28.729 + href="#max-content"><code class=css>max-content</code></a>’, or a <a 28.730 + href="#definite-size"><i>definite size</i></a>, its <i>min-measure 28.731 + contribution</i> is that size plus any inline-axis margin, border, and 28.732 + padding. Otherwise, if the computed measure of the block is ‘<a 28.733 + href="#fit-content"><code class=css>fit-content</code></a>’, ‘<code 28.734 + class=css>auto</code>’, or ‘<a href="#fill-available"><code 28.735 + class=css>fill-available</code></a>’, its <i>min-measure 28.736 + contribution</i> is its <a href="#min-content-measure"><i>min-content 28.737 + measure</i></a> plus any inline-axis margin, border, and padding. 28.738 + 28.739 + <p> If the computed measure of a block box is ‘<a 28.740 + href="#min-content"><code class=css>min-content</code></a>’, ‘<a 28.741 + href="#max-content"><code class=css>max-content</code></a>’, or a <a 28.742 + href="#definite-size"><i>definite size</i></a>, its <i>max-measure 28.743 + contribution</i> is that size plus any inline-axis margin, border, and 28.744 + padding. Otherwise, if the computed measure of the block is ‘<a 28.745 + href="#fit-content"><code class=css>fit-content</code></a>’, ‘<code 28.746 + class=css>auto</code>’, or ‘<a href="#fill-available"><code 28.747 + class=css>fill-available</code></a>’, its <i>max-measure 28.748 + contribution</i> is its <a href="#max-content-measure"><i>max-content 28.749 + measure</i></a> plus any inline-axis margin, border, and padding. 28.750 + 28.751 + <p> The <a href="#min-content-extent"><i>min-content extent</i></a> and <a 28.752 + href="#max-content-extent"><i>max-content extent</i></a> of a block box is 28.753 + the content extent as defined (for horizontal writing modes) in <a 28.754 + href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a> 28.755 + and <a 28.756 + href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a> 28.757 + for elements with ‘<code class=css>height: auto</code>’, and 28.758 + analogously for vertical writing modes. 28.759 + 28.760 + <p> The <i>min-extent contribution</i> and <i>max-extent contribution</i> 28.761 + of a block box is the extent of the block after layout, plus any 28.762 + block-axis margin, border, and padding. 28.763 + 28.764 + <h3 id=table-intrinsic><span class=secno>4.4. </span> Intrinsic Sizes in 28.765 + Table Layout</h3> 28.766 + 28.767 + <p class=issue> ??? 28.768 + 28.769 + <h3 id=multicol-intrinsic><span class=secno>4.5. </span> Intrinsic Sizes in 28.770 + Multi-column Layout</h3> 28.771 + 28.772 + <p class=issue> See 28.773 + http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html 28.774 + http://lists.w3.org/Archives/Public/www-style/2011May/0468.html 28.775 + 28.776 + <p class=issue>This section is under discussion and may be removed 28.777 + 28.778 + <dl> 28.779 + <dt>min-content 28.780 + 28.781 + <dd>The <a href="#min-content"><i>min-content</i></a> measure of the 28.782 + multi-column element is the <a href="#min-content"><i>min-content</i></a> 28.783 + measure of the multi-column element's contents. 28.784 + 28.785 + <dt>max-content 28.786 + </dl> 28.787 + 28.788 + <p>For multi-column elements laid out with infinite available measure (see 28.789 + <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal 28.790 + Flows</a>), the <a href="#min-content"><i>min-content</i></a> extent is 28.791 + the extent that would result from taking every permissible pagination 28.792 + break as a column break, and the <a 28.793 + href="#max-content"><i>max-content</i></a> extent is the extent that would 28.794 + result from taking only the forced breaks. For all other multi-column 28.795 + elements it is, like CSS2.1 block-level boxes, the extent that would be 28.796 + calculated for an ‘<code class=css>auto</code>’ extent per 28.797 + [[CSS3MULTICOL]]. 28.798 + 28.799 + <pre> 28.800 +NOTES FROM ROSSEN: 28.801 + min-content measure is min(column-width, min-content) 28.802 + max-content measure is 28.803 + 1. Pass w/ colspans displ: none; 28.804 + Get width 28.805 + 2. Pass with colspans only in width 28.806 + Get remaining height 28.807 + 3. Pass w/ spans again using remaining height 28.808 + Get width 28.809 + 4. Layout in width as final 28.810 + Will lay out perfectly without colspans; will have some slack but no 28.811 + overflow when colspans present. 28.812 +</pre> 28.813 + 28.814 + <h2 id=extrinsic-sizing><span class=secno>5. </span> Extrinsic Sizing</h2> 28.815 + 28.816 + <p> <dfn id=extrinsic-sizing0>Extrinsic sizing</dfn> determines sizes based 28.817 + on the context of an element, without regard for its contents. 28.818 + 28.819 + <p> The inner <a href="#fill-available-measure"><i>fill-available 28.820 + measure</i></a> of a box is the larger of… 28.821 + 28.822 + <ul> 28.823 + <li> Its containing block's computed ‘<code 28.824 + class=property>min-measure</code>’ if that measure is <a 28.825 + href="#definite-size"><i>definite</i></a>, or zero otherwise. 28.826 + 28.827 + <li> The smaller of: 28.828 + <ul> 28.829 + <li> Its containing block's computed ‘<code 28.830 + class=property>max-measure</code>’ if that measure is <a 28.831 + href="#definite-size"><i>definite</i></a>, or infinity otherwise. 28.832 + 28.833 + <li> The containing block's computed measure if that is <a 28.834 + href="#definite-size"><i>definite</i></a>, or its inner <a 28.835 + href="#fill-available-measure"><i>fill-available measure</i></a> 28.836 + otherwise. 28.837 + </ul> 28.838 + </ul> 28.839 + 28.840 + <p> …less the box's inline-axis margins, borders, and padding. 28.841 + 28.842 + <p> The <a href="#fill-available-extent"><i>fill-available extent</i></a> 28.843 + of a box is defined analogously, but in the other dimension. <!-- 28.844 + dddddddd 28.845 +TTTTTTTTTTTTTTTTTTTTTTThhhhhhh EEEEEEEEEEEEEEEEEEEEEE d::::::d 28.846 +T:::::::::::::::::::::Th:::::h E::::::::::::::::::::E d::::::d 28.847 +T:::::::::::::::::::::Th:::::h E::::::::::::::::::::E d::::::d 28.848 +T:::::TT:::::::TT:::::Th:::::h EE::::::EEEEEEEEE::::E d:::::d 28.849 +TTTTTT T:::::T TTTTTT h::::h hhhhh eeeeeeeeeeee E:::::E EEEEEEnnnn nnnnnnnn ddddddddd:::::d 28.850 + T:::::T h::::hh:::::hhh ee::::::::::::ee E:::::E n:::nn::::::::nn dd::::::::::::::d 28.851 + T:::::T h::::::::::::::hh e::::::eeeee:::::ee E::::::EEEEEEEEEE n::::::::::::::nn d::::::::::::::::d 28.852 + T:::::T h:::::::hhh::::::h e::::::e e:::::e E:::::::::::::::E nn:::::::::::::::nd:::::::ddddd:::::d 28.853 + T:::::T h::::::h h::::::he:::::::eeeee::::::e E:::::::::::::::E n:::::nnnn:::::nd::::::d d:::::d 28.854 + T:::::T h:::::h h:::::he:::::::::::::::::e E::::::EEEEEEEEEE n::::n n::::nd:::::d d:::::d 28.855 + T:::::T h:::::h h:::::he::::::eeeeeeeeeee E:::::E n::::n n::::nd:::::d d:::::d 28.856 + T:::::T h:::::h h:::::he:::::::e E:::::E EEEEEE n::::n n::::nd:::::d d:::::d 28.857 + TT:::::::TT h:::::h h:::::he::::::::e EE::::::EEEEEEEE:::::E n::::n n::::nd::::::ddddd::::::dd 28.858 + T:::::::::T h:::::h h:::::h e::::::::eeeeeeee E::::::::::::::::::::E n::::n n::::n d:::::::::::::::::d 28.859 + T:::::::::T h:::::h h:::::h ee:::::::::::::e E::::::::::::::::::::E n::::n n::::n d:::::::::ddd::::d 28.860 + TTTTTTTTTTT hhhhhhh hhhhhhh eeeeeeeeeeeeee EEEEEEEEEEEEEEEEEEEEEE nnnnnn nnnnnn ddddddddd ddddd 28.861 +--> 28.862 + 28.863 + 28.864 + <h2 id=conformance><span class=secno>6. </span> Conformance</h2> 28.865 + 28.866 + <h3 id=conventions><span class=secno>6.1. </span> Document conventions</h3> 28.867 + 28.868 + <p>Conformance requirements are expressed with a combination of descriptive 28.869 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 28.870 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 28.871 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 28.872 + normative parts of this document are to be interpreted as described in RFC 28.873 + 2119. However, for readability, these words do not appear in all uppercase 28.874 + letters in this specification. 28.875 + 28.876 + <p>All of the text of this specification is normative except sections 28.877 + explicitly marked as non-normative, examples, and notes. <a 28.878 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 28.879 + 28.880 + <p>Examples in this specification are introduced with the words “for 28.881 + example” or are set apart from the normative text with 28.882 + <code>class="example"</code>, like this: 28.883 + 28.884 + <div class=example> 28.885 + <p>This is an example of an informative example.</p> 28.886 + </div> 28.887 + 28.888 + <p>Informative notes begin with the word “Note” and are set apart from 28.889 + the normative text with <code>class="note"</code>, like this: 28.890 + 28.891 + <p class=note>Note, this is an informative note. 28.892 + 28.893 + <h3 id=conformance-classes><span class=secno>6.2. </span> Conformance 28.894 + classes</h3> 28.895 + 28.896 + <p>Conformance to <var class=replaceme>CSS Intrinsic Sizing Module</var> is 28.897 + defined for three conformance classes: 28.898 + 28.899 + <dl> 28.900 + <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 28.901 + sheet</dfn> 28.902 + 28.903 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 28.904 + style sheet</a>. 28.905 + 28.906 + <dt><dfn id=renderer>renderer</dfn> 28.907 + 28.908 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 28.909 + that interprets the semantics of a style sheet and renders documents that 28.910 + use them. 28.911 + 28.912 + <dt><dfn id=authoring-tool>authoring tool</dfn> 28.913 + 28.914 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 28.915 + that writes a style sheet. 28.916 + </dl> 28.917 + 28.918 + <p>A style sheet is conformant to <var class=replaceme>CSS Intrinsic Sizing 28.919 + Module</var> if all of its statements that use syntax defined in this 28.920 + module are valid according to the generic CSS grammar and the individual 28.921 + grammars of each feature defined in this module. 28.922 + 28.923 + <p>A renderer is conformant to <var class=replaceme>CSS Intrinsic Sizing 28.924 + Module</var> if, in addition to interpreting the style sheet as defined by 28.925 + the appropriate specifications, it supports all the features defined by 28.926 + <var class=replaceme>CSS Intrinsic Sizing Module</var> by parsing them 28.927 + correctly and rendering the document accordingly. However, the inability 28.928 + of a UA to correctly render a document due to limitations of the device 28.929 + does not make the UA non-conformant. (For example, a UA is not required to 28.930 + render color on a monochrome monitor.) 28.931 + 28.932 + <p>An authoring tool is conformant to <var class=replaceme>CSS Intrinsic 28.933 + Sizing Module</var> if it writes style sheets that are syntactically 28.934 + correct according to the generic CSS grammar and the individual grammars 28.935 + of each feature in this module, and meet all other conformance 28.936 + requirements of style sheets as described in this module. 28.937 + 28.938 + <h3 id=partial><span class=secno>6.3. </span> Partial implementations</h3> 28.939 + 28.940 + <p>So that authors can exploit the forward-compatible parsing rules to 28.941 + assign fallback values, CSS renderers <strong>must</strong> treat as 28.942 + invalid (and <a 28.943 + href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 28.944 + appropriate</a>) any at-rules, properties, property values, keywords, and 28.945 + other syntactic constructs for which they have no usable level of support. 28.946 + In particular, user agents <strong>must not</strong> selectively ignore 28.947 + unsupported component values and honor supported values in a single 28.948 + multi-value property declaration: if any value is considered invalid (as 28.949 + unsupported values must be), CSS requires that the entire declaration be 28.950 + ignored. 28.951 + 28.952 + <h3 id=experimental><span class=secno>6.4. </span> Experimental 28.953 + implementations</h3> 28.954 + 28.955 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 28.956 + reserves a <a 28.957 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 28.958 + syntax</a> for proprietary and experimental extensions to CSS. 28.959 + 28.960 + <p>Prior to a specification reaching the Candidate Recommendation stage in 28.961 + the W3C process, all implementations of a CSS feature are considered 28.962 + experimental. The CSS Working Group recommends that implementations use a 28.963 + vendor-prefixed syntax for such features, including those in W3C Working 28.964 + Drafts. This avoids incompatibilities with future changes in the draft. 28.965 + 28.966 + <h3 id=testing><span class=secno>6.5. </span> Non-experimental 28.967 + implementations</h3> 28.968 + 28.969 + <p>Once a specification reaches the Candidate Recommendation stage, 28.970 + non-experimental implementations are possible, and implementors should 28.971 + release an unprefixed implementation of any CR-level feature they can 28.972 + demonstrate to be correctly implemented according to spec. 28.973 + 28.974 + <p>To establish and maintain the interoperability of CSS across 28.975 + implementations, the CSS Working Group requests that non-experimental CSS 28.976 + renderers submit an implementation report (and, if necessary, the 28.977 + testcases used for that implementation report) to the W3C before releasing 28.978 + an unprefixed implementation of any CSS features. Testcases submitted to 28.979 + W3C are subject to review and correction by the CSS Working Group. 28.980 + 28.981 + <p>Further information on submitting testcases and implementation reports 28.982 + can be found from on the CSS Working Group's website at <a 28.983 + href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 28.984 + Questions should be directed to the <a 28.985 + href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 28.986 + mailing list. 28.987 + 28.988 + <h3 id=cr-exit-criteria><span class=secno>6.6. </span> CR exit criteria</h3> 28.989 + 28.990 + <p class=issue>[Change or remove the following CR exit criteria if the spec 28.991 + is not a module, but, e.g., a Note or a profile. This text was <a 28.992 + href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 28.993 + 2008-06-04.</a>] 28.994 + 28.995 + <p> For this specification to be advanced to Proposed Recommendation, there 28.996 + must be at least two independent, interoperable implementations of each 28.997 + feature. Each feature may be implemented by a different set of products, 28.998 + there is no requirement that all features be implemented by a single 28.999 + product. For the purposes of this criterion, we define the following 28.1000 + terms: 28.1001 + 28.1002 + <dl> 28.1003 + <dt>independent 28.1004 + 28.1005 + <dd>each implementation must be developed by a different party and cannot 28.1006 + share, reuse, or derive from code used by another qualifying 28.1007 + implementation. Sections of code that have no bearing on the 28.1008 + implementation of this specification are exempt from this requirement. 28.1009 + 28.1010 + <dt>interoperable 28.1011 + 28.1012 + <dd>passing the respective test case(s) in the official CSS test suite, 28.1013 + or, if the implementation is not a Web browser, an equivalent test. Every 28.1014 + relevant test in the test suite should have an equivalent test created if 28.1015 + such a user agent (UA) is to be used to claim interoperability. In 28.1016 + addition if such a UA is to be used to claim interoperability, then there 28.1017 + must one or more additional UAs which can also pass those equivalent 28.1018 + tests in the same way for the purpose of interoperability. The equivalent 28.1019 + tests must be made publicly available for the purposes of peer review. 28.1020 + 28.1021 + <dt>implementation 28.1022 + 28.1023 + <dd>a user agent which: 28.1024 + <ol class=inline> 28.1025 + <li>implements the specification. 28.1026 + 28.1027 + <li>is available to the general public. The implementation may be a 28.1028 + shipping product or other publicly available version (i.e., beta 28.1029 + version, preview release, or “nightly build”). Non-shipping product 28.1030 + releases must have implemented the feature(s) for a period of at least 28.1031 + one month in order to demonstrate stability. 28.1032 + 28.1033 + <li>is not experimental (i.e., a version specifically designed to pass 28.1034 + the test suite and is not intended for normal usage going forward). 28.1035 + </ol> 28.1036 + </dl> 28.1037 + 28.1038 + <p>The specification will remain Candidate Recommendation for at least six 28.1039 + months. 28.1040 + 28.1041 + <h2 class=no-num id=acknowledgments> Acknowledgments</h2> 28.1042 + 28.1043 + <p><var class=replaceme>[acknowledgments]</var> 28.1044 + 28.1045 + <h2 class=no-num id=references> References</h2> 28.1046 + 28.1047 + <h3 class=no-num id=normative-references> Normative references</h3> 28.1048 + <!--begin-normative--> 28.1049 + <!-- Sorted by label --> 28.1050 + 28.1051 + <dl class=bibliography> 28.1052 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 28.1053 + <!----> 28.1054 + 28.1055 + <dt id=CSS21>[CSS21] 28.1056 + 28.1057 + <dd>Bert Bos; et al. <a 28.1058 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 28.1059 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 28.1060 + 2011. W3C Recommendation. URL: <a 28.1061 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 28.1062 + </dd> 28.1063 + <!----> 28.1064 + 28.1065 + <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX] 28.1066 + 28.1067 + <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a 28.1068 + href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/"><cite>CSS 28.1069 + Flexible Box Layout Module.</cite></a> 12 June 2012. W3C Working Draft. 28.1070 + (Work in progress.) URL: <a 28.1071 + href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> 28.1072 + </dd> 28.1073 + <!----> 28.1074 + 28.1075 + <dt id=CSS3-IMAGES>[CSS3-IMAGES] 28.1076 + 28.1077 + <dd>Elika J. Etemad; Tab Atkins Jr. <a 28.1078 + href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image 28.1079 + Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C 28.1080 + Candidate Recommendation. (Work in progress.) URL: <a 28.1081 + href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a> 28.1082 + </dd> 28.1083 + <!----> 28.1084 + 28.1085 + <dt id=CSS3COL>[CSS3COL] 28.1086 + 28.1087 + <dd>Håkon Wium Lie. <a 28.1088 + href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS 28.1089 + Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate 28.1090 + Recommendation. (Work in progress.) URL: <a 28.1091 + href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a> 28.1092 + </dd> 28.1093 + <!----> 28.1094 + 28.1095 + <dt id=RFC2119>[RFC2119] 28.1096 + 28.1097 + <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 28.1098 + words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 28.1099 + RFC 2119. URL: <a 28.1100 + href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 28.1101 + </dd> 28.1102 + <!----> 28.1103 + </dl> 28.1104 + <!--end-normative--> 28.1105 + 28.1106 + <h3 class=no-num id=other-references> Other references</h3> 28.1107 + <!--begin-informative--> 28.1108 + <!-- Sorted by label --> 28.1109 + 28.1110 + <dl class=bibliography> 28.1111 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 28.1112 + <!----> 28.1113 + 28.1114 + <dt id=CSS3COLOR>[CSS3COLOR] 28.1115 + 28.1116 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 28.1117 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 28.1118 + Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 28.1119 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 28.1120 + </dd> 28.1121 + <!----> 28.1122 + </dl> 28.1123 + <!--end-informative--> 28.1124 + 28.1125 + <h2 class=no-num id=index> Index</h2> 28.1126 + <!--begin-index--> 28.1127 + 28.1128 + <ul class=indexlist> 28.1129 + <li>authoring tool, <a href="#authoring-tool" 28.1130 + title="authoring tool"><strong>6.2.</strong></a> 28.1131 + 28.1132 + <li>available, <a href="#available-size" 28.1133 + title=available><strong>2.</strong></a> 28.1134 + 28.1135 + <li>available extent, <a href="#available-size" 28.1136 + title="available extent"><strong>2.</strong></a> 28.1137 + 28.1138 + <li>available measure, <a href="#available-size" 28.1139 + title="available measure"><strong>2.</strong></a> 28.1140 + 28.1141 + <li>available size, <a href="#available-size" 28.1142 + title="available size"><strong>2.</strong></a> 28.1143 + 28.1144 + <li>‘<a href="#contain-floats"><code 28.1145 + class=css>contain-floats</code></a>’, <a href="#contain-floats" 28.1146 + title="''contain-floats''"><strong>3.2.</strong></a> 28.1147 + 28.1148 + <li>definite, <a href="#definite-size" 28.1149 + title=definite><strong>2.</strong></a> 28.1150 + 28.1151 + <li>definite size, <a href="#definite-size" 28.1152 + title="definite size"><strong>2.</strong></a> 28.1153 + 28.1154 + <li>Extrinsic sizing, <a href="#extrinsic-sizing0" 28.1155 + title="Extrinsic sizing"><strong>5.</strong></a> 28.1156 + 28.1157 + <li>fallback, <a href="#fallback-size" 28.1158 + title=fallback><strong>2.</strong></a> 28.1159 + 28.1160 + <li>fallback size, <a href="#fallback-size" 28.1161 + title="fallback size"><strong>2.</strong></a> 28.1162 + 28.1163 + <li>‘<a href="#fill-available"><code 28.1164 + class=css>fill-available</code></a>’, <a href="#fill-available" 28.1165 + title="''fill-available''"><strong>3.1.</strong></a> 28.1166 + 28.1167 + <li>fill-available extent, <a href="#fill-available-extent" 28.1168 + title="fill-available extent"><strong>2.</strong></a> 28.1169 + 28.1170 + <li>fill-available measure, <a href="#fill-available-measure" 28.1171 + title="fill-available measure"><strong>2.</strong></a> 28.1172 + 28.1173 + <li>‘<a href="#fit-content"><code class=css>fit-content</code></a>’, 28.1174 + <a href="#fit-content" title="''fit-content''"><strong>3.1.</strong></a> 28.1175 + 28.1176 + <li>fit-content extent, <a href="#fit-content-extent" 28.1177 + title="fit-content extent"><strong>2.</strong></a> 28.1178 + 28.1179 + <li>fit-content measure, <a href="#fit-content-measure" 28.1180 + title="fit-content measure"><strong>2.</strong></a> 28.1181 + 28.1182 + <li>indefinite, <a href="#indefinite-size" 28.1183 + title=indefinite><strong>2.</strong></a> 28.1184 + 28.1185 + <li>indefinite size, <a href="#indefinite-size" 28.1186 + title="indefinite size"><strong>2.</strong></a> 28.1187 + 28.1188 + <li>Intrinsic sizing, <a href="#intrinsic-sizing0" 28.1189 + title="Intrinsic sizing"><strong>4.</strong></a> 28.1190 + 28.1191 + <li>‘<a href="#max-content"><code class=css>max-content</code></a>’, 28.1192 + <a href="#max-content" title="''max-content''"><strong>3.1.</strong></a> 28.1193 + 28.1194 + <li>max-content extent, <a href="#max-content-extent" 28.1195 + title="max-content extent"><strong>2.</strong></a> 28.1196 + 28.1197 + <li>max-content measure, <a href="#max-content-measure" 28.1198 + title="max-content measure"><strong>2.</strong></a> 28.1199 + 28.1200 + <li>max-size constraint, <a href="#max-size-constraint" 28.1201 + title="max-size constraint"><strong>2.</strong></a> 28.1202 + 28.1203 + <li>max-size contribution, <a href="#max-size-contribution" 28.1204 + title="max-size contribution"><strong>2.</strong></a> 28.1205 + 28.1206 + <li>‘<a href="#min-content"><code class=css>min-content</code></a>’, 28.1207 + <a href="#min-content" title="''min-content''"><strong>3.1.</strong></a> 28.1208 + 28.1209 + <li>min-content extent, <a href="#min-content-extent" 28.1210 + title="min-content extent"><strong>2.</strong></a> 28.1211 + 28.1212 + <li>min-content measure, <a href="#min-content-measure" 28.1213 + title="min-content measure"><strong>2.</strong></a> 28.1214 + 28.1215 + <li>min-size constraint, <a href="#min-size-constraint" 28.1216 + title="min-size constraint"><strong>2.</strong></a> 28.1217 + 28.1218 + <li>min-size contribution, <a href="#min-size-contribution" 28.1219 + title="min-size contribution"><strong>2.</strong></a> 28.1220 + 28.1221 + <li>renderer, <a href="#renderer" title=renderer><strong>6.2.</strong></a> 28.1222 + 28.1223 + 28.1224 + <li>size, <a href="#size" title=size><strong>2.</strong></a> 28.1225 + 28.1226 + <li>style sheet 28.1227 + <ul> 28.1228 + <li>as conformance class, <a href="#style-sheet" 28.1229 + title="style sheet, as conformance class"><strong>6.2.</strong></a> 28.1230 + </ul> 28.1231 + </ul> 28.1232 + <!--end-index--> 28.1233 + 28.1234 + <h2 class=no-num id=property-index> Property index</h2> 28.1235 + <!--begin-properties--> 28.1236 + 28.1237 + <table class=proptable> 28.1238 + <thead> 28.1239 + <tr> 28.1240 + <th>Property 28.1241 + 28.1242 + <th>Values 28.1243 + 28.1244 + <th>Initial 28.1245 + 28.1246 + <th>Applies to 28.1247 + 28.1248 + <th>Inh. 28.1249 + 28.1250 + <th>Percentages 28.1251 + 28.1252 + <th>Media 28.1253 + 28.1254 + <tbody> 28.1255 + <tr> 28.1256 + <th><span class=property>‘column-width’</span> 28.1257 + 28.1258 + <td>‘min-content’ | ‘max-content’ | ‘fill-available’ | 28.1259 + ‘fit-content’ 28.1260 + 28.1261 + <td>as defined in [CSS3COL] 28.1262 + 28.1263 + <td>as defined in [CSS3COL] 28.1264 + 28.1265 + <td>as defined in [CSS3COL] 28.1266 + 28.1267 + <td>as defined in [CSS3COL] 28.1268 + 28.1269 + <td>as defined in [CSS3COL] 28.1270 + 28.1271 + <tr> 28.1272 + <th><span class=property>‘min-width’</span>, <span 28.1273 + class=property>‘min-height’</span> 28.1274 + 28.1275 + <td>‘contain-floats’ 28.1276 + 28.1277 + <td>as defined in [CSS21] and [CSS3-FLEXBOX] 28.1278 + 28.1279 + <td>as defined in [CSS21] 28.1280 + 28.1281 + <td>as defined in [CSS21] 28.1282 + 28.1283 + <td>as defined in [CSS21] 28.1284 + 28.1285 + <td>as defined in [CSS21] 28.1286 + 28.1287 + <tr> 28.1288 + <th><span class=property>‘width’</span>, <span 28.1289 + class=property>‘min-width’</span>, <span 28.1290 + class=property>‘max-width’</span>, <span 28.1291 + class=property>‘height’</span>, <span 28.1292 + class=property>‘min-height’</span>, <span 28.1293 + class=property>‘max-height’</span> 28.1294 + 28.1295 + <td>‘fill-available’ | ‘max-content’ | ‘min-content’ | 28.1296 + ‘fit-content’ 28.1297 + 28.1298 + <td>as defined in [CSS21] and [CSS3-FLEXBOX] 28.1299 + 28.1300 + <td>as defined in [CSS21] 28.1301 + 28.1302 + <td>as defined in [CSS21] 28.1303 + 28.1304 + <td>as defined in [CSS21] 28.1305 + 28.1306 + <td>as defined in [CSS21] 28.1307 + </table> 28.1308 + <!--end-properties--> 28.1309 +</html> 28.1310 +<!-- Keep this comment at the end of the file 28.1311 +Local variables: 28.1312 +mode: sgml 28.1313 +sgml-declaration:"~/SGML/HTML4.decl" 28.1314 +sgml-default-doctype-name:"html" 28.1315 +sgml-minimize-attributes:t 28.1316 +sgml-nofill-elements:("pre" "style" "br") 28.1317 +sgml-live-element-indicator:t 28.1318 +sgml-omittag:nil 28.1319 +sgml-shorttag:nil 28.1320 +sgml-namecase-general:t 28.1321 +sgml-general-insert-case:lower 28.1322 +sgml-always-quote-attributes:t 28.1323 +sgml-indent-step:nil 28.1324 +sgml-indent-data:t 28.1325 +sgml-parent-document:nil 28.1326 +sgml-exposed-tags:nil 28.1327 +sgml-local-catalogs:nil 28.1328 +sgml-local-ecat-files:nil 28.1329 +End: 28.1330 +-->
29.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 29.2 +++ b/css3-sizing/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 29.3 @@ -0,0 +1,834 @@ 29.4 +<!DOCTYPE html> 29.5 +<html lang="en"> 29.6 +<head> 29.7 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 29.8 + <title>CSS Intrinsic & Extrinsic Sizing Module Level 3 (CSS3 TMPL)</title> 29.9 + <link rel=contents href="#contents"> 29.10 + <link rel=index href="#index"> 29.11 + <link rel="stylesheet" type="text/css" href="../default.css"> 29.12 + <link rel="stylesheet" type="text/css" 29.13 + href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 29.14 + <style type="text/css"> 29.15 + /* delete this block when you've cleared out all the .replaceme elements */ 29.16 + .replaceme { 29.17 + border: solid red; 29.18 + padding: 0 0.5em; 29.19 + margin: 0 0.1em; 29.20 + background: yellow; 29.21 + color: green; 29.22 + } 29.23 + .replaceme:before { 29.24 + content: "FIXME("; 29.25 + color: black; 29.26 + } 29.27 + .replaceme:after { 29.28 + content: ")"; 29.29 + color: black; 29.30 + } 29.31 + </style> 29.32 +</head> 29.33 + 29.34 +<div class="head"> 29.35 +<!--logo--> 29.36 + 29.37 +<h1>CSS Intrinsic & Extrinsic Sizing Module Level 3</h1> 29.38 + 29.39 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 29.40 +<dl> 29.41 +<!-- 29.42 + <dt>This version: 29.43 + <dd><a href="[VERSION]" class="replaceme">http://www.w3.org/TR/[YEAR]/ED-css3-sizing-[CDATE]/</a> 29.44 +--> 29.45 + <dt>Latest version: 29.46 + <dd><a href="http://dev.w3.org/csswg/css3-sizing/">http://dev.w3.org/csswg/css3-sizing/</a> 29.47 + 29.48 + <dt>Editor's draft: 29.49 + <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 29.50 + 29.51 + <dt>Issue Tracking:</dt> 29.52 + <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Sizing&resolution=---">W3C Bugzilla</a> 29.53 + 29.54 + <dt>Feedback:</dt> 29.55 + <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” 29.56 + 29.57 + <dt>Editors: 29.58 + <dd class="hcard"><a href="http://www.xanthir.com/contact" class="fn url">Tab Atkins Jr.</a>, <span class="org">Google Inc.</span> 29.59 + <dd class="hcard"><a href="http://fantasai.inkedblade.net/contact" class="fn url">Elika J. Etemad</a>, <span class="org">Mozilla</span> 29.60 +</dl> 29.61 + 29.62 +<!--copyright--> 29.63 + 29.64 +<hr title="Separator for header"> 29.65 +</div> 29.66 + 29.67 +<h2 class="no-num no-toc" id="abstract">Abstract</h2> 29.68 + 29.69 + <p>This module contains the features of CSS relating to 29.70 + <var class="replaceme">DESCRIBE HERE</var>. 29.71 + <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 29.72 + the rendering of structured documents (such as HTML and XML) on screen, on 29.73 + paper, in speech, etc. 29.74 + 29.75 +<h2 class="no-num no-toc" id="status">Status of this document</h2> 29.76 + 29.77 +<!--status--> 29.78 + 29.79 +<p>The following features are at risk: … 29.80 + 29.81 +<h2 class="no-num no-toc" id="contents"> 29.82 +Table of contents</h2> 29.83 + 29.84 +<!--toc--> 29.85 + 29.86 +<h2 id="intro"> 29.87 +Introduction</h2> 29.88 + 29.89 + <p><em>This section is not normative.</em> 29.90 + 29.91 + 29.92 + <p> 29.93 + CSS layout has several different concepts of automatic sizing that are used in various layout calculations. 29.94 + This section defines some more precise terminology 29.95 + to help connect the layout behaviors of this spec to the calculations used in other modules, 29.96 + and some new keywords for the 'width' and 'height' properties 29.97 + to allow authors to assign elements the dimensions resulting from these size calculations. 29.98 + 29.99 +<h3 id="placement"> 29.100 +Module interactions</h3> 29.101 + 29.102 + <p class="replaceme">Explain, normatively, how this module affects the definition of CSS.</p> 29.103 + 29.104 + <p>This module replaces and extends the <var class="replaceme">SUMMARIZE HERE</var> 29.105 + features defined in [[!CSS21]] sections <var class="replaceme">W.X and Y.Z</var>. 29.106 + 29.107 + <p class="replaceme">All properties in this module apply to the <code>::first-line</code> and 29.108 + <code>::first-letter</code> pseudo-elements. 29.109 + <!-- HANDLE, THEN REMOVE THIS COMMENT 29.110 + Properties that affect box layout should be excluded from ::first-line. 29.111 + Properties that take things out-of-flow or alter box construction should 29.112 + be excluded from both ::first-line and ::first-letter. (A special exception 29.113 + is made for float on ::first-letter, which is defined to emulate drop-caps.) 29.114 + Examples of ::first-line / ::first-letter statements: 29.115 + http://dev.w3.org/csswg/css3-background/#placement 29.116 + (All properties apply to ::first-letter; some apply to ::first-line) 29.117 + --> 29.118 + 29.119 +<h3 id="values"> 29.120 +Values</h3> 29.121 + 29.122 + <p>This specification follows the 29.123 + <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 29.124 + definition conventions</a> from [[!CSS21]]. Value types not defined in 29.125 + this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 29.126 + Other CSS modules may expand the definitions of these value types: for 29.127 + example [[CSS3COLOR]], when combined with this module, expands the 29.128 + definition of the <color> value type as used in this specification.</p> 29.129 + 29.130 + <p>In addition to the property-specific values listed in their definitions, 29.131 + all properties defined in this specification also accept the 29.132 + <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 29.133 + keyword as their property value. For readability it has not been repeated 29.134 + explicitly. 29.135 + 29.136 +<h2 id="terms"> 29.137 +Terminology</h2> 29.138 + 29.139 + <dl> 29.140 + <dt><dfn>size</dfn> 29.141 + <dd> 29.142 + A one- or two-dimensional measurement: 29.143 + a <a href="http://www.w3.org/TR/css3-writing-modes/#measure"><i>measure</i></a> 29.144 + and/or <a href="http://www.w3.org/TR/css3-writing-modes/#extent"><i>extent</i></a>; 29.145 + alternatively a width and/or height. 29.146 + 29.147 + <dt><dfn title="definite|definite size">definite size</dfn> 29.148 + <dd> 29.149 + A size that can be determined without measuring content; 29.150 + that is, a <var><length></var>, 29.151 + a size of the <i>initial containing block</i>, 29.152 + or a <var><percentage></var> that is resolved against a <i>definite</i> size. 29.153 + 29.154 + <dt><dfn title="indefinite|indefinite size">indefinite size</dfn> 29.155 + <dd> 29.156 + A size that is not <i>definite</i>. 29.157 + An <i>indefinite</i> <i>available size</i> is essentially infinite. 29.158 + 29.159 + <dt><dfn title="available|available size|available measure|available extent">available size</dfn> 29.160 + <dd> 29.161 + The space into which a box is laid out, 29.162 + typically either a measurement of its <i>containing block</i> 29.163 + or an infinite size. 29.164 + 29.165 + <dt><dfn title="fallback|fallback size">fallback size</dfn> 29.166 + <dd> 29.167 + Some sizing algorithms do not work well with an infinite size. 29.168 + In these cases, the fallback size is used instead. 29.169 + Unless otherwise specified, 29.170 + this is the size of the initial containing block. 29.171 + 29.172 + <dt><dfn>fill-available measure</dfn> 29.173 + <dd> 29.174 + Roughly, the measure a box would take 29.175 + if it filled its <i>available measure</i>. 29.176 + The exact definition is given in XXX. 29.177 + 29.178 + <p class='note'> 29.179 + Note: This is called the <i>available width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 29.180 + and computed by the rules in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>. 29.181 + 29.182 + <dt><dfn>max-content measure</dfn> 29.183 + <dd> 29.184 + Roughly, the narrowest measure a box could take while fitting around its contents 29.185 + if <em>none</em> of the optional soft wrap opportunities within the box were taken. 29.186 + The exact definition is given in XXX. 29.187 + 29.188 + <p class='note'> 29.189 + Note: This is called the <i>preferred width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 29.190 + and the <i>maximum cell width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 29.191 + 29.192 + <dt><dfn>min-content measure</dfn> 29.193 + <dd> 29.194 + Roughly, the narrowest measure a box could take 29.195 + while fitting around its contents 29.196 + if <em>all</em> soft wrap opportunities within the box were taken. 29.197 + The exact definition is given in XXX. 29.198 + 29.199 + <p class='note'> 29.200 + Note: This is called the <i>preferred minimum width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 29.201 + and the <i>minimum content width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 29.202 + 29.203 + <dt><dfn>fit-content measure</dfn> 29.204 + <dd> 29.205 + If the <i>available</i> measure is finite, 29.206 + equal to <code>min(<i>max-content</i>, max(<i>min-content</i>, <i>fill-available</i>))</code>. 29.207 + Otherwise, equal to the <i>max-content measure</i>. 29.208 + 29.209 + <p class='note'> 29.210 + Note: This is called the <i>shrink-to-fit</i> width in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 29.211 + and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>. 29.212 + 29.213 + <dt><dfn>fill-available extent</dfn> 29.214 + <dd> 29.215 + Roughly, the extent a box would take 29.216 + if it filled its <i>available extent</i>. 29.217 + The exact definition is given in XXX. 29.218 + 29.219 + <dt><dfn>max-content extent</dfn> 29.220 + <dd> 29.221 + Roughly, the extent of the content after layout. 29.222 + 29.223 + <dt><dfn>min-content extent</dfn> 29.224 + <dd> 29.225 + Equivalent to the <i>max-content extent</i>. 29.226 + <span class="issue">Or should this be the minimum between allowed break points? It might make sense in multi-col contexts to have min-content and max-content extents be different, even if they are the same elsewhere.</span> 29.227 + 29.228 + <dt><dfn>fit-content extent</dfn> 29.229 + <dd> 29.230 + Analogous to the <i>fit-content measure</i>. 29.231 + 29.232 + <dt><dfn>max-size contribution</dfn> 29.233 + <dd> 29.234 + The size that a box contributes to its containing block's <i>max-content size</i>. 29.235 + 29.236 + <dt><dfn>min-size contribution</dfn> 29.237 + <dd> 29.238 + The size that a box contributes to its containing block's <i>min-content size</i>. 29.239 + 29.240 + <dt><dfn>max-size constraint</dfn> 29.241 + <dd> 29.242 + A sizing constraint imposed by the box's containing block 29.243 + that causes it to produce its <i>max-size contribution</i>. 29.244 + 29.245 + <dt><dfn>min-size constraint</dfn> 29.246 + <dd> 29.247 + A sizing constraint imposed by the box's containing block 29.248 + that causes it to produce its <i>min-size contribution</i>. 29.249 + </dl> 29.250 + 29.251 +<h2 id='size-keywords'> 29.252 +New Sizing Keywords</h2> 29.253 + 29.254 +<h3 id='width-height-keywords'> 29.255 +New Keywords for 'width' and 'height'</h3> 29.256 + 29.257 + <table class="propdef"> 29.258 + <tr> 29.259 + <th>Properties: 29.260 + <td>'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height' 29.261 + <tr> 29.262 + <th>New Values: 29.263 + <td>''fill-available'' | ''max-content'' | ''min-content'' | ''fit-content'' 29.264 + <tr> 29.265 + <th>Initial: 29.266 + <td>as defined in [[!CSS21]] and [[!CSS3-FLEXBOX]] 29.267 + <tr> 29.268 + <th>Applies to: 29.269 + <td>as defined in [[!CSS21]] 29.270 + <tr> 29.271 + <th>Inherited: 29.272 + <td>as defined in [[!CSS21]] 29.273 + <tr> 29.274 + <th>Percentages: 29.275 + <td>as defined in [[!CSS21]] 29.276 + <tr> 29.277 + <th>Media: 29.278 + <td>as defined in [[!CSS21]] 29.279 + <tr> 29.280 + <th>Computed value: 29.281 + <td>specified value if keyword specified, else as defined in [[!CSS21]] 29.282 + </table> 29.283 + 29.284 + <p>There are four types of automatically-determined sizes in CSS (which 29.285 + are represented in the width and height properties by the keywords 29.286 + defined above): 29.287 + 29.288 + <dl> 29.289 + <dt><dfn>''fill-available''</dfn> 29.290 + <dd> 29.291 + Use the <i>fill-available measure</i> or <i>fill-available extent</i>, 29.292 + as appropriate to the writing mode. 29.293 + 29.294 + <dt><dfn>''max-content''</dfn> 29.295 + <dd> 29.296 + Use the <i>max-content measure</i> or <i>max-content extent</i>, 29.297 + as appropriate to the writing mode. 29.298 + 29.299 + <dt><dfn>''min-content''</dfn> 29.300 + <dd> 29.301 + Use the <i>min-content measure</i> or <i>min-content extent</i>, 29.302 + as appropriate to the writing mode. 29.303 + 29.304 + <dt><dfn>''fit-content''</dfn> 29.305 + <dd> 29.306 + Use the <i>fit-content measure</i> or <i>fit-content extent</i>, 29.307 + as appropriate to the writing mode. 29.308 + </dl> 29.309 + 29.310 +<h3 id='the-contain-floats-value'> 29.311 +Containing Floats</h3> 29.312 + 29.313 + <table class="propdef"> 29.314 + <tr> 29.315 + <th>Properties: 29.316 + <td>'min-width', 'min-height' 29.317 + <tr> 29.318 + <th>New Value: 29.319 + <td>''contain-floats'' 29.320 + <tr> 29.321 + <th>Initial: 29.322 + <td>as defined in [[!CSS21]] and [[!CSS3-FLEXBOX]] 29.323 + <tr> 29.324 + <th>Applies to: 29.325 + <td>as defined in [[!CSS21]] 29.326 + <tr> 29.327 + <th>Inherited: 29.328 + <td>as defined in [[!CSS21]] 29.329 + <tr> 29.330 + <th>Percentages: 29.331 + <td>as defined in [[!CSS21]] 29.332 + <tr> 29.333 + <th>Media: 29.334 + <td>as defined in [[!CSS21]] 29.335 + <tr> 29.336 + <th>Computed value: 29.337 + <td>specified value if keyword specified, else as defined in [[!CSS21]] 29.338 + </table> 29.339 + 29.340 + <dl> 29.341 + <dt><dfn>''contain-floats''</dfn> 29.342 + <dd> 29.343 + Equivalent to ''min-content'' 29.344 + except that when applied to the extent of a block box 29.345 + it forces the inner extent to be large enough to contain 29.346 + the margin boxes of any floats that originate inside the block 29.347 + and that participate in the same block formatting context as the block's immediate contents. 29.348 + </dl> 29.349 + 29.350 +<h3 id='column-sizing'> 29.351 +Column Sizing Keywords</h3> 29.352 + 29.353 + <table class="propdef"> 29.354 + <tbody> 29.355 + <tr> 29.356 + <th>Property: 29.357 + <td>'column-width' 29.358 + </tr> 29.359 + <tr> 29.360 + <th>New Values: 29.361 + <td>''min-content'' | ''max-content'' | ''fill-available'' | ''fit-content'' 29.362 + </tr> 29.363 + <tr> 29.364 + <th>Initial: 29.365 + <td>as defined in [[!CSS3COL]] 29.366 + </tr> 29.367 + <tr> 29.368 + <th>Applies to: 29.369 + <td>as defined in [[!CSS3COL]] 29.370 + </tr> 29.371 + <tr> 29.372 + <th>Inherited: 29.373 + <td>as defined in [[!CSS3COL]] 29.374 + </tr> 29.375 + <tr> 29.376 + <th>Percentages: 29.377 + <td>as defined in [[!CSS3COL]] 29.378 + </tr> 29.379 + <tr> 29.380 + <th>Media: 29.381 + <td>as defined in [[!CSS3COL]] 29.382 + </tr> 29.383 + <tr> 29.384 + <th>Computed value: 29.385 + <td>specified value if keyword specified, else as defined in [[!CSS3COL]] 29.386 + </tr> 29.387 + </tbody> 29.388 + </table> 29.389 + 29.390 + <p>When used as values for <a href="http://www.w3.org/TR/css3-multicol/#cw">'column-width'</a>, 29.391 + the new keywords specify the optimal column width: 29.392 + 29.393 + <dl> 29.394 + <dt>''min-content'' 29.395 + <dd>Specifies the optimal column width as the <i>min-content measure</i> 29.396 + of the multi-column element's contents. 29.397 + 29.398 + <dt>''max-content'' 29.399 + <dd>Specifies the optimal column width as the <i>max-content measure</i> 29.400 + of the multi-column element's contents. 29.401 + 29.402 + <dt>''fill-available'' 29.403 + <dd>Specifies the optimal column width as the <i>fill-available measure</i> 29.404 + of the multi-column element. 29.405 + 29.406 + <dt>''fit-content'' 29.407 + <dd>Specifies the optimal column width as 29.408 + <code>min(<i>max-content</i>, max(<i>min-content</i>, <i>fill-available</i>))</code>. 29.409 + </dl> 29.410 + 29.411 + 29.412 +<h2 id='intrinsic-sizing'> 29.413 +Intrinsic Sizing Determination</h2> 29.414 + 29.415 + <p> 29.416 + <dfn>Intrinsic sizing</dfn> determines sizes based on the contents of an element, 29.417 + without regard for its context. 29.418 + 29.419 + 29.420 +<h3 id='replaced-intrinsic'> 29.421 +Intrinsic Sizes of Replaced Elements</h3> 29.422 + 29.423 + <p> 29.424 + For replaced elements, 29.425 + the <i>min-content</i> and <i>max-content</i> sizes are equivalent 29.426 + and correspond to the used size of the replaced element 29.427 + according to the ''auto'' size calculation in the corresponding dimension. 29.428 + (See [[!CSS3-IMAGES]].) 29.429 + 29.430 +<h3 id='inline-intrinsic'> 29.431 +Intrinsic Sizes of Non-Replaced Inlines</h3> 29.432 + 29.433 + <p> 29.434 + The <i>min-content measure</i> of an inline box 29.435 + is the length of the largest unbreakable sequence of inline content. 29.436 + The <i>min-measure contribution</i> of an inline box 29.437 + is its <i>min-content measure</i>, 29.438 + plus any inline-axis margin, border, and padding 29.439 + adjacent to that sequence. 29.440 + 29.441 + <p> 29.442 + The <i>max-content measure</i> of an inline box 29.443 + is the length of the largest sequence of inline content 29.444 + on a single line 29.445 + when only forced line breaks are taken. 29.446 + The <i>max-measure contribution</i> of an inline box 29.447 + is its <i>max-content measure</i>, 29.448 + plus any inline-axis margin, border, and padding 29.449 + adjacent to that sequence. 29.450 + 29.451 + <p> 29.452 + The <i>min-content extent</i>, <i>max-content extent</i>, <i>min-extent contribution</i>, and <i>max-content contribution</i> of an inline box 29.453 + are the distance from the head edge of the first line box 29.454 + to the foot edge of the last line box 29.455 + on which the inline appears. 29.456 + 29.457 +<h3 id='block-intrinsic'> 29.458 +Intrinsic Sizes of Non-Replaced Blocks</h3> 29.459 + 29.460 + <p> 29.461 + The <i>min-content measure</i> of a <i>block container box</i> 29.462 + is the largest <i>min-measure contribution</i> 29.463 + of its in-flow or floated children. 29.464 + 29.465 + <p> 29.466 + The <i>max-content measure</i> of a <i>block container box</i> 29.467 + is the measure of the box after layout, 29.468 + if all children are sized under a <i>max-size constraint</i>. 29.469 + <p> 29.470 + If the computed measure of a <i>block-level box</i> 29.471 + is ''min-content'', ''max-content'', or a <i>definite size</i>, 29.472 + its <i>min-measure contribution</i> 29.473 + is that size 29.474 + plus any inline-axis margin, border, and padding. 29.475 + Otherwise, if the computed measure of the block is ''fit-content'', ''auto'', or ''fill-available'', 29.476 + its <i>min-measure contribution</i> 29.477 + is its <i>min-content measure</i> 29.478 + plus any inline-axis margin, border, and padding. 29.479 + 29.480 + <p> 29.481 + If the computed measure of a <i>block-level box</i> 29.482 + is ''min-content'', ''max-content'', or a <i>definite size</i>, 29.483 + its <i>max-measure contribution</i> 29.484 + is that size 29.485 + plus any inline-axis margin, border, and padding. 29.486 + Otherwise, if the computed measure of the block is ''fit-content'', ''auto'', or ''fill-available'', 29.487 + its <i>max-measure contribution</i> 29.488 + is its <i>max-content measure</i> 29.489 + plus any inline-axis margin, border, and padding. 29.490 + 29.491 + <p> 29.492 + The <i>min-content extent</i> and <i>max-content extent</i> of a <i>block container box</i> 29.493 + is the content extent as defined 29.494 + (for horizontal writing modes) 29.495 + in <a href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a> 29.496 + and <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a> 29.497 + for elements with ''height: auto'', 29.498 + and analogously for vertical writing modes. 29.499 + 29.500 + <p> 29.501 + The <i>min-extent contribution</i> and <i>max-extent contribution</i> of a <i>block-level box</i> 29.502 + is the extent of the block after layout, 29.503 + plus any block-axis margin, border, and padding. 29.504 + 29.505 + 29.506 +<h3 id='table-intrinsic'> 29.507 +Intrinsic Sizes in Table Layout</h3> 29.508 + 29.509 + <p class='issue'> 29.510 + ??? 29.511 + 29.512 + 29.513 + 29.514 +<h3 id="multicol-intrinsic"> 29.515 +Intrinsic Sizes in Multi-column Layout</h3> 29.516 + 29.517 + <p class='issue'> 29.518 + See 29.519 + http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html 29.520 + http://lists.w3.org/Archives/Public/www-style/2011May/0468.html 29.521 + 29.522 + <p class="issue">This section is under discussion and may be removed</p> 29.523 + 29.524 + <dl> 29.525 + <dt>min-content</dt> 29.526 + <dd>The <i>min-content</i> measure of the multi-column element is 29.527 + the <i>min-content</i> measure of the multi-column element's 29.528 + contents. 29.529 + <dt>max-content</dt> 29.530 + </dl> 29.531 + 29.532 + <p>For multi-column elements laid out with infinite available measure (see 29.533 + <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>), 29.534 + the <i>min-content</i> extent is the extent that would result 29.535 + from taking every permissible pagination break as a column break, and the 29.536 + <i>max-content</i> extent is the extent that would result from taking 29.537 + only the forced breaks. For all other multi-column elements it is, like 29.538 + CSS2.1 block-level boxes, the extent that would be calculated for an 29.539 + ''auto'' extent per [[CSS3MULTICOL]]. 29.540 + 29.541 +<pre> 29.542 +NOTES FROM ROSSEN: 29.543 + min-content measure is min(column-width, min-content) 29.544 + max-content measure is 29.545 + 1. Pass w/ colspans displ: none; 29.546 + Get width 29.547 + 2. Pass with colspans only in width 29.548 + Get remaining height 29.549 + 3. Pass w/ spans again using remaining height 29.550 + Get width 29.551 + 4. Layout in width as final 29.552 + Will lay out perfectly without colspans; will have some slack but no 29.553 + overflow when colspans present. 29.554 +</pre> 29.555 + 29.556 + 29.557 +<h2 id='extrinsic-sizing'> 29.558 +Extrinsic Sizing</h2> 29.559 + 29.560 + <p> 29.561 + <dfn>Extrinsic sizing</dfn> determines sizes based on the context of an element, 29.562 + without regard for its contents. 29.563 + 29.564 + <p> 29.565 + The inner <i>fill-available measure</i> of a box 29.566 + is the larger of… 29.567 + 29.568 + <ul> 29.569 + <li> 29.570 + Its containing block's computed 'min-measure' if that measure is <i>definite</i>, 29.571 + or zero otherwise. 29.572 + 29.573 + <li> 29.574 + The smaller of: 29.575 + 29.576 + <ul> 29.577 + <li> 29.578 + Its containing block's computed 'max-measure' if that measure is <i>definite</i>, 29.579 + or infinity otherwise. 29.580 + 29.581 + <li> 29.582 + The containing block's computed measure if that is <i>definite</i>, 29.583 + or its inner <i>fill-available measure</i> otherwise. 29.584 + </ul> 29.585 + </ul> 29.586 + 29.587 + …less the box's inline-axis margins, borders, and padding. 29.588 + 29.589 + <p> 29.590 + The <i>fill-available extent</i> of a box is defined analogously, 29.591 + but in the other dimension. 29.592 + 29.593 + 29.594 + 29.595 +<!-- 29.596 + dddddddd 29.597 +TTTTTTTTTTTTTTTTTTTTTTThhhhhhh EEEEEEEEEEEEEEEEEEEEEE d::::::d 29.598 +T:::::::::::::::::::::Th:::::h E::::::::::::::::::::E d::::::d 29.599 +T:::::::::::::::::::::Th:::::h E::::::::::::::::::::E d::::::d 29.600 +T:::::TT:::::::TT:::::Th:::::h EE::::::EEEEEEEEE::::E d:::::d 29.601 +TTTTTT T:::::T TTTTTT h::::h hhhhh eeeeeeeeeeee E:::::E EEEEEEnnnn nnnnnnnn ddddddddd:::::d 29.602 + T:::::T h::::hh:::::hhh ee::::::::::::ee E:::::E n:::nn::::::::nn dd::::::::::::::d 29.603 + T:::::T h::::::::::::::hh e::::::eeeee:::::ee E::::::EEEEEEEEEE n::::::::::::::nn d::::::::::::::::d 29.604 + T:::::T h:::::::hhh::::::h e::::::e e:::::e E:::::::::::::::E nn:::::::::::::::nd:::::::ddddd:::::d 29.605 + T:::::T h::::::h h::::::he:::::::eeeee::::::e E:::::::::::::::E n:::::nnnn:::::nd::::::d d:::::d 29.606 + T:::::T h:::::h h:::::he:::::::::::::::::e E::::::EEEEEEEEEE n::::n n::::nd:::::d d:::::d 29.607 + T:::::T h:::::h h:::::he::::::eeeeeeeeeee E:::::E n::::n n::::nd:::::d d:::::d 29.608 + T:::::T h:::::h h:::::he:::::::e E:::::E EEEEEE n::::n n::::nd:::::d d:::::d 29.609 + TT:::::::TT h:::::h h:::::he::::::::e EE::::::EEEEEEEE:::::E n::::n n::::nd::::::ddddd::::::dd 29.610 + T:::::::::T h:::::h h:::::h e::::::::eeeeeeee E::::::::::::::::::::E n::::n n::::n d:::::::::::::::::d 29.611 + T:::::::::T h:::::h h:::::h ee:::::::::::::e E::::::::::::::::::::E n::::n n::::n d:::::::::ddd::::d 29.612 + TTTTTTTTTTT hhhhhhh hhhhhhh eeeeeeeeeeeeee EEEEEEEEEEEEEEEEEEEEEE nnnnnn nnnnnn ddddddddd ddddd 29.613 +--> 29.614 + 29.615 + 29.616 +<h2 id="conformance"> 29.617 +Conformance</h2> 29.618 + 29.619 +<h3 id="conventions"> 29.620 +Document conventions</h3> 29.621 + 29.622 + <p>Conformance requirements are expressed with a combination of 29.623 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 29.624 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 29.625 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 29.626 + document are to be interpreted as described in RFC 2119. 29.627 + However, for readability, these words do not appear in all uppercase 29.628 + letters in this specification. 29.629 + 29.630 + <p>All of the text of this specification is normative except sections 29.631 + explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 29.632 + 29.633 + <p>Examples in this specification are introduced with the words “for example” 29.634 + or are set apart from the normative text with <code>class="example"</code>, 29.635 + like this: 29.636 + 29.637 + <div class="example"> 29.638 + <p>This is an example of an informative example.</p> 29.639 + </div> 29.640 + 29.641 + <p>Informative notes begin with the word “Note” and are set apart from the 29.642 + normative text with <code>class="note"</code>, like this: 29.643 + 29.644 + <p class="note">Note, this is an informative note.</p> 29.645 + 29.646 +<h3 id="conformance-classes"> 29.647 +Conformance classes</h3> 29.648 + 29.649 + <p>Conformance to <var class="replaceme">CSS Intrinsic Sizing Module</var> 29.650 + is defined for three conformance classes: 29.651 + <dl> 29.652 + <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 29.653 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 29.654 + style sheet</a>. 29.655 + <dt><dfn>renderer</dfn></dt> 29.656 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 29.657 + that interprets the semantics of a style sheet and renders 29.658 + documents that use them. 29.659 + <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 29.660 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 29.661 + that writes a style sheet. 29.662 + </dl> 29.663 + 29.664 + <p>A style sheet is conformant to <var class="replaceme">CSS Intrinsic Sizing Module</var> 29.665 + if all of its statements that use syntax defined in this module are valid 29.666 + according to the generic CSS grammar and the individual grammars of each 29.667 + feature defined in this module. 29.668 + 29.669 + <p>A renderer is conformant to <var class="replaceme">CSS Intrinsic Sizing Module</var> 29.670 + if, in addition to interpreting the style sheet as defined by the 29.671 + appropriate specifications, it supports all the features defined 29.672 + by <var class="replaceme">CSS Intrinsic Sizing Module</var> by parsing them correctly 29.673 + and rendering the document accordingly. However, the inability of a 29.674 + UA to correctly render a document due to limitations of the device 29.675 + does not make the UA non-conformant. (For example, a UA is not 29.676 + required to render color on a monochrome monitor.) 29.677 + 29.678 + <p>An authoring tool is conformant to <var class="replaceme">CSS Intrinsic Sizing Module</var> 29.679 + if it writes style sheets that are syntactically correct according to the 29.680 + generic CSS grammar and the individual grammars of each feature in 29.681 + this module, and meet all other conformance requirements of style sheets 29.682 + as described in this module. 29.683 + 29.684 +<h3 id="partial"> 29.685 +Partial implementations</h3> 29.686 + 29.687 + <p>So that authors can exploit the forward-compatible parsing rules to 29.688 + assign fallback values, CSS renderers <strong>must</strong> 29.689 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 29.690 + as appropriate</a>) any at-rules, properties, property values, keywords, 29.691 + and other syntactic constructs for which they have no usable level of 29.692 + support. In particular, user agents <strong>must not</strong> selectively 29.693 + ignore unsupported component values and honor supported values in a single 29.694 + multi-value property declaration: if any value is considered invalid 29.695 + (as unsupported values must be), CSS requires that the entire declaration 29.696 + be ignored.</p> 29.697 + 29.698 +<h3 id="experimental"> 29.699 +Experimental implementations</h3> 29.700 + 29.701 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 29.702 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 29.703 + syntax</a> for proprietary and experimental extensions to CSS. 29.704 + 29.705 + <p>Prior to a specification reaching the Candidate Recommendation stage 29.706 + in the W3C process, all implementations of a CSS feature are considered 29.707 + experimental. The CSS Working Group recommends that implementations 29.708 + use a vendor-prefixed syntax for such features, including those in 29.709 + W3C Working Drafts. This avoids incompatibilities with future changes 29.710 + in the draft. 29.711 + </p> 29.712 + 29.713 +<h3 id="testing"> 29.714 +Non-experimental implementations</h3> 29.715 + 29.716 + <p>Once a specification reaches the Candidate Recommendation stage, 29.717 + non-experimental implementations are possible, and implementors should 29.718 + release an unprefixed implementation of any CR-level feature they 29.719 + can demonstrate to be correctly implemented according to spec. 29.720 + 29.721 + <p>To establish and maintain the interoperability of CSS across 29.722 + implementations, the CSS Working Group requests that non-experimental 29.723 + CSS renderers submit an implementation report (and, if necessary, the 29.724 + testcases used for that implementation report) to the W3C before 29.725 + releasing an unprefixed implementation of any CSS features. Testcases 29.726 + submitted to W3C are subject to review and correction by the CSS 29.727 + Working Group. 29.728 + 29.729 + <p>Further information on submitting testcases and implementation reports 29.730 + can be found from on the CSS Working Group's website at 29.731 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 29.732 + Questions should be directed to the 29.733 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 29.734 + mailing list. 29.735 + 29.736 +<h3 id="cr-exit-criteria"> 29.737 +CR exit criteria</h3> 29.738 + 29.739 + <p class=issue>[Change or remove the following CR exit criteria if 29.740 + the spec is not a module, but, e.g., a Note or a profile. This text was <a 29.741 + href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p> 29.742 + 29.743 + <p> 29.744 + For this specification to be advanced to Proposed Recommendation, 29.745 + there must be at least two independent, interoperable implementations 29.746 + of each feature. Each feature may be implemented by a different set of 29.747 + products, there is no requirement that all features be implemented by 29.748 + a single product. For the purposes of this criterion, we define the 29.749 + following terms: 29.750 + 29.751 + <dl> 29.752 + <dt>independent <dd>each implementation must be developed by a 29.753 + different party and cannot share, reuse, or derive from code 29.754 + used by another qualifying implementation. Sections of code that 29.755 + have no bearing on the implementation of this specification are 29.756 + exempt from this requirement. 29.757 + 29.758 + <dt>interoperable <dd>passing the respective test case(s) in the 29.759 + official CSS test suite, or, if the implementation is not a Web 29.760 + browser, an equivalent test. Every relevant test in the test 29.761 + suite should have an equivalent test created if such a user 29.762 + agent (UA) is to be used to claim interoperability. In addition 29.763 + if such a UA is to be used to claim interoperability, then there 29.764 + must one or more additional UAs which can also pass those 29.765 + equivalent tests in the same way for the purpose of 29.766 + interoperability. The equivalent tests must be made publicly 29.767 + available for the purposes of peer review. 29.768 + 29.769 + <dt>implementation <dd>a user agent which: 29.770 + 29.771 + <ol class=inline> 29.772 + <li>implements the specification. 29.773 + 29.774 + <li>is available to the general public. The implementation may 29.775 + be a shipping product or other publicly available version 29.776 + (i.e., beta version, preview release, or “nightly build”). 29.777 + Non-shipping product releases must have implemented the 29.778 + feature(s) for a period of at least one month in order to 29.779 + demonstrate stability. 29.780 + 29.781 + <li>is not experimental (i.e., a version specifically designed 29.782 + to pass the test suite and is not intended for normal usage 29.783 + going forward). 29.784 + </ol> 29.785 + </dl> 29.786 + 29.787 + <p>The specification will remain Candidate Recommendation for at least 29.788 + six months. 29.789 + 29.790 +<h2 class=no-num id="acknowledgments"> 29.791 +Acknowledgments</h2> 29.792 + 29.793 + <p><var class="replaceme">[acknowledgments]</var></p> 29.794 + 29.795 +<h2 class=no-num id="references"> 29.796 +References</h2> 29.797 + 29.798 +<h3 class="no-num" id="normative-references"> 29.799 +Normative references</h3> 29.800 +<!--normative--> 29.801 + 29.802 +<h3 class="no-num" id="other-references"> 29.803 +Other references</h3> 29.804 +<!--informative--> 29.805 + 29.806 +<h2 class="no-num" id="index"> 29.807 +Index</h2> 29.808 +<!--index--> 29.809 + 29.810 +<h2 class="no-num" id="property-index"> 29.811 +Property index</h2> 29.812 +<!-- properties --> 29.813 + 29.814 +</body> 29.815 +</html> 29.816 +<!-- Keep this comment at the end of the file 29.817 +Local variables: 29.818 +mode: sgml 29.819 +sgml-declaration:"~/SGML/HTML4.decl" 29.820 +sgml-default-doctype-name:"html" 29.821 +sgml-minimize-attributes:t 29.822 +sgml-nofill-elements:("pre" "style" "br") 29.823 +sgml-live-element-indicator:t 29.824 +sgml-omittag:nil 29.825 +sgml-shorttag:nil 29.826 +sgml-namecase-general:t 29.827 +sgml-general-insert-case:lower 29.828 +sgml-always-quote-attributes:t 29.829 +sgml-indent-step:nil 29.830 +sgml-indent-data:t 29.831 +sgml-parent-document:nil 29.832 +sgml-exposed-tags:nil 29.833 +sgml-local-catalogs:nil 29.834 +sgml-local-ecat-files:nil 29.835 +End: 29.836 +--> 29.837 +
30.1 --- a/css3-text/Overview.html Tue Jul 31 14:04:38 2012 -0700 30.2 +++ b/css3-text/Overview.html Wed Aug 08 09:06:37 2012 -0700 30.3 @@ -32,14 +32,14 @@ 30.4 30.5 <h1>CSS Text Level 3</h1> 30.6 30.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 July 2012</h2> 30.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 August 2012</h2> 30.9 30.10 <dl> 30.11 <dt>This version: 30.12 30.13 <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS 30.14 $Revision$)</a> <!-- 30.15 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20120731/">http://www.w3.org/TR/2012/WD-css3-text-20120731/</a></dd> 30.16 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20120802/">http://www.w3.org/TR/2012/WD-css3-text-20120802/</a></dd> 30.17 --> 30.18 30.19 30.20 @@ -237,8 +237,8 @@ 30.21 Control: the ‘<code class=property>hyphens</code>’ property</a> 30.22 30.23 <li><a href="#overflow-wrap"><span class=secno>6.2. </span> Overflow 30.24 - Wrapping: the ‘<code class=property>overflow-wrap</code>’ 30.25 - property</a> 30.26 + Wrapping: the ‘<code class=property>word-wrap</code>’/‘<code 30.27 + class=property>overflow-wrap</code>’ property</a> 30.28 </ul> 30.29 30.30 <li><a href="#justification"><span class=secno>7. </span> Alignment and 30.31 @@ -1605,15 +1605,17 @@ 30.32 <!-- add a sample prioritization algorithm --> 30.33 30.34 <h3 id=overflow-wrap><span class=secno>6.2. </span> Overflow Wrapping: the 30.35 - ‘<a href="#overflow-wrap0"><code 30.36 - class=property>overflow-wrap</code></a>’ property</h3> 30.37 + ‘<a href="#word-wrap"><code class=property>word-wrap</code></a>’/‘<a 30.38 + href="#overflow-wrap0"><code class=property>overflow-wrap</code></a>’ 30.39 + property</h3> 30.40 30.41 <table class=propdef> 30.42 <tbody> 30.43 <tr> 30.44 <th>Name: 30.45 30.46 - <td><dfn id=overflow-wrap0>overflow-wrap</dfn> 30.47 + <td><dfn id=overflow-wrap0>overflow-wrap</dfn>/<dfn 30.48 + id=word-wrap>word-wrap</dfn> 30.49 30.50 <tr> 30.51 <th><a href="#values">Value</a>: 30.52 @@ -1683,10 +1685,11 @@ 30.53 are not considered when calculating ‘<code 30.54 class=css>min-content</code>’ intrinsic sizes. 30.55 30.56 - <p>For legacy reasons, UAs may also accept ‘<code 30.57 - class=property>word-wrap</code>’ as an alternate name for the ‘<a 30.58 + <p>For legacy reasons, UAs must treat ‘<a href="#word-wrap"><code 30.59 + class=property>word-wrap</code></a>’ as an alternate name for the ‘<a 30.60 href="#overflow-wrap0"><code class=property>overflow-wrap</code></a>’ 30.61 - property. However this syntax is non-conforming in author style sheets. 30.62 + property, as if it were a shorthand of ‘<a href="#overflow-wrap0"><code 30.63 + class=property>overflow-wrap</code></a>’. 30.64 30.65 <h2 id=justification><span class=secno>7. </span> Alignment and 30.66 Justification</h2> 30.67 @@ -1856,15 +1859,14 @@ 30.68 its containing block has ‘<code class=css>unicode-bidi: 30.69 plaintext</code>’ <a href="#CSS3-WRITING-MODES" 30.70 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>, 30.71 - the inline base direction the line box must be determined by the bidi 30.72 - paragraph to which it belongs: that is, the bidi paragraph that is 30.73 - immediately contained by the line box's containing block and for which the 30.74 - line box holds content. An empty line box (i.e. one that contains no 30.75 - atomic inlines or characters other than the line-breaking character, if 30.76 - any), takes its inline base direction from the preceding line box (if 30.77 - any), or, if this is the first line box in the containing block, then from 30.78 - the ‘<code class=property>direction</code>’ property of the containing 30.79 - block. 30.80 + the inline base direction the line box must be determined by the base 30.81 + direction of the bidi paragraph to which it belongs: that is, the bidi 30.82 + paragraph for which the line box holds content. An empty line box (i.e. 30.83 + one that contains no atomic inlines or characters other than the 30.84 + line-breaking character, if any), takes its inline base direction from the 30.85 + preceding line box (if any), or, if this is the first line box in the 30.86 + containing block, then from the ‘<code 30.87 + class=property>direction</code>’ property of the containing block. 30.88 30.89 <div class=example> 30.90 <p>In the following example, assuming the <code><block></code> is a 30.91 @@ -5255,7 +5257,7 @@ 30.92 <td>visual 30.93 30.94 <tr> 30.95 - <th><a class=property href="#overflow-wrap0">overflow-wrap</a> 30.96 + <th><span class=property>overflow-wrap/word-wrap</span> 30.97 30.98 <td>normal | break-word 30.99
31.1 --- a/css3-text/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 31.2 +++ b/css3-text/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 31.3 @@ -1120,13 +1120,13 @@ 31.4 <!-- add a sample prioritization algorithm --> 31.5 31.6 <h3 id="overflow-wrap"> 31.7 - Overflow Wrapping: the 'overflow-wrap' property</h3> 31.8 + Overflow Wrapping: the 'word-wrap'/'overflow-wrap' property</h3> 31.9 31.10 <table class="propdef"> 31.11 <tbody> 31.12 <tr> 31.13 <th>Name:</th> 31.14 - <td><dfn>overflow-wrap</dfn></td> 31.15 + <td><dfn>overflow-wrap</dfn>/<dfn>word-wrap</dfn></td> 31.16 </tr> 31.17 <tr> 31.18 <th><a href="#values">Value</a>: 31.19 @@ -1182,9 +1182,8 @@ 31.20 <p><i>Soft wrap opportunities</i> not part of ''overflow-wrap: normal'' line breaking 31.21 are not considered when calculating ''min-content'' intrinsic sizes. 31.22 31.23 - <p>For legacy reasons, UAs may also accept 'word-wrap' as an alternate name 31.24 - for the 'overflow-wrap' property. However this syntax is non-conforming in 31.25 - author style sheets. 31.26 + <p>For legacy reasons, UAs must treat 'word-wrap' as an alternate name 31.27 + for the 'overflow-wrap' property, as if it were a shorthand of 'overflow-wrap'. 31.28 31.29 <h2 id="justification"> 31.30 Alignment and Justification</h2> 31.31 @@ -1304,10 +1303,8 @@ 31.32 In most cases, this is given by its containing block's computed 'direction'. 31.33 However if its containing block has ''unicode-bidi: plaintext'' [[!CSS3-WRITING-MODES]], 31.34 the inline base direction the line box must be determined 31.35 - by the bidi paragraph to which it belongs: 31.36 - that is, the bidi paragraph that is immediately contained by 31.37 - the line box's containing block 31.38 - and for which the line box holds content. 31.39 + by the base direction of the bidi paragraph to which it belongs: 31.40 + that is, the bidi paragraph for which the line box holds content. 31.41 An empty line box 31.42 (i.e. one that contains no atomic inlines or 31.43 characters other than the line-breaking character, if any),
32.1 --- a/css3-writing-modes/Overview.html Tue Jul 31 14:04:38 2012 -0700 32.2 +++ b/css3-writing-modes/Overview.html Wed Aug 08 09:06:37 2012 -0700 32.3 @@ -32,7 +32,7 @@ 32.4 32.5 <h1>CSS Writing Modes Module Level 3</h1> 32.6 32.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 July 2012</h2> 32.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 August 2012</h2> 32.9 32.10 <dl> 32.11 <dt>This version: 32.12 @@ -40,7 +40,7 @@ 32.13 <dd><a 32.14 href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a> 32.15 <!-- 32.16 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120731/">http://www.w3.org/TR/2012/ED-css3-writing-modes-20120731/</a> 32.17 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120802/">http://www.w3.org/TR/2012/ED-css3-writing-modes-20120802/</a> 32.18 --> 32.19 32.20 32.21 @@ -545,9 +545,9 @@ 32.22 <p>Two CSS properties, ‘<a href="#direction0"><code 32.23 class=property>direction</code></a>’ and ‘<a 32.24 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’, 32.25 - provide explicit embedding and override controls in the CSS layer. Because 32.26 - the base directionality of a text depends on the structure and semantics 32.27 - of the document, the ‘<a href="#direction0"><code 32.28 + provide explicit embedding, isolation, and override controls in the CSS 32.29 + layer. Because the base directionality of a text depends on the structure 32.30 + and semantics of the document, the ‘<a href="#direction0"><code 32.31 class=property>direction</code></a>’ and ‘<a 32.32 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ 32.33 properties should in most cases be used only to map bidi information in 32.34 @@ -558,23 +558,18 @@ 32.35 32.36 <p>In general, the paragraph embedding level is set according to the ‘<a 32.37 href="#direction0"><code class=property>direction</code></a>’ property 32.38 - of the element <i>immediately containing</i> the paragraph rather than by 32.39 - the heuristic given in steps P2 and P3 of the Unicode algorithm. <a 32.40 - href="#UAX9" rel=biblioentry>[UAX9]<!--{{!UAX9}}--></a> When the computed 32.41 - ‘<a href="#unicode-bidi0"><code 32.42 - class=property>unicode-bidi</code></a>’ of the element <i>immediately 32.43 - containing</i> the paragraph is ‘<a href="#plaintext"><code 32.44 - class=css>plaintext</code></a>’, however, the Unicode heuristics are 32.45 - used instead. An element <dfn id=bidi-contains>immediately contains</dfn> 32.46 - a bidi paragraph if the element itself, but none of its descendants, both 32.47 - contains the entire bidi paragraph and is a block container or <a 32.48 - href="#bidi-isolate"><i>bidi-isolating</i></a> inline. 32.49 + of the paragraph's containing block rather than by the heuristic given in 32.50 + steps P2 and P3 of the Unicode algorithm. <a href="#UAX9" 32.51 + rel=biblioentry>[UAX9]<!--{{!UAX9}}--></a> When the computed ‘<a 32.52 + href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ of 32.53 + the paragraph's containing block is ‘<a href="#plaintext"><code 32.54 + class=css>plaintext</code></a>’, however, the Unicode heuristics (rules 32.55 + P2 and P3) are used instead. 32.56 32.57 <p>The HTML specifications (<a href="#HTML401" 32.58 rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section 8.2, and <a 32.59 href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, section 10.3.5) 32.60 - define bidirectionality behavior for HTML elements. The HTML 4 32.61 - specification also contains more information on bidirectionality issues. 32.62 + define bidirectionality behavior for HTML elements. 32.63 32.64 <p class=note>Because HTML UAs can turn off CSS styling, we advise HTML 32.65 authors to use the HTML ‘<code class=property>dir</code>’ attribute 32.66 @@ -629,11 +624,12 @@ 32.67 </table> 32.68 32.69 <p>This property specifies the inline base direction or directionality of 32.70 - any bidi paragraph, embedding, or override established by the element. 32.71 - (See ‘<a href="#unicode-bidi0"><code 32.72 - class=property>unicode-bidi</code></a>’) In addition, it informs the 32.73 - ordering of <a href="http://www.w3.org/TR/CSS21/tables.html">table</a> 32.74 - column layout, the direction of horizontal <a 32.75 + any bidi paragraph, embedding, isolate, or override established by the 32.76 + element. (See ‘<a href="#unicode-bidi0"><code 32.77 + class=property>unicode-bidi</code></a>’.) <!-- except plaintext --> In 32.78 + addition, it informs the ordering of <a 32.79 + href="http://www.w3.org/TR/CSS21/tables.html">table</a> column layout, the 32.80 + direction of horizontal <a 32.81 href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>, and 32.82 the default alignment of text within a line, and other layout effects that 32.83 depend on the element's inline base direction. 32.84 @@ -729,9 +725,9 @@ 32.85 <p>Normally (i.e. when ‘<a href="#unicode-bidi0"><code 32.86 class=property>unicode-bidi</code></a>’ is ‘<a href="#normal"><code 32.87 class=css>normal</code></a>’) an inline element is transparent to the 32.88 - unicode bidi algorithm; content is ordered as if the element boundaries 32.89 - were not there. The ‘<a href="#unicode-bidi0"><code 32.90 - class=property>unicode-bidi</code></a>’ property allows inline elements 32.91 + unicode bidi algorithm; content is ordered as if the element's boundaries 32.92 + were not there. Other values of the ‘<a href="#unicode-bidi0"><code 32.93 + class=property>unicode-bidi</code></a>’ property cause inline elements 32.94 to create scopes within the algorithm, and to override the intrinsic 32.95 directionality of text. 32.96 32.97 @@ -808,51 +804,74 @@ 32.98 32.99 <dt><dfn id=embed>embed</dfn> 32.100 32.101 - <dd>If the element is inline, this value opens an additional level of 32.102 - embedding with respect to the bidirectional algorithm. The direction of 32.103 - this embedding level is given by the ‘<a href="#direction0"><code 32.104 - class=property>direction</code></a>’ property. Inside the element, 32.105 - reordering is done implicitly. This corresponds to adding a LRE (U+202A), 32.106 - for ‘<code class=css>direction: ltr</code>’, or RLE (U+202B), for 32.107 - ‘<code class=css>direction: rtl</code>’, at the start of the element 32.108 - and a PDF (U+202C) at the end of the element. <span class=note>This value 32.109 - has no effect on elements that are not inline.</span> 32.110 + <dd>If the element is inline, this value creates a <dfn 32.111 + id=directional-embedding>directional embedding</dfn> by opening an 32.112 + additional level of embedding with respect to the bidirectional 32.113 + algorithm. The direction of this embedding level is given by the ‘<a 32.114 + href="#direction0"><code class=property>direction</code></a>’ property. 32.115 + Inside the element, reordering is done implicitly. This corresponds to 32.116 + adding a LRE (U+202A), for ‘<code class=css>direction: ltr</code>’, 32.117 + or RLE (U+202B), for ‘<code class=css>direction: rtl</code>’, at the 32.118 + start of the element and a PDF (U+202C) at the end of the element. <span 32.119 + class=note>This value has no effect on elements that are not 32.120 + inline.</span> 32.121 32.122 <dt><dfn id=isolate>isolate</dfn> 32.123 32.124 <dd>On an inline element, this <dfn id=bidi-isolate 32.125 title="bidi-isolate|bidi isolation|isolation">bidi-isolates</dfn> its 32.126 - contents: for the purpose of bidi resolution in its containing bidi 32.127 - paragraph (if any), the element is treated as if it were an Object 32.128 - Replacement Character (U+FFFC). (If the element is broken across multiple 32.129 - lines, then each box of the element is treated as an Object Replacement 32.130 - Character.) Within the element, its contents are considered, for the 32.131 - purposes of bidi resolution, to be inside a separate, independent 32.132 - document whose <a href="#paragraph"><i>bidi paragraphs</i></a> are 32.133 - assigned the base directionality specified by the element's ‘<a 32.134 - href="#direction0"><code class=property>direction</code></a>’ property. 32.135 + contents. This is similar to a directional embedding (and increases the 32.136 + embedding level accordingly) except that each sequence of inline-level 32.137 + boxes uninterrupted by any block boundary or <a 32.138 + href="#forced-paragraph-break"><i>forced paragraph break</i></a> is 32.139 + treated as an <dfn id=isolated-sequence->isolated sequence<dfn>: 32.140 + </dfn></dfn> 32.141 + <ul> 32.142 + <li>the content within the sequence is ordered as if inside an 32.143 + independent paragraph with the base directionality specified by the 32.144 + element's ‘<a href="#direction0"><code 32.145 + class=property>direction</code></a>’ property. 32.146 + 32.147 + <li>for the purpose of bidi resolution in its containing bidi paragraph, 32.148 + the sequence is treated as if it were a single Object Replacement 32.149 + Character (U+FFFC). 32.150 + </ul> 32.151 + In effect, neither is the content inside the element bidi-affected by the 32.152 + content surrounding the element, nor is the content surrounding the 32.153 + element bidi-affected by the content or specified directionality of the 32.154 + element. However, <a href="#forced-paragraph-break"><i>forced paragraph 32.155 + breaks</i></a> within the element still create a corresponding break in 32.156 + the containing paragraph. 32.157 + <p class=note>In Unicode 7.0 and beyond, this will correspond to adding 32.158 + an LRI (U+2066), for ‘<code class=css>direction: ltr</code>’, or RLI 32.159 + (U+2067), for ‘<code class=css>direction: rtl</code>’, at the start 32.160 + of the element, and a PDI (U+2069) at the end of the element. 32.161 + 32.162 + <p class=note>This value has no effect on elements that are not inline. 32.163 32.164 <dt><dfn id=bidi-override>bidi-override</dfn> 32.165 32.166 - <dd>For inline elements this creates an <dfn id=override>override</dfn>. 32.167 - (For block-container elements this creates an <a 32.168 - href="#override"><i>override</i></a> for inline-level descendants not 32.169 - within another block container element.) This means that inside the 32.170 - element, reordering is strictly in sequence according to the ‘<a 32.171 - href="#direction0"><code class=property>direction</code></a>’ property; 32.172 - the implicit part of the bidirectional algorithm is ignored. This 32.173 - corresponds to adding a LRO (U+202D), for ‘<code class=css>direction: 32.174 - ltr</code>’, or RLO (U+202E), for ‘<code class=css>direction: 32.175 - rtl</code>’, at the start of the element and a PDF (U+202C) at the end 32.176 - of the element. 32.177 + <dd>This value puts the element's immediate content in a <dfn 32.178 + id=directional-override>directional override</dfn>. For an inline, this 32.179 + means that the element acts like a <a 32.180 + href="#directional-embedding"><i>directional embedding</i></a> in the 32.181 + bidirectional algorithm, except that reordering within it is strictly in 32.182 + sequence according to the ‘<a href="#direction0"><code 32.183 + class=property>direction</code></a>’ property; the implicit part of the 32.184 + bidirectional algorithm is ignored. This corresponds to adding a LRO 32.185 + (U+202D), for ‘<code class=css>direction: ltr</code>’, or RLO 32.186 + (U+202E), for ‘<code class=css>direction: rtl</code>’, at the start 32.187 + of the element and a PDF (U+202C) at the end of the element. If the 32.188 + element is a block container, the override is applied to an anonymous 32.189 + inline element that surrounds all of its content. 32.190 32.191 <dt><dfn id=isolate-override>isolate-override<dfn></dfn></dfn> 32.192 32.193 <dd>This combines the <a href="#bidi-isolate"><i>isolation</i></a> 32.194 behavior of ‘<a href="#isolate"><code class=css>isolate</code></a>’ 32.195 - with the <a href="#override"><i>override</i></a> behavior of ‘<a 32.196 - href="#bidi-override"><code class=css>bidi-override</code></a>’: to 32.197 - surrounding content, it is equivalent to ‘<a href="#isolate"><code 32.198 + with the <i>override</i> behavior of ‘<a href="#bidi-override"><code 32.199 + class=css>bidi-override</code></a>’: to surrounding content, it is 32.200 + equivalent to ‘<a href="#isolate"><code 32.201 class=css>isolate</code></a>’, but within the element content is 32.202 ordered as if ‘<a href="#bidi-override"><code 32.203 class=css>bidi-override</code></a>’ were specified. 32.204 @@ -863,11 +882,16 @@ 32.205 <p>This value behaves as ‘<a href="#isolate"><code 32.206 class=css>isolate</code></a>’ except that for the purposes of the 32.207 Unicode bidirectional algorithm, the base directionality of each of the 32.208 - element's <a href="#paragraph"><i>bidi paragraphs</i></a> is determined 32.209 - by following the heuristic in rules P2 and P3 of the Unicode 32.210 - bidirectional algorithm (rather than by using the ‘<a 32.211 - href="#direction0"><code class=property>direction</code></a>’ property 32.212 - of the element). 32.213 + element's <a href="#paragraph"><i>bidi paragraphs</i></a> (if a block 32.214 + container) or <a href="#isolated-sequence-"><i>isolated 32.215 + sequences</i></a> (if an inline) is determined by following the 32.216 + heuristic in rules P2 and P3 of the Unicode bidirectional algorithm 32.217 + (rather than by using the ‘<a href="#direction0"><code 32.218 + class=property>direction</code></a>’ property of the element). 32.219 + 32.220 + <p class=note>In Unicode 7.0 and beyond, for inline elements this will 32.221 + correspond to adding an FSI (U+2068) at the start of the element, and a 32.222 + PDI (U+2069) at the end of the element. 32.223 </dl> 32.224 32.225 <p class=note>Because the ‘<a href="#unicode-bidi0"><code 32.226 @@ -906,22 +930,38 @@ 32.227 <p>If an inline element is broken around a <a href="#paragraph"><i>bidi 32.228 paragraph</i></a> boundary (e.g. if split by a block or <a 32.229 href="#forced-paragraph-break"><i>forced paragraph break</i></a>), then 32.230 - the bidi control codes corresponding to the end of the element are added 32.231 - before the interruption and the codes corresponding to the start of the 32.232 - element are added after it. (In other words, any embedding levels or 32.233 - overrides started by the element are closed at the paragraph break and 32.234 - reopened on the other side of it.) 32.235 - 32.236 - <p>Because the Unicode algorithm has a limit of 61 levels of embedding, 32.237 - care should be taken not to use ‘<a href="#unicode-bidi0"><code 32.238 - class=property>unicode-bidi</code></a>’ with a value other than ‘<a 32.239 - href="#normal"><code class=property>normal</code></a>’ unless 32.240 - appropriate. In particular, a value of ‘<code 32.241 - class=css>inherit</code>’ should be used with extreme caution. However, 32.242 - for elements that are, in general, intended to be displayed as blocks, a 32.243 - setting of ‘<code class=css>unicode-bidi: isolate</code>’ is preferred 32.244 - to keep the element together in case the ‘<code 32.245 - class=property>display</code>’ is changed to ‘<code 32.246 + the bidi control codes assigned to the end of the element are added before 32.247 + the interruption and the codes assigned to the start of the element are 32.248 + added after it. (In other words, any embedding levels or overrides started 32.249 + by the element are closed at the paragraph break and reopened on the other 32.250 + side of it.) 32.251 + 32.252 + <div class=example> 32.253 + <p>For example, where <BR/> is a <a 32.254 + href="#forced-paragraph-break"><i>forced paragraph break</i></a> the bidi 32.255 + ordering is identical between 32.256 + 32.257 + <pre><para>...<i1><i2>...<BR/>...</i2><i1>...</para></pre> 32.258 + 32.259 + <p>and 32.260 + 32.261 + <pre><para>...<i1><i2>...</i2><i1><BR/><i1><i2>...</i2><i1>...</para></pre> 32.262 + 32.263 + <p>for all values of ‘<a href="#unicode-bidi0"><code 32.264 + class=property>unicode-bidi</code></a>’ on inline elements <i1> 32.265 + and <i2>. 32.266 + </div> 32.267 + 32.268 + <p class=note> Because the Unicode algorithm has a limit of 61 levels of 32.269 + embedding, care should be taken not to use ‘<a 32.270 + href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ with 32.271 + a value other than ‘<a href="#normal"><code 32.272 + class=property>normal</code></a>’ unless appropriate. In particular, a 32.273 + value of ‘<code class=css>inherit</code>’ should be used with extreme 32.274 + caution. However, for elements that are, in general, intended to be 32.275 + displayed as blocks, a setting of ‘<code class=css>unicode-bidi: 32.276 + isolate</code>’ is preferred to keep the element together in case the 32.277 + ‘<code class=property>display</code>’ is changed to ‘<code 32.278 class=css>inline</code>’ (see example below). 32.279 32.280 <h3 id=bidi-example><span class=secno>2.3. </span> Example of Bidirectional 32.281 @@ -4048,8 +4088,8 @@ 32.282 32.283 <p>For replaced elements, the <a href="#min-content"><i>min-content</i></a> 32.284 and <a href="#max-content"><i>max-content</i></a> sizes are equivalent and 32.285 - correspond used size of the replaced element according to the ‘<code 32.286 - class=css>auto</code>’ width and height calculations. 32.287 + correspond to the used size of the replaced element according to the 32.288 + ‘<code class=css>auto</code>’ width and height calculations. 32.289 32.290 <h3 class=no-num id=multicol-intrinsic> Intrinsic Sizes in Multi-column 32.291 Layout</h3>
33.1 --- a/css3-writing-modes/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 33.2 +++ b/css3-writing-modes/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 33.3 @@ -237,7 +237,7 @@ 33.4 <a href="#bidi-isolate"><i>bidi-isolated</i></a> inline element also forms a <i>bidi paragraph</i>. 33.5 33.6 <p>Two CSS properties, 'direction' and 'unicode-bidi', 33.7 - provide explicit embedding and override controls in the CSS layer. 33.8 + provide explicit embedding, isolation, and override controls in the CSS layer. 33.9 Because the base directionality of a text depends on the structure and 33.10 semantics of the document, the 'direction' and 'unicode-bidi' properties 33.11 should in most cases be used only to map bidi information in the markup 33.12 @@ -247,18 +247,13 @@ 33.13 specify CSS rules to override them.</p> 33.14 33.15 <p>In general, the paragraph embedding level is set according to 33.16 - the 'direction' property of the element <i>immediately containing</i> the paragraph 33.17 + the 'direction' property of the paragraph's containing block 33.18 rather than by the heuristic given in steps P2 and P3 of the Unicode algorithm. [[!UAX9]] 33.19 - When the computed 'unicode-bidi' of the element <i>immediately containing</i> the paragraph is ''plaintext'', 33.20 - however, the Unicode heuristics are used instead. 33.21 - An element <dfn id=bidi-contains>immediately contains</dfn> a bidi paragraph 33.22 - if the element itself, but none of its descendants, 33.23 - both contains the entire bidi paragraph 33.24 - and is a block container or <a href="#bidi-isolate"><i>bidi-isolating</i></a> inline. 33.25 + When the computed 'unicode-bidi' of the paragraph's containing block is ''plaintext'', 33.26 + however, the Unicode heuristics (rules P2 and P3) are used instead. 33.27 33.28 <p>The HTML specifications ([[HTML401]], section 8.2, and [[HTML5]], section 10.3.5) define 33.29 - bidirectionality behavior for HTML elements. The HTML 4 specification 33.30 - also contains more information on bidirectionality issues.</p> 33.31 + bidirectionality behavior for HTML elements.</p> 33.32 33.33 <p class="note">Because HTML UAs can turn off CSS styling, we advise HTML 33.34 authors to use the HTML 'dir' attribute and <bdo> element to 33.35 @@ -305,8 +300,8 @@ 33.36 </table> 33.37 33.38 <p>This property specifies the inline base direction or directionality 33.39 - of any bidi paragraph, embedding, or override established by the element. 33.40 - (See 'unicode-bidi') 33.41 + of any bidi paragraph, embedding, isolate, or override established by the element. 33.42 + (See 'unicode-bidi'.) <!-- except plaintext --> 33.43 In addition, it informs the ordering of 33.44 <a href="http://www.w3.org/TR/CSS21/tables.html">table</a> column layout, 33.45 the direction of horizontal <a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>, 33.46 @@ -383,8 +378,9 @@ 33.47 33.48 <p>Normally (i.e. when 'unicode-bidi' is ''normal'') 33.49 an inline element is transparent to the unicode bidi algorithm; 33.50 - content is ordered as if the element boundaries were not there. 33.51 - The 'unicode-bidi' property allows inline elements to create scopes within the algorithm, 33.52 + content is ordered as if the element's boundaries were not there. 33.53 + Other values of the 'unicode-bidi' property cause inline elements 33.54 + to create scopes within the algorithm, 33.55 and to override the intrinsic directionality of text. 33.56 33.57 <p>The following informative table summarizes the element-internal and 33.58 @@ -422,8 +418,8 @@ 33.59 respect to the bidirectional algorithm. For inline elements, 33.60 implicit reordering works across element boundaries.</dd> 33.61 <dt><dfn>embed</dfn></dt> 33.62 - <dd>If the element is inline, this value opens an additional level 33.63 - of embedding with respect to the bidirectional algorithm. 33.64 + <dd>If the element is inline, this value creates a <dfn>directional embedding</dfn> 33.65 + by opening an additional level of embedding with respect to the bidirectional algorithm. 33.66 The direction of this embedding level is given by the 'direction' 33.67 property. Inside the element, reordering is done implicitly. This 33.68 corresponds to adding a LRE (U+202A), for 'direction: ltr', or RLE 33.69 @@ -432,26 +428,41 @@ 33.70 <span class="note">This value has no effect on elements that are 33.71 not inline.</span></dd> 33.72 <dt><dfn>isolate</dfn></dt> 33.73 - <dd>On an inline element, this <dfn id=bidi-isolate title="bidi-isolate|bidi isolation|isolation">bidi-isolates</dfn> its contents: 33.74 - for the purpose of bidi resolution in its containing bidi paragraph (if any), 33.75 - the element is treated as if it were an Object Replacement Character (U+FFFC). 33.76 - (If the element is broken across multiple lines, then each box 33.77 - of the element is treated as an Object Replacement Character.) 33.78 - Within the element, its contents are considered, 33.79 - for the purposes of bidi resolution, 33.80 - to be inside a separate, independent document 33.81 - whose <i>bidi paragraphs</i> are assigned the base directionality 33.82 - specified by the element's 'direction' property.</dd> 33.83 + <dd>On an inline element, this <dfn id=bidi-isolate title="bidi-isolate|bidi isolation|isolation">bidi-isolates</dfn> its contents. 33.84 + This is similar to a directional embedding (and increases the embedding level accordingly) 33.85 + except that each sequence of inline-level boxes 33.86 + uninterrupted by any block boundary or <i>forced paragraph break</i> 33.87 + is treated as an <dfn>isolated sequence<dfn>: 33.88 + <ul> 33.89 + <li>the content within the sequence is ordered 33.90 + as if inside an independent paragraph 33.91 + with the base directionality specified by the element's 'direction' property. 33.92 + <li>for the purpose of bidi resolution in its containing bidi paragraph, 33.93 + the sequence is treated as if it were a single Object Replacement Character (U+FFFC). 33.94 + </ul> 33.95 + In effect, neither is the content inside the element bidi-affected 33.96 + by the content surrounding the element, 33.97 + nor is the content surrounding the element bidi-affected by the 33.98 + content or specified directionality of the element. 33.99 + However, <i>forced paragraph breaks</i> within the element still create 33.100 + a corresponding break in the containing paragraph. 33.101 + <p class="note">In Unicode 7.0 and beyond, 33.102 + this will correspond to adding an LRI (U+2066), for ''direction: ltr'', 33.103 + or RLI (U+2067), for ''direction: rtl'', at the start of the element, 33.104 + and a PDI (U+2069) at the end of the element. 33.105 + <p class="note">This value has no effect on elements that are not inline.</span> 33.106 <dt><dfn>bidi-override</dfn></dt> 33.107 - <dd>For inline elements this creates an <dfn>override</dfn>. 33.108 - (For block-container elements this creates an <i>override</i> 33.109 - for inline-level descendants not within another block container element.) 33.110 - This means that inside the element, 33.111 - reordering is strictly in sequence according to the 33.112 + <dd>This value puts the element's immediate content in a <dfn>directional override</dfn>. 33.113 + For an inline, this means that the element acts like a <i>directional embedding</i> 33.114 + in the bidirectional algorithm, 33.115 + except that reordering within it is strictly in sequence according to the 33.116 'direction' property; the implicit part of the bidirectional algorithm 33.117 is ignored. This corresponds to adding a LRO (U+202D), for ''direction: 33.118 ltr'', or RLO (U+202E), for ''direction: rtl'', at the start of the 33.119 - element and a PDF (U+202C) at the end of the element.</dd> 33.120 + element and a PDF (U+202C) at the end of the element. 33.121 + If the element is a block container, 33.122 + the override is applied to an anonymous inline element 33.123 + that surrounds all of its content.</dd> 33.124 <dt><dfn>isolate-override<dfn></dt> 33.125 <dd>This combines the <i>isolation</i> behavior of ''isolate'' with the 33.126 <i>override</i> behavior of ''bidi-override'': to surrounding content, 33.127 @@ -460,9 +471,14 @@ 33.128 <dt><dfn>plaintext</dfn></dt> 33.129 <dd><p>This value behaves as ''isolate'' except that for the purposes of 33.130 the Unicode bidirectional algorithm, the base directionality of each 33.131 - of the element's <i>bidi paragraphs</i> is determined by following the 33.132 - heuristic in rules P2 and P3 of the Unicode bidirectional algorithm 33.133 + of the element's <i>bidi paragraphs</i> (if a block container) 33.134 + or <i>isolated sequences</i> (if an inline) 33.135 + is determined by following the heuristic in rules P2 and P3 33.136 + of the Unicode bidirectional algorithm 33.137 (rather than by using the 'direction' property of the element). 33.138 + <p class="note">In Unicode 7.0 and beyond, for inline elements 33.139 + this will correspond to adding an FSI (U+2068) at the start of the element, 33.140 + and a PDI (U+2069) at the end of the element. 33.141 </dl> 33.142 33.143 <p class=note>Because the 'unicode-bidi' property does not inherit, 33.144 @@ -492,13 +508,23 @@ 33.145 33.146 <p>If an inline element is broken around a <i>bidi paragraph</i> 33.147 boundary (e.g. if split by a block or <i>forced paragraph break</i>), then 33.148 - the bidi control codes corresponding to the end of the element are 33.149 - added before the interruption and the codes corresponding to the 33.150 + the bidi control codes assigned to the end of the element 33.151 + are added before the interruption and the codes assigned to the 33.152 start of the element are added after it. (In other words, any embedding 33.153 levels or overrides started by the element are closed at the paragraph 33.154 break and reopened on the other side of it.) 33.155 33.156 - <p>Because the Unicode algorithm has a limit of 61 levels of embedding, 33.157 + <div class="example"> 33.158 + <p>For example, where <BR/> is a <i>forced paragraph break</i> 33.159 + the bidi ordering is identical between 33.160 + <pre><para>...<i1><i2>...<BR/>...</i2><i1>...</para></pre> 33.161 + <p>and 33.162 + <pre><para>...<i1><i2>...</i2><i1><BR/><i1><i2>...</i2><i1>...</para></pre> 33.163 + <p>for all values of 'unicode-bidi' on inline elements <i1> and <i2>. 33.164 + </div> 33.165 + 33.166 + <p class="note"> 33.167 + Because the Unicode algorithm has a limit of 61 levels of embedding, 33.168 care should be taken not to use 'unicode-bidi' 33.169 with a value other than 'normal' unless appropriate. 33.170 In particular, a value of ''inherit''
34.1 --- a/css4-images/Overview.html Tue Jul 31 14:04:38 2012 -0700 34.2 +++ b/css4-images/Overview.html Wed Aug 08 09:06:37 2012 -0700 34.3 @@ -16,14 +16,14 @@ 34.4 34.5 <h1>CSS Image Values and Replaced Content Module Level 4</h1> 34.6 34.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 July 2012</h2> 34.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 August 2012</h2> 34.9 34.10 <dl> 34.11 <dt>This Version: 34.12 34.13 <dd><a 34.14 href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a> 34.15 - <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20120727/">http://www.w3.org/TR/2012/WD-css4-images-20120727/</a>--> 34.16 + <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20120807/">http://www.w3.org/TR/2012/WD-css4-images-20120807/</a>--> 34.17 <!-- 34.18 <dt>Latest Version: 34.19 <dd><a href="http://www.w3.org/TR/css4-images/">http://www.w3.org/TR/css4-images/</a> 34.20 @@ -174,18 +174,22 @@ 34.21 Bidi-sensitive Images</a> 34.22 </ul> 34.23 34.24 - <li><a href="#element-notation"><span class=secno>4.3. </span> Using 34.25 + <li><a href="#image-set-notation"><span class=secno>4.3. </span> 34.26 + Resolution Negotiation: the ‘<code class=css>image-set()</code>’ 34.27 + notation</a> 34.28 + 34.29 + <li><a href="#element-notation"><span class=secno>4.4. </span> Using 34.30 Elements as Images: the ‘<code class=css>element()</code>’ 34.31 notation</a> 34.32 <ul class=toc> 34.33 - <li><a href="#paint-sources"><span class=secno>4.3.1. </span> Paint 34.34 + <li><a href="#paint-sources"><span class=secno>4.4.1. </span> Paint 34.35 Sources</a> 34.36 34.37 - <li><a href="#element-cycles"><span class=secno>4.3.2. </span> Cycle 34.38 + <li><a href="#element-cycles"><span class=secno>4.4.2. </span> Cycle 34.39 Detection</a> 34.40 </ul> 34.41 34.42 - <li><a href="#cross-fade-function"><span class=secno>4.4. </span> 34.43 + <li><a href="#cross-fade-function"><span class=secno>4.5. </span> 34.44 Combining images: the ‘<code class=css>cross-fade()</code>’ 34.45 notation</a> 34.46 </ul> 34.47 @@ -200,12 +204,17 @@ 34.48 Gradients: the ‘<code class=css>radial-gradient()</code>’ 34.49 notation</a> 34.50 34.51 - <li><a href="#repeating-gradients"><span class=secno>5.3. </span> 34.52 + <li><a href="#conic-gradients"><span class=secno>5.3. </span> Conic 34.53 + Gradients: the ‘<code class=css>conic-gradient()</code>’ 34.54 + notation</a> 34.55 + 34.56 + <li><a href="#repeating-gradients"><span class=secno>5.4. </span> 34.57 Repeating Gradients: the ‘<code 34.58 - class=css>repeating-linear-gradient()</code>’ and ‘<code 34.59 - class=css>repeating-radial-gradient()</code>’ notations</a> 34.60 - 34.61 - <li><a href="#color-stop-syntax"><span class=secno>5.4. </span> Gradient 34.62 + class=css>repeating-linear-gradient()</code>’, ‘<code 34.63 + class=css>repeating-radial-gradient()</code>’, and ‘<code 34.64 + class=css>repeating-conic-gradient()</code>’ notations</a> 34.65 + 34.66 + <li><a href="#color-stop-syntax"><span class=secno>5.5. </span> Gradient 34.67 Color-Stops</a> 34.68 </ul> 34.69 34.70 @@ -249,6 +258,10 @@ 34.71 <li><a href="#the-image-orientation"><span class=secno>7.2. </span> 34.72 Orienting an Image on the Page: the ‘<code 34.73 class=property>image-orientation</code>’ property</a> 34.74 + 34.75 + <li><a href="#the-image-rendering"><span class=secno>7.3. </span> 34.76 + Determing How To Scale an Image: the ‘<code 34.77 + class=property>image-rendering</code>’ property</a> 34.78 </ul> 34.79 34.80 <li><a href="#interpolation"><span class=secno>8. </span> 34.81 @@ -279,7 +292,7 @@ 34.82 34.83 <li><a href="#serializing-element-notation"><span class=secno>9.4. 34.84 </span> Serializing the ‘<code class=css>element()</code>’ / 34.85 - <i><element-reference></i> notation</a> 34.86 + <i><element-image></i> notation</a> 34.87 34.88 <li><a href="#serializing-cross-fade"><span class=secno>9.5. </span> 34.89 Serializing the ‘<code class=css>cross-fade()</code>’ / 34.90 @@ -339,7 +352,7 @@ 34.91 class=property>background-image</code>’ property, could only be given by 34.92 a single URL value. This module introduces additional ways of representing 34.93 2D images, for example as <a href="#image-notation">a list of URIs 34.94 - denoting fallbacks</a>, as <a href="#element-reference">a reference to an 34.95 + denoting fallbacks</a>, as <a href="#element-image">a reference to an 34.96 element</a>, or as <a href="#gradients">a gradient</a>. 34.97 34.98 <p> This module also defines several properties for <a 34.99 @@ -444,6 +457,10 @@ 34.100 <dt><dfn id=dppx>‘<code class=css>dppx</code>’</dfn> 34.101 34.102 <dd>dots per ‘<code class=css>px</code>’ unit 34.103 + 34.104 + <dt><dfn id=x>‘<code class=css>x</code>’</dfn> 34.105 + 34.106 + <dd>identical to ‘<a href="#dppx"><code class=css>dppx</code></a>’ 34.107 </dl> 34.108 34.109 <p> The ‘<a href="#resolution-type"><code 34.110 @@ -479,11 +496,12 @@ 34.111 <p> The ‘<a href="#image-type"><code class=css><image></code></a>’ 34.112 value type denotes a 2D image. It can be a <a href="#url-notation">url 34.113 reference</a>, <a href="#image-notation">image notation</a>, 34.114 - <!-- <a href="#element-reference">element reference</a>, --> or <a 34.115 + <!-- <a href="#element-image">element reference</a>, --> or <a 34.116 href="#gradients">gradient notation</a>. Its syntax is: 34.117 34.118 <pre class=prod><dfn id=image-type><image></dfn> = <i><url></i> | <a 34.119 href="#image-list-type"><i><image-list></i></a> | <a 34.120 + href="#image-set-type"><i><image-set></i></a> | <a 34.121 href="#gradient-type"><i><gradient></i></a></pre> 34.122 34.123 <p> An ‘<a href="#image-type"><code class=css><image></code></a>’ 34.124 @@ -584,9 +602,12 @@ 34.125 <p> The ‘<code class=css>image()</code>’ notation is defined as: 34.126 34.127 <pre class=prod><br><!-- 34.128 - --><dfn 34.129 - id=image-list-type><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )<br><!-- 34.130 - --><dfn 34.131 + --><dfn 34.132 + id=image-list-type><image-list></dfn> = image( <image-annotations>? [ <image-decl> , ]* [ <image-decl> | <color> ] )<br><!-- 34.133 + --><dfn 34.134 + id=image-annotations-type><image-annotations></dfn> = [ ltr | rtl ] 34.135 +<!-- 34.136 + --><dfn 34.137 id=image-decl-type><image-decl></dfn> = [ <url> | <string> ]</pre> 34.138 34.139 <p> Each ‘<code class=css><string></code>’ or ‘<code 34.140 @@ -737,18 +758,20 @@ 34.141 34.142 <h4 id=bidi-images><span class=secno>4.2.4. </span> Bidi-sensitive Images</h4> 34.143 34.144 - <p> Along with each ‘<a href="#image-decl-type"><code 34.145 - class=css><image-decl></code></a>’, the author may specify a 34.146 - directionality, similar to adding a <code>dir</code> attribute to an 34.147 - element in HTML. The ‘<code class=css>image()</code>’ function takes 34.148 - on the directionality of the used ‘<a href="#image-decl-type"><code 34.149 - class=css><image-decl></code></a>’, if any. If a directional image is 34.150 - used on or in an element with opposite <a 34.151 + <p> Before listing any <a 34.152 + href="#image-decl-type"><code><image-decl>s</code></a>, the author may 34.153 + specify a directionality for the image, similar to adding a 34.154 + <code>dir</code> attribute to an element in HTML. If a directional image 34.155 + is used on or in an element with opposite <a 34.156 href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, 34.157 the image must be flipped in the inline direction (as if it was 34.158 transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is 34.159 the X axis). 34.160 34.161 + <p class=note> Note that, absent this declaration, images default to no 34.162 + directionality at all, and thus don't care about the directionality of the 34.163 + surrounding element. 34.164 + 34.165 <div class=example> 34.166 <p> A list may use an arrow for a bullet that points into the content. If 34.167 the list can contain both LTR and RTL text, though, the bullet may be on 34.168 @@ -757,7 +780,7 @@ 34.169 with code like: 34.170 34.171 <pre><!-- 34.172 - --><ul style="list-style-image: image("arrow.png" ltr);"> 34.173 + --><ul style="list-style-image: image(ltr 'arrow.png');"> 34.174 <!-- 34.175 --> <li dir='ltr'>My bullet is on the left!</li> 34.176 <!-- 34.177 @@ -776,6 +799,140 @@ 34.178 items, however, it will be flipped in the inline direction, so it still 34.179 points into the content. 34.180 </div> 34.181 + <!-- 34.182 + iiii tttt 34.183 + i::::i ttt:::t 34.184 + iiii t:::::t 34.185 + t:::::t 34.186 +iiiiiii mmmmmmm mmmmmmm aaaaaaaaaaaaa ggggggggg ggggg eeeeeeeeeeee ssssssssss eeeeeeeeeeee ttttttt:::::ttttttt 34.187 +i:::::i mm:::::::m m:::::::mm a::::::::::::a g:::::::::ggg::::g ee::::::::::::ee ss::::::::::s ee::::::::::::ee t:::::::::::::::::t 34.188 + i::::i m::::::::::mm::::::::::m aaaaaaaaa:::::a g:::::::::::::::::g e::::::eeeee:::::eess:::::::::::::s e::::::eeeee:::::eet:::::::::::::::::t 34.189 + i::::i m::::::::::::::::::::::m a::::ag::::::ggggg::::::gge::::::e e:::::es::::::ssss:::::se::::::e e:::::etttttt:::::::tttttt 34.190 + i::::i m:::::mmm::::::mmm:::::m aaaaaaa:::::ag:::::g g:::::g e:::::::eeeee::::::e s:::::s ssssss e:::::::eeeee::::::e t:::::t 34.191 + i::::i m::::m m::::m m::::m aa::::::::::::ag:::::g g:::::g e:::::::::::::::::e s::::::s e:::::::::::::::::e t:::::t 34.192 + i::::i m::::m m::::m m::::m a::::aaaa::::::ag:::::g g:::::g e::::::eeeeeeeeeee s::::::s e::::::eeeeeeeeeee t:::::t 34.193 + i::::i m::::m m::::m m::::ma::::a a:::::ag::::::g g:::::g e:::::::e ssssss s:::::s e:::::::e t:::::t tttttt 34.194 +i::::::im::::m m::::m m::::ma::::a a:::::ag:::::::ggggg:::::g e::::::::e s:::::ssss::::::se::::::::e t::::::tttt:::::t 34.195 +i::::::im::::m m::::m m::::ma:::::aaaa::::::a g::::::::::::::::g e::::::::eeeeeeee s::::::::::::::s e::::::::eeeeeeee tt::::::::::::::t 34.196 +i::::::im::::m m::::m m::::m a::::::::::aa:::a gg::::::::::::::g ee:::::::::::::e s:::::::::::ss ee:::::::::::::e tt:::::::::::tt 34.197 +iiiiiiiimmmmmm mmmmmm mmmmmm aaaaaaaaaa aaaa gggggggg::::::g eeeeeeeeeeeeee sssssssssss eeeeeeeeeeeeee ttttttttttt 34.198 + g:::::g 34.199 + gggggg g:::::g 34.200 + g:::::gg gg:::::g 34.201 + g::::::ggg:::::::g 34.202 + gg:::::::::::::g 34.203 + ggg::::::ggg 34.204 + gggggg 34.205 +--> 34.206 + 34.207 + <h3 id=image-set-notation><span class=secno>4.3. </span> Resolution 34.208 + Negotiation: the ‘<code class=css>image-set()</code>’ notation</h3> 34.209 + 34.210 + <p> Delivering the most appropriate image resolution for a user's device 34.211 + can be a difficult task. Ideally, images should be in the same resolution 34.212 + as the device they're being viewed in, which can vary between users. 34.213 + However, other factors can factor into the decision of which image to 34.214 + send; for example, if the user is on a slow mobile connection, they may 34.215 + prefer to receive lower-res images rather than waiting for a large 34.216 + proper-res image to load. The ‘<code class=css>image-set()</code>’ 34.217 + function allows an author to ignore most of these issues, simply providing 34.218 + multiple resolutions of an image and letting the UA decide which is most 34.219 + appropriate in a given situation. 34.220 + 34.221 + <p> The syntax for ‘<code class=css>image-set()</code>’ is: 34.222 + 34.223 + <pre class=prod> 34.224 +<!-- 34.225 + --><dfn 34.226 + id=image-set-type><image-set></dfn> = image-set( [ <a 34.227 + href="#image-set-decl-type"><i><image-set-decl></i></a>, ]* [ <a 34.228 + href="#image-set-decl-type"><i><image-set-decl></i></a> | <color>] ) 34.229 +<!-- 34.230 + --><dfn 34.231 + id=image-set-decl-type><image-set-decl></dfn> = [ <url> | <string> ] <a 34.232 + href="#resolution-type"><i><resolution></i></a></pre> 34.233 + 34.234 + <p> Each ‘<code class=css><string></code>’ or ‘<code 34.235 + class=css><url></code>’ inside ‘<code 34.236 + class=css>image-set()</code>’ represents an image, just as if the <a 34.237 + href="#url-notation">‘<code class=css>url()</code>’ notation</a> had 34.238 + been used. As usual for URLs in CSS, relative URLs are resolved to an 34.239 + absolute URL (as described in Values & Units <a href="#CSS3VAL" 34.240 + rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>) when a specified 34.241 + ‘<code class=css>image-set()</code>’ value is computed. 34.242 + 34.243 + <p class=issue> I want image-set() to be able to take other types of 34.244 + <image>s, like ‘<code class=css>image()</code>’ (and vice versa). 34.245 + But what happens if I nest image-set() inside of image-set()? Is it 34.246 + invalid, regardless of how deep the occurrence is? If valid, what does it 34.247 + means if the resolutions match? If they don't? 34.248 + 34.249 + <p> Every <a href="#image-set-decl-type"><i><image-set-decl></i></a> in 34.250 + a given ‘<code class=css>image-set()</code>’ must have a different <a 34.251 + href="#resolution-type"><i><resolution></i></a>, or else the function 34.252 + is invalid. 34.253 + 34.254 + <p> The value that a given ‘<code class=css>image-set()</code>’ 34.255 + represents is determined by the UA first ordering the set of <a 34.256 + href="#image-set-decl-type"><i><image-set-decl></i></a>s in a 34.257 + UA-defined order (which should be based on the <a 34.258 + href="#resolution-type"><i><resolution></i></a> of each <a 34.259 + href="#image-set-decl-type"><i><image-set-decl></i></a>, but may 34.260 + include other factors that the UA deems relevant, such as connection 34.261 + speed). The function then represents the first such image that is not an 34.262 + <a href="#invalid-image"><i>invalid image</i></a>. If a fallback color was 34.263 + provided, the UA may decide at any point that the remaining <a 34.264 + href="#image-set-decl-type"><i><image-set-decl></i></a>s are 34.265 + unsuitable, and choose to use the fallback color instead, in which case 34.266 + the function represents a solid-color image of the given color with no <a 34.267 + href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. If 34.268 + <em>all</em> of the <a 34.269 + href="#image-set-decl-type"><i><image-set-decl></i></a>s represent <a 34.270 + href="#invalid-image"><i>invalid images</i></a>, then if a fallback color 34.271 + was provided, the function represents a solid-color image of the given 34.272 + color with no <a href="#intrinsic-dimensions"><i>intrinsic 34.273 + dimensions</i></a>; otherwise, the function represents an <a 34.274 + href="#invalid-image"><i>invalid image</i></a>. 34.275 + 34.276 + <p class=issue> It's been suggested that we don't need the fallback 34.277 + behavior here, and should instead just choose one resource and stick with 34.278 + it, allowing authors to nest image() if they want to do fallback. That's 34.279 + not strictly the same, and it's more verbose, but it may be enough. If we 34.280 + remove the fallback behavior, we can probably kill the <color> as well, 34.281 + unless we think it's important to avoid the verbosity of a wrapping 34.282 + ‘<code class=css>image(image-set(...), blue)</code>’. 34.283 + 34.284 + <p> If an <a href="#image-set-decl-type"><i><image-set-decl></i></a> is 34.285 + chosen and successfully loaded, the associated <a 34.286 + href="#resolution-type"><i><resolution></i></a> is the image's <a 34.287 + href="#intrinsic-resolution"><i>intrinsic resolution</i></a>. 34.288 + 34.289 + <p class=issue> It's been suggested that we don't need a full 34.290 + <resolution> here, and should instead just use the ‘<a 34.291 + href="#x"><code class=css>x</code></a>’ unit by itself. This seems silly 34.292 + to me, since the ‘<a href="#x"><code class=css>x</code></a>’ unit is 34.293 + just an easier synonym for ‘<a href="#dppx"><code 34.294 + class=css>dppx</code></a>’, but thoughts? Beyond theoretical purity 34.295 + considerations, it seems that ‘<a href="#dpi"><code 34.296 + class=css>dpi</code></a>’ can be useful for use-cases involving 34.297 + printing, where dpi is actually used to talk about images and having an 34.298 + integer correlation between dots and pixels is either unnecessary or 34.299 + strictly non-sensical (as the screening resolution can depend on the 34.300 + colors being used). 34.301 + 34.302 + <div class=example> 34.303 + <p> This example shows how to use ‘<code class=css>image-set()</code>’ 34.304 + to provide an image in three versions: a "normal" version, a "high-res" 34.305 + version, and an extra-high resolution version for use in high-quality 34.306 + printing (as printers can have <em>extremely</em> high resolution): 34.307 + 34.308 + <pre><!-- 34.309 + -->background-image: image-set( "foo.png" 1x, 34.310 +<!-- 34.311 + --> "foo-2x.png" 2x, 34.312 +<!-- 34.313 + --> "foo-print.png" 600dpi );</pre> 34.314 + </div> 34.315 <!-- 34.316 EEEEEEEEEEEEEEEEEEEEEElllllll tttt 34.317 E::::::::::::::::::::El:::::l ttt:::t 34.318 @@ -795,7 +952,7 @@ 34.319 EEEEEEEEEEEEEEEEEEEEEEllllllll eeeeeeeeeeeeee mmmmmm mmmmmm mmmmmm eeeeeeeeeeeeee nnnnnn nnnnnn ttttttttttt 34.320 --> 34.321 34.322 - <h3 id=element-notation><span class=secno>4.3. </span> Using Elements as 34.323 + <h3 id=element-notation><span class=secno>4.4. </span> Using Elements as 34.324 Images: the ‘<code class=css>element()</code>’ notation</h3> 34.325 34.326 <p> The ‘<code class=css>element()</code>’ function allows an author to 34.327 @@ -816,7 +973,7 @@ 34.328 <p> The syntax for ‘<code class=css>element()</code>’ is: 34.329 34.330 <pre class=prod><dfn 34.331 - id=element-reference-type><element-reference></dfn> = element( <id-selector> )</pre> 34.332 + id=element-image-type><element-image></dfn> = element( <id-selector> )</pre> 34.333 34.334 <p> where ‘<code class=css><id-selector></code>’ is an ID selector 34.335 <a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>. 34.336 @@ -1097,7 +1254,7 @@ 34.337 preview boxes to help navigate through the page. 34.338 </div> 34.339 34.340 - <h4 id=paint-sources><span class=secno>4.3.1. </span> Paint Sources</h4> 34.341 + <h4 id=paint-sources><span class=secno>4.4.1. </span> Paint Sources</h4> 34.342 34.343 <p> Host languages may define that some elements provide a <dfn 34.344 id=paint-source title=paint-source>paint source</dfn>. Paint sources have 34.345 @@ -1147,7 +1304,7 @@ 34.346 define ways to refer to paint sources in external documents, or ones that 34.347 are created solely by script and never inserted into a document at all. 34.348 34.349 - <h4 id=element-cycles><span class=secno>4.3.2. </span> Cycle Detection</h4> 34.350 + <h4 id=element-cycles><span class=secno>4.4.2. </span> Cycle Detection</h4> 34.351 34.352 <p> The ‘<code class=css>element()</code>’ function can produce 34.353 nonsensical circular relationships, such as an element using itself as its 34.354 @@ -1193,7 +1350,7 @@ 34.355 --> 34.356 34.357 34.358 - <h3 id=cross-fade-function><span class=secno>4.4. </span> Combining images: 34.359 + <h3 id=cross-fade-function><span class=secno>4.5. </span> Combining images: 34.360 the ‘<code class=css>cross-fade()</code>’ notation</h3> 34.361 34.362 <p> When transitioning between images, CSS requires a way to explicitly 34.363 @@ -1265,12 +1422,18 @@ 34.364 of a <a href="#gradient-type"><i><gradient></i></a> is: 34.365 34.366 <pre class=prod><dfn id=gradient-type><gradient></dfn> = [ 34.367 - <a 34.368 +<!-- 34.369 + --> <a 34.370 href="#linear-gradient-type"><i><linear-gradient></i></a> | <a 34.371 - href="#radial-gradient-type"><i><radial-gradient></i></a> | 34.372 - <a 34.373 - href="#repeating-linear-gradient-type"><i><repeating-linear-gradient></i></a> | <a 34.374 - href="#repeating-radial-gradient-type"><i><repeating-radial-gradient></i></a> ]</pre> 34.375 + href="#repeating-linear-gradient-type"><i><repeating-linear-gradient></i></a> | 34.376 +<!-- 34.377 + --> <a 34.378 + href="#radial-gradient-type"><i><radial-gradient></i></a> | <a 34.379 + href="#repeating-radial-gradient-type"><i><repeating-radial-gradient></i></a> | 34.380 +<!-- 34.381 + --> <a 34.382 + href="#conic-gradient-type"><i><conic-gradient></i></a> | <a 34.383 + href="#repeating-conic-gradient-type"><i><repeating-conic-gradient></i></a> ]</pre> 34.384 34.385 <div class=example> 34.386 <p> As with the other <a href="#image-type"><i><image></i></a> types 34.387 @@ -1567,6 +1730,13 @@ 34.388 <pre>radial-gradient(5em circle at top left, yellow, blue)</pre> 34.389 </div> 34.390 34.391 + <p class=issue> Should we add the ability to move the "focus" of the 34.392 + gradient (that is, have the 0% point be different from the center of the 34.393 + gradient-shape)? The original -webkit-gradient() could do this, and it 34.394 + seems useful. Suggestion would be to add a "focus <position>" clause, 34.395 + and maybe a "focus-offset <lenper>{1,2}" as well, to offset the focus 34.396 + from the center. 34.397 + 34.398 <p> The arguments are defined as follows: 34.399 34.400 <dl> 34.401 @@ -1840,6 +2010,111 @@ 34.402 <p><img alt="" src="images/radial7.png"> 34.403 </div> 34.404 <!-- 34.405 + CCCCCCCCCCCCC iiii 34.406 + CCC::::::::::::C i::::i 34.407 + CC:::::::::::::::C iiii 34.408 + C:::::CCCCCCCC::::C 34.409 + C:::::C CCCCCC ooooooooooo nnnn nnnnnnnn iiiiiii cccccccccccccccc 34.410 +C:::::C oo:::::::::::oo n:::nn::::::::nn i:::::i cc:::::::::::::::c 34.411 +C:::::C o:::::::::::::::on::::::::::::::nn i::::i c:::::::::::::::::c 34.412 +C:::::C o:::::ooooo:::::onn:::::::::::::::n i::::i c:::::::cccccc:::::c 34.413 +C:::::C o::::o o::::o n:::::nnnn:::::n i::::i c::::::c ccccccc 34.414 +C:::::C o::::o o::::o n::::n n::::n i::::i c:::::c 34.415 +C:::::C o::::o o::::o n::::n n::::n i::::i c:::::c 34.416 + C:::::C CCCCCCo::::o o::::o n::::n n::::n i::::i c::::::c ccccccc 34.417 + C:::::CCCCCCCC::::Co:::::ooooo:::::o n::::n n::::ni::::::ic:::::::cccccc:::::c 34.418 + CC:::::::::::::::Co:::::::::::::::o n::::n n::::ni::::::i c:::::::::::::::::c 34.419 + CCC::::::::::::C oo:::::::::::oo n::::n n::::ni::::::i cc:::::::::::::::c 34.420 + CCCCCCCCCCCCC ooooooooooo nnnnnn nnnnnniiiiiiii cccccccccccccccc 34.421 +--> 34.422 + 34.423 + <h3 id=conic-gradients><span class=secno>5.3. </span> Conic Gradients: the 34.424 + ‘<code class=css>conic-gradient()</code>’ notation</h3> 34.425 + 34.426 + <p> A conic gradient starts by specifying the center of a circle, similar 34.427 + to radial gradients, except that conic gradient color-stops are placed 34.428 + <em>around</em> the circumference of the circle, rather than on a line 34.429 + emerging from the center, causing the color to smoothly transition as you 34.430 + spin around the center, rather than as you progress outward from the 34.431 + center. 34.432 + 34.433 + <p> A conic gradient is specified by indicating the center of the gradient, 34.434 + and then specifying a list of color-stops. Unlike linear and radial 34.435 + gradients, whose color-stops are placed by specifying a <a 34.436 + href="#radial-size-circle"><code><length></code></a>, the color-stops 34.437 + of a conic gradient are specified with an <code><angle></code>. Rays 34.438 + are then drawn emerging from the center and pointing in all directions, 34.439 + with the color of each ray equal to the color of the gradient-line where 34.440 + they intersect it. 34.441 + 34.442 + <p class=note> These gradients are called "conic" or "conical" because, if 34.443 + the color stops are chosen to be significantly lighter on one side than 34.444 + the other, it produces a pattern that looks like a cone observed from 34.445 + above. 34.446 + 34.447 + <h4 class=no-toc id=conic-gradient-syntax><span class=secno>5.3.1. </span> 34.448 + ‘<code class=css>conic-gradient()</code>’ Syntax</h4> 34.449 + 34.450 + <p> The syntax for a conic gradient is: 34.451 + 34.452 + <pre class=prod><!-- 34.453 + --><dfn 34.454 + id=conic-gradient-type><conic-gradient></dfn> = conic-gradient( 34.455 +<!-- 34.456 + --> [ at <position> , ]? 34.457 +<!-- 34.458 + --> <angular-color-stop> [ , <angular-color-stop> ]+ 34.459 +<!-- 34.460 + -->)</pre> 34.461 + 34.462 + <p> The <a href="#position"><code><position></code></a> argument is 34.463 + defined in [!CSS3VAL], and is resolved using the center-point as the 34.464 + object area and the gradient box as the positioning area. If this argument 34.465 + is omitted, it defaults to ‘<code class=css>at center</code>’. 34.466 + 34.467 + <p> The <a 34.468 + href="#angular-color-stop-type"><code><angular-color-stop></code></a> 34.469 + is defined in the section on color-stops. 34.470 + 34.471 + <p class=issue> Anything else that might be useful? Defining the shape of 34.472 + the gradient as elliptical, perhaps? 34.473 + 34.474 + <h4 class=no-toc id=conic-color-stops><span class=secno>5.3.2. </span> 34.475 + Placing Color Stops</h4> 34.476 + 34.477 + <p> Color stops are placed on a <a href="#gradient-line"><i>gradient 34.478 + line</i></a> that curves around the center in a circle, with both the 0% 34.479 + and 100% locations at 0deg. Just like linear gradients, 0deg points to the 34.480 + top of the page, and increasing angles correspond to clockwise movement 34.481 + around the circle. 34.482 + 34.483 + <p class=note> It may be more helpful to think of the gradient line as 34.484 + forming a spiral, where only the segment from 0deg to 360deg is rendered. 34.485 + This avoids any confusion about "overlap" when you have angles outside of 34.486 + the rendered region. 34.487 + 34.488 + <p> A color-stop can be placed at a location before 0% or after 100%; 34.489 + though these regions are never directly consulted for rendering, color 34.490 + stops placed there can affect the color of color-stops within the rendered 34.491 + region through interpolation or repetition (see <a 34.492 + href="#repeating-gradients">repeating gradients</a>). For example, 34.493 + ‘<code class=css>conic-gradient(red -50%, yellow 150%)</code>’ 34.494 + produces a conic gradient that starts with a reddish-orange color at 0deg 34.495 + (specifically, #f50), and transitions to an orangish-yellow color at 34.496 + 360deg (specifically, #fa0). 34.497 + 34.498 + <p> The color of the gradient at any point is determined by first finding 34.499 + the unique ray anchored at the center of the gradient that passes through 34.500 + the given point. The point's color is then the color of the <a 34.501 + href="#gradient-line"><i>gradient line</i></a> at the location where this 34.502 + ray intersects it. 34.503 + 34.504 + <h4 class=no-toc id=conic-gradient-examples><span class=secno>5.3.3. 34.505 + </span> Conic Gradient Examples</h4> 34.506 + 34.507 + <p class=issue> Produce examples. Better yet, strike this section, and 34.508 + intermix some examples into the sections above. Do this for the other two 34.509 + types of gradients as well. <!-- 34.510 RRRRRRRRRRRRRRRRR tttt iiii 34.511 R::::::::::::::::R ttt:::t i::::i 34.512 R::::::RRRRRR:::::R t:::::t iiii 34.513 @@ -1864,20 +2139,25 @@ 34.514 ppppppppp ggg::::::ggg 34.515 34.516 --> 34.517 - 34.518 - <h3 id=repeating-gradients><span class=secno>5.3. </span> Repeating 34.519 - Gradients: the ‘<code class=css>repeating-linear-gradient()</code>’ 34.520 - and ‘<code class=css>repeating-radial-gradient()</code>’ notations</h3> 34.521 + 34.522 + 34.523 + <h3 id=repeating-gradients><span class=secno>5.4. </span> Repeating 34.524 + Gradients: the ‘<code class=css>repeating-linear-gradient()</code>’, 34.525 + ‘<code class=css>repeating-radial-gradient()</code>’, and ‘<code 34.526 + class=css>repeating-conic-gradient()</code>’ notations</h3> 34.527 34.528 <p> In addition to <a 34.529 - href="#linear-gradient-type"><i><linear-gradient></i></a> and <a 34.530 - href="#radial-gradient-type"><i><radial-gradient></i></a>, this 34.531 + href="#linear-gradient-type"><i><linear-gradient></i></a>, <a 34.532 + href="#radial-gradient-type"><i><radial-gradient></i></a>, and <a 34.533 + href="#conic-gradient-type"><i><conic-gradient></i></a>, this 34.534 specification defines <dfn 34.535 - id=repeating-linear-gradient-type><repeating-linear-gradient></dfn> and 34.536 + id=repeating-linear-gradient-type><repeating-linear-gradient></dfn>, 34.537 <dfn 34.538 - id=repeating-radial-gradient-type><repeating-radial-gradient></dfn> 34.539 - values. These two notations take the same values and are interpreted the 34.540 - same as their respective non-repeating siblings defined previously. 34.541 + id=repeating-radial-gradient-type><repeating-radial-gradient></dfn>, 34.542 + and <dfn 34.543 + id=repeating-conic-gradient-type><repeating-conic-gradient></dfn> 34.544 + values. These notations take the same values and are interpreted the same 34.545 + as their respective non-repeating siblings defined previously. 34.546 34.547 <p> When rendered, however, the color-stops are repeated infinitely in both 34.548 directions, with their positions shifted by multiples of the difference 34.549 @@ -1905,6 +2185,10 @@ 34.550 <pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre> 34.551 34.552 <p><img alt="" src="images/repeating3.png"> 34.553 + 34.554 + <pre>repeating-conic-gradient(at 20%, white 0deg, white 20deg, red 20deg, red 40deg)</pre> 34.555 + 34.556 + <p class=issue>Insert rendering here. 34.557 </div> 34.558 34.559 <p> If the distance between the first and last color-stops is non-zero, but 34.560 @@ -1995,21 +2279,34 @@ 34.561 ppppppppp 34.562 --> 34.563 34.564 - <h3 id=color-stop-syntax><span class=secno>5.4. </span> Gradient 34.565 + <h3 id=color-stop-syntax><span class=secno>5.5. </span> Gradient 34.566 Color-Stops</h3> 34.567 34.568 <pre class=prod><dfn 34.569 - id=color-stop-type><color-stop></dfn> = <color> [ <percentage> | <length> ]?</pre> 34.570 - 34.571 - <p> Color-stops are points placed along the line defined by the <a 34.572 - href="#gradient-line"><i>gradient line</i></a> at the beginning of the 34.573 - rule. Color-stops must be specified in order. Percentages refer to the 34.574 - length of the gradient line, with 0% being at the starting point and 100% 34.575 - being at the ending point. Lengths are measured from the starting point in 34.576 - the direction of the ending point. Color-stops are usually placed between 34.577 - the starting point and ending point, but that's not required; the gradient 34.578 - line extends infinitely in both directions, and a color-stop can be placed 34.579 - at any position on the line. 34.580 + id=color-stop-type><color-stop></dfn> = <color> [ <percentage> | <length> ]{0,2}</pre> 34.581 + 34.582 + <pre class=prod><dfn 34.583 + id=angular-color-stop-type><angular-color-stop></dfn> = <color> [ <percentage> | <angle> ]{0,2}</pre> 34.584 + 34.585 + <p> Color-stops are points placed along the <a 34.586 + href="#gradient-line"><i>gradient line</i></a> defined by the gradient 34.587 + function in which the color-stop is used. Color-stops must be specified in 34.588 + order. Percentages refer to the length of the gradient line, with 0% being 34.589 + at the starting point and 100% being at the ending point. Lengths are 34.590 + measured from the starting point in the direction of the ending point. 34.591 + Angles are measured with 0deg pointing up, and positive angles 34.592 + corresponding to clockwise rotations. Color-stops are usually placed 34.593 + between the starting point and ending point, but that's not required; the 34.594 + gradient line extends infinitely in both directions, and a color-stop can 34.595 + be placed at any position on the line. 34.596 + 34.597 + <p> A color-stop with two locations is exactly equivalent to specifying two 34.598 + color-stops with the same color, one at each location, including how it 34.599 + reacts to the clean-up steps below. <span class=note>Specifying two 34.600 + locations makes it easier to create solid-color "stripes" in a gradient, 34.601 + without having to repeat the color twice.</span> 34.602 + 34.603 + <p class=issue> Make sure this is handled well in the serialization rules. 34.604 34.605 <p> At each color-stop, the line is the color of the color-stop. Between 34.606 two color-stops, the line's color is linearly interpolated between the 34.607 @@ -2037,6 +2334,13 @@ 34.608 with positions. 34.609 </ol> 34.610 34.611 + <p class=issue> This requires us to wait until <em>after</em> layout to do 34.612 + fix-up, because implied-position stops (set by step 3) may depend on stops 34.613 + that need layout information to place, and which may be corrected by step 34.614 + 2. Swapping steps 2 and 3 would let us interpolate color-stops purely at 34.615 + computed-value time, which is a nice plus, at the cost of changing 34.616 + behavior from level 3 for some edge cases that triggered fixup. 34.617 + 34.618 <p> If multiple color-stops have the same position, they produce an 34.619 infinitesimal transition from the one specified first in the rule to the 34.620 one specified last. In effect, the color suddenly changes at that position 34.621 @@ -2833,6 +3137,17 @@ 34.622 for ‘<code class=css>snap</code>’ (see below) 34.623 </table> 34.624 34.625 + <p class=issue> The ‘<code class=css>image-set()</code>’ notation can 34.626 + alter the intrinsic resolution of an image, which ideally would be 34.627 + automatically honored without having to set this property. How should we 34.628 + best address this? Change the initial value to ‘<a 34.629 + href="#image-rendering-auto"><code class=css>auto</code></a>’, meaning 34.630 + "1dppx, unless CSS says otherwise"? Say that image-resolution has no 34.631 + effect on images whose resolution was set by something else in CSS? Or 34.632 + somehow wordsmithing ‘<code class=css>image-set()</code>’ in some way 34.633 + such that it always produces ‘<code class=css>1dppx</code>’ images 34.634 + somehow? 34.635 + 34.636 <p> The ‘<a href="#image-resolution"><code 34.637 class=property>image-resolution</code></a>’ property specifies the <a 34.638 href="#intrinsic-resolution"><i>intrinsic resolution</i></a> of all raster 34.639 @@ -2850,7 +3165,8 @@ 34.640 <dd> Specifies the intrinsic resolution explicitly. A "dot" in this case 34.641 corresponds to a single image pixel. 34.642 34.643 - <dt>‘<code class=css>from-image</code>’ 34.644 + <dt>‘<a href="#image-orientation-from-image"><code 34.645 + class=css>from-image</code></a>’ 34.646 34.647 <dd> The image's intrinsic resolution is taken as that specified by the 34.648 image format. If the image does not specify its own resolution, the 34.649 @@ -2946,13 +3262,6 @@ 34.650 apply an "out-of-band" rotation to image source data to correctly orient 34.651 an image. 34.652 34.653 - <p class=note> Note that some devices will "tag" an image with some 34.654 - metadata indicating its correct orientation, so image viewing software can 34.655 - do the necessary transformation themselves. Due to legacy compatibility 34.656 - restraints, Web browsers are required to ignore this data by default. A 34.657 - future level of this specification is expected to have a value that 34.658 - applies the metadata-specified transformation automatically. 34.659 - 34.660 <p class=note> Note that this property is not intended to specify layout 34.661 transformations such as arbitrary rotation or flipping the image in the 34.662 horizontal or vertical direction. (See <a href="#CSS3-2D-TRANSFORMS" 34.663 @@ -2973,7 +3282,7 @@ 34.664 <tr> 34.665 <th><a href="#values">Value:</a> 34.666 34.667 - <td><angle> 34.668 + <td><angle> | from-image 34.669 34.670 <tr> 34.671 <th>Initial: 34.672 @@ -2998,7 +3307,7 @@ 34.673 <tr> 34.674 <th>Computed value: 34.675 34.676 - <td>specified value, rounded and normalized (see text) 34.677 + <td>an <angle>, rounded and normalized (see text) 34.678 </table> 34.679 34.680 <p> This property specifies an orthogonal rotation to be applied to an 34.681 @@ -3015,13 +3324,31 @@ 34.682 dimension of the image, <em>after</em> rotation. 34.683 </ul> 34.684 34.685 - <p> Positive values cause the image to be rotated to the right (in a 34.686 - clockwise direction), while negative values cause a rotation to the left. 34.687 - The computed value of the property is calculated by rounding the specified 34.688 - angle to the nearest quarter-turn (90deg, 100grad, .25turn, etc.), 34.689 - rounding away from 0 (that is, 45deg is rounded to 90deg, while -45deg is 34.690 - rounded to -90deg), then moduloing the value by 1 turn (360deg, 400grad, 34.691 - etc.). 34.692 + <p> Values have the following meanings: 34.693 + 34.694 + <dl> 34.695 + <dt><code><angle></code> 34.696 + 34.697 + <dd> Positive values cause the image to be rotated to the right (in a 34.698 + clockwise direction), while negative values cause a rotation to the left. 34.699 + The computed value of the property is calculated by rounding the 34.700 + specified angle to the nearest quarter-turn (90deg, 100grad, .25turn, 34.701 + etc.), rounding away from 0 (that is, 45deg is rounded to 90deg, while 34.702 + -45deg is rounded to -90deg), then moduloing the value by 1 turn (360deg, 34.703 + 400grad, etc.). 34.704 + 34.705 + <dt><dfn id=image-orientation-from-image>from-image</dfn> 34.706 + 34.707 + <dd> If the image has an orientation specified in its metadata, such as 34.708 + EXIF, this value computes to the angle that the metadata specifies is 34.709 + necessary to correctly orient the image. If necessary, this angle is then 34.710 + rounded and normalized as described above for an <code><angle></code> 34.711 + value. If there is no orientation specified in its metadata, this value 34.712 + computes to ‘<code class=css>0deg</code>’. 34.713 + <p class=issue> Do we need to handle the "unnatural" EXIF orientations? 34.714 + This would imply adding a ‘<code class=css>flip</code>’ keyword to 34.715 + go along with <angle>. 34.716 + </dl> 34.717 34.718 <p> The ‘<a href="#image-orientation"><code 34.719 class=property>image-orientation</code></a>’ property must be applied 34.720 @@ -3042,7 +3369,99 @@ 34.721 <p> The same effect could be achieved with, for example, an angle of 34.722 -270deg or 450deg. 34.723 </div> 34.724 - <!-- 34.725 + 34.726 + <h3 id=the-image-rendering><span class=secno>7.3. </span> Determing How To 34.727 + Scale an Image: the ‘<a href="#image-rendering"><code 34.728 + class=property>image-rendering</code></a>’ property</h3> 34.729 + 34.730 + <table class=propdef> 34.731 + <tbody> 34.732 + <tr> 34.733 + <th>Name: 34.734 + 34.735 + <td><dfn id=image-rendering>image-rendering</dfn> 34.736 + 34.737 + <tr> 34.738 + <th><a href="#values">Value:</a> 34.739 + 34.740 + <td>auto | crisp-edges | pixelated 34.741 + 34.742 + <tr> 34.743 + <th>Initial: 34.744 + 34.745 + <td>auto 34.746 + 34.747 + <tr> 34.748 + <th>Applies to: 34.749 + 34.750 + <td>all elements 34.751 + 34.752 + <tr> 34.753 + <th>Inherited: 34.754 + 34.755 + <td>yes 34.756 + 34.757 + <tr> 34.758 + <th>Media: 34.759 + 34.760 + <td>visual 34.761 + 34.762 + <tr> 34.763 + <th>Computed value: 34.764 + 34.765 + <td>specified value 34.766 + </table> 34.767 + 34.768 + <p> The ‘<a href="#image-rendering"><code 34.769 + class=property>image-rendering</code></a>’ property provides a hint to 34.770 + the user-agent about what aspects of an image are most important to 34.771 + preserve when the image is scaled, to aid the user-agent in the choice of 34.772 + an appropriate scaling algorithm. When specified on an element, it applies 34.773 + to all images given in properties for the element, such as background 34.774 + images, list-style images, or the content of replaced elements when they 34.775 + represent an image that must be scaled. The values of the ‘<a 34.776 + href="#image-rendering"><code class=property>image-rendering</code></a>’ 34.777 + property are interpreted as follows: 34.778 + 34.779 + <dl> 34.780 + <dt><dfn id=image-rendering-auto>auto</dfn> 34.781 + 34.782 + <dd> The image should be scaled with an algorithm that maximizes the 34.783 + appearance of the image. In particular, scaling algorithms that "smooth" 34.784 + colors are acceptable, such as bilinear interpolation. This is intended 34.785 + for images such as photos. 34.786 + 34.787 + <dt><dfn id=image-rendering-crisp-edges>crisp-edges</dfn> 34.788 + 34.789 + <dd> The image must be scaled with an algorithm that preserves contrast 34.790 + and edges in the image, and which does not smooth colors or introduce 34.791 + blur to the image in the process. This is intended for images such as 34.792 + pixel art. 34.793 + 34.794 + <dt><dfn id=image-rendering-pixelated>pixelated</dfn> 34.795 + 34.796 + <dd> When scaling the image up, the "nearest neighbor" or similar 34.797 + algorithm must be used, so that the image appears to be simply composed 34.798 + of very large pixels. When scaling down, this is the same as <a 34.799 + href="#image-rendering-auto">‘<code class=css>auto</code>’</a>. 34.800 + </dl> 34.801 + 34.802 + <p> This property does not dictate any particular scaling algorithm to be 34.803 + used. For example, with ‘<code class=css>image-rendering:auto</code>’, 34.804 + a user agent might scale images with bilinear interpolation by default, 34.805 + switch to nearest-neighbor interpolation in high-load situations, and 34.806 + switch to a high-quality scaling algorithm like Lanczos interpolation for 34.807 + static images that aren't moving or changing. Similarly, with ‘<code 34.808 + class=css>image-rendering:crisp-edges</code>’, a user agent might scale 34.809 + images with nearest-neighbor interpolation by default, and switch to EPX 34.810 + interpolation in low-load situations. 34.811 + 34.812 + <p> This property previously accepted the values ‘<code 34.813 + class=property>optimizeSpeed</code>’ and ‘<code 34.814 + class=property>optimizeQuality</code>’. These are now deprecated; a user 34.815 + agent may accept them as valid values, but must treat them as having the 34.816 + same behavior as <a href="#image-rendering-auto">‘<code 34.817 + class=css>auto</code>’</a>. <!-- 34.818 IIIIIIIIII tttt 34.819 I::::::::I ttt:::t 34.820 I::::::::I t:::::t 34.821 @@ -3066,6 +3485,7 @@ 34.822 p:::::::p 34.823 ppppppppp 34.824 --> 34.825 + 34.826 34.827 <h2 id=interpolation><span class=secno>8. </span> Interpolation</h2> 34.828 34.829 @@ -3275,10 +3695,10 @@ 34.830 34.831 <h3 id=serializing-element-notation><span class=secno>9.4. </span> 34.832 Serializing the ‘<code class=css>element()</code>’ / <a 34.833 - href="#element-reference-type"><i><element-reference></i></a> notation</h3> 34.834 + href="#element-image-type"><i><element-image></i></a> notation</h3> 34.835 34.836 <p> To serialize an <a 34.837 - href="#element-reference-type"><i><element-reference></i></a>: 34.838 + href="#element-image-type"><i><element-image></i></a>: 34.839 34.840 <ol> 34.841 <li> Append "element(" to s. 34.842 @@ -3442,11 +3862,13 @@ 34.843 class=property>image-resolution</code></a>’ property: 34.844 34.845 <ol> 34.846 - <li> If the ‘<code class=css>from-image</code>’ keyword is specified 34.847 - in the property value, append "from-image" to s. 34.848 - 34.849 - <li> If both the ‘<code class=css>from-image</code>’ keyword and a 34.850 - <resolution> are specified, append a space " " to s. 34.851 + <li> If the ‘<a href="#image-orientation-from-image"><code 34.852 + class=css>from-image</code></a>’ keyword is specified in the property 34.853 + value, append "from-image" to s. 34.854 + 34.855 + <li> If both the ‘<a href="#image-orientation-from-image"><code 34.856 + class=css>from-image</code></a>’ keyword and a <resolution> are 34.857 + specified, append a space " " to s. 34.858 34.859 <li> If a <resolution> is specified, serialize it and append it to s. 34.860 </ol> 34.861 @@ -3458,8 +3880,8 @@ 34.862 <li> Serialize the <angle> and append it to s. 34.863 </ol> 34.864 34.865 - <p> To serialize the ‘<code class=property>image-rendering</code>’ 34.866 - property: 34.867 + <p> To serialize the ‘<a href="#image-rendering"><code 34.868 + class=property>image-rendering</code></a>’ property: 34.869 34.870 <ol> 34.871 <li> Serialize the keyword and append it to s. 34.872 @@ -3899,9 +4321,15 @@ 34.873 <!--begin-index--> 34.874 34.875 <ul class=indexlist> 34.876 + <li><angular-color-stop>, <a href="#angular-color-stop-type" 34.877 + title="<angular-color-stop>"><strong>5.5.</strong></a> 34.878 + 34.879 <li>authoring tool, <a href="#authoring-tool" 34.880 title="authoring tool"><strong>10.2.</strong></a> 34.881 34.882 + <li>auto, <a href="#image-rendering-auto" 34.883 + title=auto><strong>7.3.</strong></a> 34.884 + 34.885 <li>‘<a href="#radial-closest-corner"><code 34.886 class=css>closest-corner</code></a>’, <a href="#radial-closest-corner" 34.887 title="''closest-corner''"><strong>5.2.1.</strong></a> 34.888 @@ -3911,11 +4339,14 @@ 34.889 title="''closest-side''"><strong>5.2.1.</strong></a> 34.890 34.891 <li><color-stop>, <a href="#color-stop-type" 34.892 - title="<color-stop>"><strong>5.4.</strong></a> 34.893 + title="<color-stop>"><strong>5.5.</strong></a> 34.894 34.895 <li>concrete object size, <a href="#concrete-object-size" 34.896 title="concrete object size"><strong>6.1.</strong></a> 34.897 34.898 + <li><conic-gradient>, <a href="#conic-gradient-type" 34.899 + title="<conic-gradient>"><strong>5.3.1.</strong></a> 34.900 + 34.901 <li>constraint rectangle, <a href="#constraint-rectangle" 34.902 title="constraint rectangle"><strong>6.3.2.</strong></a> 34.903 34.904 @@ -3925,8 +4356,11 @@ 34.905 <li>cover constraint, <a href="#cover-constraint" 34.906 title="cover constraint"><strong>6.3.2.</strong></a> 34.907 34.908 + <li>crisp-edges, <a href="#image-rendering-crisp-edges" 34.909 + title=crisp-edges><strong>7.3.</strong></a> 34.910 + 34.911 <li>decorated bounding box, <a href="#decorated-bounding-box" 34.912 - title="decorated bounding box"><strong>4.3.</strong></a> 34.913 + title="decorated bounding box"><strong>4.4.</strong></a> 34.914 34.915 <li>default object size, <a href="#default-object-size" 34.916 title="default object size"><strong>6.1.</strong></a> 34.917 @@ -3943,11 +4377,11 @@ 34.918 <li>‘<a href="#dppx"><code class=css>dppx</code></a>’, <a href="#dppx" 34.919 title="''dppx''"><strong>3.</strong></a> 34.920 34.921 + <li><element-image>, <a href="#element-image-type" 34.922 + title="<element-image>"><strong>4.4.</strong></a> 34.923 + 34.924 <li>element-not-rendered, <a href="#element-not-rendered" 34.925 - title=element-not-rendered><strong>4.3.</strong></a> 34.926 - 34.927 - <li><element-reference>, <a href="#element-reference-type" 34.928 - title="<element-reference>"><strong>4.3.</strong></a> 34.929 + title=element-not-rendered><strong>4.4.</strong></a> 34.930 34.931 <li>ending shape, <a href="#ending-shape" 34.932 title="ending shape"><strong>5.2.</strong></a> 34.933 @@ -3961,12 +4395,15 @@ 34.934 class=css>farthest-side</code></a>’, <a href="#radial-farthest-side" 34.935 title="''farthest-side''"><strong>5.2.1.</strong></a> 34.936 34.937 + <li>from-image, <a href="#image-orientation-from-image" 34.938 + title=from-image><strong>7.2.</strong></a> 34.939 + 34.940 <li><gradient>, <a href="#gradient-type" 34.941 title="<gradient>"><strong>5.</strong></a> 34.942 34.943 <li>gradient-average-color, <a 34.944 href="#find-the-average-color-of-a-gradient" 34.945 - title=gradient-average-color><strong>5.3.</strong></a> 34.946 + title=gradient-average-color><strong>5.4.</strong></a> 34.947 34.948 <li>gradient box, <a href="#gradient-box" 34.949 title="gradient box"><strong>5.</strong></a> 34.950 @@ -3980,8 +4417,11 @@ 34.951 <li><image>, <a href="#image-type" 34.952 title="<image>"><strong>4.</strong></a> 34.953 34.954 + <li><image-annotations>, <a href="#image-annotations-type" 34.955 + title="<image-annotations>"><strong>4.2.</strong></a> 34.956 + 34.957 <li><image-combination>, <a href="#ltimage-combination" 34.958 - title="<image-combination>"><strong>4.4.</strong></a> 34.959 + title="<image-combination>"><strong>4.5.</strong></a> 34.960 34.961 <li><image-decl>, <a href="#image-decl-type" 34.962 title="<image-decl>"><strong>4.2.</strong></a> 34.963 @@ -3992,9 +4432,18 @@ 34.964 <li>image-orientation, <a href="#image-orientation" 34.965 title=image-orientation><strong>7.2.</strong></a> 34.966 34.967 + <li>image-rendering, <a href="#image-rendering" 34.968 + title=image-rendering><strong>7.3.</strong></a> 34.969 + 34.970 <li>image-resolution, <a href="#image-resolution" 34.971 title=image-resolution><strong>7.1.</strong></a> 34.972 34.973 + <li><image-set>, <a href="#image-set-type" 34.974 + title="<image-set>"><strong>4.3.</strong></a> 34.975 + 34.976 + <li><image-set-decl>, <a href="#image-set-decl-type" 34.977 + title="<image-set-decl>"><strong>4.3.</strong></a> 34.978 + 34.979 <li>intrinsic aspect ratio, <a href="#intrinsic-aspect-ratio" 34.980 title="intrinsic aspect ratio"><strong>6.1.</strong></a> 34.981 34.982 @@ -4031,7 +4480,10 @@ 34.983 <li>objects, <a href="#objects" title=objects><strong>6.</strong></a> 34.984 34.985 <li>paint-source, <a href="#paint-source" 34.986 - title=paint-source><strong>4.3.1.</strong></a> 34.987 + title=paint-source><strong>4.4.1.</strong></a> 34.988 + 34.989 + <li>pixelated, <a href="#image-rendering-pixelated" 34.990 + title=pixelated><strong>7.3.</strong></a> 34.991 34.992 <li><position>, <a href="#position" 34.993 title="<position>"><strong>5.2.1.</strong></a> 34.994 @@ -4042,13 +4494,17 @@ 34.995 <li>renderer, <a href="#renderer" 34.996 title=renderer><strong>10.2.</strong></a> 34.997 34.998 + <li><repeating-conic-gradient>, <a 34.999 + href="#repeating-conic-gradient-type" 34.1000 + title="<repeating-conic-gradient>"><strong>5.4.</strong></a> 34.1001 + 34.1002 <li><repeating-linear-gradient>, <a 34.1003 href="#repeating-linear-gradient-type" 34.1004 - title="<repeating-linear-gradient>"><strong>5.3.</strong></a> 34.1005 + title="<repeating-linear-gradient>"><strong>5.4.</strong></a> 34.1006 34.1007 <li><repeating-radial-gradient>, <a 34.1008 href="#repeating-radial-gradient-type" 34.1009 - title="<repeating-radial-gradient>"><strong>5.3.</strong></a> 34.1010 + title="<repeating-radial-gradient>"><strong>5.4.</strong></a> 34.1011 34.1012 <li><resolution>, <a href="#resolution-type" 34.1013 title="<resolution>"><strong>3.</strong></a> 34.1014 @@ -4070,6 +4526,9 @@ 34.1015 <li>as conformance class, <a href="#style-sheet" 34.1016 title="style sheet, as conformance class"><strong>10.2.</strong></a> 34.1017 </ul> 34.1018 + 34.1019 + <li>‘<a href="#x"><code class=css>x</code></a>’, <a href="#x" 34.1020 + title="''x''"><strong>3.</strong></a> 34.1021 </ul> 34.1022 <!--end-index--> 34.1023 34.1024 @@ -4097,7 +4556,7 @@ 34.1025 <tr> 34.1026 <th><a class=property href="#image-orientation">image-orientation</a> 34.1027 34.1028 - <td><angle> 34.1029 + <td><angle> | from-image 34.1030 34.1031 <td>0deg 34.1032 34.1033 @@ -4105,9 +4564,24 @@ 34.1034 34.1035 <td>yes 34.1036 34.1037 + <td> 34.1038 + 34.1039 <td>visual 34.1040 34.1041 - <td>specified value, rounded and normalized (see text) 34.1042 + <tr> 34.1043 + <th><a class=property href="#image-rendering">image-rendering</a> 34.1044 + 34.1045 + <td>auto | crisp-edges | pixelated 34.1046 + 34.1047 + <td>auto 34.1048 + 34.1049 + <td>all elements 34.1050 + 34.1051 + <td>yes 34.1052 + 34.1053 + <td> 34.1054 + 34.1055 + <td>visual 34.1056 34.1057 <tr> 34.1058 <th><a class=property href="#image-resolution">image-resolution</a> 34.1059 @@ -4120,11 +4594,10 @@ 34.1060 34.1061 <td>yes 34.1062 34.1063 + <td> 34.1064 + 34.1065 <td>visual 34.1066 34.1067 - <td>as specified, except with ‘<resolution>’ possibly altered by 34.1068 - computing for ‘snap’ (see below) 34.1069 - 34.1070 <tr> 34.1071 <th><a class=property href="#object-fit">object-fit</a> 34.1072
35.1 --- a/css4-images/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 35.2 +++ b/css4-images/Overview.src.html Wed Aug 08 09:06:37 2012 -0700 35.3 @@ -81,7 +81,7 @@ 35.4 could only be given by a single URL value. 35.5 This module introduces additional ways of representing 2D images, 35.6 for example as <a href="#image-notation">a list of URIs denoting fallbacks</a>, 35.7 - as <a href="#element-reference">a reference to an element</a>, 35.8 + as <a href="#element-image">a reference to an element</a>, 35.9 or as <a href="#gradients">a gradient</a>. 35.10 35.11 <p> 35.12 @@ -177,6 +177,9 @@ 35.13 35.14 <dt><dfn>''dppx''</dfn> 35.15 <dd>dots per ''px'' unit 35.16 + 35.17 + <dt><dfn>''x''</dfn> 35.18 + <dd>identical to ''dppx'' 35.19 </dl> 35.20 35.21 <p> 35.22 @@ -207,11 +210,11 @@ 35.23 The ''<image>'' value type denotes a 2D image. It can be a 35.24 <a href="#url-notation">url reference</a>, 35.25 <a href="#image-notation">image notation</a>, 35.26 - <!-- <a href="#element-reference">element reference</a>, --> 35.27 + <!-- <a href="#element-image">element reference</a>, --> 35.28 or <a href="#gradients">gradient notation</a>. 35.29 Its syntax is: 35.30 35.31 - <pre class="prod"><dfn id='image-type'><image></dfn> = <i><url></i> | <i><image-list></i> | <i><gradient></i></pre> 35.32 + <pre class="prod"><dfn id='image-type'><image></dfn> = <i><url></i> | <i><image-list></i> | <i><image-set></i> | <i><gradient></i></pre> 35.33 35.34 <p> 35.35 An ''<image>'' can be used in many CSS properties, 35.36 @@ -313,8 +316,9 @@ 35.37 The ''image()'' notation is defined as: 35.38 35.39 <pre class='prod'><br><!-- 35.40 - --><dfn id='image-list-type'><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )<br><!-- 35.41 - --><dfn id='image-decl-type'><image-decl></dfn> = [ <url> | <string> ]</pre> 35.42 + --><dfn id='image-list-type'><image-list></dfn> = image( <image-annotations>? [ <image-decl> , ]* [ <image-decl> | <color> ] )<br><!-- 35.43 + --><dfn id='image-annotations-type'><image-annotations></dfn> = [ ltr | rtl ]
<!-- 35.44 + --><dfn id='image-decl-type'><image-decl></dfn> = [ <url> | <string> ]</pre> 35.45 35.46 <p> 35.47 Each ''<string>'' or ''<url>'' inside ''image()'' represents an image, 35.48 @@ -467,14 +471,18 @@ 35.49 Bidi-sensitive Images</h4> 35.50 35.51 <p> 35.52 - Along with each ''<image-decl>'', 35.53 - the author may specify a directionality, 35.54 + Before listing any <code><image-decl>s</code>, 35.55 + the author may specify a directionality for the image, 35.56 similar to adding a <code>dir</code> attribute to an element in HTML. 35.57 - The ''image()'' function takes on the directionality of the used ''<image-decl>'', if any. 35.58 If a directional image is used on or in an element with opposite <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, 35.59 the image must be flipped in the inline direction 35.60 (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis). 35.61 35.62 + <p class='note'> 35.63 + Note that, absent this declaration, 35.64 + images default to no directionality at all, 35.65 + and thus don't care about the directionality of the surrounding element. 35.66 + 35.67 <div class='example'> 35.68 <p> 35.69 A list may use an arrow for a bullet that points into the content. 35.70 @@ -484,7 +492,7 @@ 35.71 This can be fixed with code like: 35.72 35.73 <pre><!-- 35.74 - --><ul style="list-style-image: image("arrow.png" ltr);">
<!-- 35.75 + --><ul style="list-style-image: image(ltr 'arrow.png');">
<!-- 35.76 --> <li dir='ltr'>My bullet is on the left!</li>
<!-- 35.77 --> <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
<!-- 35.78 --></ul></pre> 35.79 @@ -503,6 +511,132 @@ 35.80 so it still points into the content. 35.81 </div> 35.82 35.83 +<!-- 35.84 + iiii tttt 35.85 + i::::i ttt:::t 35.86 + iiii t:::::t 35.87 + t:::::t 35.88 +iiiiiii mmmmmmm mmmmmmm aaaaaaaaaaaaa ggggggggg ggggg eeeeeeeeeeee ssssssssss eeeeeeeeeeee ttttttt:::::ttttttt 35.89 +i:::::i mm:::::::m m:::::::mm a::::::::::::a g:::::::::ggg::::g ee::::::::::::ee ss::::::::::s ee::::::::::::ee t:::::::::::::::::t 35.90 + i::::i m::::::::::mm::::::::::m aaaaaaaaa:::::a g:::::::::::::::::g e::::::eeeee:::::eess:::::::::::::s e::::::eeeee:::::eet:::::::::::::::::t 35.91 + i::::i m::::::::::::::::::::::m a::::ag::::::ggggg::::::gge::::::e e:::::es::::::ssss:::::se::::::e e:::::etttttt:::::::tttttt 35.92 + i::::i m:::::mmm::::::mmm:::::m aaaaaaa:::::ag:::::g g:::::g e:::::::eeeee::::::e s:::::s ssssss e:::::::eeeee::::::e t:::::t 35.93 + i::::i m::::m m::::m m::::m aa::::::::::::ag:::::g g:::::g e:::::::::::::::::e s::::::s e:::::::::::::::::e t:::::t 35.94 + i::::i m::::m m::::m m::::m a::::aaaa::::::ag:::::g g:::::g e::::::eeeeeeeeeee s::::::s e::::::eeeeeeeeeee t:::::t 35.95 + i::::i m::::m m::::m m::::ma::::a a:::::ag::::::g g:::::g e:::::::e ssssss s:::::s e:::::::e t:::::t tttttt 35.96 +i::::::im::::m m::::m m::::ma::::a a:::::ag:::::::ggggg:::::g e::::::::e s:::::ssss::::::se::::::::e t::::::tttt:::::t 35.97 +i::::::im::::m m::::m m::::ma:::::aaaa::::::a g::::::::::::::::g e::::::::eeeeeeee s::::::::::::::s e::::::::eeeeeeee tt::::::::::::::t 35.98 +i::::::im::::m m::::m m::::m a::::::::::aa:::a gg::::::::::::::g ee:::::::::::::e s:::::::::::ss ee:::::::::::::e tt:::::::::::tt 35.99 +iiiiiiiimmmmmm mmmmmm mmmmmm aaaaaaaaaa aaaa gggggggg::::::g eeeeeeeeeeeeee sssssssssss eeeeeeeeeeeeee ttttttttttt 35.100 + g:::::g 35.101 + gggggg g:::::g 35.102 + g:::::gg gg:::::g 35.103 + g::::::ggg:::::::g 35.104 + gg:::::::::::::g 35.105 + ggg::::::ggg 35.106 + gggggg 35.107 +--> 35.108 + 35.109 + 35.110 +<h3 id='image-set-notation'> 35.111 +Resolution Negotiation: the ''image-set()'' notation</h3> 35.112 + 35.113 + <p> 35.114 + Delivering the most appropriate image resolution for a user's device can be a difficult task. 35.115 + Ideally, images should be in the same resolution as the device they're being viewed in, 35.116 + which can vary between users. 35.117 + However, other factors can factor into the decision of which image to send; 35.118 + for example, if the user is on a slow mobile connection, 35.119 + they may prefer to receive lower-res images 35.120 + rather than waiting for a large proper-res image to load. 35.121 + The ''image-set()'' function allows an author to ignore most of these issues, 35.122 + simply providing multiple resolutions of an image 35.123 + and letting the UA decide which is most appropriate in a given situation. 35.124 + 35.125 + <p> 35.126 + The syntax for ''image-set()'' is: 35.127 + 35.128 + <pre class='prod'>
<!-- 35.129 + --><dfn id='image-set-type'><image-set></dfn> = image-set( [ <i><image-set-decl></i>, ]* [ <i><image-set-decl></i> | <color>] )
<!-- 35.130 + --><dfn id='image-set-decl-type'><image-set-decl></dfn> = [ <url> | <string> ] <i><resolution></i></pre> 35.131 + 35.132 + <p> 35.133 + Each ''<string>'' or ''<url>'' inside ''image-set()'' represents an image, 35.134 + just as if the <a href="#url-notation">''url()'' notation</a> had been used. 35.135 + As usual for URLs in CSS, 35.136 + relative URLs are resolved to an absolute URL 35.137 + (as described in Values & Units [[!CSS3VAL]]) 35.138 + when a specified ''image-set()'' value is computed. 35.139 + 35.140 + <p class='issue'> 35.141 + I want image-set() to be able to take other types of <image>s, like ''image()'' (and vice versa). 35.142 + But what happens if I nest image-set() inside of image-set()? 35.143 + Is it invalid, regardless of how deep the occurrence is? 35.144 + If valid, what does it means if the resolutions match? If they don't? 35.145 + 35.146 + <p> 35.147 + Every <i><image-set-decl></i> in a given ''image-set()'' must have a different <i><resolution></i>, 35.148 + or else the function is invalid. 35.149 + 35.150 + <p> 35.151 + The value that a given ''image-set()'' represents is determined by 35.152 + the UA first ordering the set of <i><image-set-decl></i>s 35.153 + in a UA-defined order 35.154 + (which should be based on the <i><resolution></i> of each <i><image-set-decl></i>, 35.155 + but may include other factors that the UA deems relevant, 35.156 + such as connection speed). 35.157 + The function then represents the first such image that is not an <i>invalid image</i>. 35.158 + If a fallback color was provided, 35.159 + the UA may decide at any point that the remaining <i><image-set-decl></i>s are unsuitable, 35.160 + and choose to use the fallback color instead, 35.161 + in which case the function represents a solid-color image of the given color with no <i>intrinsic dimensions</i>. 35.162 + If <em>all</em> of the <i><image-set-decl></i>s represent <i>invalid images</i>, 35.163 + then if a fallback color was provided, 35.164 + the function represents a solid-color image of the given color with no <i>intrinsic dimensions</i>; 35.165 + otherwise, the function represents an <i>invalid image</i>. 35.166 + 35.167 + <p class='issue'> 35.168 + It's been suggested that we don't need the fallback behavior here, 35.169 + and should instead just choose one resource and stick with it, 35.170 + allowing authors to nest image() if they want to do fallback. 35.171 + That's not strictly the same, 35.172 + and it's more verbose, 35.173 + but it may be enough. 35.174 + If we remove the fallback behavior, 35.175 + we can probably kill the <color> as well, 35.176 + unless we think it's important to avoid the verbosity of a wrapping ''image(image-set(...), blue)''. 35.177 + 35.178 + <p> 35.179 + If an <i><image-set-decl></i> is chosen and successfully loaded, 35.180 + the associated <i><resolution></i> is the image's <i>intrinsic resolution</i>. 35.181 + 35.182 + <p class='issue'> 35.183 + It's been suggested that we don't need a full <resolution> here, 35.184 + and should instead just use the ''x'' unit by itself. 35.185 + This seems silly to me, 35.186 + since the ''x'' unit is just an easier synonym for ''dppx'', 35.187 + but thoughts? 35.188 + Beyond theoretical purity considerations, 35.189 + it seems that ''dpi'' can be useful for use-cases involving printing, 35.190 + where dpi is actually used to talk about images 35.191 + and having an integer correlation between dots and pixels 35.192 + is either unnecessary or strictly non-sensical 35.193 + (as the screening resolution can depend on the colors being used). 35.194 + 35.195 + <div class='example'> 35.196 + <p> 35.197 + This example shows how to use ''image-set()'' to provide an image in three versions: 35.198 + a "normal" version, 35.199 + a "high-res" version, 35.200 + and an extra-high resolution version for use in high-quality printing 35.201 + (as printers can have <em>extremely</em> high resolution): 35.202 + 35.203 + <pre><!-- 35.204 + -->background-image: image-set( "foo.png" 1x,
<!-- 35.205 + --> "foo-2x.png" 2x,
<!-- 35.206 + --> "foo-print.png" 600dpi );</pre> 35.207 + </div> 35.208 + 35.209 35.210 <!-- 35.211 EEEEEEEEEEEEEEEEEEEEEElllllll tttt 35.212 @@ -545,7 +679,7 @@ 35.213 <p> 35.214 The syntax for ''element()'' is: 35.215 35.216 - <pre class=prod><dfn id='element-reference-type'><element-reference></dfn> = element( <id-selector> )</pre> 35.217 + <pre class=prod><dfn id='element-image-type'><element-image></dfn> = element( <id-selector> )</pre> 35.218 35.219 <p> 35.220 where ''<id-selector>'' is an ID selector [[!SELECT]]. 35.221 @@ -920,9 +1054,10 @@ 35.222 so that the UA can generate the image automatically when rendering the page. 35.223 The syntax of a <i><gradient></i> is: 35.224 35.225 - <pre class=prod><dfn id='gradient-type'><gradient></dfn> = [ 35.226 - <i><linear-gradient></i> | <i><radial-gradient></i> | 35.227 - <i><repeating-linear-gradient></i> | <i><repeating-radial-gradient></i> ]</pre> 35.228 + <pre class=prod><dfn id='gradient-type'><gradient></dfn> = [ 
<!-- 35.229 + --> <i><linear-gradient></i> | <i><repeating-linear-gradient></i> | 
<!-- 35.230 + --> <i><radial-gradient></i> | <i><repeating-radial-gradient></i> | 
<!-- 35.231 + --> <i><conic-gradient></i> | <i><repeating-conic-gradient></i> ]</pre> 35.232 35.233 <div class=example> 35.234 <p> 35.235 @@ -1200,6 +1335,14 @@ 35.236 <pre>radial-gradient(5em circle at top left, yellow, blue)</pre> 35.237 </div> 35.238 35.239 + <p class='issue'> 35.240 + Should we add the ability to move the "focus" of the gradient 35.241 + (that is, have the 0% point be different from the center of the gradient-shape)? 35.242 + The original -webkit-gradient() could do this, 35.243 + and it seems useful. 35.244 + Suggestion would be to add a "focus <position>" clause, 35.245 + and maybe a "focus-offset <lenper>{1,2}" as well, to offset the focus from the center. 35.246 + 35.247 <p> 35.248 The arguments are defined as follows: 35.249 35.250 @@ -1435,6 +1578,113 @@ 35.251 <p><img src="images/radial7.png" alt="" > 35.252 </div> 35.253 35.254 +<!-- 35.255 + CCCCCCCCCCCCC iiii 35.256 + CCC::::::::::::C i::::i 35.257 + CC:::::::::::::::C iiii 35.258 + C:::::CCCCCCCC::::C 35.259 + C:::::C CCCCCC ooooooooooo nnnn nnnnnnnn iiiiiii cccccccccccccccc 35.260 +C:::::C oo:::::::::::oo n:::nn::::::::nn i:::::i cc:::::::::::::::c 35.261 +C:::::C o:::::::::::::::on::::::::::::::nn i::::i c:::::::::::::::::c 35.262 +C:::::C o:::::ooooo:::::onn:::::::::::::::n i::::i c:::::::cccccc:::::c 35.263 +C:::::C o::::o o::::o n:::::nnnn:::::n i::::i c::::::c ccccccc 35.264 +C:::::C o::::o o::::o n::::n n::::n i::::i c:::::c 35.265 +C:::::C o::::o o::::o n::::n n::::n i::::i c:::::c 35.266 + C:::::C CCCCCCo::::o o::::o n::::n n::::n i::::i c::::::c ccccccc 35.267 + C:::::CCCCCCCC::::Co:::::ooooo:::::o n::::n n::::ni::::::ic:::::::cccccc:::::c 35.268 + CC:::::::::::::::Co:::::::::::::::o n::::n n::::ni::::::i c:::::::::::::::::c 35.269 + CCC::::::::::::C oo:::::::::::oo n::::n n::::ni::::::i cc:::::::::::::::c 35.270 + CCCCCCCCCCCCC ooooooooooo nnnnnn nnnnnniiiiiiii cccccccccccccccc 35.271 +--> 35.272 + 35.273 +<h3 id='conic-gradients'> 35.274 +Conic Gradients: the ''conic-gradient()'' notation</h3> 35.275 + 35.276 + <p> 35.277 + A conic gradient starts by specifying the center of a circle, 35.278 + similar to radial gradients, 35.279 + except that conic gradient color-stops are placed <em>around</em> the circumference of the circle, 35.280 + rather than on a line emerging from the center, 35.281 + causing the color to smoothly transition as you spin around the center, 35.282 + rather than as you progress outward from the center. 35.283 + 35.284 + <p> 35.285 + A conic gradient is specified by indicating the center of the gradient, 35.286 + and then specifying a list of color-stops. 35.287 + Unlike linear and radial gradients, 35.288 + whose color-stops are placed by specifying a <code><length></code>, 35.289 + the color-stops of a conic gradient are specified with an <code><angle></code>. 35.290 + Rays are then drawn emerging from the center and pointing in all directions, 35.291 + with the color of each ray equal to the color of the gradient-line where they intersect it. 35.292 + 35.293 + <p class='note'> 35.294 + These gradients are called "conic" or "conical" 35.295 + because, if the color stops are chosen to be significantly lighter on one side than the other, 35.296 + it produces a pattern that looks like a cone observed from above. 35.297 + 35.298 +<h4 id='conic-gradient-syntax' class='no-toc'> 35.299 +''conic-gradient()'' Syntax</h4> 35.300 + 35.301 + <p> 35.302 + The syntax for a conic gradient is: 35.303 + 35.304 + <pre class='prod'><!-- 35.305 + --><dfn id='conic-gradient-type'><conic-gradient></dfn> = conic-gradient(
<!-- 35.306 + --> [ at <position> , ]?
<!-- 35.307 + --> <angular-color-stop> [ , <angular-color-stop> ]+
<!-- 35.308 + -->)</pre> 35.309 + 35.310 + <p> 35.311 + The <code><position></code> argument is defined in [!CSS3VAL], 35.312 + and is resolved using the center-point as the object area 35.313 + and the gradient box as the positioning area. 35.314 + If this argument is omitted, 35.315 + it defaults to 'at center'. 35.316 + 35.317 + <p> 35.318 + The <code><angular-color-stop></code> is defined in the section on color-stops. 35.319 + 35.320 + <p class='issue'> 35.321 + Anything else that might be useful? Defining the shape of the gradient as elliptical, perhaps? 35.322 + 35.323 +<h4 id='conic-color-stops' class='no-toc'> 35.324 +Placing Color Stops</h4> 35.325 + 35.326 + <p> 35.327 + Color stops are placed on a <i>gradient line</i> that curves around the center in a circle, 35.328 + with both the 0% and 100% locations at 0deg. 35.329 + Just like linear gradients, 35.330 + 0deg points to the top of the page, 35.331 + and increasing angles correspond to clockwise movement around the circle. 35.332 + 35.333 + <p class='note'> 35.334 + It may be more helpful to think of the gradient line as forming a spiral, 35.335 + where only the segment from 0deg to 360deg is rendered. 35.336 + This avoids any confusion about "overlap" when you have angles outside of the rendered region. 35.337 + 35.338 + <p> 35.339 + A color-stop can be placed at a location before 0% or after 100%; 35.340 + though these regions are never directly consulted for rendering, 35.341 + color stops placed there can affect the color of color-stops within the rendered region 35.342 + through interpolation or repetition (see <a href=#repeating-gradients>repeating gradients</a>). 35.343 + For example, ''conic-gradient(red -50%, yellow 150%)'' produces a conic gradient 35.344 + that starts with a reddish-orange color at 0deg (specifically, #f50), 35.345 + and transitions to an orangish-yellow color at 360deg (specifically, #fa0). 35.346 + 35.347 + <p> 35.348 + The color of the gradient at any point is determined by first finding the unique ray 35.349 + anchored at the center of the gradient that passes through the given point. 35.350 + The point's color is then the color of the <i>gradient line</i> at the location where this ray intersects it. 35.351 + 35.352 +<h4 id='conic-gradient-examples' class='no-toc'> 35.353 +Conic Gradient Examples</h4> 35.354 + 35.355 + <p class='issue'> 35.356 + Produce examples. 35.357 + Better yet, strike this section, and intermix some examples into the sections above. 35.358 + Do this for the other two types of gradients as well. 35.359 + 35.360 + 35.361 35.362 <!-- 35.363 RRRRRRRRRRRRRRRRR tttt iiii 35.364 @@ -1464,13 +1714,14 @@ 35.365 35.366 35.367 <h3 id='repeating-gradients'> 35.368 -Repeating Gradients: the ''repeating-linear-gradient()'' and ''repeating-radial-gradient()'' notations</h3> 35.369 +Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gradient()'', and ''repeating-conic-gradient()'' notations</h3> 35.370 35.371 <p> 35.372 - In addition to <i><linear-gradient></i> and <i><radial-gradient></i>, 35.373 - this specification defines <dfn id='repeating-linear-gradient-type'><repeating-linear-gradient></dfn> 35.374 - and <dfn id='repeating-radial-gradient-type'><repeating-radial-gradient></dfn> values. 35.375 - These two notations take the same values 35.376 + In addition to <i><linear-gradient></i>, <i><radial-gradient></i>, and <i><conic-gradient></i>, 35.377 + this specification defines <dfn id='repeating-linear-gradient-type'><repeating-linear-gradient></dfn>, 35.378 + <dfn id='repeating-radial-gradient-type'><repeating-radial-gradient></dfn>, 35.379 + and <dfn id='repeating-conic-gradient-type'><repeating-conic-gradient></dfn> values. 35.380 + These notations take the same values 35.381 and are interpreted the same 35.382 as their respective non-repeating siblings defined previously. 35.383 35.384 @@ -1496,7 +1747,10 @@ 35.385 35.386 <pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre> 35.387 <p><img src="images/repeating3.png" alt=""> 35.388 - </div> 35.389 + 35.390 + <pre>repeating-conic-gradient(at 20%, white 0deg, white 20deg, red 20deg, red 40deg)</pre> 35.391 + <p class='issue'>Insert rendering here. 35.392 + </div> 35.393 35.394 <p> 35.395 If the distance between the first and last color-stops is non-zero, 35.396 @@ -1591,22 +1845,36 @@ 35.397 <h3 id='color-stop-syntax'> 35.398 Gradient Color-Stops</h3> 35.399 35.400 - <pre class=prod><dfn id='color-stop-type'><color-stop></dfn> = <color> [ <percentage> | <length> ]?</pre> 35.401 + <pre class=prod><dfn id='color-stop-type'><color-stop></dfn> = <color> [ <percentage> | <length> ]{0,2}</pre> 35.402 + <pre class=prod><dfn id='angular-color-stop-type'><angular-color-stop></dfn> = <color> [ <percentage> | <angle> ]{0,2}</pre> 35.403 35.404 <p> 35.405 - Color-stops are points placed along the line 35.406 - defined by the <i>gradient line</i> at the beginning of the rule. 35.407 + Color-stops are points placed along the <i>gradient line</i> 35.408 + defined by the gradient function in which the color-stop is used. 35.409 Color-stops must be specified in order. 35.410 Percentages refer to the length of the gradient line, 35.411 with 0% being at the starting point 35.412 and 100% being at the ending point. 35.413 - Lengths are measured from the starting point in the direction of the ending point. 35.414 + Lengths are measured from the starting point in the direction of the ending point. 35.415 + Angles are measured with 0deg pointing up, 35.416 + and positive angles corresponding to clockwise rotations. 35.417 Color-stops are usually placed between the starting point and ending point, 35.418 but that's not required; 35.419 the gradient line extends infinitely in both directions, 35.420 and a color-stop can be placed at any position on the line. 35.421 35.422 <p> 35.423 + A color-stop with two locations is exactly equivalent 35.424 + to specifying two color-stops with the same color, 35.425 + one at each location, 35.426 + including how it reacts to the clean-up steps below. 35.427 + <span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient, 35.428 + without having to repeat the color twice.</span> 35.429 + 35.430 + <p class='issue'> 35.431 + Make sure this is handled well in the serialization rules. 35.432 + 35.433 + <p> 35.434 At each color-stop, 35.435 the line is the color of the color-stop. 35.436 Between two color-stops, 35.437 @@ -1639,6 +1907,15 @@ 35.438 set their positions so that they are evenly spaced between the preceding and following color-stops with positions. 35.439 </ol> 35.440 35.441 + <p class='issue'> 35.442 + This requires us to wait until <em>after</em> layout to do fix-up, 35.443 + because implied-position stops (set by step 3) 35.444 + may depend on stops that need layout information to place, 35.445 + and which may be corrected by step 2. 35.446 + Swapping steps 2 and 3 would let us interpolate color-stops purely at computed-value time, 35.447 + which is a nice plus, 35.448 + at the cost of changing behavior from level 3 for some edge cases that triggered fixup. 35.449 + 35.450 <p> 35.451 If multiple color-stops have the same position, 35.452 they produce an infinitesimal transition from the one specified first in the rule 35.453 @@ -2311,6 +2588,14 @@ 35.454 <td>as specified, except with ''<resolution>'' possibly altered by computing for ''snap'' (see below) 35.455 </table> 35.456 35.457 + <p class='issue'> 35.458 + The ''image-set()'' notation can alter the intrinsic resolution of an image, 35.459 + which ideally would be automatically honored without having to set this property. 35.460 + How should we best address this? 35.461 + Change the initial value to ''auto'', meaning "1dppx, unless CSS says otherwise"? 35.462 + Say that image-resolution has no effect on images whose resolution was set by something else in CSS? 35.463 + Or somehow wordsmithing ''image-set()'' in some way such that it always produces ''1dppx'' images somehow? 35.464 + 35.465 <p> 35.466 The 'image-resolution' property specifies the <i>intrinsic resolution</i> of all raster images used in or on the element. 35.467 It affects both content images 35.468 @@ -2430,13 +2715,6 @@ 35.469 the resultant image may be "sideways" or even upside-down. 35.470 The 'image-orientation' property provides a way to apply an "out-of-band" rotation to image source data to correctly orient an image. 35.471 35.472 - <p class='note'> 35.473 - Note that some devices will "tag" an image with some metadata indicating its correct orientation, 35.474 - so image viewing software can do the necessary transformation themselves. 35.475 - Due to legacy compatibility restraints, 35.476 - Web browsers are required to ignore this data by default. 35.477 - A future level of this specification is expected to have a value that applies the metadata-specified transformation automatically. 35.478 - 35.479 <p class="note"> 35.480 Note that this property is not intended to specify layout transformations 35.481 such as arbitrary rotation or flipping the image in the horizontal or vertical direction. 35.482 @@ -2451,7 +2729,7 @@ 35.483 <td><dfn>image-orientation</dfn> 35.484 <tr> 35.485 <th><a href="#values">Value:</a> 35.486 - <td><angle> 35.487 + <td><angle> | from-image 35.488 <tr> 35.489 <th>Initial: 35.490 <td>0deg 35.491 @@ -2466,7 +2744,7 @@ 35.492 <td>visual 35.493 <tr> 35.494 <th>Computed value: 35.495 - <td>specified value, rounded and normalized (see text) 35.496 + <td>an <angle>, rounded and normalized (see text) 35.497 </table> 35.498 35.499 <p> 35.500 @@ -2488,15 +2766,34 @@ 35.501 </ul> 35.502 35.503 <p> 35.504 - Positive values cause the image to be rotated to the right 35.505 - (in a clockwise direction), 35.506 - while negative values cause a rotation to the left. 35.507 - The computed value of the property is calculated 35.508 - by rounding the specified angle to the nearest quarter-turn 35.509 - (90deg, 100grad, .25turn, etc.), 35.510 - rounding away from 0 35.511 - (that is, 45deg is rounded to 90deg, while -45deg is rounded to -90deg), 35.512 - then moduloing the value by 1 turn (360deg, 400grad, etc.). 35.513 + Values have the following meanings: 35.514 + 35.515 + <dl> 35.516 + <dt><code><angle></code> 35.517 + <dd> 35.518 + Positive values cause the image to be rotated to the right 35.519 + (in a clockwise direction), 35.520 + while negative values cause a rotation to the left. 35.521 + The computed value of the property is calculated 35.522 + by rounding the specified angle to the nearest quarter-turn 35.523 + (90deg, 100grad, .25turn, etc.), 35.524 + rounding away from 0 35.525 + (that is, 45deg is rounded to 90deg, while -45deg is rounded to -90deg), 35.526 + then moduloing the value by 1 turn (360deg, 400grad, etc.). 35.527 + 35.528 + <dt><dfn id='image-orientation-from-image'>from-image</dfn> 35.529 + <dd> 35.530 + If the image has an orientation specified in its metadata, 35.531 + such as EXIF, 35.532 + this value computes to the angle that the metadata specifies is necessary to correctly orient the image. 35.533 + If necessary, this angle is then rounded and normalized as described above for an <code><angle></code> value. 35.534 + If there is no orientation specified in its metadata, 35.535 + this value computes to ''0deg''. 35.536 + 35.537 + <p class='issue'> 35.538 + Do we need to handle the "unnatural" EXIF orientations? 35.539 + This would imply adding a ''flip'' keyword to go along with <angle>. 35.540 + </dl> 35.541 35.542 <p> 35.543 The 'image-orientation' property must be applied before any other transformations, 35.544 @@ -2518,6 +2815,83 @@ 35.545 </div> 35.546 35.547 35.548 +<h3 id='the-image-rendering'> 35.549 +Determing How To Scale an Image: the 'image-rendering' property</h3> 35.550 + 35.551 + <table class="propdef"> 35.552 + <tr> 35.553 + <th>Name: 35.554 + <td><dfn>image-rendering</dfn> 35.555 + <tr> 35.556 + <th><a href="#values">Value:</a> 35.557 + <td>auto | crisp-edges | pixelated 35.558 + <tr> 35.559 + <th>Initial: 35.560 + <td>auto 35.561 + <tr> 35.562 + <th>Applies to: 35.563 + <td>all elements 35.564 + <tr> 35.565 + <th>Inherited: 35.566 + <td>yes 35.567 + <tr> 35.568 + <th>Media: 35.569 + <td>visual 35.570 + <tr> 35.571 + <th>Computed value: 35.572 + <td>specified value 35.573 + </table> 35.574 + 35.575 + <p> 35.576 + The 'image-rendering' property provides a hint to the user-agent 35.577 + about what aspects of an image are most important to preserve when the image is scaled, 35.578 + to aid the user-agent in the choice of an appropriate scaling algorithm. 35.579 + When specified on an element, 35.580 + it applies to all images given in properties for the element, 35.581 + such as background images, 35.582 + list-style images, 35.583 + or the content of replaced elements when they represent an image that must be scaled. 35.584 + The values of the 'image-rendering' property are interpreted as follows: 35.585 + 35.586 + <dl> 35.587 + <dt><dfn id='image-rendering-auto'>auto</dfn> 35.588 + <dd> 35.589 + The image should be scaled with an algorithm that maximizes the appearance of the image. 35.590 + In particular, scaling algorithms that "smooth" colors are acceptable, 35.591 + such as bilinear interpolation. 35.592 + This is intended for images such as photos. 35.593 + 35.594 + <dt><dfn id='image-rendering-crisp-edges'>crisp-edges</dfn> 35.595 + <dd> 35.596 + The image must be scaled with an algorithm that preserves contrast and edges in the image, 35.597 + and which does not smooth colors or introduce blur to the image in the process. 35.598 + This is intended for images such as pixel art. 35.599 + 35.600 + <dt><dfn id='image-rendering-pixelated'>pixelated</dfn> 35.601 + <dd> 35.602 + When scaling the image up, the "nearest neighbor" or similar algorithm must be used, 35.603 + so that the image appears to be simply composed of very large pixels. 35.604 + When scaling down, 35.605 + this is the same as <a href=#image-rendering-auto>''auto''</a>. 35.606 + </dl> 35.607 + 35.608 + <p> 35.609 + This property does not dictate any particular scaling algorithm to be used. 35.610 + For example, with ''image-rendering:auto'', 35.611 + a user agent might scale images with bilinear interpolation by default, 35.612 + switch to nearest-neighbor interpolation in high-load situations, 35.613 + and switch to a high-quality scaling algorithm like Lanczos interpolation for static images that aren't moving or changing. 35.614 + Similarly, with 'image-rendering:crisp-edges', 35.615 + a user agent might scale images with nearest-neighbor interpolation by default, 35.616 + and switch to EPX interpolation in low-load situations. 35.617 + 35.618 + <p> 35.619 + This property previously accepted the values 'optimizeSpeed' and 'optimizeQuality'. 35.620 + These are now deprecated; 35.621 + a user agent may accept them as valid values, 35.622 + but must treat them as having the same behavior as <a href=#image-rendering-auto>''auto''</a>. 35.623 + 35.624 + 35.625 <!-- 35.626 IIIIIIIIII tttt 35.627 I::::::::I ttt:::t 35.628 @@ -2796,10 +3170,10 @@ 35.629 35.630 35.631 <h3 id='serializing-element-notation'> 35.632 -Serializing the ''element()'' / <i><element-reference></i> notation</h3> 35.633 +Serializing the ''element()'' / <i><element-image></i> notation</h3> 35.634 35.635 <p> 35.636 - To serialize an <i><element-reference></i>: 35.637 + To serialize an <i><element-image></i>: 35.638 35.639 <ol> 35.640 <li>
36.1 Binary file css4-images/images/element-function.png has changed
37.1 Binary file css4-images/images/gradient-diagram.png has changed
38.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 38.2 +++ b/css4-images/images/gradient1.svg Wed Aug 08 09:06:37 2012 -0700 38.3 @@ -0,0 +1,11 @@ 38.4 +<svg xmlns="http://www.w3.org/2000/svg" width='200' height='100'> 38.5 + <desc>Image of a color gradient</desc> 38.6 + <defs> 38.7 + <linearGradient x1='0' y1='1' x2='1' y2='0' gradientUnits='objectBoundingBox' id='corner-gradient'> 38.8 + <stop offset='0%' stop-color='red'/> 38.9 + <stop offset='50%' stop-color='white'/> 38.10 + <stop offset='100%' stop-color='blue'/> 38.11 + </linearGradient> 38.12 + </defs> 38.13 + <rect x='0' y='0' width='100%' height='100%' fill='url(#corner-gradient)' /> 38.14 +</svg> 38.15 \ No newline at end of file
39.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 39.2 +++ b/css4-images/images/gradient2.svg Wed Aug 08 09:06:37 2012 -0700 39.3 @@ -0,0 +1,12 @@ 39.4 +<svg xmlns="http://www.w3.org/2000/svg" width='200' height='100' style="background:white"> 39.5 +<desc>[Image of a color gradient]</desc> 39.6 +<defs> 39.7 +<linearGradient id='premult-gradient'> 39.8 +<stop offset='0%' stop-color='red'/> 39.9 +<stop offset='50%' stop-color='red' stop-opacity='0'/> 39.10 +<stop offset='50%' stop-color='blue' stop-opacity='0'/> 39.11 +<stop offset='100%' stop-color='blue'/> 39.12 +</linearGradient> 39.13 +</defs> 39.14 +<rect width='100%' height='100%' fill='url(#premult-gradient)'/>> 39.15 +</svg>
40.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 40.2 +++ b/css4-images/images/gradient3.svg Wed Aug 08 09:06:37 2012 -0700 40.3 @@ -0,0 +1,11 @@ 40.4 +<svg xmlns="http://www.w3.org/2000/svg" width='200' height='100' style="background:white"> 40.5 +<desc>Image of a color gradient</desc> 40.6 +<defs> 40.7 +<linearGradient id='nonpremult-gradient'> 40.8 +<stop offset='0%' stop-color='red'/> 40.9 +<stop offset='50%' stop-color='black' stop-opacity='0'/> 40.10 +<stop offset='100%' stop-color='blue'/> 40.11 +</linearGradient> 40.12 +</defs> 40.13 +<rect width='100%' height='100%' fill='url(#nonpremult-gradient)'/> 40.14 +</svg>
41.1 Binary file css4-images/images/img_scale.png has changed
42.1 Binary file css4-images/images/linear1.png has changed
43.1 Binary file css4-images/images/linear2.png has changed
44.1 Binary file css4-images/images/linear3.png has changed
45.1 Binary file css4-images/images/linear4.png has changed
46.1 Binary file css4-images/images/linear5.png has changed
47.1 Binary file css4-images/images/radial1.png has changed
48.1 Binary file css4-images/images/radial2.png has changed
49.1 Binary file css4-images/images/radial3.png has changed
50.1 Binary file css4-images/images/radial4.png has changed
51.1 Binary file css4-images/images/radial5.png has changed
52.1 Binary file css4-images/images/radial6.png has changed
53.1 Binary file css4-images/images/radial7.png has changed
54.1 Binary file css4-images/images/repeating1.png has changed
55.1 Binary file css4-images/images/repeating2.png has changed
56.1 Binary file css4-images/images/repeating3.png has changed
57.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 57.2 +++ b/css4-images/images/sprites.svg Wed Aug 08 09:06:37 2012 -0700 57.3 @@ -0,0 +1,36 @@ 57.4 +<svg xmlns="http://www.w3.org/2000/svg" fill="#333" width="180" height="20"> 57.5 + <g transform="translate(0,0)"> 57.6 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.7 + </g> 57.8 + <g transform="translate(20,0)"> 57.9 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.10 + <path d="M 10 0 A 10,10 0 0,1 17,3 L 10,10 z"/> 57.11 + </g> 57.12 + <g transform="translate(40,0)"> 57.13 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.14 + <path d="M 10 0 A 10,10 0 0,1 20,10 L 10,10 z"/> 57.15 + </g> 57.16 + <g transform="translate(60,0)"> 57.17 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.18 + <path d="M 10 0 A 10,10 0 0,1 17,17 L 10,10 z"/> 57.19 + </g> 57.20 + <g transform="translate(80,0)"> 57.21 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.22 + <path d="M 10 0 A 10,10 0 0,1 10,20 L 10,10 z"/> 57.23 + </g> 57.24 + <g transform="translate(100,0)"> 57.25 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.26 + <path d="M 10 0 A 10,10 0 1,1 3,17 L 10,10 z"/> 57.27 + </g> 57.28 + <g transform="translate(120,0)"> 57.29 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.30 + <path d="M 10 0 A 10,10 0 1,1 0,10 L 10,10 z"/> 57.31 + </g> 57.32 + <g transform="translate(140,0)"> 57.33 + <circle cy="10" cx="10" r="10" fill-opacity=".1"/> 57.34 + <path d="M 10 0 A 10,10 0 1,1 3,3 L 10,10 z"/> 57.35 + </g> 57.36 + <g transform="translate(160,0)"> 57.37 + <circle class="f" cx="10" cy="10" r="10"/> 57.38 + </g> 57.39 +</svg> 57.40 \ No newline at end of file
58.1 --- a/cssom-view/Makefile Tue Jul 31 14:04:38 2012 -0700 58.2 +++ b/cssom-view/Makefile Wed Aug 08 09:06:37 2012 -0700 58.3 @@ -1,34 +1,62 @@ 58.4 58.5 -ANOLIS = anolis 58.6 -CP = cp 58.7 +ANOLIS = anolis 58.8 +NODE = node 58.9 58.10 -XREFS = data/xrefs/css/cssom-view.json 58.11 -EDFILE = Overview.html 58.12 -TRFILE = TR/Overview.html 58.13 +SPECSTOP = .. 58.14 +GENDIR = $(SPECSTOP)/cssom 58.15 +IDLGEN = $(GENDIR)/cssom-generate-json.js 58.16 +SPECGEN = $(GENDIR)/cssom-generate.js 58.17 +SPECSRC = cssom-view-source 58.18 + 58.19 +IDLDRIVER = cssom-view.idl 58.20 +IDLFRAGS = idl/CaretPosition.idl \ 58.21 + idl/ClientRect.idl \ 58.22 + idl/ClientRectList.idl \ 58.23 + idl/Document.idl \ 58.24 + idl/Element.idl \ 58.25 + idl/HTMLElement.idl \ 58.26 + idl/MediaQueryList.idl \ 58.27 + idl/MediaQueryListListener.idl \ 58.28 + idl/MouseEvent.idl \ 58.29 + idl/Range.idl \ 58.30 + idl/Screen.idl \ 58.31 + idl/Window.idl 58.32 +JSONFILE = cssom-view.json 58.33 +XREFS = data/xrefs/css/cssom-view.json 58.34 +EDFILE = Overview.html 58.35 +TRFILE = TR/Overview.html 58.36 58.37 all: $(EDFILE) 58.38 58.39 -Overview.src.html: cssom-view-source 58.40 - $(CP) $< $@ 58.41 +$(JSONFILE): $(IDLDRIVER) $(IDLFRAGS) $(IDLGEN) 58.42 + gcc -E -x c -P -Iidl -C $(IDLDRIVER) | node $(IDLGEN) > $@ 58.43 + 58.44 +Overview.src.html: $(SPECGEN) $(JSONFILE) $(SPECSRC) 58.45 + $(NODE) $(SPECGEN) $(JSONFILE) $(SPECSRC) > $@ 58.46 58.47 $(XREFS): Overview.src.html Makefile 58.48 $(ANOLIS) --dump-xrefs=$@ $< /tmp/spec; $(RM) /tmp/spec 58.49 58.50 $(EDFILE): Overview.src.html $(XREFS) Makefile 58.51 $(ANOLIS) --output-encoding=utf-8 --omit-optional-tags --quote-attr-values \ 58.52 - --w3c-compat --enable=xspecxref --enable=refs --w3c-shortname="cssom-view" \ 58.53 + --w3c-compat --enable=xspecxref --enable=refs --w3c-shortname="cssom" \ 58.54 --force-html4-id --filter=".publish" $< $@ 58.55 58.56 draft: $(EDFILE) 58.57 58.58 $(TRFILE): Overview.src.html $(XREFS) Makefile 58.59 $(ANOLIS) --output-encoding=utf-8 --omit-optional-tags --quote-attr-values \ 58.60 - --w3c-compat --enable=xspecxref --enable=refs --w3c-shortname="cssom-view" \ 58.61 + --w3c-compat --enable=xspecxref --enable=refs --w3c-shortname="cssom" \ 58.62 --force-html4-id --filter=".dontpublish" --pubdate="$(PUBDATE)" --w3c-status=WD $< $@ 58.63 58.64 publish: $(TRFILE) 58.65 58.66 clean:: 58.67 + $(RM) Overview.src.html 58.68 + $(RM) $(JSONFILE) 58.69 + 58.70 +cleanall:: clean 58.71 $(RM) $(EDFILE) 58.72 - $(RM) Overview.src.html 58.73 echo '{ "definitions": {}, "url": "http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom-view/Overview.html#" }' > $(XREFS) 58.74 + 58.75 +
59.1 --- a/cssom-view/Overview.html Tue Jul 31 14:04:38 2012 -0700 59.2 +++ b/cssom-view/Overview.html Wed Aug 08 09:06:37 2012 -0700 59.3 @@ -1,19 +1,7 @@ 59.4 <!DOCTYPE html><html lang="en-US"><head> 59.5 <meta charset="utf-8"> 59.6 <title>CSSOM View Module</title> 59.7 - <style type="text/css"> 59.8 - pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em } 59.9 - pre.idl :link, pre.idl :visited { color:inherit; background:transparent } 59.10 - dfn { font-weight:bold; font-style:normal } 59.11 - div.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc } 59.12 - div.example code { color:inherit } 59.13 - p.note { margin-left:2em; color:green; font-style:italic; font-weight:bold } 59.14 - p.note::before { content:"Note: " } 59.15 - .XXX { padding:.5em; border:solid red } 59.16 - .XXX::before { content:"Issue: " } 59.17 - code { color:orangered } 59.18 - code :link, code :visited { color:inherit } 59.19 - </style> 59.20 + <link href="cssom.css" rel="stylesheet"> 59.21 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet"> 59.22 </head> 59.23 <body class="draft"> 59.24 @@ -25,7 +13,7 @@ 59.25 59.26 <h1 id="cssom-view-module">CSSOM View Module</h1> 59.27 59.28 - <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 13 March 2012</h2> 59.29 + <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 3 August 2012</h2> 59.30 59.31 <dl> 59.32 59.33 @@ -55,13 +43,12 @@ 59.34 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd> 59.35 </dl> 59.36 59.37 - <p class="dontpublish copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="http://i.creativecommons.org/p/zero/1.0/80x15.png"></a> 59.38 - To the extent possible under law, the editors have waived all copyright and 59.39 - related or neighboring rights to this work. In addition, as of 59.40 - 13 March 2012, the editors have made this specification available 59.41 - under the <a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open 59.42 - Web Foundation Agreement, Version 1.0</a>.</p> 59.43 - </div> 59.44 + 59.45 +<!--begin-copyright--> 59.46 +<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p> 59.47 +<!--end-copyright--> 59.48 + 59.49 + </div> 59.50 59.51 <hr> 59.52 59.53 @@ -82,7 +69,7 @@ 59.54 can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 59.55 index at http://www.w3.org/TR/.</a></em> 59.56 59.57 -<p>This is the 13 March 2012 Editor's Draft of CSSOM View. Please send 59.58 +<p>This is the 3 August 2012 Editor's Draft of CSSOM View. Please send 59.59 comments to 59.60 <a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a> 59.61 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 59.62 @@ -132,12 +119,7 @@ 59.63 <li><a href="#client-attributes"><span class="secno">6.3 </span>The <code title="">clientTop</code>, 59.64 <code title="">clientLeft</code>, <code title="">clientWidth</code>, and 59.65 <code title="">clientHeight</code> attributes</a></ol></li> 59.66 - <li><a href="#extensions-to-the-htmlelement-interface"><span class="secno">7 </span>Extensions to the <code title="">HTMLElement</code> Interface</a> 59.67 - <ol class="toc"> 59.68 - <li><a href="#offset-attributes"><span class="secno">7.1 </span>The <code title="">offsetParent</code>, 59.69 - <code title="">offsetTop</code>, <code title="">offsetLeft</code>, 59.70 - <code title="">offsetWidth</code>, and <code title="">offsetHeight</code> 59.71 - attributes</a></ol></li> 59.72 + <li><a href="#extensions-to-the-htmlelement-interface"><span class="secno">7 </span>Extensions to the <code title="">HTMLElement</code> Interface</a></li> 59.73 <li><a href="#extensions-to-the-range-interface"><span class="secno">8 </span>Extensions to the <code title="">Range</code> Interface</a></li> 59.74 <li><a href="#extensions-to-the-mouseevent-interface"><span class="secno">9 </span>Extensions to the <code title="">MouseEvent</code> Interface</a></li> 59.75 <li><a href="#rectangles"><span class="secno">10 </span>Rectangles</a> 59.76 @@ -215,7 +197,7 @@ 59.77 <a href="#refsCSSOM">[CSSOM]</a> 59.78 <a href="#refsHTML">[HTML]</a> 59.79 59.80 - <p class="XXX"><dfn id="mouseevent"><code>MouseEvent</code></dfn> is defined in … 59.81 + <p class="issue"><dfn id="mouseevent"><code>MouseEvent</code></dfn> is defined in … 59.82 59.83 <p><dfn id="the-html-body-element">The HTML <code>body</code> element</dfn> is the first 59.84 <code>body</code> 59.85 @@ -250,482 +232,293 @@ 59.86 specification are in CSS pixels. <!--<span data-anolis-ref>CSS</span>--> 59.87 59.88 <p class="note">This does not apply to e.g. 59.89 - <code title="dom-Window-matchMedia"><a href="#dom-window-matchmedia">matchMedia()</a></code> as the units 59.90 + <code title="dom-Window-matchMedia">matchMedia()</code> as the units 59.91 are explicitly given there.</p> 59.92 59.93 59.94 59.95 <h2 id="extensions-to-the-window-interface"><span class="secno">4 </span>Extensions to the <code title="">Window</code> Interface</h2> 59.96 59.97 - <pre class="idl">partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a> { 59.98 - <a href="#mediaquerylist">MediaQueryList</a> <a href="#dom-window-matchmedia" title="dom-Window-matchMedia">matchMedia</a>(DOMString <var title="">media_query_list</var>); 59.99 - readonly attribute <a href="#screen">Screen</a> <a href="#dom-window-screen" title="dom-Window-screen">screen</a>; 59.100 - 59.101 - // viewport 59.102 - readonly attribute long <a href="#dom-window-innerwidth" title="dom-Window-innerWidth">innerWidth</a>; 59.103 - readonly attribute long <a href="#dom-window-innerheight" title="dom-Window-innerHeight">innerHeight</a>; 59.104 - 59.105 - // viewport scrolling 59.106 - readonly attribute long <a href="#dom-window-scrollx" title="dom-Window-scrollX">scrollX</a>; 59.107 - readonly attribute long <a href="#dom-window-pagexoffset" title="dom-Window-pageXOffset">pageXOffset</a>; 59.108 - readonly attribute long <a href="#dom-window-scrolly" title="dom-Window-scrollY">scrollY</a>; 59.109 - readonly attribute long <a href="#dom-window-pageyoffset" title="dom-Window-pageYOffset">pageYOffset</a>; 59.110 - void <a href="#dom-window-scroll" title="dom-Window-scroll">scroll</a>(long <var title="">x</var>, long <var title="">y</var>); 59.111 - void <a href="#dom-window-scrollto" title="dom-Window-scrollto">scrollTo</a>(long <var title="">x</var>, long <var title="">y</var>); 59.112 - void <a href="#dom-window-scrollby" title="dom-Window-scrollby">scrollBy</a>(long <var title="">x</var>, long <var title="">y</var>); 59.113 - 59.114 - // client 59.115 - readonly attribute long <a href="#dom-window-screenx" title="dom-Window-screenX">screenX</a>; 59.116 - readonly attribute long <a href="#dom-window-screeny" title="dom-Window-screenY">screenY</a>; 59.117 - readonly attribute long <a href="#dom-window-outerwidth" title="dom-Window-outerWidth">outerWidth</a>; 59.118 - readonly attribute long <a href="#dom-window-outerheight" title="dom-Window-outerHeight">outerHeight</a>; 59.119 -};</pre> 59.120 - 59.121 - 59.122 - <p>When the 59.123 - <dfn id="dom-window-matchmedia" title="dom-Window-matchMedia"><code>matchMedia(<var title="">media_query_list</var>)</code></dfn> 59.124 - method is invoked these steps must be run:</p> 59.125 - 59.126 - <ol> 59.127 - <li><p>Let <var title="">parsed_media_query_list</var> be the result of 59.128 - <a class="external" href="http://dvcs.w3.org/hg/cssom/raw-file/tip/Overview.html#parse-a-media-query-list" title="parse a media query list">parsing</a> 59.129 - <var title="">media_query_list</var>.</li> 59.130 - 59.131 - <li><p>Return a <em>new</em> <code><a href="#mediaquerylist">MediaQueryList</a></code> object, 59.132 - associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object, with 59.133 - <var title="">parsed_media_query_list</var> as its associated 59.134 - media query list.</li> 59.135 - </ol> 59.136 - 59.137 - <p>The 59.138 - <dfn id="dom-window-screen" title="dom-Window-screen"><code>screen</code></dfn> 59.139 - attribute must return the <code><a href="#screen">Screen</a></code> object 59.140 - associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object. It always returns the same 59.141 - object.</p> 59.142 - 59.143 - <p class="note">Accessing <code title="dom-Window-screen"><a href="#dom-window-screen">screen</a></code> through a <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#windowproxy">WindowProxy</a></code> object might yield different results 59.144 - when the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is navigated.</p> 59.145 - 59.146 - 59.147 - <p>The <dfn id="dom-window-innerwidth" title="dom-Window-innerWidth"><code>innerWidth</code></dfn> 59.148 - attribute must return the 59.149 - <a href="#viewport">viewport</a> width including the size of a rendered scroll bar 59.150 - (if any).</p> 59.151 - 59.152 - <div class="example"> 59.153 - <p>The following snippet shows how to obtain the width of the 59.154 - viewport:</p> 59.155 - 59.156 - <pre><code>var viewportWidth = innerWidth</code></pre> 59.157 - </div> 59.158 - 59.159 - <p>The <dfn id="dom-window-innerheight" title="dom-Window-innerHeight"><code>innerHeight</code></dfn> 59.160 - attribute must return the 59.161 - <a href="#viewport">viewport</a> height including the size of a rendered scroll bar 59.162 - (if any).</p> 59.163 - 59.164 - <p>The 59.165 - <dfn id="dom-window-scrollx" title="dom-Window-scrollX"><code>scrollX</code></dfn> and 59.166 - <dfn id="dom-window-pagexoffset" title="dom-Window-pageXOffset"><code>pageXOffset</code></dfn> 59.167 - attributes must return the x-coordinate, 59.168 - relative to the <a href="#initial-containing-block">initial containing block</a> origin, of the left 59.169 - of the <a href="#viewport">viewport</a>.</p> 59.170 - 59.171 - <p>The 59.172 - <dfn id="dom-window-scrolly" title="dom-Window-scrollY"><code>scrollY</code></dfn> and 59.173 - <dfn id="dom-window-pageyoffset" title="dom-Window-pageYOffset"><code>pageYOffset</code></dfn> 59.174 - attributes must return the y-coordinate, 59.175 - relative to the <a href="#initial-containing-block">initial containing block</a> origin, of the top 59.176 - of the <a href="#viewport">viewport</a>.</p> 59.177 - 59.178 - <p>When the 59.179 - <dfn id="dom-window-scroll" title="dom-Window-scroll"><code>scroll(<var>x</var>,<var>y</var>)</code></dfn> 59.180 - method is invoked these steps must be run:</p> 59.181 - 59.182 - <ol> 59.183 - <li><p>If either <var title="">x</var> or <var title="">y</var> is 59.184 - infinite or NaN terminate this algorithm.</li> 59.185 - 59.186 - <li> 59.187 - <dl> 59.188 - <dt>If <a href="#document-content">document content</a> can have overflow to the right 59.189 - <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>, 59.190 - <a href="#content">content</a> width - <a href="#content-edge">content edge</a> 59.191 - width)).</dd> 59.192 - 59.193 - <dt>If <a href="#document-content">document content</a> can have overflow to the left 59.194 - (under right-to-left conditions) 59.195 - <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>, 59.196 - <a href="#content-edge">content edge</a> width - <a href="#content">content</a> 59.197 - width)).</dd> 59.198 - </dl> 59.199 - 59.200 - <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>, 59.201 - <a href="#document-content">document content</a> height - <a href="#viewport">viewport</a> 59.202 - height excluding the size of a rendered scroll bar (if any))).</li> 59.203 - 59.204 - <li><p>Align the x-coordinate <var title="">x</var> of the 59.205 - <a href="#document-content">document content</a> with the left of the <a href="#viewport">viewport</a> 59.206 - and align the y-coordinate <var title="">y</var> of the <a href="#document-content">document 59.207 - content</a> with the top of the <a href="#viewport">viewport</a>.</li> 59.208 - 59.209 - <li><p>If the aligning caused content to move <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> 59.210 - to 59.211 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-event-fire" title="concept-event-fire">fire an event</a> 59.212 - named <code title="event-scroll">scroll</code> that bubbles at the 59.213 - <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object, unless a 59.214 - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#concept-task" title="concept-task">task</a> to fire that event at the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object 59.215 - was already <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task" title="queue a task">queued</a>.</li> 59.216 - </ol> 59.217 - 59.218 - <p>When the 59.219 - <dfn id="dom-window-scrollto" title="dom-Window-scrollto"><code>scrollTo(<var title="">x</var>,<var title="">y</var>)</code></dfn> 59.220 - method is invoked, the user agent must act as if the 59.221 - <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with 59.222 - the same arguments.</p> 59.223 - 59.224 - <p>When the 59.225 - <dfn id="dom-window-scrollby" title="dom-Window-scrollby"><code>scrollBy(<var title="">x</var>,<var title="">y</var>)</code></dfn> 59.226 - method is invoked, the user agent must act as if the 59.227 - <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with 59.228 - <var title="">x</var> plus <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> 59.229 - as first argument and <var title="">y</var> plus 59.230 - <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second argument.</p> 59.231 - 59.232 - <p>The <dfn id="dom-window-screenx" title="dom-Window-screenX"><code>screenX</code></dfn> 59.233 - attribute must return the x-coordinate, 59.234 - relative to the origin of the screen of the output device, of the top of 59.235 - the client window as number of pixels, or zero if there is no such 59.236 - thing.</p> 59.237 - 59.238 - <p>The <dfn id="dom-window-screeny" title="dom-Window-screenY"><code>screenY</code></dfn> 59.239 - attribute must return the y-coordinate, 59.240 - relative to the origin of the screen of the output device, of the left of 59.241 - the client window as number of pixels, or zero if there is no such 59.242 - thing.</p> 59.243 - 59.244 - <p>The <dfn id="dom-window-outerwidth" title="dom-Window-outerWidth"><code>outerWidth</code></dfn> 59.245 - attribute must return the width of the 59.246 - client window. If there is no client window this 59.247 - attribute must return zero.</p> 59.248 - 59.249 - <p>The <dfn id="dom-window-outerheight" title="dom-Window-outerHeight"><code>outerHeight</code></dfn> 59.250 - attribute must return the height of the 59.251 - client window. If there is no client window 59.252 - this attribute must return zero.</p> 59.253 - 59.254 + 59.255 +<pre class="idl"><span class="idlInterface" id="widl-def-Window">partial interface <span class="idlInterfaceID">Window</span> { 59.256 +<span class="idlMethod"> <span class="idlMethType"><a>MediaQueryList</a></span> <span class="idlMethName"><a href="#widl-Window-matchMedia-MediaQueryList-DOMString-query">matchMedia</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">query</span></span>);</span> 59.257 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>Screen</a></span> <span class="idlAttrName"><a href="#widl-Window-screen">screen</a></span>;</span> 59.258 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-innerWidth">innerWidth</a></span>;</span> 59.259 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-innerHeight">innerHeight</a></span>;</span> 59.260 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-scrollX">scrollX</a></span>;</span> 59.261 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-pageXOffset">pageXOffset</a></span>;</span> 59.262 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-scrollY">scrollY</a></span>;</span> 59.263 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-pageYOffset">pageYOffset</a></span>;</span> 59.264 +<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-Window-scroll-void-long-x-long-y">scroll</a></span> (<span class="idlParam"><span class="idlParamType"><a>long</a></span> <span class="idlParamName">x</span></span>, <span class="idlParam"><span class="idlParamType"><a>long</a></span> <span class="idlParamName">y</span></span>);</span> 59.265 +<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-Window-scrollTo-void-long-x-long-y">scrollTo</a></span> (<span class="idlParam"><span class="idlParamType"><a>long</a></span> <span class="idlParamName">x</span></span>, <span class="idlParam"><span class="idlParamType"><a>long</a></span> <span class="idlParamName">y</span></span>);</span> 59.266 +<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-Window-scrollBy-void-long-x-long-y">scrollBy</a></span> (<span class="idlParam"><span class="idlParamType"><a>long</a></span> <span class="idlParamName">x</span></span>, <span class="idlParam"><span class="idlParamType"><a>long</a></span> <span class="idlParamName">y</span></span>);</span> 59.267 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-screenX">screenX</a></span>;</span> 59.268 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-screenY">screenY</a></span>;</span> 59.269 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-outerWidth">outerWidth</a></span>;</span> 59.270 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Window-outerHeight">outerHeight</a></span>;</span> 59.271 +};</span></pre> 59.272 +<dl class="attributes"> 59.273 +<dt class="attribute" id="widl-Window-screen"> 59.274 +<code>screen</code> of type <span class="idlAttrType"><a>Screen</a></span>, readonly</dt> 59.275 +<dd> 59.276 +<p>The <code>screen</code> attribute must return the <code>screen</code> object associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object. It always returns the same object.</p> <p class="note">Accessing <code>screen</code> through a <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#windowproxy">WindowProxy</a></code> object might yield different results when the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is navigated.</dd> 59.277 +<dt class="attribute" id="widl-Window-innerWidth"> 59.278 +<code>innerWidth</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.279 +<dd> 59.280 +<p>The <code>innerWidth</code> attribute must return the <a href="#viewport">viewport</a> width including the size of a rendered scroll bar (if any).</p> <div class="example"> <p>The following snippet shows how to obtain the width of the viewport:</p> <pre><code>var viewportWidth = innerWidth</code></pre> </div></dd> 59.281 +<dt class="attribute" id="widl-Window-innerHeight"> 59.282 +<code>innerHeight</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.283 +<dd> 59.284 +<p>The <code>innerHeight</code> attribute must return the <a href="#viewport">viewport</a> height including the size of a rendered scroll bar (if any).</dd> 59.285 +<dt class="attribute" id="widl-Window-scrollX"> 59.286 +<code>scrollX</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.287 +<dd> 59.288 +<p>The <code>scrollX</code> attribute attribute must return the x-coordinate, relative to the <a href="#initial-containing-block">initial containing block</a> origin, of the left of the <a href="#viewport">viewport</a>.</dd> 59.289 +<dt class="attribute" id="widl-Window-pageXOffset"> 59.290 +<code>pageXOffset</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.291 +<dd> 59.292 +<p>The <code>pageXOffset</code> attribute attribute must return the value returned by the <code>scrollX</code> attribute.</dd> 59.293 +<dt class="attribute" id="widl-Window-scrollY"> 59.294 +<code>scrollY</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.295 +<dd> 59.296 +<p>The <code>scrollY</code> attribute attribute must return the y-coordinate, relative to the <a href="#initial-containing-block">initial containing block</a> origin, of the top of the <a href="#viewport">viewport</a>.</dd> 59.297 +<dt class="attribute" id="widl-Window-pageYOffset"> 59.298 +<code>pageYOffset</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.299 +<dd> 59.300 +<p>The <code>pageYOffset</code> attribute attribute must return the value returned by the <code>scrollY</code> attribute.</dd> 59.301 +<dt class="attribute" id="widl-Window-screenX"> 59.302 +<code>screenX</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.303 +<dd> 59.304 +<p>The <code>screenX</code> attribute must return the x-coordinate, relative to the origin of the screen of the output device, of the left of the client window as number of pixels, or zero if there is no such thing.</dd> 59.305 +<dt class="attribute" id="widl-Window-screenY"> 59.306 +<code>screenY</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.307 +<dd> 59.308 +<p>The <code>screenY</code> attribute must return the y-coordinate, relative to the origin of the screen of the output device, of the top of the client window as number of pixels, or zero if there is no such thing.</dd> 59.309 +<dt class="attribute" id="widl-Window-outerWidth"> 59.310 +<code>outerWidth</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.311 +<dd> 59.312 +<p>The <code>outerWidth</code> attribute must return the width of the client window. If there is no client window this attribute must return zero.</dd> 59.313 +<dt class="attribute" id="widl-Window-outerHeight"> 59.314 +<code>outerHeight</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.315 +<dd> 59.316 +<p>The <code>outerHeight</code> attribute must return the height of the client window. If there is no client window this attribute must return zero.</dd> 59.317 +</dl> 59.318 +<dl class="methods"> 59.319 +<dt class="method" id="widl-Window-matchMedia-MediaQueryList-DOMString-query"> 59.320 +<code>matchMedia</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>MediaQueryList</a></span></dt> 59.321 +<dd> 59.322 +<p>When the <code>matchMedia</code> operation is invoked these steps must be run:</p> <ol> <li><p>Let <var title="">parsed_media_query_list</var> be the result of <a class="external" href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html#parse-a-media-query-list" title="parse a media query list">parsing</a> <var title="">media_query_list</var>.</li> <li><p>Return a <em>new</em> <code>MediaQueryList</code> object, associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object, with <var title="">parsed_media_query_list</var> as its associated media query list.</li> </ol></dd> 59.323 +<dt class="method" id="widl-Window-scroll-void-long-x-long-y"> 59.324 +<code>scroll</code> (<span class="idlParam"><span class="idlParamType"><a>long</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>long</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 59.325 +<dd> 59.326 +<p>When the <code>scroll</code> operation is invoked these steps must be run:</p> <ol> <li><p>If either <var title="">x</var> or <var title="">y</var> is infinite or NaN terminate this algorithm.</li> <li> <dl> <dt>If <a href="#document-content">document content</a> can have overflow to the right <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>, <a href="#content">content</a> width - <a href="#content-edge">content edge</a> width)).</dd> <dt>If <a href="#document-content">document content</a> can have overflow to the left (under right-to-left conditions) <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>, <a href="#content-edge">content edge</a> width - <a href="#content">content</a> width)).</dd> </dl> </li> <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>, <a href="#document-content">document content</a> height - <a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar (if any))).</li> <li><p>Align the x-coordinate <var title="">x</var> of the <a href="#document-content">document content</a> with the left of the <a href="#viewport">viewport</a> and align the y-coordinate <var title="">y</var> of the <a href="#document-content">document content</a> with the top of the <a href="#viewport">viewport</a>.</li> <li><p>If the aligning caused content to move <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> to <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-event-fire" title="concept-event-fire">fire an event</a> named <code title="event-scroll">scroll</code> that bubbles at the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object, unless a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#concept-task" title="concept-task">task</a> to fire that event at the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object was already <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task" title="queue a task">queued</a>.</li> </ol></dd> 59.327 +<dt class="method" id="widl-Window-scrollTo-void-long-x-long-y"> 59.328 +<code>scrollTo</code> (<span class="idlParam"><span class="idlParamType"><a>long</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>long</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 59.329 +<dd> 59.330 +<p>When the <code>scrollTo</code> operation is invoked, the user agent must act as if the <code title="dom-Window-scroll">scroll()</code> method was invoked with the same arguments.</dd> 59.331 +<dt class="method" id="widl-Window-scrollBy-void-long-x-long-y"> 59.332 +<code>scrollBy</code> (<span class="idlParam"><span class="idlParamType"><a>long</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>long</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 59.333 +<dd> 59.334 +<p>When the <code>scrollBy</code> operation is invoked, the user agent must act as if the <code title="dom-Window-scroll">scroll()</code> method was invoked with <var title="">x</var> plus <code title="dom-Window-scrollX">scrollX</code> as first argument and <var title="">y</var> plus <code title="dom-Window-scrollY">scrollY</code> as second argument.</dd> 59.335 +</dl> 59.336 59.337 59.338 <h3 id="the-mediaquerylist-interface"><span class="secno">4.1 </span>The <code title="">MediaQueryList</code> Interface</h3> 59.339 59.340 - <p>A <code><a href="#mediaquerylist">MediaQueryList</a></code> object has an associated media query list 59.341 - set on creation and an associated 59.342 - <dfn id="list-of-media-query-list-listeners">list of media query list listeners</dfn>, which is initially 59.343 - empty.</p> 59.344 + <p>A <code>MediaQueryList</code> interface has an associated media query list set on creation and an associated <dfn id="list-of-media-query-list-listeners">list of media query list listeners</dfn>, which is initially empty.</p> <p>If the associated media query list changes in evaluation then, for each listener in the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a> — in appending order, <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> that invokes the listener, passing as argument the <code>MediaQueryList</code> object.</p> <div class="example"> <p>A simple piece of code that detects changes in the orientation of the viewport can be written as follows:</p> <pre><code>function handleOrientationChange(mql) { if(mql.matches) // landscape … else … } var mql = matchMedia("(orientation:landscape)") mql.addListener(handleOrientationChange)</code></pre> </div> 59.345 +<pre class="idl"><span class="idlInterface" id="widl-def-MediaQueryList">interface <span class="idlInterfaceID">MediaQueryList</span> { 59.346 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-MediaQueryList-media">media</a></span>;</span> 59.347 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>boolean</a></span> <span class="idlAttrName"><a href="#widl-MediaQueryList-matches">matches</a></span>;</span> 59.348 +<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-MediaQueryList-addListener-void-MediaQueryListListener-listener">addListener</a></span> (<span class="idlParam"><span class="idlParamType"><a>MediaQueryListListener</a></span> <span class="idlParamName">listener</span></span>);</span> 59.349 +<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-MediaQueryList-removeListener-void-MediaQueryListListener-listener">removeListener</a></span> (<span class="idlParam"><span class="idlParamType"><a>MediaQueryListListener</a></span> <span class="idlParamName">listener</span></span>);</span> 59.350 +};</span></pre> 59.351 +<dl class="attributes"> 59.352 +<dt class="attribute" id="widl-MediaQueryList-media"> 59.353 +<code>media</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 59.354 +<dd> 59.355 +<p>The <code>media</code> attribute must return the <a class="external" href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html#serialize-a-media-query-list" title="serialize a media query list">serialized</a> form of the associated media query list.</dd> 59.356 +<dt class="attribute" id="widl-MediaQueryList-matches"> 59.357 +<code>matches</code> of type <span class="idlAttrType"><a>boolean</a></span>, readonly</dt> 59.358 +<dd> 59.359 +<p>The <code>matches</code> attribute must return true if the associated media query list matches the state of the rendered <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> and false if it does not.</dd> 59.360 +</dl> 59.361 +<dl class="methods"> 59.362 +<dt class="method" id="widl-MediaQueryList-addListener-void-MediaQueryListListener-listener"> 59.363 +<code>addListener</code> (<span class="idlParam"><span class="idlParamType"><a>MediaQueryListListener</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 59.364 +<dd> 59.365 +<p>When the <code>addListener</code> operation is invoked <var title="">listener</var> must be appended to the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>, unless it is already in the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>.</dd> 59.366 +<dt class="method" id="widl-MediaQueryList-removeListener-void-MediaQueryListListener-listener"> 59.367 +<code>removeListener</code> (<span class="idlParam"><span class="idlParamType"><a>MediaQueryListListener</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 59.368 +<dd> 59.369 +<p>When the <code>removeListener</code> operation is invoked <var title="">listener</var> must be removed from the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>.</dd> 59.370 +</dl> 59.371 59.372 - <p>If the associated media query list changes in evaluation then, for each 59.373 - listener in the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a> — in 59.374 - appending order, <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> that invokes the listener, 59.375 - passing as argument the <code><a href="#mediaquerylist">MediaQueryList</a></code> object.</p> 59.376 59.377 - <div class="example"> 59.378 - <p>A simple piece of code that detects changes in the orientation of the 59.379 - viewport can be written as follows:</p> 59.380 - <pre><code>function handleOrientationChange(mql) { 59.381 - if(mql.matches) // landscape 59.382 - … 59.383 - else 59.384 - … 59.385 -} 59.386 -var mql = matchMedia("(orientation:landscape)") 59.387 -mql.addListener(handleOrientationChange)</code></pre> 59.388 - </div> 59.389 + 59.390 +<pre class="idl"><span class="idlInterface" id="widl-def-MediaQueryListListener">interface <span class="idlInterfaceID">MediaQueryListListener</span> { 59.391 +<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-MediaQueryListListener-handleChange-void-MediaQueryList-list">handleChange</a></span> (<span class="idlParam"><span class="idlParamType"><a>MediaQueryList</a></span> <span class="idlParamName">list</span></span>);</span> 59.392 +};</span></pre> 59.393 +<dl class="methods"> 59.394 +<dt class="method" id="widl-MediaQueryListListener-handleChange-void-MediaQueryList-list"> 59.395 +<code>handleChange</code> (<span class="idlParam"><span class="idlParamType"><a>MediaQueryList</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 59.396 +</dl> 59.397 59.398 - <pre class="idl">interface <dfn id="mediaquerylist">MediaQueryList</dfn> { 59.399 - readonly attribute DOMString <a href="#dom-mediaquerylist-media" title="dom-MediaQueryList-media">media</a>; 59.400 - readonly attribute boolean <a href="#dom-mediaquerylist-matches" title="dom-MediaQueryList-matches">matches</a>; 59.401 - void <a href="#dom-mediaquerylist-addlistener" title="dom-MediaQueryList-addListener">addListener</a>(<a href="#mediaquerylistlistener">MediaQueryListListener</a> <var title="">listener</var>); 59.402 - void <a href="#dom-mediaquerylist-removelistener" title="dom-MediaQueryList-removeListener">removeListener</a>(<a href="#mediaquerylistlistener">MediaQueryListListener</a> <var title="">listener</var>); 59.403 -}; 59.404 - 59.405 -[Callback, NoInterfaceObject] 59.406 -interface <dfn id="mediaquerylistlistener">MediaQueryListListener</dfn> { 59.407 - void <span>handleChange</span>(<a href="#mediaquerylist">MediaQueryList</a> <var title="">mql</var>); 59.408 -};</pre> 59.409 - 59.410 - <p>The 59.411 - <dfn id="dom-mediaquerylist-media" title="dom-MediaQueryList-media"><code>media</code></dfn> 59.412 - must return the 59.413 - <a class="external" href="http://dvcs.w3.org/hg/cssom/raw-file/tip/Overview.html#serialize-a-media-query-list" title="serialize a media query list">serialized</a> form of the associated media query list.</p> 59.414 - 59.415 - <p>The <dfn id="dom-mediaquerylist-matches" title="dom-MediaQueryList-matches"><code>matches</code></dfn> 59.416 - must return true if the associated media query list 59.417 - matches the state of the rendered <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> and false if it 59.418 - does not.</p> 59.419 - 59.420 - <p>When the 59.421 - <dfn id="dom-mediaquerylist-addlistener" title="dom-MediaQueryList-addListener"><code>addListener(<var>listener</var>)</code></dfn> 59.422 - is invoked <var title="">listener</var> must be 59.423 - appended to the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>, unless 59.424 - it is already in the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>.</p> 59.425 - 59.426 - <p>When the 59.427 - <dfn id="dom-mediaquerylist-removelistener" title="dom-MediaQueryList-removeListener"><code>removeListener(<var>listener</var>)</code></dfn> 59.428 - is invoked <var title="">listener</var> must be 59.429 - removed from the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>.</p> 59.430 - 59.431 - 59.432 - 59.433 + 59.434 <h3 id="the-screen-interface"><span class="secno">4.2 </span>The <code title="">Screen</code> Interface</h3> 59.435 59.436 - <p>As its name suggests, the <code><a href="#screen">Screen</a></code> interface represents 59.437 - information about the screen of the output device.</p> 59.438 - 59.439 - <pre class="idl">interface <dfn id="screen">Screen</dfn> { 59.440 - readonly attribute unsigned long <a href="#dom-screen-availwidth" title="dom-Screen-availWidth">availWidth</a>; 59.441 - readonly attribute unsigned long <a href="#dom-screen-availheight" title="dom-Screen-availHeight">availHeight</a>; 59.442 - readonly attribute unsigned long <a href="#dom-screen-width" title="dom-Screen-width">width</a>; 59.443 - readonly attribute unsigned long <a href="#dom-screen-height" title="dom-Screen-height">height</a>; 59.444 - readonly attribute unsigned long <a href="#dom-screen-colordepth" title="dom-Screen-colorDepth">colorDepth</a>; 59.445 - readonly attribute unsigned long <a href="#dom-screen-pixeldepth" title="dom-Screen-pixelDepth">pixelDepth</a>; 59.446 -};</pre> 59.447 - 59.448 - <p>The <dfn id="dom-screen-availwidth" title="dom-Screen-availWidth"><code>availWidth</code></dfn> 59.449 - attribute must return the available width of the 59.450 - rendering surface of the output device.</p> 59.451 - 59.452 - <p>The <dfn id="dom-screen-availheight" title="dom-Screen-availHeight"><code>availHeight</code></dfn> 59.453 - attribute must return the available height of the 59.454 - rendering surface of the output device.</p> 59.455 - 59.456 - <p>The <dfn id="dom-screen-width" title="dom-Screen-width"><code>width</code></dfn> attribute 59.457 - must return the width of the output device.</p> 59.458 - 59.459 - <p>The <dfn id="dom-screen-height" title="dom-Screen-height"><code>height</code></dfn> attribute 59.460 - must return the height of the output device.</p> 59.461 - 59.462 - <p>The <dfn id="dom-screen-colordepth" title="dom-Screen-colorDepth"><code>colorDepth</code></dfn> and 59.463 - <dfn id="dom-screen-pixeldepth" title="dom-Screen-pixelDepth"><code>pixelDepth</code></dfn> attributes 59.464 - must both return the number of bits allocated to 59.465 - colors (i.e. excluding the alpha channel) in the output device. If the 59.466 - output device does not support colors these attributes 59.467 - must return zero.</p> 59.468 - <!-- pixelDepth is not supported by Internet Explorer 7 --> 59.469 + <p>As its name suggests, the <code>Screen</code> interface represents information about the screen of the output device.</p> 59.470 +<pre class="idl"><span class="idlInterface" id="widl-def-Screen">interface <span class="idlInterfaceID">Screen</span> { 59.471 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-Screen-availWidth">availWidth</a></span>;</span> 59.472 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-Screen-availHeight">availHeight</a></span>;</span> 59.473 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-Screen-width">width</a></span>;</span> 59.474 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-Screen-height">height</a></span>;</span> 59.475 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-Screen-colorDepth">colorDepth</a></span>;</span> 59.476 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-Screen-pixelDepth">pixelDepth</a></span>;</span> 59.477 +};</span></pre> 59.478 +<dl class="attributes"> 59.479 +<dt class="attribute" id="widl-Screen-availWidth"> 59.480 +<code>availWidth</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.481 +<dd> 59.482 +<p>The <code>availWidth</code> attribute must return the available width of the rendering surface of the output device.</dd> 59.483 +<dt class="attribute" id="widl-Screen-availHeight"> 59.484 +<code>availHeight</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.485 +<dd> 59.486 +<p>The <code>availHeight</code> attribute must return the available height of the rendering surface of the output device.</dd> 59.487 +<dt class="attribute" id="widl-Screen-width"> 59.488 +<code>width</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.489 +<dd> 59.490 +<p>The <code>width</code> attribute must return the width of the output device.</dd> 59.491 +<dt class="attribute" id="widl-Screen-height"> 59.492 +<code>height</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.493 +<dd> 59.494 +<p>The <code>height</code> attribute must return the height of the output device.</dd> 59.495 +<dt class="attribute" id="widl-Screen-colorDepth"> 59.496 +<code>colorDepth</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.497 +<dd> 59.498 +<p>The <code>colorDepth</code> attribute must return the number of bits allocated to colors (i.e. excluding the alpha channel) in the output device. If the output device does not support colors these attributes must return zero.</dd> 59.499 +<dt class="attribute" id="widl-Screen-pixelDepth"> 59.500 +<code>pixelDepth</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.501 +<dd> 59.502 +<p>The <code>pixelDepth</code> attribute must return the value returned by the <code>colorDepth</code> attributed.</dd> 59.503 +</dl> 59.504 59.505 59.506 <h2 id="extensions-to-the-document-interface"><span class="secno">5 </span>Extensions to the <code title="">Document</code> Interface</h2> 59.507 59.508 - <pre class="idl">partial interface <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a> { 59.509 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#element">Element</a>? <a href="#dom-document-elementfrompoint" title="dom-Document-elementFromPoint">elementFromPoint</a>(float <var title="">x</var>, float <var title="">y</var>); 59.510 - <a href="#caretposition">CaretPosition</a>? <a href="#dom-document-caretpositionfrompoint" title="dom-Document-caretPositionFromPoint">caretPositionFromPoint</a>(float <var title="">x</var>, float <var title="">y</var>); 59.511 -};</pre> 59.512 - 59.513 - <p>The 59.514 - <dfn id="dom-document-elementfrompoint" title="dom-Document-elementFromPoint"><code>elementFromPoint(<var>x</var>, <var>y</var>)</code></dfn> 59.515 - method must return the element at coordinates <var>x</var>,<var>y</var> in 59.516 - the <a href="#viewport">viewport</a>. The element to be returned is determined 59.517 - through hit testing. If either argument is negative, <var title="">x</var> is 59.518 - greater than the <a href="#viewport">viewport</a> width excluding the size of a 59.519 - rendered scroll bar (if any), or <var title="">y</var> is greater than the 59.520 - <a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar 59.521 - (if any), the method must return null. If there is no element at the given 59.522 - position the method must return the root element, if any, or null 59.523 - otherwise.</p> 59.524 - 59.525 - <p>The 59.526 - <dfn id="dom-document-caretpositionfrompoint" title="dom-Document-caretPositionFromPoint"><code>caretPositionFromPoint(<var>x</var>, <var>y</var>)</code></dfn> 59.527 - method must return the result of running these steps:</p> 59.528 - 59.529 - <ol> 59.530 - <li><p>If either argument is negative, <var title="">x</var> is greater 59.531 - than the <a href="#viewport">viewport</a> width excluding the size of a rendered 59.532 - scroll bar (if any), <var title="">y</var> is greather than the 59.533 - <a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar 59.534 - (if any) return null.</li> 59.535 - 59.536 - <li><p>If at the coordinates <var title="">x</var>,<var title="">y</var> 59.537 - in the <a href="#viewport">viewport</a> no text insertion point indicator would have 59.538 - been inserted return null.</li> 59.539 - 59.540 - <li> 59.541 - <p>If at the coordinates <var title="">x</var>,<var title="">y</var> 59.542 - in the <a href="#viewport">viewport</a> a text insertion point indicator would have 59.543 - been inserted in a text entry widget which is also a replaced element 59.544 - return a <a href="#caret-position">caret position</a> with its properties set as 59.545 - follows:</p> 59.546 - 59.547 - <dl> 59.548 - <dt><a href="#caret-node">caret node</a></dt> 59.549 - <dd><p>The node corresponding to the text entry widget.</dd> 59.550 - 59.551 - <dt><a href="#caret-offset">caret offset</a></dt> 59.552 - <dd><p>The amount of 16-bit units to the left of where the 59.553 - text insertion point indicator would have inserted.</dd> 59.554 - 59.555 - <dt><a href="#caret-range">caret range</a></dt> 59.556 - <dd><p>null</dd> 59.557 - </dl> 59.558 - </li> 59.559 - 59.560 - <li> 59.561 - <p>Otherwise, return a <a href="#caret-position">caret position</a> where the 59.562 - <a href="#caret-range">caret range</a> is a collapsed 59.563 - <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#range">Range</a></code> object for the position 59.564 - where the text insertion point indicator would have been inserted and 59.565 - the other properties are set as follows:</p> 59.566 - 59.567 - <dl> 59.568 - <dt><a href="#caret-node">caret node</a></dt> 59.569 - <dd><p>The <code class="external" title="dom-Range-startContainer"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-range-startcontainer">startContainer</a></code> 59.570 - of the <a href="#caret-range">caret range</a>.</dd> 59.571 - 59.572 - <dt><a href="#caret-offset">caret offset</a></dt> 59.573 - <dd><p>The <code class="external" title="dom-Range-startOffset"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-range-startoffset">startOffset</a></code> of 59.574 - the <a href="#caret-range">caret range</a>.</p> 59.575 - </dl> 59.576 - </li> 59.577 - </ol> 59.578 - 59.579 - <p class="note">The specifics of hit testing are out of scope of this 59.580 - specification and therefore the exact details of 59.581 - <code title="dom-Document-elementFromPoint"><a href="#dom-document-elementfrompoint">elementFromPoint()</a></code> and 59.582 - <code title="dom-Document-caretPositionFromPoint"><a href="#dom-document-caretpositionfrompoint">caretPositionFromPoint()</a></code> 59.583 - are therefore too. Hit testing will hopefully be defined in a future 59.584 - revision of CSS or HTML.</p> 59.585 + 59.586 +<pre class="idl"><span class="idlInterface" id="widl-def-Document">partial interface <span class="idlInterfaceID">Document</span> { 59.587 +<span class="idlMethod"> <span class="idlMethType"><a>Element</a>?</span> <span class="idlMethName"><a href="#widl-Document-elementFromPoint-Element-float-x-float-y">elementFromPoint</a></span> (<span class="idlParam"><span class="idlParamType"><a>float</a></span> <span class="idlParamName">x</span></span>, <span class="idlParam"><span class="idlParamType"><a>float</a></span> <span class="idlParamName">y</span></span>);</span> 59.588 +<span class="idlMethod"> <span class="idlMethType"><a>CaretPosition</a>?</span> <span class="idlMethName"><a href="#widl-Document-caretPositionFromPoint-CaretPosition-float-x-float-y">caretPositionFromPoint</a></span> (<span class="idlParam"><span class="idlParamType"><a>float</a></span> <span class="idlParamName">x</span></span>, <span class="idlParam"><span class="idlParamType"><a>float</a></span> <span class="idlParamName">y</span></span>);</span> 59.589 +};</span></pre> 59.590 +<dl class="methods"> 59.591 +<dt class="method" id="widl-Document-elementFromPoint-Element-float-x-float-y"> 59.592 +<code>elementFromPoint</code> (<span class="idlParam"><span class="idlParamType"><a>float</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>float</a></span></span>), returns <span class="idlMethType"><a>Element</a>?</span></dt> 59.593 +<dd> 59.594 +<p>The <code>elementFromPoint</code> operation must return the element at coordinates <var>x</var>,<var>y</var> in the <a href="#viewport">viewport</a>. The element to be returned is determined through hit testing. If either argument is negative, <var title="">x</var> is greater than the <a href="#viewport">viewport</a> width excluding the size of a rendered scroll bar (if any), or <var title="">y</var> is greater than the <a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar (if any), the method must return null. If there is no element at the given position the method must return the root element, if any, or null otherwise.</dd> 59.595 +<dt class="method" id="widl-Document-caretPositionFromPoint-CaretPosition-float-x-float-y"> 59.596 +<code>caretPositionFromPoint</code> (<span class="idlParam"><span class="idlParamType"><a>float</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>float</a></span></span>), returns <span class="idlMethType"><a>CaretPosition</a>?</span></dt> 59.597 +<dd> 59.598 +<p>The <code>caretPositionFromPoint</code> operation must return the result of running these steps:</p> <ol> <li><p>If either argument is negative, <var title="">x</var> is greater than the <a href="#viewport">viewport</a> width excluding the size of a rendered scroll bar (if any), <var title="">y</var> is greather than the <a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar (if any) return null.</li> <li><p>If at the coordinates <var title="">x</var>,<var title="">y</var> in the <a href="#viewport">viewport</a> no text insertion point indicator would have been inserted return null.</li> <li> <p>If at the coordinates <var title="">x</var>,<var title="">y</var> in the <a href="#viewport">viewport</a> a text insertion point indicator would have been inserted in a text entry widget which is also a replaced element return a <a href="#caret-position">caret position</a> with its properties set as follows:</p> <dl> <dt><a href="#caret-node">caret node</a></dt> <dd><p>The node corresponding to the text entry widget.</dd> <dt><a href="#caret-offset">caret offset</a></dt> <dd><p>The amount of 16-bit units to the left of where the text insertion point indicator would have inserted.</dd> <dt><a href="#caret-range">caret range</a></dt> <dd><p>null</dd> </dl> </li> <li> <p>Otherwise, return a <a href="#caret-position">caret position</a> where the <a href="#caret-range">caret range</a> is a collapsed <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#range">Range</a></code> object for the position where the text insertion point indicator would have been inserted and the other properties are set as follows:</p> <dl> <dt><a href="#caret-node">caret node</a></dt> <dd><p>The <code class="external" title="dom-Range-startContainer"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-range-startcontainer">startContainer</a></code> of the <a href="#caret-range">caret range</a>.</dd> <dt><a href="#caret-offset">caret offset</a></dt> <dd><p>The <code class="external" title="dom-Range-startOffset"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-range-startoffset">startOffset</a></code> of the <a href="#caret-range">caret range</a>.</p> </dl> </li> </ol> <p class="note">The specifics of hit testing are out of scope of this specification and therefore the exact details of <code title="dom-Document-elementFromPoint">elementFromPoint()</code> and <code title="dom-Document-caretPositionFromPoint">caretPositionFromPoint()</code> are therefore too. Hit testing will hopefully be defined in a future revision of CSS or HTML.</dd> 59.599 +</dl> 59.600 59.601 59.602 59.603 <h3 id="the-caretposition-interface"><span class="secno">5.1 </span>The <code title="">CaretPosition</code> Interface</h3> 59.604 59.605 - <p>A <dfn id="caret-position">caret position</dfn> gives the position of a 59.606 - text insertion point indicator. It always has an associated 59.607 - <dfn id="caret-node">caret node</dfn>, <dfn id="caret-offset">caret offset</dfn>, and 59.608 - <dfn id="caret-range">caret range</dfn>. It is represented by a <code><a href="#caretposition">CaretPosition</a></code> 59.609 - object.</p> 59.610 - 59.611 - <pre class="idl">interface <dfn id="caretposition">CaretPosition</dfn> { 59.612 - readonly attribute <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#node">Node</a> <a href="#dom-caretposition-offsetnode" title="dom-CaretPosition-offsetNode">offsetNode</a>; 59.613 - readonly attribute unsigned long <a href="#dom-caretposition-offset" title="dom-CaretPosition-offset">offset</a>;<!-- 59.614 - readonly attribute <span data-anolis-spec=dom>Range</span>? <span title="dom-CaretPosition-range">range</span>;--> 59.615 -};</pre> 59.616 - 59.617 - <p>The 59.618 - <dfn id="dom-caretposition-offsetnode" title="dom-CaretPosition-offsetNode"><code>offsetNode</code></dfn> 59.619 - attribute must return the <a href="#caret-node">caret node</a>.</p> 59.620 - 59.621 - <p>The 59.622 - <dfn id="dom-caretposition-offset" title="dom-CaretPosition-offset"><code>offset</code></dfn> 59.623 - attribute must return the <a href="#caret-offset">caret offset</a>.</p> 59.624 - 59.625 - <!-- 59.626 - <p>The 59.627 - <dfn id="dom-caretposition-range" title="dom-CaretPosition-range"><code>range</code></dfn> 59.628 - attribute must return the <span>caret range</span>.</p> 59.629 - --> 59.630 - <!-- https://bugs.webkit.org/show_bug.cgi?id=27046 --> 59.631 + <p>A <dfn id="caret-position">caret position</dfn> gives the position of a text insertion point indicator. It always has an associated <dfn id="caret-node">caret node</dfn>, <dfn id="caret-offset">caret offset</dfn>, and <dfn id="caret-range">caret range</dfn>. It is represented by a <code>CaretPosition</code> interface.</p> 59.632 +<pre class="idl"><span class="idlInterface" id="widl-def-CaretPosition">interface <span class="idlInterfaceID">CaretPosition</span> { 59.633 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>Node</a></span> <span class="idlAttrName"><a href="#widl-CaretPosition-offsetNode">offsetNode</a></span>;</span> 59.634 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-CaretPosition-offset">offset</a></span>;</span> 59.635 +};</span></pre> 59.636 +<dl class="attributes"> 59.637 +<dt class="attribute" id="widl-CaretPosition-offsetNode"> 59.638 +<code>offsetNode</code> of type <span class="idlAttrType"><a>Node</a></span>, readonly</dt> 59.639 +<dd> 59.640 +<p>The <code>offsetNode</code> attribute must return the <a href="#caret-node">caret node</a>.</dd> 59.641 +<dt class="attribute" id="widl-CaretPosition-offset"> 59.642 +<code>offset</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.643 +<dd> 59.644 +<p>The <code>offset</code> attribute must return the <a href="#caret-offset">caret offset</a>.</dd> 59.645 +</dl> 59.646 59.647 59.648 <h2 id="extensions-to-the-element-interface"><span class="secno">6 </span>Extensions to the <code title="">Element</code> Interface</h2> 59.649 59.650 - <pre class="idl">partial interface <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#element">Element</a> { 59.651 - <a href="#clientrectlist">ClientRectList</a> <a href="#dom-element-getclientrects" title="dom-Element-getClientRects">getClientRects</a>(); 59.652 - <a href="#clientrect">ClientRect</a> <a href="#dom-element-getboundingclientrect" title="dom-Element-getBoundingClientRect">getBoundingClientRect</a>(); 59.653 - 59.654 - // scrolling 59.655 - void <a href="#dom-element-scrollintoview" title="dom-Element-scrollIntoView">scrollIntoView</a>(optional boolean <var title="">top</var>); 59.656 - attribute long <a href="#dom-element-scrolltop" title="dom-Element-scrollTop">scrollTop</a>; // scroll on setting 59.657 - attribute long <a href="#dom-element-scrollleft" title="dom-Element-scrollLeft">scrollLeft</a>; // scroll on setting 59.658 - readonly attribute long <a href="#dom-element-scrollwidth" title="dom-Element-scrollWidth">scrollWidth</a>; 59.659 - readonly attribute long <a href="#dom-element-scrollheight" title="dom-Element-scrollHeight">scrollHeight</a>; 59.660 - 59.661 - readonly attribute long <a href="#dom-element-clienttop" title="dom-Element-clientTop">clientTop</a>; 59.662 - readonly attribute long <a href="#dom-element-clientleft" title="dom-Element-clientLeft">clientLeft</a>; 59.663 - readonly attribute long <a href="#dom-element-clientwidth" title="dom-Element-clientWidth">clientWidth</a>; 59.664 - readonly attribute long <a href="#dom-element-clientheight" title="dom-Element-clientHeight">clientHeight</a>; 59.665 -};</pre> 59.666 + 59.667 +<pre class="idl"><span class="idlInterface" id="widl-def-Element">partial interface <span class="idlInterfaceID">Element</span> { 59.668 +<span class="idlMethod"> <span class="idlMethType"><a>ClientRectList</a></span> <span class="idlMethName"><a href="#widl-Element-getClientRects-ClientRectList">getClientRects</a></span> ();</span> 59.669 +<span class="idlMethod"> <span class="idlMethType"><a>ClientRect</a></span> <span class="idlMethName"><a href="#widl-Element-getBoundingClientRect-ClientRect">getBoundingClientRect</a></span> ();</span> 59.670 +<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-Element-scrollIntoView-void-boolean-top">scrollIntoView</a></span> (<span class="idlParam">optional <span class="idlParamType"><a>boolean</a></span> <span class="idlParamName">top</span></span>);</span> 59.671 +<span class="idlAttribute"> attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-scrollTop">scrollTop</a></span>;</span> 59.672 +<span class="idlAttribute"> attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-scrollLeft">scrollLeft</a></span>;</span> 59.673 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-scrollWidth">scrollWidth</a></span>;</span> 59.674 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-scrollHeight">scrollHeight</a></span>;</span> 59.675 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-clientTop">clientTop</a></span>;</span> 59.676 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-clientLeft">clientLeft</a></span>;</span> 59.677 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-clientWidth">clientWidth</a></span>;</span> 59.678 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-Element-clientHeight">clientHeight</a></span>;</span> 59.679 +};</span></pre> 59.680 +<dl class="attributes"> 59.681 +<dt class="attribute" id="widl-Element-scrollTop"> 59.682 +<code>scrollTop</code> of type <span class="idlAttrType"><a>long</a></span></dt> 59.683 +<dd> 59.684 +<p>The <code>scrollTop</code> attribute must return the result of running these steps:</p> <ol> <li><p>If the element does not have any associated CSS layout box or the element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return zero and terminate these steps.</li> <li><p>If the element is the root element return the value of <code title="dom-Window-scrollY">scrollY</code>.</li> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element does not have any overflow, return the value of <code title="dom-Window-scrollY">scrollY</code>.</li> <li><p>Return the y-coordinate of the <a href="#content">content</a> at the alignment point with the top of the <a href="#content-edge">content edge</a> of the element.</li> </ol> <p>When setting the <code>scrollTop</code> attribute these steps must be run:</p> <ol> <li><p>Let <var title="">y</var> be the given value.</li> <li><p>If the element does not have any associated CSS layout box, the element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, or the element has no overflow, terminate these steps.</li> <li><p>If the element is the root element invoke <code title="dom-Window-scroll">scroll()</code> with zero as first argument and <var title="">y</var> as second.</li> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element does not have any vertical overflow, invoke <code title="dom-Window-scroll">scroll()</code> with <code title="dom-Window-scrollX">scrollX</code> as first argument and <var title="">y</var> as second.</li> <li><p><a href="#scroll-an-element" title="scroll an element">Scroll the element</a> to <code title="dom-Element-scrollLeft">scrollLeft</code>,<var title="">y</var>. </ol></dd> 59.685 +<dt class="attribute" id="widl-Element-scrollLeft"> 59.686 +<code>scrollLeft</code> of type <span class="idlAttrType"><a>long</a></span></dt> 59.687 +<dd> 59.688 +<p>The <code>scrollLeft</code> attribute must return the result of running these steps:</p> <ol> <li><p>If the element does not have any associated CSS layout box or the element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return zero and terminate these steps.</li> <li><p>If the element is the root element return the value of <code title="dom-Window-scrollX">scrollX</code>.</li> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element does not have any overflow, return the value of <code title="dom-Window-scrollX">scrollX</code>.</li> <li><p>Return the x-coordinate of the <a href="#content">content</a> at the alignment point with the left of the <a href="#content-edge">content edge</a> of the element.</li> </ol> <p>When setting the <code>scrollLeft</code> attribute these steps must be run:</p> <ol> <li><p>Let <var title="">x</var> be the given value.</li> <li><p>If the element does not have any associated CSS layout box, the element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, or the element has no overflow, terminate these steps.</li> <li><p>If the element is the root element invoke <code title="dom-Window-scroll">scroll()</code> with <var title="">x</var> as first argument and zero as second.</li> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element does not have any vertical overflow, invoke <code title="dom-Window-scroll">scroll()</code> with <var title="">x</var> as first argument and <code title="dom-Window-scrollY">scrollY</code> as second.</li> <li><p><a href="#scroll-an-element" title="Scroll an element">Scroll the element</a> to <var title="">x</var>,<code title="dom-Element-scrollTop">scrollTop</code>. </ol></dd> 59.689 +<dt class="attribute" id="widl-Element-scrollWidth"> 59.690 +<code>scrollWidth</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.691 +<dd> 59.692 +<p>The <code>scrollWidth</code> attribute must return the result of running these steps:</p> <ol> <li><p>If the element does not have any associated CSS layout box return zero and terminate these steps.</li> <li><p>If the element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is not in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return max(<a href="#document-content">document content</a> width, value of <code title="dom-Window-innerWidth">innerWidth</code>).</li> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return max(<a href="#document-content">document content</a> width, value of <code title="dom-Window-innerWidth">innerWidth</code>).</li> <li><p>Return the computed value of the '<code>padding-left</code>' property, plus the computed value of the '<code>padding-right</code>', plus the <a href="#content">content</a> width of the element.</li> </ol></dd> 59.693 +<dt class="attribute" id="widl-Element-scrollHeight"> 59.694 +<code>scrollHeight</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.695 +<dd> 59.696 +<p>The <code>scrollHeight</code> attribute must return the result of running these steps:</p> <ol> <li><p>If the element does not have any associated CSS layout box return zero and terminate these steps.</li> <li><p>If the element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is not in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return max(<a href="#document-content">document content</a> height, value of <code title="dom-Window-innerHeight">innerHeight</code>).</li> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return max(<a href="#document-content">document content</a> height, value of <code title="dom-Window-innerHeight">innerHeight</code>).</li> <li><p>Return the computed value of the '<code>padding-top</code>' property, plus the computed value of the '<code>padding-bottom</code>', plus the <a href="#content">content</a> height of the element.</li> </ol></dd> 59.697 +<dt class="attribute" id="widl-Element-clientTop"> 59.698 +<code>clientTop</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.699 +<dd> 59.700 +<p>The <code>clientTop</code> attribute returns the computed value of the '<code>border-top-width</code>' property plus the width of any scrollbar rendered between the top <a href="#padding-edge">padding edge</a> and the top <a href="#border-edge">border edge</a>.</dd> 59.701 +<dt class="attribute" id="widl-Element-clientLeft"> 59.702 +<code>clientLeft</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.703 +<dd> 59.704 +<p>The <code>clientLeft</code> attribute returns the computed value of the '<code>border-left-width</code>' property plus the width of any scrollbar rendered between the left <a href="#padding-edge">padding edge</a> and the left <a href="#border-edge">border edge</a>.</dd> 59.705 +<dt class="attribute" id="widl-Element-clientWidth"> 59.706 +<code>clientWidth</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.707 +<dd> 59.708 +<p>The <code>clientWidth</code> attribute returns the <a href="#viewport">viewport</a> width excluding the size of a rendered scroll bar (if any) if the element is the root element and the width of the <a href="#padding-edge">padding edge</a> (excluding the width of any rendered scrollbar between the <a href="#padding-edge">padding edge</a> and the <a href="#border-edge">border edge</a>) otherwise.</dd> 59.709 +<dt class="attribute" id="widl-Element-clientHeight"> 59.710 +<code>clientHeight</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.711 +<dd> 59.712 +<p>The <code>clientHeight</code> attribute returns the <a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar (if any) if the element is the root element and the height of the <a href="#padding-edge">padding edge</a> (excluding the height of any rendered scrollbar between the <a href="#padding-edge">padding edge</a> and the <a href="#border-edge">border edge</a>) otherwise.</dd> 59.713 +</dl> 59.714 +<dl class="methods"> 59.715 +<dt class="method" id="widl-Element-getClientRects-ClientRectList"> 59.716 +<code>getClientRects</code> (), returns <span class="idlMethType"><a>ClientRectList</a></span></dt> 59.717 +<dd> 59.718 +<p>The <code>getClientRects</code> operation, when invoked, must return the result of the following algorithm:</p> <ol> <li><p>If the element on which it was invoked does not have an associated CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code> namespace return an empty <code>ClientRectList</code> object and stop this algorithm.</li> <li><p>If the element does not have an associated CSS layout box and is in the <code>http://www.w3.org/2000/svg</code> namespace return a <code>ClientRectList</code> object containing a single <code>ClientRect</code> object that describes the bounding box of the element as defined by the SVG specification. <a href="#refsSVG">[SVG]</a></li> <li> <p>Return a <code>ClientRectList</code> object containing a list of <code>ClientRect</code> objects in content order describing the border boxes (including those with a height or width of zero) with the following constraints:</p> <ul> <li><p>If the element on which the method was invoked has a computed value for <code>display</code> property of <code>table</code> or <code>inline-table</code> include both the table box and the caption box, if any, but not the anonymous container box.</li> <li><p>Replace each <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">anonymous block box</a> with its child box(es) and repeat this until no anonymous block boxes are left in the final list.</li> </ul> </li> </ol></dd> 59.719 +<dt class="method" id="widl-Element-getBoundingClientRect-ClientRect"> 59.720 +<code>getBoundingClientRect</code> (), returns <span class="idlMethType"><a>ClientRect</a></span></dt> 59.721 +<dd> 59.722 +<p>The <code>getBoundingClientRect</code> operation, when invoked, must return the result of the following algorithm:</p> <ol> <li><p>Let <var>list</var> be the result of invoking <code title="dom-Element-getClientRects">getClientRects()</code> on the same element this method was invoked on.</li> <li><p>If the <var>list</var> is empty return a <code>ClientRect</code> object whose <code title="dom-ClientRect-top">top</code>, <code title="dom-ClientRect-right">right</code>, <code title="dom-ClientRect-bottom">bottom</code> and <code title="dom-ClientRect-left">left</code> members are zero.</li> <li><p>Otherwise, return a <code>ClientRect</code> object describing the smallest rectangle that includes the first rectangle in <var>list</var> and all of the remaining rectangles of which the height or width is not zero.</li> </ol> <div class="example"> <p>The following snippet gets the dimensions of the first <code>div</code> element in a document:</p> <pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect(); 59.723 +var exampleWidth = example.width; 59.724 +var exampleHeight = example.height;</code></pre> </div></dd> 59.725 +<dt class="method" id="widl-Element-scrollIntoView-void-boolean-top"> 59.726 +<code>scrollIntoView</code> (<span class="idlParam">optional <span class="idlParamType"><a>boolean</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 59.727 +<dd> 59.728 +<p>The must run these steps:</p> <ol> <li><p>If the element does not have any associated CSS layout box terminate these steps.</li> <li><p><a href="#scroll-an-element-into-view" title="scroll an element into view">Scroll the element into view</a> with the <i title="">align to top flag</i> set if <var title="">top</var> is true or omitted.</li> </ol></dd> 59.729 +</dl> 59.730 59.731 59.732 <h3 id="the-getclientrects-and-getboundingclientrect-methods"><span class="secno">6.1 </span>The <code title="">getClientRects()</code> and 59.733 <code title="">getBoundingClientRect()</code> methods</h3> 59.734 59.735 - <p>The <code title="dom-Element-getClientRects"><a href="#dom-element-getclientrects">getClientRects()</a></code> and <code title="dom-Element-getBoundingClientRect"><a href="#dom-element-getboundingclientrect">getBoundingClientRect()</a></code> 59.736 + <p>The <code title="dom-Element-getClientRects">getClientRects()</code> and <code title="dom-Element-getBoundingClientRect">getBoundingClientRect()</code> 59.737 methods provide information about the position of the border box edges of 59.738 an element relative to the viewport. The objects these methods return 59.739 must be static. That is, changes to the underlying 59.740 document are not reflected in the objects.</p> 59.741 59.742 - <p>The 59.743 - <dfn id="dom-element-getclientrects" title="dom-Element-getClientRects"><code>getClientRects()</code></dfn> 59.744 - method, when invoked, must return the result of the 59.745 - following algorithm:</p> 59.746 - 59.747 - <ol> 59.748 - <li><p>If the element on which it was invoked does not have an associated 59.749 - CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code> 59.750 - namespace return an empty <code><a href="#clientrectlist">ClientRectList</a></code> object and stop 59.751 - this algorithm.</li> 59.752 - 59.753 - <li><p>If the element does not have an associated CSS layout box and is 59.754 - in the <code>http://www.w3.org/2000/svg</code> namespace return a 59.755 - <code><a href="#clientrectlist">ClientRectList</a></code> object containing a single 59.756 - <code><a href="#clientrect">ClientRect</a></code> object that describes the bounding box of the 59.757 - element as defined by the SVG specification. 59.758 - <a href="#refsSVG">[SVG]</a> 59.759 - 59.760 - <li> 59.761 - <p>Return a <code><a href="#clientrectlist">ClientRectList</a></code> object containing a list of 59.762 - <code><a href="#clientrect">ClientRect</a></code> objects in content order describing the border 59.763 - boxes (including those with a height or width of zero) with the 59.764 - following constraints:</p> 59.765 - 59.766 - <ul> 59.767 - <li><p>If the element on which the method was invoked has a computed 59.768 - value for <code>display</code> property of <code>table</code> or 59.769 - <code>inline-table</code> include both the table box and the caption 59.770 - box, if any, but not the anonymous container box. 59.771 - <!--<span data-anolis-ref>CSS</span>--> 59.772 - 59.773 - <li><p>Replace each 59.774 - <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">anonymous 59.775 - block box</a> with its child box(es) and repeat this until no anonymous 59.776 - block boxes are left in the final list. 59.777 - <!--<span data-anolis-ref>CSS</span>--> 59.778 - </ul> 59.779 - </li> 59.780 - </ol> 59.781 - 59.782 - <p>The 59.783 - <dfn id="dom-element-getboundingclientrect" title="dom-Element-getBoundingClientRect"><code>getBoundingClientRect()</code></dfn> 59.784 - method, when invoked, must return the result of the 59.785 - following algorithm:</p> 59.786 - 59.787 - <ol> 59.788 - <li><p>Let <var>list</var> be the result of invoking 59.789 - <code title="dom-Element-getClientRects"><a href="#dom-element-getclientrects">getClientRects()</a></code> on the 59.790 - same element this method was invoked on.</li> 59.791 - 59.792 - <li><p>If the <var>list</var> is empty return a <code><a href="#clientrect">ClientRect</a></code> 59.793 - object whose <code title="dom-ClientRect-top"><a href="#dom-clientrect-top">top</a></code>, 59.794 - <code title="dom-ClientRect-right"><a href="#dom-clientrect-right">right</a></code>, 59.795 - <code title="dom-ClientRect-bottom"><a href="#dom-clientrect-bottom">bottom</a></code> and 59.796 - <code title="dom-ClientRect-left"><a href="#dom-clientrect-left">left</a></code> members are zero.</li> 59.797 - 59.798 - <li><p>Otherwise, return a <code><a href="#clientrect">ClientRect</a></code> object describing the 59.799 - smallest rectangle that includes the first rectangle in <var>list</var> 59.800 - and all of the remaining rectangles of which the height or width is not 59.801 - zero.</li> 59.802 - </ol> 59.803 - 59.804 - <div class="example"> 59.805 - <p>The following snippet gets the dimensions of the first 59.806 - <code>div</code> element in a document:</p> 59.807 - 59.808 - <pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect(); 59.809 -var exampleWidth = example.width; 59.810 -var exampleHeight = example.height;</code></pre> 59.811 - </div> 59.812 - 59.813 - 59.814 <h3 id="element-scrolling-members"><span class="secno">6.2 </span><code title="">Element</code> Scrolling Members</h3> 59.815 59.816 <p>To <dfn id="scroll-an-element-into-view">scroll an element into view</dfn>, optionally with an 59.817 @@ -776,7 +569,6 @@ 59.818 </li> 59.819 </ol> 59.820 59.821 - 59.822 <p>To <dfn id="scroll-an-element">scroll an element</dfn> to <var title="">x</var>,<var title="">y</var> means to:</p> 59.823 59.824 <ol> 59.825 @@ -816,169 +608,6 @@ 59.826 </ol> 59.827 59.828 59.829 - <p>The 59.830 - <dfn id="dom-element-scrollintoview" title="dom-Element-scrollIntoView"><code>scrollIntoView([<var>top</var>])</code></dfn> 59.831 - method must run these steps:</p> 59.832 - 59.833 - <ol> 59.834 - <li><p>If the element does not have any associated CSS layout box 59.835 - terminate these steps.</li> 59.836 - 59.837 - <li><p><a href="#scroll-an-element-into-view" title="scroll an element into view">Scroll the element into view</a> 59.838 - with the <i title="">align to top flag</i> set if <var title="">top</var> 59.839 - is true or omitted.</li> 59.840 - </ol> 59.841 - 59.842 - 59.843 - <p>The <dfn id="dom-element-scrolltop" title="dom-Element-scrollTop"><code>scrollTop</code></dfn> 59.844 - attribute must return the result of running these 59.845 - steps:</p> 59.846 - 59.847 - <ol> 59.848 - <li><p>If the element does not have any associated CSS layout box or the 59.849 - element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in 59.850 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return zero and terminate these steps.</li> 59.851 - 59.852 - <li><p>If the element is the root element return the value of 59.853 - <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code>.</li> 59.854 - 59.855 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, 59.856 - the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element 59.857 - does not have any overflow, return the value of 59.858 - <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code>.</li> 59.859 - 59.860 - <li><p>Return the y-coordinate of the <a href="#content">content</a> at the 59.861 - alignment point with the top of the <a href="#content-edge">content edge</a> of the 59.862 - element.</li> 59.863 - </ol> 59.864 - 59.865 - <p>When setting the <code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code> 59.866 - attribute these steps must be run:</p> 59.867 - 59.868 - <ol> 59.869 - <li><p>Let <var title="">y</var> be the given value.</li> 59.870 - 59.871 - <li><p>If the element does not have any associated CSS layout box, the 59.872 - element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in 59.873 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, or the element has no overflow, terminate these 59.874 - steps.</li> 59.875 - 59.876 - <li><p>If the element is the root element invoke 59.877 - <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with zero as first 59.878 - argument and <var title="">y</var> as second.</li> 59.879 - 59.880 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, 59.881 - the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element 59.882 - does not have any vertical overflow, invoke 59.883 - <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with 59.884 - <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> as first 59.885 - argument and <var title="">y</var> as second.</li> 59.886 - 59.887 - <li><p><a href="#scroll-an-element" title="scroll an element">Scroll the element</a> to 59.888 - <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code>,<var title="">y</var>. 59.889 - </ol> 59.890 - 59.891 - <p>The <dfn id="dom-element-scrollleft" title="dom-Element-scrollLeft"><code>scrollLeft</code></dfn> 59.892 - attribute must return the result of running these 59.893 - steps:</p> 59.894 - 59.895 - <ol> 59.896 - <li><p>If the element does not have any associated CSS layout box or the 59.897 - element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in 59.898 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return zero and terminate these steps.</li> 59.899 - 59.900 - <li><p>If the element is the root element return the value of 59.901 - <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>.</li> 59.902 - 59.903 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, 59.904 - the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element 59.905 - does not have any overflow, return the value of 59.906 - <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>.</li> 59.907 - 59.908 - <li><p>Return the x-coordinate of the <a href="#content">content</a> at the 59.909 - alignment point with the left of the <a href="#content-edge">content edge</a> of the 59.910 - element.</li> 59.911 - </ol> 59.912 - 59.913 - <p>When setting the <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code> attribute these steps 59.914 - must be run:</p> 59.915 - 59.916 - <ol> 59.917 - <li><p>Let <var title="">x</var> be the given value.</li> 59.918 - 59.919 - <li><p>If the element does not have any associated CSS layout box, the 59.920 - element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in 59.921 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, or the element has no overflow, terminate these 59.922 - steps.</li> 59.923 - 59.924 - <li><p>If the element is the root element invoke 59.925 - <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with 59.926 - <var title="">x</var> as first argument and zero as second.</li> 59.927 - 59.928 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, 59.929 - the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element 59.930 - does not have any vertical overflow, invoke 59.931 - <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with 59.932 - <var title="">x</var> as first argument and 59.933 - <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second.</li> 59.934 - 59.935 - <li><p><a href="#scroll-an-element" title="Scroll an element">Scroll the element</a> to 59.936 - <var title="">x</var>,<code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code>. 59.937 - </ol> 59.938 - 59.939 - <p>The <dfn id="dom-element-scrollwidth" title="dom-Element-scrollWidth"><code>scrollWidth</code></dfn> 59.940 - attribute must return the result of running these 59.941 - steps:</p> 59.942 - 59.943 - <ol> 59.944 - <li><p>If the element does not have any associated CSS layout box return 59.945 - zero and terminate these steps.</li> 59.946 - 59.947 - <li><p>If the element is the root element and the 59.948 - <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is not in 59.949 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> 59.950 - return 59.951 - max(<a href="#document-content">document content</a> width, value of <code title="dom-Window-innerWidth"><a href="#dom-window-innerwidth">innerWidth</a></code>).</li> 59.952 - 59.953 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> 59.954 - and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in 59.955 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> 59.956 - return 59.957 - max(<a href="#document-content">document content</a> width, value of <code title="dom-Window-innerWidth"><a href="#dom-window-innerwidth">innerWidth</a></code>).</li> 59.958 - 59.959 - <li><p>Return the computed value of the '<code>padding-left</code>' 59.960 - property, plus the computed value of the '<code>padding-right</code>', 59.961 - plus the <a href="#content">content</a> width of the element.</li> 59.962 - </ol> 59.963 - 59.964 - <p>The <dfn id="dom-element-scrollheight" title="dom-Element-scrollHeight"><code>scrollHeight</code></dfn> 59.965 - attribute must return the result of running these 59.966 - steps:</p> 59.967 - 59.968 - <ol> 59.969 - <li><p>If the element does not have any associated CSS layout box return 59.970 - zero and terminate these steps.</li> 59.971 - 59.972 - <li><p>If the element is the root element and the 59.973 - <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is not in 59.974 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> 59.975 - return 59.976 - max(<a href="#document-content">document content</a> height, value of <code title="dom-Window-innerHeight"><a href="#dom-window-innerheight">innerHeight</a></code>).</li> 59.977 - 59.978 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> 59.979 - and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in 59.980 - <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> 59.981 - return 59.982 - max(<a href="#document-content">document content</a> height, value of <code title="dom-Window-innerHeight"><a href="#dom-window-innerheight">innerHeight</a></code>).</li> 59.983 - 59.984 - <li><p>Return the computed value of the '<code>padding-top</code>' 59.985 - property, plus the computed value of the '<code>padding-bottom</code>', 59.986 - plus the <a href="#content">content</a> height of the element.</li> 59.987 - </ol> 59.988 - 59.989 - <!-- for inline boxes offsetWidth and offsetHeight are identical to offset* --> 59.990 - 59.991 - 59.992 <h3 id="client-attributes"><span class="secno">6.3 </span>The <code title="">clientTop</code>, 59.993 <code title="">clientLeft</code>, <code title="">clientWidth</code>, and 59.994 <code title="">clientHeight</code> attributes</h3> 59.995 @@ -992,391 +621,189 @@ 59.996 Otherwise, these attributes must behave as defined in 59.997 the remainder of this section.</p> 59.998 59.999 - <p>The <code title="dom-Element-clientTop"><a href="#dom-element-clienttop">clientTop</a></code> attribute returns the computed value of the 59.1000 - '<code>border-top-width</code>' property plus the width of any scrollbar 59.1001 - rendered between the top <a href="#padding-edge">padding edge</a> and the top 59.1002 - <a href="#border-edge">border edge</a>.</p> 59.1003 - 59.1004 - <p>The <code title="dom-Element-clientLeft"><a href="#dom-element-clientleft">clientLeft</a></code> attribute returns the computed 59.1005 - value of the '<code>border-left-width</code>' property plus the width of 59.1006 - any scrollbar rendered between the left <a href="#padding-edge">padding edge</a> and the 59.1007 - left <a href="#border-edge">border edge</a>. 59.1008 - 59.1009 - <p>The <code title="dom-Element-clientWidth"><a href="#dom-element-clientwidth">clientWidth</a></code> attribute returns the 59.1010 - <a href="#viewport">viewport</a> width excluding the size of a rendered scroll bar 59.1011 - (if any) if the element is the root element and the 59.1012 - width of the <a href="#padding-edge">padding edge</a> (excluding the width of any 59.1013 - rendered scrollbar between the <a href="#padding-edge">padding edge</a> and the 59.1014 - <a href="#border-edge">border edge</a>) otherwise.</p> 59.1015 - 59.1016 - <p>The <code title="dom-Element-clientHeight"><a href="#dom-element-clientheight">clientHeight</a></code> attribute returns the 59.1017 - <a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar 59.1018 - (if any) if the element is the root element and the 59.1019 - height of the <a href="#padding-edge">padding edge</a> (excluding the width of any 59.1020 - rendered scrollbar between the <a href="#padding-edge">padding edge</a> and the 59.1021 - <a href="#border-edge">border edge</a>) otherwise.</p> 59.1022 - 59.1023 - 59.1024 - 59.1025 <h2 id="extensions-to-the-htmlelement-interface"><span class="secno">7 </span>Extensions to the <code title="">HTMLElement</code> Interface</h2> 59.1026 59.1027 - <pre class="idl">partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#htmlelement">HTMLElement</a> { 59.1028 - readonly attribute Element <a href="#dom-htmlelement-offsetparent" title="dom-HTMLElement-offsetParent">offsetParent</a>; 59.1029 - readonly attribute long <a href="#dom-htmlelement-offsettop" title="dom-HTMLElement-offsetTop">offsetTop</a>; 59.1030 - readonly attribute long <a href="#dom-htmlelement-offsetleft" title="dom-HTMLElement-offsetLeft">offsetLeft</a>; 59.1031 - readonly attribute long <a href="#dom-htmlelement-offsetwidth" title="dom-HTMLElement-offsetWidth">offsetWidth</a>; 59.1032 - readonly attribute long <a href="#dom-htmlelement-offsetheight" title="dom-HTMLElement-offsetHeight">offsetHeight</a>; 59.1033 -};</pre> 59.1034 - 59.1035 - 59.1036 - <h3 id="offset-attributes"><span class="secno">7.1 </span>The <code title="">offsetParent</code>, 59.1037 - <code title="">offsetTop</code>, <code title="">offsetLeft</code>, 59.1038 - <code title="">offsetWidth</code>, and <code title="">offsetHeight</code> 59.1039 - attributes</h3> 59.1040 - 59.1041 - <p>The 59.1042 - <dfn id="dom-htmlelement-offsetparent" title="dom-HTMLElement-offsetParent"><code>offsetParent</code></dfn> 59.1043 - attribute must return the result of running these 59.1044 - steps:</p> 59.1045 - 59.1046 - <ol> 59.1047 - <li> 59.1048 - <p>If any of the following holds true return null and terminate this 59.1049 - algorithm:</p> 59.1050 - 59.1051 - <ul> 59.1052 - <li>The element does not have an associated CSS layout box.</li> 59.1053 - 59.1054 - <li>The element is the root element.</li> 59.1055 - 59.1056 - <li>The element is 59.1057 - <a href="#the-html-body-element">the HTML <code>body</code> element</a>.</li> 59.1058 - 59.1059 - <li>The element's computed value of the '<code>position</code>' 59.1060 - property is <code>fixed</code>.</li> 59.1061 - </ul> 59.1062 - </li> 59.1063 - 59.1064 - <li> 59.1065 - <p>Return the nearest ancestor element of the element for which at least 59.1066 - one of the following is true and terminate this algorithm if such an 59.1067 - ancestor is found:</p> 59.1068 - 59.1069 - <ul> 59.1070 - <li>The computed value of the '<code>position</code>' property is not 59.1071 - <code>static</code>.</li> 59.1072 - 59.1073 - <li>It is <a href="#the-html-body-element">the HTML <code>body</code> element</a>.</li> 59.1074 - 59.1075 - <li>The computed value of the '<code>position</code>' property of 59.1076 - the element is <code>static</code> and the ancestor is one of the 59.1077 - following <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#html-elements" title="HTML elements">HTML elements</a>: 59.1078 - <code>td</code>, <code>th</code>, or <code>table</code>.</li> 59.1079 - </ul> 59.1080 - </li> 59.1081 - 59.1082 - <li><p>Return null.</li> 59.1083 - </ol> 59.1084 - 59.1085 - <p>The <dfn id="dom-htmlelement-offsettop" title="dom-HTMLElement-offsetTop"><code>offsetTop</code></dfn> 59.1086 - attribute must return the result of running these 59.1087 - steps:</p> 59.1088 - 59.1089 - <ol> 59.1090 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> 59.1091 - or does not have any associated CSS layout box return zero and terminate 59.1092 - this algorithm.</li> 59.1093 - 59.1094 - <li><p>If the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element is null return the 59.1095 - y-coordinate of the top <a href="#border-edge">border edge</a> of the first 59.1096 - CSS layout box associated with the element, relative to the 59.1097 - <a href="#initial-containing-block">initial containing block</a> origin, and terminate this 59.1098 - algorithm.</li> 59.1099 - 59.1100 - <li> 59.1101 - <p>Return the result of subtracting the y-coordinate of the top 59.1102 - <a href="#padding-edge">padding edge</a> of the first CSS layout box associated with 59.1103 - the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element from the y-coordinate of 59.1104 - the top <a href="#border-edge">border edge</a> of the first CSS layout box associated 59.1105 - with the element, relative to the <a href="#initial-containing-block">initial containing block</a> 59.1106 - origin.</p> 59.1107 - 59.1108 - <p class="note">An inline element that consists of multiple line boxes 59.1109 - will only have its first CSS layout box considered.</p> 59.1110 - </li> 59.1111 - </ol> 59.1112 - 59.1113 - <p>The <dfn id="dom-htmlelement-offsetleft" title="dom-HTMLElement-offsetLeft"><code>offsetLeft</code></dfn> 59.1114 - attribute must return the result of running these steps:</p> 59.1115 - 59.1116 - <ol> 59.1117 - <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> 59.1118 - element</a> or does not have any associated CSS layout box return zero 59.1119 - and terminate this algorithm.</li> 59.1120 - 59.1121 - <li><p>If the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element is null return the 59.1122 - x-coordinate of the left <a href="#border-edge">border edge</a> of the first 59.1123 - CSS layout box associated with the element, relative to the 59.1124 - <a href="#initial-containing-block">initial containing block</a> origin, and terminate this 59.1125 - algorithm.</li> 59.1126 - 59.1127 - <li> 59.1128 - <p>Return the result of subtracting the x-coordinate of the left 59.1129 - <a href="#padding-edge">padding edge</a> of the first CSS layout box associated with 59.1130 - the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element from the x-coordinate of 59.1131 - the left <a href="#border-edge">border edge</a> of the first CSS layout box associated 59.1132 - with the element, relative to the <a href="#initial-containing-block">initial containing block</a> 59.1133 - origin.</p> 59.1134 - </li> 59.1135 - </ol> 59.1136 - 59.1137 - <p>The 59.1138 - <dfn id="dom-htmlelement-offsetwidth" title="dom-HTMLElement-offsetWidth"><code>offsetWidth</code></dfn> 59.1139 - attribute must return the result of running these steps:</p> 59.1140 - 59.1141 - <ol> 59.1142 - <li><p>If the element does not have any associated CSS layout box return 59.1143 - zero and terminate this algorithm.</li> 59.1144 - 59.1145 - <li><p>Return the <a href="#border-edge">border edge</a> width of the first 59.1146 - CSS layout box associated with the element.</li> 59.1147 - </ol> 59.1148 - 59.1149 - <p>The 59.1150 - <dfn id="dom-htmlelement-offsetheight" title="dom-HTMLElement-offsetHeight"><code>offsetHeight</code></dfn> 59.1151 - attribute must return the result of running these steps:</p> 59.1152 - 59.1153 - <ol> 59.1154 - <li><p>If the element does not have any associated CSS layout box return 59.1155 - zero and terminate this algorithm.</li> 59.1156 - 59.1157 - <li><p>Return the <a href="#border-edge">border edge</a> height of the first 59.1158 - CSS layout box associated with the element.</li> 59.1159 - </ol> 59.1160 + 59.1161 +<pre class="idl"><span class="idlInterface" id="widl-def-HTMLElement">partial interface <span class="idlInterfaceID">HTMLElement</span> { 59.1162 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>Element</a></span> <span class="idlAttrName"><a href="#widl-HTMLElement-offsetParent">offsetParent</a></span>;</span> 59.1163 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-HTMLElement-offsetTop">offsetTop</a></span>;</span> 59.1164 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-HTMLElement-offsetLeft">offsetLeft</a></span>;</span> 59.1165 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-HTMLElement-offsetWidth">offsetWidth</a></span>;</span> 59.1166 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-HTMLElement-offsetHeight">offsetHeight</a></span>;</span> 59.1167 +};</span></pre> 59.1168 +<dl class="attributes"> 59.1169 +<dt class="attribute" id="widl-HTMLElement-offsetParent"> 59.1170 +<code>offsetParent</code> of type <span class="idlAttrType"><a>Element</a></span>, readonly</dt> 59.1171 +<dd> 59.1172 +<p>The <code>offsetParent</code> attribute must return the result of running these steps:</p> <ol> <li> <p>If any of the following holds true return null and terminate this algorithm:</p> <ul> <li>The element does not have an associated CSS layout box.</li> <li>The element is the root element.</li> <li>The element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>.</li> <li>The element's computed value of the '<code>position</code>' property is <code>fixed</code>.</li> </ul> </li> <li> <p>Return the nearest ancestor element of the element for which at least one of the following is true and terminate this algorithm if such an ancestor is found:</p> <ul> <li>The computed value of the '<code>position</code>' property is not <code>static</code>.</li> <li>It is <a href="#the-html-body-element">the HTML <code>body</code> element</a>.</li> <li>The computed value of the '<code>position</code>' property of the element is <code>static</code> and the ancestor is one of the following <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#html-elements" title="HTML elements">HTML elements</a>: <code>td</code>, <code>th</code>, or <code>table</code>.</li> </ul> </li> <li><p>Return null.</li> </ol></dd> 59.1173 +<dt class="attribute" id="widl-HTMLElement-offsetTop"> 59.1174 +<code>offsetTop</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1175 +<dd> 59.1176 +<p>The <code>offsetTop</code> attribute must return the result of running these steps:</p> <ol> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> or does not have any associated CSS layout box return zero and terminate this algorithm.</li> <li><p>If the <code title="dom-HTMLElement-offsetParent">offsetParent</code> of the element is null return the y-coordinate of the top <a href="#border-edge">border edge</a> of the first CSS layout box associated with the element, relative to the <a href="#initial-containing-block">initial containing block</a> origin, and terminate this algorithm.</li> <li> <p>Return the result of subtracting the y-coordinate of the top <a href="#padding-edge">padding edge</a> of the first CSS layout box associated with the <code title="dom-HTMLElement-offsetParent">offsetParent</code> of the element from the y-coordinate of the top <a href="#border-edge">border edge</a> of the first CSS layout box associated with the element, relative to the <a href="#initial-containing-block">initial containing block</a> origin.</p> <p class="note">An inline element that consists of multiple line boxes will only have its first CSS layout box considered.</p> </li> </ol></dd> 59.1177 +<dt class="attribute" id="widl-HTMLElement-offsetLeft"> 59.1178 +<code>offsetLeft</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1179 +<dd> 59.1180 +<p>The {@name{} attribute must return the result of running these steps:</p> <ol> <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> or does not have any associated CSS layout box return zero and terminate this algorithm.</li> <li><p>If the <code title="dom-HTMLElement-offsetParent">offsetParent</code> of the element is null return the x-coordinate of the left <a href="#border-edge">border edge</a> of the first CSS layout box associated with the element, relative to the <a href="#initial-containing-block">initial containing block</a> origin, and terminate this algorithm.</li> <li> <p>Return the result of subtracting the x-coordinate of the left <a href="#padding-edge">padding edge</a> of the first CSS layout box associated with the <code title="dom-HTMLElement-offsetParent">offsetParent</code> of the element from the x-coordinate of the left <a href="#border-edge">border edge</a> of the first CSS layout box associated with the element, relative to the <a href="#initial-containing-block">initial containing block</a> origin.</p> </li> </ol></dd> 59.1181 +<dt class="attribute" id="widl-HTMLElement-offsetWidth"> 59.1182 +<code>offsetWidth</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1183 +<dd> 59.1184 +<p>The <code>offsetWidth</code> attribute must return the result of running these steps:</p> <ol> <li><p>If the element does not have any associated CSS layout box return zero and terminate this algorithm.</li> <li><p>Return the <a href="#border-edge">border edge</a> width of the first CSS layout box associated with the element.</li> </ol></dd> 59.1185 +<dt class="attribute" id="widl-HTMLElement-offsetHeight"> 59.1186 +<code>offsetHeight</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1187 +<dd> 59.1188 +<p>The <code>offsetHeight</code> attribute must return the result of running these steps:</p> <ol> <li><p>If the element does not have any associated CSS layout box return zero and terminate this algorithm.</li> <li><p>Return the <a href="#border-edge">border edge</a> height of the first CSS layout box associated with the element.</li> </ol></dd> 59.1189 +</dl> 59.1190 59.1191 59.1192 <h2 id="extensions-to-the-range-interface"><span class="secno">8 </span>Extensions to the <code title="">Range</code> Interface</h2> 59.1193 59.1194 - <pre class="idl">partial interface <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#range">Range</a> { 59.1195 - <a href="#clientrectlist">ClientRectList</a> <a href="#dom-range-getclientrects" title="dom-Range-getClientRects">getClientRects</a>(); 59.1196 - <a href="#clientrect">ClientRect</a> <a href="#dom-range-getboundingclientrect" title="dom-Range-getBoundingClientRect">getBoundingClientRect</a>(); 59.1197 -};</pre> 59.1198 - 59.1199 <p>The objects the methods described below return must 59.1200 be static.</p> 59.1201 59.1202 - <p>The 59.1203 - <dfn id="dom-range-getclientrects" title="dom-Range-getClientRects"><code>getClientRects()</code></dfn> 59.1204 - method, when invoked, must return an empty 59.1205 - <code><a href="#clientrectlist">ClientRectList</a></code> object if the range is not in the document and 59.1206 - otherwise a <code><a href="#clientrectlist">ClientRectList</a></code> object containing a list of 59.1207 - <code><a href="#clientrect">ClientRect</a></code> objects in content order that matches the 59.1208 - following constraints:</p> 59.1209 + 59.1210 +<pre class="idl"><span class="idlInterface" id="widl-def-Range">partial interface <span class="idlInterfaceID">Range</span> { 59.1211 +<span class="idlMethod"> <span class="idlMethType"><a>ClientRectList</a></span> <span class="idlMethName"><a href="#widl-Range-getClientRects-ClientRectList">getClientRects</a></span> ();</span> 59.1212 +<span class="idlMethod"> <span class="idlMethType"><a>ClientRect</a></span> <span class="idlMethName"><a href="#widl-Range-getBoundingClientRect-ClientRect">getBoundingClientRect</a></span> ();</span> 59.1213 +};</span></pre> 59.1214 +<dl class="methods"> 59.1215 +<dt class="method" id="widl-Range-getClientRects-ClientRectList"> 59.1216 +<code>getClientRects</code> (), returns <span class="idlMethType"><a>ClientRectList</a></span></dt> 59.1217 +<dd> 59.1218 +<p>The <code>getClientRects</code> operation, when invoked, must return an empty <code>ClientRectList</code> object if the range is not in the document and otherwise a <code>ClientRectList</code> object containing a list of <code>ClientRect</code> objects in content order that matches the following constraints:</p> <ul> <li>For each element selected by the range, whose parent is not selected by the range, include the border boxes returned by invoking <code title="dom-Element-getClientRects">getClientRects()</code> on the element.</li> <li>For each <code>Text</code> node selected or partially selected by the range (including when the boundary-points are identical), include a <code>ClientRect</code> object (for the part that is selected, not the whole line box). The bounds of these <code>ClientRect</code> objects are computed using font metrics; thus, for horizontal writing, the vertical dimension of each box is determined by the font ascent and descent, and the horizontal dimension by the text advance width.</li> </ul></dd> 59.1219 +<dt class="method" id="widl-Range-getBoundingClientRect-ClientRect"> 59.1220 +<code>getBoundingClientRect</code> (), returns <span class="idlMethType"><a>ClientRect</a></span></dt> 59.1221 +<dd> 59.1222 +<p>The <code>getBoundingClientRect</code> operation, when invoked, must return the result of the following algorithm:</p> <ol> <li><p>Let <var>list</var> be the result of invoking <code title="dom-Range-getClientRects">getClientRects()</code> on the same range this method was invoked on.</li> <li><p>If <var>list</var> is empty return a <code>ClientRect</code> object whose <code title="dom-ClientRect-top">top</code>, <code title="dom-ClientRect-right">right</code>, <code title="dom-ClientRect-bottom">bottom</code> and <code title="dom-ClientRect-left">left</code> members are zero.</li> <li><p>Otherwise, return a <code>ClientRect</code> object describing the smallest rectangle that includes the first rectangle in <var>list</var> and all of the remaining rectangles of which the height or width is not zero.</li> </ol></dd> 59.1223 +</dl> 59.1224 59.1225 - <ul> 59.1226 - <li>For each element selected by the range, whose parent is not selected 59.1227 - by the range, include the border boxes returned by invoking 59.1228 - <code title="dom-Element-getClientRects"><a href="#dom-element-getclientrects">getClientRects()</a></code> on the 59.1229 - element.</li> 59.1230 59.1231 - <li>For each <code>Text</code> node selected or partially selected by the 59.1232 - range (including when the boundary-points are identical), include a 59.1233 - <code><a href="#clientrect">ClientRect</a></code> object (for the part that is selected, not the 59.1234 - whole line box). The bounds of these <code><a href="#clientrect">ClientRect</a></code> objects are 59.1235 - computed using font metrics; thus, for horizontal writing, the vertical 59.1236 - dimension of each box is determined by the font ascent and descent, and 59.1237 - the horizontal dimension by the text advance width.</li> 59.1238 - </ul> 59.1239 - 59.1240 - <p>The 59.1241 - <dfn id="dom-range-getboundingclientrect" title="dom-Range-getBoundingClientRect"><code>getBoundingClientRect()</code></dfn> 59.1242 - method, when invoked, must return the result of the 59.1243 - following algorithm:</p> 59.1244 - 59.1245 - <ol> 59.1246 - <li><p>Let <var>list</var> be the result of invoking 59.1247 - <code title="dom-Range-getClientRects"><a href="#dom-range-getclientrects">getClientRects()</a></code> on the 59.1248 - same range this method was invoked on.</li> 59.1249 - 59.1250 - <li><p>If <var>list</var> is empty return a 59.1251 - <code><a href="#clientrect">ClientRect</a></code> object whose 59.1252 - <code title="dom-ClientRect-top"><a href="#dom-clientrect-top">top</a></code>, 59.1253 - <code title="dom-ClientRect-right"><a href="#dom-clientrect-right">right</a></code>, 59.1254 - <code title="dom-ClientRect-bottom"><a href="#dom-clientrect-bottom">bottom</a></code> and 59.1255 - <code title="dom-ClientRect-left"><a href="#dom-clientrect-left">left</a></code> members are zero.</li> 59.1256 - 59.1257 - <li><p>Otherwise, return a <code><a href="#clientrect">ClientRect</a></code> object describing the 59.1258 - smallest rectangle that includes the first rectangle in <var>list</var> 59.1259 - and all of the remaining rectangles of which the height or width is not 59.1260 - zero.</li> 59.1261 - </ol> 59.1262 - 59.1263 - 59.1264 - 59.1265 - 59.1266 + 59.1267 <h2 id="extensions-to-the-mouseevent-interface"><span class="secno">9 </span>Extensions to the <code title="">MouseEvent</code> Interface</h2> 59.1268 59.1269 - <pre class="idl">partial interface <a href="#mouseevent">MouseEvent</a> { 59.1270 - readonly attribute long <a href="#dom-mouseevent-screenx" title="dom-MouseEvent-screenX">screenX</a>; 59.1271 - readonly attribute long <a href="#dom-mouseevent-screeny" title="dom-MouseEvent-screenY">screenY</a>; 59.1272 - 59.1273 - readonly attribute long <a href="#dom-mouseevent-pagex" title="dom-MouseEvent-pageX">pageX</a>; 59.1274 - readonly attribute long <a href="#dom-mouseevent-pagey" title="dom-MouseEvent-pageY">pageY</a>; 59.1275 - 59.1276 - readonly attribute long <a href="#dom-mouseevent-clientx" title="dom-MouseEvent-clientX">clientX</a>; 59.1277 - readonly attribute long <a href="#dom-mouseevent-clienty" title="dom-MouseEvent-clientY">clientY</a>; 59.1278 - readonly attribute long <a href="#dom-mouseevent-x" title="dom-MouseEvent-x">x</a>; 59.1279 - readonly attribute long <a href="#dom-mouseevent-y" title="dom-MouseEvent-y">y</a>; 59.1280 - 59.1281 - readonly attribute long <a href="#dom-mouseevent-offsetx" title="dom-MouseEvent-offsetX">offsetX</a>; 59.1282 - readonly attribute long <a href="#dom-mouseevent-offsety" title="dom-MouseEvent-offsetY">offsetY</a>; 59.1283 -};</pre> 59.1284 - 59.1285 - <p class="XXX">The object IDL fragment redefines some members. Can we 59.1286 + <p class="issue">The object IDL fragment redefines some members. Can we 59.1287 resolve this somehow?</p> 59.1288 59.1289 - <p>The 59.1290 - <dfn id="dom-mouseevent-screenx" title="dom-MouseEvent-screenX"><code>screenX</code></dfn> 59.1291 - attribute must return the x-coordinate of 59.1292 - the position where the event occurred relative to the origin of the 59.1293 - screen.</p> 59.1294 - 59.1295 - <p>The 59.1296 - <dfn id="dom-mouseevent-screeny" title="dom-MouseEvent-screenY"><code>screenY</code></dfn> 59.1297 - attribute must return the y-coordinate of 59.1298 - the position where the event occurred relative to the origin of the 59.1299 - screen.</p> 59.1300 - 59.1301 - <p>The <dfn id="dom-mouseevent-pagex" title="dom-MouseEvent-pageX"><code>pageX</code></dfn> attribute 59.1302 - must return the horizontal coordinate of 59.1303 - the position where the event occurred relative to 59.1304 - the origin of the <a href="#initial-containing-block">initial containing block</a>.</p> 59.1305 - 59.1306 - <p>The <dfn id="dom-mouseevent-pagey" title="dom-MouseEvent-pageY"><code>pageY</code></dfn> attribute 59.1307 - must return the y-coordinate of the 59.1308 - position where the event occurred relative to the origin of the 59.1309 - <a href="#initial-containing-block">initial containing block</a>.</p> 59.1310 - 59.1311 - <p>The <dfn id="dom-mouseevent-clientx" title="dom-MouseEvent-clientX"><code>clientX</code></dfn> 59.1312 - attribute must return the x-coordinate of 59.1313 - the position where the event occurred relative to the origin of the 59.1314 - <a href="#viewport">viewport</a>.</p> 59.1315 - 59.1316 - <p>The <dfn id="dom-mouseevent-clienty" title="dom-MouseEvent-clientY"><code>clientY</code></dfn> 59.1317 - attribute must return the y-coordinate of 59.1318 - the position where the event occurred relative to the origin of the 59.1319 - <a href="#viewport">viewport</a>.</p> 59.1320 - 59.1321 - <p>The <dfn id="dom-mouseevent-x" title="dom-MouseEvent-x"><code>x</code></dfn> 59.1322 - attribute must return the value of 59.1323 - <code title="dom-MouseEvent-clientX"><a href="#dom-mouseevent-clientx">clientX</a></code>.</p> 59.1324 - 59.1325 - <p>The <dfn id="dom-mouseevent-y" title="dom-MouseEvent-y"><code>y</code></dfn> 59.1326 - attribute must return the value of 59.1327 - <code title="dom-MouseEvent-clientY"><a href="#dom-mouseevent-clienty">clientY</a></code>.</p> 59.1328 - 59.1329 <!-- x/y do not match IE in the position:relative case but do match other 59.1330 browsers --> 59.1331 59.1332 + 59.1333 +<pre class="idl"><span class="idlInterface" id="widl-def-MouseEvent">partial interface <a class="idlInterfaceID" href="#mouseevent">MouseEvent</a> { 59.1334 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-screenX">screenX</a></span>;</span> 59.1335 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-screenY">screenY</a></span>;</span> 59.1336 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-pageX">pageX</a></span>;</span> 59.1337 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-pageY">pageY</a></span>;</span> 59.1338 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-clientX">clientX</a></span>;</span> 59.1339 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-clientY">clientY</a></span>;</span> 59.1340 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-x">x</a></span>;</span> 59.1341 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-y">y</a></span>;</span> 59.1342 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-offsetX">offsetX</a></span>;</span> 59.1343 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="#widl-MouseEvent-offsetY">offsetY</a></span>;</span> 59.1344 +};</span></pre> 59.1345 +<dl class="attributes"> 59.1346 +<dt class="attribute" id="widl-MouseEvent-screenX"> 59.1347 +<code>screenX</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1348 +<dd> 59.1349 +<p>The <code>screenX</code> attribute must return the x-coordinate of the position where the event occurred relative to the origin of the screen.</dd> 59.1350 +<dt class="attribute" id="widl-MouseEvent-screenY"> 59.1351 +<code>screenY</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1352 +<dd> 59.1353 +<p>The <code>screenY</code> attribute must return the y-coordinate of the position where the event occurred relative to the origin of the screen.</dd> 59.1354 +<dt class="attribute" id="widl-MouseEvent-pageX"> 59.1355 +<code>pageX</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1356 +<dd> 59.1357 +<p>The <code>pageX</code> attribute must return the horizontal coordinate of the position where the event occurred relative to the origin of the <a href="#initial-containing-block">initial containing block</a>.</dd> 59.1358 +<dt class="attribute" id="widl-MouseEvent-pageY"> 59.1359 +<code>pageY</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1360 +<dd> 59.1361 +<p>The <code>pageY</code> attribute must return the y-coordinate of the position where the event occurred relative to the origin of the <a href="#initial-containing-block">initial containing block</a>.</dd> 59.1362 +<dt class="attribute" id="widl-MouseEvent-clientX"> 59.1363 +<code>clientX</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1364 +<dd> 59.1365 +<p>The <code>clientX</code> attribute must return the x-coordinate of the position where the event occurred relative to the origin of the <a href="#viewport">viewport</a>.</dd> 59.1366 +<dt class="attribute" id="widl-MouseEvent-clientY"> 59.1367 +<code>clientY</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1368 +<dd> 59.1369 +<p>The <code>clientY</code> attribute must return the y-coordinate of the position where the event occurred relative to the origin of the <a href="#viewport">viewport</a>.</dd> 59.1370 +<dt class="attribute" id="widl-MouseEvent-x"> 59.1371 +<code>x</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1372 +<dd> 59.1373 +<p>The <code>x</code> attribute must return the value of <code title="dom-MouseEvent-clientX">clientX</code>.</dd> 59.1374 +<dt class="attribute" id="widl-MouseEvent-y"> 59.1375 +<code>y</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1376 +<dd> 59.1377 +<p>The <code>y</code> attribute must return the value of <code title="dom-MouseEvent-clientY">clientY</code>.</dd> 59.1378 +<dt class="attribute" id="widl-MouseEvent-offsetX"> 59.1379 +<code>offsetX</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1380 +<dd> 59.1381 +<p>The <code>offsetX</code> attribute must return the x-coordinate of the position where the event occurred relative to the origin of the <a href="#padding-edge">padding edge</a> of the target node.</dd> 59.1382 +<dt class="attribute" id="widl-MouseEvent-offsetY"> 59.1383 +<code>offsetY</code> of type <span class="idlAttrType"><a>long</a></span>, readonly</dt> 59.1384 +<dd> 59.1385 +<p>The <code>offsetY</code> attribute must return the y-coordinate of the position where the event occurred relative to the origin of the <a href="#padding-edge">padding edge</a> of the target node.</dd> 59.1386 +</dl> 59.1387 59.1388 - <p>The <dfn id="dom-mouseevent-offsetx" title="dom-MouseEvent-offsetX"><code>offsetX</code></dfn> 59.1389 - attribute must return the x-coordinate of 59.1390 - the position where the event occurred relative to the origin of the 59.1391 - <a href="#padding-edge">padding edge</a> of the target node.</p> 59.1392 - 59.1393 - <p>The <dfn id="dom-mouseevent-offsety" title="dom-MouseEvent-offsetY"><code>offsetY</code></dfn> 59.1394 - attribute must return the y-coordinate of 59.1395 - the position where the event occurred relative to the origin of the 59.1396 - <a href="#padding-edge">padding edge</a> of the target node.</p> 59.1397 - 59.1398 - <!-- XXX layerX/layerY --> 59.1399 - 59.1400 - 59.1401 - 59.1402 + 59.1403 <h2 id="rectangles"><span class="secno">10 </span>Rectangles</h2> 59.1404 59.1405 59.1406 <h3 id="the-clientrectlist-interface"><span class="secno">10.1 </span>The <code title="">ClientRectList</code> Interface</h3> 59.1407 59.1408 - <p>The <code><a href="#clientrectlist">ClientRectList</a></code> object consists of an ordered list 59.1409 - of <code><a href="#clientrect">ClientRect</a></code> objects.</p> 59.1410 - 59.1411 - <pre class="idl">interface <dfn id="clientrectlist">ClientRectList</dfn> { 59.1412 - readonly attribute unsigned long <a href="#dom-clientrectlist-length" title="dom-ClientRectList-length">length</a>; 59.1413 - getter <a href="#clientrect">ClientRect</a> <a href="#dom-clientrectlist-item" title="dom-ClientRectList-item">item</a>(unsigned long <var title="">index</var>); 59.1414 -};</pre> 59.1415 - 59.1416 - <p>The 59.1417 - <dfn id="dom-clientrectlist-length" title="dom-ClientRectList-length"><code>length</code></dfn> 59.1418 - attribute must return the total number of 59.1419 - <code><a href="#clientrect">ClientRect</a></code> objects associated with the object.</p> 59.1420 - 59.1421 - <p>The 59.1422 - <dfn id="dom-clientrectlist-item" title="dom-ClientRectList-item"><code>item(<var>index</var>)</code></dfn> 59.1423 - method, when invoked, must raise an 59.1424 - <code>INDEX_SIZE_ERR</code> exception when <var title="">index</var> is 59.1425 - greater than the number of <code><a href="#clientrect">ClientRect</a></code> objects associated with 59.1426 - the object. Otherwise, the <code><a href="#clientrect">ClientRect</a></code> object at 59.1427 - <var title="">index</var> must be returned.</p> 59.1428 + <p>The <code>ClientRectList</code> interface consists of an ordered list of <code>ClientRect</code> objects.</p> 59.1429 +<pre class="idl"><span class="idlInterface" id="widl-def-ClientRectList">interface <span class="idlInterfaceID">ClientRectList</span> { 59.1430 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-ClientRectList-length">length</a></span>;</span> 59.1431 +<span class="idlMethod"> <span class="idlMethType"><a>ClientRect</a></span> <span class="idlMethName"><a href="#widl-ClientRectList-item-ClientRect-unsigned-long-index">item</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span> 59.1432 +};</span></pre> 59.1433 +<dl class="attributes"> 59.1434 +<dt class="attribute" id="widl-ClientRectList-length"> 59.1435 +<code>length</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 59.1436 +<dd> 59.1437 +<p>The <code>length</code> attribute must return the total number of <code>ClientRect</code> objects associated with the object.</dd> 59.1438 +</dl> 59.1439 +<dl class="methods"> 59.1440 +<dt class="method" id="widl-ClientRectList-item-ClientRect-unsigned-long-index"> 59.1441 +<code>item</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span></span>), returns <span class="idlMethType"><a>ClientRect</a></span></dt> 59.1442 +<dd> 59.1443 +<p>The <code>item</code> operation, when invoked, must raise an <code>INDEX_SIZE_ERR</code> exception when <var title="">index</var> is greater than the number of <code>ClientRect</code> objects associated with the object. Otherwise, the <code>ClientRect</code> object at <var title="">index</var> must be returned.</dd> 59.1444 +</dl> 59.1445 59.1446 59.1447 <h3 id="the-clientrect-interface"><span class="secno">10.2 </span>The <code title="">ClientRect</code> Interface</h3> 59.1448 59.1449 - <p>Objects implementing the <code><a href="#clientrect">ClientRect</a></code> interface represent 59.1450 - a rectangular box. The type of box is specified by the method that returns 59.1451 - a <code><a href="#clientrect">ClientRect</a></code> object.</p> 59.1452 - 59.1453 - <pre class="idl">interface <dfn id="clientrect">ClientRect</dfn> { 59.1454 - readonly attribute float <a href="#dom-clientrect-top" title="dom-ClientRect-top">top</a>; 59.1455 - readonly attribute float <a href="#dom-clientrect-right" title="dom-ClientRect-right">right</a>; 59.1456 - readonly attribute float <a href="#dom-clientrect-bottom" title="dom-ClientRect-bottom">bottom</a>; 59.1457 - readonly attribute float <a href="#dom-clientrect-left" title="dom-ClientRect-left">left</a>; 59.1458 - readonly attribute float <a href="#dom-clientrect-width" title="dom-ClientRect-width">width</a>; 59.1459 - readonly attribute float <a href="#dom-clientrect-height" title="dom-ClientRect-height">height</a>; 59.1460 -};</pre> 59.1461 - 59.1462 - <p>The 59.1463 - <dfn id="dom-clientrect-top" title="dom-ClientRect-top"><code>top</code></dfn> 59.1464 - attribute must return the y-coordinate, 59.1465 - relative to the <a href="#viewport">viewport</a> origin, of the top of the rectangle 59.1466 - box.</p> 59.1467 - 59.1468 - <p>The 59.1469 - <dfn id="dom-clientrect-right" title="dom-ClientRect-right"><code>right</code></dfn> 59.1470 - attribute must return the x-coordinate, 59.1471 - relative to the <a href="#viewport">viewport</a> origin, of the right of the 59.1472 - rectangle box.</p> 59.1473 - 59.1474 - <p>The 59.1475 - <dfn id="dom-clientrect-bottom" title="dom-ClientRect-bottom"><code>bottom</code></dfn> 59.1476 - attribute must return the y-coordinate, 59.1477 - relative to the <a href="#viewport">viewport</a> origin, of the bottom of the 59.1478 - rectangle box.</p> 59.1479 - 59.1480 - <p>The 59.1481 - <dfn id="dom-clientrect-left" title="dom-ClientRect-left"><code>left</code></dfn> 59.1482 - attribute must return the x-coordinate, 59.1483 - relative to the <a href="#viewport">viewport</a> origin, of the left of the rectangle 59.1484 - box.</p> 59.1485 - 59.1486 - <p>The 59.1487 - <dfn id="dom-clientrect-width" title="dom-ClientRect-width"><code>width</code></dfn> 59.1488 - attribute must return the width of the 59.1489 - rectangle box.</p> 59.1490 - 59.1491 - <p class="note">This is identical to 59.1492 - <code title="dom-ClientRect-right"><a href="#dom-clientrect-right">right</a></code> minus 59.1493 - <code title="dom-ClientRect-left"><a href="#dom-clientrect-left">left</a></code>.</p> 59.1494 - 59.1495 - <p>The 59.1496 - <dfn id="dom-clientrect-height" title="dom-ClientRect-height"><code>height</code></dfn> 59.1497 - attribute must return the height of the 59.1498 - rectangle box.</p> 59.1499 - 59.1500 - <p class="note">This is identical to 59.1501 - <code title="dom-ClientRect-bottom"><a href="#dom-clientrect-bottom">bottom</a></code> minus 59.1502 - <code title="dom-ClientRect-top"><a href="#dom-clientrect-top">top</a></code>.</p> 59.1503 - 59.1504 + <p>Objects implementing the <code>ClientRect</code> interface represent a rectangular box. The type of box is specified by the method that returns a <code>ClientRect</code> interface.</p> 59.1505 +<pre class="idl"><span class="idlInterface" id="widl-def-ClientRect">interface <span class="idlInterfaceID">ClientRect</span> { 59.1506 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>float</a></span> <span class="idlAttrName"><a href="#widl-ClientRect-top">top</a></span>;</span> 59.1507 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>float</a></span> <span class="idlAttrName"><a href="#widl-ClientRect-right">right</a></span>;</span> 59.1508 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>float</a></span> <span class="idlAttrName"><a href="#widl-ClientRect-bottom">bottom</a></span>;</span> 59.1509 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>float</a></span> <span class="idlAttrName"><a href="#widl-ClientRect-left">left</a></span>;</span> 59.1510 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>float</a></span> <span class="idlAttrName"><a href="#widl-ClientRect-width">width</a></span>;</span> 59.1511 +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>float</a></span> <span class="idlAttrName"><a href="#widl-ClientRect-height">height</a></span>;</span> 59.1512 +};</span></pre> 59.1513 +<dl class="attributes"> 59.1514 +<dt class="attribute" id="widl-ClientRect-top"> 59.1515 +<code>top</code> of type <span class="idlAttrType"><a>float</a></span>, readonly</dt> 59.1516 +<dd> 59.1517 +<p>The <code>top</code> attribute must return the y-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the top of the rectangle box.</dd> 59.1518 +<dt class="attribute" id="widl-ClientRect-right"> 59.1519 +<code>right</code> of type <span class="idlAttrType"><a>float</a></span>, readonly</dt> 59.1520 +<dd> 59.1521 +<p>The <code>right</code> attribute must return the x-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the right of the rectangle box.</dd> 59.1522 +<dt class="attribute" id="widl-ClientRect-bottom"> 59.1523 +<code>bottom</code> of type <span class="idlAttrType"><a>float</a></span>, readonly</dt> 59.1524 +<dd> 59.1525 +<p>The <code>bottom</code> attribute must return the y-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the bottom of the rectangle box.</dd> 59.1526 +<dt class="attribute" id="widl-ClientRect-left"> 59.1527 +<code>left</code> of type <span class="idlAttrType"><a>float</a></span>, readonly</dt> 59.1528 +<dd> 59.1529 +<p>The <code>left</code> attribute must return the x-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the left of the rectangle box.</dd> 59.1530 +<dt class="attribute" id="widl-ClientRect-width"> 59.1531 +<code>width</code> of type <span class="idlAttrType"><a>float</a></span>, readonly</dt> 59.1532 +<dd> 59.1533 +<p>The <code>width</code> attribute must return the width of the rectangle box.</p> <p class="note">This is identical to <code title="dom-ClientRect-right">right</code> minus <code title="dom-ClientRect-left">left</code>.</dd> 59.1534 +<dt class="attribute" id="widl-ClientRect-height"> 59.1535 +<code>height</code> of type <span class="idlAttrType"><a>float</a></span>, readonly</dt> 59.1536 +<dd> 59.1537 +<p>The <code>height</code> attribute must return the height of the rectangle box.</p> <p class="note">This is identical to <code title="dom-ClientRect-bottom">bottom</code> minus <code title="dom-ClientRect-top">top</code>.</dd> 59.1538 +</dl> 59.1539 59.1540 59.1541 <h2 class="no-num" id="references">References</h2> 59.1542 @@ -1441,3 +868,4 @@ 59.1543 59.1544 59.1545 59.1546 +
60.1 --- a/cssom-view/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 60.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 60.3 @@ -1,1400 +0,0 @@ 60.4 -<!doctype html> 60.5 -<html lang="en-US"> 60.6 - <head> 60.7 - <meta charset=utf-8> 60.8 - <title>CSSOM View Module</title> 60.9 - <style type="text/css"> 60.10 - pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em } 60.11 - pre.idl :link, pre.idl :visited { color:inherit; background:transparent } 60.12 - dfn { font-weight:bold; font-style:normal } 60.13 - div.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc } 60.14 - div.example code { color:inherit } 60.15 - p.note { margin-left:2em; color:green; font-style:italic; font-weight:bold } 60.16 - p.note::before { content:"Note: " } 60.17 - .XXX { padding:.5em; border:solid red } 60.18 - .XXX::before { content:"Issue: " } 60.19 - code { color:orangered } 60.20 - code :link, code :visited { color:inherit } 60.21 - </style> 60.22 - <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]"> 60.23 - </head> 60.24 - <body class="draft"> 60.25 - <div class="head"> 60.26 - <!--logo--> 60.27 - 60.28 - <h1 id="cssom-view-module">CSSOM View Module</h1> 60.29 - 60.30 - <h2 class="no-num no-toc" id="w3c-doctype">[LONGSTATUS] [DATE: 3 August 2002]</h2> 60.31 - 60.32 - <dl> 60.33 - 60.34 - <dt>This Version:</dt> 60.35 - <dd class=dontpublish><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom-view/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom-view/Overview.html</a></dd> 60.36 - <dd class=publish><a href="[VERSION]">[VERSION]</a></dd> 60.37 - 60.38 - <dt class=dontpublish>Participate:</dt> 60.39 - <dd class=dontpublish><a href="mailto:www-style@w3.org?subject==%5Bcssom%5D%20">www-style@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>) 60.40 - <dd class=dontpublish><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&component=CSSOM%20View">File a bug</a> 60.41 - <dd class=dontpublish><a href="http://wiki.whatwg.org/wiki/IRC">IRC: #css on Freenode</a> 60.42 - 60.43 - <dt class=publish>Latest Version:</dt> 60.44 - <dd class=publish><a href="[LATEST]">[LATEST]</a></dd> 60.45 - 60.46 - <dt class=publish>Latest Editor Draft:</dt> 60.47 - <dd class=publish><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom-view/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom-view/Overview.html</a></dd> 60.48 - 60.49 - <dt class=dontpublish>Previous Versions:</dt> 60.50 - <dd class=dontpublish><a href="http://www.w3.org/TR/2009/WD-cssom-view-20090804/">http://www.w3.org/TR/2009/WD-cssom-view-20090804/</a></dd> 60.51 - <dd class=dontpublish><a href="http://www.w3.org/TR/2008/WD-cssom-view-20080222/">http://www.w3.org/TR/2008/WD-cssom-view-20080222/</a></dd> 60.52 - <dd class=dontpublish><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a></dd> 60.53 - 60.54 - <dt>Editors:</dt> 60.55 - <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a> 60.56 - (<a href="http://www.cox.com/">Cox Communications, Inc.</a>) 60.57 - <<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>></dd> 60.58 - <dd><a href="">Shane Stephens</a> 60.59 - (<a href="http://www.google.com/">Google, Inc.</a>) 60.60 - <<a href="mailto:shans@google.com">shans@google.com</a>></dd> 60.61 - 60.62 - <dt>Previous Editor:</dt> 60.63 - <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a> 60.64 - (<a href="http://www.opera.com/">Opera Software ASA</a>) 60.65 - <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd> 60.66 - </dl> 60.67 - 60.68 - <p class="dontpublish copyright"><a rel=license href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="http://i.creativecommons.org/p/zero/1.0/80x15.png" alt=CC0></a> 60.69 - To the extent possible under law, the editors have waived all copyright and 60.70 - related or neighboring rights to this work. In addition, as of 60.71 - [DATE: 01 Jan 1901], the editors have made this specification available 60.72 - under the <a rel=license href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0">Open 60.73 - Web Foundation Agreement, Version 1.0</a>.</p> 60.74 - <div class=publish><!--copyright--></div> 60.75 - 60.76 - </div> 60.77 - 60.78 - <hr> 60.79 - 60.80 - <h2 id="abstract" class="no-num no-toc">Abstract</h2> 60.81 - 60.82 - <p>The APIs introduced by this specification provide authors with a way to 60.83 - inspect and manipulate the visual view of a document. This includes 60.84 - getting the position of element layout boxes, obtaining the width 60.85 - of the viewport through script, and also scrolling an element.</p> 60.86 - 60.87 - 60.88 - 60.89 - <h2 id="sotd" class="no-num no-toc">Status of this Document</h2> 60.90 - 60.91 - <p><em>This section describes the status of this document at the time of 60.92 - its publication. Other documents may supersede this document. A list of 60.93 - current W3C publications and the latest revision of this technical report 60.94 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 60.95 - index at http://www.w3.org/TR/.</a></em> 60.96 - 60.97 -<p>This is the [DATE: 3 August 2002] [LONGSTATUS] of CSSOM View. Please send 60.98 -comments to 60.99 -<a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a> 60.100 -(<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 60.101 -with <samp>[cssom-view]</samp> at the start of the subject line. 60.102 - 60.103 - <p>This document was produced by the <a 60.104 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of 60.105 - the <a href="http://www.w3.org/Style/">Style Activity</a>). 60.106 - 60.107 - <p>This document was produced by a group operating under the <a 60.108 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 60.109 - 2004 W3C Patent Policy</a>. W3C maintains a <a 60.110 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 60.111 - rel=disclosure>public list of any patent disclosures</a> made in 60.112 - connection with the deliverables of the group; that page also includes 60.113 - instructions for disclosing a patent. An individual who has actual 60.114 - knowledge of a patent which the individual believes contains <a 60.115 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 60.116 - Claim(s)</a> must disclose the information in accordance with <a 60.117 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 60.118 - 6 of the W3C Patent Policy</a>.</p> 60.119 - 60.120 - <p>Publication as a Working Draft does not imply endorsement by the W3C 60.121 - Membership. This is a draft document and may be updated, replaced or 60.122 - obsoleted by other documents at any time. It is inappropriate to cite this 60.123 - document as other than work in progress. 60.124 - 60.125 - 60.126 - <h2 id="toc" class="no-num no-toc">Table of Contents</h2> 60.127 - 60.128 - <!-- toc --> 60.129 - 60.130 - 60.131 - <h2 id="background">Background</h2> 60.132 - 60.133 - <p>Many of the features defined in this specification have been supported 60.134 - by browsers for a long period of time. The goal of this specification is 60.135 - to define these features in such a way that they can be implemented by all 60.136 - browsers in an interoperable manner. The specification also defines a 60.137 - couple of new features that will hopefully be useful to authors. (If they 60.138 - are not you can bug us!)</p> 60.139 - 60.140 - 60.141 - <h2 id="conformance">Conformance</h2> 60.142 - 60.143 -<p>All diagrams, examples, and notes in this specification are 60.144 -non-normative, as are all sections explicitly marked non-normative. 60.145 -Everything else in this specification is normative. 60.146 - 60.147 -<p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL 60.148 -NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and 60.149 -"OPTIONAL" in the normative parts of this document are to be 60.150 -interpreted as described in RFC2119. For readability, these words do 60.151 -not appear in all uppercase letters in this specification. <span 60.152 -data-anolis-ref>RFC2119</span> 60.153 - 60.154 -<p>Requirements phrased in the imperative as part of algorithms 60.155 -(such as "strip any leading space characters" or "return false and 60.156 -terminate these steps") are to be interpreted with the meaning of the 60.157 -key word ("must", "should", "may", etc) used in introducing the 60.158 -algorithm. 60.159 - 60.160 -<p>Conformance requirements phrased as algorithms or specific steps 60.161 -may be implemented in any manner, so long as the end result is 60.162 -equivalent. (In particular, the algorithms defined in this 60.163 -specification are intended to be easy to follow, and not intended to 60.164 -be performant.) 60.165 - 60.166 -<p id="hardwareLimitations">User agents may impose 60.167 -implementation-specific limits on otherwise unconstrained inputs, 60.168 -e.g. to prevent denial of service attacks, to guard against running 60.169 -out of memory, or to work around platform-specific limitations. 60.170 - 60.171 -<p>When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript. 60.172 - 60.173 -<p>Unless otherwise stated, string comparisons are done in a <span>case-sensitive</span> manner. 60.174 - 60.175 - <p>A conforming user agent implements all the requirements made by this 60.176 - specification.</p> 60.177 - 60.178 - 60.179 - <h3 id="webidl">Web IDL</h3> 60.180 - 60.181 - <p>The IDL fragments in this specification must be 60.182 - interpreted as required for conforming IDL fragments, as described in the 60.183 - Web IDL specification. <span data-anolis-ref>WEBIDL</span> 60.184 - 60.185 - 60.186 - <h2 id="terminology">Terminology</h2> 60.187 - 60.188 - <p>Terminology used in this specification is from 60.189 - DOM Core, 60.190 - CSSOM and 60.191 - HTML. 60.192 - <span data-anolis-ref>DOM</span> 60.193 - <span data-anolis-ref>CSSOM</span> 60.194 - <span data-anolis-ref>HTML</span> 60.195 - 60.196 - <p class=XXX><dfn><code>MouseEvent</code></dfn> is defined in … 60.197 - 60.198 - <p><dfn>The HTML <code>body</code> element</dfn> is the first 60.199 - <code>body</code> 60.200 - <span data-anolis-spec=html title="HTML elements">HTML element</span> child of the root 60.201 - <span data-anolis-spec=html title="HTML elements">HTML element</span> <code>html</code>.</p> 60.202 - 60.203 - <p><dfn id="content-edge">Content edge</dfn>, 60.204 - <dfn id="padding-edge">padding edge</dfn>, 60.205 - <dfn id="border-edge">border edge</dfn>, and 60.206 - <dfn id="canvas">canvas</dfn> are defined by CSS. 60.207 - <!--<span data-anolis-ref>CSS</span>--> 60.208 - 60.209 - <p><dfn id="viewport">Viewport</dfn> and 60.210 - <dfn id="initial-containing-block">initial containing block</dfn> are 60.211 - defined by CSS 2.1 unless there is an ancestor <code>foreignObject</code> 60.212 - element in the <code>http://www.w3.org/2000/svg</code> namespace in which 60.213 - case that element acts as viewport and initial containing block. 60.214 - <!--<span data-anolis-ref>CSS</span>--> 60.215 - 60.216 - <p>The term <dfn>content</dfn> refers to the dimensions of the element's 60.217 - content area, including overflown content. 60.218 - <!--<span data-anolis-ref>CSS</span>--> 60.219 - 60.220 - <p>The term <dfn>document content</dfn> refers to the area on the 60.221 - <span>canvas</span> that is rendered upon, excluding content on negative 60.222 - axis.</p> 60.223 - 60.224 - 60.225 - <h3>CSS pixels</h3> 60.226 - 60.227 - <p>All coordinates and dimensions for the APIs defined in this 60.228 - specification are in CSS pixels. <!--<span data-anolis-ref>CSS</span>--> 60.229 - 60.230 - <p class="note">This does not apply to e.g. 60.231 - <code title=dom-Window-matchMedia>matchMedia()</code> as the units 60.232 - are explicitly given there.</p> 60.233 - 60.234 - 60.235 - 60.236 - <h2 id="extensions-to-the-window-interface">Extensions to the <code title>Window</code> Interface</h2> 60.237 - 60.238 - <pre class="idl">partial interface <span data-anolis-spec=html>Window</span> { 60.239 - <span>MediaQueryList</span> <span title=dom-Window-matchMedia>matchMedia</span>(DOMString <var title>media_query_list</var>); 60.240 - readonly attribute <span>Screen</span> <span title=dom-Window-screen>screen</span>; 60.241 - 60.242 - // viewport 60.243 - readonly attribute long <span title=dom-Window-innerWidth>innerWidth</span>; 60.244 - readonly attribute long <span title=dom-Window-innerHeight>innerHeight</span>; 60.245 - 60.246 - // viewport scrolling 60.247 - readonly attribute long <span title="dom-Window-scrollX">scrollX</span>; 60.248 - readonly attribute long <span title="dom-Window-pageXOffset">pageXOffset</span>; 60.249 - readonly attribute long <span title="dom-Window-scrollY">scrollY</span>; 60.250 - readonly attribute long <span title="dom-Window-pageYOffset">pageYOffset</span>; 60.251 - void <span title=dom-Window-scroll>scroll</span>(long <var title>x</var>, long <var title>y</var>); 60.252 - void <span title=dom-Window-scrollto>scrollTo</span>(long <var title>x</var>, long <var title>y</var>); 60.253 - void <span title="dom-Window-scrollby">scrollBy</span>(long <var title>x</var>, long <var title>y</var>); 60.254 - 60.255 - // client 60.256 - readonly attribute long <span title=dom-Window-screenX>screenX</span>; 60.257 - readonly attribute long <span title=dom-Window-screenY>screenY</span>; 60.258 - readonly attribute long <span title=dom-Window-outerWidth>outerWidth</span>; 60.259 - readonly attribute long <span title=dom-Window-outerHeight>outerHeight</span>; 60.260 -};</pre> 60.261 - 60.262 - 60.263 - <p>When the 60.264 - <dfn title="dom-Window-matchMedia"><code>matchMedia(<var title>media_query_list</var>)</code></dfn> 60.265 - method is invoked these steps must be run:</p> 60.266 - 60.267 - <ol> 60.268 - <li><p>Let <var title>parsed_media_query_list</var> be the result of 60.269 - <span title="parse a media query list" data-anolis-spec=cssom>parsing</span> 60.270 - <var title>media_query_list</var>.</p></li> 60.271 - 60.272 - <li><p>Return a <em>new</em> <code>MediaQueryList</code> object, 60.273 - associated with the <code data-anolis-spec=html>Window</code> object, with 60.274 - <var title>parsed_media_query_list</var> as its associated 60.275 - media query list.</p></li> 60.276 - </ol> 60.277 - 60.278 - <p>The 60.279 - <dfn title=dom-Window-screen><code>screen</code></dfn> 60.280 - attribute must return the <code>Screen</code> object 60.281 - associated with the <code data-anolis-spec=html>Window</code> object. It always returns the same 60.282 - object.</p> 60.283 - 60.284 - <p class="note">Accessing <code title="dom-Window-screen">screen</code> through a <code data-anolis-spec=html>WindowProxy</code> object might yield different results 60.285 - when the <code data-anolis-spec=dom>Document</code> is navigated.</p> 60.286 - 60.287 - 60.288 - <p>The <dfn title=dom-Window-innerWidth><code>innerWidth</code></dfn> 60.289 - attribute must return the 60.290 - <span>viewport</span> width including the size of a rendered scroll bar 60.291 - (if any).</p> 60.292 - 60.293 - <div class="example"> 60.294 - <p>The following snippet shows how to obtain the width of the 60.295 - viewport:</p> 60.296 - 60.297 - <pre><code>var viewportWidth = innerWidth</code></pre> 60.298 - </div> 60.299 - 60.300 - <p>The <dfn title=dom-Window-innerHeight><code>innerHeight</code></dfn> 60.301 - attribute must return the 60.302 - <span>viewport</span> height including the size of a rendered scroll bar 60.303 - (if any).</p> 60.304 - 60.305 - <p>The 60.306 - <dfn title=dom-Window-scrollX><code>scrollX</code></dfn> and 60.307 - <dfn title=dom-Window-pageXOffset><code>pageXOffset</code></dfn> 60.308 - attributes must return the x-coordinate, 60.309 - relative to the <span>initial containing block</span> origin, of the left 60.310 - of the <span>viewport</span>.</p> 60.311 - 60.312 - <p>The 60.313 - <dfn title=dom-Window-scrollY><code>scrollY</code></dfn> and 60.314 - <dfn title=dom-Window-pageYOffset><code>pageYOffset</code></dfn> 60.315 - attributes must return the y-coordinate, 60.316 - relative to the <span>initial containing block</span> origin, of the top 60.317 - of the <span>viewport</span>.</p> 60.318 - 60.319 - <p>When the 60.320 - <dfn title=dom-Window-scroll><code>scroll(<var>x</var>,<var>y</var>)</code></dfn> 60.321 - method is invoked these steps must be run:</p> 60.322 - 60.323 - <ol> 60.324 - <li><p>If either <var title>x</var> or <var title>y</var> is 60.325 - infinite or NaN terminate this algorithm.</p></li> 60.326 - 60.327 - <li> 60.328 - <dl> 60.329 - <dt>If <span>document content</span> can have overflow to the right 60.330 - <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>, 60.331 - <span>content</span> width - <span>content edge</span> 60.332 - width)).</p></dd> 60.333 - 60.334 - <dt>If <span>document content</span> can have overflow to the left 60.335 - (under right-to-left conditions) 60.336 - <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>, 60.337 - <span>content edge</span> width - <span>content</span> 60.338 - width)).</p></dd> 60.339 - </dl> 60.340 - 60.341 - <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>, 60.342 - <span>document content</span> height - <span>viewport</span> 60.343 - height excluding the size of a rendered scroll bar (if any))).</p></li> 60.344 - 60.345 - <li><p>Align the x-coordinate <var title>x</var> of the 60.346 - <span>document content</span> with the left of the <span>viewport</span> 60.347 - and align the y-coordinate <var title>y</var> of the <span>document 60.348 - content</span> with the top of the <span>viewport</span>.</p></li> 60.349 - 60.350 - <li><p>If the aligning caused content to move <span data-anolis-spec=html>queue a task</span> 60.351 - to 60.352 - <span data-anolis-spec=dom title=concept-event-fire>fire an event</span> 60.353 - named <code title="event-scroll">scroll</code> that bubbles at the 60.354 - <code data-anolis-spec=dom>Document</code> object, unless a 60.355 - <span data-anolis-spec=html title=concept-task>task</span> to fire that event at the <code data-anolis-spec=dom>Document</code> object 60.356 - was already <span data-anolis-spec=html title="queue a task">queued</span>.</p></li> 60.357 - </ol> 60.358 - 60.359 - <p>When the 60.360 - <dfn title=dom-Window-scrollto><code>scrollTo(<var title>x</var>,<var title>y</var>)</code></dfn> 60.361 - method is invoked, the user agent must act as if the 60.362 - <code title=dom-Window-scroll>scroll()</code> method was invoked with 60.363 - the same arguments.</p> 60.364 - 60.365 - <p>When the 60.366 - <dfn title=dom-Window-scrollby><code>scrollBy(<var title>x</var>,<var title>y</var>)</code></dfn> 60.367 - method is invoked, the user agent must act as if the 60.368 - <code title=dom-Window-scroll>scroll()</code> method was invoked with 60.369 - <var title>x</var> plus <code title="dom-Window-scrollX">scrollX</code> 60.370 - as first argument and <var title>y</var> plus 60.371 - <code title="dom-Window-scrollY">scrollY</code> as second argument.</p> 60.372 - 60.373 - <p>The <dfn title="dom-Window-screenX"><code>screenX</code></dfn> 60.374 - attribute must return the x-coordinate, 60.375 - relative to the origin of the screen of the output device, of the top of 60.376 - the client window as number of pixels, or zero if there is no such 60.377 - thing.</p> 60.378 - 60.379 - <p>The <dfn title=dom-Window-screenY><code>screenY</code></dfn> 60.380 - attribute must return the y-coordinate, 60.381 - relative to the origin of the screen of the output device, of the left of 60.382 - the client window as number of pixels, or zero if there is no such 60.383 - thing.</p> 60.384 - 60.385 - <p>The <dfn title=dom-Window-outerWidth><code>outerWidth</code></dfn> 60.386 - attribute must return the width of the 60.387 - client window. If there is no client window this 60.388 - attribute must return zero.</p> 60.389 - 60.390 - <p>The <dfn title=dom-Window-outerHeight><code>outerHeight</code></dfn> 60.391 - attribute must return the height of the 60.392 - client window. If there is no client window 60.393 - this attribute must return zero.</p> 60.394 - 60.395 - 60.396 - 60.397 - <h3 id="the-mediaquerylist-interface">The <code title>MediaQueryList</code> Interface</h3> 60.398 - 60.399 - <p>A <code>MediaQueryList</code> object has an associated media query list 60.400 - set on creation and an associated 60.401 - <dfn>list of media query list listeners</dfn>, which is initially 60.402 - empty.</p> 60.403 - 60.404 - <p>If the associated media query list changes in evaluation then, for each 60.405 - listener in the <span>list of media query list listeners</span> — in 60.406 - appending order, <span data-anolis-spec=html>queue a task</span> that invokes the listener, 60.407 - passing as argument the <code>MediaQueryList</code> object.</p> 60.408 - 60.409 - <div class="example"> 60.410 - <p>A simple piece of code that detects changes in the orientation of the 60.411 - viewport can be written as follows:</p> 60.412 - <pre><code>function handleOrientationChange(mql) { 60.413 - if(mql.matches) // landscape 60.414 - … 60.415 - else 60.416 - … 60.417 -} 60.418 -var mql = matchMedia("(orientation:landscape)") 60.419 -mql.addListener(handleOrientationChange)</code></pre> 60.420 - </div> 60.421 - 60.422 - <pre class="idl">interface <dfn id="mediaquerylist">MediaQueryList</dfn> { 60.423 - readonly attribute DOMString <span title="dom-MediaQueryList-media">media</span>; 60.424 - readonly attribute boolean <span title="dom-MediaQueryList-matches">matches</span>; 60.425 - void <span title="dom-MediaQueryList-addListener">addListener</span>(<span>MediaQueryListListener</span> <var title>listener</var>); 60.426 - void <span title="dom-MediaQueryList-removeListener">removeListener</span>(<span>MediaQueryListListener</span> <var title>listener</var>); 60.427 -}; 60.428 - 60.429 -[Callback, NoInterfaceObject] 60.430 -interface <dfn id="mediaquerylistlistener">MediaQueryListListener</dfn> { 60.431 - void <span>handleChange</span>(<span>MediaQueryList</span> <var title>mql</var>); 60.432 -};</pre> 60.433 - 60.434 - <p>The 60.435 - <dfn title="dom-MediaQueryList-media"><code>media</code></dfn> 60.436 - must return the 60.437 - <span title="serialize a media query list" data-anolis-spec=cssom>serialized</span> form of the associated media query list.</p> 60.438 - 60.439 - <p>The <dfn title="dom-MediaQueryList-matches"><code>matches</code></dfn> 60.440 - must return true if the associated media query list 60.441 - matches the state of the rendered <code data-anolis-spec=dom>Document</code> and false if it 60.442 - does not.</p> 60.443 - 60.444 - <p>When the 60.445 - <dfn title="dom-MediaQueryList-addListener"><code>addListener(<var>listener</var>)</code></dfn> 60.446 - is invoked <var title>listener</var> must be 60.447 - appended to the <span>list of media query list listeners</span>, unless 60.448 - it is already in the <span>list of media query list listeners</span>.</p> 60.449 - 60.450 - <p>When the 60.451 - <dfn title="dom-MediaQueryList-removeListener"><code>removeListener(<var>listener</var>)</code></dfn> 60.452 - is invoked <var title>listener</var> must be 60.453 - removed from the <span>list of media query list listeners</span>.</p> 60.454 - 60.455 - 60.456 - 60.457 - <h3 id="the-screen-interface">The <code title>Screen</code> Interface</h3> 60.458 - 60.459 - <p>As its name suggests, the <code>Screen</code> interface represents 60.460 - information about the screen of the output device.</p> 60.461 - 60.462 - <pre class="idl">interface <dfn id="screen">Screen</dfn> { 60.463 - readonly attribute unsigned long <span title=dom-Screen-availWidth>availWidth</span>; 60.464 - readonly attribute unsigned long <span title=dom-Screen-availHeight>availHeight</span>; 60.465 - readonly attribute unsigned long <span title=dom-Screen-width>width</span>; 60.466 - readonly attribute unsigned long <span title=dom-Screen-height>height</span>; 60.467 - readonly attribute unsigned long <span title=dom-Screen-colorDepth>colorDepth</span>; 60.468 - readonly attribute unsigned long <span title=dom-Screen-pixelDepth>pixelDepth</span>; 60.469 -};</pre> 60.470 - 60.471 - <p>The <dfn title=dom-Screen-availWidth><code>availWidth</code></dfn> 60.472 - attribute must return the available width of the 60.473 - rendering surface of the output device.</p> 60.474 - 60.475 - <p>The <dfn title=dom-Screen-availHeight><code>availHeight</code></dfn> 60.476 - attribute must return the available height of the 60.477 - rendering surface of the output device.</p> 60.478 - 60.479 - <p>The <dfn title=dom-Screen-width><code>width</code></dfn> attribute 60.480 - must return the width of the output device.</p> 60.481 - 60.482 - <p>The <dfn title=dom-Screen-height><code>height</code></dfn> attribute 60.483 - must return the height of the output device.</p> 60.484 - 60.485 - <p>The <dfn title=dom-Screen-colorDepth><code>colorDepth</code></dfn> and 60.486 - <dfn title=dom-Screen-pixelDepth><code>pixelDepth</code></dfn> attributes 60.487 - must both return the number of bits allocated to 60.488 - colors (i.e. excluding the alpha channel) in the output device. If the 60.489 - output device does not support colors these attributes 60.490 - must return zero.</p> 60.491 - <!-- pixelDepth is not supported by Internet Explorer 7 --> 60.492 - 60.493 - 60.494 - <h2 id="extensions-to-the-document-interface">Extensions to the <code title>Document</code> Interface</h2> 60.495 - 60.496 - <pre class="idl">partial interface <span data-anolis-spec=dom>Document</span> { 60.497 - <span data-anolis-spec=dom>Element</span>? <span title=dom-Document-elementFromPoint>elementFromPoint</span>(float <var title>x</var>, float <var title>y</var>); 60.498 - <span>CaretPosition</span>? <span title=dom-Document-caretPositionFromPoint>caretPositionFromPoint</span>(float <var title>x</var>, float <var title>y</var>); 60.499 -};</pre> 60.500 - 60.501 - <p>The 60.502 - <dfn title=dom-Document-elementFromPoint><code>elementFromPoint(<var>x</var>, <var>y</var>)</code></dfn> 60.503 - method must return the element at coordinates <var>x</var>,<var>y</var> in 60.504 - the <span>viewport</span>. The element to be returned is determined 60.505 - through hit testing. If either argument is negative, <var title>x</var> is 60.506 - greater than the <span>viewport</span> width excluding the size of a 60.507 - rendered scroll bar (if any), or <var title>y</var> is greater than the 60.508 - <span>viewport</span> height excluding the size of a rendered scroll bar 60.509 - (if any), the method must return null. If there is no element at the given 60.510 - position the method must return the root element, if any, or null 60.511 - otherwise.</p> 60.512 - 60.513 - <p>The 60.514 - <dfn title=dom-Document-caretPositionFromPoint><code>caretPositionFromPoint(<var>x</var>, <var>y</var>)</code></dfn> 60.515 - method must return the result of running these steps:</p> 60.516 - 60.517 - <ol> 60.518 - <li><p>If either argument is negative, <var title>x</var> is greater 60.519 - than the <span>viewport</span> width excluding the size of a rendered 60.520 - scroll bar (if any), <var title>y</var> is greather than the 60.521 - <span>viewport</span> height excluding the size of a rendered scroll bar 60.522 - (if any) return null.</p></li> 60.523 - 60.524 - <li><p>If at the coordinates <var title>x</var>,<var title>y</var> 60.525 - in the <span>viewport</span> no text insertion point indicator would have 60.526 - been inserted return null.</p></li> 60.527 - 60.528 - <li> 60.529 - <p>If at the coordinates <var title>x</var>,<var title>y</var> 60.530 - in the <span>viewport</span> a text insertion point indicator would have 60.531 - been inserted in a text entry widget which is also a replaced element 60.532 - return a <span>caret position</span> with its properties set as 60.533 - follows:</p> 60.534 - 60.535 - <dl> 60.536 - <dt><span>caret node</span></dt> 60.537 - <dd><p>The node corresponding to the text entry widget.</p></dd> 60.538 - 60.539 - <dt><span>caret offset</span></dt> 60.540 - <dd><p>The amount of 16-bit units to the left of where the 60.541 - text insertion point indicator would have inserted.</p></dd> 60.542 - 60.543 - <dt><span>caret range</span></dt> 60.544 - <dd><p>null</p></dd> 60.545 - </dl> 60.546 - </li> 60.547 - 60.548 - <li> 60.549 - <p>Otherwise, return a <span>caret position</span> where the 60.550 - <span>caret range</span> is a collapsed 60.551 - <code data-anolis-spec=dom>Range</code> object for the position 60.552 - where the text insertion point indicator would have been inserted and 60.553 - the other properties are set as follows:</p> 60.554 - 60.555 - <dl> 60.556 - <dt><span>caret node</span></dt> 60.557 - <dd><p>The <code data-anolis-spec=dom title=dom-Range-startContainer>startContainer</code> 60.558 - of the <span>caret range</span>.</p></dd> 60.559 - 60.560 - <dt><span>caret offset</span></dt> 60.561 - <dd><p>The <code data-anolis-spec=dom title=dom-Range-startOffset>startOffset</code> of 60.562 - the <span>caret range</span>.</p> 60.563 - </dl> 60.564 - </li> 60.565 - </ol> 60.566 - 60.567 - <p class="note">The specifics of hit testing are out of scope of this 60.568 - specification and therefore the exact details of 60.569 - <code title=dom-Document-elementFromPoint>elementFromPoint()</code> and 60.570 - <code title=dom-Document-caretPositionFromPoint>caretPositionFromPoint()</code> 60.571 - are therefore too. Hit testing will hopefully be defined in a future 60.572 - revision of CSS or HTML.</p> 60.573 - 60.574 - 60.575 - 60.576 - <h3 id=the-caretposition-interface>The <code title>CaretPosition</code> Interface</h3> 60.577 - 60.578 - <p>A <dfn>caret position</dfn> gives the position of a 60.579 - text insertion point indicator. It always has an associated 60.580 - <dfn>caret node</dfn>, <dfn>caret offset</dfn>, and 60.581 - <dfn>caret range</dfn>. It is represented by a <code>CaretPosition</code> 60.582 - object.</p> 60.583 - 60.584 - <pre class="idl">interface <dfn id="caretposition">CaretPosition</dfn> { 60.585 - readonly attribute <span data-anolis-spec=dom>Node</span> <span title=dom-CaretPosition-offsetNode>offsetNode</span>; 60.586 - readonly attribute unsigned long <span title=dom-CaretPosition-offset>offset</span>;<!-- 60.587 - readonly attribute <span data-anolis-spec=dom>Range</span>? <span title="dom-CaretPosition-range">range</span>;--> 60.588 -};</pre> 60.589 - 60.590 - <p>The 60.591 - <dfn title=dom-CaretPosition-offsetNode><code>offsetNode</code></dfn> 60.592 - attribute must return the <span>caret node</span>.</p> 60.593 - 60.594 - <p>The 60.595 - <dfn title=dom-CaretPosition-offset><code>offset</code></dfn> 60.596 - attribute must return the <span>caret offset</span>.</p> 60.597 - 60.598 - <!-- 60.599 - <p>The 60.600 - <dfn id="dom-caretposition-range" title="dom-CaretPosition-range"><code>range</code></dfn> 60.601 - attribute must return the <span>caret range</span>.</p> 60.602 - --> 60.603 - <!-- https://bugs.webkit.org/show_bug.cgi?id=27046 --> 60.604 - 60.605 - 60.606 - <h2 id="extensions-to-the-element-interface">Extensions to the <code title>Element</code> Interface</h2> 60.607 - 60.608 - <pre class="idl">partial interface <span data-anolis-spec=dom>Element</span> { 60.609 - <span>ClientRectList</span> <span title=dom-Element-getClientRects>getClientRects</span>(); 60.610 - <span>ClientRect</span> <span title=dom-Element-getBoundingClientRect>getBoundingClientRect</span>(); 60.611 - 60.612 - // scrolling 60.613 - void <span title=dom-Element-scrollIntoView>scrollIntoView</span>(optional boolean <var title>top</var>); 60.614 - attribute long <span title=dom-Element-scrollTop>scrollTop</span>; // scroll on setting 60.615 - attribute long <span title=dom-Element-scrollLeft>scrollLeft</span>; // scroll on setting 60.616 - readonly attribute long <span title=dom-Element-scrollWidth>scrollWidth</span>; 60.617 - readonly attribute long <span title=dom-Element-scrollHeight>scrollHeight</span>; 60.618 - 60.619 - readonly attribute long <span title=dom-Element-clientTop>clientTop</span>; 60.620 - readonly attribute long <span title=dom-Element-clientLeft>clientLeft</span>; 60.621 - readonly attribute long <span title=dom-Element-clientWidth>clientWidth</span>; 60.622 - readonly attribute long <span title=dom-Element-clientHeight>clientHeight</span>; 60.623 -};</pre> 60.624 - 60.625 - 60.626 - <h3>The <code title>getClientRects()</code> and 60.627 - <code title>getBoundingClientRect()</code> methods</h3> 60.628 - 60.629 - <p>The <code title=dom-Element-getClientRects>getClientRects()</code> and <code title=dom-Element-getBoundingClientRect>getBoundingClientRect()</code> 60.630 - methods provide information about the position of the border box edges of 60.631 - an element relative to the viewport. The objects these methods return 60.632 - must be static. That is, changes to the underlying 60.633 - document are not reflected in the objects.</p> 60.634 - 60.635 - <p>The 60.636 - <dfn title=dom-Element-getClientRects><code>getClientRects()</code></dfn> 60.637 - method, when invoked, must return the result of the 60.638 - following algorithm:</p> 60.639 - 60.640 - <ol> 60.641 - <li><p>If the element on which it was invoked does not have an associated 60.642 - CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code> 60.643 - namespace return an empty <code>ClientRectList</code> object and stop 60.644 - this algorithm.</p></li> 60.645 - 60.646 - <li><p>If the element does not have an associated CSS layout box and is 60.647 - in the <code>http://www.w3.org/2000/svg</code> namespace return a 60.648 - <code>ClientRectList</code> object containing a single 60.649 - <code>ClientRect</code> object that describes the bounding box of the 60.650 - element as defined by the SVG specification. 60.651 - <span data-anolis-ref>SVG</span> 60.652 - 60.653 - <li> 60.654 - <p>Return a <code>ClientRectList</code> object containing a list of 60.655 - <code>ClientRect</code> objects in content order describing the border 60.656 - boxes (including those with a height or width of zero) with the 60.657 - following constraints:</p> 60.658 - 60.659 - <ul> 60.660 - <li><p>If the element on which the method was invoked has a computed 60.661 - value for <code>display</code> property of <code>table</code> or 60.662 - <code>inline-table</code> include both the table box and the caption 60.663 - box, if any, but not the anonymous container box. 60.664 - <!--<span data-anolis-ref>CSS</span>--> 60.665 - 60.666 - <li><p>Replace each 60.667 - <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">anonymous 60.668 - block box</a> with its child box(es) and repeat this until no anonymous 60.669 - block boxes are left in the final list. 60.670 - <!--<span data-anolis-ref>CSS</span>--> 60.671 - </ul> 60.672 - </li> 60.673 - </ol> 60.674 - 60.675 - <p>The 60.676 - <dfn title=dom-Element-getBoundingClientRect><code>getBoundingClientRect()</code></dfn> 60.677 - method, when invoked, must return the result of the 60.678 - following algorithm:</p> 60.679 - 60.680 - <ol> 60.681 - <li><p>Let <var>list</var> be the result of invoking 60.682 - <code title=dom-Element-getClientRects>getClientRects()</code> on the 60.683 - same element this method was invoked on.</p></li> 60.684 - 60.685 - <li><p>If the <var>list</var> is empty return a <code>ClientRect</code> 60.686 - object whose <code title=dom-ClientRect-top>top</code>, 60.687 - <code title=dom-ClientRect-right>right</code>, 60.688 - <code title=dom-ClientRect-bottom>bottom</code> and 60.689 - <code title=dom-ClientRect-left>left</code> members are zero.</p></li> 60.690 - 60.691 - <li><p>Otherwise, return a <code>ClientRect</code> object describing the 60.692 - smallest rectangle that includes the first rectangle in <var>list</var> 60.693 - and all of the remaining rectangles of which the height or width is not 60.694 - zero.</p></li> 60.695 - </ol> 60.696 - 60.697 - <div class="example"> 60.698 - <p>The following snippet gets the dimensions of the first 60.699 - <code>div</code> element in a document:</p> 60.700 - 60.701 - <pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect(); 60.702 -var exampleWidth = example.width; 60.703 -var exampleHeight = example.height;</code></pre> 60.704 - </div> 60.705 - 60.706 - 60.707 - <h3><code title>Element</code> Scrolling Members</h3> 60.708 - 60.709 - <p>To <dfn>scroll an element into view</dfn>, optionally with an 60.710 - <i title>align to top flag</i> set, means to run these steps for each 60.711 - ancestor element or <span>viewport</span> that establishes a 60.712 - scrolling box, in order of innermost to outermost scrolling box:</p> 60.713 - 60.714 - <ol> 60.715 - <li><p>If the <code data-anolis-spec=dom>Document</code> associated 60.716 - with the element to be 60.717 - scrolled into view is not <span data-anolis-spec=html>same origin</span> with the 60.718 - <code data-anolis-spec=dom>Document</code> associated with the element or 60.719 - <span>viewport</span> associated with the scrolling box, terminate these 60.720 - steps.</p></li> 60.721 - 60.722 - <li><p>If the <i title>align to top flag</i> is set align the top of 60.723 - the border box of the element to be scrolled into view with the top of 60.724 - the scrolling box.</p></li> 60.725 - 60.726 - <li><p>Otherwise, if the <i title>align to top flag</i> is not set 60.727 - align the bottom of the border box of the element to be scrolled into 60.728 - view with the bottom of the scrolling box.</p></li> 60.729 - 60.730 - <li><p>Align the left of the border box of the element to be scrolled 60.731 - into view with the left of the scrolling box.</p</li> 60.732 - <!-- RTL is not special cased in implementations?! --> 60.733 - 60.734 - <li><p>If the aligning did not cause content to move terminate these 60.735 - steps.</p></li> 60.736 - 60.737 - <li> 60.738 - <dl> 60.739 - <dt>If the scrolling box is associated with an element</dt> 60.740 - <dd><p><span data-anolis-spec=html>Queue a task</span> to <span data-anolis-spec=dom title=concept-event-fire>fire an event</span> 60.741 - named <code title="event-scroll">scroll</code> at the element 60.742 - associated with the scrolling box, unless a <span data-anolis-spec=html title=concept-task>task</span> to fire 60.743 - that event at that element was already 60.744 - <span data-anolis-spec=html title="queue a task">queued</span>.</p></dd> 60.745 - 60.746 - <dt>If the scrolling box is associated with a <span>viewport</span></dt> 60.747 - <dd><p><span data-anolis-spec=html>Queue a task</span> to <span data-anolis-spec=dom title=concept-event-fire>fire an event</span> 60.748 - named <code title="event-scroll">scroll</code> that bubbles at the 60.749 - <code data-anolis-spec=dom>Document</code> object associated with the <span>viewport</span>, 60.750 - unless a <span data-anolis-spec=html title=concept-task>task</span> to fire that event at that 60.751 - <code data-anolis-spec=dom>Document</code> object was already 60.752 - <span data-anolis-spec=html title="queue a task">queued</span>.</p></dd> 60.753 - </dl> 60.754 - </li> 60.755 - </ol> 60.756 - 60.757 - 60.758 - <p>To <dfn>scroll an element</dfn> to <var title>x</var>,<var title>y</var> means to:</p> 60.759 - 60.760 - <ol> 60.761 - <li><p>If either <var title>x</var> or <var title>y</var> is 60.762 - infinite or NaN terminate this algorithm.</p> 60.763 - 60.764 - <li> 60.765 - <dl> 60.766 - <dt>If the element can have overflow to the right</dt> 60.767 - 60.768 - <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>, 60.769 - <span>content</span> width - 60.770 - <span>content edge</span> width)).</p></dd> 60.771 - 60.772 - <dt>If the element can have overflow to the left (under right-to-left 60.773 - conditions)</dt> 60.774 - 60.775 - <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>, 60.776 - <span>content edge</span> width - 60.777 - <span>content</span> width)).</p></dd> 60.778 - </dl> 60.779 - </li> 60.780 - 60.781 - <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>, 60.782 - <span>content</span> height - <span>content edge</span> height)).</p></li> 60.783 - 60.784 - <li><p>Align <span>content</span> x-coordinate <var title>x</var> with 60.785 - the left of the <span>content edge</span> of the element and align 60.786 - <span>content</span> y-coordinate <var title>y</var> with 60.787 - the top of the <span>content edge</span> of the element.</p></li> 60.788 - 60.789 - <li><p>If the aligning caused content to move <span data-anolis-spec=html>queue a task</span> 60.790 - to <span data-anolis-spec=dom title=concept-event-fire>fire an event</span> named 60.791 - <code title="event-scroll">scroll</code> at the element, unless a 60.792 - <span data-anolis-spec=html title=concept-task>task</span> to fire that event at that element was already 60.793 - <span data-anolis-spec=html title="queue a task">queued</span>.</p></li> 60.794 - </ol> 60.795 - 60.796 - 60.797 - <p>The 60.798 - <dfn title=dom-Element-scrollIntoView><code>scrollIntoView([<var>top</var>])</code></dfn> 60.799 - method must run these steps:</p> 60.800 - 60.801 - <ol> 60.802 - <li><p>If the element does not have any associated CSS layout box 60.803 - terminate these steps.</p></li> 60.804 - 60.805 - <li><p><span title="scroll an element into view">Scroll the element into view</span> 60.806 - with the <i title>align to top flag</i> set if <var title>top</var> 60.807 - is true or omitted.</p></li> 60.808 - </ol> 60.809 - 60.810 - 60.811 - <p>The <dfn title=dom-Element-scrollTop><code>scrollTop</code></dfn> 60.812 - attribute must return the result of running these 60.813 - steps:</p> 60.814 - 60.815 - <ol> 60.816 - <li><p>If the element does not have any associated CSS layout box or the 60.817 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 60.818 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> return zero and terminate these steps.</p></li> 60.819 - 60.820 - <li><p>If the element is the root element return the value of 60.821 - <code title="dom-Window-scrollY">scrollY</code>.</p></li> 60.822 - 60.823 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 60.824 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 60.825 - does not have any overflow, return the value of 60.826 - <code title=dom-Window-scrollY>scrollY</code>.</p></li> 60.827 - 60.828 - <li><p>Return the y-coordinate of the <span>content</span> at the 60.829 - alignment point with the top of the <span>content edge</span> of the 60.830 - element.</p></li> 60.831 - </ol> 60.832 - 60.833 - <p>When setting the <code title=dom-Element-scrollTop>scrollTop</code> 60.834 - attribute these steps must be run:</p> 60.835 - 60.836 - <ol> 60.837 - <li><p>Let <var title>y</var> be the given value.</p></li> 60.838 - 60.839 - <li><p>If the element does not have any associated CSS layout box, the 60.840 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 60.841 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, or the element has no overflow, terminate these 60.842 - steps.</p></li> 60.843 - 60.844 - <li><p>If the element is the root element invoke 60.845 - <code title=dom-Window-scroll>scroll()</code> with zero as first 60.846 - argument and <var title>y</var> as second.</p></li> 60.847 - 60.848 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 60.849 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 60.850 - does not have any vertical overflow, invoke 60.851 - <code title=dom-Window-scroll>scroll()</code> with 60.852 - <code title=dom-Window-scrollX>scrollX</code> as first 60.853 - argument and <var title>y</var> as second.</p></li> 60.854 - 60.855 - <li><p><span title="scroll an element">Scroll the element</span> to 60.856 - <code title=dom-Element-scrollLeft>scrollLeft</code>,<var title>y</var>. 60.857 - </ol> 60.858 - 60.859 - <p>The <dfn title=dom-Element-scrollLeft><code>scrollLeft</code></dfn> 60.860 - attribute must return the result of running these 60.861 - steps:</p> 60.862 - 60.863 - <ol> 60.864 - <li><p>If the element does not have any associated CSS layout box or the 60.865 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 60.866 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> return zero and terminate these steps.</p></li> 60.867 - 60.868 - <li><p>If the element is the root element return the value of 60.869 - <code title=dom-Window-scrollX>scrollX</code>.</p></li> 60.870 - 60.871 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 60.872 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 60.873 - does not have any overflow, return the value of 60.874 - <code title=dom-Window-scrollX>scrollX</code>.</p></li> 60.875 - 60.876 - <li><p>Return the x-coordinate of the <span>content</span> at the 60.877 - alignment point with the left of the <span>content edge</span> of the 60.878 - element.</p></li> 60.879 - </ol> 60.880 - 60.881 - <p>When setting the <code title=dom-Element-scrollLeft>scrollLeft</code> attribute these steps 60.882 - must be run:</p> 60.883 - 60.884 - <ol> 60.885 - <li><p>Let <var title>x</var> be the given value.</p></li> 60.886 - 60.887 - <li><p>If the element does not have any associated CSS layout box, the 60.888 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 60.889 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, or the element has no overflow, terminate these 60.890 - steps.</p></li> 60.891 - 60.892 - <li><p>If the element is the root element invoke 60.893 - <code title=dom-Window-scroll>scroll()</code> with 60.894 - <var title>x</var> as first argument and zero as second.</p></li> 60.895 - 60.896 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 60.897 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 60.898 - does not have any vertical overflow, invoke 60.899 - <code title="dom-Window-scroll">scroll()</code> with 60.900 - <var title>x</var> as first argument and 60.901 - <code title=dom-Window-scrollY>scrollY</code> as second.</p></li> 60.902 - 60.903 - <li><p><span title="Scroll an element">Scroll the element</span> to 60.904 - <var title>x</var>,<code title=dom-Element-scrollTop>scrollTop</code>. 60.905 - </ol> 60.906 - 60.907 - <p>The <dfn title=dom-Element-scrollWidth><code>scrollWidth</code></dfn> 60.908 - attribute must return the result of running these 60.909 - steps:</p> 60.910 - 60.911 - <ol> 60.912 - <li><p>If the element does not have any associated CSS layout box return 60.913 - zero and terminate these steps.</p></li> 60.914 - 60.915 - <li><p>If the element is the root element and the 60.916 - <code data-anolis-spec=dom>Document</code> is not in 60.917 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 60.918 - return 60.919 - max(<span>document content</span> width, value of <code title=dom-Window-innerWidth>innerWidth</code>).</p></li> 60.920 - 60.921 - <li><p>If the element is <span>the HTML <code>body</code> element</span> 60.922 - and the <code data-anolis-spec=dom>Document</code> is in 60.923 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 60.924 - return 60.925 - max(<span>document content</span> width, value of <code title=dom-Window-innerWidth>innerWidth</code>).</p></li> 60.926 - 60.927 - <li><p>Return the computed value of the '<code>padding-left</code>' 60.928 - property, plus the computed value of the '<code>padding-right</code>', 60.929 - plus the <span>content</span> width of the element.</p></li> 60.930 - </ol> 60.931 - 60.932 - <p>The <dfn title=dom-Element-scrollHeight><code>scrollHeight</code></dfn> 60.933 - attribute must return the result of running these 60.934 - steps:</p> 60.935 - 60.936 - <ol> 60.937 - <li><p>If the element does not have any associated CSS layout box return 60.938 - zero and terminate these steps.</p></li> 60.939 - 60.940 - <li><p>If the element is the root element and the 60.941 - <code data-anolis-spec=dom>Document</code> is not in 60.942 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 60.943 - return 60.944 - max(<span>document content</span> height, value of <code title=dom-Window-innerHeight>innerHeight</code>).</p></li> 60.945 - 60.946 - <li><p>If the element is <span>the HTML <code>body</code> element</span> 60.947 - and the <code data-anolis-spec=dom>Document</code> is in 60.948 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 60.949 - return 60.950 - max(<span>document content</span> height, value of <code title=dom-Window-innerHeight>innerHeight</code>).</p></li> 60.951 - 60.952 - <li><p>Return the computed value of the '<code>padding-top</code>' 60.953 - property, plus the computed value of the '<code>padding-bottom</code>', 60.954 - plus the <span>content</span> height of the element.</p></li> 60.955 - </ol> 60.956 - 60.957 - <!-- for inline boxes offsetWidth and offsetHeight are identical to offset* --> 60.958 - 60.959 - 60.960 - <h3 id="client-attributes">The <code title>clientTop</code>, 60.961 - <code title>clientLeft</code>, <code title>clientWidth</code>, and 60.962 - <code title>clientHeight</code> attributes</h3> 60.963 - 60.964 - <p>The <dfn title=dom-Element-clientTop><code>clientTop</code></dfn>, 60.965 - <dfn title=dom-Element-clientLeft><code>clientLeft</code></dfn>, 60.966 - <dfn title=dom-Element-clientWidth><code>clientWidth</code></dfn>, and 60.967 - <dfn title=dom-Element-clientHeight><code>clientHeight</code></dfn> 60.968 - attributes must return zero if the element does not 60.969 - have any associated CSS layout box or if the CSS layout box is inline. 60.970 - Otherwise, these attributes must behave as defined in 60.971 - the remainder of this section.</p> 60.972 - 60.973 - <p>The <code title=dom-Element-clientTop>clientTop</code> attribute returns the computed value of the 60.974 - '<code>border-top-width</code>' property plus the width of any scrollbar 60.975 - rendered between the top <span>padding edge</span> and the top 60.976 - <span>border edge</span>.</p> 60.977 - 60.978 - <p>The <code title=dom-Element-clientLeft>clientLeft</code> attribute returns the computed 60.979 - value of the '<code>border-left-width</code>' property plus the width of 60.980 - any scrollbar rendered between the left <span>padding edge</span> and the 60.981 - left <span>border edge</span>. 60.982 - 60.983 - <p>The <code title=dom-Element-clientWidth>clientWidth</code> attribute returns the 60.984 - <span>viewport</span> width excluding the size of a rendered scroll bar 60.985 - (if any) if the element is the root element and the 60.986 - width of the <span>padding edge</span> (excluding the width of any 60.987 - rendered scrollbar between the <span>padding edge</span> and the 60.988 - <span>border edge</span>) otherwise.</p> 60.989 - 60.990 - <p>The <code title=dom-Element-clientHeight>clientHeight</code> attribute returns the 60.991 - <span>viewport</span> height excluding the size of a rendered scroll bar 60.992 - (if any) if the element is the root element and the 60.993 - height of the <span>padding edge</span> (excluding the width of any 60.994 - rendered scrollbar between the <span>padding edge</span> and the 60.995 - <span>border edge</span>) otherwise.</p> 60.996 - 60.997 - 60.998 - 60.999 - <h2 id="extensions-to-the-htmlelement-interface">Extensions to the <code title>HTMLElement</code> Interface</h2> 60.1000 - 60.1001 - <pre class="idl">partial interface <span data-anolis-spec=html>HTMLElement</span> { 60.1002 - readonly attribute Element <span title=dom-HTMLElement-offsetParent>offsetParent</span>; 60.1003 - readonly attribute long <span title=dom-HTMLElement-offsetTop>offsetTop</span>; 60.1004 - readonly attribute long <span title=dom-HTMLElement-offsetLeft>offsetLeft</span>; 60.1005 - readonly attribute long <span title=dom-HTMLElement-offsetWidth>offsetWidth</span>; 60.1006 - readonly attribute long <span title=dom-HTMLElement-offsetHeight>offsetHeight</span>; 60.1007 -};</pre> 60.1008 - 60.1009 - 60.1010 - <h3 id="offset-attributes">The <code title>offsetParent</code>, 60.1011 - <code title>offsetTop</code>, <code title>offsetLeft</code>, 60.1012 - <code title>offsetWidth</code>, and <code title>offsetHeight</code> 60.1013 - attributes</h3> 60.1014 - 60.1015 - <p>The 60.1016 - <dfn title=dom-HTMLElement-offsetParent><code>offsetParent</code></dfn> 60.1017 - attribute must return the result of running these 60.1018 - steps:</p> 60.1019 - 60.1020 - <ol> 60.1021 - <li> 60.1022 - <p>If any of the following holds true return null and terminate this 60.1023 - algorithm:</p> 60.1024 - 60.1025 - <ul> 60.1026 - <li>The element does not have an associated CSS layout box.</li> 60.1027 - 60.1028 - <li>The element is the root element.</li> 60.1029 - 60.1030 - <li>The element is 60.1031 - <span>the HTML <code>body</code> element</span>.</li> 60.1032 - 60.1033 - <li>The element's computed value of the '<code>position</code>' 60.1034 - property is <code>fixed</code>.</li> 60.1035 - </ul> 60.1036 - </li> 60.1037 - 60.1038 - <li> 60.1039 - <p>Return the nearest ancestor element of the element for which at least 60.1040 - one of the following is true and terminate this algorithm if such an 60.1041 - ancestor is found:</p> 60.1042 - 60.1043 - <ul> 60.1044 - <li>The computed value of the '<code>position</code>' property is not 60.1045 - <code>static</code>.</li> 60.1046 - 60.1047 - <li>It is <span>the HTML <code>body</code> element</span>.</li> 60.1048 - 60.1049 - <li>The computed value of the '<code>position</code>' property of 60.1050 - the element is <code>static</code> and the ancestor is one of the 60.1051 - following <span data-anolis-spec=html title="HTML elements">HTML elements</span>: 60.1052 - <code>td</code>, <code>th</code>, or <code>table</code>.</li> 60.1053 - </ul> 60.1054 - </li> 60.1055 - 60.1056 - <li><p>Return null.</p></li> 60.1057 - </ol> 60.1058 - 60.1059 - <p>The <dfn title=dom-HTMLElement-offsetTop><code>offsetTop</code></dfn> 60.1060 - attribute must return the result of running these 60.1061 - steps:</p> 60.1062 - 60.1063 - <ol> 60.1064 - <li><p>If the element is <span>the HTML <code>body</code> element</span> 60.1065 - or does not have any associated CSS layout box return zero and terminate 60.1066 - this algorithm.</p></li> 60.1067 - 60.1068 - <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the 60.1069 - y-coordinate of the top <span>border edge</span> of the first 60.1070 - CSS layout box associated with the element, relative to the 60.1071 - <span>initial containing block</span> origin, and terminate this 60.1072 - algorithm.</p></li> 60.1073 - 60.1074 - <li> 60.1075 - <p>Return the result of subtracting the y-coordinate of the top 60.1076 - <span>padding edge</span> of the first CSS layout box associated with 60.1077 - the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the y-coordinate of 60.1078 - the top <span>border edge</span> of the first CSS layout box associated 60.1079 - with the element, relative to the <span>initial containing block</span> 60.1080 - origin.</p> 60.1081 - 60.1082 - <p class="note">An inline element that consists of multiple line boxes 60.1083 - will only have its first CSS layout box considered.</p> 60.1084 - </li> 60.1085 - </ol> 60.1086 - 60.1087 - <p>The <dfn title=dom-HTMLElement-offsetLeft><code>offsetLeft</code></dfn> 60.1088 - attribute must return the result of running these steps:</p> 60.1089 - 60.1090 - <ol> 60.1091 - <li><p>If the element is <span>the HTML <code>body</code> 60.1092 - element</span> or does not have any associated CSS layout box return zero 60.1093 - and terminate this algorithm.</p></li> 60.1094 - 60.1095 - <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the 60.1096 - x-coordinate of the left <span>border edge</span> of the first 60.1097 - CSS layout box associated with the element, relative to the 60.1098 - <span>initial containing block</span> origin, and terminate this 60.1099 - algorithm.</p></li> 60.1100 - 60.1101 - <li> 60.1102 - <p>Return the result of subtracting the x-coordinate of the left 60.1103 - <span>padding edge</span> of the first CSS layout box associated with 60.1104 - the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the x-coordinate of 60.1105 - the left <span>border edge</span> of the first CSS layout box associated 60.1106 - with the element, relative to the <span>initial containing block</span> 60.1107 - origin.</p> 60.1108 - </li> 60.1109 - </ol> 60.1110 - 60.1111 - <p>The 60.1112 - <dfn title=dom-HTMLElement-offsetWidth><code>offsetWidth</code></dfn> 60.1113 - attribute must return the result of running these steps:</p> 60.1114 - 60.1115 - <ol> 60.1116 - <li><p>If the element does not have any associated CSS layout box return 60.1117 - zero and terminate this algorithm.</p></li> 60.1118 - 60.1119 - <li><p>Return the <span>border edge</span> width of the first 60.1120 - CSS layout box associated with the element.</p></li> 60.1121 - </ol> 60.1122 - 60.1123 - <p>The 60.1124 - <dfn title=dom-HTMLElement-offsetHeight><code>offsetHeight</code></dfn> 60.1125 - attribute must return the result of running these steps:</p> 60.1126 - 60.1127 - <ol> 60.1128 - <li><p>If the element does not have any associated CSS layout box return 60.1129 - zero and terminate this algorithm.</p></li> 60.1130 - 60.1131 - <li><p>Return the <span>border edge</span> height of the first 60.1132 - CSS layout box associated with the element.</p></li> 60.1133 - </ol> 60.1134 - 60.1135 - 60.1136 - <h2 id="extensions-to-the-range-interface">Extensions to the <code title>Range</code> Interface</h2> 60.1137 - 60.1138 - <pre class="idl">partial interface <span data-anolis-spec=dom>Range</span> { 60.1139 - <span>ClientRectList</span> <span title="dom-Range-getClientRects">getClientRects</span>(); 60.1140 - <span>ClientRect</span> <span title="dom-Range-getBoundingClientRect">getBoundingClientRect</span>(); 60.1141 -};</pre> 60.1142 - 60.1143 - <p>The objects the methods described below return must 60.1144 - be static.</p> 60.1145 - 60.1146 - <p>The 60.1147 - <dfn title=dom-Range-getClientRects><code>getClientRects()</code></dfn> 60.1148 - method, when invoked, must return an empty 60.1149 - <code>ClientRectList</code> object if the range is not in the document and 60.1150 - otherwise a <code>ClientRectList</code> object containing a list of 60.1151 - <code>ClientRect</code> objects in content order that matches the 60.1152 - following constraints:</p> 60.1153 - 60.1154 - <ul> 60.1155 - <li>For each element selected by the range, whose parent is not selected 60.1156 - by the range, include the border boxes returned by invoking 60.1157 - <code title=dom-Element-getClientRects>getClientRects()</code> on the 60.1158 - element.</li> 60.1159 - 60.1160 - <li>For each <code>Text</code> node selected or partially selected by the 60.1161 - range (including when the boundary-points are identical), include a 60.1162 - <code>ClientRect</code> object (for the part that is selected, not the 60.1163 - whole line box). The bounds of these <code>ClientRect</code> objects are 60.1164 - computed using font metrics; thus, for horizontal writing, the vertical 60.1165 - dimension of each box is determined by the font ascent and descent, and 60.1166 - the horizontal dimension by the text advance width.</li> 60.1167 - </ul> 60.1168 - 60.1169 - <p>The 60.1170 - <dfn title=dom-Range-getBoundingClientRect><code>getBoundingClientRect()</code></dfn> 60.1171 - method, when invoked, must return the result of the 60.1172 - following algorithm:</p> 60.1173 - 60.1174 - <ol> 60.1175 - <li><p>Let <var>list</var> be the result of invoking 60.1176 - <code title=dom-Range-getClientRects>getClientRects()</code> on the 60.1177 - same range this method was invoked on.</p></li> 60.1178 - 60.1179 - <li><p>If <var>list</var> is empty return a 60.1180 - <code>ClientRect</code> object whose 60.1181 - <code title=dom-ClientRect-top>top</code>, 60.1182 - <code title=dom-ClientRect-right>right</code>, 60.1183 - <code title=dom-ClientRect-bottom>bottom</code> and 60.1184 - <code title=dom-ClientRect-left>left</code> members are zero.</p></li> 60.1185 - 60.1186 - <li><p>Otherwise, return a <code>ClientRect</code> object describing the 60.1187 - smallest rectangle that includes the first rectangle in <var>list</var> 60.1188 - and all of the remaining rectangles of which the height or width is not 60.1189 - zero.</p></li> 60.1190 - </ol> 60.1191 - 60.1192 - 60.1193 - 60.1194 - 60.1195 - <h2 id="extensions-to-the-mouseevent-interface">Extensions to the <code title>MouseEvent</code> Interface</h2> 60.1196 - 60.1197 - <pre class="idl">partial interface <span>MouseEvent</span> { 60.1198 - readonly attribute long <span title=dom-MouseEvent-screenX>screenX</span>; 60.1199 - readonly attribute long <span title=dom-MouseEvent-screenY>screenY</span>; 60.1200 - 60.1201 - readonly attribute long <span title=dom-MouseEvent-pageX>pageX</span>; 60.1202 - readonly attribute long <span title=dom-MouseEvent-pageY>pageY</span>; 60.1203 - 60.1204 - readonly attribute long <span title=dom-MouseEvent-clientX>clientX</span>; 60.1205 - readonly attribute long <span title=dom-MouseEvent-clientY>clientY</span>; 60.1206 - readonly attribute long <span title=dom-MouseEvent-x>x</span>; 60.1207 - readonly attribute long <span title=dom-MouseEvent-y>y</span>; 60.1208 - 60.1209 - readonly attribute long <span title=dom-MouseEvent-offsetX>offsetX</span>; 60.1210 - readonly attribute long <span title=dom-MouseEvent-offsetY>offsetY</span>; 60.1211 -};</pre> 60.1212 - 60.1213 - <p class="XXX">The object IDL fragment redefines some members. Can we 60.1214 - resolve this somehow?</p> 60.1215 - 60.1216 - <p>The 60.1217 - <dfn title=dom-MouseEvent-screenX><code>screenX</code></dfn> 60.1218 - attribute must return the x-coordinate of 60.1219 - the position where the event occurred relative to the origin of the 60.1220 - screen.</p> 60.1221 - 60.1222 - <p>The 60.1223 - <dfn title=dom-MouseEvent-screenY><code>screenY</code></dfn> 60.1224 - attribute must return the y-coordinate of 60.1225 - the position where the event occurred relative to the origin of the 60.1226 - screen.</p> 60.1227 - 60.1228 - <p>The <dfn title=dom-MouseEvent-pageX><code>pageX</code></dfn> attribute 60.1229 - must return the horizontal coordinate of 60.1230 - the position where the event occurred relative to 60.1231 - the origin of the <span>initial containing block</span>.</p> 60.1232 - 60.1233 - <p>The <dfn title=dom-MouseEvent-pageY><code>pageY</code></dfn> attribute 60.1234 - must return the y-coordinate of the 60.1235 - position where the event occurred relative to the origin of the 60.1236 - <span>initial containing block</span>.</p> 60.1237 - 60.1238 - <p>The <dfn title=dom-MouseEvent-clientX><code>clientX</code></dfn> 60.1239 - attribute must return the x-coordinate of 60.1240 - the position where the event occurred relative to the origin of the 60.1241 - <span>viewport</span>.</p> 60.1242 - 60.1243 - <p>The <dfn title=dom-MouseEvent-clientY><code>clientY</code></dfn> 60.1244 - attribute must return the y-coordinate of 60.1245 - the position where the event occurred relative to the origin of the 60.1246 - <span>viewport</span>.</p> 60.1247 - 60.1248 - <p>The <dfn title=dom-MouseEvent-x><code>x</code></dfn> 60.1249 - attribute must return the value of 60.1250 - <code title=dom-MouseEvent-clientX>clientX</code>.</p> 60.1251 - 60.1252 - <p>The <dfn title=dom-MouseEvent-y><code>y</code></dfn> 60.1253 - attribute must return the value of 60.1254 - <code title=dom-MouseEvent-clientY>clientY</code>.</p> 60.1255 - 60.1256 - <!-- x/y do not match IE in the position:relative case but do match other 60.1257 - browsers --> 60.1258 - 60.1259 - 60.1260 - <p>The <dfn title=dom-MouseEvent-offsetX><code>offsetX</code></dfn> 60.1261 - attribute must return the x-coordinate of 60.1262 - the position where the event occurred relative to the origin of the 60.1263 - <span>padding edge</span> of the target node.</p> 60.1264 - 60.1265 - <p>The <dfn title=dom-MouseEvent-offsetY><code>offsetY</code></dfn> 60.1266 - attribute must return the y-coordinate of 60.1267 - the position where the event occurred relative to the origin of the 60.1268 - <span>padding edge</span> of the target node.</p> 60.1269 - 60.1270 - <!-- XXX layerX/layerY --> 60.1271 - 60.1272 - 60.1273 - 60.1274 - <h2>Rectangles</h2> 60.1275 - 60.1276 - 60.1277 - <h3 id="the-clientrectlist-interface">The <code title>ClientRectList</code> Interface</h3> 60.1278 - 60.1279 - <p>The <code>ClientRectList</code> object consists of an ordered list 60.1280 - of <code>ClientRect</code> objects.</p> 60.1281 - 60.1282 - <pre class="idl">interface <dfn>ClientRectList</dfn> { 60.1283 - readonly attribute unsigned long <span title="dom-ClientRectList-length">length</span>; 60.1284 - getter <span>ClientRect</span> <span title="dom-ClientRectList-item">item</span>(unsigned long <var title>index</var>); 60.1285 -};</pre> 60.1286 - 60.1287 - <p>The 60.1288 - <dfn title="dom-ClientRectList-length"><code>length</code></dfn> 60.1289 - attribute must return the total number of 60.1290 - <code>ClientRect</code> objects associated with the object.</p> 60.1291 - 60.1292 - <p>The 60.1293 - <dfn title="dom-ClientRectList-item"><code>item(<var>index</var>)</code></dfn> 60.1294 - method, when invoked, must raise an 60.1295 - <code>INDEX_SIZE_ERR</code> exception when <var title>index</var> is 60.1296 - greater than the number of <code>ClientRect</code> objects associated with 60.1297 - the object. Otherwise, the <code>ClientRect</code> object at 60.1298 - <var title>index</var> must be returned.</p> 60.1299 - 60.1300 - 60.1301 - <h3 id="the-clientrect-interface">The <code title>ClientRect</code> Interface</h3> 60.1302 - 60.1303 - <p>Objects implementing the <code>ClientRect</code> interface represent 60.1304 - a rectangular box. The type of box is specified by the method that returns 60.1305 - a <code>ClientRect</code> object.</p> 60.1306 - 60.1307 - <pre class="idl">interface <dfn>ClientRect</dfn> { 60.1308 - readonly attribute float <span title="dom-ClientRect-top">top</span>; 60.1309 - readonly attribute float <span title="dom-ClientRect-right">right</span>; 60.1310 - readonly attribute float <span title="dom-ClientRect-bottom">bottom</span>; 60.1311 - readonly attribute float <span title="dom-ClientRect-left">left</span>; 60.1312 - readonly attribute float <span title="dom-ClientRect-width">width</span>; 60.1313 - readonly attribute float <span title="dom-ClientRect-height">height</span>; 60.1314 -};</pre> 60.1315 - 60.1316 - <p>The 60.1317 - <dfn title="dom-ClientRect-top"><code>top</code></dfn> 60.1318 - attribute must return the y-coordinate, 60.1319 - relative to the <span>viewport</span> origin, of the top of the rectangle 60.1320 - box.</p> 60.1321 - 60.1322 - <p>The 60.1323 - <dfn title="dom-ClientRect-right"><code>right</code></dfn> 60.1324 - attribute must return the x-coordinate, 60.1325 - relative to the <span>viewport</span> origin, of the right of the 60.1326 - rectangle box.</p> 60.1327 - 60.1328 - <p>The 60.1329 - <dfn title="dom-ClientRect-bottom"><code>bottom</code></dfn> 60.1330 - attribute must return the y-coordinate, 60.1331 - relative to the <span>viewport</span> origin, of the bottom of the 60.1332 - rectangle box.</p> 60.1333 - 60.1334 - <p>The 60.1335 - <dfn title="dom-ClientRect-left"><code>left</code></dfn> 60.1336 - attribute must return the x-coordinate, 60.1337 - relative to the <span>viewport</span> origin, of the left of the rectangle 60.1338 - box.</p> 60.1339 - 60.1340 - <p>The 60.1341 - <dfn title="dom-ClientRect-width"><code>width</code></dfn> 60.1342 - attribute must return the width of the 60.1343 - rectangle box.</p> 60.1344 - 60.1345 - <p class="note">This is identical to 60.1346 - <code title="dom-ClientRect-right">right</code> minus 60.1347 - <code title="dom-ClientRect-left">left</code>.</p> 60.1348 - 60.1349 - <p>The 60.1350 - <dfn title="dom-ClientRect-height"><code>height</code></dfn> 60.1351 - attribute must return the height of the 60.1352 - rectangle box.</p> 60.1353 - 60.1354 - <p class="note">This is identical to 60.1355 - <code title="dom-ClientRect-bottom">bottom</code> minus 60.1356 - <code title="dom-ClientRect-top">top</code>.</p> 60.1357 - 60.1358 - 60.1359 - 60.1360 -<h2 class=no-num>References</h2> 60.1361 -<h3 class=no-num>Normative references</h3> 60.1362 -<div id=anolis-references-normative></div> 60.1363 - 60.1364 - 60.1365 -<!-- 60.1366 -<h3 class=no-num>Informative references</h3> 60.1367 -<div id=anolis-references-informative></div> 60.1368 ---> 60.1369 - 60.1370 - 60.1371 - <h2 class="no-num">Acknowledgments</h2> 60.1372 - 60.1373 - <p>The editors would like to thank 60.1374 - 60.1375 - Alexey Feldgendler, 60.1376 - Björn Höhrmann, 60.1377 - David Vest, 60.1378 - Garrett Smith, 60.1379 - Hallvord R. M. Steen, 60.1380 - Leif Arne Storset, 60.1381 - Luiz Agostini, 60.1382 - Maciej Stachowiak, 60.1383 - Michael Dyck, 60.1384 - Mike Wilson, 60.1385 - Morten Stenshorne, 60.1386 - Peter-Paul Koch, 60.1387 - Rachel Kmetz, 60.1388 - Robert O'Callahan, 60.1389 - Sam Weinig, 60.1390 - Simon Pieters, 60.1391 - Sylvain Galineau, 60.1392 - Tarquin Wilton-Jones, 60.1393 - Thomas Moore, and 60.1394 - Xiaomei Ji<!-- should actually use real name here --> 60.1395 - 60.1396 - for their contributions to this document.</p> 60.1397 - 60.1398 - <p>Special thanks to the Microsoft employees who first implemented many of 60.1399 - the features specified in this draft, which were first widely deployed by 60.1400 - the Windows Internet Explorer browser.</p> 60.1401 - </body> 60.1402 -</html> 60.1403 -
61.1 --- a/cssom-view/cssom-view-source Tue Jul 31 14:04:38 2012 -0700 61.2 +++ b/cssom-view/cssom-view-source Wed Aug 08 09:06:37 2012 -0700 61.3 @@ -3,19 +3,7 @@ 61.4 <head> 61.5 <meta charset=utf-8> 61.6 <title>CSSOM View Module</title> 61.7 - <style type="text/css"> 61.8 - pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em } 61.9 - pre.idl :link, pre.idl :visited { color:inherit; background:transparent } 61.10 - dfn { font-weight:bold; font-style:normal } 61.11 - div.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc } 61.12 - div.example code { color:inherit } 61.13 - p.note { margin-left:2em; color:green; font-style:italic; font-weight:bold } 61.14 - p.note::before { content:"Note: " } 61.15 - .XXX { padding:.5em; border:solid red } 61.16 - .XXX::before { content:"Issue: " } 61.17 - code { color:orangered } 61.18 - code :link, code :visited { color:inherit } 61.19 - </style> 61.20 + <link rel="stylesheet" href="cssom.css"> 61.21 <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]"> 61.22 </head> 61.23 <body class="draft"> 61.24 @@ -62,13 +50,7 @@ 61.25 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd> 61.26 </dl> 61.27 61.28 - <p class="dontpublish copyright"><a rel=license href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="http://i.creativecommons.org/p/zero/1.0/80x15.png" alt=CC0></a> 61.29 - To the extent possible under law, the editors have waived all copyright and 61.30 - related or neighboring rights to this work. In addition, as of 61.31 - [DATE: 01 Jan 1901], the editors have made this specification available 61.32 - under the <a rel=license href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0">Open 61.33 - Web Foundation Agreement, Version 1.0</a>.</p> 61.34 - <div class=publish><!--copyright--></div> 61.35 + <!--copyright--> 61.36 61.37 </div> 61.38 61.39 @@ -190,7 +172,7 @@ 61.40 <span data-anolis-ref>CSSOM</span> 61.41 <span data-anolis-ref>HTML</span> 61.42 61.43 - <p class=XXX><dfn><code>MouseEvent</code></dfn> is defined in … 61.44 + <p class="issue"><dfn><code>MouseEvent</code></dfn> is defined in … 61.45 61.46 <p><dfn>The HTML <code>body</code> element</dfn> is the first 61.47 <code>body</code> 61.48 @@ -232,393 +214,30 @@ 61.49 61.50 <h2 id="extensions-to-the-window-interface">Extensions to the <code title>Window</code> Interface</h2> 61.51 61.52 - <pre class="idl">partial interface <span data-anolis-spec=html>Window</span> { 61.53 - <span>MediaQueryList</span> <span title=dom-Window-matchMedia>matchMedia</span>(DOMString <var title>media_query_list</var>); 61.54 - readonly attribute <span>Screen</span> <span title=dom-Window-screen>screen</span>; 61.55 - 61.56 - // viewport 61.57 - readonly attribute long <span title=dom-Window-innerWidth>innerWidth</span>; 61.58 - readonly attribute long <span title=dom-Window-innerHeight>innerHeight</span>; 61.59 - 61.60 - // viewport scrolling 61.61 - readonly attribute long <span title="dom-Window-scrollX">scrollX</span>; 61.62 - readonly attribute long <span title="dom-Window-pageXOffset">pageXOffset</span>; 61.63 - readonly attribute long <span title="dom-Window-scrollY">scrollY</span>; 61.64 - readonly attribute long <span title="dom-Window-pageYOffset">pageYOffset</span>; 61.65 - void <span title=dom-Window-scroll>scroll</span>(long <var title>x</var>, long <var title>y</var>); 61.66 - void <span title=dom-Window-scrollto>scrollTo</span>(long <var title>x</var>, long <var title>y</var>); 61.67 - void <span title="dom-Window-scrollby">scrollBy</span>(long <var title>x</var>, long <var title>y</var>); 61.68 - 61.69 - // client 61.70 - readonly attribute long <span title=dom-Window-screenX>screenX</span>; 61.71 - readonly attribute long <span title=dom-Window-screenY>screenY</span>; 61.72 - readonly attribute long <span title=dom-Window-outerWidth>outerWidth</span>; 61.73 - readonly attribute long <span title=dom-Window-outerHeight>outerHeight</span>; 61.74 -};</pre> 61.75 - 61.76 - 61.77 - <p>When the 61.78 - <dfn title="dom-Window-matchMedia"><code>matchMedia(<var title>media_query_list</var>)</code></dfn> 61.79 - method is invoked these steps must be run:</p> 61.80 - 61.81 - <ol> 61.82 - <li><p>Let <var title>parsed_media_query_list</var> be the result of 61.83 - <span title="parse a media query list" data-anolis-spec=cssom>parsing</span> 61.84 - <var title>media_query_list</var>.</p></li> 61.85 - 61.86 - <li><p>Return a <em>new</em> <code>MediaQueryList</code> object, 61.87 - associated with the <code data-anolis-spec=html>Window</code> object, with 61.88 - <var title>parsed_media_query_list</var> as its associated 61.89 - media query list.</p></li> 61.90 - </ol> 61.91 - 61.92 - <p>The 61.93 - <dfn title=dom-Window-screen><code>screen</code></dfn> 61.94 - attribute must return the <code>Screen</code> object 61.95 - associated with the <code data-anolis-spec=html>Window</code> object. It always returns the same 61.96 - object.</p> 61.97 - 61.98 - <p class="note">Accessing <code title="dom-Window-screen">screen</code> through a <code data-anolis-spec=html>WindowProxy</code> object might yield different results 61.99 - when the <code data-anolis-spec=dom>Document</code> is navigated.</p> 61.100 - 61.101 - 61.102 - <p>The <dfn title=dom-Window-innerWidth><code>innerWidth</code></dfn> 61.103 - attribute must return the 61.104 - <span>viewport</span> width including the size of a rendered scroll bar 61.105 - (if any).</p> 61.106 - 61.107 - <div class="example"> 61.108 - <p>The following snippet shows how to obtain the width of the 61.109 - viewport:</p> 61.110 - 61.111 - <pre><code>var viewportWidth = innerWidth</code></pre> 61.112 - </div> 61.113 - 61.114 - <p>The <dfn title=dom-Window-innerHeight><code>innerHeight</code></dfn> 61.115 - attribute must return the 61.116 - <span>viewport</span> height including the size of a rendered scroll bar 61.117 - (if any).</p> 61.118 - 61.119 - <p>The 61.120 - <dfn title=dom-Window-scrollX><code>scrollX</code></dfn> and 61.121 - <dfn title=dom-Window-pageXOffset><code>pageXOffset</code></dfn> 61.122 - attributes must return the x-coordinate, 61.123 - relative to the <span>initial containing block</span> origin, of the left 61.124 - of the <span>viewport</span>.</p> 61.125 - 61.126 - <p>The 61.127 - <dfn title=dom-Window-scrollY><code>scrollY</code></dfn> and 61.128 - <dfn title=dom-Window-pageYOffset><code>pageYOffset</code></dfn> 61.129 - attributes must return the y-coordinate, 61.130 - relative to the <span>initial containing block</span> origin, of the top 61.131 - of the <span>viewport</span>.</p> 61.132 - 61.133 - <p>When the 61.134 - <dfn title=dom-Window-scroll><code>scroll(<var>x</var>,<var>y</var>)</code></dfn> 61.135 - method is invoked these steps must be run:</p> 61.136 - 61.137 - <ol> 61.138 - <li><p>If either <var title>x</var> or <var title>y</var> is 61.139 - infinite or NaN terminate this algorithm.</p></li> 61.140 - 61.141 - <li> 61.142 - <dl> 61.143 - <dt>If <span>document content</span> can have overflow to the right 61.144 - <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>, 61.145 - <span>content</span> width - <span>content edge</span> 61.146 - width)).</p></dd> 61.147 - 61.148 - <dt>If <span>document content</span> can have overflow to the left 61.149 - (under right-to-left conditions) 61.150 - <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>, 61.151 - <span>content edge</span> width - <span>content</span> 61.152 - width)).</p></dd> 61.153 - </dl> 61.154 - 61.155 - <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>, 61.156 - <span>document content</span> height - <span>viewport</span> 61.157 - height excluding the size of a rendered scroll bar (if any))).</p></li> 61.158 - 61.159 - <li><p>Align the x-coordinate <var title>x</var> of the 61.160 - <span>document content</span> with the left of the <span>viewport</span> 61.161 - and align the y-coordinate <var title>y</var> of the <span>document 61.162 - content</span> with the top of the <span>viewport</span>.</p></li> 61.163 - 61.164 - <li><p>If the aligning caused content to move <span data-anolis-spec=html>queue a task</span> 61.165 - to 61.166 - <span data-anolis-spec=dom title=concept-event-fire>fire an event</span> 61.167 - named <code title="event-scroll">scroll</code> that bubbles at the 61.168 - <code data-anolis-spec=dom>Document</code> object, unless a 61.169 - <span data-anolis-spec=html title=concept-task>task</span> to fire that event at the <code data-anolis-spec=dom>Document</code> object 61.170 - was already <span data-anolis-spec=html title="queue a task">queued</span>.</p></li> 61.171 - </ol> 61.172 - 61.173 - <p>When the 61.174 - <dfn title=dom-Window-scrollto><code>scrollTo(<var title>x</var>,<var title>y</var>)</code></dfn> 61.175 - method is invoked, the user agent must act as if the 61.176 - <code title=dom-Window-scroll>scroll()</code> method was invoked with 61.177 - the same arguments.</p> 61.178 - 61.179 - <p>When the 61.180 - <dfn title=dom-Window-scrollby><code>scrollBy(<var title>x</var>,<var title>y</var>)</code></dfn> 61.181 - method is invoked, the user agent must act as if the 61.182 - <code title=dom-Window-scroll>scroll()</code> method was invoked with 61.183 - <var title>x</var> plus <code title="dom-Window-scrollX">scrollX</code> 61.184 - as first argument and <var title>y</var> plus 61.185 - <code title="dom-Window-scrollY">scrollY</code> as second argument.</p> 61.186 - 61.187 - <p>The <dfn title="dom-Window-screenX"><code>screenX</code></dfn> 61.188 - attribute must return the x-coordinate, 61.189 - relative to the origin of the screen of the output device, of the top of 61.190 - the client window as number of pixels, or zero if there is no such 61.191 - thing.</p> 61.192 - 61.193 - <p>The <dfn title=dom-Window-screenY><code>screenY</code></dfn> 61.194 - attribute must return the y-coordinate, 61.195 - relative to the origin of the screen of the output device, of the left of 61.196 - the client window as number of pixels, or zero if there is no such 61.197 - thing.</p> 61.198 - 61.199 - <p>The <dfn title=dom-Window-outerWidth><code>outerWidth</code></dfn> 61.200 - attribute must return the width of the 61.201 - client window. If there is no client window this 61.202 - attribute must return zero.</p> 61.203 - 61.204 - <p>The <dfn title=dom-Window-outerHeight><code>outerHeight</code></dfn> 61.205 - attribute must return the height of the 61.206 - client window. If there is no client window 61.207 - this attribute must return zero.</p> 61.208 - 61.209 - 61.210 + <!--{@idl(Window)}--> 61.211 61.212 <h3 id="the-mediaquerylist-interface">The <code title>MediaQueryList</code> Interface</h3> 61.213 61.214 - <p>A <code>MediaQueryList</code> object has an associated media query list 61.215 - set on creation and an associated 61.216 - <dfn>list of media query list listeners</dfn>, which is initially 61.217 - empty.</p> 61.218 + <!--{@idl(MediaQueryList)}--> 61.219 61.220 - <p>If the associated media query list changes in evaluation then, for each 61.221 - listener in the <span>list of media query list listeners</span> — in 61.222 - appending order, <span data-anolis-spec=html>queue a task</span> that invokes the listener, 61.223 - passing as argument the <code>MediaQueryList</code> object.</p> 61.224 - 61.225 - <div class="example"> 61.226 - <p>A simple piece of code that detects changes in the orientation of the 61.227 - viewport can be written as follows:</p> 61.228 - <pre><code>function handleOrientationChange(mql) { 61.229 - if(mql.matches) // landscape 61.230 - … 61.231 - else 61.232 - … 61.233 -} 61.234 -var mql = matchMedia("(orientation:landscape)") 61.235 -mql.addListener(handleOrientationChange)</code></pre> 61.236 - </div> 61.237 - 61.238 - <pre class="idl">interface <dfn id="mediaquerylist">MediaQueryList</dfn> { 61.239 - readonly attribute DOMString <span title="dom-MediaQueryList-media">media</span>; 61.240 - readonly attribute boolean <span title="dom-MediaQueryList-matches">matches</span>; 61.241 - void <span title="dom-MediaQueryList-addListener">addListener</span>(<span>MediaQueryListListener</span> <var title>listener</var>); 61.242 - void <span title="dom-MediaQueryList-removeListener">removeListener</span>(<span>MediaQueryListListener</span> <var title>listener</var>); 61.243 -}; 61.244 - 61.245 -[Callback, NoInterfaceObject] 61.246 -interface <dfn id="mediaquerylistlistener">MediaQueryListListener</dfn> { 61.247 - void <span>handleChange</span>(<span>MediaQueryList</span> <var title>mql</var>); 61.248 -};</pre> 61.249 - 61.250 - <p>The 61.251 - <dfn title="dom-MediaQueryList-media"><code>media</code></dfn> 61.252 - must return the 61.253 - <span title="serialize a media query list" data-anolis-spec=cssom>serialized</span> form of the associated media query list.</p> 61.254 - 61.255 - <p>The <dfn title="dom-MediaQueryList-matches"><code>matches</code></dfn> 61.256 - must return true if the associated media query list 61.257 - matches the state of the rendered <code data-anolis-spec=dom>Document</code> and false if it 61.258 - does not.</p> 61.259 - 61.260 - <p>When the 61.261 - <dfn title="dom-MediaQueryList-addListener"><code>addListener(<var>listener</var>)</code></dfn> 61.262 - is invoked <var title>listener</var> must be 61.263 - appended to the <span>list of media query list listeners</span>, unless 61.264 - it is already in the <span>list of media query list listeners</span>.</p> 61.265 - 61.266 - <p>When the 61.267 - <dfn title="dom-MediaQueryList-removeListener"><code>removeListener(<var>listener</var>)</code></dfn> 61.268 - is invoked <var title>listener</var> must be 61.269 - removed from the <span>list of media query list listeners</span>.</p> 61.270 - 61.271 - 61.272 - 61.273 + <!--{@idl(MediaQueryListListener)}--> 61.274 + 61.275 <h3 id="the-screen-interface">The <code title>Screen</code> Interface</h3> 61.276 61.277 - <p>As its name suggests, the <code>Screen</code> interface represents 61.278 - information about the screen of the output device.</p> 61.279 - 61.280 - <pre class="idl">interface <dfn id="screen">Screen</dfn> { 61.281 - readonly attribute unsigned long <span title=dom-Screen-availWidth>availWidth</span>; 61.282 - readonly attribute unsigned long <span title=dom-Screen-availHeight>availHeight</span>; 61.283 - readonly attribute unsigned long <span title=dom-Screen-width>width</span>; 61.284 - readonly attribute unsigned long <span title=dom-Screen-height>height</span>; 61.285 - readonly attribute unsigned long <span title=dom-Screen-colorDepth>colorDepth</span>; 61.286 - readonly attribute unsigned long <span title=dom-Screen-pixelDepth>pixelDepth</span>; 61.287 -};</pre> 61.288 - 61.289 - <p>The <dfn title=dom-Screen-availWidth><code>availWidth</code></dfn> 61.290 - attribute must return the available width of the 61.291 - rendering surface of the output device.</p> 61.292 - 61.293 - <p>The <dfn title=dom-Screen-availHeight><code>availHeight</code></dfn> 61.294 - attribute must return the available height of the 61.295 - rendering surface of the output device.</p> 61.296 - 61.297 - <p>The <dfn title=dom-Screen-width><code>width</code></dfn> attribute 61.298 - must return the width of the output device.</p> 61.299 - 61.300 - <p>The <dfn title=dom-Screen-height><code>height</code></dfn> attribute 61.301 - must return the height of the output device.</p> 61.302 - 61.303 - <p>The <dfn title=dom-Screen-colorDepth><code>colorDepth</code></dfn> and 61.304 - <dfn title=dom-Screen-pixelDepth><code>pixelDepth</code></dfn> attributes 61.305 - must both return the number of bits allocated to 61.306 - colors (i.e. excluding the alpha channel) in the output device. If the 61.307 - output device does not support colors these attributes 61.308 - must return zero.</p> 61.309 - <!-- pixelDepth is not supported by Internet Explorer 7 --> 61.310 - 61.311 + <!--{@idl(Screen)}--> 61.312 61.313 <h2 id="extensions-to-the-document-interface">Extensions to the <code title>Document</code> Interface</h2> 61.314 61.315 - <pre class="idl">partial interface <span data-anolis-spec=dom>Document</span> { 61.316 - <span data-anolis-spec=dom>Element</span>? <span title=dom-Document-elementFromPoint>elementFromPoint</span>(float <var title>x</var>, float <var title>y</var>); 61.317 - <span>CaretPosition</span>? <span title=dom-Document-caretPositionFromPoint>caretPositionFromPoint</span>(float <var title>x</var>, float <var title>y</var>); 61.318 -};</pre> 61.319 - 61.320 - <p>The 61.321 - <dfn title=dom-Document-elementFromPoint><code>elementFromPoint(<var>x</var>, <var>y</var>)</code></dfn> 61.322 - method must return the element at coordinates <var>x</var>,<var>y</var> in 61.323 - the <span>viewport</span>. The element to be returned is determined 61.324 - through hit testing. If either argument is negative, <var title>x</var> is 61.325 - greater than the <span>viewport</span> width excluding the size of a 61.326 - rendered scroll bar (if any), or <var title>y</var> is greater than the 61.327 - <span>viewport</span> height excluding the size of a rendered scroll bar 61.328 - (if any), the method must return null. If there is no element at the given 61.329 - position the method must return the root element, if any, or null 61.330 - otherwise.</p> 61.331 - 61.332 - <p>The 61.333 - <dfn title=dom-Document-caretPositionFromPoint><code>caretPositionFromPoint(<var>x</var>, <var>y</var>)</code></dfn> 61.334 - method must return the result of running these steps:</p> 61.335 - 61.336 - <ol> 61.337 - <li><p>If either argument is negative, <var title>x</var> is greater 61.338 - than the <span>viewport</span> width excluding the size of a rendered 61.339 - scroll bar (if any), <var title>y</var> is greather than the 61.340 - <span>viewport</span> height excluding the size of a rendered scroll bar 61.341 - (if any) return null.</p></li> 61.342 - 61.343 - <li><p>If at the coordinates <var title>x</var>,<var title>y</var> 61.344 - in the <span>viewport</span> no text insertion point indicator would have 61.345 - been inserted return null.</p></li> 61.346 - 61.347 - <li> 61.348 - <p>If at the coordinates <var title>x</var>,<var title>y</var> 61.349 - in the <span>viewport</span> a text insertion point indicator would have 61.350 - been inserted in a text entry widget which is also a replaced element 61.351 - return a <span>caret position</span> with its properties set as 61.352 - follows:</p> 61.353 - 61.354 - <dl> 61.355 - <dt><span>caret node</span></dt> 61.356 - <dd><p>The node corresponding to the text entry widget.</p></dd> 61.357 - 61.358 - <dt><span>caret offset</span></dt> 61.359 - <dd><p>The amount of 16-bit units to the left of where the 61.360 - text insertion point indicator would have inserted.</p></dd> 61.361 - 61.362 - <dt><span>caret range</span></dt> 61.363 - <dd><p>null</p></dd> 61.364 - </dl> 61.365 - </li> 61.366 - 61.367 - <li> 61.368 - <p>Otherwise, return a <span>caret position</span> where the 61.369 - <span>caret range</span> is a collapsed 61.370 - <code data-anolis-spec=dom>Range</code> object for the position 61.371 - where the text insertion point indicator would have been inserted and 61.372 - the other properties are set as follows:</p> 61.373 - 61.374 - <dl> 61.375 - <dt><span>caret node</span></dt> 61.376 - <dd><p>The <code data-anolis-spec=dom title=dom-Range-startContainer>startContainer</code> 61.377 - of the <span>caret range</span>.</p></dd> 61.378 - 61.379 - <dt><span>caret offset</span></dt> 61.380 - <dd><p>The <code data-anolis-spec=dom title=dom-Range-startOffset>startOffset</code> of 61.381 - the <span>caret range</span>.</p> 61.382 - </dl> 61.383 - </li> 61.384 - </ol> 61.385 - 61.386 - <p class="note">The specifics of hit testing are out of scope of this 61.387 - specification and therefore the exact details of 61.388 - <code title=dom-Document-elementFromPoint>elementFromPoint()</code> and 61.389 - <code title=dom-Document-caretPositionFromPoint>caretPositionFromPoint()</code> 61.390 - are therefore too. Hit testing will hopefully be defined in a future 61.391 - revision of CSS or HTML.</p> 61.392 - 61.393 + <!--{@idl(Document)}--> 61.394 61.395 61.396 <h3 id=the-caretposition-interface>The <code title>CaretPosition</code> Interface</h3> 61.397 61.398 - <p>A <dfn>caret position</dfn> gives the position of a 61.399 - text insertion point indicator. It always has an associated 61.400 - <dfn>caret node</dfn>, <dfn>caret offset</dfn>, and 61.401 - <dfn>caret range</dfn>. It is represented by a <code>CaretPosition</code> 61.402 - object.</p> 61.403 - 61.404 - <pre class="idl">interface <dfn id="caretposition">CaretPosition</dfn> { 61.405 - readonly attribute <span data-anolis-spec=dom>Node</span> <span title=dom-CaretPosition-offsetNode>offsetNode</span>; 61.406 - readonly attribute unsigned long <span title=dom-CaretPosition-offset>offset</span>;<!-- 61.407 - readonly attribute <span data-anolis-spec=dom>Range</span>? <span title="dom-CaretPosition-range">range</span>;--> 61.408 -};</pre> 61.409 - 61.410 - <p>The 61.411 - <dfn title=dom-CaretPosition-offsetNode><code>offsetNode</code></dfn> 61.412 - attribute must return the <span>caret node</span>.</p> 61.413 - 61.414 - <p>The 61.415 - <dfn title=dom-CaretPosition-offset><code>offset</code></dfn> 61.416 - attribute must return the <span>caret offset</span>.</p> 61.417 - 61.418 - <!-- 61.419 - <p>The 61.420 - <dfn id="dom-caretposition-range" title="dom-CaretPosition-range"><code>range</code></dfn> 61.421 - attribute must return the <span>caret range</span>.</p> 61.422 - --> 61.423 - <!-- https://bugs.webkit.org/show_bug.cgi?id=27046 --> 61.424 - 61.425 + <!--{@idl(CaretPosition)}--> 61.426 61.427 <h2 id="extensions-to-the-element-interface">Extensions to the <code title>Element</code> Interface</h2> 61.428 61.429 - <pre class="idl">partial interface <span data-anolis-spec=dom>Element</span> { 61.430 - <span>ClientRectList</span> <span title=dom-Element-getClientRects>getClientRects</span>(); 61.431 - <span>ClientRect</span> <span title=dom-Element-getBoundingClientRect>getBoundingClientRect</span>(); 61.432 - 61.433 - // scrolling 61.434 - void <span title=dom-Element-scrollIntoView>scrollIntoView</span>(optional boolean <var title>top</var>); 61.435 - attribute long <span title=dom-Element-scrollTop>scrollTop</span>; // scroll on setting 61.436 - attribute long <span title=dom-Element-scrollLeft>scrollLeft</span>; // scroll on setting 61.437 - readonly attribute long <span title=dom-Element-scrollWidth>scrollWidth</span>; 61.438 - readonly attribute long <span title=dom-Element-scrollHeight>scrollHeight</span>; 61.439 - 61.440 - readonly attribute long <span title=dom-Element-clientTop>clientTop</span>; 61.441 - readonly attribute long <span title=dom-Element-clientLeft>clientLeft</span>; 61.442 - readonly attribute long <span title=dom-Element-clientWidth>clientWidth</span>; 61.443 - readonly attribute long <span title=dom-Element-clientHeight>clientHeight</span>; 61.444 -};</pre> 61.445 - 61.446 + <!--{@idl(Element)}--> 61.447 61.448 <h3>The <code title>getClientRects()</code> and 61.449 <code title>getBoundingClientRect()</code> methods</h3> 61.450 @@ -629,78 +248,6 @@ 61.451 must be static. That is, changes to the underlying 61.452 document are not reflected in the objects.</p> 61.453 61.454 - <p>The 61.455 - <dfn title=dom-Element-getClientRects><code>getClientRects()</code></dfn> 61.456 - method, when invoked, must return the result of the 61.457 - following algorithm:</p> 61.458 - 61.459 - <ol> 61.460 - <li><p>If the element on which it was invoked does not have an associated 61.461 - CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code> 61.462 - namespace return an empty <code>ClientRectList</code> object and stop 61.463 - this algorithm.</p></li> 61.464 - 61.465 - <li><p>If the element does not have an associated CSS layout box and is 61.466 - in the <code>http://www.w3.org/2000/svg</code> namespace return a 61.467 - <code>ClientRectList</code> object containing a single 61.468 - <code>ClientRect</code> object that describes the bounding box of the 61.469 - element as defined by the SVG specification. 61.470 - <span data-anolis-ref>SVG</span> 61.471 - 61.472 - <li> 61.473 - <p>Return a <code>ClientRectList</code> object containing a list of 61.474 - <code>ClientRect</code> objects in content order describing the border 61.475 - boxes (including those with a height or width of zero) with the 61.476 - following constraints:</p> 61.477 - 61.478 - <ul> 61.479 - <li><p>If the element on which the method was invoked has a computed 61.480 - value for <code>display</code> property of <code>table</code> or 61.481 - <code>inline-table</code> include both the table box and the caption 61.482 - box, if any, but not the anonymous container box. 61.483 - <!--<span data-anolis-ref>CSS</span>--> 61.484 - 61.485 - <li><p>Replace each 61.486 - <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">anonymous 61.487 - block box</a> with its child box(es) and repeat this until no anonymous 61.488 - block boxes are left in the final list. 61.489 - <!--<span data-anolis-ref>CSS</span>--> 61.490 - </ul> 61.491 - </li> 61.492 - </ol> 61.493 - 61.494 - <p>The 61.495 - <dfn title=dom-Element-getBoundingClientRect><code>getBoundingClientRect()</code></dfn> 61.496 - method, when invoked, must return the result of the 61.497 - following algorithm:</p> 61.498 - 61.499 - <ol> 61.500 - <li><p>Let <var>list</var> be the result of invoking 61.501 - <code title=dom-Element-getClientRects>getClientRects()</code> on the 61.502 - same element this method was invoked on.</p></li> 61.503 - 61.504 - <li><p>If the <var>list</var> is empty return a <code>ClientRect</code> 61.505 - object whose <code title=dom-ClientRect-top>top</code>, 61.506 - <code title=dom-ClientRect-right>right</code>, 61.507 - <code title=dom-ClientRect-bottom>bottom</code> and 61.508 - <code title=dom-ClientRect-left>left</code> members are zero.</p></li> 61.509 - 61.510 - <li><p>Otherwise, return a <code>ClientRect</code> object describing the 61.511 - smallest rectangle that includes the first rectangle in <var>list</var> 61.512 - and all of the remaining rectangles of which the height or width is not 61.513 - zero.</p></li> 61.514 - </ol> 61.515 - 61.516 - <div class="example"> 61.517 - <p>The following snippet gets the dimensions of the first 61.518 - <code>div</code> element in a document:</p> 61.519 - 61.520 - <pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect(); 61.521 -var exampleWidth = example.width; 61.522 -var exampleHeight = example.height;</code></pre> 61.523 - </div> 61.524 - 61.525 - 61.526 <h3><code title>Element</code> Scrolling Members</h3> 61.527 61.528 <p>To <dfn>scroll an element into view</dfn>, optionally with an 61.529 @@ -751,7 +298,6 @@ 61.530 </li> 61.531 </ol> 61.532 61.533 - 61.534 <p>To <dfn>scroll an element</dfn> to <var title>x</var>,<var title>y</var> means to:</p> 61.535 61.536 <ol> 61.537 @@ -791,169 +337,6 @@ 61.538 </ol> 61.539 61.540 61.541 - <p>The 61.542 - <dfn title=dom-Element-scrollIntoView><code>scrollIntoView([<var>top</var>])</code></dfn> 61.543 - method must run these steps:</p> 61.544 - 61.545 - <ol> 61.546 - <li><p>If the element does not have any associated CSS layout box 61.547 - terminate these steps.</p></li> 61.548 - 61.549 - <li><p><span title="scroll an element into view">Scroll the element into view</span> 61.550 - with the <i title>align to top flag</i> set if <var title>top</var> 61.551 - is true or omitted.</p></li> 61.552 - </ol> 61.553 - 61.554 - 61.555 - <p>The <dfn title=dom-Element-scrollTop><code>scrollTop</code></dfn> 61.556 - attribute must return the result of running these 61.557 - steps:</p> 61.558 - 61.559 - <ol> 61.560 - <li><p>If the element does not have any associated CSS layout box or the 61.561 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 61.562 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> return zero and terminate these steps.</p></li> 61.563 - 61.564 - <li><p>If the element is the root element return the value of 61.565 - <code title="dom-Window-scrollY">scrollY</code>.</p></li> 61.566 - 61.567 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 61.568 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 61.569 - does not have any overflow, return the value of 61.570 - <code title=dom-Window-scrollY>scrollY</code>.</p></li> 61.571 - 61.572 - <li><p>Return the y-coordinate of the <span>content</span> at the 61.573 - alignment point with the top of the <span>content edge</span> of the 61.574 - element.</p></li> 61.575 - </ol> 61.576 - 61.577 - <p>When setting the <code title=dom-Element-scrollTop>scrollTop</code> 61.578 - attribute these steps must be run:</p> 61.579 - 61.580 - <ol> 61.581 - <li><p>Let <var title>y</var> be the given value.</p></li> 61.582 - 61.583 - <li><p>If the element does not have any associated CSS layout box, the 61.584 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 61.585 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, or the element has no overflow, terminate these 61.586 - steps.</p></li> 61.587 - 61.588 - <li><p>If the element is the root element invoke 61.589 - <code title=dom-Window-scroll>scroll()</code> with zero as first 61.590 - argument and <var title>y</var> as second.</p></li> 61.591 - 61.592 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 61.593 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 61.594 - does not have any vertical overflow, invoke 61.595 - <code title=dom-Window-scroll>scroll()</code> with 61.596 - <code title=dom-Window-scrollX>scrollX</code> as first 61.597 - argument and <var title>y</var> as second.</p></li> 61.598 - 61.599 - <li><p><span title="scroll an element">Scroll the element</span> to 61.600 - <code title=dom-Element-scrollLeft>scrollLeft</code>,<var title>y</var>. 61.601 - </ol> 61.602 - 61.603 - <p>The <dfn title=dom-Element-scrollLeft><code>scrollLeft</code></dfn> 61.604 - attribute must return the result of running these 61.605 - steps:</p> 61.606 - 61.607 - <ol> 61.608 - <li><p>If the element does not have any associated CSS layout box or the 61.609 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 61.610 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> return zero and terminate these steps.</p></li> 61.611 - 61.612 - <li><p>If the element is the root element return the value of 61.613 - <code title=dom-Window-scrollX>scrollX</code>.</p></li> 61.614 - 61.615 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 61.616 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 61.617 - does not have any overflow, return the value of 61.618 - <code title=dom-Window-scrollX>scrollX</code>.</p></li> 61.619 - 61.620 - <li><p>Return the x-coordinate of the <span>content</span> at the 61.621 - alignment point with the left of the <span>content edge</span> of the 61.622 - element.</p></li> 61.623 - </ol> 61.624 - 61.625 - <p>When setting the <code title=dom-Element-scrollLeft>scrollLeft</code> attribute these steps 61.626 - must be run:</p> 61.627 - 61.628 - <ol> 61.629 - <li><p>Let <var title>x</var> be the given value.</p></li> 61.630 - 61.631 - <li><p>If the element does not have any associated CSS layout box, the 61.632 - element is the root element and the <code data-anolis-spec=dom>Document</code> is in 61.633 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, or the element has no overflow, terminate these 61.634 - steps.</p></li> 61.635 - 61.636 - <li><p>If the element is the root element invoke 61.637 - <code title=dom-Window-scroll>scroll()</code> with 61.638 - <var title>x</var> as first argument and zero as second.</p></li> 61.639 - 61.640 - <li><p>If the element is <span>the HTML <code>body</code> element</span>, 61.641 - the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element 61.642 - does not have any vertical overflow, invoke 61.643 - <code title="dom-Window-scroll">scroll()</code> with 61.644 - <var title>x</var> as first argument and 61.645 - <code title=dom-Window-scrollY>scrollY</code> as second.</p></li> 61.646 - 61.647 - <li><p><span title="Scroll an element">Scroll the element</span> to 61.648 - <var title>x</var>,<code title=dom-Element-scrollTop>scrollTop</code>. 61.649 - </ol> 61.650 - 61.651 - <p>The <dfn title=dom-Element-scrollWidth><code>scrollWidth</code></dfn> 61.652 - attribute must return the result of running these 61.653 - steps:</p> 61.654 - 61.655 - <ol> 61.656 - <li><p>If the element does not have any associated CSS layout box return 61.657 - zero and terminate these steps.</p></li> 61.658 - 61.659 - <li><p>If the element is the root element and the 61.660 - <code data-anolis-spec=dom>Document</code> is not in 61.661 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 61.662 - return 61.663 - max(<span>document content</span> width, value of <code title=dom-Window-innerWidth>innerWidth</code>).</p></li> 61.664 - 61.665 - <li><p>If the element is <span>the HTML <code>body</code> element</span> 61.666 - and the <code data-anolis-spec=dom>Document</code> is in 61.667 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 61.668 - return 61.669 - max(<span>document content</span> width, value of <code title=dom-Window-innerWidth>innerWidth</code>).</p></li> 61.670 - 61.671 - <li><p>Return the computed value of the '<code>padding-left</code>' 61.672 - property, plus the computed value of the '<code>padding-right</code>', 61.673 - plus the <span>content</span> width of the element.</p></li> 61.674 - </ol> 61.675 - 61.676 - <p>The <dfn title=dom-Element-scrollHeight><code>scrollHeight</code></dfn> 61.677 - attribute must return the result of running these 61.678 - steps:</p> 61.679 - 61.680 - <ol> 61.681 - <li><p>If the element does not have any associated CSS layout box return 61.682 - zero and terminate these steps.</p></li> 61.683 - 61.684 - <li><p>If the element is the root element and the 61.685 - <code data-anolis-spec=dom>Document</code> is not in 61.686 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 61.687 - return 61.688 - max(<span>document content</span> height, value of <code title=dom-Window-innerHeight>innerHeight</code>).</p></li> 61.689 - 61.690 - <li><p>If the element is <span>the HTML <code>body</code> element</span> 61.691 - and the <code data-anolis-spec=dom>Document</code> is in 61.692 - <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> 61.693 - return 61.694 - max(<span>document content</span> height, value of <code title=dom-Window-innerHeight>innerHeight</code>).</p></li> 61.695 - 61.696 - <li><p>Return the computed value of the '<code>padding-top</code>' 61.697 - property, plus the computed value of the '<code>padding-bottom</code>', 61.698 - plus the <span>content</span> height of the element.</p></li> 61.699 - </ol> 61.700 - 61.701 - <!-- for inline boxes offsetWidth and offsetHeight are identical to offset* --> 61.702 - 61.703 - 61.704 <h3 id="client-attributes">The <code title>clientTop</code>, 61.705 <code title>clientLeft</code>, <code title>clientWidth</code>, and 61.706 <code title>clientHeight</code> attributes</h3> 61.707 @@ -967,392 +350,38 @@ 61.708 Otherwise, these attributes must behave as defined in 61.709 the remainder of this section.</p> 61.710 61.711 - <p>The <code title=dom-Element-clientTop>clientTop</code> attribute returns the computed value of the 61.712 - '<code>border-top-width</code>' property plus the width of any scrollbar 61.713 - rendered between the top <span>padding edge</span> and the top 61.714 - <span>border edge</span>.</p> 61.715 - 61.716 - <p>The <code title=dom-Element-clientLeft>clientLeft</code> attribute returns the computed 61.717 - value of the '<code>border-left-width</code>' property plus the width of 61.718 - any scrollbar rendered between the left <span>padding edge</span> and the 61.719 - left <span>border edge</span>. 61.720 - 61.721 - <p>The <code title=dom-Element-clientWidth>clientWidth</code> attribute returns the 61.722 - <span>viewport</span> width excluding the size of a rendered scroll bar 61.723 - (if any) if the element is the root element and the 61.724 - width of the <span>padding edge</span> (excluding the width of any 61.725 - rendered scrollbar between the <span>padding edge</span> and the 61.726 - <span>border edge</span>) otherwise.</p> 61.727 - 61.728 - <p>The <code title=dom-Element-clientHeight>clientHeight</code> attribute returns the 61.729 - <span>viewport</span> height excluding the size of a rendered scroll bar 61.730 - (if any) if the element is the root element and the 61.731 - height of the <span>padding edge</span> (excluding the width of any 61.732 - rendered scrollbar between the <span>padding edge</span> and the 61.733 - <span>border edge</span>) otherwise.</p> 61.734 - 61.735 - 61.736 - 61.737 <h2 id="extensions-to-the-htmlelement-interface">Extensions to the <code title>HTMLElement</code> Interface</h2> 61.738 61.739 - <pre class="idl">partial interface <span data-anolis-spec=html>HTMLElement</span> { 61.740 - readonly attribute Element <span title=dom-HTMLElement-offsetParent>offsetParent</span>; 61.741 - readonly attribute long <span title=dom-HTMLElement-offsetTop>offsetTop</span>; 61.742 - readonly attribute long <span title=dom-HTMLElement-offsetLeft>offsetLeft</span>; 61.743 - readonly attribute long <span title=dom-HTMLElement-offsetWidth>offsetWidth</span>; 61.744 - readonly attribute long <span title=dom-HTMLElement-offsetHeight>offsetHeight</span>; 61.745 -};</pre> 61.746 - 61.747 - 61.748 - <h3 id="offset-attributes">The <code title>offsetParent</code>, 61.749 - <code title>offsetTop</code>, <code title>offsetLeft</code>, 61.750 - <code title>offsetWidth</code>, and <code title>offsetHeight</code> 61.751 - attributes</h3> 61.752 - 61.753 - <p>The 61.754 - <dfn title=dom-HTMLElement-offsetParent><code>offsetParent</code></dfn> 61.755 - attribute must return the result of running these 61.756 - steps:</p> 61.757 - 61.758 - <ol> 61.759 - <li> 61.760 - <p>If any of the following holds true return null and terminate this 61.761 - algorithm:</p> 61.762 - 61.763 - <ul> 61.764 - <li>The element does not have an associated CSS layout box.</li> 61.765 - 61.766 - <li>The element is the root element.</li> 61.767 - 61.768 - <li>The element is 61.769 - <span>the HTML <code>body</code> element</span>.</li> 61.770 - 61.771 - <li>The element's computed value of the '<code>position</code>' 61.772 - property is <code>fixed</code>.</li> 61.773 - </ul> 61.774 - </li> 61.775 - 61.776 - <li> 61.777 - <p>Return the nearest ancestor element of the element for which at least 61.778 - one of the following is true and terminate this algorithm if such an 61.779 - ancestor is found:</p> 61.780 - 61.781 - <ul> 61.782 - <li>The computed value of the '<code>position</code>' property is not 61.783 - <code>static</code>.</li> 61.784 - 61.785 - <li>It is <span>the HTML <code>body</code> element</span>.</li> 61.786 - 61.787 - <li>The computed value of the '<code>position</code>' property of 61.788 - the element is <code>static</code> and the ancestor is one of the 61.789 - following <span data-anolis-spec=html title="HTML elements">HTML elements</span>: 61.790 - <code>td</code>, <code>th</code>, or <code>table</code>.</li> 61.791 - </ul> 61.792 - </li> 61.793 - 61.794 - <li><p>Return null.</p></li> 61.795 - </ol> 61.796 - 61.797 - <p>The <dfn title=dom-HTMLElement-offsetTop><code>offsetTop</code></dfn> 61.798 - attribute must return the result of running these 61.799 - steps:</p> 61.800 - 61.801 - <ol> 61.802 - <li><p>If the element is <span>the HTML <code>body</code> element</span> 61.803 - or does not have any associated CSS layout box return zero and terminate 61.804 - this algorithm.</p></li> 61.805 - 61.806 - <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the 61.807 - y-coordinate of the top <span>border edge</span> of the first 61.808 - CSS layout box associated with the element, relative to the 61.809 - <span>initial containing block</span> origin, and terminate this 61.810 - algorithm.</p></li> 61.811 - 61.812 - <li> 61.813 - <p>Return the result of subtracting the y-coordinate of the top 61.814 - <span>padding edge</span> of the first CSS layout box associated with 61.815 - the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the y-coordinate of 61.816 - the top <span>border edge</span> of the first CSS layout box associated 61.817 - with the element, relative to the <span>initial containing block</span> 61.818 - origin.</p> 61.819 - 61.820 - <p class="note">An inline element that consists of multiple line boxes 61.821 - will only have its first CSS layout box considered.</p> 61.822 - </li> 61.823 - </ol> 61.824 - 61.825 - <p>The <dfn title=dom-HTMLElement-offsetLeft><code>offsetLeft</code></dfn> 61.826 - attribute must return the result of running these steps:</p> 61.827 - 61.828 - <ol> 61.829 - <li><p>If the element is <span>the HTML <code>body</code> 61.830 - element</span> or does not have any associated CSS layout box return zero 61.831 - and terminate this algorithm.</p></li> 61.832 - 61.833 - <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the 61.834 - x-coordinate of the left <span>border edge</span> of the first 61.835 - CSS layout box associated with the element, relative to the 61.836 - <span>initial containing block</span> origin, and terminate this 61.837 - algorithm.</p></li> 61.838 - 61.839 - <li> 61.840 - <p>Return the result of subtracting the x-coordinate of the left 61.841 - <span>padding edge</span> of the first CSS layout box associated with 61.842 - the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the x-coordinate of 61.843 - the left <span>border edge</span> of the first CSS layout box associated 61.844 - with the element, relative to the <span>initial containing block</span> 61.845 - origin.</p> 61.846 - </li> 61.847 - </ol> 61.848 - 61.849 - <p>The 61.850 - <dfn title=dom-HTMLElement-offsetWidth><code>offsetWidth</code></dfn> 61.851 - attribute must return the result of running these steps:</p> 61.852 - 61.853 - <ol> 61.854 - <li><p>If the element does not have any associated CSS layout box return 61.855 - zero and terminate this algorithm.</p></li> 61.856 - 61.857 - <li><p>Return the <span>border edge</span> width of the first 61.858 - CSS layout box associated with the element.</p></li> 61.859 - </ol> 61.860 - 61.861 - <p>The 61.862 - <dfn title=dom-HTMLElement-offsetHeight><code>offsetHeight</code></dfn> 61.863 - attribute must return the result of running these steps:</p> 61.864 - 61.865 - <ol> 61.866 - <li><p>If the element does not have any associated CSS layout box return 61.867 - zero and terminate this algorithm.</p></li> 61.868 - 61.869 - <li><p>Return the <span>border edge</span> height of the first 61.870 - CSS layout box associated with the element.</p></li> 61.871 - </ol> 61.872 - 61.873 + <!--{@idl(HTMLElement)}--> 61.874 61.875 <h2 id="extensions-to-the-range-interface">Extensions to the <code title>Range</code> Interface</h2> 61.876 61.877 - <pre class="idl">partial interface <span data-anolis-spec=dom>Range</span> { 61.878 - <span>ClientRectList</span> <span title="dom-Range-getClientRects">getClientRects</span>(); 61.879 - <span>ClientRect</span> <span title="dom-Range-getBoundingClientRect">getBoundingClientRect</span>(); 61.880 -};</pre> 61.881 - 61.882 <p>The objects the methods described below return must 61.883 be static.</p> 61.884 61.885 - <p>The 61.886 - <dfn title=dom-Range-getClientRects><code>getClientRects()</code></dfn> 61.887 - method, when invoked, must return an empty 61.888 - <code>ClientRectList</code> object if the range is not in the document and 61.889 - otherwise a <code>ClientRectList</code> object containing a list of 61.890 - <code>ClientRect</code> objects in content order that matches the 61.891 - following constraints:</p> 61.892 + <!--{@idl(Range)}--> 61.893 61.894 - <ul> 61.895 - <li>For each element selected by the range, whose parent is not selected 61.896 - by the range, include the border boxes returned by invoking 61.897 - <code title=dom-Element-getClientRects>getClientRects()</code> on the 61.898 - element.</li> 61.899 - 61.900 - <li>For each <code>Text</code> node selected or partially selected by the 61.901 - range (including when the boundary-points are identical), include a 61.902 - <code>ClientRect</code> object (for the part that is selected, not the 61.903 - whole line box). The bounds of these <code>ClientRect</code> objects are 61.904 - computed using font metrics; thus, for horizontal writing, the vertical 61.905 - dimension of each box is determined by the font ascent and descent, and 61.906 - the horizontal dimension by the text advance width.</li> 61.907 - </ul> 61.908 - 61.909 - <p>The 61.910 - <dfn title=dom-Range-getBoundingClientRect><code>getBoundingClientRect()</code></dfn> 61.911 - method, when invoked, must return the result of the 61.912 - following algorithm:</p> 61.913 - 61.914 - <ol> 61.915 - <li><p>Let <var>list</var> be the result of invoking 61.916 - <code title=dom-Range-getClientRects>getClientRects()</code> on the 61.917 - same range this method was invoked on.</p></li> 61.918 - 61.919 - <li><p>If <var>list</var> is empty return a 61.920 - <code>ClientRect</code> object whose 61.921 - <code title=dom-ClientRect-top>top</code>, 61.922 - <code title=dom-ClientRect-right>right</code>, 61.923 - <code title=dom-ClientRect-bottom>bottom</code> and 61.924 - <code title=dom-ClientRect-left>left</code> members are zero.</p></li> 61.925 - 61.926 - <li><p>Otherwise, return a <code>ClientRect</code> object describing the 61.927 - smallest rectangle that includes the first rectangle in <var>list</var> 61.928 - and all of the remaining rectangles of which the height or width is not 61.929 - zero.</p></li> 61.930 - </ol> 61.931 - 61.932 - 61.933 - 61.934 - 61.935 + 61.936 <h2 id="extensions-to-the-mouseevent-interface">Extensions to the <code title>MouseEvent</code> Interface</h2> 61.937 61.938 - <pre class="idl">partial interface <span>MouseEvent</span> { 61.939 - readonly attribute long <span title=dom-MouseEvent-screenX>screenX</span>; 61.940 - readonly attribute long <span title=dom-MouseEvent-screenY>screenY</span>; 61.941 - 61.942 - readonly attribute long <span title=dom-MouseEvent-pageX>pageX</span>; 61.943 - readonly attribute long <span title=dom-MouseEvent-pageY>pageY</span>; 61.944 - 61.945 - readonly attribute long <span title=dom-MouseEvent-clientX>clientX</span>; 61.946 - readonly attribute long <span title=dom-MouseEvent-clientY>clientY</span>; 61.947 - readonly attribute long <span title=dom-MouseEvent-x>x</span>; 61.948 - readonly attribute long <span title=dom-MouseEvent-y>y</span>; 61.949 - 61.950 - readonly attribute long <span title=dom-MouseEvent-offsetX>offsetX</span>; 61.951 - readonly attribute long <span title=dom-MouseEvent-offsetY>offsetY</span>; 61.952 -};</pre> 61.953 - 61.954 - <p class="XXX">The object IDL fragment redefines some members. Can we 61.955 + <p class="issue">The object IDL fragment redefines some members. Can we 61.956 resolve this somehow?</p> 61.957 61.958 - <p>The 61.959 - <dfn title=dom-MouseEvent-screenX><code>screenX</code></dfn> 61.960 - attribute must return the x-coordinate of 61.961 - the position where the event occurred relative to the origin of the 61.962 - screen.</p> 61.963 - 61.964 - <p>The 61.965 - <dfn title=dom-MouseEvent-screenY><code>screenY</code></dfn> 61.966 - attribute must return the y-coordinate of 61.967 - the position where the event occurred relative to the origin of the 61.968 - screen.</p> 61.969 - 61.970 - <p>The <dfn title=dom-MouseEvent-pageX><code>pageX</code></dfn> attribute 61.971 - must return the horizontal coordinate of 61.972 - the position where the event occurred relative to 61.973 - the origin of the <span>initial containing block</span>.</p> 61.974 - 61.975 - <p>The <dfn title=dom-MouseEvent-pageY><code>pageY</code></dfn> attribute 61.976 - must return the y-coordinate of the 61.977 - position where the event occurred relative to the origin of the 61.978 - <span>initial containing block</span>.</p> 61.979 - 61.980 - <p>The <dfn title=dom-MouseEvent-clientX><code>clientX</code></dfn> 61.981 - attribute must return the x-coordinate of 61.982 - the position where the event occurred relative to the origin of the 61.983 - <span>viewport</span>.</p> 61.984 - 61.985 - <p>The <dfn title=dom-MouseEvent-clientY><code>clientY</code></dfn> 61.986 - attribute must return the y-coordinate of 61.987 - the position where the event occurred relative to the origin of the 61.988 - <span>viewport</span>.</p> 61.989 - 61.990 - <p>The <dfn title=dom-MouseEvent-x><code>x</code></dfn> 61.991 - attribute must return the value of 61.992 - <code title=dom-MouseEvent-clientX>clientX</code>.</p> 61.993 - 61.994 - <p>The <dfn title=dom-MouseEvent-y><code>y</code></dfn> 61.995 - attribute must return the value of 61.996 - <code title=dom-MouseEvent-clientY>clientY</code>.</p> 61.997 - 61.998 <!-- x/y do not match IE in the position:relative case but do match other 61.999 browsers --> 61.1000 61.1001 - 61.1002 - <p>The <dfn title=dom-MouseEvent-offsetX><code>offsetX</code></dfn> 61.1003 - attribute must return the x-coordinate of 61.1004 - the position where the event occurred relative to the origin of the 61.1005 - <span>padding edge</span> of the target node.</p> 61.1006 - 61.1007 - <p>The <dfn title=dom-MouseEvent-offsetY><code>offsetY</code></dfn> 61.1008 - attribute must return the y-coordinate of 61.1009 - the position where the event occurred relative to the origin of the 61.1010 - <span>padding edge</span> of the target node.</p> 61.1011 - 61.1012 - <!-- XXX layerX/layerY --> 61.1013 - 61.1014 - 61.1015 - 61.1016 + <!--{@idl(MouseEvent)}--> 61.1017 + 61.1018 <h2>Rectangles</h2> 61.1019 61.1020 61.1021 <h3 id="the-clientrectlist-interface">The <code title>ClientRectList</code> Interface</h3> 61.1022 61.1023 - <p>The <code>ClientRectList</code> object consists of an ordered list 61.1024 - of <code>ClientRect</code> objects.</p> 61.1025 - 61.1026 - <pre class="idl">interface <dfn>ClientRectList</dfn> { 61.1027 - readonly attribute unsigned long <span title="dom-ClientRectList-length">length</span>; 61.1028 - getter <span>ClientRect</span> <span title="dom-ClientRectList-item">item</span>(unsigned long <var title>index</var>); 61.1029 -};</pre> 61.1030 - 61.1031 - <p>The 61.1032 - <dfn title="dom-ClientRectList-length"><code>length</code></dfn> 61.1033 - attribute must return the total number of 61.1034 - <code>ClientRect</code> objects associated with the object.</p> 61.1035 - 61.1036 - <p>The 61.1037 - <dfn title="dom-ClientRectList-item"><code>item(<var>index</var>)</code></dfn> 61.1038 - method, when invoked, must raise an 61.1039 - <code>INDEX_SIZE_ERR</code> exception when <var title>index</var> is 61.1040 - greater than the number of <code>ClientRect</code> objects associated with 61.1041 - the object. Otherwise, the <code>ClientRect</code> object at 61.1042 - <var title>index</var> must be returned.</p> 61.1043 - 61.1044 + <!--{@idl(ClientRectList)}--> 61.1045 61.1046 <h3 id="the-clientrect-interface">The <code title>ClientRect</code> Interface</h3> 61.1047 61.1048 - <p>Objects implementing the <code>ClientRect</code> interface represent 61.1049 - a rectangular box. The type of box is specified by the method that returns 61.1050 - a <code>ClientRect</code> object.</p> 61.1051 - 61.1052 - <pre class="idl">interface <dfn>ClientRect</dfn> { 61.1053 - readonly attribute float <span title="dom-ClientRect-top">top</span>; 61.1054 - readonly attribute float <span title="dom-ClientRect-right">right</span>; 61.1055 - readonly attribute float <span title="dom-ClientRect-bottom">bottom</span>; 61.1056 - readonly attribute float <span title="dom-ClientRect-left">left</span>; 61.1057 - readonly attribute float <span title="dom-ClientRect-width">width</span>; 61.1058 - readonly attribute float <span title="dom-ClientRect-height">height</span>; 61.1059 -};</pre> 61.1060 - 61.1061 - <p>The 61.1062 - <dfn title="dom-ClientRect-top"><code>top</code></dfn> 61.1063 - attribute must return the y-coordinate, 61.1064 - relative to the <span>viewport</span> origin, of the top of the rectangle 61.1065 - box.</p> 61.1066 - 61.1067 - <p>The 61.1068 - <dfn title="dom-ClientRect-right"><code>right</code></dfn> 61.1069 - attribute must return the x-coordinate, 61.1070 - relative to the <span>viewport</span> origin, of the right of the 61.1071 - rectangle box.</p> 61.1072 - 61.1073 - <p>The 61.1074 - <dfn title="dom-ClientRect-bottom"><code>bottom</code></dfn> 61.1075 - attribute must return the y-coordinate, 61.1076 - relative to the <span>viewport</span> origin, of the bottom of the 61.1077 - rectangle box.</p> 61.1078 - 61.1079 - <p>The 61.1080 - <dfn title="dom-ClientRect-left"><code>left</code></dfn> 61.1081 - attribute must return the x-coordinate, 61.1082 - relative to the <span>viewport</span> origin, of the left of the rectangle 61.1083 - box.</p> 61.1084 - 61.1085 - <p>The 61.1086 - <dfn title="dom-ClientRect-width"><code>width</code></dfn> 61.1087 - attribute must return the width of the 61.1088 - rectangle box.</p> 61.1089 - 61.1090 - <p class="note">This is identical to 61.1091 - <code title="dom-ClientRect-right">right</code> minus 61.1092 - <code title="dom-ClientRect-left">left</code>.</p> 61.1093 - 61.1094 - <p>The 61.1095 - <dfn title="dom-ClientRect-height"><code>height</code></dfn> 61.1096 - attribute must return the height of the 61.1097 - rectangle box.</p> 61.1098 - 61.1099 - <p class="note">This is identical to 61.1100 - <code title="dom-ClientRect-bottom">bottom</code> minus 61.1101 - <code title="dom-ClientRect-top">top</code>.</p> 61.1102 - 61.1103 - 61.1104 + <!--{@idl(ClientRect)}--> 61.1105 61.1106 <h2 class=no-num>References</h2> 61.1107 <h3 class=no-num>Normative references</h3> 61.1108 @@ -1397,4 +426,3 @@ 61.1109 the Windows Internet Explorer browser.</p> 61.1110 </body> 61.1111 </html> 61.1112 -
62.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 62.2 +++ b/cssom-view/cssom-view.idl Wed Aug 08 09:06:37 2012 -0700 62.3 @@ -0,0 +1,12 @@ 62.4 +#include "CaretPosition.idl" 62.5 +#include "ClientRect.idl" 62.6 +#include "ClientRectList.idl" 62.7 +#include "Document.idl" 62.8 +#include "Element.idl" 62.9 +#include "HTMLElement.idl" 62.10 +#include "MediaQueryList.idl" 62.11 +#include "MediaQueryListListener.idl" 62.12 +#include "MouseEvent.idl" 62.13 +#include "Range.idl" 62.14 +#include "Screen.idl" 62.15 +#include "Window.idl"
63.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 63.2 +++ b/cssom-view/cssom.css Wed Aug 08 09:06:37 2012 -0700 63.3 @@ -0,0 +1,316 @@ 63.4 +/* --- OLD --- 63.5 +.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc } 63.6 +.example table code { color:inherit } 63.7 +td, th { padding:.1em } 63.8 +.note { margin-left:2em; color:green; font-style:italic; font-weight:bold } 63.9 +p.note::before { content:"Note: " } 63.10 +.XXX { padding:.5em; border:solid red } 63.11 +p.XXX::before { content:"Issue: " } 63.12 +dl.switch { padding-left:2em } 63.13 +dl.switch > dt { text-indent:-1.5em } 63.14 +dl.switch > dt:before { content:'\21AA'; padding:0 0.5em 0 0; display:inline-block; width:1em; text-align:right; line-height:0.5em } 63.15 +code { color:orangered } 63.16 +code :link, code :visited { color:inherit } 63.17 +*/ 63.18 + 63.19 +/* --- INLINES --- */ 63.20 +em.rfc2119 { 63.21 + text-transform: lowercase; 63.22 + font-variant: small-caps; 63.23 + font-style: normal; 63.24 + color: #900; 63.25 +} 63.26 + 63.27 +h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym, 63.28 +h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr { 63.29 + border: none; 63.30 +} 63.31 + 63.32 +dfn { 63.33 + font-weight: bold; 63.34 +} 63.35 + 63.36 +a.internalDFN { 63.37 + color: inherit; 63.38 + border-bottom: 1px solid #99c; 63.39 + text-decoration: none; 63.40 +} 63.41 + 63.42 +a.externalDFN { 63.43 + color: inherit; 63.44 + border-bottom: 1px dotted #ccc; 63.45 + text-decoration: none; 63.46 +} 63.47 + 63.48 +a.bibref { 63.49 + text-decoration: none; 63.50 +} 63.51 + 63.52 +code { 63.53 + color: #ff4500; 63.54 +} 63.55 + 63.56 + 63.57 +/* --- EXAMPLES --- */ 63.58 +pre.example { 63.59 + border-top: 1px solid #ff4500; 63.60 + border-bottom: 1px solid #ff4500; 63.61 + padding: 1em; 63.62 + margin-top: 1em; 63.63 +} 63.64 + 63.65 +pre.example::before { 63.66 + content: "Example"; 63.67 + display: block; 63.68 + width: 150px; 63.69 + background: #ff4500; 63.70 + color: #fff; 63.71 + font-family: initial; 63.72 + padding: 3px; 63.73 + font-weight: bold; 63.74 + margin: -1em 0 1em -1em; 63.75 +} 63.76 + 63.77 +/* --- EDITORIAL NOTES --- */ 63.78 +.issue { 63.79 + padding: 1em; 63.80 + margin: 1em 0em 0em; 63.81 + border: 1px solid #f00; 63.82 + background: #ffc; 63.83 +} 63.84 + 63.85 +.issue::before { 63.86 + content: "Issue"; 63.87 + display: block; 63.88 + width: 150px; 63.89 + margin: -1.5em 0 0.5em 0; 63.90 + font-weight: bold; 63.91 + border: 1px solid #f00; 63.92 + background: #fff; 63.93 + padding: 3px 1em; 63.94 +} 63.95 + 63.96 +.note { 63.97 + margin: 1em 0em 0em; 63.98 + padding: 1em; 63.99 + border: 2px solid #cff6d9; 63.100 + background: #e2fff0; 63.101 +} 63.102 + 63.103 +.note::before { 63.104 + content: "Note"; 63.105 + display: block; 63.106 + width: 150px; 63.107 + margin: -1.5em 0 0.5em 0; 63.108 + font-weight: bold; 63.109 + border: 1px solid #cff6d9; 63.110 + background: #fff; 63.111 + padding: 3px 1em; 63.112 +} 63.113 + 63.114 +/* --- WEB IDL --- */ 63.115 + 63.116 +pre.idl { 63.117 + border-top: 1px solid #90b8de; 63.118 + border-bottom: 1px solid #90b8de; 63.119 + padding: 1em; 63.120 + line-height: 120%; 63.121 +} 63.122 + 63.123 +pre.idl::before { 63.124 + content: "WebIDL"; 63.125 + display: block; 63.126 + width: 150px; 63.127 + background: #90b8de; 63.128 + color: #fff; 63.129 + font-family: initial; 63.130 + padding: 3px; 63.131 + font-weight: bold; 63.132 + margin: -1em 0 1em -1em; 63.133 +} 63.134 + 63.135 +.idlType { 63.136 + color: #ff4500; 63.137 + font-weight: bold; 63.138 + text-decoration: none; 63.139 +} 63.140 + 63.141 +/*.idlModule*/ 63.142 +/*.idlModuleID*/ 63.143 +/*.idlInterface*/ 63.144 +.idlInterfaceID, .idlDictionaryID { 63.145 + font-weight: bold; 63.146 + color: #005a9c; 63.147 +} 63.148 + 63.149 +.idlSuperclass { 63.150 + font-style: italic; 63.151 + color: #005a9c; 63.152 +} 63.153 + 63.154 +/*.idlAttribute*/ 63.155 +.idlAttrType, .idlFieldType, .idlMemberType { 63.156 + color: #005a9c; 63.157 +} 63.158 +.idlAttrName, .idlFieldName, .idlMemberName { 63.159 + color: #ff4500; 63.160 +} 63.161 +.idlAttrName a, .idlFieldName a, .idlMemberName a { 63.162 + color: #ff4500; 63.163 + border-bottom: 1px dotted #ff4500; 63.164 + text-decoration: none; 63.165 +} 63.166 + 63.167 +/*.idlMethod*/ 63.168 +.idlMethType { 63.169 + color: #005a9c; 63.170 +} 63.171 +.idlMethName { 63.172 + color: #ff4500; 63.173 +} 63.174 +.idlMethName a { 63.175 + color: #ff4500; 63.176 + border-bottom: 1px dotted #ff4500; 63.177 + text-decoration: none; 63.178 +} 63.179 + 63.180 +/*.idlParam*/ 63.181 +.idlParamType { 63.182 + color: #005a9c; 63.183 +} 63.184 +.idlParamName { 63.185 + font-style: italic; 63.186 +} 63.187 + 63.188 +.extAttr { 63.189 + color: #666; 63.190 +} 63.191 + 63.192 +/*.idlConst*/ 63.193 +.idlConstType { 63.194 + color: #005a9c; 63.195 +} 63.196 +.idlConstName { 63.197 + color: #ff4500; 63.198 +} 63.199 +.idlConstName a { 63.200 + color: #ff4500; 63.201 + border-bottom: 1px dotted #ff4500; 63.202 + text-decoration: none; 63.203 +} 63.204 + 63.205 +/*.idlException*/ 63.206 +.idlExceptionID { 63.207 + font-weight: bold; 63.208 + color: #c00; 63.209 +} 63.210 + 63.211 +.idlTypedefID, .idlTypedefType { 63.212 + color: #005a9c; 63.213 +} 63.214 + 63.215 +.idlRaises, .idlRaises a.idlType, .idlRaises a.idlType code, .excName a, .excName a code { 63.216 + color: #c00; 63.217 + font-weight: normal; 63.218 +} 63.219 + 63.220 +.excName a { 63.221 + font-family: monospace; 63.222 +} 63.223 + 63.224 +.idlRaises a.idlType, .excName a.idlType { 63.225 + border-bottom: 1px dotted #c00; 63.226 +} 63.227 + 63.228 +.excGetSetTrue, .excGetSetFalse, .prmNullTrue, .prmNullFalse, .prmOptTrue, .prmOptFalse { 63.229 + width: 45px; 63.230 + text-align: center; 63.231 +} 63.232 +.excGetSetTrue, .prmNullTrue, .prmOptTrue { color: #0c0; } 63.233 +.excGetSetFalse, .prmNullFalse, .prmOptFalse { color: #c00; } 63.234 + 63.235 +.idlImplements a { 63.236 + font-weight: bold; 63.237 +} 63.238 + 63.239 +dl.members, dl.attributes, dl.methods, dl.constants, dl.fields, dl.dictionary-members { 63.240 + margin-left: 2em; 63.241 +} 63.242 + 63.243 +.members dt, .attributes dt, .methods dt, .constants dt, .fields dt, .dictionary-members dt { 63.244 + font-weight: normal; 63.245 +} 63.246 + 63.247 +.members dt code, .attributes dt code, .methods dt code, .constants dt code, .fields dt code, .dictionary-members dt code { 63.248 + font-weight: bold; 63.249 + color: #000; 63.250 + font-family: monospace; 63.251 +} 63.252 + 63.253 +.members dt.attribute code, .members dt.field code, .members dt.dictionary-member code, .attributes dt code, .fields dt code, .dictionary-members dt code { 63.254 + background: #ffffd2; 63.255 +} 63.256 + 63.257 +.attributes dt .idlAttrType code, .fields dt .idlFieldType code, .dictionary-members dt .idlMemberType code { 63.258 + color: #005a9c; 63.259 + background: transparent; 63.260 + font-family: inherit; 63.261 + font-weight: normal; 63.262 + font-style: italic; 63.263 +} 63.264 + 63.265 +.members dt.method code, .methods dt code { 63.266 + background: #d9e6f8; 63.267 +} 63.268 + 63.269 +.members dt.constant code, .constants dt code { 63.270 + background: #ddffd2; 63.271 +} 63.272 + 63.273 +.attributes dd, .methods dd, .constants dd, .fields dd, .dictionary-members dd { 63.274 + margin-bottom: 1em; 63.275 +} 63.276 + 63.277 +table.parameters, table.exceptions { 63.278 + border-spacing: 0; 63.279 + border-collapse: collapse; 63.280 + margin: 0.5em 0; 63.281 + width: 100%; 63.282 +} 63.283 +table.parameters { border-bottom: 1px solid #90b8de; } 63.284 +table.exceptions { border-bottom: 1px solid #deb890; } 63.285 + 63.286 +.parameters th, .exceptions th { 63.287 + color: #fff; 63.288 + padding: 3px 5px; 63.289 + text-align: left; 63.290 + font-family: initial; 63.291 + font-weight: normal; 63.292 + text-shadow: #666 1px 1px 0; 63.293 +} 63.294 +.parameters th { background: #90b8de; } 63.295 +.exceptions th { background: #deb890; } 63.296 + 63.297 +.parameters td, .exceptions td { 63.298 + padding: 3px 10px; 63.299 + border-top: 1px solid #ddd; 63.300 + vertical-align: top; 63.301 +} 63.302 + 63.303 +.parameters tr:first-child td, .exceptions tr:first-child td { 63.304 + border-top: none; 63.305 +} 63.306 + 63.307 +.parameters td.prmName, .exceptions td.excName, .exceptions td.excCodeName { 63.308 + width: 100px; 63.309 +} 63.310 + 63.311 +.parameters td.prmType { 63.312 + width: 120px; 63.313 +} 63.314 + 63.315 +table.exceptions table { 63.316 + border-spacing: 0; 63.317 + border-collapse: collapse; 63.318 + width: 100%; 63.319 +}
64.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 64.2 +++ b/cssom-view/idl/CaretPosition.idl Wed Aug 08 09:06:37 2012 -0700 64.3 @@ -0,0 +1,18 @@ 64.4 + 64.5 +[Documentation= 64.6 + "<p>A <dfn>caret position</dfn> gives the position of a text insertion point indicator. It always has an associated\ 64.7 + <dfn>caret node</dfn>, <dfn>caret offset</dfn>, and <dfn>caret range</dfn>. It is represented by a {@name} {@type}.</p>" 64.8 +] 64.9 +interface CaretPosition { 64.10 + 64.11 + [Documentation= 64.12 + "<p>The {@name} {@type} must return the <span>caret node</span>.</p>" 64.13 + ] 64.14 + readonly attribute Node offsetNode; 64.15 + 64.16 + [Documentation= 64.17 + "<p>The {@name} {@type} must return the <span>caret offset</span>.</p>" 64.18 + ] 64.19 + readonly attribute unsigned long offset; 64.20 + 64.21 +};
65.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 65.2 +++ b/cssom-view/idl/ClientRect.idl Wed Aug 08 09:06:37 2012 -0700 65.3 @@ -0,0 +1,39 @@ 65.4 + 65.5 +[Documentation= 65.6 + "<p>Objects implementing the {@name} {@type} represent a rectangular box. The type of box is specified by the method that returns a {@name} {@type}.</p>" 65.7 +] 65.8 +interface ClientRect { 65.9 + 65.10 + [Documentation= 65.11 + "<p>The {@name} {@type} must return the y-coordinate, relative to the <span>viewport</span> origin, of the top of the rectangle box.</p>" 65.12 + ] 65.13 + readonly attribute float top; 65.14 + 65.15 + [Documentation= 65.16 + "<p>The {@name} {@type} must return the x-coordinate, relative to the <span>viewport</span> origin, of the right of the rectangle box.</p>" 65.17 + ] 65.18 + readonly attribute float right; 65.19 + 65.20 + [Documentation= 65.21 + "<p>The {@name} {@type} must return the y-coordinate, relative to the <span>viewport</span> origin, of the bottom of the rectangle box.</p>" 65.22 + ] 65.23 + readonly attribute float bottom; 65.24 + 65.25 + [Documentation= 65.26 + "<p>The {@name} {@type} must return the x-coordinate, relative to the <span>viewport</span> origin, of the left of the rectangle box.</p>" 65.27 + ] 65.28 + readonly attribute float left; 65.29 + 65.30 + [Documentation= 65.31 + "<p>The {@name} {@type} must return the width of the rectangle box.</p>\ 65.32 + <p class='note'>This is identical to <code title='dom-ClientRect-right'>right</code> minus <code title='dom-ClientRect-left'>left</code>.</p>" 65.33 + ] 65.34 + readonly attribute float width; 65.35 + 65.36 + [Documentation= 65.37 + "<p>The {@name} {@type} must return the height of the rectangle box.</p>\ 65.38 + <p class='note'>This is identical to <code title='dom-ClientRect-bottom'>bottom</code> minus <code title='dom-ClientRect-top'>top</code>.</p>" 65.39 + ] 65.40 + readonly attribute float height; 65.41 + 65.42 +};
66.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 66.2 +++ b/cssom-view/idl/ClientRectList.idl Wed Aug 08 09:06:37 2012 -0700 66.3 @@ -0,0 +1,19 @@ 66.4 + 66.5 +[Documentation= 66.6 + "<p>The {@name} {@type} consists of an ordered list of <code>ClientRect</code> objects.</p>" 66.7 +] 66.8 +interface ClientRectList { 66.9 + 66.10 + [Documentation= 66.11 + "<p>The {@name} {@type} must return the total number of <code>ClientRect</code> objects associated with the object.</p>" 66.12 + ] 66.13 + readonly attribute unsigned long length; 66.14 + 66.15 + [Documentation= 66.16 + "<p>The {@name} {@type}, when invoked, must raise an <code>INDEX_SIZE_ERR</code> exception when <var title>index</var> is\ 66.17 + greater than the number of <code>ClientRect</code> objects associated with the object. Otherwise, the <code>ClientRect</code> object at\ 66.18 + <var title>index</var> must be returned.</p>" 66.19 + ] 66.20 + getter ClientRect item(unsigned long index); 66.21 + 66.22 +};
67.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 67.2 +++ b/cssom-view/idl/Document.idl Wed Aug 08 09:06:37 2012 -0700 67.3 @@ -0,0 +1,64 @@ 67.4 + 67.5 +partial interface Document { 67.6 + 67.7 + [Documentation= 67.8 + "<p>The {@name} {@type} must return the element at coordinates <var>x</var>,<var>y</var> in the <span>viewport</span>. The element to be returned is determined\ 67.9 + through hit testing. If either argument is negative, <var title>x</var> is greater than the <span>viewport</span> width excluding the size of a rendered scroll\ 67.10 + bar (if any), or <var title>y</var> is greater than the <span>viewport</span> height excluding the size of a rendered scroll bar (if any), the method must\ 67.11 + return null. If there is no element at the given position the method must return the root element, if any, or null otherwise.</p>" 67.12 + ] 67.13 + Element? elementFromPoint(float x, float y); 67.14 + 67.15 + [Documentation= 67.16 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 67.17 + <ol>\ 67.18 + <li><p>If either argument is negative, <var title>x</var> is greater\ 67.19 + than the <span>viewport</span> width excluding the size of a rendered\ 67.20 + scroll bar (if any), <var title>y</var> is greather than the\ 67.21 + <span>viewport</span> height excluding the size of a rendered scroll bar\ 67.22 + (if any) return null.</p></li>\ 67.23 + <li><p>If at the coordinates <var title>x</var>,<var title>y</var>\ 67.24 + in the <span>viewport</span> no text insertion point indicator would have\ 67.25 + been inserted return null.</p></li>\ 67.26 + <li>\ 67.27 + <p>If at the coordinates <var title>x</var>,<var title>y</var>\ 67.28 + in the <span>viewport</span> a text insertion point indicator would have\ 67.29 + been inserted in a text entry widget which is also a replaced element\ 67.30 + return a <span>caret position</span> with its properties set as\ 67.31 + follows:</p>\ 67.32 + <dl>\ 67.33 + <dt><span>caret node</span></dt>\ 67.34 + <dd><p>The node corresponding to the text entry widget.</p></dd>\ 67.35 + <dt><span>caret offset</span></dt>\ 67.36 + <dd><p>The amount of 16-bit units to the left of where the\ 67.37 + text insertion point indicator would have inserted.</p></dd>\ 67.38 + <dt><span>caret range</span></dt>\ 67.39 + <dd><p>null</p></dd>\ 67.40 + </dl>\ 67.41 + </li>\ 67.42 + <li>\ 67.43 + <p>Otherwise, return a <span>caret position</span> where the\ 67.44 + <span>caret range</span> is a collapsed\ 67.45 + <code data-anolis-spec=dom>Range</code> object for the position\ 67.46 + where the text insertion point indicator would have been inserted and\ 67.47 + the other properties are set as follows:</p>\ 67.48 + <dl>\ 67.49 + <dt><span>caret node</span></dt>\ 67.50 + <dd><p>The <code data-anolis-spec=dom title=dom-Range-startContainer>startContainer</code>\ 67.51 + of the <span>caret range</span>.</p></dd>\ 67.52 + <dt><span>caret offset</span></dt>\ 67.53 + <dd><p>The <code data-anolis-spec=dom title=dom-Range-startOffset>startOffset</code> of\ 67.54 + the <span>caret range</span>.</p>\ 67.55 + </dl>\ 67.56 + </li>\ 67.57 + </ol>\ 67.58 + <p class='note'>The specifics of hit testing are out of scope of this\ 67.59 + specification and therefore the exact details of\ 67.60 + <code title=dom-Document-elementFromPoint>elementFromPoint()</code> and\ 67.61 + <code title=dom-Document-caretPositionFromPoint>caretPositionFromPoint()</code>\ 67.62 + are therefore too. Hit testing will hopefully be defined in a future\ 67.63 + revision of CSS or HTML.</p>" 67.64 + ] 67.65 + CaretPosition? caretPositionFromPoint(float x, float y); 67.66 + 67.67 +};
68.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 68.2 +++ b/cssom-view/idl/Element.idl Wed Aug 08 09:06:37 2012 -0700 68.3 @@ -0,0 +1,225 @@ 68.4 + 68.5 +partial interface Element { 68.6 + 68.7 + [Documentation= 68.8 + "<p>The {@name} {@type}, when invoked, must return the result of the following algorithm:</p>\ 68.9 + <ol>\ 68.10 + <li><p>If the element on which it was invoked does not have an associated\ 68.11 + CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code>\ 68.12 + namespace return an empty <code>ClientRectList</code> object and stop\ 68.13 + this algorithm.</p></li>\ 68.14 + <li><p>If the element does not have an associated CSS layout box and is\ 68.15 + in the <code>http://www.w3.org/2000/svg</code> namespace return a\ 68.16 + <code>ClientRectList</code> object containing a single\ 68.17 + <code>ClientRect</code> object that describes the bounding box of the\ 68.18 + element as defined by the SVG specification.\ 68.19 + <span data-anolis-ref>SVG</span></li>\ 68.20 + <li>\ 68.21 + <p>Return a <code>ClientRectList</code> object containing a list of\ 68.22 + <code>ClientRect</code> objects in content order describing the border\ 68.23 + boxes (including those with a height or width of zero) with the\ 68.24 + following constraints:</p>\ 68.25 + <ul>\ 68.26 + <li><p>If the element on which the method was invoked has a computed\ 68.27 + value for <code>display</code> property of <code>table</code> or\ 68.28 + <code>inline-table</code> include both the table box and the caption\ 68.29 + box, if any, but not the anonymous container box.</li>\ 68.30 + <li><p>Replace each\ 68.31 + <a href='http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level'>anonymous\ 68.32 + block box</a> with its child box(es) and repeat this until no anonymous\ 68.33 + block boxes are left in the final list.</li>\ 68.34 + </ul>\ 68.35 + </li>\ 68.36 + </ol>" 68.37 + ] 68.38 + ClientRectList getClientRects(); 68.39 + 68.40 + [Documentation= 68.41 + "<p>The {@name} {@type}, when invoked, must return the result of the following algorithm:</p>\ 68.42 + <ol>\ 68.43 + <li><p>Let <var>list</var> be the result of invoking\ 68.44 + <code title=dom-Element-getClientRects>getClientRects()</code> on the\ 68.45 + same element this method was invoked on.</p></li>\ 68.46 + <li><p>If the <var>list</var> is empty return a <code>ClientRect</code>\ 68.47 + object whose <code title=dom-ClientRect-top>top</code>,\ 68.48 + <code title=dom-ClientRect-right>right</code>,\ 68.49 + <code title=dom-ClientRect-bottom>bottom</code> and\ 68.50 + <code title=dom-ClientRect-left>left</code> members are zero.</p></li>\ 68.51 + <li><p>Otherwise, return a <code>ClientRect</code> object describing the\ 68.52 + smallest rectangle that includes the first rectangle in <var>list</var>\ 68.53 + and all of the remaining rectangles of which the height or width is not\ 68.54 + zero.</p></li>\ 68.55 + </ol>\ 68.56 + <div class='example'>\ 68.57 + <p>The following snippet gets the dimensions of the first\ 68.58 + <code>div</code> element in a document:</p>\ 68.59 + <pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
\ 68.60 +var exampleWidth = example.width;
\ 68.61 +var exampleHeight = example.height;</code></pre>\ 68.62 + </div>" 68.63 + ] 68.64 + ClientRect getBoundingClientRect(); 68.65 + 68.66 + [Documentation= 68.67 + "<p>The must run these steps:</p>\ 68.68 + <ol>\ 68.69 + <li><p>If the element does not have any associated CSS layout box terminate these steps.</p></li>\ 68.70 + <li><p><span title='scroll an element into view'>Scroll the element into view</span> with the\ 68.71 + <i title>align to top flag</i> set if <var title>top</var> is true or omitted.</p></li>\ 68.72 + </ol>" 68.73 + ] 68.74 + void scrollIntoView(optional boolean top); 68.75 + 68.76 + [Documentation= 68.77 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 68.78 + <ol>\ 68.79 + <li><p>If the element does not have any associated CSS layout box or the\ 68.80 + element is the root element and the <code data-anolis-spec=dom>Document</code> is in\ 68.81 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> return zero and terminate these steps.</p></li>\ 68.82 + <li><p>If the element is the root element return the value of\ 68.83 + <code title='dom-Window-scrollY'>scrollY</code>.</p></li>\ 68.84 + <li><p>If the element is <span>the HTML <code>body</code> element</span>,\ 68.85 + the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element\ 68.86 + does not have any overflow, return the value of\ 68.87 + <code title=dom-Window-scrollY>scrollY</code>.</p></li>\ 68.88 + <li><p>Return the y-coordinate of the <span>content</span> at the\ 68.89 + alignment point with the top of the <span>content edge</span> of the\ 68.90 + element.</p></li>\ 68.91 + </ol>\ 68.92 + <p>When setting the {@name} {@type} these steps must be run:</p>\ 68.93 + <ol>\ 68.94 + <li><p>Let <var title>y</var> be the given value.</p></li>\ 68.95 + <li><p>If the element does not have any associated CSS layout box, the\ 68.96 + element is the root element and the <code data-anolis-spec=dom>Document</code> is in\ 68.97 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, or the element has no overflow, terminate these\ 68.98 + steps.</p></li>\ 68.99 + <li><p>If the element is the root element invoke\ 68.100 + <code title=dom-Window-scroll>scroll()</code> with zero as first\ 68.101 + argument and <var title>y</var> as second.</p></li>\ 68.102 + <li><p>If the element is <span>the HTML <code>body</code> element</span>,\ 68.103 + the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element\ 68.104 + does not have any vertical overflow, invoke\ 68.105 + <code title=dom-Window-scroll>scroll()</code> with\ 68.106 + <code title=dom-Window-scrollX>scrollX</code> as first\ 68.107 + argument and <var title>y</var> as second.</p></li>\ 68.108 + <li><p><span title='scroll an element'>Scroll the element</span> to\ 68.109 + <code title=dom-Element-scrollLeft>scrollLeft</code>,<var title>y</var>.\ 68.110 + </ol>" 68.111 + ] 68.112 + attribute long scrollTop; 68.113 + 68.114 + [Documentation= 68.115 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 68.116 + <ol>\ 68.117 + <li><p>If the element does not have any associated CSS layout box or the\ 68.118 + element is the root element and the <code data-anolis-spec=dom>Document</code> is in\ 68.119 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span> return zero and terminate these steps.</p></li>\ 68.120 + <li><p>If the element is the root element return the value of\ 68.121 + <code title=dom-Window-scrollX>scrollX</code>.</p></li>\ 68.122 + <li><p>If the element is <span>the HTML <code>body</code> element</span>,\ 68.123 + the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element\ 68.124 + does not have any overflow, return the value of\ 68.125 + <code title=dom-Window-scrollX>scrollX</code>.</p></li>\ 68.126 + <li><p>Return the x-coordinate of the <span>content</span> at the\ 68.127 + alignment point with the left of the <span>content edge</span> of the\ 68.128 + element.</p></li>\ 68.129 + </ol>\ 68.130 + <p>When setting the {@name} {@type} these steps must be run:</p>\ 68.131 + <ol>\ 68.132 + <li><p>Let <var title>x</var> be the given value.</p></li>\ 68.133 + <li><p>If the element does not have any associated CSS layout box, the\ 68.134 + element is the root element and the <code data-anolis-spec=dom>Document</code> is in\ 68.135 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, or the element has no overflow, terminate these\ 68.136 + steps.</p></li>\ 68.137 + <li><p>If the element is the root element invoke\ 68.138 + <code title=dom-Window-scroll>scroll()</code> with\ 68.139 + <var title>x</var> as first argument and zero as second.</p></li>\ 68.140 + <li><p>If the element is <span>the HTML <code>body</code> element</span>,\ 68.141 + the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>, and the element\ 68.142 + does not have any vertical overflow, invoke\ 68.143 + <code title='dom-Window-scroll'>scroll()</code> with\ 68.144 + <var title>x</var> as first argument and\ 68.145 + <code title=dom-Window-scrollY>scrollY</code> as second.</p></li>\ 68.146 + <li><p><span title='Scroll an element'>Scroll the element</span> to\ 68.147 + <var title>x</var>,<code title=dom-Element-scrollTop>scrollTop</code>.\ 68.148 + </ol>" 68.149 + ] 68.150 + attribute long scrollLeft; 68.151 + 68.152 + [Documentation= 68.153 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 68.154 + <ol>\ 68.155 + <li><p>If the element does not have any associated CSS layout box return\ 68.156 + zero and terminate these steps.</p></li>\ 68.157 + <li><p>If the element is the root element and the\ 68.158 + <code data-anolis-spec=dom>Document</code> is not in\ 68.159 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>\ 68.160 + return max(<span>document content</span> width, value of <code title=dom-Window-innerWidth>innerWidth</code>).</p></li>\ 68.161 + <li><p>If the element is <span>the HTML <code>body</code> element</span>\ 68.162 + and the <code data-anolis-spec=dom>Document</code> is in\ 68.163 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>\ 68.164 + return max(<span>document content</span> width, value of <code title=dom-Window-innerWidth>innerWidth</code>).</p></li>\ 68.165 + <li><p>Return the computed value of the '<code>padding-left</code>'\ 68.166 + property, plus the computed value of the '<code>padding-right</code>',\ 68.167 + plus the <span>content</span> width of the element.</p></li>\ 68.168 + </ol>" 68.169 + ] 68.170 + readonly attribute long scrollWidth; 68.171 + 68.172 + [Documentation= 68.173 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 68.174 + <ol>\ 68.175 + <li><p>If the element does not have any associated CSS layout box return\ 68.176 + zero and terminate these steps.</p></li>\ 68.177 + <li><p>If the element is the root element and the\ 68.178 + <code data-anolis-spec=dom>Document</code> is not in\ 68.179 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>\ 68.180 + return max(<span>document content</span> height, value of <code title=dom-Window-innerHeight>innerHeight</code>).</p></li>\ 68.181 + <li><p>If the element is <span>the HTML <code>body</code> element</span>\ 68.182 + and the <code data-anolis-spec=dom>Document</code> is in\ 68.183 + <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>\ 68.184 + return max(<span>document content</span> height, value of <code title=dom-Window-innerHeight>innerHeight</code>).</p></li>\ 68.185 + <li><p>Return the computed value of the '<code>padding-top</code>'\ 68.186 + property, plus the computed value of the '<code>padding-bottom</code>',\ 68.187 + plus the <span>content</span> height of the element.</p></li>\ 68.188 + </ol>" 68.189 + ] 68.190 + readonly attribute long scrollHeight; 68.191 + 68.192 + [Documentation= 68.193 + "<p>The {@name} {@type} returns the computed value of the\ 68.194 + '<code>border-top-width</code>' property plus the width of any scrollbar\ 68.195 + rendered between the top <span>padding edge</span> and the top\ 68.196 + <span>border edge</span>.</p>" 68.197 + ] 68.198 + readonly attribute long clientTop; 68.199 + 68.200 + [Documentation= 68.201 + "<p>The {@name} {@type} returns the computed value of the\ 68.202 + '<code>border-left-width</code>' property plus the width of any scrollbar\ 68.203 + rendered between the left <span>padding edge</span> and the left\ 68.204 + <span>border edge</span>.</p>" 68.205 + ] 68.206 + readonly attribute long clientLeft; 68.207 + 68.208 + [Documentation= 68.209 + "<p>The {@name} {@type} returns the\ 68.210 + <span>viewport</span> width excluding the size of a rendered scroll bar\ 68.211 + (if any) if the element is the root element and the\ 68.212 + width of the <span>padding edge</span> (excluding the width of any\ 68.213 + rendered scrollbar between the <span>padding edge</span> and the\ 68.214 + <span>border edge</span>) otherwise.</p>" 68.215 + ] 68.216 + readonly attribute long clientWidth; 68.217 + 68.218 + [Documentation= 68.219 + "<p>The {@name} {@type} returns the\ 68.220 + <span>viewport</span> height excluding the size of a rendered scroll bar\ 68.221 + (if any) if the element is the root element and the\ 68.222 + height of the <span>padding edge</span> (excluding the height of any\ 68.223 + rendered scrollbar between the <span>padding edge</span> and the\ 68.224 + <span>border edge</span>) otherwise.</p>" 68.225 + ] 68.226 + readonly attribute long clientHeight; 68.227 + 68.228 +};
69.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 69.2 +++ b/cssom-view/idl/HTMLElement.idl Wed Aug 08 09:06:37 2012 -0700 69.3 @@ -0,0 +1,101 @@ 69.4 + 69.5 +partial interface HTMLElement { 69.6 + 69.7 + [Documentation= 69.8 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 69.9 + <ol>\ 69.10 + <li>\ 69.11 + <p>If any of the following holds true return null and terminate this\ 69.12 + algorithm:</p>\ 69.13 + <ul>\ 69.14 + <li>The element does not have an associated CSS layout box.</li>\ 69.15 + <li>The element is the root element.</li>\ 69.16 + <li>The element is <span>the HTML <code>body</code> element</span>.</li>\ 69.17 + <li>The element's computed value of the '<code>position</code>' property is <code>fixed</code>.</li>\ 69.18 + </ul>\ 69.19 + </li>\ 69.20 + <li>\ 69.21 + <p>Return the nearest ancestor element of the element for which at least\ 69.22 + one of the following is true and terminate this algorithm if such an\ 69.23 + ancestor is found:</p>\ 69.24 + <ul>\ 69.25 + <li>The computed value of the '<code>position</code>' property is not <code>static</code>.</li>\ 69.26 + <li>It is <span>the HTML <code>body</code> element</span>.</li>\ 69.27 + <li>The computed value of the '<code>position</code>' property of\ 69.28 + the element is <code>static</code> and the ancestor is one of the\ 69.29 + following <span data-anolis-spec=html title='HTML elements'>HTML elements</span>:\ 69.30 + <code>td</code>, <code>th</code>, or <code>table</code>.</li>\ 69.31 + </ul>\ 69.32 + </li>\ 69.33 + <li><p>Return null.</p></li>\ 69.34 + </ol>" 69.35 + ] 69.36 + readonly attribute Element offsetParent; 69.37 + 69.38 + [Documentation= 69.39 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 69.40 + <ol>\ 69.41 + <li><p>If the element is <span>the HTML <code>body</code> element</span>\ 69.42 + or does not have any associated CSS layout box return zero and terminate\ 69.43 + this algorithm.</p></li>\ 69.44 + <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the\ 69.45 + y-coordinate of the top <span>border edge</span> of the first\ 69.46 + CSS layout box associated with the element, relative to the\ 69.47 + <span>initial containing block</span> origin, and terminate this\ 69.48 + algorithm.</p></li>\ 69.49 + <li>\ 69.50 + <p>Return the result of subtracting the y-coordinate of the top\ 69.51 + <span>padding edge</span> of the first CSS layout box associated with\ 69.52 + the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the y-coordinate of\ 69.53 + the top <span>border edge</span> of the first CSS layout box associated\ 69.54 + with the element, relative to the <span>initial containing block</span>\ 69.55 + origin.</p>\ 69.56 + <p class='note'>An inline element that consists of multiple line boxes\ 69.57 + will only have its first CSS layout box considered.</p>\ 69.58 + </li>\ 69.59 + </ol>" 69.60 + ] 69.61 + readonly attribute long offsetTop; 69.62 + 69.63 + [Documentation= 69.64 + "<p>The {@name{} {@type} must return the result of running these steps:</p>\ 69.65 + <ol>\ 69.66 + <li><p>If the element is <span>the HTML <code>body</code>\ 69.67 + element</span> or does not have any associated CSS layout box return zero\ 69.68 + and terminate this algorithm.</p></li>\ 69.69 + <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the\ 69.70 + x-coordinate of the left <span>border edge</span> of the first\ 69.71 + CSS layout box associated with the element, relative to the\ 69.72 + <span>initial containing block</span> origin, and terminate this\ 69.73 + algorithm.</p></li>\ 69.74 + <li>\ 69.75 + <p>Return the result of subtracting the x-coordinate of the left\ 69.76 + <span>padding edge</span> of the first CSS layout box associated with\ 69.77 + the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the x-coordinate of\ 69.78 + the left <span>border edge</span> of the first CSS layout box associated\ 69.79 + with the element, relative to the <span>initial containing block</span>\ 69.80 + origin.</p>\ 69.81 + </li>\ 69.82 + </ol>" 69.83 + ] 69.84 + readonly attribute long offsetLeft; 69.85 + 69.86 + [Documentation= 69.87 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 69.88 + <ol>\ 69.89 + <li><p>If the element does not have any associated CSS layout box return zero and terminate this algorithm.</p></li>\ 69.90 + <li><p>Return the <span>border edge</span> width of the first CSS layout box associated with the element.</p></li>\ 69.91 + </ol>" 69.92 + ] 69.93 + readonly attribute long offsetWidth; 69.94 + 69.95 + [Documentation= 69.96 + "<p>The {@name} {@type} must return the result of running these steps:</p>\ 69.97 + <ol>\ 69.98 + <li><p>If the element does not have any associated CSS layout box return zero and terminate this algorithm.</p></li>\ 69.99 + <li><p>Return the <span>border edge</span> height of the first CSS layout box associated with the element.</p></li>\ 69.100 + </ol>" 69.101 + ] 69.102 + readonly attribute long offsetHeight; 69.103 + 69.104 +};
70.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 70.2 +++ b/cssom-view/idl/MediaQueryList.idl Wed Aug 08 09:06:37 2012 -0700 70.3 @@ -0,0 +1,48 @@ 70.4 + 70.5 +[Documentation= 70.6 + "<p>A {@name} {@type} has an associated media query list set on creation and an associated\ 70.7 + <dfn>list of media query list listeners</dfn>, which is initially empty.</p>\ 70.8 + <p>If the associated media query list changes in evaluation then, for each\ 70.9 + listener in the <span>list of media query list listeners</span> — in\ 70.10 + appending order, <span data-anolis-spec=html>queue a task</span> that invokes the listener,\ 70.11 + passing as argument the <code>MediaQueryList</code> object.</p>\ 70.12 + <div class='example'>\ 70.13 + <p>A simple piece of code that detects changes in the orientation of the viewport can be written as follows:</p>\ 70.14 + <pre><code>function handleOrientationChange(mql) {\ 70.15 + if(mql.matches) // landscape\ 70.16 + …\ 70.17 + else\ 70.18 + …\ 70.19 + }\ 70.20 + var mql = matchMedia("(orientation:landscape)")\ 70.21 + mql.addListener(handleOrientationChange)</code></pre>\ 70.22 + </div>" 70.23 +] 70.24 +interface MediaQueryList { 70.25 + 70.26 + [Documentation= 70.27 + "<p>The {@name} {@type} must return the\ 70.28 + <span title='serialize a media query list' data-anolis-spec=cssom>serialized</span> form of the associated media query list.</p>" 70.29 + ] 70.30 + readonly attribute DOMString media; 70.31 + 70.32 + [Documentation= 70.33 + "<p>The {@name} {@type} must return true if the associated media query list\ 70.34 + matches the state of the rendered <code data-anolis-spec=dom>Document</code> and false if it does not.</p>" 70.35 + ] 70.36 + readonly attribute boolean matches; 70.37 + 70.38 + [Documentation= 70.39 + "<p>When the {@name} {@type} is invoked <var title>listener</var> must be\ 70.40 + appended to the <span>list of media query list listeners</span>, unless\ 70.41 + it is already in the <span>list of media query list listeners</span>.</p>" 70.42 + ] 70.43 + void addListener(MediaQueryListListener listener); 70.44 + 70.45 + [Documentation= 70.46 + "<p>When the {@name} {@type} is invoked <var title>listener</var> must be\ 70.47 + removed from the <span>list of media query list listeners</span>.</p>" 70.48 + ] 70.49 + void removeListener(MediaQueryListListener listener); 70.50 + 70.51 +};
71.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 71.2 +++ b/cssom-view/idl/MediaQueryListListener.idl Wed Aug 08 09:06:37 2012 -0700 71.3 @@ -0,0 +1,4 @@ 71.4 +[Callback, NoInterfaceObject] 71.5 +interface MediaQueryListListener { 71.6 + void handleChange(MediaQueryList list); 71.7 +};
72.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 72.2 +++ b/cssom-view/idl/MouseEvent.idl Wed Aug 08 09:06:37 2012 -0700 72.3 @@ -0,0 +1,71 @@ 72.4 + 72.5 +partial interface MouseEvent { 72.6 + 72.7 + 72.8 + [Documentation= 72.9 + "<p>The {@name} {@type} must return the x-coordinate of\ 72.10 + the position where the event occurred relative to the origin of the\ 72.11 + screen.</p>" 72.12 + ] 72.13 + readonly attribute long screenX; 72.14 + 72.15 + [Documentation= 72.16 + "<p>The {@name} {@type} must return the y-coordinate of\ 72.17 + the position where the event occurred relative to the origin of the\ 72.18 + screen.</p>" 72.19 + ] 72.20 + readonly attribute long screenY; 72.21 + 72.22 + [Documentation= 72.23 + "<p>The {@name} {@type} must return the horizontal coordinate of\ 72.24 + the position where the event occurred relative to\ 72.25 + the origin of the <span>initial containing block</span>.</p>" 72.26 + ] 72.27 + readonly attribute long pageX; 72.28 + 72.29 + [Documentation= 72.30 + "<p>The {@name} {@type} must return the y-coordinate of the\ 72.31 + position where the event occurred relative to the origin of the\ 72.32 + <span>initial containing block</span>.</p>" 72.33 + ] 72.34 + readonly attribute long pageY; 72.35 + 72.36 + [Documentation= 72.37 + "<p>The {@name} {@type} must return the x-coordinate of\ 72.38 + the position where the event occurred relative to the origin of the\ 72.39 + <span>viewport</span>.</p>" 72.40 + ] 72.41 + readonly attribute long clientX; 72.42 + 72.43 + [Documentation= 72.44 + "<p>The {@name} {@type} must return the y-coordinate of\ 72.45 + the position where the event occurred relative to the origin of the\ 72.46 + <span>viewport</span>.</p>" 72.47 + ] 72.48 + readonly attribute long clientY; 72.49 + 72.50 + [Documentation= 72.51 + "<p>The {@name} {@type} must return the value of <code title=dom-MouseEvent-clientX>clientX</code>.</p>" 72.52 + ] 72.53 + readonly attribute long x; 72.54 + 72.55 + [Documentation= 72.56 + "<p>The {@name} {@type} must return the value of <code title=dom-MouseEvent-clientY>clientY</code>.</p>" 72.57 + ] 72.58 + readonly attribute long y; 72.59 + 72.60 + [Documentation= 72.61 + "<p>The {@name} {@type} must return the x-coordinate of\ 72.62 + the position where the event occurred relative to the origin of the\ 72.63 + <span>padding edge</span> of the target node.</p>" 72.64 + ] 72.65 + readonly attribute long offsetX; 72.66 + 72.67 + [Documentation= 72.68 + "<p>The {@name} {@type} must return the y-coordinate of\ 72.69 + the position where the event occurred relative to the origin of the\ 72.70 + <span>padding edge</span> of the target node.</p>" 72.71 + ] 72.72 + readonly attribute long offsetY; 72.73 + 72.74 +};
73.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 73.2 +++ b/cssom-view/idl/Range.idl Wed Aug 08 09:06:37 2012 -0700 73.3 @@ -0,0 +1,46 @@ 73.4 + 73.5 +partial interface Range { 73.6 + 73.7 + [Documentation= 73.8 + "<p>The {@name} {@type}, when invoked, must return an empty\ 73.9 + <code>ClientRectList</code> object if the range is not in the document and\ 73.10 + otherwise a <code>ClientRectList</code> object containing a list of\ 73.11 + <code>ClientRect</code> objects in content order that matches the\ 73.12 + following constraints:</p>\ 73.13 + <ul>\ 73.14 + <li>For each element selected by the range, whose parent is not selected\ 73.15 + by the range, include the border boxes returned by invoking\ 73.16 + <code title=dom-Element-getClientRects>getClientRects()</code> on the\ 73.17 + element.</li>\ 73.18 + <li>For each <code>Text</code> node selected or partially selected by the\ 73.19 + range (including when the boundary-points are identical), include a\ 73.20 + <code>ClientRect</code> object (for the part that is selected, not the\ 73.21 + whole line box). The bounds of these <code>ClientRect</code> objects are\ 73.22 + computed using font metrics; thus, for horizontal writing, the vertical\ 73.23 + dimension of each box is determined by the font ascent and descent, and\ 73.24 + the horizontal dimension by the text advance width.</li>\ 73.25 + </ul>" 73.26 + ] 73.27 + ClientRectList getClientRects(); 73.28 + 73.29 + [Documentation= 73.30 + "<p>The {@name} {@type}, when invoked, must return the result of the following algorithm:</p>\ 73.31 + <ol>\ 73.32 + <li><p>Let <var>list</var> be the result of invoking\ 73.33 + <code title=dom-Range-getClientRects>getClientRects()</code> on the\ 73.34 + same range this method was invoked on.</p></li>\ 73.35 + <li><p>If <var>list</var> is empty return a\ 73.36 + <code>ClientRect</code> object whose\ 73.37 + <code title=dom-ClientRect-top>top</code>,\ 73.38 + <code title=dom-ClientRect-right>right</code>,\ 73.39 + <code title=dom-ClientRect-bottom>bottom</code> and\ 73.40 + <code title=dom-ClientRect-left>left</code> members are zero.</p></li>\ 73.41 + <li><p>Otherwise, return a <code>ClientRect</code> object describing the\ 73.42 + smallest rectangle that includes the first rectangle in <var>list</var>\ 73.43 + and all of the remaining rectangles of which the height or width is not\ 73.44 + zero.</p></li>\ 73.45 + </ol>" 73.46 + ] 73.47 + ClientRect getBoundingClientRect(); 73.48 + 73.49 +};
74.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 74.2 +++ b/cssom-view/idl/Screen.idl Wed Aug 08 09:06:37 2012 -0700 74.3 @@ -0,0 +1,40 @@ 74.4 + 74.5 +[Documentation= 74.6 + "<p>As its name suggests, the {@name} {@type} represents information about the screen of the output device.</p>" 74.7 +] 74.8 +interface Screen { 74.9 + 74.10 + [Documentation= 74.11 + "<p>The {@name} {@type} must return the available width of the rendering surface of the output device.</p>" 74.12 + ] 74.13 + readonly attribute unsigned long availWidth; 74.14 + 74.15 + [Documentation= 74.16 + "<p>The {@name} {@type} must return the available height of the rendering surface of the output device.</p>" 74.17 + ] 74.18 + readonly attribute unsigned long availHeight; 74.19 + 74.20 + [Documentation= 74.21 + "<p>The {@name} {@type} must return the width of the output device.</p>" 74.22 + ] 74.23 + readonly attribute unsigned long width; 74.24 + 74.25 + [Documentation= 74.26 + "<p>The {@name} {@type} must return the height of the output device.</p>" 74.27 + ] 74.28 + readonly attribute unsigned long height; 74.29 + 74.30 + [Documentation= 74.31 + "<p>The {@name} {@type} must return the number of bits allocated to\ 74.32 + colors (i.e. excluding the alpha channel) in the output device. If the\ 74.33 + output device does not support colors these attributes\ 74.34 + must return zero.</p>" 74.35 + ] 74.36 + readonly attribute unsigned long colorDepth; 74.37 + 74.38 + [Documentation= 74.39 + "<p>The {@name} {@type} must return the value returned by the <code>colorDepth</code> attributed.</p>" 74.40 + ] 74.41 + readonly attribute unsigned long pixelDepth; 74.42 + 74.43 +};
75.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 75.2 +++ b/cssom-view/idl/Window.idl Wed Aug 08 09:06:37 2012 -0700 75.3 @@ -0,0 +1,143 @@ 75.4 + 75.5 +partial interface Window { 75.6 + 75.7 + [Documentation= 75.8 + "<p>When the {@name} {@type} is invoked these steps must be run:</p>\ 75.9 + <ol>\ 75.10 + <li><p>Let <var title>parsed_media_query_list</var> be the result of\ 75.11 + <span title='parse a media query list' data-anolis-spec=cssom>parsing</span>\ 75.12 + <var title>media_query_list</var>.</p></li>\ 75.13 + <li><p>Return a <em>new</em> <code>MediaQueryList</code> object,\ 75.14 + associated with the <code data-anolis-spec=html>Window</code> object, with\ 75.15 + <var title>parsed_media_query_list</var> as its associated\ 75.16 + media query list.</p></li>\ 75.17 + </ol>" 75.18 + ] 75.19 + MediaQueryList matchMedia(DOMString query); 75.20 + 75.21 + [Documentation= 75.22 + "<p>The {@name} {@type} must return the {@name} object\ 75.23 + associated with the <code data-anolis-spec=html>Window</code> object. It always returns the same\ 75.24 + object.</p>\ 75.25 + <p class='note'>Accessing {@name} through a <code data-anolis-spec=html>WindowProxy</code> object might yield different results\ 75.26 + when the <code data-anolis-spec=dom>Document</code> is navigated.</p>" 75.27 + ] 75.28 + readonly attribute Screen screen; 75.29 + 75.30 + // viewport 75.31 + [Documentation= 75.32 + "<p>The {@name} {@type} must return the <span>viewport</span> width including the size of a rendered scroll bar (if any).</p>\ 75.33 + <div class='example'>\ 75.34 + <p>The following snippet shows how to obtain the width of the viewport:</p>\ 75.35 + <pre><code>var viewportWidth = innerWidth</code></pre>\ 75.36 + </div>" 75.37 + ] 75.38 + readonly attribute long innerWidth; 75.39 + 75.40 + [Documentation= 75.41 + "<p>The {@name} {@type} must return the <span>viewport</span> height including the size of a rendered scroll bar (if any).</p>" 75.42 + ] 75.43 + readonly attribute long innerHeight; 75.44 + 75.45 + // viewport scrolling 75.46 + [Documentation= 75.47 + "<p>The {@name} {@type} attribute must return the x-coordinate, relative to the <span>initial containing block</span> origin, of the left of the <span>viewport</span>.</p>" 75.48 + ] 75.49 + readonly attribute long scrollX; 75.50 + 75.51 + [Documentation= 75.52 + "<p>The {@name} {@type} attribute must return the value returned by the <code>scrollX</code> attribute.</p>" 75.53 + ] 75.54 + readonly attribute long pageXOffset; 75.55 + 75.56 + [Documentation= 75.57 + "<p>The {@name} {@type} attribute must return the y-coordinate, relative to the <span>initial containing block</span> origin, of the top of the <span>viewport</span>.</p>" 75.58 + ] 75.59 + readonly attribute long scrollY; 75.60 + 75.61 + [Documentation= 75.62 + "<p>The {@name} {@type} attribute must return the value returned by the <code>scrollY</code> attribute.</p>" 75.63 + ] 75.64 + readonly attribute long pageYOffset; 75.65 + 75.66 + [Documentation= 75.67 + "<p>When the {@name} {@type} is invoked these steps must be run:</p>\ 75.68 + <ol>\ 75.69 + <li><p>If either <var title>x</var> or <var title>y</var> is infinite or NaN terminate this algorithm.</p></li>\ 75.70 + <li>\ 75.71 + <dl>\ 75.72 + <dt>If <span>document content</span> can have overflow to the right\ 75.73 + <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>,\ 75.74 + <span>content</span> width - <span>content edge</span>\ 75.75 + width)).</p></dd>\ 75.76 + <dt>If <span>document content</span> can have overflow to the left\ 75.77 + (under right-to-left conditions)\ 75.78 + <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>,\ 75.79 + <span>content edge</span> width - <span>content</span>\ 75.80 + width)).</p></dd>\ 75.81 + </dl>\ 75.82 + </li>\ 75.83 + <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>,\ 75.84 + <span>document content</span> height - <span>viewport</span>\ 75.85 + height excluding the size of a rendered scroll bar (if any))).</p></li>\ 75.86 + <li><p>Align the x-coordinate <var title>x</var> of the\ 75.87 + <span>document content</span> with the left of the <span>viewport</span>\ 75.88 + and align the y-coordinate <var title>y</var> of the <span>document\ 75.89 + content</span> with the top of the <span>viewport</span>.</p></li>\ 75.90 + <li><p>If the aligning caused content to move <span data-anolis-spec=html>queue a task</span> to\ 75.91 + <span data-anolis-spec=dom title=concept-event-fire>fire an event</span>\ 75.92 + named <code title='event-scroll'>scroll</code> that bubbles at the\ 75.93 + <code data-anolis-spec=dom>Document</code> object, unless a\ 75.94 + <span data-anolis-spec=html title=concept-task>task</span> to fire that event at the <code data-anolis-spec=dom>Document</code> object\ 75.95 + was already <span data-anolis-spec=html title='queue a task'>queued</span>.</p></li>\ 75.96 + </ol>" 75.97 + ] 75.98 + void scroll(long x, long y); 75.99 + 75.100 + [Documentation= 75.101 + "<p>When the {@name} {@type} is invoked, the user agent must act as if the\ 75.102 + <code title=dom-Window-scroll>scroll()</code> method was invoked with the same arguments.</p>" 75.103 + ] 75.104 + void scrollTo(long x, long y); 75.105 + 75.106 + [Documentation= 75.107 + "<p>When the {@name} {@type} is invoked, the user agent must act as if the\ 75.108 + <code title=dom-Window-scroll>scroll()</code> method was invoked with\ 75.109 + <var title>x</var> plus <code title='dom-Window-scrollX'>scrollX</code>\ 75.110 + as first argument and <var title>y</var> plus\ 75.111 + <code title='dom-Window-scrollY'>scrollY</code> as second argument.</p>" 75.112 + ] 75.113 + void scrollBy(long x, long y); 75.114 + 75.115 + // client 75.116 + [Documentation= 75.117 + "<p>The {@name} {@type} must return the x-coordinate,\ 75.118 + relative to the origin of the screen of the output device, of the left of\ 75.119 + the client window as number of pixels, or zero if there is no such\ 75.120 + thing.</p>" 75.121 + ] 75.122 + readonly attribute long screenX; 75.123 + 75.124 + [Documentation= 75.125 + "<p>The {@name} {@type} must return the y-coordinate,\ 75.126 + relative to the origin of the screen of the output device, of the top of\ 75.127 + the client window as number of pixels, or zero if there is no such\ 75.128 + thing.</p>" 75.129 + ] 75.130 + readonly attribute long screenY; 75.131 + 75.132 + [Documentation= 75.133 + "<p>The {@name} {@type} must return the width of the\ 75.134 + client window. If there is no client window this\ 75.135 + attribute must return zero.</p>" 75.136 + ] 75.137 + readonly attribute long outerWidth; 75.138 + 75.139 + [Documentation= 75.140 + "<p>The {@name} {@type} must return the height of the\ 75.141 + client window. If there is no client window this\ 75.142 + attribute must return zero.</p>" 75.143 + ] 75.144 + readonly attribute long outerHeight; 75.145 + 75.146 +};
76.1 --- a/cssom/Makefile Tue Jul 31 14:04:38 2012 -0700 76.2 +++ b/cssom/Makefile Wed Aug 08 09:06:37 2012 -0700 76.3 @@ -2,6 +2,12 @@ 76.4 ANOLIS = anolis 76.5 NODE = node 76.6 76.7 +SPECSTOP = .. 76.8 +GENDIR = $(SPECSTOP)/cssom 76.9 +IDLGEN = $(GENDIR)/cssom-generate-json.js 76.10 +SPECGEN = $(GENDIR)/cssom-generate.js 76.11 +SPECSRC = cssom-source 76.12 + 76.13 IDLDRIVER = cssom.idl 76.14 IDLFRAGS = idl/CSSFontFaceRule.idl \ 76.15 idl/CSSImportRule.idl \ 76.16 @@ -28,11 +34,11 @@ 76.17 76.18 all: $(EDFILE) 76.19 76.20 -$(JSONFILE): cssom-generate-json.js $(IDLDRIVER) $(IDLFRAGS) 76.21 - gcc -E -x c -P -Iidl -C $(IDLDRIVER) | node cssom-generate-json.js > $@ 76.22 +$(JSONFILE): $(IDLDRIVER) $(IDLFRAGS) $(IDLGEN) 76.23 + gcc -E -x c -P -Iidl -C $(IDLDRIVER) | node $(IDLGEN) > $@ 76.24 76.25 -Overview.src.html: cssom-generate.js $(JSONFILE) cssom-source 76.26 - $(NODE) cssom-generate.js > $@ 76.27 +Overview.src.html: $(SPECGEN) $(JSONFILE) $(SPECSRC) 76.28 + $(NODE) $(SPECGEN) $(JSONFILE) $(SPECSRC) > $@ 76.29 76.30 $(XREFS): Overview.src.html Makefile 76.31 $(ANOLIS) --dump-xrefs=$@ $< /tmp/spec; $(RM) /tmp/spec 76.32 @@ -52,9 +58,11 @@ 76.33 publish: $(TRFILE) 76.34 76.35 clean:: 76.36 - $(RM) $(EDFILE) 76.37 $(RM) Overview.src.html 76.38 $(RM) $(JSONFILE) 76.39 + 76.40 +cleanall:: clean 76.41 + $(RM) $(EDFILE) 76.42 echo '{ "definitions": {}, "url": "http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html#" }' > $(XREFS) 76.43 76.44
77.1 --- a/cssom/Overview.html Tue Jul 31 14:04:38 2012 -0700 77.2 +++ b/cssom/Overview.html Wed Aug 08 09:06:37 2012 -0700 77.3 @@ -18,7 +18,7 @@ 77.4 77.5 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 77.6 77.7 - <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 17 July 2012</h2> 77.8 + <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 3 August 2012</h2> 77.9 77.10 <dl> 77.11 77.12 @@ -47,13 +47,12 @@ 77.13 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd> 77.14 </dl> 77.15 77.16 - <p class="dontpublish copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="http://i.creativecommons.org/p/zero/1.0/80x15.png"></a> 77.17 - To the extent possible under law, the editors have waived all copyright and 77.18 - related or neighboring rights to this work. In addition, as of 77.19 - 17 July 2012, the editors have made this specification available 77.20 - under the <a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open 77.21 - Web Foundation Agreement, Version 1.0</a>.</p> 77.22 - </div> 77.23 + 77.24 +<!--begin-copyright--> 77.25 +<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p> 77.26 +<!--end-copyright--> 77.27 + 77.28 + </div> 77.29 77.30 <hr class="top"> 77.31 77.32 @@ -84,7 +83,7 @@ 77.33 can be found in the 77.34 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em> 77.35 77.36 - <p class="dontpublish">This is the 17 July 2012 Editor's Draft of CSSOM. Please send comments to 77.37 + <p class="dontpublish">This is the 3 August 2012 Editor's Draft of CSSOM. Please send comments to 77.38 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a> 77.39 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 77.40 with <samp>[cssom]</samp> at the start of the subject line. 77.41 @@ -187,7 +186,7 @@ 77.42 77.43 <h2 id="introduction"><span class="secno">1 </span>Introduction</h2> 77.44 77.45 - <p class="XXX">...</p> 77.46 + <p class="issue">...</p> 77.47 77.48 <!-- ........................................................................................................................ --> 77.49 <!-- ........................................................................................................................ --> 77.50 @@ -253,7 +252,7 @@ 77.51 <a href="#refsXMLSS">[XMLSS]</a> 77.52 <a href="#refsXML">[XML]</a> 77.53 77.54 - <p class="XXX"><dfn id="supported-styling-language">supported styling language</dfn> 77.55 + <p class="issue"><dfn id="supported-styling-language">supported styling language</dfn> 77.56 77.57 <p>When this specification talks about object 77.58 <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface 77.59 @@ -453,7 +452,7 @@ 77.60 77.61 <h4 id="serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</h4> 77.62 77.63 - <p class="XXX">This should probably be done in terms of mapping it to 77.64 + <p class="issue">This should probably be done in terms of mapping it to 77.65 serializing CSS values as media features are defined in terms of CSS 77.66 values after all.</p> 77.67 77.68 @@ -1232,7 +1231,6 @@ 77.69 <pre><link rel="alternate stylesheet" title="foo" href="a"> 77.70 <link rel="alternate stylesheet" title="bar" href="b"> 77.71 <script> 77.72 - 77.73 document.selectedStyleSheetSet = 'foo'; 77.74 document.styleSheets[1].disabled = false; 77.75 </script> 77.76 @@ -1257,7 +1255,6 @@ 77.77 document.styleSheets[1].disabled = false; 77.78 </script> 77.79 <link rel="stylesheet" title="foo" href="c"> 77.80 - 77.81 <link rel="alternate stylesheet" title="bar" href="d"> 77.82 <script> 77.83 var after = document.preferredStyleSheetSet; 77.84 @@ -1490,9 +1487,6 @@ 77.85 <dt><a href="#style-sheet-parent">style sheet parent</a></dt> 77.86 <dd><p>null</dd> 77.87 77.88 - <dt><a href="#style-sheet-owner-node">style sheet owner node</a></dt> 77.89 - <dd><p>null</dd> 77.90 - 77.91 <dt><a href="#style-sheet-owner-css-rule">style sheet owner CSS rule</a></dt> 77.92 <dd><p>null</dd> 77.93 77.94 @@ -1524,7 +1518,7 @@ 77.95 77.96 <dl class="switch"> 77.97 <dt><code>CSSStyleRule</code></dt> 77.98 - <dd class="XXX">...</dd> 77.99 + <dd class="issue">...</dd> 77.100 77.101 <dt><code>CSSImportRule</code></dt> 77.102 <dd> 77.103 @@ -1543,13 +1537,13 @@ 77.104 </dd> 77.105 77.106 <dt><code>CSSMediaRule</code></dt> 77.107 - <dd class="XXX">...</dd> 77.108 + <dd class="issue">...</dd> 77.109 77.110 <dt><code>CSSFontFaceRule</code></dt> 77.111 - <dd class="XXX">...</dd> 77.112 + <dd class="issue">...</dd> 77.113 77.114 <dt><code>CSSPageRule</code></dt> 77.115 - <dd class="XXX">...</dd> 77.116 + <dd class="issue">...</dd> 77.117 77.118 <dt><code>CSSNamespaceRule</code></dt> 77.119 <dd><p>The literal string "<code>@namespace</code>", followed by a space 77.120 @@ -1839,11 +1833,11 @@ 77.121 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p> 77.122 77.123 77.124 - <p class="XXX">To 77.125 + <p class="issue">To 77.126 <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> 77.127 ...</p> 77.128 77.129 - <p class="XXX">To 77.130 + <p class="issue">To 77.131 <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn> 77.132 ...</p> 77.133 77.134 @@ -2037,7 +2031,7 @@ 77.135 the literal string "<code>deg</code>".</dd> 77.136 77.137 <dt><color></dt> 77.138 - <dd><p class="XXX">preserve system colors, maybe color keywords...</dd> 77.139 + <dd><p class="issue">preserve system colors, maybe color keywords...</dd> 77.140 <!-- 77.141 <dt>It is a system color</dt> 77.142 77.143 @@ -2107,9 +2101,9 @@ 77.144 "<code>0px</code>".</p> 77.145 77.146 <p>Absolute lengths: the number of millimeters serialized as per 77.147 - <number> followed by the literal string "<code>mm</code>". 77.148 - <span class="XXX">Rumor has it absolute lengths will become relative 77.149 - lengths. Centimeters would be compatible with <resolution>...</span></p> 77.150 + <number> followed by the literal string "<code>mm</code>".</p> 77.151 + <p class="issue">Rumor has it absolute lengths will become relative 77.152 + lengths. Centimeters would be compatible with <resolution>...</p> 77.153 77.154 <p>Relative lengths: the <number> component serialized as per 77.155 <number> followed by the unit in its canonical form as defined in its 77.156 @@ -2117,7 +2111,7 @@ 77.157 </dd> 77.158 77.159 <dt><number></dt> 77.160 - <dd><p class="XXX">Browsers seem to use ToString(), but that might give a 77.161 + <dd><p class="issue">Browsers seem to use ToString(), but that might give a 77.162 significand which according to some is teh evil (and also currently does 77.163 not parse correctly).</dd> 77.164 77.165 @@ -2167,7 +2161,7 @@ 77.166 are considered macros by this specification. They all represent instances 77.167 of components outlined above.</p> 77.168 77.169 - <p class="XXX">One idea is that we can remove this section somewhere in 77.170 + <p class="issue">One idea is that we can remove this section somewhere in 77.171 the CSS3/CSS4 timeline by moving the above definitions to the drafts that 77.172 define the CSS components.</p> 77.173 77.174 @@ -2196,7 +2190,7 @@ 77.175 <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code> 77.176 </table> 77.177 77.178 - <p class="XXX">Some of these need to be updated per the new rules.</p> 77.179 + <p class="issue">Some of these need to be updated per the new rules.</p> 77.180 </div> 77.181 77.182 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
78.1 --- a/cssom/Overview.src.html Tue Jul 31 14:04:38 2012 -0700 78.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 78.3 @@ -1,2358 +0,0 @@ 78.4 -<!DOCTYPE html> 78.5 -<html lang="en-US"> 78.6 -<head> 78.7 - <meta charset="utf-8"/> 78.8 - <title>CSS Object Model (CSSOM)</title> 78.9 - <link rel="stylesheet" href="cssom.css"/> 78.10 - <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]"/> 78.11 - </head> 78.12 - <body class="draft"> 78.13 - <div class="head"> 78.14 - <!--logo--> 78.15 - 78.16 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.17 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.18 - 78.19 - <h1 id="cssom">CSS Object Model (CSSOM)</h1> 78.20 - 78.21 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.22 - 78.23 - <h2 class="no-num no-toc" id="w3c-doctype">[LONGSTATUS] [DATE: 3 August 2002]</h2> 78.24 - 78.25 - <dl> 78.26 - 78.27 - <dt>This Version:</dt> 78.28 - <dd class="dontpublish"><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html</a></dd> 78.29 - <dd class="publish"><a href="[VERSION]">[VERSION]</a></dd> 78.30 - 78.31 - <dt class="dontpublish">Participate:</dt> 78.32 - <dd class="dontpublish"><a href="mailto:www-style@w3.org?subject==%5Bcssom%5D%20">www-style@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)</dd> 78.33 - <dd class="dontpublish"><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&component=CSSOM">File a bug</a></dd> 78.34 - <dd class="dontpublish"><a href="http://wiki.whatwg.org/wiki/IRC">IRC: #css on Freenode</a></dd> 78.35 - 78.36 - <dt class="publish">Latest Version:</dt> 78.37 - <dd class="publish"><a href="[LATEST]">[LATEST]</a></dd> 78.38 - 78.39 - <dt class="publish">Latest Editor's draft:</dt> 78.40 - <dd class="publish"><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html</a></dd> 78.41 - 78.42 - <dt class="dontpublish">Previous Version:</dt> 78.43 - <dd class="dontpublish"><a href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a></dd> 78.44 - <dd class="dontpublish"><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a></dd> 78.45 - 78.46 - <dt>Editors:</dt> 78.47 - <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a> 78.48 - (<a href="http://www.cox.com/">Cox Communications, Inc.</a>) 78.49 - <<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>></dd> 78.50 - <dd><a>Shane Stephens</a> 78.51 - (<a href="http://www.google.com/">Google, Inc.</a>) 78.52 - <<a href="mailto:shans@google.com">shans@google.com</a>></dd> 78.53 - 78.54 - <dt>Previous Editor:</dt> 78.55 - <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a> 78.56 - (<a href="http://www.opera.com/">Opera Software ASA</a>) 78.57 - <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd> 78.58 - </dl> 78.59 - 78.60 - <p class="dontpublish copyright"><a rel="license" href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="http://i.creativecommons.org/p/zero/1.0/80x15.png" alt="CC0"/></a> 78.61 - To the extent possible under law, the editors have waived all copyright and 78.62 - related or neighboring rights to this work. In addition, as of 78.63 - [DATE: 01 Jan 1901], the editors have made this specification available 78.64 - under the <a rel="license" href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0">Open 78.65 - Web Foundation Agreement, Version 1.0</a>.</p> 78.66 - <div class="publish"><!--copyright--></div> 78.67 - 78.68 - </div> 78.69 - 78.70 - <hr class="top"/> 78.71 - 78.72 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.73 - 78.74 - <h2 class="no-num no-toc" id="abstract">Abstract</h2> 78.75 - 78.76 - <p>CSSOM defines APIs (including generic parsing and serialization rules) 78.77 - for Media Queries, Selectors, and of course CSS itself.</p> 78.78 - 78.79 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.80 - 78.81 - <h2 class="no-num no-toc" id="sotd">Status of this Document</h2> 78.82 - 78.83 - <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. 78.84 - Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite 78.85 - this document other than as work in progress.</p> 78.86 - 78.87 - <p class="note">Implementers should note well that this specification is an ongoing effort to sort out 78.88 - what has been widely implemented and deployed from DOM-2 Style as well as common extensions thereto, some details 78.89 - of which are currently interoperable and others which are not currently interoperable. As this specification moves 78.90 - forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based 78.91 - specification will emerge.</p> 78.92 - 78.93 - <p><em>This section describes the status of this document at the time of 78.94 - its publication. Other documents may supersede this document. A list of 78.95 - current W3C publications and the latest revision of this technical report 78.96 - can be found in the 78.97 - <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em> 78.98 - 78.99 - </p><p class="dontpublish">This is the [DATE: 3 August 2002] [LONGSTATUS] of CSSOM. Please send comments to 78.100 - <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a> 78.101 - (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 78.102 - with <samp>[cssom]</samp> at the start of the subject line. 78.103 - 78.104 - </p><p class="publish">This is the [DATE] First Public Working Draft of CSSOM, produced by the 78.105 - <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part 78.106 - of the <a href="http://www.w3.org/Style/">Style Activity</a>). 78.107 - <!--XXX remove "First Public" after initial publication --> 78.108 - 78.109 - </p><p>This document was produced by a group operating under the 78.110 - <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. 78.111 - W3C maintains a 78.112 - <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> 78.113 - made in connection with the deliverables of the group; that page also 78.114 - includes instructions for disclosing a patent. An individual who has 78.115 - actual knowledge of a patent which the individual believes contains 78.116 - <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> 78.117 - must disclose the information in accordance with 78.118 - <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p> 78.119 - 78.120 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.121 - 78.122 - <h2 class="no-num no-toc" id="toc">Table of Contents</h2> 78.123 - 78.124 - <!--toc--> 78.125 - 78.126 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.127 - 78.128 - <h2 id="introduction">Introduction</h2> 78.129 - 78.130 - <p class="XXX">...</p> 78.131 - 78.132 - <!-- ........................................................................................................................ --> 78.133 - <!-- ........................................................................................................................ --> 78.134 - 78.135 - <h3 id="history">History</h3> 78.136 - 78.137 - <p>Several interfaces from DOM Level 2 Style 78.138 - <a href="http://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html" title="[CSSOM] CSSValue and related interfaces (message from the CSS WG)">have 78.139 - been obsoleted</a> because they were thought to be too awkward for 78.140 - frequent use. This specification no longer contains those features. 78.141 - <code>DOMImplementationCSS</code> and <code>CSSCharsetRule</code> have 78.142 - been removed as well as they were not deemed necessary.</p> 78.143 - 78.144 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.145 - 78.146 - <h2>Conformance</h2> 78.147 - 78.148 - <p>All diagrams, examples, and notes in this specification are 78.149 - non-normative, as are all sections explicitly marked non-normative. 78.150 - Everything else in this specification is normative. 78.151 - 78.152 - </p><p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL 78.153 - NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and 78.154 - "OPTIONAL" in the normative parts of this document are to be 78.155 - interpreted as described in RFC2119. For readability, these words do 78.156 - not appear in all uppercase letters in this specification. 78.157 - <span data-anolis-ref>RFC2119</span> 78.158 - 78.159 - </p><p>Requirements phrased in the imperative as part of algorithms 78.160 - (such as "strip any leading space characters" or "return false and 78.161 - terminate these steps") are to be interpreted with the meaning of the 78.162 - key word ("must", "should", "may", etc) used in introducing the 78.163 - algorithm. 78.164 - 78.165 - </p><p>Conformance requirements phrased as algorithms or specific steps 78.166 - may be implemented in any manner, so long as the end result is 78.167 - equivalent. (In particular, the algorithms defined in this 78.168 - specification are intended to be easy to follow, and not intended to 78.169 - be performant.) 78.170 - 78.171 - </p><p id="hardwareLimitations">User agents may impose 78.172 - implementation-specific limits on otherwise unconstrained inputs, 78.173 - e.g. to prevent denial of service attacks, to guard against running 78.174 - out of memory, or to work around platform-specific limitations. 78.175 - 78.176 - </p><p>When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript. 78.177 - 78.178 - </p><p>Unless otherwise stated, string comparisons are done in a 78.179 - <span data-anolis-spec="dom">case-sensitive</span> manner. 78.180 - 78.181 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.182 - 78.183 - </p><h2 id="terminology">Terminology</h2> 78.184 - 78.185 - <p>Terminology used in this specification is from 78.186 - <cite>DOM4</cite>, 78.187 - <cite>HTML</cite>, 78.188 - <cite>Associating Style Sheets with XML documents</cite> 78.189 - and 78.190 - <cite>XML</cite> 78.191 - <span data-anolis-ref>DOM</span> 78.192 - <span data-anolis-ref>HTML</span> 78.193 - <span data-anolis-ref>XMLSS</span> 78.194 - <span data-anolis-ref>XML</span> 78.195 - 78.196 - </p><p class="XXX"><dfn>supported styling language</dfn> 78.197 - 78.198 - </p><p>When this specification talks about object 78.199 - <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface 78.200 - <code><var>A</var></code>.</p> 78.201 - 78.202 - <p>The term <dfn id="whitespace">whitespace</dfn> is used as defined in CSS. 78.203 - <!--XXX <a href="#ref-css">[CSS]</a>--></p> 78.204 - 78.205 - <!-- ........................................................................................................................ --> 78.206 - <!-- ........................................................................................................................ --> 78.207 - 78.208 - <h3>Common Serializing Idioms</h3> 78.209 - 78.210 - <p>To <dfn>serialize a character</dfn> means to create a string of 78.211 - "<code>\</code>" (U+005C), followed by the character.</p> 78.212 - 78.213 - <p>To <dfn>serialize a character as code point</dfn> means to create a 78.214 - string of "<code>\</code>" (U+005C), followed by the Unicode code point as 78.215 - the smallest possible number of hexadecimal digits in the range 0-9 a-f 78.216 - (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in 78.217 - base 16, followed by a space (U+0020).</p> 78.218 - 78.219 - <p>To <dfn>serialize an identifier</dfn> means to create a string represented 78.220 - by the concatenation of, for each character of the identifier:</p> 78.221 - 78.222 - <ul> 78.223 - <li>If the character is in the range U+0000 to U+001F or U+007F to 78.224 - U+009F, the character 78.225 - <span title="serialize a character as code point">escaped as code point</span>.</li> 78.226 - <li>If the character is the first character and is in the range 0-9 78.227 - (U+0030 to U+0039), the character 78.228 - <span title="serialize a character as code point">escaped as code point</span>.</li> 78.229 - <li>If the character is the second character and is in the range 0-9 78.230 - (U+0030 to U+0039) and the first character is a "<code>-</code>" 78.231 - (U+002D), the character 78.232 - <span title="serialize a character as code point">escaped as code point</span>.</li> 78.233 - <li>If the character is the second character and is "<code>-</code>" 78.234 - (U+002D) and the first character is "<code>-</code>" too, the 78.235 - <span title="serialize a character">escaped</span> character.</li> 78.236 - <li>If the character is not handled by one of the above rules and is 78.237 - greater than or equal to U+0080, is "<code>-</code>" (U+002D) or 78.238 - "<code>_</code>" (U+005F), or is in one of the ranges 0-9 (U+0030 to 78.239 - U+0039), A-Z (U+0041 to U+005A), or a-z (U+0061 to U+007A), the character 78.240 - itself.</li> 78.241 - <li>Otherwise, the <span title="serialize a character">escaped</span> 78.242 - character.</li> 78.243 - </ul> 78.244 - 78.245 - <p>To <dfn>serialize a string</dfn> means to create a string represented 78.246 - by '<code>"</code>' (U+0022), followed by the result of applying the rules 78.247 - below to each character of the given string, followed by 78.248 - '<code>"</code>' (U+0022):</p> 78.249 - 78.250 - <ul> 78.251 - <li>If the character is in the range U+0000 to U+001F or U+007F to 78.252 - U+009F, the character 78.253 - <span title="serialize a character as code point">escaped as code point</span>.</li> 78.254 - <li>If the character is '<code>"</code>' (U+0022) or '<code>\</code>' 78.255 - (U+005C), the <span title="serialize a character">escaped</span> character.</li> 78.256 - <li>Otherwise, the character itself.</li> 78.257 - </ul> 78.258 - 78.259 - <p class="note">"<code>'</code>" (U+0027) is not escaped because strings 78.260 - are always serialized with '<code>"</code>' (U+0022).</p> 78.261 - 78.262 - <p>To <dfn>serialize a URL</dfn> means to create a string represented by 78.263 - "<code>url(</code>", followed by the 78.264 - <span title="serialize a string">string escaped</span> value of the given 78.265 - string, followed by "<code>)</code>".</p> 78.266 - 78.267 - <p>To <dfn>serialize a comma-separated list</dfn> concatenate all items of 78.268 - the list in list order while separating them by "<code>,</code>" (U+002C), 78.269 - followed by a space (U+0020).</p> 78.270 - 78.271 - <p>To <dfn>serialize a whitespace-separated list</dfn> concatenate all 78.272 - items of the list in list order while separating them a space (U+0020).</p> 78.273 - 78.274 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.275 - 78.276 - <h2>Media Queries</h2> 78.277 - 78.278 - <p>Media queries are defined by the Media Queries specification. This 78.279 - section defines various concepts around media queries, including their API 78.280 - and serialization form.</p> 78.281 - 78.282 - <!-- XXX ref --> 78.283 - 78.284 - <!-- ........................................................................................................................ --> 78.285 - <!-- ........................................................................................................................ --> 78.286 - 78.287 - <h3>Parsing Media Queries</h3> 78.288 - 78.289 - <p>To 78.290 - <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a 78.291 - given string <var>s</var> into a media query list is defined in 78.292 - the Media Queries specification. Return the list of one or more media 78.293 - queries that the algorithm defined there gives.</p> <!-- XXX ref --> 78.294 - 78.295 - <p class="note">A media query that ends up being "ignored" will turn 78.296 - into "<code>not all</code>".</p> 78.297 - 78.298 - <p>To 78.299 - <dfn id="parse-a-media-query">parse a media query</dfn> for a given string 78.300 - <var>s</var> means to follow the 78.301 - <span>parse a media query list</span> steps and return null if more 78.302 - than one media query is returned or a media query if a 78.303 - single media query is returned.</p> 78.304 - 78.305 - <p class="note">Again, a media query that ends up being "ignored" will 78.306 - turn into "<code>not all</code>".</p> 78.307 - 78.308 - <!-- ........................................................................................................................ --> 78.309 - 78.310 - <h3>Serializing Media Queries</h3> 78.311 - 78.312 - <p>To 78.313 - <dfn id="serialize-a-media-query-list">serialize a media query list</dfn> 78.314 - run these steps:</p> 78.315 - 78.316 - <ol> 78.317 - <li><p>If the media query list is empty return the empty string and 78.318 - terminate these steps.</p></li> 78.319 - 78.320 - <li><p><span title="serialize a media query">Serialize</span> each 78.321 - media query in the list of media queries, sort them in lexicographical 78.322 - order, and then 78.323 - <span title="serialize a comma-separated list">serialize</span> the 78.324 - list.</p></li> 78.325 - </ol> 78.326 - 78.327 - <p>To 78.328 - <dfn id="serialize-a-media-query">serialize a media query</dfn> let 78.329 - <var>s</var> be the empty string, run the steps below, and 78.330 - finally return <var>s</var>:</p> 78.331 - 78.332 - <ol> 78.333 - <li><p>If the media query is negated append "<code>not</code>", followed 78.334 - by a space (U+0020), to <var>s</var>.</p></li> 78.335 - 78.336 - <li><p>Let <var>type</var> be the media type of the media query, 78.337 - <span title="serialize an identifier">escaped</span> and 78.338 - <span data-anolis-spec="dom">converted to ASCII lowercase</span>.</p></li> 78.339 - 78.340 - <li><p>If the media query does not contain media features append 78.341 - <var>type</var>, to <var>s</var>, 78.342 - then return <var>s</var> and terminate this algorithm.</p></li> 78.343 - 78.344 - <li><p>If <var>type</var> is not "<code>all</code>" or if the 78.345 - media query is negated append <var>type</var>, followed by a 78.346 - space (U+0020), followed by "<code>and</code>", followed by a space 78.347 - (U+0020), to <var>s</var>.</p></li> 78.348 - 78.349 - <li><p>Sort the media features in lexicographical order.</p></li> 78.350 - 78.351 - <li> 78.352 - <p>Then, for each media feature:</p> 78.353 - 78.354 - <ol> 78.355 - <li>Append a "<code>(</code>" (U+0028), followed by the media feature 78.356 - name, <span data-anolis-spec="dom">converted to ASCII lowercase</span>, 78.357 - to <var>s</var>.<p></p></li> 78.358 - 78.359 - <li><p>If a value is given append a "<code>:</code>" (U+003A), followed 78.360 - by a space (U+0020), followed by the 78.361 - <span title="serialize a media feature value">serialized media feature value</span>, 78.362 - to <var>s</var>.</p></li> 78.363 - 78.364 - <li><p>Append a "<code>)</code>" (U+0029) to 78.365 - <var>s</var>.</p></li> 78.366 - 78.367 - <li><p>If this is not the last media feature append a space (U+0020), 78.368 - followed by "<code>and</code>", followed by a space (U+0020), to 78.369 - <var>s</var>.</p></li> 78.370 - </ol> 78.371 - </li> 78.372 - </ol> 78.373 - 78.374 - <div class="example"> 78.375 - <p>Here are some examples of input (first column) and output (second 78.376 - column):</p> 78.377 - 78.378 - <table> 78.379 - <thead> 78.380 - <tr><th>Input</th><th>Output 78.381 - </th></tr></thead><tbody> 78.382 - <tr> 78.383 - <td><code>not screen and (min-WIDTH:5px) AND (max-width:40px )</code> 78.384 - </td><td><code>not screen and (max-width: 40px) and (min-width: 5px)</code> 78.385 - </td></tr><tr> 78.386 - <td><code>all and (color) and (color)</code> 78.387 - </td><td><code>(color)</code> 78.388 - </td></tr></tbody></table> 78.389 - </div> 78.390 - 78.391 - 78.392 - <!-- ........................................................................................................................ --> 78.393 - 78.394 - <h4>Serializing Media Feature Values</h4> 78.395 - 78.396 - <p class="XXX">This should probably be done in terms of mapping it to 78.397 - serializing CSS values as media features are defined in terms of CSS 78.398 - values after all.</p> 78.399 - 78.400 - <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn> 78.401 - named <var>v</var> locate <var>v</var> in the first 78.402 - column of the table below and use the serialization format described in 78.403 - the second column:</p> 78.404 - 78.405 - <table> 78.406 - <tbody><tr> 78.407 - <th>Media Feature 78.408 - </th><th>Serialization 78.409 - </th></tr><tr> 78.410 - <td><code>width</code> 78.411 - </td><td>... 78.412 - </td></tr><tr> 78.413 - <td><code>height</code> 78.414 - </td><td>... 78.415 - </td></tr><tr> 78.416 - <td><code>device-width</code> 78.417 - </td><td>... 78.418 - </td></tr><tr> 78.419 - <td><code>device-height</code> 78.420 - </td><td>... 78.421 - </td></tr><tr> 78.422 - <td><code>orientation</code> 78.423 - </td><td> 78.424 - <p>If the value is `<code>portrait</code>`: "<code>portrait</code>".</p> 78.425 - <p>If the value is `<code>landscape</code>`: "<code>landscape</code>".</p> 78.426 - </td></tr><tr> 78.427 - <td><code>aspect-ratio</code> 78.428 - </td><td>... 78.429 - </td></tr><tr> 78.430 - <td><code>device-aspect-ratio</code> 78.431 - </td><td>... 78.432 - </td></tr><tr> 78.433 - <td><code>color</code> 78.434 - </td><td>... 78.435 - </td></tr><tr> 78.436 - <td><code>color-index</code> 78.437 - </td><td>... 78.438 - </td></tr><tr> 78.439 - <td><code>monochrome</code> 78.440 - </td><td>... 78.441 - </td></tr><tr> 78.442 - <td><code>resolution</code> 78.443 - </td><td>... 78.444 - </td></tr><tr> 78.445 - <td><code>scan</code> 78.446 - </td><td> 78.447 - <p>If the value is `<code>progressive</code>`: "<code>progressive</code>".</p> 78.448 - <p>If the value is `<code>interlace</code>`: "<code>interlace</code>".</p> 78.449 - </td></tr><tr> 78.450 - <td><code>grid</code> 78.451 - </td><td>... 78.452 - </td></tr></tbody></table> 78.453 - 78.454 - <p>Other specifications can extend this table and vendor-prefixed media 78.455 - features can have custom serialization formats as well.</p> 78.456 - 78.457 - <!-- ........................................................................................................................ --> 78.458 - <!-- ........................................................................................................................ --> 78.459 - 78.460 - <h3>Comparing Media Queries</h3> 78.461 - 78.462 - <p>To 78.463 - <dfn id="compare-media-queries">compare media queries</dfn> 78.464 - <var>m1</var> and <var>m2</var> means to 78.465 - <span title="serialize a media query">serialize</span> them both and 78.466 - return true if they are a 78.467 - <span data-anolis-spec="dom">case-sensitive</span> match and false if they 78.468 - are not.</p> 78.469 - 78.470 - <!-- ........................................................................................................................ --> 78.471 - <!-- ........................................................................................................................ --> 78.472 - 78.473 - <h3>The <code>MediaList</code> Interface</h3> 78.474 - 78.475 - <p>An object that implements the <a class="idlType" href="#widl-def-MediaList"><code>MediaList</code></a> interface has an associated <dfn>collection of media queries</dfn>.</p> 78.476 -<pre class="idl"><span class="idlInterface" id="widl-def-MediaList">interface <span class="idlInterfaceID">MediaList</span> { 78.477 -<span class="idlAttribute"> stringifier attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-MediaList-mediaText">mediaText</a></span>;</span> 78.478 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-MediaList-length">length</a></span>;</span> 78.479 -<span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-MediaList-item-DOMString-unsigned-long-index">item</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span> 78.480 -<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-MediaList-appendMedium-void-DOMString-medium">appendMedium</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">medium</span></span>);</span> 78.481 -<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-MediaList-deleteMedium-void-DOMString-medium">deleteMedium</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">medium</span></span>);</span> 78.482 -};</span></pre> 78.483 -<dl class="attributes"> 78.484 -<dt class="attribute" id="widl-MediaList-mediaText"> 78.485 -<code>mediaText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt> 78.486 -<dd> 78.487 -<p>The <code>mediaText</code> attribute must return a <span title='serialize a media query list'>serialization</span> of the <span>collection of media queries</span>.</p> <p>Setting the <code>mediaText</code> attribute must run these steps: <ol> <li><p>Empty the <span>collection of media queries</span>.</p></li> <li><p>If the given value is the empty string terminate these steps.</p></li> <li><p>Append all the media queries as a result of <span title='parse a media query list'>parsing</span> the given value to the <span>collection of media queries</span>.</p></li> </ol></dd> 78.488 -<dt class="attribute" id="widl-MediaList-length"> 78.489 -<code>length</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 78.490 -<dd> 78.491 -<p>The <code>length</code> attribute must return the number of media queries in the <span>collection of media queries</span>.</p></dd> 78.492 -</dl> 78.493 -<dl class="methods"> 78.494 -<dt class="method" id="widl-MediaList-item-DOMString-unsigned-long-index"> 78.495 -<code>item</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt> 78.496 -<dd> 78.497 -<p>The <code>item</code> method must return the media query in the <span>collection of media queries</span> given by <var>index</var>, or null, if <var>index</var> is greater than or equal to the number of media queries in the <span>collection of media queries</span>.</p></dd> 78.498 -<dt class="method" id="widl-MediaList-appendMedium-void-DOMString-medium"> 78.499 -<code>appendMedium</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 78.500 -<dd> 78.501 -<p>The <code>appendMedium</code> method must run these steps:</p> <ol> <li><p>Let <var>m</var> be the result of <span title='parse a media query'>parsing</span> the given value.</p></li> <li><p>If <var>m</var> is null terminate these steps.</p></li> <li><p>If <span title='compare media queries'>comparing</span> <var>m</var> with any of the media queries in the <span>collection of media queries</span> returns true terminate these steps.</p></li> <li><p>Append <var>m</var> to the <span>collection of media queries</span>.</p></li> </ol></dd> 78.502 -<dt class="method" id="widl-MediaList-deleteMedium-void-DOMString-medium"> 78.503 -<code>deleteMedium</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 78.504 -<dd> 78.505 -<p>The <code>deleteMedium</code> method must run these steps:</p> <ol> <li><p>Let <var>m</var> be the result of <span title='parse a media query'>parsing</span> the given value.</p></li> <li><p>If <var>m</var> is null terminate these steps.</p></li> <li><p>Remove any media query from the <span>collection of media queries</span> for which <span title='compare media queries'>comparing</span> the media query with <var>m</var> returns true.</p></li> </ol></dd> 78.506 -</dl> 78.507 -<p>To <dfn id='create-a-medialist-object'>create a <code>MediaList</code> object</dfn> from a string <var>s</var>, run these steps:</p> <ol> <li><p>Create a new {@name} object.</p></li> <li><p>Set its <span title='dom-MediaList-mediaText'>mediaText</span> attribute to <var>s</var>.</p></li> <li><p>Return the newly created <code>{@name}</code> object.</p></li> </ol> 78.508 - 78.509 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.510 - 78.511 - <h2>Selectors</h2> 78.512 - 78.513 - <p>Selectors are defined in the Selectors specification. This section 78.514 - mainly defines how to serialize them.</p> <!-- XXX ref --> 78.515 - 78.516 - <!-- XXX ref universal selector etc? some are in <span> some not --> 78.517 - 78.518 - <!-- ........................................................................................................................ --> 78.519 - <!-- ........................................................................................................................ --> 78.520 - 78.521 - <h3>Parsing Selectors</h3> 78.522 - 78.523 - <p>To 78.524 - <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn> 78.525 - means to parse the value using the <code>selectors_group</code> 78.526 - production defined in the Selectors specification and return either a 78.527 - group of selectors if parsing did not fail or null if parsing did 78.528 - fail.</p> <!-- XXX ref --> 78.529 - 78.530 - <!-- ........................................................................................................................ --> 78.531 - <!-- ........................................................................................................................ --> 78.532 - 78.533 - <h3>Serializing Selectors</h3> 78.534 - <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm --> 78.535 - 78.536 - <p>To 78.537 - <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn> 78.538 - <span title="serialize a selector">serialize</span> each selector in the 78.539 - group of selectors and then 78.540 - <span title="serialize a comma-separated list">serialize</span> the 78.541 - group.</p> 78.542 - 78.543 - <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let 78.544 - <var>s</var> be the empty string, run the steps below for each 78.545 - part of the chain of the selector, and finally return 78.546 - <var>s</var>:</p> 78.547 - 78.548 - <ol> 78.549 - <li><p>If there is only one <span>simple selector</span> in the 78.550 - <span>sequence of simple selectors</span> which is a 78.551 - <span>universal selector</span>, append the result of 78.552 - <span title="serialize a simple selector">serializing</span> the 78.553 - <span>universal selector</span> to <var>s</var>.</p></li> 78.554 - 78.555 - <li><p>Otherwise, for each <span>simple selector</span> in the 78.556 - <span>sequence of simple selectors</span> that is not a 78.557 - universal selector of which the <span>namespace prefix</span> maps to 78.558 - the null namespace (not in a namespace) or of which the 78.559 - <span>namespace prefix</span> maps to a namespace that is not the 78.560 - <span>default namespace</span> 78.561 - <span title="serialize a simple selector">serialize</span> the 78.562 - <span>simple selector</span> and append the result to 78.563 - <var>s</var>.</p></li> 78.564 - 78.565 - <li><p>If this is not the last part of the chain of the selector append a 78.566 - space (U+0020), followed by the combinator 78.567 - "<code>></code>", 78.568 - "<code>+</code>", or 78.569 - "<code>~</code>" 78.570 - as appropriate, followed by another space (U+0020) if the combinator was 78.571 - not whitespace, to <var>s</var>.</p></li> 78.572 - 78.573 - <li><p>If this is the last part of the chain of the selector and there is 78.574 - a pseudo-element, append "<code>::</code>" followed by the name of the 78.575 - pseudo-class, to <var>s</var>.</p></li> 78.576 - </ol> 78.577 - 78.578 - 78.579 - <p>To 78.580 - <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn> 78.581 - let <var>s</var> be the empty string, run the steps below, and 78.582 - finally return <var>s</var>:</p> 78.583 - 78.584 - <dl class="switch"> 78.585 - <dt>type selector</dt> 78.586 - <dt>universal selector</dt> 78.587 - <dd> 78.588 - <ol> 78.589 - <li><p>If the <span>namespace prefix</span> maps to a namespace that is 78.590 - not the <span>default namespace</span> and is not the 78.591 - null namespace (not in a namespace) append the 78.592 - <span title="serialize an identifier">escaped</span> 78.593 - <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C) 78.594 - to <var>s</var>.</p></li> 78.595 - 78.596 - <li><p>If the <span>namespace prefix</span> maps to a namespace that is 78.597 - the null namespace (not in a namespace) append 78.598 - "<code>|</code>" (U+007C) to <var>s</var>.</p></li> 78.599 - <!-- This includes |* --> 78.600 - 78.601 - <li><p>If this is a type selector append the 78.602 - <span title="serialize an identifier">escaped</span> element name to 78.603 - <var>s</var>.</p></li> 78.604 - 78.605 - <li><p>If this is a universal selector append "<code>*</code>" (U+002A) 78.606 - to <var>s</var>.</p></li> 78.607 - </ol> 78.608 - </dd> 78.609 - 78.610 - <dt>attribute selector</dt> 78.611 - <dd> 78.612 - <ol> 78.613 - <li><p>Append "<code>[</code>" (U+005B) to 78.614 - <var>s</var>.</p></li> 78.615 - 78.616 - <li><p>If the <span>namespace prefix</span> maps to a namespace that is 78.617 - not the null namespace (not in a namespace) append the 78.618 - <span title="serialize an identifier">escaped</span> 78.619 - <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C) 78.620 - to <var>s</var>.</p></li> 78.621 - 78.622 - <li><p>If the <span>namespace prefix</span> maps to a namespace that is 78.623 - the null namespace (not in a namespace) append 78.624 - "<code>|</code>" (U+007C) to <var>s</var>.</p></li> 78.625 - <!-- This includes |* --> 78.626 - 78.627 - <li><p>Append the <span title="serialize an identifier">escaped</span> 78.628 - attribute name to <var>s</var>.</p></li> 78.629 - 78.630 - <li><p>If there is an attribute value specified, append 78.631 - "<code>=</code>", 78.632 - "<code>~=</code>", 78.633 - "<code>|=</code>", 78.634 - "<code>^=</code>", 78.635 - "<code>$=</code>", or 78.636 - "<code>*=</code>" 78.637 - as appropriate (depending on the type of attribute selector), followed 78.638 - by the <span title="serialize a string">string escaped</span> 78.639 - attribute value, to <var>s</var>.</p></li> 78.640 - 78.641 - <li><p>Append "<code>]</code>" (U+005D) to 78.642 - <var>s</var>.</p></li> 78.643 - </ol> 78.644 - </dd> 78.645 - 78.646 - <dt>class selector</dt> 78.647 - <dd><p>Append a "<code>.</code>" (U+002E), followed by the 78.648 - <span title="serialize an identifier">escaped</span> class name to 78.649 - <var>s</var>.</p></dd> 78.650 - 78.651 - <dt>ID selector</dt> 78.652 - <dd><p>Append a "<code>#</code>" (U+0023), followed by the 78.653 - <span title="serialize an identifier">escaped</span> ID to 78.654 - <var>s</var>.</p></dd> 78.655 - 78.656 - <dt>pseudo-class</dt> 78.657 - <dd> 78.658 - <p>If the pseudo-class does not accept arguments append 78.659 - "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to 78.660 - <var>s</var>.</p> 78.661 - 78.662 - <p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of 78.663 - the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the 78.664 - value of the pseudo-class argument determined as per below, followed by 78.665 - "<code>)</code>" (U+0029), to <var>s</var>.</p> 78.666 - 78.667 - <dl class="switch"> 78.668 - <dt><code>:lang()</code></dt> 78.669 - <dd><p>The <span title="serialize an identifier">escaped</span> 78.670 - value.</p></dd> 78.671 - 78.672 - <dt><code>:nth-child()</code></dt> 78.673 - <dt><code>:nth-last-child()</code></dt> 78.674 - <dt><code>:nth-of-type()</code></dt> 78.675 - <dt><code>:nth-last-of-type()</code></dt> 78.676 - <dd> 78.677 - <ol> 78.678 - <li><p>If the value is odd let the value be 78.679 - "<code>2n+1</code>".</p></li> 78.680 - 78.681 - <li><p>If the value is even let the value be 78.682 - "<code>2n</code>".</p></li> 78.683 - 78.684 - <li><p>If <var>a</var> is zero let the value be 78.685 - <var>b</var> 78.686 - <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li> 78.687 - 78.688 - <li><p>If <var>a</var> is one or minus one and 78.689 - <var>b</var> is zero let the value be 78.690 - "<code>n</code>" (U+006E).</p></li> 78.691 - 78.692 - <li><p>If <var>a</var> is one or minus one let the value be 78.693 - "<code>n</code>" (U+006E), followed by 78.694 - "<code>+</code>" (U+002B) if <var>b</var> is positive, 78.695 - followed by <var>b</var> 78.696 - <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li> 78.697 - 78.698 - <li><p>If <var>b</var> is zero let the value be 78.699 - <var>a</var> 78.700 - <span title="serialize a CSS component value">serialized</span> as <integer>, 78.701 - followed by "<code>n</code>" (U+006E).</p></li> 78.702 - 78.703 - <li><p>Otherwise let the value be 78.704 - <var>a</var> 78.705 - <span title="serialize a CSS component value">serialized</span> as <integer>, 78.706 - followed by "<code>n</code>" (U+006E), followed by 78.707 - "<code>+</code>" (U+002B) if <var>b</var> is positive, 78.708 - followed by <var>b</var> 78.709 - <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li> 78.710 - </ol> 78.711 - </dd> 78.712 - 78.713 - <dt><code>:not()</code></dt> 78.714 - <dd><p>The result of serializing the value using the rules for 78.715 - <span title="serialize a group of selectors">serializing a group of selectors</span>.</p></dd> 78.716 - </dl> 78.717 - </dd> 78.718 - </dl> 78.719 - 78.720 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.721 - 78.722 - <h2>CSS</h2> 78.723 - 78.724 - <!-- ........................................................................................................................ --> 78.725 - <!-- ........................................................................................................................ --> 78.726 - 78.727 - <h3>Style Sheet</h3> 78.728 - 78.729 - <!-- XXX 78.730 - element inserted into the DOM, style sheet created, element removed from 78.731 - the DOM, what happens to StyleSheet? 78.732 - --> 78.733 - 78.734 - <p>A <dfn id="style-sheet">style sheet</dfn> is an abstract concept that 78.735 - represents a style sheet as defined by the CSS specification. In the DOM a 78.736 - <span>style sheet</span> is a <code>CSSStyleSheet</code> object. A 78.737 - <span>style sheet</span> has a number of associated properties:</p> 78.738 - 78.739 - <dl> 78.740 - <dt><dfn id="style-sheet-type">style sheet type</dfn></dt> 78.741 - <dd><p>The literal string "<code>text/css</code>".</p></dd> 78.742 - 78.743 - <dt><dfn id="style-sheet-location">style sheet location</dfn></dt> 78.744 - <dd><p>The <span data-anolis-spec="html">URL</span> of the 78.745 - <span>style sheet</span> or null if the <span>style sheet</span> was 78.746 - embedded.</p></dd> 78.747 - 78.748 - <dt><dfn id="style-sheet-parent">style sheet parent</dfn></dt> 78.749 - <dd><p>The <span>style sheet</span> that is the parent of the 78.750 - <span>style sheet</span>.</p></dd> 78.751 - 78.752 - <dt><dfn id="style-sheet-owner-node">style sheet owner node</dfn></dt> 78.753 - <dd><p>The DOM node associated with the <span>style sheet</span> or 78.754 - null if there is no associated DOM node.</p></dd> 78.755 - 78.756 - <dt><dfn id="style-sheet-owner-css-rule">style sheet owner CSS rule</dfn></dt> 78.757 - <dd><p>The <span>CSS rule</span> in the <span>style sheet parent</span> 78.758 - that caused the inclusion of the <span>style sheet</span> or null if 78.759 - there is no such <span>CSS rule</span>.</p></dd> 78.760 - 78.761 - <dt><dfn id="style-sheet-media">style sheet media</dfn></dt> 78.762 - <dd> 78.763 - <p>The <code>MediaList</code> object associated with the 78.764 - <span>style sheet</span>.</p> 78.765 - 78.766 - <p>If this property is set to a string run the 78.767 - <span>create a <code>MediaList</code> object</span> steps for that 78.768 - string and associate the returned object with the 78.769 - <span>style sheet</span>.</p> 78.770 - </dd> 78.771 - 78.772 - <dt><dfn id="style-sheet-title">style sheet title</dfn></dt> 78.773 - <dd> 78.774 - <p>The title of the <span>style sheet</span>. It is said to be empty 78.775 - if the title is the empty string.</p> 78.776 - 78.777 - <div class="example"> 78.778 - <p>In these examples the <span>style sheet title</span> ends up being 78.779 - empty:</p> 78.780 - 78.781 - <pre><style> body { background:papayawhip } </style></pre> 78.782 - 78.783 - <pre><style> body { background:orange } </style></pre> 78.784 - </div> 78.785 - </dd> 78.786 - 78.787 - <dt><dfn id="style-sheet-alternate-flag">style sheet alternate flag</dfn></dt> 78.788 - <dd> 78.789 - <p>Either set or unset. Unset by default.</p> 78.790 - 78.791 - <div class="example"> 78.792 - <p>The following <span title="style sheet">style sheets</span> have 78.793 - their <span>style sheet alternate flag</span> set:</p> 78.794 - 78.795 - <pre><code><?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?></code></pre> 78.796 - 78.797 - <pre><code><link rel="alternate stylesheet" title="x" href="data:text/css,…"></code></pre> 78.798 - </div> 78.799 - </dd> 78.800 - 78.801 - <dt><dfn id="style-sheet-disabled-flag">style sheet disabled flag</dfn></dt> 78.802 - <dd> 78.803 - <p>Either set or unset. Unset by default.</p> 78.804 - 78.805 - <p class="note">Even when unset it does not necessarily mean that the 78.806 - <span>style sheet</span> is actually used for rendering.</p> 78.807 - </dd> 78.808 - 78.809 - 78.810 - <dt><dfn id="style-sheet-css-rules">style sheet CSS rules</dfn></dt> 78.811 - <dd><p>The <span title="CSS rule">CSS rules</span> associated with the 78.812 - <span>style sheet</span>.</p></dd> 78.813 - </dl> 78.814 - 78.815 - <p>When you are to <span>create a style sheet</span> the above properties, 78.816 - with the exception of <span>style sheet type</span> and 78.817 - <span>style sheet CSS rules</span>, are to be set to 78.818 - their proper values.</p> 78.819 - 78.820 - <!-- same-origin restrictions --> 78.821 - 78.822 - <!-- ........................................................................................................................ --> 78.823 - 78.824 - <h4>The <code>StyleSheet</code> Interface</h4> 78.825 - 78.826 - <p>The <code>StyleSheet</code> interface represents an abstract, base style sheet.</p> 78.827 -<pre class="idl"><span class="idlInterface" id="widl-def-StyleSheet">interface <span class="idlInterfaceID">StyleSheet</span> { 78.828 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-type">type</a></span>;</span> 78.829 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-href">href</a></span>;</span> 78.830 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>Node</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-ownerNode">ownerNode</a></span>;</span> 78.831 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>StyleSheet</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-parentStyleSheet">parentStyleSheet</a></span>;</span> 78.832 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-title">title</a></span>;</span> 78.833 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>MediaList</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-media">media</a></span>;</span> 78.834 -<span class="idlAttribute"> attribute <span class="idlAttrType"><a>boolean</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-disabled">disabled</a></span>;</span> 78.835 -};</span></pre> 78.836 -<dl class="attributes"> 78.837 -<dt class="attribute" id="widl-StyleSheet-type"> 78.838 -<code>type</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.839 -<dd> 78.840 -<p>The <code>type</code> attribute must return the <span>style sheet type</span>.</p></dd> 78.841 -<dt class="attribute" id="widl-StyleSheet-href"> 78.842 -<code>href</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.843 -<dd> 78.844 -<p>The <code>href</code> attribute must return the <span>style sheet location</span>.</p></dd> 78.845 -<dt class="attribute" id="widl-StyleSheet-ownerNode"> 78.846 -<code>ownerNode</code> of type <span class="idlAttrType"><a>Node</a></span>, readonly</dt> 78.847 -<dd> 78.848 -<p>The <code>ownerNode</code> attribute must return the <span>style sheet owner node</span>.</p></dd> 78.849 -<dt class="attribute" id="widl-StyleSheet-parentStyleSheet"> 78.850 -<code>parentStyleSheet</code> of type <span class="idlAttrType"><a>StyleSheet</a></span>, readonly</dt> 78.851 -<dd> 78.852 -<p>The <code>parentStyleSheet</code> attribute must return the <span>style sheet parent</span>.</p></dd> 78.853 -<dt class="attribute" id="widl-StyleSheet-title"> 78.854 -<code>title</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.855 -<dd> 78.856 -<p>The <code>title</code> attribute must return the <span>style sheet title</span>.</p></dd> 78.857 -<dt class="attribute" id="widl-StyleSheet-media"> 78.858 -<code>media</code> of type <span class="idlAttrType"><a>MediaList</a></span>, readonly</dt> 78.859 -<dd> 78.860 -<p>The <code>media</code> attribute must return the <span>style sheet media</span>.</p></dd> 78.861 -<dt class="attribute" id="widl-StyleSheet-disabled"> 78.862 -<code>disabled</code> of type <span class="idlAttrType"><a>boolean</a></span></dt> 78.863 -<dd> 78.864 -<p>The <code>disabled</code> attribute must return true if the <span>style sheet disabled flag</span> is set, or false otherwise.</p> <p>Setting the <code>disabled</code> attribute must set the <span>style sheet disabled flag</span> if the new value is true, or unset the <span>style sheet disabled flag</span> otherwise.</p></dd> 78.865 -</dl> 78.866 - 78.867 - 78.868 - <!-- ........................................................................................................................ --> 78.869 - 78.870 - <h4>The <code>CSSStyleSheet</code> Interface</h4> 78.871 - 78.872 - <p>The <code>CSSStyleSheet</code> interface represents a CSS <span>style sheet</span> rule.</p> 78.873 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSStyleSheet">interface <span class="idlInterfaceID">CSSStyleSheet</span> { 78.874 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRule</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleSheet-ownerRule">ownerRule</a></span>;</span> 78.875 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRuleList</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleSheet-cssRules">cssRules</a></span>;</span> 78.876 -<span class="idlMethod"> <span class="idlMethType"><a>unsigned long</a></span> <span class="idlMethName"><a href="#widl-CSSStyleSheet-insertRule-unsigned-long-DOMString-rule-unsigned-long-index">insertRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">rule</span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span> 78.877 -<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-CSSStyleSheet-deleteRule-void-unsigned-long-index">deleteRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span> 78.878 -};</span></pre> 78.879 -<dl class="attributes"> 78.880 -<dt class="attribute" id="widl-CSSStyleSheet-ownerRule"> 78.881 -<code>ownerRule</code> of type <span class="idlAttrType"><a>CSSRule</a></span>, readonly</dt> 78.882 -<dd> 78.883 -<p>The <code>ownerRule</code> attribute must return the <span>style sheet owner CSS rule</span>.</p></dd> 78.884 -<dt class="attribute" id="widl-CSSStyleSheet-cssRules"> 78.885 -<code>cssRules</code> of type <span class="idlAttrType"><a>CSSRuleList</a></span>, readonly</dt> 78.886 -<dd> 78.887 -<p>The <code>cssRules</code> attribute must return a <code>CSSRuleList</code> object representing the <span>style sheet CSS rules</span>.</p> <p class='note'>CSS rules that were dropped during parsing can not be found using APIs described by this specification.</p></dd> 78.888 -</dl> 78.889 -<dl class="methods"> 78.890 -<dt class="method" id="widl-CSSStyleSheet-insertRule-unsigned-long-DOMString-rule-unsigned-long-index"> 78.891 -<code>insertRule</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span></span>), returns <span class="idlMethType"><a>unsigned long</a></span></dt> 78.892 -<dd> 78.893 -<p>The <code>insertRule</code> operation must <span>insert a CSS rule</span> <var>rule</var> the in CSS rule list returned by <code title='dom-CSSStyleSheet-cssRules'>cssRules</code> at <var>index</var>.</p></dd> 78.894 -<dt class="method" id="widl-CSSStyleSheet-deleteRule-void-unsigned-long-index"> 78.895 -<code>deleteRule</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 78.896 -<dd> 78.897 -<p>The <code>deleteRule</code> operation must <span>remove a CSS rule</span> from the CSS rule list returned by <code title='dom-CSSStyleSheet-cssRules'>cssRules</code> at <var>index</var>.</p></dd> 78.898 -</dl> 78.899 - 78.900 - 78.901 - <!-- ........................................................................................................................ --> 78.902 - <!-- ........................................................................................................................ --> 78.903 - 78.904 - <h3>Style Sheet Collections</h3> 78.905 - 78.906 - <p>Below various new concepts are defined that are associated with each 78.907 - <code data-anolis-spec="dom">Document</code> object.</p> 78.908 - 78.909 - <p>Each <code data-anolis-spec="dom">Document</code> has an associated list of zero or more 78.910 - <span title="style sheet">style sheets</span>, named the 78.911 - <dfn id="document-style-sheets">document style sheets</dfn>. This is 78.912 - an ordered list that contains all 78.913 - <span title="style sheet">style sheets</span> associated with the 78.914 - <code data-anolis-spec="dom">Document</code>, in 78.915 - <span data-anolis-spec="dom" title="concept-tree-order">tree order</span>, with 78.916 - <span title="style sheet">style sheets</span> created from HTTP 78.917 - <code title="http-link">Link</code> headers first, if any, in header 78.918 - order.</p> 78.919 - 78.920 - <p>To <dfn id="create-a-style-sheet">create a style sheet</dfn>, run these 78.921 - steps:</p> 78.922 - 78.923 - <ol> 78.924 - <li><p>Create a new <span>style sheet</span> object and set its 78.925 - properties as specified.</p></li> 78.926 - 78.927 - <li><p>Then run the <span>add a style sheet</span> steps for the newly 78.928 - created <span>style sheet</span>.</p></li> 78.929 - </ol> 78.930 - 78.931 - <p>To <dfn id="add-a-style-sheet">add a style sheet</dfn>, run these 78.932 - steps:</p> 78.933 - 78.934 - <ol> 78.935 - <li><p>Add the <span>style sheet</span> to the list of 78.936 - <span>document style sheets</span> at the appropriate location. The 78.937 - remainder of these steps deal with the 78.938 - <span>style sheet disabled flag</span>.</p></li> 78.939 - 78.940 - <li><p>If the <span>style sheet disabled flag</span> is set, terminate 78.941 - these steps.</p></li> 78.942 - 78.943 - <li><p>If the <span>style sheet title</span> is non-empty, the 78.944 - <span>style sheet alternate flag</span> is unset, and 78.945 - <span>preferred style sheet set name</span> is the empty string 78.946 - <span>change the preferred style sheet set name</span> to the 78.947 - <span>style sheet title</span>.</p></li> 78.948 - 78.949 - <li> 78.950 - <p>If any of the following is true unset the 78.951 - <span>style sheet disabled flag</span> and terminate these steps: 78.952 - 78.953 - </p><ul> 78.954 - <li><p>The <span>style sheet title</span> is empty.</p></li> 78.955 - <li><p>The <span>last style sheet set name</span> is null and the 78.956 - <span>style sheet title</span> is a 78.957 - <span data-anolis-spec="dom">case-sensitive</span> match 78.958 - for the <span>preferred style sheet set name</span>.</p></li> 78.959 - <li><p>The <span>style sheet title</span> is a 78.960 - <span data-anolis-spec="dom">case-sensitive</span> match for the 78.961 - <span>last style sheet set name</span>.</p></li> 78.962 - </ul> 78.963 - </li> 78.964 - 78.965 - <li><p>Set the <span>style sheet disabled flag</span>.</p></li> 78.966 - </ol> 78.967 - 78.968 - <p>A <dfn id="persistent-style-sheet">persistent style sheet</dfn> is a 78.969 - <span>style sheet</span> from the <span>document style sheets</span> 78.970 - whose <span>style sheet title</span> is the empty string and whose 78.971 - <span>style sheet alternate flag</span> is unset.</p> 78.972 - 78.973 - <p>A <dfn id="style-sheet-set">style sheet set</dfn> is an ordered 78.974 - collection of one or more <span title="style sheet">style sheets</span> 78.975 - from the <span>document style sheets</span> which have an identical 78.976 - <span>style sheet title</span> that is not the empty string.</p> 78.977 - 78.978 - <p>A <dfn id="style-sheet-set-name">style sheet set name</dfn> is the 78.979 - <span>style sheet title</span> the <span>style sheet set</span> has in 78.980 - common.</p> 78.981 - 78.982 - <p>An <dfn id="enabled-style-sheet-set">enabled style sheet set</dfn> is a 78.983 - <span>style sheet set</span> of which each <span>style sheet</span> has 78.984 - its <span>style sheet disabled flag</span> unset.</p> 78.985 - 78.986 - <p>To <dfn id="enable-a-style-sheet-set">enable a style sheet set</dfn> 78.987 - with name <var>name</var>, run these steps:</p> 78.988 - 78.989 - <ol> 78.990 - <li><p>If <var>name</var> is the empty string, set the 78.991 - <span>style sheet disabled flag</span> for each <span>style sheet</span> 78.992 - that is in a <span>style sheet set</span> and terminate these steps.</p></li> 78.993 - 78.994 - <li><p>Unset the <span>style sheet disabled flag</span> for each 78.995 - <span>style sheet</span> in a <span>style sheet set</span> whose 78.996 - <span>style sheet set name</span> is a 78.997 - <span data-anolis-spec="dom">case-sensitive</span> match for 78.998 - <var>name</var> and set it for all other 78.999 - <span title="style sheet">style sheets</span> in a 78.1000 - <span>style sheet set</span>.</p></li> 78.1001 - </ol> 78.1002 - 78.1003 - <p>To <dfn id="select-a-style-sheet-set">select a style sheet set</dfn> 78.1004 - with name <var>name</var>, run these steps:</p> 78.1005 - 78.1006 - <ol> 78.1007 - <li><p><span>Enable a style sheet set</span> with name 78.1008 - <var>name</var>.</p></li> 78.1009 - 78.1010 - <li><p>Set <span>last style sheet set name</span> to 78.1011 - <var>name</var>.</p></li> 78.1012 - </ol> 78.1013 - 78.1014 - <p>A <dfn id="last-style-sheet-set-name">last style sheet set name</dfn> 78.1015 - is a concept to determine what <span>style sheet set</span> was last 78.1016 - <span title="select a style sheet set">selected</span>. Initially its 78.1017 - value is null.</p> 78.1018 - 78.1019 - <p>A 78.1020 - <dfn id="preferred-style-sheet-set-name">preferred style sheet set name</dfn> 78.1021 - is a concept to determine which 78.1022 - <span title="style sheet">style sheets</span> need to have their 78.1023 - <span>style sheet disabled flag</span> unset. Initially its value 78.1024 - is the empty string. 78.1025 - 78.1026 - </p><p>To 78.1027 - <dfn id="change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</dfn> 78.1028 - with name <var>name</var>, run these steps:</p> 78.1029 - 78.1030 - <ol> 78.1031 - <li><p>Let the <span>preferred style sheet set name</span> be 78.1032 - <var>current</var>.</p></li> 78.1033 - 78.1034 - <li><p>Set <span>preferred style sheet set name</span> to 78.1035 - <var>name</var>.</p></li> 78.1036 - 78.1037 - <li><p>If <var>name</var> is not a 78.1038 - <span data-anolis-spec="dom">case-sensitive</span> match for 78.1039 - <var>current</var> and 78.1040 - <span>last style sheet set name</span> is null 78.1041 - <span>enable a style sheet set</span> with name 78.1042 - <var>new</var>.</p></li> 78.1043 - </ol> 78.1044 - 78.1045 - <!-- XXX ought to define "applied" 78.1046 - 78.1047 - thoughts: 78.1048 - depends on disabled flag, alternate flag, media queries, sheesh 78.1049 - --> 78.1050 - 78.1051 - <!-- ........................................................................................................................ --> 78.1052 - 78.1053 - <h4>The HTTP <code>Default-Style</code> Header</h4> 78.1054 - 78.1055 - <p>The HTTP <code title="http-default-style">Default-Style</code> header 78.1056 - can be used to set the <span>preferred style sheet set name</span> 78.1057 - influencing which <span>style sheet set</span> is (initially) the 78.1058 - <span>enabled style sheet set</span>.</p> 78.1059 - 78.1060 - <p>For each HTTP <code title="http-default-style">Default-Style</code> 78.1061 - header, in header order, the user agent must 78.1062 - <span>change the preferred style sheet set name</span> with name being the 78.1063 - value of the header.</p> 78.1064 - 78.1065 - <!-- ........................................................................................................................ --> 78.1066 - 78.1067 - <h4>The <code>StyleSheetList</code> Sequence</h4> 78.1068 - 78.1069 - <p>The <code>StyleSheetList</code> sequence represents an ordered collection of <span title='style sheets'>style sheets</span>.</p> 78.1070 -<pre class="idl">[[TBD - TYPEDEF]] 78.1071 -</pre> 78.1072 - 78.1073 - 78.1074 - <!-- ........................................................................................................................ --> 78.1075 - 78.1076 - <h4>Extensions to the <code>Document</code> Interface</h4> 78.1077 - 78.1078 - 78.1079 -<pre class="idl"><span class="idlInterface" id="widl-def-Document">partial interface <span class="idlInterfaceID">Document</span> { 78.1080 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>StyleSheetList</a></span> <span class="idlAttrName"><a href="#widl-Document-styleSheets">styleSheets</a></span>;</span> 78.1081 -<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-Document-selectedStyleSheetSet">selectedStyleSheetSet</a></span>;</span> 78.1082 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-Document-lastStyleSheetSet">lastStyleSheetSet</a></span>;</span> 78.1083 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-Document-preferredStyleSheetSet">preferredStyleSheetSet</a></span>;</span> 78.1084 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMStringList</a></span> <span class="idlAttrName"><a href="#widl-Document-styleSheetSets">styleSheetSets</a></span>;</span> 78.1085 -<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-Document-enableStyleSheetsForSet-void-DOMString-name">enableStyleSheetsForSet</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a>?</span> <span class="idlParamName">name</span></span>);</span> 78.1086 -};</span></pre> 78.1087 -<dl class="attributes"> 78.1088 -<dt class="attribute" id="widl-Document-styleSheets"> 78.1089 -<code>styleSheets</code> of type <span class="idlAttrType"><a>StyleSheetList</a></span>, readonly</dt> 78.1090 -<dd> 78.1091 -<p>The <code>styleSheets</code> attribute must return a <code>StyleSheetList</code> sequence representing the <span>document style sheets</span>.</p> <p class='note'>Because of historical IDL limitations the <code>styleSheets</code> attribute used to be on a separate interface, <code>DocumentStyle</code>.</p></dd> 78.1092 -<dt class="attribute" id="widl-Document-selectedStyleSheetSet"> 78.1093 -<code>selectedStyleSheetSet</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt> 78.1094 -<dd> 78.1095 -<p>The <code>selectedStyleSheetSet</code> attribute must, on getting, must run these steps:</p> <ol> <li><p>If there is a single <span>enabled style sheet set</span> and no other <span>document style sheets</span> with a non-empty <span>style sheet title</span> have the <span>style sheet disabled flag</span> unset, return the <span>style sheet set name</span> of the <span>enabled style sheet set</span> and terminate these steps.</li> <li><p>Otherwise, if <span title='style sheet'>style sheets</span> from different <span title='style sheet set'>style sheet sets</span> have their <span>style sheet disabled flag</span> unset, return null and terminate these steps.</li> <li> <p>Otherwise, return the empty string.</p> <p class='note'>At this point either all <span title='style sheet'>style sheets</span> with a non-empty <span>style sheet title</span> have the <span>style sheet disabled flag</span> set, or there are no such <span title='style sheet'>style sheets</span>.</p> </li> </ol> <p>On setting the <code title='dom-Document-selectedStyleSheetSet'>selectedStyleSheetSet</code> attribute these steps must be run:</p> <ol> <li><p>If the value is null terminate this set of steps.</p></li> <li><p>Otherwise, <span>select a style sheet set</span> with as name the value passed.</p></li> </ol> <p>From the DOM's perspective, all views have the same <code title='dom-Document-selectedStyleSheetSet'>selectedStyleSheetSet</code>. If a user agent supports multiple views with different selected alternative style sheets, then this attribute (and the <code>StyleSheet</code> interface's <code title='dom-StyleSheet-disabled'>disabled</code> attribute) must return and set the value for the default view.</p></dd> 78.1096 -<dt class="attribute" id="widl-Document-lastStyleSheetSet"> 78.1097 -<code>lastStyleSheetSet</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.1098 -<dd> 78.1099 -<p>The <code>lastStyleSheetSet</code> attribute must return the <span>last style sheet set name</span>.</p> <p class='note'>This attribute is initially null.</p></dd> 78.1100 -<dt class="attribute" id="widl-Document-preferredStyleSheetSet"> 78.1101 -<code>preferredStyleSheetSet</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.1102 -<dd> 78.1103 -<p>The <code>preferredStyleSheetSet</code> attribute must return the <span>preferred style sheet set name</span>.</p> <p class='note'>Unlike <code title='dom-Document-lastStyleSheetSet'>lastStyleSheetSet</code>, this attribute is initially the empty string.</p></dd> 78.1104 -<dt class="attribute" id="widl-Document-styleSheetSets"> 78.1105 -<code>styleSheetSets</code> of type <span class="idlAttrType"><a>DOMStringList</a></span>, readonly</dt> 78.1106 -<dd> 78.1107 -<p>The <code>styleSheetSets</code> attribute must return a list of the <span title='style sheet set name'>style sheet set names</span> of the <span title='style sheet set'>style sheet sets</span>, in order of the <span>document style sheets</span>.</p></dd> 78.1108 -</dl> 78.1109 -<dl class="methods"> 78.1110 -<dt class="method" id="widl-Document-enableStyleSheetsForSet-void-DOMString-name"> 78.1111 -<code>enableStyleSheetsForSet</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a>?</span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 78.1112 -<dd> 78.1113 -<p>The <code>enableStyleSheetsForSet</code> operation must, when invoked, run these steps:</p> <ol> <li><p>If <var>name</var> is null terminate these steps.</p></li> <li><p><span>Enable a style sheet set</span> with name <var>name</var>.</p></li> </ol> <p class='note'><span title='Style sheet'>Style sheets</span> with an empty <span>style sheet title</span> are never affected by this method. This method does not change the values of the <code title='dom-Document-lastStyleSheetSet'>lastStyleSheetSet</code> or <code title='dom-Document-preferredStyleSheetSet'>preferredStyleSheetSet</code> attributes.</p></dd> 78.1114 -</dl> 78.1115 - 78.1116 - 78.1117 - <!-- ........................................................................................................................ --> 78.1118 - 78.1119 - <h4>Interaction with the User Interface</h4> 78.1120 - 78.1121 - <p>The user interface of Web browsers that support style sheets 78.1122 - should list the style sheet titles given in the 78.1123 - <code title="dom-Document-styleSheetSets">styleSheetSets</code> list, 78.1124 - showing the 78.1125 - <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> 78.1126 - as the selected style sheet set, leaving none selected if it is 78.1127 - null or the empty string, and selecting an extra option 78.1128 - "Basic Page Style" (or similar) if it is the empty string and the 78.1129 - <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code> 78.1130 - is the empty string as well.</p> 78.1131 - 78.1132 - <p>Selecting a style sheet from this list should 78.1133 - use the <span>select a style sheet set</span> set of steps. This 78.1134 - (by definition) affects the 78.1135 - <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> 78.1136 - attribute.</p> 78.1137 - 78.1138 - <h5>Persisting the selected style sheet set</h5> 78.1139 - 78.1140 - <p>If a user agent persist the selected style sheet set, they should use 78.1141 - the value of the 78.1142 - <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> 78.1143 - attribute, or if that is null, the 78.1144 - <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> 78.1145 - attribute, when leaving the page (or at some other time) to determine the 78.1146 - set name to store. If that is null then the style sheet set should not be 78.1147 - persisted.</p> 78.1148 - 78.1149 - <p>When re-setting the style sheet set to the persisted value (which can 78.1150 - happen at any time, typically at the first time the style sheets are 78.1151 - needed for styling the document, after the <code><head></code> of 78.1152 - the document has been parsed, after any scripts that are not dependent on 78.1153 - computed style have executed), the style sheet set 78.1154 - should be set by using the 78.1155 - <span>select a style sheet set</span> set of steps as if the user had 78.1156 - selected the set manually.</p> 78.1157 - 78.1158 - <p class="note">This specification does not give any suggestions on 78.1159 - how user agents should decide to persist the style sheet set or whether or 78.1160 - how to persist the selected set across pages.</p> 78.1161 - 78.1162 - <!-- XXX this UI section suggests we may want to introduce a few more 78.1163 - idioms --> 78.1164 - 78.1165 - <!-- ........................................................................................................................ --> 78.1166 - 78.1167 - <h4>Examples</h4> 78.1168 - 78.1169 - <div class="example"> 78.1170 - <p>Thus, in the following HTML snippet:</p> 78.1171 - 78.1172 - <pre><link rel="alternate stylesheet" title="foo" href="a"> 78.1173 -<link rel="alternate stylesheet" title="bar" href="b"> 78.1174 -<script> 78.1175 - 78.1176 - document.selectedStyleSheetSet = 'foo'; 78.1177 - document.styleSheets[1].disabled = false; 78.1178 -</script> 78.1179 -<link rel="alternate stylesheet" title="foo" href="c"> 78.1180 -<link rel="alternate stylesheet" title="bar" href="d"></pre> 78.1181 - 78.1182 - <p>...the style sheets that end up enabled are style sheets "a", "b", 78.1183 - and "c", the 78.1184 - <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> 78.1185 - attribute would return null, 78.1186 - <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> 78.1187 - would return "foo", and 78.1188 - <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code> 78.1189 - would return the empty string.</p> 78.1190 - 78.1191 - <p>Similarly, in the following HTML snippet:</p> 78.1192 - 78.1193 - <pre><link rel="alternate stylesheet" title="foo" href="a"> 78.1194 -<link rel="alternate stylesheet" title="bar" href="b"> 78.1195 -<script> 78.1196 - var before = document.preferredStyleSheetSet; 78.1197 - document.styleSheets[1].disabled = false; 78.1198 -</script> 78.1199 -<link rel="stylesheet" title="foo" href="c"> 78.1200 - 78.1201 -<link rel="alternate stylesheet" title="bar" href="d"> 78.1202 -<script> 78.1203 - var after = document.preferredStyleSheetSet; 78.1204 -</script></pre> 78.1205 - 78.1206 - <p>...the "before" variable will be equal to the empty string, the 78.1207 - "after" variable will be equal to "foo", and style sheets "a" and "c" 78.1208 - will be enabled. This is the case even though the first script block 78.1209 - sets style sheet "b" to be enabled, because upon parsing the 78.1210 - following <code><link></code> element, the 78.1211 - <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code> 78.1212 - is set and the 78.1213 - <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code> 78.1214 - method is called (since 78.1215 - <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> 78.1216 - was never set 78.1217 - explicitly, leaving 78.1218 - <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at 78.1219 - null throughout), which changes which style sheets are enabled and which 78.1220 - are not.</p> 78.1221 - </div> 78.1222 - 78.1223 - <!-- ........................................................................................................................ --> 78.1224 - <!-- ........................................................................................................................ --> 78.1225 - 78.1226 - <h3>Style Sheet Association</h3> 78.1227 - 78.1228 - <p>This section defines the interface a 78.1229 - <span>style sheet owner node</span> of a <span>style sheet</span> has to 78.1230 - implement and defines the requirements for 78.1231 - <span data-anolis-spec="xmlss" title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</span> 78.1232 - and HTTP <code title="http-link">Link</code> headers when the link 78.1233 - relation type is an 78.1234 - <span data-anolis-spec="dom">ASCII case-insensitive</span> match for 78.1235 - "<code>stylesheet</code>" since nobody else was interested in 78.1236 - defining this.</p> 78.1237 - 78.1238 - <p class="note">The editor is in good hope that HTML and SVG will define the 78.1239 - appropriate processing in their respective specifications, in terms of 78.1240 - this specification, in due course.</p> 78.1241 - 78.1242 - 78.1243 - <!-- ........................................................................................................................ --> 78.1244 - 78.1245 - <h4>The <code>LinkStyle</code> Interface</h4> 78.1246 - 78.1247 - <p>The <dfn id='associated-style-sheet'>associated style sheet</dfn> of a node is the <span>style sheet</span> in the list of <span>document style sheets</span> of which the <span>style sheet owner node</span> implements the <code>LinkStyle</code> interface.</p> 78.1248 -<pre class="idl"><span class="idlInterface" id="widl-def-LinkStyle">interface <span class="idlInterfaceID">LinkStyle</span> { 78.1249 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>StyleSheet</a></span> <span class="idlAttrName"><a href="#widl-LinkStyle-sheet">sheet</a></span>;</span> 78.1250 -};</span></pre> 78.1251 -<dl class="attributes"> 78.1252 -<dt class="attribute" id="widl-LinkStyle-sheet"> 78.1253 -<code>sheet</code> of type <span class="idlAttrType"><a>StyleSheet</a></span>, readonly</dt> 78.1254 -<dd> 78.1255 -<p>The <code>sheet</code> attribute must return the <span>associated style sheet</span> for the node, or null, if there is no <span>associated style sheet</span>.</p></dd> 78.1256 -</dl> 78.1257 - 78.1258 - 78.1259 - <div class="example"> 78.1260 - <p>In the following HTML snippet the first HTML <code>style</code> 78.1261 - element has a <code>sheet</code> attribute that returns a 78.1262 - <code>StyleSheet</code> object representing the style sheet, but for 78.1263 - the second <code>style</code> attribute it returns null. 78.1264 - (Assuming the user agent supports CSS (<code>text/css</code>) and does 78.1265 - not support ExampleSheets (<code>text/example-sheets</code>).</p> 78.1266 - 78.1267 - <pre><style type=text/css> body { background:lime } </style> 78.1268 -<style type=text/example-sheets> $(body).background := lime </style></pre> 78.1269 - </div> 78.1270 - 78.1271 - <p class="note">Whether or not the node refers to a style sheet is defined 78.1272 - by the specification that defines the semantics of said node.</p> 78.1273 - 78.1274 - <!-- ........................................................................................................................ --> 78.1275 - 78.1276 - <h4>Requirements on specifications</h4> 78.1277 - 78.1278 - <p>Specifications introducing new ways of associating style sheets through 78.1279 - the DOM should define which nodes implement the 78.1280 - <code>LinkStyle</code> interface. When doing so, they 78.1281 - must also define when a <span>style sheet</span> is 78.1282 - <span title="create a style sheet">created</span>.</p> 78.1283 - 78.1284 - 78.1285 - 78.1286 - 78.1287 - <!-- ........................................................................................................................ --> 78.1288 - 78.1289 - <h4>Requirements on User Agents Implementing the 78.1290 - <span><code>xml-stylesheet</code> processing instruction</span></h4> 78.1291 - 78.1292 - <!-- XXX load/error events, reparse --> 78.1293 - 78.1294 - 78.1295 -<pre class="idl">[[TBD - IMPLEMENTS]] 78.1296 -</pre> 78.1297 - 78.1298 - 78.1299 - <!-- 78.1300 - <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre> 78.1301 - --> 78.1302 - 78.1303 - <p>For each 78.1304 - <span data-anolis-spec="xmlss"><code>xml-stylesheet</code> processing instruction</span> 78.1305 - that is not part of the 78.1306 - <span data-anolis-spec="xml">document type declaration</span> and has an 78.1307 - <code>href</code> 78.1308 - <span data-anolis-spec="xmlss">pseudo-attribute</span> these steps must 78.1309 - (unless otherwise stated) be run:</p> 78.1310 - 78.1311 - <ol> 78.1312 - <li><p>Let <var>title</var> be the value of the 78.1313 - <code>title</code> <span data-anolis-spec="xmlss">pseudo-attribute</span> or the empty string if the 78.1314 - <code>title</code> <span data-anolis-spec="xmlss">pseudo-attribute</span> is not specified.</p></li> 78.1315 - 78.1316 - <li><p>If there is an <code>alternate</code> <span data-anolis-spec="xmlss">pseudo-attribute</span> 78.1317 - whose value is a <span data-anolis-spec="dom">case-sensitive</span> match 78.1318 - for "<code>yes</code>" and <var>title</var> is the 78.1319 - empty string terminate these steps.</p></li> 78.1320 - 78.1321 - <li><p>If there is a <code>type</code> <span data-anolis-spec="xmlss">pseudo-attribute</span> whose 78.1322 - value is not a <span>supported styling language</span> the user agent 78.1323 - may terminate these steps.</p></li> 78.1324 - 78.1325 - <li><p><span data-anolis-spec="html" title="Resolve a URL">Resolve</span> 78.1326 - the <span data-anolis-spec="html">URL</span> specified by the 78.1327 - <code>href</code> <span data-anolis-spec="xmlss">pseudo-attribute</span> and then 78.1328 - <span data-anolis-spec="html">fetch</span> it.</p></li> 78.1329 - 78.1330 - <li> 78.1331 - <p>When the resource is available, the document is in 78.1332 - <span data-anolis-spec="dom" title="concept-quirks-mode">quirks mode</span> 78.1333 - and the 78.1334 - <span data-anolis-spec="html">Content-Type metadata</span> of 78.1335 - the resource is not a <span>supported styling language</span> change the 78.1336 - <span data-anolis-spec="html">Content-Type metadata</span> of the resource 78.1337 - to <code>text/css</code>.</p> 78.1338 - 78.1339 - <p class="note">This step might never actually happen, but is included 78.1340 - here in case other specifications change, to keep things consistent.</p> 78.1341 - </li> 78.1342 - 78.1343 - <li><p>If the resource is not in a 78.1344 - <span>supported styling language</span> terminate these steps.</p></li> 78.1345 - 78.1346 - <li> 78.1347 - <p><span>Create a style sheet</span> with the following properties:</p> 78.1348 - 78.1349 - <dl> 78.1350 - <dt><span>style sheet location</span></dt> 78.1351 - <dd><p>The <span data-anolis-spec="html">absolute URL</span> of the 78.1352 - resource.</p></dd> 78.1353 - 78.1354 - <dt><span>style sheet parent</span></dt> 78.1355 - <dd><p>null</p></dd> 78.1356 - 78.1357 - <dt><span>style sheet owner node</span></dt> 78.1358 - <dd><p>The node.</p></dd> 78.1359 - 78.1360 - <dt><span>style sheet owner CSS rule</span></dt> 78.1361 - <dd><p>null</p></dd> 78.1362 - 78.1363 - <dt><span>style sheet media</span></dt> 78.1364 - <dd><p>The value of the <code>media</code> <span data-anolis-spec="xmlss">pseudo-attribute</span> 78.1365 - if any, or the empty string otherwise.</p></dd> 78.1366 - 78.1367 - <dt><span>style sheet title</span></dt> 78.1368 - <dd><p><var>title</var></p></dd> 78.1369 - 78.1370 - <dt><span>style sheet alternate flag</span></dt> 78.1371 - <dd><p>Set if the <code>alternate</code> <span data-anolis-spec="xmlss">pseudo-attribute</span> 78.1372 - value is a <span data-anolis-spec="dom">case-sensitive</span> match for 78.1373 - "<code>yes</code>", or unset otherwise. 78.1374 - </p></dd></dl> 78.1375 - </li> 78.1376 - </ol> 78.1377 - 78.1378 - 78.1379 - 78.1380 - <!-- ........................................................................................................................ --> 78.1381 - 78.1382 - <h4>Requirements on User Agents Implementing the HTTP 78.1383 - <code>Link</code> Header</h4> 78.1384 - 78.1385 - <!-- XXX ref, one day --> 78.1386 - 78.1387 - <!-- XXX deal with media param --> 78.1388 - 78.1389 - <p>For each HTTP <code title="http-link">Link</code> header of which one 78.1390 - of the link relation types is an 78.1391 - <span data-anolis-spec="dom">ASCII case-insensitive</span> match 78.1392 - for "<code>stylesheet</code>" these steps 78.1393 - must be run:</p> 78.1394 - 78.1395 - <ol> 78.1396 - <li><p>Let <var>title</var> be the value of the first of all the 78.1397 - <code>title</code> and <code>title*</code> parameters. 78.1398 - If there are no such parameters it is the empty string.</p></li> 78.1399 - 78.1400 - <li><p>If one of the (other) link relation types is an 78.1401 - <span data-anolis-spec="dom">ASCII case-insensitive</span> match for 78.1402 - "<code>alternate</code>" and <var>title</var> is the 78.1403 - empty string terminate these steps.</p></li> 78.1404 - 78.1405 - <li><p><span data-anolis-spec="html" title="Resolve a URL">Resolve</span> 78.1406 - the specified <span data-anolis-spec="html">URL</span> and 78.1407 - <span data-anolis-spec="html">fetch</span> it.</p></li> 78.1408 - 78.1409 - <li><p>When the resource is available, the document is in 78.1410 - <span data-anolis-spec="dom" title="concept-quirks-mode">quirks mode</span> 78.1411 - and the <span data-anolis-spec="html">Content-Type metadata</span> of 78.1412 - the resource is not a <span>supported styling language</span> change the 78.1413 - <span data-anolis-spec="html">Content-Type metadata</span> of the resource 78.1414 - to <code>text/css</code>.</p></li> 78.1415 - 78.1416 - <li><p>If the resource is not in a 78.1417 - <span>supported styling language</span> terminate these steps.</p></li> 78.1418 - 78.1419 - <li> 78.1420 - <p><span>Create a style sheet</span> with the following properties:</p> 78.1421 - 78.1422 - <dl> 78.1423 - <dt><span>style sheet location</span></dt> 78.1424 - <dd><p>The <span data-anolis-spec="html">absolute URL</span> of the 78.1425 - resource.</p></dd> 78.1426 - 78.1427 - <dt><span>style sheet owner node</span></dt> 78.1428 - <dd><p>null</p></dd> 78.1429 - 78.1430 - <dt><span>style sheet parent</span></dt> 78.1431 - <dd><p>null</p></dd> 78.1432 - 78.1433 - <dt><span>style sheet owner node</span></dt> 78.1434 - <dd><p>null</p></dd> 78.1435 - 78.1436 - <dt><span>style sheet owner CSS rule</span></dt> 78.1437 - <dd><p>null</p></dd> 78.1438 - 78.1439 - <dt><span>style sheet media</span></dt> 78.1440 - <dd><p>The value of the first <code>media</code> parameter.</p></dd> 78.1441 - <!-- XXX register media parameter? bah --> 78.1442 - 78.1443 - <dt><span>style sheet title</span></dt> 78.1444 - <dd><p><var>title</var></p></dd> 78.1445 - 78.1446 - <dt><span>style sheet alternate flag</span></dt> 78.1447 - <dd><p>Set if one of the specified link relation type for this HTTP 78.1448 - <code title="http-link">Link</code> header is an 78.1449 - <span data-anolis-spec="dom">ASCII case-insensitive</span> match for 78.1450 - "<code>alternate</code>", or false otherwise. 78.1451 - </p></dd></dl> 78.1452 - </li> 78.1453 - </ol> 78.1454 - 78.1455 - <!-- ........................................................................................................................ --> 78.1456 - <!-- ........................................................................................................................ --> 78.1457 - 78.1458 - <h3>CSS Rules</h3> 78.1459 - 78.1460 - <p>To <dfn>parse a CSS rule</dfn> ...</p> 78.1461 - 78.1462 - <p>To <dfn>serialize a CSS rule</dfn> depends on the type of CSS rule, as 78.1463 - follows:</p> 78.1464 - 78.1465 - <dl class="switch"> 78.1466 - <dt><code>CSSStyleRule</code></dt> 78.1467 - <dd class="XXX">...</dd> 78.1468 - 78.1469 - <dt><code>CSSImportRule</code></dt> 78.1470 - <dd> 78.1471 - <p>The result of concatenating these strings:</p> 78.1472 - <ol> 78.1473 - <li>The literal string "<code>@import</code>", followed by a space 78.1474 - (U+0020), followed by the <span title="serialize a URL">URL escaped</span> 78.1475 - value of the <code title="dom-CSSImportRule-href">href</code> 78.1476 - attribute.</li> 78.1477 - <li>If the associated <code>MediaList</code> object is not empty, a 78.1478 - space (U+0020), followed by the value of the 78.1479 - <code title="dom-MediaList-mediaText">mediaText</code> attribute of the 78.1480 - associated <code>MediaList</code> object.</li> 78.1481 - <li>A "<code>;</code>" (U+003B).</li> 78.1482 - </ol> 78.1483 - </dd> 78.1484 - 78.1485 - <dt><code>CSSMediaRule</code></dt> 78.1486 - <dd class="XXX">...</dd> 78.1487 - 78.1488 - <dt><code>CSSFontFaceRule</code></dt> 78.1489 - <dd class="XXX">...</dd> 78.1490 - 78.1491 - <dt><code>CSSPageRule</code></dt> 78.1492 - <dd class="XXX">...</dd> 78.1493 - 78.1494 - <dt><code>CSSNamespaceRule</code></dt> 78.1495 - <dd><p>The literal string "<code>@namespace</code>", followed by a space 78.1496 - (U+0020), followed by the 78.1497 - <span title="serialize an identifier">identifier escaped</span> value of the 78.1498 - <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if 78.1499 - any), followed by a space (U+0020) if there is a prefix, followed by the 78.1500 - <span title="serialize a URL">URL escaped</span> value of the 78.1501 - <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code> 78.1502 - attribute, followed the character "<code>;</code>" (U+003B).</p></dd> 78.1503 - </dl> 78.1504 - 78.1505 - <p>To <dfn>insert a CSS rule</dfn> <var>rule</var> into a 78.1506 - CSS rule list <var>list</var> at location 78.1507 - <var>index</var> follow these steps:</p> 78.1508 - 78.1509 - <ol> 78.1510 - <li><p>If <var>index</var> is negative or greater than the 78.1511 - length of the <var>list</var>, 78.1512 - <span data-anolis-spec="dom" title="concept-throw">throw</span> an 78.1513 - "<code data-anolis-spec="dom">IndexSizeError</code>" exception and 78.1514 - terminate these steps.</p></li> 78.1515 - 78.1516 - <li><p><span title="Parse a CSS rule">Parse</span> 78.1517 - <var>rule</var>.</p></li> 78.1518 - 78.1519 - <li><p>If parsing failed terminate these steps.</p></li> 78.1520 - 78.1521 - <li><p>If the new object can not be inserted within the 78.1522 - <var>list</var> at the given <var>index</var> due to 78.1523 - limitations of the CSS specification, 78.1524 - <span data-anolis-spec="dom" title="concept-throw">throw</span> an 78.1525 - "<code data-anolis-spec="dom">HierarchyRequestError</code>" exception and 78.1526 - terminate these steps.</p></li> 78.1527 - 78.1528 - <li><p>Insert the new object at the given <var>index</var> 78.1529 - within the <var>list</var>.</p></li> 78.1530 - </ol> 78.1531 - 78.1532 - <p>To <dfn>remove a CSS rule</dfn> from CSS rule list 78.1533 - <var>list</var> at location <var>index</var> follow 78.1534 - these steps:</p> 78.1535 - 78.1536 - <ol> 78.1537 - <li><p>If <var>index</var> is negative or greater than the 78.1538 - length of the <var>list</var> 78.1539 - <span data-anolis-spec="dom" title="concept-throw">throw</span> an 78.1540 - "<code data-anolis-spec="dom">IndexSizeError</code>" exception and terminate these steps.</p></li> 78.1541 - 78.1542 - <li><p>Remove the object at <var>index</var> from 78.1543 - <var>list</var>.</p></li> 78.1544 - </ol> 78.1545 - 78.1546 - 78.1547 - <!-- ........................................................................................................................ --> 78.1548 - 78.1549 - <h4>The <code>CSSRuleList</code> Sequence</h4> 78.1550 - 78.1551 - <p>The <code>CSSRuleList</code> sequence represents an ordered collection of CSS style rules.</p> 78.1552 -<pre class="idl">[[TBD - TYPEDEF]] 78.1553 -</pre> 78.1554 - 78.1555 - 78.1556 - <!-- ........................................................................................................................ --> 78.1557 - 78.1558 - <h4>The <code>CSSRule</code> Interface</h4> 78.1559 - 78.1560 - <p>The <code>CSSRule</code> interface represents an abstract, base CSS style rule. Each distinct CSS style rule type is represented by a distinct interface that inherits from this interface.</p> 78.1561 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSRule">interface <span class="idlInterfaceID">CSSRule</span> { 78.1562 -<span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-STYLE_RULE">STYLE_RULE</a></span> = <span class="idlConstValue">1</span>;</span> 78.1563 -<span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-IMPORT_RULE">IMPORT_RULE</a></span> = <span class="idlConstValue">3</span>;</span> 78.1564 -<span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-MEDIA_RULE">MEDIA_RULE</a></span> = <span class="idlConstValue">4</span>;</span> 78.1565 -<span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-FONT_FACE_RULE">FONT_FACE_RULE</a></span> = <span class="idlConstValue">5</span>;</span> 78.1566 -<span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-PAGE_RULE">PAGE_RULE</a></span> = <span class="idlConstValue">6</span>;</span> 78.1567 -<span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-NAMESPACE_RULE">NAMESPACE_RULE</a></span> = <span class="idlConstValue">10</span>;</span> 78.1568 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned short</a></span> <span class="idlAttrName"><a href="#widl-CSSRule-type">type</a></span>;</span> 78.1569 -<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSRule-cssText">cssText</a></span>;</span> 78.1570 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRule</a></span> <span class="idlAttrName"><a href="#widl-CSSRule-parentRule">parentRule</a></span>;</span> 78.1571 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleSheet</a></span> <span class="idlAttrName"><a href="#widl-CSSRule-parentStyleSheet">parentStyleSheet</a></span>;</span> 78.1572 -};</span></pre> 78.1573 -<dl class="constants"> 78.1574 -<dt class="constant" id="widl-CSSRule-STYLE_RULE"> 78.1575 -<code>STYLE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 1</dt> 78.1576 -<dd> 78.1577 -<p>When the value of the <code>type</code> attribute is <code>STYLE_RULE</code>, then the object that implements this interface must implement the <code>CSSStyleRule</code> interface.</p></dd> 78.1578 -<dt class="constant" id="widl-CSSRule-IMPORT_RULE"> 78.1579 -<code>IMPORT_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 3</dt> 78.1580 -<dd> 78.1581 -<p>When the value of the <code>type</code> attribute is <code>IMPORT_RULE</code>, then the object that implements this interface must implement the <code>CSSImportRule</code> interface.</p></dd> 78.1582 -<dt class="constant" id="widl-CSSRule-MEDIA_RULE"> 78.1583 -<code>MEDIA_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 4</dt> 78.1584 -<dd> 78.1585 -<p>When the value of the <code>type</code> attribute is <code>MEDIA_RULE</code>, then the object that implements this interface must implement the <code>CSSMediaRule</code> interface.</p></dd> 78.1586 -<dt class="constant" id="widl-CSSRule-FONT_FACE_RULE"> 78.1587 -<code>FONT_FACE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 5</dt> 78.1588 -<dd> 78.1589 -<p>When the value of the <code>type</code> attribute is <code>FONT_FACE_RULE</code>, then the object that implements this interface must implement the <code>CSSFontFaceRule</code> interface.</p></dd> 78.1590 -<dt class="constant" id="widl-CSSRule-PAGE_RULE"> 78.1591 -<code>PAGE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 6</dt> 78.1592 -<dd> 78.1593 -<p>When the value of the <code>type</code> attribute is <code>PAGE_RULE</code>, then the object that implements this interface must implement the <code>CSSPageRule</code> interface.</p></dd> 78.1594 -<dt class="constant" id="widl-CSSRule-NAMESPACE_RULE"> 78.1595 -<code>NAMESPACE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 10</dt> 78.1596 -<dd> 78.1597 -<p>When the value of the <code>type</code> attribute is <code>NAMESPACE_RULE</code>, then the object that implements this interface must implement the <code>CSSNamespaceRule</code> interface.</p></dd> 78.1598 -</dl> 78.1599 -<dl class="attributes"> 78.1600 -<dt class="attribute" id="widl-CSSRule-type"> 78.1601 -<code>type</code> of type <span class="idlAttrType"><a>unsigned short</a></span>, readonly</dt> 78.1602 -<dd> 78.1603 -<p>The <code>type</code> attribute must return one of the following values: <code>STYLE_RULE</code>, <code>IMPORT_RULE</code>, <code>MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE</code>, <code>NAMESPACE_RULE</code>, or a registered extension value. </p> <p>The values 0 and 2, formerly known as <code>UNKNOWN_RULE</code> and <code>CHARSET_RULE</code>, respectively, are made obsolete by this specification. These values will not be re-allocated in the future and shall remain reserved.</p> <p class='note'>Constants for new and proprietary rule types are coordinated on the <a href='http://wiki.csswg.org/spec/cssom-constants'>CSSOM Constants</a> wiki page.</p></dd> 78.1604 -<dt class="attribute" id="widl-CSSRule-cssText"> 78.1605 -<code>cssText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt> 78.1606 -<dd> 78.1607 -<p>The <code>cssText</code> attribute must return a <span title='serialize a CSS rule'>serialization</span> of the <span>CSS rule</span>.</p> <p>On setting the <code>cssText</code> attribute these steps must be run:</p> <ol> <li><p><span title='Parse a CSS rule'>Parse</span> the value.</p></li> <li><p>If parsing failed terminate this algorithm.</p></li> <li><p>If the <code title='dom-CSSRule-type'>type</code> of the new object does not match the <code title='dom-CSSRule-type'>type</code> of the current object <span data-anolis-spec=dom title=concept-throw>throw</span> an '<code data-anolis-spec=dom>InvalidModificationError</code>' exception.</li> <li><p>Replace the current object with the new object.</p></li> </ol></dd> 78.1608 -<dt class="attribute" id="widl-CSSRule-parentRule"> 78.1609 -<code>parentRule</code> of type <span class="idlAttrType"><a>CSSRule</a></span>, readonly</dt> 78.1610 -<dd> 78.1611 -<p>The <code>parentRule</code> attribute must return the nearest enclosing rule of the current rule or null, if there is no enclosing rule.</p> <p class='note'>For example, <code>@media</code> can enclose a rule.</p></dd> 78.1612 -<dt class="attribute" id="widl-CSSRule-parentStyleSheet"> 78.1613 -<code>parentStyleSheet</code> of type <span class="idlAttrType"><a>CSSStyleSheet</a></span>, readonly</dt> 78.1614 -<dd> 78.1615 -<p>The <code>parentStyleSheet</code> attribute must return the <code>CSSStyleSheet</code> object that contains the the current rule.</p></dd> 78.1616 -</dl> 78.1617 - 78.1618 - 78.1619 - <!-- ........................................................................................................................ --> 78.1620 - 78.1621 - <h4>The <code>CSSStyleRule</code> Interface</h4> 78.1622 - 78.1623 - <p>The <code>CSSStyleRule</code> interface represents a rule set.</p> 78.1624 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSStyleRule">interface <span class="idlInterfaceID">CSSStyleRule</span> { 78.1625 -<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleRule-selectorText">selectorText</a></span>;</span> 78.1626 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleRule-style">style</a></span>;</span> 78.1627 -};</span></pre> 78.1628 -<dl class="attributes"> 78.1629 -<dt class="attribute" id="widl-CSSStyleRule-selectorText"> 78.1630 -<code>selectorText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt> 78.1631 -<dd> 78.1632 -<p>The <code>selectorText</code> attribute, on getting, must return the result of <span title='serialize a group of selectors'>serializing</span> the associated <span>group of selectors</span>.</p> <p>On setting the <code>selectorText</code> attribute these steps must be run:</p> <ol> <li><p>Run the <span>parse a group of selectors</span> algorithm on the given value.</p></li> <li><p>If the algorithm returns a non-null value replace the associated <span>group of selectors</span> with the returned value.</p></li> <li><p>Otherwise, if the algorithm returns a null value, do nothing.</p></li> </ol></dd> 78.1633 -<dt class="attribute" id="widl-CSSStyleRule-style"> 78.1634 -<code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt> 78.1635 -<dd> 78.1636 -<p>The <code>style</code> attribute must return a <code>CSSStyleDeclaration</code> object for the rule set.</p></dd> 78.1637 -</dl> 78.1638 - 78.1639 - 78.1640 - <!-- ........................................................................................................................ --> 78.1641 - 78.1642 - <h4>The <code>CSSImportRule</code> Interface</h4> 78.1643 - 78.1644 - <p>The <code>CSSImportRule</code> interface represents an <code>@import</code> rule.</p> 78.1645 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSImportRule">interface <span class="idlInterfaceID">CSSImportRule</span> { 78.1646 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSImportRule-href">href</a></span>;</span> 78.1647 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>MediaList</a></span> <span class="idlAttrName"><a href="#widl-CSSImportRule-media">media</a></span>;</span> 78.1648 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleSheet</a></span> <span class="idlAttrName"><a href="#widl-CSSImportRule-styleSheet">styleSheet</a></span>;</span> 78.1649 -};</span></pre> 78.1650 -<dl class="attributes"> 78.1651 -<dt class="attribute" id="widl-CSSImportRule-href"> 78.1652 -<code>href</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.1653 -<dd> 78.1654 -<p>The <code>href</code> attribute must return the <span>URL</span> specified by the <code>@import</code> rule.</p> <p class='note'>To get the resolved <span>URL</span> use the <code title='dom-StyleSheet-href'>href</code> attribute of the associated <span>style sheet</span>.</p></dd> 78.1655 -<dt class="attribute" id="widl-CSSImportRule-media"> 78.1656 -<code>media</code> of type <span class="idlAttrType"><a>MediaList</a></span>, readonly</dt> 78.1657 -<dd> 78.1658 -<p>The <code>media</code> attribute must return the value of the <code title='dom-StyleSheet-media'>media</code> attribute of the associated <span>style sheet</span>.</p></dd> 78.1659 -<dt class="attribute" id="widl-CSSImportRule-styleSheet"> 78.1660 -<code>styleSheet</code> of type <span class="idlAttrType"><a>CSSStyleSheet</a></span>, readonly</dt> 78.1661 -<dd> 78.1662 -<p>The <code>styleSheet</code> attribute must return the associated <span>style sheet</span>.</p> <p class='note'>If loading of the style sheet fails its <code title='dom-CSSStyleSheet-cssRules'>cssRules</code> list is simply empty, i.e., an <code>@import</code> rule always has an associated <span>style sheet</span>.</p></dd> 78.1663 -</dl> 78.1664 - 78.1665 - 78.1666 - <!-- ........................................................................................................................ --> 78.1667 - 78.1668 - <h4>The <code>CSSMediaRule</code> Interface</h4> 78.1669 - 78.1670 - <p>The <code>CSSMediaRule</code> interface represents a <code>@media</code> rule.</p> 78.1671 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSMediaRule">interface <span class="idlInterfaceID">CSSMediaRule</span> { 78.1672 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>MediaList</a></span> <span class="idlAttrName"><a href="#widl-CSSMediaRule-media">media</a></span>;</span> 78.1673 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRuleList</a></span> <span class="idlAttrName"><a href="#widl-CSSMediaRule-cssRules">cssRules</a></span>;</span> 78.1674 -<span class="idlMethod"> <span class="idlMethType"><a>unsigned long</a></span> <span class="idlMethName"><a href="#widl-CSSMediaRule-insertRule-unsigned-long-DOMString-rule-unsigned-long-index">insertRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">rule</span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span> 78.1675 -<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-CSSMediaRule-deleteRule-void-unsigned-long-index">deleteRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span> 78.1676 -};</span></pre> 78.1677 -<dl class="attributes"> 78.1678 -<dt class="attribute" id="widl-CSSMediaRule-media"> 78.1679 -<code>media</code> of type <span class="idlAttrType"><a>MediaList</a></span>, readonly</dt> 78.1680 -<dd> 78.1681 -<p>The <code>media</code> attribute must return a <code>MediaList</code> object for the list of media queries specified with the <code>@media</code> rule.</p></dd> 78.1682 -<dt class="attribute" id="widl-CSSMediaRule-cssRules"> 78.1683 -<code>cssRules</code> of type <span class="idlAttrType"><a>CSSRuleList</a></span>, readonly</dt> 78.1684 -<dd> 78.1685 -<p>The <code>cssRules</code> attribute must return a <code>CSSRuleList</code> object for the list of CSS rules specified with the <code>@media</code> rule.</p></dd> 78.1686 -</dl> 78.1687 -<dl class="methods"> 78.1688 -<dt class="method" id="widl-CSSMediaRule-insertRule-unsigned-long-DOMString-rule-unsigned-long-index"> 78.1689 -<code>insertRule</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span></span>), returns <span class="idlMethType"><a>unsigned long</a></span></dt> 78.1690 -<dd> 78.1691 -<p>The <code>insertRule</code> operation must <span>insert a CSS rule</span> <var>rule</var> into the CSS rule list returned by <code title='dom-CSSMediaRule-cssRules'>cssRules</code> at <var>index</var>.</p></dd> 78.1692 -<dt class="method" id="widl-CSSMediaRule-deleteRule-void-unsigned-long-index"> 78.1693 -<code>deleteRule</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 78.1694 -<dd> 78.1695 -<p>The <code>deleteRule</code> operation must <span>remove a CSS rule</span> from the CSS rule list returned by <code title='dom-CSSMediaRule-cssRules'>cssRules</code> at <var>index</var>.</p></dd> 78.1696 -</dl> 78.1697 - 78.1698 - 78.1699 - <!-- ........................................................................................................................ --> 78.1700 - 78.1701 - <h4>The <code>CSSFontFaceRule</code> Interface</h4> 78.1702 - 78.1703 - <p>The <code>CSSFontFaceRule</code> interface represents a <code>@font-face</code> rule.</p> 78.1704 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSFontFaceRule">interface <span class="idlInterfaceID">CSSFontFaceRule</span> { 78.1705 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-CSSFontFaceRule-style">style</a></span>;</span> 78.1706 -};</span></pre> 78.1707 -<dl class="attributes"> 78.1708 -<dt class="attribute" id="widl-CSSFontFaceRule-style"> 78.1709 -<code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt> 78.1710 -<dd> 78.1711 -<p>The <code>style</code> attribute must return a <code>CSSStyleDeclaration</code> block that contains the property declarations specified within the <code>@font-face</code> rule.</p></dd> 78.1712 -</dl> 78.1713 - 78.1714 - 78.1715 - <!-- ........................................................................................................................ --> 78.1716 - 78.1717 - <h4>The <code>CSSPageRule</code> Interface</h4> 78.1718 - 78.1719 - <p>The <code>CSSPageRule</code> interface represents a <code>@page</code> rule.</p> <p class='note'>Need to define the rules for <dfn id='parse-a-css-page-selector'>parse a CSS page selector</dfn> and <dfn id='serialize-a-css-page-selector'>serialize a CSS page selector</dfn>.</p> 78.1720 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSPageRule">interface <span class="idlInterfaceID">CSSPageRule</span> { 78.1721 -<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSPageRule-selectorText">selectorText</a></span>;</span> 78.1722 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-CSSPageRule-style">style</a></span>;</span> 78.1723 -};</span></pre> 78.1724 -<dl class="attributes"> 78.1725 -<dt class="attribute" id="widl-CSSPageRule-selectorText"> 78.1726 -<code>selectorText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt> 78.1727 -<dd> 78.1728 -<p>The <code>selectorText</code> attribute, on getting, must return the result of <span title='serialize a CSS page selector'>serializing</span> the associated <span>CSS page selector</span>.</p> <p>On setting the <code>selectorText</code> attribute these steps must be run:</p> <ol> <li><p>Run the <span>parse a CSS page selector</span> algorithm on the given value.</p></li> <li><p>If the algorithm returns a non-null value replace the associated <span>CSS page selector</span> with the returned value.</p></li> <li><p>Otherwise, if the algorithm returns a null value, do nothing.</p></li> </ol></dd> 78.1729 -<dt class="attribute" id="widl-CSSPageRule-style"> 78.1730 -<code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt> 78.1731 -<dd> 78.1732 -<p>The <code>style</code> attribute must return a <code>CSSStyleDeclaration</code> for the <code>@page</code> rule.</p></dd> 78.1733 -</dl> 78.1734 - 78.1735 - 78.1736 - <!-- ........................................................................................................................ --> 78.1737 - 78.1738 - <h4>The <code>CSSNamespaceRule</code> Interface</h4> 78.1739 - 78.1740 - <p>The <code>CSSNamespaceRule</code> interface represents a <code>@namespace</code> rule.</p> 78.1741 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSNamespaceRule">interface <span class="idlInterfaceID">CSSNamespaceRule</span> { 78.1742 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSNamespaceRule-namespaceURI">namespaceURI</a></span>;</span> 78.1743 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-CSSNamespaceRule-prefix">prefix</a></span>;</span> 78.1744 -};</span></pre> 78.1745 -<dl class="attributes"> 78.1746 -<dt class="attribute" id="widl-CSSNamespaceRule-namespaceURI"> 78.1747 -<code>namespaceURI</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.1748 -<dd> 78.1749 -<p>The <code>namespaceURI</code> attribute must return the namespace of the <code>@namespace</code> rule.</p></dd> 78.1750 -<dt class="attribute" id="widl-CSSNamespaceRule-prefix"> 78.1751 -<code>prefix</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt> 78.1752 -<dd> 78.1753 -<p>The <code>prefix</code> attribute must return the prefix of the <code>@namespace</code> rule or the empty string if there is no prefix.</p></dd> 78.1754 -</dl> 78.1755 - 78.1756 - 78.1757 - <!-- ........................................................................................................................ --> 78.1758 - <!-- ........................................................................................................................ --> 78.1759 - 78.1760 - <h3>CSS Declaration Blocks</h3> 78.1761 - 78.1762 - <p>A <dfn>CSS declaration block</dfn> is an ordered collection of CSS 78.1763 - properties with their associated values, also named CSS declarations. In 78.1764 - the DOM a <span>CSS declaration block</span> is a 78.1765 - <code>CSSStyleDeclaration</code> object. A 78.1766 - <span>CSS declaration block</span> has two associated properties:</p> 78.1767 - 78.1768 - <dl> 78.1769 - <dt><dfn>CSS declaration block readonly flag</dfn></dt> 78.1770 - <dd><p>Unset if the object can be manipulated. Set if it can not be 78.1771 - manipulated. Unless otherwise stated it is unset.</p></dd> 78.1772 - 78.1773 - <dt><dfn>CSS declaration block declarations</dfn></dt> 78.1774 - <dd><p>The CSS declarations associated with the object.</p></dd> 78.1775 - </dl> 78.1776 - 78.1777 - <p class="note">The <span>CSS declaration block declarations</span> are 78.1778 - ordered. This matters for the 78.1779 - <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p> 78.1780 - 78.1781 - 78.1782 - <p class="XXX">To 78.1783 - <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> 78.1784 - ...</p> 78.1785 - 78.1786 - <p class="XXX">To 78.1787 - <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn> 78.1788 - ...</p> 78.1789 - 78.1790 - 78.1791 - 78.1792 - <!-- ........................................................................................................................ --> 78.1793 - 78.1794 - <h4>The <code>CSSStyleDeclaration</code> Interface</h4> 78.1795 - 78.1796 - <p>The <code>CSSStyleDeclaration</code> interface represents a <span>CSS declaration block</span>, including its underlying state, where this underlying state depends upon the source of the <code>CSSStyleDeclaration</code> instance.</p> 78.1797 -<pre class="idl"><span class="idlInterface" id="widl-def-CSSStyleDeclaration">interface <span class="idlInterfaceID">CSSStyleDeclaration</span> { 78.1798 -<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleDeclaration-cssText">cssText</a></span>;</span> 78.1799 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleDeclaration-length">length</a></span>;</span> 78.1800 -<span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-item-DOMString-unsigned-long-index">item</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span> 78.1801 -<span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-getPropertyValue-DOMString-DOMString-property">getPropertyValue</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>);</span> 78.1802 -<span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-getPropertyPriority-DOMString-DOMString-property">getPropertyPriority</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>);</span> 78.1803 -<span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-setProperty-void-DOMString-property-DOMString-value-DOMString-priority">setProperty</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">value</span></span>, <span class="idlParam">optional <span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">priority</span></span>);</span> 78.1804 -<span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-removeProperty-DOMString-DOMString-property">removeProperty</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>);</span> 78.1805 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRule</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleDeclaration-parentRule">parentRule</a></span>;</span> 78.1806 -};</span></pre> 78.1807 -<dl class="attributes"> 78.1808 -<dt class="attribute" id="widl-CSSStyleDeclaration-cssText"> 78.1809 -<code>cssText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt> 78.1810 -<dd> 78.1811 -<p>The <code>cssText</code> attribute must return the result of <span title='serialize a CSS declaration block'>serializing</span> the <span>CSS declaration block declarations</span>.</p> <p>Setting the <code>cssText</code> attribute must run these steps: <ol> <li><p>If the <span>CSS declaration block readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li> <li><p>Empty the <span>CSS declaration block declarations</span>.</li> <li><p><span title='Parse a CSS declaration block'>Parse</span> the given value and, if the return value is not null, insert it into the <span>CSS declaration block declarations</span>.</p></li> </ol></dd> 78.1812 -<dt class="attribute" id="widl-CSSStyleDeclaration-length"> 78.1813 -<code>length</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt> 78.1814 -<dd> 78.1815 -<p>The <code>length</code> attribute must return the number of declarations in the <span>collection of CSS declarations</span>.</p></dd> 78.1816 -<dt class="attribute" id="widl-CSSStyleDeclaration-parentRule"> 78.1817 -<code>parentRule</code> of type <span class="idlAttrType"><a>CSSRule</a></span>, readonly</dt> 78.1818 -<dd> 78.1819 -<p>The <code>parentRule</code> attribute must return the <code>CSSrule</code> object the <code>CSSStyleDeclaration</code> is object is associated with or null if it is not associated with a <code>CSSrule</code> object.</p></dd> 78.1820 -</dl> 78.1821 -<dl class="methods"> 78.1822 -<dt class="method" id="widl-CSSStyleDeclaration-item-DOMString-unsigned-long-index"> 78.1823 -<code>item</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt> 78.1824 -<dd> 78.1825 -<p>The <code>item</code> operation must return the property at position <var>index</var>.</p></dd> 78.1826 -<dt class="method" id="widl-CSSStyleDeclaration-getPropertyValue-DOMString-DOMString-property"> 78.1827 -<code>getPropertyValue</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt> 78.1828 -<dd> 78.1829 -<p>The <code>getPropertyValue</code> operation must ...</p></dd> 78.1830 -<dt class="method" id="widl-CSSStyleDeclaration-getPropertyPriority-DOMString-DOMString-property"> 78.1831 -<code>getPropertyPriority</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt> 78.1832 -<dd> 78.1833 -<p>The <code>getPropertyPriority</code> operation, when invoked, if <var>property</var> is an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for a property that has a priority user agents must return the canonical priority of that property as given in the syntax definition. Otherwise, the empty string must be returned.</p> <p class='example'>E.g. for <code>background-color:lime !IMPORTANT</code> the return value would be '<code>important</code>'.</p></dd> 78.1834 -<dt class="method" id="widl-CSSStyleDeclaration-setProperty-void-DOMString-property-DOMString-value-DOMString-priority"> 78.1835 -<code>setProperty</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>, <span class="idlParam">optional <span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>void</a></span></dt> 78.1836 -<dd> 78.1837 -<p>The <code>setProperty</code> operation must run these steps:</p> <ol> <li><p>If the <span>CSS declaration block readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> an '<code data-anolis-spec=dom>NoModificationAllowedError</code>' and terminate these steps.</li> <li><p>If <var>property</var> is not an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for a supported property, terminate this algorithm.</p></li> <li><p>If <var>value</var> is the empty string, invoke <code title='dom-CSSStyleDeclaration-removeProperty'>removeProperty()</code> with <var>property</var> as argument and terminate this algorithm.</p></li> <li><p>If the <var>priority</var> argument has been omitted let <var>priority</var> be the empty string.</p></li> <li><p>If <var>priority</var> is neither a valid priority nor the empty string terminate this algorithm.</p></li> <li> <p>If <span title='parse a CSS value'>parsing the <var>value</var></span> returns null terminate this algorithm. <p class='note'><var>value</var> can not include '<code>!important</code>'.</p> </li> <li><p>Finally, set <var>property</var> to <var>value</var> with priority <var>priority</var> when <var>priority</var> is not the empty string. Otherwise set <var>property</var> to <var>value</var>.</p></li> </ol></dd> 78.1838 -<dt class="method" id="widl-CSSStyleDeclaration-removeProperty-DOMString-DOMString-property"> 78.1839 -<code>removeProperty</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt> 78.1840 -<dd> 78.1841 -<p>The <code>removeProperty</code> operation must run these steps:</p> <ol> <li><p>If the <span>CSS declaration block readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> a '<code data-anolis-spec=dom>NoModificationAllowedError</code>' and terminate these steps.</li> <li><p>If <var>property</var> is an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for a property of a declaration in the <span>collection of CSS declarations</span> remove the declaration.</p></li> </ol></dd> 78.1842 -</dl> 78.1843 - 78.1844 - 78.1845 - <hr/> 78.1846 - 78.1847 - <p>For the table below, the IDL attribute in the first column 78.1848 - must return the result of invoking 78.1849 - <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code> 78.1850 - with as argument the CSS property given in the second column on the same 78.1851 - row.</p> 78.1852 - 78.1853 - <p>Similarly for the table below, setting the IDL attribute in the 78.1854 - first column must invoke 78.1855 - <code title="dom-CSSStyleDeclaration-setProperty">setProperty()</code> 78.1856 - with as first argument the CSS property given in the second column on the 78.1857 - same row, as second argument the given value, and no third argument. Any 78.1858 - exceptions thrown must be re-thrown.</p> 78.1859 - 78.1860 - <table> 78.1861 - <thead> 78.1862 - <tr> 78.1863 - <th>IDL attribute 78.1864 - </th><th>CSS property 78.1865 - </th></tr></thead><tbody> 78.1866 -<!--CSSOM-DECLARATIONTABLE--> 78.1867 - </tbody></table> 78.1868 - 78.1869 -<!-- 78.1870 - <h4>CSS Properties</h4> 78.1871 - 78.1872 - <p>The DOM attribute name of a CSS property can be found by using the 78.1873 - following algorithm:</p> 78.1874 - 78.1875 - <ol> 78.1876 - <li>Let <var>r</var> be the CSS property to be 78.1877 - converted.</li> 78.1878 - 78.1879 - <li>Uppercase the first character after every U+002D (<code>-</code>) in 78.1880 - <var>r</var>.</li> 78.1881 - 78.1882 - <li>Remove every U+002D (<code>-</code>) in <var>r</var>.</li> 78.1883 - 78.1884 - <li>Return <var>r</var>.</li> 78.1885 - </ol> 78.1886 - 78.1887 - <p class="note">This means that 78.1888 - <code>-<var>vendor</var>-<var>property</var></code> 78.1889 - becomes 78.1890 - <code><var><strong>V</strong>endor</var><var><strong>P</strong>roperty</var></code> 78.1891 - for instance.</p> 78.1892 ---> 78.1893 - 78.1894 - <!-- ........................................................................................................................ --> 78.1895 - <!-- ........................................................................................................................ --> 78.1896 - 78.1897 - <h3>CSS Values</h3> 78.1898 - 78.1899 - <!-- ........................................................................................................................ --> 78.1900 - 78.1901 - <h4>Parsing CSS Values</h4> 78.1902 - 78.1903 - <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given 78.1904 - <var>property</var> means to a parse the given value according to 78.1905 - the definition of the property that is an 78.1906 - <span data-anolis-spec="dom">ASCII case-insensitive</span> match for 78.1907 - <var>property</var> in the CSS specification. If the given value 78.1908 - is <span>ignored</span> return null. Otherwise return the CSS value for 78.1909 - the given <var>property</var>.</p> 78.1910 - 78.1911 - <p class="note">"<code>!important</code>" declarations are not 78.1912 - part of the property value space and will therefore cause 78.1913 - <span>parse a CSS value</span> to return null.</p> 78.1914 - 78.1915 - 78.1916 - <!-- ........................................................................................................................ --> 78.1917 - 78.1918 - <h4>Serializing CSS Values</h4> 78.1919 - 78.1920 - <!-- based on http://damowmow.com/playground/canon.txt --> 78.1921 - 78.1922 - <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow 78.1923 - these rules:</p> 78.1924 - 78.1925 - <ul> 78.1926 - <li><p><span title="Serialize a CSS component value">Serialize</span> any 78.1927 - CSS component values in the value.</p></li> 78.1928 - 78.1929 - <li><p>Where multiple CSS component values can appear in any order 78.1930 - without changing the meaning of the value (typically represented by a 78.1931 - double bar <code>||</code> in the value syntax), use the order as given 78.1932 - in the syntax.</p></li> 78.1933 - <!-- <code><border-width> <border-style> <color></code> 78.1934 - for <code>border</code> --> 78.1935 - 78.1936 - <li> 78.1937 - <p>Where CSS component values of the value can be omitted without 78.1938 - changing the meaning of the value (e.g. initial values in shorthand 78.1939 - properties), omit them. If this would remove all the values, then 78.1940 - include the first allowed value.</p> 78.1941 - 78.1942 - <p class="example">E.g. <code>margin: 20px 20px</code> becomes 78.1943 - <code>margin: 20px</code>.</p> 78.1944 - 78.1945 - <p class="example">E.g. the value <code>0</code> for the 78.1946 - '<code>border</code>' property.</p> 78.1947 - </li> 78.1948 - 78.1949 - <li><p>If the value of a shorthand property is requested and it cannot be 78.1950 - computed because the properties associated with the shorthand have values 78.1951 - that cannot be represented by the shorthand the serialization is the 78.1952 - empty string.</p></li> 78.1953 - 78.1954 - <li><p>If a value has a <span>whitespace</span>-separated list of 78.1955 - CSS component values, 78.1956 - <span title="serialize a whitespace-separated list">serialize</span> the 78.1957 - value as a whitespace-separated list.</p></li> 78.1958 - 78.1959 - <li><p>If a value has a comma-separated list of 78.1960 - CSS component values, 78.1961 - <span title="serialize a comma-separated list">serialize</span> the 78.1962 - value as a comma-separated list.</p></li> 78.1963 - </ul> 78.1964 - 78.1965 - 78.1966 - <p>To 78.1967 - <dfn id="serialize-a-css-value-component">serialize a CSS component value</dfn> 78.1968 - depends on the component, as follows:</p> 78.1969 - 78.1970 - <dl class="switch"> 78.1971 - <dt>keyword</dt> 78.1972 - <dd><p>The keyword 78.1973 - <span data-anolis-spec="dom">converted to ASCII lowercase</span>.</p></dd> 78.1974 - 78.1975 - <dt><angle></dt> 78.1976 - <dd><p>The number of degrees serialized as per <number> followed by 78.1977 - the literal string "<code>deg</code>".</p></dd> 78.1978 - 78.1979 - <dt><color></dt> 78.1980 - <dd><p class="XXX">preserve system colors, maybe color keywords...</p></dd> 78.1981 - <!-- 78.1982 - <dt>It is a system color</dt> 78.1983 - 78.1984 - <dd>See below (you use the representation given in the specification that 78.1985 - defines the keyword).</dd> 78.1986 - 78.1987 - <dt>Alpha component is equal to 1.0</dt> 78.1988 - 78.1989 - <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a 78.1990 - <code>#</code> character (U+0023 NUMBER SIGN), with the first two digits 78.1991 - representing the red component, the next two digits representing the green 78.1992 - component, and the last two digits representing the blue component, the 78.1993 - digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to 78.1994 - U+0046).</dd> 78.1995 - 78.1996 - <dt>Alpha component is less than 1.0</dt> 78.1997 - 78.1998 - <dd>The color is in the CSS <code>rgba()</code> functional-notation format: 78.1999 - the literal string <code>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed 78.2000 - by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span> 78.2001 - representing the red component, a <span>color component separator</span>, a 78.2002 - <span>color component integer</span> for the green component, a <span>color 78.2003 - component separator</span>, a <span>color component integer</span> for the 78.2004 - blue component, another <span>color component separator</span> a U+0030 78.2005 - DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or 78.2006 - more digits in the range 0-9 (U+0030 to U+0039) representing the fractional 78.2007 - part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd> 78.2008 - 78.2009 - <dt>The keyword <code>transparent</code> is used</dt> 78.2010 - 78.2011 - <dd>The color is <code>rgba(0, 0, 0, 0)</code>.</dd> 78.2012 - --> 78.2013 - 78.2014 - <dt><counter></dt> 78.2015 - <dd> 78.2016 - <p>The concatenation of:</p> 78.2017 - <ol> 78.2018 - <li><p>If <counter> has three CSS component values the string 78.2019 - "<code>counters(</code>".</p></li> 78.2020 - <li><p>If <counter> has two CSS component values the string 78.2021 - "<code>counter(</code>".</p></li> 78.2022 - <li><p>The result of 78.2023 - <span title="serialize a comma-separated list">serializing</span> the 78.2024 - <span title="serialize a CSS component value">serialized</span> 78.2025 - CSS component values belonging to <counter> as list while omitting 78.2026 - the last CSS component value if it is 'decimal'.</p></li> 78.2027 - <li><p>"<code>)</code>" (U+0029).</p></li> 78.2028 - </ol> 78.2029 - </dd> 78.2030 - 78.2031 - <dt><frequency></dt> 78.2032 - <dd><p>The frequency in hertz serialized as per <number> followed by 78.2033 - the literal string "<code>hz</code>".</p></dd> 78.2034 - 78.2035 - <dt><identifier></dt> 78.2036 - <dd><p>The identifier 78.2037 - <span title="serialize an identifier">escaped</span>.</p></dd> 78.2038 - 78.2039 - <dt><integer></dt> 78.2040 - <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the 78.2041 - shortest form possible, preceded by "<code>-</code>" (U+002D) if it is 78.2042 - negative.</p></dd> 78.2043 - 78.2044 - <dt><length></dt> 78.2045 - <dd> 78.2046 - <p>A length of zero is represented by the literal string 78.2047 - "<code>0px</code>".</p> 78.2048 - 78.2049 - <p>Absolute lengths: the number of millimeters serialized as per 78.2050 - <number> followed by the literal string "<code>mm</code>". 78.2051 - <span class="XXX">Rumor has it absolute lengths will become relative 78.2052 - lengths. Centimeters would be compatible with <resolution>...</span></p> 78.2053 - 78.2054 - <p>Relative lengths: the <number> component serialized as per 78.2055 - <number> followed by the unit in its canonical form as defined in its 78.2056 - respective specification.</p> 78.2057 - </dd> 78.2058 - 78.2059 - <dt><number></dt> 78.2060 - <dd><p class="XXX">Browsers seem to use ToString(), but that might give a 78.2061 - significand which according to some is teh evil (and also currently does 78.2062 - not parse correctly).</p></dd> 78.2063 - 78.2064 - <dt><percentage></dt> 78.2065 - <dd><p>The <number> component serialized as per <number> followed 78.2066 - by the literal string "<code>%</code>" (U+0025).</p></dd> 78.2067 - 78.2068 - <dt><resolution></dt> 78.2069 - <dd><p>The resolution in dots per centimeter serialized as per 78.2070 - <number> followed by the literal string "<code>dpcm</code>".</p></dd> 78.2071 - 78.2072 - <dt><shape></dt> 78.2073 - <dd><p>The string "<code>rect(</code>", followed by the result 78.2074 - of <span title="serialize a comma-separated list">serializing</span> the 78.2075 - <span title="serialize a CSS component value">serialized</span> 78.2076 - CSS component values belonging to <shape> as list, followed by 78.2077 - "<code>)</code>" (U+0029).</p></dd> 78.2078 - 78.2079 - <dt><string></dt> 78.2080 - <dt><family-name></dt> 78.2081 - <dt><specific-voice></dt> 78.2082 - <dd><p>The string 78.2083 - <span title="serialize a string">string escaped</span>.</p></dd> 78.2084 - 78.2085 - <dt><time></dt> 78.2086 - <dd><p>The time in seconds serialized as per <number> followed by 78.2087 - the literal string "<code>s</code>".</p></dd> 78.2088 - 78.2089 - <dt><uri></dt> 78.2090 - <dd><p>The <span data-anolis-spec="html">absolute URL</span> 78.2091 - <span title="serialize a URL">URL escaped</span>.</p></dd> 78.2092 - </dl> 78.2093 - 78.2094 - <p> 78.2095 - <absolute-size>, 78.2096 - <border-width>, 78.2097 - <border-style>, 78.2098 - <bottom>, 78.2099 - <generic-family>, 78.2100 - <generic-voice>, 78.2101 - <left>, 78.2102 - <margin-width>, 78.2103 - <padding-width>, 78.2104 - <relative-size>, 78.2105 - <right>, and 78.2106 - <top>, 78.2107 - are considered macros by this specification. They all represent instances 78.2108 - of components outlined above.</p> 78.2109 - 78.2110 - <p class="XXX">One idea is that we can remove this section somewhere in 78.2111 - the CSS3/CSS4 timeline by moving the above definitions to the drafts that 78.2112 - define the CSS components.</p> 78.2113 - 78.2114 - 78.2115 - <h5>Examples</h5> 78.2116 - 78.2117 - <p>Here are some examples of before and after results on specified values. 78.2118 - The before column could be what the author wrote in a style sheet, while 78.2119 - the after column shows what querying the DOM would return.</p> 78.2120 - 78.2121 - <div class="example"> 78.2122 - <table> 78.2123 - <thead> 78.2124 - <tr><th>Before</th><th>After 78.2125 - </th></tr></thead><tbody> 78.2126 - <tr><td><code>background: none</code></td><td><code>background: rgba(0, 0, 0, 0)</code> 78.2127 - </td></tr><tr><td><code>outline: none</code></td><td><code>outline: invert</code> 78.2128 - </td></tr><tr><td><code>border: none</code></td><td><code>border: medium</code> 78.2129 - </td></tr><tr><td><code>list-style: none</code></td><td><code>list-style: disc</code> 78.2130 - </td></tr><tr><td><code>margin: 0 1px 1px 1px</code></td><td><code>margin: 0px 1px 1px</code> 78.2131 - </td></tr><tr><td><code>azimuth: behind left</code></td><td><code>azimuth: 220deg</code> 78.2132 - </td></tr><tr><td><code>font-family: a, 'b"', serif</code></td><td><code>font-family: "a", "b\"", serif</code> 78.2133 - </td></tr><tr><td><code>content: url('h)i') '\[\]'</code></td><td><code>content: url("h)i") "[]"</code> 78.2134 - </td></tr><tr><td><code>azimuth: leftwards</code></td><td><code>azimuth: leftwards</code> 78.2135 - </td></tr><tr><td><code>color: rgb(18, 52, 86)</code></td><td><code>color: #123456</code> 78.2136 - </td></tr><tr><td><code>color: rgba(000001, 0, 0, 1)</code></td><td><code>color: #000000</code> 78.2137 - </td></tr></tbody></table> 78.2138 - 78.2139 - <p class="XXX">Some of these need to be updated per the new rules.</p> 78.2140 - </div> 78.2141 - 78.2142 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.2143 - 78.2144 - <h2>DOM Access to CSS Declaration Blocks</h2> 78.2145 - 78.2146 - <!-- ........................................................................................................................ --> 78.2147 - <!-- ........................................................................................................................ --> 78.2148 - 78.2149 - <h3>The <code>ElementCSSInlineStyle</code> Interface</h3> 78.2150 - 78.2151 - The <code>ElementCSSInlineStyle</code> interface is implemented by <code>Element</code> objects in order to provide access to inline style properties. 78.2152 -<pre class="idl"><span class="idlInterface" id="widl-def-ElementCSSInlineStyle">interface <span class="idlInterfaceID">ElementCSSInlineStyle</span> { 78.2153 -<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-ElementCSSInlineStyle-style">style</a></span>;</span> 78.2154 -};</span></pre> 78.2155 -<dl class="attributes"> 78.2156 -<dt class="attribute" id="widl-ElementCSSInlineStyle-style"> 78.2157 -<code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt> 78.2158 -<dd> 78.2159 -The <code>style</code> attribute must return a mutable <code>CSSStyleDeclaration</code> object that represents the inline style properties of the associated <code>Element</code> instance.</dd> 78.2160 -</dl> 78.2161 - 78.2162 - 78.2163 - <!-- ........................................................................................................................ --> 78.2164 - <!-- ........................................................................................................................ --> 78.2165 - 78.2166 - <h3>Extensions to the <code>Window</code> Interface</h3> 78.2167 - 78.2168 - 78.2169 -<pre class="idl"><span class="idlInterface" id="widl-def-Window">partial interface <span class="idlInterfaceID">Window</span> { 78.2170 -<span class="idlMethod"> <span class="idlMethType"><a>CSSStyleDeclaration</a></span> <span class="idlMethName"><a href="#widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt">getComputedStyle</a></span> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span> <span class="idlParamName">elt</span></span>);</span> 78.2171 -<span class="idlMethod"> <span class="idlMethType"><a>CSSStyleDeclaration</a></span> <span class="idlMethName"><a href="#widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt-DOMString-pseudoElt">getComputedStyle</a></span> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span> <span class="idlParamName">elt</span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">pseudoElt</span></span>);</span> 78.2172 -};</span></pre> 78.2173 -<dl class="methods"> 78.2174 -<dt class="method" id="widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt"> 78.2175 -<code>getComputedStyle</code> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span></span>), returns <span class="idlMethType"><a>CSSStyleDeclaration</a></span></dt> 78.2176 -<dt class="method" id="widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt-DOMString-pseudoElt"> 78.2177 -<code>getComputedStyle</code> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span></span>), returns <span class="idlMethType"><a>CSSStyleDeclaration</a></span></dt> 78.2178 -<dd> 78.2179 -<p>The <code>getComputedStyle</code> operation must run these steps:</p> <ol> <li><p>Let <var>doc</var> be the <code data-anolis-spec=dom>Document</code> associated with the <code data-anolis-spec=html>Window</code> object on which the method was invoked.</p></li> <li><p>Let <var>obj</var> be <var>elt</var>.</p></li> <li><p>If <var>pseudoElt</var> is as an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for either '<code>:before</code>' or '<code>::before</code>' let <var>obj</var> be the '::before' pseudo-element of <var>elt</var>.</p></li> <li><p>If <var>pseudoElt</var> is as an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for either '<code>:after</code>' or '<code>::after</code>' let <var>obj</var> be the '::after' pseudo-element of <var>elt</var>.</p></li> <li> <p>Return a <span>CSS declaration block</span> with the <span>CSS declaration block readonly flag</span> set and the <span>CSS declaration block declarations</span> set to all properties the user agent supports with as value the <span>resolved value</span> computed for <var>obj</var> using the style rules associated with <var>doc</var>.</p> <p class='note'>This means that even if <var>obj</var> is in a different document (e.g. one fetched via <code>XMLHttpRequest</code>) it will still use the style rules associated with the document that is associated with the global object on which <code title='dom-Window-getComputedStyle'>getComputedStyle()</code> was invoked to compute the <span>CSS declaration block</span>.</p> </li> </ol> <p class='note'>Because of historical IDL limitations the <code>getComputedStyle</code> operation used to be on a separate interface, <code>ViewCSS</code>.</p></dd> 78.2180 -</dl> 78.2181 - 78.2182 - 78.2183 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.2184 - 78.2185 - <h2>Resolved Values</h2> 78.2186 - 78.2187 - <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was 78.2188 - historically defined to return the "computed value" of an element or 78.2189 - pseudo-element. However, the concept of "computed value" changed between 78.2190 - revisions of CSS while the implementation of 78.2191 - <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to 78.2192 - remain the same for compatibility with deployed scripts. To address this 78.2193 - issue this specification introduces the concept of a 78.2194 - <dfn>resolved value</dfn>.</p> 78.2195 - 78.2196 - <p>The <span>resolved value</span> for a given property can be determined 78.2197 - as follows:</p> 78.2198 - 78.2199 - <dl class="switch"> 78.2200 - <!-- 78.2201 - We want to treat shorthand properties like any other value basically. 78.2202 - 78.2203 - <dt>'<code>background</code>' 78.2204 - <dt>'<code>border</code>' 78.2205 - <dt>'<code>border-collapse</code>' 78.2206 - <dt>'<code>border-color</code>' 78.2207 - <dt>'<code>border-spacing</code>' 78.2208 - <dt>'<code>border-style</code>' 78.2209 - <dt>'<code>border-top</code>' 78.2210 - <dt>'<code>border-right</code>' 78.2211 - <dt>'<code>border-bottom</code>' 78.2212 - <dt>'<code>border-left</code>' 78.2213 - <dt>'<code>border-width</code>' 78.2214 - <dt>'<code>font</code>' 78.2215 - <dt>'<code>list-style</code>' 78.2216 - <dt>'<code>margin</code>' 78.2217 - <dt>'<code>outline</code>' 78.2218 - <!- - overflow is not - -> 78.2219 - <dt>'<code>padding</code>' 78.2220 - <dt>'<code>pause</code>' 78.2221 - <dd> 78.2222 - <p>There is no <span>resolved value</span>.</p> 78.2223 - </dd> 78.2224 - --> 78.2225 - 78.2226 - <dt>'<code>line-height</code>'</dt> 78.2227 - <dd><p>The <span>resolved value</span> is the used value.</p></dd> 78.2228 - 78.2229 - <dt>'<code>height</code>'</dt> 78.2230 - <dt>'<code>margin</code>'</dt> 78.2231 - <dt>'<code>margin-bottom</code>'</dt> 78.2232 - <dt>'<code>margin-left</code>'</dt> 78.2233 - <dt>'<code>margin-right</code>'</dt> 78.2234 - <dt>'<code>margin-top</code>'</dt> 78.2235 - <dt>'<code>padding</code>'</dt> 78.2236 - <dt>'<code>padding-bottom</code>'</dt> 78.2237 - <dt>'<code>padding-left</code>'</dt> 78.2238 - <dt>'<code>padding-right</code>'</dt> 78.2239 - <dt>'<code>padding-top</code>'</dt> 78.2240 - <dt>'<code>width</code>'</dt> 78.2241 - <dd><p>If the property applies to the element or pseudo-element and the 78.2242 - <span>resolved value</span> of the '<code>display</code>' property is not 78.2243 - <code>none</code>, the <span>resolved value</span> is the 78.2244 - <span>used value</span>. Otherwise the <span>resolved value</span> is the 78.2245 - computed value.</p></dd> 78.2246 - 78.2247 - <dt>'<code>bottom</code>'</dt> 78.2248 - <dt>'<code>left</code>'</dt> 78.2249 - <dt>'<code>right</code>'</dt> 78.2250 - <dt>'<code>top</code>'</dt> 78.2251 - <dd><p>If the property applies to a positioned element and the 78.2252 - <span>resolved value</span> of the '<code>display</code>' property is not 78.2253 - <code>none</code>, the <span>resolved value</span> is the 78.2254 - <span>used value</span>. Otherwise the <span>resolved value</span> is the 78.2255 - computed value.</p></dd> 78.2256 - 78.2257 - <dt>Any other property</dt> 78.2258 - <dd><p>The <span>resolved value</span> is the computed value.</p></dd> 78.2259 - </dl> 78.2260 - 78.2261 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.2262 - 78.2263 - <h2 id="iana-considerations">IANA Considerations</h2> 78.2264 - 78.2265 - <!-- ........................................................................................................................ --> 78.2266 - <!-- ........................................................................................................................ --> 78.2267 - 78.2268 - <h3><dfn title="http-default-style"><code>Default-Style</code></dfn></h3> 78.2269 - 78.2270 - <p>This section describes a header field for registration in the Permanent 78.2271 - Message Header Field Registry. 78.2272 - <!--<a href="XXX">[RFC3864]</a>--></p> 78.2273 - 78.2274 - <dl> 78.2275 - <dt>Header field name</dt> 78.2276 - <dd>Default-Style</dd> 78.2277 - <dt>Applicable protocol</dt> 78.2278 - <dd>http</dd> 78.2279 - <dt>Status</dt> 78.2280 - <dd>standard</dd> 78.2281 - <dt>Author/Change controller</dt> 78.2282 - <dd>W3C</dd> 78.2283 - <dt>Specification document(s)</dt> 78.2284 - <dd>This document is the relevant specification.</dd> 78.2285 - <dt>Related information</dt> 78.2286 - <dd>None.</dd> 78.2287 - </dl> 78.2288 - 78.2289 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.2290 - 78.2291 - <h2 class="no-num">References</h2> 78.2292 - 78.2293 - <!-- ........................................................................................................................ --> 78.2294 - <!-- ........................................................................................................................ --> 78.2295 - 78.2296 - <h3 class="no-num">Normative references</h3> 78.2297 - <div id="anolis-references-normative"></div> 78.2298 - 78.2299 - <!-- ........................................................................................................................ --> 78.2300 - <!-- ........................................................................................................................ --> 78.2301 - 78.2302 - <h3 class="no-num">Informative references</h3> 78.2303 - <div id="anolis-references-informative"></div> 78.2304 - 78.2305 - <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 78.2306 - 78.2307 - <h2 class="no-num" id="acknowledgments">Acknowledgments</h2> 78.2308 - 78.2309 - <p>The editors would like to thank 78.2310 - 78.2311 - Alexey Feldgendler, 78.2312 - Björn Höhrmann, 78.2313 - Brian Kardell, 78.2314 - Christian Krebs, 78.2315 - Daniel Glazman, 78.2316 - David Baron, 78.2317 - <i>fantasai</i>, 78.2318 - Hallvord R. M. Steen, 78.2319 - Ian Hickson, 78.2320 - John Daggett, 78.2321 - Lachlan Hunt, 78.2322 - Morten Stenshorne, 78.2323 - Philip Taylor, 78.2324 - Robert O'Callahan, 78.2325 - Sjoerd Visscher, 78.2326 - Simon Pieters, 78.2327 - Sylvain Galineau, 78.2328 - Tarquin Wilton-Jones, and 78.2329 - Zack Weinberg 78.2330 - 78.2331 - for contributing to this specification.</p> 78.2332 - 78.2333 - <p>Additional thanks to Ian Hickson for writing the 78.2334 - initial version of the alternative style sheets API and canonicalization 78.2335 - (now serialization) rules for CSS values.</p> 78.2336 - 78.2337 - <!-- XXX NOTES 78.2338 - 78.2339 - <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox 78.2340 - and Opera, but does not create a StyleSheet in IE. I prefer IE. 78.2341 - 78.2342 - <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and 78.2343 - TEXT/CSS in Opera and IE. I prefer Firefox. 78.2344 - 78.2345 - <style> sets the style sheet location to the document location Firefox, 78.2346 - the empty string in IE, and null in Opera. I prefer Opera 78.2347 - 78.2348 - <style media="x"> invokes .sheet.media.mediaText = "x" 78.2349 - 78.2350 - <style> does not "have" a title 78.2351 - 78.2352 - .cascadedStyle that returns less keywords than currentStyle, no inherit, 78.2353 - etc. 78.2354 - 78.2355 - Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529 78.2356 - --> 78.2357 - 78.2358 - 78.2359 - 78.2360 -</body> 78.2361 -</html>
79.1 --- a/cssom/README Tue Jul 31 14:04:38 2012 -0700 79.2 +++ b/cssom/README Wed Aug 08 09:06:37 2012 -0700 79.3 @@ -17,10 +17,10 @@ 79.4 79.5 NOTES FOR EDITORS 79.6 79.7 -1. The primary editor is using MacOSX 10.7.X (Lion) and tools provided via 79.8 -MacOSX, e.g., gcc, and MacPorts, e.g., py27-{lxml,html5lib} (used by anolis), 79.9 -so if you aren't using this platform or something close to it, you will have 79.10 -to account for any differences. 79.11 +1. The primary editor is using MacOSX 10.8 (Mountain Lion) and tools provided 79.12 +by MacOSX, e.g., gcc, and MacPorts, e.g., py27-{lxml,html5lib} (used by 79.13 +anolis), so if you aren't using this platform or something close to it, you 79.14 +will have to account for any differences. 79.15 79.16 2. At the current time, the pre-processor tool requires a customized version 79.17 of WebIDL.js in order to support (1) string valued extended attributes and 79.18 @@ -53,6 +53,15 @@ 79.19 - must be loadable from node via require() 79.20 * anolis (http://wiki.whatwg.org/wiki/Anolis) 79.21 79.22 +COMMITTING CHANGES 79.23 + 79.24 +1. hg pull 79.25 +2. hg update 79.26 +3. make cleanall all 79.27 +4. [optionally] make clean in order to remove non-committed artifacts 79.28 +5. hg commit -m 'comment' 79.29 +6. hg push 79.30 + 79.31 TO DO 79.32 79.33 1. IDL Pre-Processor Related 79.34 @@ -62,11 +71,9 @@ 79.35 * Generate typedef and implements definitions. 79.36 * Generate extended attributes, e.g., PutForwards, NoInterfaceObject, etc. 79.37 * Generate setters, getters (not presently used in CSSOM IDL definitions). 79.38 -* Remove coded-in file names (e.g., cssom.json), accepting on command line. 79.39 79.40 2. Content Related 79.41 79.42 -* Substitute correct W3C copyright notice. 79.43 * Restore named properties (i.e., CSS2Properties) on CSSStyleDeclaration. 79.44 * Reorganize content sections, reordering aggregating/dividing as needed. 79.45 * Fill in implicit TBDs.
80.1 --- a/cssom/cssom-generate.js Tue Jul 31 14:04:38 2012 -0700 80.2 +++ b/cssom/cssom-generate.js Wed Aug 08 09:06:37 2012 -0700 80.3 @@ -865,14 +865,26 @@ 80.4 util.puts ( output ); 80.5 }, 80.6 run : function(argv) { 80.7 - try { 80.8 - var sIdl = fs.readFileSync ( 'cssom.json', 'utf8' ); 80.9 - idl = JSON.parse ( sIdl ); 80.10 - var sDoc = fs.createReadStream ( 'cssom-source' ); 80.11 - p.on ( 'end', $.onend ); 80.12 - p.parse ( sDoc ); 80.13 - } catch ( e ) { 80.14 - util.puts ( util.inspect ( e ) ); 80.15 + var argc = argv.length - 2; 80.16 + if ( argc < 1 ) { 80.17 + util.error ( "Error: Missing JSONFILE argument." ); 80.18 + process.exit(2); 80.19 + } else if ( argc < 2 ) { 80.20 + util.error ( "Error: Missing INPUTFILE argument." ); 80.21 + process.exit(2); 80.22 + } else { 80.23 + try { 80.24 + var jsonFile = argv[argc++]; 80.25 + var inFile = argv[argc++]; 80.26 + var sIdl = fs.readFileSync ( jsonFile, 'utf8' ); 80.27 + idl = JSON.parse ( sIdl ); 80.28 + var sDoc = fs.createReadStream ( inFile ); 80.29 + p.on ( 'end', $.onend ); 80.30 + p.parse ( sDoc ); 80.31 + } catch ( e ) { 80.32 + util.error ( util.inspect ( e ) ); 80.33 + process.exit(1); 80.34 + } 80.35 } 80.36 } 80.37 };
81.1 --- a/cssom/cssom-source Tue Jul 31 14:04:38 2012 -0700 81.2 +++ b/cssom/cssom-source Wed Aug 08 09:06:37 2012 -0700 81.3 @@ -54,13 +54,7 @@ 81.4 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd> 81.5 </dl> 81.6 81.7 - <p class="dontpublish copyright"><a rel=license href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="http://i.creativecommons.org/p/zero/1.0/80x15.png" alt=CC0></a> 81.8 - To the extent possible under law, the editors have waived all copyright and 81.9 - related or neighboring rights to this work. In addition, as of 81.10 - [DATE: 01 Jan 1901], the editors have made this specification available 81.11 - under the <a rel=license href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0">Open 81.12 - Web Foundation Agreement, Version 1.0</a>.</p> 81.13 - <div class=publish><!--copyright--></div> 81.14 + <!--copyright--> 81.15 81.16 </div> 81.17 81.18 @@ -124,7 +118,7 @@ 81.19 81.20 <h2 id="introduction">Introduction</h2> 81.21 81.22 - <p class="XXX">...</p> 81.23 + <p class="issue">...</p> 81.24 81.25 <!-- ........................................................................................................................ --> 81.26 <!-- ........................................................................................................................ --> 81.27 @@ -190,7 +184,7 @@ 81.28 <span data-anolis-ref>XMLSS</span> 81.29 <span data-anolis-ref>XML</span> 81.30 81.31 - <p class="XXX"><dfn>supported styling language</dfn> 81.32 + <p class="issue"><dfn>supported styling language</dfn> 81.33 81.34 <p>When this specification talks about object 81.35 <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface 81.36 @@ -390,7 +384,7 @@ 81.37 81.38 <h4>Serializing Media Feature Values</h4> 81.39 81.40 - <p class="XXX">This should probably be done in terms of mapping it to 81.41 + <p class="issue">This should probably be done in terms of mapping it to 81.42 serializing CSS values as media features are defined in terms of CSS 81.43 values after all.</p> 81.44 81.45 @@ -1030,7 +1024,6 @@ 81.46 <pre><link rel="alternate stylesheet" title="foo" href="a"> 81.47 <link rel="alternate stylesheet" title="bar" href="b"> 81.48 <script> 81.49 - 81.50 document.selectedStyleSheetSet = 'foo'; 81.51 document.styleSheets[1].disabled = false; 81.52 </script> 81.53 @@ -1055,7 +1048,6 @@ 81.54 document.styleSheets[1].disabled = false; 81.55 </script> 81.56 <link rel="stylesheet" title="foo" href="c"> 81.57 - 81.58 <link rel="alternate stylesheet" title="bar" href="d"> 81.59 <script> 81.60 var after = document.preferredStyleSheetSet; 81.61 @@ -1275,9 +1267,6 @@ 81.62 <dt><span>style sheet parent</span></dt> 81.63 <dd><p>null</p></dd> 81.64 81.65 - <dt><span>style sheet owner node</span></dt> 81.66 - <dd><p>null</p></dd> 81.67 - 81.68 <dt><span>style sheet owner CSS rule</span></dt> 81.69 <dd><p>null</p></dd> 81.70 81.71 @@ -1309,7 +1298,7 @@ 81.72 81.73 <dl class="switch"> 81.74 <dt><code>CSSStyleRule</code></dt> 81.75 - <dd class=XXX>...</dd> 81.76 + <dd class="issue">...</dd> 81.77 81.78 <dt><code>CSSImportRule</code></dt> 81.79 <dd> 81.80 @@ -1328,13 +1317,13 @@ 81.81 </dd> 81.82 81.83 <dt><code>CSSMediaRule</code></dt> 81.84 - <dd class=XXX>...</dd> 81.85 + <dd class="issue">...</dd> 81.86 81.87 <dt><code>CSSFontFaceRule</code></dt> 81.88 - <dd class=XXX>...</dd> 81.89 + <dd class="issue">...</dd> 81.90 81.91 <dt><code>CSSPageRule</code></dt> 81.92 - <dd class=XXX>...</dd> 81.93 + <dd class="issue">...</dd> 81.94 81.95 <dt><code>CSSNamespaceRule</code></dt> 81.96 <dd><p>The literal string "<code>@namespace</code>", followed by a space 81.97 @@ -1462,11 +1451,11 @@ 81.98 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p> 81.99 81.100 81.101 - <p class="XXX">To 81.102 + <p class="issue">To 81.103 <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> 81.104 ...</p> 81.105 81.106 - <p class="XXX">To 81.107 + <p class="issue">To 81.108 <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn> 81.109 ...</p> 81.110 81.111 @@ -1613,7 +1602,7 @@ 81.112 the literal string "<code>deg</code>".</p></dd> 81.113 81.114 <dt><color></dt> 81.115 - <dd><p class=XXX>preserve system colors, maybe color keywords...</p></dd> 81.116 + <dd><p class="issue">preserve system colors, maybe color keywords...</p></dd> 81.117 <!-- 81.118 <dt>It is a system color</dt> 81.119 81.120 @@ -1683,8 +1672,8 @@ 81.121 "<code>0px</code>".</p> 81.122 81.123 <p>Absolute lengths: the number of millimeters serialized as per 81.124 - <number> followed by the literal string "<code>mm</code>". 81.125 - <span class=XXX>Rumor has it absolute lengths will become relative 81.126 + <number> followed by the literal string "<code>mm</code>".</p> 81.127 + <p class="issue">Rumor has it absolute lengths will become relative 81.128 lengths. Centimeters would be compatible with <resolution>...</p> 81.129 81.130 <p>Relative lengths: the <number> component serialized as per 81.131 @@ -1693,7 +1682,7 @@ 81.132 </dd> 81.133 81.134 <dt><number></dt> 81.135 - <dd><p class=XXX>Browsers seem to use ToString(), but that might give a 81.136 + <dd><p class="issue">Browsers seem to use ToString(), but that might give a 81.137 significand which according to some is teh evil (and also currently does 81.138 not parse correctly).</p></dd> 81.139 81.140 @@ -1743,7 +1732,7 @@ 81.141 are considered macros by this specification. They all represent instances 81.142 of components outlined above.</p> 81.143 81.144 - <p class="XXX">One idea is that we can remove this section somewhere in 81.145 + <p class="issue">One idea is that we can remove this section somewhere in 81.146 the CSS3/CSS4 timeline by moving the above definitions to the drafts that 81.147 define the CSS components.</p> 81.148 81.149 @@ -1772,7 +1761,7 @@ 81.150 <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code> 81.151 </table> 81.152 81.153 - <p class="XXX">Some of these need to be updated per the new rules.</p> 81.154 + <p class="issue">Some of these need to be updated per the new rules.</p> 81.155 </div> 81.156 81.157 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
82.1 --- a/cssom/cssom.css Tue Jul 31 14:04:38 2012 -0700 82.2 +++ b/cssom/cssom.css Wed Aug 08 09:06:37 2012 -0700 82.3 @@ -52,14 +52,14 @@ 82.4 82.5 82.6 /* --- EXAMPLES --- */ 82.7 -pre.example { 82.8 +.example { 82.9 border-top: 1px solid #ff4500; 82.10 border-bottom: 1px solid #ff4500; 82.11 padding: 1em; 82.12 - margin-top: 1em; 82.13 + margin: 2em 0; 82.14 } 82.15 82.16 -pre.example::before { 82.17 +.example::before { 82.18 content: "Example"; 82.19 display: block; 82.20 width: 150px;
83.1 --- a/default.css Tue Jul 31 14:04:38 2012 -0700 83.2 +++ b/default.css Wed Aug 08 09:06:37 2012 -0700 83.3 @@ -219,6 +219,11 @@ 83.4 text-align: center; 83.5 margin: 2.5em 0; 83.6 } 83.7 +div.figure pre, div.sidefigure pre, figure pre { 83.8 + text-align: left; 83.9 + display: table; 83.10 + margin: 1em auto; 83.11 +} 83.12 div.sidefigure, figure.sidefigure { 83.13 float: right; 83.14 width: 50%;