(Merge)

Mon, 22 Oct 2012 00:41:17 +0200

author
Bert Bos <bert@w3.org>
date
Mon, 22 Oct 2012 00:41:17 +0200
changeset 6918
7bc3cb697968
parent 6917
57e52489acd0
parent 6908
7685f1c1b8b7
child 6919
6e01caf3278c

(Merge)

css-counter-styles-3/Overview.html file | annotate | diff | comparison | revisions
css-counter-styles-3/Overview.src.html file | annotate | diff | comparison | revisions
css3-sizing/Overview.html file | annotate | diff | comparison | revisions
css3-sizing/Overview.src.html file | annotate | diff | comparison | revisions
css3-text-decor/Overview.html file | annotate | diff | comparison | revisions
css3-text-decor/Overview.src.html file | annotate | diff | comparison | revisions
css3-text-decor/text-emphasis-ja.gif file | annotate | diff | comparison | revisions
css3-text-decor/text-emphasis-ruby.png file | annotate | diff | comparison | revisions
css3-text-decor/text-emphasis-v.gif file | annotate | diff | comparison | revisions
css3-text-decor/text-emphasis-zh.gif file | annotate | diff | comparison | revisions
css3-text-decor/underline-averaging.gif file | annotate | diff | comparison | revisions
css3-text-decor/underline-example.png file | annotate | diff | comparison | revisions
css3-text-decor/underline-position-alphabetic.png file | annotate | diff | comparison | revisions
css3-text-decor/underline-position-below.png file | annotate | diff | comparison | revisions
css3-text-decor/underline-position-left.png file | annotate | diff | comparison | revisions
css3-text-decor/underline-position-right.png file | annotate | diff | comparison | revisions
     1.1 --- a/.htaccess	Mon Oct 22 00:33:44 2012 +0200
     1.2 +++ b/.htaccess	Mon Oct 22 00:41:17 2012 +0200
     1.3 @@ -12,7 +12,9 @@
     1.4  # Versioning System Switchover
     1.5  
     1.6  #XXX insert rules here
     1.7 +Redirect /csswg/css3-text-decor http://dev.w3.org/csswg/css-text-decor-3
     1.8  
     1.9  # Unversioned URLs
    1.10  
    1.11  Redirect /csswg/css-counter-styles http://dev.w3.org/csswg/css-counter-styles-3
    1.12 +Redirect /csswg/css-text-decor http://dev.w3.org/csswg/css-text-decor-3
    1.13 \ No newline at end of file
     2.1 --- a/css-counter-styles-3/Overview.html	Mon Oct 22 00:33:44 2012 +0200
     2.2 +++ b/css-counter-styles-3/Overview.html	Mon Oct 22 00:41:17 2012 +0200
     2.3 @@ -234,6 +234,10 @@
     2.4       <li><a href="#counter-style-symbols"><span class=secno>3.7. </span>
     2.5        Marker characters: the ‘<code class=property>symbols</code>’ and
     2.6        ‘<code class=property>additive-symbols</code>’ descriptors</a>
     2.7 +
     2.8 +     <li><a href="#counter-style-speak-as"><span class=secno>3.8. </span>
     2.9 +      Speech Synthesis: the ‘<code class=property>speak-as</code>’
    2.10 +      descriptor</a>
    2.11      </ul>
    2.12  
    2.13     <li><a href="#symbols-function"><span class=secno>4. </span> Defining
    2.14 @@ -377,6 +381,9 @@
    2.15     <li> a <dfn id=range title=counter-range>range</dfn>, which limits the
    2.16      values that a counter style handles
    2.17  
    2.18 +   <li> a <dfn id=spoken-form title=counter-speak-as>spoken form</dfn>, which
    2.19 +    describes how to read out the counter style in a speech synthesizer
    2.20 +
    2.21     <li> and a <dfn id=fallback-style title=counter-fallback>fallback
    2.22      style</dfn>, to render the representation with when the counter value is
    2.23      outside the counter style's range or the counter style otherwise can't
    2.24 @@ -384,16 +391,16 @@
    2.25    </ul>
    2.26  
    2.27    <p> When asked to <dfn id=generate-a-counter-representation
    2.28 -   title=generate-a-counter>generate a counter representation</dfn> using a
    2.29 -   particular counter style for a particular counter value, follow these
    2.30 -   steps:
    2.31 +   title="generate a counter|generate a counter representation">generate a
    2.32 +   counter representation</dfn> using a particular counter style for a
    2.33 +   particular counter value, follow these steps:
    2.34  
    2.35    <ol>
    2.36     <li> If the counter value is outside the <a href="#range"><i
    2.37      title=counter-range>range</i></a> of the counter style, exit this
    2.38 -    algorithm and instead <a href="#generate-a-counter-representation"><i
    2.39 -    title=generate-a-counter>generate a counter representation</i></a> using
    2.40 -    the counter style's fallback style and the same counter value.
    2.41 +    algorithm and instead <i title=generate-a-counter>generate a counter
    2.42 +    representation</i> using the counter style's fallback style and the same
    2.43 +    counter value.
    2.44  
    2.45     <li> Using the counter value and the <a href="#algorithm"><i
    2.46      title=counter-algorithm>counter algorithm</i></a> for the counter style,
    2.47 @@ -432,7 +439,8 @@
    2.48     class=css>@counter-style</code></a>’ rule is:
    2.49  
    2.50    <pre>
    2.51 -@counter-style <i>&lt;counter-style-name></i> {
    2.52 +@counter-style <a
    2.53 +   href="#speak-as-counter-style"><i>&lt;counter-style-name></i></a> {
    2.54  	[ descriptor: value; ]+
    2.55  }
    2.56  	</pre>
    2.57 @@ -442,13 +450,14 @@
    2.58     from the Syntax spec, so I can just say <code>&lt;declaration-list></code>
    2.59     or something.
    2.60  
    2.61 -  <p> The <i>&lt;counter-style-name></i> must be be a valid identifier and
    2.62 -   must not be ‘<a href="#decimal"><code class=css>decimal</code></a>’ or
    2.63 -   ‘<code class=css>none</code>’, or else the rule is invalid. (Note,
    2.64 -   however, that some names, like ‘<code class=css>inside</code>’ or
    2.65 -   ‘<code class=css>initial</code>’, might conflict with the existing
    2.66 -   values of properties like ‘<code class=property>list-style</code>’,
    2.67 -   and thus won't be usable there.)
    2.68 +  <p> The <a
    2.69 +   href="#speak-as-counter-style"><i>&lt;counter-style-name></i></a> must be
    2.70 +   be a valid identifier and must not be ‘<a href="#decimal"><code
    2.71 +   class=css>decimal</code></a>’ or ‘<code class=css>none</code>’, or
    2.72 +   else the rule is invalid. (Note, however, that some names, like ‘<code
    2.73 +   class=css>inside</code>’ or ‘<code class=css>initial</code>’, might
    2.74 +   conflict with the existing values of properties like ‘<code
    2.75 +   class=property>list-style</code>’, and thus won't be usable there.)
    2.76  
    2.77    <p class=issue> The names should be case-insensitive, but we haven't yet
    2.78     figured out exactly which kind of insensitivity we want for CSS in
    2.79 @@ -514,7 +523,7 @@
    2.80     will be used to construct the counter's representation based on the
    2.81     counter value. For example, ‘<a href="#cyclic"><code
    2.82     class=css>cyclic</code></a>’ counter styles just cycle through their
    2.83 -   symbols repeatedly, while ‘<a href="#numeric"><code
    2.84 +   symbols repeatedly, while ‘<a href="#speak-as-numeric"><code
    2.85     class=css>numeric</code></a>’ counter styles interpret their symbols as
    2.86     digits and build their representation accordingly. The systems are defined
    2.87     as follows:
    2.88 @@ -630,8 +639,8 @@
    2.89     would be "***"and "†††", etc. It can be used for footnote-style
    2.90     markers, and is also sometimes used for alphabetic-style lists for a
    2.91     slightly different presentation than what the ‘<a
    2.92 -   href="#alphabetic"><code class=css>alphabetic</code></a>’ system
    2.93 -   presents.
    2.94 +   href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’
    2.95 +   system presents.
    2.96  
    2.97    <p> If the system is <dfn id=symbolic>‘<code
    2.98     class=css>symbolic</code>’</dfn>, the ‘<a
    2.99 @@ -717,23 +726,24 @@
   2.100     than 20 characters.
   2.101  
   2.102    <h4 id=alphabetic-system><span class=secno>3.1.4. </span> Bijective
   2.103 -   Numerals: the ‘<a href="#alphabetic"><code
   2.104 +   Numerals: the ‘<a href="#speak-as-alphabetic"><code
   2.105     class=css>alphabetic</code></a>’ system</h4>
   2.106  
   2.107 -  <p> The ‘<a href="#alphabetic"><code class=css>alphabetic</code></a>’
   2.108 -   counter system interprets the list of <i>counter symbols</i> as digits to
   2.109 -   an <em title="">alphabetic</em> numbering system, similar to the default
   2.110 -   ‘<a href="#lower-alpha"><code class=css>lower-alpha</code></a>’
   2.111 -   counter style, which wraps from ‘<code class=property>a</code>’,
   2.112 -   ‘<code class=property>b</code>’, ‘<code class=property>c</code>’,
   2.113 -   to ‘<code class=property>aa</code>’, ‘<code
   2.114 -   class=property>ab</code>’, ‘<code class=property>ac</code>’.
   2.115 -   Alphabetic numbering systems do not contain a digit representing 0; so the
   2.116 -   first value when a new digit is added is composed solely of the first
   2.117 -   digit. Alphabetic numbering systems are commonly used for lists, and also
   2.118 -   appear in many spreadsheet programs to number columns. The first <a
   2.119 -   href="#counter-symbol"><i>counter symbol</i></a> in the list is
   2.120 -   interpreted as the digit 1, the second as the digit 2, and so on.
   2.121 +  <p> The ‘<a href="#speak-as-alphabetic"><code
   2.122 +   class=css>alphabetic</code></a>’ counter system interprets the list of
   2.123 +   <i>counter symbols</i> as digits to an <em title="">alphabetic</em>
   2.124 +   numbering system, similar to the default ‘<a href="#lower-alpha"><code
   2.125 +   class=css>lower-alpha</code></a>’ counter style, which wraps from
   2.126 +   ‘<code class=property>a</code>’, ‘<code class=property>b</code>’,
   2.127 +   ‘<code class=property>c</code>’, to ‘<code
   2.128 +   class=property>aa</code>’, ‘<code class=property>ab</code>’,
   2.129 +   ‘<code class=property>ac</code>’. Alphabetic numbering systems do not
   2.130 +   contain a digit representing 0; so the first value when a new digit is
   2.131 +   added is composed solely of the first digit. Alphabetic numbering systems
   2.132 +   are commonly used for lists, and also appear in many spreadsheet programs
   2.133 +   to number columns. The first <a href="#counter-symbol"><i>counter
   2.134 +   symbol</i></a> in the list is interpreted as the digit 1, the second as
   2.135 +   the digit 2, and so on.
   2.136  
   2.137    <p> If the system is <dfn id=alphabetic>‘<code
   2.138     class=css>alphabetic</code>’</dfn>, the ‘<a
   2.139 @@ -834,7 +844,8 @@
   2.140    <p>Finally, return <var>S</var>.
   2.141  
   2.142    <h4 id=numeric-system><span class=secno>3.1.5. </span> Positional Numerals:
   2.143 -   the ‘<a href="#numeric"><code class=css>numeric</code></a>’ system</h4>
   2.144 +   the ‘<a href="#speak-as-numeric"><code class=css>numeric</code></a>’
   2.145 +   system</h4>
   2.146  
   2.147    <p> The <dfn id=numeric>‘<code class=css>numeric</code>’</dfn> counter
   2.148     system interprets the list of <i>counter symbols</i> as digits to a
   2.149 @@ -843,7 +854,7 @@
   2.150     first <a href="#counter-symbol"><i>counter symbol</i></a> in the list is
   2.151     interpreted as the digit 0, the second as the digit 1, and so on.
   2.152  
   2.153 -  <p> If the system is ‘<a href="#numeric"><code
   2.154 +  <p> If the system is ‘<a href="#speak-as-numeric"><code
   2.155     class=css>numeric</code></a>’, the ‘<a href="#descdef-symbols"><code
   2.156     class=property>symbols</code></a>’ descriptor must contain at least two
   2.157     <i>counter symbols</i>, or else the ‘<a href="#at-counter-style"><code
   2.158 @@ -1152,29 +1163,31 @@
   2.159     ranges, the counter style instead drops down to its fallback counter
   2.160     style.
   2.161  
   2.162 -  <p>If the value is not ‘<code class=css>auto</code>’, the first value
   2.163 -   of each range in the list represents the lower bound of the range (with
   2.164 -   ‘<code class=css>infinite</code>’ representing negative infinity), and
   2.165 -   the second value represents the upper bound of the range (with ‘<code
   2.166 +  <p>If the value is not ‘<a href="#speak-as-auto"><code
   2.167 +   class=css>auto</code></a>’, the first value of each range in the list
   2.168 +   represents the lower bound of the range (with ‘<code
   2.169 +   class=css>infinite</code>’ representing negative infinity), and the
   2.170 +   second value represents the upper bound of the range (with ‘<code
   2.171     class=property>infinite</code>’ representing positive infinity). This is
   2.172     an inclusive range - it includes both the lower and upper bound numbers.
   2.173     The range of the counter style as a whole is the union of the individual
   2.174     ranges. If the lower bound of any range is higher than the higher bound,
   2.175     the entire descriptor is invalid and must be ignored.
   2.176  
   2.177 -  <p>If the value is ‘<code class=css>auto</code>’, the range depends on
   2.178 -   the counter system. For ‘<a href="#cyclic"><code
   2.179 -   class=css>cyclic</code></a>’, ‘<a href="#numeric"><code
   2.180 -   class=css>numeric</code></a>’, and ‘<a href="#fixed"><code
   2.181 -   class=css>fixed</code></a>’ systems, it must be treated identically to
   2.182 -   specifying ‘<code class=css>infinite infinite</code>’. For ‘<a
   2.183 -   href="#alphabetic"><code class=css>alphabetic</code></a>’ and ‘<a
   2.184 -   href="#symbolic"><code class=css>symbolic</code></a>’, it must be
   2.185 -   treated identically to ‘<code class=css>1 infinite</code>’. For ‘<a
   2.186 -   href="#additive"><code class=css>additive</code></a>’, it must be
   2.187 -   treated identically to ‘<code class=css>0 infinite</code>’. For ‘<a
   2.188 -   href="#override"><code class=css>override</code></a>’, it must be
   2.189 -   treated according to the system of the counter style it is overriding.
   2.190 +  <p>If the value is ‘<a href="#speak-as-auto"><code
   2.191 +   class=css>auto</code></a>’, the range depends on the counter system. For
   2.192 +   ‘<a href="#cyclic"><code class=css>cyclic</code></a>’, ‘<a
   2.193 +   href="#speak-as-numeric"><code class=css>numeric</code></a>’, and ‘<a
   2.194 +   href="#fixed"><code class=css>fixed</code></a>’ systems, it must be
   2.195 +   treated identically to specifying ‘<code class=css>infinite
   2.196 +   infinite</code>’. For ‘<a href="#speak-as-alphabetic"><code
   2.197 +   class=css>alphabetic</code></a>’ and ‘<a href="#symbolic"><code
   2.198 +   class=css>symbolic</code></a>’, it must be treated identically to
   2.199 +   ‘<code class=css>1 infinite</code>’. For ‘<a href="#additive"><code
   2.200 +   class=css>additive</code></a>’, it must be treated identically to
   2.201 +   ‘<code class=css>0 infinite</code>’. For ‘<a href="#override"><code
   2.202 +   class=css>override</code></a>’, it must be treated according to the
   2.203 +   system of the counter style it is overriding.
   2.204  
   2.205    <p>Some counter style systems have their own implicit ranges, specified
   2.206     above in the individual descriptions for each system. The explicit range
   2.207 @@ -1293,8 +1306,8 @@
   2.208     descriptor. The ‘<a href="#descdef-symbols"><code
   2.209     class=property>symbols</code></a>’ descriptor must be specified if the
   2.210     counter system is ‘<a href="#cyclic"><code
   2.211 -   class=css>cyclic</code></a>’, ‘<a href="#numeric"><code
   2.212 -   class=css>numeric</code></a>’, ‘<a href="#alphabetic"><code
   2.213 +   class=css>cyclic</code></a>’, ‘<a href="#speak-as-numeric"><code
   2.214 +   class=css>numeric</code></a>’, ‘<a href="#speak-as-alphabetic"><code
   2.215     class=css>alphabetic</code></a>’, ‘<a href="#symbolic"><code
   2.216     class=css>symbolic</code></a>’, or ‘<a href="#fixed"><code
   2.217     class=css>fixed</code></a>’, and the ‘<a
   2.218 @@ -1332,7 +1345,110 @@
   2.219     href="http://dev.w3.org/csswg/css3-images/#default-object-size">default
   2.220     object size</a> of an image <a href="#counter-symbol"><i>counter
   2.221     symbol</i></a> is a 1em by 1em square.
   2.222 -   <!-- ====================================================================== -->
   2.223 +
   2.224 +  <h3 id=counter-style-speak-as><span class=secno>3.8. </span> Speech
   2.225 +   Synthesis: the ‘<a href="#descdef-speak-as"><code
   2.226 +   class=property>speak-as</code></a>’ descriptor</h3>
   2.227 +
   2.228 +  <table class=descdef>
   2.229 +   <tbody>
   2.230 +    <tr>
   2.231 +     <th>Name:
   2.232 +
   2.233 +     <td><dfn id=descdef-speak-as>speak-as</dfn>
   2.234 +
   2.235 +    <tr>
   2.236 +     <th>Value:
   2.237 +
   2.238 +     <td>auto | numeric | alphabetic | bullet | &lt;counter-style-name>
   2.239 +
   2.240 +    <tr>
   2.241 +     <th>Initial:
   2.242 +
   2.243 +     <td>auto
   2.244 +  </table>
   2.245 +
   2.246 +  <p> A counter style can be constructed with a meaning that is obvious
   2.247 +   visually, but impossible to meaningfully represent via a speech
   2.248 +   synthesizer, or possible but nonsensical when naively read out. The ‘<a
   2.249 +   href="#descdef-speak-as"><code class=property>speak-as</code></a>’
   2.250 +   descriptor describes how to synthesize the spoken form of a counter
   2.251 +   formatted with the given counter style. Values have the following
   2.252 +   meanings:
   2.253 +
   2.254 +  <dl>
   2.255 +   <dt><dfn id=speak-as-auto>‘<code class=css>auto</code>’</dfn>
   2.256 +
   2.257 +   <dd> If the counter style's ‘<a href="#descdef-system"><code
   2.258 +    class=property>system</code></a>’ is ‘<a
   2.259 +    href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’,
   2.260 +    this value computes to ‘<a href="#speak-as-alphabetic"><code
   2.261 +    class=css>alphabetic</code></a>’. If the ‘<a
   2.262 +    href="#descdef-system"><code class=property>system</code></a>’ is ‘<a
   2.263 +    href="#cyclic"><code class=css>cyclic</code></a>’, this value computes
   2.264 +    to ‘<a href="#speak-as-symbolic"><code class=css>bullet</code></a>’.
   2.265 +    Otherwise, this value computes to ‘<a href="#speak-as-numeric"><code
   2.266 +    class=css>numeric</code></a>’.
   2.267 +
   2.268 +   <dt><dfn id=speak-as-numeric>‘<code class=css>numeric</code>’</dfn>
   2.269 +
   2.270 +   <dd> The counter's value is spoken as a number in the document language.
   2.271 +
   2.272 +   <dt><dfn id=speak-as-alphabetic>‘<code
   2.273 +    class=css>alphabetic</code>’</dfn>
   2.274 +
   2.275 +   <dd> <a href="#generate-a-counter-representation"><i>Generate a counter
   2.276 +    representation</i></a> for the value as normal, then spell it out
   2.277 +    letter-by-letter in the document language. If the UA does not know how to
   2.278 +    pronounce the symbols, it may handle it as ‘<a
   2.279 +    href="#speak-as-numeric"><code class=css>numeric</code></a>’.
   2.280 +    <p> For example, ‘<a href="#lower-greek"><code
   2.281 +     class=css>lower-greek</code></a>’ in English would be read out as
   2.282 +     "alpha", "beta", "gamma", etc. Conversely, ‘<a
   2.283 +     href="#upper-latin"><code class=css>upper-latin</code></a>’ in French
   2.284 +     would be read out as (in phonetic notation) /a/, /be/, /se/, etc.
   2.285 +
   2.286 +   <dt><dfn id=speak-as-symbolic>‘<code class=css>bullet</code>’</dfn>
   2.287 +
   2.288 +   <dd> The UA speaks a UA-defined phrase or audio cue that represents a list
   2.289 +    item being read out.
   2.290 +
   2.291 +   <dt><dfn
   2.292 +    id=speak-as-counter-style><var>&lt;counter-style-name></var></dfn>
   2.293 +
   2.294 +   <dd> The counter's value is instead spoken out in the specific style. If
   2.295 +    the specified style does not exist, this value is treated as ‘<a
   2.296 +    href="#speak-as-auto"><code class=css>auto</code></a>’.
   2.297 +  </dl>
   2.298 +
   2.299 +  <div class=example>
   2.300 +   <p> The ability to defer pronunciation to another counter style can help
   2.301 +    when the symbols being used aren't actually letters. For example, here's
   2.302 +    a possible definition of a ‘<a href="#circled-lower-latin"><code
   2.303 +    class=css>circled-lower-latin</code></a>’ counter-style, using some
   2.304 +    special unicode characters:
   2.305 +
   2.306 +   <pre class=stylesheet>
   2.307 +@counter-style <dfn
   2.308 +    id=circled-lower-latin>circled-lower-latin</dfn> {
   2.309 +  system: alphabetic;
   2.310 +  speak-as: lower-latin;
   2.311 +  symbols: ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ;
   2.312 +  suffix: '';
   2.313 +}</pre>
   2.314 +
   2.315 +   <p> Setting its ‘<a href="#descdef-system"><code
   2.316 +    class=property>system</code></a>’ to ‘<a
   2.317 +    href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’
   2.318 +    would normally make the UA try to read out the names of the characters,
   2.319 +    but in this case that might be something like "Circled Letter A", which
   2.320 +    is unlikely to make sense. Instead, explicitly setting ‘<a
   2.321 +    href="#descdef-speak-as"><code class=property>speak-as</code></a>’ to
   2.322 +    ‘<a href="#lower-latin"><code class=css>lower-latin</code></a>’
   2.323 +    ensures that they get read out as their corresponding latin letters, as
   2.324 +    intended.
   2.325 +  </div>
   2.326 +  <!-- ====================================================================== -->
   2.327  
   2.328    <h2 id=symbols-function><span class=secno>4. </span> Defining Anonymous
   2.329     Counter Styles: the ‘<code class=css>symbols()</code>’ function</h2>
   2.330 @@ -1352,9 +1468,9 @@
   2.331  
   2.332    <p> Where &lt;symbols-type> is one of the following keywords: ‘<a
   2.333     href="#cyclic"><code class=css>cyclic</code></a>’, ‘<a
   2.334 -   href="#numeric"><code class=css>numeric</code></a>’, ‘<a
   2.335 -   href="#alphabetic"><code class=css>alphabetic</code></a>’, ‘<a
   2.336 -   href="#symbolic"><code class=css>symbolic</code></a>’, or ‘<a
   2.337 +   href="#speak-as-numeric"><code class=css>numeric</code></a>’, ‘<a
   2.338 +   href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’,
   2.339 +   ‘<a href="#symbolic"><code class=css>symbolic</code></a>’, or ‘<a
   2.340     href="#fixed"><code class=css>fixed</code></a>’.
   2.341  
   2.342    <p> The ‘<code class=css>symbols()</code>’ function defines an
   2.343 @@ -1363,9 +1479,10 @@
   2.344     title=counter-prefix>prefix</i></a> and <a href="#suffix"><i
   2.345     title=counter-suffix>suffix</i></a> of ‘<code class=css>""</code>’
   2.346     (the empty string), a <a href="#range"><i
   2.347 -   title=counter-range>range</i></a> of ‘<code class=css>auto</code>’, a
   2.348 -   <a href="#fallback-style"><i title=counter-fallback>fallback style</i></a>
   2.349 -   of ‘<a href="#decimal"><code class=css>decimal</code></a>’, and a <a
   2.350 +   title=counter-range>range</i></a> of ‘<a href="#speak-as-auto"><code
   2.351 +   class=css>auto</code></a>’, a <a href="#fallback-style"><i
   2.352 +   title=counter-fallback>fallback style</i></a> of ‘<a
   2.353 +   href="#decimal"><code class=css>decimal</code></a>’, and a <a
   2.354     href="#negative-sign"><i title=counter-negative>negative sign</i></a> of
   2.355     "\2D" ("-" hyphen-minus). The counter style's <a href="#algorithm"><i
   2.356     title=counter-algorithm>algorithm</i></a> is constructed by consulting the
   2.357 @@ -1737,6 +1854,10 @@
   2.358     class=css>override</code></a>’ system, reusing the algorithm but
   2.359     swapping out some of the other descriptors.
   2.360  
   2.361 +  <p> All of the counter styles defined in this section have a <a
   2.362 +   href="#spoken-form"><i title=counter-speak-as>spoken form</i></a> of ‘<a
   2.363 +   href="#speak-as-numeric"><code class=css>numeric</code></a>’.
   2.364 +
   2.365    <h3 id=complex-cjk><span class=secno>6.1. </span> Longhand East Asian
   2.366     Counter Styles: ‘<a href="#japanese-informal0"><code
   2.367     class=css>japanese-informal</code></a>’, ‘<a
   2.368 @@ -3226,10 +3347,10 @@
   2.369     <dt><var>name</var> of type <code>DOMString</code>, readonly
   2.370  
   2.371     <dd> The <var>name</var> attribute must return a <code>DOMString</code>
   2.372 -    object that contains the serialization of the
   2.373 -    <var>&lt;counter-style-name></var> defined for the associated ‘<a
   2.374 -    href="#at-counter-style"><code class=css>@counter-style</code></a>’
   2.375 -    block.
   2.376 +    object that contains the serialization of the <a
   2.377 +    href="#speak-as-counter-style"><var>&lt;counter-style-name></var></a>
   2.378 +    defined for the associated ‘<a href="#at-counter-style"><code
   2.379 +    class=css>@counter-style</code></a>’ block.
   2.380  
   2.381     <dt>everything else
   2.382  
   2.383 @@ -3488,6 +3609,17 @@
   2.384       <td>
   2.385  
   2.386      <tr>
   2.387 +     <th><a class=descriptor href="#descdef-speak-as">speak-as</a>
   2.388 +
   2.389 +     <td>auto | numeric | alphabetic | bullet | &lt;counter-style-name>
   2.390 +
   2.391 +     <td>auto
   2.392 +
   2.393 +     <td>
   2.394 +
   2.395 +     <td>
   2.396 +
   2.397 +    <tr>
   2.398       <th><a class=descriptor href="#descdef-suffix">suffix</a>
   2.399  
   2.400       <td>&lt;string>
   2.401 @@ -3536,8 +3668,11 @@
   2.402     <li>additive tuple, <a href="#additive-tuple"
   2.403      title="additive tuple"><strong>3.7.</strong></a>
   2.404  
   2.405 -   <li>‘<a href="#alphabetic"><code class=css>alphabetic</code></a>’, <a
   2.406 -    href="#alphabetic" title="''alphabetic''"><strong>3.1.4.</strong></a>
   2.407 +   <li>‘<a href="#speak-as-alphabetic"><code
   2.408 +    class=css>alphabetic</code></a>’, <a href="#alphabetic"
   2.409 +    title="''alphabetic''"><strong>3.1.4.</strong></a>, <a
   2.410 +    href="#speak-as-alphabetic"
   2.411 +    title="''alphabetic''"><strong>3.8.</strong></a>
   2.412  
   2.413     <li>‘<a href="#armenian"><code class=css>armenian</code></a>’, <a
   2.414      href="#armenian" title="''armenian''"><strong>5.1.</strong></a>
   2.415 @@ -3545,12 +3680,21 @@
   2.416     <li>authoring tool, <a href="#authoring-tool"
   2.417      title="authoring tool"><strong>#</strong></a>
   2.418  
   2.419 +   <li>‘<a href="#speak-as-auto"><code class=css>auto</code></a>’, <a
   2.420 +    href="#speak-as-auto" title="''auto''"><strong>3.8.</strong></a>
   2.421 +
   2.422     <li>box-corner, <a href="#box-corner"
   2.423      title=box-corner><strong>3.1.2.</strong></a>
   2.424  
   2.425 +   <li>‘<a href="#speak-as-symbolic"><code class=css>bullet</code></a>’,
   2.426 +    <a href="#speak-as-symbolic" title="''bullet''"><strong>3.8.</strong></a>
   2.427 +
   2.428     <li>‘<a href="#circle"><code class=css>circle</code></a>’, <a
   2.429      href="#circle" title="''circle''"><strong>5.3.</strong></a>
   2.430  
   2.431 +   <li>circled-lower-latin, <a href="#circled-lower-latin"
   2.432 +    title=circled-lower-latin><strong>3.8.</strong></a>
   2.433 +
   2.434     <li>‘<a href="#cjk-decimal"><code class=css>cjk-decimal</code></a>’,
   2.435      <a href="#cjk-decimal" title="''cjk-decimal''"><strong>5.1.</strong></a>
   2.436  
   2.437 @@ -3572,6 +3716,9 @@
   2.438     <li>counter-range, <a href="#range"
   2.439      title=counter-range><strong>2.</strong></a>
   2.440  
   2.441 +   <li>counter-speak-as, <a href="#spoken-form"
   2.442 +    title=counter-speak-as><strong>2.</strong></a>
   2.443 +
   2.444     <li>‘<a href="#at-counter-style"><code
   2.445      class=css>@counter-style</code></a>’, <a href="#at-counter-style"
   2.446      title="''@counter-style''"><strong>3.</strong></a>
   2.447 @@ -3579,6 +3726,11 @@
   2.448     <li>counter style, <a href="#counter-style"
   2.449      title="counter style"><strong>2.</strong></a>
   2.450  
   2.451 +   <li><a
   2.452 +    href="#speak-as-counter-style"><var>&lt;counter-style-name></var></a>, <a
   2.453 +    href="#speak-as-counter-style"
   2.454 +    title="&lt;counter-style-name>"><strong>3.8.</strong></a>
   2.455 +
   2.456     <li>counter-suffix, <a href="#suffix"
   2.457      title=counter-suffix><strong>2.</strong></a>
   2.458  
   2.459 @@ -3628,8 +3780,12 @@
   2.460     <li>footnote, <a href="#footnote"
   2.461      title=footnote><strong>3.1.3.</strong></a>
   2.462  
   2.463 -   <li>generate-a-counter, <a href="#generate-a-counter-representation"
   2.464 -    title=generate-a-counter><strong>2.</strong></a>
   2.465 +   <li>generate a counter, <a href="#generate-a-counter-representation"
   2.466 +    title="generate a counter"><strong>2.</strong></a>
   2.467 +
   2.468 +   <li>generate a counter representation, <a
   2.469 +    href="#generate-a-counter-representation"
   2.470 +    title="generate a counter representation"><strong>2.</strong></a>
   2.471  
   2.472     <li>‘<a href="#georgian"><code class=css>georgian</code></a>’, <a
   2.473      href="#georgian" title="''georgian''"><strong>5.1.</strong></a>
   2.474 @@ -3692,8 +3848,9 @@
   2.475     <li>negative, <a href="#descdef-negative"
   2.476      title=negative><strong>3.2.</strong></a>
   2.477  
   2.478 -   <li>‘<a href="#numeric"><code class=css>numeric</code></a>’, <a
   2.479 -    href="#numeric" title="''numeric''"><strong>3.1.5.</strong></a>
   2.480 +   <li>‘<a href="#speak-as-numeric"><code class=css>numeric</code></a>’,
   2.481 +    <a href="#numeric" title="''numeric''"><strong>3.1.5.</strong></a>, <a
   2.482 +    href="#speak-as-numeric" title="''numeric''"><strong>3.8.</strong></a>
   2.483  
   2.484     <li>‘<a href="#override"><code class=css>override</code></a>’, <a
   2.485      href="#override" title="''override''"><strong>3.1.7.</strong></a>
   2.486 @@ -3715,6 +3872,9 @@
   2.487      href="#simp-chinese-informal0"
   2.488      title=simp-chinese-informal><strong>6.1.2.</strong></a>
   2.489  
   2.490 +   <li>speak-as, <a href="#descdef-speak-as"
   2.491 +    title=speak-as><strong>3.8.</strong></a>
   2.492 +
   2.493     <li>‘<a href="#square"><code class=css>square</code></a>’, <a
   2.494      href="#square" title="''square''"><strong>5.3.</strong></a>
   2.495  
     3.1 --- a/css-counter-styles-3/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
     3.2 +++ b/css-counter-styles-3/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
     3.3 @@ -125,6 +125,10 @@
     3.4  		<li>
     3.5  			a <dfn title='counter-range'>range</dfn>, 
     3.6  			which limits the values that a counter style handles
     3.7 +
     3.8 +		<li>
     3.9 +			a <dfn title='counter-speak-as'>spoken form</dfn>,
    3.10 +			which describes how to read out the counter style in a speech synthesizer
    3.11  		
    3.12  		<li>
    3.13  			and a <dfn title='counter-fallback'>fallback style</dfn>, 
    3.14 @@ -133,7 +137,7 @@
    3.15  	</ul>
    3.16  
    3.17  	<p>
    3.18 -		When asked to <dfn title='generate-a-counter'>generate a counter representation</dfn> 
    3.19 +		When asked to <dfn title='generate a counter|generate a counter representation'>generate a counter representation</dfn> 
    3.20  		using a particular counter style for a particular counter value, 
    3.21  		follow these steps:
    3.22  
    3.23 @@ -919,6 +923,81 @@
    3.24  		The <a href="http://dev.w3.org/csswg/css3-images/#default-object-size">default object size</a> of an image <i>counter symbol</i> is a 1em by 1em square.
    3.25  
    3.26  
    3.27 +<h3 id='counter-style-speak-as'>
    3.28 +Speech Synthesis: the 'speak-as' descriptor</h3>
    3.29 +
    3.30 +	<table class='descdef'>
    3.31 +		<tr>
    3.32 +			<th>Name:
    3.33 +			<td><dfn id='descdef-speak-as'>speak-as</dfn>
    3.34 +		<tr>
    3.35 +			<th>Value:
    3.36 +			<td>auto | numeric | alphabetic | bullet | &lt;counter-style-name>
    3.37 +		<tr>
    3.38 +			<th>Initial:
    3.39 +			<td>auto
    3.40 +	</table>
    3.41 +
    3.42 +	<p>
    3.43 +		A counter style can be constructed with a meaning that is obvious visually,
    3.44 +		but impossible to meaningfully represent via a speech synthesizer,
    3.45 +		or possible but nonsensical when naively read out.
    3.46 +		The 'speak-as' descriptor describes how to synthesize the spoken form of a counter formatted with the given counter style.
    3.47 +		Values have the following meanings:
    3.48 +
    3.49 +	<dl>
    3.50 +		<dt><dfn id='speak-as-auto'>''auto''</dfn>
    3.51 +		<dd>
    3.52 +			If the counter style's 'system' is ''alphabetic'', this value computes to ''alphabetic''.
    3.53 +			If the 'system' is ''cyclic'', this value computes to ''bullet''.
    3.54 +			Otherwise, this value computes to ''numeric''.
    3.55 +
    3.56 +		<dt><dfn id='speak-as-numeric'>''numeric''</dfn>
    3.57 +		<dd>
    3.58 +			The counter's value is spoken as a number in the document language.
    3.59 +
    3.60 +		<dt><dfn id='speak-as-alphabetic'>''alphabetic''</dfn>
    3.61 +		<dd>
    3.62 +			<i>Generate a counter representation</i> for the value as normal,
    3.63 +			then spell it out letter-by-letter in the document language.
    3.64 +			If the UA does not know how to pronounce the symbols,
    3.65 +			it may handle it as ''numeric''.
    3.66 +
    3.67 +			<p>
    3.68 +				For example, ''lower-greek'' in English would be read out as "alpha", "beta", "gamma", etc. 
    3.69 +				Conversely, ''upper-latin'' in French would be read out as (in phonetic notation) /a/, /be/, /se/, etc.
    3.70 +
    3.71 +		<dt><dfn id='speak-as-symbolic'>''bullet''</dfn>
    3.72 +		<dd>
    3.73 +			The UA speaks a UA-defined phrase or audio cue that represents a list item being read out.
    3.74 +
    3.75 +		<dt><dfn id='speak-as-counter-style'><var>&lt;counter-style-name></var></dfn>
    3.76 +		<dd>
    3.77 +			The counter's value is instead spoken out in the specific style.
    3.78 +			If the specified style does not exist,
    3.79 +			this value is treated as ''auto''.
    3.80 +	</dl>
    3.81 +
    3.82 +	<div class='example'>
    3.83 +		<p>
    3.84 +			The ability to defer pronunciation to another counter style can help when the symbols being used aren't actually letters.
    3.85 +			For example, here's a possible definition of a ''circled-lower-latin'' counter-style, using some special unicode characters:
    3.86 +
    3.87 +		<pre class='stylesheet'>
    3.88 +@counter-style <dfn>circled-lower-latin</dfn> {
    3.89 +  system: alphabetic;
    3.90 +  speak-as: lower-latin;
    3.91 +  symbols: ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ;
    3.92 +  suffix: '';
    3.93 +}</pre>
    3.94 +
    3.95 +		<p>
    3.96 +			Setting its 'system' to ''alphabetic'' would normally make the UA try to read out the names of the characters,
    3.97 +			but in this case that might be something like "Circled Letter A",
    3.98 +			which is unlikely to make sense.
    3.99 +			Instead, explicitly setting 'speak-as' to ''lower-latin'' ensures that they get read out as their corresponding latin letters, as intended.
   3.100 +	</div>
   3.101 +
   3.102  <!-- ====================================================================== -->
   3.103  
   3.104  <h2 id='symbols-function'>
   3.105 @@ -1296,6 +1375,9 @@
   3.106  		For example, an author can reference one of these styles in an ''override'' system, 
   3.107  		reusing the algorithm but swapping out some of the other descriptors.
   3.108  
   3.109 +	<p>
   3.110 +		All of the counter styles defined in this section have a <i title='counter-speak-as'>spoken form</i> of ''numeric''.
   3.111 +
   3.112  
   3.113  <h3 id='complex-cjk'>
   3.114  Longhand East Asian Counter Styles: ''japanese-informal'', ''japanese-formal'', ''korean-hangul-formal'', ''korean-hanja-informal'', ''korean-hanja-formal'', ''simp-chinese-informal'', ''simp-chinese-formal'', ''trad-chinese-informal'', ''trad-chinese-formal''</h3>
     4.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     4.2 +++ b/css-display-3/Overview.html	Mon Oct 22 00:41:17 2012 +0200
     4.3 @@ -0,0 +1,1209 @@
     4.4 +<!DOCTYPE html>
     4.5 +
     4.6 +<html lang=en>
     4.7 + <head>
     4.8 +  <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
     4.9 +  <title>CSS Display Module Level 3</title>
    4.10 +  <!--
    4.11 +  <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
    4.12 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
    4.13 +  -->
    4.14 +
    4.15 +  <meta content="CSS Display Module Level 3" name=dcterms.title>
    4.16 +  <meta content=text name=dcterms.type>
    4.17 +  <meta content=2012-10-19 name=dcterms.issued>
    4.18 +  <meta content="http://dev.w3.org/csswg/cssN-FIXME/" name=dcterms.creator>
    4.19 +  <meta content=W3C name=dcterms.publisher>
    4.20 +  <meta content="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/"
    4.21 +   name=dcterms.identifier>
    4.22 +  <link href="#contents" rel=contents>
    4.23 +  <link href="#index" rel=index>
    4.24 +  <link href="../default.css" rel=stylesheet type="text/css">
    4.25 +  <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    4.26 +   type="text/css">
    4.27 +  <style type="text/css">
    4.28 +		/* delete this block when you've cleared out all the .replaceme elements */
    4.29 +		.replaceme {
    4.30 +			border: solid red;
    4.31 +			padding: 0 0.5em;
    4.32 +			margin: 0 0.1em;
    4.33 +			background: yellow;
    4.34 +			color: green;
    4.35 +		}
    4.36 +		.replaceme:before {
    4.37 +			 content: "FIXME(";
    4.38 +			 color: black;
    4.39 +		}
    4.40 +		.replaceme:after {
    4.41 +			 content: ")";
    4.42 +			 color: black;
    4.43 +		}
    4.44 +	</style>
    4.45 +
    4.46 + <body>
    4.47 +  <div class=head> <!--begin-logo-->
    4.48 +   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    4.49 +    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
    4.50 +
    4.51 +   <h1>CSS Display Module Level 3</h1>
    4.52 +
    4.53 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October
    4.54 +    2012</h2>
    4.55 +
    4.56 +   <dl>
    4.57 +    <dt>This version:
    4.58 +
    4.59 +    <dd><a class=replaceme
    4.60 +     href="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/">http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/</a>
    4.61 +
    4.62 +    <dt>Latest version:
    4.63 +
    4.64 +    <dd><a
    4.65 +     href="http://www.w3.org/TR/cssN-FIXME/">http://www.w3.org/TR/cssN-FIXME/</a>
    4.66 +
    4.67 +    <dt>Editor's draft:
    4.68 +
    4.69 +    <dd><a
    4.70 +     href="http://dev.w3.org/csswg/cssN-FIXME/">http://dev.w3.org/csswg/cssN-FIXME/</a>
    4.71 +
    4.72 +    <dt>Previous version:
    4.73 +
    4.74 +    <dd><a href="http://www.w3.org/PreviousVersionURI">
    4.75 +     http://www.w3.org/PreviousVersionURI</a>
    4.76 +
    4.77 +    <dt>Issue Tracking:
    4.78 +
    4.79 +    <dd><a
    4.80 +     href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a>
    4.81 +
    4.82 +    <dt>Feedback:
    4.83 +
    4.84 +    <dd><a
    4.85 +     href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
    4.86 +     with subject line “<kbd>[cssN-FIXME] <var>… message topic
    4.87 +     …</var></kbd>”
    4.88 +
    4.89 +    <dt>Editors:
    4.90 +
    4.91 +    <dd class="h-card vcard"> <a class="p-name fn u-url url"
    4.92 +     href="http://www.xanthir.com/" rel=author>Tab Atkins Jr.</a> (<span
    4.93 +     class="p-org org">Google, Inc.</span>), <span
    4.94 +     class="u-email email">jackalmage@gmail.com</span>
    4.95 +   </dl>
    4.96 +   <!--begin-copyright-->
    4.97 +   <p class=copyright><a
    4.98 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    4.99 +    rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
   4.100 +    title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   4.101 +    href="http://www.csail.mit.edu/"><abbr
   4.102 +    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
   4.103 +    href="http://www.ercim.eu/"><abbr
   4.104 +    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
   4.105 +    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
   4.106 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
   4.107 +    <a
   4.108 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
   4.109 +    and <a
   4.110 +    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
   4.111 +    use</a> rules apply.</p>
   4.112 +   <!--end-copyright-->
   4.113 +   <hr title="Separator for header">
   4.114 +  </div>
   4.115 +
   4.116 +  <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   4.117 +
   4.118 +  <p> This module contains the features of CSS relating to the ‘<a
   4.119 +   href="#display"><code class=property>display</code></a>’ property. <a
   4.120 +   href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the
   4.121 +   rendering of structured documents (such as HTML and XML) on screen, on
   4.122 +   paper, in speech, etc.
   4.123 +
   4.124 +  <h2 class="no-num no-toc" id=status>Status of this document</h2>
   4.125 +
   4.126 +  <p> This is currently a personal draft, not yet approved by the CSSWG to be
   4.127 +   an Editor's Draft. (Ignore the branding on the side and heading, which are
   4.128 +   artifacts of the spec generation process.) <!--//status-->
   4.129 +
   4.130 +  <p>The following features are at risk: …
   4.131 +
   4.132 +  <h2 class="no-num no-toc" id=contents> Table of contents</h2>
   4.133 +  <!--begin-toc-->
   4.134 +
   4.135 +  <ul class=toc>
   4.136 +   <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
   4.137 +    <ul class=toc>
   4.138 +     <li><a href="#placement"><span class=secno>1.1. </span> Module
   4.139 +      interactions</a>
   4.140 +
   4.141 +     <li><a href="#values"><span class=secno>1.2. </span> Values</a>
   4.142 +    </ul>
   4.143 +
   4.144 +   <li><a href="#the-display-properties"><span class=secno>2. </span> The
   4.145 +    Display Properties</a>
   4.146 +    <ul class=toc>
   4.147 +     <li><a href="#the-display-inside"><span class=secno>2.1. </span> Setting
   4.148 +      the layout mode: the ‘<code class=property>display-inside</code>’
   4.149 +      property</a>
   4.150 +
   4.151 +     <li><a href="#the-display-outside"><span class=secno>2.2. </span>
   4.152 +      Interacting with the layout mode: the ‘<code
   4.153 +      class=property>display-outside</code>’ property</a>
   4.154 +
   4.155 +     <li><a href="#the-display-box"><span class=secno>2.3. </span>
   4.156 +      Controlling box generation: the ‘<code
   4.157 +      class=property>display-box</code>’ property</a>
   4.158 +
   4.159 +     <li><a href="#the-display-extras"><span class=secno>2.4. </span>
   4.160 +      Additional stuff: the ‘<code class=property>display-extras</code>’
   4.161 +      property</a>
   4.162 +
   4.163 +     <li><a href="#the-display"><span class=secno>2.5. </span> The ‘<code
   4.164 +      class=property>display</code>’ shorthand property</a>
   4.165 +    </ul>
   4.166 +
   4.167 +   <li><a href="#conformance"><span class=secno>3. </span> Conformance</a>
   4.168 +    <ul class=toc>
   4.169 +     <li><a href="#conventions"><span class=secno>3.1. </span> Document
   4.170 +      conventions</a>
   4.171 +
   4.172 +     <li><a href="#conformance-classes"><span class=secno>3.2. </span>
   4.173 +      Conformance classes</a>
   4.174 +
   4.175 +     <li><a href="#partial"><span class=secno>3.3. </span> Partial
   4.176 +      implementations</a>
   4.177 +
   4.178 +     <li><a href="#experimental"><span class=secno>3.4. </span> Experimental
   4.179 +      implementations</a>
   4.180 +
   4.181 +     <li><a href="#testing"><span class=secno>3.5. </span> Non-experimental
   4.182 +      implementations</a>
   4.183 +
   4.184 +     <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR exit
   4.185 +      criteria</a>
   4.186 +    </ul>
   4.187 +
   4.188 +   <li class=no-num><a href="#acknowledgments"> Acknowledgments</a>
   4.189 +
   4.190 +   <li class=no-num><a href="#references"> References</a>
   4.191 +    <ul class=toc>
   4.192 +     <li class=no-num><a href="#normative-references"> Normative
   4.193 +      references</a>
   4.194 +
   4.195 +     <li class=no-num><a href="#other-references"> Other references</a>
   4.196 +    </ul>
   4.197 +
   4.198 +   <li class=no-num><a href="#index"> Index</a>
   4.199 +
   4.200 +   <li class=no-num><a href="#property-index"> Property index</a>
   4.201 +  </ul>
   4.202 +  <!--end-toc-->
   4.203 +
   4.204 +  <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   4.205 +
   4.206 +  <p><em>This section is not normative.</em>
   4.207 +
   4.208 +  <p> <var class=replaceme>Provide background, motivation, etc.</var>
   4.209 +
   4.210 +  <h3 id=placement><span class=secno>1.1. </span> Module interactions</h3>
   4.211 +
   4.212 +  <p class=replaceme> Explain, normatively, how this module affects the
   4.213 +   definition of CSS.
   4.214 +
   4.215 +  <p> This module replaces and extends the <var class=replaceme>SUMMARIZE
   4.216 +   HERE</var> features defined in <a href="#CSS21"
   4.217 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <var
   4.218 +   class=replaceme>W.X and Y.Z</var>.
   4.219 +
   4.220 +  <p> None of the properties in this module apply to the
   4.221 +   <code>::first-line</code> or <code>::first-letter</code> pseudo-elements.
   4.222 +
   4.223 +  <h3 id=values><span class=secno>1.2. </span> Values</h3>
   4.224 +
   4.225 +  <p>This specification follows the <a
   4.226 +   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   4.227 +   definition conventions</a> from <a href="#CSS21"
   4.228 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   4.229 +   this specification are defined in CSS Level 2 Revision 1 <a
   4.230 +   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   4.231 +   modules may expand the definitions of these value types: for example <a
   4.232 +   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
   4.233 +   when combined with this module, expands the definition of the
   4.234 +   &lt;color&gt; value type as used in this specification.
   4.235 +
   4.236 +  <p>In addition to the property-specific values listed in their definitions,
   4.237 +   all properties defined in this specification also accept the <a
   4.238 +   href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide
   4.239 +   keywords</a> as their property value. For readability it has not been
   4.240 +   repeated explicitly.
   4.241 +
   4.242 +  <h2 id=the-display-properties><span class=secno>2. </span> The Display
   4.243 +   Properties</h2>
   4.244 +
   4.245 +  <p> The ‘<a href="#display"><code class=property>display</code></a>’
   4.246 +   shorthand and its associated family of properties control the layout mode
   4.247 +   of elements (how the element determines the sizes and positions of itself
   4.248 +   and its descendants), and what boxes they and their descendants generate.
   4.249 +
   4.250 +  <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout
   4.251 +   mode: the ‘<a href="#display-inside"><code
   4.252 +   class=property>display-inside</code></a>’ property</h3>
   4.253 +
   4.254 +  <table class=propdef>
   4.255 +   <tbody>
   4.256 +    <tr>
   4.257 +     <th>Name:
   4.258 +
   4.259 +     <td><dfn id=display-inside>display-inside</dfn>
   4.260 +
   4.261 +    <tr>
   4.262 +     <th>Value:
   4.263 +
   4.264 +     <td>auto | block | table | flex | grid
   4.265 +
   4.266 +    <tr>
   4.267 +     <th>Initial:
   4.268 +
   4.269 +     <td>auto
   4.270 +
   4.271 +    <tr>
   4.272 +     <th>Applies To:
   4.273 +
   4.274 +     <td>all elements
   4.275 +
   4.276 +    <tr>
   4.277 +     <th>Inherited:
   4.278 +
   4.279 +     <td>no
   4.280 +
   4.281 +    <tr>
   4.282 +     <th>Percentages:
   4.283 +
   4.284 +     <td>N/A
   4.285 +
   4.286 +    <tr>
   4.287 +     <th>Computed Value:
   4.288 +
   4.289 +     <td>a keyword
   4.290 +  </table>
   4.291 +
   4.292 +  <dl>
   4.293 +   <dt><dfn id="display-inside:auto">auto</dfn>
   4.294 +
   4.295 +   <dd> If the element's computed ‘<a href="#display-outside"><code
   4.296 +    class=property>display-outside</code></a>’ value is ‘<a
   4.297 +    href="#display-outside:inline-level"><code
   4.298 +    class=css>inline-level</code></a>’, the element is an <i>inline
   4.299 +    element</i>, and lays out its contents using inline layout. <a
   4.300 +    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> If the
   4.301 +    element's computed ‘<a href="#display-outside"><code
   4.302 +    class=property>display-outside</code></a>’ value is ‘<a
   4.303 +    href="#display-outside:table-row-group"><code
   4.304 +    class=css>table-row-group</code></a>’, ‘<a
   4.305 +    href="#display-outside:table-header-group"><code
   4.306 +    class=css>table-header-group</code></a>’, ‘<a
   4.307 +    href="#display-outside:table-footer-group"><code
   4.308 +    class=css>table-footer-group</code></a>’, ‘<a
   4.309 +    href="#display-outside:table-row"><code
   4.310 +    class=css>table-row</code></a>’, ‘<a
   4.311 +    href="#display-outside:table-column-group"><code
   4.312 +    class=css>table-column-group</code></a>’, or ‘<a
   4.313 +    href="#display-outside:table-column"><code
   4.314 +    class=css>table-column</code></a>’, this elements acts as normal for
   4.315 +    its given ‘<a href="#display-outside"><code
   4.316 +    class=property>display-outside</code></a>’ value. Otherwise, this value
   4.317 +    computes to ‘<a href="#display:block"><code
   4.318 +    class=css>block</code></a>’.
   4.319 +
   4.320 +   <dt><dfn id="display-inside:block">block</dfn>
   4.321 +
   4.322 +   <dd> The element lays out its contents using block layout. <a
   4.323 +    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   4.324 +
   4.325 +   <dt><dfn id="display-inside:table">table</dfn>
   4.326 +
   4.327 +   <dd> The element lays out its contents using table layout. <a
   4.328 +    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   4.329 +
   4.330 +   <dt><dfn id="display-inside:flex">flex</dfn>
   4.331 +
   4.332 +   <dd> The element lays out its contents using flex layout. <a
   4.333 +    href="#CSS3-FLEXBOX"
   4.334 +    rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a>
   4.335 +
   4.336 +   <dt><dfn id="display-inside:grid">grid</dfn>
   4.337 +
   4.338 +   <dd> The element lays out its contents using grid layout. [[!CSS3-GRID]]
   4.339 +  </dl>
   4.340 +
   4.341 +  <h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with
   4.342 +   the layout mode: the ‘<a href="#display-outside"><code
   4.343 +   class=property>display-outside</code></a>’ property</h3>
   4.344 +
   4.345 +  <table class=propdef>
   4.346 +   <tbody>
   4.347 +    <tr>
   4.348 +     <th>Name:
   4.349 +
   4.350 +     <td><dfn id=display-outside>display-outside</dfn>
   4.351 +
   4.352 +    <tr>
   4.353 +     <th>Value:
   4.354 +
   4.355 +     <td>block-level | inline-level | table-row-group | table-header-group |
   4.356 +      table-footer-group | table-row | table-cell | table-column-group |
   4.357 +      table-column | table-caption
   4.358 +
   4.359 +    <tr>
   4.360 +     <th>Initial:
   4.361 +
   4.362 +     <td>inline-level
   4.363 +
   4.364 +    <tr>
   4.365 +     <th>Applies To:
   4.366 +
   4.367 +     <td>all elements
   4.368 +
   4.369 +    <tr>
   4.370 +     <th>Inherited:
   4.371 +
   4.372 +     <td>no
   4.373 +
   4.374 +    <tr>
   4.375 +     <th>Percentages:
   4.376 +
   4.377 +     <td>N/A
   4.378 +
   4.379 +    <tr>
   4.380 +     <th>Computed Value:
   4.381 +
   4.382 +     <td>as specified
   4.383 +  </table>
   4.384 +
   4.385 +  <dl>
   4.386 +   <dt><dfn id="display-outside:block-level">block-level</dfn>
   4.387 +
   4.388 +   <dd> The element is <a
   4.389 +    href="#display-outside:block-level"><i>block-level</i></a>, and
   4.390 +    participates in a block formatting context. Other formatting contexts,
   4.391 +    such as flex formatting contexts, may also work with <a
   4.392 +    href="#display-outside:block-level"><i>block-level</i></a> elements. <a
   4.393 +    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   4.394 +
   4.395 +   <dt><dfn id="display-outside:inline-level">inline-level</dfn>
   4.396 +
   4.397 +   <dd> The element is <a
   4.398 +    href="#display-outside:inline-level"><i>inline-level</i></a>, and
   4.399 +    participates in an inline formatting context. <a href="#CSS21"
   4.400 +    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   4.401 +
   4.402 +   <dt><dfn id="display-outside:table-row-group">table-row-group</dfn>, <dfn
   4.403 +    id="display-outside:table-header-group">table-header-group</dfn>, <dfn
   4.404 +    id="display-outside:table-footer-group">table-footer-group</dfn>, <dfn
   4.405 +    id="display-outside:table-row">table-row</dfn>, <dfn
   4.406 +    id="display-outside:table-cell">table-cell</dfn>, <dfn
   4.407 +    id="display-outside:table-column-group">table-column-group</dfn>, <dfn
   4.408 +    id="display-outside:table-column">table-column</dfn>, <dfn
   4.409 +    id="display-outside:table-caption">table-caption</dfn>
   4.410 +
   4.411 +   <dd> The element is an internal table element, and participates in a table
   4.412 +    layout context. <a href="#CSS21"
   4.413 +    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   4.414 +  </dl>
   4.415 +
   4.416 +  <p class=issue> Do we need special bits about some of the interactions with
   4.417 +   ‘<a href="#display-inside"><code
   4.418 +   class=property>display-inside</code></a>’? For example, how ‘<code
   4.419 +   class=css>display:inline-level block;</code>’ works? Or does that fall
   4.420 +   out of what exists, and the definitions of Block Layout in 2.1? (...or a
   4.421 +   new Block Layout spec, explaining all the 2.1 stuff more sanely?)
   4.422 +
   4.423 +  <p class=issue> Is <a
   4.424 +   href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0450.html">fantasai's
   4.425 +   proposal for a run-in model</a> sane enough to include in this spec?
   4.426 +
   4.427 +  <h3 id=the-display-box><span class=secno>2.3. </span> Controlling box
   4.428 +   generation: the ‘<a href="#display-box"><code
   4.429 +   class=property>display-box</code></a>’ property</h3>
   4.430 +
   4.431 +  <table class=propdef>
   4.432 +   <tbody>
   4.433 +    <tr>
   4.434 +     <th>Name:
   4.435 +
   4.436 +     <td><dfn id=display-box>display-box</dfn>
   4.437 +
   4.438 +    <tr>
   4.439 +     <th>Value:
   4.440 +
   4.441 +     <td>normal | none | contents
   4.442 +
   4.443 +    <tr>
   4.444 +     <th>Initial:
   4.445 +
   4.446 +     <td>normal
   4.447 +
   4.448 +    <tr>
   4.449 +     <th>Applies To:
   4.450 +
   4.451 +     <td>all elements
   4.452 +
   4.453 +    <tr>
   4.454 +     <th>Inherited:
   4.455 +
   4.456 +     <td>no
   4.457 +
   4.458 +    <tr>
   4.459 +     <th>Percentages:
   4.460 +
   4.461 +     <td>N/A
   4.462 +
   4.463 +    <tr>
   4.464 +     <th>Computed Value:
   4.465 +
   4.466 +     <td>as specified
   4.467 +  </table>
   4.468 +
   4.469 +  <dl>
   4.470 +   <dt><dfn id="display-box:normal">normal</dfn>
   4.471 +
   4.472 +   <dd> The element generates boxes as normal, per its other ‘<code
   4.473 +    class=css>display-*</code>’ properties.
   4.474 +
   4.475 +   <dt><dfn id="display-box:none">none</dfn>
   4.476 +
   4.477 +   <dd> The element generates no boxes at all.
   4.478 +
   4.479 +   <dt><dfn id="display-box:contents">contents</dfn>
   4.480 +
   4.481 +   <dd> The element itself does not generate any boxes, but its children and
   4.482 +    pseudo-elements still generate boxes as normal. For the purposes of box
   4.483 +    generation and layout, the element must be treated as if it had been
   4.484 +    replaced with its children and pseudo-elements in the document tree.
   4.485 +  </dl>
   4.486 +
   4.487 +  <p class=issue> Is there a need for a value that suppresses box generation
   4.488 +   for layout purposes, but still generates them for the purposes of
   4.489 +   animations/counters/etc.?
   4.490 +
   4.491 +  <p class=issue> ‘<a href="#display-box:contents"><code
   4.492 +   class=css>contents</code></a>’ currently only has an effect on box
   4.493 +   generation and layout. Other things that care about the document tree are
   4.494 +   unaffected, like counter scopes. Is this what we want?
   4.495 +
   4.496 +  <h3 id=the-display-extras><span class=secno>2.4. </span> Additional stuff:
   4.497 +   the ‘<a href="#display-extras"><code
   4.498 +   class=property>display-extras</code></a>’ property</h3>
   4.499 +
   4.500 +  <table class=propdef>
   4.501 +   <tbody>
   4.502 +    <tr>
   4.503 +     <th>Name:
   4.504 +
   4.505 +     <td><dfn id=display-extras>display-extras</dfn>
   4.506 +
   4.507 +    <tr>
   4.508 +     <th>Value:
   4.509 +
   4.510 +     <td>none | [ list-item ]
   4.511 +
   4.512 +    <tr>
   4.513 +     <th>Initial:
   4.514 +
   4.515 +     <td>none
   4.516 +
   4.517 +    <tr>
   4.518 +     <th>Applies To:
   4.519 +
   4.520 +     <td>all elements
   4.521 +
   4.522 +    <tr>
   4.523 +     <th>Inherited:
   4.524 +
   4.525 +     <td>no
   4.526 +
   4.527 +    <tr>
   4.528 +     <th>Percentages:
   4.529 +
   4.530 +     <td>N/A
   4.531 +
   4.532 +    <tr>
   4.533 +     <th>Computed Value:
   4.534 +
   4.535 +     <td>as specified
   4.536 +  </table>
   4.537 +
   4.538 +  <dl>
   4.539 +   <dt><dfn id="display-extras:list-item">list-item</dfn>
   4.540 +
   4.541 +   <dd> The element generates a <code>::marker</code> pseudo-element and is
   4.542 +    considered a <a href="../css3-lists/#list-item">list item</a>.
   4.543 +  </dl>
   4.544 +
   4.545 +  <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
   4.546 +   href="#display"><code class=property>display</code></a>’ shorthand
   4.547 +   property</h3>
   4.548 +
   4.549 +  <table class=propdef>
   4.550 +   <tbody>
   4.551 +    <tr>
   4.552 +     <th>Name:
   4.553 +
   4.554 +     <td><dfn id=display>display</dfn>
   4.555 +
   4.556 +    <tr>
   4.557 +     <th>Value:
   4.558 +
   4.559 +     <td>inline | block | list-item | inline-list-item | inline-block | table
   4.560 +      | inline-table | table-cell | table-caption | flex | inline-flex | grid
   4.561 +      | inline-grid | none | [ &lt;‘<a href="#display-inside"><code
   4.562 +      class=property>display-inside</code></a>’> || &lt;‘<a
   4.563 +      href="#display-outside"><code
   4.564 +      class=property>display-outside</code></a>’> || &lt;‘<a
   4.565 +      href="#display-box"><code class=property>display-box</code></a>’> ||
   4.566 +      &lt;‘<a href="#display-extras"><code
   4.567 +      class=property>display-extras</code></a>’> ]
   4.568 +
   4.569 +    <tr>
   4.570 +     <th>Initial:
   4.571 +
   4.572 +     <td>see individual properties
   4.573 +
   4.574 +    <tr>
   4.575 +     <th>Applies To:
   4.576 +
   4.577 +     <td>all elements
   4.578 +
   4.579 +    <tr>
   4.580 +     <th>Inherited:
   4.581 +
   4.582 +     <td>no
   4.583 +
   4.584 +    <tr>
   4.585 +     <th>Percentages:
   4.586 +
   4.587 +     <td>see individual properties
   4.588 +
   4.589 +    <tr>
   4.590 +     <th>Computed Value:
   4.591 +
   4.592 +     <td>see individual properties
   4.593 +
   4.594 +    <tr>
   4.595 +     <th>Animatable:
   4.596 +
   4.597 +     <td>see individual properties
   4.598 +  </table>
   4.599 +
   4.600 +  <p> The single-keyword values listed explicitly in the grammar above are
   4.601 +   handled specially, for legacy reasons. All other single-keyword values,
   4.602 +   and all other values in general, are handled as normal for shorthands.
   4.603 +
   4.604 +  <p class=issue> The general rule for new layout modes seems to be that
   4.605 +   they're block-level by default. However, this conflicts with the default
   4.606 +   value of ‘<a href="#display-outside"><code
   4.607 +   class=property>display-outside</code></a>’, which is ‘<a
   4.608 +   href="#display-outside:inline-level"><code
   4.609 +   class=css>inline-level</code></a>’. What's the best way to address this?
   4.610 +   Simplest answer is to just expand this list of special values as we go
   4.611 +   along. Another possibility is to magic up the expansion in a different
   4.612 +   way, so that if the value is just a ‘<a href="#display-inside"><code
   4.613 +   class=property>display-inside</code></a>’ keyword, ‘<a
   4.614 +   href="#display-outside"><code class=property>display-outside</code></a>’
   4.615 +   defaults to ‘<a href="#display-outside:block-level"><code
   4.616 +   class=css>block-level</code></a>’. If the latter is chosen, we could
   4.617 +   remove several more of the special expansions below (all the ones that are
   4.618 +   identical to a ‘<a href="#display-inside"><code
   4.619 +   class=property>display-inside</code></a>’ value).
   4.620 +
   4.621 +  <p class=note> Several of the "special" expansions below are actually just
   4.622 +   what the shorthand would expand to normally. They're included here for
   4.623 +   clarity, as they're very familiar from long usage in CSS 2.1, before the
   4.624 +   ‘<a href="#display"><code class=property>display</code></a>’ property
   4.625 +   became a shorthand.
   4.626 +
   4.627 +  <dl>
   4.628 +   <dt><dfn id="display:inline">inline</dfn>
   4.629 +
   4.630 +   <dd> Expands identically to ‘<code class=css>inline-level
   4.631 +    auto</code>’.
   4.632 +
   4.633 +   <dt><dfn id="display:block">block</dfn>
   4.634 +
   4.635 +   <dd> Expands identically to ‘<code class=css>block-level
   4.636 +    block</code>’.
   4.637 +
   4.638 +   <dt><dfn id="display:list-item">list-item</dfn>
   4.639 +
   4.640 +   <dd> Expands identically to ‘<code class=css>block-level block
   4.641 +    list-item</code>’.
   4.642 +
   4.643 +   <dt><dfn id="display:inline-list-item">inline-list-item</dfn>
   4.644 +
   4.645 +   <dd> Expands identically to ‘<code class=css>inline-level block
   4.646 +    list-item</code>’.
   4.647 +
   4.648 +   <dt><dfn id="display:inline-block">inline-block</dfn>
   4.649 +
   4.650 +   <dd> Expands identically to ‘<code class=css>inline-level
   4.651 +    block</code>’.
   4.652 +
   4.653 +   <dt><dfn id="display:table">table</dfn>
   4.654 +
   4.655 +   <dd> Expands identically to ‘<code class=css>block-level
   4.656 +    table</code>’.
   4.657 +
   4.658 +   <dt><dfn id="display:inline-table">inline-table</dfn>
   4.659 +
   4.660 +   <dd> Expands identically to ‘<code class=css>inline-level
   4.661 +    table</code>’.
   4.662 +
   4.663 +   <dt><dfn id="display:table-caption">table-caption</dfn>
   4.664 +
   4.665 +   <dd> Expands identically to ‘<code class=css>table-caption
   4.666 +    block</code>’.
   4.667 +
   4.668 +   <dt><dfn id="display:table-cell">table-cell</dfn>
   4.669 +
   4.670 +   <dd> Expands identically to ‘<code class=css>table-cell block</code>’.
   4.671 +
   4.672 +   <dt><dfn id="display:flex">flex</dfn>
   4.673 +
   4.674 +   <dd> Expands identically to ‘<code class=css>block-level flex</code>’.
   4.675 +
   4.676 +   <dt><dfn id="display:inline-flex">inline-flex</dfn>
   4.677 +
   4.678 +   <dd> Expands identically to ‘<code class=css>inline-level
   4.679 +    flex</code>’.
   4.680 +
   4.681 +   <dt><dfn id="display:grid">grid</dfn>
   4.682 +
   4.683 +   <dd> Expands identically to ‘<code class=css>block-level grid</code>’.
   4.684 +
   4.685 +   <dt><dfn id="display:inline-grid">inline-grid</dfn>
   4.686 +
   4.687 +   <dd> Expands identically to ‘<code class=css>inline-level
   4.688 +    grid</code>’.
   4.689 +
   4.690 +   <dt><dfn id="display:none">none</dfn>
   4.691 +
   4.692 +   <dd> Expands identically to ‘<code class=css>inline-level auto
   4.693 +    none</code>’.
   4.694 +  </dl>
   4.695 +  <!--
   4.696 +    
   4.697 +TTTTTTTTTTTTTTTTTTTTTTTHHHHHHHHH     HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE
   4.698 +T:::::::::::::::::::::TH:::::::H     H:::::::HE::::::::::::::::::::E
   4.699 +T:::::::::::::::::::::TH:::::::H     H:::::::HE::::::::::::::::::::E
   4.700 +T:::::TT:::::::TT:::::THH::::::H     H::::::HHEE::::::EEEEEEEEE::::E
   4.701 +TTTTTT  T:::::T  TTTTTT  H:::::H     H:::::H    E:::::E       EEEEEE
   4.702 +        T:::::T          H:::::H     H:::::H    E:::::E             
   4.703 +        T:::::T          H::::::HHHHH::::::H    E::::::EEEEEEEEEE   
   4.704 +        T:::::T          H:::::::::::::::::H    E:::::::::::::::E   
   4.705 +        T:::::T          H:::::::::::::::::H    E:::::::::::::::E   
   4.706 +        T:::::T          H::::::HHHHH::::::H    E::::::EEEEEEEEEE   
   4.707 +        T:::::T          H:::::H     H:::::H    E:::::E             
   4.708 +        T:::::T          H:::::H     H:::::H    E:::::E       EEEEEE
   4.709 +      TT:::::::TT      HH::::::H     H::::::HHEE::::::EEEEEEEE:::::E
   4.710 +      T:::::::::T      H:::::::H     H:::::::HE::::::::::::::::::::E
   4.711 +      T:::::::::T      H:::::::H     H:::::::HE::::::::::::::::::::E
   4.712 +      TTTTTTTTTTT      HHHHHHHHH     HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE
   4.713 +                                                                    
   4.714 +                                                                    
   4.715 +                                                                   
   4.716 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN        NNNNNNNNDDDDDDDDDDDDD        
   4.717 +E::::::::::::::::::::EN:::::::N       N::::::ND::::::::::::DDD     
   4.718 +E::::::::::::::::::::EN::::::::N      N::::::ND:::::::::::::::DD   
   4.719 +EE::::::EEEEEEEEE::::EN:::::::::N     N::::::NDDD:::::DDDDD:::::D  
   4.720 +  E:::::E       EEEEEEN::::::::::N    N::::::N  D:::::D    D:::::D 
   4.721 +  E:::::E             N:::::::::::N   N::::::N  D:::::D     D:::::D
   4.722 +  E::::::EEEEEEEEEE   N:::::::N::::N  N::::::N  D:::::D     D:::::D
   4.723 +  E:::::::::::::::E   N::::::N N::::N N::::::N  D:::::D     D:::::D
   4.724 +  E:::::::::::::::E   N::::::N  N::::N:::::::N  D:::::D     D:::::D
   4.725 +  E::::::EEEEEEEEEE   N::::::N   N:::::::::::N  D:::::D     D:::::D
   4.726 +  E:::::E             N::::::N    N::::::::::N  D:::::D     D:::::D
   4.727 +  E:::::E       EEEEEEN::::::N     N:::::::::N  D:::::D    D:::::D 
   4.728 +EE::::::EEEEEEEE:::::EN::::::N      N::::::::NDDD:::::DDDDD:::::D  
   4.729 +E::::::::::::::::::::EN::::::N       N:::::::ND:::::::::::::::DD   
   4.730 +E::::::::::::::::::::EN::::::N        N::::::ND::::::::::::DDD     
   4.731 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN         NNNNNNNDDDDDDDDDDDDD        
   4.732 +-->
   4.733 +
   4.734 +  <h2 id=conformance><span class=secno>3. </span> Conformance</h2>
   4.735 +
   4.736 +  <h3 id=conventions><span class=secno>3.1. </span> Document conventions</h3>
   4.737 +
   4.738 +  <p>Conformance requirements are expressed with a combination of descriptive
   4.739 +   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
   4.740 +   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
   4.741 +   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
   4.742 +   normative parts of this document are to be interpreted as described in RFC
   4.743 +   2119. However, for readability, these words do not appear in all uppercase
   4.744 +   letters in this specification.
   4.745 +
   4.746 +  <p>All of the text of this specification is normative except sections
   4.747 +   explicitly marked as non-normative, examples, and notes. <a
   4.748 +   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
   4.749 +
   4.750 +  <p>Examples in this specification are introduced with the words “for
   4.751 +   example” or are set apart from the normative text with
   4.752 +   <code>class="example"</code>, like this:
   4.753 +
   4.754 +  <div class=example>
   4.755 +   <p>This is an example of an informative example.
   4.756 +  </div>
   4.757 +
   4.758 +  <p>Informative notes begin with the word “Note” and are set apart from
   4.759 +   the normative text with <code>class="note"</code>, like this:
   4.760 +
   4.761 +  <p class=note>Note, this is an informative note.
   4.762 +
   4.763 +  <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance
   4.764 +   classes</h3>
   4.765 +
   4.766 +  <p>Conformance to <var class=replaceme>CSS TEMPLATE Module</var> is defined
   4.767 +   for three conformance classes:
   4.768 +
   4.769 +  <dl>
   4.770 +   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
   4.771 +    sheet</dfn>
   4.772 +
   4.773 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
   4.774 +    style sheet</a>.
   4.775 +
   4.776 +   <dt><dfn id=renderer>renderer</dfn>
   4.777 +
   4.778 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   4.779 +    that interprets the semantics of a style sheet and renders documents that
   4.780 +    use them.
   4.781 +
   4.782 +   <dt><dfn id=authoring-tool>authoring tool</dfn>
   4.783 +
   4.784 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   4.785 +    that writes a style sheet.
   4.786 +  </dl>
   4.787 +
   4.788 +  <p>A style sheet is conformant to <var class=replaceme>CSS TEMPLATE
   4.789 +   Module</var> if all of its statements that use syntax defined in this
   4.790 +   module are valid according to the generic CSS grammar and the individual
   4.791 +   grammars of each feature defined in this module.
   4.792 +
   4.793 +  <p>A renderer is conformant to <var class=replaceme>CSS TEMPLATE
   4.794 +   Module</var> if, in addition to interpreting the style sheet as defined by
   4.795 +   the appropriate specifications, it supports all the features defined by
   4.796 +   <var class=replaceme>CSS TEMPLATE Module</var> by parsing them correctly
   4.797 +   and rendering the document accordingly. However, the inability of a UA to
   4.798 +   correctly render a document due to limitations of the device does not make
   4.799 +   the UA non-conformant. (For example, a UA is not required to render color
   4.800 +   on a monochrome monitor.)
   4.801 +
   4.802 +  <p>An authoring tool is conformant to <var class=replaceme>CSS TEMPLATE
   4.803 +   Module</var> if it writes style sheets that are syntactically correct
   4.804 +   according to the generic CSS grammar and the individual grammars of each
   4.805 +   feature in this module, and meet all other conformance requirements of
   4.806 +   style sheets as described in this module.
   4.807 +
   4.808 +  <h3 id=partial><span class=secno>3.3. </span> Partial implementations</h3>
   4.809 +
   4.810 +  <p>So that authors can exploit the forward-compatible parsing rules to
   4.811 +   assign fallback values, CSS renderers <strong>must</strong> treat as
   4.812 +   invalid (and <a
   4.813 +   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
   4.814 +   appropriate</a>) any at-rules, properties, property values, keywords, and
   4.815 +   other syntactic constructs for which they have no usable level of support.
   4.816 +   In particular, user agents <strong>must not</strong> selectively ignore
   4.817 +   unsupported component values and honor supported values in a single
   4.818 +   multi-value property declaration: if any value is considered invalid (as
   4.819 +   unsupported values must be), CSS requires that the entire declaration be
   4.820 +   ignored.
   4.821 +
   4.822 +  <h3 id=experimental><span class=secno>3.4. </span> Experimental
   4.823 +   implementations</h3>
   4.824 +
   4.825 +  <p>To avoid clashes with future CSS features, the CSS2.1 specification
   4.826 +   reserves a <a
   4.827 +   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   4.828 +   syntax</a> for proprietary and experimental extensions to CSS.
   4.829 +
   4.830 +  <p>Prior to a specification reaching the Candidate Recommendation stage in
   4.831 +   the W3C process, all implementations of a CSS feature are considered
   4.832 +   experimental. The CSS Working Group recommends that implementations use a
   4.833 +   vendor-prefixed syntax for such features, including those in W3C Working
   4.834 +   Drafts. This avoids incompatibilities with future changes in the draft.
   4.835 +
   4.836 +  <h3 id=testing><span class=secno>3.5. </span> Non-experimental
   4.837 +   implementations</h3>
   4.838 +
   4.839 +  <p>Once a specification reaches the Candidate Recommendation stage,
   4.840 +   non-experimental implementations are possible, and implementors should
   4.841 +   release an unprefixed implementation of any CR-level feature they can
   4.842 +   demonstrate to be correctly implemented according to spec.
   4.843 +
   4.844 +  <p>To establish and maintain the interoperability of CSS across
   4.845 +   implementations, the CSS Working Group requests that non-experimental CSS
   4.846 +   renderers submit an implementation report (and, if necessary, the
   4.847 +   testcases used for that implementation report) to the W3C before releasing
   4.848 +   an unprefixed implementation of any CSS features. Testcases submitted to
   4.849 +   W3C are subject to review and correction by the CSS Working Group.
   4.850 +
   4.851 +  <p>Further information on submitting testcases and implementation reports
   4.852 +   can be found from on the CSS Working Group's website at <a
   4.853 +   href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   4.854 +   Questions should be directed to the <a
   4.855 +   href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   4.856 +   mailing list.
   4.857 +
   4.858 +  <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR exit criteria</h3>
   4.859 +
   4.860 +  <p class=replaceme>Remove this section unless/until the module is in CR.</p>
   4.861 +  <!-- This text was <a href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a> -->
   4.862 +
   4.863 +  <p> For this specification to be advanced to Proposed Recommendation, there
   4.864 +   must be at least two independent, interoperable implementations of each
   4.865 +   feature. Each feature may be implemented by a different set of products,
   4.866 +   there is no requirement that all features be implemented by a single
   4.867 +   product. For the purposes of this criterion, we define the following
   4.868 +   terms:
   4.869 +
   4.870 +  <dl>
   4.871 +   <dt>independent
   4.872 +
   4.873 +   <dd>each implementation must be developed by a different party and cannot
   4.874 +    share, reuse, or derive from code used by another qualifying
   4.875 +    implementation. Sections of code that have no bearing on the
   4.876 +    implementation of this specification are exempt from this requirement.
   4.877 +
   4.878 +   <dt>interoperable
   4.879 +
   4.880 +   <dd>passing the respective test case(s) in the official CSS test suite,
   4.881 +    or, if the implementation is not a Web browser, an equivalent test. Every
   4.882 +    relevant test in the test suite should have an equivalent test created if
   4.883 +    such a user agent (UA) is to be used to claim interoperability. In
   4.884 +    addition if such a UA is to be used to claim interoperability, then there
   4.885 +    must one or more additional UAs which can also pass those equivalent
   4.886 +    tests in the same way for the purpose of interoperability. The equivalent
   4.887 +    tests must be made publicly available for the purposes of peer review.
   4.888 +
   4.889 +   <dt>implementation
   4.890 +
   4.891 +   <dd>a user agent which:
   4.892 +    <ol class=inline>
   4.893 +     <li>implements the specification.
   4.894 +
   4.895 +     <li>is available to the general public. The implementation may be a
   4.896 +      shipping product or other publicly available version (i.e., beta
   4.897 +      version, preview release, or “nightly build”). Non-shipping product
   4.898 +      releases must have implemented the feature(s) for a period of at least
   4.899 +      one month in order to demonstrate stability.
   4.900 +
   4.901 +     <li>is not experimental (i.e., a version specifically designed to pass
   4.902 +      the test suite and is not intended for normal usage going forward).
   4.903 +    </ol>
   4.904 +  </dl>
   4.905 +
   4.906 +  <p>The specification will remain Candidate Recommendation for at least six
   4.907 +   months.
   4.908 +
   4.909 +  <h2 class=no-num id=acknowledgments> Acknowledgments</h2>
   4.910 +
   4.911 +  <p><var class=replaceme>[acknowledgments]</var>
   4.912 +
   4.913 +  <h2 class=no-num id=references> References</h2>
   4.914 +
   4.915 +  <h3 class=no-num id=normative-references> Normative references</h3>
   4.916 +  <!--begin-normative-->
   4.917 +  <!-- Sorted by label -->
   4.918 +
   4.919 +  <dl class=bibliography>
   4.920 +   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
   4.921 +    <!---->
   4.922 +
   4.923 +   <dt id=CSS21>[CSS21]
   4.924 +
   4.925 +   <dd>Bert Bos; et al. <a
   4.926 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
   4.927 +    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
   4.928 +    2011. W3C Recommendation. URL: <a
   4.929 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
   4.930 +   </dd>
   4.931 +   <!---->
   4.932 +
   4.933 +   <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]
   4.934 +
   4.935 +   <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a
   4.936 +    href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/"><cite>CSS
   4.937 +    Flexible Box Layout Module.</cite></a> 12 June 2012. W3C Working Draft.
   4.938 +    (Work in progress.) URL: <a
   4.939 +    href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a>
   4.940 +   </dd>
   4.941 +   <!---->
   4.942 +
   4.943 +   <dt id=RFC2119>[RFC2119]
   4.944 +
   4.945 +   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
   4.946 +    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
   4.947 +    RFC 2119. URL: <a
   4.948 +    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
   4.949 +   </dd>
   4.950 +   <!---->
   4.951 +  </dl>
   4.952 +  <!--end-normative-->
   4.953 +
   4.954 +  <h3 class=no-num id=other-references> Other references</h3>
   4.955 +  <!--begin-informative-->
   4.956 +  <!-- Sorted by label -->
   4.957 +
   4.958 +  <dl class=bibliography>
   4.959 +   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
   4.960 +    <!---->
   4.961 +
   4.962 +   <dt id=CSS3COLOR>[CSS3COLOR]
   4.963 +
   4.964 +   <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
   4.965 +    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
   4.966 +    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
   4.967 +    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
   4.968 +   </dd>
   4.969 +   <!---->
   4.970 +  </dl>
   4.971 +  <!--end-informative-->
   4.972 +
   4.973 +  <h2 class=no-num id=index> Index</h2>
   4.974 +  <!--begin-index-->
   4.975 +
   4.976 +  <ul class=indexlist>
   4.977 +   <li>authoring tool, <a href="#authoring-tool"
   4.978 +    title="authoring tool"><strong>3.2.</strong></a>
   4.979 +
   4.980 +   <li>auto, <a href="#display-inside:auto"
   4.981 +    title=auto><strong>2.1.</strong></a>
   4.982 +
   4.983 +   <li>block, <a href="#display-inside:block"
   4.984 +    title=block><strong>2.1.</strong></a>, <a href="#display:block"
   4.985 +    title=block><strong>2.5.</strong></a>
   4.986 +
   4.987 +   <li>block-level, <a href="#display-outside:block-level"
   4.988 +    title=block-level><strong>2.2.</strong></a>
   4.989 +
   4.990 +   <li>contents, <a href="#display-box:contents"
   4.991 +    title=contents><strong>2.3.</strong></a>
   4.992 +
   4.993 +   <li>display, <a href="#display" title=display><strong>2.5.</strong></a>
   4.994 +
   4.995 +   <li>display-box, <a href="#display-box"
   4.996 +    title=display-box><strong>2.3.</strong></a>
   4.997 +
   4.998 +   <li>display-extras, <a href="#display-extras"
   4.999 +    title=display-extras><strong>2.4.</strong></a>
  4.1000 +
  4.1001 +   <li>display-inside, <a href="#display-inside"
  4.1002 +    title=display-inside><strong>2.1.</strong></a>
  4.1003 +
  4.1004 +   <li>display-outside, <a href="#display-outside"
  4.1005 +    title=display-outside><strong>2.2.</strong></a>
  4.1006 +
  4.1007 +   <li>flex, <a href="#display-inside:flex"
  4.1008 +    title=flex><strong>2.1.</strong></a>, <a href="#display:flex"
  4.1009 +    title=flex><strong>2.5.</strong></a>
  4.1010 +
  4.1011 +   <li>grid, <a href="#display-inside:grid"
  4.1012 +    title=grid><strong>2.1.</strong></a>, <a href="#display:grid"
  4.1013 +    title=grid><strong>2.5.</strong></a>
  4.1014 +
  4.1015 +   <li>inline, <a href="#display:inline"
  4.1016 +    title=inline><strong>2.5.</strong></a>
  4.1017 +
  4.1018 +   <li>inline-block, <a href="#display:inline-block"
  4.1019 +    title=inline-block><strong>2.5.</strong></a>
  4.1020 +
  4.1021 +   <li>inline-flex, <a href="#display:inline-flex"
  4.1022 +    title=inline-flex><strong>2.5.</strong></a>
  4.1023 +
  4.1024 +   <li>inline-grid, <a href="#display:inline-grid"
  4.1025 +    title=inline-grid><strong>2.5.</strong></a>
  4.1026 +
  4.1027 +   <li>inline-level, <a href="#display-outside:inline-level"
  4.1028 +    title=inline-level><strong>2.2.</strong></a>
  4.1029 +
  4.1030 +   <li>inline-list-item, <a href="#display:inline-list-item"
  4.1031 +    title=inline-list-item><strong>2.5.</strong></a>
  4.1032 +
  4.1033 +   <li>inline-table, <a href="#display:inline-table"
  4.1034 +    title=inline-table><strong>2.5.</strong></a>
  4.1035 +
  4.1036 +   <li>list-item, <a href="#display-extras:list-item"
  4.1037 +    title=list-item><strong>2.4.</strong></a>, <a href="#display:list-item"
  4.1038 +    title=list-item><strong>2.5.</strong></a>
  4.1039 +
  4.1040 +   <li>none, <a href="#display-box:none"
  4.1041 +    title=none><strong>2.3.</strong></a>, <a href="#display:none"
  4.1042 +    title=none><strong>2.5.</strong></a>
  4.1043 +
  4.1044 +   <li>normal, <a href="#display-box:normal"
  4.1045 +    title=normal><strong>2.3.</strong></a>
  4.1046 +
  4.1047 +   <li>renderer, <a href="#renderer" title=renderer><strong>3.2.</strong></a>
  4.1048 +
  4.1049 +   <li>style sheet
  4.1050 +    <ul>
  4.1051 +     <li>as conformance class, <a href="#style-sheet"
  4.1052 +      title="style sheet, as conformance class"><strong>3.2.</strong></a>
  4.1053 +    </ul>
  4.1054 +
  4.1055 +   <li>table, <a href="#display-inside:table"
  4.1056 +    title=table><strong>2.1.</strong></a>, <a href="#display:table"
  4.1057 +    title=table><strong>2.5.</strong></a>
  4.1058 +
  4.1059 +   <li>table-caption, <a href="#display-outside:table-caption"
  4.1060 +    title=table-caption><strong>2.2.</strong></a>, <a
  4.1061 +    href="#display:table-caption"
  4.1062 +    title=table-caption><strong>2.5.</strong></a>
  4.1063 +
  4.1064 +   <li>table-cell, <a href="#display-outside:table-cell"
  4.1065 +    title=table-cell><strong>2.2.</strong></a>, <a href="#display:table-cell"
  4.1066 +    title=table-cell><strong>2.5.</strong></a>
  4.1067 +
  4.1068 +   <li>table-column, <a href="#display-outside:table-column"
  4.1069 +    title=table-column><strong>2.2.</strong></a>
  4.1070 +
  4.1071 +   <li>table-column-group, <a href="#display-outside:table-column-group"
  4.1072 +    title=table-column-group><strong>2.2.</strong></a>
  4.1073 +
  4.1074 +   <li>table-footer-group, <a href="#display-outside:table-footer-group"
  4.1075 +    title=table-footer-group><strong>2.2.</strong></a>
  4.1076 +
  4.1077 +   <li>table-header-group, <a href="#display-outside:table-header-group"
  4.1078 +    title=table-header-group><strong>2.2.</strong></a>
  4.1079 +
  4.1080 +   <li>table-row, <a href="#display-outside:table-row"
  4.1081 +    title=table-row><strong>2.2.</strong></a>
  4.1082 +
  4.1083 +   <li>table-row-group, <a href="#display-outside:table-row-group"
  4.1084 +    title=table-row-group><strong>2.2.</strong></a>
  4.1085 +  </ul>
  4.1086 +  <!--end-index-->
  4.1087 +
  4.1088 +  <h2 class=no-num id=property-index> Property index</h2>
  4.1089 +  <!--begin-properties-->
  4.1090 +
  4.1091 +  <table class=proptable>
  4.1092 +   <thead>
  4.1093 +    <tr>
  4.1094 +     <th>Property
  4.1095 +
  4.1096 +     <th>Values
  4.1097 +
  4.1098 +     <th>Initial
  4.1099 +
  4.1100 +     <th>Applies to
  4.1101 +
  4.1102 +     <th>Inh.
  4.1103 +
  4.1104 +     <th>Percentages
  4.1105 +
  4.1106 +     <th>Media
  4.1107 +
  4.1108 +   <tbody>
  4.1109 +    <tr>
  4.1110 +     <th><a class=property href="#display-box">display-box</a>
  4.1111 +
  4.1112 +     <td>normal | none | contents
  4.1113 +
  4.1114 +     <td>normal
  4.1115 +
  4.1116 +     <td>all elements
  4.1117 +
  4.1118 +     <td>no
  4.1119 +
  4.1120 +     <td>N/A
  4.1121 +
  4.1122 +     <td>
  4.1123 +
  4.1124 +    <tr>
  4.1125 +     <th><a class=property href="#display-extras">display-extras</a>
  4.1126 +
  4.1127 +     <td>none | [ list-item ]
  4.1128 +
  4.1129 +     <td>none
  4.1130 +
  4.1131 +     <td>all elements
  4.1132 +
  4.1133 +     <td>no
  4.1134 +
  4.1135 +     <td>N/A
  4.1136 +
  4.1137 +     <td>
  4.1138 +
  4.1139 +    <tr>
  4.1140 +     <th><a class=property href="#display-inside">display-inside</a>
  4.1141 +
  4.1142 +     <td>auto | block | table | flex | grid
  4.1143 +
  4.1144 +     <td>auto
  4.1145 +
  4.1146 +     <td>all elements
  4.1147 +
  4.1148 +     <td>no
  4.1149 +
  4.1150 +     <td>N/A
  4.1151 +
  4.1152 +     <td>
  4.1153 +
  4.1154 +    <tr>
  4.1155 +     <th><a class=property href="#display-outside">display-outside</a>
  4.1156 +
  4.1157 +     <td>block-level | inline-level | table-row-group | table-header-group |
  4.1158 +      table-footer-group | table-row | table-cell | table-column-group |
  4.1159 +      table-column | table-caption
  4.1160 +
  4.1161 +     <td>inline-level
  4.1162 +
  4.1163 +     <td>all elements
  4.1164 +
  4.1165 +     <td>no
  4.1166 +
  4.1167 +     <td>N/A
  4.1168 +
  4.1169 +     <td>
  4.1170 +
  4.1171 +    <tr>
  4.1172 +     <th><a class=property href="#display">display</a>
  4.1173 +
  4.1174 +     <td>inline | block | list-item | inline-list-item | inline-block | table
  4.1175 +      | inline-table | table-cell | table-caption | flex | inline-flex | grid
  4.1176 +      | inline-grid | none | [ &lt;‘display-inside’> ||
  4.1177 +      &lt;‘display-outside’> || &lt;‘display-box’> ||
  4.1178 +      &lt;‘display-extras’> ]
  4.1179 +
  4.1180 +     <td>see individual properties
  4.1181 +
  4.1182 +     <td>all elements
  4.1183 +
  4.1184 +     <td>no
  4.1185 +
  4.1186 +     <td>see individual properties
  4.1187 +
  4.1188 +     <td>
  4.1189 +  </table>
  4.1190 +  <!--end-properties-->
  4.1191 +</html>
  4.1192 +<!-- Keep this comment at the end of the file
  4.1193 +Local variables:
  4.1194 +mode: sgml
  4.1195 +sgml-declaration:"~/SGML/HTML4.decl"
  4.1196 +sgml-default-doctype-name:"html"
  4.1197 +sgml-minimize-attributes:t
  4.1198 +sgml-nofill-elements:("pre" "style" "br")
  4.1199 +sgml-live-element-indicator:t
  4.1200 +sgml-omittag:nil
  4.1201 +sgml-shorttag:nil
  4.1202 +sgml-namecase-general:t
  4.1203 +sgml-general-insert-case:lower
  4.1204 +sgml-always-quote-attributes:t
  4.1205 +sgml-indent-step:nil
  4.1206 +sgml-indent-data:t
  4.1207 +sgml-parent-document:nil
  4.1208 +sgml-exposed-tags:nil
  4.1209 +sgml-local-catalogs:nil
  4.1210 +sgml-local-ecat-files:nil
  4.1211 +End:
  4.1212 +-->
     5.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     5.2 +++ b/css-display-3/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
     5.3 @@ -0,0 +1,715 @@
     5.4 +<!DOCTYPE html>
     5.5 +<html lang="en">
     5.6 +<head>
     5.7 +	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5.8 +	<title>CSS Display Module Level 3</title>
     5.9 +	<link rel=contents href="#contents">
    5.10 +	<link rel=index href="#index">
    5.11 +	<link rel="stylesheet" type="text/css" href="../default.css">
    5.12 +	<link rel="stylesheet" type="text/css"
    5.13 +				href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
    5.14 +	<style type="text/css">
    5.15 +		/* delete this block when you've cleared out all the .replaceme elements */
    5.16 +		.replaceme {
    5.17 +			border: solid red;
    5.18 +			padding: 0 0.5em;
    5.19 +			margin: 0 0.1em;
    5.20 +			background: yellow;
    5.21 +			color: green;
    5.22 +		}
    5.23 +		.replaceme:before {
    5.24 +			 content: "FIXME(";
    5.25 +			 color: black;
    5.26 +		}
    5.27 +		.replaceme:after {
    5.28 +			 content: ")";
    5.29 +			 color: black;
    5.30 +		}
    5.31 +	</style>
    5.32 +</head>
    5.33 +
    5.34 +<div class="head">
    5.35 +<!--logo-->
    5.36 +
    5.37 +<h1>CSS Display Module Level 3</h1>
    5.38 +
    5.39 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
    5.40 +<dl>
    5.41 +	<dt>This version:
    5.42 +		<dd><a href="[VERSION]" class="replaceme">http://www.w3.org/TR/[YEAR]/ED-cssN-FIXME-[CDATE]/</a>
    5.43 +
    5.44 +	<dt>Latest version:
    5.45 +		<dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
    5.46 +
    5.47 +	<dt>Editor's draft:
    5.48 +		<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
    5.49 +
    5.50 +	<dt>Previous version:
    5.51 +		<dd><a href="http://www.w3.org/PreviousVersionURI">
    5.52 +		http://www.w3.org/PreviousVersionURI</a>
    5.53 +
    5.54 +	<dt>Issue Tracking:</dt>
    5.55 +		<dd><a href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a>
    5.56 +
    5.57 +	<dt>Feedback:</dt>
    5.58 +		<dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
    5.59 +
    5.60 +	<dt>Editors:
    5.61 +	<dd class="h-card vcard">
    5.62 +			<a class="p-name fn u-url url" rel="author"
    5.63 +				 href="http://www.xanthir.com/">Tab Atkins Jr.</a>
    5.64 +			(<span class="p-org org">Google, Inc.</span>),
    5.65 +			<span class="u-email email">jackalmage@gmail.com</span>
    5.66 +</dl>
    5.67 +
    5.68 +<!--copyright-->
    5.69 +
    5.70 +<hr title="Separator for header">
    5.71 +</div>
    5.72 +
    5.73 +<h2 class="no-num no-toc" id="abstract">Abstract</h2>
    5.74 +
    5.75 +	<p>
    5.76 +		This module contains the features of CSS relating to the 'display' property.
    5.77 +		<a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 
    5.78 +		(such as HTML and XML) 
    5.79 +		on screen, on paper, in speech, etc.
    5.80 +
    5.81 +<h2 class="no-num no-toc" id="status">Status of this document</h2>
    5.82 +
    5.83 +	<p>
    5.84 +		This is currently a personal draft,
    5.85 +		not yet approved by the CSSWG to be an Editor's Draft.
    5.86 +		(Ignore the branding on the side and heading, which are artifacts of the spec generation process.)
    5.87 +<!--//status-->
    5.88 +
    5.89 +<p>The following features are at risk: &hellip;
    5.90 +
    5.91 +<h2 class="no-num no-toc" id="contents">
    5.92 +Table of contents</h2>
    5.93 +
    5.94 +<!--toc-->
    5.95 +
    5.96 +<h2 id="intro">
    5.97 +Introduction</h2>
    5.98 +
    5.99 +	<p><em>This section is not normative.</em>
   5.100 +
   5.101 +	<p>
   5.102 +		<var class="replaceme">Provide background, motivation, etc.</var></p>
   5.103 +
   5.104 +<h3 id="placement">
   5.105 +Module interactions</h3>
   5.106 +
   5.107 +	<p class="replaceme">
   5.108 +		Explain, normatively, how this module affects the definition of CSS.</p>
   5.109 +
   5.110 +	<p>
   5.111 +		This module replaces and extends the <var class="replaceme">SUMMARIZE HERE</var> features defined in [[!CSS21]] sections <var class="replaceme">W.X and Y.Z</var>.
   5.112 +
   5.113 +	<p>
   5.114 +		None of the properties in this module apply to the <code>::first-line</code> or <code>::first-letter</code> pseudo-elements.
   5.115 +
   5.116 +<h3 id="values">
   5.117 +Values</h3>
   5.118 +
   5.119 +	<p>This specification follows the
   5.120 +	<a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   5.121 +	definition conventions</a> from [[!CSS21]]. Value types not defined in
   5.122 +	this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
   5.123 +	Other CSS modules may expand the definitions of these value types: for
   5.124 +	example [[CSS3COLOR]], when combined with this module, expands the
   5.125 +	definition of the &lt;color&gt; value type as used in this specification.</p>
   5.126 +	
   5.127 +	<p>In addition to the property-specific values listed in their definitions,
   5.128 +	all properties defined in this specification also accept the
   5.129 +	<a href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>
   5.130 +	as their property value. For readability it has not been repeated explicitly.
   5.131 +
   5.132 +<h2>
   5.133 +The Display Properties</h2>
   5.134 +
   5.135 +	<p>
   5.136 +		The 'display' shorthand and its associated family of properties control the layout mode of elements
   5.137 +		(how the element determines the sizes and positions of itself and its descendants),
   5.138 +		and what boxes they and their descendants generate.
   5.139 +
   5.140 +
   5.141 +<h3 id='the-display-inside'>
   5.142 +Setting the layout mode: the 'display-inside' property</h3>
   5.143 +
   5.144 +	<table class='propdef'>
   5.145 +		<tr>
   5.146 +			<th>Name:
   5.147 +			<td><dfn>display-inside</dfn>
   5.148 +		<tr>
   5.149 +			<th>Value:
   5.150 +			<td>auto | block | table | flex | grid
   5.151 +		<tr>
   5.152 +			<th>Initial:
   5.153 +			<td>auto
   5.154 +		<tr>
   5.155 +			<th>Applies To:
   5.156 +			<td>all elements
   5.157 +		<tr>
   5.158 +			<th>Inherited:
   5.159 +			<td>no
   5.160 +		<tr>
   5.161 +			<th>Percentages:
   5.162 +			<td>N/A
   5.163 +		<tr>
   5.164 +			<th>Computed Value:
   5.165 +			<td>a keyword
   5.166 +	</table>
   5.167 +
   5.168 +	<dl>
   5.169 +		<dt><dfn id='display-inside:auto'>auto</dfn>
   5.170 +		<dd>
   5.171 +			If the element's computed 'display-outside' value is ''inline-level'',
   5.172 +			the element is an <i>inline element</i>,
   5.173 +			and lays out its contents using inline layout. [[!CSS21]]
   5.174 +			If the element's computed 'display-outside' value is ''table-row-group'', ''table-header-group'', ''table-footer-group'', ''table-row'', ''table-column-group'', or ''table-column'',
   5.175 +			this elements acts as normal for its given 'display-outside' value.
   5.176 +			Otherwise, this value computes to ''block''.
   5.177 +
   5.178 +		<dt><dfn id='display-inside:block'>block</dfn>
   5.179 +		<dd>
   5.180 +			The element lays out its contents using block layout. [[!CSS21]]
   5.181 +
   5.182 +		<dt><dfn id='display-inside:table'>table</dfn>
   5.183 +		<dd>
   5.184 +			The element lays out its contents using table layout. [[!CSS21]]
   5.185 +
   5.186 +		<dt><dfn id='display-inside:flex'>flex</dfn>
   5.187 +		<dd>
   5.188 +			The element lays out its contents using flex layout. [[!CSS3-FLEXBOX]]
   5.189 +
   5.190 +		<dt><dfn id='display-inside:grid'>grid</dfn>
   5.191 +		<dd>
   5.192 +			The element lays out its contents using grid layout. [[!CSS3-GRID]]
   5.193 +	</dl>
   5.194 +
   5.195 +
   5.196 +<h3 id='the-display-outside'>
   5.197 +Interacting with the layout mode: the 'display-outside' property</h3>
   5.198 +
   5.199 +	<table class='propdef'>
   5.200 +		<tr>
   5.201 +			<th>Name:
   5.202 +			<td><dfn>display-outside</dfn>
   5.203 +		<tr>
   5.204 +			<th>Value:
   5.205 +			<td>block-level | inline-level | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption
   5.206 +		<tr>
   5.207 +			<th>Initial:
   5.208 +			<td>inline-level
   5.209 +		<tr>
   5.210 +			<th>Applies To:
   5.211 +			<td>all elements
   5.212 +		<tr>
   5.213 +			<th>Inherited:
   5.214 +			<td>no
   5.215 +		<tr>
   5.216 +			<th>Percentages:
   5.217 +			<td>N/A
   5.218 +		<tr>
   5.219 +			<th>Computed Value:
   5.220 +			<td>as specified
   5.221 +	</table>
   5.222 +
   5.223 +	<dl>
   5.224 +		<dt><dfn id='display-outside:block-level'>block-level</dfn>
   5.225 +		<dd>
   5.226 +			The element is <i>block-level</i>,
   5.227 +			and participates in a block formatting context.
   5.228 +			Other formatting contexts,
   5.229 +			such as flex formatting contexts,
   5.230 +			may also work with <i>block-level</i> elements. [[!CSS21]]
   5.231 +
   5.232 +		<dt><dfn id='display-outside:inline-level'>inline-level</dfn>
   5.233 +		<dd>
   5.234 +			The element is <i>inline-level</i>,
   5.235 +			and participates in an inline formatting context. [[!CSS21]]
   5.236 +
   5.237 +		<dt><dfn id='display-outside:table-row-group'>table-row-group</dfn>, <dfn id='display-outside:table-header-group'>table-header-group</dfn>, <dfn id='display-outside:table-footer-group'>table-footer-group</dfn>, <dfn id='display-outside:table-row'>table-row</dfn>, <dfn id='display-outside:table-cell'>table-cell</dfn>, <dfn id='display-outside:table-column-group'>table-column-group</dfn>, <dfn id='display-outside:table-column'>table-column</dfn>, <dfn id='display-outside:table-caption'>table-caption</dfn>
   5.238 +		<dd>
   5.239 +			The element is an internal table element,
   5.240 +			and participates in a table layout context. [[!CSS21]]
   5.241 +	</dl>
   5.242 +
   5.243 +	<p class='issue'>
   5.244 +		Do we need special bits about some of the interactions with 'display-inside'?
   5.245 +		For example, how ''display:inline-level block;'' works?
   5.246 +		Or does that fall out of what exists,
   5.247 +		and the definitions of Block Layout in 2.1?
   5.248 +		(...or a new Block Layout spec, explaining all the 2.1 stuff more sanely?)
   5.249 +
   5.250 +	<p class='issue'>
   5.251 +		Is <a href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0450.html">fantasai's proposal for a run-in model</a> sane enough to include in this spec?
   5.252 +
   5.253 +
   5.254 +<h3 id='the-display-box'>
   5.255 +Controlling box generation: the 'display-box' property</h3>
   5.256 +
   5.257 +	<table class='propdef'>
   5.258 +		<tr>
   5.259 +			<th>Name:
   5.260 +			<td><dfn>display-box</dfn>
   5.261 +		<tr>
   5.262 +			<th>Value:
   5.263 +			<td>normal | none | contents
   5.264 +		<tr>
   5.265 +			<th>Initial:
   5.266 +			<td>normal
   5.267 +		<tr>
   5.268 +			<th>Applies To:
   5.269 +			<td>all elements
   5.270 +		<tr>
   5.271 +			<th>Inherited:
   5.272 +			<td>no
   5.273 +		<tr>
   5.274 +			<th>Percentages:
   5.275 +			<td>N/A
   5.276 +		<tr>
   5.277 +			<th>Computed Value:
   5.278 +			<td>as specified
   5.279 +	</table>
   5.280 +
   5.281 +	<dl>
   5.282 +		<dt><dfn id='display-box:normal'>normal</dfn>
   5.283 +		<dd>
   5.284 +			The element generates boxes as normal, 
   5.285 +			per its other 'display-*' properties.
   5.286 +
   5.287 +		<dt><dfn id='display-box:none'>none</dfn>
   5.288 +		<dd>
   5.289 +			The element generates no boxes at all.
   5.290 +
   5.291 +		<dt><dfn id='display-box:contents'>contents</dfn>
   5.292 +		<dd>
   5.293 +			The element itself does not generate any boxes,
   5.294 +			but its children and pseudo-elements still generate boxes as normal.
   5.295 +			For the purposes of box generation and layout,
   5.296 +			the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.
   5.297 +	</dl>
   5.298 +
   5.299 +	<p class='issue'>
   5.300 +		Is there a need for a value that suppresses box generation for layout purposes, 
   5.301 +		but still generates them for the purposes of animations/counters/etc.?
   5.302 +
   5.303 +	<p class='issue'>
   5.304 +		''contents'' currently only has an effect on box generation and layout.
   5.305 +		Other things that care about the document tree are unaffected, like counter scopes.
   5.306 +		Is this what we want?
   5.307 +
   5.308 +
   5.309 +<h3 id='the-display-extras'>
   5.310 +Additional stuff: the 'display-extras' property</h3>
   5.311 +
   5.312 +	<table class='propdef'>
   5.313 +		<tr>
   5.314 +			<th>Name:
   5.315 +			<td><dfn>display-extras</dfn>
   5.316 +		<tr>
   5.317 +			<th>Value:
   5.318 +			<td>none | [ list-item ]
   5.319 +		<tr>
   5.320 +			<th>Initial:
   5.321 +			<td>none
   5.322 +		<tr>
   5.323 +			<th>Applies To:
   5.324 +			<td>all elements
   5.325 +		<tr>
   5.326 +			<th>Inherited:
   5.327 +			<td>no
   5.328 +		<tr>
   5.329 +			<th>Percentages:
   5.330 +			<td>N/A
   5.331 +		<tr>
   5.332 +			<th>Computed Value:
   5.333 +			<td>as specified
   5.334 +	</table>
   5.335 +
   5.336 +	<dl>
   5.337 +		<dt><dfn id='display-extras:list-item'>list-item</dfn>
   5.338 +		<dd>
   5.339 +			The element generates a <code>::marker</code> pseudo-element
   5.340 +			and is considered a <a href="../css3-lists/#list-item">list item</a>.
   5.341 +	</dl>
   5.342 +
   5.343 +<h3 id='the-display'>
   5.344 +The 'display' shorthand property</h3>
   5.345 +
   5.346 +	<table class='propdef'>
   5.347 +		<tr>
   5.348 +			<th>Name:
   5.349 +			<td><dfn>display</dfn>
   5.350 +		<tr>
   5.351 +			<th>Value:
   5.352 +			<td>inline | block | list-item | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid | none | [ &lt;'display-inside'> || &lt;'display-outside'> || &lt;'display-box'> || &lt;'display-extras'> ]
   5.353 +		<tr>
   5.354 +			<th>Initial:
   5.355 +			<td>see individual properties
   5.356 +		<tr>
   5.357 +			<th>Applies To:
   5.358 +			<td>all elements
   5.359 +		<tr>
   5.360 +			<th>Inherited:
   5.361 +			<td>no
   5.362 +		<tr>
   5.363 +			<th>Percentages:
   5.364 +			<td>see individual properties
   5.365 +		<tr>
   5.366 +			<th>Computed Value:
   5.367 +			<td>see individual properties
   5.368 +		<tr>
   5.369 +			<th>Animatable:
   5.370 +			<td>see individual properties
   5.371 +	</table>
   5.372 +
   5.373 +	<p>
   5.374 +		The single-keyword values listed explicitly in the grammar above are handled specially,
   5.375 +		for legacy reasons.
   5.376 +		All other single-keyword values, 
   5.377 +		and all other values in general,
   5.378 +		are handled as normal for shorthands.
   5.379 +
   5.380 +	<p class='issue'>
   5.381 +		The general rule for new layout modes seems to be that they're block-level by default.
   5.382 +		However, this conflicts with the default value of 'display-outside', which is ''inline-level''.
   5.383 +		What's the best way to address this?
   5.384 +		Simplest answer is to just expand this list of special values as we go along.
   5.385 +		Another possibility is to magic up the expansion in a different way,
   5.386 +		so that if the value is just a 'display-inside' keyword,
   5.387 +		'display-outside' defaults to ''block-level''.
   5.388 +		If the latter is chosen, we could remove several more of the special expansions below
   5.389 +		(all the ones that are identical to a 'display-inside' value).
   5.390 +
   5.391 +	<p class='note'>
   5.392 +		Several of the "special" expansions below are actually just what the shorthand would expand to normally.
   5.393 +		They're included here for clarity,
   5.394 +		as they're very familiar from long usage in CSS 2.1,
   5.395 +		before the 'display' property became a shorthand.
   5.396 +
   5.397 +	<dl>
   5.398 +		<dt><dfn id='display:inline'>inline</dfn>
   5.399 +		<dd>
   5.400 +			Expands identically to ''inline-level auto''.
   5.401 +
   5.402 +		<dt><dfn id='display:block'>block</dfn>
   5.403 +		<dd>
   5.404 +			Expands identically to ''block-level block''.
   5.405 +
   5.406 +		<dt><dfn id='display:list-item'>list-item</dfn>
   5.407 +		<dd>
   5.408 +			Expands identically to ''block-level block list-item''.
   5.409 +
   5.410 +		<dt><dfn id='display:inline-list-item'>inline-list-item</dfn>
   5.411 +		<dd>
   5.412 +			Expands identically to ''inline-level block list-item''.
   5.413 +
   5.414 +		<dt><dfn id='display:inline-block'>inline-block</dfn>
   5.415 +		<dd>
   5.416 +			Expands identically to ''inline-level block''.
   5.417 +
   5.418 +		<dt><dfn id='display:table'>table</dfn>
   5.419 +		<dd>
   5.420 +			Expands identically to ''block-level table''.
   5.421 +
   5.422 +		<dt><dfn id='display:inline-table'>inline-table</dfn>
   5.423 +		<dd>
   5.424 +			Expands identically to ''inline-level table''.
   5.425 +
   5.426 +		<dt><dfn id='display:table-caption'>table-caption</dfn>
   5.427 +		<dd>
   5.428 +			Expands identically to ''table-caption block''.
   5.429 +
   5.430 +		<dt><dfn id='display:table-cell'>table-cell</dfn>
   5.431 +		<dd>
   5.432 +			Expands identically to ''table-cell block''.
   5.433 +
   5.434 +		<dt><dfn id='display:flex'>flex</dfn>
   5.435 +		<dd>
   5.436 +			Expands identically to ''block-level flex''.
   5.437 +
   5.438 +		<dt><dfn id='display:inline-flex'>inline-flex</dfn>
   5.439 +		<dd>
   5.440 +			Expands identically to ''inline-level flex''.
   5.441 +
   5.442 +		<dt><dfn id='display:grid'>grid</dfn>
   5.443 +		<dd>
   5.444 +			Expands identically to ''block-level grid''.
   5.445 +
   5.446 +		<dt><dfn id='display:inline-grid'>inline-grid</dfn>
   5.447 +		<dd>
   5.448 +			Expands identically to ''inline-level grid''.
   5.449 +
   5.450 +		<dt><dfn id='display:none'>none</dfn>
   5.451 +		<dd>
   5.452 +			Expands identically to ''inline-level auto none''.
   5.453 +	</dl>
   5.454 +
   5.455 +
   5.456 +
   5.457 +
   5.458 +<!--
   5.459 +    
   5.460 +TTTTTTTTTTTTTTTTTTTTTTTHHHHHHHHH     HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE
   5.461 +T:::::::::::::::::::::TH:::::::H     H:::::::HE::::::::::::::::::::E
   5.462 +T:::::::::::::::::::::TH:::::::H     H:::::::HE::::::::::::::::::::E
   5.463 +T:::::TT:::::::TT:::::THH::::::H     H::::::HHEE::::::EEEEEEEEE::::E
   5.464 +TTTTTT  T:::::T  TTTTTT  H:::::H     H:::::H    E:::::E       EEEEEE
   5.465 +        T:::::T          H:::::H     H:::::H    E:::::E             
   5.466 +        T:::::T          H::::::HHHHH::::::H    E::::::EEEEEEEEEE   
   5.467 +        T:::::T          H:::::::::::::::::H    E:::::::::::::::E   
   5.468 +        T:::::T          H:::::::::::::::::H    E:::::::::::::::E   
   5.469 +        T:::::T          H::::::HHHHH::::::H    E::::::EEEEEEEEEE   
   5.470 +        T:::::T          H:::::H     H:::::H    E:::::E             
   5.471 +        T:::::T          H:::::H     H:::::H    E:::::E       EEEEEE
   5.472 +      TT:::::::TT      HH::::::H     H::::::HHEE::::::EEEEEEEE:::::E
   5.473 +      T:::::::::T      H:::::::H     H:::::::HE::::::::::::::::::::E
   5.474 +      T:::::::::T      H:::::::H     H:::::::HE::::::::::::::::::::E
   5.475 +      TTTTTTTTTTT      HHHHHHHHH     HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE
   5.476 +                                                                    
   5.477 +                                                                    
   5.478 +                                                                   
   5.479 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN        NNNNNNNNDDDDDDDDDDDDD        
   5.480 +E::::::::::::::::::::EN:::::::N       N::::::ND::::::::::::DDD     
   5.481 +E::::::::::::::::::::EN::::::::N      N::::::ND:::::::::::::::DD   
   5.482 +EE::::::EEEEEEEEE::::EN:::::::::N     N::::::NDDD:::::DDDDD:::::D  
   5.483 +  E:::::E       EEEEEEN::::::::::N    N::::::N  D:::::D    D:::::D 
   5.484 +  E:::::E             N:::::::::::N   N::::::N  D:::::D     D:::::D
   5.485 +  E::::::EEEEEEEEEE   N:::::::N::::N  N::::::N  D:::::D     D:::::D
   5.486 +  E:::::::::::::::E   N::::::N N::::N N::::::N  D:::::D     D:::::D
   5.487 +  E:::::::::::::::E   N::::::N  N::::N:::::::N  D:::::D     D:::::D
   5.488 +  E::::::EEEEEEEEEE   N::::::N   N:::::::::::N  D:::::D     D:::::D
   5.489 +  E:::::E             N::::::N    N::::::::::N  D:::::D     D:::::D
   5.490 +  E:::::E       EEEEEEN::::::N     N:::::::::N  D:::::D    D:::::D 
   5.491 +EE::::::EEEEEEEE:::::EN::::::N      N::::::::NDDD:::::DDDDD:::::D  
   5.492 +E::::::::::::::::::::EN::::::N       N:::::::ND:::::::::::::::DD   
   5.493 +E::::::::::::::::::::EN::::::N        N::::::ND::::::::::::DDD     
   5.494 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN         NNNNNNNDDDDDDDDDDDDD        
   5.495 +-->
   5.496 +
   5.497 +<h2 id="conformance">
   5.498 +Conformance</h2>
   5.499 +
   5.500 +<h3 id="conventions">
   5.501 +Document conventions</h3>
   5.502 +
   5.503 +	<p>Conformance requirements are expressed with a combination of
   5.504 +	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
   5.505 +	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
   5.506 +	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
   5.507 +	document are to be interpreted as described in RFC 2119.
   5.508 +	However, for readability, these words do not appear in all uppercase
   5.509 +	letters in this specification.
   5.510 +	
   5.511 +	<p>All of the text of this specification is normative except sections
   5.512 +	explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
   5.513 +	
   5.514 +	<p>Examples in this specification are introduced with the words “for example”
   5.515 +	or are set apart from the normative text with <code>class="example"</code>,
   5.516 +	like this:
   5.517 +	
   5.518 +	<div class="example">
   5.519 +		<p>This is an example of an informative example.</p>
   5.520 +	</div>
   5.521 +	
   5.522 +	<p>Informative notes begin with the word “Note” and are set apart from the
   5.523 +	normative text with <code>class="note"</code>, like this:
   5.524 +	
   5.525 +	<p class="note">Note, this is an informative note.</p>
   5.526 +
   5.527 +<h3 id="conformance-classes">
   5.528 +Conformance classes</h3>
   5.529 +
   5.530 +	<p>Conformance to <var class="replaceme">CSS TEMPLATE Module</var>
   5.531 +	is defined for three conformance classes:
   5.532 +	<dl>
   5.533 +		<dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
   5.534 +			<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
   5.535 +			style sheet</a>.
   5.536 +		<dt><dfn>renderer</dfn></dt>
   5.537 +			<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   5.538 +			that interprets the semantics of a style sheet and renders
   5.539 +			documents that use them.
   5.540 +		<dt><dfn id="authoring-tool">authoring tool</dfn></dt>
   5.541 +			<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   5.542 +			that writes a style sheet.
   5.543 +	</dl>
   5.544 +	
   5.545 +	<p>A style sheet is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
   5.546 +	if all of its statements that use syntax defined in this module are valid
   5.547 +	according to the generic CSS grammar and the individual grammars of each
   5.548 +	feature defined in this module.
   5.549 +	
   5.550 +	<p>A renderer is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
   5.551 +	if, in addition to interpreting the style sheet as defined by the
   5.552 +	appropriate specifications, it supports all the features defined
   5.553 +	by <var class="replaceme">CSS TEMPLATE Module</var> by parsing them correctly
   5.554 +	and rendering the document accordingly. However, the inability of a
   5.555 +	UA to correctly render a document due to limitations of the device
   5.556 +	does not make the UA non-conformant. (For example, a UA is not
   5.557 +	required to render color on a monochrome monitor.)
   5.558 +	
   5.559 +	<p>An authoring tool is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
   5.560 +	if it writes style sheets that are syntactically correct according to the
   5.561 +	generic CSS grammar and the individual grammars of each feature in
   5.562 +	this module, and meet all other conformance requirements of style sheets
   5.563 +	as described in this module.
   5.564 +
   5.565 +<h3 id="partial">
   5.566 +Partial implementations</h3>
   5.567 +
   5.568 +	<p>So that authors can exploit the forward-compatible parsing rules to
   5.569 +	assign fallback values, CSS renderers <strong>must</strong>
   5.570 +	treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
   5.571 +	as appropriate</a>) any at-rules, properties, property values, keywords,
   5.572 +	and other syntactic constructs for which they have no usable level of
   5.573 +	support. In particular, user agents <strong>must not</strong> selectively
   5.574 +	ignore unsupported component values and honor supported values in a single
   5.575 +	multi-value property declaration: if any value is considered invalid
   5.576 +	(as unsupported values must be), CSS requires that the entire declaration
   5.577 +	be ignored.</p>
   5.578 +	
   5.579 +<h3 id="experimental">
   5.580 +Experimental implementations</h3>
   5.581 +
   5.582 +	<p>To avoid clashes with future CSS features, the CSS2.1 specification
   5.583 +	reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   5.584 +	syntax</a> for proprietary and experimental extensions to CSS.
   5.585 +	
   5.586 +	<p>Prior to a specification reaching the Candidate Recommendation stage
   5.587 +	in the W3C process, all implementations of a CSS feature are considered
   5.588 +	experimental. The CSS Working Group recommends that implementations
   5.589 +	use a vendor-prefixed syntax for such features, including those in
   5.590 +	W3C Working Drafts. This avoids incompatibilities with future changes
   5.591 +	in the draft.
   5.592 +	</p>
   5.593 + 
   5.594 +<h3 id="testing">
   5.595 +Non-experimental implementations</h3>
   5.596 +
   5.597 +	<p>Once a specification reaches the Candidate Recommendation stage,
   5.598 +	non-experimental implementations are possible, and implementors should
   5.599 +	release an unprefixed implementation of any CR-level feature they
   5.600 +	can demonstrate to be correctly implemented according to spec.
   5.601 +	
   5.602 +	<p>To establish and maintain the interoperability of CSS across
   5.603 +	implementations, the CSS Working Group requests that non-experimental
   5.604 +	CSS renderers submit an implementation report (and, if necessary, the
   5.605 +	testcases used for that implementation report) to the W3C before
   5.606 +	releasing an unprefixed implementation of any CSS features. Testcases
   5.607 +	submitted to W3C are subject to review and correction by the CSS
   5.608 +	Working Group.
   5.609 +	
   5.610 +	<p>Further information on submitting testcases and implementation reports
   5.611 +	can be found from on the CSS Working Group's website at
   5.612 +	<a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   5.613 +	Questions should be directed to the
   5.614 +	<a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   5.615 +	mailing list.
   5.616 +
   5.617 +<h3 id="cr-exit-criteria">
   5.618 +CR exit criteria</h3>
   5.619 +
   5.620 +	<p class="replaceme">Remove this section unless/until the module is in CR.</p>
   5.621 +
   5.622 +	<!-- This text was <a href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a> -->
   5.623 +
   5.624 +	<p>
   5.625 +	For this specification to be advanced to Proposed Recommendation,
   5.626 +	there must be at least two independent, interoperable implementations
   5.627 +	of each feature. Each feature may be implemented by a different set of
   5.628 +	products, there is no requirement that all features be implemented by
   5.629 +	a single product. For the purposes of this criterion, we define the
   5.630 +	following terms:
   5.631 +	
   5.632 +	<dl>
   5.633 +		<dt>independent <dd>each implementation must be developed by a
   5.634 +		different party and cannot share, reuse, or derive from code
   5.635 +		used by another qualifying implementation. Sections of code that
   5.636 +		have no bearing on the implementation of this specification are
   5.637 +		exempt from this requirement.
   5.638 +	
   5.639 +		<dt>interoperable <dd>passing the respective test case(s) in the
   5.640 +		official CSS test suite, or, if the implementation is not a Web
   5.641 +		browser, an equivalent test. Every relevant test in the test
   5.642 +		suite should have an equivalent test created if such a user
   5.643 +		agent (UA) is to be used to claim interoperability. In addition
   5.644 +		if such a UA is to be used to claim interoperability, then there
   5.645 +		must one or more additional UAs which can also pass those
   5.646 +		equivalent tests in the same way for the purpose of
   5.647 +		interoperability. The equivalent tests must be made publicly
   5.648 +		available for the purposes of peer review.
   5.649 +	
   5.650 +		<dt>implementation <dd>a user agent which:
   5.651 +	
   5.652 +		<ol class=inline>
   5.653 +			<li>implements the specification.
   5.654 +	
   5.655 +			<li>is available to the general public. The implementation may
   5.656 +			be a shipping product or other publicly available version
   5.657 +			(i.e., beta version, preview release, or “nightly build”). 
   5.658 +			Non-shipping product releases must have implemented the
   5.659 +			feature(s) for a period of at least one month in order to
   5.660 +			demonstrate stability.
   5.661 +	
   5.662 +			<li>is not experimental (i.e., a version specifically designed
   5.663 +			to pass the test suite and is not intended for normal usage
   5.664 +			going forward).
   5.665 +		</ol>
   5.666 +	</dl>
   5.667 +	
   5.668 +	<p>The specification will remain Candidate Recommendation for at least
   5.669 +	six months.
   5.670 +
   5.671 +<h2 class=no-num id="acknowledgments">
   5.672 +Acknowledgments</h2>
   5.673 +
   5.674 +	<p><var class="replaceme">[acknowledgments]</var></p>
   5.675 +
   5.676 +<h2 class=no-num id="references">
   5.677 +References</h2>
   5.678 +
   5.679 +<h3 class="no-num" id="normative-references">
   5.680 +Normative references</h3>
   5.681 +<!--normative-->
   5.682 +
   5.683 +<h3 class="no-num" id="other-references">
   5.684 +Other references</h3>
   5.685 +<!--informative-->
   5.686 +
   5.687 +<h2 class="no-num" id="index">
   5.688 +Index</h2>
   5.689 +<!--index-->
   5.690 +
   5.691 +<h2 class="no-num" id="property-index">
   5.692 +Property index</h2>
   5.693 +<!-- properties -->
   5.694 +
   5.695 +</body>
   5.696 +</html>
   5.697 +<!-- Keep this comment at the end of the file
   5.698 +Local variables:
   5.699 +mode: sgml
   5.700 +sgml-declaration:"~/SGML/HTML4.decl"
   5.701 +sgml-default-doctype-name:"html"
   5.702 +sgml-minimize-attributes:t
   5.703 +sgml-nofill-elements:("pre" "style" "br")
   5.704 +sgml-live-element-indicator:t
   5.705 +sgml-omittag:nil
   5.706 +sgml-shorttag:nil
   5.707 +sgml-namecase-general:t
   5.708 +sgml-general-insert-case:lower
   5.709 +sgml-always-quote-attributes:t
   5.710 +sgml-indent-step:nil
   5.711 +sgml-indent-data:t
   5.712 +sgml-parent-document:nil
   5.713 +sgml-exposed-tags:nil
   5.714 +sgml-local-catalogs:nil
   5.715 +sgml-local-ecat-files:nil
   5.716 +End:
   5.717 +-->
   5.718 + 
     6.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     6.2 +++ b/css-text-decor-3/Overview.html	Mon Oct 22 00:41:17 2012 +0200
     6.3 @@ -0,0 +1,1908 @@
     6.4 +<!DOCTYPE html>
     6.5 +
     6.6 +<html lang=en>
     6.7 + <head>
     6.8 +  <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
     6.9 +  <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title>
    6.10 +  <!--
    6.11 +  <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
    6.12 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
    6.13 +  -->
    6.14 +
    6.15 +  <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)"
    6.16 +   name=dcterms.title>
    6.17 +  <meta content=text name=dcterms.type>
    6.18 +  <meta content=2012-10-18 name=dcterms.issued>
    6.19 +  <meta content="Elika J. Etemad" name=dcterms.creator>
    6.20 +  <meta content="Koji Ishii" name=dcterms.creator>
    6.21 +  <meta content=W3C name=dcterms.publisher>
    6.22 +  <meta content="http://www.w3.org/TR/2012/ED-css-text-decor-3-20121018/"
    6.23 +   name=dcterms.identifier>
    6.24 +  <link href="#contents" rel=contents>
    6.25 +  <link href="#index" rel=index>
    6.26 +  <link href="../default.css" rel=stylesheet type="text/css">
    6.27 +  <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    6.28 +   type="text/css">
    6.29 +
    6.30 + <body>
    6.31 +  <div class=head> <!--begin-logo-->
    6.32 +   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    6.33 +    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
    6.34 +
    6.35 +   <h1>CSS Text Decoration Module Level 3</h1>
    6.36 +
    6.37 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October
    6.38 +    2012</h2>
    6.39 +
    6.40 +   <dl>
    6.41 +    <dt>This version:
    6.42 +
    6.43 +    <dd><a
    6.44 +     href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>
    6.45 +     <!--
    6.46 +    <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20121018/">http://www.w3.org/TR/2012/WD-css3-text-20121018/</a></dd>
    6.47 +  -->
    6.48 +
    6.49 +    <dt>Latest version:
    6.50 +
    6.51 +    <dd><a
    6.52 +     href="http://www.w3.org/TR/css-text-decor-3/">http://www.w3.org/TR/css-text-decor-3/</a>
    6.53 +
    6.54 +    <dt>Latest editor's draft:
    6.55 +
    6.56 +    <dd><a
    6.57 +     href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>
    6.58 +
    6.59 +    <dt>Previous version:
    6.60 +
    6.61 +    <dd><a
    6.62 +     href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a>
    6.63 +
    6.64 +    <dt>Issues List:
    6.65 +
    6.66 +    <dd><a
    6.67 +     href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>
    6.68 +
    6.69 +    <dt>Discussion:
    6.70 +
    6.71 +    <dd><a
    6.72 +     href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
    6.73 +     with subject line “<kbd>css-text-decor-3 <var>… message topic
    6.74 +     …</var></kbd>”
    6.75 +
    6.76 +    <dt>Editors:
    6.77 +
    6.78 +    <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
    6.79 +     (Mozilla)
    6.80 +
    6.81 +    <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>
    6.82 +     (Rakuten, Inc.)
    6.83 +   </dl>
    6.84 +   <!--begin-copyright-->
    6.85 +   <p class=copyright><a
    6.86 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    6.87 +    rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
    6.88 +    title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
    6.89 +    href="http://www.csail.mit.edu/"><abbr
    6.90 +    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
    6.91 +    href="http://www.ercim.eu/"><abbr
    6.92 +    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
    6.93 +    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    6.94 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    6.95 +    <a
    6.96 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    6.97 +    and <a
    6.98 +    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    6.99 +    use</a> rules apply.</p>
   6.100 +   <!--end-copyright-->
   6.101 +   <hr title="Separator for header">
   6.102 +  </div>
   6.103 +
   6.104 +  <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   6.105 +
   6.106 +  <p>This module contains the features of CSS relating to text decoration,
   6.107 +   such as underlines, text shadows, and emphasis marks. <a
   6.108 +   href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the
   6.109 +   rendering of structured documents (such as HTML and XML) on screen, on
   6.110 +   paper, in speech, etc.
   6.111 +
   6.112 +  <h2 class="no-num no-toc" id=status>Status of this document</h2>
   6.113 +
   6.114 +  <p><em>This section describes the status of this document at the time of
   6.115 +   its publication. Other documents may supersede this document. A list of
   6.116 +   current W3C publications and the latest revision of this technical report
   6.117 +   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   6.118 +   index at http://www.w3.org/TR/.</a></em>
   6.119 +
   6.120 +  <p>Publication as a Working Draft does not imply endorsement by the W3C
   6.121 +   Membership. This is a draft document and may be updated, replaced or
   6.122 +   obsoleted by other documents at any time. It is inappropriate to cite this
   6.123 +   document as other than work in progress.
   6.124 +
   6.125 +  <p>This CSS module has been produced as a combined effort of the <a
   6.126 +   href="http://www.w3.org/International/Activity">W3C Internationalization
   6.127 +   Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style
   6.128 +   Activity</a> and is maintained by the <a
   6.129 +   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also
   6.130 +   includes contributions made by participants in the <a
   6.131 +   href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a
   6.132 +   href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).
   6.133 +
   6.134 +  <p>This document was produced by a group operating under the <a
   6.135 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   6.136 +   2004 W3C Patent Policy</a>. W3C maintains a <a
   6.137 +   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   6.138 +   rel=disclosure>public list of any patent disclosures</a> made in
   6.139 +   connection with the deliverables of the group; that page also includes
   6.140 +   instructions for disclosing a patent. An individual who has actual
   6.141 +   knowledge of a patent which the individual believes contains <a
   6.142 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   6.143 +   Claim(s)</a> must disclose the information in accordance with <a
   6.144 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6.145 +   6 of the W3C Patent Policy</a>.
   6.146 +
   6.147 +  <p><strong>Feedback on this draft should be posted to the (<a
   6.148 +   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   6.149 +   mailing list <a
   6.150 +   href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a
   6.151 +   href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
   6.152 +   <kbd>[text-decor]</kbd> in the subject line.</strong> You are strongly
   6.153 +   encouraged to complain if you see something stupid in this draft. The
   6.154 +   editors will do their best to respond to all feedback.
   6.155 +
   6.156 +  <p>The following features are at risk and may be cut from the spec during
   6.157 +   its CR period if there are no (correct) implementations:
   6.158 +
   6.159 +  <ul>
   6.160 +   <li>the ‘<a href="#text-decoration-skip"><code
   6.161 +    class=property>text-decoration-skip</code></a>’ property / ‘<code
   6.162 +    class=css>ink</code>’ value
   6.163 +  </ul>
   6.164 +
   6.165 +  <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
   6.166 +  <!--begin-toc-->
   6.167 +
   6.168 +  <ul class=toc>
   6.169 +   <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
   6.170 +    <ul class=toc>
   6.171 +     <li><a href="#placement"><span class=secno>1.1. </span> Module
   6.172 +      Interactions</a>
   6.173 +
   6.174 +     <li><a href="#values"><span class=secno>1.2. </span> Values</a>
   6.175 +
   6.176 +     <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a>
   6.177 +    </ul>
   6.178 +
   6.179 +   <li><a href="#line-decoration"><span class=secno>2. </span> Line
   6.180 +    Decoration: Underline, Overline, and Strike-Through</a>
   6.181 +    <ul class=toc>
   6.182 +     <li><a href="#text-decoration-line-property"><span class=secno>2.1.
   6.183 +      </span> Text Decoration Lines: the ‘<code
   6.184 +      class=property>text-decoration-line</code>’ property</a>
   6.185 +
   6.186 +     <li><a href="#text-decoration-color-property"><span class=secno>2.2.
   6.187 +      </span> Text Decoration Color: the ‘<code
   6.188 +      class=property>text-decoration-color</code>’ property</a>
   6.189 +
   6.190 +     <li><a href="#text-decoration-style-property"><span class=secno>2.3.
   6.191 +      </span> Text Decoration Style: the ‘<code
   6.192 +      class=property>text-decoration-style</code>’ property</a>
   6.193 +
   6.194 +     <li><a href="#text-decoration-property"><span class=secno>2.4. </span>
   6.195 +      Text Decoration Shorthand: the ‘<code
   6.196 +      class=property>text-decoration</code>’ property</a>
   6.197 +
   6.198 +     <li><a href="#text-decoration-skip-property"><span class=secno>2.5.
   6.199 +      </span> Text Decoration Line Continuity: the ‘<code
   6.200 +      class=property>text-decoration-skip</code>’ property</a>
   6.201 +
   6.202 +     <li><a href="#text-underline-position-property"><span class=secno>2.6.
   6.203 +      </span> Text Underline Position: the ‘<code
   6.204 +      class=property>text-underline-position</code>’ property</a>
   6.205 +    </ul>
   6.206 +
   6.207 +   <li><a href="#emphasis-marks"><span class=secno>3. </span> Emphasis
   6.208 +    Marks</a>
   6.209 +    <ul class=toc>
   6.210 +     <li><a href="#text-emphasis-style-property"><span class=secno>3.1.
   6.211 +      </span> Emphasis Mark Style: the ‘<code
   6.212 +      class=property>text-emphasis-style</code>’ property</a>
   6.213 +
   6.214 +     <li><a href="#text-emphasis-color-property"><span class=secno>3.2.
   6.215 +      </span> Emphasis Mark Color: the ‘<code
   6.216 +      class=property>text-emphasis-color</code>’ property</a>
   6.217 +
   6.218 +     <li><a href="#text-emphasis-property"><span class=secno>3.3. </span>
   6.219 +      Emphasis Mark Shorthand: the ‘<code
   6.220 +      class=property>text-emphasis</code>’ property</a>
   6.221 +
   6.222 +     <li><a href="#text-emphasis-position-property"><span class=secno>3.4.
   6.223 +      </span> Emphasis Mark Position: the ‘<code
   6.224 +      class=property>text-emphasis-position</code>’ property</a>
   6.225 +    </ul>
   6.226 +
   6.227 +   <li><a href="#text-shadow-property"><span class=secno>4. </span> Text
   6.228 +    Shadows: the ‘<code class=property>text-shadow</code>’ property</a>
   6.229 +
   6.230 +   <li><a href="#conformance"><span class=secno>5. </span> Conformance</a>
   6.231 +    <ul class=toc>
   6.232 +     <li><a href="#conventions"><span class=secno>5.1. </span> Document
   6.233 +      Conventions</a>
   6.234 +
   6.235 +     <li><a href="#conformance-classes"><span class=secno>5.2. </span>
   6.236 +      Conformance Classes</a>
   6.237 +
   6.238 +     <li><a href="#partial"><span class=secno>5.3. </span> Partial
   6.239 +      Implementations</a>
   6.240 +
   6.241 +     <li><a href="#experimental"><span class=secno>5.4. </span> Experimental
   6.242 +      Implementations</a>
   6.243 +
   6.244 +     <li><a href="#testing"><span class=secno>5.5. </span>Non-Experimental
   6.245 +      Implementations</a>
   6.246 +
   6.247 +     <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit
   6.248 +      Criteria</a>
   6.249 +    </ul>
   6.250 +
   6.251 +   <li class=no-num><a href="#acknowledgements"> Appendix A:
   6.252 +    Acknowledgements</a>
   6.253 +
   6.254 +   <li class=no-num><a href="#appendix-b-references">Appendix B:
   6.255 +    References</a>
   6.256 +    <ul class=toc>
   6.257 +     <li class=no-num><a href="#normative-ref">Normative references</a>
   6.258 +
   6.259 +     <li class=no-num><a href="#informative-ref">Informative references</a>
   6.260 +    </ul>
   6.261 +
   6.262 +   <li class=no-num><a href="#changes">Appendix C: Changes</a>
   6.263 +
   6.264 +   <li class=no-num><a href="#default-stylesheet"> Appendix D: Default UA
   6.265 +    Stylesheet</a>
   6.266 +  </ul>
   6.267 +  <!--end-toc-->
   6.268 +
   6.269 +  <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   6.270 +
   6.271 +  <p>[document here]
   6.272 +
   6.273 +  <p class=issue>This draft describes features that are specific to certain
   6.274 +   scripts. There is an ongoing discussion about where these features belong:
   6.275 +   in existing CSS properties, in new CSS properties, or perhaps in other
   6.276 +   specifications.
   6.277 +
   6.278 +  <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
   6.279 +
   6.280 +  <p>This module replaces and extends the text-level features defined in <a
   6.281 +   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16.
   6.282 +
   6.283 +  <h3 id=values><span class=secno>1.2. </span> Values</h3>
   6.284 +
   6.285 +  <p>This specification follows the <a
   6.286 +   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   6.287 +   definition conventions</a> from <a href="#CSS21"
   6.288 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   6.289 +   this specification are defined in CSS Level 2 Revision 1 <a
   6.290 +   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   6.291 +   modules may expand the definitions of these value types: for example <a
   6.292 +   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
   6.293 +   when combined with this module, expands the definition of the
   6.294 +   &lt;color&gt; value type as used in this specification.
   6.295 +
   6.296 +  <p>In addition to the property-specific values listed in their definitions,
   6.297 +   all properties defined in this specification also accept the <a
   6.298 +   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   6.299 +   keyword as their property value. For readability it has not been repeated
   6.300 +   explicitly.
   6.301 +
   6.302 +  <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn>
   6.303 +   keyword here computes to itself and is resolved to the value of ‘<code
   6.304 +   class=property>color</code>’ after inheritance is performed. This is so
   6.305 +   that the ‘<a href="#text-emphasis-color"><code
   6.306 +   class=property>text-emphasis-color</code></a>’ by default matches the
   6.307 +   text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color
   6.308 +   has not yet been errata'd to define it this way; currentcolor there is
   6.309 +   defined to compute to the value of ‘<code
   6.310 +   class=property>color</code>’, which gives it the wrong inheritance
   6.311 +   behavior.</span>
   6.312 +
   6.313 +  <h3 id=terms><span class=secno>1.3. </span>Terminology</h3>
   6.314 +
   6.315 +  <p>The terms <a
   6.316 +   href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn
   6.317 +   id=character>character</dfn></a>, <a
   6.318 +   href="http://www.w3.org/TR/css3-text/#letter"><dfn
   6.319 +   id=letter>letter</dfn></a>, and <a
   6.320 +   href="http://www.w3.org/TR/css3-text/#content-language"><dfn
   6.321 +   id=content-language>content language</dfn></a> as used in this
   6.322 +   specification are defined in <a href="#CSS3TEXT"
   6.323 +   rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and
   6.324 +   concepts used in this specification are defined in <a href="#CSS21"
   6.325 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a
   6.326 +   href="#CSS3-WRITING-MODES"
   6.327 +   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.
   6.328 +
   6.329 +  <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
   6.330 +   Underline, Overline, and Strike-Through</h2>
   6.331 +
   6.332 +  <p> The following properties describe line decorations that are added to
   6.333 +   the content of an element. When specified on or propagated to an inline
   6.334 +   box, that box becomes a <dfn id=decorating-box>decorating box</dfn> for
   6.335 +   that decoration, applying the decoration to all its fragments. The
   6.336 +   decoration is then further propagated to any in-flow block-level boxes
   6.337 +   that split the inline (see <a
   6.338 +   href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1
   6.339 +   section 9.2.1.1</a>). When specified on or propagated to a block container
   6.340 +   that establishes an inline formatting context, the decorations are
   6.341 +   propagated to an anonymous inline box that wraps all the in-flow
   6.342 +   inline-level children of the block container. When specified on or
   6.343 +   propagated to a ruby box, the decorations are propagated only to the ruby
   6.344 +   base. For all other box types, the decorations are propagated to all
   6.345 +   in-flow children.
   6.346 +
   6.347 +  <p class=note> Note that text decorations are not propagated to any
   6.348 +   out-of-flow descendants, nor to the contents of atomic inline-level
   6.349 +   descendants such as inline blocks and inline tables. They are also not
   6.350 +   propagated to inline children of inline boxes, although the decoration is
   6.351 +   <em>applied</em> to such boxes.
   6.352 +
   6.353 +  <p> By default underlines, overlines, and line-throughs are applied only to
   6.354 +   non-replaced inline boxes, and are drawn over all text (including white
   6.355 +   space, letter spacing, and word spacing). Atomic inlines, such as images,
   6.356 +   are not decorated. The ‘<a href="#text-decoration-skip"><code
   6.357 +   class=property>text-decoration-skip</code></a>’ property can be used to
   6.358 +   modify this behavior, for example allowing atomic inlines to be underlined
   6.359 +   or requiring that white space be skipped. Margins, borders, and padding of
   6.360 +   the <a href="#decorating-box"><i>decorating box</i></a> are always
   6.361 +   skipped.
   6.362 +
   6.363 +  <p>Relatively positioning a descendant moves all text decorations applied
   6.364 +   to it along with the descendant's text; it does not affect calculation of
   6.365 +   the decoration's initial position on that line. The ‘<code
   6.366 +   class=property>visibility</code>’ property, ‘<a
   6.367 +   href="#text-shadow"><code class=property>text-shadow</code></a>’,
   6.368 +   filters, and other graphical transformations likewise affect text
   6.369 +   decorations as part of the text they're drawn on, even if the decorations
   6.370 +   were specified on an ancestor box.
   6.371 +
   6.372 +  <div class=example>
   6.373 +   <p>In the following style sheet and document fragment:
   6.374 +
   6.375 +   <pre>
   6.376 +<!-- -->   blockquote { text-decoration: underline; color: blue; }
   6.377 +<!-- -->   em { display: block; }
   6.378 +<!-- -->   cite { color: fuchsia; }</pre>
   6.379 +
   6.380 +   <pre>
   6.381 +<!-- -->   &lt;blockquote&gt;
   6.382 +<!-- -->    &lt;p&gt;
   6.383 +<!-- -->     &lt;span&gt;
   6.384 +<!-- -->      Help, help!
   6.385 +<!-- -->      &lt;em&gt; I am under a hat! &lt;/em&gt;
   6.386 +<!-- -->
   6.387 +<!-- -->      &lt;cite&gt; —GwieF &lt;/cite&gt;
   6.388 +<!-- -->     &lt;/span&gt;
   6.389 +<!-- -->    &lt;/p&gt;
   6.390 +<!-- -->   &lt;/blockquote&gt;</pre>
   6.391 +
   6.392 +   <p>...the underlining for the blockquote element is propagated to an
   6.393 +    anonymous inline box that surrounds the span element, causing the text
   6.394 +    "Help, help!" to be blue, with the blue underlining from the anonymous
   6.395 +    inline underneath it, the color being taken from the blockquote element.
   6.396 +    The <code>&lt;em&gt;text&lt;/em&gt;</code> in the em block is also
   6.397 +    underlined, as it is in an in-flow block to which the underline is
   6.398 +    propagated. The final line of text is fuchsia, but the underline
   6.399 +    underneath it is still the blue underline from the anonymous inline
   6.400 +    element.
   6.401 +
   6.402 +   <p><img alt="Sample rendering of the above underline example"
   6.403 +    src=underline-example.png>
   6.404 +
   6.405 +   <p>This diagram shows the boxes involved in the example above. The rounded
   6.406 +    aqua line represents the anonymous inline element wrapping the inline
   6.407 +    contents of the paragraph element, the rounded blue line represents the
   6.408 +    span element, and the orange lines represent the blocks.
   6.409 +  </div>
   6.410 +
   6.411 +  <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text
   6.412 +   Decoration Lines: the ‘<a href="#text-decoration-line"><code
   6.413 +   class=property>text-decoration-line</code></a>’ property</h3>
   6.414 +
   6.415 +  <table class=propdef>
   6.416 +   <tbody>
   6.417 +    <tr>
   6.418 +     <th>Name:
   6.419 +
   6.420 +     <td><dfn id=text-decoration-line>text-decoration-line</dfn>
   6.421 +
   6.422 +    <tr>
   6.423 +     <th><a href="#values">Value</a>:
   6.424 +
   6.425 +     <td>none | [ underline || overline || line-through || blink ]
   6.426 +
   6.427 +    <tr>
   6.428 +     <th>Initial:
   6.429 +
   6.430 +     <td>none
   6.431 +
   6.432 +    <tr>
   6.433 +     <th>Applies to:
   6.434 +
   6.435 +     <td>all elements
   6.436 +
   6.437 +    <tr>
   6.438 +     <th>Inherited:
   6.439 +
   6.440 +     <td>no (but see prose)
   6.441 +
   6.442 +    <tr>
   6.443 +     <th>Percentages:
   6.444 +
   6.445 +     <td>N/A
   6.446 +
   6.447 +    <tr>
   6.448 +     <th>Media:
   6.449 +
   6.450 +     <td>visual
   6.451 +
   6.452 +    <tr>
   6.453 +     <th>Computed value:
   6.454 +
   6.455 +     <td>as specified
   6.456 +  </table>
   6.457 +
   6.458 +  <p>Specifies what line decorations, if any, are added to the element.
   6.459 +   Values have the following meanings:
   6.460 +
   6.461 +  <dl>
   6.462 +   <dt><dfn id=none title="text-decoration-line:none">‘<code
   6.463 +    class=css>none</code>’</dfn>
   6.464 +
   6.465 +   <dd>Neither produces nor inhibits text decoration.
   6.466 +
   6.467 +   <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn>
   6.468 +
   6.469 +   <dd>Each line of text is underlined.
   6.470 +
   6.471 +   <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn>
   6.472 +
   6.473 +   <dd>Each line of text has a line above it (i.e. on the opposite side from
   6.474 +    an underline).
   6.475 +
   6.476 +   <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn>
   6.477 +
   6.478 +   <dd>Each line of text has a line through the middle.
   6.479 +
   6.480 +   <dt><dfn id=blink>‘<code class=css>blink</code>’</dfn>
   6.481 +
   6.482 +   <dd> The text blinks (alternates between visible and invisible).
   6.483 +    Conforming user agents may simply not blink the text. Note that not
   6.484 +    blinking the text is one technique to satisfy <a
   6.485 +    href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint
   6.486 +    3.3 of WAI-UAAG</a>. This value is <strong>deprecated</strong> in favor
   6.487 +    of Animations <a href="#CSS3-ANIMATIONS"
   6.488 +    rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>.
   6.489 +  </dl>
   6.490 +
   6.491 +  <p> In determining the position and thickness of text decoration lines,
   6.492 +   user agents should first determine, per line, an "ideal" size and position
   6.493 +   for every fragment of a single <a href="#decorating-box"><i>decorating
   6.494 +   box</i></a>, then position the decoration as follows:
   6.495 +
   6.496 +  <dl>
   6.497 +   <dt>overlines (and <i>over</i>-positioned underlines)
   6.498 +
   6.499 +   <dd> Position the line with respect to the highest <i>over</i> content
   6.500 +    edge of the decorated fragments.
   6.501 +
   6.502 +   <dt><a href="#alphabetic"><i>alphabetic</i></a> underlines
   6.503 +
   6.504 +   <dd> Position the line to an average of the ideal underlines of the
   6.505 +    decorated fragments, ignoring any fragments with non-initial ‘<code
   6.506 +    class=property>vertical-align</code>’, but below the lowest alphabetic
   6.507 +    baseline considered.
   6.508 +
   6.509 +   <dt>non-alphabetic underlines (and <i>under</i>-positioned overlines)
   6.510 +
   6.511 +   <dd> Position the line with respect to the lowest <i>under</i> content
   6.512 +    edge of the decorated fragments.
   6.513 +
   6.514 +   <dt>line-throughs
   6.515 +
   6.516 +   <dd> For each set of decorated fragments with the same ‘<code
   6.517 +    class=property>font-size</code>’, compute an ideal position averaged
   6.518 +    from their direct contents and font metrics, ignoring any fragments with
   6.519 +    non-initial ‘<code class=property>vertical-align</code>’ and
   6.520 +    assigning them the ideal position of their parent. Position the portion
   6.521 +    of the line across each decorated fragment at the fragment's ideal
   6.522 +    position. (Essentially, this performs the same sort of averaging as for
   6.523 +    alphabetic underlines, but recomputes the position when drawing across a
   6.524 +    descendant with a different computed ‘<code
   6.525 +    class=property>font-size</code>’.) <span class=issue>Need an example
   6.526 +    here</span>
   6.527 +  </dl>
   6.528 +
   6.529 +  <div class=example>
   6.530 +   <p>The following figure shows the averaging for underline:
   6.531 +
   6.532 +   <p><img
   6.533 +    alt="In the first rendering of the underlined text '1st a'                  with 'st' as a superscript, both the '1st' and the 'a'                  are rendered in a small font. In the second rendering,                  the 'a' is rendered in a larger font. In the third, both                  '1st' and 'a' are large."
   6.534 +    height=105 src=underline-averaging.gif width=326>
   6.535 +
   6.536 +   <p>In the three fragments of underlined text, the underline is drawn
   6.537 +    consecutively lower and thicker as the ratio of large text to small text
   6.538 +    increases.
   6.539 +  </div>
   6.540 +
   6.541 +  <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text
   6.542 +   Decoration Color: the ‘<a href="#text-decoration-color"><code
   6.543 +   class=property>text-decoration-color</code></a>’ property</h3>
   6.544 +
   6.545 +  <table class=propdef>
   6.546 +   <tbody>
   6.547 +    <tr>
   6.548 +     <th>Name:
   6.549 +
   6.550 +     <td><dfn id=text-decoration-color>text-decoration-color</dfn>
   6.551 +
   6.552 +    <tr>
   6.553 +     <th><a href="#values">Value</a>:
   6.554 +
   6.555 +     <td><a href="http://www.w3.org/TR/css3-color/#color0"><span
   6.556 +      class=value-inst-color>&lt;color&gt;</span></a>
   6.557 +
   6.558 +    <tr>
   6.559 +     <th>Initial:
   6.560 +
   6.561 +     <td><a
   6.562 +      href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
   6.563 +
   6.564 +    <tr>
   6.565 +     <th>Applies to:
   6.566 +
   6.567 +     <td>all elements
   6.568 +
   6.569 +    <tr>
   6.570 +     <th>Inherited:
   6.571 +
   6.572 +     <td>no
   6.573 +
   6.574 +    <tr>
   6.575 +     <th>Percentages:
   6.576 +
   6.577 +     <td>N/A
   6.578 +
   6.579 +    <tr>
   6.580 +     <th>Media:
   6.581 +
   6.582 +     <td>visual
   6.583 +
   6.584 +    <tr>
   6.585 +     <th>Computed value:
   6.586 +
   6.587 +     <td>the computed color
   6.588 +  </table>
   6.589 +
   6.590 +  <p>This property specifies the color of text decoration (underlines
   6.591 +   overlines, and line-throughs) set on the element with ‘<a
   6.592 +   href="#text-decoration-line"><code
   6.593 +   class=property>text-decoration-line</code></a>’.
   6.594 +
   6.595 +  <p> The color of text decorations must remain the same on all decorations
   6.596 +   originating from a given element, even if descendant boxes have different
   6.597 +   specified colors.
   6.598 +
   6.599 +  <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text
   6.600 +   Decoration Style: the ‘<a href="#text-decoration-style"><code
   6.601 +   class=property>text-decoration-style</code></a>’ property</h3>
   6.602 +
   6.603 +  <table class=propdef>
   6.604 +   <tbody>
   6.605 +    <tr>
   6.606 +     <th>Name:
   6.607 +
   6.608 +     <td><dfn id=text-decoration-style>text-decoration-style</dfn>
   6.609 +
   6.610 +    <tr>
   6.611 +     <th><a href="#values">Value</a>:
   6.612 +
   6.613 +     <td>solid | double | dotted | dashed | wavy
   6.614 +
   6.615 +    <tr>
   6.616 +     <th>Initial:
   6.617 +
   6.618 +     <td>solid
   6.619 +
   6.620 +    <tr>
   6.621 +     <th>Applies to:
   6.622 +
   6.623 +     <td>all elements
   6.624 +
   6.625 +    <tr>
   6.626 +     <th>Inherited:
   6.627 +
   6.628 +     <td>no
   6.629 +
   6.630 +    <tr>
   6.631 +     <th>Percentages:
   6.632 +
   6.633 +     <td>N/A
   6.634 +
   6.635 +    <tr>
   6.636 +     <th>Media:
   6.637 +
   6.638 +     <td>visual
   6.639 +
   6.640 +    <tr>
   6.641 +     <th>Computed value:
   6.642 +
   6.643 +     <td>as specified
   6.644 +  </table>
   6.645 +
   6.646 +  <p>This property specifies the style of the line(s) drawn for text
   6.647 +   decoration specified on the element. Values have the same meaning as for
   6.648 +   the <a
   6.649 +   href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
   6.650 +   properties</a> <a href="#CSS3BG"
   6.651 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code
   6.652 +   class=css>wavy</code>’ indicates a wavy line.
   6.653 +
   6.654 +  <p> The style of text decorations must remain the same on all decorations
   6.655 +   originating from a given element, even if descendant boxes have different
   6.656 +   specified styles.
   6.657 +
   6.658 +  <h3 id=text-decoration-property><span class=secno>2.4. </span> Text
   6.659 +   Decoration Shorthand: the ‘<a href="#text-decoration"><code
   6.660 +   class=property>text-decoration</code></a>’ property</h3>
   6.661 +
   6.662 +  <table class=propdef>
   6.663 +   <tbody>
   6.664 +    <tr>
   6.665 +     <th>Name:
   6.666 +
   6.667 +     <td><dfn id=text-decoration>text-decoration</dfn>
   6.668 +
   6.669 +    <tr>
   6.670 +     <th><a href="#values">Value</a>:
   6.671 +
   6.672 +     <td><var><a
   6.673 +      href="#text-decoration-line">&lt;text-decoration-line&gt;</a></var> ||
   6.674 +      <var><a
   6.675 +      href="#text-decoration-style">&lt;text-decoration-style&gt;</a></var>
   6.676 +      || <var><a
   6.677 +      href="#text-decoration-color">&lt;text-decoration-color&gt;</a></var>
   6.678 +
   6.679 +    <tr>
   6.680 +     <th>Initial:
   6.681 +
   6.682 +     <td>none
   6.683 +
   6.684 +    <tr>
   6.685 +     <th>Applies to:
   6.686 +
   6.687 +     <td>all elements
   6.688 +
   6.689 +    <tr>
   6.690 +     <th>Inherited:
   6.691 +
   6.692 +     <td>no
   6.693 +
   6.694 +    <tr>
   6.695 +     <th>Percentages:
   6.696 +
   6.697 +     <td>N/A
   6.698 +
   6.699 +    <tr>
   6.700 +     <th>Media:
   6.701 +
   6.702 +     <td>visual
   6.703 +
   6.704 +    <tr>
   6.705 +     <th>Computed value:
   6.706 +
   6.707 +     <td>as specified
   6.708 +  </table>
   6.709 +
   6.710 +  <p>This property is a shorthand for setting ‘<a
   6.711 +   href="#text-decoration-line"><code
   6.712 +   class=property>text-decoration-line</code></a>’, ‘<a
   6.713 +   href="#text-decoration-color"><code
   6.714 +   class=property>text-decoration-color</code></a>’, and ‘<a
   6.715 +   href="#text-decoration-style"><code
   6.716 +   class=property>text-decoration-style</code></a>’ in one declaration.
   6.717 +   Omitted values are set to their initial values. A ‘<a
   6.718 +   href="#text-decoration"><code class=property>text-decoration</code></a>’
   6.719 +   declaration that omits both the ‘<a href="#text-decoration-color"><code
   6.720 +   class=property>text-decoration-color</code></a>’ and ‘<a
   6.721 +   href="#text-decoration-style"><code
   6.722 +   class=property>text-decoration-style</code></a>’ values is
   6.723 +   backwards-compatible with CSS Levels 1 and 2.
   6.724 +
   6.725 +  <div class=example>
   6.726 +   <p>The following example underlines unvisited links with a solid blue
   6.727 +    underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.
   6.728 +
   6.729 +   <pre><code class=css>
   6.730 +<!-- -->:link {
   6.731 +<!-- -->    color: blue;
   6.732 +<!-- -->    text-decoration: underline;
   6.733 +<!-- -->    text-decoration: navy dotted underline; /* <a
   6.734 +    href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
   6.735 +<!-- -->}</code></pre>
   6.736 +  </div>
   6.737 +
   6.738 +  <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
   6.739 +   Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code
   6.740 +   class=property>text-decoration-skip</code></a>’ property</h3>
   6.741 +
   6.742 +  <table class=propdef>
   6.743 +   <tbody>
   6.744 +    <tr>
   6.745 +     <th>Name:
   6.746 +
   6.747 +     <td><dfn id=text-decoration-skip>text-decoration-skip</dfn>
   6.748 +
   6.749 +    <tr>
   6.750 +     <th><a href="#values">Value</a>:
   6.751 +
   6.752 +     <td>none | [ objects || spaces || ink || edges || box-decoration ]
   6.753 +
   6.754 +    <tr>
   6.755 +     <th>Initial:
   6.756 +
   6.757 +     <td>objects
   6.758 +
   6.759 +    <tr>
   6.760 +     <th>Applies to:
   6.761 +
   6.762 +     <td>all elements
   6.763 +
   6.764 +    <tr>
   6.765 +     <th>Inherited:
   6.766 +
   6.767 +     <td>yes
   6.768 +
   6.769 +    <tr>
   6.770 +     <th>Percentages:
   6.771 +
   6.772 +     <td>N/A
   6.773 +
   6.774 +    <tr>
   6.775 +     <th>Media:
   6.776 +
   6.777 +     <td>visual
   6.778 +
   6.779 +    <tr>
   6.780 +     <th>Computed value:
   6.781 +
   6.782 +     <td>as specified
   6.783 +  </table>
   6.784 +
   6.785 +  <p>This property specifies what parts of the element's content any text
   6.786 +   decoration affecting the element must skip over. It controls all text
   6.787 +   decoration lines drawn by the element and also any text decoration lines
   6.788 +   drawn by its ancestors. Values have the following meanings:
   6.789 +
   6.790 +  <dl>
   6.791 +   <dt><dfn id=none0 title="text-decoration-skip:none">‘<code
   6.792 +    class=css>none</code>’</dfn>
   6.793 +
   6.794 +   <dd>Skip nothing: text-decoration is drawn for all text content and for
   6.795 +    inline replaced elements.
   6.796 +
   6.797 +   <dt><dfn id=objects title="text-decoration-skip:objects">‘<code
   6.798 +    class=css>objects</code>’</dfn>
   6.799 +
   6.800 +   <dd>Skip this element if it is an atomic inline (such as an image or
   6.801 +    inline-block).
   6.802 +
   6.803 +   <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code
   6.804 +    class=css>spaces</code>’</dfn>
   6.805 +
   6.806 +   <dd>Skip white space: this includes regular spaces (U+0020) and tabs
   6.807 +    (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed
   6.808 +    width spaces (such as U+2000–U+200A, U+202F and U+205F), and any
   6.809 +    adjacent letter-spacing or word-spacing.
   6.810 +
   6.811 +   <dt><dfn id=ink title="text-decoration-skip:ink">‘<code
   6.812 +    class=css>ink</code>’</dfn>
   6.813 +
   6.814 +   <dd>Skip over where glyphs are drawn: interrupt the decoration line to let
   6.815 +    text show through where the text decoration would otherwise cross over a
   6.816 +    glyph. The UA may also skip a small distance to either side of the glyph
   6.817 +    outline.
   6.818 +
   6.819 +   <dt><dfn id=edges title="text-decoration-skip:edges">‘<code
   6.820 +    class=css>edges</code>’</dfn>
   6.821 +
   6.822 +   <dd>The UA should place the start and end of the line inwards from the
   6.823 +    content edge of the <i>decorating element</i> so that, e.g. two
   6.824 +    underlined elements side-by-side do not appear to have a single
   6.825 +    underline. (This is important in Chinese, where underlining is a form of
   6.826 +    punctuation.)
   6.827 +
   6.828 +   <dt><dfn id=box-decoration
   6.829 +    title="text-decoration-skip:box-decoration">‘<code
   6.830 +    class=css>box-decoration</code>’</dfn>
   6.831 +
   6.832 +   <dd> Skip over the box's margin, border, and padding areas. Note that this
   6.833 +    only has an effect on decorations imposed by an ancestor.
   6.834 +  </dl>
   6.835 +
   6.836 +  <p class=note>Note that this property inherits and that descendant elements
   6.837 +   can have a different setting.
   6.838 +
   6.839 +  <p class=note> Note that CSS 2.1 required skipping margins, borders, and
   6.840 +   padding always. In this level, by default only the margins, borders, and
   6.841 +   padding of the <i>decorating element</i> are skipped.
   6.842 +
   6.843 +  <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
   6.844 +   Underline Position: the ‘<a href="#text-underline-position"><code
   6.845 +   class=property>text-underline-position</code></a>’ property</h3>
   6.846 +
   6.847 +  <table class=propdef>
   6.848 +   <tbody>
   6.849 +    <tr>
   6.850 +     <th>Name:
   6.851 +
   6.852 +     <td><dfn id=text-underline-position>text-underline-position</dfn>
   6.853 +
   6.854 +    <tr>
   6.855 +     <th><a href="#values">Value</a>:
   6.856 +
   6.857 +     <td>auto | alphabetic | [ below || [ left | right ] ]
   6.858 +
   6.859 +    <tr>
   6.860 +     <th>Initial:
   6.861 +
   6.862 +     <td>auto
   6.863 +
   6.864 +    <tr>
   6.865 +     <th>Applies to:
   6.866 +
   6.867 +     <td>all elements
   6.868 +
   6.869 +    <tr>
   6.870 +     <th>Inherited:
   6.871 +
   6.872 +     <td>yes
   6.873 +
   6.874 +    <tr>
   6.875 +     <th>Percentages:
   6.876 +
   6.877 +     <td>N/A
   6.878 +
   6.879 +    <tr>
   6.880 +     <th>Media:
   6.881 +
   6.882 +     <td>visual
   6.883 +
   6.884 +    <tr>
   6.885 +     <th>Computed value:
   6.886 +
   6.887 +     <td>as specified
   6.888 +  </table>
   6.889 +
   6.890 +  <p>This property sets the position of an underline specified on the same
   6.891 +   element: it does not affect underlines specified by ancestor elements.
   6.892 +   Values have the following meanings:
   6.893 +
   6.894 +  <dl>
   6.895 +   <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn>
   6.896 +
   6.897 +   <dd>The user agent may use any algorithm to determine the underline's
   6.898 +    position; however it must be placed at or below the alphabetic baseline.
   6.899 +    <p class=note>It is suggested that the underline position be ‘<a
   6.900 +     href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it
   6.901 +     crosses either subscripted (or otherwise lowered) text, or it affects
   6.902 +     characters from Asian scripts such as Han or Tibetan, for which an
   6.903 +     alphabetic underline is too high: in such cases, aligning to the em box
   6.904 +     edge as described for ‘<code class=css>below left</code>’ is more
   6.905 +     appropriate.
   6.906 +
   6.907 +   <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn>
   6.908 +
   6.909 +   <dd>The underline is positioned relative to the alphabetic baseline. In
   6.910 +    this case the underline is likely to cross some descenders.
   6.911 +    <div class=figure>
   6.912 +     <p><img
   6.913 +      alt="In a typical Latin font, the underline is positioned slightly                  below the alphabetic baseline, leaving a gap between the line                  and the bottom of most Latin letters, but crossing through                  descenders such as the stem of a 'p'."
   6.914 +      src=underline-position-alphabetic.png
   6.915 +      title="text-underline-position: alphabetic">
   6.916 +
   6.917 +     <p class=caption>‘<code class=css>text-underline-position:
   6.918 +      alphabetic</code>’
   6.919 +    </div>
   6.920 +
   6.921 +   <dt><dfn id=below>‘<code class=css>below</code>’</dfn>
   6.922 +
   6.923 +   <dd>In horizontal writing modes, the underline is positioned relative to
   6.924 +    the under edge of the element's content box. In this case the underline
   6.925 +    usually does not cross the descenders. (This is sometimes called
   6.926 +    "accounting" underline.) If the underline affects descendants with a
   6.927 +    lower content edge, the user agent should shift the underline down
   6.928 +    further to the lowest underlined content box edge. The user agent may
   6.929 +    ignore elements with ‘<code class=css>vertical-align</code>’ values
   6.930 +    given as lengths, percentages, ‘<code class=css>top</code>’, or
   6.931 +    ‘<code class=css>bottom</code>’ when making this adjustment. (Note
   6.932 +    that images that are not affected by the underline per ‘<a
   6.933 +    href="#text-decoration-skip"><code
   6.934 +    class=property>text-decoration-skip</code></a>’ will not affect the
   6.935 +    position of the underline.)
   6.936 +    <div class=figure>
   6.937 +     <p><img
   6.938 +      alt="In a typical Latin font, the underline is far enough                  below the text that it does not cross the bottom of a 'g'."
   6.939 +      src=underline-position-below.png
   6.940 +      title="text-underline-position: below">
   6.941 +
   6.942 +     <p class=caption>‘<code class=css>text-underline-position:
   6.943 +      below</code>’
   6.944 +    </div>
   6.945 +
   6.946 +    <div class=example>
   6.947 +     <p>Because ‘<a href="#text-underline-position"><code
   6.948 +      class=property>text-underline-position</code></a>’ inherits, and is
   6.949 +      not reset by the ‘<a href="#text-decoration"><code
   6.950 +      class=property>text-decoration</code></a>’ shorthand, the following
   6.951 +      example switches the document to use ‘<a href="#below"><code
   6.952 +      class=css>below</code></a>’ underlining, which can be more
   6.953 +      appropriate for writing systems with long, complicated descenders. It
   6.954 +      is also often useful for mathematical or chemical texts that use many
   6.955 +      subscripts.
   6.956 +
   6.957 +     <pre>:root { text-underline-position: below; }</pre>
   6.958 +    </div>
   6.959 +
   6.960 +   <dt><dfn id=left>‘<code class=css>left</code>’</dfn>
   6.961 +
   6.962 +   <dd>In vertical writing modes, the underline is aligned as for ‘<a
   6.963 +    href="#below"><code class=css>below</code></a>’, on the left edge of
   6.964 +    the text.
   6.965 +
   6.966 +   <dt><dfn id=right>‘<code class=css>right</code>’</dfn>
   6.967 +
   6.968 +   <dd>In vertical writing modes, the underline is aligned as for ‘<a
   6.969 +    href="#below"><code class=css>below</code></a>’, except it is aligned
   6.970 +    to the right edge of the text. If this causes the underline to be drawn
   6.971 +    on the "over" side of the text, then an overline also switches sides and
   6.972 +    is drawn on the "under" side.
   6.973 +  </dl>
   6.974 +
   6.975 +  <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified
   6.976 +   alone, ‘<a href="#left"><code class=css>left</code></a>’ is also
   6.977 +   implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a
   6.978 +   href="#right"><code class=css>right</code></a>’ is specified alone,
   6.979 +   ‘<a href="#below"><code class=css>below</code></a>’ is also implied.
   6.980 +
   6.981 +  <p class=issue> Should ‘<code class=css>above</code>’/‘<a
   6.982 +   href="#below"><code class=css>below</code></a>’ be ‘<code
   6.983 +   class=css>over</code>’/‘<code class=css>under</code>’ to match text
   6.984 +   decoration names?
   6.985 +
   6.986 +  <div class=figure id=fig-text-underline-position>
   6.987 +   <table>
   6.988 +    <tbody>
   6.989 +     <tr>
   6.990 +      <td> <img
   6.991 +       alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'                     places the underline on the left side of the text."
   6.992 +       src=underline-position-left.png title="text-underline-position: left">
   6.993 +
   6.994 +      <td> <img
   6.995 +       alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'                     places the underline on the right side of the text."
   6.996 +       src=underline-position-right.png
   6.997 +       title="text-underline-position: right">
   6.998 +
   6.999 +     <tr>
  6.1000 +      <td>‘<a href="#left"><code class=css>left</code></a>’
  6.1001 +
  6.1002 +      <td>‘<a href="#right"><code class=css>right</code></a>’
  6.1003 +   </table>
  6.1004 +
  6.1005 +   <p class=caption>In vertical writing modes, the ‘<a
  6.1006 +    href="#text-underline-position"><code
  6.1007 +    class=property>text-underline-position</code></a>’ values ‘<a
  6.1008 +    href="#left"><code class=css>left</code></a>’ and ‘<a
  6.1009 +    href="#right"><code class=css>right</code></a>’ allow placing the
  6.1010 +    underline on either side of the text. (In horizontal writing modes, both
  6.1011 +    values are treated as ‘<a href="#below"><code
  6.1012 +    class=css>below</code></a>’.)
  6.1013 +  </div>
  6.1014 +
  6.1015 +  <div class=example>
  6.1016 +   <p>The following example styles modern Chinese, Japanese, and Korean texts
  6.1017 +    with the appropriate underline positions in both horizontal and vertical
  6.1018 +    text:
  6.1019 +
  6.1020 +   <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; }
  6.1021 +<!--   -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre>
  6.1022 +  </div>
  6.1023 +
  6.1024 +  <div class=note>
  6.1025 +   <p>In some cases (such as in OpenType) the font format can offer
  6.1026 +    information about the appropriate position of an underline. Typically
  6.1027 +    this information gives the position of an ‘<a href="#alphabetic"><code
  6.1028 +    class=css>alphabetic</code></a>’ underline; in some cases (especially
  6.1029 +    in CJK fonts), it gives the position of a ‘<code class=css>below
  6.1030 +    left</code>’ underline. (In this case, the font's underline metrics
  6.1031 +    typically touch the bottom edge of the em box). The UA is encouraged to
  6.1032 +    use information (such as the underline thickness, or appropriate
  6.1033 +    alphabetic alignment) from the font wherever appropriate.
  6.1034 +  </div>
  6.1035 +
  6.1036 +  <h2 id=emphasis-marks><span class=secno>3. </span> Emphasis Marks</h2>
  6.1037 +
  6.1038 +  <p>East Asian documents traditionally use small symbols next to each glyph
  6.1039 +   to emphasize a run of text. For example:
  6.1040 +
  6.1041 +  <div class=figure>
  6.1042 +   <p> <img alt="Example of emphasis in Japanese appearing above the text"
  6.1043 +    class=example height=28 src=text-emphasis-ja.gif width=225>
  6.1044 +
  6.1045 +   <p class=caption>Accent emphasis (shown in blue for clarity) applied to
  6.1046 +    Japanese text
  6.1047 +  </div>
  6.1048 +
  6.1049 +  <h3 id=text-emphasis-style-property><span class=secno>3.1. </span> Emphasis
  6.1050 +   Mark Style: the ‘<a href="#text-emphasis-style"><code
  6.1051 +   class=property>text-emphasis-style</code></a>’ property</h3>
  6.1052 +
  6.1053 +  <table class=propdef>
  6.1054 +   <tbody>
  6.1055 +    <tr>
  6.1056 +     <th>Name:
  6.1057 +
  6.1058 +     <td><dfn id=text-emphasis-style>text-emphasis-style</dfn>
  6.1059 +
  6.1060 +    <tr>
  6.1061 +     <th><a href="#values">Value</a>:
  6.1062 +
  6.1063 +     <td>none | [ [ filled | open ] || [ dot | circle | double-circle |
  6.1064 +      triangle | sesame ] ] | <a class=noxref
  6.1065 +      href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span
  6.1066 +      class=value-inst-string>&lt;string&gt;</span></a>
  6.1067 +
  6.1068 +    <tr>
  6.1069 +     <th>Initial:
  6.1070 +
  6.1071 +     <td>none
  6.1072 +
  6.1073 +    <tr>
  6.1074 +     <th>Applies to:
  6.1075 +
  6.1076 +     <td>all elements
  6.1077 +
  6.1078 +    <tr>
  6.1079 +     <th>Inherited:
  6.1080 +
  6.1081 +     <td>yes
  6.1082 +
  6.1083 +    <tr>
  6.1084 +     <th>Percentages:
  6.1085 +
  6.1086 +     <td>N/A
  6.1087 +
  6.1088 +    <tr>
  6.1089 +     <th>Media:
  6.1090 +
  6.1091 +     <td>visual
  6.1092 +
  6.1093 +    <tr>
  6.1094 +     <th>Computed value:
  6.1095 +
  6.1096 +     <td>‘<code class=property>none</code>’, a pair of keywords
  6.1097 +      representing the shape and fill, or a string
  6.1098 +  </table>
  6.1099 +
  6.1100 +  <p>This property applies emphasis marks to the element's text. Values have
  6.1101 +   the following meanings:
  6.1102 +
  6.1103 +  <dl>
  6.1104 +   <dt><dfn id=none1 title="text-emphasis:none">‘<code
  6.1105 +    class=css>none</code>’</dfn>
  6.1106 +
  6.1107 +   <dd>No emphasis marks.
  6.1108 +
  6.1109 +   <dt><dfn id=filled title="text-emphasis:filled">‘<code
  6.1110 +    class=css>filled</code>’</dfn>
  6.1111 +
  6.1112 +   <dd>The shape is filled with solid color.
  6.1113 +
  6.1114 +   <dt><dfn id=open title="text-emphasis:open">‘<code
  6.1115 +    class=css>open</code>’</dfn>
  6.1116 +
  6.1117 +   <dd>The shape is hollow.
  6.1118 +
  6.1119 +   <dt><dfn id=dot title="text-emphasis:dot">‘<code
  6.1120 +    class=css>dot</code>’</dfn>
  6.1121 +
  6.1122 +   <dd>Display small circles as marks. The filled dot is U+2022 ‘<code
  6.1123 +    class=css>•</code>’, and the open dot is U+25E6 ‘<code
  6.1124 +    class=css>◦</code>’.
  6.1125 +
  6.1126 +   <dt><dfn id=circle title="text-emphasis:circle">‘<code
  6.1127 +    class=css>circle</code>’</dfn>
  6.1128 +
  6.1129 +   <dd>Display large circles as marks. The filled circle is U+25CF ‘<code
  6.1130 +    class=css>●</code>’, and the open circle is U+25CB ‘<code
  6.1131 +    class=css>○</code>’.
  6.1132 +
  6.1133 +   <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code
  6.1134 +    class=css>double-circle</code>’</dfn>
  6.1135 +
  6.1136 +   <dd>Display double circles as marks. The filled double-circle is U+25C9
  6.1137 +    ‘<code class=css>◉</code>’, and the open double-circle is U+25CE
  6.1138 +    ‘<code class=css>◎</code>’.
  6.1139 +
  6.1140 +   <dt><dfn id=triangle title="text-emphasis:triangle">‘<code
  6.1141 +    class=css>triangle</code>’</dfn>
  6.1142 +
  6.1143 +   <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code
  6.1144 +    class=css>▲</code>’, and the open triangle is U+25B3 ‘<code
  6.1145 +    class=css>△</code>’.
  6.1146 +
  6.1147 +   <dt><dfn id=sesame title="text-emphasis:sesame">‘<code
  6.1148 +    class=css>sesame</code>’</dfn>
  6.1149 +
  6.1150 +   <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code
  6.1151 +    class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code
  6.1152 +    class=css>﹆</code>’.
  6.1153 +
  6.1154 +   <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code
  6.1155 +    class=css><var>&lt;string&gt;</var></code>’</dfn>
  6.1156 +
  6.1157 +   <dd>Display the given string as marks. Authors should not specify more
  6.1158 +    than one <a href="#character"><i>character</i></a> in &lt;string&gt;. The
  6.1159 +    UA may truncate or ignore strings consisting of more than one grapheme
  6.1160 +    cluster.
  6.1161 +  </dl>
  6.1162 +
  6.1163 +  <p>If a shape keyword is specified but neither of ‘<code
  6.1164 +   class=css>filled</code>’ nor ‘<code class=css>open</code>’ is
  6.1165 +   specified, ‘<code class=css>filled</code>’ is assumed. If only
  6.1166 +   ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’
  6.1167 +   is specified, the shape keyword computes to ‘<code
  6.1168 +   class=css>circle</code>’ in horizontal writing mode and ‘<code
  6.1169 +   class=css>sesame</code>’ in vertical writing mode.
  6.1170 +
  6.1171 +  <p>The marks should be drawn using the element's font settings with its
  6.1172 +   size scaled down to 50%. However, not all fonts have all these glyphs, and
  6.1173 +   some fonts use inappropriate sizes for emphasis marks in these code
  6.1174 +   points. The UA may opt to use a font known to be good for emphasis marks,
  6.1175 +   or the marks may instead be synthesized by the UA. Marks must remain
  6.1176 +   upright in vertical writing modes: like CJK characters, they do not rotate
  6.1177 +   to match the writing mode.
  6.1178 +
  6.1179 +  <p class=note> One example of good fonts for emphasis marks is Adobe's
  6.1180 +   opensource project, <a
  6.1181 +   href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic
  6.1182 +   OpenType Font</a>, which is specially designed for the emphasis marks.
  6.1183 +
  6.1184 +  <p>The marks are drawn once for each <a
  6.1185 +   href="#character"><i>character</i></a>. However, emphasis marks are not
  6.1186 +   drawn for characters that are:
  6.1187 +
  6.1188 +  <ul>
  6.1189 +   <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word
  6.1190 +    separators</a> or that belong to the Unicode separator classes (Z*). (But
  6.1191 +    note that emphasis marks <em>are</em> drawn for a space that combines
  6.1192 +    with any combining characters.)
  6.1193 +
  6.1194 +   <li>Characters belonging to the Unicode classes for control codes and
  6.1195 +    unassigned characters (Cc, Cf, Cn).
  6.1196 +  </ul>
  6.1197 +
  6.1198 +  <p>If emphasis marks are drawn for characters for which ruby is drawn in
  6.1199 +   the same position as the emphasis mark, the ruby should be stacked between
  6.1200 +   the emphasis marks and the base text. In this case, the position of the
  6.1201 +   emphasis marks for a given element should be determined as if all
  6.1202 +   characters have ruby boxes of the same height as the highest ruby box in
  6.1203 +   the element. If the UA is not capable of drawing ruby and emphasis marks
  6.1204 +   on the same side, the UA may hide ruby and draw only emphasis marks.
  6.1205 +
  6.1206 +  <div class=figure>
  6.1207 +   <p><img
  6.1208 +    alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them"
  6.1209 +    height=50 src=text-emphasis-ruby.png width=134>
  6.1210 +
  6.1211 +   <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of
  6.1212 +    them
  6.1213 +  </div>
  6.1214 +
  6.1215 +  <p class=note>A future level of CSS may define controls to specify what to
  6.1216 +   do when emphasis marks and ruby text coincide.
  6.1217 +
  6.1218 +  <h3 id=text-emphasis-color-property><span class=secno>3.2. </span> Emphasis
  6.1219 +   Mark Color: the ‘<a href="#text-emphasis-color"><code
  6.1220 +   class=property>text-emphasis-color</code></a>’ property</h3>
  6.1221 +
  6.1222 +  <table class=propdef>
  6.1223 +   <tbody>
  6.1224 +    <tr>
  6.1225 +     <th>Name:
  6.1226 +
  6.1227 +     <td><dfn id=text-emphasis-color>text-emphasis-color</dfn>
  6.1228 +
  6.1229 +    <tr>
  6.1230 +     <th><a href="#values">Value</a>:
  6.1231 +
  6.1232 +     <td>&lt;color&gt;
  6.1233 +
  6.1234 +    <tr>
  6.1235 +     <th>Initial:
  6.1236 +
  6.1237 +     <td><a
  6.1238 +      href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
  6.1239 +
  6.1240 +    <tr>
  6.1241 +     <th>Applies to:
  6.1242 +
  6.1243 +     <td>all elements
  6.1244 +
  6.1245 +    <tr>
  6.1246 +     <th>Inherited:
  6.1247 +
  6.1248 +     <td>yes
  6.1249 +
  6.1250 +    <tr>
  6.1251 +     <th>Percentages:
  6.1252 +
  6.1253 +     <td>N/A
  6.1254 +
  6.1255 +    <tr>
  6.1256 +     <th>Media:
  6.1257 +
  6.1258 +     <td>visual
  6.1259 +
  6.1260 +    <tr>
  6.1261 +     <th>Computed value:
  6.1262 +
  6.1263 +     <td>as specified
  6.1264 +  </table>
  6.1265 +
  6.1266 +  <p>This property specifies the foreground color of the emphasis marks.
  6.1267 +
  6.1268 +  <p class=note> The correct behavior of this property depends on an
  6.1269 +   outstanding erratum on <a href="#CSS3COLOR"
  6.1270 +   rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a
  6.1271 +   href="#currentcolor"><code class=css>currentColor</code></a>’ keyword
  6.1272 +   inherit as itself, and to take the value of the ‘<code
  6.1273 +   class=property>color</code>’ property as its <em>used</em> (not
  6.1274 +   computed) value.
  6.1275 +
  6.1276 +  <h3 id=text-emphasis-property><span class=secno>3.3. </span> Emphasis Mark
  6.1277 +   Shorthand: the ‘<a href="#text-emphasis"><code
  6.1278 +   class=property>text-emphasis</code></a>’ property</h3>
  6.1279 +
  6.1280 +  <table class=propdef>
  6.1281 +   <tbody>
  6.1282 +    <tr>
  6.1283 +     <th>Name:
  6.1284 +
  6.1285 +     <td><dfn id=text-emphasis>text-emphasis</dfn>
  6.1286 +
  6.1287 +    <tr>
  6.1288 +     <th><a href="#values">Value</a>:
  6.1289 +
  6.1290 +     <td>‘<code class=css>&lt;<a
  6.1291 +      href="#text-emphasis-style">text-emphasis-style</a>&gt;</code>’ ||
  6.1292 +      ‘<code class=css>&lt;<a
  6.1293 +      href="#text-emphasis-color">text-emphasis-color</a>&gt;</code>’
  6.1294 +
  6.1295 +    <tr>
  6.1296 +     <th>Initial:
  6.1297 +
  6.1298 +     <td>see individual properties
  6.1299 +
  6.1300 +    <tr>
  6.1301 +     <th>Applies to:
  6.1302 +
  6.1303 +     <td>all elements
  6.1304 +
  6.1305 +    <tr>
  6.1306 +     <th>Inherited:
  6.1307 +
  6.1308 +     <td>yes
  6.1309 +
  6.1310 +    <tr>
  6.1311 +     <th>Percentages:
  6.1312 +
  6.1313 +     <td>N/A
  6.1314 +
  6.1315 +    <tr>
  6.1316 +     <th>Media:
  6.1317 +
  6.1318 +     <td>visual
  6.1319 +
  6.1320 +    <tr>
  6.1321 +     <th>Computed value:
  6.1322 +
  6.1323 +     <td>see individual properties
  6.1324 +  </table>
  6.1325 +
  6.1326 +  <p>This property is a shorthand for setting ‘<a
  6.1327 +   href="#text-emphasis-style"><code
  6.1328 +   class=property>text-emphasis-style</code></a>’ and ‘<a
  6.1329 +   href="#text-emphasis-color"><code
  6.1330 +   class=property>text-emphasis-color</code></a>’ in one declaration.
  6.1331 +   Omitted values are set to their initial values.
  6.1332 +
  6.1333 +  <p class=note>Note that ‘<a href="#text-emphasis-position"><code
  6.1334 +   class=property>text-emphasis-position</code></a>’ is not reset in this
  6.1335 +   shorthand. This is because typically the shape and color vary, but the
  6.1336 +   position is consistent for a particular language throughout the document.
  6.1337 +   Therefore the position should inherit independently.
  6.1338 +
  6.1339 +  <h3 id=text-emphasis-position-property><span class=secno>3.4. </span>
  6.1340 +   Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code
  6.1341 +   class=property>text-emphasis-position</code></a>’ property</h3>
  6.1342 +
  6.1343 +  <table class=propdef>
  6.1344 +   <tbody>
  6.1345 +    <tr>
  6.1346 +     <th>Name:
  6.1347 +
  6.1348 +     <td><dfn id=text-emphasis-position>text-emphasis-position</dfn>
  6.1349 +
  6.1350 +    <tr>
  6.1351 +     <th><a href="#values">Value</a>:
  6.1352 +
  6.1353 +     <td>[ above | below ] && [ right | left ]
  6.1354 +
  6.1355 +    <tr>
  6.1356 +     <th>Initial:
  6.1357 +
  6.1358 +     <td>above right
  6.1359 +
  6.1360 +    <tr>
  6.1361 +     <th>Applies to:
  6.1362 +
  6.1363 +     <td>all elements
  6.1364 +
  6.1365 +    <tr>
  6.1366 +     <th>Inherited:
  6.1367 +
  6.1368 +     <td>yes
  6.1369 +
  6.1370 +    <tr>
  6.1371 +     <th>Percentages:
  6.1372 +
  6.1373 +     <td>N/A
  6.1374 +
  6.1375 +    <tr>
  6.1376 +     <th>Media:
  6.1377 +
  6.1378 +     <td>visual
  6.1379 +
  6.1380 +    <tr>
  6.1381 +     <th>Computed value:
  6.1382 +
  6.1383 +     <td>as specified
  6.1384 +  </table>
  6.1385 +
  6.1386 +  <p>This property describes where emphasis marks are drawn at. The values
  6.1387 +   have following meanings:
  6.1388 +
  6.1389 +  <dl>
  6.1390 +   <dt><dfn id=above title="text-emphasis:above">‘<code
  6.1391 +    class=css>above</code>’</dfn>
  6.1392 +
  6.1393 +   <dd>Draw marks over the text in horizontal writing mode.
  6.1394 +
  6.1395 +   <dt><dfn id=below0 title="text-emphasis:below">‘<code
  6.1396 +    class=css>below</code>’</dfn>
  6.1397 +
  6.1398 +   <dd>Draw marks under the text in horizontal writing mode.
  6.1399 +
  6.1400 +   <dt><dfn id=right0 title="text-emphasis:right">‘<code
  6.1401 +    class=css>right</code>’</dfn>
  6.1402 +
  6.1403 +   <dd>Draw marks to the right of the text in vertical writing mode.
  6.1404 +
  6.1405 +   <dt><dfn id=left0 title="text-emphasis:left">‘<code
  6.1406 +    class=css>left</code>’</dfn>
  6.1407 +
  6.1408 +   <dd>Draw marks to the left of the text in vertical writing mode.
  6.1409 +  </dl>
  6.1410 +
  6.1411 +  <p class=issue> Should ‘<code class=css>above</code>’/‘<a
  6.1412 +   href="#below"><code class=css>below</code></a>’ be ‘<code
  6.1413 +   class=css>over</code>’/‘<code class=css>under</code>’ to match text
  6.1414 +   decoration names?
  6.1415 +
  6.1416 +  <p>Emphasis marks are drawn exactly as if each character was assigned the
  6.1417 +   mark as its ruby annotation text with the ruby position given by ‘<a
  6.1418 +   href="#text-emphasis-position"><code
  6.1419 +   class=property>text-emphasis-position</code></a>’ and the ruby alignment
  6.1420 +   as centered.
  6.1421 +
  6.1422 +  <p>The effect of emphasis marks on the line height is the same as for ruby
  6.1423 +   text.
  6.1424 +
  6.1425 +  <div class=note>
  6.1426 +   <p>Note, the preferred position of emphasis marks depends on the language.
  6.1427 +    In Japanese for example, the preferred position is ‘<code
  6.1428 +    class=css>above right</code>’. In Chinese, on the other hand, the
  6.1429 +    preferred position is ‘<code class=css>below right</code>’. The
  6.1430 +    informative table below summarizes the preferred emphasis mark positions
  6.1431 +    for Chinese and Japanese:
  6.1432 +
  6.1433 +   <table class=data>
  6.1434 +    <caption>Preferred emphasis mark and ruby position</caption>
  6.1435 +
  6.1436 +    <thead>
  6.1437 +     <tr>
  6.1438 +      <th rowspan=2 scope=col>Language
  6.1439 +
  6.1440 +      <th colspan=2 scope=col>Preferred mark position
  6.1441 +
  6.1442 +      <th colspan=2 rowspan=2 scope=col>Illustration
  6.1443 +
  6.1444 +     <tr>
  6.1445 +      <th>Horizontal
  6.1446 +
  6.1447 +      <th>Vertical
  6.1448 +
  6.1449 +    <tbody>
  6.1450 +     <tr>
  6.1451 +      <td scope=row>Japanese
  6.1452 +
  6.1453 +      <td>above
  6.1454 +
  6.1455 +      <td>right
  6.1456 +
  6.1457 +      <td> <img
  6.1458 +       alt="Emphasis marks appear above each emphasized character in horizontal Japanese text."
  6.1459 +       height=28 src=text-emphasis-ja.gif
  6.1460 +       title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
  6.1461 +       width=225>
  6.1462 +
  6.1463 +      <td rowspan=2> <img
  6.1464 +       alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
  6.1465 +       height=89 src=text-emphasis-v.gif
  6.1466 +       title="Emphasis applied on the right of a fragment of Japanese text"
  6.1467 +       width=34> <!--
  6.1468 +        <tr>
  6.1469 +          <td scope="row">Mongolian
  6.1470 +          <td><span class="issue">?</span>
  6.1471 +          <td>right
  6.1472 +        -->
  6.1473 +
  6.1474 +     <tr>
  6.1475 +      <td scope=row>Chinese
  6.1476 +
  6.1477 +      <td>below
  6.1478 +
  6.1479 +      <td>right
  6.1480 +
  6.1481 +      <td> <img
  6.1482 +       alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
  6.1483 +       height=28 src=text-emphasis-zh.gif
  6.1484 +       title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
  6.1485 +       width=133>
  6.1486 +   </table>
  6.1487 +  </div>
  6.1488 +
  6.1489 +  <h2 id=text-shadow-property><span class=secno>4. </span> Text Shadows: the
  6.1490 +   ‘<a href="#text-shadow"><code class=property>text-shadow</code></a>’
  6.1491 +   property</h2>
  6.1492 +
  6.1493 +  <table class=propdef>
  6.1494 +   <tbody>
  6.1495 +    <tr>
  6.1496 +     <th>Name:
  6.1497 +
  6.1498 +     <td><dfn id=text-shadow>text-shadow</dfn>
  6.1499 +
  6.1500 +    <tr>
  6.1501 +     <th><a href="#values">Value</a>:
  6.1502 +
  6.1503 +     <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
  6.1504 +
  6.1505 +    <tr>
  6.1506 +     <th>Initial:
  6.1507 +
  6.1508 +     <td>none
  6.1509 +
  6.1510 +    <tr>
  6.1511 +     <th>Applies to:
  6.1512 +
  6.1513 +     <td>all elements
  6.1514 +
  6.1515 +    <tr>
  6.1516 +     <th>Inherited:
  6.1517 +
  6.1518 +     <td>yes
  6.1519 +
  6.1520 +    <tr>
  6.1521 +     <th>Percentages:
  6.1522 +
  6.1523 +     <td>N/A
  6.1524 +
  6.1525 +    <tr>
  6.1526 +     <th>Media:
  6.1527 +
  6.1528 +     <td>visual
  6.1529 +
  6.1530 +    <tr>
  6.1531 +     <th>Computed value:
  6.1532 +
  6.1533 +     <td>a color plus three absolute &lt;length&gt;s
  6.1534 +  </table>
  6.1535 +
  6.1536 +  <p>This property accepts a comma-separated list of shadow effects to be
  6.1537 +   applied to the text of the element. Values are interpreted as for <a
  6.1538 +   href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code
  6.1539 +   class=property>box-shadow</code>’</a> <a href="#CSS3BG"
  6.1540 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread
  6.1541 +   values are not allowed.) The shadow is applied to all of the element's
  6.1542 +   text as well as any text decorations it specifies.
  6.1543 +
  6.1544 +  <p>The shadow effects are applied front-to-back: the first shadow is on
  6.1545 +   top. The shadows may thus overlay each other, but they never overlay the
  6.1546 +   text itself. The shadow must be painted at a stack level between the
  6.1547 +   element's border and/or background, if present, and the elements text and
  6.1548 +   text decoration. UAs should avoid painting text shadows over text in
  6.1549 +   adjacent elements belonging to the same stack level and stacking context.
  6.1550 +   (This may mean that the exact stack level of the shadows depends on
  6.1551 +   whether the element has a border or background: the exact stacking
  6.1552 +   behavior of text shadows is thus UA-defined.)
  6.1553 +
  6.1554 +  <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are
  6.1555 +   not clipped to the shadowed shape and may show through if the text is
  6.1556 +   partially-transparent. Like ‘<code class=property>box-shadow</code>’,
  6.1557 +   text shadows do not influence layout, and do not trigger scrolling or
  6.1558 +   increase the size of the scrollable area.
  6.1559 +
  6.1560 +  <p class=note>The painting order of shadows defined here is the opposite of
  6.1561 +   that defined in the 1998 <a
  6.1562 +   href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2
  6.1563 +   Recommendation</a>.
  6.1564 +
  6.1565 +  <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’
  6.1566 +   property applies to both the <code>::first-line</code> and
  6.1567 +   <code>::first-letter</code> pseudo-elements.
  6.1568 +
  6.1569 +  <h2 id=conformance><span class=secno>5. </span> Conformance</h2>
  6.1570 +
  6.1571 +  <h3 id=conventions><span class=secno>5.1. </span> Document Conventions</h3>
  6.1572 +
  6.1573 +  <p>Conformance requirements are expressed with a combination of descriptive
  6.1574 +   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
  6.1575 +   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
  6.1576 +   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
  6.1577 +   normative parts of this document are to be interpreted as described in RFC
  6.1578 +   2119. However, for readability, these words do not appear in all uppercase
  6.1579 +   letters in this specification.
  6.1580 +
  6.1581 +  <p>All of the text of this specification is normative except sections
  6.1582 +   explicitly marked as non-normative, examples, and notes. <a
  6.1583 +   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
  6.1584 +
  6.1585 +  <p>Examples in this specification are introduced with the words “for
  6.1586 +   example” or are set apart from the normative text with
  6.1587 +   <code>class="example"</code>, like this:
  6.1588 +
  6.1589 +  <div class=example>
  6.1590 +   <p>This is an example of an informative example.
  6.1591 +  </div>
  6.1592 +
  6.1593 +  <p>Informative notes begin with the word “Note” and are set apart from
  6.1594 +   the normative text with <code>class="note"</code>, like this:
  6.1595 +
  6.1596 +  <p class=note>Note, this is an informative note.
  6.1597 +
  6.1598 +  <h3 id=conformance-classes><span class=secno>5.2. </span> Conformance
  6.1599 +   Classes</h3>
  6.1600 +
  6.1601 +  <p>Conformance to CSS Text Level 3 is defined for three conformance
  6.1602 +   classes:
  6.1603 +
  6.1604 +  <dl>
  6.1605 +   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
  6.1606 +    sheet</dfn>
  6.1607 +
  6.1608 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  6.1609 +    style sheet</a>.
  6.1610 +
  6.1611 +   <dt><dfn id=renderer>renderer</dfn>
  6.1612 +
  6.1613 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  6.1614 +    that interprets the semantics of a style sheet and renders documents that
  6.1615 +    use them.
  6.1616 +
  6.1617 +   <dt><dfn id=authoring-tool>authoring tool</dfn>
  6.1618 +
  6.1619 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  6.1620 +    that writes a style sheet.
  6.1621 +  </dl>
  6.1622 +
  6.1623 +  <p>A style sheet is conformant to CSS Text Level 3 if all of its
  6.1624 +   declarations that use properties defined in this module have values that
  6.1625 +   are valid according to the generic CSS grammar and the individual grammars
  6.1626 +   of each property as given in this module.
  6.1627 +
  6.1628 +  <p>A renderer is conformant to CSS Text Level 3 if, in addition to
  6.1629 +   interpreting the style sheet as defined by the appropriate specifications,
  6.1630 +   it supports all the features defined by CSS Text Level 3 by parsing them
  6.1631 +   correctly and rendering the document accordingly. However, the inability
  6.1632 +   of a UA to correctly render a document due to limitations of the device
  6.1633 +   does not make the UA non-conformant. (For example, a UA is not required to
  6.1634 +   render color on a monochrome monitor.)
  6.1635 +
  6.1636 +  <p>An authoring tool is conformant to CSS Text Level 3 if it writes style
  6.1637 +   sheets that are syntactically correct according to the generic CSS grammar
  6.1638 +   and the individual grammars of each feature in this module, and meet all
  6.1639 +   other conformance requirements of style sheets as described in this
  6.1640 +   module.
  6.1641 +
  6.1642 +  <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>
  6.1643 +
  6.1644 +  <p>So that authors can exploit the forward-compatible parsing rules to
  6.1645 +   assign fallback values, CSS renderers <strong>must</strong> treat as
  6.1646 +   invalid (and <a
  6.1647 +   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
  6.1648 +   appropriate</a>) any at-rules, properties, property values, keywords, and
  6.1649 +   other syntactic constructs for which they have no usable level of support.
  6.1650 +   In particular, user agents <strong>must not</strong> selectively ignore
  6.1651 +   unsupported component values and honor supported values in a single
  6.1652 +   multi-value property declaration: if any value is considered invalid (as
  6.1653 +   unsupported values must be), CSS requires that the entire declaration be
  6.1654 +   ignored.
  6.1655 +
  6.1656 +  <h3 id=experimental><span class=secno>5.4. </span> Experimental
  6.1657 +   Implementations</h3>
  6.1658 +
  6.1659 +  <p>To avoid clashes with future CSS features, the CSS2.1 specification
  6.1660 +   reserves a <a
  6.1661 +   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  6.1662 +   syntax</a> for proprietary and experimental extensions to CSS.
  6.1663 +
  6.1664 +  <p>Prior to a specification reaching the Candidate Recommendation stage in
  6.1665 +   the W3C process, all implementations of a CSS feature are considered
  6.1666 +   experimental. The CSS Working Group recommends that implementations use a
  6.1667 +   vendor-prefixed syntax for such features, including those in W3C Working
  6.1668 +   Drafts. This avoids incompatibilities with future changes in the draft.
  6.1669 +
  6.1670 +  <h3 id=testing><span class=secno>5.5. </span>Non-Experimental
  6.1671 +   Implementations</h3>
  6.1672 +
  6.1673 +  <p>Once a specification reaches the Candidate Recommendation stage,
  6.1674 +   non-experimental implementations are possible, and implementors should
  6.1675 +   release an unprefixed implementation of any CR-level feature they can
  6.1676 +   demonstrate to be correctly implemented according to spec.
  6.1677 +
  6.1678 +  <p>To establish and maintain the interoperability of CSS across
  6.1679 +   implementations, the CSS Working Group requests that non-experimental CSS
  6.1680 +   renderers submit an implementation report (and, if necessary, the
  6.1681 +   testcases used for that implementation report) to the W3C before releasing
  6.1682 +   an unprefixed implementation of any CSS features. Testcases submitted to
  6.1683 +   W3C are subject to review and correction by the CSS Working Group.
  6.1684 +
  6.1685 +  <p>Further information on submitting testcases and implementation reports
  6.1686 +   can be found from on the CSS Working Group's website at <a
  6.1687 +   href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  6.1688 +   Questions should be directed to the <a
  6.1689 +   href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  6.1690 +   mailing list.
  6.1691 +
  6.1692 +  <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>
  6.1693 +
  6.1694 +  <p> For this specification to be advanced to Proposed Recommendation, there
  6.1695 +   must be at least two independent, interoperable implementations of each
  6.1696 +   feature. Each feature may be implemented by a different set of products,
  6.1697 +   there is no requirement that all features be implemented by a single
  6.1698 +   product. For the purposes of this criterion, we define the following
  6.1699 +   terms:
  6.1700 +
  6.1701 +  <dl>
  6.1702 +   <dt>independent
  6.1703 +
  6.1704 +   <dd>each implementation must be developed by a different party and cannot
  6.1705 +    share, reuse, or derive from code used by another qualifying
  6.1706 +    implementation. Sections of code that have no bearing on the
  6.1707 +    implementation of this specification are exempt from this requirement.
  6.1708 +
  6.1709 +   <dt>interoperable
  6.1710 +
  6.1711 +   <dd>passing the respective test case(s) in the official CSS test suite,
  6.1712 +    or, if the implementation is not a Web browser, an equivalent test. Every
  6.1713 +    relevant test in the test suite should have an equivalent test created if
  6.1714 +    such a user agent (UA) is to be used to claim interoperability. In
  6.1715 +    addition if such a UA is to be used to claim interoperability, then there
  6.1716 +    must one or more additional UAs which can also pass those equivalent
  6.1717 +    tests in the same way for the purpose of interoperability. The equivalent
  6.1718 +    tests must be made publicly available for the purposes of peer review.
  6.1719 +
  6.1720 +   <dt>implementation
  6.1721 +
  6.1722 +   <dd>a user agent which:
  6.1723 +    <ol class=inline>
  6.1724 +     <li>implements the specification.
  6.1725 +
  6.1726 +     <li>is available to the general public. The implementation may be a
  6.1727 +      shipping product or other publicly available version (i.e., beta
  6.1728 +      version, preview release, or “nightly build”). Non-shipping product
  6.1729 +      releases must have implemented the feature(s) for a period of at least
  6.1730 +      one month in order to demonstrate stability.
  6.1731 +
  6.1732 +     <li>is not experimental (i.e., a version specifically designed to pass
  6.1733 +      the test suite and is not intended for normal usage going forward).
  6.1734 +    </ol>
  6.1735 +  </dl>
  6.1736 +
  6.1737 +  <p>The specification will remain Candidate Recommendation for at least six
  6.1738 +   months.
  6.1739 +
  6.1740 +  <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2>
  6.1741 +
  6.1742 +  <p>This specification would not have been possible without the help from:
  6.1743 +   Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
  6.1744 +   Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye
  6.1745 +   Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
  6.1746 +   Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
  6.1747 +   Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley,
  6.1748 +   Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao
  6.1749 +   Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi
  6.1750 +   Yabe and Steve Zilles.
  6.1751 +
  6.1752 +  <h2 class=no-num id=appendix-b-references>Appendix B: References</h2>
  6.1753 +
  6.1754 +  <h3 class=no-num id=normative-ref>Normative references</h3>
  6.1755 +  <!--begin-normative-->
  6.1756 +  <!-- Sorted by label -->
  6.1757 +
  6.1758 +  <dl class=bibliography>
  6.1759 +   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  6.1760 +    <!---->
  6.1761 +
  6.1762 +   <dt id=CSS21>[CSS21]
  6.1763 +
  6.1764 +   <dd>Bert Bos; et al. <a
  6.1765 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
  6.1766 +    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
  6.1767 +    2011. W3C Recommendation. URL: <a
  6.1768 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
  6.1769 +   </dd>
  6.1770 +   <!---->
  6.1771 +
  6.1772 +   <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
  6.1773 +
  6.1774 +   <dd>Elika J. Etemad; Koji Ishii. <a
  6.1775 +    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS
  6.1776 +    Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft.
  6.1777 +    (Work in progress.) URL: <a
  6.1778 +    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a>
  6.1779 +   </dd>
  6.1780 +   <!---->
  6.1781 +
  6.1782 +   <dt id=CSS3BG>[CSS3BG]
  6.1783 +
  6.1784 +   <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
  6.1785 +    href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
  6.1786 +    Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
  6.1787 +    Candidate Recommendation. (Work in progress.) URL: <a
  6.1788 +    href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
  6.1789 +   </dd>
  6.1790 +   <!---->
  6.1791 +
  6.1792 +   <dt id=CSS3TEXT>[CSS3TEXT]
  6.1793 +
  6.1794 +   <dd>Elika J. Etemad; Koji Ishii. <a
  6.1795 +    href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text
  6.1796 +    Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in
  6.1797 +    progress.) URL: <a
  6.1798 +    href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a>
  6.1799 +   </dd>
  6.1800 +   <!---->
  6.1801 +
  6.1802 +   <dt id=RFC2119>[RFC2119]
  6.1803 +
  6.1804 +   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
  6.1805 +    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
  6.1806 +    RFC 2119. URL: <a
  6.1807 +    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
  6.1808 +   </dd>
  6.1809 +   <!---->
  6.1810 +  </dl>
  6.1811 +  <!--end-normative-->
  6.1812 +
  6.1813 +  <h3 class=no-num id=informative-ref>Informative references</h3>
  6.1814 +  <!--begin-informative-->
  6.1815 +  <!-- Sorted by label -->
  6.1816 +
  6.1817 +  <dl class=bibliography>
  6.1818 +   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  6.1819 +    <!---->
  6.1820 +
  6.1821 +   <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]
  6.1822 +
  6.1823 +   <dd>Dean Jackson; et al. <a
  6.1824 +    href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS
  6.1825 +    Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in
  6.1826 +    progress.) URL: <a
  6.1827 +    href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a>
  6.1828 +   </dd>
  6.1829 +   <!---->
  6.1830 +
  6.1831 +   <dt id=CSS3COLOR>[CSS3COLOR]
  6.1832 +
  6.1833 +   <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
  6.1834 +    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
  6.1835 +    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
  6.1836 +    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
  6.1837 +   </dd>
  6.1838 +   <!---->
  6.1839 +  </dl>
  6.1840 +  <!--end-informative-->
  6.1841 +
  6.1842 +  <h2 class=no-num id=changes>Appendix C: Changes</h2>
  6.1843 +
  6.1844 +  <h2 class=no-num id=default-stylesheet> Appendix D: Default UA Stylesheet</h2>
  6.1845 +
  6.1846 +  <p> This appendix is informative, and is to help UA developers to implement
  6.1847 +   default stylesheet, but UA developers are free to ignore or change.
  6.1848 +
  6.1849 +  <div class=example>
  6.1850 +   <pre><code class=css>
  6.1851 +<!-- -->s, strike, del {
  6.1852 +<!-- -->  text-decoration: line-through;
  6.1853 +<!-- -->}
  6.1854 +<!-- -->
  6.1855 +<!-- -->u, ins, :link, :visited {
  6.1856 +<!-- -->  text-decoration: underline;
  6.1857 +<!-- -->}
  6.1858 +<!-- -->
  6.1859 +<!-- -->abbr[title], acronym[title] {
  6.1860 +<!-- -->  text-decoration: dotted underline;
  6.1861 +<!-- -->}
  6.1862 +<!-- -->
  6.1863 +<!-- -->/* disable inheritance of text-emphasis marks to ruby text:
  6.1864 +<!-- -->  emphasis marks should only apply to base text */
  6.1865 +<!-- -->rt { text-emphasis: none; }
  6.1866 +<!-- -->
  6.1867 +<!-- -->:root:lang(zh), [lang|=zh] {
  6.1868 +<!-- -->/* default emphasis mark position is 'below right' for Chinese */
  6.1869 +<!-- -->  text-emphasis-position: below right;
  6.1870 +<!-- -->}
  6.1871 +<!-- -->
  6.1872 +<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {
  6.1873 +<!-- -->/* default underline position is 'below right' for Japanese and Korean */
  6.1874 +<!-- -->  text-underline-position: below right;
  6.1875 +<!-- -->}
  6.1876 +<!-- -->
  6.1877 +<!-- -->:root:lang(zh), [lang|=zh] {
  6.1878 +<!-- -->/* default underline position is 'below left' for Chinese */
  6.1879 +<!-- -->  text-underline-position: below left;
  6.1880 +<!-- -->}
  6.1881 +<!-- -->
  6.1882 +<!-- -->blink {
  6.1883 +<!-- -->  text-decoration-line: blink;
  6.1884 +<!-- -->}
  6.1885 +</code></pre>
  6.1886 +  </div>
  6.1887 +
  6.1888 +  <p class=issue> If you find any issues, recommendations to add, or
  6.1889 +   corrections, please send the information to <a
  6.1890 +   href="mailto:www-style@w3.org">www-style@w3.org</a> with
  6.1891 +   <kbd>[css3-text-decor]</kbd> in the subject line.
  6.1892 +
  6.1893 +  <div class=example>
  6.1894 +   <p> While ‘<code class=css>text-decoration-line: blink</code>’ can't
  6.1895 +    be fully reproduced with other existing properties, authors can achieve a
  6.1896 +    very similar effect with the following CSS:
  6.1897 +
  6.1898 +   <pre>
  6.1899 +<!-- -->@keyframes blink {
  6.1900 +<!-- -->  0% {
  6.1901 +<!-- -->    visibility: hidden;
  6.1902 +<!-- -->    animation-timing-function: step-end;
  6.1903 +<!-- -->  }
  6.1904 +<!-- -->  25%, 100% {
  6.1905 +<!-- -->    visibility: visible;
  6.1906 +<!-- -->  }
  6.1907 +<!-- -->}
  6.1908 +<!-- -->blink {
  6.1909 +<!-- -->  animation: blink 1s infinite;
  6.1910 +<!-- -->}</pre>
  6.1911 +  </div>
     7.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     7.2 +++ b/css-text-decor-3/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
     7.3 @@ -0,0 +1,1338 @@
     7.4 +<!DOCTYPE html>
     7.5 +<html lang="en">
     7.6 +<head>
     7.7 +  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     7.8 +  <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title>
     7.9 +  <link rel=contents href="#contents">
    7.10 +  <link rel=index href="#index">
    7.11 +  <link rel="stylesheet" type="text/css" href="../default.css">
    7.12 +  <link rel="stylesheet" type="text/css"
    7.13 +        href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
    7.14 +
    7.15 +</head>
    7.16 +
    7.17 +<div class="head">
    7.18 +<!--logo-->
    7.19 +
    7.20 +<h1>CSS Text Decoration Module Level 3</h1>
    7.21 +
    7.22 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
    7.23 +<dl>
    7.24 +  <dt>This version:</dt>
    7.25 +  
    7.26 +    <dd><a href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>
    7.27 +  <!--
    7.28 +    <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/</a></dd>
    7.29 +  -->
    7.30 +
    7.31 +  <dt>Latest version:</dt>
    7.32 +    <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd>
    7.33 +
    7.34 +  <dt>Latest editor's draft:</dt>
    7.35 +    <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd>
    7.36 +  
    7.37 +  <dt>Previous version:</dt>
    7.38 +    <dd><a
    7.39 +      href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a>
    7.40 +
    7.41 +  <dt>Issues List:</dt>
    7.42 +    <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>
    7.43 +
    7.44 +  <dt>Discussion:</dt>
    7.45 +    <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[SHORTNAME] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
    7.46 +
    7.47 +  <dt>Editors:</dt>
    7.48 +    <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd>
    7.49 +    <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd>
    7.50 +</dl>
    7.51 +
    7.52 +<!--copyright-->
    7.53 +
    7.54 +<hr title="Separator for header">
    7.55 +</div>
    7.56 +
    7.57 +<h2 class="no-num no-toc" id="abstract">Abstract</h2>
    7.58 +
    7.59 +  <p>This module contains the features of CSS relating to
    7.60 +  text decoration, such as underlines, text shadows, and emphasis marks.
    7.61 +  <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing
    7.62 +  the rendering of structured documents (such as HTML and XML) on screen, on
    7.63 +  paper, in speech, etc.
    7.64 +
    7.65 +<h2 class="no-num no-toc" id="status">Status of this document</h2>
    7.66 +
    7.67 +
    7.68 +  <p><em>This section describes the status of this document at the time of
    7.69 +   its publication. Other documents may supersede this document. A list of
    7.70 +   current W3C publications and the latest revision of this technical report
    7.71 +   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
    7.72 +   index at http://www.w3.org/TR/.</a></em>
    7.73 +
    7.74 +  <p>Publication as a Working Draft does not imply endorsement by the W3C
    7.75 +   Membership. This is a draft document and may be updated, replaced or
    7.76 +   obsoleted by other documents at any time. It is inappropriate to cite this
    7.77 +   document as other than work in progress.
    7.78 +
    7.79 +  <p>This CSS module has been produced as a combined effort of the <a
    7.80 +    href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>,
    7.81 +    and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained
    7.82 +    by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also
    7.83 +    includes contributions made by participants in the <a
    7.84 +    href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a
    7.85 +    href="http://cgi.w3.org/MemberAccess/AccessRequest">members
    7.86 +    only</a>).
    7.87 +
    7.88 +  <p>This document was produced by a group operating under the <a
    7.89 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
    7.90 +   2004 W3C Patent Policy</a>. W3C maintains a <a
    7.91 +   href="http://www.w3.org/2004/01/pp-impl/32061/status"
    7.92 +   rel=disclosure>public list of any patent disclosures</a> made in
    7.93 +   connection with the deliverables of the group; that page also includes
    7.94 +   instructions for disclosing a patent. An individual who has actual
    7.95 +   knowledge of a patent which the individual believes contains <a
    7.96 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    7.97 +   Claim(s)</a> must disclose the information in accordance with <a
    7.98 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
    7.99 +   6 of the W3C Patent Policy</a>.</p>
   7.100 +
   7.101 +  <p><strong>Feedback on this draft should be posted to the
   7.102 +    (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
   7.103 +    public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong>
   7.104 +    (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
   7.105 +    <kbd>[text-decor]</kbd> in the subject line.</strong>
   7.106 +    You are strongly encouraged to complain if you see something stupid
   7.107 +    in this draft. The editors will do their best to respond to all feedback.</p>
   7.108 +    
   7.109 +  <p>The following features are at risk and may be cut from the spec during
   7.110 +    its CR period if there are no (correct) implementations:</p>
   7.111 +    <ul>
   7.112 +      <li>the 'text-decoration-skip' property / ''ink'' value
   7.113 +    </ul>
   7.114 +
   7.115 +<h2 class="no-num no-toc" id="contents">
   7.116 +Table of Contents</h2>
   7.117 +
   7.118 +<!--toc-->
   7.119 +
   7.120 +<h2 id="intro">
   7.121 +Introduction</h2>
   7.122 +
   7.123 +  <p>[document here]</p>
   7.124 +
   7.125 +  <p class="issue">This draft describes features that are specific to certain scripts.
   7.126 +  There is an ongoing discussion about where these features belong: in
   7.127 +  existing CSS properties, in new CSS properties, or perhaps in other
   7.128 +  specifications.
   7.129 +
   7.130 +
   7.131 +<h3 id="placement">
   7.132 +Module Interactions</h3>
   7.133 +
   7.134 +  <p>This module replaces and extends the text-level
   7.135 +  features defined in [[!CSS21]] chapter 16.
   7.136 +
   7.137 +<h3 id="values">
   7.138 +Values</h3>
   7.139 +
   7.140 +  <p>This specification follows the
   7.141 +  <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   7.142 +  definition conventions</a> from [[!CSS21]]. Value types not defined in
   7.143 +  this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
   7.144 +  Other CSS modules may expand the definitions of these value types: for
   7.145 +  example [[CSS3COLOR]], when combined with this module, expands the
   7.146 +  definition of the &lt;color&gt; value type as used in this specification.</p>
   7.147 +
   7.148 +  <p>In addition to the property-specific values listed in their definitions,
   7.149 +  all properties defined in this specification also accept the
   7.150 +  <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   7.151 +  keyword as their property value. For readability it has not been repeated
   7.152 +  explicitly.
   7.153 +
   7.154 +  <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is
   7.155 +  resolved to the value of 'color' after inheritance is performed. This is
   7.156 +  so that the 'text-emphasis-color' by default matches the text 'color'.
   7.157 +  <span class="issue">CSS3 Color has not yet been errata'd to define it this way;
   7.158 +  currentcolor there is defined to compute to the value of 'color',
   7.159 +  which gives it the wrong inheritance behavior.</span>
   7.160 +
   7.161 +<h3 id="terms">Terminology</h3>
   7.162 +
   7.163 +  <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>,
   7.164 +    <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and
   7.165 +    <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a>
   7.166 +    as used in this specification are defined in [[!CSS3TEXT]].
   7.167 +    Other terminology and concepts used in this specification are defined
   7.168 +    in [[!CSS21]] and [[!CSS3-WRITING-MODES]].
   7.169 +
   7.170 +<h2 id="line-decoration">
   7.171 +Line Decoration: Underline, Overline, and Strike-Through</h2>
   7.172 +
   7.173 +  <p>
   7.174 +    The following properties describe line decorations that are added to the content of an element. 
   7.175 +    When specified on or propagated to an inline box, 
   7.176 +    that box becomes a <dfn>decorating box</dfn> for that decoration,
   7.177 +    applying the decoration to all its fragments.
   7.178 +    The decoration is then further propagated to any in-flow block-level boxes that split the inline
   7.179 +    (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>).
   7.180 +    When specified on or propagated to a block container that establishes an inline formatting context, 
   7.181 +    the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. 
   7.182 +    When specified on or propagated to a ruby box, 
   7.183 +    the decorations are propagated only to the ruby base.
   7.184 +    For all other box types, 
   7.185 +    the decorations are propagated to all in-flow children.
   7.186 +
   7.187 +  <p class="note">
   7.188 +    Note that text decorations are not propagated to any out-of-flow descendants, 
   7.189 +    nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
   7.190 +    They are also not propagated to inline children of inline boxes,
   7.191 +    although the decoration is <em>applied</em> to such boxes.
   7.192 +
   7.193 +  <p>
   7.194 +    By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
   7.195 +    and are drawn over all text (including white space, letter spacing, and word spacing).
   7.196 +    Atomic inlines, such as images, are not decorated.
   7.197 +    The 'text-decoration-skip' property can be used to modify this behavior, 
   7.198 +    for example allowing atomic inlines to be underlined 
   7.199 +    or requiring that white space be skipped.
   7.200 +    Margins, borders, and padding of the <i>decorating box</i> are always skipped. 
   7.201 +
   7.202 +  <p>Relatively positioning a descendant moves all text decorations
   7.203 +    applied to it along with the descendant's text; it does not affect
   7.204 +    calculation of the decoration's initial position on that line.
   7.205 +    The 'visibility' property, 'text-shadow', filters, and other graphical transformations
   7.206 +    likewise affect text decorations as part of the text they're drawn on,
   7.207 +    even if the decorations were specified on an ancestor box.
   7.208 +
   7.209 +  <div class="example">
   7.210 +    <p>In the following style sheet and document fragment:</p>
   7.211 +    <pre>
   7.212 +<!-- -->   blockquote { text-decoration: underline; color: blue; }
   7.213 +<!-- -->   em { display: block; }
   7.214 +<!-- -->   cite { color: fuchsia; }</pre>
   7.215 +    <pre>
   7.216 +<!-- -->   &lt;blockquote&gt;
   7.217 +<!-- -->    &lt;p&gt;
   7.218 +<!-- -->     &lt;span&gt;
   7.219 +<!-- -->      Help, help!
   7.220 +<!-- -->      &lt;em&gt; I am under a hat! &lt;/em&gt;
   7.221 +<!-- -->
   7.222 +<!-- -->      &lt;cite&gt; &mdash;GwieF &lt;/cite&gt;
   7.223 +<!-- -->     &lt;/span&gt;
   7.224 +<!-- -->    &lt;/p&gt;
   7.225 +<!-- -->   &lt;/blockquote&gt;</pre>
   7.226 +    <p>...the underlining for the blockquote element is propagated to an
   7.227 +    anonymous inline box that surrounds the span element, causing
   7.228 +    the text "Help, help!" to be blue, with the blue underlining from
   7.229 +    the anonymous inline underneath it, the color being taken from the
   7.230 +    blockquote element. The <code>&lt;em&gt;text&lt;/em&gt;</code>
   7.231 +    in the em block is also underlined, as it is in an in-flow block to
   7.232 +    which the underline is propagated. The final line of text is fuchsia,
   7.233 +    but the underline underneath it is still the blue underline from the
   7.234 +    anonymous inline element.</p>
   7.235 +    <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p>
   7.236 +    <p>This diagram shows the boxes involved in the example above. The
   7.237 +    rounded aqua line represents the anonymous inline element wrapping
   7.238 +    the inline contents of the paragraph element, the rounded blue line
   7.239 +    represents the span element, and the orange lines represent the
   7.240 +    blocks.</p>
   7.241 +  </div>
   7.242 +
   7.243 +<h3 id="text-decoration-line-property">
   7.244 +Text Decoration Lines: the 'text-decoration-line' property</h3>
   7.245 +
   7.246 +  <table class="propdef">
   7.247 +    <tr>
   7.248 +      <th>Name:
   7.249 +      <td><dfn>text-decoration-line</dfn>
   7.250 +    <tr>
   7.251 +      <th><a href="#values">Value</a>:
   7.252 +      <td>none | [ underline || overline || line-through || blink ]
   7.253 +
   7.254 +    <tr>
   7.255 +      <th>Initial:
   7.256 +      <td>none
   7.257 +    <tr>
   7.258 +      <th>Applies to:
   7.259 +      <td>all elements
   7.260 +    <tr>
   7.261 +      <th>Inherited:
   7.262 +      <td>no (but see prose)
   7.263 +    <tr>
   7.264 +      <th>Percentages:
   7.265 +      <td>N/A
   7.266 +    <tr>
   7.267 +      <th>Media:
   7.268 +      <td>visual
   7.269 +    <tr>
   7.270 +      <th>Computed&#160;value:
   7.271 +      <td>as specified
   7.272 +  </table>
   7.273 +
   7.274 +  <p>Specifies what line decorations, if any, are added to the element.
   7.275 +    Values have the following meanings:</p>
   7.276 +
   7.277 +  <dl>
   7.278 +    <dt><dfn title="text-decoration-line:none">''none''</dfn>
   7.279 +      <dd>Neither produces nor inhibits text decoration.
   7.280 +    <dt><dfn>''underline''</dfn>
   7.281 +      <dd>Each line of text is underlined.
   7.282 +    <dt><dfn>''overline''</dfn>
   7.283 +      <dd>Each line of text has a line above it (i.e. on the opposite
   7.284 +      side from an underline).
   7.285 +    <dt><dfn>''line-through''</dfn>
   7.286 +      <dd>Each line of text has a line through the middle.
   7.287 +    <dt><dfn>''blink''</dfn>
   7.288 +      <dd>
   7.289 +        The text blinks (alternates between visible and invisible).
   7.290 +        Conforming user agents may simply not blink the text. 
   7.291 +        Note that not blinking the text is one technique to satisfy <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.
   7.292 +        This value is <strong>deprecated</strong> in favor of Animations [[CSS3-ANIMATIONS]].
   7.293 +  </dl>
   7.294 +
   7.295 +  <p>
   7.296 +    In determining the position and thickness of text decoration lines,
   7.297 +    user agents should first determine, per line,
   7.298 +    an "ideal" size and position for every fragment of a single <i>decorating box</i>,
   7.299 +    then position the decoration as follows:
   7.300 +
   7.301 +  <dl>
   7.302 +    <dt>overlines (and <i>over</i>-positioned underlines)
   7.303 +    <dd>
   7.304 +      Position the line with respect to the highest <i>over</i> content edge of the decorated fragments.
   7.305 +
   7.306 +    <dt><i>alphabetic</i> underlines
   7.307 +    <dd>
   7.308 +      Position the line to an average of the ideal underlines of the decorated fragments,
   7.309 +      ignoring any fragments with non-initial 'vertical-align',
   7.310 +      but below the lowest alphabetic baseline considered.
   7.311 +
   7.312 +    <dt>non-alphabetic underlines (and <i>under</i>-positioned overlines)
   7.313 +    <dd>
   7.314 +      Position the line with respect to the lowest <i>under</i> content edge of the decorated fragments.
   7.315 +
   7.316 +    <dt>line-throughs
   7.317 +    <dd>
   7.318 +      For each set of decorated fragments with the same 'font-size', 
   7.319 +      compute an ideal position averaged from their direct contents and font metrics,
   7.320 +      ignoring any fragments with non-initial 'vertical-align' and assigning them the ideal position of their parent.
   7.321 +      Position the portion of the line across each decorated fragment at the fragment's ideal position.
   7.322 +      (Essentially, this performs the same sort of averaging as for alphabetic underlines,
   7.323 +      but recomputes the position when drawing across a descendant with a different computed 'font-size'.)
   7.324 +      <span class="issue">Need an example here</span>
   7.325 +  </dl>
   7.326 +
   7.327 +  <div class="example">
   7.328 +    <p>The following figure shows the averaging for underline:
   7.329 +    <p><img alt="In the first rendering of the underlined text '1st a'
   7.330 +                 with 'st' as a superscript, both the '1st' and the 'a'
   7.331 +                 are rendered in a small font. In the second rendering,
   7.332 +                 the 'a' is rendered in a larger font. In the third, both
   7.333 +                 '1st' and 'a' are large."
   7.334 +            height="105" src="underline-averaging.gif" width="326">
   7.335 +    <p>In the three fragments of underlined text, the underline is drawn
   7.336 +      consecutively lower and thicker as the ratio of large text to small
   7.337 +      text increases.</p>
   7.338 +  </div>
   7.339 +
   7.340 +<h3 id="text-decoration-color-property">
   7.341 +Text Decoration Color: the 'text-decoration-color' property</h3>
   7.342 +
   7.343 +  <table class="propdef">
   7.344 +    <tr>
   7.345 +      <th>Name:
   7.346 +      <td><dfn>text-decoration-color</dfn>
   7.347 +    <tr>
   7.348 +      <th><a href="#values">Value</a>:
   7.349 +      <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color">&lt;color&gt;</span></a>
   7.350 +
   7.351 +    <tr>
   7.352 +      <th>Initial:
   7.353 +      <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
   7.354 +    <tr>
   7.355 +      <th>Applies to:
   7.356 +      <td>all elements
   7.357 +    <tr>
   7.358 +      <th>Inherited:
   7.359 +      <td>no
   7.360 +    <tr>
   7.361 +      <th>Percentages:
   7.362 +      <td>N/A
   7.363 +    <tr>
   7.364 +      <th>Media:
   7.365 +      <td>visual
   7.366 +    <tr>
   7.367 +      <th>Computed&#160;value:
   7.368 +      <td>the computed color
   7.369 +  </table>
   7.370 +
   7.371 +  <p>This property specifies the color of text decoration (underlines
   7.372 +    overlines, and line-throughs) set on the element with
   7.373 +    'text-decoration-line'.</p>
   7.374 +
   7.375 +  <p>
   7.376 +    The color of text decorations must remain the same on all decorations originating from a given element,
   7.377 +    even if descendant boxes have different specified colors.
   7.378 +
   7.379 +<h3 id="text-decoration-style-property">
   7.380 +Text Decoration Style: the 'text-decoration-style' property</h3>
   7.381 +
   7.382 +  <table class="propdef">
   7.383 +    <tr>
   7.384 +      <th>Name:
   7.385 +      <td><dfn>text-decoration-style</dfn>
   7.386 +    <tr>
   7.387 +      <th><a href="#values">Value</a>:
   7.388 +      <td>solid | double | dotted | dashed | wavy
   7.389 +
   7.390 +    <tr>
   7.391 +      <th>Initial:
   7.392 +      <td>solid
   7.393 +    <tr>
   7.394 +      <th>Applies to:
   7.395 +      <td>all elements
   7.396 +    <tr>
   7.397 +      <th>Inherited:
   7.398 +      <td>no
   7.399 +    <tr>
   7.400 +      <th>Percentages:
   7.401 +      <td>N/A
   7.402 +    <tr>
   7.403 +      <th>Media:
   7.404 +      <td>visual
   7.405 +    <tr>
   7.406 +      <th>Computed&#160;value:
   7.407 +      <td>as specified
   7.408 +  </table>
   7.409 +
   7.410 +  <p>This property specifies the style of the line(s) drawn for
   7.411 +    text decoration specified on the element. Values have the
   7.412 +    same meaning as for the
   7.413 +    <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
   7.414 +    properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p>
   7.415 +
   7.416 +  <p>
   7.417 +    The style of text decorations must remain the same on all decorations originating from a given element,
   7.418 +    even if descendant boxes have different specified styles.
   7.419 +
   7.420 +<h3 id="text-decoration-property">
   7.421 +Text Decoration Shorthand: the 'text-decoration' property</h3>
   7.422 +
   7.423 +  <table class="propdef">
   7.424 +    <tr>
   7.425 +      <th>Name:
   7.426 +      <td><dfn>text-decoration</dfn>
   7.427 +    <tr>
   7.428 +      <th><a href="#values">Value</a>:
   7.429 +      <td><var><a href="#text-decoration-line">&lt;text-decoration-line&gt;</a></var> ||
   7.430 +          <var><a href="#text-decoration-style">&lt;text-decoration-style&gt;</a></var> ||
   7.431 +          <var><a href="#text-decoration-color">&lt;text-decoration-color&gt;</a></var>
   7.432 +
   7.433 +    <tr>
   7.434 +      <th>Initial:
   7.435 +      <td>none
   7.436 +    <tr>
   7.437 +      <th>Applies to:
   7.438 +      <td>all elements
   7.439 +    <tr>
   7.440 +      <th>Inherited:
   7.441 +      <td>no
   7.442 +    <tr>
   7.443 +      <th>Percentages:
   7.444 +      <td>N/A
   7.445 +    <tr>
   7.446 +      <th>Media:
   7.447 +      <td>visual
   7.448 +    <tr>
   7.449 +      <th>Computed&#160;value:
   7.450 +      <td>as specified
   7.451 +  </table>
   7.452 +
   7.453 +  <p>This property is a shorthand for setting 'text-decoration-line',
   7.454 +    'text-decoration-color', and 'text-decoration-style' in one declaration.
   7.455 +    Omitted values are set to their initial values. A 'text-decoration'
   7.456 +    declaration that omits both the 'text-decoration-color'
   7.457 +    and 'text-decoration-style' values is backwards-compatible
   7.458 +    with CSS Levels 1 and 2.</p>
   7.459 +
   7.460 +  <div class="example">
   7.461 +    <p>The following example underlines unvisited links with a solid blue
   7.462 +    underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p>
   7.463 +
   7.464 +    <pre><code class="css">
   7.465 +<!-- -->:link {
   7.466 +<!-- -->    color: blue;
   7.467 +<!-- -->    text-decoration: underline;
   7.468 +<!-- -->    text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
   7.469 +<!-- -->}</code></pre>
   7.470 +  </div>
   7.471 +
   7.472 +<h3 id="text-decoration-skip-property">
   7.473 +Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>
   7.474 +
   7.475 +  <table class="propdef">
   7.476 +    <tr>
   7.477 +      <th>Name:
   7.478 +      <td><dfn>text-decoration-skip</dfn>
   7.479 +    <tr>
   7.480 +      <th><a href="#values">Value</a>:
   7.481 +      <td>none | [ objects || spaces || ink || edges || box-decoration ]
   7.482 +
   7.483 +    <tr>
   7.484 +      <th>Initial:
   7.485 +      <td>objects
   7.486 +    <tr>
   7.487 +      <th>Applies to:
   7.488 +      <td>all elements
   7.489 +    <tr>
   7.490 +      <th>Inherited:
   7.491 +      <td>yes
   7.492 +    <tr>
   7.493 +      <th>Percentages:
   7.494 +      <td>N/A
   7.495 +    <tr>
   7.496 +      <th>Media:
   7.497 +      <td>visual
   7.498 +    <tr>
   7.499 +      <th>Computed&#160;value:
   7.500 +      <td>as specified
   7.501 +  </table>
   7.502 +
   7.503 +  <p>This property specifies what parts of the element's content
   7.504 +    any text decoration affecting the element must skip over. It
   7.505 +    controls all text decoration lines drawn by the element
   7.506 +    and also any text decoration lines drawn by its ancestors.
   7.507 +    Values have the following meanings:</p>
   7.508 +
   7.509 +  <dl>
   7.510 +    <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt>
   7.511 +    <dd>Skip nothing: text-decoration is drawn for all text content
   7.512 +      and for inline replaced elements.</dd>
   7.513 +    <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt>
   7.514 +    <dd>Skip this element if it is an atomic inline (such as an
   7.515 +      image or inline-block).</dd>
   7.516 +    <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt>
   7.517 +    <dd>Skip white space: this includes regular spaces (U+0020) and
   7.518 +      tabs (U+0009), as well as nbsp (U+00A0), ideographic space
   7.519 +      (U+3000), all fixed width spaces (such as U+2000&ndash;U+200A,
   7.520 +      U+202F and U+205F), and any adjacent letter-spacing or
   7.521 +      word-spacing.</dd>
   7.522 +    <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt>
   7.523 +    <dd>Skip over where glyphs are drawn: interrupt the decoration
   7.524 +      line to let text show through where the text decoration would
   7.525 +      otherwise cross over a glyph. The UA may also skip a small
   7.526 +      distance to either side of the glyph outline.</dd>
   7.527 +    <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt>
   7.528 +    <dd>The UA should place the start and end of the line inwards from
   7.529 +      the content edge of the <i>decorating element</i> so that, e.g. two
   7.530 +      underlined elements side-by-side do not appear to have a single
   7.531 +      underline. (This is important in Chinese, where underlining is a
   7.532 +      form of punctuation.)</dd>
   7.533 +    <dt><dfn title="text-decoration-skip:box-decoration">''box-decoration''</dfn>
   7.534 +    <dd>
   7.535 +      Skip over the box's margin, border, and padding areas.
   7.536 +      Note that this only has an effect on decorations imposed by an ancestor.
   7.537 +  </dl>
   7.538 +
   7.539 +  <p class="note">Note that this property inherits and that descendant
   7.540 +    elements can have a different setting.</p>
   7.541 +
   7.542 +  <p class='note'>
   7.543 +    Note that CSS 2.1 required skipping margins, borders, and padding always.
   7.544 +    In this level, by default only the margins, borders, and padding of the <i>decorating element</i> are skipped.
   7.545 +
   7.546 +<h3 id="text-underline-position-property">
   7.547 +Text Underline Position: the 'text-underline-position' property</h3>
   7.548 +
   7.549 +  <table class="propdef">
   7.550 +    <tr>
   7.551 +      <th>Name:
   7.552 +      <td><dfn>text-underline-position</dfn>
   7.553 +    <tr>
   7.554 +      <th><a href="#values">Value</a>:
   7.555 +      <td>auto | alphabetic | [ below || [ left | right ] ]
   7.556 +
   7.557 +    <tr>
   7.558 +      <th>Initial:
   7.559 +      <td>auto
   7.560 +    <tr>
   7.561 +      <th>Applies to:
   7.562 +      <td>all elements
   7.563 +    <tr>
   7.564 +      <th>Inherited:
   7.565 +      <td>yes
   7.566 +    <tr>
   7.567 +      <th>Percentages:
   7.568 +      <td>N/A
   7.569 +    <tr>
   7.570 +      <th>Media:
   7.571 +      <td>visual
   7.572 +    <tr>
   7.573 +      <th>Computed&#160;value:
   7.574 +      <td>as specified
   7.575 +  </table>
   7.576 +
   7.577 +  <p>This property sets the position of an underline specified
   7.578 +    on the same element: it does not affect underlines specified by
   7.579 +    ancestor elements. Values have the following meanings:</p>
   7.580 +
   7.581 +  <dl>
   7.582 +    <dt><dfn>''auto''</dfn></dt>
   7.583 +    <dd>The user agent may use any algorithm to determine the
   7.584 +      underline's position; however it must be placed at or below
   7.585 +      the alphabetic baseline.
   7.586 +      <p class="note">It is suggested that the underline position
   7.587 +      be ''alphabetic'' unless it crosses either subscripted (or
   7.588 +      otherwise lowered) text, or it affects characters from Asian
   7.589 +      scripts such as Han or Tibetan, for which an alphabetic
   7.590 +      underline is too high: in such cases, aligning to the em box
   7.591 +      edge as described for ''below left'' is more appropriate.
   7.592 +    <dt><dfn>''alphabetic''</dfn></dt>
   7.593 +    <dd>The underline is positioned relative to the alphabetic baseline. In
   7.594 +      this case the underline is likely to cross some descenders.
   7.595 +      <div class="figure">
   7.596 +        <p><img title="text-underline-position: alphabetic"
   7.597 +            alt="In a typical Latin font, the underline is positioned slightly
   7.598 +                 below the alphabetic baseline, leaving a gap between the line
   7.599 +                 and the bottom of most Latin letters, but crossing through
   7.600 +                 descenders such as the stem of a 'p'."
   7.601 +            src="underline-position-alphabetic.png"
   7.602 +            >
   7.603 +        <p class="caption">''text-underline-position: alphabetic''</p>
   7.604 +      </div>
   7.605 +    <dt><dfn>''below''</dfn></dt>
   7.606 +    <dd>In horizontal writing modes, the underline is positioned
   7.607 +      relative to the under edge of the element's content box.
   7.608 +      In this case the underline usually does not cross the descenders.
   7.609 +      (This is sometimes called "accounting" underline.)
   7.610 +      If the underline affects descendants with a lower content edge,
   7.611 +      the user agent should shift the underline down further to the
   7.612 +      lowest underlined content box edge.
   7.613 +      The user agent may ignore elements with ''vertical-align''
   7.614 +      values given as lengths, percentages, ''top'', or ''bottom''
   7.615 +      when making this adjustment.
   7.616 +      (Note that images that are not affected by the underline per
   7.617 +      'text-decoration-skip' will not affect the position of the
   7.618 +      underline.)
   7.619 +      <div class="figure">
   7.620 +        <p><img title="text-underline-position: below"
   7.621 +            alt="In a typical Latin font, the underline is far enough
   7.622 +                 below the text that it does not cross the bottom of a 'g'."
   7.623 +            src="underline-position-below.png"
   7.624 +            >
   7.625 +        <p class="caption">''text-underline-position: below''</p>
   7.626 +      </div>
   7.627 +      <div class="example">
   7.628 +        <p>Because 'text-underline-position' inherits, and is not reset
   7.629 +          by the 'text-decoration' shorthand, the following example
   7.630 +          switches the document to use ''below'' underlining, which can
   7.631 +          be more appropriate for writing systems  with long, complicated
   7.632 +          descenders. It is also often useful for mathematical or chemical
   7.633 +          texts that use many subscripts.
   7.634 +        <pre>:root { text-underline-position: below; }</pre>
   7.635 +      </div>
   7.636 +    <dt><dfn>''left''</dfn></dt>
   7.637 +    <dd>In vertical writing modes, the underline is aligned as for
   7.638 +      ''below'', on the left edge of the text.</dd>
   7.639 +    <dt><dfn>''right''</dfn></dt>
   7.640 +    <dd>In vertical writing modes, the underline is aligned as for
   7.641 +      ''below'', except it is aligned to the right edge of the text.
   7.642 +      If this causes the underline to be drawn on the "over" side of
   7.643 +      the text, then an overline also switches sides and is drawn on
   7.644 +      the "under" side.</dd>
   7.645 +  </dl>
   7.646 +
   7.647 +  <p>If ''below'' is specified alone, ''left'' is also implied.
   7.648 +    If ''left'' or ''right'' is specified alone, ''below'' is also
   7.649 +    implied.
   7.650 +
   7.651 +  <p class="issue">
   7.652 +  Should ''above''/''below'' be ''over''/''under'' to match text decoration names?
   7.653 +
   7.654 +  <div class="figure" id="fig-text-underline-position">
   7.655 +    <table>
   7.656 +      <tr>
   7.657 +        <td>
   7.658 +          <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'
   7.659 +                    places the underline on the left side of the text."
   7.660 +            title="text-underline-position: left"
   7.661 +            src="underline-position-left.png"
   7.662 +            >
   7.663 +
   7.664 +        <td>
   7.665 +          <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'
   7.666 +                    places the underline on the right side of the text."
   7.667 +            title="text-underline-position: right"
   7.668 +            src="underline-position-right.png"
   7.669 +            >
   7.670 +
   7.671 +      <tr>
   7.672 +        <td>''left''
   7.673 +        <td>''right''
   7.674 +    </table>
   7.675 +    <p class="caption">In vertical writing modes, the 'text-underline-position'
   7.676 +      values ''left'' and ''right'' allow placing the underline on either
   7.677 +      side of the text. (In horizontal writing modes, both values are
   7.678 +      treated as ''below''.)</p>
   7.679 +  </div>
   7.680 +
   7.681 +  <div class="example">
   7.682 +    <p>The following example styles modern Chinese, Japanese, and Korean
   7.683 +      texts with the appropriate underline positions in both horizontal
   7.684 +      and vertical text:
   7.685 +    <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; }
   7.686 +<!--   -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre>
   7.687 +  </div>
   7.688 +
   7.689 +  <div class="note">
   7.690 +    <p>In some cases (such as in OpenType) the font format can offer
   7.691 +      information about the appropriate position of an underline.
   7.692 +      Typically this information gives the position of an ''alphabetic''
   7.693 +      underline; in some cases (especially in CJK fonts), it gives
   7.694 +      the position of a ''below left'' underline. (In this case,
   7.695 +      the font's underline metrics typically touch the bottom edge
   7.696 +      of the em box).
   7.697 +      The UA is encouraged to use information (such as the underline
   7.698 +      thickness, or appropriate alphabetic alignment) from the font
   7.699 +      wherever appropriate.
   7.700 +    </p>
   7.701 +  </div>
   7.702 +
   7.703 +<h2 id="emphasis-marks">
   7.704 +Emphasis Marks</h2>
   7.705 +
   7.706 +  <p>East Asian documents traditionally use small symbols next to each glyph to emphasize
   7.707 +    a run of text. For example:</p>
   7.708 +
   7.709 +  <div class="figure">
   7.710 +    <p>
   7.711 +      <img alt="Example of emphasis in Japanese appearing above the text"
   7.712 +           class="example" src="text-emphasis-ja.gif" height="28" width="225"></p>
   7.713 +    <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p>
   7.714 +  </div>
   7.715 +
   7.716 +<h3 id="text-emphasis-style-property">
   7.717 +Emphasis Mark Style: the 'text-emphasis-style' property</h3>
   7.718 +
   7.719 +  <table class="propdef">
   7.720 +    <tr>
   7.721 +      <th>Name:
   7.722 +      <td><dfn>text-emphasis-style</dfn>
   7.723 +    <tr>
   7.724 +      <th><a href="#values">Value</a>:
   7.725 +      <td>none |
   7.726 +          [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] |
   7.727 +          <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string">&lt;string&gt;</span></a>
   7.728 +
   7.729 +    <tr>
   7.730 +      <th>Initial:
   7.731 +      <td>none
   7.732 +    <tr>
   7.733 +      <th>Applies to:
   7.734 +      <td>all elements
   7.735 +    <tr>
   7.736 +      <th>Inherited:
   7.737 +      <td>yes
   7.738 +    <tr>
   7.739 +      <th>Percentages:
   7.740 +      <td>N/A
   7.741 +    <tr>
   7.742 +      <th>Media:
   7.743 +      <td>visual
   7.744 +    <tr>
   7.745 +      <th>Computed&#160;value:
   7.746 +      <td>'none', a pair of keywords representing the shape and fill, or
   7.747 +        a string
   7.748 +  </table>
   7.749 +
   7.750 +  <p>This property applies emphasis marks to the element's text.
   7.751 +    Values have the following meanings:</p>
   7.752 +
   7.753 +  <dl>
   7.754 +    <dt><dfn title="text-emphasis:none">''none''</dfn></dt>
   7.755 +      <dd>No emphasis marks.</dd>
   7.756 +    <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt>
   7.757 +      <dd>The shape is filled with solid color.</dd>
   7.758 +    <dt><dfn title="text-emphasis:open">''open''</dfn></dt>
   7.759 +      <dd>The shape is hollow.</dd>
   7.760 +    <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt>
   7.761 +      <dd>Display small circles as marks.
   7.762 +        The filled dot is U+2022 '&#x2022;', and the open dot is U+25E6 '&#x25e6;'.</dd>
   7.763 +    <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt>
   7.764 +      <dd>Display large circles as marks.
   7.765 +        The filled circle is U+25CF '&#x25cf;', and the open circle is U+25CB '&#x25cb;'.</dd>
   7.766 +    <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt>
   7.767 +      <dd>Display double circles as marks.
   7.768 +        The filled double-circle is U+25C9 '&#x25c9;', and the open double-circle is U+25CE '&#x25ce;'.</dd>
   7.769 +    <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt>
   7.770 +      <dd>Display triangles as marks.
   7.771 +        The filled triangle is U+25B2 '&#x25b2;', and the open triangle is U+25B3 '&#x25b3;'.</dd>
   7.772 +    <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt>
   7.773 +      <dd>Display sesames as marks.
   7.774 +        The filled sesame is U+FE45 '&#xfe45;', and the open sesame is U+FE46 '&#xfe46;'.</dd>
   7.775 +    <dt><dfn title="text-emphasis:sesame">''<var>&lt;string&gt;</var>''</dfn></dt>
   7.776 +      <dd>Display the given string as marks.
   7.777 +        Authors should not specify more than one <i>character</i> in &lt;string&gt;.
   7.778 +        The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd>
   7.779 +  </dl>
   7.780 +
   7.781 +  <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is
   7.782 +    specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified,
   7.783 +    the shape keyword computes to ''circle'' in horizontal writing mode and
   7.784 +    ''sesame'' in vertical writing mode.</p>
   7.785 +
   7.786 +  <p>The marks should be drawn using the element's font settings with its
   7.787 +    size scaled down to 50%. However, not all fonts have all these glyphs,
   7.788 +    and some fonts use inappropriate sizes for emphasis marks in these
   7.789 +    code points. The UA may opt to use a font known to be good for
   7.790 +    emphasis marks, or the marks may instead be synthesized by the UA.
   7.791 +    Marks must remain upright in vertical writing modes: like CJK
   7.792 +    characters, they do not rotate to match the writing mode.</p>
   7.793 +
   7.794 +  <p class="note">
   7.795 +      One example of good fonts for emphasis marks is Adobe's opensource project,
   7.796 +      <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>,
   7.797 +      which is specially designed for the emphasis marks.
   7.798 +  </p>
   7.799 +
   7.800 +  <p>The marks are drawn once for each <i>character</i>. However,
   7.801 +    emphasis marks are not drawn for characters that are:</p>
   7.802 +  <ul>
   7.803 +    <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that
   7.804 +      belong to the Unicode separator classes (Z*).
   7.805 +      (But note that emphasis marks <em>are</em> drawn for a space
   7.806 +       that combines with any combining characters.)</li>
   7.807 +    <li>Characters belonging to the Unicode classes for control codes
   7.808 +      and unassigned characters (Cc, Cf, Cn).</li>
   7.809 +  </ul>
   7.810 +
   7.811 +  <p>If emphasis marks are drawn for characters
   7.812 +    for which ruby is drawn in the same position as the emphasis mark,
   7.813 +    the ruby should be stacked between the emphasis marks and the base text.
   7.814 +    In this case, the position of the emphasis marks for a given element
   7.815 +    should be determined as if all characters have ruby boxes
   7.816 +    of the same height as the highest ruby box in the element.
   7.817 +    If the UA is not capable of drawing ruby and emphasis marks on the same side,
   7.818 +    the UA may hide ruby and draw only emphasis marks.</p>
   7.819 +  <div class="figure">
   7.820 +    <p><img
   7.821 +      alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them"
   7.822 +      src="text-emphasis-ruby.png" width="134" height="50"></p>
   7.823 +    <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p>
   7.824 +  </div>
   7.825 +
   7.826 +  <p class="note">A future level of CSS may define controls to specify
   7.827 +    what to do when emphasis marks and ruby text coincide.</p>
   7.828 +
   7.829 +<h3 id="text-emphasis-color-property">
   7.830 +Emphasis Mark Color: the 'text-emphasis-color' property</h3>
   7.831 +
   7.832 +  <table class="propdef">
   7.833 +    <tr>
   7.834 +      <th>Name:
   7.835 +      <td><dfn>text-emphasis-color</dfn>
   7.836 +    <tr>
   7.837 +      <th><a href="#values">Value</a>:
   7.838 +      <td>&lt;color&gt;
   7.839 +    <tr>
   7.840 +      <th>Initial:
   7.841 +      <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
   7.842 +    <tr>
   7.843 +      <th>Applies to:
   7.844 +      <td>all elements
   7.845 +    <tr>
   7.846 +      <th>Inherited:
   7.847 +      <td>yes
   7.848 +    <tr>
   7.849 +      <th>Percentages:
   7.850 +      <td>N/A
   7.851 +    <tr>
   7.852 +      <th>Media:
   7.853 +      <td>visual
   7.854 +    <tr>
   7.855 +      <th>Computed&#160;value:
   7.856 +      <td>as specified
   7.857 +  </table>
   7.858 +
   7.859 +  <p>This property specifies the foreground color of the emphasis marks.</p>
   7.860 +
   7.861 +  <p class="note">
   7.862 +    The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]]
   7.863 +    that has the ''currentColor'' keyword inherit as itself,
   7.864 +    and to take the value of the 'color' property as its <em>used</em> (not computed) value.
   7.865 +
   7.866 +<h3 id="text-emphasis-property">
   7.867 +Emphasis Mark Shorthand: the 'text-emphasis' property</h3>
   7.868 +
   7.869 +  <table class="propdef">
   7.870 +    <tr>
   7.871 +      <th>Name:
   7.872 +      <td><dfn>text-emphasis</dfn>
   7.873 +    <tr>
   7.874 +      <th><a href="#values">Value</a>:
   7.875 +      <td>'&lt;<a href="#text-emphasis-style">text-emphasis-style</a>&gt;' || '&lt;<a href="#text-emphasis-color">text-emphasis-color</a>&gt;'
   7.876 +
   7.877 +    <tr>
   7.878 +      <th>Initial:
   7.879 +      <td>see individual properties
   7.880 +    <tr>
   7.881 +      <th>Applies to:
   7.882 +      <td>all elements
   7.883 +    <tr>
   7.884 +      <th>Inherited:
   7.885 +      <td>yes
   7.886 +    <tr>
   7.887 +      <th>Percentages:
   7.888 +      <td>N/A
   7.889 +    <tr>
   7.890 +      <th>Media:
   7.891 +      <td>visual
   7.892 +    <tr>
   7.893 +      <th>Computed&#160;value:
   7.894 +      <td>see individual properties
   7.895 +  </table>
   7.896 +
   7.897 +  <p>This property is a shorthand for setting
   7.898 +    'text-emphasis-style' and 'text-emphasis-color'
   7.899 +    in one declaration.
   7.900 +    Omitted values are set to their initial values.</p>
   7.901 +
   7.902 +  <p class="note">Note that 'text-emphasis-position' is not reset in this
   7.903 +    shorthand. This is because typically the shape and color vary, but the
   7.904 +    position is consistent for a particular language throughout the document.
   7.905 +    Therefore the position should inherit independently.</p>
   7.906 +
   7.907 +<h3 id="text-emphasis-position-property">
   7.908 +Emphasis Mark Position: the 'text-emphasis-position' property</h3>
   7.909 +
   7.910 +  <table class="propdef">
   7.911 +    <tr>
   7.912 +      <th>Name:
   7.913 +      <td><dfn>text-emphasis-position</dfn>
   7.914 +    <tr>
   7.915 +      <th><a href="#values">Value</a>:
   7.916 +      <td>[ above | below ] && [ right | left ]
   7.917 +
   7.918 +    <tr>
   7.919 +      <th>Initial:
   7.920 +      <td>above right
   7.921 +    <tr>
   7.922 +      <th>Applies to:
   7.923 +      <td>all elements
   7.924 +    <tr>
   7.925 +      <th>Inherited:
   7.926 +      <td>yes
   7.927 +    <tr>
   7.928 +      <th>Percentages:
   7.929 +      <td>N/A
   7.930 +    <tr>
   7.931 +      <th>Media:
   7.932 +      <td>visual
   7.933 +    <tr>
   7.934 +      <th>Computed&#160;value:
   7.935 +      <td>as specified
   7.936 +  </table>
   7.937 +
   7.938 +  <p>This property describes where emphasis marks are drawn at.
   7.939 +    The values have following meanings:</p>
   7.940 +
   7.941 +  <dl>
   7.942 +    <dt><dfn title="text-emphasis:above">''above''</dfn></dt>
   7.943 +      <dd>Draw marks over the text in horizontal writing mode.</dd>
   7.944 +    <dt><dfn title="text-emphasis:below">''below''</dfn></dt>
   7.945 +      <dd>Draw marks under the text in horizontal writing mode.</dd>
   7.946 +    <dt><dfn title="text-emphasis:right">''right''</dfn></dt>
   7.947 +      <dd>Draw marks to the right of the text in vertical writing mode.</dd>
   7.948 +    <dt><dfn title="text-emphasis:left">''left''</dfn></dt>
   7.949 +      <dd>Draw marks to the left of the text in vertical writing mode.</dd>
   7.950 +  </dl>
   7.951 +
   7.952 +  <p class="issue">
   7.953 +    Should ''above''/''below'' be ''over''/''under'' to match text decoration names?
   7.954 +
   7.955 +  <p>Emphasis marks are drawn exactly as if each character was
   7.956 +    assigned the mark as its ruby annotation text with the ruby position
   7.957 +    given by 'text-emphasis-position' and the ruby alignment as centered.
   7.958 +
   7.959 +  <p>The effect of emphasis marks on the line height is the same as for
   7.960 +    ruby text.</p>
   7.961 +
   7.962 +  <div class="note">
   7.963 +    <p>Note, the preferred position of emphasis marks depends on the
   7.964 +      language. In Japanese for example, the preferred position is
   7.965 +      ''above right''. In Chinese, on the other hand, the preferred
   7.966 +      position is ''below right''.
   7.967 +      The informative table below summarizes the preferred
   7.968 +      emphasis mark positions for Chinese and Japanese:</p>
   7.969 +
   7.970 +    <table class="data">
   7.971 +      <caption>Preferred emphasis mark and ruby position</caption>
   7.972 +      <thead>
   7.973 +        <tr>
   7.974 +          <th scope="col" rowspan=2>Language
   7.975 +          <th scope="col" colspan=2>Preferred mark position
   7.976 +          <th scope="col" colspan=2 rowspan=2>Illustration
   7.977 +        <tr>
   7.978 +          <th>Horizontal
   7.979 +          <th>Vertical
   7.980 +      </thead>
   7.981 +      <tbody>
   7.982 +        <tr>
   7.983 +          <td scope="row">Japanese
   7.984 +          <td>above
   7.985 +          <td>right
   7.986 +          <td>
   7.987 +              <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text."
   7.988 +                  title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
   7.989 +                  src="text-emphasis-ja.gif" height="28" width="225">
   7.990 +
   7.991 +          <td rowspan="2">
   7.992 +              <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
   7.993 +                  title="Emphasis applied on the right of a fragment of Japanese text"
   7.994 +                  src="text-emphasis-v.gif" height="89" width="34">
   7.995 +
   7.996 +        <!--
   7.997 +        <tr>
   7.998 +          <td scope="row">Mongolian
   7.999 +          <td><span class="issue">?</span>
  7.1000 +          <td>right
  7.1001 +        -->
  7.1002 +        <tr>
  7.1003 +          <td scope="row">Chinese
  7.1004 +          <td>below
  7.1005 +          <td>right
  7.1006 +          <td>
  7.1007 +            <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
  7.1008 +                  title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
  7.1009 +                  src="text-emphasis-zh.gif" height="28" width="133">
  7.1010 +      </tbody>
  7.1011 +    </table>
  7.1012 +  </div>
  7.1013 +
  7.1014 +<h2 id="text-shadow-property">
  7.1015 +Text Shadows: the 'text-shadow' property</h2>
  7.1016 +
  7.1017 +  <table class="propdef">
  7.1018 +    <tr>
  7.1019 +      <th>Name:
  7.1020 +      <td><dfn>text-shadow</dfn>
  7.1021 +    <tr>
  7.1022 +      <th><a href="#values">Value</a>:
  7.1023 +      <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
  7.1024 +    <tr>
  7.1025 +      <th>Initial:
  7.1026 +      <td>none
  7.1027 +    <tr>
  7.1028 +      <th>Applies to:
  7.1029 +      <td>all elements
  7.1030 +    <tr>
  7.1031 +      <th>Inherited:
  7.1032 +      <td>yes
  7.1033 +    <tr>
  7.1034 +      <th>Percentages:
  7.1035 +      <td>N/A
  7.1036 +    <tr>
  7.1037 +      <th>Media:
  7.1038 +      <td>visual
  7.1039 +    <tr>
  7.1040 +      <th>Computed&#160;value:
  7.1041 +      <td>a color plus three absolute &lt;length&gt;s
  7.1042 +  </table>
  7.1043 +
  7.1044 +  <p>This property accepts a comma-separated list of shadow effects to
  7.1045 +    be applied to the text of the element. Values are interpreted as for
  7.1046 +    <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a>
  7.1047 +    [[!CSS3BG]]. (But note that spread values are not allowed.)
  7.1048 +    The shadow is applied to all of the element's text as well as any
  7.1049 +    text decorations it specifies.
  7.1050 +
  7.1051 +  <p>The shadow effects are applied front-to-back: the first shadow is on
  7.1052 +    top. The shadows may thus overlay each other, but they never overlay
  7.1053 +    the text itself. The shadow must be painted at a stack level between
  7.1054 +    the element's border and/or background, if present, and the elements
  7.1055 +    text and text decoration. UAs should avoid painting text shadows over
  7.1056 +    text in adjacent elements belonging to the same stack level and stacking
  7.1057 +    context. (This may mean that the exact stack level of the shadows depends
  7.1058 +    on whether the element has a border or background: the exact stacking
  7.1059 +    behavior of text shadows is thus UA-defined.)</p>
  7.1060 +
  7.1061 +  <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed
  7.1062 +    shape and may show through if the text is partially-transparent.
  7.1063 +    Like 'box-shadow', text shadows do not influence layout, and do not
  7.1064 +    trigger scrolling or increase the size of the scrollable area.
  7.1065 +
  7.1066 +  <p class="note">The painting order of shadows defined here is the opposite
  7.1067 +    of that defined in the 1998
  7.1068 +    <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p>
  7.1069 +
  7.1070 +  <p>The ''text-shadow'' property applies to both the
  7.1071 +    <code>::first-line</code> and <code>::first-letter</code>
  7.1072 +    pseudo-elements.</p>
  7.1073 +
  7.1074 +<h2 id="conformance">
  7.1075 +Conformance</h2>
  7.1076 +
  7.1077 +<h3 id="conventions">
  7.1078 +Document Conventions</h3>
  7.1079 +
  7.1080 +  <p>Conformance requirements are expressed with a combination of
  7.1081 +  descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  7.1082 +  “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
  7.1083 +  “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
  7.1084 +  document are to be interpreted as described in RFC 2119.
  7.1085 +  However, for readability, these words do not appear in all uppercase
  7.1086 +  letters in this specification.
  7.1087 +
  7.1088 +  <p>All of the text of this specification is normative except sections
  7.1089 +  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
  7.1090 +
  7.1091 +  <p>Examples in this specification are introduced with the words “for example”
  7.1092 +  or are set apart from the normative text with <code>class="example"</code>,
  7.1093 +  like this:
  7.1094 +
  7.1095 +  <div class="example">
  7.1096 +    <p>This is an example of an informative example.</p>
  7.1097 +  </div>
  7.1098 +
  7.1099 +  <p>Informative notes begin with the word “Note” and are set apart from the
  7.1100 +  normative text with <code>class="note"</code>, like this:
  7.1101 +
  7.1102 +  <p class="note">Note, this is an informative note.</p>
  7.1103 +
  7.1104 +<h3 id="conformance-classes">
  7.1105 +Conformance Classes</h3>
  7.1106 +
  7.1107 +  <p>Conformance to CSS Text Level 3
  7.1108 +  is defined for three conformance classes:
  7.1109 +  <dl>
  7.1110 +    <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
  7.1111 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  7.1112 +      style sheet</a>.
  7.1113 +    <dt><dfn>renderer</dfn></dt>
  7.1114 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  7.1115 +      that interprets the semantics of a style sheet and renders
  7.1116 +      documents that use them.
  7.1117 +    <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
  7.1118 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  7.1119 +      that writes a style sheet.
  7.1120 +  </dl>
  7.1121 +
  7.1122 +  <p>A style sheet is conformant to CSS Text Level 3
  7.1123 +  if all of its declarations that use properties defined in this module
  7.1124 +  have values that are valid according to the generic CSS grammar and the
  7.1125 +  individual grammars of each property as given in this module.
  7.1126 +
  7.1127 +  <p>A renderer is conformant to CSS Text Level 3
  7.1128 +  if, in addition to interpreting the style sheet as defined by the
  7.1129 +  appropriate specifications, it supports all the features defined
  7.1130 +  by CSS Text Level 3 by parsing them correctly
  7.1131 +  and rendering the document accordingly. However, the inability of a
  7.1132 +  UA to correctly render a document due to limitations of the device
  7.1133 +  does not make the UA non-conformant. (For example, a UA is not
  7.1134 +  required to render color on a monochrome monitor.)
  7.1135 +
  7.1136 +  <p>An authoring tool is conformant to CSS Text Level 3
  7.1137 +  if it writes style sheets that are syntactically correct according to the
  7.1138 +  generic CSS grammar and the individual grammars of each feature in
  7.1139 +  this module, and meet all other conformance requirements of style sheets
  7.1140 +  as described in this module.
  7.1141 +
  7.1142 +<h3 id="partial">
  7.1143 +Partial Implementations</h3>
  7.1144 +
  7.1145 +  <p>So that authors can exploit the forward-compatible parsing rules to
  7.1146 +  assign fallback values, CSS renderers <strong>must</strong>
  7.1147 +  treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
  7.1148 +  as appropriate</a>) any at-rules, properties, property values, keywords,
  7.1149 +  and other syntactic constructs for which they have no usable level of
  7.1150 +  support. In particular, user agents <strong>must not</strong> selectively
  7.1151 +  ignore unsupported component values and honor supported values in a single
  7.1152 +  multi-value property declaration: if any value is considered invalid
  7.1153 +  (as unsupported values must be), CSS requires that the entire declaration
  7.1154 +  be ignored.</p>
  7.1155 +
  7.1156 +<h3 id="experimental">
  7.1157 +Experimental Implementations</h3>
  7.1158 +
  7.1159 +  <p>To avoid clashes with future CSS features, the CSS2.1 specification
  7.1160 +  reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  7.1161 +  syntax</a> for proprietary and experimental extensions to CSS.
  7.1162 +
  7.1163 +  <p>Prior to a specification reaching the Candidate Recommendation stage
  7.1164 +  in the W3C process, all implementations of a CSS feature are considered
  7.1165 +  experimental. The CSS Working Group recommends that implementations
  7.1166 +  use a vendor-prefixed syntax for such features, including those in
  7.1167 +  W3C Working Drafts. This avoids incompatibilities with future changes
  7.1168 +  in the draft.
  7.1169 +  </p>
  7.1170 +
  7.1171 +<h3 id="testing">Non-Experimental Implementations</h3>
  7.1172 +
  7.1173 +  <p>Once a specification reaches the Candidate Recommendation stage,
  7.1174 +  non-experimental implementations are possible, and implementors should
  7.1175 +  release an unprefixed implementation of any CR-level feature they
  7.1176 +  can demonstrate to be correctly implemented according to spec.
  7.1177 +
  7.1178 +  <p>To establish and maintain the interoperability of CSS across
  7.1179 +  implementations, the CSS Working Group requests that non-experimental
  7.1180 +  CSS renderers submit an implementation report (and, if necessary, the
  7.1181 +  testcases used for that implementation report) to the W3C before
  7.1182 +  releasing an unprefixed implementation of any CSS features. Testcases
  7.1183 +  submitted to W3C are subject to review and correction by the CSS
  7.1184 +  Working Group.
  7.1185 +
  7.1186 +  <p>Further information on submitting testcases and implementation reports
  7.1187 +  can be found from on the CSS Working Group's website at
  7.1188 +  <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  7.1189 +  Questions should be directed to the
  7.1190 +  <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  7.1191 +  mailing list.
  7.1192 +
  7.1193 +<h3 id="cr-exit-criteria">
  7.1194 +CR Exit Criteria</h3>
  7.1195 +
  7.1196 +  <p>
  7.1197 +  For this specification to be advanced to Proposed Recommendation,
  7.1198 +  there must be at least two independent, interoperable implementations
  7.1199 +  of each feature. Each feature may be implemented by a different set of
  7.1200 +  products, there is no requirement that all features be implemented by
  7.1201 +  a single product. For the purposes of this criterion, we define the
  7.1202 +  following terms:
  7.1203 +
  7.1204 +  <dl>
  7.1205 +    <dt>independent <dd>each implementation must be developed by a
  7.1206 +    different party and cannot share, reuse, or derive from code
  7.1207 +    used by another qualifying implementation. Sections of code that
  7.1208 +    have no bearing on the implementation of this specification are
  7.1209 +    exempt from this requirement.
  7.1210 +
  7.1211 +    <dt>interoperable <dd>passing the respective test case(s) in the
  7.1212 +    official CSS test suite, or, if the implementation is not a Web
  7.1213 +    browser, an equivalent test. Every relevant test in the test
  7.1214 +    suite should have an equivalent test created if such a user
  7.1215 +    agent (UA) is to be used to claim interoperability. In addition
  7.1216 +    if such a UA is to be used to claim interoperability, then there
  7.1217 +    must one or more additional UAs which can also pass those
  7.1218 +    equivalent tests in the same way for the purpose of
  7.1219 +    interoperability. The equivalent tests must be made publicly
  7.1220 +    available for the purposes of peer review.
  7.1221 +
  7.1222 +    <dt>implementation <dd>a user agent which:
  7.1223 +
  7.1224 +    <ol class=inline>
  7.1225 +      <li>implements the specification.
  7.1226 +
  7.1227 +      <li>is available to the general public. The implementation may
  7.1228 +      be a shipping product or other publicly available version
  7.1229 +      (i.e., beta version, preview release, or “nightly build”).
  7.1230 +      Non-shipping product releases must have implemented the
  7.1231 +      feature(s) for a period of at least one month in order to
  7.1232 +      demonstrate stability.
  7.1233 +
  7.1234 +      <li>is not experimental (i.e., a version specifically designed
  7.1235 +      to pass the test suite and is not intended for normal usage
  7.1236 +      going forward).
  7.1237 +    </ol>
  7.1238 +  </dl>
  7.1239 +
  7.1240 +  <p>The specification will remain Candidate Recommendation for at least
  7.1241 +  six months.
  7.1242 +
  7.1243 +<h2 class="no-num" id="acknowledgements">
  7.1244 +  Appendix A: Acknowledgements</h2>
  7.1245 +
  7.1246 +  <p>This specification would not have been possible without the help from:
  7.1247 +    Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
  7.1248 +    Martin Dürst,
  7.1249 +    Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian
  7.1250 +    Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
  7.1251 +    Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
  7.1252 +    Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki,
  7.1253 +    Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki,
  7.1254 +    Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe
  7.1255 +    and Steve Zilles.</p>
  7.1256 +
  7.1257 +<h2 class="no-num">Appendix B: References</h2>
  7.1258 +
  7.1259 +<h3 class="no-num" id="normative-ref">Normative references</h3>
  7.1260 +<!--normative-->
  7.1261 +
  7.1262 +<h3 class="no-num" id="informative-ref">Informative references</h3>
  7.1263 +<!--informative-->
  7.1264 +
  7.1265 +<h2 class="no-num" id="changes">Appendix C:
  7.1266 +Changes</h2>
  7.1267 +
  7.1268 +
  7.1269 +
  7.1270 +
  7.1271 +<h2 class="no-num" id="default-stylesheet">
  7.1272 +Appendix D: Default UA Stylesheet</h2>
  7.1273 +
  7.1274 +    <p>
  7.1275 +      This appendix is informative, 
  7.1276 +      and is to help UA developers to implement default stylesheet, 
  7.1277 +      but UA developers are free to ignore or change.
  7.1278 +
  7.1279 +    <div class="example">
  7.1280 +      <pre><code class="css">
  7.1281 +<!-- -->s, strike, del {
  7.1282 +<!-- -->  text-decoration: line-through;
  7.1283 +<!-- -->}
  7.1284 +<!-- -->
  7.1285 +<!-- -->u, ins, :link, :visited {
  7.1286 +<!-- -->  text-decoration: underline;
  7.1287 +<!-- -->}
  7.1288 +<!-- -->
  7.1289 +<!-- -->abbr[title], acronym[title] {
  7.1290 +<!-- -->  text-decoration: dotted underline;
  7.1291 +<!-- -->}
  7.1292 +<!-- -->
  7.1293 +<!-- -->/* disable inheritance of text-emphasis marks to ruby text:
  7.1294 +<!-- -->  emphasis marks should only apply to base text */
  7.1295 +<!-- -->rt { text-emphasis: none; }
  7.1296 +<!-- -->
  7.1297 +<!-- -->:root:lang(zh), [lang|=zh] {
  7.1298 +<!-- -->/* default emphasis mark position is 'below right' for Chinese */
  7.1299 +<!-- -->  text-emphasis-position: below right;
  7.1300 +<!-- -->}
  7.1301 +<!-- -->
  7.1302 +<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {
  7.1303 +<!-- -->/* default underline position is 'below right' for Japanese and Korean */
  7.1304 +<!-- -->  text-underline-position: below right;
  7.1305 +<!-- -->}
  7.1306 +<!-- -->
  7.1307 +<!-- -->:root:lang(zh), [lang|=zh] {
  7.1308 +<!-- -->/* default underline position is 'below left' for Chinese */
  7.1309 +<!-- -->  text-underline-position: below left;
  7.1310 +<!-- -->}
  7.1311 +<!-- -->
  7.1312 +<!-- -->blink {
  7.1313 +<!-- -->  text-decoration-line: blink;
  7.1314 +<!-- -->}
  7.1315 +</code></pre>
  7.1316 +    </div>
  7.1317 +
  7.1318 +    <p class="issue">
  7.1319 +      If you find any issues, recommendations to add, or corrections,
  7.1320 +      please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a>
  7.1321 +      with <kbd>[css3-text-decor]</kbd> in the subject line.
  7.1322 +
  7.1323 +    <div class='example'>
  7.1324 +      <p>
  7.1325 +        While ''text-decoration-line: blink'' can't be fully reproduced with other existing properties,
  7.1326 +        authors can achieve a very similar effect with the following CSS:
  7.1327 +
  7.1328 +      <pre>
  7.1329 +<!-- -->@keyframes blink {
  7.1330 +<!-- -->  0% {
  7.1331 +<!-- -->    visibility: hidden;
  7.1332 +<!-- -->    animation-timing-function: step-end;
  7.1333 +<!-- -->  }
  7.1334 +<!-- -->  25%, 100% {
  7.1335 +<!-- -->    visibility: visible;
  7.1336 +<!-- -->  }
  7.1337 +<!-- -->}
  7.1338 +<!-- -->blink {
  7.1339 +<!-- -->  animation: blink 1s infinite;
  7.1340 +<!-- -->}</pre>
  7.1341 +    </div>
  7.1342 \ No newline at end of file
     8.1 Binary file css-text-decor-3/text-emphasis-ja.gif has changed
     9.1 Binary file css-text-decor-3/text-emphasis-ruby.png has changed
    10.1 Binary file css-text-decor-3/text-emphasis-v.gif has changed
    11.1 Binary file css-text-decor-3/text-emphasis-zh.gif has changed
    12.1 Binary file css-text-decor-3/underline-averaging.gif has changed
    13.1 Binary file css-text-decor-3/underline-example.png has changed
    14.1 Binary file css-text-decor-3/underline-position-alphabetic.png has changed
    15.1 Binary file css-text-decor-3/underline-position-below.png has changed
    16.1 Binary file css-text-decor-3/underline-position-left.png has changed
    17.1 Binary file css-text-decor-3/underline-position-right.png has changed
    18.1 --- a/css3-background/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    18.2 +++ b/css3-background/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    18.3 @@ -17,6 +17,9 @@
    18.4    </style>
    18.5    <link href="http://www.w3.org/StyleSheets/TR/W3C-CR.css" rel=stylesheet
    18.6    type="text/css">
    18.7 +  <script defer="defer"
    18.8 +  src="http://test.csswg.org/harness/annotate.js#CSS3-BACKGROUND_DEV"
    18.9 +  type="text/javascript"></script>
   18.10  
   18.11   <body>
   18.12    <div class=head> <!--begin-logo-->
    19.1 --- a/css3-background/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    19.2 +++ b/css3-background/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    19.3 @@ -16,6 +16,9 @@
    19.4    </style>
    19.5    <link rel="stylesheet" type="text/css"
    19.6    href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
    19.7 +  <script defer="defer"
    19.8 +  src="http://test.csswg.org/harness/annotate.js#CSS3-BACKGROUND_DEV"
    19.9 +  type="text/javascript"></script>
   19.10  </head>
   19.11  
   19.12  <body>
    20.1 --- a/css3-conditional/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    20.2 +++ b/css3-conditional/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    20.3 @@ -7,16 +7,17 @@
    20.4    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    20.5    <title>CSS Conditional Rules Module Level 3</title>
    20.6  
    20.7 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
    20.8 -  <meta content="CSS Conditional Rules Module Level 3" name=DC.title>
    20.9 -  <meta content=text name=DC.type>
   20.10 -  <meta content=2012-09-25 name=DC.issued>
   20.11 -  <meta content="http://dev.w3.org/csswg/css3-conditional/" name=DC.creator>
   20.12 -  <meta content=W3C name=DC.publisher>
   20.13 -  <meta content="http://www.w3.org/TR/2012/ED-css3-conditional-20120925/"
   20.14 -   name=DC.identifier>
   20.15 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   20.16    <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   20.17 -   rel=DC.rights>
   20.18 +   rel=dcterms.rights>
   20.19 +  <meta content="CSS Conditional Rules Module Level 3" name=dcterms.title>
   20.20 +  <meta content=text name=dcterms.type>
   20.21 +  <meta content=2012-10-12 name=dcterms.issued>
   20.22 +  <meta content="http://dev.w3.org/csswg/css3-conditional/"
   20.23 +   name=dcterms.creator>
   20.24 +  <meta content=W3C name=dcterms.publisher>
   20.25 +  <meta content="http://www.w3.org/TR/2012/ED-css3-conditional-20121012/"
   20.26 +   name=dcterms.identifier>
   20.27    <link href="../default.css" rel=stylesheet type="text/css">
   20.28    <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   20.29     type="text/css">
   20.30 @@ -28,14 +29,14 @@
   20.31  
   20.32     <h1>CSS Conditional Rules Module Level 3</h1>
   20.33  
   20.34 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 September
   20.35 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 October
   20.36      2012</h2>
   20.37  
   20.38     <dl>
   20.39      <dt>This version:
   20.40  
   20.41 -    <dd><a href="http://www.w3.org/TR/2012/ED-css3-conditional-20120925/">
   20.42 -     http://www.w3.org/TR/2012/ED-css3-conditional-20120925/</a>
   20.43 +    <dd><a href="http://www.w3.org/TR/2012/ED-css3-conditional-20121012/">
   20.44 +     http://www.w3.org/TR/2012/ED-css3-conditional-20121012/</a>
   20.45  
   20.46      <dt>Latest version:
   20.47  
   20.48 @@ -50,7 +51,7 @@
   20.49      <dt>Previous version:
   20.50  
   20.51      <dd><a
   20.52 -     href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a>
   20.53 +     href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">http://www.w3.org/TR/2012/WD-css3-conditional-20120911/</a>
   20.54  
   20.55      <dt>Editors:
   20.56  
   20.57 @@ -105,9 +106,8 @@
   20.58     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS level 1
   20.59     <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>. The main
   20.60     extensions compared to level 2 are allowing nesting of certain at-rules
   20.61 -   inside ‘<code class=css>@media</code>’, the addition of the ‘<a
   20.62 -   href="#dfn-support"><code class=css>@supports</code></a>’ and ‘<code
   20.63 -   class=css>@document</code>’ rules for conditional processing.
   20.64 +   inside ‘<code class=css>@media</code>’, and the addition of the
   20.65 +   ‘<code class=css>@supports</code>’ rule for conditional processing.
   20.66  
   20.67    <h2 class="no-num no-toc" id=status>Status of this document</h2>
   20.68    <!--begin-status-->
   20.69 @@ -159,15 +159,18 @@
   20.70      be removed to advance the other features in this specification to
   20.71      Proposed Recommendation.
   20.72  
   20.73 -   <li>The ‘<a href="#dfn-support"><code class=css>@supports</code></a>’
   20.74 -    rule is at risk; if interoperable implementations are not found, it may
   20.75 -    be removed to advance the other features in this specification to
   20.76 -    Proposed Recommendation.
   20.77 -
   20.78 -   <li>The ‘<code class=css>@document</code>’ rule is at risk; if
   20.79 +   <li>The ‘<code class=css>@supports</code>’ rule is at risk; if
   20.80      interoperable implementations are not found, it may be removed to advance
   20.81      the other features in this specification to Proposed Recommendation.
   20.82    </ul>
   20.83 +  <!--
   20.84 +
   20.85 +  Things to go in level 4:
   20.86 +
   20.87 +  * Create some way to put these new conditional things on an @import.
   20.88 +  * The @document rule (commented out, down below).
   20.89 +
   20.90 +-->
   20.91  
   20.92    <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   20.93    <!--begin-toc-->
   20.94 @@ -203,53 +206,49 @@
   20.95        </span>Definition of support</a>
   20.96      </ul>
   20.97  
   20.98 -   <li><a href="#at-document"><span class=secno>7. </span>Document queries:
   20.99 -    the ‘<code class=css>@document</code>’ rule</a>
  20.100 -
  20.101 -   <li><a href="#apis"><span class=secno>8. </span>APIs</a>
  20.102 +   <li><a href="#apis"><span class=secno>7. </span>APIs</a>
  20.103      <ul class=toc>
  20.104 -     <li><a href="#extentions-to-cssrule-interface"><span class=secno>8.1.
  20.105 +     <li><a href="#extentions-to-cssrule-interface"><span class=secno>7.1.
  20.106        </span> Extensions to the <code>CSSRule</code> interface</a>
  20.107  
  20.108 -     <li><a href="#the-cssgroupingrule-interface"><span class=secno>8.2.
  20.109 +     <li><a href="#the-cssgroupingrule-interface"><span class=secno>7.2.
  20.110        </span> The <code>CSSGroupingRule</code> interface</a>
  20.111  
  20.112 -     <li><a href="#the-cssconditionrule-interface"><span class=secno>8.3.
  20.113 +     <li><a href="#the-cssconditionrule-interface"><span class=secno>7.3.
  20.114        </span> The <code>CSSConditionRule</code> interface</a>
  20.115  
  20.116 -     <li><a href="#the-cssmediarule-interface"><span class=secno>8.4. </span>
  20.117 +     <li><a href="#the-cssmediarule-interface"><span class=secno>7.4. </span>
  20.118        The <code>CSSMediaRule</code> interface</a>
  20.119  
  20.120 -     <li><a href="#the-csssupportsrule-interface"><span class=secno>8.5.
  20.121 +     <li><a href="#the-csssupportsrule-interface"><span class=secno>7.5.
  20.122        </span> The <code>CSSSupportsRule</code> interface</a>
  20.123  
  20.124 -     <li><a href="#the-cssdocumentrule-interface"><span class=secno>8.6.
  20.125 -      </span> The <code>CSSDocumentRule</code> interface</a>
  20.126 -
  20.127 -     <li><a href="#the-css-interface"><span class=secno>8.7. </span> The
  20.128 +     <li><a href="#the-css-interface"><span class=secno>7.6. </span> The
  20.129        <code>CSS</code> interface, and the <code title="">supports()</code>
  20.130        function</a>
  20.131      </ul>
  20.132  
  20.133 -   <li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
  20.134 +   <li class=no-num><a href="#grammar">Grammar</a>
  20.135 +
  20.136 +   <li><a href="#conformance"><span class=secno>8. </span>Conformance</a>
  20.137      <ul class=toc>
  20.138 -     <li><a href="#base-modules"><span class=secno>9.1. </span>Base
  20.139 +     <li><a href="#base-modules"><span class=secno>8.1. </span>Base
  20.140        Modules</a>
  20.141  
  20.142 -     <li><a href="#conformance-classes"><span class=secno>9.2.
  20.143 +     <li><a href="#conformance-classes"><span class=secno>8.2.
  20.144        </span>Conformance Classes</a>
  20.145  
  20.146 -     <li><a href="#partial"><span class=secno>9.3. </span> Partial
  20.147 +     <li><a href="#partial"><span class=secno>8.3. </span> Partial
  20.148        Implementations</a>
  20.149  
  20.150 -     <li><a href="#experimental"><span class=secno>9.4. </span>Experimental
  20.151 +     <li><a href="#experimental"><span class=secno>8.4. </span>Experimental
  20.152        Implementations</a>
  20.153  
  20.154 -     <li><a href="#cr-exit-criteria"><span class=secno>9.5. </span>CR Exit
  20.155 +     <li><a href="#cr-exit-criteria"><span class=secno>8.5. </span>CR Exit
  20.156        Criteria</a>
  20.157      </ul>
  20.158  
  20.159 -   <li class=no-num><a href="#grammar">Grammar</a>
  20.160 +   <li><a href="#changes"><span class=secno>9. </span> Changes</a>
  20.161  
  20.162     <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
  20.163  
  20.164 @@ -288,23 +287,17 @@
  20.165     features involving @-rules with media specific style sheets within a
  20.166     single style sheet.
  20.167  
  20.168 -  <p>This specification also defines additional types of conditional group
  20.169 -   rules, ‘<a href="#dfn-support"><code class=css>@supports</code></a>’
  20.170 -   and ‘<code class=css>@document</code>’, to address author and user
  20.171 +  <p>This specification also defines an additional type of conditional group
  20.172 +   rule, ‘<code class=css>@supports</code>’, to address author and user
  20.173     requirements.
  20.174  
  20.175 -  <p>The ‘<a href="#dfn-support"><code class=css>@supports</code></a>’
  20.176 -   rule allows CSS to be conditioned on implementation support for CSS
  20.177 -   properties and values. This rule makes it much easier for authors to use
  20.178 -   new CSS features and provide good fallback for implementations that do not
  20.179 -   support those features. This is particularly important for CSS features
  20.180 -   that provide new layout mechanisms, and for other cases where a set of
  20.181 -   related styles needs to be conditioned on property support.
  20.182 -
  20.183 -  <p>The ‘<code class=css>@document</code>’ rule allows CSS to be
  20.184 -   conditioned on the page to which the style sheet is being applied. This
  20.185 -   allows users to apply styles to a particular page or group of pages, which
  20.186 -   greatly increases the power of user style sheets.
  20.187 +  <p>The ‘<code class=css>@supports</code>’ rule allows CSS to be
  20.188 +   conditioned on implementation support for CSS properties and values. This
  20.189 +   rule makes it much easier for authors to use new CSS features and provide
  20.190 +   good fallback for implementations that do not support those features. This
  20.191 +   is particularly important for CSS features that provide new layout
  20.192 +   mechanisms, and for other cases where a set of related styles needs to be
  20.193 +   conditioned on property support.
  20.194  
  20.195    <h3 id=placement><span class=secno>1.2. </span>Module Interactions</h3>
  20.196  
  20.197 @@ -369,15 +362,6 @@
  20.198  
  20.199     <p>causes a particular CSS rule (making elements with ID "navigation" be
  20.200      display:none) apply only when the style sheet is used for a print medium.
  20.201 -    Likewise, this CSS rule:
  20.202 -
  20.203 -   <pre>@document url("http://www.example.com/") {
  20.204 -  #example1 { display: none }
  20.205 -}</pre>
  20.206 -
  20.207 -   <p>does the same type of conditional application, but using a different
  20.208 -    condition: whether the style sheet is being applied to the page
  20.209 -    <code>http://www.example.com/</code>.
  20.210    </div>
  20.211  
  20.212    <p>Each conditional group rule has a condition, which at any time evaluates
  20.213 @@ -421,11 +405,6 @@
  20.214    <h2 id=contents-of><span class=secno>3. </span>Contents of conditional
  20.215     group rules</h2>
  20.216  
  20.217 -  <p class=issue>There is also likely demand for using these conditions with
  20.218 -   ‘<code class=css>@import</code>’. We should see if we can come up with
  20.219 -   sensible syntax for that, perhaps functional notation at the end of the
  20.220 -   ‘<code class=css>@import</code>’ rule.
  20.221 -
  20.222    <p>The syntax of each conditional group rule consists of some syntax
  20.223     specific to the type of rule followed by a <dfn id=group-rule-body>group
  20.224     rule body</dfn>, which is a block (pair of braces) containing a sequence
  20.225 @@ -444,7 +423,7 @@
  20.226  
  20.227    <pre>nested_statement
  20.228    : ruleset | media | page | font_face_rule | keyframes_rule |
  20.229 -    supports_rule | document_rule
  20.230 +    supports_rule
  20.231    ;
  20.232  
  20.233  group_rule_body
  20.234 @@ -452,13 +431,13 @@
  20.235    ;</pre>
  20.236  
  20.237    <p> in which all the productions are defined in that grammar with the
  20.238 -   exception of <code>font_face_rule</code> <span class=issue>not</span>
  20.239 -   defined in <a href="#CSS3-FONTS"
  20.240 +   exception of <code>font_face_rule</code> defined in <a href="#CSS3-FONTS"
  20.241     rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a>,
  20.242     <code>keyframes_rule</code> defined in <a href="#CSS3-ANIMATIONS"
  20.243     rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>, and
  20.244 -   <code>media</code>, <a href="#supportsrule"><code>supports_rule</code></a>
  20.245 -   and <code>document_rule</code> defined in this specification.
  20.246 +   <code>media</code> and <a
  20.247 +   href="#supports_rule"><code>supports_rule</code></a> defined in this
  20.248 +   specification.
  20.249  
  20.250    <p>In general, future CSS specifications that add new @-rules that are not
  20.251     forbidden to occur after some other types of rules should modify this
  20.252 @@ -495,10 +474,10 @@
  20.253    <h2 id=at-media><span class=secno>5. </span>Media-specific style sheets:
  20.254     the ‘<code class=css>@media</code>’ rule</h2>
  20.255  
  20.256 -  <p>The <dfn id=media-rule>‘<code class=css>@media</code>’ rule</dfn> is
  20.257 -   a conditional group rule whose condition is a media query. It consists of
  20.258 -   the at-keyword ‘<code class=css>@media</code>’ followed by a (possibly
  20.259 -   empty) media query (as defined in <a href="#MEDIAQ"
  20.260 +  <p>The <dfn id=atmedia-rule>‘<code class=css>@media</code>’ rule</dfn>
  20.261 +   is a conditional group rule whose condition is a media query. It consists
  20.262 +   of the at-keyword ‘<code class=css>@media</code>’ followed by a
  20.263 +   (possibly empty) media query list (as defined in <a href="#MEDIAQ"
  20.264     rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>), followed by a group rule
  20.265     body. The condition of the rule is the result of the media query.
  20.266  
  20.267 @@ -533,10 +512,10 @@
  20.268     href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a
  20.269     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G).
  20.270  
  20.271 -  <h2 id=at-supports><span class=secno>6. </span>Feature queries: the ‘<a
  20.272 -   href="#dfn-support"><code class=css>@supports</code></a>’ rule</h2>
  20.273 +  <h2 id=at-supports><span class=secno>6. </span>Feature queries: the
  20.274 +   ‘<code class=css>@supports</code>’ rule</h2>
  20.275  
  20.276 -  <p>The <dfn id=supports-rule>‘<code class=css>@supports</code>’
  20.277 +  <p>The <dfn id=atsupports-rule>‘<code class=css>@supports</code>’
  20.278     rule</dfn> is a conditional group rule whose condition tests whether the
  20.279     user agent supports CSS property:value pairs. Authors can use it to write
  20.280     style sheets that use new features when available but degrade gracefully
  20.281 @@ -546,10 +525,10 @@
  20.282     tied to the support for certain features, as is the case for use of new
  20.283     layout system features.
  20.284  
  20.285 -  <p>The syntax of the condition in the ‘<a href="#dfn-support"><code
  20.286 -   class=css>@supports</code></a>’ rule is slightly more complicated than
  20.287 -   for the other conditional group rules (though has some similarities to
  20.288 -   media queries) since:
  20.289 +  <p>The syntax of the condition in the ‘<code
  20.290 +   class=css>@supports</code>’ rule is slightly more complicated than for
  20.291 +   the other conditional group rules (though has some similarities to media
  20.292 +   queries) since:
  20.293  
  20.294    <ul>
  20.295     <li>negation is needed so that the new-feature styles and the fallback
  20.296 @@ -564,79 +543,76 @@
  20.297      alternatives are vendor-prefixed properties or values
  20.298    </ul>
  20.299  
  20.300 -  <p>Therefore, the syntax of the ‘<a href="#dfn-support"><code
  20.301 -   class=css>@supports</code></a>’ rule allows testing for property:value
  20.302 -   pairs, and arbitrary conjunctions (and), disjunctions (or), and negations
  20.303 -   (not) of them.
  20.304 +  <p>Therefore, the syntax of the ‘<code class=css>@supports</code>’ rule
  20.305 +   allows testing for property:value pairs, and arbitrary conjunctions (and),
  20.306 +   disjunctions (or), and negations (not) of them.
  20.307  
  20.308    <p>This extends the lexical scanner in the <a
  20.309     href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a
  20.310     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) by
  20.311     adding:
  20.312  
  20.313 -  <pre>@{S}{U}{P}{P}{O}{R}{T}{S}	{return SUPPORTS_SYM;}</pre>
  20.314 +  <pre>
  20.315 +@{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;}
  20.316 +{O}{R}                    {return OR;}
  20.317 +</pre>
  20.318  
  20.319    <p>and the grammar by adding
  20.320  
  20.321 -  <pre><dfn id=supportsrule>supports_rule</dfn>
  20.322 -  : SUPPORTS_SYM S+ supports_condition group_rule_body
  20.323 +  <pre><dfn id="supports_rule">supports_rule</dfn>
  20.324 +  : SUPPORTS_SYM S* supports_condition group_rule_body
  20.325    ;
  20.326  
  20.327  <dfn
  20.328 -   id=supportscondition>supports_condition</dfn>
  20.329 +   id="supports_condition">supports_condition</dfn>
  20.330    : supports_negation | supports_conjunction | supports_disjunction |
  20.331      supports_condition_in_parens
  20.332    ;
  20.333  
  20.334  <dfn
  20.335 -   id=supportsconditioninparens>supports_condition_in_parens</dfn>
  20.336 +   id="supports_condition_in_parens">supports_condition_in_parens</dfn>
  20.337    : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition
  20.338    ;
  20.339  
  20.340  <dfn
  20.341 -   id=supportsnegation>supports_negation</dfn>
  20.342 -  : 'not' S* supports_condition_in_parens
  20.343 +   id="supports_negation">supports_negation</dfn>
  20.344 +  : NOT S* supports_condition_in_parens
  20.345    ;
  20.346  
  20.347  <dfn
  20.348 -   id=supportsconjunction>supports_conjunction</dfn>
  20.349 -  : supports_condition_in_parens ( 'and' S* supports_condition_in_parens )+
  20.350 +   id="supports_conjunction">supports_conjunction</dfn>
  20.351 +  : supports_condition_in_parens ( AND S* supports_condition_in_parens )+
  20.352    ;
  20.353  
  20.354  <dfn
  20.355 -   id=supportsdisjunction>supports_disjunction</dfn>
  20.356 -  : supports_condition_in_parens ( 'or' S* supports_condition_in_parens )+
  20.357 +   id="supports_disjunction">supports_disjunction</dfn>
  20.358 +  : supports_condition_in_parens ( OR S* supports_condition_in_parens )+
  20.359    ;
  20.360  
  20.361  <dfn
  20.362 -   id=supportsdeclarationcondition>supports_declaration_condition</dfn>
  20.363 -  : '(' S* core_declaration ')' S*
  20.364 +   id="supports_declaration_condition">supports_declaration_condition</dfn>
  20.365 +  : '(' S* core_declaration ')' S* | FUNCTION S* [any|unused]* ')'
  20.366    ;</pre>
  20.367  
  20.368    <p>in which <code>core_declaration</code> is the production
  20.369     <code>declaration</code> in the core syntax of CSS defined in <a
  20.370     href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">section 4.1.1
  20.371     (Tokenization)</a> of <a href="#CSS21"
  20.372 -   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
  20.373 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the <code>AND</code> and
  20.374 +   <code>NOT</code> tokens are defined in the Media Queries specification <a
  20.375 +   href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>.
  20.376  
  20.377 -  <p>Any ‘<a href="#dfn-support"><code class=css>@supports</code></a>’
  20.378 -   rule that does not parse according to the grammar above is invalid. Style
  20.379 -   sheets <strong>must not</strong> use such a rule and processors
  20.380 -   <strong>must</strong> ignore such a rule.
  20.381 +  <p>Any ‘<code class=css>@supports</code>’ rule that does not parse
  20.382 +   according to the grammar above is invalid. Style sheets <strong>must
  20.383 +   not</strong> use such a rule and processors <strong>must</strong> ignore
  20.384 +   such a rule.
  20.385  
  20.386    <p class=note>Note that this means that declarations that meet the
  20.387     forward-compatible syntax for declarations are permitted (and support for
  20.388 -   them is then tested by the ‘<a href="#dfn-support"><code
  20.389 -   class=css>@supports</code></a>’ rule), but declarations that do not meet
  20.390 -   the forward-compatible syntax for declarations cause the entire ‘<a
  20.391 -   href="#dfn-support"><code class=css>@supports</code></a>’ rule to be
  20.392 -   ignored.
  20.393 -
  20.394 -  <p class=issue>Is any further allowance for forward-compatible parsing
  20.395 -   needed, for example, to allow additional features (such as, say, selector
  20.396 -   tests) to be added to the ‘<a href="#dfn-support"><code
  20.397 -   class=css>@supports</code></a>’ rule? Or are these forward-compatible
  20.398 -   parsing rules the best solution for such future expansion anyway?
  20.399 +   them is then tested by the ‘<code class=css>@supports</code>’ rule),
  20.400 +   but declarations that do not meet the forward-compatible syntax for
  20.401 +   declarations cause the entire ‘<code class=css>@supports</code>’ rule
  20.402 +   to be ignored.
  20.403  
  20.404    <p>Each of these grammar terms is associated with a boolean result, as
  20.405     follows:
  20.406 @@ -649,38 +625,41 @@
  20.407     <dt>supports_condition_in_parens
  20.408  
  20.409     <dd> The result is the result of the single <a
  20.410 -    href="#supportscondition"><code>supports_condition</code></a> or <a
  20.411 -    href="#supportsdeclarationcondition"><code>supports_declaration_condition</code></a>
  20.412 +    href="#supports_condition"><code>supports_condition</code></a> or <a
  20.413 +    href="#supports_declaration_condition"><code>supports_declaration_condition</code></a>
  20.414      child term.
  20.415  
  20.416     <dt>supports_negation
  20.417  
  20.418     <dd> The result is the <em>negation</em> of the result of the <a
  20.419 -    href="#supportsconditioninparens"><code>supports_condition_in_parens</code></a>
  20.420 +    href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a>
  20.421      child term.
  20.422  
  20.423     <dt>supports_conjunction
  20.424  
  20.425     <dd> The result is true if the result of <em>all</em> of the <a
  20.426 -    href="#supportsconditioninparens"><code>supports_condition_in_parens</code></a>
  20.427 +    href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a>
  20.428      child terms is true; otherwise it is false.
  20.429  
  20.430     <dt>supports_disjunction
  20.431  
  20.432     <dd> The result is true if the result of <em>any</em> of the <a
  20.433 -    href="#supportsconditioninparens"><code>supports_condition_in_parens</code></a>
  20.434 +    href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a>
  20.435      child terms is true; otherwise it is false.
  20.436  
  20.437     <dt>supports_declaration_condition
  20.438  
  20.439 -   <dd> The result is whether the CSS processor <a
  20.440 -    href="#support-definition">supports</a> the declaration.
  20.441 +   <dd> The result is false if this corresponds to a functional notation;
  20.442 +    otherwise, the result is whether the CSS processor <a
  20.443 +    href="#support-definition">supports</a> the declaration within the
  20.444 +    parentheses. <span class=note>Note that future levels may define
  20.445 +    functions that can evaluate to true.</span>
  20.446    </dl>
  20.447  
  20.448 -  <p>The condition of the ‘<a href="#dfn-support"><code
  20.449 -   class=css>@supports</code></a>’ rule is the result of the <a
  20.450 -   href="#supportscondition"><code>supports_condition</code></a> term that is
  20.451 -   a child of the <a href="#supportsrule"><code>supports_rule</code></a>
  20.452 +  <p>The condition of the ‘<code class=css>@supports</code>’ rule is the
  20.453 +   result of the <a
  20.454 +   href="#supports_condition"><code>supports_condition</code></a> term that
  20.455 +   is a child of the <a href="#supports_rule"><code>supports_rule</code></a>
  20.456     term.
  20.457  
  20.458    <div class=example>
  20.459 @@ -692,16 +671,16 @@
  20.460    #article { background: white; color: black; }
  20.461  }</pre>
  20.462  
  20.463 -   <p>applies the rules inside the ‘<a href="#dfn-support"><code
  20.464 -    class=css>@supports</code></a>’ rule only when ‘<code
  20.465 -    class=css>display: flexbox</code>’ is supported.
  20.466 +   <p>applies the rules inside the ‘<code class=css>@supports</code>’
  20.467 +    rule only when ‘<code class=css>display: flexbox</code>’ is
  20.468 +    supported.
  20.469    </div>
  20.470  
  20.471    <div class=example>
  20.472 -   <p>The following example shows an additional ‘<a
  20.473 -    href="#dfn-support"><code class=css>@supports</code></a>’ rule that can
  20.474 -    be used to provide an alternative for when ‘<code class=css>display:
  20.475 -    flexbox</code>’ is not supported:
  20.476 +   <p>The following example shows an additional ‘<code
  20.477 +    class=css>@supports</code>’ rule that can be used to provide an
  20.478 +    alternative for when ‘<code class=css>display: flexbox</code>’ is not
  20.479 +    supported:
  20.480  
  20.481     <pre>@supports not ( display: flexbox ) {
  20.482    body { width: 100%; height: 100%; background: white; color: black; }
  20.483 @@ -838,250 +817,225 @@
  20.484     fallback (either in the <a href="#CSS1"
  20.485     rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of declarations that are
  20.486     overridden by later declarations or with the new capabilities provided by
  20.487 -   the ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ rule
  20.488 -   in this specification) that works correctly for the features implemented.
  20.489 -   This applies especially to compound values; implementations must implement
  20.490 -   all parts of the value in order to consider the declaration supported,
  20.491 -   either inside a ruleset or in the declaration condition of an ‘<a
  20.492 -   href="#dfn-support"><code class=css>@supports</code></a>’ rule.
  20.493 +   the ‘<code class=css>@supports</code>’ rule in this specification)
  20.494 +   that works correctly for the features implemented. This applies especially
  20.495 +   to compound values; implementations must implement all parts of the value
  20.496 +   in order to consider the declaration supported, either inside a ruleset or
  20.497 +   in the declaration condition of an ‘<code class=css>@supports</code>’
  20.498 +   rule.</p>
  20.499 +  <!--
  20.500 +<h2 id="at-document">Document queries: the '@document' rule</h2>
  20.501  
  20.502 -  <h2 id=at-document><span class=secno>7. </span>Document queries: the
  20.503 -   ‘<code class=css>@document</code>’ rule</h2>
  20.504 +<p>The <dfn>'@document' rule</dfn> is a conditional group
  20.505 +rule whose condition depends on the
  20.506 +<a href="#url-of-doc">URL of the document being styled</a>.
  20.507 +This allows style sheets, particularly user style sheets, to have styles
  20.508 +that only apply to a set of pages rather than to all pages using the
  20.509 +style sheet.</p>
  20.510  
  20.511 -  <p>The <dfn id=document-rule>‘<code class=css>@document</code>’
  20.512 -   rule</dfn> is a conditional group rule whose condition depends on the <a
  20.513 -   href="#url-of-doc">URL of the document being styled</a>. This allows style
  20.514 -   sheets, particularly user style sheets, to have styles that only apply to
  20.515 -   a set of pages rather than to all pages using the style sheet.
  20.516 +<p class="issue">Given that this @-rule is intended primarily for user
  20.517 +style sheets, what should this specification say about its use in author
  20.518 +style sheets?  Should it be forbidden?  Should use instead be
  20.519 +discouraged?  Or should this specification remain neutral on the
  20.520 +topic, since there are valid uses in author style sheets?</p>
  20.521  
  20.522 -  <p class=issue>Given that this @-rule is intended primarily for user style
  20.523 -   sheets, what should this specification say about its use in author style
  20.524 -   sheets? Should it be forbidden? Should use instead be discouraged? Or
  20.525 -   should this specification remain neutral on the topic, since there are
  20.526 -   valid uses in author style sheets?
  20.527 +<p id="url-of-doc">The <dfn>URL of the document being styled</dfn> is
  20.528 +the URI at which the document is located, excluding any fragment
  20.529 +identifiers.  (This means, for example, that HTTP redirects have been
  20.530 +followed.)  If the styles are being applied inside a complete document
  20.531 +embedded into the presentation of another (e.g., [[HTML5]]'s <code
  20.532 +class="html">iframe</code>, <code class="html">object</code>, or <code
  20.533 +class="html">img</code> elements), the relevant URI is that of the
  20.534 +frame, not of its container.  However, if content from other documents
  20.535 +is mixed in via mechanisms that mix content from one document into
  20.536 +another (e.g., [[SVG11]]'s <code>use</code> element), then the
  20.537 +address of the container document is used.</p>
  20.538  
  20.539 -  <p id=url-of-doc>The <dfn id=url-of-the-document-being-styled>URL of the
  20.540 -   document being styled</dfn> is the URI at which the document is located,
  20.541 -   excluding any fragment identifiers. (This means, for example, that HTTP
  20.542 -   redirects have been followed.) If the styles are being applied inside a
  20.543 -   complete document embedded into the presentation of another (e.g., <a
  20.544 -   href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>'s <code
  20.545 -   class=html>iframe</code>, <code class=html>object</code>, or <code
  20.546 -   class=html>img</code> elements), the relevant URI is that of the frame,
  20.547 -   not of its container. However, if content from other documents is mixed in
  20.548 -   via mechanisms that mix content from one document into another (e.g., <a
  20.549 -   href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>'s
  20.550 -   <code>use</code> element), then the address of the container document is
  20.551 -   used.
  20.552 +<p class="note">Note:  In [[HTML5]], this is the
  20.553 +<a href="http://dev.w3.org/html5/spec/dom.html#documents">document's address</a>
  20.554 +of a document in a
  20.555 +<a href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing context</a>.</p>
  20.556  
  20.557 -  <p class=note>Note: In <a href="#HTML5"
  20.558 -   rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, this is the <a
  20.559 -   href="http://dev.w3.org/html5/spec/dom.html#documents">document's
  20.560 -   address</a> of a document in a <a
  20.561 -   href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing
  20.562 -   context</a>.
  20.563 +<div class="issue">What form of normalization is done on URLs and domains
  20.564 +before matching?  In particular, this specification needs to describe:
  20.565 +<ul>
  20.566 +<li>what form is used for the <a href="#url-of-doc">URL of the document
  20.567 +being styled</a> (and what has been normalized in that form)</li>
  20.568 +<li>what normalization (if any) happens to the argument of each of the match
  20.569 +functions before the comparison that they describe and</li>
  20.570 +<li>whether the
  20.571 +comparison algorithm used is string comparison or some other URL
  20.572 +comparison algorithm.</li></ul></div>
  20.573  
  20.574 -  <div class=issue>What form of normalization is done on URLs and domains
  20.575 -   before matching? In particular, this specification needs to describe:
  20.576 -   <ul>
  20.577 -    <li>what form is used for the <a href="#url-of-doc">URL of the document
  20.578 -     being styled</a> (and what has been normalized in that form)
  20.579 +<p>The '@document' rule's condition is written as a
  20.580 +comma-separated list of <dfn>URL matching functions</dfn>, and the
  20.581 +condition evaluates to true whenever any one of those functions
  20.582 +evaluates to true.  The following URL matching functions are
  20.583 +permitted:</p>
  20.584  
  20.585 -    <li>what normalization (if any) happens to the argument of each of the
  20.586 -     match functions before the comparison that they describe and
  20.587 +<dl>
  20.588 +  <dt><dfn id="url-exact" title="url()|URL matching functions::exact">&lt;url&gt;</dfn></dt>
  20.589  
  20.590 -    <li>whether the comparison algorithm used is string comparison or some
  20.591 -     other URL comparison algorithm.
  20.592 -   </ul>
  20.593 -  </div>
  20.594 +  <dd>
  20.595 +    <p>The 'url()' function is the <dfn>exact url matching
  20.596 +    function</dfn>.  It evaluates to true whenever the <a
  20.597 +    href="#url-of-doc">URL of the document being styled</a> is exactly
  20.598 +    the URL given.</p>
  20.599  
  20.600 -  <p>The ‘<code class=css>@document</code>’ rule's condition is written
  20.601 -   as a comma-separated list of <dfn id=url-matching-functions>URL matching
  20.602 -   functions</dfn>, and the condition evaluates to true whenever any one of
  20.603 -   those functions evaluates to true. The following URL matching functions
  20.604 -   are permitted:
  20.605 +    <p class="Note">The 'url()' function, since it is a core syntax
  20.606 +    element in CSS, is allowed (subject to different character
  20.607 +    limitations and thus escaping requirements) to contain an unquoted
  20.608 +    value (in addition to the string values that are allowed as
  20.609 +    arguments for all four functions).</p>
  20.610  
  20.611 -  <dl>
  20.612 -   <dt><dfn id=url-exact
  20.613 -    title="url()|URL matching functions::exact">&lt;url&gt;</dfn>
  20.614 -
  20.615 -   <dd>
  20.616 -    <p>The ‘<a href="#url-exact"><code class=css>url()</code></a>’
  20.617 -     function is the <dfn id=exact-url-matching-function>exact url matching
  20.618 -     function</dfn>. It evaluates to true whenever the <a
  20.619 -     href="#url-of-doc">URL of the document being styled</a> is exactly the
  20.620 -     URL given.
  20.621 -
  20.622 -    <p class=Note>The ‘<a href="#url-exact"><code
  20.623 -     class=css>url()</code></a>’ function, since it is a core syntax
  20.624 -     element in CSS, is allowed (subject to different character limitations
  20.625 -     and thus escaping requirements) to contain an unquoted value (in
  20.626 -     addition to the string values that are allowed as arguments for all four
  20.627 -     functions).
  20.628 -
  20.629 -    <div class=example>
  20.630 -     <p>For example, this rule:
  20.631 -
  20.632 -     <pre>@document url("http://www.w3.org/Style/CSS/") {
  20.633 +    <div class="example">
  20.634 +      <p>For example, this rule:</p>
  20.635 +<pre>@document url("http://www.w3.org/Style/CSS/") {
  20.636    #summary { background: yellow; color: black}
  20.637  }</pre>
  20.638 +      <p>styles the <code class="html">summary</code> element on the page
  20.639 +      <code>http://www.w3.org/Style/CSS/</code>, but not on any other
  20.640 +      pages.</p>
  20.641 +    </div>
  20.642 +  </dd>
  20.643  
  20.644 -     <p>styles the <code class=html>summary</code> element on the page
  20.645 -      <code>http://www.w3.org/Style/CSS/</code>, but not on any other pages.
  20.646 -    </div>
  20.647 +  <dt><dfn id="url-prefix" title="url-prefix()|URL matching functions::prefix">url-prefix(&lt;string&gt;)</dfn></dt>
  20.648  
  20.649 -   <dt><dfn id=url-prefix
  20.650 -    title="url-prefix()|URL matching functions::prefix">url-prefix(&lt;string&gt;)</dfn>
  20.651 -
  20.652 -   <dd>
  20.653 -    <p>The ‘<a href="#url-prefix"><code
  20.654 -     class=css>url-prefix()</code></a>’ function is the <dfn
  20.655 -     id=url-prefix-matching-function>url prefix matching function</dfn>. It
  20.656 -     evaluates to true whenever the <a href="#url-of-doc">URL of the document
  20.657 -     being styled</a> has the argument to the function as an initial
  20.658 -     substring (which is true when the two strings are equal). When the
  20.659 -     argument is the empty string, it evaluates to true for all documents.
  20.660 -
  20.661 -    <div class=example>
  20.662 -     <p>For example, this rule:
  20.663 -
  20.664 -     <pre>@document url-prefix("http://www.w3.org/Style/CSS/") {
  20.665 +  <dd>
  20.666 +    <p>The 'url-prefix()' function is the <dfn>url prefix
  20.667 +    matching function</dfn>.  It evaluates to true whenever the
  20.668 +    <a href="#url-of-doc">URL of the document being styled</a>
  20.669 +    has the argument to the function as an
  20.670 +    initial substring (which is true when the two strings are equal).
  20.671 +    When the argument is the empty string, it evaluates to true for all
  20.672 +    documents.</p>
  20.673 +    <div class="example">
  20.674 +      <p>For example, this rule:</p>
  20.675 +<pre>@document url-prefix("http://www.w3.org/Style/CSS/") {
  20.676    #summary { background: yellow; color: black}
  20.677  }</pre>
  20.678 +      <p>styles the <code class="html">summary</code> element on the page
  20.679 +      <code>http://www.w3.org/Style/CSS/</code> and on the page
  20.680 +      <code>http://www.w3.org/Style/CSS/Test</code>, but it does not
  20.681 +      affect the page <code>http://www.w3.org/</code> or the page
  20.682 +      <code>http://www.example.com/Style/CSS/</code>.</p>
  20.683 +    </div>
  20.684 +  </dd>
  20.685  
  20.686 -     <p>styles the <code class=html>summary</code> element on the page
  20.687 -      <code>http://www.w3.org/Style/CSS/</code> and on the page
  20.688 -      <code>http://www.w3.org/Style/CSS/Test</code>, but it does not affect
  20.689 -      the page <code>http://www.w3.org/</code> or the page
  20.690 -      <code>http://www.example.com/Style/CSS/</code>.
  20.691 -    </div>
  20.692 +  <dt><dfn id="url-domain" title="domain()|URL matching functions::domain">domain(&lt;string&gt;)</dfn></dt>
  20.693  
  20.694 -   <dt><dfn id=url-domain
  20.695 -    title="domain()|URL matching functions::domain">domain(&lt;string&gt;)</dfn>
  20.696 -
  20.697 -   <dd>
  20.698 -    <p>The ‘<a href="#url-domain"><code class=css>domain()</code></a>’
  20.699 -     function is the <dfn id=domain-matching-function>domain matching
  20.700 -     function</dfn>. It evaluates to true whenever the <a
  20.701 -     href="#url-of-doc">URL of the document being styled</a> has a host
  20.702 -     subcomponent (as defined in <a href="#URI"
  20.703 -     rel=biblioentry>[URI]<!--{{!URI}}--></a>) and that host subcomponent is
  20.704 -     exactly the argument to the ‘<a href="#url-domain"><code
  20.705 -     class=css>domain()</code></a>’ function or a final substring of the
  20.706 -     host component is a period (U+002E) immediately followed by the argument
  20.707 -     to the ‘<a href="#url-domain"><code class=css>domain()</code></a>’
  20.708 -     function.
  20.709 -
  20.710 -    <div class=example>
  20.711 -     <p>For example, this rule:
  20.712 -
  20.713 -     <pre>@document domain("w3.org") {
  20.714 +  <dd>
  20.715 +    <p>The 'domain()' function is the <dfn>domain
  20.716 +    matching function</dfn>.  It evaluates to true whenever
  20.717 +    the <a href="#url-of-doc">URL of the document being styled</a>
  20.718 +    has a host subcomponent (as defined in [[!URI]])
  20.719 +    and that host subcomponent is exactly the argument to the
  20.720 +    'domain()' function or a final substring of the host
  20.721 +    component is a period (U+002E) immediately followed by the argument
  20.722 +    to the 'domain()' function.</p>
  20.723 +    <div class="example">
  20.724 +      <p>For example, this rule:</p>
  20.725 +<pre>@document domain("w3.org") {
  20.726    body { font-size: 16px ! important }
  20.727  }</pre>
  20.728 -
  20.729 -     <p>changes the font size of the body element for pages such as
  20.730 +      <p>changes the font size of the body element for pages such as
  20.731        <code>http://www.w3.org/Style/CSS/</code> and
  20.732        <code>http://w3.org/Style/CSS/</code> and
  20.733 -      <code>http://lists.w3.org/Archives/Public/www-style/</code> but it does
  20.734 -      not affect the page <code>http://www.example.com/Style/CSS/</code>.
  20.735 +      <code>http://lists.w3.org/Archives/Public/www-style/</code>
  20.736 +      but it does not affect the page
  20.737 +      <code>http://www.example.com/Style/CSS/</code>.</p>
  20.738      </div>
  20.739 +  </dd>
  20.740  
  20.741 -   <dt><dfn id=url-regexp
  20.742 -    title="regexp()|URL matching functions::regular expression">regexp(&lt;string&gt;)</dfn>
  20.743 +  <dt><dfn id="url-regexp" title="regexp()|URL matching functions::regular expression">regexp(&lt;string&gt;)</dfn></dt>
  20.744  
  20.745 -   <dd>
  20.746 +  <dd>
  20.747      <p>The contents of the &lt;string&gt; argument <strong>must</strong>
  20.748 -     match the JavaScript <code>Pattern</code> production (<a
  20.749 -     href="#ECMA-262-5.1"
  20.750 -     rel=biblioentry>[ECMA-262-5.1]<!--{{!ECMA-262-5.1}}--></a>, section
  20.751 -     15.10.1). However, failing to do so is not a CSS syntax error and does
  20.752 -     not trigger any error handling for CSS syntax errors.
  20.753 +    match the JavaScript <code>Pattern</code> production
  20.754 +    ([[!ECMA-262-5.1]], section 15.10.1).  However,
  20.755 +    failing to do so is not a CSS syntax error and does not trigger any
  20.756 +    error handling for CSS syntax errors.</p>
  20.757  
  20.758 -    <p>The ‘<a href="#url-regexp"><code class=css>regexp()</code></a>’
  20.759 -     function evaluates to true whenever the string argument compiled as a
  20.760 -     JavaScript regular expression with the <code>global</code>,
  20.761 -     <code>ignoreCase</code> and <code>multiline</code> flags
  20.762 -     <em>disabled</em> (see <a href="#ECMA-262-5.1"
  20.763 -     rel=biblioentry>[ECMA-262-5.1]<!--{{!ECMA-262-5.1}}--></a>, sections
  20.764 -     15.10.7.2 through 15.10.7.4) compiles successfully and the resulting
  20.765 -     regular expression matches the entirety of the <a href="#url-of-doc">URL
  20.766 -     of the document being styled</a>.
  20.767 +    <p>The ''regexp()'' function evaluates to true whenever the string
  20.768 +    argument compiled as a JavaScript regular expression with the
  20.769 +    <code>global</code>, <code>ignoreCase</code> and
  20.770 +    <code>multiline</code> flags <em>disabled</em>
  20.771 +    (see [[!ECMA-262-5.1]], sections 15.10.7.2 through 15.10.7.4)
  20.772 +    compiles successfully and the resulting regular expression matches
  20.773 +    the entirety of the
  20.774 +    <a href="#url-of-doc">URL of the document being styled</a>.</p>
  20.775  
  20.776 -    <p class=note>Note that regular expression must match the entire URL, not
  20.777 -     just a part of it.
  20.778 +    <p class="note">Note that regular expression must match the entire
  20.779 +    URL, not just a part of it.</p>
  20.780  
  20.781 -    <p class=note>Note that this definition intentionally matches the
  20.782 -     behavior of the <a
  20.783 -     href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code
  20.784 -     class=html>pattern</code> attribute</a> on the <code
  20.785 -     class=html>input</code> element in <a href="#HTML5"
  20.786 -     rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>.
  20.787 +    <p class="note">Note that this definition intentionally matches the
  20.788 +    behavior of the <a
  20.789 +    href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code class="html">pattern</code>
  20.790 +    attribute</a> on the <code class="html">input</code> element
  20.791 +    in [[HTML5]].</p>
  20.792  
  20.793 -    <div class=example>
  20.794 -     <p>For example, this rule:
  20.795 -
  20.796 -     <pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {
  20.797 +    <div class="example">
  20.798 +      <p>For example, this rule:</p>
  20.799 +<pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {
  20.800    body { font-size: 20px ! important }
  20.801  }</pre>
  20.802 +      <p>changes the font size of the body element for pages such as
  20.803 +      <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>.</p>
  20.804 +      <p class="note">Note that the backslashes in the regular
  20.805 +      expression require CSS escaping as ''\\''.</p>
  20.806 +    </div>
  20.807 +  </dd>
  20.808  
  20.809 -     <p>changes the font size of the body element for pages such as
  20.810 -      <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>.
  20.811 +</dl>
  20.812  
  20.813 -     <p class=note>Note that the backslashes in the regular expression
  20.814 -      require CSS escaping as ‘<code class=css>\\</code>’.
  20.815 -    </div>
  20.816 -  </dl>
  20.817 +<p>Implementations <strong>must</strong> treat any unknown URL matching
  20.818 +functions as a syntax error, and thus ignore the '@document' rule.
  20.819 +<span class="issue">Should we instead have more complicated error
  20.820 +handling rules to make forward-compatibility work differently, or is
  20.821 +this rule the best solution for such future expansion anyway?</span></p>
  20.822  
  20.823 -  <p>Implementations <strong>must</strong> treat any unknown URL matching
  20.824 -   functions as a syntax error, and thus ignore the ‘<code
  20.825 -   class=css>@document</code>’ rule. <span class=issue>Should we instead
  20.826 -   have more complicated error handling rules to make forward-compatibility
  20.827 -   work differently, or is this rule the best solution for such future
  20.828 -   expansion anyway?</span>
  20.829 +<div class="issue">This syntax doesn't offer any ability to do negations,
  20.830 +which has been requested in <a
  20.831 +href="https://bugzilla.mozilla.org/show_bug.cgi?id=349813">Mozilla bug
  20.832 +349813</a>.  Use cases that people have wanted negations for
  20.833 +include:
  20.834 +<ul>
  20.835 +  <li>User style sheets that want a particular rule in general, but know
  20.836 +  that that rule does more harm than good on specific sites.</li>
  20.837 +  <li>Authors who have a rule that they want to apply to most of their
  20.838 +  pages, but wish to make a few exceptions for.</li>
  20.839 +</ul>
  20.840 +</div>
  20.841  
  20.842 -  <div class=issue>This syntax doesn't offer any ability to do negations,
  20.843 -   which has been requested in <a
  20.844 -   href="https://bugzilla.mozilla.org/show_bug.cgi?id=349813">Mozilla bug
  20.845 -   349813</a>. Use cases that people have wanted negations for include:
  20.846 -   <ul>
  20.847 -    <li>User style sheets that want a particular rule in general, but know
  20.848 -     that that rule does more harm than good on specific sites.
  20.849 -
  20.850 -    <li>Authors who have a rule that they want to apply to most of their
  20.851 -     pages, but wish to make a few exceptions for.
  20.852 -   </ul>
  20.853 -  </div>
  20.854 -
  20.855 -  <p>This extends the lexical scanner in the <a
  20.856 -   href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a
  20.857 -   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) by
  20.858 -   adding:
  20.859 -
  20.860 -  <pre>@{D}{O}{C}{U}{M}{E}{N}{T}	{return DOCUMENT_SYM;}</pre>
  20.861 -
  20.862 -  <p>and the grammar by adding
  20.863 -
  20.864 -  <pre>document_rule
  20.865 +<p>This extends the lexical scanner in the
  20.866 +<a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a>
  20.867 +([[!CSS21]], Appendix G) by adding:
  20.868 +<pre>@{D}{O}{C}{U}{M}{E}{N}{T}	{return DOCUMENT_SYM;}</pre>
  20.869 +<p>and the grammar by adding</p>
  20.870 +<pre>document_rule
  20.871    : DOCUMENT_SYM S+ url_match_fn ( "," S* url_match_fn )* group_rule_body
  20.872    ;
  20.873  
  20.874  url_match_fn
  20.875    : (URI | FUNCTION S* STRING S* ')' ) S*
  20.876    ;</pre>
  20.877 +-->
  20.878  
  20.879 -  <h2 id=apis><span class=secno>8. </span>APIs</h2>
  20.880 +  <h2 id=apis><span class=secno>7. </span>APIs</h2>
  20.881  
  20.882 -  <h3 id=extentions-to-cssrule-interface><span class=secno>8.1. </span>
  20.883 +  <h3 id=extentions-to-cssrule-interface><span class=secno>7.1. </span>
  20.884     Extensions to the <code>CSSRule</code> interface</h3>
  20.885  
  20.886    <p>The <code>CSSRule</code> interface is extended as follows:
  20.887  
  20.888    <pre class=idl>partial interface CSSRule {
  20.889      const unsigned short SUPPORTS_RULE = 12;
  20.890 +    <!--
  20.891      const unsigned short DOCUMENT_RULE = 13;
  20.892 +    -->
  20.893  }</pre>
  20.894  
  20.895 -  <h3 id=the-cssgroupingrule-interface><span class=secno>8.2. </span> The <a
  20.896 +  <h3 id=the-cssgroupingrule-interface><span class=secno>7.2. </span> The <a
  20.897     href="#cssgroupingrule"><code>CSSGroupingRule</code></a> interface</h3>
  20.898  
  20.899    <p>The <dfn id=cssgroupingrule><code>CSSGroupingRule</code></dfn> interface
  20.900 @@ -1116,7 +1070,7 @@
  20.901      CSS rule list returned by <code>cssRules</code> at <var>index</var>.
  20.902    </dl>
  20.903  
  20.904 -  <h3 id=the-cssconditionrule-interface><span class=secno>8.3. </span> The <a
  20.905 +  <h3 id=the-cssconditionrule-interface><span class=secno>7.3. </span> The <a
  20.906     href="#cssconditionrule"><code>CSSConditionRule</code></a> interface</h3>
  20.907  
  20.908    <p>The <dfn id=cssconditionrule><code>CSSConditionRule</code></dfn>
  20.909 @@ -1157,7 +1111,7 @@
  20.910      </ol>
  20.911    </dl>
  20.912  
  20.913 -  <h3 id=the-cssmediarule-interface><span class=secno>8.4. </span> The <a
  20.914 +  <h3 id=the-cssmediarule-interface><span class=secno>7.4. </span> The <a
  20.915     href="#cssmediarule"><code>CSSMediaRule</code></a> interface</h3>
  20.916  
  20.917    <p>The <dfn id=cssmediarule><code>CSSMediaRule</code></dfn> interface
  20.918 @@ -1184,26 +1138,25 @@
  20.919       <code>media.mediaText</code> attribute on the rule.
  20.920    </dl>
  20.921  
  20.922 -  <h3 id=the-csssupportsrule-interface><span class=secno>8.5. </span> The <a
  20.923 +  <h3 id=the-csssupportsrule-interface><span class=secno>7.5. </span> The <a
  20.924     href="#csssupportsrule"><code>CSSSupportsRule</code></a> interface</h3>
  20.925  
  20.926    <p>The <dfn id=csssupportsrule><code>CSSSupportsRule</code></dfn> interface
  20.927 -   represents a ‘<a href="#dfn-support"><code
  20.928 -   class=css>@supports</code></a>’ rule.
  20.929 +   represents a ‘<code class=css>@supports</code>’ rule.
  20.930  
  20.931    <pre class=idl>interface CSSSupportsRule : CSSConditionRule {
  20.932  }</pre>
  20.933 +  <!--
  20.934 +<h3 id="the-cssdocumentrule-interface">
  20.935 +The <code>CSSDocumentRule</code> interface</h3>
  20.936  
  20.937 -  <h3 id=the-cssdocumentrule-interface><span class=secno>8.6. </span> The <a
  20.938 -   href="#cssdocumentrule"><code>CSSDocumentRule</code></a> interface</h3>
  20.939 +<p>The <dfn><code>CSSDocumentRule</code></dfn> interface represents a ''@document'' rule.</p>
  20.940  
  20.941 -  <p>The <dfn id=cssdocumentrule><code>CSSDocumentRule</code></dfn> interface
  20.942 -   represents a ‘<code class=css>@document</code>’ rule.
  20.943 +<pre class='idl'>interface CSSDocumentRule : CSSConditionRule {
  20.944 +}</pre>
  20.945 +-->
  20.946  
  20.947 -  <pre class=idl>interface CSSDocumentRule : CSSConditionRule {
  20.948 -}</pre>
  20.949 -
  20.950 -  <h3 id=the-css-interface><span class=secno>8.7. </span> The <a
  20.951 +  <h3 id=the-css-interface><span class=secno>7.6. </span> The <a
  20.952     href="#CSS-interface"><code>CSS</code></a> interface, and the <code
  20.953     title="">supports()</code> function</h3>
  20.954  
  20.955 @@ -1231,13 +1184,24 @@
  20.956      <p> When invoked with a single <var>conditionText</var> argument, it must
  20.957       return <code>true</code> if <var>conditionText</var>, when parsed and
  20.958       evaluated as a <a
  20.959 -     href="#supportscondition"><code>supports_condition</code></a>, would
  20.960 +     href="#supports_condition"><code>supports_condition</code></a>, would
  20.961       return true. Otherwise, it must return <code>false</code>.
  20.962    </dl>
  20.963  
  20.964 -  <h2 id=conformance><span class=secno>9. </span>Conformance</h2>
  20.965 +  <h2 class=no-num id=grammar>Grammar</h2>
  20.966  
  20.967 -  <h3 id=base-modules><span class=secno>9.1. </span>Base Modules</h3>
  20.968 +  <p>In order to allow these new @-rules in CSS style sheets, this
  20.969 +   specification modifies the <code>stylesheet</code> production in the <a
  20.970 +   href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of
  20.971 +   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing
  20.972 +   the <code>media</code> production defined in <a href="#CSS21"
  20.973 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <code>media</code>
  20.974 +   production defined in this one, and additionally inserting <code>|
  20.975 +   supports_rule</code> alongside <code>ruleset | media | page</code>.
  20.976 +
  20.977 +  <h2 id=conformance><span class=secno>8. </span>Conformance</h2>
  20.978 +
  20.979 +  <h3 id=base-modules><span class=secno>8.1. </span>Base Modules</h3>
  20.980  
  20.981    <p>This specification defines conformance in terms of base modules, which
  20.982     are modules that this specification builds on top of. The base modules of
  20.983 @@ -1270,7 +1234,7 @@
  20.984     such syntax does not make a style sheet nonconformant and failure to treat
  20.985     such syntax as invalid does not make a processor nonconformant.
  20.986  
  20.987 -  <h3 id=conformance-classes><span class=secno>9.2. </span>Conformance
  20.988 +  <h3 id=conformance-classes><span class=secno>8.2. </span>Conformance
  20.989     Classes</h3>
  20.990  
  20.991    <p>Conformance to the CSS Conditional Rules Module is defined for three
  20.992 @@ -1315,7 +1279,7 @@
  20.993     it writes style sheets that conform to the module and (if it reads CSS) it
  20.994     is a conformant processor.
  20.995  
  20.996 -  <h3 id=partial><span class=secno>9.3. </span> Partial Implementations</h3>
  20.997 +  <h3 id=partial><span class=secno>8.3. </span> Partial Implementations</h3>
  20.998  
  20.999    <p>So that authors can exploit the forward-compatible parsing rules to
 20.1000     assign fallback values, CSS renderers <strong>must</strong> treat as
 20.1001 @@ -1329,7 +1293,7 @@
 20.1002     unsupported values must be), CSS requires that the entire declaration be
 20.1003     ignored.
 20.1004  
 20.1005 -  <h3 id=experimental><span class=secno>9.4. </span>Experimental
 20.1006 +  <h3 id=experimental><span class=secno>8.4. </span>Experimental
 20.1007     Implementations</h3>
 20.1008  
 20.1009    <p>To avoid clashes with future CSS features, the CSS specifications
 20.1010 @@ -1343,7 +1307,7 @@
 20.1011     should implement the non-prefixed syntax for any feature they consider to
 20.1012     be correctly implemented according to spec.
 20.1013  
 20.1014 -  <h3 id=cr-exit-criteria><span class=secno>9.5. </span>CR Exit Criteria</h3>
 20.1015 +  <h3 id=cr-exit-criteria><span class=secno>8.5. </span>CR Exit Criteria</h3>
 20.1016  
 20.1017    <p>For this specification to be advanced to Proposed Recommendation, there
 20.1018     must be at least two independent, interoperable implementations of each
 20.1019 @@ -1391,17 +1355,39 @@
 20.1020    <p>The specification will remain Candidate Recommendation for at least six
 20.1021     months.
 20.1022  
 20.1023 -  <h2 class=no-num id=grammar>Grammar</h2>
 20.1024 +  <h2 id=changes><span class=secno>9. </span> Changes</h2>
 20.1025  
 20.1026 -  <p>In order to allow these new @-rules in CSS style sheets, this
 20.1027 -   specification modifies the <code>stylesheet</code> production in the <a
 20.1028 -   href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of
 20.1029 -   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing
 20.1030 -   the <code>media</code> production defined in <a href="#CSS21"
 20.1031 -   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <code>media</code>
 20.1032 -   production defined in this one, and additionally inserting <code>|
 20.1033 -   supports_rule | document_rule</code> alongside <code>ruleset | media |
 20.1034 -   page</code>.
 20.1035 +  <p>The following (non-editorial) changes were made to this specification
 20.1036 +   since the <a
 20.1037 +   href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">11
 20.1038 +   September 2012 Working Draft</a>:
 20.1039 +
 20.1040 +  <ul>
 20.1041 +   <li>Removed ‘<code class=css>@document</code>’ rule; it has been
 20.1042 +    deferred to Level 4.
 20.1043 +
 20.1044 +   <li>Allow functional notation in ‘<code class=css>@supports</code>’
 20.1045 +    queries to be valid (to allow for future extensions), but treat such
 20.1046 +    notations as always being false.
 20.1047 +
 20.1048 +   <li>Corrected the grammar as follows:
 20.1049 +    <pre>
 20.1050 +-  : SUPPORTS_SYM S+ supports_condition group_rule_body
 20.1051 ++  : SUPPORTS_SYM S* supports_condition group_rule_body
 20.1052 +</pre>
 20.1053 +
 20.1054 +    <pre>
 20.1055 +-  : (URI | FUNCTION) S*
 20.1056 ++  : (URI | FUNCTION S* STRING S* ')' ) S*
 20.1057 +</pre>
 20.1058 +
 20.1059 +   <li>Switched "and", "or", and "not" keywords to use appropriate
 20.1060 +    productions rather than literals.
 20.1061 +
 20.1062 +   <li>Clarified definition of support used for interpreting ‘<code
 20.1063 +    class=css>@support</code>’ rules and its relationship to CSS
 20.1064 +    forwards-compatible parsing rules.
 20.1065 +  </ul>
 20.1066  
 20.1067    <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
 20.1068  
 20.1069 @@ -1453,16 +1439,6 @@
 20.1070     </dd>
 20.1071     <!---->
 20.1072  
 20.1073 -   <dt id=ECMA-262-5.1>[ECMA-262-5.1]
 20.1074 -
 20.1075 -   <dd><a
 20.1076 -    href="http://www.ecma-international.org/publications/standards/Ecma-262.htm"><cite>ECMAScript
 20.1077 -    Language Specification, Edition 5.1.</cite></a> June 2011. ISO/IEC
 20.1078 -    16262:2011. URL: <a
 20.1079 -    href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">http://www.ecma-international.org/publications/standards/Ecma-262.htm</a>
 20.1080 -   </dd>
 20.1081 -   <!---->
 20.1082 -
 20.1083     <dt id=MEDIAQ>[MEDIAQ]
 20.1084  
 20.1085     <dd>Florian Rivoal. <a
 20.1086 @@ -1480,16 +1456,6 @@
 20.1087      href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
 20.1088     </dd>
 20.1089     <!---->
 20.1090 -
 20.1091 -   <dt id=URI>[URI]
 20.1092 -
 20.1093 -   <dd>T. Berners-Lee; R. Fielding; L. Masinter. <a
 20.1094 -    href="http://www.ietf.org/rfc/rfc3986.txt"><cite>Uniform Resource
 20.1095 -    Identifiers (URI): generic syntax.</cite></a> January 2005. Internet RFC
 20.1096 -    3986. URL: <a
 20.1097 -    href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a>
 20.1098 -   </dd>
 20.1099 -   <!---->
 20.1100    </dl>
 20.1101    <!--end-normative-->
 20.1102  
 20.1103 @@ -1520,25 +1486,6 @@
 20.1104      href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a>
 20.1105     </dd>
 20.1106     <!---->
 20.1107 -
 20.1108 -   <dt id=HTML5>[HTML5]
 20.1109 -
 20.1110 -   <dd>Ian Hickson. <a
 20.1111 -    href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
 20.1112 -    25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
 20.1113 -    href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
 20.1114 -   </dd>
 20.1115 -   <!---->
 20.1116 -
 20.1117 -   <dt id=SVG11>[SVG11]
 20.1118 -
 20.1119 -   <dd>Erik Dahlström; et al. <a
 20.1120 -    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
 20.1121 -    Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
 20.1122 -    W3C Recommendation. URL: <a
 20.1123 -    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
 20.1124 -   </dd>
 20.1125 -   <!---->
 20.1126    </dl>
 20.1127    <!--end-informative-->
 20.1128  
 20.1129 @@ -1552,110 +1499,63 @@
 20.1130     <li>conformance
 20.1131      <ul>
 20.1132       <li>authoring tool, <a href="#conform-authoring-tool"
 20.1133 -      title="conformance, authoring tool"><strong>9.2.</strong></a>
 20.1134 +      title="conformance, authoring tool"><strong>8.2.</strong></a>
 20.1135  
 20.1136       <li>processor, <a href="#conform-processor"
 20.1137 -      title="conformance, processor"><strong>9.2.</strong></a>
 20.1138 +      title="conformance, processor"><strong>8.2.</strong></a>
 20.1139  
 20.1140       <li>style sheet, <a href="#conform-style-sheet"
 20.1141 -      title="conformance, style sheet"><strong>9.2.</strong></a>
 20.1142 +      title="conformance, style sheet"><strong>8.2.</strong></a>
 20.1143      </ul>
 20.1144  
 20.1145     <li><a href="#CSS-interface"><code>CSS</code></a>, <a
 20.1146 -    href="#CSS-interface" title=CSS><strong>8.7.</strong></a>
 20.1147 +    href="#CSS-interface" title=CSS><strong>7.6.</strong></a>
 20.1148  
 20.1149     <li><a href="#cssconditionrule"><code>CSSConditionRule</code></a>, <a
 20.1150 -    href="#cssconditionrule" title=CSSConditionRule><strong>8.3.</strong></a>
 20.1151 -
 20.1152 -   <li><a href="#cssdocumentrule"><code>CSSDocumentRule</code></a>, <a
 20.1153 -    href="#cssdocumentrule" title=CSSDocumentRule><strong>8.6.</strong></a>
 20.1154 +    href="#cssconditionrule" title=CSSConditionRule><strong>7.3.</strong></a>
 20.1155  
 20.1156     <li><a href="#cssgroupingrule"><code>CSSGroupingRule</code></a>, <a
 20.1157 -    href="#cssgroupingrule" title=CSSGroupingRule><strong>8.2.</strong></a>
 20.1158 +    href="#cssgroupingrule" title=CSSGroupingRule><strong>7.2.</strong></a>
 20.1159  
 20.1160     <li><a href="#cssmediarule"><code>CSSMediaRule</code></a>, <a
 20.1161 -    href="#cssmediarule" title=CSSMediaRule><strong>8.4.</strong></a>
 20.1162 +    href="#cssmediarule" title=CSSMediaRule><strong>7.4.</strong></a>
 20.1163  
 20.1164     <li><a href="#csssupportsrule"><code>CSSSupportsRule</code></a>, <a
 20.1165 -    href="#csssupportsrule" title=CSSSupportsRule><strong>8.5.</strong></a>
 20.1166 -
 20.1167 -   <li>‘<code class=css>@document</code>’ rule, <a href="#document-rule"
 20.1168 -    title="'@document' rule"><strong>7.</strong></a>
 20.1169 -
 20.1170 -   <li>domain(), <a href="#url-domain"
 20.1171 -    title="domain()"><strong>7.</strong></a>
 20.1172 -
 20.1173 -   <li>domain matching function, <a href="#domain-matching-function"
 20.1174 -    title="domain matching function"><strong>7.</strong></a>
 20.1175 -
 20.1176 -   <li>exact url matching function, <a href="#exact-url-matching-function"
 20.1177 -    title="exact url matching function"><strong>7.</strong></a>
 20.1178 +    href="#csssupportsrule" title=CSSSupportsRule><strong>7.5.</strong></a>
 20.1179  
 20.1180     <li>group rule body, <a href="#group-rule-body"
 20.1181      title="group rule body"><strong>3.</strong></a>
 20.1182  
 20.1183 -   <li>‘<code class=css>@media</code>’ rule, <a href="#media-rule"
 20.1184 +   <li>‘<code class=css>@media</code>’ rule, <a href="#atmedia-rule"
 20.1185      title="'@media' rule"><strong>5.</strong></a>
 20.1186  
 20.1187 -   <li>regexp(), <a href="#url-regexp"
 20.1188 -    title="regexp()"><strong>7.</strong></a>
 20.1189 -
 20.1190     <li>support, <a href="#dfn-support"
 20.1191      title=support><strong>6.1.</strong></a>
 20.1192  
 20.1193 -   <li>supports_condition, <a href="#supportscondition"
 20.1194 +   <li>supports_condition, <a href="#supports_condition"
 20.1195      title="supports_condition"><strong>6.</strong></a>
 20.1196  
 20.1197 -   <li>supports_condition_in_parens, <a href="#supportsconditioninparens"
 20.1198 +   <li>supports_condition_in_parens, <a href="#supports_condition_in_parens"
 20.1199      title="supports_condition_in_parens"><strong>6.</strong></a>
 20.1200  
 20.1201 -   <li>supports_conjunction, <a href="#supportsconjunction"
 20.1202 +   <li>supports_conjunction, <a href="#supports_conjunction"
 20.1203      title="supports_conjunction"><strong>6.</strong></a>
 20.1204  
 20.1205     <li>supports_declaration_condition, <a
 20.1206 -    href="#supportsdeclarationcondition"
 20.1207 +    href="#supports_declaration_condition"
 20.1208      title="supports_declaration_condition"><strong>6.</strong></a>
 20.1209  
 20.1210 -   <li>supports_disjunction, <a href="#supportsdisjunction"
 20.1211 +   <li>supports_disjunction, <a href="#supports_disjunction"
 20.1212      title="supports_disjunction"><strong>6.</strong></a>
 20.1213  
 20.1214 -   <li>supports_negation, <a href="#supportsnegation"
 20.1215 +   <li>supports_negation, <a href="#supports_negation"
 20.1216      title="supports_negation"><strong>6.</strong></a>
 20.1217  
 20.1218 -   <li>‘<a href="#dfn-support"><code class=css>@supports</code></a>’
 20.1219 -    rule, <a href="#supports-rule"
 20.1220 -    title="'@supports' rule"><strong>6.</strong></a>
 20.1221 +   <li>‘<code class=css>@supports</code>’ rule, <a
 20.1222 +    href="#atsupports-rule" title="'@supports' rule"><strong>6.</strong></a>
 20.1223  
 20.1224 -   <li>supports_rule, <a href="#supportsrule"
 20.1225 +   <li>supports_rule, <a href="#supports_rule"
 20.1226      title="supports_rule"><strong>6.</strong></a>
 20.1227 -
 20.1228 -   <li>url(), <a href="#url-exact" title="url()"><strong>7.</strong></a>
 20.1229 -
 20.1230 -   <li>URL matching functions, <a href="#url-matching-functions"
 20.1231 -    title="URL matching functions"><strong>7.</strong></a>
 20.1232 -    <ul>
 20.1233 -     <li>domain, <a href="#url-domain"
 20.1234 -      title="URL matching functions, domain"><strong>7.</strong></a>
 20.1235 -
 20.1236 -     <li>exact, <a href="#url-exact"
 20.1237 -      title="URL matching functions, exact"><strong>7.</strong></a>
 20.1238 -
 20.1239 -     <li>prefix, <a href="#url-prefix"
 20.1240 -      title="URL matching functions, prefix"><strong>7.</strong></a>
 20.1241 -
 20.1242 -     <li>regular expression, <a href="#url-regexp"
 20.1243 -      title="URL matching functions, regular expression"><strong>7.</strong></a>
 20.1244 -    </ul>
 20.1245 -
 20.1246 -   <li>URL of the document being styled, <a
 20.1247 -    href="#url-of-the-document-being-styled"
 20.1248 -    title="URL of the document being styled"><strong>7.</strong></a>
 20.1249 -
 20.1250 -   <li>url-prefix(), <a href="#url-prefix"
 20.1251 -    title="url-prefix()"><strong>7.</strong></a>
 20.1252 -
 20.1253 -   <li>url prefix matching function, <a href="#url-prefix-matching-function"
 20.1254 -    title="url prefix matching function"><strong>7.</strong></a>
 20.1255    </ul>
 20.1256    <!--end-index-->
 20.1257  </html>
    21.1 --- a/css3-conditional/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    21.2 +++ b/css3-conditional/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    21.3 @@ -27,7 +27,7 @@
    21.4      <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
    21.5  
    21.6    <dt>Previous version:
    21.7 -    <dd><a href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a></dd>
    21.8 +    <dd><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">http://www.w3.org/TR/2012/WD-css3-conditional-20120911/</a></dd>
    21.9  
   21.10    <dt>Editors:
   21.11      <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a>,
   21.12 @@ -64,8 +64,8 @@
   21.13    which builds on CSS level&nbsp;1 [[CSS1]].
   21.14    The main extensions compared to level&nbsp;2 are
   21.15    allowing nesting of certain at-rules inside '@media',
   21.16 -  the addition of the '@supports' and '@document'
   21.17 -  rules for conditional processing.
   21.18 +  and the addition of the '@supports'
   21.19 +  rule for conditional processing.
   21.20  
   21.21  <h2 class="no-num no-toc" id="status">Status of this document</h2>
   21.22  
   21.23 @@ -89,12 +89,16 @@
   21.24    <li>The '@supports' rule is at risk; if interoperable
   21.25    implementations are not found, it may be removed to advance the other
   21.26    features in this specification to Proposed Recommendation.</li>
   21.27 +</ul>
   21.28  
   21.29 -  <li>The '@document' rule is at risk; if interoperable
   21.30 -  implementations are not found, it may be removed to advance the other
   21.31 -  features in this specification to Proposed Recommendation.</li>
   21.32 +<!--
   21.33  
   21.34 -</ul>
   21.35 +  Things to go in level 4:
   21.36 +
   21.37 +  * Create some way to put these new conditional things on an @import.
   21.38 +  * The @document rule (commented out, down below).
   21.39 +
   21.40 +-->
   21.41  
   21.42  <h2 class="no-num no-toc" id="contents">Table of contents</h2>
   21.43  
   21.44 @@ -121,8 +125,8 @@
   21.45    to combine CSS features involving @-rules with media specific style
   21.46    sheets within a single style sheet.</p>
   21.47  
   21.48 -  <p>This specification also defines additional types of conditional
   21.49 -  group rules, '@supports' and '@document', to
   21.50 +  <p>This specification also defines an additional type of conditional
   21.51 +  group rule, '@supports', to
   21.52    address author and user requirements.</p>
   21.53  
   21.54    <p>The '@supports' rule allows CSS to be conditioned on
   21.55 @@ -133,11 +137,6 @@
   21.56    mechanisms, and for other cases where a set of related styles needs to
   21.57    be conditioned on property support.</p>
   21.58  
   21.59 -  <p>The '@document' rule allows CSS to be conditioned on the
   21.60 -  page to which the style sheet is being applied.  This allows users to
   21.61 -  apply styles to a particular page or group of pages, which greatly
   21.62 -  increases the power of user style sheets.</p>
   21.63 -
   21.64  <h3 id="placement">Module Interactions</h3>
   21.65  
   21.66    <p>This module replaces and extends the '@media' rule
   21.67 @@ -191,13 +190,7 @@
   21.68  }</pre>
   21.69  <p>causes a particular CSS rule (making elements with ID "navigation" be
   21.70  display:none) apply only when the style sheet is used for a print
   21.71 -medium.  Likewise, this CSS rule:</p>
   21.72 -<pre>@document url("http://www.example.com/") {
   21.73 -  #example1 { display: none }
   21.74 -}</pre>
   21.75 -<p>does the same type of conditional application, but using a different
   21.76 -condition:  whether the style sheet is being applied to the page
   21.77 -<code>http://www.example.com/</code>.</p>
   21.78 +medium.
   21.79  </div>
   21.80  
   21.81  <p>Each conditional group rule has a condition, which at any time
   21.82 @@ -238,11 +231,6 @@
   21.83  
   21.84  <h2 id="contents-of">Contents of conditional group rules</h2>
   21.85  
   21.86 -<p class="issue">There is also likely demand for using these
   21.87 -conditions with '@import'.  We should see if we can
   21.88 -come up with sensible syntax for that, perhaps functional notation
   21.89 -at the end of the '@import' rule.</p>
   21.90 -
   21.91  <p>The syntax of each conditional group rule consists of some syntax
   21.92  specific to the type of rule followed by a <dfn>group rule body</dfn>,
   21.93  which is a block (pair of braces) containing a sequence of rules.</p>
   21.94 @@ -259,7 +247,7 @@
   21.95  
   21.96  <pre>nested_statement
   21.97    : ruleset | media | page | font_face_rule | keyframes_rule |
   21.98 -    supports_rule | document_rule
   21.99 +    supports_rule
  21.100    ;
  21.101  
  21.102  group_rule_body
  21.103 @@ -267,10 +255,10 @@
  21.104    ;</pre>
  21.105  <p>
  21.106  in which all the productions are defined in that grammar with the
  21.107 -exception of <code>font_face_rule</code> <span class="issue">not</span>
  21.108 +exception of <code>font_face_rule</code> 
  21.109  defined in [[!CSS3-FONTS]], <code>keyframes_rule</code> defined in
  21.110 -[[!CSS3-ANIMATIONS]], and <code>media</code>, <code>supports_rule</code>
  21.111 -and <code>document_rule</code> defined in this specification.</p>
  21.112 +[[!CSS3-ANIMATIONS]], and <code>media</code> and <code>supports_rule</code>
  21.113 +defined in this specification.</p>
  21.114  
  21.115  <p>In general, future CSS specifications that add new @-rules that are
  21.116  not forbidden to occur after some other types of rules should modify
  21.117 @@ -307,7 +295,7 @@
  21.118  
  21.119  <p>The <dfn>'@media' rule</dfn> is a conditional group rule whose
  21.120  condition is a media query.  It consists of the at-keyword
  21.121 -'@media' followed by a (possibly empty) media query (as
  21.122 +'@media' followed by a (possibly empty) media query list (as
  21.123  defined in [[!MEDIAQ]]), followed by a group rule body.  The condition
  21.124  of the rule is the result of the media query.</p>
  21.125  
  21.126 @@ -368,10 +356,13 @@
  21.127  <p>This extends the lexical scanner in the
  21.128  <a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a>
  21.129  ([[!CSS21]], Appendix G) by adding:
  21.130 -<pre>@{S}{U}{P}{P}{O}{R}{T}{S}	{return SUPPORTS_SYM;}</pre>
  21.131 +<pre>
  21.132 +@{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;}
  21.133 +{O}{R}                    {return OR;}
  21.134 +</pre>
  21.135  <p>and the grammar by adding</p>
  21.136  <pre><dfn>supports_rule</dfn>
  21.137 -  : SUPPORTS_SYM S+ supports_condition group_rule_body
  21.138 +  : SUPPORTS_SYM S* supports_condition group_rule_body
  21.139    ;
  21.140  
  21.141  <dfn>supports_condition</dfn>
  21.142 @@ -384,24 +375,26 @@
  21.143    ;
  21.144  
  21.145  <dfn>supports_negation</dfn>
  21.146 -  : 'not' S* supports_condition_in_parens
  21.147 +  : NOT S* supports_condition_in_parens
  21.148    ;
  21.149  
  21.150  <dfn>supports_conjunction</dfn>
  21.151 -  : supports_condition_in_parens ( 'and' S* supports_condition_in_parens )+
  21.152 +  : supports_condition_in_parens ( AND S* supports_condition_in_parens )+
  21.153    ;
  21.154  
  21.155  <dfn>supports_disjunction</dfn>
  21.156 -  : supports_condition_in_parens ( 'or' S* supports_condition_in_parens )+
  21.157 +  : supports_condition_in_parens ( OR S* supports_condition_in_parens )+
  21.158    ;
  21.159  
  21.160  <dfn>supports_declaration_condition</dfn>
  21.161 -  : '(' S* core_declaration ')' S*
  21.162 +  : '(' S* core_declaration ')' S* | FUNCTION S* [any|unused]* ')'
  21.163    ;</pre>
  21.164  <p>in which <code>core_declaration</code> is the production
  21.165  <code>declaration</code> in the core syntax of CSS defined in <a
  21.166  href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">section
  21.167 -4.1.1 (Tokenization)</a> of [[!CSS21]].</p>
  21.168 +4.1.1 (Tokenization)</a> of [[!CSS21]],
  21.169 +and the <code>AND</code> and <code>NOT</code> tokens are defined in
  21.170 +the Media Queries specification [[!MEDIAQ]].</p>
  21.171  
  21.172  <p>Any ''@supports'' rule that does not parse according to the grammar
  21.173  above is invalid.  Style sheets <strong>must not</strong> use such a
  21.174 @@ -413,12 +406,6 @@
  21.175  that do not meet the forward-compatible syntax for declarations cause
  21.176  the entire ''@supports'' rule to be ignored.</p>
  21.177  
  21.178 -<p class="issue">Is any further allowance for forward-compatible parsing
  21.179 -needed, for example, to allow additional features (such as, say,
  21.180 -selector tests) to be added to the ''@supports'' rule?  Or are these
  21.181 -forward-compatible parsing rules the best solution for such future
  21.182 -expansion anyway?</p>
  21.183 -
  21.184  <p>Each of these grammar terms is associated with a boolean result, as
  21.185  follows:</p>
  21.186  <dl>
  21.187 @@ -455,8 +442,11 @@
  21.188  
  21.189  <dt>supports_declaration_condition</dt>
  21.190  <dd>
  21.191 -  The result is whether the CSS processor <a
  21.192 -  href="#support-definition">supports</a> the declaration.
  21.193 +  The result is false if this corresponds to a functional notation;
  21.194 +  otherwise, the result is whether the CSS processor <a
  21.195 +  href="#support-definition">supports</a> the declaration
  21.196 +  within the parentheses.
  21.197 +  <span class="note">Note that future levels may define functions that can evaluate to true.</span>
  21.198  </dd>
  21.199  </dl>
  21.200  
  21.201 @@ -602,6 +592,7 @@
  21.202  in order to consider the declaration supported, either inside a ruleset
  21.203  or in the declaration condition of an ''@supports'' rule.</p>
  21.204  
  21.205 +<!--
  21.206  <h2 id="at-document">Document queries: the '@document' rule</h2>
  21.207  
  21.208  <p>The <dfn>'@document' rule</dfn> is a conditional group
  21.209 @@ -797,6 +788,8 @@
  21.210  url_match_fn
  21.211    : (URI | FUNCTION S* STRING S* ')' ) S*
  21.212    ;</pre>
  21.213 +-->
  21.214 +
  21.215  
  21.216  <h2 id="apis">APIs</h2>
  21.217  
  21.218 @@ -807,7 +800,9 @@
  21.219  
  21.220  <pre class='idl'>partial interface CSSRule {
  21.221      const unsigned short SUPPORTS_RULE = 12;
  21.222 +    <!--
  21.223      const unsigned short DOCUMENT_RULE = 13;
  21.224 +    -->
  21.225  }</pre>
  21.226  
  21.227  
  21.228 @@ -911,7 +906,7 @@
  21.229  <pre class='idl'>interface CSSSupportsRule : CSSConditionRule {
  21.230  }</pre>
  21.231  
  21.232 -
  21.233 +<!--
  21.234  <h3 id="the-cssdocumentrule-interface">
  21.235  The <code>CSSDocumentRule</code> interface</h3>
  21.236  
  21.237 @@ -919,6 +914,7 @@
  21.238  
  21.239  <pre class='idl'>interface CSSDocumentRule : CSSConditionRule {
  21.240  }</pre>
  21.241 +-->
  21.242  
  21.243  
  21.244  <h3 id='the-css-interface'>
  21.245 @@ -951,6 +947,17 @@
  21.246    </dl>
  21.247  
  21.248  
  21.249 +<h2 class=no-num id="grammar">Grammar</h2>
  21.250 +
  21.251 +<p>In order to allow these new @-rules in CSS style sheets, this
  21.252 +specification modifies the <code>stylesheet</code> production in the <a
  21.253 +href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of
  21.254 +[[!CSS21]] by replacing the <code>media</code> production defined in
  21.255 +[[!CSS21]] with the <code>media</code> production defined in this one,
  21.256 +and additionally inserting <code>| supports_rule</code>
  21.257 +alongside <code>ruleset | media | page</code>.</p>
  21.258 +
  21.259 +
  21.260  <h2 id="conformance">Conformance</h2>
  21.261  
  21.262  <h3 id="base-modules">Base Modules</h3>
  21.263 @@ -1094,15 +1101,29 @@
  21.264    <p>The specification will remain Candidate Recommendation for at least
  21.265    six months.
  21.266  
  21.267 -<h2 class=no-num id="grammar">Grammar</h2>
  21.268 +<h2 id="changes">
  21.269 +Changes</h2>
  21.270  
  21.271 -<p>In order to allow these new @-rules in CSS style sheets, this
  21.272 -specification modifies the <code>stylesheet</code> production in the <a
  21.273 -href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of
  21.274 -[[!CSS21]] by replacing the <code>media</code> production defined in
  21.275 -[[!CSS21]] with the <code>media</code> production defined in this one,
  21.276 -and additionally inserting <code>| supports_rule | document_rule</code>
  21.277 -alongside <code>ruleset | media | page</code>.</p>
  21.278 +<p>The following (non-editorial) changes were made to this specification since the
  21.279 +<a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">11 September 2012 Working Draft</a>:
  21.280 +
  21.281 +<ul>
  21.282 +  <li>Removed ''@document'' rule; it has been deferred to Level 4.
  21.283 +  <li>Allow functional notation in ''@supports'' queries to be valid (to allow for future extensions),
  21.284 +      but treat such notations as always being false.
  21.285 +  <li>Corrected the grammar as follows:
  21.286 +<pre>
  21.287 +-  : SUPPORTS_SYM S+ supports_condition group_rule_body
  21.288 ++  : SUPPORTS_SYM S* supports_condition group_rule_body
  21.289 +</pre>
  21.290 +<pre>
  21.291 +-  : (URI | FUNCTION) S*
  21.292 ++  : (URI | FUNCTION S* STRING S* ')' ) S*
  21.293 +</pre>
  21.294 +  <li>Switched "and", "or", and "not" keywords to use appropriate productions rather than literals.
  21.295 +  <li>Clarified definition of support used for interpreting ''@support'' rules
  21.296 +  and its relationship to CSS forwards-compatible parsing rules.
  21.297 +</ul>
  21.298  
  21.299  <h2 class=no-num id="acknowledgments">Acknowledgments</h2>
  21.300  
    22.1 --- a/css3-exclusions/Exclusions.src.html	Mon Oct 22 00:33:44 2012 +0200
    22.2 +++ b/css3-exclusions/Exclusions.src.html	Mon Oct 22 00:41:17 2012 +0200
    22.3 @@ -335,7 +335,7 @@
    22.4          The above figure illustrates how exclusions are combined. The outermost box represents
    22.5          an element's content box. The A, B, C and D darker gray boxes represent exclusions
    22.6          in the element's <span>wrapping context</span>. A, B, C and D have their respective 'wrap-flow'
    22.7 -        set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show
    22.8 +        computed to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show
    22.9          the additional areas that are excluded for inline layout as a result of the 'wrap-flow'
   22.10          value. For example, the area to the right of 'B' cannot be used for inline layout
   22.11          because the 'wrap-flow' for 'B' is 'start'.
   22.12 @@ -479,7 +479,7 @@
   22.13      <div class="note">
   22.14          Exclusions defined by an element's descendants still contribute to their containing block's
   22.15          <span>wrapping context</span>. If that containing block is a child of an element with 'wrap-through'
   22.16 -        set to none, or the element itself, then exclusion still have an effect on the children of that 
   22.17 +        computes to none, or the element itself, then exclusion still have an effect on the children of that 
   22.18          containing block element.
   22.19      </div>
   22.20  
   22.21 @@ -1336,14 +1336,29 @@
   22.22  
   22.23        <h3 id="declaring-shapes">Declaring Shapes</h3>
   22.24        <p>
   22.25 -          Shapes are declared with the 'shape-outside' or 'shape-inside' properties. 
   22.26 -          The 'shape-outside' property changes the geometry of an <span>exclusion element</span>'s
   22.27 -          <span>exclusion area</span> or or a float element's <span>float area</span>. 
   22.28 -          If the element is not an <span>exclusion element</span>
   22.29 -          (see the 'wrap-flow' property) or a float, then the 'shape-outside' property has no effect.
   22.30 +          Shapes are declared with 
   22.31 +          the 'shape-outside' 
   22.32 +          or 'shape-inside' properties, 
   22.33 +          with possible modifications 
   22.34 +          from the 'shape-margin' 
   22.35 +          and 'shape-padding' properties. 
   22.36 +          The shape defined by 
   22.37 +          the 'shape-outside' 
   22.38 +          and 'shape-margin' properties 
   22.39 +          changes the geometry 
   22.40 +          of an <span>exclusion element</span>'s 
   22.41 +          <span>exclusion area</span> 
   22.42 +          or a float element's 
   22.43 +          <span>float area</span>. 
   22.44 +          If the element is not 
   22.45 +          an <span>exclusion element</span> 
   22.46 +          (see the 'wrap-flow' property) 
   22.47 +          or a float, 
   22.48 +          then the 'shape-outside' property 
   22.49 +          has no effect.
   22.50        </p>
   22.51        <p>
   22.52 -          The 'shape-inside' property defines an element's <span>content area</span> and 
   22.53 +          The shape defined by the 'shape-inside' and 'shape-padding' properties defines an element's <span>content area</span> and 
   22.54            the element's inline flow content wraps into that shape. The 'shape-inside' property
   22.55            applies to all block-level elements.
   22.56        </p>
   22.57 @@ -1422,7 +1437,7 @@
   22.58              and 'A', 'B', 'C' and 'C' represent exclusions 
   22.59              with a complex shape 
   22.60              and their 'wrap-flow' property 
   22.61 -            set to 'both', 'start', 'end' and 'clear', 
   22.62 +            computes to 'both', 'start', 'end' and 'clear', 
   22.63              respectively.</p>
   22.64                
   22.65            <p>As illustrated in the picture, 
   22.66 @@ -1532,9 +1547,9 @@
   22.67      </div>
   22.68  
   22.69      <p>Overflow content can overlap 
   22.70 -        the bottom edge of a shape-inside, 
   22.71 +        the bottom edge of a shape, 
   22.72          and overflow content can be displayed 
   22.73 -        below the content area defined by shape-inside. 
   22.74 +        below the content area defined by shape. 
   22.75          When content overflows in the block direction, 
   22.76          the last line in the content area determines its width(s) 
   22.77          by finding the minimum shape width(s) 
   22.78 @@ -1546,13 +1561,18 @@
   22.79          or a zero-width line 
   22.80          if (for instance) the shape's bottom edge 
   22.81          is a continuous curve. 
   22.82 +        In degenerate cases, 
   22.83 +        there may be no content 
   22.84 +        that fits inside the content area 
   22.85 +        defined by the shape. 
   22.86          Further overflow is laid out 
   22.87 -        as if the shape-inside was set to 'auto'.</p>
   22.88 +        below the shape's bottom edge 
   22.89 +        as if 'shape-inside' computes to 'auto'.</p>
   22.90  
   22.91      <div class='figure'>
   22.92              <img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/>
   22.93              <img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/>
   22.94 -        <p class="caption">Overflow interacting with the bottom edge of shapes.</p>
   22.95 +        <p class="caption">Overflow interacting with the bottom edge of shapes defined by 'shape-inside' and 'shape-padding'.</p>
   22.96      </div>
   22.97          
   22.98      <!-- End section "The shape-inside property" -->
    23.1 --- a/css3-exclusions/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    23.2 +++ b/css3-exclusions/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    23.3 @@ -7,16 +7,18 @@
    23.4    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    23.5    <title>CSS Exclusions and Shapes Module Level 3</title>
    23.6  
    23.7 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
    23.8 -  <meta content="CSS Exclusions and Shapes Module Level 3" name=DC.title>
    23.9 -  <meta content=text name=DC.type>
   23.10 -  <meta content=2012-10-01 name=DC.issued>
   23.11 -  <meta content="http://dev.w3.org/csswg/css3-exclusions/" name=DC.creator>
   23.12 -  <meta content=W3C name=DC.publisher>
   23.13 -  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121001/"
   23.14 -   name=DC.identifier>
   23.15 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   23.16    <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   23.17 -   rel=DC.rights>
   23.18 +   rel=dcterms.rights>
   23.19 +  <meta content="CSS Exclusions and Shapes Module Level 3"
   23.20 +   name=dcterms.title>
   23.21 +  <meta content=text name=dcterms.type>
   23.22 +  <meta content=2012-10-19 name=dcterms.issued>
   23.23 +  <meta content="http://dev.w3.org/csswg/css3-exclusions/"
   23.24 +   name=dcterms.creator>
   23.25 +  <meta content=W3C name=dcterms.publisher>
   23.26 +  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121019/"
   23.27 +   name=dcterms.identifier>
   23.28    <link href="../shared/style/default.css" rel=stylesheet type="text/css">
   23.29    <style type="text/css">
   23.30      .singleImgExample {
   23.31 @@ -50,14 +52,15 @@
   23.32  
   23.33     <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
   23.34  
   23.35 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 October 2012</h2>
   23.36 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October
   23.37 +    2012</h2>
   23.38  
   23.39     <dl>
   23.40      <dt>This version:
   23.41  
   23.42      <dd><a
   23.43       href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
   23.44 -    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20121001/">http://www.w3.org/TR/2012/WD-css3-exclusions-20121001/</a></dd>-->
   23.45 +    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20121019/">http://www.w3.org/TR/2012/WD-css3-exclusions-20121019/</a></dd>-->
   23.46  
   23.47      <dt>Latest version:
   23.48  
   23.49 @@ -631,7 +634,7 @@
   23.50     boxes represent exclusions in the element's <a
   23.51     href="#wrapping-context">wrapping context</a>. A, B, C and D have their
   23.52     respective ‘<a href="#wrap-flow"><code
   23.53 -   class=property>wrap-flow</code></a>’ set to ‘<code
   23.54 +   class=property>wrap-flow</code></a>’ computed to ‘<code
   23.55     class=property>both</code>’, ‘<code class=property>start</code>’,
   23.56     ‘<code class=property>end</code>’ and ‘<code
   23.57     class=property>clear</code>’ respectively. The lighter gray areas show
   23.58 @@ -800,7 +803,7 @@
   23.59     contribute to their containing block's <a
   23.60     href="#wrapping-context">wrapping context</a>. If that containing block is
   23.61     a child of an element with ‘<a href="#wrap-through"><code
   23.62 -   class=property>wrap-through</code></a>’ set to none, or the element
   23.63 +   class=property>wrap-through</code></a>’ computes to none, or the element
   23.64     itself, then exclusion still have an effect on the children of that
   23.65     containing block element.</div>
   23.66  
   23.67 @@ -1765,22 +1768,29 @@
   23.68    <p> Shapes are declared with the ‘<a href="#shape-outside"><code
   23.69     class=property>shape-outside</code></a>’ or ‘<a
   23.70     href="#shape-inside"><code class=property>shape-inside</code></a>’
   23.71 -   properties. The ‘<a href="#shape-outside"><code
   23.72 -   class=property>shape-outside</code></a>’ property changes the geometry
   23.73 -   of an <a href="#exclusion-element">exclusion element</a>‘<code
   23.74 -   class=css>s <a href="#exclusion-area">exclusion area</a> or or a float
   23.75 -   element</code>’s <a href="#float-area">float area</a>. If the element is
   23.76 -   not an <a href="#exclusion-element">exclusion element</a> (see the ‘<a
   23.77 +   properties, with possible modifications from the ‘<a
   23.78 +   href="#shape-margin"><code class=property>shape-margin</code></a>’ and
   23.79 +   ‘<a href="#shape-padding"><code
   23.80 +   class=property>shape-padding</code></a>’ properties. The shape defined
   23.81 +   by the ‘<a href="#shape-outside"><code
   23.82 +   class=property>shape-outside</code></a>’ and ‘<a
   23.83 +   href="#shape-margin"><code class=property>shape-margin</code></a>’
   23.84 +   properties changes the geometry of an <a
   23.85 +   href="#exclusion-element">exclusion element</a>‘<code class=css>s <a
   23.86 +   href="#exclusion-area">exclusion area</a> or a float element</code>’s <a
   23.87 +   href="#float-area">float area</a>. If the element is not an <a
   23.88 +   href="#exclusion-element">exclusion element</a> (see the ‘<a
   23.89     href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property)
   23.90     or a float, then the ‘<a href="#shape-outside"><code
   23.91     class=property>shape-outside</code></a>’ property has no effect.
   23.92  
   23.93 -  <p> The ‘<a href="#shape-inside"><code
   23.94 -   class=property>shape-inside</code></a>’ property defines an element's <a
   23.95 -   href="#content-area">content area</a> and the element's inline flow
   23.96 -   content wraps into that shape. The ‘<a href="#shape-inside"><code
   23.97 -   class=property>shape-inside</code></a>’ property applies to all
   23.98 -   block-level elements.
   23.99 +  <p> The shape defined by the ‘<a href="#shape-inside"><code
  23.100 +   class=property>shape-inside</code></a>’ and ‘<a
  23.101 +   href="#shape-padding"><code class=property>shape-padding</code></a>’
  23.102 +   properties defines an element's <a href="#content-area">content area</a>
  23.103 +   and the element's inline flow content wraps into that shape. The ‘<a
  23.104 +   href="#shape-inside"><code class=property>shape-inside</code></a>’
  23.105 +   property applies to all block-level elements.
  23.106  
  23.107    <h4 id=shape-outside-property><span class=secno>4.4.1. </span>The ‘<a
  23.108     href="#shape-outside"><code class=property>shape-outside</code></a>’
  23.109 @@ -1875,7 +1885,7 @@
  23.110      class=property>B</code>’, ‘<code class=property>C</code>’ and
  23.111      ‘<code class=property>C</code>’ represent exclusions with a complex
  23.112      shape and their ‘<a href="#wrap-flow"><code
  23.113 -    class=property>wrap-flow</code></a>’ property set to ‘<code
  23.114 +    class=property>wrap-flow</code></a>’ property computes to ‘<code
  23.115      class=property>both</code>’, ‘<code class=property>start</code>’,
  23.116      ‘<code class=property>end</code>’ and ‘<code
  23.117      class=property>clear</code>’, respectively.
  23.118 @@ -2009,22 +2019,28 @@
  23.119     <p class=caption>Effect of shape-inside on inline content.
  23.120    </div>
  23.121  
  23.122 -  <p>Overflow content can overlap the bottom edge of a shape-inside, and
  23.123 -   overflow content can be displayed below the content area defined by
  23.124 -   shape-inside. When content overflows in the block direction, the last line
  23.125 -   in the content area determines its width(s) by finding the minimum shape
  23.126 -   width(s) in the remaining area between the line's top edge and the shape's
  23.127 -   bottom edge. This can result in the line intersecting the shape's bottom
  23.128 -   edge, or a zero-width line if (for instance) the shape's bottom edge is a
  23.129 -   continuous curve. Further overflow is laid out as if the shape-inside was
  23.130 -   set to ‘<code class=property>auto</code>’.
  23.131 +  <p>Overflow content can overlap the bottom edge of a shape, and overflow
  23.132 +   content can be displayed below the content area defined by shape. When
  23.133 +   content overflows in the block direction, the last line in the content
  23.134 +   area determines its width(s) by finding the minimum shape width(s) in the
  23.135 +   remaining area between the line's top edge and the shape's bottom edge.
  23.136 +   This can result in the line intersecting the shape's bottom edge, or a
  23.137 +   zero-width line if (for instance) the shape's bottom edge is a continuous
  23.138 +   curve. In degenerate cases, there may be no content that fits inside the
  23.139 +   content area defined by the shape. Further overflow is laid out below the
  23.140 +   shape's bottom edge as if ‘<a href="#shape-inside"><code
  23.141 +   class=property>shape-inside</code></a>’ computes to ‘<code
  23.142 +   class=property>auto</code>’.
  23.143  
  23.144    <div class=figure> <img alt="Overflow interacting with rounded rect"
  23.145     src="images/rounded-rect-overflow.png"
  23.146     style="display:inline-block;vertical-align:top"> <img
  23.147     alt="Overflow interacting with ellipse" src="images/ellipse-overflow.png"
  23.148     style="display:inline-block;vertical-align:top">
  23.149 -   <p class=caption>Overflow interacting with the bottom edge of shapes.
  23.150 +   <p class=caption>Overflow interacting with the bottom edge of shapes
  23.151 +    defined by ‘<a href="#shape-inside"><code
  23.152 +    class=property>shape-inside</code></a>’ and ‘<a
  23.153 +    href="#shape-padding"><code class=property>shape-padding</code></a>’.
  23.154    </div>
  23.155    <!-- End section "The shape-inside property" -->
  23.156  
    24.1 --- a/css3-exclusions/images/ellipse-overflow.graffle	Mon Oct 22 00:33:44 2012 +0200
    24.2 +++ b/css3-exclusions/images/ellipse-overflow.graffle	Mon Oct 22 00:41:17 2012 +0200
    24.3 @@ -14,7 +14,7 @@
    24.4  	<key>BackgroundGraphic</key>
    24.5  	<dict>
    24.6  		<key>Bounds</key>
    24.7 -		<string>{{0, 0}, {576.00002479553223, 733}}</string>
    24.8 +		<string>{{0, 0}, {576, 733}}</string>
    24.9  		<key>Class</key>
   24.10  		<string>SolidGraphic</string>
   24.11  		<key>ID</key>
   24.12 @@ -46,7 +46,7 @@
   24.13  	<key>Creator</key>
   24.14  	<string>Alan Stearns</string>
   24.15  	<key>DisplayScale</key>
   24.16 -	<string>1 0/72 in = 1 0/72 in</string>
   24.17 +	<string>1 0/72 in = 1.0000 in</string>
   24.18  	<key>GraphDocumentVersion</key>
   24.19  	<integer>8</integer>
   24.20  	<key>GraphicsList</key>
   24.21 @@ -90,6 +90,82 @@
   24.22  		</dict>
   24.23  		<dict>
   24.24  			<key>Bounds</key>
   24.25 +			<string>{{169.19999408721924, 95.925125122070312}, {237.59999084472656, 166.64974975585938}}</string>
   24.26 +			<key>Class</key>
   24.27 +			<string>ShapedGraphic</string>
   24.28 +			<key>ID</key>
   24.29 +			<integer>23</integer>
   24.30 +			<key>Shape</key>
   24.31 +			<string>Circle</string>
   24.32 +			<key>Style</key>
   24.33 +			<dict>
   24.34 +				<key>fill</key>
   24.35 +				<dict>
   24.36 +					<key>Draws</key>
   24.37 +					<string>NO</string>
   24.38 +				</dict>
   24.39 +				<key>shadow</key>
   24.40 +				<dict>
   24.41 +					<key>Draws</key>
   24.42 +					<string>NO</string>
   24.43 +				</dict>
   24.44 +				<key>stroke</key>
   24.45 +				<dict>
   24.46 +					<key>Color</key>
   24.47 +					<dict>
   24.48 +						<key>b</key>
   24.49 +						<string>0.501953</string>
   24.50 +						<key>g</key>
   24.51 +						<string>0.0292403</string>
   24.52 +						<key>r</key>
   24.53 +						<string>0</string>
   24.54 +					</dict>
   24.55 +					<key>CornerRadius</key>
   24.56 +					<real>50</real>
   24.57 +				</dict>
   24.58 +			</dict>
   24.59 +		</dict>
   24.60 +		<dict>
   24.61 +			<key>Bounds</key>
   24.62 +			<string>{{176.50001239776611, 103.5}, {223, 151.5}}</string>
   24.63 +			<key>Class</key>
   24.64 +			<string>ShapedGraphic</string>
   24.65 +			<key>ID</key>
   24.66 +			<integer>4</integer>
   24.67 +			<key>Shape</key>
   24.68 +			<string>Circle</string>
   24.69 +			<key>Style</key>
   24.70 +			<dict>
   24.71 +				<key>fill</key>
   24.72 +				<dict>
   24.73 +					<key>Draws</key>
   24.74 +					<string>NO</string>
   24.75 +				</dict>
   24.76 +				<key>shadow</key>
   24.77 +				<dict>
   24.78 +					<key>Draws</key>
   24.79 +					<string>NO</string>
   24.80 +				</dict>
   24.81 +				<key>stroke</key>
   24.82 +				<dict>
   24.83 +					<key>Color</key>
   24.84 +					<dict>
   24.85 +						<key>b</key>
   24.86 +						<string>0.501953</string>
   24.87 +						<key>g</key>
   24.88 +						<string>0.0292403</string>
   24.89 +						<key>r</key>
   24.90 +						<string>0</string>
   24.91 +					</dict>
   24.92 +					<key>CornerRadius</key>
   24.93 +					<real>50</real>
   24.94 +					<key>Pattern</key>
   24.95 +					<integer>1</integer>
   24.96 +				</dict>
   24.97 +			</dict>
   24.98 +		</dict>
   24.99 +		<dict>
  24.100 +			<key>Bounds</key>
  24.101  			<string>{{208.25003433227539, 202.5}, {159.5, 28.75}}</string>
  24.102  			<key>Class</key>
  24.103  			<string>ShapedGraphic</string>
  24.104 @@ -538,36 +614,6 @@
  24.105  		</dict>
  24.106  		<dict>
  24.107  			<key>Bounds</key>
  24.108 -			<string>{{176.50001239776611, 103.5}, {223, 151.5}}</string>
  24.109 -			<key>Class</key>
  24.110 -			<string>ShapedGraphic</string>
  24.111 -			<key>ID</key>
  24.112 -			<integer>4</integer>
  24.113 -			<key>Shape</key>
  24.114 -			<string>Circle</string>
  24.115 -			<key>Style</key>
  24.116 -			<dict>
  24.117 -				<key>fill</key>
  24.118 -				<dict>
  24.119 -					<key>Draws</key>
  24.120 -					<string>NO</string>
  24.121 -				</dict>
  24.122 -				<key>shadow</key>
  24.123 -				<dict>
  24.124 -					<key>Draws</key>
  24.125 -					<string>NO</string>
  24.126 -				</dict>
  24.127 -				<key>stroke</key>
  24.128 -				<dict>
  24.129 -					<key>CornerRadius</key>
  24.130 -					<real>50</real>
  24.131 -					<key>Pattern</key>
  24.132 -					<integer>1</integer>
  24.133 -				</dict>
  24.134 -			</dict>
  24.135 -		</dict>
  24.136 -		<dict>
  24.137 -			<key>Bounds</key>
  24.138  			<string>{{144.00004291534424, 284.75}, {288, 28.75}}</string>
  24.139  			<key>Class</key>
  24.140  			<string>ShapedGraphic</string>
  24.141 @@ -838,7 +884,7 @@
  24.142  	<key>MasterSheets</key>
  24.143  	<array/>
  24.144  	<key>ModificationDate</key>
  24.145 -	<string>2012-10-01 20:14:45 +0000</string>
  24.146 +	<string>2012-10-19 18:39:21 +0000</string>
  24.147  	<key>Modifier</key>
  24.148  	<string>Alan Stearns</string>
  24.149  	<key>NotesVisible</key>
  24.150 @@ -869,7 +915,7 @@
  24.151  		<key>NSPaperSize</key>
  24.152  		<array>
  24.153  			<string>size</string>
  24.154 -			<string>{612.00002479553223, 792}</string>
  24.155 +			<string>{612, 792}</string>
  24.156  		</array>
  24.157  		<key>NSPrintReverseOrientation</key>
  24.158  		<array>
    25.1 Binary file css3-exclusions/images/ellipse-overflow.png has changed
    26.1 --- a/css3-exclusions/images/rounded-rect-overflow.graffle	Mon Oct 22 00:33:44 2012 +0200
    26.2 +++ b/css3-exclusions/images/rounded-rect-overflow.graffle	Mon Oct 22 00:41:17 2012 +0200
    26.3 @@ -14,9 +14,16 @@
    26.4  	<key>BackgroundGraphic</key>
    26.5  	<dict>
    26.6  		<key>Bounds</key>
    26.7 -		<string>{{0, 0}, {576.00002479553223, 733}}</string>
    26.8 +		<string>{{0, 0}, {576, 733}}</string>
    26.9  		<key>Class</key>
   26.10  		<string>SolidGraphic</string>
   26.11 +		<key>FontInfo</key>
   26.12 +		<dict>
   26.13 +			<key>Font</key>
   26.14 +			<string>Helvetica</string>
   26.15 +			<key>Size</key>
   26.16 +			<real>13</real>
   26.17 +		</dict>
   26.18  		<key>ID</key>
   26.19  		<integer>2</integer>
   26.20  		<key>Style</key>
   26.21 @@ -53,6 +60,80 @@
   26.22  	<array>
   26.23  		<dict>
   26.24  			<key>Bounds</key>
   26.25 +			<string>{{144.00001239776611, 75}, {288, 216}}</string>
   26.26 +			<key>Class</key>
   26.27 +			<string>ShapedGraphic</string>
   26.28 +			<key>ID</key>
   26.29 +			<integer>1</integer>
   26.30 +			<key>Shape</key>
   26.31 +			<string>Rectangle</string>
   26.32 +			<key>Style</key>
   26.33 +			<dict>
   26.34 +				<key>fill</key>
   26.35 +				<dict>
   26.36 +					<key>Draws</key>
   26.37 +					<string>NO</string>
   26.38 +				</dict>
   26.39 +				<key>shadow</key>
   26.40 +				<dict>
   26.41 +					<key>Draws</key>
   26.42 +					<string>NO</string>
   26.43 +				</dict>
   26.44 +				<key>stroke</key>
   26.45 +				<dict>
   26.46 +					<key>Color</key>
   26.47 +					<dict>
   26.48 +						<key>b</key>
   26.49 +						<string>0.336538</string>
   26.50 +						<key>g</key>
   26.51 +						<string>0.692383</string>
   26.52 +						<key>r</key>
   26.53 +						<string>0.371516</string>
   26.54 +					</dict>
   26.55 +					<key>Width</key>
   26.56 +					<real>2</real>
   26.57 +				</dict>
   26.58 +			</dict>
   26.59 +		</dict>
   26.60 +		<dict>
   26.61 +			<key>Bounds</key>
   26.62 +			<string>{{167.40000629425049, 95.55023193359375}, {241.19999694824219, 174.8995361328125}}</string>
   26.63 +			<key>Class</key>
   26.64 +			<string>ShapedGraphic</string>
   26.65 +			<key>ID</key>
   26.66 +			<integer>23</integer>
   26.67 +			<key>Shape</key>
   26.68 +			<string>Rectangle</string>
   26.69 +			<key>Style</key>
   26.70 +			<dict>
   26.71 +				<key>fill</key>
   26.72 +				<dict>
   26.73 +					<key>Draws</key>
   26.74 +					<string>NO</string>
   26.75 +				</dict>
   26.76 +				<key>shadow</key>
   26.77 +				<dict>
   26.78 +					<key>Draws</key>
   26.79 +					<string>NO</string>
   26.80 +				</dict>
   26.81 +				<key>stroke</key>
   26.82 +				<dict>
   26.83 +					<key>Color</key>
   26.84 +					<dict>
   26.85 +						<key>b</key>
   26.86 +						<string>0.506072</string>
   26.87 +						<key>g</key>
   26.88 +						<string>0</string>
   26.89 +						<key>r</key>
   26.90 +						<string>0.0107934</string>
   26.91 +					</dict>
   26.92 +					<key>CornerRadius</key>
   26.93 +					<real>50</real>
   26.94 +				</dict>
   26.95 +			</dict>
   26.96 +		</dict>
   26.97 +		<dict>
   26.98 +			<key>Bounds</key>
   26.99  			<string>{{144.00004291534424, 304.75}, {288, 28.75}}</string>
  26.100  			<key>Class</key>
  26.101  			<string>ShapedGraphic</string>
  26.102 @@ -165,7 +246,7 @@
  26.103  		</dict>
  26.104  		<dict>
  26.105  			<key>Bounds</key>
  26.106 -			<string>{{190.25002479553223, 218.5}, {195.49998474121094, 28.75}}</string>
  26.107 +			<string>{{186.2499942779541, 218.5}, {203.5, 28.75}}</string>
  26.108  			<key>Class</key>
  26.109  			<string>ShapedGraphic</string>
  26.110  			<key>FontInfo</key>
  26.111 @@ -389,7 +470,7 @@
  26.112  		</dict>
  26.113  		<dict>
  26.114  			<key>Bounds</key>
  26.115 -			<string>{{183.50001239776611, 132.25}, {209, 28.75}}</string>
  26.116 +			<string>{{178.74998950958252, 132.25}, {219.00001525878906, 28.75}}</string>
  26.117  			<key>Class</key>
  26.118  			<string>ShapedGraphic</string>
  26.119  			<key>FontInfo</key>
  26.120 @@ -501,7 +582,7 @@
  26.121  		</dict>
  26.122  		<dict>
  26.123  			<key>Bounds</key>
  26.124 -			<string>{{226.00000858306885, 103.5}, {124.00000762939453, 28.75}}</string>
  26.125 +			<string>{{217.62500095367432, 103.5}, {140.75, 28.75}}</string>
  26.126  			<key>Class</key>
  26.127  			<string>ShapedGraphic</string>
  26.128  			<key>FontInfo</key>
  26.129 @@ -613,7 +694,7 @@
  26.130  		</dict>
  26.131  		<dict>
  26.132  			<key>Bounds</key>
  26.133 -			<string>{{175.50001239776611, 161}, {223, 28.75}}</string>
  26.134 +			<string>{{176.50001239776611, 161}, {223, 28.75}}</string>
  26.135  			<key>Class</key>
  26.136  			<string>ShapedGraphic</string>
  26.137  			<key>FontInfo</key>
  26.138 @@ -746,8 +827,17 @@
  26.139  				</dict>
  26.140  				<key>stroke</key>
  26.141  				<dict>
  26.142 +					<key>Color</key>
  26.143 +					<dict>
  26.144 +						<key>b</key>
  26.145 +						<string>0.506072</string>
  26.146 +						<key>g</key>
  26.147 +						<string>0</string>
  26.148 +						<key>r</key>
  26.149 +						<string>0.0107934</string>
  26.150 +					</dict>
  26.151  					<key>CornerRadius</key>
  26.152 -					<real>50</real>
  26.153 +					<real>41</real>
  26.154  					<key>Pattern</key>
  26.155  					<integer>1</integer>
  26.156  				</dict>
  26.157 @@ -755,7 +845,7 @@
  26.158  		</dict>
  26.159  		<dict>
  26.160  			<key>Bounds</key>
  26.161 -			<string>{{226.00000858306885, 247.25}, {124.00000762939453, 28.75}}</string>
  26.162 +			<string>{{217.62500095367432, 247.25}, {140.75, 28.75}}</string>
  26.163  			<key>Class</key>
  26.164  			<string>ShapedGraphic</string>
  26.165  			<key>FontInfo</key>
  26.166 @@ -867,43 +957,6 @@
  26.167  		</dict>
  26.168  		<dict>
  26.169  			<key>Bounds</key>
  26.170 -			<string>{{144.00001239776611, 75}, {288, 216}}</string>
  26.171 -			<key>Class</key>
  26.172 -			<string>ShapedGraphic</string>
  26.173 -			<key>ID</key>
  26.174 -			<integer>1</integer>
  26.175 -			<key>Shape</key>
  26.176 -			<string>Rectangle</string>
  26.177 -			<key>Style</key>
  26.178 -			<dict>
  26.179 -				<key>fill</key>
  26.180 -				<dict>
  26.181 -					<key>Draws</key>
  26.182 -					<string>NO</string>
  26.183 -				</dict>
  26.184 -				<key>shadow</key>
  26.185 -				<dict>
  26.186 -					<key>Draws</key>
  26.187 -					<string>NO</string>
  26.188 -				</dict>
  26.189 -				<key>stroke</key>
  26.190 -				<dict>
  26.191 -					<key>Color</key>
  26.192 -					<dict>
  26.193 -						<key>b</key>
  26.194 -						<string>0.336538</string>
  26.195 -						<key>g</key>
  26.196 -						<string>0.692383</string>
  26.197 -						<key>r</key>
  26.198 -						<string>0.371516</string>
  26.199 -					</dict>
  26.200 -					<key>Width</key>
  26.201 -					<real>2</real>
  26.202 -				</dict>
  26.203 -			</dict>
  26.204 -		</dict>
  26.205 -		<dict>
  26.206 -			<key>Bounds</key>
  26.207  			<string>{{144.00004291534424, 276}, {288, 28.75}}</string>
  26.208  			<key>Class</key>
  26.209  			<string>ShapedGraphic</string>
  26.210 @@ -1062,7 +1115,7 @@
  26.211  	<key>MasterSheets</key>
  26.212  	<array/>
  26.213  	<key>ModificationDate</key>
  26.214 -	<string>2012-09-28 00:06:34 +0000</string>
  26.215 +	<string>2012-10-19 18:46:12 +0000</string>
  26.216  	<key>Modifier</key>
  26.217  	<string>Alan Stearns</string>
  26.218  	<key>NotesVisible</key>
  26.219 @@ -1093,7 +1146,7 @@
  26.220  		<key>NSPaperSize</key>
  26.221  		<array>
  26.222  			<string>size</string>
  26.223 -			<string>{612.00002479553223, 792}</string>
  26.224 +			<string>{612, 792}</string>
  26.225  		</array>
  26.226  		<key>NSPrintReverseOrientation</key>
  26.227  		<array>
  26.228 @@ -1138,7 +1191,7 @@
  26.229  		<key>ExpandedCanvases</key>
  26.230  		<array/>
  26.231  		<key>Frame</key>
  26.232 -		<string>{{894, 390}, {711, 872}}</string>
  26.233 +		<string>{{894, 129}, {1029, 1133}}</string>
  26.234  		<key>ListView</key>
  26.235  		<true/>
  26.236  		<key>OutlineWidth</key>
  26.237 @@ -1152,15 +1205,15 @@
  26.238  		<key>SidebarWidth</key>
  26.239  		<integer>120</integer>
  26.240  		<key>VisibleRegion</key>
  26.241 -		<string>{{0, 0}, {576, 733}}</string>
  26.242 +		<string>{{71.5, 0}, {440, 489.5}}</string>
  26.243  		<key>Zoom</key>
  26.244 -		<real>1</real>
  26.245 +		<real>2</real>
  26.246  		<key>ZoomValues</key>
  26.247  		<array>
  26.248  			<array>
  26.249  				<string>Canvas 1</string>
  26.250 -				<real>1</real>
  26.251 -				<real>1</real>
  26.252 +				<real>2</real>
  26.253 +				<real>4</real>
  26.254  			</array>
  26.255  		</array>
  26.256  	</dict>
    27.1 Binary file css3-exclusions/images/rounded-rect-overflow.png has changed
    28.1 --- a/css3-flexbox/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    28.2 +++ b/css3-flexbox/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    28.3 @@ -1,23 +1,24 @@
    28.4  <!DOCTYPE html>
    28.5  
    28.6  <html lang=en>
    28.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
    28.8 + <head>
    28.9    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   28.10    <title>CSS Flexible Box Layout Module</title>
   28.11 -
   28.12 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
   28.13 -  <meta content="CSS Flexible Box Layout Module" name=DC.title>
   28.14 -  <meta content=text name=DC.type>
   28.15 -  <meta content=2012-09-21 name=DC.issued>
   28.16 -  <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=DC.creator>
   28.17 -  <meta content=W3C name=DC.publisher>
   28.18 -  <meta content="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/"
   28.19 -   name=DC.identifier>
   28.20 -  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   28.21 -   rel=DC.rights>
   28.22 +  <!--
   28.23 +  <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
   28.24 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
   28.25 +  -->
   28.26 +
   28.27 +  <meta content="CSS Flexible Box Layout Module" name=dcterms.title>
   28.28 +  <meta content=text name=dcterms.type>
   28.29 +  <meta content=2012-10-16 name=dcterms.issued>
   28.30 +  <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=dcterms.creator>
   28.31 +  <meta content=W3C name=dcterms.publisher>
   28.32 +  <meta content="http://www.w3.org/TR/2012/ED-css3-flexbox-20121016/"
   28.33 +   name=dcterms.identifier>
   28.34    <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
   28.35     type="text/css">
   28.36 -  <link href="http://www.w3.org/StyleSheets/TR/W3C-CR" rel=stylesheet
   28.37 +  <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
   28.38     type="text/css">
   28.39    <style>
   28.40  	code.one-line { white-space: pre; }
   28.41 @@ -216,31 +217,30 @@
   28.42  
   28.43     <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
   28.44  
   28.45 -   <h2 class="no-num no-toc" id=w3c-working>W3C Candidate Recommendation, 21
   28.46 -    September 2012</h2>
   28.47 +   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 16 October 2012</h2>
   28.48  
   28.49     <dl>
   28.50      <dt>This version:
   28.51 +     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20121016/">http://www.w3.org/TR/2012/CR-css3-flexbox-20121016/</a>-->
   28.52 +
   28.53 +    <dd><a
   28.54 +     href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
   28.55 +
   28.56 +    <dt>Latest version:
   28.57 +     <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>-->
   28.58 +
   28.59 +    <dd><a
   28.60 +     href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
   28.61 +
   28.62 +    <dt>Editor's Draft:
   28.63 +
   28.64 +    <dd><a
   28.65 +     href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
   28.66 +
   28.67 +    <dt>Previous version:
   28.68  
   28.69      <dd><a
   28.70       href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a>
   28.71 -     <!--<dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> -->
   28.72 -
   28.73 -    <dt>Latest version:
   28.74 -     <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>-->
   28.75 -
   28.76 -    <dd><a
   28.77 -     href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
   28.78 -
   28.79 -    <dt>Editor's Draft:
   28.80 -
   28.81 -    <dd><a
   28.82 -     href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
   28.83 -
   28.84 -    <dt>Previous version:
   28.85 -
   28.86 -    <dd><a
   28.87 -     href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a>
   28.88  
   28.89      <dt>Issues List:
   28.90  
   28.91 @@ -313,46 +313,35 @@
   28.92    <h2 class="no-num no-toc" id=status>Status of this document</h2>
   28.93    <!--begin-status-->
   28.94  
   28.95 -  <p><em>This section describes the status of this document at the time of
   28.96 -   its publication. Other documents may supersede this document. A list of
   28.97 -   current W3C publications and the latest revision of this technical report
   28.98 -   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   28.99 -   index at http://www.w3.org/TR/.</a></em>
  28.100 -
  28.101 -  <p>This document was produced by the <a
  28.102 -   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> as a <a
  28.103 -   href="http://www.w3.org/Consortium/Process/tr#RecsCR">Candidate
  28.104 -   Recommendation.</a>
  28.105 -
  28.106 -  <p>A Candidate Recommendation is a document that has been widely reviewed
  28.107 -   and is ready for implementation. W3C encourages everybody to implement
  28.108 -   this specification and return comments to the (<a
  28.109 +  <p>This is a public copy of the editors' draft. It is provided for
  28.110 +   discussion only and may change at any moment. Its publication here does
  28.111 +   not imply endorsement of its contents by W3C. Don't cite this document
  28.112 +   other than as work in progress.
  28.113 +
  28.114 +  <p>The (<a
  28.115     href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
  28.116     mailing list <a
  28.117     href="mailto:www-style@w3.org?Subject=%5Bcss3-flexbox%5D%20PUT%20SUBJECT%20HERE">
  28.118     www-style@w3.org</a> (see <a
  28.119 -   href="http://www.w3.org/Mail/Request">instructions</a>). When sending
  28.120 -   e-mail, please put the text “css3-flexbox” in the subject, preferably
  28.121 -   like this: “[<!---->css3-flexbox<!---->] <em>…summary of
  28.122 -   comment…</em>”
  28.123 -
  28.124 -  <p>Publication as a Candidate Recommendation does not imply endorsement by
  28.125 -   the W3C Membership. This is a draft document and may be updated, replaced
  28.126 -   or obsoleted by other documents at any time. It is inappropriate to cite
  28.127 -   this document as other than work in progress.
  28.128 +   href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
  28.129 +   discussion of this specification. When sending e-mail, please put the text
  28.130 +   “css3-flexbox” in the subject, preferably like this:
  28.131 +   “[<!---->css3-flexbox<!---->] <em>…summary of comment…</em>”
  28.132 +
  28.133 +  <p>This document was produced by the <a href="/Style/CSS/members">CSS
  28.134 +   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
  28.135  
  28.136    <p>This document was produced by a group operating under the <a
  28.137 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
  28.138 -   2004 W3C Patent Policy</a>. W3C maintains a <a
  28.139 -   href="http://www.w3.org/2004/01/pp-impl/32061/status"
  28.140 +   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
  28.141 +   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
  28.142     rel=disclosure>public list of any patent disclosures</a> made in
  28.143     connection with the deliverables of the group; that page also includes
  28.144     instructions for disclosing a patent. An individual who has actual
  28.145     knowledge of a patent which the individual believes contains <a
  28.146 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">
  28.147 -   Essential Claim(s)</a> must disclose the information in accordance with <a
  28.148 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">
  28.149 -   section 6 of the W3C Patent Policy</a>.</p>
  28.150 +   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
  28.151 +   Claim(s)</a> must disclose the information in accordance with <a
  28.152 +   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
  28.153 +   W3C Patent Policy</a>.</p>
  28.154    <!--end-status-->
  28.155  
  28.156    <p>The CR period will last at least until 20 March 2013. At the time of
  28.157 @@ -396,7 +385,7 @@
  28.158     <li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a>
  28.159      <ul class=toc>
  28.160       <li><a href="#abspos-items"><span class=secno>4.1. </span>
  28.161 -      Absolutely-Positioned Flex Items</a>
  28.162 +      Absolutely-Positioned Flex Children</a>
  28.163  
  28.164       <li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item
  28.165        Margins</a>
  28.166 @@ -920,12 +909,12 @@
  28.167  
  28.168    <p> The contents of a <a href="#flex-container"><i>flex container</i></a>
  28.169     consists of zero or more <dfn id=flex-item title="flex item">flex
  28.170 -   items</dfn>: each child of a <a href="#flex-container"><i>flex
  28.171 +   items</dfn>: each in-flow child of a <a href="#flex-container"><i>flex
  28.172     container</i></a> becomes a <a href="#flex-item"><i>flex item</i></a>, and
  28.173     each contiguous run of text that is directly contained inside a <a
  28.174     href="#flex-container"><i>flex container</i></a> is wrapped in an
  28.175 -   anonymous <a href="#flex-item"><i>flex item</i></a>. However, an anonymous
  28.176 -   flex item that contains only <a
  28.177 +   anonymous <a href="#flex-item"><i>flex item</i></a> element. However, an
  28.178 +   anonymous flex item that contains only <a
  28.179     href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white
  28.180     space</a> is not rendered, as if it were ‘<code
  28.181     class=css>display:none</code>’.
  28.182 @@ -1007,28 +996,29 @@
  28.183     href="#flex-item"><i>flex item</i></a>.
  28.184  
  28.185    <h3 id=abspos-items><span class=secno>4.1. </span> Absolutely-Positioned
  28.186 -   Flex Items</h3>
  28.187 -
  28.188 -  <p> An absolutely-positioned <a href="#flex-item"><i>flex item</i></a> does
  28.189 -   not participate in flex layout beyond the <a
  28.190 -   href="#algo-flex-order">reordering step</a>. However, if both ‘<code
  28.191 -   class=property>left</code>’ and ‘<code class=property>right</code>’
  28.192 -   or both ‘<code class=property>top</code>’ and ‘<code
  28.193 -   class=property>bottom</code>’ are ‘<code class=css>auto</code>’,
  28.194 -   then the used value of those properties are computed from its <dfn
  28.195 -   id=flex-item-static-position>static position</dfn>, as follows:
  28.196 +   Flex Children</h3>
  28.197 +
  28.198 +  <p> An absolutely-positioned child element of a <a
  28.199 +   href="#flex-container"><i>flex container</i></a> does not participate in
  28.200 +   flex layout beyond the <a href="#algo-flex-order">reordering step</a>.
  28.201 +   However, if both ‘<code class=property>left</code>’ and ‘<code
  28.202 +   class=property>right</code>’ or both ‘<code
  28.203 +   class=property>top</code>’ and ‘<code class=property>bottom</code>’
  28.204 +   are ‘<code class=css>auto</code>’, then the used value of those
  28.205 +   properties are computed from its <dfn id=flex-item-static-position>static
  28.206 +   position</dfn>, as follows:
  28.207  
  28.208    <p> If both ‘<code class=property>left</code>’ and ‘<code
  28.209     class=property>right</code>’ are ‘<code class=css>auto</code>’, the
  28.210 -   <a href="#flex-item"><i>flex item</i></a> must be positioned so that its
  28.211 -   <a href="#main-start"><i>main-start</i></a> or <a
  28.212 +   absolutely-positioned child must be positioned so that its <a
  28.213 +   href="#main-start"><i>main-start</i></a> or <a
  28.214     href="#cross-start"><i>cross-start</i></a> edge (whichever is in the
  28.215     horizontal axis) is aligned with the <a
  28.216     href="#flex-item-static-position"><i>static position</i></a>. If both
  28.217     ‘<code class=property>top</code>’ and ‘<code
  28.218     class=property>bottom</code>’ are ‘<code class=css>auto</code>’, the
  28.219 -   <a href="#flex-item"><i>flex item</i></a> must be positioned so that its
  28.220 -   <a href="#main-start"><i>main-start</i></a> or <a
  28.221 +   absolutely-positioned child must be positioned so that its <a
  28.222 +   href="#main-start"><i>main-start</i></a> or <a
  28.223     href="#cross-start"><i>cross-start</i></a> edge (whichever is in the
  28.224     vertical axis) is aligned with the <a
  28.225     href="#flex-item-static-position"><i>static position</i></a>.
  28.226 @@ -1036,16 +1026,16 @@
  28.227    <p> In the <a href="#main-axis"><i>main axis</i></a>,
  28.228  
  28.229    <ol>
  28.230 -   <li> If there is a subsequent in-flow <a href="#flex-item"><i>flex
  28.231 -    item</i></a> on the same <i>flex line</i>, the <a
  28.232 +   <li> If there is a subsequent <a href="#flex-item"><i>flex item</i></a> on
  28.233 +    the same <i>flex line</i>, the <a
  28.234      href="#flex-item-static-position"><i>static position</i></a> is the outer
  28.235      <a href="#main-start"><i>main-start</i></a> edge of that <a
  28.236      href="#flex-item"><i>flex item</i></a>.
  28.237  
  28.238 -   <li> Otherwise, if there is a preceding in-flow <a
  28.239 -    href="#flex-item"><i>flex item</i></a> on the same <i>flex line</i>, the
  28.240 -    <a href="#flex-item-static-position"><i>static position</i></a> is the
  28.241 -    outer <a href="#main-end"><i>main-end</i></a> edge of that <a
  28.242 +   <li> Otherwise, if there is a preceding <a href="#flex-item"><i>flex
  28.243 +    item</i></a> on the same <i>flex line</i>, the <a
  28.244 +    href="#flex-item-static-position"><i>static position</i></a> is the outer
  28.245 +    <a href="#main-end"><i>main-end</i></a> edge of that <a
  28.246      href="#flex-item"><i>flex item</i></a>.
  28.247  
  28.248     <li> Otherwise, the <a href="#flex-item-static-position"><i>static
  28.249 @@ -1054,16 +1044,16 @@
  28.250      class=property>justify-content</code></a>’ on the <a
  28.251      href="#flex-container"><i>flex container</i></a> as if the <a
  28.252      href="#flex-item-static-position"><i>static position</i></a> were
  28.253 -    represented by a zero-sized flex item.
  28.254 +    represented by a zero-sized <a href="#flex-item"><i>flex item</i></a>.
  28.255    </ol>
  28.256  
  28.257    <p> In the <a href="#cross-axis"><i>cross axis</i></a>,
  28.258  
  28.259    <ol>
  28.260 -   <li> If there is a preceding in-flow <a href="#flex-item"><i>flex
  28.261 -    item</i></a>, the <a href="#flex-item-static-position"><i>static
  28.262 -    position</i></a> is the <a href="#cross-start"><i>cross-start</i></a>
  28.263 -    edge of the <i>flex-line</i> that item is in.
  28.264 +   <li> If there is a preceding <a href="#flex-item"><i>flex item</i></a>,
  28.265 +    the <a href="#flex-item-static-position"><i>static position</i></a> is
  28.266 +    the <a href="#cross-start"><i>cross-start</i></a> edge of the
  28.267 +    <i>flex-line</i> that item is in.
  28.268  
  28.269     <li> Otherwise, the <a href="#flex-item-static-position"><i>static
  28.270      position</i></a> is the <i>cross-start edge</i> of the first <i>flex
  28.271 @@ -1634,8 +1624,8 @@
  28.272     <p> Note that the ‘<a href="#flex-flow"><code
  28.273      class=property>flex-flow</code></a>’ directions are <i>writing-mode</i>
  28.274      sensitive. In vertical Japanese, for example, a ‘<a
  28.275 -    href="#flex-flow-row"><code class=css>row</code></a>’ flexbox lays out
  28.276 -    its contents from top to bottom, as seen in this example:
  28.277 +    href="#flex-flow-row"><code class=css>row</code></a>’ flex container
  28.278 +    lays out its contents from top to bottom, as seen in this example:
  28.279  
  28.280     <table style="margin: 1em auto; text-align: center;">
  28.281      <thead>
  28.282 @@ -1687,7 +1677,7 @@
  28.283      <tr>
  28.284       <th>Applies to:
  28.285  
  28.286 -     <td>flex items
  28.287 +     <td>flex items and absolutely-positioned flex container children
  28.288  
  28.289      <tr>
  28.290       <th>Inherited:
  28.291 @@ -1863,7 +1853,7 @@
  28.292     <p> This example shows four buttons that do not fit horizontally.
  28.293  
  28.294     <pre>&lt;style>
  28.295 -#flexbox {
  28.296 +#flex {
  28.297  	display: flex;
  28.298  	flex-flow: row wrap;
  28.299  	width: 300px;
  28.300 @@ -1873,7 +1863,7 @@
  28.301  }
  28.302  &lt;style>
  28.303  
  28.304 -&lt;div id="flexbox">
  28.305 +&lt;div id="flex">
  28.306  	&lt;div class='item'>1&lt;/div>
  28.307  	&lt;div class='item'>2&lt;/div>
  28.308  	&lt;div class='item'>3&lt;/div>
  28.309 @@ -2374,10 +2364,11 @@
  28.310     horizontal and vertical centering.
  28.311  
  28.312    <p class=note> While the alignment properties are defined in the Box
  28.313 -   Alignment spec, Flexbox reproduces the definitions of the relevant ones
  28.314 -   here so as to not create a normative dependency that may slow down
  28.315 -   advancement of the spec. These properties apply only to flex layout until
  28.316 -   Box Alignment is finished and defines their effect for other layout modes.
  28.317 +   Alignment spec, Flexible Box Layout reproduces the definitions of the
  28.318 +   relevant ones here so as to not create a normative dependency that may
  28.319 +   slow down advancement of the spec. These properties apply only to flex
  28.320 +   layout until Box Alignment is finished and defines their effect for other
  28.321 +   layout modes.
  28.322  
  28.323    <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<code
  28.324     class=css>auto</code>’ margins</h3>
  28.325 @@ -2473,8 +2464,8 @@
  28.326      <figcaption> The items in the figure on the left are centered with
  28.327      margins, while those in the figure on the right are centered with ‘<a
  28.328      href="#align-self"><code class=property>align-self</code></a>’. If this
  28.329 -    column flexbox was placed against the left edge of the page, the margin
  28.330 -    behavior would be more desirable, as the long item would be fully
  28.331 +    column flex container was placed against the left edge of the page, the
  28.332 +    margin behavior would be more desirable, as the long item would be fully
  28.333      readable. In other circumstances, the true centering behavior might be
  28.334      better. </figcaption> </figure>
  28.335    </div>
  28.336 @@ -2876,7 +2867,7 @@
  28.337     the <i>cross-axis</i>, similar to how ‘<a href="#justify-content"><code
  28.338     class=property>justify-content</code></a>’ aligns individual items
  28.339     within the <i>main-axis</i>. Note, this property has no effect when the
  28.340 -   flexbox has only a single line. Values have the following meanings:
  28.341 +   flex container has only a single line. Values have the following meanings:
  28.342  
  28.343    <dl>
  28.344     <dt><dfn id=align-content-flex-start>‘<code
  28.345 @@ -3134,14 +3125,16 @@
  28.346     <li id=algo-anon-box> <strong>Generate anonymous flex items</strong> as
  28.347      described in the <a href="#flex-items">Flex Items</a> section.
  28.348  
  28.349 -   <li id=algo-flex-order> <strong>Re-order the flex items according to their
  28.350 -    ‘<a href="#order"><code class=property>order</code></a>’.</strong>
  28.351 -    The items with the lowest (most negative) ‘<a href="#order"><code
  28.352 +   <li id=algo-flex-order> <strong>Re-order the flex items and absolutely
  28.353 +    positioned flex container children according to their ‘<a
  28.354 +    href="#order"><code class=property>order</code></a>’.</strong> The
  28.355 +    elements with the lowest (most negative) ‘<a href="#order"><code
  28.356      class=property>order</code></a>’ values are first in the ordering. If
  28.357 -    multiple items share a ‘<a href="#order"><code
  28.358 +    multiple elements share an ‘<a href="#order"><code
  28.359      class=property>order</code></a>’ value, they're ordered by document
  28.360 -    order. This affects the order in which the flex items generate boxes in
  28.361 -    the box-tree, and how the rest of this algorithm deals with the items.
  28.362 +    order. This affects the order in which the elements generate boxes in the
  28.363 +    box-tree, and how the rest of this algorithm deals with the generated
  28.364 +    flex items.
  28.365    </ol>
  28.366  
  28.367    <h3 id=line-sizing><span class=secno>9.2. </span> Line Length Determination</h3>
  28.368 @@ -3983,43 +3976,12 @@
  28.369    <h2 class=no-num id=changes>Changes</h2>
  28.370  
  28.371    <p> The following significant changes were made since the <a
  28.372 -   href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012
  28.373 -   Last Call Working Draft</a>:
  28.374 +   href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September
  28.375 +   2012 Candidate Recommendation</a>:
  28.376  
  28.377    <ul>
  28.378 -   <li>All children of a flex container now become flex items (not just those
  28.379 -    that are not ‘<code class=css>inline</code>’).
  28.380 -
  28.381 -   <li>Defined <a href="#painting">painting behavior of flex items</a>.
  28.382 -
  28.383 -   <li>Made ‘<code class=property>z-index</code>’ automatically apply to
  28.384 -    flex items.
  28.385 -
  28.386 -   <li>Changed how absolutely-positioned flex container children are handled
  28.387 -    so that they don't impact layout.
  28.388 -
  28.389 -   <li>Defined which properties apply to the table wrapper box vs. the table
  28.390 -    box of a table element.
  28.391 -
  28.392 -   <li>Defined interaction of ‘<a href="#order"><code
  28.393 -    class=property>order</code></a>’ and <a
  28.394 -    href="http://www.w3.org/TR/css3-speech/">speech</a>, <a
  28.395 -    href="http://www.w3.org/TR/css3-ui/#nav-index">‘<code
  28.396 -    class=property>nav-index</code>’</a>.
  28.397 -
  28.398 -   <li>Corrected errors in the <a href="#layout-algorithm">flex layout
  28.399 -    algorithm</a>.
  28.400 -
  28.401 -   <li>Defined <a href="#flex-baselines">baselines in flex layout</a>.
  28.402 -
  28.403 -   <li>Various clarifications to the <a href="#flex-containers">flex
  28.404 -    containers</a> and <a href="#flex-items">flex items</a> chapters.
  28.405 -
  28.406 -   <li>Clarified parsing of the ‘<a href="#flex"><code
  28.407 -    class=property>flex</code></a>’ shorthand and unitless zeroes.
  28.408 -
  28.409 -   <li>Added or rewrote many examples to make them more realistic and more
  28.410 -    interesting.
  28.411 +   <li>Absolutely positioned children of a flex container are no longer
  28.412 +    called "flex items" (to avoid terminology confusion).
  28.413    </ul>
  28.414  
  28.415    <p>A <a
  28.416 @@ -4252,7 +4214,7 @@
  28.417  
  28.418       <td>0
  28.419  
  28.420 -     <td>flex items
  28.421 +     <td>flex items and absolutely-positioned flex container children
  28.422  
  28.423       <td>no
  28.424  
    29.1 --- a/css3-flexbox/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    29.2 +++ b/css3-flexbox/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    29.3 @@ -204,8 +204,8 @@
    29.4  
    29.5  	<dl>
    29.6  		<dt>This version:
    29.7 -		<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a>
    29.8 -		<!--<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> -->
    29.9 +		<!--<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a>-->
   29.10 +		<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
   29.11  		<dt>Latest version:
   29.12  		<!--<dd><a href="[LATEST]">[LATEST]</a>-->
   29.13  		<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
   29.14 @@ -214,7 +214,7 @@
   29.15  		<dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
   29.16  
   29.17  		<dt>Previous version:
   29.18 -		<dd><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a>
   29.19 +		<dd><a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a>
   29.20  
   29.21  		<dt>Issues List:
   29.22          <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Flexbox&amp;resolution=---">Bugzilla Bugs for Flexbox</a>
   29.23 @@ -589,10 +589,10 @@
   29.24  
   29.25  	<p>
   29.26  		The contents of a <i>flex container</i> consists of zero or more <dfn title="flex item" id="flex-item">flex items</dfn>:
   29.27 -		each child of a <i>flex container</i>
   29.28 +		each in-flow child of a <i>flex container</i>
   29.29  		becomes a <i>flex item</i>,
   29.30  		and each contiguous run of text that is directly contained inside a <i>flex container</i>
   29.31 -		is wrapped in an anonymous <i>flex item</i>.
   29.32 +		is wrapped in an anonymous <i>flex item</i> element.
   29.33  		However, an anonymous flex item that contains only
   29.34  		<a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a>
   29.35  		is not rendered, as if it were ''display:none''.
   29.36 @@ -665,10 +665,10 @@
   29.37  		and the table box were the <i>flex item</i>.
   29.38  
   29.39  <h3 id='abspos-items'>
   29.40 -Absolutely-Positioned Flex Items</h3>
   29.41 +Absolutely-Positioned Flex Children</h3>
   29.42  
   29.43  	<p>
   29.44 -		An absolutely-positioned <i>flex item</i> does not participate in flex layout
   29.45 +		An absolutely-positioned child element of a <i>flex container</i> does not participate in flex layout
   29.46  		beyond the <a href="#algo-flex-order">reordering step</a>.
   29.47  		However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'',
   29.48  		then the used value of those properties 
   29.49 @@ -676,12 +676,12 @@
   29.50  
   29.51  	<p>
   29.52  		If both 'left' and 'right' are ''auto'',
   29.53 -		the <i>flex item</i> must be positioned so that
   29.54 +		the absolutely-positioned child must be positioned so that
   29.55  		its <i>main-start</i> or <i>cross-start</i> edge
   29.56  		(whichever is in the horizontal axis)
   29.57  		is aligned with the <i>static position</i>.
   29.58  		If both 'top' and 'bottom' are ''auto'',
   29.59 -		the <i>flex item</i> must be positioned so that
   29.60 +		the absolutely-positioned child must be positioned so that
   29.61  		its <i>main-start</i> or <i>cross-start</i> edge
   29.62  		(whichever is in the vertical axis)
   29.63  		is aligned with the <i>static position</i>.
   29.64 @@ -691,17 +691,17 @@
   29.65  
   29.66  	<ol>
   29.67  		<li>
   29.68 -			If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>,
   29.69 +			If there is a subsequent <i>flex item</i> on the same <i>flex line</i>,
   29.70  			the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>.
   29.71  
   29.72  		<li>
   29.73 -			Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>,
   29.74 +			Otherwise, if there is a preceding <i>flex item</i> on the same <i>flex line</i>,
   29.75  			the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>.
   29.76  
   29.77  		<li>
   29.78  			Otherwise, the <i>static position</i> is determined
   29.79  			by the value of 'justify-content' on the <i>flex container</i>
   29.80 -			as if the <i>static position</i> were represented by a zero-sized flex item.
   29.81 +			as if the <i>static position</i> were represented by a zero-sized <i>flex item</i>.
   29.82  	</ol>
   29.83  
   29.84  	<p>
   29.85 @@ -709,7 +709,7 @@
   29.86  
   29.87  	<ol>
   29.88  		<li>
   29.89 -			If there is a preceding in-flow <i>flex item</i>,
   29.90 +			If there is a preceding <i>flex item</i>,
   29.91  			the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex-line</i>
   29.92  			that item is in.
   29.93  		<li>
   29.94 @@ -1169,7 +1169,7 @@
   29.95  		<p>
   29.96  			Note that the 'flex-flow' directions are <i>writing-mode</i> sensitive.
   29.97  			In vertical Japanese, for example,
   29.98 -			a ''row'' flexbox lays out its contents from top to bottom, 
   29.99 +			a ''row'' flex container lays out its contents from top to bottom, 
  29.100  			as seen in this example:
  29.101  		
  29.102  		<table style="margin: 1em auto; text-align: center;">
  29.103 @@ -1208,7 +1208,7 @@
  29.104  			<td>0
  29.105  		<tr>
  29.106  			<th>Applies to:
  29.107 -			<td>flex items
  29.108 +			<td>flex items and absolutely-positioned flex container children
  29.109  		<tr>
  29.110  			<th>Inherited:
  29.111  			<td>no
  29.112 @@ -1367,7 +1367,7 @@
  29.113  			This example shows four buttons that do not fit horizontally.
  29.114  
  29.115  		<pre>&lt;style>
  29.116 -#flexbox {
  29.117 +#flex {
  29.118  	display: flex;
  29.119  	flex-flow: row wrap;
  29.120  	width: 300px;
  29.121 @@ -1377,7 +1377,7 @@
  29.122  }
  29.123  &lt;style>
  29.124  
  29.125 -&lt;div id="flexbox">
  29.126 +&lt;div id="flex">
  29.127  	&lt;div class='item'>1&lt;/div>
  29.128  	&lt;div class='item'>2&lt;/div>
  29.129  	&lt;div class='item'>3&lt;/div>
  29.130 @@ -1767,7 +1767,7 @@
  29.131  
  29.132  	<p class='note'>
  29.133  		While the alignment properties are defined in the Box Alignment spec,
  29.134 -		Flexbox reproduces the definitions of the relevant ones here
  29.135 +		Flexible Box Layout reproduces the definitions of the relevant ones here
  29.136  		so as to not create a normative dependency that may slow down advancement of the spec.
  29.137  		These properties apply only to flex layout
  29.138  		until Box Alignment is finished
  29.139 @@ -1865,7 +1865,7 @@
  29.140  			<figcaption>
  29.141  				The items in the figure on the left are centered with margins,
  29.142  				while those in the figure on the right are centered with 'align-self'.
  29.143 -				If this column flexbox was placed against the left edge of the page,
  29.144 +				If this column flex container was placed against the left edge of the page,
  29.145  				the margin behavior would be more desirable,
  29.146  				as the long item would be fully readable.
  29.147  				In other circumstances,
  29.148 @@ -2146,7 +2146,7 @@
  29.149  		The 'align-content' property aligns a flex container's lines within the flex container 
  29.150  		when there is extra space in the <i>cross-axis</i>,
  29.151  		similar to how 'justify-content' aligns individual items within the <i>main-axis</i>.
  29.152 -		Note, this property has no effect when the flexbox has only a single line.
  29.153 +		Note, this property has no effect when the flex container has only a single line.
  29.154  		Values have the following meanings:
  29.155  
  29.156  	<dl>
  29.157 @@ -2402,12 +2402,12 @@
  29.158  			as described in the <a href="#flex-items">Flex Items</a> section.
  29.159  
  29.160  		<li id='algo-flex-order'>
  29.161 -			<strong>Re-order the flex items according to their 'order'.</strong>
  29.162 -			The items with the lowest (most negative) 'order' values are first in the ordering.  
  29.163 -			If multiple items share a 'order' value, 
  29.164 +			<strong>Re-order the flex items and absolutely positioned flex container children according to their 'order'.</strong>
  29.165 +			The elements with the lowest (most negative) 'order' values are first in the ordering.  
  29.166 +			If multiple elements share an 'order' value, 
  29.167  			they're ordered by document order.  
  29.168 -			This affects the order in which the flex items generate boxes in the box-tree, 
  29.169 -			and how the rest of this algorithm deals with the items.
  29.170 +			This affects the order in which the elements generate boxes in the box-tree, 
  29.171 +			and how the rest of this algorithm deals with the generated flex items.
  29.172  	</ol>
  29.173  
  29.174  <h3 id='line-sizing'>
  29.175 @@ -3280,21 +3280,9 @@
  29.176  
  29.177  	<p>
  29.178  		The following significant changes were made since the
  29.179 -		<a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012 Last Call Working Draft</a>:
  29.180 +		<a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September 2012 Candidate Recommendation</a>:
  29.181  	<ul>
  29.182 -		<li>All children of a flex container now become flex items (not just those that are not ''inline'').
  29.183 -		<li>Defined <a href="#painting">painting behavior of flex items</a>.
  29.184 -		<li>Made 'z-index' automatically apply to flex items.
  29.185 -		<li>Changed how absolutely-positioned flex container children are handled so that they don't impact layout.
  29.186 -		<li>Defined which properties apply to the table wrapper box vs. the table box of a table element.
  29.187 -		<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>.
  29.188 -		<li>Corrected errors in the <a href="#layout-algorithm">flex layout algorithm</a>.
  29.189 -		<li>Defined <a href="#flex-baselines">baselines in flex layout</a>.
  29.190 -		<li>Various clarifications to the
  29.191 -			<a href="#flex-containers">flex containers</a> and
  29.192 -			<a href="#flex-items">flex items</a> chapters.
  29.193 -		<li>Clarified parsing of the 'flex' shorthand and unitless zeroes.
  29.194 -		<li>Added or rewrote many examples to make them more realistic and more interesting.
  29.195 +		<li>Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion).
  29.196  	</ul>
  29.197  
  29.198  	<p>A <a href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of Last Call Comments</a> is available.
    30.1 --- a/css3-grid-layout/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    30.2 +++ b/css3-grid-layout/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    30.3 @@ -6,16 +6,17 @@
    30.4    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    30.5    <title>CSS Grid Layout</title>
    30.6  
    30.7 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
    30.8 -  <meta content="CSS Grid Layout" name=DC.title>
    30.9 -  <meta content=text name=DC.type>
   30.10 -  <meta content=2012-09-08 name=DC.issued>
   30.11 -  <meta content="http://dev.w3.org/csswg/css3-grid-layout/" name=DC.creator>
   30.12 -  <meta content=W3C name=DC.publisher>
   30.13 -  <meta content="http://www.w3.org/TR/2012/ED-css3-grid-layout-20120908/"
   30.14 -   name=DC.identifier>
   30.15 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   30.16    <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   30.17 -   rel=DC.rights>
   30.18 +   rel=dcterms.rights>
   30.19 +  <meta content="CSS Grid Layout" name=dcterms.title>
   30.20 +  <meta content=text name=dcterms.type>
   30.21 +  <meta content=2012-10-16 name=dcterms.issued>
   30.22 +  <meta content="http://dev.w3.org/csswg/css3-grid-layout/"
   30.23 +   name=dcterms.creator>
   30.24 +  <meta content=W3C name=dcterms.publisher>
   30.25 +  <meta content="http://www.w3.org/TR/2012/ED-css3-grid-layout-20121016/"
   30.26 +   name=dcterms.identifier>
   30.27    <link href="../default.css" rel=stylesheet type="text/css">
   30.28    <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   30.29     type="text/css">
   30.30 @@ -57,11 +58,11 @@
   30.31     <h1 class=title id=title>CSS Grid Layout</h1>
   30.32  
   30.33     <h2 class="no-num no-toc" id=longstatus-date-3-march-2012>Editor's Draft,
   30.34 -    8 September 2012</h2>
   30.35 +    16 October 2012</h2>
   30.36  
   30.37     <dl>
   30.38      <dt>This version:</dt>
   30.39 -    <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-grid-layout-20120908/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120908/</a> -->
   30.40 +    <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-grid-layout-20121016/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20121016/</a> -->
   30.41  
   30.42      <dd><a
   30.43       href="http://dev.w3.org/csswg/css3-grid-layout/">http://dev.w3.org/csswg/css3-grid-layout/</a>
   30.44 @@ -514,10 +515,10 @@
   30.45      </div>
   30.46  
   30.47      <div class=sidefigure>
   30.48 -     <p> <img alt="Image: An arrangment suitable for landscape orientation."
   30.49 +     <p> <img alt="Image: An arrangement suitable for landscape orientation."
   30.50        src="images/game-landscape.png">
   30.51  
   30.52 -     <p class=caption>An arrangment suitable for ‘<code
   30.53 +     <p class=caption>An arrangement suitable for ‘<code
   30.54        class=css>landscape</code>’ orientation.
   30.55      </div>
   30.56  
   30.57 @@ -1309,9 +1310,9 @@
   30.58       href="#grid-area-concept"><i>grid areas</i></a> may have the same
   30.59       identifier. Duplicate identifiers define a <a
   30.60       href="#grid-area-concept"><i>grid area</i></a> which spans multiple
   30.61 -     tracks, and must therefore therefore be geometrically adjacent to each
   30.62 -     other, forming a rectangular shape. A declaration which fails to meet
   30.63 -     these criteria will be dropped.
   30.64 +     tracks, and must therefore be geometrically adjacent to each other,
   30.65 +     forming a rectangular shape. A declaration which fails to meet these
   30.66 +     criteria will be dropped.
   30.67  
   30.68      <p> In the following example, a ‘<a href="#grid-template"><code
   30.69       class=property>grid-template</code></a>’ property is used to create a
   30.70 @@ -1828,7 +1829,7 @@
   30.71       <h3 id=grid-shorthand-properties0><span class=secno>6.2. </span>Grid
   30.72        shorthand properties</h3>
   30.73  
   30.74 -     <p>For all shorthand properties below, specifiying an &lt;identifier&gt;
   30.75 +     <p>For all shorthand properties below, specifying an &lt;identifier&gt;
   30.76        sets the values of all longhand properties associated with the
   30.77        shorthand property to the values associated with the &lt;identifier&gt;
   30.78        .
   30.79 @@ -2407,14 +2408,14 @@
   30.80        href="#grid-auto-flow"><code
   30.81        class=property>grid-auto-flow</code></a>’ property controls the
   30.82        direction in which the search for unoccupied space takes place, and
   30.83 -      whether rows or columns are added as needed to accomodate the content.
   30.84 +      whether rows or columns are added as needed to accommodate the content.
   30.85  
   30.86       <p> A ‘<a href="#grid-auto-flow"><code
   30.87        class=property>grid-auto-flow</code></a>’ value of ‘<a
   30.88        href="#rows"><code class=css>rows</code></a>’ will place <a
   30.89        href="#grid-item"><i>grid item</i></a>s in row-major order by searching
   30.90        across columns and then rows for unoccupied space, and will create
   30.91 -      additional rows as needed to accomodate content <a
   30.92 +      additional rows as needed to accommodate content <a
   30.93        href="#grid-item"><i>grid item</i></a>s. Similarly, a ‘<a
   30.94        href="#grid-auto-flow"><code
   30.95        class=property>grid-auto-flow</code></a>’ value of ‘<a
   30.96 @@ -2524,7 +2525,7 @@
   30.97        href="#rows"><code class=css>rows</code></a>’ which instructs the
   30.98        grid to search across its three columns starting with the first row,
   30.99        then the next, adding rows as needed until sufficient space is located
  30.100 -      to accomodate the position of any auto-placed <a
  30.101 +      to accommodate the position of any auto-placed <a
  30.102        href="#grid-item"><i>Grid item</i></a>. Figure 11 illustrates the
  30.103        result.
  30.104  
  30.105 @@ -2861,7 +2862,7 @@
  30.106  
  30.107          <li>That each <a href="#grid-track"><i>Grid track</i></a> grows from
  30.108           the breadth which satisfied its MinTrackSizingFunction to a breadth
  30.109 -         which satifies its MaxTrackSizingFunction, subject to
  30.110 +         which satisfies its MaxTrackSizingFunction, subject to
  30.111           RemainingSpace.
  30.112         </ol>
  30.113  
  30.114 @@ -2899,7 +2900,7 @@
  30.115          href="#grid-track"><i>Grid track</i></a> now contains the resolved
  30.116          value for its MaxTrackSizingFunction.
  30.117  
  30.118 -       <p> In step 3, the second goal of this function is satisified as each
  30.119 +       <p> In step 3, the second goal of this function is satisfied as each
  30.120          (non-fraction-sized) <a href="#grid-track"><i>Grid track</i></a>
  30.121          attempts to grow from the UsedBreadth value to the MaxBreadth value,
  30.122          subject to RemainingSpace.
  30.123 @@ -3083,13 +3084,13 @@
  30.124  
  30.125         <p class=issue> Currently this algorithm embodies several heuristics
  30.126          which regulate the growth of spanning <a href="#grid-item"><i>Grid
  30.127 -        items</i></a> to accomodate certain use cases. (E.g. the game example
  30.128 -        in Figures 2 and 3 above.) These heuristics should be a normative
  30.129 -        part of this specification to ensure interoperability. To the extent
  30.130 -        additional use cases can be identified that cannot be satisfied by
  30.131 -        following the current heuristics, the normative algorithm can be
  30.132 -        updated, or additional mechanisms can be introduced for fine-grained
  30.133 -        control of content-based TrackSizingFunction.
  30.134 +        items</i></a> to accommodate certain use cases. (E.g. the game
  30.135 +        example in Figures 2 and 3 above.) These heuristics should be a
  30.136 +        normative part of this specification to ensure interoperability. To
  30.137 +        the extent additional use cases can be identified that cannot be
  30.138 +        satisfied by following the current heuristics, the normative
  30.139 +        algorithm can be updated, or additional mechanisms can be introduced
  30.140 +        for fine-grained control of content-based TrackSizingFunction.
  30.141  
  30.142         <dl>
  30.143          <dt> <dfn
  30.144 @@ -3648,7 +3649,7 @@
  30.145       <li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth
  30.146        in step 4, rather than all Grid Tracks.
  30.147  
  30.148 -     <li>Section 10.2: Fixed minor spelling error "Contstriant"
  30.149 +     <li>Section 10.2: Fixed minor spelling error "Constraint"
  30.150  
  30.151       <li>Section 11: Added a definition of the preferred minimum width and
  30.152        the preferred width of the Grid element.
  30.153 @@ -3783,10 +3784,10 @@
  30.154      <dt id=CSS3VAL>[CSS3VAL]
  30.155  
  30.156      <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
  30.157 -     href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS
  30.158 -     Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working
  30.159 -     Draft. (Work in progress.) URL: <a
  30.160 -     href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a>
  30.161 +     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
  30.162 +     Values and Units Module Level 3.</cite></a> 28 August 2012. W3C
  30.163 +     Candidate Recommendation. (Work in progress.) URL: <a
  30.164 +     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
  30.165      </dd>
  30.166      <!---->
  30.167     </dl>
    31.1 --- a/css3-grid-layout/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    31.2 +++ b/css3-grid-layout/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    31.3 @@ -227,9 +227,9 @@
    31.4          
    31.5              <div class="sidefigure">
    31.6                  <p>
    31.7 -                    <img alt="Image: An arrangment suitable for landscape orientation." src="images/game-landscape.png" />
    31.8 +                    <img alt="Image: An arrangement suitable for landscape orientation." src="images/game-landscape.png" />
    31.9                  </p>
   31.10 -                <p class="caption">An arrangment suitable for ''landscape'' orientation.</p>
   31.11 +                <p class="caption">An arrangement suitable for ''landscape'' orientation.</p>
   31.12              </div>
   31.13              <p>
   31.14                  Continuing the prior example, the author also wants the game to adapt to the space available on traditional computer monitors, handheld devices, 
   31.15 @@ -779,7 +779,7 @@
   31.16                  <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>&rsquo;s structure while simultaneously defining the <i>Grid areas</i> which can be used to position and size the child elements of the Grid.
   31.17              </p>
   31.18  			<p>
   31.19 -				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.
   31.20 +				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 be geometrically adjacent to each other, forming a rectangular shape. A declaration which fails to meet these criteria will be dropped.
   31.21  			</p>
   31.22              <p>
   31.23                  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. 
   31.24 @@ -1177,7 +1177,7 @@
   31.25  		<div id="grid-shorthand-properties" class="section">
   31.26          <h3>Grid shorthand properties</h3>
   31.27  		
   31.28 -		<p>For all shorthand properties below, specifiying an &lt;identifier&gt; sets the values of all longhand properties associated with the shorthand property to the values associated with the &lt;identifier&gt; .</p>
   31.29 +		<p>For all shorthand properties below, specifying an &lt;identifier&gt; sets the values of all longhand properties associated with the shorthand property to the values associated with the &lt;identifier&gt; .</p>
   31.30  		
   31.31  		<p>The 'grid-column-position' and 'grid-column-span' properties can be simultaneously specified with the 'grid-column' shorthand property. Likewise, the 'grid-row-position' and 'grid-row-span' properties can be simultaneously specified with the 'grid-row' shorthand property. Note that the first input refers to the starting <i>grid line</i>, while the second, optional input refers to the span of the <i>grid item</i> if an integer, and the ending <i>grid line</i> if a string. Note also that the second input cannot be a string if the first input is ''auto''.
   31.32  		</p>
   31.33 @@ -1589,11 +1589,11 @@
   31.34          <h3>Automatic Placement of Grid Items</h3>
   31.35              <p>
   31.36                  <i>Grid items</i> can be automatically placed into an unoccupied space of the Grid.
   31.37 -                The 'grid-auto-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.
   31.38 +                The 'grid-auto-flow' property controls the direction in which the search for unoccupied space takes place, and whether rows or columns are added as needed to accommodate the content.
   31.39              </p>
   31.40              <p>
   31.41                  A 'grid-auto-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
   31.42 -                as needed to accomodate content <i>grid item</i>s.  Similarly, a 'grid-auto-flow' value of ''columns'' will place <i>grid item</i>s in column-major order, creating new columns as needed.
   31.43 +                as needed to accommodate content <i>grid item</i>s.  Similarly, a 'grid-auto-flow' value of ''columns'' will place <i>grid item</i>s in column-major order, creating new columns as needed.
   31.44              </p>
   31.45              <table id="grid-auto-flow-property" class="propdef">
   31.46                      <tbody>
   31.47 @@ -1651,7 +1651,7 @@
   31.48                      In the following example, there are three columns, each auto-sized to their contents.
   31.49                      No rows are explicitly defined.  The 'grid-auto-flow' property is ''rows'' which instructs the grid
   31.50                      to search across its three columns starting with the first row, then the next, adding rows
   31.51 -                    as needed until sufficient space is located to accomodate the position of any auto-placed 
   31.52 +                    as needed until sufficient space is located to accommodate the position of any auto-placed 
   31.53                      <i>Grid item</i>.
   31.54                      Figure 11 illustrates the result.
   31.55                  </p>
   31.56 @@ -1881,7 +1881,7 @@
   31.57                      </p>
   31.58                      <ol>
   31.59                          <li>That each <i>Grid track</i> satisfies its MinTrackSizingFunction</li>
   31.60 -                        <li>That each <i>Grid track</i> grows from the breadth which satisfied its MinTrackSizingFunction to a breadth which satifies its MaxTrackSizingFunction, subject to RemainingSpace.</li>
   31.61 +                        <li>That each <i>Grid track</i> grows from the breadth which satisfied its MinTrackSizingFunction to a breadth which satisfies its MaxTrackSizingFunction, subject to RemainingSpace.</li>
   31.62                      </ol>
   31.63                      <p>
   31.64                          For the purposes of resolving the breadth that satisfies the MinTrackSizingFunction and MaxTrackSizingFunction, each <i>Grid track</i> falls into one of three categories:
   31.65 @@ -1897,7 +1897,7 @@
   31.66                          the UsedBreadth variable of each GridTrack now satisfies its MinTrackSizingFunction. The MaxBreadth variable for each <i>Grid track</i> now contains the resolved value for its MaxTrackSizingFunction. 
   31.67                      </p>
   31.68                      <p>
   31.69 -                        In step 3, the second goal of this function is satisified as each (non-fraction-sized) <i>Grid track</i> 
   31.70 +                        In step 3, the second goal of this function is satisfied as each (non-fraction-sized) <i>Grid track</i> 
   31.71                          attempts to grow from the UsedBreadth value to the MaxBreadth value, subject to RemainingSpace.
   31.72                      </p>
   31.73                      <p>
   31.74 @@ -2032,7 +2032,7 @@
   31.75                          The purpose of this function is to resolve the contribution that each <i>Grid item</i> makes to any min-content or max-content TrackSizingFunctions for the <i>Grid tracks</i> it covers. There are four permutations: min-content or max-content in either the MinTrackSizingFunction or MaxTrackSizingFunction. MinTrackSizingFunctions are resolved before MaxTrackSizingFunctions, and min-content contributions are resolved before max-content contributions. Note that when resolving min-content contributions they may grow tracks that have either min-content or max-content keywords, as seen in 3.a.i and 3.b.i below.
   31.76                      </p>
   31.77                      <p class="issue">
   31.78 -                        Currently this algorithm embodies several heuristics which regulate the growth of spanning <i>Grid items</i> to accomodate certain use cases. (E.g. the game example in Figures 2 and 3 above.) These heuristics should be a normative part of this specification to ensure interoperability. To the extent additional use cases can be identified that cannot be satisfied by following the current heuristics, the normative algorithm can be updated, or additional mechanisms can be introduced for fine-grained control of content-based TrackSizingFunction.
   31.79 +                        Currently this algorithm embodies several heuristics which regulate the growth of spanning <i>Grid items</i> to accommodate certain use cases. (E.g. the game example in Figures 2 and 3 above.) These heuristics should be a normative part of this specification to ensure interoperability. To the extent additional use cases can be identified that cannot be satisfied by following the current heuristics, the normative algorithm can be updated, or additional mechanisms can be introduced for fine-grained control of content-based TrackSizingFunction.
   31.80                      </p>    
   31.81                      <dl>
   31.82                          <dt>
   31.83 @@ -2353,7 +2353,7 @@
   31.84  			<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>
   31.85  			<li>Section 6.6: Updated text describing grid-template and writing-mode sensitivity.</li>
   31.86  			<li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth in step 4, rather than all Grid Tracks.</li>
   31.87 -            <li>Section 10.2: Fixed minor spelling error "Contstriant"</li>
   31.88 +            <li>Section 10.2: Fixed minor spelling error "Constraint"</li>
   31.89  			<li>Section 11: Added a definition of the preferred minimum width and the preferred width of the Grid element.</li>
   31.90          </ul>
   31.91  
    32.1 --- a/css3-page-template/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    32.2 +++ b/css3-page-template/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    32.3 @@ -1,15 +1,26 @@
    32.4  <!DOCTYPE html>
    32.5  
    32.6  <html lang=en>
    32.7 - <head profile="http://www.w3.org/2006/03/hcard"><meta
    32.8 -  content="text/html; charset=UTF-8" http-equiv=Content-Type>
    32.9 + <head profile="http://www.w3.org/2006/03/hcard">
   32.10 +  <meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
   32.11 +  <title>CSS Pagination Templates Module Level 3</title>
   32.12 +  <!--
   32.13 +  <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
   32.14 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
   32.15 +  -->
   32.16  
   32.17 -  <title>CSS Pagination Templates Module Level 3</title>
   32.18 -  <link href="../shared/style/default.css" rel=stylesheet type="text/css">
   32.19 -  <!--link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"-->
   32.20 +  <meta content="CSS Pagination Templates Module Level 3" name=dcterms.title>
   32.21 +  <meta content=text name=dcterms.type>
   32.22 +  <meta content=2012-10-19 name=dcterms.issued>
   32.23 +  <meta content="http://dev.w3.org/csswg/css3-page-template/ <!--"
   32.24 +   name=dcterms.creator>
   32.25 +  <meta content=W3C name=dcterms.publisher>
   32.26 +  <meta content="http://www.w3.org/TR/2012/ED-css3-page-template-20121019/"
   32.27 +   name=dcterms.identifier>
   32.28 +  <link href="../shared/style/default.css" rel=stylesheet type="text/css"><!--link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"-->
   32.29 +
   32.30    <link href="http://www.w3.org/StyleSheets/TR/w3c-unofficial.css"
   32.31 -  rel=stylesheet type="text/css">
   32.32 -
   32.33 +   rel=stylesheet type="text/css">
   32.34    <style type="text/css">
   32.35      body {
   32.36          counter-reset: issue;
   32.37 @@ -17,7 +28,7 @@
   32.38    </style>
   32.39    <link href="../shared/style/issues.css" rel=stylesheet type="text/css">
   32.40    <link href="../shared/style/alternate-spec-style.css" id=st rel=stylesheet
   32.41 -  title="alternate spec style" type="text/css">
   32.42 +   title="alternate spec style" type="text/css">
   32.43  
   32.44   <body>
   32.45    <div class=head> <!--begin-logo-->
   32.46 @@ -26,24 +37,21 @@
   32.47  
   32.48     <h1>CSS Pagination Templates Module Level 3</h1>
   32.49  
   32.50 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 May 2012</h2>
   32.51 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October
   32.52 +    2012</h2>
   32.53  
   32.54     <dl>
   32.55      <dt>This version:
   32.56 -     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20120508/">http://www.w3.org/TR/2012/ED-css3-page-template-20120508/</a>-->
   32.57 -     
   32.58 +     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20121019/">http://www.w3.org/TR/2012/ED-css3-page-template-20121019/</a>-->
   32.59  
   32.60      <dd><a
   32.61       href="//dev.w3.org/csswg/css3-page-template/">http://dev.w3.org/csswg/css3-page-template/</a>
   32.62 -     
   32.63  
   32.64      <dt>Latest version:
   32.65       <!--<dd><a href="http://www.w3.org/TR/css3-page-template/">http://www.w3.org/TR/css3-page-template/</a>-->
   32.66 -     
   32.67  
   32.68      <dd><a
   32.69       href="//www.w3.org/TR/css3-page-template/">http://www.w3.org/TR/css3-page-template/</a>
   32.70 -     
   32.71  
   32.72      <dt>Editor's draft:
   32.73  
   32.74 @@ -54,7 +62,6 @@
   32.75      <dd><a href="http://www.w3.org/PreviousVersionURI">
   32.76        http://www.w3.org/PreviousVersionURI</a>
   32.77    -->
   32.78 -     
   32.79  
   32.80      <dt>Editors:
   32.81  
   32.82 @@ -64,8 +71,8 @@
   32.83     <!--begin-copyright-->
   32.84     <p class=copyright><a
   32.85      href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   32.86 -    rel=license>Copyright</a> &copy; 2012 <a href="http://www.w3.org/"><abbr
   32.87 -    title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
   32.88 +    rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
   32.89 +    title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   32.90      href="http://www.csail.mit.edu/"><abbr
   32.91      title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
   32.92      href="http://www.ercim.eu/"><abbr
   32.93 @@ -104,9 +111,8 @@
   32.94     www-style@w3.org</a> (see <a
   32.95     href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   32.96     discussion of this specification. When sending e-mail, please put the text
   32.97 -   &#8220;css3-page-template&#8221; in the subject, preferably like this:
   32.98 -   &#8220;[<!---->css3-page-template<!---->] <em>&hellip;summary of
   32.99 -   comment&hellip;</em>&#8221;
  32.100 +   “css3-page-template” in the subject, preferably like this:
  32.101 +   “[<!---->css3-page-template<!---->] <em>…summary of comment…</em>”
  32.102  
  32.103    <p>This document was produced by the <a href="/Style/CSS/members">CSS
  32.104     Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
  32.105 @@ -176,13 +182,12 @@
  32.106  
  32.107    <p>This module describes how to define pagination templates in CSS. In CSS
  32.108     2.1 content displayed on-screen is assumed to be a single continuous
  32.109 -   canvas. Pagination templates provide a mechanism for a &lsquo;<code
  32.110 -   class=property>paginated</code>&rsquo; experience that applies to
  32.111 -   on-screen presentation as well as printed media. Pagination templates
  32.112 -   define boxes in CSS where content is displayed as the user moves from page
  32.113 -   to page on screen or prints the document. When content is laid out using
  32.114 -   pagination templates, pages are generated as needed to accommodate all the
  32.115 -   content.
  32.116 +   canvas. Pagination templates provide a mechanism for a ‘<code
  32.117 +   class=property>paginated</code>’ experience that applies to on-screen
  32.118 +   presentation as well as printed media. Pagination templates define boxes
  32.119 +   in CSS where content is displayed as the user moves from page to page on
  32.120 +   screen or prints the document. When content is laid out using pagination
  32.121 +   templates, pages are generated as needed to accommodate all the content.
  32.122  
  32.123    <div class="issue-marker wrapper">
  32.124     <div class=issue-marker>
  32.125 @@ -194,14 +199,21 @@
  32.126     </div>
  32.127  
  32.128     <div class=issue-marker>
  32.129 -    <div class=issue-details>The terms &lsquo;<code
  32.130 -     class=property>template</code>&rsquo; and &lsquo;<code
  32.131 -     class=property>page</code>&rsquo; are overloaded in CSS, but they are
  32.132 -     the words that most clearly describe the concept. Some alternates for
  32.133 -     the main @ rule: template, page-template, view-template, page-master,
  32.134 +    <div class=issue-details>The terms ‘<code
  32.135 +     class=property>template</code>’ and ‘<code
  32.136 +     class=property>page</code>’ are overloaded in CSS, but they are the
  32.137 +     words that most clearly describe the concept. Some alternates for the
  32.138 +     main @ rule: template, page-template, view-template, page-master,
  32.139       master-template, master. Other suggestions are welcome, but only if they
  32.140       are more helpful than onelook.com (which suggested "Captain Submarine").</div>
  32.141     </div>
  32.142 +
  32.143 +   <div class=issue-marker>
  32.144 +    <div class=issue-details>This specification may be the best place to
  32.145 +     define "continued here" or "continued on page x" generated content,
  32.146 +     since this spec defines ways to skip pages (that basic pagination may
  32.147 +     not).</div>
  32.148 +   </div>
  32.149    </div>
  32.150  
  32.151    <p>Pagination templates consist of anonymous boxes called slots created by
  32.152 @@ -236,8 +248,8 @@
  32.153    <p>An @template rule defines and names a pagination template. Pagination
  32.154     templates contain one or more slots to display content. These slots create
  32.155     boxes for each page generated from a pagination template. An element can
  32.156 -   use pagination templates if its &lsquo;<code
  32.157 -   class=property>overflow-style</code>&rsquo; property is set to any of the
  32.158 +   use pagination templates if its ‘<code
  32.159 +   class=property>overflow-style</code>’ property is set to any of the
  32.160     paged-* values defined in css3-gcpm. If a document defines no pagination
  32.161     templates, then there is an implicit pagination template with a single
  32.162     slot containing the paginated element's contents.
  32.163 @@ -245,9 +257,8 @@
  32.164    <div class=issue-marker>
  32.165     <div class=issue-details>Instead of a dependency on GCPM, this spec could
  32.166      define what happens with a paginated view, without specifying how the
  32.167 -    paginated view comes into existence. What happens when you apply
  32.168 -    &lsquo;<code class=css>overflow-style:paged-x</code>&rsquo; to an iframe
  32.169 -    or region?</div>
  32.170 +    paginated view comes into existence. What happens when you apply ‘<code
  32.171 +    class=css>overflow-style:paged-x</code>’ to an iframe or region?</div>
  32.172    </div>
  32.173  
  32.174    <p>The box created from an @template rule defaults to the size of the
  32.175 @@ -285,10 +296,10 @@
  32.176     instantiated.
  32.177  
  32.178    <div class=issue-marker>
  32.179 -   <div class=issue-details>If there is more than one slot with no
  32.180 -    &lsquo;<code class=property>content</code>&rsquo; or &lsquo;<code
  32.181 -    class=property>flow-from</code>&rsquo; assignment, does the element's
  32.182 -    content use all of these slots like a region chain, or is only the last
  32.183 +   <div class=issue-details>If there is more than one slot with no ‘<code
  32.184 +    class=property>content</code>’ or ‘<code
  32.185 +    class=property>flow-from</code>’ assignment, does the element's content
  32.186 +    use all of these slots like a region chain, or is only the last
  32.187      unassigned slot used for content?</div>
  32.188    </div>
  32.189  
  32.190 @@ -432,13 +443,13 @@
  32.191  
  32.192    <p>Multiple templates can be defined for a single document. An element that
  32.193     uses pagination templates either selects a template from the entire
  32.194 -   document set or a subset defined by the &lsquo;<code
  32.195 -   class=property>template-set</code>&rsquo; property. Each page view created
  32.196 +   document set or a subset defined by the ‘<code
  32.197 +   class=property>template-set</code>’ property. Each page view created
  32.198     uses a single template. This template can be chosen from the applicable
  32.199 -   set using a selector, by matching content to display using the
  32.200 -   &lsquo;<code class=property>required-flow</code>&rsquo; or &lsquo;<code
  32.201 -   class=property>available-content</code>&rsquo; declarations, or just
  32.202 -   taking the last template found.
  32.203 +   set using a selector, by matching content to display using the ‘<code
  32.204 +   class=property>required-flow</code>’ or ‘<code
  32.205 +   class=property>available-content</code>’ declarations, or just taking
  32.206 +   the last template found.
  32.207  
  32.208    <div class=issue-marker>
  32.209     <div class=issue-details>The following section describes selecting
  32.210 @@ -528,24 +539,22 @@
  32.211    <h3 id=selection-from-required-flows><span class=secno>3.2.
  32.212     </span>Selecting Templates from Required Flows</h3>
  32.213  
  32.214 -  <p>The &lsquo;<code class=property>required-flow</code>&rsquo; property can
  32.215 -   be used in a pagination template to list named flows that must still have
  32.216 -   content in order for the template to be used. If more than one template
  32.217 -   has a &lsquo;<code class=property>required-flow</code>&rsquo; value that
  32.218 -   matches the remaining flow content, the last template that matches will be
  32.219 -   used.
  32.220 +  <p>The ‘<code class=property>required-flow</code>’ property can be used
  32.221 +   in a pagination template to list named flows that must still have content
  32.222 +   in order for the template to be used. If more than one template has a
  32.223 +   ‘<code class=property>required-flow</code>’ value that matches the
  32.224 +   remaining flow content, the last template that matches will be used.
  32.225  
  32.226    <div class=example>
  32.227     <p>"Continued on" layout.
  32.228  
  32.229     <p>These pagination templates will display an initial page with the
  32.230 -    beginning of both the &lsquo;<code
  32.231 -    class=property>lead-story</code>&rsquo; flow and a &lsquo;<code
  32.232 -    class=property>related-article</code>&rsquo; flow. If the lead story has
  32.233 -    more content than will fit on that first page, the next page(s) will show
  32.234 -    only content from that lead story. When the content from the lead story
  32.235 -    is exhausted, then pages will follow with content from the related
  32.236 -    article.
  32.237 +    beginning of both the ‘<code class=property>lead-story</code>’ flow
  32.238 +    and a ‘<code class=property>related-article</code>’ flow. If the lead
  32.239 +    story has more content than will fit on that first page, the next page(s)
  32.240 +    will show only content from that lead story. When the content from the
  32.241 +    lead story is exhausted, then pages will follow with content from the
  32.242 +    related article.
  32.243  
  32.244     <p> <img alt="side-by-side flows on a page"
  32.245      src="images/side-by-side-1.png" width=120> <img
  32.246 @@ -606,53 +615,49 @@
  32.247     the original order can be discovered in the DOM and used for template
  32.248     selection.
  32.249  
  32.250 -  <p>Pagination templates have a &lsquo;<code
  32.251 -   class=property>primary</code>&rsquo; content flow. The primary flow for a
  32.252 -   pagination template is usually the content of the paginated element. If no
  32.253 -   slot in the template displays the element contents, then the primary flow
  32.254 -   of the pagination template is the first named flow in its required-flow
  32.255 -   declaration.
  32.256 +  <p>Pagination templates have a ‘<code class=property>primary</code>’
  32.257 +   content flow. The primary flow for a pagination template is usually the
  32.258 +   content of the paginated element. If no slot in the template displays the
  32.259 +   element contents, then the primary flow of the pagination template is the
  32.260 +   first named flow in its required-flow declaration.
  32.261  
  32.262    <p>When selecting the pagination template for the next page, the primary
  32.263     flow in the original markup can be scanned to determine whether any
  32.264     out-of-flow content in other named flows was originally related to the
  32.265     next page of primary flow. If this is the case, then those named flows
  32.266 -   have &lsquo;<code class=property>available</code>&rsquo; content for the
  32.267 -   purpose of selecting an appropriate template that can display this
  32.268 -   content.
  32.269 +   have ‘<code class=property>available</code>’ content for the purpose
  32.270 +   of selecting an appropriate template that can display this content.
  32.271  
  32.272 -  <p>Pagination templates can have an &lsquo;<code
  32.273 -   class=property>available-content</code>&rsquo; declaration listing the
  32.274 -   named flows that must have available content for the template to be
  32.275 -   selected. Templates with more &lsquo;<code
  32.276 -   class=property>available-content</code>&rsquo; flow matches take
  32.277 -   precedence over fewer or no &lsquo;<code
  32.278 -   class=property>available-content</code>&rsquo; flow matches. If a template
  32.279 -   with an &lsquo;<code class=property>available-content</code>&rsquo;
  32.280 -   declaration is chosen, only the available content in those flows is
  32.281 -   displayed in the slots associated with those flows.
  32.282 +  <p>Pagination templates can have an ‘<code
  32.283 +   class=property>available-content</code>’ declaration listing the named
  32.284 +   flows that must have available content for the template to be selected.
  32.285 +   Templates with more ‘<code class=property>available-content</code>’
  32.286 +   flow matches take precedence over fewer or no ‘<code
  32.287 +   class=property>available-content</code>’ flow matches. If a template
  32.288 +   with an ‘<code class=property>available-content</code>’ declaration is
  32.289 +   chosen, only the available content in those flows is displayed in the
  32.290 +   slots associated with those flows.
  32.291  
  32.292    <div class=example>
  32.293     <p>Clarification example (not meant to be a valid use case)
  32.294  
  32.295     <p>Consider an article element that contains images scattered throughout.
  32.296 -    Assign the images to a flow named &lsquo;<code
  32.297 -    class=property>images</code>&rsquo; and the rest of the article to a flow
  32.298 -    named &lsquo;<code class=property>text</code>&rsquo;. Then define two
  32.299 -    pagination templates - one that has slots only for the &lsquo;<code
  32.300 -    class=property>text</code>&rsquo; flow, and another that has slots for
  32.301 -    both the &lsquo;<code class=property>text</code>&rsquo; and &lsquo;<code
  32.302 -    class=property>images</code>&rsquo; flows. Both templates require the
  32.303 -    &lsquo;<code class=property>text</code>&rsquo; flow, but the second
  32.304 -    template also requires the &lsquo;<code
  32.305 -    class=property>images</code>&rsquo; flow and has an &lsquo;<code
  32.306 -    class=property>available-content</code>&rsquo; declaration listing the
  32.307 -    &lsquo;<code class=property>images</code>&rsquo; flow. Each time a page
  32.308 -    is laid out, the original article element is scanned to see whether an
  32.309 -    image element is in the next page's worth of content (determined by some
  32.310 +    Assign the images to a flow named ‘<code
  32.311 +    class=property>images</code>’ and the rest of the article to a flow
  32.312 +    named ‘<code class=property>text</code>’. Then define two pagination
  32.313 +    templates - one that has slots only for the ‘<code
  32.314 +    class=property>text</code>’ flow, and another that has slots for both
  32.315 +    the ‘<code class=property>text</code>’ and ‘<code
  32.316 +    class=property>images</code>’ flows. Both templates require the
  32.317 +    ‘<code class=property>text</code>’ flow, but the second template also
  32.318 +    requires the ‘<code class=property>images</code>’ flow and has an
  32.319 +    ‘<code class=property>available-content</code>’ declaration listing
  32.320 +    the ‘<code class=property>images</code>’ flow. Each time a page is
  32.321 +    laid out, the original article element is scanned to see whether an image
  32.322 +    element is in the next page's worth of content (determined by some
  32.323      DOM-tree-scanning heuristic – not layout). If so, then that content
  32.324 -    from the &lsquo;<code class=property>images</code>&rsquo; flow is
  32.325 -    available for the purpose of selecting a template.
  32.326 +    from the ‘<code class=property>images</code>’ flow is available for
  32.327 +    the purpose of selecting a template.
  32.328    </div>
  32.329  
  32.330    <div class=example>
  32.331 @@ -748,32 +753,32 @@
  32.332  
  32.333     <dt id=CSS3-REGIONS>[CSS3-REGIONS]
  32.334  
  32.335 -   <dd>Vincent Hardy; Alex Mogilevsky. <a
  32.336 -    href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/"><cite>CSS
  32.337 -    Regions Module Level 3.</cite></a> 29 November 2011. W3C Working Draft.
  32.338 +   <dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a
  32.339 +    href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/"><cite>CSS
  32.340 +    Regions Module Level 3.</cite></a> 23 August 2012. W3C Working Draft.
  32.341      (Work in progress.) URL: <a
  32.342 -    href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a>
  32.343 -    </dd>
  32.344 +    href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">http://www.w3.org/TR/2012/WD-css3-regions-20120823/</a>
  32.345 +   </dd>
  32.346     <!---->
  32.347  
  32.348     <dt id=CSS3GCPM>[CSS3GCPM]
  32.349  
  32.350 -   <dd>H&#229;kon Wium Lie. <a
  32.351 +   <dd>Håkon Wium Lie. <a
  32.352      href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608"><cite>CSS
  32.353      Generated Content for Paged Media Module.</cite></a> 8 June 2010. W3C
  32.354      Working Draft. (Work in progress.) URL: <a
  32.355      href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">http://www.w3.org/TR/2010/WD-css3-gcpm-20100608</a>
  32.356 -    </dd>
  32.357 +   </dd>
  32.358     <!---->
  32.359  
  32.360     <dt id=CSS3GRID>[CSS3GRID]
  32.361  
  32.362     <dd>Alex Mogilevsky; Markus Mielke. <a
  32.363      href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
  32.364 -    Positioning Module Level&#160;3.</cite></a> 5 September 2007. W3C Working
  32.365 +    Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working
  32.366      Draft. (Work in progress.) URL: <a
  32.367      href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
  32.368 -    </dd>
  32.369 +   </dd>
  32.370     <!---->
  32.371    </dl>
  32.372    <!--end-informative-->
    33.1 --- a/css3-page-template/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    33.2 +++ b/css3-page-template/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    33.3 @@ -81,6 +81,7 @@
    33.4    <div class="issue-marker wrapper">
    33.5    <div class="issue-marker"><div class="issue-details">The draft as it stands requires pagination to present the repeated template layouts. Other methods of repeating template layouts to accommodate content might be specified, but the draft would need to be reviewed to remove all reliances on paged displays.</div></div>
    33.6    <div class="issue-marker"><div class="issue-details">The terms 'template' and 'page' are overloaded in CSS, but they are the words that most clearly describe the concept. Some alternates for the main @ rule: template, page-template, view-template, page-master, master-template, master. Other suggestions are welcome, but only if they are more helpful than onelook.com (which suggested "Captain Submarine").</div></div>
    33.7 +  <div class="issue-marker"><div class="issue-details">This specification may be the best place to define "continued here" or "continued on page x" generated content, since this spec defines ways to skip pages (that basic pagination may not).</div></div>
    33.8    </div>
    33.9  
   33.10    <p>Pagination templates consist of anonymous boxes called slots created by CSS to contain content. Layouts that use pagination templates mainly determine the size of these slots from the template definition instead of the size of their content. When content does not fit into a template slot, additional pages are created with more slots to contain the overflow content.
    34.1 --- a/css3-regions/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    34.2 +++ b/css3-regions/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    34.3 @@ -7,18 +7,18 @@
    34.4    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    34.5    <title>CSS Regions Module Level 3</title>
    34.6  
    34.7 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
    34.8 -  <meta content="CSS Regions Module Level 3" name=DC.title>
    34.9 -  <meta content=text name=DC.type>
   34.10 -  <meta content=2012-10-04 name=DC.issued>
   34.11 -  <meta content="Vincent Hardy" name=DC.creator>
   34.12 -  <meta content="Alex Mogilevsky" name=DC.creator>
   34.13 -  <meta content="Alan Stearns" name=DC.creator>
   34.14 -  <meta content=W3C name=DC.publisher>
   34.15 -  <meta content="http://www.w3.org/TR/2012/ED-css3-regions-20121004/"
   34.16 -   name=DC.identifier>
   34.17 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   34.18    <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   34.19 -   rel=DC.rights>
   34.20 +   rel=dcterms.rights>
   34.21 +  <meta content="CSS Regions Module Level 3" name=dcterms.title>
   34.22 +  <meta content=text name=dcterms.type>
   34.23 +  <meta content=2012-10-19 name=dcterms.issued>
   34.24 +  <meta content="Vincent Hardy" name=dcterms.creator>
   34.25 +  <meta content="Alex Mogilevsky" name=dcterms.creator>
   34.26 +  <meta content="Alan Stearns" name=dcterms.creator>
   34.27 +  <meta content=W3C name=dcterms.publisher>
   34.28 +  <meta content="http://www.w3.org/TR/2012/ED-css3-regions-20121019/"
   34.29 +   name=dcterms.identifier>
   34.30    <link href="../shared/style/default.css" rel=stylesheet type="text/css">
   34.31    <script defer=defer
   34.32     src="http://test.csswg.org/harness/annotate.js#CSS3-REGIONS_DEV"
   34.33 @@ -50,13 +50,14 @@
   34.34  
   34.35     <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
   34.36  
   34.37 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 October 2012</h2>
   34.38 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October
   34.39 +    2012</h2>
   34.40  
   34.41     <dl>
   34.42      <dt>This version:
   34.43  
   34.44      <dd><a
   34.45 -     href="http://www.w3.org/TR/2012/ED-css3-regions-20121004/">http://www.w3.org/csswg/css3-regions</a>
   34.46 +     href="http://www.w3.org/TR/2012/ED-css3-regions-20121019/">http://www.w3.org/csswg/css3-regions</a>
   34.47  
   34.48      <dt>Latest version:
   34.49  
   34.50 @@ -208,6 +209,13 @@
   34.51  
   34.52       <li><a href="#the-flow-from-property"><span class=secno>3.2. </span>The
   34.53        ‘<code class=property>flow-from</code>’ property</a>
   34.54 +      <ul class=toc>
   34.55 +       <li><a href="#circular-dependencies"><span class=secno>3.2.1.
   34.56 +        </span>Cycle Detection</a>
   34.57 +
   34.58 +       <li><a href="#fragmenting-regions"><span class=secno>3.2.2.
   34.59 +        </span>Nested fragmentation contexts</a>
   34.60 +      </ul>
   34.61  
   34.62       <li><a href="#region-flow-break"><span class=secno>3.3. </span>Region
   34.63        flow break properties: ‘<code class=property>break-before</code>’,
   34.64 @@ -638,14 +646,6 @@
   34.65     href="#flow-into"><code class=property>flow-into</code></a>’ property</h3>
   34.66  
   34.67    <div class="issue-marker wrapper">
   34.68 -   <div class=issue-marker data-bug_id=15811 data-bug_status=NEW> <a
   34.69 -    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Issue-15811</a>
   34.70 -
   34.71 -    <div class=issue-details>
   34.72 -     <p class=short-desc>Creating a named flow from external resource
   34.73 -    </div>
   34.74 -   </div>
   34.75 -
   34.76     <div class=issue-marker data-bug_id=16527 data-bug_status=ASSIGNED> <a
   34.77      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16527">Issue-16527</a>
   34.78  
   34.79 @@ -719,9 +719,10 @@
   34.80      href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
   34.81  
   34.82     <dd>The element is taken out of its parent's flow and placed into the flow
   34.83 -    with the name ‘<code class=css>&lt;ident&gt;</code>’. The element is
   34.84 -    said to have a <dfn id=specified-flow>specified flow</dfn>. The values
   34.85 -    ‘<code class=property>none</code>’, ‘<code
   34.86 +    with the name ‘<code class=css><a
   34.87 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></code>’.
   34.88 +    The element is said to have a <dfn id=specified-flow>specified
   34.89 +    flow</dfn>. The values ‘<code class=property>none</code>’, ‘<code
   34.90      class=property>inherit</code>’, ‘<code
   34.91      class=property>default</code>’, ‘<code class=property>auto</code>’
   34.92      and ‘<code class=property>initial</code>’ are invalid flow names.
   34.93 @@ -829,6 +830,11 @@
   34.94     significant, then moving the parent that contains the whitespace to the
   34.95     named flow is required.</div>
   34.96  
   34.97 +  <div class=note><span class=note-prefix>Note </span>
   34.98 +   <p>A future CSS Regions module level will define a mechanism for creating
   34.99 +    a named flow from an external resource.
  34.100 +  </div>
  34.101 +
  34.102    <h3 id=the-flow-from-property><span class=secno>3.2. </span>The ‘<a
  34.103     href="#flow-from"><code class=property>flow-from</code></a>’ property</h3>
  34.104  
  34.105 @@ -889,7 +895,8 @@
  34.106     <dd>The block container is not a <a href="#css-region"
  34.107      title=region>region</a>.
  34.108  
  34.109 -   <dt><strong>&lt;ident&gt;</strong>
  34.110 +   <dt><strong><a
  34.111 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></strong>
  34.112  
  34.113     <dd> If the ‘<code class=property>content</code>’ property computes to
  34.114      something else than ‘<code class=property>normal</code>’ (or ‘<code
  34.115 @@ -907,22 +914,11 @@
  34.116      href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal
  34.117      boxes</a> of the <a href="#css-region">regions</a> in the <a
  34.118      href="#region-chain0">region chain</a>. <br>
  34.119 -    If there is no flow with name &lt;ident&gt;, then the block container
  34.120 -    does not format any content visually. <br>
  34.121 -    Likewise, if the block container is part of the flow with name
  34.122 -    &lt;ident&gt;, then the block container does not format any content
  34.123 -    visually.
  34.124 +    If there is no flow with name <a
  34.125 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>,
  34.126 +    then the block container does not format any content visually.
  34.127    </dl>
  34.128  
  34.129 -  <div class=issue-marker data-bug_id=16819 data-bug_status=ASSIGNED> <a
  34.130 -   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16819">Issue-16819</a>
  34.131 -
  34.132 -   <div class=issue-details>
  34.133 -    <p class=short-desc>No display when combining flow-from and flow-into is
  34.134 -     bad
  34.135 -   </div>
  34.136 -  </div>
  34.137 -
  34.138    <p>A <span>CSS Region</span>‘<code class=css>s document children are not
  34.139     visually formatted unless they are directed to a <a
  34.140     href="#named-flow0">named flow</a> with an associated <a
  34.141 @@ -930,8 +926,10 @@
  34.142  
  34.143    <div class=note><span class=note-prefix>Note </span>
  34.144     <p>An block container becomes a <span>CSS Region</span> when its
  34.145 -    ’flow-from' property is set to a valid &lt;ident&gt; value, even if
  34.146 -    there is no content contributing to the referenced flow. For example:
  34.147 +    ’flow-from' property is set to a valid <a
  34.148 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
  34.149 +    value, even if there is no content contributing to the referenced flow.
  34.150 +    For example:
  34.151  
  34.152     <pre>
  34.153  &lt;style&gt;
  34.154 @@ -963,14 +961,6 @@
  34.155    </div>
  34.156  
  34.157    <div class="issue-marker wrapper">
  34.158 -   <div class=issue-marker data-bug_id=15189 data-bug_status=NEW> <a
  34.159 -    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Issue-15189</a>
  34.160 -
  34.161 -    <div class=issue-details>
  34.162 -     <p class=short-desc>Should regions be non-breakable?
  34.163 -    </div>
  34.164 -   </div>
  34.165 -
  34.166     <div class=issue-marker data-bug_id=15824 data-bug_status=NEW> <a
  34.167      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Issue-15824</a>
  34.168  
  34.169 @@ -1019,6 +1009,59 @@
  34.170     class=property>height</code>’ values are resolved for <span>CSS
  34.171     Region</span> boxes.
  34.172  
  34.173 +  <h4 id=circular-dependencies><span class=secno>3.2.1. </span>Cycle
  34.174 +   Detection</h4>
  34.175 +
  34.176 +  <p><a href="#named-flow0">Named flows</a> containing elements where the
  34.177 +   value of ‘<a href="#flow-from"><code
  34.178 +   class=property>flow-from</code></a>’ computes to an <a
  34.179 +   href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
  34.180 +   can produce nonsensical circular relationships, such as a <a
  34.181 +   href="#named-flow0">named flow</a> containing <span>CSS Regions</span> in
  34.182 +   its own <a href="#region-chain0">region chain</a>. These relationships can
  34.183 +   be easily and reliably detected and resolved, however, by keeping track of
  34.184 +   a dependency graph and using common cycle-detection algorithms.
  34.185 +
  34.186 +  <p>The dependency graph consists of edges such that:
  34.187 +
  34.188 +  <ul>
  34.189 +   <li>Every <a href="#named-flow0">named flow</a> depends on its elements
  34.190 +    where the value of ‘<a href="#flow-from"><code
  34.191 +    class=property>flow-from</code></a>’ computes to an <a
  34.192 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
  34.193 +    .
  34.194 +
  34.195 +   <li>Every element in a <a href="#named-flow0">named flow</a> where the
  34.196 +    value of ‘<a href="#flow-from"><code
  34.197 +    class=property>flow-from</code></a>’ computes to an <a
  34.198 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
  34.199 +    depends on the <a href="#named-flow0">named flow</a> with the <a
  34.200 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
  34.201 +    name.
  34.202 +  </ul>
  34.203 +
  34.204 +  <p>If the graph contains a cycle, any elements where the value of ‘<a
  34.205 +   href="#flow-from"><code class=property>flow-from</code></a>’ computes to
  34.206 +   an <a
  34.207 +   href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
  34.208 +   participating in the cycle do not become <span>CSS Regions</span>.
  34.209 +
  34.210 +  <h4 id=fragmenting-regions><span class=secno>3.2.2. </span>Nested
  34.211 +   fragmentation contexts</h4>
  34.212 +
  34.213 +  <p>A <span>CSS Region</span> that contains a fragment of a <a
  34.214 +   href="#named-flow0">named flow</a> can itself be fragmented if it is
  34.215 +   nested within a fragmentation context <a href="#CSS3-BREAK"
  34.216 +   rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>, such as when a
  34.217 +   layout using a region chain is printed. In these cases break opportunities
  34.218 +   in the named flow fragment contained by the <span>CSS Region</span> are
  34.219 +   determined using the standard <a
  34.220 +   href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. In other
  34.221 +   words, each region box and its associated fragment should break as if it
  34.222 +   were a simple div containing the fragment contents. This can be controlled
  34.223 +   by using an avoid break value on the <span>CSS Region</span>, if that is
  34.224 +   desired.
  34.225 +
  34.226    <h3 id=region-flow-break><span class=secno>3.3. </span>Region flow break
  34.227     properties: ‘<a href="#break-before"><code
  34.228     class=property>break-before</code></a>’, ‘<a href="#break-after"><code
  34.229 @@ -1351,8 +1394,8 @@
  34.230    <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region
  34.231     rule</h3>
  34.232  
  34.233 -  <p>An ‘<a href="#css-region"><code class=css>@region</code></a>’ rule
  34.234 -   contains style declarations specific to particular regions.
  34.235 +  <p>An ‘<code class=css>@region</code>’ rule contains style declarations
  34.236 +   specific to particular regions.
  34.237  
  34.238    <pre>
  34.239  @region &lt;selector&gt; {
  34.240 @@ -1360,17 +1403,16 @@
  34.241  }         
  34.242      </pre>
  34.243  
  34.244 -  <p>The ‘<a href="#css-region"><code class=css>@region</code></a>’ rule
  34.245 -   consists of the keyword ‘<a href="#css-region"><code
  34.246 -   class=css>@region</code></a>’ followed by a <a
  34.247 +  <p>The ‘<code class=css>@region</code>’ rule consists of the keyword
  34.248 +   ‘<code class=css>@region</code>’ followed by a <a
  34.249     href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
  34.250 -   and a block of style rules. The ‘<a href="#css-region"><code
  34.251 -   class=css>@region</code></a>’ rule and the selector constitute the
  34.252 -   region's ‘<code class=css>flow fragment</code>’ selector. The region's
  34.253 -   flow fragment selector specifies which range of elements in the flow are
  34.254 -   subject to the style rules in the following block: it applies to the range
  34.255 -   (see <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) from the
  34.256 -   region's flow that flows in the selected region(s).
  34.257 +   and a block of style rules. The ‘<code class=css>@region</code>’ rule
  34.258 +   and the selector constitute the region's ‘<code class=css>flow
  34.259 +   fragment</code>’ selector. The region's flow fragment selector specifies
  34.260 +   which range of elements in the flow are subject to the style rules in the
  34.261 +   following block: it applies to the range (see <a href="#DOM"
  34.262 +   rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) from the region's flow that
  34.263 +   flows in the selected region(s).
  34.264  
  34.265    <div class=issue-marker data-bug_id=15713 data-bug_status=NEW> <a
  34.266     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Issue-15713</a>
  34.267 @@ -1387,17 +1429,6 @@
  34.268  
  34.269    <p>Only a limited list of properties can be set in a region style rule:
  34.270  
  34.271 -  <div class="issue-marker wrapper">
  34.272 -   <div class=issue-marker data-bug_id=16921 data-bug_status=REOPENED> <a
  34.273 -    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16921">Issue-16921</a>
  34.274 -
  34.275 -    <div class=issue-details>
  34.276 -     <p class=short-desc>Should text-align be added to region styling
  34.277 -      properties
  34.278 -    </div>
  34.279 -   </div>
  34.280 -  </div>
  34.281 -
  34.282    <ol>
  34.283     <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a>
  34.284  
  34.285 @@ -1429,6 +1460,9 @@
  34.286      href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
  34.287      class=property>line-height</code>’</a>
  34.288  
  34.289 +   <li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and
  34.290 +    justification properties</a>
  34.291 +
  34.292     <li><a href="http://www.w3.org/TR/css3-background/#borders">border
  34.293      properties</a>
  34.294  
  34.295 @@ -1553,17 +1587,17 @@
  34.296     </div>
  34.297    </div>
  34.298  
  34.299 -  <p>The specificity of the selectors in a ‘<a href="#css-region"><code
  34.300 -   class=css>@region</code></a>’ rule is calculated as <a
  34.301 +  <p>The specificity of the selectors in a ‘<code
  34.302 +   class=css>@region</code>’ rule is calculated as <a
  34.303     href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the
  34.304     CSS Selectors module (see <a href="#SELECT"
  34.305 -   rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the ‘<a
  34.306 -   href="#css-region"><code class=css>@region</code></a>’ rule adds an
  34.307 -   extra condition to the selector's matching, but does not change the
  34.308 -   selector's specificity. This is the same behavior as selectors appearing
  34.309 -   in ‘<code class=css>@media</code>’ rules declaration blocks (see <a
  34.310 -   href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where the
  34.311 -   rule does not influence the selectors' specificity.
  34.312 +   rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the
  34.313 +   ‘<code class=css>@region</code>’ rule adds an extra condition to the
  34.314 +   selector's matching, but does not change the selector's specificity. This
  34.315 +   is the same behavior as selectors appearing in ‘<code
  34.316 +   class=css>@media</code>’ rules declaration blocks (see <a href="#MEDIAQ"
  34.317 +   rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where the rule does not
  34.318 +   influence the selectors' specificity.
  34.319  
  34.320    <p>Consequently, selectors that match a given element (as describe above),
  34.321     participate in the <a
  34.322 @@ -1658,15 +1692,6 @@
  34.323  
  34.324    <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
  34.325  
  34.326 -  <div class=issue-marker data-bug_id=15188 data-bug_status=NEW> <a
  34.327 -   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Issue-15188</a>
  34.328 -
  34.329 -   <div class=issue-details>
  34.330 -    <p class=short-desc>add functionality for having textual description like
  34.331 -     "continued here" or "continued on page x" to regions.
  34.332 -   </div>
  34.333 -  </div>
  34.334 -
  34.335    <p>It can be useful to visually mark the content to highlight that a
  34.336     content thread is flowing through the region chain. For example, a marker
  34.337     such as <em>‘<code class=css>continued below</code>’</em> clearly
  34.338 @@ -1930,8 +1955,8 @@
  34.339      class=idl>overset</code></a> attribute returns <code
  34.340      class=idl>false</code>.
  34.341  
  34.342 -   <li>the <a href="#dom-named-flow-get-regions"><code
  34.343 -    class=idl>getRegions</code></a> method returns an empty sequence.
  34.344 +   <li>the <code class=idl>getRegions</code> method returns an empty
  34.345 +    sequence.
  34.346  
  34.347     <li>the <a href="#dom-named-flow-first-empty-region-index"><code
  34.348      class=idl>firstEmptyRegionIndex</code></a> attribute returns <code
  34.349 @@ -1946,14 +1971,6 @@
  34.350      sequence.
  34.351    </ul>
  34.352  
  34.353 -  <div class=issue-marker data-bug_id=16382 data-bug_status=ASSIGNED> <a
  34.354 -   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16382">Issue-16382</a>
  34.355 -
  34.356 -   <div class=issue-details>
  34.357 -    <p class=short-desc>Should we have a NamedFlow.getRegionsByFlowRanges?
  34.358 -   </div>
  34.359 -  </div>
  34.360 -
  34.361    <h3 id=the-region-interface><span class=secno>6.2. </span>The Region
  34.362     interface</h3>
  34.363  
  34.364 @@ -2097,9 +2114,9 @@
  34.365     CSSRegionStyleRule interface</h3>
  34.366  
  34.367    <p>The <dfn id=dom-region-style-rule-interface> <code
  34.368 -   class=idl>CSSRegionStyleRule</code> interface</dfn> represents an ‘<a
  34.369 -   href="#css-region"><code class=css>@region</code></a>’ rule in a CSS
  34.370 -   style sheet. This rule type is added to the <a
  34.371 +   class=idl>CSSRegionStyleRule</code> interface</dfn> represents an ‘<code
  34.372 +   class=css>@region</code>’ rule in a CSS style sheet. This rule type is
  34.373 +   added to the <a
  34.374     href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface"><code>CSSRule</code></a>
  34.375     <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> interface.
  34.376  
  34.377 @@ -2205,7 +2222,10 @@
  34.378     href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTargets</a>
  34.379     which dispatch <code class=idl>regionLayoutUpdate</code> events when there
  34.380     is a possible layout change in their region chain. The event is
  34.381 -   asynchronous, and fires when <a
  34.382 +   asynchronous, and fires in the same step of the <a
  34.383 +   href="http://www.w3.org/TR/html5/webappapis.html#processing-model-2">event
  34.384 +   loop</a> <a href="#HTML5" rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> as
  34.385 +   when <a
  34.386     href="http://www.w3.org/TR/2012/WD-dom-20120405/#mutation-observers">MutationObservers</a>
  34.387     <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a> are invoked.
  34.388  
  34.389 @@ -2783,6 +2803,12 @@
  34.390     28<sup>th</sup> 2012</a> version</h3>
  34.391  
  34.392    <ul>
  34.393 +   <li>Added section on fragmenting the fragmenters
  34.394 +
  34.395 +   <li>Added section on handling circular flow-from and flow-into situations
  34.396 +
  34.397 +   <li>Added alignment and justification to region styling properties
  34.398 +
  34.399     <li>Added timing for regionLayoutUpdate event
  34.400  
  34.401     <li>Clarified interaction between content and flow-from for
  34.402 @@ -2872,9 +2898,8 @@
  34.403     <li>Added a name property to the <a
  34.404      href="#dom-named-flow"><code>NamedFlow</code></a> interface. Added a <a
  34.405      href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a>
  34.406 -    interface and added a <a
  34.407 -    href="#document-getnamedflows"><code>getNamedFlows</code></a> method on
  34.408 -    the <code>Document</code> interface, as per <a
  34.409 +    interface and added a <code>getNamedFlows</code> method on the
  34.410 +    <code>Document</code> interface, as per <a
  34.411      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug
  34.412      15828</a>.
  34.413  
  34.414 @@ -3332,25 +3357,6 @@
  34.415  
  34.416    <h2 class=no-num id=references>References</h2>
  34.417  
  34.418 -  <div class="issue-marker wrapper">
  34.419 -   <div class=issue-marker data-bug_id=16404 data-bug_status=ASSIGNED> <a
  34.420 -    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16404">Issue-16404</a>
  34.421 -
  34.422 -    <div class=issue-details>
  34.423 -     <p class=short-desc>Fix specification dependencies
  34.424 -    </div>
  34.425 -   </div>
  34.426 -
  34.427 -   <div class=issue-marker data-bug_id=18767 data-bug_status=NEW> <a
  34.428 -    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18767">Issue-18767</a>
  34.429 -
  34.430 -    <div class=issue-details>
  34.431 -     <p class=short-desc>Something appears to be wrong with the
  34.432 -      checkSpecificationIssues() call
  34.433 -    </div>
  34.434 -   </div>
  34.435 -  </div>
  34.436 -
  34.437    <h3 class=no-num id=normative-references>Normative references</h3>
  34.438    <!--begin-normative-->
  34.439    <!-- Sorted by label -->
  34.440 @@ -3798,25 +3804,22 @@
  34.441    <!--end-properties-->
  34.442    <!-- template markup for issues pulled from Bugzilla -->
  34.443    <!-- template markup for issues pulled from Bugzilla -->
  34.444 -
  34.445 -  <script id=issue-template type="text/template">
  34.446 +  <!--
  34.447 +    <script type="text/template" id="issue-template">
  34.448 +    <div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}">
  34.449 +        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
  34.450 +        <div class="issue-details">
  34.451 +            <p class="short-desc">{{short_desc}}</p>
  34.452 +        </div>  
  34.453 +    </div>
  34.454 +    </script>   
  34.455 +
  34.456 +    <script type="text/javascript" src="../shared/scripts/BugzillaTrackerUtil.js"></script>
  34.457 +    <script type="text/javascript" src="../shared/scripts/BugzillaTracker.js"></script>
  34.458 +    <script type="text/javascript">
  34.459 +        checkSpecificationIssues('CSS', 'Regions');        
  34.460      </script>
  34.461 -  <div class=issue-marker data-bug_id="{{bug_id}}"
  34.462 -   data-bug_status="{{bug_status}}"> <a
  34.463 -   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
  34.464 -
  34.465 -   <div class=issue-details>
  34.466 -    <p class=short-desc>{{short_desc}}
  34.467 -   </div>
  34.468 -  </div>
  34.469 -
  34.470 -  <script src="../shared/scripts/BugzillaTrackerUtil.js"
  34.471 -   type="text/javascript"></script>
  34.472 -  <script src="../shared/scripts/BugzillaTracker.js" type="text/javascript"></script>
  34.473 -  <script type="text/javascript">
  34.474 -        checkSpecificationIssues(‘</script>
  34.475 -  <p><code class=property>CSS</code>’, ‘<a href="#css-region"><code
  34.476 -   class=property>Regions</code></a>’);
  34.477 +-->
  34.478  </html>
  34.479  <!-- Keep this comment at the end of the file
  34.480  Local variables:
    35.1 --- a/css3-regions/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    35.2 +++ b/css3-regions/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    35.3 @@ -418,14 +418,6 @@
    35.4      <h3 id="the-flow-into-property">The 'flow-into' property</h3>
    35.5  
    35.6      <div class="issue-marker wrapper">
    35.7 -    <div class="issue-marker" data-bug_id="15811" data-bug_status="NEW">
    35.8 -        <a href=
    35.9 -        "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Issue-15811</a>
   35.10 -
   35.11 -        <div class="issue-details">
   35.12 -            <p class="short-desc">Creating a named flow from external resource</p>
   35.13 -        </div>
   35.14 -    </div>
   35.15      <div class="issue-marker" data-bug_id="16527" data-bug_status="ASSIGNED">
   35.16      <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16527">Issue-16527</a>
   35.17      <div class="issue-details">
   35.18 @@ -502,7 +494,7 @@
   35.19          <dd>The element is taken out 
   35.20            of its parent's flow 
   35.21            and placed into the flow 
   35.22 -          with the name '&lt;ident&gt;'. 
   35.23 +          with the name '<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>'. 
   35.24            The element is said to have 
   35.25            a <dfn id="specified-flow">specified flow</dfn>. 
   35.26            The values 'none', 'inherit', 'default', 'auto' and 'initial' 
   35.27 @@ -635,6 +627,12 @@
   35.28          is required.
   35.29      </div>
   35.30      
   35.31 +    <div class="note"><span class="note-prefix">Note </span>
   35.32 +      <p>A future CSS Regions module level 
   35.33 +        will define a mechanism 
   35.34 +        for creating a named flow 
   35.35 +        from an external resource.</p>
   35.36 +    </div>
   35.37          
   35.38      <h3 id="the-flow-from-property">The 'flow-from' property</h3>
   35.39  
   35.40 @@ -701,7 +699,7 @@
   35.41  
   35.42          <dd>The block container is not a <span title="region">region</span>.</dd>
   35.43  
   35.44 -        <dt><strong>&lt;ident&gt;</strong></dt>
   35.45 +        <dt><strong><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></strong></dt>
   35.46  
   35.47          <dd>
   35.48              If the 'content' property computes 
   35.49 @@ -721,24 +719,13 @@
   35.50              of the <span>regions</span> 
   35.51              in the <span>region chain</span>. 
   35.52              <br/>
   35.53 -            If there is no flow with name &lt;ident&gt;, 
   35.54 +            If there is no flow with name 
   35.55 +            <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>, 
   35.56              then the block container does not 
   35.57              format any content visually. 
   35.58 -            <br/>
   35.59 -            Likewise, if the block container is part 
   35.60 -            of the flow with name &lt;ident&gt;, 
   35.61 -            then the block container does not 
   35.62 -            format any content visually.
   35.63          </dd>
   35.64      </dl>
   35.65  
   35.66 -    <div class="issue-marker" data-bug_id="16819" data-bug_status="ASSIGNED">
   35.67 -    <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16819">Issue-16819</a>
   35.68 -    <div class="issue-details">
   35.69 -        <p class="short-desc">No display when combining flow-from and flow-into is bad</p>
   35.70 -    </div>  
   35.71 -    </div>
   35.72 -
   35.73      <p>A <span>CSS Region</span>'s document children 
   35.74        are not visually formatted 
   35.75        unless they are directed 
   35.76 @@ -748,7 +735,7 @@
   35.77      <div class="note"><span class="note-prefix">Note </span>
   35.78        <p>An block container becomes a <span>CSS Region</span> 
   35.79          when its 'flow-from' property is set 
   35.80 -        to a valid &lt;ident&gt; value, 
   35.81 +        to a valid <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> value, 
   35.82          even if there is no content contributing 
   35.83          to the referenced flow.
   35.84          For example:</p>
   35.85 @@ -795,14 +782,6 @@
   35.86      </div>
   35.87      
   35.88      <div class="issue-marker wrapper">
   35.89 -    <div class="issue-marker" data-bug_id="15189" data-bug_status="NEW">
   35.90 -        <a href=
   35.91 -        "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Issue-15189</a>
   35.92 -
   35.93 -        <div class="issue-details">
   35.94 -            <p class="short-desc">Should regions be non-breakable?</p>
   35.95 -        </div>
   35.96 -    </div>
   35.97      <div class="issue-marker" data-bug_id="15824" data-bug_status="NEW">
   35.98  
   35.99          <a href=
  35.100 @@ -855,6 +834,62 @@
  35.101        'width' and 'height' values are resolved 
  35.102        for <span>CSS Region</span> boxes.</p>
  35.103  
  35.104 +    <h4 id="circular-dependencies">Cycle Detection</h4>
  35.105 +
  35.106 +    <p><span>Named flows</span> containing elements 
  35.107 +      where the value of 'flow-from' computes to an 
  35.108 +      <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> 
  35.109 +      can produce nonsensical circular relationships,
  35.110 +      such as a <span>named flow</span> containing <span>CSS Regions</span> 
  35.111 +      in its own <span>region chain</span>. 
  35.112 +      These relationships can be easily 
  35.113 +      and reliably detected and resolved, however, 
  35.114 +      by keeping track of a dependency graph 
  35.115 +      and using common cycle-detection algorithms.</p>
  35.116 +
  35.117 +    <p>The dependency graph consists of edges such that:</p>
  35.118 +
  35.119 +    <ul>
  35.120 +      <li>Every <span>named flow</span> depends on its elements 
  35.121 +        where the value of 'flow-from' computes to an 
  35.122 +        <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
  35.123 +        .</li>
  35.124 +      <li>Every element in a <span>named flow</span> 
  35.125 +        where the value of 'flow-from' computes to an 
  35.126 +        <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> 
  35.127 +        depends on the <span>named flow</span> with the 
  35.128 +        <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> 
  35.129 +        name.</li>
  35.130 +    </ul>
  35.131 +
  35.132 +    <p>If the graph contains a cycle, 
  35.133 +      any elements where the value of 'flow-from' 
  35.134 +      computes to an 
  35.135 +      <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> 
  35.136 +      participating in the cycle 
  35.137 +      do not become <span>CSS Regions</span>.</p>
  35.138 +
  35.139 +    <h4 id="fragmenting-regions">Nested fragmentation contexts</h4>
  35.140 +
  35.141 +    <p>A <span>CSS Region</span> that contains 
  35.142 +      a fragment of a <span>named flow</span> 
  35.143 +      can itself be fragmented if it is nested 
  35.144 +      within a fragmentation context [[!CSS3-BREAK]], 
  35.145 +      such as when a layout 
  35.146 +      using a region chain is printed. 
  35.147 +      In these cases break opportunities 
  35.148 +      in the named flow fragment 
  35.149 +      contained by the <span>CSS Region</span> 
  35.150 +      are determined using the standard 
  35.151 +      <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. 
  35.152 +      In other words, 
  35.153 +      each region box and its associated fragment 
  35.154 +      should break as if it were a simple div 
  35.155 +      containing the fragment contents. 
  35.156 +      This can be controlled by using 
  35.157 +      an avoid break value on the <span>CSS Region</span>, 
  35.158 +      if that is desired.</p>
  35.159 +
  35.160      <h3 id=
  35.161      "region-flow-break">Region
  35.162      flow break properties: 'break-before', 'break-after', 'break-inside'</h3>
  35.163 @@ -1241,15 +1276,6 @@
  35.164      
  35.165  
  35.166      <p>Only a limited list of properties can be set in a region style rule:</p>
  35.167 -    
  35.168 -    <div class="issue-marker wrapper">
  35.169 -    <div class="issue-marker" data-bug_id="16921" data-bug_status="REOPENED">
  35.170 -        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16921">Issue-16921</a>
  35.171 -        <div class="issue-details">
  35.172 -            <p class="short-desc">Should text-align be added to region styling properties</p>
  35.173 -        </div>  
  35.174 -    </div>
  35.175 -    </div>
  35.176  
  35.177      <ol>
  35.178          <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li>
  35.179 @@ -1261,6 +1287,7 @@
  35.180          <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">'text-decoration'</a></li>
  35.181          <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">'text-transform'</a></li>
  35.182          <li><a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a></li>
  35.183 +        <li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and justification properties</a></li>
  35.184          <li><a href="http://www.w3.org/TR/css3-background/#borders">border properties</a></li>
  35.185          <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner properties</a></li>
  35.186          <li><a href="http://www.w3.org/TR/css3-background/#border-images">border images properties</a></li>
  35.187 @@ -1483,15 +1510,6 @@
  35.188        [[!CSS3COL]].</p>
  35.189          
  35.190      <h2 id="pseudo_elements">Pseudo-elements</h2>
  35.191 -
  35.192 -    <div class="issue-marker" data-bug_id="15188" data-bug_status="NEW">
  35.193 -        <a href=
  35.194 -        "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Issue-15188</a>
  35.195 -
  35.196 -        <div class="issue-details">
  35.197 -            <p class="short-desc">add functionality for having textual description like "continued here" or "continued on page x" to regions.</p>
  35.198 -        </div>
  35.199 -    </div>
  35.200      
  35.201      <p>It can be useful 
  35.202        to visually mark the content 
  35.203 @@ -1743,13 +1761,6 @@
  35.204          <li>the <code class="idl">getContent()</code> method returns an empty <code class="idl">NodeList</code> instance.</li>
  35.205          <li>the <code class="idl">getRegionsByContent()</code> method retuns an empty sequence.</li>
  35.206      </ul>
  35.207 -    
  35.208 -    <div class="issue-marker" data-bug_id="16382" data-bug_status="ASSIGNED">
  35.209 -    <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16382">Issue-16382</a>
  35.210 -    <div class="issue-details">
  35.211 -        <p class="short-desc">Should we have a NamedFlow.getRegionsByFlowRanges?</p>
  35.212 -    </div>  
  35.213 -    </div>
  35.214  
  35.215      <h3 id="the-region-interface">The Region interface</h3>
  35.216  
  35.217 @@ -1991,9 +2002,11 @@
  35.218        when there is a possible layout change 
  35.219        in their region chain. 
  35.220        The event is asynchronous, 
  35.221 -      and fires when 
  35.222 +      and fires in the same step of the 
  35.223 +      <a href="http://www.w3.org/TR/html5/webappapis.html#processing-model-2">event loop</a> 
  35.224 +      [[!HTML5]] as when 
  35.225        <a href="http://www.w3.org/TR/2012/WD-dom-20120405/#mutation-observers">MutationObservers</a> 
  35.226 -       [[!DOM]] are invoked.</p> 
  35.227 +      [[!DOM]] are invoked.</p> 
  35.228      <p>If region chain nesting occurs
  35.229        (the contents of a <a href="#dom-named-flow"><code class="idl">NamedFlow</code></a> 
  35.230        contains regions 
  35.231 @@ -2429,6 +2442,9 @@
  35.232      <h3 id="changes_from_Aug_28_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">August 28<sup>th</sup> 2012</a> version</h3>
  35.233  
  35.234      <ul>
  35.235 +      <li>Added section on fragmenting the fragmenters</li>
  35.236 +      <li>Added section on handling circular flow-from and flow-into situations</li>
  35.237 +      <li>Added alignment and justification to region styling properties</li>
  35.238        <li>Added timing for regionLayoutUpdate event</li>
  35.239        <li>Clarified interaction between content and flow-from for pseudo-elements</li>
  35.240        <li>Changed NamedFlowCollection getters to return undefined when there is no NamedFlow.</li>
  35.241 @@ -2773,21 +2789,6 @@
  35.242  
  35.243      <h2 class="no-num" id="references">References</h2>
  35.244  
  35.245 -    <div class="issue-marker wrapper">
  35.246 -    <div class="issue-marker" data-bug_id="16404" data-bug_status="ASSIGNED">
  35.247 -    <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16404">Issue-16404</a>
  35.248 -    <div class="issue-details">
  35.249 -        <p class="short-desc">Fix specification dependencies</p>
  35.250 -    </div>  
  35.251 -    </div>
  35.252 -    <div class="issue-marker" data-bug_id="18767" data-bug_status="NEW">
  35.253 -        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18767">Issue-18767</a>
  35.254 -        <div class="issue-details">
  35.255 -            <p class="short-desc">Something appears to be wrong with the checkSpecificationIssues() call</p>
  35.256 -        </div>  
  35.257 -    </div>
  35.258 -    </div>
  35.259 -
  35.260      <h3 class="no-num" id="normative-references">Normative references</h3>
  35.261      <!--begin-normative--><!--end-normative-->
  35.262  
  35.263 @@ -2801,6 +2802,7 @@
  35.264      <!-- properties -->
  35.265      
  35.266      <!-- template markup for issues pulled from Bugzilla -->    <!-- template markup for issues pulled from Bugzilla -->
  35.267 +<!--
  35.268      <script type="text/template" id="issue-template">
  35.269      <div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}">
  35.270          <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
  35.271 @@ -2815,7 +2817,8 @@
  35.272      <script type="text/javascript">
  35.273          checkSpecificationIssues('CSS', 'Regions');        
  35.274      </script>
  35.275 -    
  35.276 +-->
  35.277 +
  35.278  </body>
  35.279  </html>
  35.280  <!-- Keep this comment at the end of the file
    36.1 --- a/css3-sizing/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    36.2 +++ b/css3-sizing/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    36.3 @@ -48,6 +48,11 @@
    36.4      <dd><a
    36.5       href="http://dev.w3.org/csswg/css3-sizing/">http://dev.w3.org/csswg/css3-sizing/</a>
    36.6  
    36.7 +    <dt>Previous Versions:
    36.8 +
    36.9 +    <dd><a
   36.10 +     href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>
   36.11 +
   36.12      <dt>Issue Tracking:
   36.13  
   36.14      <dd><a
   36.15 @@ -284,7 +289,9 @@
   36.16     <dd> A size that can be determined without measuring content; that is, a
   36.17      <var>&lt;length></var>, a size of the <i>initial containing block</i>, or
   36.18      a <var>&lt;percentage></var> that is resolved against a <a
   36.19 -    href="#definite-size"><i>definite</i></a> size.
   36.20 +    href="#definite-size"><i>definite</i></a> size. Additionally, the size of
   36.21 +    the containing block of an absolutely positioned element is always <a
   36.22 +    href="#definite-size"><i>definite</i></a> with respect to that element.
   36.23  
   36.24     <dt><dfn id=indefinite-size title="indefinite|indefinite size">indefinite
   36.25      size</dfn>
   36.26 @@ -303,6 +310,16 @@
   36.27      either a <dfn id=min-content-constraint>min-content constraint</dfn> or a
   36.28      <dfn id=max-content-constraint>max-content constraint</dfn>.
   36.29  
   36.30 +   <dt><dfn id=fill-available-fit>fill-available fit</dfn>
   36.31 +
   36.32 +   <dd> The <a href="#fill-available-fit"><i>fill-available fit</i></a> into
   36.33 +    a given size is that size, minus the element's computed margins (not
   36.34 +    collapsed, treating ‘<code class=css>auto</code>’ as zero), border,
   36.35 +    and padding in the given dimension.
   36.36 +    <p class=note> Note: This is the formula used to calculate widths of
   36.37 +     non-replaced blocks in normal flow in <a
   36.38 +     href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
   36.39 +
   36.40     <dt><dfn id=fallback-size title="fallback|fallback size">fallback
   36.41      size</dfn>
   36.42  
   36.43 @@ -504,15 +521,15 @@
   36.44      appropriate to the writing mode.
   36.45  
   36.46     <dt><dfn id=repudiate-floats>‘<code
   36.47 -    class=css>repudiate-floats</code>’</dfn>
   36.48 +    class=css>repudiate-floats</code>’</dfn> <span class=issue>Less stupid
   36.49 +    name?</span>
   36.50  
   36.51     <dd> In the inline axis, use the larger of the min-content measure, and
   36.52      the fill-available measure minus the size of any non-descendant floats in
   36.53      the same formatting context. (This is similar to the behavior of a box
   36.54      that establishes a formatting context next to a float.) In the block
   36.55      axis, this is identical to ‘<code class=css>auto</code>’.
   36.56 -    <p class=issue> Does this value work? Is it needed? Also: less stupid
   36.57 -     name?
   36.58 +    <p class=issue> Does this value work? Is it needed?
   36.59    </dl>
   36.60  
   36.61    <p class=issue> Right now all of these except ‘<a
   36.62 @@ -522,6 +539,16 @@
   36.63    <p class=issue> If the measure is ‘<code class=css>auto</code>’, we
   36.64     could have min-content extent imply a max-content measure, and vice versa.
   36.65  
   36.66 +  <p class=note> Note that percentages resolved against the intrinsic sizes
   36.67 +   (‘<a href="#max-content"><code class=css>max-content</code></a>’,
   36.68 +   ‘<a href="#min-content"><code class=css>min-content</code></a>’, ‘<a
   36.69 +   href="#fit-content"><code class=css>fit-content</code></a>’, ‘<a
   36.70 +   href="#repudiate-floats"><code class=css>repudiate-floats</code></a>’)
   36.71 +   will compute to ‘<code class=css>auto</code>’, <a
   36.72 +   href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">as
   36.73 +   defined by CSS 2.1</a>. <a href="#CSS21"
   36.74 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   36.75 +
   36.76    <h3 id=the-contain-floats-value><span class=secno>3.2. </span> Containing
   36.77     Floats</h3>
   36.78  
   36.79 @@ -775,71 +802,71 @@
   36.80    <h3 id=multicol-intrinsic><span class=secno>4.5. </span> Intrinsic Sizes in
   36.81     Multi-column Layout</h3>
   36.82  
   36.83 -  <p class=issue> Multi-column elements are different from most in that they
   36.84 -   grow sideways when their height is restricted. The ‘<a
   36.85 -   href="#max-content"><code class=css>max-content</code></a>’ value should
   36.86 -   be able to accommodate this somehow, in particular as this is how
   36.87 -   multi-column elements work in <a
   36.88 -   href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-multicol">orthogonal
   36.89 -   flows</a>. See also <a
   36.90 -   href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html">this
   36.91 -   explanation</a>
   36.92 -   <!-- http://lists.w3.org/Archives/Public/www-style/2011May/0468.html -->
   36.93 -   <!--
   36.94 +  <p> The <a href="#min-content-measure"><i>min-content measure</i></a> of a
   36.95 +   multi-column element with a computed ‘<code
   36.96 +   class=property>column-width</code>’ not ‘<code
   36.97 +   class=css>auto</code>’ is the smaller of its ‘<code
   36.98 +   class=property>column-width</code>’ and the largest <i>min-measure
   36.99 +   contribution</i> of its contents.
  36.100  
  36.101 -	<p class="issue">
  36.102 -		This section is VERY experimental. Feedback is encouraged. Shipping implementations is not.
  36.103 +  <p> The <a href="#min-content-measure"><i>min-content measure</i></a> of a
  36.104 +   multi-column element with a computed ‘<code
  36.105 +   class=property>column-width</code>’ of ‘<code class=css>auto</code>’
  36.106 +   is the largest <i>min-measure contribution</i> of its contents multiplied
  36.107 +   by its ‘<code class=property>column-count</code>’ (treating ‘<code
  36.108 +   class=css>auto</code>’ as ‘<code class=css>1</code>’).
  36.109  
  36.110 -	<p>For multi-column elements laid out with infinite available measure (see
  36.111 -		<a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>),
  36.112 -		the <i>min-content</i> extent is the extent that would result
  36.113 -		from taking every permissible pagination break as a column break, and the
  36.114 -		<i>max-content</i> extent is the extent that would result from taking
  36.115 -		only the forced breaks. For all other multi-column elements it is, like
  36.116 -		CSS2.1 block-level boxes, the extent that would be calculated for an
  36.117 -		''auto'' extent per [[CSS3MULTICOL]].
  36.118 +  <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a
  36.119 +   multi-column element with unrestrained column heights and a computed
  36.120 +   ‘<code class=property>column-count</code>’ not ‘<code
  36.121 +   class=css>auto</code>’ is its ‘<code
  36.122 +   class=property>column-count</code>’ multiplied by the larger of its
  36.123 +   ‘<code class=property>column-width</code>’ (treating ‘<code
  36.124 +   class=css>auto</code>’ as 0) and the largest <i>max-measure
  36.125 +   contribution</i> of its contents.
  36.126  
  36.127 -<pre>
  36.128 -NOTES FROM ROSSEN:
  36.129 -	min-content measure is min(column-width, min-content)
  36.130 -	max-content measure is
  36.131 -		1. Pass w/ colspans displ: none;
  36.132 -			 Get width
  36.133 -		2. Pass with colspans only in width
  36.134 -			 Get remaining height
  36.135 -		3. Pass w/ spans again using remaining height
  36.136 -			 Get width
  36.137 -		4. Layout in width as final
  36.138 -		Will lay out perfectly without colspans; will have some slack but no
  36.139 -		overflow when colspans present.
  36.140 -</pre>
  36.141 +  <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a
  36.142 +   multi-column element with unrestrained column heights and a computed
  36.143 +   ‘<code class=property>column-count</code>’ of ‘<code
  36.144 +   class=css>auto</code>’ is its ‘<code
  36.145 +   class=property>column-width</code>’ multiplied by the number of columns
  36.146 +   obtained by taking all allowed column breaks <a href="#CSS3-BREAK"
  36.147 +   rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>. <!--
  36.148 +	The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html .
  36.149 +	These definitions make multicols work well in flexbox, 
  36.150 +	both in 'stretch' and non-'stretch' cases,
  36.151 +	without wasted space or needless overflow.
  36.152 +	-->
  36.153  
  36.154 -	<p>
  36.155 -		The <i>min-content measure</i> of a multi-column element is
  36.156 -		the smaller of its 'column-width' and the <i>min-measure contribution</i>
  36.157 -		of its contents.
  36.158 +  <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a
  36.159 +   multi-column element with restrained-height columns (i.e. a specified
  36.160 +   ‘<code class=property>extent</code>’ or ‘<code
  36.161 +   class=property>max-extent</code>’) is the <i>measure</i> that would
  36.162 +   exactly include all of its columns. It may be approximated by:
  36.163  
  36.164 -	<p>
  36.165 -		The <i>max-content measure</i> of a multi-column element
  36.166 -		with restrained-height columns (i.e. a specified <i>extent<i> or <i>max-extent</i>)
  36.167 -		is the <i>measure</i> that would exactly include all of its columns.
  36.168 -		It may be approximated by:
  36.169 -	<ul>
  36.170 -		<li>Laying out the element with column-spanning elements given 'display: none',
  36.171 -			and taking a measure that includes all the columns.
  36.172 -		<li>Laying out all of the column-spanning elements into that resulting measure,
  36.173 -			and taking the resulting extent.
  36.174 -		<li>Subtracting that resulting extent from the specified restraint,
  36.175 -			laying out the element without column-spanning elements again into this adjusted extent,
  36.176 -			and taking the measure of all its columns as its <i>max-content measure</i>.
  36.177 -	<p>
  36.178 -		or by some more accurate method.
  36.179 +  <ul>
  36.180 +   <li> Laying out the element with column-spanning elements given ‘<code
  36.181 +    class=css>display: none</code>’, and taking a measure that includes all
  36.182 +    the columns.
  36.183  
  36.184 -	<p class="note">
  36.185 -		This approximation can result in some slack, but avoids overflow in the most common cases,
  36.186 -		where the balanced height of the columns above spanning elements are approximately equal.
  36.187 +   <li> Laying out all of the column-spanning elements into that resulting
  36.188 +    measure, and taking the resulting extent.
  36.189  
  36.190 --->
  36.191 +   <li> Subtracting that resulting extent from the specified restraint,
  36.192 +    laying out the element without column-spanning elements again into this
  36.193 +    adjusted extent, and taking the measure of all its columns as its <a
  36.194 +    href="#max-content-measure"><i>max-content measure</i></a>.
  36.195 +  </ul>
  36.196 +
  36.197 +  <p> or by some more accurate method.
  36.198 +
  36.199 +  <p class=note> This approximation can result in some slack, but avoids
  36.200 +   overflow in the most common cases, where the balanced height of the
  36.201 +   columns above spanning elements are approximately equal.
  36.202 +
  36.203 +  <p class=note> In the common case of no column-spanning elements, this
  36.204 +   approximation collapses to simply doing a layout, and measuring the
  36.205 +   resulting columns.
  36.206  
  36.207    <h2 id=extrinsic-sizing><span class=secno>5. </span> Extrinsic Size
  36.208     Determination</h2>
  36.209 @@ -848,30 +875,32 @@
  36.210     on the context of an element, without regard for its contents.
  36.211  
  36.212    <p> The inner <a href="#fill-available-measure"><i>fill-available
  36.213 -   measure</i></a> of a box is the larger of…
  36.214 +   measure</i></a> of a box is…
  36.215  
  36.216    <ul>
  36.217 -   <li> Its containing block's computed ‘<code
  36.218 -    class=property>min-measure</code>’ if that measure is <a
  36.219 -    href="#definite-size"><i>definite</i></a>, or zero otherwise.
  36.220 +   <li> If the box is the root or is absolutely-positioned, the measure of
  36.221 +    its containing block, else
  36.222  
  36.223 -   <li> The smaller of:
  36.224 -    <ul>
  36.225 -     <li> Its containing block's computed ‘<code
  36.226 -      class=property>max-measure</code>’ if that measure is <a
  36.227 -      href="#definite-size"><i>definite</i></a>, or infinity otherwise.
  36.228 -
  36.229 -     <li> The containing block's computed measure if that is <a
  36.230 -      href="#definite-size"><i>definite</i></a>, or its inner <a
  36.231 -      href="#fill-available-measure"><i>fill-available measure</i></a>
  36.232 -      otherwise.
  36.233 -    </ul>
  36.234 +   <li> <code>max(<i>min-measure</i>|0, min(<i>max-measure</i>|infinity,
  36.235 +    <i>measure</i>|<a
  36.236 +    href="#fill-available"><i>fill-available</i></a>))</code> where the sizes
  36.237 +    are inner measures of the element establishing the box's containing
  36.238 +    block, and where the first value is used if it is <a
  36.239 +    href="#definite-size"><i>definite</i></a> and the second value otherwise.
  36.240    </ul>
  36.241  
  36.242 -  <p> …less the box's inline-axis margins, borders, and padding.
  36.243 +  <p> …less the box's inline-axis margins (after any <a
  36.244 +   href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin
  36.245 +   collapsing</a>, and treating ‘<code class=css>auto</code>’ margins as
  36.246 +   zero), borders, and padding.
  36.247  
  36.248    <p> The <a href="#fill-available-extent"><i>fill-available extent</i></a>
  36.249 -   of a box is defined analogously, but in the other dimension. <!--  
  36.250 +   of a box is defined analogously, but in the other dimension.
  36.251 +
  36.252 +  <p class=issue> This definition might end up skipping further up the
  36.253 +   ancestor chain than we'd like in some cases. <a
  36.254 +   href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0204.html">Example.</a>
  36.255 +   Maybe it should stop at each formatting root, or something similar? <!--  
  36.256  																																																												dddddddd
  36.257  TTTTTTTTTTTTTTTTTTTTTTThhhhhhh                                      EEEEEEEEEEEEEEEEEEEEEE                              d::::::d
  36.258  T:::::::::::::::::::::Th:::::h                                      E::::::::::::::::::::E                              d::::::d
  36.259 @@ -1137,6 +1166,16 @@
  36.260     <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  36.261      <!---->
  36.262  
  36.263 +   <dt id=CSS3-BREAK>[CSS3-BREAK]
  36.264 +
  36.265 +   <dd>Rossen Atanassov; Elika J. Etemad. <a
  36.266 +    href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
  36.267 +    Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
  36.268 +    Draft. (Work in progress.) URL: <a
  36.269 +    href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
  36.270 +   </dd>
  36.271 +   <!---->
  36.272 +
  36.273     <dt id=CSS3COLOR>[CSS3COLOR]
  36.274  
  36.275     <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
  36.276 @@ -1193,6 +1232,9 @@
  36.277     <li>fill-available extent, <a href="#fill-available-extent"
  36.278      title="fill-available extent"><strong>2.</strong></a>
  36.279  
  36.280 +   <li>fill-available fit, <a href="#fill-available-fit"
  36.281 +    title="fill-available fit"><strong>2.</strong></a>
  36.282 +
  36.283     <li>fill-available measure, <a href="#fill-available-measure"
  36.284      title="fill-available measure"><strong>2.</strong></a>
  36.285  
    37.1 --- a/css3-sizing/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    37.2 +++ b/css3-sizing/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    37.3 @@ -27,6 +27,9 @@
    37.4  	<dt>Editor's draft:
    37.5  		<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
    37.6  
    37.7 +	<dt>Previous Versions:
    37.8 +		<dd><a href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>
    37.9 +
   37.10  	<dt>Issue Tracking:</dt>
   37.11  		<dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Sizing&amp;resolution=---">W3C Bugzilla</a>
   37.12  
   37.13 @@ -118,6 +121,8 @@
   37.14  			that is, a <var>&lt;length></var>, 
   37.15  			a size of the <i>initial containing block</i>,
   37.16  			or a <var>&lt;percentage></var> that is resolved against a <i>definite</i> size.
   37.17 +			Additionally, the size of the containing block of an absolutely positioned element is always <i>definite</i>
   37.18 +			with respect to that element.
   37.19  
   37.20  		<dt><dfn title="indefinite|indefinite size">indefinite size</dfn>
   37.21  		<dd>
   37.22 @@ -133,6 +138,16 @@
   37.23  			<dfn>min-content constraint</dfn> or
   37.24  			a <dfn>max-content constraint</dfn>.
   37.25  
   37.26 +		<dt><dfn>fill-available fit</dfn>
   37.27 +		<dd>
   37.28 +			The <i>fill-available fit</i> into a given size
   37.29 +			is that size,
   37.30 +			minus the element's computed margins (not collapsed, treating ''auto'' as zero),
   37.31 +			border, and padding in the given dimension.
   37.32 +
   37.33 +			<p class='note'>
   37.34 +				Note: This is the formula used to calculate widths of non-replaced blocks in normal flow in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
   37.35 +
   37.36  		<dt><dfn title="fallback|fallback size">fallback size</dfn>
   37.37  		<dd>
   37.38  			Some sizing algorithms do not work well with an infinite size.
   37.39 @@ -147,8 +162,8 @@
   37.40  			(See <a href="http://dev.w3.org/csswg/css3-sizing/#extrinsic-sizing">Extrinsic Size Determination</a>.)
   37.41  
   37.42  			<p class='note'>
   37.43 -				Note: This is called the <i>available width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1&sect;10.3.5</a> 
   37.44 -				and computed by the rules in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1&sect;10.3.3</a>.
   37.45 +				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> 
   37.46 +				and computed by the rules in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
   37.47  
   37.48  		<dt><dfn>max-content measure</dfn>
   37.49  		<dd>
   37.50 @@ -157,8 +172,8 @@
   37.51  			(See <a href="http://dev.w3.org/csswg/css3-sizing/#intrinsic-sizing">Intrinsic Size Determination</a>.)
   37.52  
   37.53  			<p class='note'>
   37.54 -				Note: This is called the <i>preferred width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1&sect;10.3.5</a> 
   37.55 -				and the <i>maximum cell width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1&sect;17.5.2.2</a>.
   37.56 +				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> 
   37.57 +				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>.
   37.58  
   37.59  		<dt><dfn>min-content measure</dfn>
   37.60  		<dd>
   37.61 @@ -170,8 +185,8 @@
   37.62  			(See <a href="http://dev.w3.org/csswg/css3-sizing/#intrinsic-sizing">Intrinsic Size Determination</a>.)
   37.63  
   37.64  			<p class='note'>
   37.65 -				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&sect;10.3.5</a> 
   37.66 -				and the <i>minimum content width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1&sect;17.5.2.2</a>.
   37.67 +				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> 
   37.68 +				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>.
   37.69  
   37.70  		<dt><dfn>fit-content measure</dfn>
   37.71  		<dd>
   37.72 @@ -180,8 +195,8 @@
   37.73  			Otherwise, equal to the <i>max-content measure</i>.
   37.74  
   37.75  			<p class='note'>
   37.76 -				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&sect;10.3.5</a> 
   37.77 -				and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout &sect; 3.4</a>.
   37.78 +				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> 
   37.79 +				and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>.
   37.80  
   37.81  		<dt><dfn>fill-available extent</dfn>
   37.82  		<dd>
   37.83 @@ -279,7 +294,7 @@
   37.84  			Use the <i>fit-content measure</i> or <i>fit-content extent</i>,
   37.85  			as appropriate to the writing mode.
   37.86  
   37.87 -		<dt><dfn>''repudiate-floats''</dfn>
   37.88 +		<dt><dfn>''repudiate-floats''</dfn> <span class='issue'>Less stupid name?</span>
   37.89  		<dd>
   37.90  			In the inline axis,
   37.91  			use the larger of the min-content measure,
   37.92 @@ -291,7 +306,6 @@
   37.93  			<p class='issue'>
   37.94  				Does this value work?
   37.95  				Is it needed?
   37.96 -				Also: less stupid name?
   37.97  	</dl>
   37.98  
   37.99  	<p class="issue">
  37.100 @@ -303,6 +317,12 @@
  37.101  		we could have min-content extent imply a max-content measure,
  37.102  		and vice versa.
  37.103  
  37.104 +	<p class='note'>
  37.105 +		Note that percentages resolved against the intrinsic sizes 
  37.106 +		(''max-content'', ''min-content'', ''fit-content'', ''repudiate-floats'')
  37.107 +		will compute to ''auto'',
  37.108 +		<a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">as defined by CSS 2.1</a>. [[!CSS21]]
  37.109 +
  37.110  <h3 id='the-contain-floats-value'>
  37.111  Containing Floats</h3>
  37.112  
  37.113 @@ -488,8 +508,8 @@
  37.114  		The <i>min-content extent</i> and <i>max-content extent</i> of a <i>block container box</i>
  37.115  		is the content extent as defined 
  37.116  		(for horizontal writing modes)
  37.117 -		in <a href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1&sect;10.6.3</a>
  37.118 -		and <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1&sect;17.5.3</a>
  37.119 +		in <a href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a>
  37.120 +		and <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a>
  37.121  		for elements with ''height: auto'',
  37.122  		and analogously for vertical writing modes.
  37.123  
  37.124 @@ -510,70 +530,77 @@
  37.125  <h3 id="multicol-intrinsic">
  37.126  Intrinsic Sizes in Multi-column Layout</h3>
  37.127  
  37.128 -	<p class='issue'>
  37.129 -		Multi-column elements are different from most in that they grow sideways
  37.130 -		when their height is restricted. The ''max-content'' value should be able
  37.131 -		to accommodate this somehow, in particular as this is how multi-column
  37.132 -		elements work in <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-multicol">orthogonal flows</a>.
  37.133 -		See also
  37.134 -		<a href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html">this explanation</a>
  37.135 -		<!-- http://lists.w3.org/Archives/Public/www-style/2011May/0468.html -->
  37.136 -
  37.137 -<!--
  37.138 -
  37.139 -	<p class="issue">
  37.140 -		This section is VERY experimental. Feedback is encouraged. Shipping implementations is not.
  37.141 -
  37.142 -	<p>For multi-column elements laid out with infinite available measure (see
  37.143 -		<a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>),
  37.144 -		the <i>min-content</i> extent is the extent that would result
  37.145 -		from taking every permissible pagination break as a column break, and the
  37.146 -		<i>max-content</i> extent is the extent that would result from taking
  37.147 -		only the forced breaks. For all other multi-column elements it is, like
  37.148 -		CSS2.1 block-level boxes, the extent that would be calculated for an
  37.149 -		''auto'' extent per [[CSS3MULTICOL]].
  37.150 -
  37.151 -<pre>
  37.152 -NOTES FROM ROSSEN:
  37.153 -	min-content measure is min(column-width, min-content)
  37.154 -	max-content measure is
  37.155 -		1. Pass w/ colspans displ: none;
  37.156 -			 Get width
  37.157 -		2. Pass with colspans only in width
  37.158 -			 Get remaining height
  37.159 -		3. Pass w/ spans again using remaining height
  37.160 -			 Get width
  37.161 -		4. Layout in width as final
  37.162 -		Will lay out perfectly without colspans; will have some slack but no
  37.163 -		overflow when colspans present.
  37.164 -</pre>
  37.165 +	<p>
  37.166 +		The <i>min-content measure</i> of a multi-column element 
  37.167 +		with a computed 'column-width' not ''auto''
  37.168 +		is the smaller of
  37.169 +		its 'column-width'
  37.170 +		and the largest <i>min-measure contribution</i> of its contents.
  37.171  
  37.172  	<p>
  37.173 -		The <i>min-content measure</i> of a multi-column element is
  37.174 -		the smaller of its 'column-width' and the <i>min-measure contribution</i>
  37.175 -		of its contents.
  37.176 +		The <i>min-content measure</i> of a multi-column element
  37.177 +		with a computed 'column-width' of ''auto''
  37.178 +		is the largest <i>min-measure contribution</i> of its contents
  37.179 +		multiplied by its 'column-count'
  37.180 +		(treating ''auto'' as ''1'').
  37.181  
  37.182  	<p>
  37.183  		The <i>max-content measure</i> of a multi-column element
  37.184 -		with restrained-height columns (i.e. a specified <i>extent<i> or <i>max-extent</i>)
  37.185 +		with unrestrained column heights
  37.186 +		and a computed 'column-count' not ''auto''
  37.187 +		is its 'column-count'
  37.188 +		multiplied by the larger of
  37.189 +		its 'column-width' (treating ''auto'' as 0)
  37.190 +		and the largest <i>max-measure contribution</i> of its contents.
  37.191 +
  37.192 +	<p>
  37.193 +		The <i>max-content measure</i> of a multi-column element
  37.194 +		with unrestrained column heights
  37.195 +		and a computed 'column-count' of ''auto''
  37.196 +		is its 'column-width'
  37.197 +		multiplied by the number of columns obtained by taking all allowed column breaks [[CSS3-BREAK]].
  37.198 +
  37.199 +	<!--
  37.200 +	The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html .
  37.201 +	These definitions make multicols work well in flexbox, 
  37.202 +	both in 'stretch' and non-'stretch' cases,
  37.203 +	without wasted space or needless overflow.
  37.204 +	-->
  37.205 +
  37.206 +	<p>
  37.207 +		The <i>max-content measure</i> of a multi-column element
  37.208 +		with restrained-height columns (i.e. a specified 'extent' or 'max-extent')
  37.209  		is the <i>measure</i> that would exactly include all of its columns.
  37.210  		It may be approximated by:
  37.211 +
  37.212  	<ul>
  37.213 -		<li>Laying out the element with column-spanning elements given 'display: none',
  37.214 +		<li>
  37.215 +			Laying out the element with column-spanning elements given 'display: none',
  37.216  			and taking a measure that includes all the columns.
  37.217 -		<li>Laying out all of the column-spanning elements into that resulting measure,
  37.218 +
  37.219 +		<li>
  37.220 +			Laying out all of the column-spanning elements into that resulting measure,
  37.221  			and taking the resulting extent.
  37.222 -		<li>Subtracting that resulting extent from the specified restraint,
  37.223 +
  37.224 +		<li>
  37.225 +			Subtracting that resulting extent from the specified restraint,
  37.226  			laying out the element without column-spanning elements again into this adjusted extent,
  37.227  			and taking the measure of all its columns as its <i>max-content measure</i>.
  37.228 +	</ul>
  37.229 +
  37.230  	<p>
  37.231  		or by some more accurate method.
  37.232  
  37.233 -	<p class="note">
  37.234 -		This approximation can result in some slack, but avoids overflow in the most common cases,
  37.235 +	<p class='note'>
  37.236 +		This approximation can result in some slack, 
  37.237 +		but avoids overflow in the most common cases,
  37.238  		where the balanced height of the columns above spanning elements are approximately equal.
  37.239  
  37.240 --->
  37.241 +	<p class='note'>
  37.242 +		In the common case of no column-spanning elements,
  37.243 +		this approximation collapses to simply doing a layout,
  37.244 +		and measuring the resulting columns.
  37.245 +
  37.246  
  37.247  <h2 id='extrinsic-sizing'>
  37.248  Extrinsic Size Determination</h2>
  37.249 @@ -583,34 +610,29 @@
  37.250  		without regard for its contents.
  37.251  
  37.252  	<p>
  37.253 -		The inner <i>fill-available measure</i> of a box
  37.254 -		is the larger of&hellip;
  37.255 -
  37.256 +		The inner <i>fill-available measure</i> of a box is&hellip;
  37.257  		<ul>
  37.258  			<li>
  37.259 -				Its containing block's computed 'min-measure' if that measure is <i>definite</i>,
  37.260 -				or zero otherwise.
  37.261 -
  37.262 +				If the box is the root or is absolutely-positioned, the measure of its containing block, else
  37.263  			<li>
  37.264 -				The smaller of:
  37.265 -
  37.266 -				<ul>
  37.267 -					<li>
  37.268 -						Its containing block's computed 'max-measure' if that measure is <i>definite</i>,
  37.269 -						or infinity otherwise.
  37.270 -
  37.271 -					<li>
  37.272 -						The containing block's computed measure if that is <i>definite</i>,
  37.273 -						or its inner <i>fill-available measure</i> otherwise.
  37.274 -				</ul>
  37.275 +				<code>max(<i>min-measure</i>|0, min(<i>max-measure</i>|infinity, <i>measure</i>|<i>fill-available</i>))</code>
  37.276 +				where the sizes are inner measures of the element establishing the box's containing block,
  37.277 +				and where the first value is used if it is <i>definite</i> and the second value otherwise.
  37.278  		</ul>
  37.279 -
  37.280 -		&hellip;less the box's inline-axis margins, borders, and padding.
  37.281 +	<p>
  37.282 +		&hellip;less the box's inline-axis margins 
  37.283 +		(after any <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin collapsing</a>, and treating ''auto'' margins as zero), 
  37.284 +		borders, and padding.
  37.285  
  37.286  	<p>
  37.287  		The <i>fill-available extent</i> of a box is defined analogously,
  37.288  		but in the other dimension.
  37.289  
  37.290 +	<p class='issue'>
  37.291 +		This definition might end up skipping further up the ancestor chain than we'd like in some cases.
  37.292 +		<a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0204.html">Example.</a>
  37.293 +		Maybe it should stop at each formatting root, or something similar?
  37.294 +
  37.295  
  37.296  
  37.297  <!--  
    38.1 --- a/css3-syntax/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    38.2 +++ b/css3-syntax/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    38.3 @@ -11,10 +11,10 @@
    38.4  
    38.5    <meta content="CSS Syntax Module Level 3 (CSS3 Syntax)" name=dcterms.title>
    38.6    <meta content=text name=dcterms.type>
    38.7 -  <meta content=2012-10-09 name=dcterms.issued>
    38.8 +  <meta content=2012-10-16 name=dcterms.issued>
    38.9    <meta content="http://dev.w3.org/csswg/css3-syntax/" name=dcterms.creator>
   38.10    <meta content=W3C name=dcterms.publisher>
   38.11 -  <meta content="http://www.w3.org/TR/2012/ED-css3-syntax-20121009/"
   38.12 +  <meta content="http://www.w3.org/TR/2012/ED-css3-syntax-20121016/"
   38.13     name=dcterms.identifier>
   38.14    <link href="#contents" rel=contents>
   38.15    <link href="#index" rel=index>
   38.16 @@ -47,7 +47,8 @@
   38.17  
   38.18     <h1>CSS Syntax Module Level 3</h1>
   38.19  
   38.20 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 October 2012</h2>
   38.21 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 October
   38.22 +    2012</h2>
   38.23  
   38.24     <dl>
   38.25      <dt>This version:
   38.26 @@ -223,11 +224,11 @@
   38.27         <li><a href="#at-keyword-rest-state"><span class=secno>3.4.11. </span>
   38.28          At-keyword-rest state</a>
   38.29  
   38.30 -       <li><a href="#identifier-state"><span class=secno>3.4.12. </span>
   38.31 -        Identifier state</a>
   38.32 -
   38.33 -       <li><a href="#identifier-rest-state"><span class=secno>3.4.13. </span>
   38.34 -        Identifier-rest state</a>
   38.35 +       <li><a href="#ident-state"><span class=secno>3.4.12. </span> Ident
   38.36 +        state</a>
   38.37 +
   38.38 +       <li><a href="#ident-rest-state"><span class=secno>3.4.13. </span>
   38.39 +        Ident-rest state</a>
   38.40  
   38.41         <li><a href="#transform-function-whitespace-state"><span
   38.42          class=secno>3.4.14. </span> Transform-function-whitespace state</a>
   38.43 @@ -479,7 +480,7 @@
   38.44    </div>
   38.45  
   38.46    <p> Property names and <a href="#at-rules"><i>at-rule</i></a> names are
   38.47 -   always <b>identifiers</b>, which have to start with a letter or a hyphen
   38.48 +   always <b>idents</b>, which have to start with a letter or a hyphen
   38.49     followed by a letter, and then can contain letters, numbers, hyphens, or
   38.50     underscores. You can include any character at all, even ones that CSS uses
   38.51     in its syntax, by escaping it with a backslash (\) or by using a
   38.52 @@ -623,19 +624,18 @@
   38.53     state.
   38.54  
   38.55    <p> The output of the tokenization step is a series of zero or more of the
   38.56 -   following tokens: identifier, function, at-keyword, hash, string,
   38.57 -   bad-string, url, bad-url, delim, number, percentage, dimension,
   38.58 -   unicode-range, whitespace, comment, cdo, cdc, colon, semicolon, [, ], (,
   38.59 -   ), {, }.
   38.60 -
   38.61 -  <p> Identifier, function, at-keyword, hash, string, and url tokens have a
   38.62 -   value composed of zero or more characters. Delim tokens have a value
   38.63 -   composed of a single character. Number, percentage, and dimension tokens
   38.64 -   have a representation composed of 1 or more character, a numeric value,
   38.65 -   and a type flag set to either "integer" or "number". The type flag
   38.66 -   defaults to "integer" if not otherwise set. Dimension tokens additionally
   38.67 -   have a unit composed of one or more characters. Unicode-range tokens have
   38.68 -   a range of characters.
   38.69 +   following tokens: ident, function, at-keyword, hash, string, bad-string,
   38.70 +   url, bad-url, delim, number, percentage, dimension, unicode-range,
   38.71 +   whitespace, comment, cdo, cdc, colon, semicolon, [, ], (, ), {, }.
   38.72 +
   38.73 +  <p> ident, function, at-keyword, hash, string, and url tokens have a value
   38.74 +   composed of zero or more characters. Delim tokens have a value composed of
   38.75 +   a single character. Number, percentage, and dimension tokens have a
   38.76 +   representation composed of 1 or more character, a numeric value, and a
   38.77 +   type flag set to either "integer" or "number". The type flag defaults to
   38.78 +   "integer" if not otherwise set. Dimension tokens additionally have a unit
   38.79 +   composed of one or more characters. Unicode-range tokens have a range of
   38.80 +   characters.
   38.81  
   38.82    <p> The tokenizer state machine consists of the states defined in the
   38.83     following subsections.
   38.84 @@ -1426,8 +1426,8 @@
   38.85  
   38.86      <p> Otherwise, if the <a href="#next-input-character"><i>next input
   38.87       character</i></a> is a <a href="#name-start-character"><i>name-start
   38.88 -     character</i></a>, switch to the <a
   38.89 -     href="#identifier-state0"><i>identifier state</i></a>. Reconsume the <a
   38.90 +     character</i></a>, switch to the <a href="#ident-state0"><i>ident
   38.91 +     state</i></a>. Reconsume the <a
   38.92       href="#current-input-character"><i>current input character</i></a>.
   38.93  
   38.94      <p> Otherwise, emit a delim token with its value set to U+002D
   38.95 @@ -1482,7 +1482,7 @@
   38.96      character</i></a> is a <a href="#newline"><i>newline</i></a> or EOF, this
   38.97      is a <i>parse error</i>. Emit a delim token with its value set to U+005C
   38.98      REVERSE SOLIDUS (\). Remain in this state.
   38.99 -    <p> Otherwise, switch to the <a href="#identifier-state0"><i>identifier
  38.100 +    <p> Otherwise, switch to the <a href="#ident-state0"><i>ident
  38.101       state</i></a>. Reconsume the <a
  38.102       href="#current-input-character"><i>current input character</i></a>.
  38.103  
  38.104 @@ -1492,7 +1492,7 @@
  38.105  
  38.106     <dt>U+007B LEFT CURLY BRACKET ({)
  38.107  
  38.108 -   <dd> Emit a [ token. Remain in this state.
  38.109 +   <dd> Emit a { token. Remain in this state.
  38.110  
  38.111     <dt>U+007D RIGHT CURLY BRACKET (})
  38.112  
  38.113 @@ -1522,15 +1522,15 @@
  38.114       followed by U+0028 LEFT PARENTHESIS ((), consume them. Switch to the <a
  38.115       href="#url-state0"><i>url state</i></a>.
  38.116  
  38.117 -    <p>Otherwise, switch to the <a href="#identifier-state0"><i>identifier
  38.118 +    <p>Otherwise, switch to the <a href="#ident-state0"><i>ident
  38.119       state</i></a>. Reconsume the <a
  38.120       href="#current-input-character"><i>current input character</i></a>.
  38.121  
  38.122     <dt><a href="#name-start-character"><i>name-start character</i></a>
  38.123  
  38.124 -   <dd> Switch to the <a href="#identifier-state0"><i>identifier
  38.125 -    state</i></a>. Reconsume the <a
  38.126 -    href="#current-input-character"><i>current input character</i></a>.
  38.127 +   <dd> Switch to the <a href="#ident-state0"><i>ident state</i></a>.
  38.128 +    Reconsume the <a href="#current-input-character"><i>current input
  38.129 +    character</i></a>.
  38.130  
  38.131     <dt>EOF
  38.132  
  38.133 @@ -1801,8 +1801,8 @@
  38.134      href="#current-input-character"><i>current input character</i></a>.
  38.135    </dl>
  38.136  
  38.137 -  <h4 id=identifier-state><span class=secno>3.4.12. </span> <dfn
  38.138 -   id=identifier-state0>Identifier state</dfn></h4>
  38.139 +  <h4 id=ident-state><span class=secno>3.4.12. </span> <dfn
  38.140 +   id=ident-state0>Ident state</dfn></h4>
  38.141  
  38.142    <p> Consume the <a href="#next-input-character"><i>next input
  38.143     character</i></a>.
  38.144 @@ -1814,17 +1814,16 @@
  38.145      character</i></a> is a <a href="#name-start-character"><i>name-start
  38.146      character</i></a>, create an identifer token with its value initially set
  38.147      to U+002D HYPHEN-MINUS. Switch to the <a
  38.148 -    href="#identifier-rest-state0"><i>identifier-rest state</i></a>.
  38.149 +    href="#ident-rest-state0"><i>ident-rest state</i></a>.
  38.150      <p> Otherwise, switch to the <a href="#data-state0"><i>data
  38.151       state</i></a>. Reconsume the <a
  38.152       href="#current-input-character"><i>current input character</i></a>.
  38.153  
  38.154     <dt><a href="#name-start-character"><i>name-start character</i></a>
  38.155  
  38.156 -   <dd> Create an identifier token with its value set to the <a
  38.157 +   <dd> Create an ident token with its value set to the <a
  38.158      href="#current-input-character"><i>current input character</i></a>.
  38.159 -    Switch to the <a href="#identifier-rest-state0"><i>identifier-rest
  38.160 -    state</i></a>.
  38.161 +    Switch to the <a href="#ident-rest-state0"><i>ident-rest state</i></a>.
  38.162  
  38.163     <dt>U+005C REVERSE SOLIDUS (\)
  38.164  
  38.165 @@ -1833,9 +1832,9 @@
  38.166      switch to the <a href="#data-state0"><i>data state</i></a>. Reconsume the
  38.167      <a href="#current-input-character"><i>current input character</i></a>.
  38.168      <p> Otherwise, <a href="#consume-an-escaped-character0"><i>consume an
  38.169 -     escaped character</i></a>. Create an identifier token with its value set
  38.170 -     to the returned character. Switch to the <a
  38.171 -     href="#identifier-rest-state0"><i>identifier-rest state</i></a>.
  38.172 +     escaped character</i></a>. Create an ident token with its value set to
  38.173 +     the returned character. Switch to the <a
  38.174 +     href="#ident-rest-state0"><i>ident-rest state</i></a>.
  38.175  
  38.176     <dt>anything else
  38.177  
  38.178 @@ -1844,8 +1843,8 @@
  38.179      character</i></a>.
  38.180    </dl>
  38.181  
  38.182 -  <h4 id=identifier-rest-state><span class=secno>3.4.13. </span> <dfn
  38.183 -   id=identifier-rest-state0>Identifier-rest state</dfn></h4>
  38.184 +  <h4 id=ident-rest-state><span class=secno>3.4.13. </span> <dfn
  38.185 +   id=ident-rest-state0>Ident-rest state</dfn></h4>
  38.186  
  38.187    <p> Consume the <a href="#next-input-character"><i>next input
  38.188     character</i></a>.
  38.189 @@ -1854,18 +1853,18 @@
  38.190     <dt><a href="#name-character"><i>name character</i></a>
  38.191  
  38.192     <dd> Append the <a href="#current-input-character"><i>current input
  38.193 -    character</i></a> to the identifier token's value. Remain in this state.
  38.194 +    character</i></a> to the ident token's value. Remain in this state.
  38.195  
  38.196     <dt>U+005C REVERSE SOLIDUS (\)
  38.197  
  38.198     <dd> If the <a href="#next-input-character"><i>next input
  38.199      character</i></a> is a <a href="#newline"><i>newline</i></a> or EOF, emit
  38.200 -    the identifier token. Switch to the <a href="#data-state0"><i>data
  38.201 +    the ident token. Switch to the <a href="#data-state0"><i>data
  38.202      state</i></a>. Reconsume the <a
  38.203      href="#current-input-character"><i>current input character</i></a>.
  38.204      <p> Otherwise, <a href="#consume-an-escaped-character0"><i>consume an
  38.205 -     escaped character</i></a>. Append the returned character to the
  38.206 -     identifier token's value. Remain in this state.
  38.207 +     escaped character</i></a>. Append the returned character to the ident
  38.208 +     token's value. Remain in this state.
  38.209  
  38.210     <dt>U+0028 LEFT PARENTHESIS (()
  38.211  
  38.212 @@ -1878,14 +1877,14 @@
  38.213      whitespace</i></a> flag is set, switch to the <a
  38.214      href="#transform-function-whitespace-state0"><i>transform-function-whitespace
  38.215      state</i></a>.
  38.216 -    <p> Otherwise, emit the identifier token. Switch to the <a
  38.217 +    <p> Otherwise, emit the ident token. Switch to the <a
  38.218       href="#data-state0"><i>data state</i></a>. Reconsume the <a
  38.219       href="#current-input-character"><i>current input character</i></a>.
  38.220  
  38.221     <dt>anything else
  38.222  
  38.223 -   <dd> Emit the identifier token. Switch to the <a
  38.224 -    href="#data-state0"><i>data state</i></a>. Reconsume the <a
  38.225 +   <dd> Emit the ident token. Switch to the <a href="#data-state0"><i>data
  38.226 +    state</i></a>. Reconsume the <a
  38.227      href="#current-input-character"><i>current input character</i></a>.
  38.228    </dl>
  38.229  
  38.230 @@ -1909,8 +1908,8 @@
  38.231  
  38.232     <dt>anything else
  38.233  
  38.234 -   <dd> Emit the identifier token. Switch to the <a
  38.235 -    href="#data-state0"><i>data state</i></a>. Reconsume the <a
  38.236 +   <dd> Emit the ident token. Switch to the <a href="#data-state0"><i>data
  38.237 +    state</i></a>. Reconsume the <a
  38.238      href="#current-input-character"><i>current input character</i></a>.
  38.239    </dl>
  38.240  
  38.241 @@ -2016,9 +2015,9 @@
  38.242       Reconsume the <a href="#current-input-character"><i>current input
  38.243       character</i></a>.
  38.244  
  38.245 -   <dt>U+0025 PERCENT SIGN
  38.246 -
  38.247 -   <dd> Emit a percent token with its value set to the number produced by
  38.248 +   <dt>U+0025 PERCENT SIGN (%)
  38.249 +
  38.250 +   <dd> Emit a percentage token with its value set to the number produced by
  38.251      interpreting the number token's representation as a base-10 number.
  38.252      Switch to the <a href="#data-state0"><i>data state</i></a>. Reconsume the
  38.253      <a href="#current-input-character"><i>current input character</i></a>.
  38.254 @@ -2130,9 +2129,9 @@
  38.255      to the <a href="#data-state0"><i>data state</i></a>. Reconsume the <a
  38.256      href="#current-input-character"><i>current input character</i></a>.
  38.257  
  38.258 -   <dt>U+0025 PERCENT SIGN
  38.259 -
  38.260 -   <dd> Emit a percent token with its value set to the number produced by
  38.261 +   <dt>U+0025 PERCENT SIGN (%)
  38.262 +
  38.263 +   <dd> Emit a percentage token with its value set to the number produced by
  38.264      interpreting the number token's representation as a base-10 number.
  38.265      Switch to the <a href="#data-state0"><i>data state</i></a>. Reconsume the
  38.266      <a href="#current-input-character"><i>current input character</i></a>.
  38.267 @@ -2723,9 +2722,9 @@
  38.268  
  38.269     <dt>preserved tokens
  38.270  
  38.271 -   <dd> The tokens that can appear in the tree are: identifier, hash, string,
  38.272 -    url, delim, number, percentage, dimension, unicode-range, whitespace,
  38.273 -    comment, cdo, cdc, colon, semicolon, at-keyword, ], ), and }.
  38.274 +   <dd> The tokens that can appear in the tree are: ident, hash, string, url,
  38.275 +    delim, number, percentage, dimension, unicode-range, whitespace, comment,
  38.276 +    cdo, cdc, colon, semicolon, at-keyword, ], ), and }.
  38.277      <p class=note> This means that the following tokens emitted by the
  38.278       tokenizer stage will <strong>not</strong> appear in the stylesheet
  38.279       object: function, bad-string, bad-url, [, (, {.
  38.280 @@ -2850,7 +2849,7 @@
  38.281     <dd> Create a style rule and push it onto the <a
  38.282      href="#stack-of-open-rules"><i>stack of open rules</i></a>. Switch to the
  38.283      <a href="#selector-mode0"><i>selector mode</i></a>. <a
  38.284 -    href="#reconsume-the-current-input-token"><i>reconsume the current input
  38.285 +    href="#reconsume-the-current-input-token"><i>Reconsume the current input
  38.286      token</i></a>.
  38.287    </dl>
  38.288  
  38.289 @@ -2946,7 +2945,7 @@
  38.290     <dd> Create a style rule and push it onto the <a
  38.291      href="#stack-of-open-rules"><i>stack of open rules</i></a>. Switch to the
  38.292      <a href="#selector-mode0"><i>selector mode</i></a>. <a
  38.293 -    href="#reconsume-the-current-input-token"><i>reconsume the current input
  38.294 +    href="#reconsume-the-current-input-token"><i>Reconsume the current input
  38.295      token</i></a>.
  38.296    </dl>
  38.297  
  38.298 @@ -3150,7 +3149,7 @@
  38.299      <p> Otherwise, this is a <i>parse error</i>. Unset the <a
  38.300       href="#current-declaration"><i>current declaration</i></a>. Switch to
  38.301       the <a href="#next-declaration-error-mode0"><i>next-declaration error
  38.302 -     mode</i></a>. <a href="#reconsume-the-current-input-token"><i>reconsume
  38.303 +     mode</i></a>. <a href="#reconsume-the-current-input-token"><i>Reconsume
  38.304       the current input token</i></a>.
  38.305  
  38.306     <dt>anything else
  38.307 @@ -3158,7 +3157,7 @@
  38.308     <dd> This is a <i>parse error</i>. Unset the <a
  38.309      href="#current-declaration"><i>current declaration</i></a>. Switch to the
  38.310      <a href="#next-declaration-error-mode0"><i>next-declaration error
  38.311 -    mode</i></a>. <a href="#reconsume-the-current-input-token"><i>reconsume
  38.312 +    mode</i></a>. <a href="#reconsume-the-current-input-token"><i>Reconsume
  38.313      the current input token</i></a>.
  38.314    </dl>
  38.315  
  38.316 @@ -3248,7 +3247,7 @@
  38.317  
  38.318     <dd> Do nothing. Switch to the <a
  38.319      href="#declaration-block-mode0"><i>declaration-block mode</i></a>. <a
  38.320 -    href="#reconsume-the-current-input-token"><i>reconsume the current input
  38.321 +    href="#reconsume-the-current-input-token"><i>Reconsume the current input
  38.322      token</i></a>.
  38.323  
  38.324     <dt>EOF token
  38.325 @@ -3341,8 +3340,8 @@
  38.326     <a href="#current-input-token"><i>current input token</i></a> is a
  38.327     dimension token, let <var>value</var> be the token's representation
  38.328     followed by the token's unit. If the <a
  38.329 -   href="#current-input-token"><i>current input token</i></a> is an
  38.330 -   identifier token, let <var>value</var> be the token's value.
  38.331 +   href="#current-input-token"><i>current input token</i></a> is an ident
  38.332 +   token, let <var>value</var> be the token's value.
  38.333  
  38.334    <p> If <var>value</var> has a length of 3 or 6 and is composed solely of <a
  38.335     href="#hex-digit"><i>hex digits</i></a>, create a hash token with its
  38.336 @@ -3851,11 +3850,11 @@
  38.337     <li>hex digit, <a href="#hex-digit"
  38.338      title="hex digit"><strong>3.4.3.</strong></a>
  38.339  
  38.340 -   <li>Identifier-rest state, <a href="#identifier-rest-state0"
  38.341 -    title="Identifier-rest state"><strong>3.4.13.</strong></a>
  38.342 -
  38.343 -   <li>Identifier state, <a href="#identifier-state0"
  38.344 -    title="Identifier state"><strong>3.4.12.</strong></a>
  38.345 +   <li>Ident-rest state, <a href="#ident-rest-state0"
  38.346 +    title="Ident-rest state"><strong>3.4.13.</strong></a>
  38.347 +
  38.348 +   <li>Ident state, <a href="#ident-state0"
  38.349 +    title="Ident state"><strong>3.4.12.</strong></a>
  38.350  
  38.351     <li>letter, <a href="#letter" title=letter><strong>3.4.3.</strong></a>
  38.352  
    39.1 --- a/css3-syntax/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    39.2 +++ b/css3-syntax/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    39.3 @@ -197,7 +197,7 @@
    39.4  	</div>
    39.5  
    39.6  	<p>
    39.7 -		Property names and <i>at-rule</i> names are always <b>identifiers</b>,
    39.8 +		Property names and <i>at-rule</i> names are always <b>idents</b>,
    39.9  		which have to start with a letter or a hyphen followed by a letter,
   39.10  		and then can contain letters, numbers, hyphens, or underscores.
   39.11  		You can include any character at all,
   39.12 @@ -341,7 +341,7 @@
   39.13  
   39.14  	<p>
   39.15  		The output of the tokenization step is a series of zero or more of the following tokens:
   39.16 -		identifier,
   39.17 +		ident,
   39.18  		function,
   39.19  		at-keyword,
   39.20  		hash,
   39.21 @@ -368,7 +368,7 @@
   39.22  		}.
   39.23  
   39.24  	<p>
   39.25 -		Identifier, function, at-keyword, hash, string, and url tokens have a value composed of zero or more characters.
   39.26 +		ident, function, at-keyword, hash, string, and url tokens have a value composed of zero or more characters.
   39.27  		Delim tokens have a value composed of a single character.
   39.28  		Number, percentage, and dimension tokens have a representation composed of 1 or more character, a numeric value, and a type flag set to either "integer" or "number".  The type flag defaults to "integer" if not otherwise set.
   39.29  		Dimension tokens additionally have a unit composed of one or more characters.
   39.30 @@ -722,7 +722,7 @@
   39.31  				Otherwise,
   39.32  				if the <i>next input character</i> is
   39.33  				a <i>name-start character</i>,
   39.34 -				switch to the <i>identifier state</i>.
   39.35 +				switch to the <i>ident state</i>.
   39.36  				Reconsume the <i>current input character</i>.
   39.37  
   39.38  			<p>
   39.39 @@ -802,7 +802,7 @@
   39.40  			Remain in this state.
   39.41  
   39.42  			<p>
   39.43 -				Otherwise, switch to the <i>identifier state</i>.
   39.44 +				Otherwise, switch to the <i>ident state</i>.
   39.45  				Reconsume the <i>current input character</i>.
   39.46  
   39.47  		<dt>U+005D RIGHT SQUARE BRACKET (])
   39.48 @@ -812,7 +812,7 @@
   39.49  
   39.50  		<dt>U+007B LEFT CURLY BRACKET ({)
   39.51  		<dd>
   39.52 -			Emit a [ token.
   39.53 +			Emit a { token.
   39.54  			Remain in this state.
   39.55  
   39.56  		<dt>U+007D RIGHT CURLY BRACKET (})
   39.57 @@ -845,12 +845,12 @@
   39.58  				Switch to the <i>url state</i>.
   39.59  
   39.60  			<p>Otherwise,
   39.61 -				switch to the <i>identifier state</i>.
   39.62 +				switch to the <i>ident state</i>.
   39.63  				Reconsume the <i>current input character</i>.
   39.64  
   39.65  		<dt><i>name-start character</i>
   39.66  		<dd>
   39.67 -			Switch to the <i>identifier state</i>.
   39.68 +			Switch to the <i>ident state</i>.
   39.69  			Reconsume the <i>current input character</i>.
   39.70  
   39.71  		<dt>EOF
   39.72 @@ -1174,7 +1174,7 @@
   39.73  	</dl>
   39.74  
   39.75  <h4>
   39.76 -<dfn>Identifier state</dfn></h4>
   39.77 +<dfn>Ident state</dfn></h4>
   39.78  
   39.79  	<p>
   39.80  		Consume the <i>next input character</i>.
   39.81 @@ -1186,7 +1186,7 @@
   39.82  			a <i>name-start character</i>,
   39.83  			create an identifer token
   39.84  			with its value initially set to U+002D HYPHEN-MINUS.
   39.85 -			Switch to the <i>identifier-rest state</i>.
   39.86 +			Switch to the <i>ident-rest state</i>.
   39.87  
   39.88  			<p>
   39.89  				Otherwise,
   39.90 @@ -1195,9 +1195,9 @@
   39.91  
   39.92  		<dt><i>name-start character</i>
   39.93  		<dd>
   39.94 -			Create an identifier token
   39.95 +			Create an ident token
   39.96  			with its value set to the <i>current input character</i>.
   39.97 -			Switch to the <i>identifier-rest state</i>.
   39.98 +			Switch to the <i>ident-rest state</i>.
   39.99  
  39.100  		<dt>U+005C REVERSE SOLIDUS (\)
  39.101  		<dd>
  39.102 @@ -1209,9 +1209,9 @@
  39.103  			<p>
  39.104  				Otherwise, 
  39.105  				<i>consume an escaped character</i>.
  39.106 -				Create an identifier token
  39.107 +				Create an ident token
  39.108  				with its value set to the returned character.
  39.109 -				Switch to the <i>identifier-rest state</i>.
  39.110 +				Switch to the <i>ident-rest state</i>.
  39.111  
  39.112  		<dt>anything else
  39.113  		<dd>
  39.114 @@ -1220,7 +1220,7 @@
  39.115  	</dl>
  39.116  
  39.117  <h4>
  39.118 -<dfn>Identifier-rest state</dfn></h4>
  39.119 +<dfn>Ident-rest state</dfn></h4>
  39.120  
  39.121  	<p>
  39.122  		Consume the <i>next input character</i>.
  39.123 @@ -1229,21 +1229,21 @@
  39.124  		<dt><i>name character</i>
  39.125  		<dd>
  39.126  			Append the <i>current input character</i>
  39.127 -			to the identifier token's value.
  39.128 +			to the ident token's value.
  39.129  			Remain in this state.
  39.130  
  39.131  		<dt>U+005C REVERSE SOLIDUS (\)
  39.132  		<dd>
  39.133  			If the <i>next input character</i> is
  39.134  			a <i>newline</i> or EOF,
  39.135 -			emit the identifier token.
  39.136 +			emit the ident token.
  39.137  			Switch to the <i>data state</i>.
  39.138  			Reconsume the <i>current input character</i>.
  39.139  
  39.140  			<p>
  39.141  				Otherwise, 
  39.142  				<i>consume an escaped character</i>.
  39.143 -				Append the returned character to the identifier token's value.
  39.144 +				Append the returned character to the ident token's value.
  39.145  				Remain in this state.
  39.146  
  39.147  		<dt>U+0028 LEFT PARENTHESIS (()
  39.148 @@ -1259,13 +1259,13 @@
  39.149  
  39.150  			<p>
  39.151  				Otherwise,
  39.152 -				emit the identifier token.
  39.153 +				emit the ident token.
  39.154  				Switch to the <i>data state</i>.
  39.155  				Reconsume the <i>current input character</i>.
  39.156  
  39.157  		<dt>anything else
  39.158  		<dd>
  39.159 -			Emit the identifier token.
  39.160 +			Emit the ident token.
  39.161  			Switch to the <i>data state</i>.
  39.162  			Reconsume the <i>current input character</i>.
  39.163  	</dl>
  39.164 @@ -1289,7 +1289,7 @@
  39.165  
  39.166  		<dt>anything else
  39.167  		<dd>
  39.168 -			Emit the identifier token.
  39.169 +			Emit the ident token.
  39.170  			Switch to the <i>data state</i>.
  39.171  			Reconsume the <i>current input character</i>.
  39.172  	</dl>
  39.173 @@ -1414,9 +1414,9 @@
  39.174  				Switch to the <i>data state</i>.
  39.175  				Reconsume the <i>current input character</i>.
  39.176  
  39.177 -		<dt>U+0025 PERCENT SIGN
  39.178 +		<dt>U+0025 PERCENT SIGN (%)
  39.179  		<dd>
  39.180 -			Emit a percent token
  39.181 +			Emit a percentage token
  39.182  			with its value set to the number
  39.183  			produced by interpreting the number token's representation
  39.184  			as a base-10 number.
  39.185 @@ -1562,9 +1562,9 @@
  39.186  			Switch to the <i>data state</i>.
  39.187  			Reconsume the <i>current input character</i>.
  39.188  
  39.189 -		<dt>U+0025 PERCENT SIGN
  39.190 +		<dt>U+0025 PERCENT SIGN (%)
  39.191  		<dd>
  39.192 -			Emit a percent token
  39.193 +			Emit a percentage token
  39.194  			with its value set to the number
  39.195  			produced by interpreting the number token's representation
  39.196  			as a base-10 number.
  39.197 @@ -2247,7 +2247,7 @@
  39.198  		<dt>preserved tokens
  39.199  		<dd>
  39.200  			The tokens that can appear in the tree are:
  39.201 -			identifier,
  39.202 +			ident,
  39.203  			hash,
  39.204  			string,
  39.205  			url,
  39.206 @@ -2395,7 +2395,7 @@
  39.207  			Create a style rule
  39.208  			and push it onto the <i>stack of open rules</i>.
  39.209  			Switch to the <i>selector mode</i>.
  39.210 -			<i>reconsume the current input token</i>.
  39.211 +			<i>Reconsume the current input token</i>.
  39.212  	</dl>
  39.213  
  39.214  <h4>
  39.215 @@ -2491,7 +2491,7 @@
  39.216  			Create a style rule
  39.217  			and push it onto the <i>stack of open rules</i>.
  39.218  			Switch to the <i>selector mode</i>.
  39.219 -			<i>reconsume the current input token</i>.
  39.220 +			<i>Reconsume the current input token</i>.
  39.221  
  39.222  	</dl>
  39.223  
  39.224 @@ -2692,14 +2692,14 @@
  39.225  				Otherwise, this is a <i>parse error</i>.
  39.226  				Unset the <i>current declaration</i>.
  39.227  				Switch to the <i>next-declaration error mode</i>.
  39.228 -				<i>reconsume the current input token</i>.
  39.229 +				<i>Reconsume the current input token</i>.
  39.230  
  39.231  		<dt>anything else
  39.232  		<dd>
  39.233  			This is a <i>parse error</i>.
  39.234  			Unset the <i>current declaration</i>.
  39.235  			Switch to the <i>next-declaration error mode</i>.
  39.236 -			<i>reconsume the current input token</i>.
  39.237 +			<i>Reconsume the current input token</i>.
  39.238  	</dl>
  39.239  
  39.240  
  39.241 @@ -2794,7 +2794,7 @@
  39.242  		<dd>
  39.243  			Do nothing.
  39.244  			Switch to the <i>declaration-block mode</i>.
  39.245 -			<i>reconsume the current input token</i>.
  39.246 +			<i>Reconsume the current input token</i>.
  39.247  
  39.248  		<dt>EOF token
  39.249  		<dd>
  39.250 @@ -2885,7 +2885,7 @@
  39.251  		let <var>value</var> be the token's representation.
  39.252  		If the <i>current input token</i> is a dimension token,
  39.253  		let <var>value</var> be the token's representation followed by the token's unit.
  39.254 -		If the <i>current input token</i> is an identifier token,
  39.255 +		If the <i>current input token</i> is an ident token,
  39.256  		let <var>value</var> be the token's value.
  39.257  
  39.258  	<p>
    40.1 --- a/css3-text-decor/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    40.2 +++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
    40.3 @@ -1,1780 +0,0 @@
    40.4 -<!DOCTYPE html>
    40.5 -
    40.6 -<html lang=en>
    40.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
    40.8 -  <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    40.9 -  <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title>
   40.10 -
   40.11 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
   40.12 -  <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)"
   40.13 -   name=DC.title>
   40.14 -  <meta content=text name=DC.type>
   40.15 -  <meta content=2012-09-23 name=DC.issued>
   40.16 -  <meta content="Elika J. Etemad" name=DC.creator>
   40.17 -  <meta content="Koji Ishii" name=DC.creator>
   40.18 -  <meta content=W3C name=DC.publisher>
   40.19 -  <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/"
   40.20 -   name=DC.identifier>
   40.21 -  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   40.22 -   rel=DC.rights>
   40.23 -  <link href="#contents" rel=contents>
   40.24 -  <link href="#index" rel=index>
   40.25 -  <link href="../default.css" rel=stylesheet type="text/css">
   40.26 -  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
   40.27 -   type="text/css">
   40.28 -
   40.29 - <body>
   40.30 -  <div class=head> <!--begin-logo-->
   40.31 -   <p><a href="http://www.w3.org/"><img alt=W3C height=48
   40.32 -    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
   40.33 -
   40.34 -   <h1>CSS Text Decoration Module Level 3</h1>
   40.35 -
   40.36 -   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23
   40.37 -    September 2012</h2>
   40.38 -
   40.39 -   <dl>
   40.40 -    <dt>This version:</dt>
   40.41 -    <!--
   40.42 -    <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a>
   40.43 -  -->
   40.44 -
   40.45 -    <dd><a
   40.46 -     href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a>
   40.47 -
   40.48 -    <dt>Latest version:
   40.49 -
   40.50 -    <dd><a
   40.51 -     href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a>
   40.52 -
   40.53 -    <dt>Latest editor's draft:
   40.54 -
   40.55 -    <dd><a
   40.56 -     href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a>
   40.57 -
   40.58 -    <dt>Previous version:
   40.59 -
   40.60 -    <dd><a
   40.61 -     href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a>
   40.62 -
   40.63 -    <dt>Issues List:
   40.64 -
   40.65 -    <dd><a
   40.66 -     href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>
   40.67 -
   40.68 -    <dt>Discussion:
   40.69 -
   40.70 -    <dd><a
   40.71 -     href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
   40.72 -     with subject line “<kbd>[css3-text] <var>… message topic
   40.73 -     …</var></kbd>”
   40.74 -
   40.75 -    <dt>Editors:
   40.76 -
   40.77 -    <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
   40.78 -     (Mozilla)
   40.79 -
   40.80 -    <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>
   40.81 -     (Rakuten, Inc.)
   40.82 -   </dl>
   40.83 -   <!--begin-copyright-->
   40.84 -   <p class=copyright><a
   40.85 -    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   40.86 -    rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
   40.87 -    title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   40.88 -    href="http://www.csail.mit.edu/"><abbr
   40.89 -    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
   40.90 -    href="http://www.ercim.eu/"><abbr
   40.91 -    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
   40.92 -    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
   40.93 -    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
   40.94 -    <a
   40.95 -    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
   40.96 -    and <a
   40.97 -    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
   40.98 -    use</a> rules apply.</p>
   40.99 -   <!--end-copyright-->
  40.100 -   <hr title="Separator for header">
  40.101 -  </div>
  40.102 -
  40.103 -  <h2 class="no-num no-toc" id=abstract>Abstract</h2>
  40.104 -
  40.105 -  <p>This module contains the features of CSS relating to text decoration,
  40.106 -   such as underlines, text shadows, and emphasis marks. <a
  40.107 -   href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the
  40.108 -   rendering of structured documents (such as HTML and XML) on screen, on
  40.109 -   paper, in speech, etc.
  40.110 -
  40.111 -  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  40.112 -
  40.113 -  <p><em>This section describes the status of this document at the time of
  40.114 -   its publication. Other documents may supersede this document. A list of
  40.115 -   current W3C publications and the latest revision of this technical report
  40.116 -   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
  40.117 -   index at http://www.w3.org/TR/.</a></em>
  40.118 -
  40.119 -  <p>Publication as a Working Draft does not imply endorsement by the W3C
  40.120 -   Membership. This is a draft document and may be updated, replaced or
  40.121 -   obsoleted by other documents at any time. It is inappropriate to cite this
  40.122 -   document as other than work in progress.
  40.123 -
  40.124 -  <p>This CSS module has been produced as a combined effort of the <a
  40.125 -   href="http://www.w3.org/International/Activity">W3C Internationalization
  40.126 -   Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style
  40.127 -   Activity</a> and is maintained by the <a
  40.128 -   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also
  40.129 -   includes contributions made by participants in the <a
  40.130 -   href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a
  40.131 -   href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).
  40.132 -
  40.133 -  <p>This document was produced by a group operating under the <a
  40.134 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
  40.135 -   2004 W3C Patent Policy</a>. W3C maintains a <a
  40.136 -   href="http://www.w3.org/2004/01/pp-impl/32061/status"
  40.137 -   rel=disclosure>public list of any patent disclosures</a> made in
  40.138 -   connection with the deliverables of the group; that page also includes
  40.139 -   instructions for disclosing a patent. An individual who has actual
  40.140 -   knowledge of a patent which the individual believes contains <a
  40.141 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
  40.142 -   Claim(s)</a> must disclose the information in accordance with <a
  40.143 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
  40.144 -   6 of the W3C Patent Policy</a>.
  40.145 -
  40.146 -  <p><strong>Feedback on this draft should be posted to the (<a
  40.147 -   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
  40.148 -   mailing list <a
  40.149 -   href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a
  40.150 -   href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
  40.151 -   <kbd>[css3-text-decor]</kbd> in the subject line.</strong> You are
  40.152 -   strongly encouraged to complain if you see something stupid in this draft.
  40.153 -   The editors will do their best to respond to all feedback.
  40.154 -
  40.155 -  <p>The following features are at risk and may be cut from the spec during
  40.156 -   its CR period if there are no (correct) implementations:
  40.157 -
  40.158 -  <p>The following features are at risk and may be cut from the spec during
  40.159 -   its CR period if there are no (correct) implementations:
  40.160 -
  40.161 -  <ul>
  40.162 -   <li>the ‘<a href="#text-decoration-skip"><code
  40.163 -    class=property>text-decoration-skip</code></a>’ property / ‘<code
  40.164 -    class=css>ink</code>’ value
  40.165 -  </ul>
  40.166 -
  40.167 -  <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
  40.168 -  <!--begin-toc-->
  40.169 -
  40.170 -  <ul class=toc>
  40.171 -   <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
  40.172 -    <ul class=toc>
  40.173 -     <li><a href="#placement"><span class=secno>1.1. </span> Module
  40.174 -      Interactions</a>
  40.175 -
  40.176 -     <li><a href="#values"><span class=secno>1.2. </span> Values</a>
  40.177 -
  40.178 -     <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a>
  40.179 -    </ul>
  40.180 -
  40.181 -   <li><a href="#line-decoration"><span class=secno>2. </span> Line
  40.182 -    Decoration: Underline, Overline, and Strike-Through</a>
  40.183 -    <ul class=toc>
  40.184 -     <li><a href="#text-decoration-line-property"><span class=secno>2.1.
  40.185 -      </span> Text Decoration Lines: the ‘<code
  40.186 -      class=property>text-decoration-line</code>’ property</a>
  40.187 -
  40.188 -     <li><a href="#text-decoration-color-property"><span class=secno>2.2.
  40.189 -      </span> Text Decoration Color: the ‘<code
  40.190 -      class=property>text-decoration-color</code>’ property</a>
  40.191 -
  40.192 -     <li><a href="#text-decoration-style-property"><span class=secno>2.3.
  40.193 -      </span> Text Decoration Style: the ‘<code
  40.194 -      class=property>text-decoration-style</code>’ property</a>
  40.195 -
  40.196 -     <li><a href="#text-decoration-property"><span class=secno>2.4. </span>
  40.197 -      Text Decoration Shorthand: the ‘<code
  40.198 -      class=property>text-decoration</code>’ property</a>
  40.199 -
  40.200 -     <li><a href="#text-decoration-skip-property"><span class=secno>2.5.
  40.201 -      </span> Text Decoration Line Continuity: the ‘<code
  40.202 -      class=property>text-decoration-skip</code>’ property</a>
  40.203 -      <ul class=toc>
  40.204 -       <li><a href="#text-underline-position-property"><span
  40.205 -        class=secno>2.5.1. </span> Text Underline Position: the ‘<code
  40.206 -        class=property>text-underline-position</code>’ property</a>
  40.207 -      </ul>
  40.208 -
  40.209 -     <li><a href="#emphasis-marks"><span class=secno>2.6. </span> Emphasis
  40.210 -      Marks</a>
  40.211 -      <ul class=toc>
  40.212 -       <li><a href="#text-emphasis-style-property"><span class=secno>2.6.1.
  40.213 -        </span> Emphasis Mark Style: the ‘<code
  40.214 -        class=property>text-emphasis-style</code>’ property</a>
  40.215 -
  40.216 -       <li><a href="#text-emphasis-color-property"><span class=secno>2.6.2.
  40.217 -        </span> Emphasis Mark Color: the ‘<code
  40.218 -        class=property>text-emphasis-color</code>’ property</a>
  40.219 -
  40.220 -       <li><a href="#text-emphasis-property"><span class=secno>2.6.3. </span>
  40.221 -        Emphasis Mark Shorthand: the ‘<code
  40.222 -        class=property>text-emphasis</code>’ property</a>
  40.223 -
  40.224 -       <li><a href="#text-emphasis-position-property"><span
  40.225 -        class=secno>2.6.4. </span> Emphasis Mark Position: the ‘<code
  40.226 -        class=property>text-emphasis-position</code>’ property</a>
  40.227 -      </ul>
  40.228 -
  40.229 -     <li><a href="#text-shadow-property"><span class=secno>2.7. </span> Text
  40.230 -      Shadows: the ‘<code class=property>text-shadow</code>’ property</a>
  40.231 -    </ul>
  40.232 -
  40.233 -   <li><a href="#conformance"><span class=secno>3. </span> Conformance</a>
  40.234 -    <ul class=toc>
  40.235 -     <li><a href="#conventions"><span class=secno>3.1. </span> Document
  40.236 -      Conventions</a>
  40.237 -
  40.238 -     <li><a href="#conformance-classes"><span class=secno>3.2. </span>
  40.239 -      Conformance Classes</a>
  40.240 -
  40.241 -     <li><a href="#partial"><span class=secno>3.3. </span> Partial
  40.242 -      Implementations</a>
  40.243 -
  40.244 -     <li><a href="#experimental"><span class=secno>3.4. </span> Experimental
  40.245 -      Implementations</a>
  40.246 -
  40.247 -     <li><a href="#testing"><span class=secno>3.5. </span>Non-Experimental
  40.248 -      Implementations</a>
  40.249 -
  40.250 -     <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR Exit
  40.251 -      Criteria</a>
  40.252 -    </ul>
  40.253 -
  40.254 -   <li class=no-num><a href="#acknowledgements"> Appendix A:
  40.255 -    Acknowledgements</a>
  40.256 -
  40.257 -   <li class=no-num><a href="#appendix-b-references">Appendix B:
  40.258 -    References</a>
  40.259 -    <ul class=toc>
  40.260 -     <li class=no-num><a href="#normative-ref">Normative references</a>
  40.261 -
  40.262 -     <li class=no-num><a href="#informative-ref">Informative references</a>
  40.263 -    </ul>
  40.264 -
  40.265 -   <li class=no-num><a href="#changes">Appendix C: Changes</a>
  40.266 -  </ul>
  40.267 -  <!--end-toc-->
  40.268 -
  40.269 -  <h2 id=intro><span class=secno>1. </span> Introduction</h2>
  40.270 -
  40.271 -  <p>[document here]
  40.272 -
  40.273 -  <p class=issue>This draft describes features that are specific to certain
  40.274 -   scripts. There is an ongoing discussion about where these features belong:
  40.275 -   in existing CSS properties, in new CSS properties, or perhaps in other
  40.276 -   specifications.
  40.277 -
  40.278 -  <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
  40.279 -
  40.280 -  <p>This module replaces and extends the text-level features defined in <a
  40.281 -   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16.
  40.282 -
  40.283 -  <h3 id=values><span class=secno>1.2. </span> Values</h3>
  40.284 -
  40.285 -  <p>This specification follows the <a
  40.286 -   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
  40.287 -   definition conventions</a> from <a href="#CSS21"
  40.288 -   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
  40.289 -   this specification are defined in CSS Level 2 Revision 1 <a
  40.290 -   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
  40.291 -   modules may expand the definitions of these value types: for example <a
  40.292 -   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
  40.293 -   when combined with this module, expands the definition of the
  40.294 -   &lt;color&gt; value type as used in this specification.
  40.295 -
  40.296 -  <p>In addition to the property-specific values listed in their definitions,
  40.297 -   all properties defined in this specification also accept the <a
  40.298 -   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
  40.299 -   keyword as their property value. For readability it has not been repeated
  40.300 -   explicitly.
  40.301 -
  40.302 -  <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn>
  40.303 -   keyword here computes to itself and is resolved to the value of ‘<code
  40.304 -   class=property>color</code>’ after inheritance is performed. This is so
  40.305 -   that the ‘<a href="#text-emphasis-color"><code
  40.306 -   class=property>text-emphasis-color</code></a>’ by default matches the
  40.307 -   text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color
  40.308 -   has not yet been errata'd to define it this way; currentcolor there is
  40.309 -   defined to compute to the value of ‘<code
  40.310 -   class=property>color</code>’, which gives it the wrong inheritance
  40.311 -   behavior.</span>
  40.312 -
  40.313 -  <h3 id=terms><span class=secno>1.3. </span>Terminology</h3>
  40.314 -
  40.315 -  <p>The terms <a
  40.316 -   href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn
  40.317 -   id=character>character</dfn></a>, <a
  40.318 -   href="http://www.w3.org/TR/css3-text/#letter"><dfn
  40.319 -   id=letter>letter</dfn></a>, and <a
  40.320 -   href="http://www.w3.org/TR/css3-text/#content-language"><dfn
  40.321 -   id=content-language>content language</dfn></a> as used in this
  40.322 -   specification are defined in <a href="#CSS3TEXT"
  40.323 -   rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and
  40.324 -   concepts used in this specification are defined in <a href="#CSS21"
  40.325 -   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a
  40.326 -   href="#CSS3-WRITING-MODES"
  40.327 -   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.
  40.328 -
  40.329 -  <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
  40.330 -   Underline, Overline, and Strike-Through</h2>
  40.331 -
  40.332 -  <p>The following properties describe line decorations that are added to the
  40.333 -   content of an element. When specified on or propagated to an inline box,
  40.334 -   such decoration affects all the boxes generated by that element, and is
  40.335 -   further propagated to any in-flow block-level boxes that split the inline
  40.336 -   (see <a
  40.337 -   href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1
  40.338 -   section 9.2.1.1</a>) When specified on or propagated to a ruby box, the
  40.339 -   decorations are further propagated only to the ruby base. When specified
  40.340 -   on or propagated to a a block container that establishes an inline
  40.341 -   formatting context, the decorations are propagated to an anonymous inline
  40.342 -   element that wraps all the in-flow inline-level children of the block
  40.343 -   container. For all other elements, the decorations are propagated to any
  40.344 -   in-flow children.
  40.345 -
  40.346 -  <p class=note>Note that text decorations are not propagated to any
  40.347 -   out-of-flow descendants, nor to the contents of atomic inline-level
  40.348 -   descendants such as inline blocks and inline tables.
  40.349 -
  40.350 -  <p>By default underlines, overlines, and line-throughs are applied only to
  40.351 -   text (including white space, letter spacing, and word spacing): margins,
  40.352 -   borders, and padding are skipped. Elements containing no text, such as
  40.353 -   images, are likewise not decorated. The ‘<a
  40.354 -   href="#text-decoration-skip"><code
  40.355 -   class=property>text-decoration-skip</code></a>’ property can be used to
  40.356 -   modify this behavior, for example allowing inline replaced elements to be
  40.357 -   underlined or requiring that white space be skipped.
  40.358 -
  40.359 -  <p>In determining the position and thickness of text decoration lines, user
  40.360 -   agents may consider the font sizes and dominant baselines of descendants,
  40.361 -   but for a given element's decoration must use the same position and
  40.362 -   thickness throughout each line box. The <a
  40.363 -   href="#text-decoration-color">color</a> and <a
  40.364 -   href="#text-decoration-style">line style</a> of decorations must remain
  40.365 -   the same on all decorations applied by a given element, even if descendant
  40.366 -   elements have different color or line style values.
  40.367 -
  40.368 -  <div class=example>
  40.369 -   <p>The following figure shows the averaging for underline:
  40.370 -
  40.371 -   <p><img
  40.372 -    alt="In the first rendering of the underlined text '1st a'                  with 'st' as a superscript, both the '1st' and the 'a'                  are rendered in a small font. In the second rendering,                  the 'a' is rendered in a larger font. In the third, both                  '1st' and 'a' are large."
  40.373 -    height=105 src=underline-averaging.gif width=326>
  40.374 -
  40.375 -   <p>In the three fragments of underlined text, the underline is drawn
  40.376 -    consecutively lower and thicker as the ratio of large text to small text
  40.377 -    increases.
  40.378 -  </div>
  40.379 -
  40.380 -  <p>Relatively positioning a descendant moves all text decorations affecting
  40.381 -   it along with the descendant's text; it does not affect calculation of the
  40.382 -   decoration's initial position on that line. The ‘<code
  40.383 -   class=property>visibility</code>’ property, filters, and other graphical
  40.384 -   transformations likewise affect text decorations as part of the text
  40.385 -   they're drawn on, even if the decorations were specified on an ancestor
  40.386 -   element. <span class=issue>Does this include ‘<a
  40.387 -   href="#text-shadow"><code class=property>text-shadow</code></a>’? What
  40.388 -   about text-fill etc.?</span>
  40.389 -
  40.390 -  <div class=example>
  40.391 -   <p>In the following style sheet and document fragment:
  40.392 -
  40.393 -   <pre><code class=css>
  40.394 -<!-- -->   blockquote { text-decoration: underline; color: blue; }
  40.395 -<!-- -->   em { display: block; }
  40.396 -<!-- -->   cite { color: fuchsia; }
  40.397 -<!----></code></pre>
  40.398 -
  40.399 -   <pre class=html><code>
  40.400 -<!-- -->   &lt;blockquote&gt;
  40.401 -<!-- -->    &lt;p&gt;
  40.402 -<!-- -->     &lt;span&gt;
  40.403 -<!-- -->      Help, help!
  40.404 -<!-- -->      &lt;em&gt; I am under a hat! &lt;/em&gt;
  40.405 -<!-- -->
  40.406 -<!-- -->      &lt;cite&gt; —GwieF &lt;/cite&gt;
  40.407 -<!-- -->     &lt;/span&gt;
  40.408 -<!-- -->    &lt;/p&gt;
  40.409 -<!-- -->   &lt;/blockquote&gt;
  40.410 -<!----></code></pre>
  40.411 -
  40.412 -   <p>...the underlining for the blockquote element is propagated to an
  40.413 -    anonymous inline element that surrounds the span element, causing the
  40.414 -    text "Help, help!" to be blue, with the blue underlining from the
  40.415 -    anonymous inline underneath it, the color being taken from the blockquote
  40.416 -    element. The <code>&lt;em&gt;text&lt;/em&gt;</code> in the em block is
  40.417 -    also underlined, as it is in an in-flow block to which the underline is
  40.418 -    propagated. The final line of text is fuchsia, but the underline
  40.419 -    underneath it is still the blue underline from the anonymous inline
  40.420 -    element.
  40.421 -
  40.422 -   <p><img alt="Sample rendering of the above underline example"
  40.423 -    src=underline-example.png>
  40.424 -
  40.425 -   <p>This diagram shows the boxes involved in the example above. The rounded
  40.426 -    aqua line represents the anonymous inline element wrapping the inline
  40.427 -    contents of the paragraph element, the rounded blue line represents the
  40.428 -    span element, and the orange lines represent the blocks.
  40.429 -  </div>
  40.430 -
  40.431 -  <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text
  40.432 -   Decoration Lines: the ‘<a href="#text-decoration-line"><code
  40.433 -   class=property>text-decoration-line</code></a>’ property</h3>
  40.434 -
  40.435 -  <table class=propdef>
  40.436 -   <tbody>
  40.437 -    <tr>
  40.438 -     <th>Name:
  40.439 -
  40.440 -     <td><dfn id=text-decoration-line>text-decoration-line</dfn>
  40.441 -
  40.442 -    <tr>
  40.443 -     <th><a href="#values">Value</a>:
  40.444 -
  40.445 -     <td>none | [ underline || overline || line-through ]
  40.446 -
  40.447 -    <tr>
  40.448 -     <th>Initial:
  40.449 -
  40.450 -     <td>none
  40.451 -
  40.452 -    <tr>
  40.453 -     <th>Applies to:
  40.454 -
  40.455 -     <td>all elements
  40.456 -
  40.457 -    <tr>
  40.458 -     <th>Inherited:
  40.459 -
  40.460 -     <td>no (but see prose)
  40.461 -
  40.462 -    <tr>
  40.463 -     <th>Percentages:
  40.464 -
  40.465 -     <td>N/A
  40.466 -
  40.467 -    <tr>
  40.468 -     <th>Media:
  40.469 -
  40.470 -     <td>visual
  40.471 -
  40.472 -    <tr>
  40.473 -     <th>Computed value:
  40.474 -
  40.475 -     <td>as specified
  40.476 -  </table>
  40.477 -
  40.478 -  <p>Specifies what line decorations, if any, are added to the element.
  40.479 -   Values have the following meanings:
  40.480 -
  40.481 -  <dl>
  40.482 -   <dt><dfn id=none title="text-decoration-line:none">‘<code
  40.483 -    class=css>none</code>’</dfn>
  40.484 -
  40.485 -   <dd>Neither produces nor inhibits text decoration.
  40.486 -
  40.487 -   <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn>
  40.488 -
  40.489 -   <dd>Each line of text is underlined.
  40.490 -
  40.491 -   <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn>
  40.492 -
  40.493 -   <dd>Each line of text has a line above it (i.e. on the opposite side from
  40.494 -    an underline).
  40.495 -
  40.496 -   <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn>
  40.497 -
  40.498 -   <dd>Each line of text has a line through the middle.
  40.499 -  </dl>
  40.500 -
  40.501 -  <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text
  40.502 -   Decoration Color: the ‘<a href="#text-decoration-color"><code
  40.503 -   class=property>text-decoration-color</code></a>’ property</h3>
  40.504 -
  40.505 -  <table class=propdef>
  40.506 -   <tbody>
  40.507 -    <tr>
  40.508 -     <th>Name:
  40.509 -
  40.510 -     <td><dfn id=text-decoration-color>text-decoration-color</dfn>
  40.511 -
  40.512 -    <tr>
  40.513 -     <th><a href="#values">Value</a>:
  40.514 -
  40.515 -     <td><a href="http://www.w3.org/TR/css3-color/#color0"><span
  40.516 -      class=value-inst-color>&lt;color&gt;</span></a>
  40.517 -
  40.518 -    <tr>
  40.519 -     <th>Initial:
  40.520 -
  40.521 -     <td><a
  40.522 -      href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
  40.523 -
  40.524 -    <tr>
  40.525 -     <th>Applies to:
  40.526 -
  40.527 -     <td>all elements
  40.528 -
  40.529 -    <tr>
  40.530 -     <th>Inherited:
  40.531 -
  40.532 -     <td>no
  40.533 -
  40.534 -    <tr>
  40.535 -     <th>Percentages:
  40.536 -
  40.537 -     <td>N/A
  40.538 -
  40.539 -    <tr>
  40.540 -     <th>Media:
  40.541 -
  40.542 -     <td>visual
  40.543 -
  40.544 -    <tr>
  40.545 -     <th>Computed value:
  40.546 -
  40.547 -     <td>the computed color
  40.548 -  </table>
  40.549 -
  40.550 -  <p>This property specifies the color of text decoration (underlines
  40.551 -   overlines, and line-throughs) set on the element with ‘<a
  40.552 -   href="#text-decoration-line"><code
  40.553 -   class=property>text-decoration-line</code></a>’.
  40.554 -
  40.555 -  <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text
  40.556 -   Decoration Style: the ‘<a href="#text-decoration-style"><code
  40.557 -   class=property>text-decoration-style</code></a>’ property</h3>
  40.558 -
  40.559 -  <table class=propdef>
  40.560 -   <tbody>
  40.561 -    <tr>
  40.562 -     <th>Name:
  40.563 -
  40.564 -     <td><dfn id=text-decoration-style>text-decoration-style</dfn>
  40.565 -
  40.566 -    <tr>
  40.567 -     <th><a href="#values">Value</a>:
  40.568 -
  40.569 -     <td>solid | double | dotted | dashed | wavy
  40.570 -
  40.571 -    <tr>
  40.572 -     <th>Initial:
  40.573 -
  40.574 -     <td>solid
  40.575 -
  40.576 -    <tr>
  40.577 -     <th>Applies to:
  40.578 -
  40.579 -     <td>all elements
  40.580 -
  40.581 -    <tr>
  40.582 -     <th>Inherited:
  40.583 -
  40.584 -     <td>no
  40.585 -
  40.586 -    <tr>
  40.587 -     <th>Percentages:
  40.588 -
  40.589 -     <td>N/A
  40.590 -
  40.591 -    <tr>
  40.592 -     <th>Media:
  40.593 -
  40.594 -     <td>visual
  40.595 -
  40.596 -    <tr>
  40.597 -     <th>Computed value:
  40.598 -
  40.599 -     <td>as specified
  40.600 -  </table>
  40.601 -
  40.602 -  <p>This property specifies the style of the line(s) drawn for text
  40.603 -   decoration specified on the element. Values have the same meaning as for
  40.604 -   the <a
  40.605 -   href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
  40.606 -   properties</a> <a href="#CSS3BG"
  40.607 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code
  40.608 -   class=css>wavy</code>’ indicates a wavy line.
  40.609 -
  40.610 -  <h3 id=text-decoration-property><span class=secno>2.4. </span> Text
  40.611 -   Decoration Shorthand: the ‘<a href="#text-decoration"><code
  40.612 -   class=property>text-decoration</code></a>’ property</h3>
  40.613 -
  40.614 -  <table class=propdef>
  40.615 -   <tbody>
  40.616 -    <tr>
  40.617 -     <th>Name:
  40.618 -
  40.619 -     <td><dfn id=text-decoration>text-decoration</dfn>
  40.620 -
  40.621 -    <tr>
  40.622 -     <th><a href="#values">Value</a>:
  40.623 -
  40.624 -     <td><var><a
  40.625 -      href="#text-decoration-line">&lt;text-decoration-line&gt;</a></var> ||
  40.626 -      <var><a
  40.627 -      href="#text-decoration-style">&lt;text-decoration-style&gt;</a></var>
  40.628 -      || <var><a
  40.629 -      href="#text-decoration-color">&lt;text-decoration-color&gt;</a></var>
  40.630 -      || blink
  40.631 -
  40.632 -    <tr>
  40.633 -     <th>Initial:
  40.634 -
  40.635 -     <td>none
  40.636 -
  40.637 -    <tr>
  40.638 -     <th>Applies to:
  40.639 -
  40.640 -     <td>all elements
  40.641 -
  40.642 -    <tr>
  40.643 -     <th>Inherited:
  40.644 -
  40.645 -     <td>no
  40.646 -
  40.647 -    <tr>
  40.648 -     <th>Percentages:
  40.649 -
  40.650 -     <td>N/A
  40.651 -
  40.652 -    <tr>
  40.653 -     <th>Media:
  40.654 -
  40.655 -     <td>visual
  40.656 -
  40.657 -    <tr>
  40.658 -     <th>Computed value:
  40.659 -
  40.660 -     <td>as specified
  40.661 -  </table>
  40.662 -
  40.663 -  <p>This property is a shorthand for setting ‘<a
  40.664 -   href="#text-decoration-line"><code
  40.665 -   class=property>text-decoration-line</code></a>’, ‘<a
  40.666 -   href="#text-decoration-color"><code
  40.667 -   class=property>text-decoration-color</code></a>’, and ‘<a
  40.668 -   href="#text-decoration-style"><code
  40.669 -   class=property>text-decoration-style</code></a>’ in one declaration.
  40.670 -   Omitted values are set to their initial values. A ‘<a
  40.671 -   href="#text-decoration"><code class=property>text-decoration</code></a>’
  40.672 -   declaration that omits both the ‘<a href="#text-decoration-color"><code
  40.673 -   class=property>text-decoration-color</code></a>’ and ‘<a
  40.674 -   href="#text-decoration-style"><code
  40.675 -   class=property>text-decoration-style</code></a>’ values is
  40.676 -   backwards-compatible with CSS Levels 1 and 2.
  40.677 -
  40.678 -  <p>If the ‘<code class=css>blink</code>’ keyword is specified the text
  40.679 -   blinks (alternates between visible and invisible). Conforming user agents
  40.680 -   may simply not blink the text. Note that not blinking the text is one
  40.681 -   technique to satisfy <a
  40.682 -   href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint
  40.683 -   3.3 of WAI-UAAG</a>.
  40.684 -
  40.685 -  <div class=example>
  40.686 -   <p>The following example underlines unvisited links with a solid blue
  40.687 -    underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.
  40.688 -
  40.689 -   <pre><code class=css>
  40.690 -<!-- -->:link {
  40.691 -<!-- -->    color: blue;
  40.692 -<!-- -->    text-decoration: underline;
  40.693 -<!-- -->    text-decoration: navy dotted underline; /* <a
  40.694 -    href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
  40.695 -<!-- -->}</code></pre>
  40.696 -  </div>
  40.697 -
  40.698 -  <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
  40.699 -   Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code
  40.700 -   class=property>text-decoration-skip</code></a>’ property</h3>
  40.701 -
  40.702 -  <table class=propdef>
  40.703 -   <tbody>
  40.704 -    <tr>
  40.705 -     <th>Name:
  40.706 -
  40.707 -     <td><dfn id=text-decoration-skip>text-decoration-skip</dfn>
  40.708 -
  40.709 -    <tr>
  40.710 -     <th><a href="#values">Value</a>:
  40.711 -
  40.712 -     <td>none | [ objects || spaces || ink || edges ]
  40.713 -
  40.714 -    <tr>
  40.715 -     <th>Initial:
  40.716 -
  40.717 -     <td>objects
  40.718 -
  40.719 -    <tr>
  40.720 -     <th>Applies to:
  40.721 -
  40.722 -     <td>all elements
  40.723 -
  40.724 -    <tr>
  40.725 -     <th>Inherited:
  40.726 -
  40.727 -     <td>yes
  40.728 -
  40.729 -    <tr>
  40.730 -     <th>Percentages:
  40.731 -
  40.732 -     <td>N/A
  40.733 -
  40.734 -    <tr>
  40.735 -     <th>Media:
  40.736 -
  40.737 -     <td>visual
  40.738 -
  40.739 -    <tr>
  40.740 -     <th>Computed value:
  40.741 -
  40.742 -     <td>as specified
  40.743 -  </table>
  40.744 -
  40.745 -  <p>This property specifies what parts of the element's content any text
  40.746 -   decoration affecting the element must skip over. It controls all text
  40.747 -   decoration lines drawn by the element and also any text decoration lines
  40.748 -   drawn by its ancestors. Values have the following meanings:
  40.749 -
  40.750 -  <dl>
  40.751 -   <dt><dfn id=none0 title="text-decoration-skip:none">‘<code
  40.752 -    class=css>none</code>’</dfn>
  40.753 -
  40.754 -   <dd>Skip nothing: text-decoration is drawn for all text content and for
  40.755 -    inline replaced elements.
  40.756 -
  40.757 -   <dt><dfn id=objects title="text-decoration-skip:objects">‘<code
  40.758 -    class=css>objects</code>’</dfn>
  40.759 -
  40.760 -   <dd>Skip this element if it is an atomic inline (such as an image or
  40.761 -    inline-block).
  40.762 -
  40.763 -   <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code
  40.764 -    class=css>spaces</code>’</dfn>
  40.765 -
  40.766 -   <dd>Skip white space: this includes regular spaces (U+0020) and tabs
  40.767 -    (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed
  40.768 -    width spaces (such as U+2000–U+200A, U+202F and U+205F), and any
  40.769 -    adjacent letter-spacing or word-spacing.
  40.770 -
  40.771 -   <dt><dfn id=ink title="text-decoration-skip:ink">‘<code
  40.772 -    class=css>ink</code>’</dfn>
  40.773 -
  40.774 -   <dd>Skip over where glyphs are drawn: interrupt the decoration line to let
  40.775 -    text show through where the text decoration would otherwise cross over a
  40.776 -    glyph. The UA may also skip a small distance to either side of the glyph
  40.777 -    outline.
  40.778 -
  40.779 -   <dt><dfn id=edges title="text-decoration-skip:edges">‘<code
  40.780 -    class=css>edges</code>’</dfn>
  40.781 -
  40.782 -   <dd>The UA should place the start and end of the line inwards from the
  40.783 -    content edge of the decorating element so that, e.g. two underlined
  40.784 -    elements side-by-side do not appear to have a single underline. (This is
  40.785 -    important in Chinese, where underlining is a form of punctuation.)
  40.786 -  </dl>
  40.787 -
  40.788 -  <p class=issue>Do we need a value that <em>doesn't</em> skip margins and
  40.789 -   padding?
  40.790 -
  40.791 -  <p class=note>Note that this property inherits and that descendant elements
  40.792 -   can have a different setting.
  40.793 -
  40.794 -  <h4 id=text-underline-position-property><span class=secno>2.5.1. </span>
  40.795 -   Text Underline Position: the ‘<a href="#text-underline-position"><code
  40.796 -   class=property>text-underline-position</code></a>’ property</h4>
  40.797 -
  40.798 -  <table class=propdef>
  40.799 -   <tbody>
  40.800 -    <tr>
  40.801 -     <th>Name:
  40.802 -
  40.803 -     <td><dfn id=text-underline-position>text-underline-position</dfn>
  40.804 -
  40.805 -    <tr>
  40.806 -     <th><a href="#values">Value</a>:
  40.807 -
  40.808 -     <td>auto | alphabetic | [ below || [ left | right ] ]
  40.809 -
  40.810 -    <tr>
  40.811 -     <th>Initial:
  40.812 -
  40.813 -     <td>auto
  40.814 -
  40.815 -    <tr>
  40.816 -     <th>Applies to:
  40.817 -
  40.818 -     <td>all elements
  40.819 -
  40.820 -    <tr>
  40.821 -     <th>Inherited:
  40.822 -
  40.823 -     <td>yes
  40.824 -
  40.825 -    <tr>
  40.826 -     <th>Percentages:
  40.827 -
  40.828 -     <td>N/A
  40.829 -
  40.830 -    <tr>
  40.831 -     <th>Media:
  40.832 -
  40.833 -     <td>visual
  40.834 -
  40.835 -    <tr>
  40.836 -     <th>Computed value:
  40.837 -
  40.838 -     <td>as specified
  40.839 -  </table>
  40.840 -
  40.841 -  <p>This property sets the position of an underline specified on the same
  40.842 -   element: it does not affect underlines specified by ancestor elements.
  40.843 -   Values have the following meanings:
  40.844 -
  40.845 -  <dl>
  40.846 -   <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn>
  40.847 -
  40.848 -   <dd>The user agent may use any algorithm to determine the underline's
  40.849 -    position; however it must be placed at or below the alphabetic baseline.
  40.850 -    <p class=note>It is suggested that the underline position be ‘<a
  40.851 -     href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it
  40.852 -     crosses either subscripted (or otherwise lowered) text, or it affects
  40.853 -     characters from Asian scripts such as Han or Tibetan, for which an
  40.854 -     alphabetic underline is too high: in such cases, aligning to the em box
  40.855 -     edge as described for ‘<code class=css>below left</code>’ is more
  40.856 -     appropriate.
  40.857 -
  40.858 -   <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn>
  40.859 -
  40.860 -   <dd>The underline is positioned relative to the alphabetic baseline. In
  40.861 -    this case the underline is likely to cross some descenders.
  40.862 -    <div class=figure>
  40.863 -     <p><img
  40.864 -      alt="In a typical Latin font, the underline is positioned slightly                  below the alphabetic baseline, leaving a gap between the line                  and the bottom of most Latin letters, but crossing through                  descenders such as the stem of a 'p'."
  40.865 -      src=underline-position-alphabetic.png
  40.866 -      title="text-underline-position: alphabetic">
  40.867 -
  40.868 -     <p class=caption>‘<code class=css>text-underline-position:
  40.869 -      alphabetic</code>’
  40.870 -    </div>
  40.871 -
  40.872 -   <dt><dfn id=below>‘<code class=css>below</code>’</dfn>
  40.873 -
  40.874 -   <dd>In horizontal writing modes, the underline is positioned relative to
  40.875 -    the under edge of the element's content box. In this case the underline
  40.876 -    usually does not cross the descenders. (This is sometimes called
  40.877 -    "accounting" underline.) If the underline affects descendants with a
  40.878 -    lower content edge, the user agent should shift the underline down
  40.879 -    further to the lowest underlined content box edge. The user agent may
  40.880 -    ignore elements with ‘<code class=css>vertical-align</code>’ values
  40.881 -    given as lengths, percentages, ‘<code class=css>top</code>’, or
  40.882 -    ‘<code class=css>bottom</code>’ when making this adjustment. (Note
  40.883 -    that images that are not affected by the underline per ‘<a
  40.884 -    href="#text-decoration-skip"><code
  40.885 -    class=property>text-decoration-skip</code></a>’ will not affect the
  40.886 -    position of the underline.)
  40.887 -    <div class=figure>
  40.888 -     <p><img
  40.889 -      alt="In a typical Latin font, the underline is far enough                  below the text that it does not cross the bottom of a 'g'."
  40.890 -      src=underline-position-below.png
  40.891 -      title="text-underline-position: below">
  40.892 -
  40.893 -     <p class=caption>‘<code class=css>text-underline-position:
  40.894 -      below</code>’
  40.895 -    </div>
  40.896 -
  40.897 -    <div class=example>
  40.898 -     <p>Because ‘<a href="#text-underline-position"><code
  40.899 -      class=property>text-underline-position</code></a>’ inherits, and is
  40.900 -      not reset by the ‘<a href="#text-decoration"><code
  40.901 -      class=property>text-decoration</code></a>’ shorthand, the following
  40.902 -      example switches the document to use ‘<a href="#below"><code
  40.903 -      class=css>below</code></a>’ underlining, which can be more
  40.904 -      appropriate for writing systems with long, complicated descenders. It
  40.905 -      is also often useful for mathematical or chemical texts that use many
  40.906 -      subscripts.
  40.907 -
  40.908 -     <pre>:root { text-underline-position: below; }</pre>
  40.909 -    </div>
  40.910 -
  40.911 -   <dt><dfn id=left>‘<code class=css>left</code>’</dfn>
  40.912 -
  40.913 -   <dd>In vertical writing modes, the underline is aligned as for ‘<a
  40.914 -    href="#below"><code class=css>below</code></a>’, on the left edge of
  40.915 -    the text.
  40.916 -
  40.917 -   <dt><dfn id=right>‘<code class=css>right</code>’</dfn>
  40.918 -
  40.919 -   <dd>In vertical writing modes, the underline is aligned as for ‘<a
  40.920 -    href="#below"><code class=css>below</code></a>’, except it is aligned
  40.921 -    to the right edge of the text. If this causes the underline to be drawn
  40.922 -    on the "over" side of the text, then an overline also switches sides and
  40.923 -    is drawn on the "under" side.
  40.924 -  </dl>
  40.925 -
  40.926 -  <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified
  40.927 -   alone, ‘<a href="#left"><code class=css>left</code></a>’ is also
  40.928 -   implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a
  40.929 -   href="#right"><code class=css>right</code></a>’ is specified alone,
  40.930 -   ‘<a href="#below"><code class=css>below</code></a>’ is also implied.
  40.931 -
  40.932 -  <p class=issue> Should ‘<code class=css>above</code>’/‘<a
  40.933 -   href="#below"><code class=css>below</code></a>’ be ‘<code
  40.934 -   class=css>over</code>’/‘<code class=css>under</code>’ to match text
  40.935 -   decoration names?
  40.936 -
  40.937 -  <div class=figure id=fig-text-underline-position>
  40.938 -   <table>
  40.939 -    <tbody>
  40.940 -     <tr>
  40.941 -      <td> <img
  40.942 -       alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'                     places the underline on the left side of the text."
  40.943 -       src=underline-position-left.png title="text-underline-position: left">
  40.944 -
  40.945 -      <td> <img
  40.946 -       alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'                     places the underline on the right side of the text."
  40.947 -       src=underline-position-right.png
  40.948 -       title="text-underline-position: right">
  40.949 -
  40.950 -     <tr>
  40.951 -      <td>‘<a href="#left"><code class=css>left</code></a>’
  40.952 -
  40.953 -      <td>‘<a href="#right"><code class=css>right</code></a>’
  40.954 -   </table>
  40.955 -
  40.956 -   <p class=caption>In vertical writing modes, the ‘<a
  40.957 -    href="#text-underline-position"><code
  40.958 -    class=property>text-underline-position</code></a>’ values ‘<a
  40.959 -    href="#left"><code class=css>left</code></a>’ and ‘<a
  40.960 -    href="#right"><code class=css>right</code></a>’ allow placing the
  40.961 -    underline on either side of the text. (In horizontal writing modes, both
  40.962 -    values are treated as ‘<a href="#below"><code
  40.963 -    class=css>below</code></a>’.)
  40.964 -  </div>
  40.965 -
  40.966 -  <div class=example>
  40.967 -   <p>The following example styles modern Chinese, Japanese, and Korean texts
  40.968 -    with the appropriate underline positions in both horizontal and vertical
  40.969 -    text:
  40.970 -
  40.971 -   <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; }
  40.972 -<!--   -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre>
  40.973 -  </div>
  40.974 -
  40.975 -  <div class=note>
  40.976 -   <p>In some cases (such as in OpenType) the font format can offer
  40.977 -    information about the appropriate position of an underline. Typically
  40.978 -    this information gives the position of an ‘<a href="#alphabetic"><code
  40.979 -    class=css>alphabetic</code></a>’ underline; in some cases (especially
  40.980 -    in CJK fonts), it gives the position of a ‘<code class=css>below
  40.981 -    left</code>’ underline. (In this case, the font's underline metrics
  40.982 -    typically touch the bottom edge of the em box). The UA is encouraged to
  40.983 -    use information (such as the underline thickness, or appropriate
  40.984 -    alphabetic alignment) from the font wherever appropriate.
  40.985 -  </div>
  40.986 -
  40.987 -  <h3 id=emphasis-marks><span class=secno>2.6. </span> Emphasis Marks</h3>
  40.988 -
  40.989 -  <p>East Asian documents traditionally use small symbols next to each glyph
  40.990 -   to emphasize a run of text. For example:
  40.991 -
  40.992 -  <div class=figure>
  40.993 -   <p> <img alt="Example of emphasis in Japanese appearing above the text"
  40.994 -    class=example height=28 src=text-emphasis-ja.gif width=225>
  40.995 -
  40.996 -   <p class=caption>Accent emphasis (shown in blue for clarity) applied to
  40.997 -    Japanese text
  40.998 -  </div>
  40.999 -
 40.1000 -  <h4 id=text-emphasis-style-property><span class=secno>2.6.1. </span>
 40.1001 -   Emphasis Mark Style: the ‘<a href="#text-emphasis-style"><code
 40.1002 -   class=property>text-emphasis-style</code></a>’ property</h4>
 40.1003 -
 40.1004 -  <table class=propdef>
 40.1005 -   <tbody>
 40.1006 -    <tr>
 40.1007 -     <th>Name:
 40.1008 -
 40.1009 -     <td><dfn id=text-emphasis-style>text-emphasis-style</dfn>
 40.1010 -
 40.1011 -    <tr>
 40.1012 -     <th><a href="#values">Value</a>:
 40.1013 -
 40.1014 -     <td>none | [ [ filled | open ] || [ dot | circle | double-circle |
 40.1015 -      triangle | sesame ] ] | <a class=noxref
 40.1016 -      href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span
 40.1017 -      class=value-inst-string>&lt;string&gt;</span></a>
 40.1018 -
 40.1019 -    <tr>
 40.1020 -     <th>Initial:
 40.1021 -
 40.1022 -     <td>none
 40.1023 -
 40.1024 -    <tr>
 40.1025 -     <th>Applies to:
 40.1026 -
 40.1027 -     <td>all elements
 40.1028 -
 40.1029 -    <tr>
 40.1030 -     <th>Inherited:
 40.1031 -
 40.1032 -     <td>yes
 40.1033 -
 40.1034 -    <tr>
 40.1035 -     <th>Percentages:
 40.1036 -
 40.1037 -     <td>N/A
 40.1038 -
 40.1039 -    <tr>
 40.1040 -     <th>Media:
 40.1041 -
 40.1042 -     <td>visual
 40.1043 -
 40.1044 -    <tr>
 40.1045 -     <th>Computed value:
 40.1046 -
 40.1047 -     <td>‘<code class=property>none</code>’, a pair of keywords
 40.1048 -      representing the shape and fill, or a string
 40.1049 -  </table>
 40.1050 -
 40.1051 -  <p>This property applies emphasis marks to the element's text. Values have
 40.1052 -   the following meanings:
 40.1053 -
 40.1054 -  <dl>
 40.1055 -   <dt><dfn id=none1 title="text-emphasis:none">‘<code
 40.1056 -    class=css>none</code>’</dfn>
 40.1057 -
 40.1058 -   <dd>No emphasis marks.
 40.1059 -
 40.1060 -   <dt><dfn id=filled title="text-emphasis:filled">‘<code
 40.1061 -    class=css>filled</code>’</dfn>
 40.1062 -
 40.1063 -   <dd>The shape is filled with solid color.
 40.1064 -
 40.1065 -   <dt><dfn id=open title="text-emphasis:open">‘<code
 40.1066 -    class=css>open</code>’</dfn>
 40.1067 -
 40.1068 -   <dd>The shape is hollow.
 40.1069 -
 40.1070 -   <dt><dfn id=dot title="text-emphasis:dot">‘<code
 40.1071 -    class=css>dot</code>’</dfn>
 40.1072 -
 40.1073 -   <dd>Display small circles as marks. The filled dot is U+2022 ‘<code
 40.1074 -    class=css>•</code>’, and the open dot is U+25E6 ‘<code
 40.1075 -    class=css>◦</code>’.
 40.1076 -
 40.1077 -   <dt><dfn id=circle title="text-emphasis:circle">‘<code
 40.1078 -    class=css>circle</code>’</dfn>
 40.1079 -
 40.1080 -   <dd>Display large circles as marks. The filled circle is U+25CF ‘<code
 40.1081 -    class=css>●</code>’, and the open circle is U+25CB ‘<code
 40.1082 -    class=css>○</code>’.
 40.1083 -
 40.1084 -   <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code
 40.1085 -    class=css>double-circle</code>’</dfn>
 40.1086 -
 40.1087 -   <dd>Display double circles as marks. The filled double-circle is U+25C9
 40.1088 -    ‘<code class=css>◉</code>’, and the open double-circle is U+25CE
 40.1089 -    ‘<code class=css>◎</code>’.
 40.1090 -
 40.1091 -   <dt><dfn id=triangle title="text-emphasis:triangle">‘<code
 40.1092 -    class=css>triangle</code>’</dfn>
 40.1093 -
 40.1094 -   <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code
 40.1095 -    class=css>▲</code>’, and the open triangle is U+25B3 ‘<code
 40.1096 -    class=css>△</code>’.
 40.1097 -
 40.1098 -   <dt><dfn id=sesame title="text-emphasis:sesame">‘<code
 40.1099 -    class=css>sesame</code>’</dfn>
 40.1100 -
 40.1101 -   <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code
 40.1102 -    class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code
 40.1103 -    class=css>﹆</code>’.
 40.1104 -
 40.1105 -   <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code
 40.1106 -    class=css><var>&lt;string&gt;</var></code>’</dfn>
 40.1107 -
 40.1108 -   <dd>Display the given string as marks. Authors should not specify more
 40.1109 -    than one <a href="#character"><i>character</i></a> in &lt;string&gt;. The
 40.1110 -    UA may truncate or ignore strings consisting of more than one grapheme
 40.1111 -    cluster.
 40.1112 -  </dl>
 40.1113 -
 40.1114 -  <p>If a shape keyword is specified but neither of ‘<code
 40.1115 -   class=css>filled</code>’ nor ‘<code class=css>open</code>’ is
 40.1116 -   specified, ‘<code class=css>filled</code>’ is assumed. If only
 40.1117 -   ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’
 40.1118 -   is specified, the shape keyword computes to ‘<code
 40.1119 -   class=css>circle</code>’ in horizontal writing mode and ‘<code
 40.1120 -   class=css>sesame</code>’ in vertical writing mode.
 40.1121 -
 40.1122 -  <p>The marks should be drawn using the element's font settings with its
 40.1123 -   size scaled down to 50%. However, not all fonts have all these glyphs, and
 40.1124 -   some fonts use inappropriate sizes for emphasis marks in these code
 40.1125 -   points. The UA may opt to use a font known to be good for emphasis marks,
 40.1126 -   or the marks may instead be synthesized by the UA. Marks must remain
 40.1127 -   upright in vertical writing modes: like CJK characters, they do not rotate
 40.1128 -   to match the writing mode.
 40.1129 -
 40.1130 -  <p class=note> One example of good fonts for emphasis marks is Adobe's
 40.1131 -   opensource project, <a
 40.1132 -   href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic
 40.1133 -   OpenType Font</a>, which is specially designed for the emphasis marks.
 40.1134 -
 40.1135 -  <p>The marks are drawn once for each <a
 40.1136 -   href="#character"><i>character</i></a>. However, emphasis marks are not
 40.1137 -   drawn for characters that are:
 40.1138 -
 40.1139 -  <ul>
 40.1140 -   <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word
 40.1141 -    separators</a> or that belong to the Unicode separator classes (Z*). (But
 40.1142 -    note that emphasis marks <em>are</em> drawn for a space that combines
 40.1143 -    with any combining characters.)
 40.1144 -
 40.1145 -   <li>Characters belonging to the Unicode classes for control codes and
 40.1146 -    unassigned characters (Cc, Cf, Cn).
 40.1147 -  </ul>
 40.1148 -
 40.1149 -  <p>If emphasis marks are drawn for characters for which ruby is drawn in
 40.1150 -   the same position as the emphasis mark, the ruby should be stacked between
 40.1151 -   the emphasis marks and the base text. In this case, the position of the
 40.1152 -   emphasis marks for a given element should be determined as if all
 40.1153 -   characters have ruby boxes of the same height as the highest ruby box in
 40.1154 -   the element. If the UA is not capable of drawing ruby and emphasis marks
 40.1155 -   on the same side, the UA may hide ruby and draw only emphasis marks.
 40.1156 -
 40.1157 -  <div class=figure>
 40.1158 -   <p><img
 40.1159 -    alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them"
 40.1160 -    height=50 src=text-emphasis-ruby.png width=134>
 40.1161 -
 40.1162 -   <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of
 40.1163 -    them
 40.1164 -  </div>
 40.1165 -
 40.1166 -  <p class=note>A future level of CSS may define controls to specify what to
 40.1167 -   do when emphasis marks and ruby text coincide.
 40.1168 -
 40.1169 -  <h4 id=text-emphasis-color-property><span class=secno>2.6.2. </span>
 40.1170 -   Emphasis Mark Color: the ‘<a href="#text-emphasis-color"><code
 40.1171 -   class=property>text-emphasis-color</code></a>’ property</h4>
 40.1172 -
 40.1173 -  <table class=propdef>
 40.1174 -   <tbody>
 40.1175 -    <tr>
 40.1176 -     <th>Name:
 40.1177 -
 40.1178 -     <td><dfn id=text-emphasis-color>text-emphasis-color</dfn>
 40.1179 -
 40.1180 -    <tr>
 40.1181 -     <th><a href="#values">Value</a>:
 40.1182 -
 40.1183 -     <td>&lt;color&gt;
 40.1184 -
 40.1185 -    <tr>
 40.1186 -     <th>Initial:
 40.1187 -
 40.1188 -     <td><a
 40.1189 -      href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
 40.1190 -
 40.1191 -    <tr>
 40.1192 -     <th>Applies to:
 40.1193 -
 40.1194 -     <td>all elements
 40.1195 -
 40.1196 -    <tr>
 40.1197 -     <th>Inherited:
 40.1198 -
 40.1199 -     <td>yes
 40.1200 -
 40.1201 -    <tr>
 40.1202 -     <th>Percentages:
 40.1203 -
 40.1204 -     <td>N/A
 40.1205 -
 40.1206 -    <tr>
 40.1207 -     <th>Media:
 40.1208 -
 40.1209 -     <td>visual
 40.1210 -
 40.1211 -    <tr>
 40.1212 -     <th>Computed value:
 40.1213 -
 40.1214 -     <td>as specified
 40.1215 -  </table>
 40.1216 -
 40.1217 -  <p>This property specifies the foreground color of the emphasis marks.
 40.1218 -
 40.1219 -  <p class=note> The correct behavior of this property depends on an
 40.1220 -   outstanding erratum on <a href="#CSS3COLOR"
 40.1221 -   rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a
 40.1222 -   href="#currentcolor"><code class=css>currentColor</code></a>’ keyword
 40.1223 -   inherit as itself, and to take the value of the ‘<code
 40.1224 -   class=property>color</code>’ property as its <em>used</em> (not
 40.1225 -   computed) value.
 40.1226 -
 40.1227 -  <h4 id=text-emphasis-property><span class=secno>2.6.3. </span> Emphasis
 40.1228 -   Mark Shorthand: the ‘<a href="#text-emphasis"><code
 40.1229 -   class=property>text-emphasis</code></a>’ property</h4>
 40.1230 -
 40.1231 -  <table class=propdef>
 40.1232 -   <tbody>
 40.1233 -    <tr>
 40.1234 -     <th>Name:
 40.1235 -
 40.1236 -     <td><dfn id=text-emphasis>text-emphasis</dfn>
 40.1237 -
 40.1238 -    <tr>
 40.1239 -     <th><a href="#values">Value</a>:
 40.1240 -
 40.1241 -     <td>‘<code class=css>&lt;<a
 40.1242 -      href="#text-emphasis-style">text-emphasis-style</a>&gt;</code>’ ||
 40.1243 -      ‘<code class=css>&lt;<a
 40.1244 -      href="#text-emphasis-color">text-emphasis-color</a>&gt;</code>’
 40.1245 -
 40.1246 -    <tr>
 40.1247 -     <th>Initial:
 40.1248 -
 40.1249 -     <td>see individual properties
 40.1250 -
 40.1251 -    <tr>
 40.1252 -     <th>Applies to:
 40.1253 -
 40.1254 -     <td>all elements
 40.1255 -
 40.1256 -    <tr>
 40.1257 -     <th>Inherited:
 40.1258 -
 40.1259 -     <td>yes
 40.1260 -
 40.1261 -    <tr>
 40.1262 -     <th>Percentages:
 40.1263 -
 40.1264 -     <td>N/A
 40.1265 -
 40.1266 -    <tr>
 40.1267 -     <th>Media:
 40.1268 -
 40.1269 -     <td>visual
 40.1270 -
 40.1271 -    <tr>
 40.1272 -     <th>Computed value:
 40.1273 -
 40.1274 -     <td>see individual properties
 40.1275 -  </table>
 40.1276 -
 40.1277 -  <p>This property is a shorthand for setting ‘<a
 40.1278 -   href="#text-emphasis-style"><code
 40.1279 -   class=property>text-emphasis-style</code></a>’ and ‘<a
 40.1280 -   href="#text-emphasis-color"><code
 40.1281 -   class=property>text-emphasis-color</code></a>’ in one declaration.
 40.1282 -   Omitted values are set to their initial values.
 40.1283 -
 40.1284 -  <p class=note>Note that ‘<a href="#text-emphasis-position"><code
 40.1285 -   class=property>text-emphasis-position</code></a>’ is not reset in this
 40.1286 -   shorthand. This is because typically the shape and color vary, but the
 40.1287 -   position is consistent for a particular language throughout the document.
 40.1288 -   Therefore the position should inherit independently.
 40.1289 -
 40.1290 -  <h4 id=text-emphasis-position-property><span class=secno>2.6.4. </span>
 40.1291 -   Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code
 40.1292 -   class=property>text-emphasis-position</code></a>’ property</h4>
 40.1293 -
 40.1294 -  <table class=propdef>
 40.1295 -   <tbody>
 40.1296 -    <tr>
 40.1297 -     <th>Name:
 40.1298 -
 40.1299 -     <td><dfn id=text-emphasis-position>text-emphasis-position</dfn>
 40.1300 -
 40.1301 -    <tr>
 40.1302 -     <th><a href="#values">Value</a>:
 40.1303 -
 40.1304 -     <td>[ above | below ] && [ right | left ]
 40.1305 -
 40.1306 -    <tr>
 40.1307 -     <th>Initial:
 40.1308 -
 40.1309 -     <td>above right
 40.1310 -
 40.1311 -    <tr>
 40.1312 -     <th>Applies to:
 40.1313 -
 40.1314 -     <td>all elements
 40.1315 -
 40.1316 -    <tr>
 40.1317 -     <th>Inherited:
 40.1318 -
 40.1319 -     <td>yes
 40.1320 -
 40.1321 -    <tr>
 40.1322 -     <th>Percentages:
 40.1323 -
 40.1324 -     <td>N/A
 40.1325 -
 40.1326 -    <tr>
 40.1327 -     <th>Media:
 40.1328 -
 40.1329 -     <td>visual
 40.1330 -
 40.1331 -    <tr>
 40.1332 -     <th>Computed value:
 40.1333 -
 40.1334 -     <td>as specified
 40.1335 -  </table>
 40.1336 -
 40.1337 -  <p>This property describes where emphasis marks are drawn at. The values
 40.1338 -   have following meanings:
 40.1339 -
 40.1340 -  <dl>
 40.1341 -   <dt><dfn id=above title="text-emphasis:above">‘<code
 40.1342 -    class=css>above</code>’</dfn>
 40.1343 -
 40.1344 -   <dd>Draw marks over the text in horizontal writing mode.
 40.1345 -
 40.1346 -   <dt><dfn id=below0 title="text-emphasis:below">‘<code
 40.1347 -    class=css>below</code>’</dfn>
 40.1348 -
 40.1349 -   <dd>Draw marks under the text in horizontal writing mode.
 40.1350 -
 40.1351 -   <dt><dfn id=right0 title="text-emphasis:right">‘<code
 40.1352 -    class=css>right</code>’</dfn>
 40.1353 -
 40.1354 -   <dd>Draw marks to the right of the text in vertical writing mode.
 40.1355 -
 40.1356 -   <dt><dfn id=left0 title="text-emphasis:left">‘<code
 40.1357 -    class=css>left</code>’</dfn>
 40.1358 -
 40.1359 -   <dd>Draw marks to the left of the text in vertical writing mode.
 40.1360 -  </dl>
 40.1361 -
 40.1362 -  <p class=issue> Should ‘<code class=css>above</code>’/‘<a
 40.1363 -   href="#below"><code class=css>below</code></a>’ be ‘<code
 40.1364 -   class=css>over</code>’/‘<code class=css>under</code>’ to match text
 40.1365 -   decoration names?
 40.1366 -
 40.1367 -  <p>Emphasis marks are drawn exactly as if each character was assigned the
 40.1368 -   mark as its ruby annotation text with the ruby position given by ‘<a
 40.1369 -   href="#text-emphasis-position"><code
 40.1370 -   class=property>text-emphasis-position</code></a>’ and the ruby alignment
 40.1371 -   as centered.
 40.1372 -
 40.1373 -  <p>The effect of emphasis marks on the line height is the same as for ruby
 40.1374 -   text.
 40.1375 -
 40.1376 -  <div class=note>
 40.1377 -   <p>Note, the preferred position of emphasis marks depends on the language.
 40.1378 -    In Japanese for example, the preferred position is ‘<code
 40.1379 -    class=css>above right</code>’. In Chinese, on the other hand, the
 40.1380 -    preferred position is ‘<code class=css>below right</code>’. The
 40.1381 -    informative table below summarizes the preferred emphasis mark positions
 40.1382 -    for Chinese and Japanese:
 40.1383 -
 40.1384 -   <table class=data>
 40.1385 -    <caption>Preferred emphasis mark and ruby position</caption>
 40.1386 -
 40.1387 -    <thead>
 40.1388 -     <tr>
 40.1389 -      <th rowspan=2 scope=col>Language
 40.1390 -
 40.1391 -      <th colspan=2 scope=col>Preferred mark position
 40.1392 -
 40.1393 -      <th colspan=2 rowspan=2 scope=col>Illustration
 40.1394 -
 40.1395 -     <tr>
 40.1396 -      <th>Horizontal
 40.1397 -
 40.1398 -      <th>Vertical
 40.1399 -
 40.1400 -    <tbody>
 40.1401 -     <tr>
 40.1402 -      <td scope=row>Japanese
 40.1403 -
 40.1404 -      <td>above
 40.1405 -
 40.1406 -      <td>right
 40.1407 -
 40.1408 -      <td> <img
 40.1409 -       alt="Emphasis marks appear above each emphasized character in horizontal Japanese text."
 40.1410 -       height=28 src=text-emphasis-ja.gif
 40.1411 -       title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
 40.1412 -       width=225>
 40.1413 -
 40.1414 -      <td rowspan=2> <img
 40.1415 -       alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
 40.1416 -       height=89 src=text-emphasis-v.gif
 40.1417 -       title="Emphasis applied on the right of a fragment of Japanese text"
 40.1418 -       width=34> <!--
 40.1419 -        <tr>
 40.1420 -          <td scope="row">Mongolian
 40.1421 -          <td><span class="issue">?</span>
 40.1422 -          <td>right
 40.1423 -        -->
 40.1424 -
 40.1425 -     <tr>
 40.1426 -      <td scope=row>Chinese
 40.1427 -
 40.1428 -      <td>below
 40.1429 -
 40.1430 -      <td>right
 40.1431 -
 40.1432 -      <td> <img
 40.1433 -       alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
 40.1434 -       height=28 src=text-emphasis-zh.gif
 40.1435 -       title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
 40.1436 -       width=133>
 40.1437 -   </table>
 40.1438 -  </div>
 40.1439 -
 40.1440 -  <h3 id=text-shadow-property><span class=secno>2.7. </span> Text Shadows:
 40.1441 -   the ‘<a href="#text-shadow"><code
 40.1442 -   class=property>text-shadow</code></a>’ property</h3>
 40.1443 -
 40.1444 -  <table class=propdef>
 40.1445 -   <tbody>
 40.1446 -    <tr>
 40.1447 -     <th>Name:
 40.1448 -
 40.1449 -     <td><dfn id=text-shadow>text-shadow</dfn>
 40.1450 -
 40.1451 -    <tr>
 40.1452 -     <th><a href="#values">Value</a>:
 40.1453 -
 40.1454 -     <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
 40.1455 -
 40.1456 -    <tr>
 40.1457 -     <th>Initial:
 40.1458 -
 40.1459 -     <td>none
 40.1460 -
 40.1461 -    <tr>
 40.1462 -     <th>Applies to:
 40.1463 -
 40.1464 -     <td>all elements
 40.1465 -
 40.1466 -    <tr>
 40.1467 -     <th>Inherited:
 40.1468 -
 40.1469 -     <td>yes
 40.1470 -
 40.1471 -    <tr>
 40.1472 -     <th>Percentages:
 40.1473 -
 40.1474 -     <td>N/A
 40.1475 -
 40.1476 -    <tr>
 40.1477 -     <th>Media:
 40.1478 -
 40.1479 -     <td>visual
 40.1480 -
 40.1481 -    <tr>
 40.1482 -     <th>Computed value:
 40.1483 -
 40.1484 -     <td>a color plus three absolute &lt;length&gt;s
 40.1485 -  </table>
 40.1486 -
 40.1487 -  <p>This property accepts a comma-separated list of shadow effects to be
 40.1488 -   applied to the text of the element. Values are interpreted as for <a
 40.1489 -   href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code
 40.1490 -   class=property>box-shadow</code>’</a> <a href="#CSS3BG"
 40.1491 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread
 40.1492 -   values are not allowed.) The shadow is applied to all of the element's
 40.1493 -   text as well as any text decorations it specifies.
 40.1494 -
 40.1495 -  <p>The shadow effects are applied front-to-back: the first shadow is on
 40.1496 -   top. The shadows may thus overlay each other, but they never overlay the
 40.1497 -   text itself. The shadow must be painted at a stack level between the
 40.1498 -   element's border and/or background, if present, and the elements text and
 40.1499 -   text decoration. UAs should avoid painting text shadows over text in
 40.1500 -   adjacent elements belonging to the same stack level and stacking context.
 40.1501 -   (This may mean that the exact stack level of the shadows depends on
 40.1502 -   whether the element has a border or background: the exact stacking
 40.1503 -   behavior of text shadows is thus UA-defined.)
 40.1504 -
 40.1505 -  <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are
 40.1506 -   not clipped to the shadowed shape and may show through if the text is
 40.1507 -   partially-transparent. Like ‘<code class=property>box-shadow</code>’,
 40.1508 -   text shadows do not influence layout, and do not trigger scrolling or
 40.1509 -   increase the size of the scrollable area.
 40.1510 -
 40.1511 -  <p class=note>The painting order of shadows defined here is the opposite of
 40.1512 -   that defined in the 1998 <a
 40.1513 -   href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2
 40.1514 -   Recommendation</a>.
 40.1515 -
 40.1516 -  <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’
 40.1517 -   property applies to both the <code>::first-line</code> and
 40.1518 -   <code>::first-letter</code> pseudo-elements.
 40.1519 -
 40.1520 -  <h2 id=conformance><span class=secno>3. </span> Conformance</h2>
 40.1521 -
 40.1522 -  <h3 id=conventions><span class=secno>3.1. </span> Document Conventions</h3>
 40.1523 -
 40.1524 -  <p>Conformance requirements are expressed with a combination of descriptive
 40.1525 -   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
 40.1526 -   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
 40.1527 -   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
 40.1528 -   normative parts of this document are to be interpreted as described in RFC
 40.1529 -   2119. However, for readability, these words do not appear in all uppercase
 40.1530 -   letters in this specification.
 40.1531 -
 40.1532 -  <p>All of the text of this specification is normative except sections
 40.1533 -   explicitly marked as non-normative, examples, and notes. <a
 40.1534 -   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
 40.1535 -
 40.1536 -  <p>Examples in this specification are introduced with the words “for
 40.1537 -   example” or are set apart from the normative text with
 40.1538 -   <code>class="example"</code>, like this:
 40.1539 -
 40.1540 -  <div class=example>
 40.1541 -   <p>This is an example of an informative example.
 40.1542 -  </div>
 40.1543 -
 40.1544 -  <p>Informative notes begin with the word “Note” and are set apart from
 40.1545 -   the normative text with <code>class="note"</code>, like this:
 40.1546 -
 40.1547 -  <p class=note>Note, this is an informative note.
 40.1548 -
 40.1549 -  <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance
 40.1550 -   Classes</h3>
 40.1551 -
 40.1552 -  <p>Conformance to CSS Text Level 3 is defined for three conformance
 40.1553 -   classes:
 40.1554 -
 40.1555 -  <dl>
 40.1556 -   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
 40.1557 -    sheet</dfn>
 40.1558 -
 40.1559 -   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
 40.1560 -    style sheet</a>.
 40.1561 -
 40.1562 -   <dt><dfn id=renderer>renderer</dfn>
 40.1563 -
 40.1564 -   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
 40.1565 -    that interprets the semantics of a style sheet and renders documents that
 40.1566 -    use them.
 40.1567 -
 40.1568 -   <dt><dfn id=authoring-tool>authoring tool</dfn>
 40.1569 -
 40.1570 -   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
 40.1571 -    that writes a style sheet.
 40.1572 -  </dl>
 40.1573 -
 40.1574 -  <p>A style sheet is conformant to CSS Text Level 3 if all of its
 40.1575 -   declarations that use properties defined in this module have values that
 40.1576 -   are valid according to the generic CSS grammar and the individual grammars
 40.1577 -   of each property as given in this module.
 40.1578 -
 40.1579 -  <p>A renderer is conformant to CSS Text Level 3 if, in addition to
 40.1580 -   interpreting the style sheet as defined by the appropriate specifications,
 40.1581 -   it supports all the features defined by CSS Text Level 3 by parsing them
 40.1582 -   correctly and rendering the document accordingly. However, the inability
 40.1583 -   of a UA to correctly render a document due to limitations of the device
 40.1584 -   does not make the UA non-conformant. (For example, a UA is not required to
 40.1585 -   render color on a monochrome monitor.)
 40.1586 -
 40.1587 -  <p>An authoring tool is conformant to CSS Text Level 3 if it writes style
 40.1588 -   sheets that are syntactically correct according to the generic CSS grammar
 40.1589 -   and the individual grammars of each feature in this module, and meet all
 40.1590 -   other conformance requirements of style sheets as described in this
 40.1591 -   module.
 40.1592 -
 40.1593 -  <h3 id=partial><span class=secno>3.3. </span> Partial Implementations</h3>
 40.1594 -
 40.1595 -  <p>So that authors can exploit the forward-compatible parsing rules to
 40.1596 -   assign fallback values, CSS renderers <strong>must</strong> treat as
 40.1597 -   invalid (and <a
 40.1598 -   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
 40.1599 -   appropriate</a>) any at-rules, properties, property values, keywords, and
 40.1600 -   other syntactic constructs for which they have no usable level of support.
 40.1601 -   In particular, user agents <strong>must not</strong> selectively ignore
 40.1602 -   unsupported component values and honor supported values in a single
 40.1603 -   multi-value property declaration: if any value is considered invalid (as
 40.1604 -   unsupported values must be), CSS requires that the entire declaration be
 40.1605 -   ignored.
 40.1606 -
 40.1607 -  <h3 id=experimental><span class=secno>3.4. </span> Experimental
 40.1608 -   Implementations</h3>
 40.1609 -
 40.1610 -  <p>To avoid clashes with future CSS features, the CSS2.1 specification
 40.1611 -   reserves a <a
 40.1612 -   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
 40.1613 -   syntax</a> for proprietary and experimental extensions to CSS.
 40.1614 -
 40.1615 -  <p>Prior to a specification reaching the Candidate Recommendation stage in
 40.1616 -   the W3C process, all implementations of a CSS feature are considered
 40.1617 -   experimental. The CSS Working Group recommends that implementations use a
 40.1618 -   vendor-prefixed syntax for such features, including those in W3C Working
 40.1619 -   Drafts. This avoids incompatibilities with future changes in the draft.
 40.1620 -
 40.1621 -  <h3 id=testing><span class=secno>3.5. </span>Non-Experimental
 40.1622 -   Implementations</h3>
 40.1623 -
 40.1624 -  <p>Once a specification reaches the Candidate Recommendation stage,
 40.1625 -   non-experimental implementations are possible, and implementors should
 40.1626 -   release an unprefixed implementation of any CR-level feature they can
 40.1627 -   demonstrate to be correctly implemented according to spec.
 40.1628 -
 40.1629 -  <p>To establish and maintain the interoperability of CSS across
 40.1630 -   implementations, the CSS Working Group requests that non-experimental CSS
 40.1631 -   renderers submit an implementation report (and, if necessary, the
 40.1632 -   testcases used for that implementation report) to the W3C before releasing
 40.1633 -   an unprefixed implementation of any CSS features. Testcases submitted to
 40.1634 -   W3C are subject to review and correction by the CSS Working Group.
 40.1635 -
 40.1636 -  <p>Further information on submitting testcases and implementation reports
 40.1637 -   can be found from on the CSS Working Group's website at <a
 40.1638 -   href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
 40.1639 -   Questions should be directed to the <a
 40.1640 -   href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
 40.1641 -   mailing list.
 40.1642 -
 40.1643 -  <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR Exit Criteria</h3>
 40.1644 -
 40.1645 -  <p> For this specification to be advanced to Proposed Recommendation, there
 40.1646 -   must be at least two independent, interoperable implementations of each
 40.1647 -   feature. Each feature may be implemented by a different set of products,
 40.1648 -   there is no requirement that all features be implemented by a single
 40.1649 -   product. For the purposes of this criterion, we define the following
 40.1650 -   terms:
 40.1651 -
 40.1652 -  <dl>
 40.1653 -   <dt>independent
 40.1654 -
 40.1655 -   <dd>each implementation must be developed by a different party and cannot
 40.1656 -    share, reuse, or derive from code used by another qualifying
 40.1657 -    implementation. Sections of code that have no bearing on the
 40.1658 -    implementation of this specification are exempt from this requirement.
 40.1659 -
 40.1660 -   <dt>interoperable
 40.1661 -
 40.1662 -   <dd>passing the respective test case(s) in the official CSS test suite,
 40.1663 -    or, if the implementation is not a Web browser, an equivalent test. Every
 40.1664 -    relevant test in the test suite should have an equivalent test created if
 40.1665 -    such a user agent (UA) is to be used to claim interoperability. In
 40.1666 -    addition if such a UA is to be used to claim interoperability, then there
 40.1667 -    must one or more additional UAs which can also pass those equivalent
 40.1668 -    tests in the same way for the purpose of interoperability. The equivalent
 40.1669 -    tests must be made publicly available for the purposes of peer review.
 40.1670 -
 40.1671 -   <dt>implementation
 40.1672 -
 40.1673 -   <dd>a user agent which:
 40.1674 -    <ol class=inline>
 40.1675 -     <li>implements the specification.
 40.1676 -
 40.1677 -     <li>is available to the general public. The implementation may be a
 40.1678 -      shipping product or other publicly available version (i.e., beta
 40.1679 -      version, preview release, or “nightly build”). Non-shipping product
 40.1680 -      releases must have implemented the feature(s) for a period of at least
 40.1681 -      one month in order to demonstrate stability.
 40.1682 -
 40.1683 -     <li>is not experimental (i.e., a version specifically designed to pass
 40.1684 -      the test suite and is not intended for normal usage going forward).
 40.1685 -    </ol>
 40.1686 -  </dl>
 40.1687 -
 40.1688 -  <p>The specification will remain Candidate Recommendation for at least six
 40.1689 -   months.
 40.1690 -
 40.1691 -  <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2>
 40.1692 -
 40.1693 -  <p>This specification would not have been possible without the help from:
 40.1694 -   Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
 40.1695 -   Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye
 40.1696 -   Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
 40.1697 -   Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
 40.1698 -   Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley,
 40.1699 -   Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao
 40.1700 -   Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi
 40.1701 -   Yabe and Steve Zilles.
 40.1702 -
 40.1703 -  <h2 class=no-num id=appendix-b-references>Appendix B: References</h2>
 40.1704 -
 40.1705 -  <h3 class=no-num id=normative-ref>Normative references</h3>
 40.1706 -  <!--begin-normative-->
 40.1707 -  <!-- Sorted by label -->
 40.1708 -
 40.1709 -  <dl class=bibliography>
 40.1710 -   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
 40.1711 -    <!---->
 40.1712 -
 40.1713 -   <dt id=CSS21>[CSS21]
 40.1714 -
 40.1715 -   <dd>Bert Bos; et al. <a
 40.1716 -    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
 40.1717 -    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
 40.1718 -    2011. W3C Recommendation. URL: <a
 40.1719 -    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
 40.1720 -   </dd>
 40.1721 -   <!---->
 40.1722 -
 40.1723 -   <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
 40.1724 -
 40.1725 -   <dd>Elika J. Etemad; Koji Ishii. <a
 40.1726 -    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS
 40.1727 -    Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft.
 40.1728 -    (Work in progress.) URL: <a
 40.1729 -    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a>
 40.1730 -   </dd>
 40.1731 -   <!---->
 40.1732 -
 40.1733 -   <dt id=CSS3BG>[CSS3BG]
 40.1734 -
 40.1735 -   <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
 40.1736 -    href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
 40.1737 -    Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
 40.1738 -    Candidate Recommendation. (Work in progress.) URL: <a
 40.1739 -    href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
 40.1740 -   </dd>
 40.1741 -   <!---->
 40.1742 -
 40.1743 -   <dt id=CSS3TEXT>[CSS3TEXT]
 40.1744 -
 40.1745 -   <dd>Elika J. Etemad; Koji Ishii. <a
 40.1746 -    href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text
 40.1747 -    Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in
 40.1748 -    progress.) URL: <a
 40.1749 -    href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a>
 40.1750 -   </dd>
 40.1751 -   <!---->
 40.1752 -
 40.1753 -   <dt id=RFC2119>[RFC2119]
 40.1754 -
 40.1755 -   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
 40.1756 -    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
 40.1757 -    RFC 2119. URL: <a
 40.1758 -    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
 40.1759 -   </dd>
 40.1760 -   <!---->
 40.1761 -  </dl>
 40.1762 -  <!--end-normative-->
 40.1763 -
 40.1764 -  <h3 class=no-num id=informative-ref>Informative references</h3>
 40.1765 -  <!--begin-informative-->
 40.1766 -  <!-- Sorted by label -->
 40.1767 -
 40.1768 -  <dl class=bibliography>
 40.1769 -   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
 40.1770 -    <!---->
 40.1771 -
 40.1772 -   <dt id=CSS3COLOR>[CSS3COLOR]
 40.1773 -
 40.1774 -   <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
 40.1775 -    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
 40.1776 -    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
 40.1777 -    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
 40.1778 -   </dd>
 40.1779 -   <!---->
 40.1780 -  </dl>
 40.1781 -  <!--end-informative-->
 40.1782 -
 40.1783 -  <h2 class=no-num id=changes>Appendix C: Changes</h2>
    41.1 --- a/css3-text-decor/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    41.2 +++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
    41.3 @@ -1,1228 +0,0 @@
    41.4 -<!DOCTYPE html>
    41.5 -<html lang="en">
    41.6 -<head>
    41.7 -  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    41.8 -  <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title>
    41.9 -  <link rel=contents href="#contents">
   41.10 -  <link rel=index href="#index">
   41.11 -  <link rel="stylesheet" type="text/css" href="../default.css">
   41.12 -  <link rel="stylesheet" type="text/css"
   41.13 -        href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
   41.14 -
   41.15 -</head>
   41.16 -
   41.17 -<div class="head">
   41.18 -<!--logo-->
   41.19 -
   41.20 -<h1>CSS Text Decoration Module Level 3</h1>
   41.21 -
   41.22 -<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
   41.23 -<dl>
   41.24 -  <dt>This version:</dt>
   41.25 -  <!--
   41.26 -    <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a>
   41.27 -  -->
   41.28 -    <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/</a></dd>
   41.29 -
   41.30 -  <dt>Latest version:</dt>
   41.31 -    <dd><a href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a></dd>
   41.32 -  <dt>Latest editor's draft:</dt>
   41.33 -    <dd><a href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a></dd>
   41.34 -  <dt>Previous version:</dt>
   41.35 -    <dd><a
   41.36 -      href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a>
   41.37 -
   41.38 -  <dt>Issues List:</dt>
   41.39 -    <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>
   41.40 -
   41.41 -  <dt>Discussion:</dt>
   41.42 -    <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
   41.43 -
   41.44 -  <dt>Editors:</dt>
   41.45 -    <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd>
   41.46 -    <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd>
   41.47 -</dl>
   41.48 -
   41.49 -<!--copyright-->
   41.50 -
   41.51 -<hr title="Separator for header">
   41.52 -</div>
   41.53 -
   41.54 -<h2 class="no-num no-toc" id="abstract">Abstract</h2>
   41.55 -
   41.56 -  <p>This module contains the features of CSS relating to
   41.57 -  text decoration, such as underlines, text shadows, and emphasis marks.
   41.58 -  <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing
   41.59 -  the rendering of structured documents (such as HTML and XML) on screen, on
   41.60 -  paper, in speech, etc.
   41.61 -
   41.62 -<h2 class="no-num no-toc" id="status">Status of this document</h2>
   41.63 -
   41.64 -
   41.65 -  <p><em>This section describes the status of this document at the time of
   41.66 -   its publication. Other documents may supersede this document. A list of
   41.67 -   current W3C publications and the latest revision of this technical report
   41.68 -   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   41.69 -   index at http://www.w3.org/TR/.</a></em>
   41.70 -
   41.71 -  <p>Publication as a Working Draft does not imply endorsement by the W3C
   41.72 -   Membership. This is a draft document and may be updated, replaced or
   41.73 -   obsoleted by other documents at any time. It is inappropriate to cite this
   41.74 -   document as other than work in progress.
   41.75 -
   41.76 -  <p>This CSS module has been produced as a combined effort of the <a
   41.77 -    href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>,
   41.78 -    and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained
   41.79 -    by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also
   41.80 -    includes contributions made by participants in the <a
   41.81 -    href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a
   41.82 -    href="http://cgi.w3.org/MemberAccess/AccessRequest">members
   41.83 -    only</a>).
   41.84 -
   41.85 -  <p>This document was produced by a group operating under the <a
   41.86 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   41.87 -   2004 W3C Patent Policy</a>. W3C maintains a <a
   41.88 -   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   41.89 -   rel=disclosure>public list of any patent disclosures</a> made in
   41.90 -   connection with the deliverables of the group; that page also includes
   41.91 -   instructions for disclosing a patent. An individual who has actual
   41.92 -   knowledge of a patent which the individual believes contains <a
   41.93 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   41.94 -   Claim(s)</a> must disclose the information in accordance with <a
   41.95 -   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   41.96 -   6 of the W3C Patent Policy</a>.</p>
   41.97 -
   41.98 -  <p><strong>Feedback on this draft should be posted to the
   41.99 -    (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
  41.100 -    public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong>
  41.101 -    (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
  41.102 -    <kbd>[css3-text-decor]</kbd> in the subject line.</strong>
  41.103 -    You are strongly encouraged to complain if you see something stupid
  41.104 -    in this draft. The editors will do their best to respond to all feedback.</p>
  41.105 -
  41.106 -  <p>The following features are at risk and may be cut from the spec during
  41.107 -    its CR period if there are no (correct) implementations:</p>
  41.108 -    
  41.109 -  <p>The following features are at risk and may be cut from the spec during
  41.110 -    its CR period if there are no (correct) implementations:</p>
  41.111 -    <ul>
  41.112 -      <li>the 'text-decoration-skip' property / ''ink'' value
  41.113 -    </ul>
  41.114 -
  41.115 -<h2 class="no-num no-toc" id="contents">
  41.116 -Table of Contents</h2>
  41.117 -
  41.118 -<!--toc-->
  41.119 -
  41.120 -<h2 id="intro">
  41.121 -Introduction</h2>
  41.122 -
  41.123 -  <p>[document here]</p>
  41.124 -
  41.125 -  <p class="issue">This draft describes features that are specific to certain scripts.
  41.126 -  There is an ongoing discussion about where these features belong: in
  41.127 -  existing CSS properties, in new CSS properties, or perhaps in other
  41.128 -  specifications.
  41.129 -
  41.130 -
  41.131 -<h3 id="placement">
  41.132 -Module Interactions</h3>
  41.133 -
  41.134 -  <p>This module replaces and extends the text-level
  41.135 -  features defined in [[!CSS21]] chapter 16.
  41.136 -
  41.137 -<h3 id="values">
  41.138 -Values</h3>
  41.139 -
  41.140 -  <p>This specification follows the
  41.141 -  <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
  41.142 -  definition conventions</a> from [[!CSS21]]. Value types not defined in
  41.143 -  this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
  41.144 -  Other CSS modules may expand the definitions of these value types: for
  41.145 -  example [[CSS3COLOR]], when combined with this module, expands the
  41.146 -  definition of the &lt;color&gt; value type as used in this specification.</p>
  41.147 -
  41.148 -  <p>In addition to the property-specific values listed in their definitions,
  41.149 -  all properties defined in this specification also accept the
  41.150 -  <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
  41.151 -  keyword as their property value. For readability it has not been repeated
  41.152 -  explicitly.
  41.153 -
  41.154 -  <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is
  41.155 -  resolved to the value of 'color' after inheritance is performed. This is
  41.156 -  so that the 'text-emphasis-color' by default matches the text 'color'.
  41.157 -  <span class="issue">CSS3 Color has not yet been errata'd to define it this way;
  41.158 -  currentcolor there is defined to compute to the value of 'color',
  41.159 -  which gives it the wrong inheritance behavior.</span>
  41.160 -
  41.161 -<h3 id="terms">Terminology</h3>
  41.162 -
  41.163 -  <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>,
  41.164 -    <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and
  41.165 -    <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a>
  41.166 -    as used in this specification are defined in [[!CSS3TEXT]].
  41.167 -    Other terminology and concepts used in this specification are defined
  41.168 -    in [[!CSS21]] and [[!CSS3-WRITING-MODES]].
  41.169 -
  41.170 -<h2 id="line-decoration">
  41.171 -Line Decoration: Underline, Overline, and Strike-Through</h2>
  41.172 -
  41.173 -  <p>The following properties describe line decorations that are added
  41.174 -    to the content of an element. When specified on or propagated to
  41.175 -    an inline box, such decoration affects all the boxes generated
  41.176 -    by that element, and is further propagated to any in-flow block-level
  41.177 -    boxes that split the inline
  41.178 -    (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>)
  41.179 -    When specified on or propagated to a ruby box, the decorations are
  41.180 -    further propagated only to the ruby base.
  41.181 -    When specified on or propagated to a a block container that establishes
  41.182 -    an inline formatting context, the decorations are propagated to an
  41.183 -    anonymous inline element that wraps all the in-flow inline-level children
  41.184 -    of the block container. For all other elements, the decorations are
  41.185 -    propagated to any in-flow children.
  41.186 -
  41.187 -  <p class="note">Note that text decorations are not propagated to any
  41.188 -    out-of-flow descendants, nor to the contents of atomic inline-level
  41.189 -    descendants such as inline blocks and inline tables.
  41.190 -
  41.191 -  <p>By default underlines, overlines, and line-throughs are applied only
  41.192 -    to text (including white space, letter spacing, and word spacing):
  41.193 -    margins, borders, and padding are skipped. Elements containing
  41.194 -    no text, such as images, are likewise not decorated.
  41.195 -    The 'text-decoration-skip'
  41.196 -    property can be used to modify this behavior, for example allowing
  41.197 -    inline replaced elements to be underlined or requiring that white
  41.198 -    space be skipped.
  41.199 -
  41.200 -  <p>In determining the position and thickness of text decoration lines,
  41.201 -    user agents may consider the font sizes and dominant baselines of
  41.202 -    descendants, but for a given element's decoration must use the same
  41.203 -    position and thickness throughout each line box. The
  41.204 -    <a href="#text-decoration-color">color</a> and
  41.205 -    <a href="#text-decoration-style">line style</a> of decorations must
  41.206 -    remain the same on all decorations applied by a given element, even
  41.207 -    if descendant elements have different color or line style values.</p>
  41.208 -
  41.209 -  <div class="example">
  41.210 -    <p>The following figure shows the averaging for underline:
  41.211 -    <p><img alt="In the first rendering of the underlined text '1st a'
  41.212 -                 with 'st' as a superscript, both the '1st' and the 'a'
  41.213 -                 are rendered in a small font. In the second rendering,
  41.214 -                 the 'a' is rendered in a larger font. In the third, both
  41.215 -                 '1st' and 'a' are large."
  41.216 -            height="105" src="underline-averaging.gif" width="326">
  41.217 -    <p>In the three fragments of underlined text, the underline is drawn
  41.218 -      consecutively lower and thicker as the ratio of large text to small
  41.219 -      text increases.</p>
  41.220 -  </div>
  41.221 -
  41.222 -  <p>Relatively positioning a descendant moves all text decorations
  41.223 -    affecting it along with the descendant's text; it does not affect
  41.224 -    calculation of the decoration's initial position on that line.
  41.225 -    The 'visibility' property, filters, and other graphical transformations
  41.226 -    likewise affect text decorations as part of the text they're drawn on,
  41.227 -    even if the decorations were specified on an ancestor element.
  41.228 -    <span class="issue">Does this include 'text-shadow'? What about text-fill etc.?</span>
  41.229 -
  41.230 -  <div class="example">
  41.231 -    <p>In the following style sheet and document fragment:</p>
  41.232 -    <pre><code class="css">
  41.233 -<!-- -->   blockquote { text-decoration: underline; color: blue; }
  41.234 -<!-- -->   em { display: block; }
  41.235 -<!-- -->   cite { color: fuchsia; }
  41.236 -<!----></code></pre>
  41.237 -    <pre class="html"><code>
  41.238 -<!-- -->   &lt;blockquote&gt;
  41.239 -<!-- -->    &lt;p&gt;
  41.240 -<!-- -->     &lt;span&gt;
  41.241 -<!-- -->      Help, help!
  41.242 -<!-- -->      &lt;em&gt; I am under a hat! &lt;/em&gt;
  41.243 -<!-- -->
  41.244 -<!-- -->      &lt;cite&gt; &mdash;GwieF &lt;/cite&gt;
  41.245 -<!-- -->     &lt;/span&gt;
  41.246 -<!-- -->    &lt;/p&gt;
  41.247 -<!-- -->   &lt;/blockquote&gt;
  41.248 -<!----></code></pre>
  41.249 -    <p>...the underlining for the blockquote element is propagated to an
  41.250 -    anonymous inline element that surrounds the span element, causing
  41.251 -    the text "Help, help!" to be blue, with the blue underlining from
  41.252 -    the anonymous inline underneath it, the color being taken from the
  41.253 -    blockquote element. The <code>&lt;em&gt;text&lt;/em&gt;</code>
  41.254 -    in the em block is also underlined, as it is in an in-flow block to
  41.255 -    which the underline is propagated. The final line of text is fuchsia,
  41.256 -    but the underline underneath it is still the blue underline from the
  41.257 -    anonymous inline element.</p>
  41.258 -    <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p>
  41.259 -    <p>This diagram shows the boxes involved in the example above. The
  41.260 -    rounded aqua line represents the anonymous inline element wrapping
  41.261 -    the inline contents of the paragraph element, the rounded blue line
  41.262 -    represents the span element, and the orange lines represent the
  41.263 -    blocks.</p>
  41.264 -  </div>
  41.265 -
  41.266 -<h3 id="text-decoration-line-property">
  41.267 -Text Decoration Lines: the 'text-decoration-line' property</h3>
  41.268 -
  41.269 -  <table class="propdef">
  41.270 -    <tr>
  41.271 -      <th>Name:
  41.272 -      <td><dfn>text-decoration-line</dfn>
  41.273 -    <tr>
  41.274 -      <th><a href="#values">Value</a>:
  41.275 -      <td>none | [ underline || overline || line-through ]
  41.276 -
  41.277 -    <tr>
  41.278 -      <th>Initial:
  41.279 -      <td>none
  41.280 -    <tr>
  41.281 -      <th>Applies to:
  41.282 -      <td>all elements
  41.283 -    <tr>
  41.284 -      <th>Inherited:
  41.285 -      <td>no (but see prose)
  41.286 -    <tr>
  41.287 -      <th>Percentages:
  41.288 -      <td>N/A
  41.289 -    <tr>
  41.290 -      <th>Media:
  41.291 -      <td>visual
  41.292 -    <tr>
  41.293 -      <th>Computed&#160;value:
  41.294 -      <td>as specified
  41.295 -  </table>
  41.296 -
  41.297 -  <p>Specifies what line decorations, if any, are added to the element.
  41.298 -    Values have the following meanings:</p>
  41.299 -
  41.300 -  <dl>
  41.301 -    <dt><dfn title="text-decoration-line:none">''none''</dfn>
  41.302 -      <dd>Neither produces nor inhibits text decoration.
  41.303 -    <dt><dfn>''underline''</dfn>
  41.304 -      <dd>Each line of text is underlined.
  41.305 -    <dt><dfn>''overline''</dfn>
  41.306 -      <dd>Each line of text has a line above it (i.e. on the opposite
  41.307 -      side from an underline).
  41.308 -    <dt><dfn>''line-through''</dfn>
  41.309 -      <dd>Each line of text has a line through the middle.
  41.310 -  </dl>
  41.311 -
  41.312 -<h3 id="text-decoration-color-property">
  41.313 -Text Decoration Color: the 'text-decoration-color' property</h3>
  41.314 -
  41.315 -  <table class="propdef">
  41.316 -    <tr>
  41.317 -      <th>Name:
  41.318 -      <td><dfn>text-decoration-color</dfn>
  41.319 -    <tr>
  41.320 -      <th><a href="#values">Value</a>:
  41.321 -      <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color">&lt;color&gt;</span></a>
  41.322 -
  41.323 -    <tr>
  41.324 -      <th>Initial:
  41.325 -      <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
  41.326 -    <tr>
  41.327 -      <th>Applies to:
  41.328 -      <td>all elements
  41.329 -    <tr>
  41.330 -      <th>Inherited:
  41.331 -      <td>no
  41.332 -    <tr>
  41.333 -      <th>Percentages:
  41.334 -      <td>N/A
  41.335 -    <tr>
  41.336 -      <th>Media:
  41.337 -      <td>visual
  41.338 -    <tr>
  41.339 -      <th>Computed&#160;value:
  41.340 -      <td>the computed color
  41.341 -  </table>
  41.342 -
  41.343 -  <p>This property specifies the color of text decoration (underlines
  41.344 -    overlines, and line-throughs) set on the element with
  41.345 -    'text-decoration-line'.</p>
  41.346 -
  41.347 -<h3 id="text-decoration-style-property">
  41.348 -Text Decoration Style: the 'text-decoration-style' property</h3>
  41.349 -
  41.350 -  <table class="propdef">
  41.351 -    <tr>
  41.352 -      <th>Name:
  41.353 -      <td><dfn>text-decoration-style</dfn>
  41.354 -    <tr>
  41.355 -      <th><a href="#values">Value</a>:
  41.356 -      <td>solid | double | dotted | dashed | wavy
  41.357 -
  41.358 -    <tr>
  41.359 -      <th>Initial:
  41.360 -      <td>solid
  41.361 -    <tr>
  41.362 -      <th>Applies to:
  41.363 -      <td>all elements
  41.364 -    <tr>
  41.365 -      <th>Inherited:
  41.366 -      <td>no
  41.367 -    <tr>
  41.368 -      <th>Percentages:
  41.369 -      <td>N/A
  41.370 -    <tr>
  41.371 -      <th>Media:
  41.372 -      <td>visual
  41.373 -    <tr>
  41.374 -      <th>Computed&#160;value:
  41.375 -      <td>as specified
  41.376 -  </table>
  41.377 -
  41.378 -  <p>This property specifies the style of the line(s) drawn for
  41.379 -    text decoration specified on the element. Values have the
  41.380 -    same meaning as for the
  41.381 -    <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
  41.382 -    properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p>
  41.383 -
  41.384 -<h3 id="text-decoration-property">
  41.385 -Text Decoration Shorthand: the 'text-decoration' property</h3>
  41.386 -
  41.387 -  <table class="propdef">
  41.388 -    <tr>
  41.389 -      <th>Name:
  41.390 -      <td><dfn>text-decoration</dfn>
  41.391 -    <tr>
  41.392 -      <th><a href="#values">Value</a>:
  41.393 -      <td><var><a href="#text-decoration-line">&lt;text-decoration-line&gt;</a></var> ||
  41.394 -          <var><a href="#text-decoration-style">&lt;text-decoration-style&gt;</a></var> ||
  41.395 -          <var><a href="#text-decoration-color">&lt;text-decoration-color&gt;</a></var> || blink
  41.396 -
  41.397 -    <tr>
  41.398 -      <th>Initial:
  41.399 -      <td>none
  41.400 -    <tr>
  41.401 -      <th>Applies to:
  41.402 -      <td>all elements
  41.403 -    <tr>
  41.404 -      <th>Inherited:
  41.405 -      <td>no
  41.406 -    <tr>
  41.407 -      <th>Percentages:
  41.408 -      <td>N/A
  41.409 -    <tr>
  41.410 -      <th>Media:
  41.411 -      <td>visual
  41.412 -    <tr>
  41.413 -      <th>Computed&#160;value:
  41.414 -      <td>as specified
  41.415 -  </table>
  41.416 -
  41.417 -  <p>This property is a shorthand for setting 'text-decoration-line',
  41.418 -    'text-decoration-color', and 'text-decoration-style' in one declaration.
  41.419 -    Omitted values are set to their initial values. A 'text-decoration'
  41.420 -    declaration that omits both the 'text-decoration-color'
  41.421 -    and 'text-decoration-style' values is backwards-compatible
  41.422 -    with CSS Levels 1 and 2.</p>
  41.423 -
  41.424 -  <p>If the ''blink'' keyword is specified the text blinks
  41.425 -    (alternates between visible and invisible). Conforming user agents
  41.426 -    may simply not blink the text. Note that not blinking the text is
  41.427 -    one technique to satisfy
  41.428 -    <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</p>
  41.429 -
  41.430 -  <div class="example">
  41.431 -    <p>The following example underlines unvisited links with a solid blue
  41.432 -    underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p>
  41.433 -
  41.434 -    <pre><code class="css">
  41.435 -<!-- -->:link {
  41.436 -<!-- -->    color: blue;
  41.437 -<!-- -->    text-decoration: underline;
  41.438 -<!-- -->    text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
  41.439 -<!-- -->}</code></pre>
  41.440 -  </div>
  41.441 -
  41.442 -<h3 id="text-decoration-skip-property">
  41.443 -Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>
  41.444 -
  41.445 -  <table class="propdef">
  41.446 -    <tr>
  41.447 -      <th>Name:
  41.448 -      <td><dfn>text-decoration-skip</dfn>
  41.449 -    <tr>
  41.450 -      <th><a href="#values">Value</a>:
  41.451 -      <td>none | [ objects || spaces || ink || edges ]
  41.452 -
  41.453 -    <tr>
  41.454 -      <th>Initial:
  41.455 -      <td>objects
  41.456 -    <tr>
  41.457 -      <th>Applies to:
  41.458 -      <td>all elements
  41.459 -    <tr>
  41.460 -      <th>Inherited:
  41.461 -      <td>yes
  41.462 -    <tr>
  41.463 -      <th>Percentages:
  41.464 -      <td>N/A
  41.465 -    <tr>
  41.466 -      <th>Media:
  41.467 -      <td>visual
  41.468 -    <tr>
  41.469 -      <th>Computed&#160;value:
  41.470 -      <td>as specified
  41.471 -  </table>
  41.472 -
  41.473 -  <p>This property specifies what parts of the element's content
  41.474 -    any text decoration affecting the element must skip over. It
  41.475 -    controls all text decoration lines drawn by the element
  41.476 -    and also any text decoration lines drawn by its ancestors.
  41.477 -    Values have the following meanings:</p>
  41.478 -
  41.479 -  <dl>
  41.480 -    <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt>
  41.481 -    <dd>Skip nothing: text-decoration is drawn for all text content
  41.482 -      and for inline replaced elements.</dd>
  41.483 -    <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt>
  41.484 -    <dd>Skip this element if it is an atomic inline (such as an
  41.485 -      image or inline-block).</dd>
  41.486 -    <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt>
  41.487 -    <dd>Skip white space: this includes regular spaces (U+0020) and
  41.488 -      tabs (U+0009), as well as nbsp (U+00A0), ideographic space
  41.489 -      (U+3000), all fixed width spaces (such as U+2000&ndash;U+200A,
  41.490 -      U+202F and U+205F), and any adjacent letter-spacing or
  41.491 -      word-spacing.</dd>
  41.492 -    <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt>
  41.493 -    <dd>Skip over where glyphs are drawn: interrupt the decoration
  41.494 -      line to let text show through where the text decoration would
  41.495 -      otherwise cross over a glyph. The UA may also skip a small
  41.496 -      distance to either side of the glyph outline.</dd>
  41.497 -    <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt>
  41.498 -    <dd>The UA should place the start and end of the line inwards from
  41.499 -      the content edge of the decorating element so that, e.g. two
  41.500 -      underlined elements side-by-side do not appear to have a single
  41.501 -      underline. (This is important in Chinese, where underlining is a
  41.502 -      form of punctuation.)</dd>
  41.503 -  </dl>
  41.504 -
  41.505 -  <p class="issue">Do we need a value that <em>doesn't</em> skip
  41.506 -    margins and padding?</p>
  41.507 -
  41.508 -  <p class="note">Note that this property inherits and that descendant
  41.509 -    elements can have a different setting.</p>
  41.510 -
  41.511 -<h4 id="text-underline-position-property">
  41.512 -Text Underline Position: the 'text-underline-position' property</h4>
  41.513 -
  41.514 -  <table class="propdef">
  41.515 -    <tr>
  41.516 -      <th>Name:
  41.517 -      <td><dfn>text-underline-position</dfn>
  41.518 -    <tr>
  41.519 -      <th><a href="#values">Value</a>:
  41.520 -      <td>auto | alphabetic | [ below || [ left | right ] ]
  41.521 -
  41.522 -    <tr>
  41.523 -      <th>Initial:
  41.524 -      <td>auto
  41.525 -    <tr>
  41.526 -      <th>Applies to:
  41.527 -      <td>all elements
  41.528 -    <tr>
  41.529 -      <th>Inherited:
  41.530 -      <td>yes
  41.531 -    <tr>
  41.532 -      <th>Percentages:
  41.533 -      <td>N/A
  41.534 -    <tr>
  41.535 -      <th>Media:
  41.536 -      <td>visual
  41.537 -    <tr>
  41.538 -      <th>Computed&#160;value:
  41.539 -      <td>as specified
  41.540 -  </table>
  41.541 -
  41.542 -  <p>This property sets the position of an underline specified
  41.543 -    on the same element: it does not affect underlines specified by
  41.544 -    ancestor elements. Values have the following meanings:</p>
  41.545 -
  41.546 -  <dl>
  41.547 -    <dt><dfn>''auto''</dfn></dt>
  41.548 -    <dd>The user agent may use any algorithm to determine the
  41.549 -      underline's position; however it must be placed at or below
  41.550 -      the alphabetic baseline.
  41.551 -      <p class="note">It is suggested that the underline position
  41.552 -      be ''alphabetic'' unless it crosses either subscripted (or
  41.553 -      otherwise lowered) text, or it affects characters from Asian
  41.554 -      scripts such as Han or Tibetan, for which an alphabetic
  41.555 -      underline is too high: in such cases, aligning to the em box
  41.556 -      edge as described for ''below left'' is more appropriate.
  41.557 -    <dt><dfn>''alphabetic''</dfn></dt>
  41.558 -    <dd>The underline is positioned relative to the alphabetic baseline. In
  41.559 -      this case the underline is likely to cross some descenders.
  41.560 -      <div class="figure">
  41.561 -        <p><img title="text-underline-position: alphabetic"
  41.562 -            alt="In a typical Latin font, the underline is positioned slightly
  41.563 -                 below the alphabetic baseline, leaving a gap between the line
  41.564 -                 and the bottom of most Latin letters, but crossing through
  41.565 -                 descenders such as the stem of a 'p'."
  41.566 -            src="underline-position-alphabetic.png"
  41.567 -            >
  41.568 -        <p class="caption">''text-underline-position: alphabetic''</p>
  41.569 -      </div>
  41.570 -    <dt><dfn>''below''</dfn></dt>
  41.571 -    <dd>In horizontal writing modes, the underline is positioned
  41.572 -      relative to the under edge of the element's content box.
  41.573 -      In this case the underline usually does not cross the descenders.
  41.574 -      (This is sometimes called "accounting" underline.)
  41.575 -      If the underline affects descendants with a lower content edge,
  41.576 -      the user agent should shift the underline down further to the
  41.577 -      lowest underlined content box edge.
  41.578 -      The user agent may ignore elements with ''vertical-align''
  41.579 -      values given as lengths, percentages, ''top'', or ''bottom''
  41.580 -      when making this adjustment.
  41.581 -      (Note that images that are not affected by the underline per
  41.582 -      'text-decoration-skip' will not affect the position of the
  41.583 -      underline.)
  41.584 -      <div class="figure">
  41.585 -        <p><img title="text-underline-position: below"
  41.586 -            alt="In a typical Latin font, the underline is far enough
  41.587 -                 below the text that it does not cross the bottom of a 'g'."
  41.588 -            src="underline-position-below.png"
  41.589 -            >
  41.590 -        <p class="caption">''text-underline-position: below''</p>
  41.591 -      </div>
  41.592 -      <div class="example">
  41.593 -        <p>Because 'text-underline-position' inherits, and is not reset
  41.594 -          by the 'text-decoration' shorthand, the following example
  41.595 -          switches the document to use ''below'' underlining, which can
  41.596 -          be more appropriate for writing systems  with long, complicated
  41.597 -          descenders. It is also often useful for mathematical or chemical
  41.598 -          texts that use many subscripts.
  41.599 -        <pre>:root { text-underline-position: below; }</pre>
  41.600 -      </div>
  41.601 -    <dt><dfn>''left''</dfn></dt>
  41.602 -    <dd>In vertical writing modes, the underline is aligned as for
  41.603 -      ''below'', on the left edge of the text.</dd>
  41.604 -    <dt><dfn>''right''</dfn></dt>
  41.605 -    <dd>In vertical writing modes, the underline is aligned as for
  41.606 -      ''below'', except it is aligned to the right edge of the text.
  41.607 -      If this causes the underline to be drawn on the "over" side of
  41.608 -      the text, then an overline also switches sides and is drawn on
  41.609 -      the "under" side.</dd>
  41.610 -  </dl>
  41.611 -
  41.612 -  <p>If ''below'' is specified alone, ''left'' is also implied.
  41.613 -    If ''left'' or ''right'' is specified alone, ''below'' is also
  41.614 -    implied.
  41.615 -
  41.616 -  <p class="issue">
  41.617 -  Should ''above''/''below'' be ''over''/''under'' to match text decoration names?
  41.618 -
  41.619 -  <div class="figure" id="fig-text-underline-position">
  41.620 -    <table>
  41.621 -      <tr>
  41.622 -        <td>
  41.623 -          <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'
  41.624 -                    places the underline on the left side of the text."
  41.625 -            title="text-underline-position: left"
  41.626 -            src="underline-position-left.png"
  41.627 -            >
  41.628 -
  41.629 -        <td>
  41.630 -          <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'
  41.631 -                    places the underline on the right side of the text."
  41.632 -            title="text-underline-position: right"
  41.633 -            src="underline-position-right.png"
  41.634 -            >
  41.635 -
  41.636 -      <tr>
  41.637 -        <td>''left''
  41.638 -        <td>''right''
  41.639 -    </table>
  41.640 -    <p class="caption">In vertical writing modes, the 'text-underline-position'
  41.641 -      values ''left'' and ''right'' allow placing the underline on either
  41.642 -      side of the text. (In horizontal writing modes, both values are
  41.643 -      treated as ''below''.)</p>
  41.644 -  </div>
  41.645 -
  41.646 -  <div class="example">
  41.647 -    <p>The following example styles modern Chinese, Japanese, and Korean
  41.648 -      texts with the appropriate underline positions in both horizontal
  41.649 -      and vertical text:
  41.650 -    <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; }
  41.651 -<!--   -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre>
  41.652 -  </div>
  41.653 -
  41.654 -  <div class="note">
  41.655 -    <p>In some cases (such as in OpenType) the font format can offer
  41.656 -      information about the appropriate position of an underline.
  41.657 -      Typically this information gives the position of an ''alphabetic''
  41.658 -      underline; in some cases (especially in CJK fonts), it gives
  41.659 -      the position of a ''below left'' underline. (In this case,
  41.660 -      the font's underline metrics typically touch the bottom edge
  41.661 -      of the em box).
  41.662 -      The UA is encouraged to use information (such as the underline
  41.663 -      thickness, or appropriate alphabetic alignment) from the font
  41.664 -      wherever appropriate.
  41.665 -    </p>
  41.666 -  </div>
  41.667 -
  41.668 -<h3 id="emphasis-marks">
  41.669 -Emphasis Marks</h3>
  41.670 -
  41.671 -  <p>East Asian documents traditionally use small symbols next to each glyph to emphasize
  41.672 -    a run of text. For example:</p>
  41.673 -
  41.674 -  <div class="figure">
  41.675 -    <p>
  41.676 -      <img alt="Example of emphasis in Japanese appearing above the text"
  41.677 -           class="example" src="text-emphasis-ja.gif" height="28" width="225"></p>
  41.678 -    <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p>
  41.679 -  </div>
  41.680 -
  41.681 -<h4 id="text-emphasis-style-property">
  41.682 -Emphasis Mark Style: the 'text-emphasis-style' property</h4>
  41.683 -
  41.684 -  <table class="propdef">
  41.685 -    <tr>
  41.686 -      <th>Name:
  41.687 -      <td><dfn>text-emphasis-style</dfn>
  41.688 -    <tr>
  41.689 -      <th><a href="#values">Value</a>:
  41.690 -      <td>none |
  41.691 -          [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] |
  41.692 -          <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string">&lt;string&gt;</span></a>
  41.693 -
  41.694 -    <tr>
  41.695 -      <th>Initial:
  41.696 -      <td>none
  41.697 -    <tr>
  41.698 -      <th>Applies to:
  41.699 -      <td>all elements
  41.700 -    <tr>
  41.701 -      <th>Inherited:
  41.702 -      <td>yes
  41.703 -    <tr>
  41.704 -      <th>Percentages:
  41.705 -      <td>N/A
  41.706 -    <tr>
  41.707 -      <th>Media:
  41.708 -      <td>visual
  41.709 -    <tr>
  41.710 -      <th>Computed&#160;value:
  41.711 -      <td>'none', a pair of keywords representing the shape and fill, or
  41.712 -        a string
  41.713 -  </table>
  41.714 -
  41.715 -  <p>This property applies emphasis marks to the element's text.
  41.716 -    Values have the following meanings:</p>
  41.717 -
  41.718 -  <dl>
  41.719 -    <dt><dfn title="text-emphasis:none">''none''</dfn></dt>
  41.720 -      <dd>No emphasis marks.</dd>
  41.721 -    <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt>
  41.722 -      <dd>The shape is filled with solid color.</dd>
  41.723 -    <dt><dfn title="text-emphasis:open">''open''</dfn></dt>
  41.724 -      <dd>The shape is hollow.</dd>
  41.725 -    <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt>
  41.726 -      <dd>Display small circles as marks.
  41.727 -        The filled dot is U+2022 '&#x2022;', and the open dot is U+25E6 '&#x25e6;'.</dd>
  41.728 -    <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt>
  41.729 -      <dd>Display large circles as marks.
  41.730 -        The filled circle is U+25CF '&#x25cf;', and the open circle is U+25CB '&#x25cb;'.</dd>
  41.731 -    <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt>
  41.732 -      <dd>Display double circles as marks.
  41.733 -        The filled double-circle is U+25C9 '&#x25c9;', and the open double-circle is U+25CE '&#x25ce;'.</dd>
  41.734 -    <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt>
  41.735 -      <dd>Display triangles as marks.
  41.736 -        The filled triangle is U+25B2 '&#x25b2;', and the open triangle is U+25B3 '&#x25b3;'.</dd>
  41.737 -    <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt>
  41.738 -      <dd>Display sesames as marks.
  41.739 -        The filled sesame is U+FE45 '&#xfe45;', and the open sesame is U+FE46 '&#xfe46;'.</dd>
  41.740 -    <dt><dfn title="text-emphasis:sesame">''<var>&lt;string&gt;</var>''</dfn></dt>
  41.741 -      <dd>Display the given string as marks.
  41.742 -        Authors should not specify more than one <i>character</i> in &lt;string&gt;.
  41.743 -        The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd>
  41.744 -  </dl>
  41.745 -
  41.746 -  <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is
  41.747 -    specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified,
  41.748 -    the shape keyword computes to ''circle'' in horizontal writing mode and
  41.749 -    ''sesame'' in vertical writing mode.</p>
  41.750 -
  41.751 -  <p>The marks should be drawn using the element's font settings with its
  41.752 -    size scaled down to 50%. However, not all fonts have all these glyphs,
  41.753 -    and some fonts use inappropriate sizes for emphasis marks in these
  41.754 -    code points. The UA may opt to use a font known to be good for
  41.755 -    emphasis marks, or the marks may instead be synthesized by the UA.
  41.756 -    Marks must remain upright in vertical writing modes: like CJK
  41.757 -    characters, they do not rotate to match the writing mode.</p>
  41.758 -
  41.759 -  <p class="note">
  41.760 -      One example of good fonts for emphasis marks is Adobe's opensource project,
  41.761 -      <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>,
  41.762 -      which is specially designed for the emphasis marks.
  41.763 -  </p>
  41.764 -
  41.765 -  <p>The marks are drawn once for each <i>character</i>. However,
  41.766 -    emphasis marks are not drawn for characters that are:</p>
  41.767 -  <ul>
  41.768 -    <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that
  41.769 -      belong to the Unicode separator classes (Z*).
  41.770 -      (But note that emphasis marks <em>are</em> drawn for a space
  41.771 -       that combines with any combining characters.)</li>
  41.772 -    <li>Characters belonging to the Unicode classes for control codes
  41.773 -      and unassigned characters (Cc, Cf, Cn).</li>
  41.774 -  </ul>
  41.775 -
  41.776 -  <p>If emphasis marks are drawn for characters
  41.777 -    for which ruby is drawn in the same position as the emphasis mark,
  41.778 -    the ruby should be stacked between the emphasis marks and the base text.
  41.779 -    In this case, the position of the emphasis marks for a given element
  41.780 -    should be determined as if all characters have ruby boxes
  41.781 -    of the same height as the highest ruby box in the element.
  41.782 -    If the UA is not capable of drawing ruby and emphasis marks on the same side,
  41.783 -    the UA may hide ruby and draw only emphasis marks.</p>
  41.784 -  <div class="figure">
  41.785 -    <p><img
  41.786 -      alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them"
  41.787 -      src="text-emphasis-ruby.png" width="134" height="50"></p>
  41.788 -    <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p>
  41.789 -  </div>
  41.790 -
  41.791 -  <p class="note">A future level of CSS may define controls to specify
  41.792 -    what to do when emphasis marks and ruby text coincide.</p>
  41.793 -
  41.794 -<h4 id="text-emphasis-color-property">
  41.795 -Emphasis Mark Color: the 'text-emphasis-color' property</h4>
  41.796 -
  41.797 -  <table class="propdef">
  41.798 -    <tr>
  41.799 -      <th>Name:
  41.800 -      <td><dfn>text-emphasis-color</dfn>
  41.801 -    <tr>
  41.802 -      <th><a href="#values">Value</a>:
  41.803 -      <td>&lt;color&gt;
  41.804 -    <tr>
  41.805 -      <th>Initial:
  41.806 -      <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
  41.807 -    <tr>
  41.808 -      <th>Applies to:
  41.809 -      <td>all elements
  41.810 -    <tr>
  41.811 -      <th>Inherited:
  41.812 -      <td>yes
  41.813 -    <tr>
  41.814 -      <th>Percentages:
  41.815 -      <td>N/A
  41.816 -    <tr>
  41.817 -      <th>Media:
  41.818 -      <td>visual
  41.819 -    <tr>
  41.820 -      <th>Computed&#160;value:
  41.821 -      <td>as specified
  41.822 -  </table>
  41.823 -
  41.824 -  <p>This property specifies the foreground color of the emphasis marks.</p>
  41.825 -
  41.826 -  <p class="note">
  41.827 -    The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]]
  41.828 -    that has the ''currentColor'' keyword inherit as itself,
  41.829 -    and to take the value of the 'color' property as its <em>used</em> (not computed) value.
  41.830 -
  41.831 -<h4 id="text-emphasis-property">
  41.832 -Emphasis Mark Shorthand: the 'text-emphasis' property</h4>
  41.833 -
  41.834 -  <table class="propdef">
  41.835 -    <tr>
  41.836 -      <th>Name:
  41.837 -      <td><dfn>text-emphasis</dfn>
  41.838 -    <tr>
  41.839 -      <th><a href="#values">Value</a>:
  41.840 -      <td>'&lt;<a href="#text-emphasis-style">text-emphasis-style</a>&gt;' || '&lt;<a href="#text-emphasis-color">text-emphasis-color</a>&gt;'
  41.841 -
  41.842 -    <tr>
  41.843 -      <th>Initial:
  41.844 -      <td>see individual properties
  41.845 -    <tr>
  41.846 -      <th>Applies to:
  41.847 -      <td>all elements
  41.848 -    <tr>
  41.849 -      <th>Inherited:
  41.850 -      <td>yes
  41.851 -    <tr>
  41.852 -      <th>Percentages:
  41.853 -      <td>N/A
  41.854 -    <tr>
  41.855 -      <th>Media:
  41.856 -      <td>visual
  41.857 -    <tr>
  41.858 -      <th>Computed&#160;value:
  41.859 -      <td>see individual properties
  41.860 -  </table>
  41.861 -
  41.862 -  <p>This property is a shorthand for setting
  41.863 -    'text-emphasis-style' and 'text-emphasis-color'
  41.864 -    in one declaration.
  41.865 -    Omitted values are set to their initial values.</p>
  41.866 -
  41.867 -  <p class="note">Note that 'text-emphasis-position' is not reset in this
  41.868 -    shorthand. This is because typically the shape and color vary, but the
  41.869 -    position is consistent for a particular language throughout the document.
  41.870 -    Therefore the position should inherit independently.</p>
  41.871 -
  41.872 -<h4 id="text-emphasis-position-property">
  41.873 -Emphasis Mark Position: the 'text-emphasis-position' property</h4>
  41.874 -
  41.875 -  <table class="propdef">
  41.876 -    <tr>
  41.877 -      <th>Name:
  41.878 -      <td><dfn>text-emphasis-position</dfn>
  41.879 -    <tr>
  41.880 -      <th><a href="#values">Value</a>:
  41.881 -      <td>[ above | below ] && [ right | left ]
  41.882 -
  41.883 -    <tr>
  41.884 -      <th>Initial:
  41.885 -      <td>above right
  41.886 -    <tr>
  41.887 -      <th>Applies to:
  41.888 -      <td>all elements
  41.889 -    <tr>
  41.890 -      <th>Inherited:
  41.891 -      <td>yes
  41.892 -    <tr>
  41.893 -      <th>Percentages:
  41.894 -      <td>N/A
  41.895 -    <tr>
  41.896 -      <th>Media:
  41.897 -      <td>visual
  41.898 -    <tr>
  41.899 -      <th>Computed&#160;value:
  41.900 -      <td>as specified
  41.901 -  </table>
  41.902 -
  41.903 -  <p>This property describes where emphasis marks are drawn at.
  41.904 -    The values have following meanings:</p>
  41.905 -
  41.906 -  <dl>
  41.907 -    <dt><dfn title="text-emphasis:above">''above''</dfn></dt>
  41.908 -      <dd>Draw marks over the text in horizontal writing mode.</dd>
  41.909 -    <dt><dfn title="text-emphasis:below">''below''</dfn></dt>
  41.910 -      <dd>Draw marks under the text in horizontal writing mode.</dd>
  41.911 -    <dt><dfn title="text-emphasis:right">''right''</dfn></dt>
  41.912 -      <dd>Draw marks to the right of the text in vertical writing mode.</dd>
  41.913 -    <dt><dfn title="text-emphasis:left">''left''</dfn></dt>
  41.914 -      <dd>Draw marks to the left of the text in vertical writing mode.</dd>
  41.915 -  </dl>
  41.916 -
  41.917 -  <p class="issue">
  41.918 -    Should ''above''/''below'' be ''over''/''under'' to match text decoration names?
  41.919 -
  41.920 -  <p>Emphasis marks are drawn exactly as if each character was
  41.921 -    assigned the mark as its ruby annotation text with the ruby position
  41.922 -    given by 'text-emphasis-position' and the ruby alignment as centered.
  41.923 -
  41.924 -  <p>The effect of emphasis marks on the line height is the same as for
  41.925 -    ruby text.</p>
  41.926 -
  41.927 -  <div class="note">
  41.928 -    <p>Note, the preferred position of emphasis marks depends on the
  41.929 -      language. In Japanese for example, the preferred position is
  41.930 -      ''above right''. In Chinese, on the other hand, the preferred
  41.931 -      position is ''below right''.
  41.932 -      The informative table below summarizes the preferred
  41.933 -      emphasis mark positions for Chinese and Japanese:</p>
  41.934 -
  41.935 -    <table class="data">
  41.936 -      <caption>Preferred emphasis mark and ruby position</caption>
  41.937 -      <thead>
  41.938 -        <tr>
  41.939 -          <th scope="col" rowspan=2>Language
  41.940 -          <th scope="col" colspan=2>Preferred mark position
  41.941 -          <th scope="col" colspan=2 rowspan=2>Illustration
  41.942 -        <tr>
  41.943 -          <th>Horizontal
  41.944 -          <th>Vertical
  41.945 -      </thead>
  41.946 -      <tbody>
  41.947 -        <tr>
  41.948 -          <td scope="row">Japanese
  41.949 -          <td>above
  41.950 -          <td>right
  41.951 -          <td>
  41.952 -              <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text."
  41.953 -                  title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
  41.954 -                  src="text-emphasis-ja.gif" height="28" width="225">
  41.955 -
  41.956 -          <td rowspan="2">
  41.957 -              <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
  41.958 -                  title="Emphasis applied on the right of a fragment of Japanese text"
  41.959 -                  src="text-emphasis-v.gif" height="89" width="34">
  41.960 -
  41.961 -        <!--
  41.962 -        <tr>
  41.963 -          <td scope="row">Mongolian
  41.964 -          <td><span class="issue">?</span>
  41.965 -          <td>right
  41.966 -        -->
  41.967 -        <tr>
  41.968 -          <td scope="row">Chinese
  41.969 -          <td>below
  41.970 -          <td>right
  41.971 -          <td>
  41.972 -            <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
  41.973 -                  title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
  41.974 -                  src="text-emphasis-zh.gif" height="28" width="133">
  41.975 -      </tbody>
  41.976 -    </table>
  41.977 -  </div>
  41.978 -
  41.979 -<h3 id="text-shadow-property">
  41.980 -Text Shadows: the 'text-shadow' property</h3>
  41.981 -
  41.982 -  <table class="propdef">
  41.983 -    <tr>
  41.984 -      <th>Name:
  41.985 -      <td><dfn>text-shadow</dfn>
  41.986 -    <tr>
  41.987 -      <th><a href="#values">Value</a>:
  41.988 -      <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
  41.989 -    <tr>
  41.990 -      <th>Initial:
  41.991 -      <td>none
  41.992 -    <tr>
  41.993 -      <th>Applies to:
  41.994 -      <td>all elements
  41.995 -    <tr>
  41.996 -      <th>Inherited:
  41.997 -      <td>yes
  41.998 -    <tr>
  41.999 -      <th>Percentages:
 41.1000 -      <td>N/A
 41.1001 -    <tr>
 41.1002 -      <th>Media:
 41.1003 -      <td>visual
 41.1004 -    <tr>
 41.1005 -      <th>Computed&#160;value:
 41.1006 -      <td>a color plus three absolute &lt;length&gt;s
 41.1007 -  </table>
 41.1008 -
 41.1009 -  <p>This property accepts a comma-separated list of shadow effects to
 41.1010 -    be applied to the text of the element. Values are interpreted as for
 41.1011 -    <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a>
 41.1012 -    [[!CSS3BG]]. (But note that spread values are not allowed.)
 41.1013 -    The shadow is applied to all of the element's text as well as any
 41.1014 -    text decorations it specifies.
 41.1015 -
 41.1016 -  <p>The shadow effects are applied front-to-back: the first shadow is on
 41.1017 -    top. The shadows may thus overlay each other, but they never overlay
 41.1018 -    the text itself. The shadow must be painted at a stack level between
 41.1019 -    the element's border and/or background, if present, and the elements
 41.1020 -    text and text decoration. UAs should avoid painting text shadows over
 41.1021 -    text in adjacent elements belonging to the same stack level and stacking
 41.1022 -    context. (This may mean that the exact stack level of the shadows depends
 41.1023 -    on whether the element has a border or background: the exact stacking
 41.1024 -    behavior of text shadows is thus UA-defined.)</p>
 41.1025 -
 41.1026 -  <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed
 41.1027 -    shape and may show through if the text is partially-transparent.
 41.1028 -    Like 'box-shadow', text shadows do not influence layout, and do not
 41.1029 -    trigger scrolling or increase the size of the scrollable area.
 41.1030 -
 41.1031 -  <p class="note">The painting order of shadows defined here is the opposite
 41.1032 -    of that defined in the 1998
 41.1033 -    <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p>
 41.1034 -
 41.1035 -  <p>The ''text-shadow'' property applies to both the
 41.1036 -    <code>::first-line</code> and <code>::first-letter</code>
 41.1037 -    pseudo-elements.</p>
 41.1038 -
 41.1039 -<h2 id="conformance">
 41.1040 -Conformance</h2>
 41.1041 -
 41.1042 -<h3 id="conventions">
 41.1043 -Document Conventions</h3>
 41.1044 -
 41.1045 -  <p>Conformance requirements are expressed with a combination of
 41.1046 -  descriptive assertions and RFC 2119 terminology. The key words “MUST”,
 41.1047 -  “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
 41.1048 -  “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
 41.1049 -  document are to be interpreted as described in RFC 2119.
 41.1050 -  However, for readability, these words do not appear in all uppercase
 41.1051 -  letters in this specification.
 41.1052 -
 41.1053 -  <p>All of the text of this specification is normative except sections
 41.1054 -  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
 41.1055 -
 41.1056 -  <p>Examples in this specification are introduced with the words “for example”
 41.1057 -  or are set apart from the normative text with <code>class="example"</code>,
 41.1058 -  like this:
 41.1059 -
 41.1060 -  <div class="example">
 41.1061 -    <p>This is an example of an informative example.</p>
 41.1062 -  </div>
 41.1063 -
 41.1064 -  <p>Informative notes begin with the word “Note” and are set apart from the
 41.1065 -  normative text with <code>class="note"</code>, like this:
 41.1066 -
 41.1067 -  <p class="note">Note, this is an informative note.</p>
 41.1068 -
 41.1069 -<h3 id="conformance-classes">
 41.1070 -Conformance Classes</h3>
 41.1071 -
 41.1072 -  <p>Conformance to CSS Text Level 3
 41.1073 -  is defined for three conformance classes:
 41.1074 -  <dl>
 41.1075 -    <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
 41.1076 -      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
 41.1077 -      style sheet</a>.
 41.1078 -    <dt><dfn>renderer</dfn></dt>
 41.1079 -      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
 41.1080 -      that interprets the semantics of a style sheet and renders
 41.1081 -      documents that use them.
 41.1082 -    <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
 41.1083 -      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
 41.1084 -      that writes a style sheet.
 41.1085 -  </dl>
 41.1086 -
 41.1087 -  <p>A style sheet is conformant to CSS Text Level 3
 41.1088 -  if all of its declarations that use properties defined in this module
 41.1089 -  have values that are valid according to the generic CSS grammar and the
 41.1090 -  individual grammars of each property as given in this module.
 41.1091 -
 41.1092 -  <p>A renderer is conformant to CSS Text Level 3
 41.1093 -  if, in addition to interpreting the style sheet as defined by the
 41.1094 -  appropriate specifications, it supports all the features defined
 41.1095 -  by CSS Text Level 3 by parsing them correctly
 41.1096 -  and rendering the document accordingly. However, the inability of a
 41.1097 -  UA to correctly render a document due to limitations of the device
 41.1098 -  does not make the UA non-conformant. (For example, a UA is not
 41.1099 -  required to render color on a monochrome monitor.)
 41.1100 -
 41.1101 -  <p>An authoring tool is conformant to CSS Text Level 3
 41.1102 -  if it writes style sheets that are syntactically correct according to the
 41.1103 -  generic CSS grammar and the individual grammars of each feature in
 41.1104 -  this module, and meet all other conformance requirements of style sheets
 41.1105 -  as described in this module.
 41.1106 -
 41.1107 -<h3 id="partial">
 41.1108 -Partial Implementations</h3>
 41.1109 -
 41.1110 -  <p>So that authors can exploit the forward-compatible parsing rules to
 41.1111 -  assign fallback values, CSS renderers <strong>must</strong>
 41.1112 -  treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
 41.1113 -  as appropriate</a>) any at-rules, properties, property values, keywords,
 41.1114 -  and other syntactic constructs for which they have no usable level of
 41.1115 -  support. In particular, user agents <strong>must not</strong> selectively
 41.1116 -  ignore unsupported component values and honor supported values in a single
 41.1117 -  multi-value property declaration: if any value is considered invalid
 41.1118 -  (as unsupported values must be), CSS requires that the entire declaration
 41.1119 -  be ignored.</p>
 41.1120 -
 41.1121 -<h3 id="experimental">
 41.1122 -Experimental Implementations</h3>
 41.1123 -
 41.1124 -  <p>To avoid clashes with future CSS features, the CSS2.1 specification
 41.1125 -  reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
 41.1126 -  syntax</a> for proprietary and experimental extensions to CSS.
 41.1127 -
 41.1128 -  <p>Prior to a specification reaching the Candidate Recommendation stage
 41.1129 -  in the W3C process, all implementations of a CSS feature are considered
 41.1130 -  experimental. The CSS Working Group recommends that implementations
 41.1131 -  use a vendor-prefixed syntax for such features, including those in
 41.1132 -  W3C Working Drafts. This avoids incompatibilities with future changes
 41.1133 -  in the draft.
 41.1134 -  </p>
 41.1135 -
 41.1136 -<h3 id="testing">Non-Experimental Implementations</h3>
 41.1137 -
 41.1138 -  <p>Once a specification reaches the Candidate Recommendation stage,
 41.1139 -  non-experimental implementations are possible, and implementors should
 41.1140 -  release an unprefixed implementation of any CR-level feature they
 41.1141 -  can demonstrate to be correctly implemented according to spec.
 41.1142 -
 41.1143 -  <p>To establish and maintain the interoperability of CSS across
 41.1144 -  implementations, the CSS Working Group requests that non-experimental
 41.1145 -  CSS renderers submit an implementation report (and, if necessary, the
 41.1146 -  testcases used for that implementation report) to the W3C before
 41.1147 -  releasing an unprefixed implementation of any CSS features. Testcases
 41.1148 -  submitted to W3C are subject to review and correction by the CSS
 41.1149 -  Working Group.
 41.1150 -
 41.1151 -  <p>Further information on submitting testcases and implementation reports
 41.1152 -  can be found from on the CSS Working Group's website at
 41.1153 -  <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
 41.1154 -  Questions should be directed to the
 41.1155 -  <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
 41.1156 -  mailing list.
 41.1157 -
 41.1158 -<h3 id="cr-exit-criteria">
 41.1159 -CR Exit Criteria</h3>
 41.1160 -
 41.1161 -  <p>
 41.1162 -  For this specification to be advanced to Proposed Recommendation,
 41.1163 -  there must be at least two independent, interoperable implementations
 41.1164 -  of each feature. Each feature may be implemented by a different set of
 41.1165 -  products, there is no requirement that all features be implemented by
 41.1166 -  a single product. For the purposes of this criterion, we define the
 41.1167 -  following terms:
 41.1168 -
 41.1169 -  <dl>
 41.1170 -    <dt>independent <dd>each implementation must be developed by a
 41.1171 -    different party and cannot share, reuse, or derive from code
 41.1172 -    used by another qualifying implementation. Sections of code that
 41.1173 -    have no bearing on the implementation of this specification are
 41.1174 -    exempt from this requirement.
 41.1175 -
 41.1176 -    <dt>interoperable <dd>passing the respective test case(s) in the
 41.1177 -    official CSS test suite, or, if the implementation is not a Web
 41.1178 -    browser, an equivalent test. Every relevant test in the test
 41.1179 -    suite should have an equivalent test created if such a user
 41.1180 -    agent (UA) is to be used to claim interoperability. In addition
 41.1181 -    if such a UA is to be used to claim interoperability, then there
 41.1182 -    must one or more additional UAs which can also pass those
 41.1183 -    equivalent tests in the same way for the purpose of
 41.1184 -    interoperability. The equivalent tests must be made publicly
 41.1185 -    available for the purposes of peer review.
 41.1186 -
 41.1187 -    <dt>implementation <dd>a user agent which:
 41.1188 -
 41.1189 -    <ol class=inline>
 41.1190 -      <li>implements the specification.
 41.1191 -
 41.1192 -      <li>is available to the general public. The implementation may
 41.1193 -      be a shipping product or other publicly available version
 41.1194 -      (i.e., beta version, preview release, or “nightly build”).
 41.1195 -      Non-shipping product releases must have implemented the
 41.1196 -      feature(s) for a period of at least one month in order to
 41.1197 -      demonstrate stability.
 41.1198 -
 41.1199 -      <li>is not experimental (i.e., a version specifically designed
 41.1200 -      to pass the test suite and is not intended for normal usage
 41.1201 -      going forward).
 41.1202 -    </ol>
 41.1203 -  </dl>
 41.1204 -
 41.1205 -  <p>The specification will remain Candidate Recommendation for at least
 41.1206 -  six months.
 41.1207 -
 41.1208 -<h2 class="no-num" id="acknowledgements">
 41.1209 -  Appendix A: Acknowledgements</h2>
 41.1210 -
 41.1211 -  <p>This specification would not have been possible without the help from:
 41.1212 -    Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
 41.1213 -    Martin Dürst,
 41.1214 -    Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian
 41.1215 -    Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
 41.1216 -    Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
 41.1217 -    Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki,
 41.1218 -    Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki,
 41.1219 -    Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe
 41.1220 -    and Steve Zilles.</p>
 41.1221 -
 41.1222 -<h2 class="no-num">Appendix B: References</h2>
 41.1223 -
 41.1224 -<h3 class="no-num" id="normative-ref">Normative references</h3>
 41.1225 -<!--normative-->
 41.1226 -
 41.1227 -<h3 class="no-num" id="informative-ref">Informative references</h3>
 41.1228 -<!--informative-->
 41.1229 -
 41.1230 -<h2 class="no-num" id="changes">Appendix C:
 41.1231 -Changes</h2>
    42.1 Binary file css3-text-decor/text-emphasis-ja.gif has changed
    43.1 Binary file css3-text-decor/text-emphasis-ruby.png has changed
    44.1 Binary file css3-text-decor/text-emphasis-v.gif has changed
    45.1 Binary file css3-text-decor/text-emphasis-zh.gif has changed
    46.1 Binary file css3-text-decor/underline-averaging.gif has changed
    47.1 Binary file css3-text-decor/underline-example.png has changed
    48.1 Binary file css3-text-decor/underline-position-alphabetic.png has changed
    49.1 Binary file css3-text-decor/underline-position-below.png has changed
    50.1 Binary file css3-text-decor/underline-position-left.png has changed
    51.1 Binary file css3-text-decor/underline-position-right.png has changed
    52.1 --- a/css3-text/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    52.2 +++ b/css3-text/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    52.3 @@ -1,21 +1,22 @@
    52.4  <!DOCTYPE html>
    52.5  
    52.6  <html lang=en>
    52.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
    52.8 + <head>
    52.9    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   52.10    <title>CSS Text Module Level 3 (CSS3 Text)</title>
   52.11 -
   52.12 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
   52.13 -  <meta content="CSS Text Module Level 3 (CSS3 Text)" name=DC.title>
   52.14 -  <meta content=text name=DC.type>
   52.15 -  <meta content=2012-09-23 name=DC.issued>
   52.16 -  <meta content="Elika J. Etemad" name=DC.creator>
   52.17 -  <meta content="Koji Ishii" name=DC.creator>
   52.18 -  <meta content=W3C name=DC.publisher>
   52.19 -  <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/"
   52.20 -   name=DC.identifier>
   52.21 -  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   52.22 -   rel=DC.rights>
   52.23 +  <!--
   52.24 +  <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
   52.25 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
   52.26 +  -->
   52.27 +
   52.28 +  <meta content="CSS Text Module Level 3 (CSS3 Text)" name=dcterms.title>
   52.29 +  <meta content=text name=dcterms.type>
   52.30 +  <meta content=2012-10-16 name=dcterms.issued>
   52.31 +  <meta content="Elika J. Etemad" name=dcterms.creator>
   52.32 +  <meta content="Koji Ishii" name=dcterms.creator>
   52.33 +  <meta content=W3C name=dcterms.publisher>
   52.34 +  <meta content="http://www.w3.org/TR/2012/WD-css3-text-20121016/"
   52.35 +   name=dcterms.identifier>
   52.36    <link href="#contents" rel=contents>
   52.37    <link href="#index" rel=index>
   52.38    <link href="../default.css" rel=stylesheet type="text/css">
   52.39 @@ -46,8 +47,8 @@
   52.40  
   52.41     <h1>CSS Text Module Level 3</h1>
   52.42  
   52.43 -   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23
   52.44 -    September 2012</h2>
   52.45 +   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 16 October
   52.46 +    2012</h2>
   52.47  
   52.48     <dl>
   52.49      <dt>This version:</dt>
   52.50 @@ -56,7 +57,7 @@
   52.51    -->
   52.52  
   52.53      <dd><a
   52.54 -     href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a>
   52.55 +     href="http://www.w3.org/TR/2012/WD-css3-text-20121016/">http://www.w3.org/TR/2012/WD-css3-text-20121016/</a>
   52.56  
   52.57      <dt>Latest version:
   52.58  
   52.59 @@ -335,7 +336,7 @@
   52.60        CSS3 Text <abbr title="Working Draft">WD</abbr></a>
   52.61      </ul>
   52.62  
   52.63 -   <li class=no-num><a href="#default-stylesheet">Appendix D: Default UA
   52.64 +   <li class=no-num><a href="#default-stylesheet"> Appendix D: Default UA
   52.65      Stylesheet</a>
   52.66  
   52.67     <li class=no-num><a href="#script-groups">Appendix E: Scripts and
   52.68 @@ -596,10 +597,10 @@
   52.69    </div>
   52.70  
   52.71    <p class=issue>CSS may introduce the ability to create custom mapping
   52.72 -   tables for less common text transforms, such as by an ‘<a
   52.73 -   href="#text-transform0"><code class=css>@text-transform</code></a>’ rule
   52.74 -   similar to ‘<code class=css>@counter-style</code>’ from <a
   52.75 -   href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>. <!--
   52.76 +   tables for less common text transforms, such as by an ‘<code
   52.77 +   class=css>@text-transform</code>’ rule similar to ‘<code
   52.78 +   class=css>@counter-style</code>’ from <a href="#CSS3LIST"
   52.79 +   rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>. <!--
   52.80        This mechanism may be used to replace ''full-size-kana''. This would
   52.81        require authors needing this functionality to copy out the conversion
   52.82        tables, however.
   52.83 @@ -3133,7 +3134,8 @@
   52.84      class=css>allow-end</code>’ does not hang, because it fits without
   52.85      hanging. However, if ‘<code class=css>force-end</code>’ is used, it
   52.86      is forced to hang. The justification measures the line without the
   52.87 -    hanging punctuation. Therefore the line is expanded.
   52.88 +    hanging punctuation. Therefore when the line is expanded, the punctuation
   52.89 +    is pushed outside the line.
   52.90    </div>
   52.91  
   52.92    <h2 id=decoration><span class=secno>10. </span> <a
   52.93 @@ -3539,35 +3541,15 @@
   52.94     <li>
   52.95    </ul>
   52.96  
   52.97 -  <h2 class=no-num id=default-stylesheet>Appendix D: Default UA Stylesheet</h2>
   52.98 +  <h2 class=no-num id=default-stylesheet> Appendix D: Default UA Stylesheet</h2>
   52.99  
  52.100    <p>This appendix is informative, and is to help UA developers to implement
  52.101     default stylesheet, but UA developers are free to ignore or change.
  52.102  
  52.103    <div class=example>
  52.104 -   <pre><code class=css>
  52.105 +   <pre>
  52.106  <!-- -->/* make list items and option elements align together */
  52.107 -<!-- -->li, option { text-align: match-parent; }
  52.108 -<!-- -->
  52.109 -<!-- -->/* disable inheritance of text-emphasis marks to ruby text:
  52.110 -<!-- -->  emphasis marks should only apply to base text */
  52.111 -<!-- -->rt { text-emphasis: none; }
  52.112 -<!-- -->
  52.113 -<!-- -->:root:lang(zh), [lang|=zh] {
  52.114 -<!-- -->/* default emphasis mark position is 'below right' for Chinese */
  52.115 -<!-- -->  text-emphasis-position: below right;
  52.116 -<!-- -->}
  52.117 -<!-- -->
  52.118 -<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {
  52.119 -<!-- -->/* default underline position is 'below right' for Japanese and Korean */
  52.120 -<!-- -->  text-underline-position: below right;
  52.121 -<!-- -->}
  52.122 -<!-- -->
  52.123 -<!-- -->:root:lang(zh), [lang|=zh] {
  52.124 -<!-- -->/* default underline position is 'below left' for Chinese */
  52.125 -<!-- -->  text-underline-position: below left;
  52.126 -<!-- -->}
  52.127 -</code></pre>
  52.128 +<!-- -->li, option { text-align: match-parent; }</pre>
  52.129    </div>
  52.130  
  52.131    <p class=issue>If you find any issues, recommendations to add, or
    53.1 --- a/css3-text/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    53.2 +++ b/css3-text/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    53.3 @@ -2325,7 +2325,7 @@
    53.4          does not hang, because it fits without hanging.
    53.5          However, if ''force-end'' is used, it is forced to hang.
    53.6          The justification measures the line without the hanging punctuation.
    53.7 -        Therefore the line is expanded.</p>
    53.8 +        Therefore when the line is expanded, the punctuation is pushed outside the line.</p>
    53.9      </div>
   53.10  
   53.11  <h2 id="decoration">
   53.12 @@ -2555,35 +2555,16 @@
   53.13      <li>
   53.14    </ul>
   53.15  
   53.16 -<h2 class="no-num" id="default-stylesheet">Appendix D: Default UA Stylesheet</h2>
   53.17 +<h2 class="no-num" id="default-stylesheet">
   53.18 +Appendix D: Default UA Stylesheet</h2>
   53.19  
   53.20      <p>This appendix is informative, and is to help UA developers to implement
   53.21        default stylesheet, but UA developers are free to ignore or change.</p>
   53.22  
   53.23      <div class="example">
   53.24 -      <pre><code class="css">
   53.25 +      <pre>
   53.26  <!-- -->/* make list items and option elements align together */
   53.27 -<!-- -->li, option { text-align: match-parent; }
   53.28 -<!-- -->
   53.29 -<!-- -->/* disable inheritance of text-emphasis marks to ruby text:
   53.30 -<!-- -->  emphasis marks should only apply to base text */
   53.31 -<!-- -->rt { text-emphasis: none; }
   53.32 -<!-- -->
   53.33 -<!-- -->:root:lang(zh), [lang|=zh] {
   53.34 -<!-- -->/* default emphasis mark position is 'below right' for Chinese */
   53.35 -<!-- -->  text-emphasis-position: below right;
   53.36 -<!-- -->}
   53.37 -<!-- -->
   53.38 -<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {
   53.39 -<!-- -->/* default underline position is 'below right' for Japanese and Korean */
   53.40 -<!-- -->  text-underline-position: below right;
   53.41 -<!-- -->}
   53.42 -<!-- -->
   53.43 -<!-- -->:root:lang(zh), [lang|=zh] {
   53.44 -<!-- -->/* default underline position is 'below left' for Chinese */
   53.45 -<!-- -->  text-underline-position: below left;
   53.46 -<!-- -->}
   53.47 -</code></pre>
   53.48 +<!-- -->li, option { text-align: match-parent; }</pre>
   53.49      </div>
   53.50      <p class="issue">If you find any issues, recommendations to add, or corrections,
   53.51        please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a>
    54.1 --- a/css3-transforms/ChangeLog	Mon Oct 22 00:33:44 2012 +0200
    54.2 +++ b/css3-transforms/ChangeLog	Mon Oct 22 00:41:17 2012 +0200
    54.3 @@ -1,3 +1,31 @@
    54.4 +2012-10-19 dschulze@adobe.com
    54.5 +    Fixed typo.
    54.6 +
    54.7 +2012-10-19 dschulze@adobe.com
    54.8 +    Computed value of 'background-attachment' and 'transform-style' is not affected under certain conditions.
    54.9 +    https://www.w3.org/Bugs/Public/show_bug.cgi?id=17521
   54.10 +
   54.11 +2012-10-19 dschulze@adobe.com
   54.12 +    Fixed typo.
   54.13 +
   54.14 +2012-10-19 dschulze@adobe.com
   54.15 +    Correction on transformable elements defintion.
   54.16 +    Remove all uses of 'In HTML namespace'.
   54.17 +
   54.18 +2012-10-19 dschulze@adobe.com
   54.19 +    Make sure that we have bug reports for every issue in the spec.
   54.20 +
   54.21 +2012-10-18 dschulze@adobe.com
   54.22 +    Remove 'mask' from the transformable elements.
   54.23 +    https://www.w3.org/Bugs/Public/show_bug.cgi?id=18484
   54.24 +
   54.25 +2012-10-18 dschulze@adobe.com
   54.26 +    Remove comments from spec and open bug reports instead.
   54.27 +
   54.28 +2012-10-18 dschulze@adobe.com
   54.29 +    Fix typo in pseudo code.
   54.30 +    https://www.w3.org/Bugs/Public/show_bug.cgi?id=18961
   54.31 +
   54.32  2012-08-29 dschulze@adobe.com
   54.33      Added skew() again for compatibility with legacy content.
   54.34  
    55.1 --- a/css3-transforms/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    55.2 +++ b/css3-transforms/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    55.3 @@ -7,16 +7,17 @@
    55.4    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    55.5    <title>CSS Transforms</title>
    55.6  
    55.7 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
    55.8 -  <meta content="CSS Transforms" name=DC.title>
    55.9 -  <meta content=text name=DC.type>
   55.10 -  <meta content=2012-09-11 name=DC.issued>
   55.11 -  <meta content="http://dev.w3.org/csswg/css3-transforms/" name=DC.creator>
   55.12 -  <meta content=W3C name=DC.publisher>
   55.13 -  <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20120911/"
   55.14 -   name=DC.identifier>
   55.15 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   55.16    <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   55.17 -   rel=DC.rights>
   55.18 +   rel=dcterms.rights>
   55.19 +  <meta content="CSS Transforms" name=dcterms.title>
   55.20 +  <meta content=text name=dcterms.type>
   55.21 +  <meta content=2012-10-19 name=dcterms.issued>
   55.22 +  <meta content="http://dev.w3.org/csswg/css3-transforms/"
   55.23 +   name=dcterms.creator>
   55.24 +  <meta content=W3C name=dcterms.publisher>
   55.25 +  <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20121019/"
   55.26 +   name=dcterms.identifier>
   55.27    <link href="../default.css" rel=stylesheet type="text/css">
   55.28    <script defer=defer
   55.29     src="http://test.csswg.org/harness/annotate.js#CSS3-TRANSFORMS_DEV"
   55.30 @@ -49,15 +50,15 @@
   55.31  
   55.32     <h1>CSS Transforms</h1>
   55.33  
   55.34 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 September
   55.35 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October
   55.36      2012</h2>
   55.37  
   55.38     <dl>
   55.39      <dt>This version:
   55.40  
   55.41      <dd> <a
   55.42 -     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120911/">http://dev.w3.org/csswg/css3-transforms/</a>
   55.43 -     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120911/-->
   55.44 +     href="http://www.w3.org/TR/2012/ED-css3-transforms-20121019/">http://dev.w3.org/csswg/css3-transforms/</a>
   55.45 +     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20121019/-->
   55.46  
   55.47      <dt>Latest version:
   55.48  
   55.49 @@ -428,8 +429,7 @@
   55.50     class=property><a
   55.51     href="http://www.w3.org/TR/css3-background/#the-background-attachment">background-attachment</a></code></code>’
   55.52     property, which is specified in <a href="#CSS3BG"
   55.53 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.</p>
   55.54 -  <!-- Probably need more here. -->
   55.55 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
   55.56  
   55.57    <h2 id=css-values><span class=secno>3. </span>CSS Values</h2>
   55.58  
   55.59 @@ -465,23 +465,30 @@
   55.60      id=transformable-element>transformable element</dfn>
   55.61  
   55.62     <dd>
   55.63 -    <p> A transformable element is an element in the HTML namespace which is
   55.64 -     either a <a
   55.65 -     href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>
   55.66 -     or <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic
   55.67 -     inline-level element</a>, or whose ‘<code
   55.68 -     class=property>display</code>’ property computes to ‘<code
   55.69 -     class=css>table-row</code>’, ‘<code
   55.70 -     class=css>table-row-group</code>’, ‘<code
   55.71 -     class=css>table-header-group</code>’, ‘<code
   55.72 -     class=css>table-footer-group</code>’, ‘<code
   55.73 -     class=css>table-cell</code>’, or ‘<code
   55.74 -     class=css>table-caption</code>’; or an element in the SVG namespace
   55.75 -     (see <a href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) which
   55.76 -     has the attributes ‘<a href="#effects"><code
   55.77 -     class=property>transform</code></a>’, ‘<code
   55.78 -     class=property>patternTransform</code>’ or ‘<code
   55.79 -     class=property>gradientTransform</code>’.
   55.80 +    <p> A transformable element is an element in one of these categories:
   55.81 +
   55.82 +    <ul>
   55.83 +     <li> an element whose layout is governed by the CSS box model which is
   55.84 +      either a <a
   55.85 +      href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>
   55.86 +      or <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic
   55.87 +      inline-level element</a>, or whose ‘<code
   55.88 +      class=property>display</code>’ property computes to ‘<code
   55.89 +      class=css>table-row</code>’, ‘<code
   55.90 +      class=css>table-row-group</code>’, ‘<code
   55.91 +      class=css>table-header-group</code>’, ‘<code
   55.92 +      class=css>table-footer-group</code>’, ‘<code
   55.93 +      class=css>table-cell</code>’, or ‘<code
   55.94 +      class=css>table-caption</code>’ <a href="#CSS21"
   55.95 +      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   55.96 +
   55.97 +     <li> an element in the SVG namespace and not governed by the CSS box
   55.98 +      model which has the attributes ‘<a href="#effects"><code
   55.99 +      class=property>transform</code></a>’, ‘<code
  55.100 +      class=property>patternTransform</code>’ or ‘<code
  55.101 +      class=property>gradientTransform</code>’ <a href="#SVG11"
  55.102 +      rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>
  55.103 +    </ul>
  55.104  
  55.105     <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
  55.106      coordinate system</dfn>
  55.107 @@ -629,7 +636,8 @@
  55.108  
  55.109    <h2 id=transform-rendering><span class=secno>6. </span>The Transform
  55.110     Rendering Model</h2>
  55.111 -  <!-- This section is normative -->
  55.112 +
  55.113 +  <p><em>This section is normative.</em>
  55.114  
  55.115    <p> Specifying a value other than ‘<code class=css>none</code>’ for the
  55.116     ‘<a href="#effects"><code class=css>transform</code></a>’ property
  55.117 @@ -743,26 +751,26 @@
  55.118      &lt;/div&gt;
  55.119  &lt;/div&gt;</pre>
  55.120    </div>
  55.121 -  <!-- This "in the HTML namespace" is awkward. Is there a better way? -->
  55.122 -
  55.123 -  <p> In the HTML namespace, the transform property does not affect the flow
  55.124 -   of the content surrounding the transformed element. However, the extent of
  55.125 -   the overflow area takes into account transformed elements. This behavior
  55.126 -   is similar to what happens when elements are offset via relative
  55.127 -   positioning. Therefore, if the value of the ‘<code
  55.128 -   class=property>overflow</code>’ property is ‘<code
  55.129 +
  55.130 +  <p> For elements whose layout is governed by the CSS box model, the
  55.131 +   transform property does not affect the flow of the content surrounding the
  55.132 +   transformed element. However, the extent of the overflow area takes into
  55.133 +   account transformed elements. This behavior is similar to what happens
  55.134 +   when elements are offset via relative positioning. Therefore, if the value
  55.135 +   of the ‘<code class=property>overflow</code>’ property is ‘<code
  55.136     class=css>scroll</code>’ or ‘<code class=css>auto</code>’,
  55.137     scrollbars will appear as needed to see content that is transformed
  55.138     outside the visible area.
  55.139  
  55.140 -  <p> In the HTML namespace, any value other than ‘<code
  55.141 -   class=css>none</code>’ for the transform results in the creation of both
  55.142 -   a stacking context and a containing block. The object acts as a containing
  55.143 -   block for fixed positioned descendants.
  55.144 +  <p> For elements whose layout is governed by the CSS box model, any value
  55.145 +   other than ‘<code class=css>none</code>’ for the transform results in
  55.146 +   the creation of both a stacking context and a containing block. The object
  55.147 +   acts as a containing block for fixed positioned descendants.
  55.148  
  55.149    <p class=issue> Is this effect on position:fixed necessary? If so, need to
  55.150     go into more detail here about why fixed positioned objects should do
  55.151 -   this, i.e., that it's much harder to implement otherwise.
  55.152 +   this, i.e., that it's much harder to implement otherwise. See <a
  55.153 +   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>.
  55.154  
  55.155    <p> <a href="http://www.w3.org/TR/css3-background/#fixed0">Fixed
  55.156     backgrounds</a> on the root element are affected by any transform
  55.157 @@ -770,10 +778,9 @@
  55.158     transform (i.e. have a transform applied to them, or to any of their
  55.159     ancestor elements), a value of ‘<code class=css>fixed</code>’ for the
  55.160     ‘<code class=property>background-attachment</code>’ property is
  55.161 -   treated as if it had a value of ‘<code class=css>scroll</code>’.
  55.162 -
  55.163 -  <p class=issue>Does this affect the computed style of
  55.164 -   background-attachment?
  55.165 +   treated as if it had a value of ‘<code class=css>scroll</code>’. The
  55.166 +   computed value of ‘<code class=property>background-attachment</code>’
  55.167 +   is not affected.
  55.168  
  55.169    <p class=note> If the root element is transformed, the transformation
  55.170     applies to the entire canvas, including any background specified for the
  55.171 @@ -789,8 +796,6 @@
  55.172  
  55.173    <h3 id=transform-3d-rendering><span class=secno>6.1. </span>3D Transform
  55.174     Rendering</h3>
  55.175 -  <!-- Maybe define "tranform container" in the definitions, and use it everywhere
  55.176 -              in place of "containing block"? I'm not sure if "containing block" is exactly right. -->
  55.177  
  55.178    <p> Normally, elements render as flat planes, and are rendered into the
  55.179     same plane as their containing block. Often this is the plane shared by
  55.180 @@ -810,7 +815,9 @@
  55.181    <div class=issue>
  55.182     <p class=desc>This description does not exactly match what WebKit
  55.183      implements. Perhaps it should be changed to match current
  55.184 -    implementations?
  55.185 +    implementations? See <a
  55.186 +    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19637">Bug
  55.187 +    19637</a>.
  55.188    </div>
  55.189  
  55.190    <div class=example>
  55.191 @@ -881,7 +888,7 @@
  55.192  
  55.193    <p id=perspective-matrix-computation> The <a
  55.194     href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as
  55.195 -   follows: <!-- Make this more mathy, with matrices? -->
  55.196 +   follows:
  55.197  
  55.198    <ol>
  55.199     <li>Start with the identity matrix.
  55.200 @@ -960,7 +967,6 @@
  55.201     establishes the <a class=term href="#d-rendering-context">3D rendering
  55.202     context</a> through each element that is a containing block for the given
  55.203     element, as described below.
  55.204 -   <!-- More detail required, probably with matrices -->
  55.205  
  55.206    <div class=example>
  55.207     <pre>
  55.208 @@ -1051,7 +1057,6 @@
  55.209       <li>apply to the accumulated matrix a translation equivalent to the
  55.210        horizontal and vertical offset of the element relative to its
  55.211        containing block as specified by the CSS visual formatting model.
  55.212 -      <!-- (tighten this!) -->
  55.213  
  55.214       <li>multiply the accumulated matrix with the <a class=term
  55.215        href="#transformation-matrix">transformation matrix</a>.
  55.216 @@ -1264,9 +1269,8 @@
  55.217      sent very far away. The radial gradient is stretched over the whole box,
  55.218      now enormous, so the part that's visible without scrolling should be the
  55.219      color of the middle pixel: yellow. However, since the box is not actually
  55.220 -    infinite, the user can still scroll to the edges to see the blue parts.</p>
  55.221 -   <!-- TODO: Maybe we should specify that the whole thing is
  55.222 -                yellow here somehow?  Doesn't seem worth it. --></div>
  55.223 +    infinite, the user can still scroll to the edges to see the blue parts.
  55.224 +  </div>
  55.225  
  55.226    <div class=example>
  55.227     <pre>&lt;style&gt;
  55.228 @@ -1530,13 +1534,11 @@
  55.229      ‘<code class=css>1</code>’.
  55.230  
  55.231     <li>‘<code class=property>filter</code>’: any value other than
  55.232 -    ‘<code class=css>none</code>’.</li>
  55.233 -   <!-- Others? -->
  55.234 +    ‘<code class=css>none</code>’.
  55.235    </ul>
  55.236  
  55.237 -  <div class=issue>
  55.238 -   <p class=desc>Should this affect the computed value of transform-style?
  55.239 -  </div>
  55.240 +  <p> The computed value of ‘<a href="#transform-style"><code
  55.241 +   class=property>transform-style</code></a>’ is not affected.
  55.242  
  55.243    <p> The values of the ‘<a href="#effects"><code
  55.244     class=property>transform</code></a>’ and ‘<a
  55.245 @@ -1706,15 +1708,14 @@
  55.246     whether or not the "back" side of a transformed element is visible when
  55.247     facing the viewer. With an identity transform, the front side of an
  55.248     element faces the viewer. Applying a rotation about Y of 180 degrees (for
  55.249 -   instance) would cause the back side of the element to face the viewer.</p>
  55.250 -  <!-- This should not be in a normative section. -->
  55.251 -
  55.252 -  <p> This property is useful when you place two elements back-to-back, as
  55.253 -   you would to create a playing card. Without this property, the front and
  55.254 -   back elements could switch places at times during an animation to flip the
  55.255 -   card. Another example is creating a box out of 6 elements, but where you
  55.256 -   want to see the inside faces of the box. This is useful when creating the
  55.257 -   backdrop for a 3 dimensional stage.
  55.258 +   instance) would cause the back side of the element to face the viewer.
  55.259 +
  55.260 +  <p class=note> Note that this property is useful when you place two
  55.261 +   elements back-to-back, as you would to create a playing card. Without this
  55.262 +   property, the front and back elements could switch places at times during
  55.263 +   an animation to flip the card. Another example is creating a box out of 6
  55.264 +   elements, but where you want to see the inside faces of the box. This is
  55.265 +   useful when creating the backdrop for a 3 dimensional stage.
  55.266  
  55.267    <table class=propdef>
  55.268     <tbody>
  55.269 @@ -2011,7 +2012,6 @@
  55.270     and ‘<a href="#backface-visibility"><code
  55.271     class=property>backface-visibility</code></a>’ can not be used for the
  55.272     elements: ‘<code class=property>clipPath</code>’, ‘<code
  55.273 -   class=property>mask</code>’, ‘<code
  55.274     class=property>linearGradient</code>’, ‘<code
  55.275     class=property>radialGradient</code>’ and ‘<code
  55.276     class=property>pattern</code>’. If a transform list includes a
  55.277 @@ -2036,8 +2036,7 @@
  55.278  
  55.279    <p> For the ‘<code class=property>pattern</code>’, ‘<code
  55.280     class=property>linearGradient</code>’, ‘<code
  55.281 -   class=property>radialGradient</code>’, ‘<code
  55.282 -   class=property>mask</code>’ and ‘<code
  55.283 +   class=property>radialGradient</code>’ and ‘<code
  55.284     class=property>clipPath</code>’ elements the ‘<a href="#effects"><code
  55.285     class=property>transform</code></a>’, ‘<code
  55.286     class=property>patternTransform</code>’, ‘<code
  55.287 @@ -2052,7 +2051,8 @@
  55.288     viewport (the case for all other attributes on the mentioned attributes),
  55.289     or should the be reletive the referencing objects bounding box (like it is
  55.290     for all other transformable elements). The later choice seems to be more
  55.291 -   consistent within CSS Transforms.
  55.292 +   consistent within CSS Transforms. See <a
  55.293 +   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>.
  55.294  
  55.295    <p> In particualar the ‘<code class=property>patternUnit</code>’,
  55.296     ‘<code class=property>gradientUnit</code>’ and ‘<code
  55.297 @@ -2070,7 +2070,9 @@
  55.298  
  55.299    <div class=example>
  55.300     <p class=issue> The result in the example below depends on the decision
  55.301 -    made on the previous issue.
  55.302 +    made on the previous issue. See <a
  55.303 +    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug
  55.304 +    19638</a>.
  55.305  
  55.306     <p> The ‘<a href="#transform-origin"><code
  55.307      class=property>transform-origin</code></a>’ property on the pattern in
  55.308 @@ -2304,25 +2306,23 @@
  55.309     0)</code>’ (where <var>v</var> is a context dependent vector), ‘<code
  55.310     class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,
  55.311     ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0,
  55.312 -   0)</code>’, skewX(0)‘<code class=css>, </code>’skewY(0)‘<code
  55.313 -   class=css>, </code>’matrix(0, 0, 0, 0, 0, 0)‘<code class=css>,
  55.314 -   </code>’matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)‘<code
  55.315 -   class=css> and </code>’perspective(0)‘<code class=css>. </code>
  55.316 +   0)</code>’, ‘<code class=css>skewX(0)</code>’, ‘<code
  55.317 +   class=css>skewY(0)</code>’, ‘<code class=css>matrix(0, 0, 0, 0, 0,
  55.318 +   0)</code>’, ‘<code class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  55.319 +   0, 0, 0, 0, 0)</code>’ and ‘<code class=css>perspective(0)</code>’.
  55.320  
  55.321    <p class=note> Animations to or from the neutral element of additions
  55.322 -   ’matrix'‘<code class=css>, </code>’‘<code
  55.323 -   class=css>matrix3d</code>’‘<code class=css> and </code>’‘<a
  55.324 -   href="#perspective"><code class=property>perspective</code></a>’‘<code
  55.325 -   class=css> fall back to discrete animations (See <a
  55.326 -   href="#matrix-interpolation">Interpolation of Matrices</a>). </code>
  55.327 +   ‘<code class=css>matrix</code>’, ‘<code class=css>matrix3d</code>’
  55.328 +   and ‘<a href="#perspective"><code class=css>perspective</code></a>’
  55.329 +   fall back to discrete animations (See <a
  55.330 +   href="#matrix-interpolation">Interpolation of Matrices</a>).
  55.331  
  55.332    <div class=example>
  55.333     <p> A <var>by</var> animation with a by value v<sub>b</sub> is equivalent
  55.334      to the same animation with a values list with 2 values, the neutral
  55.335      element for addition for the domain of the target attribute (denoted 0)
  55.336 -    and v<sub>b</sub>, and ’‘<code
  55.337 -    class=css>additive="sum"</code>’‘<code class=css>. <a href="#SMIL3"
  55.338 -    rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a> </code>
  55.339 +    and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’. <a
  55.340 +    href="#SMIL3" rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a>
  55.341  
  55.342     <pre>
  55.343  &lt;rect width="100" height="100"&gt;
  55.344 @@ -2331,18 +2331,16 @@
  55.345  &lt;/rect&gt;</pre>
  55.346  
  55.347     <p> The neutral element for addition when performing a <var>by</var>
  55.348 -    animation with ’‘<code class=css>type="scale"</code>’‘<code
  55.349 -    class=css> is the value 0. Thus, performing the animation of the example
  55.350 -    above causes the rectangle to be invisible at time 0s (since the animated
  55.351 -    transform list value is </code>’‘<code
  55.352 -    class=css>scale(0)</code>’‘<code class=css>), and be scaled back to
  55.353 -    its original size at time 5s (since the animated transform list value is
  55.354 -    </code>’‘<code class=css>scale(1)</code>’‘<code class=css>).
  55.355 -    </code>
  55.356 +    animation with ‘<code class=css>type="scale"</code>’ is the value 0.
  55.357 +    Thus, performing the animation of the example above causes the rectangle
  55.358 +    to be invisible at time 0s (since the animated transform list value is
  55.359 +    ‘<code class=css>scale(0)</code>’), and be scaled back to its
  55.360 +    original size at time 5s (since the animated transform list value is
  55.361 +    ‘<code class=css>scale(1)</code>’).
  55.362    </div>
  55.363  
  55.364 -  <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG
  55.365 -   ’attributeName' attribute</h3>
  55.366 +  <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG ‘<code
  55.367 +   class=property>attributeName</code>’ attribute</h3>
  55.368  
  55.369    <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>
  55.370     defines the ‘<code class=css><a
  55.371 @@ -3025,7 +3023,7 @@
  55.372  pdum3 = cross(row[1], row[2])
  55.373  if (dot(row[0], pdum3) < 0)
  55.374      for (i = 0; i < 3; i++)
  55.375 -        scale[0] *= -1;
  55.376 +        scale[i] *= -1;
  55.377          row[i][0] *= -1
  55.378          row[i][1] *= -1
  55.379          row[i][2] *= -1
  55.380 @@ -3285,6 +3283,16 @@
  55.381      href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
  55.382     </dd>
  55.383     <!---->
  55.384 +
  55.385 +   <dt id=SVG11>[SVG11]
  55.386 +
  55.387 +   <dd>Erik Dahlström; et al. <a
  55.388 +    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
  55.389 +    Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
  55.390 +    W3C Recommendation. URL: <a
  55.391 +    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
  55.392 +   </dd>
  55.393 +   <!---->
  55.394    </dl>
  55.395    <!--end-normative-->
  55.396  
  55.397 @@ -3305,16 +3313,6 @@
  55.398      href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">http://www.w3.org/TR/2008/REC-SMIL3-20081201/</a>
  55.399     </dd>
  55.400     <!---->
  55.401 -
  55.402 -   <dt id=SVG11>[SVG11]
  55.403 -
  55.404 -   <dd>Erik Dahlström; et al. <a
  55.405 -    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
  55.406 -    Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
  55.407 -    W3C Recommendation. URL: <a
  55.408 -    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
  55.409 -   </dd>
  55.410 -   <!---->
  55.411    </dl>
  55.412    <!--end-informative-->
  55.413  
    56.1 --- a/css3-transforms/Transforms.src.html	Mon Oct 22 00:33:44 2012 +0200
    56.2 +++ b/css3-transforms/Transforms.src.html	Mon Oct 22 00:41:17 2012 +0200
    56.3 @@ -161,7 +161,6 @@
    56.4              '<code class="property"><a href="http://www.w3.org/TR/css3-background/#the-background-attachment">background-attachment</a></code>' property,
    56.5              which is specified in [[!CSS3BG]].
    56.6            </p>
    56.7 -          <!-- Probably need more here. -->
    56.8  
    56.9          <h2 id="css-values">CSS Values</h2>
   56.10  
   56.11 @@ -190,22 +189,30 @@
   56.12              <dt id="TermTransformableElement"><dfn>transformable element</dfn></dt>
   56.13              <dd>
   56.14                <p>
   56.15 -                A transformable element is an element in the HTML namespace
   56.16 -                which is either a
   56.17 -                <a href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>
   56.18 -                or
   56.19 -                <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic inline-level element</a>,
   56.20 -                or whose 'display' property
   56.21 -                computes to ''table-row'',
   56.22 -                ''table-row-group'',
   56.23 -                ''table-header-group'',
   56.24 -                ''table-footer-group'',
   56.25 -                ''table-cell'', or
   56.26 -                ''table-caption''; or an element in the
   56.27 -                SVG namespace (see [[SVG11]]) which has the attributes
   56.28 -                'transform', 'patternTransform'
   56.29 -                or 'gradientTransform'.
   56.30 +                A transformable element is an element in one of these
   56.31 +                categories:
   56.32                </p>
   56.33 +              <ul>
   56.34 +                <li>
   56.35 +                  an element whose
   56.36 +                  layout is governed by the CSS box model which is either
   56.37 +                  a
   56.38 +                  <a href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>
   56.39 +                  or
   56.40 +                  <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic inline-level element</a>,
   56.41 +                  or whose 'display' property
   56.42 +                  computes to ''table-row'',
   56.43 +                  ''table-row-group'',
   56.44 +                  ''table-header-group'',
   56.45 +                  ''table-footer-group'',
   56.46 +                  ''table-cell'', or
   56.47 +                  ''table-caption'' [[!CSS21]]
   56.48 +                </li>
   56.49 +                <li>
   56.50 +                  an element in the SVG namespace and not governed by the CSS box model which has
   56.51 +                  the attributes 'transform', 'patternTransform' or 'gradientTransform' [[!SVG11]]
   56.52 +                </li>
   56.53 +              </ul>
   56.54              </dd>
   56.55  
   56.56              <dt id="TermLocalCoordinateSystem"><dfn>local coordinate system</dfn></dt>
   56.57 @@ -340,7 +347,7 @@
   56.58            <!-- ======================================================================================================= -->
   56.59  
   56.60            <h2 id="transform-rendering">The Transform Rendering Model</h2>
   56.61 -            <!-- This section is normative -->
   56.62 +            <p><em>This section is normative.</em></p>
   56.63              <p>
   56.64                Specifying a value other than ''none'' for the ''transform'' property establishes a
   56.65                new <span class="term">local coordinate system</span> at the element that it is
   56.66 @@ -447,9 +454,9 @@
   56.67  &lt;/div&gt;</pre>
   56.68                </div>
   56.69  
   56.70 -              <!-- This "in the HTML namespace" is awkward. Is there a better way? -->
   56.71                <p>
   56.72 -                In the HTML namespace, the transform property does not affect the flow of the
   56.73 +                For elements whose layout is governed by the CSS box model, the transform property
   56.74 +                does not affect the flow of the
   56.75                  content surrounding the transformed element. However, the extent of the overflow
   56.76                  area takes into account transformed elements. This behavior is similar to what
   56.77                  happens when elements are offset via relative positioning. Therefore, if the value
   56.78 @@ -457,22 +464,23 @@
   56.79                  needed to see content that is transformed outside the visible area.
   56.80                </p>
   56.81                <p>
   56.82 -                In the HTML namespace, any value other than ''none'' for the transform results in
   56.83 +                For elements whose layout is governed by the CSS box model, any value other than
   56.84 +                ''none'' for the transform results in
   56.85                  the creation of both a stacking context and a containing block. The object acts as a
   56.86                  containing block for fixed positioned descendants.
   56.87                </p>
   56.88                <p class="issue">
   56.89                  Is this effect on position:fixed necessary? If so, need to go into more detail here
   56.90                  about why fixed positioned objects should do this, i.e., that it's much harder to
   56.91 -                implement otherwise.
   56.92 +                implement otherwise. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>.
   56.93                </p>
   56.94                <p>
   56.95                  <a href="http://www.w3.org/TR/css3-background/#fixed0">Fixed backgrounds</a>
   56.96                  on the root element are affected by any transform specified for that element.
   56.97                  For all other elements that are effected by a transform (i.e. have a transform
   56.98                  applied to them, or to any of their ancestor elements), a value of ''fixed'' for the
   56.99 -                'background-attachment' property is treated as if it had a value of ''scroll''.
  56.100 -                <p class="issue">Does this affect the computed style of background-attachment?</p>
  56.101 +                'background-attachment' property is treated as if it had a value of ''scroll''. The
  56.102 +                computed value of 'background-attachment' is not affected.
  56.103  
  56.104                <p class="note">
  56.105                  If the root element is transformed, the transformation applies
  56.106 @@ -490,8 +498,6 @@
  56.107  
  56.108                <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
  56.109  
  56.110 -              <!-- Maybe define "tranform container" in the definitions, and use it everywhere
  56.111 -              in place of "containing block"? I'm not sure if "containing block" is exactly right. -->
  56.112                <p>
  56.113                  Normally, elements render as flat planes, and are rendered into the same plane
  56.114                  as their containing block. Often this is the plane shared by the rest of the page.
  56.115 @@ -508,7 +514,8 @@
  56.116                </p>
  56.117                <div class="issue">
  56.118                  <p class="desc">This description does not exactly match what WebKit implements. Perhaps
  56.119 -                  it should be changed to match current implementations?</p>
  56.120 +                  it should be changed to match current implementations? See
  56.121 +                  <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19637">Bug 19637</a>.</p>
  56.122                </div>
  56.123  
  56.124                <div class="example">
  56.125 @@ -578,7 +585,6 @@
  56.126  
  56.127                <p id="perspective-matrix-computation">
  56.128                  The <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as follows:
  56.129 -                <!-- Make this more mathy, with matrices? -->
  56.130                  <ol>
  56.131                    <li>Start with the identity matrix.</li>
  56.132                    <li>Translate by the computed X and Y values of 'perspective-origin'</li>
  56.133 @@ -638,7 +644,6 @@
  56.134                  space is determined by accumulating the transformation matrices
  56.135                  up from the element that establishes the <span class="term">3D rendering context</span>
  56.136                  through each element that is a containing block for the given element, as described below.
  56.137 -                <!-- More detail required, probably with matrices -->
  56.138                </p>
  56.139  
  56.140                <div class="example">
  56.141 @@ -711,7 +716,7 @@
  56.142                        on the element's containing block (if any). That containing block is not necessarily a member
  56.143                        of the 3D rendering context.</li>
  56.144                      <li>apply to the accumulated matrix a translation equivalent to the horizontal and vertical offset of the element relative to
  56.145 -                      its containing block as specified by the CSS visual formatting model. <!-- (tighten this!) --></li>
  56.146 +                      its containing block as specified by the CSS visual formatting model.</li>
  56.147                      <li>multiply the accumulated matrix with the <span class="term">transformation matrix</span>.</li>
  56.148                    </ol>
  56.149                  </li>
  56.150 @@ -951,9 +956,6 @@
  56.151                    not actually infinite, the user can still scroll to the edges
  56.152                    to see the blue parts.
  56.153                  </p>
  56.154 -
  56.155 -                <!-- TODO: Maybe we should specify that the whole thing is
  56.156 -                yellow here somehow?  Doesn't seem worth it. -->
  56.157                </div>
  56.158  
  56.159                <div class="example">
  56.160 @@ -1305,17 +1307,17 @@
  56.161                <p>
  56.162                  The following CSS property values require the user agent to create a flattened representation of
  56.163                  the descendant elements before they can be applied, and therefore override the behavior of
  56.164 -                ''transform-style: preserve-3d'':
  56.165 -                <ul>
  56.166 -                  <li>'overflow': any value other than ''visible''.</li>
  56.167 -                  <li>'opacity': any value other than ''1''.</li>
  56.168 -                  <li>'filter': any value other than ''none''.</li>
  56.169 -                  <!-- Others? -->
  56.170 -                </ul>
  56.171 +                ''transform-style: preserve-3d'':</p>
  56.172 +              <ul>
  56.173 +                <li>'overflow': any value other than ''visible''.</li>
  56.174 +                <li>'opacity': any value other than ''1''.</li>
  56.175 +                <li>'filter': any value other than ''none''.</li>
  56.176 +              </ul>
  56.177  
  56.178 -              <div class="issue">
  56.179 -                <p class="desc">Should this affect the computed value of transform-style?</p>
  56.180 -              </div>
  56.181 +              <p>
  56.182 +                The computed value of 'transform-style' is not affected.
  56.183 +              </p>
  56.184 +
  56.185                <p>
  56.186                  The values of the 'transform' and 'transform-origin' properties are used to compute
  56.187                  the <span class="term">transformation matrix</span>, as described above.
  56.188 @@ -1536,9 +1538,8 @@
  56.189                  degrees (for instance) would cause the back side of the element to face
  56.190                  the viewer.
  56.191                </p>
  56.192 -              <!-- This should not be in a normative section. -->
  56.193 -              <p>
  56.194 -                This property is useful when you place two elements back-to-back, as you
  56.195 +              <p class="note">
  56.196 +                Note that this property is useful when you place two elements back-to-back, as you
  56.197                  would to create a playing card. Without this property, the front and
  56.198                  back elements could switch places at times during an animation to flip
  56.199                  the card. Another example is creating a box out of 6 elements, but where
  56.200 @@ -1884,7 +1885,7 @@
  56.201                <p>
  56.202                  Three-dimensional transform functions and the properties 'perspective',
  56.203                  'perspective-origin', 'transform-style' and 'backface-visibility' can not be used
  56.204 -                for the elements: 'clipPath', 'mask', 'linearGradient', 'radialGradient' and
  56.205 +                for the elements: 'clipPath', 'linearGradient', 'radialGradient' and
  56.206                  'pattern'. If a transform list includes a three-dimensional transform function, the
  56.207                  complete transform list must be ignored. The values of every previously named
  56.208                  property must be ignored. <span class="term">Transformable elements</span> that are
  56.209 @@ -1906,7 +1907,7 @@
  56.210                </h3>
  56.211  
  56.212                <p>
  56.213 -                For the 'pattern', 'linearGradient', 'radialGradient', 'mask' and 'clipPath'
  56.214 +                For the 'pattern', 'linearGradient', 'radialGradient' and 'clipPath'
  56.215                  elements the 'transform', 'patternTransform', 'gradientTransform' presentation
  56.216                  attributes represents values in the current user coordinate system in place at the
  56.217                  time when these elements are referenced (i.e., the user coordinate system for the
  56.218 @@ -1918,6 +1919,7 @@
  56.219                  other attributes on the mentioned attributes), or should the be reletive the 
  56.220                  referencing objects bounding box (like it is for all other transformable elements).
  56.221                  The later choice seems to be more consistent within CSS Transforms.
  56.222 +                See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>.
  56.223                </p>
  56.224  
  56.225                <p>
  56.226 @@ -1935,6 +1937,7 @@
  56.227                <div class="example">
  56.228                  <p class="issue">
  56.229                    The result in the example below depends on the decision made on the previous issue.
  56.230 +                  See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>.
  56.231                  </p>
  56.232  
  56.233                  <p>
  56.234 @@ -2139,7 +2142,7 @@
  56.235                  ''scaleX(0)'', ''scaleY(0)'', ''scaleZ(0)'', ''rotate(0)'',
  56.236                  ''rotate3d(v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>, 0)'' (where <var>v</var> is
  56.237                  a context dependent vector), ''rotateX(0)'', ''rotateY(0)'', ''rotateZ(0)'',
  56.238 -                ''skew(0, 0)'', skewX(0)'', ''skewY(0)'', ''matrix(0, 0, 0, 0, 0, 0)'', ''matrix3d(0, 0, 0, 0, 0,
  56.239 +                ''skew(0, 0)'', ''skewX(0)'', ''skewY(0)'', ''matrix(0, 0, 0, 0, 0, 0)'', ''matrix3d(0, 0, 0, 0, 0,
  56.240                  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)'' and ''perspective(0)''.
  56.241                </p>
  56.242                
  56.243 @@ -2896,7 +2899,7 @@
  56.244  pdum3 = cross(row[1], row[2])
  56.245  if (dot(row[0], pdum3) < 0)
  56.246      for (i = 0; i < 3; i++)
  56.247 -        scale[0] *= -1;
  56.248 +        scale[i] *= -1;
  56.249          row[i][0] *= -1
  56.250          row[i][1] *= -1
  56.251          row[i][2] *= -1
    57.1 --- a/css3-values/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    57.2 +++ b/css3-values/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    57.3 @@ -2,10 +2,20 @@
    57.4  "http://www.w3.org/TR/html4/strict.dtd">
    57.5  
    57.6  <html lang=en>
    57.7 - <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    57.8 -
    57.9 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
   57.10 +  <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   57.11    <title>CSS Values and Units Module Level 3</title>
   57.12  
   57.13 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   57.14 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   57.15 +   rel=dcterms.rights>
   57.16 +  <meta content="CSS Values and Units Module Level 3" name=dcterms.title>
   57.17 +  <meta content=text name=dcterms.type>
   57.18 +  <meta content=2012-10-16 name=dcterms.issued>
   57.19 +  <meta content="http://dev.w3.org/csswg/css3-values/" name=dcterms.creator>
   57.20 +  <meta content=W3C name=dcterms.publisher>
   57.21 +  <meta content="http://www.w3.org/TR/2012/ED-css3-values-20121016/"
   57.22 +   name=dcterms.identifier>
   57.23    <style type="text/css">
   57.24      code, small { white-space: nowrap }
   57.25      .say { color: gray; }
   57.26 @@ -19,7 +29,7 @@
   57.27    </style>
   57.28    <link href="../default.css" rel=stylesheet type="text/css">
   57.29    <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   57.30 -  type="text/css">
   57.31 +   type="text/css">
   57.32  
   57.33   <body>
   57.34    <div class=head> <!--begin-logo-->
   57.35 @@ -28,13 +38,14 @@
   57.36  
   57.37     <h1>CSS Values and Units Module Level 3</h1>
   57.38  
   57.39 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 August 2012</h2>
   57.40 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 October
   57.41 +    2012</h2>
   57.42  
   57.43     <dl>
   57.44      <dt>This version:
   57.45  
   57.46      <dd><a
   57.47 -     href="http://www.w3.org/TR/2012/ED-css3-values-20120827/">http://www.w3.org/TR/2012/ED-css3-values-20120827/</a>
   57.48 +     href="http://www.w3.org/TR/2012/ED-css3-values-20121016/">http://www.w3.org/TR/2012/ED-css3-values-20121016/</a>
   57.49  
   57.50      <dt>Latest version:
   57.51  
   57.52 @@ -45,7 +56,6 @@
   57.53  
   57.54      <dd><a
   57.55       href="http://dev.w3.org/csswg/css3-values/">http://dev.w3.org/csswg/css3-values/</a>
   57.56 -     
   57.57  
   57.58      <dt>Previous version:
   57.59  
   57.60 @@ -56,7 +66,6 @@
   57.61  
   57.62      <dd><a
   57.63       href="http://www.w3.org/Style/CSS/Tracker/products/33">http://www.w3.org/Style/CSS/Tracker/products/33</a>
   57.64 -     
   57.65  
   57.66      <dt>Feedback:
   57.67  
   57.68 @@ -230,7 +239,6 @@
   57.69          </span> Viewport-percentage lengths: the ‘<code
   57.70          class=css>vw</code>’, ‘<code class=css>vh</code>’, ‘<code
   57.71          class=css>vmin</code>’, ‘<code class=css>vmax</code>’ units</a>
   57.72 -        
   57.73        </ul>
   57.74  
   57.75       <li><a href="#absolute-lengths"><span class=secno>5.2. </span> Absolute
   57.76 @@ -281,7 +289,6 @@
   57.77        Expressions: ‘<code class=css>calc()</code>’</a>
   57.78        <ul class=toc>
   57.79         <li><a href="#calc-syntax"><span class=secno>8.1.1. </span> Syntax</a>
   57.80 -        
   57.81  
   57.82         <li><a href="#calc-type-checking"><span class=secno>8.1.2. </span>
   57.83          Type Checking</a>
   57.84 @@ -314,7 +321,6 @@
   57.85       <li class=no-num><a href="#conventions"> Document conventions</a>
   57.86  
   57.87       <li class=no-num><a href="#conformance-classes"> Conformance classes</a>
   57.88 -      
   57.89  
   57.90       <li class=no-num><a href="#partial"> Partial implementations</a>
   57.91  
   57.92 @@ -351,7 +357,6 @@
   57.93     used) that can be used by many properties are described in this
   57.94     specification, while more specific data types (e.g.,
   57.95     <var>&lt;spacing-limit></var>) are described in the corresponding modules.
   57.96 -   
   57.97  
   57.98    <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
   57.99  
  57.100 @@ -611,11 +616,11 @@
  57.101  
  57.102    <div class=example>
  57.103     <p>For example, here is the value definition for the ‘<code
  57.104 -    class=property>border-collapse</code>’ property:</p>
  57.105 +    class=property>border-collapse</code>’ property:
  57.106  
  57.107     <pre>Value: collapse | separate</pre>
  57.108  
  57.109 -   <p>And here is an example of its use:</p>
  57.110 +   <p>And here is an example of its use:
  57.111  
  57.112     <pre>table { border-collapse: separate }</pre>
  57.113    </div>
  57.114 @@ -669,7 +674,7 @@
  57.115     For instance, the following two selectors are exactly the same:
  57.116  
  57.117    <div class=example>
  57.118 -   <p style="display:none">Example(s):</p>
  57.119 +   <p style="display:none">Example(s):
  57.120  
  57.121     <pre>
  57.122  <!-- -->a[title="a not s\
  57.123 @@ -720,8 +725,8 @@
  57.124     class=css>url(close%29parens)</code>’) as described in <a href="#URI"
  57.125     rel=biblioentry>[URI]<!--{{URI}}--></a>. Alternatively a URL containing
  57.126     such characters may be represented as a quoted <a
  57.127 -   href="#strings">string</a> within the ‘<a href="#url"><code
  57.128 -   class=css>url()</code></a>’ notation.
  57.129 +   href="#strings">string</a> within the ‘<code class=css>url()</code>’
  57.130 +   notation.
  57.131  
  57.132    <p>In order to create modular style sheets that are not dependent on the
  57.133     absolute location of a resource, authors should use relative URIs.
  57.134 @@ -741,7 +746,7 @@
  57.135  
  57.136     <pre>body { background: url("tile.png") }</pre>
  57.137  
  57.138 -   <p>is located in a style sheet designated by the URL:</p>
  57.139 +   <p>is located in a style sheet designated by the URL:
  57.140  
  57.141     <pre>http://www.example.org/style/basic.css</pre>
  57.142  
  57.143 @@ -768,7 +773,6 @@
  57.144  		and the required rounding and clamping rules,
  57.145  		are given in <a href="#required-ranges">Appendix A</a>.
  57.146  -->
  57.147 -   
  57.148  
  57.149    <h3 id=integers><span class=secno>4.1. </span> Integers: the ‘<a
  57.150     href="#integer-value"><code class=css>&lt;integer></code></a>’ type</h3>
  57.151 @@ -940,7 +944,7 @@
  57.152       is used.
  57.153  
  57.154      <div class=example>
  57.155 -     <p>The rule:</p>
  57.156 +     <p>The rule:
  57.157  
  57.158       <pre>h1 { line-height: 1.2em }</pre>
  57.159  
  57.160 @@ -952,7 +956,7 @@
  57.161  
  57.162       <p>means that the font size of <code>h1</code> elements will be 20%
  57.163        greater than the computed font size inherited by <code>h1</code>
  57.164 -      elements.</p>
  57.165 +      elements.
  57.166      </div>
  57.167  
  57.168     <dt><dfn id=ex-unit title=ex>ex unit</dfn>
  57.169 @@ -987,7 +991,7 @@
  57.170      <p>When specified on the ‘<code class=property>font-size</code>’
  57.171       property of the root element, the ‘<a href="#rem-unit"><code
  57.172       class=css>rem</code></a>’ units refer to the property's <em>initial
  57.173 -     value</em>.</p>
  57.174 +     value</em>.
  57.175    </dl>
  57.176  
  57.177    <h4 id=viewport-relative-lengths><span class=secno>5.1.2. </span>
  57.178 @@ -1147,7 +1151,6 @@
  57.179  
  57.180     <p class=caption>Showing that more device pixels (dots) are needed to
  57.181      cover a 1px by 1px area on a high-resolution device than on a low-res one
  57.182 -    
  57.183    </div>
  57.184  
  57.185    <h2 id=other-units><span class=secno>6. </span> Other Units</h2>
  57.186 @@ -1387,7 +1390,7 @@
  57.187    <div class=example>
  57.188     <p>The following sets the ‘<code class=property>font-size</code>’ so
  57.189      that exactly 40em fits within the viewport, ensuring that roughly the
  57.190 -    same amount of text always fills the screen no matter the screen size.</p>
  57.191 +    same amount of text always fills the screen no matter the screen size.
  57.192  
  57.193     <pre>
  57.194  :root {
  57.195 @@ -1396,7 +1399,7 @@
  57.196  
  57.197     <p>If the rest of the design is specified using the ‘<a
  57.198      href="#rem-unit"><code class=css>rem</code></a>’ unit, the entire
  57.199 -    layout will scale to match the viewport width.</p>
  57.200 +    layout will scale to match the viewport width.
  57.201    </div>
  57.202  
  57.203    <div class=example>
  57.204 @@ -1436,7 +1439,7 @@
  57.205  calc    : "calc(" S* sum S* ")";
  57.206  sum     : product [ S+ [ "+" | "-" ] S+ product ]*;
  57.207  product : unit [ S* [ "*" S* unit | "/" S* NUMBER ] ]*;
  57.208 -attr    : "attr(" S* wqname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")";
  57.209 +attr    : "attr(" S* qname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")";
  57.210  unit    : [ NUMBER | DIMENSION | PERCENTAGE | "(" S* sum S* ")" | calc | attr ];</pre>
  57.211  
  57.212    <p class=note>Note that the grammar requires spaces around binary ‘<code
  57.213 @@ -1561,7 +1564,6 @@
  57.214  	This has notes on how we should handle things when calc() is extended to 
  57.215  	handle unit mult/div. Related to this is <unit>mod<unit>, which can return
  57.216  	0 and thus introduce computed-time division-by-zero. -->
  57.217 -   
  57.218  
  57.219    <p> Given the complexities of width and height calculations on table cells
  57.220     and table elements, math expressions involving percentages for widths and
  57.221 @@ -1596,7 +1598,6 @@
  57.222    <div class=example>
  57.223     <p>The following example makes <code>&lt;em></code> elements italic in
  57.224      general, but makes them normal if they're inside something that's italic:
  57.225 -    
  57.226  
  57.227     <pre>em { font-style: toggle(italic, normal); }</pre>
  57.228    </div>
  57.229 @@ -1710,7 +1711,7 @@
  57.230  
  57.231    <p> where &lt;attr-name> is a <a
  57.232     href="http://dev.w3.org/csswg/css3-namespace/#css-qnames">CSS qualified
  57.233 -   name</a> (the wqname production in <a href="#CSS3NAMESPACE"
  57.234 +   name</a> (the qname production in <a href="#CSS3NAMESPACE"
  57.235     rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>) that
  57.236     represents an attribute name. (In the absence of namespacing, this will
  57.237     just be a CSS identifier.)
  57.238 @@ -1738,6 +1739,9 @@
  57.239     <li> the attr() expression's type is valid where the attr() expression is
  57.240      placed,
  57.241  
  57.242 +   <li> if the attribute name is given with a namespace prefix, the prefix is
  57.243 +    defined
  57.244 +
  57.245     <li> the <var>&lt;fallback></var> is valid where the attr() expression is
  57.246      placed,
  57.247  
  57.248 @@ -1793,14 +1797,13 @@
  57.249  
  57.250     <dd> The attribute value will be parsed as the contents of a CSS <a
  57.251      href="#string-value"><var>&lt;string></var></a>. It is interpreted as a
  57.252 -    quoted string within the ‘<a href="#url"><code
  57.253 -    class=css>url()</code></a>’ notation. The default is ‘<code
  57.254 -    class=css>about:invalid</code>’, which is a URI defined (<a
  57.255 -    href="#about-invalid">in Appendix A</a>) to point to a non-existent
  57.256 -    document with a generic error condition. Relative URLs must be made
  57.257 -    absolute according to the rules of the document language as applied to
  57.258 -    URLs originating from the element; they are not relative to the style
  57.259 -    sheet.
  57.260 +    quoted string within the ‘<code class=css>url()</code>’ notation. The
  57.261 +    default is ‘<code class=css>about:invalid</code>’, which is a URI
  57.262 +    defined (<a href="#about-invalid">in Appendix A</a>) to point to a
  57.263 +    non-existent document with a generic error condition. Relative URLs must
  57.264 +    be made absolute according to the rules of the document language as
  57.265 +    applied to URLs originating from the element; they are not relative to
  57.266 +    the style sheet.
  57.267  
  57.268     <dt>‘<a href="#integer"><code class=css>integer</code></a>’
  57.269  
  57.270 @@ -1895,7 +1898,7 @@
  57.271  
  57.272    <div class=example>
  57.273     <p>This example shows the use of attr() to visually illustrate data in an
  57.274 -    XML file:</p>
  57.275 +    XML file:
  57.276  
  57.277     <pre>
  57.278  &lt;stock>
  57.279 @@ -1936,7 +1939,7 @@
  57.280    <div class="illegal example">
  57.281     <p>All of the following examples are invalid and would cause a parse-time
  57.282      error, and thus cause the relevant declaration—in this case all of
  57.283 -    them—to be ignored:</p>
  57.284 +    them—to be ignored:
  57.285  
  57.286     <pre>
  57.287  content: attr(title color); /* 'content' doesn't accept colors */
  57.288 @@ -2035,7 +2038,6 @@
  57.289  
  57.290    <p> The official record of this registration can be found at <a
  57.291     href="http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml">http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml</a>.
  57.292 -   
  57.293  
  57.294    <table class="data define">
  57.295     <tbody>
  57.296 @@ -2093,7 +2095,7 @@
  57.297     <code>class="example"</code>, like this:
  57.298  
  57.299    <div class=example>
  57.300 -   <p>This is an example of an informative example.</p>
  57.301 +   <p>This is an example of an informative example.
  57.302    </div>
  57.303  
  57.304    <p>Informative notes begin with the word “Note” and are set apart from
  57.305 @@ -2243,34 +2245,17 @@
  57.306    <h2 class=no-num id=changes>Changes</h2>
  57.307  
  57.308    <p>Changes since the <a
  57.309 -   href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">8 March 2012
  57.310 -   Last Call Working Draft</a> include many clarifications as well as the
  57.311 -   following:
  57.312 +   href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">28 August
  57.313 +   Candidate Recommendation</a> are:
  57.314  
  57.315    <ul>
  57.316 -   <li>Renamed ‘<code class=css>cycle()</code>’ to ‘<a
  57.317 -    href="#toggle"><code class=css>toggle()</code></a>’.
  57.318 -
  57.319 -   <li>‘<a href="#calc"><code class=css>calc()</code></a>’ can now accept
  57.320 -    and return <a href="#integer-value"><var>&lt;integer></var></a> types.
  57.321 -
  57.322 -   <li>‘<a href="#calc"><code class=css>calc()</code></a>’ may now be
  57.323 -    nested (to simplify handling of macros and variables).
  57.324 -
  57.325 -   <li>Tightened up the handling of fallback values in ‘<a
  57.326 -    href="#attr"><code class=css>attr()</code></a>’.
  57.327 -
  57.328 -   <li>Clarified parsing rules used in ‘<a href="#attr"><code
  57.329 -    class=css>attr()</code></a>’.
  57.330 -
  57.331 -   <li>Added ‘<a href="#vmax-unit"><code class=css>vmax</code></a>’ unit.
  57.332 -    
  57.333 +   <li>Corrected <code>wqname</code> in the ‘<a href="#attr"><code
  57.334 +    class=css>attr()</code></a>’ syntax to <code>qname</code>
  57.335 +
  57.336 +   <li>Made undefined namespace prefixes in ‘<a href="#attr"><code
  57.337 +    class=css>attr()</code></a>’ invalidate the function.
  57.338    </ul>
  57.339  
  57.340 -  <p>A <a
  57.341 -   href="http://dev.w3.org/csswg/css3-values/issues-lc-2012">disposition of
  57.342 -   last-call comments</a> is available.
  57.343 -
  57.344    <h2 class=no-num id=references>References</h2>
  57.345  
  57.346    <h3 class=no-num id=normative-references>Normative references</h3>
  57.347 @@ -2288,7 +2273,7 @@
  57.348      Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
  57.349      2011. W3C Recommendation. URL: <a
  57.350      href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
  57.351 -    </dd>
  57.352 +   </dd>
  57.353     <!---->
  57.354  
  57.355     <dt id=CSS3-IMAGES>[CSS3-IMAGES]
  57.356 @@ -2298,7 +2283,7 @@
  57.357      Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
  57.358      Candidate Recommendation. (Work in progress.) URL: <a
  57.359      href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
  57.360 -    </dd>
  57.361 +   </dd>
  57.362     <!---->
  57.363  
  57.364     <dt id=CSS3BG>[CSS3BG]
  57.365 @@ -2308,7 +2293,7 @@
  57.366      Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
  57.367      Candidate Recommendation. (Work in progress.) URL: <a
  57.368      href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
  57.369 -    </dd>
  57.370 +   </dd>
  57.371     <!---->
  57.372  
  57.373     <dt id=CSS3COLOR>[CSS3COLOR]
  57.374 @@ -2317,7 +2302,7 @@
  57.375      href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
  57.376      Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
  57.377      href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
  57.378 -    </dd>
  57.379 +   </dd>
  57.380     <!---->
  57.381  
  57.382     <dt id=CSS3NAMESPACE>[CSS3NAMESPACE]
  57.383 @@ -2327,7 +2312,7 @@
  57.384      Namespaces Module.</cite></a> 29 September 2011. W3C Recommendation. URL:
  57.385      <a
  57.386      href="http://www.w3.org/TR/2011/REC-css3-namespace-20110929/">http://www.w3.org/TR/2011/REC-css3-namespace-20110929/</a>
  57.387 -    </dd>
  57.388 +   </dd>
  57.389     <!---->
  57.390  
  57.391     <dt id=RFC2119>[RFC2119]
  57.392 @@ -2336,7 +2321,7 @@
  57.393      words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
  57.394      RFC 2119. URL: <a
  57.395      href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
  57.396 -    </dd>
  57.397 +   </dd>
  57.398     <!---->
  57.399  
  57.400     <dt id=URI>[URI]
  57.401 @@ -2346,7 +2331,7 @@
  57.402      Identifiers (URI): generic syntax.</cite></a> January 2005. Internet RFC
  57.403      3986. URL: <a
  57.404      href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a>
  57.405 -    </dd>
  57.406 +   </dd>
  57.407     <!---->
  57.408    </dl>
  57.409    <!--end-normative-->
  57.410 @@ -2366,7 +2351,7 @@
  57.411      module: Cascading and inheritance.</cite></a> 15 December 2005. W3C
  57.412      Working Draft. (Work in progress.) URL: <a
  57.413      href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
  57.414 -    </dd>
  57.415 +   </dd>
  57.416     <!---->
  57.417  
  57.418     <dt id=MEDIAQ>[MEDIAQ]
  57.419 @@ -2375,7 +2360,7 @@
  57.420      href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
  57.421      Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
  57.422      href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
  57.423 -    </dd>
  57.424 +   </dd>
  57.425     <!---->
  57.426    </dl>
  57.427    <!--end-informative-->
  57.428 @@ -2502,7 +2487,6 @@
  57.429      title="&lt;time>"><strong>6.2.</strong></a>
  57.430  
  57.431     <li>toggle(), <a href="#toggle" title="toggle()"><strong>8.2.</strong></a>
  57.432 -    
  57.433  
  57.434     <li>turn, <a href="#turn" title=turn><strong>6.1.</strong></a>
  57.435  
    58.1 --- a/css3-values/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    58.2 +++ b/css3-values/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    58.3 @@ -985,7 +985,7 @@
    58.4  calc    : "calc(" S* sum S* ")";
    58.5  sum     : product [ S+ [ "+" | "-" ] S+ product ]*;
    58.6  product : unit [ S* [ "*" S* unit | "/" S* NUMBER ] ]*;
    58.7 -attr    : "attr(" S* wqname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")";
    58.8 +attr    : "attr(" S* qname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")";
    58.9  unit    : [ NUMBER | DIMENSION | PERCENTAGE | "(" S* sum S* ")" | calc | attr ];</pre>
   58.10  
   58.11  	<p class='note'>Note that the grammar requires spaces around binary ''+'' 
   58.12 @@ -1241,7 +1241,7 @@
   58.13  
   58.14  	<p>
   58.15  		where &lt;attr-name> is a <a href="http://dev.w3.org/csswg/css3-namespace/#css-qnames">CSS qualified name</a> 
   58.16 -		(the wqname production in [[!CSS3NAMESPACE]])
   58.17 +		(the qname production in [[!CSS3NAMESPACE]])
   58.18  		that represents an attribute name.
   58.19  		(In the absence of namespacing, this will just be a CSS identifier.)
   58.20  
   58.21 @@ -1269,6 +1269,9 @@
   58.22  			the attr() expression's type is valid where the attr() expression is placed,
   58.23  
   58.24  		<li>
   58.25 +			if the attribute name is given with a namespace prefix, the prefix is defined
   58.26 +
   58.27 +		<li>
   58.28  			the <var>&lt;fallback></var> is valid where the attr() expression is placed,
   58.29  
   58.30  		<li>
   58.31 @@ -1735,19 +1738,12 @@
   58.32  
   58.33  <h2 class="no-num" id="changes">Changes</h2>
   58.34  
   58.35 -  <p>Changes since the <a href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">8 March 2012 Last Call Working Draft</a> include
   58.36 -  many clarifications as well as the following:
   58.37 +  <p>Changes since the <a href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">28 August Candidate Recommendation</a> are:
   58.38    
   58.39    <ul>
   58.40 -    <li>Renamed ''cycle()'' to ''toggle()''.
   58.41 -    <li>''calc()'' can now accept and return <var>&lt;integer></var> types.
   58.42 -    <li>''calc()'' may now be nested (to simplify handling of macros and variables).
   58.43 -    <li>Tightened up the handling of fallback values in ''attr()''.
   58.44 -    <li>Clarified parsing rules used in ''attr()''.
   58.45 -    <li>Added ''vmax'' unit.
   58.46 +    <li>Corrected <code>wqname</code> in the ''attr()'' syntax to <code>qname</code>
   58.47 +    <li>Made undefined namespace prefixes in ''attr()'' invalidate the function.
   58.48    </ul>
   58.49 -  
   58.50 -  <p>A <a href="http://dev.w3.org/csswg/css3-values/issues-lc-2012">disposition of last-call comments</a> is available.
   58.51  
   58.52  <h2 class="no-num" id="references">References</h2>
   58.53  
    59.1 --- a/css3-writing-modes/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    59.2 +++ b/css3-writing-modes/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    59.3 @@ -1,11 +1,22 @@
    59.4  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    59.5  
    59.6  <html lang=en>
    59.7 - <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    59.8 -
    59.9 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
   59.10 +  <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   59.11    <title>CSS Writing Modes Module Level 3</title>
   59.12 +
   59.13 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   59.14 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   59.15 +   rel=dcterms.rights>
   59.16 +  <meta content="CSS Writing Modes Module Level 3" name=dcterms.title>
   59.17 +  <meta content=text name=dcterms.type>
   59.18 +  <meta content=2012-10-18 name=dcterms.issued>
   59.19 +  <meta content="Elika J. Etemad" name=dcterms.creator>
   59.20 +  <meta content="Koji Ishii" name=dcterms.creator>
   59.21 +  <meta content=W3C name=dcterms.publisher>
   59.22 +  <meta content="http://www.w3.org/TR/2012/ED-css3-writing-modes-20121018/"
   59.23 +   name=dcterms.identifier>
   59.24    <link href="../default.css" rel=stylesheet type="text/css">
   59.25 -
   59.26    <style type="text/css">
   59.27      object { vertical-align: middle; }
   59.28      .sidebar { float: right; background: #eee; border: solid gray; margin: 1em; }
   59.29 @@ -23,7 +34,7 @@
   59.30      }
   59.31    </style>
   59.32    <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   59.33 -  type="text/css">
   59.34 +   type="text/css">
   59.35  
   59.36   <body>
   59.37    <div class=head> <!--begin-logo-->
   59.38 @@ -32,7 +43,8 @@
   59.39  
   59.40     <h1>CSS Writing Modes Module Level 3</h1>
   59.41  
   59.42 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 August 2012</h2>
   59.43 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October
   59.44 +    2012</h2>
   59.45  
   59.46     <dl>
   59.47      <dt>This version:
   59.48 @@ -40,9 +52,8 @@
   59.49      <dd><a
   59.50       href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>
   59.51       <!--
   59.52 -    <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120814/">http://www.w3.org/TR/2012/ED-css3-writing-modes-20120814/</a>
   59.53 +    <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121018/">http://www.w3.org/TR/2012/ED-css3-writing-modes-20121018/</a>
   59.54  -->
   59.55 -     
   59.56  
   59.57      <dt>Latest version:
   59.58  
   59.59 @@ -63,7 +74,6 @@
   59.60  
   59.61      <dd><a
   59.62       href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a>
   59.63 -     
   59.64  
   59.65      <dt>Discussion:
   59.66  
   59.67 @@ -241,7 +251,7 @@
   59.68        property</a>
   59.69        <ul class=toc>
   59.70         <li><a href="#vertical-orientations"><span class=secno>5.1.1. </span>
   59.71 -        Vertical Orientations</a>
   59.72 +        Mixed Vertical Orientations</a>
   59.73  
   59.74         <li><a href="#vertical-font-features"><span class=secno>5.1.2. </span>
   59.75          Vertical Typesetting and Font Features</a>
   59.76 @@ -283,7 +293,7 @@
   59.77          Multi-column Layout in Orthogonal Flows</a>
   59.78  
   59.79         <li><a href="#orthogonal-pagination"><span class=secno>7.3.3. </span>
   59.80 -        Paginating Orthogonal Flows</a>
   59.81 +        Fragmenting Orthogonal Flows</a>
   59.82        </ul>
   59.83  
   59.84       <li><a href="#logical-direction-layout"><span class=secno>7.4. </span>
   59.85 @@ -353,18 +363,10 @@
   59.86      and Properties</a>
   59.87  
   59.88     <li class=no-num><a href="#bidi-html"> Appendix B: Bidi Rules for HTML</a>
   59.89 -    
   59.90  
   59.91     <li class=no-num><a href="#script-orientations">Appendix C: Vertical
   59.92      Scripts in Unicode</a>
   59.93  
   59.94 -   <li class=no-num><a href="#intrinsic-sizing">Appendix D: Intrinsic
   59.95 -    Dimensions</a>
   59.96 -    <ul class=toc>
   59.97 -     <li class=no-num><a href="#multicol-intrinsic"> Intrinsic Sizes in
   59.98 -      Multi-column Layout</a>
   59.99 -    </ul>
  59.100 -
  59.101     <li class=no-num><a href="#references"> References</a>
  59.102      <ul class=toc>
  59.103       <li class=no-num><a href="#normative-references"> Normative
  59.104 @@ -520,7 +522,7 @@
  59.105      alt="An example of bidirectional text is a Latin name in an Arabic                  sentence. The sentence overall is typeset right-to-left, but                  the letters in the Latin word in the middle are typeset                  left-to-right."
  59.106      src="diagrams/bidi.png">
  59.107  
  59.108 -   <p class=caption>Bidirectionality</p>
  59.109 +   <p class=caption>Bidirectionality
  59.110    </div>
  59.111  
  59.112    <p>The Unicode standard (<a
  59.113 @@ -751,7 +753,6 @@
  59.114  
  59.115       <th colspan=3 scope=rowgroup><abbr
  59.116        title="To surrounding contents, the element behaves as if its boundary were...">Outside</abbr>
  59.117 -      
  59.118  
  59.119      <tr>
  59.120       <th><abbr
  59.121 @@ -766,7 +767,6 @@
  59.122  
  59.123       <th><abbr
  59.124        title="the element's boundaries were strong characters of the element's 'direction'.">scoped</abbr>
  59.125 -      
  59.126  
  59.127       <td>‘<a href="#embed"><code class=css>embed</code></a>’
  59.128  
  59.129 @@ -775,7 +775,6 @@
  59.130      <tr>
  59.131       <th><abbr
  59.132        title="all text consisted of strong characters of the element's 'direction'.">override</abbr>
  59.133 -      
  59.134  
  59.135       <td>‘<a href="#bidi-override"><code
  59.136        class=css>bidi-override</code></a>’
  59.137 @@ -978,7 +977,7 @@
  59.138    <div class=example>
  59.139     <p>In this example, lowercase letters stand for inherently left-to-right
  59.140      characters and uppercase letters represent inherently right-to-left
  59.141 -    characters. The text stream is shown in logical backing store order.</p>
  59.142 +    characters. The text stream is shown in logical backing store order.
  59.143  
  59.144     <pre class=xml-example><code class=xml>
  59.145  &lt;HEBREW&gt;
  59.146 @@ -993,7 +992,7 @@
  59.147      </code></pre>
  59.148  
  59.149     <p>Since this is arbitrary XML, the style sheet is responsible for setting
  59.150 -    the writing direction. This is the style sheet:</p>
  59.151 +    the writing direction. This is the style sheet:
  59.152  
  59.153     <pre>
  59.154  /* Rules for bidi */
  59.155 @@ -1011,17 +1010,17 @@
  59.156      first two PARs are read starting at the top right, the final three are
  59.157      read starting at the top left. Please note that HEBREW and ENGLISH are
  59.158      chosen as element names for explicitness only; in general, element names
  59.159 -    should convey structure without reference to language.</p>
  59.160 +    should convey structure without reference to language.
  59.161  
  59.162     <p>The EMPH element is inline-level, and since its value for <a
  59.163      class=propinst-unicode-bidi href="#unicode-bidi0">‘<code
  59.164      class=property>unicode-bidi</code>’</a> is ‘<a href="#normal"><code
  59.165      class=property>normal</code></a>’ (the initial value), it has no effect
  59.166      on the ordering of the text. The HE-QUO element, on the other hand,
  59.167 -    creates an embedding.</p>
  59.168 +    creates an embedding.
  59.169  
  59.170     <p>The formatting of this text might look like this if the line length is
  59.171 -    long:</p>
  59.172 +    long:
  59.173  
  59.174     <pre class=ascii-art>
  59.175                 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
  59.176 @@ -1036,9 +1035,9 @@
  59.177      </pre>
  59.178  
  59.179     <p>Note that the HE-QUO embedding causes HEBREW18 to be to the right of
  59.180 -    english19.</p>
  59.181 -
  59.182 -   <p>If lines have to be broken, it might be more like this:</p>
  59.183 +    english19.
  59.184 +
  59.185 +   <p>If lines have to be broken, it might be more like this:
  59.186  
  59.187     <pre class=ascii-art>
  59.188         2WERBEH 1WERBEH
  59.189 @@ -1064,7 +1063,7 @@
  59.190      not have worked. Note also that the first syllable from english19 might
  59.191      have fit on the previous line, but hyphenation of left-to-right words in
  59.192      a right-to-left context, and vice versa, is usually suppressed to avoid
  59.193 -    having to display a hyphen in the middle of a line.</p>
  59.194 +    having to display a hyphen in the middle of a line.
  59.195    </div>
  59.196    <!-- example -->
  59.197  
  59.198 @@ -1136,10 +1135,10 @@
  59.199    <div class=figure>
  59.200     <p><img
  59.201      alt="A comparison of horizontal and vertical Japanese shows that                  although the lines rotate, the characters remain upright.                  Some glyphs, however change: a period mark shifts from the                  bottom left of its glyph box to the top right. Running                  headers, however, may remain                  laid out horizontally across the top of the page."
  59.202 -    src=vert-horiz-comparison.png></p>
  59.203 +    src=vert-horiz-comparison.png>
  59.204  
  59.205     <p class=caption>Comparison of vertical and horizontal Japanese: iBunko
  59.206 -    application (iOS)</p>
  59.207 +    application (iOS)
  59.208    </div>
  59.209  
  59.210    <p class=note>For Chinese and Japanese lines are ordered either right to
  59.211 @@ -1159,10 +1158,10 @@
  59.212    <div class=figure>
  59.213     <p><img
  59.214      alt="A dictionary definition for ヴィルス                  might write the English word 'virus' rotated 90° clockwise,                  but stack the letters of the initialisms 'RNA' and 'DNA' upright."
  59.215 -    src=vert-latin-layouts.png></p>
  59.216 +    src=vert-latin-layouts.png>
  59.217  
  59.218     <p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer
  59.219 -    1.4 (iOS)</p>
  59.220 +    1.4 (iOS)
  59.221    </div>
  59.222  
  59.223    <p>In some special cases such as two-digit numbers in dates, text is fit
  59.224 @@ -1171,9 +1170,9 @@
  59.225    <div class=figure id=fig-mac>
  59.226     <p><img
  59.227      alt="An excerpt from MacFan shows several possible vertical layouts                  for numbers: the two-digit month and day are written as                  horizontal-in-vertical blocks; the years are written with                  each character upright; except in the English phrase                  “for Mac 2011”, where the date is rotated to                  match the rotated Latin."
  59.228 -    src=vert-number-layouts.png></p>
  59.229 -
  59.230 -   <p class=caption>Mac Fan, December 2010, p.49</p>
  59.231 +    src=vert-number-layouts.png>
  59.232 +
  59.233 +   <p class=caption>Mac Fan, December 2010, p.49
  59.234    </div>
  59.235  
  59.236    <p>Layouts often involve a mixture of vertical and horizontal elements:
  59.237 @@ -1181,9 +1180,9 @@
  59.238    <div class=figure>
  59.239     <p><img
  59.240      alt="Magazines often mix horizontal and vertical layout; for                  example, using one orientation for the main article text                  and a different one for sidebar or illustrative content."
  59.241 -    src=vert-horiz-combination.png></p>
  59.242 -
  59.243 -   <p class=caption>Mixture of vertical and horizontal elements</p>
  59.244 +    src=vert-horiz-combination.png>
  59.245 +
  59.246 +   <p class=caption>Mixture of vertical and horizontal elements
  59.247    </div>
  59.248  
  59.249    <p>Vertical text layouts also need to handle bidirectional text layout;
  59.250 @@ -1320,29 +1319,29 @@
  59.251  
  59.252    <div class=example>
  59.253     <p>In the following example, two block elements (1 and 3) separated by an
  59.254 -    image (2) are presented in various flow writing modes.</p>
  59.255 +    image (2) are presented in various flow writing modes.
  59.256  
  59.257     <p>Here is a diagram of horizontal writing mode (<code>writing-mode:
  59.258 -    horizontal-tb</code>):</p>
  59.259 +    horizontal-tb</code>):
  59.260  
  59.261     <p><img
  59.262      alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom"
  59.263 -    height=300 src=horizontal.png width=219></p>
  59.264 +    height=300 src=horizontal.png width=219>
  59.265  
  59.266     <p>Here is a diagram for the right-to-left vertical writing mode commonly
  59.267 -    used in East Asia (<code>writing-mode: vertical-rl</code>):</p>
  59.268 +    used in East Asia (<code>writing-mode: vertical-rl</code>):
  59.269  
  59.270     <p><img
  59.271      alt="Diagram of a right-to-left vertical layout: blocks 1, 2,                   and 3 are arranged side by side from right to left"
  59.272 -    height=191 src=vertical-rl.png width=297></p>
  59.273 +    height=191 src=vertical-rl.png width=297>
  59.274  
  59.275     <p>And finally, here is a diagram for the left-to-right vertical writing
  59.276      mode used for Manchu and Mongolian (<code>writing-mode:
  59.277 -    vertical-lr</code>):</p>
  59.278 +    vertical-lr</code>):
  59.279  
  59.280     <p><img
  59.281      alt="Diagram of left-to-right vertical layout: blocks 1, 2,                   and 3 are arranged side by side from left to right"
  59.282 -    height=191 src=vertical-lr.png width=300></p>
  59.283 +    height=191 src=vertical-lr.png width=300>
  59.284    </div>
  59.285  
  59.286    <div class=example>
  59.287 @@ -1362,12 +1361,12 @@
  59.288  <!-- -->                       &lt;option>français
  59.289  <!-- -->                       &lt;option>فارسی
  59.290  <!-- -->                       &lt;option>中文
  59.291 -<!-- -->                       &lt;option>日本语&lt;/select>&lt;/label>
  59.292 +<!-- -->                       &lt;option>日本語&lt;/select>&lt;/label>
  59.293  <!-- -->&lt;/form></pre>
  59.294  
  59.295     <p><img
  59.296      alt="Screenshot of vertical layout: the input element is                 laid lengthwise from top to bottom and its contents                 rendered in a vertical writing mode, matching the                 labels outside it. The drop-down selection control                 after it slides out to the side (towards the foot                 edge of the block) rather than downward as it would                 in horizontal writing modes."
  59.297 -    src=vertical-form.png></p>
  59.298 +    src=vertical-form.png>
  59.299    </div>
  59.300  
  59.301    <div class=example>
  59.302 @@ -1387,7 +1386,7 @@
  59.303       alt="Diagram showing list markers of '1.', '2.', '3.' sitting                    upright atop sideways vertical Latin list item text."
  59.304       class=example src=vertical-horizontal-list-markers.png>
  59.305  
  59.306 -    <p class=caption>Example of horizontal list markers in a vertical list</p>
  59.307 +    <p class=caption>Example of horizontal list markers in a vertical list
  59.308     </div>
  59.309    </div>
  59.310  
  59.311 @@ -1445,10 +1444,11 @@
  59.312    <p>In SVG1.1, these values set the <dfn
  59.313     id=inline-progression-direction>inline progression direction</dfn>, in
  59.314     other words, the direction the current text position advances each time a
  59.315 -   glyph is added. This is a geometric process that happens <em>after</em>
  59.316 -   bidi reordering, and thus has no effect on the interpretation of the ‘<a
  59.317 -   href="#direction0"><code class=property>direction</code></a>’ property
  59.318 -   (which is independent of ‘<a href="#writing-mode1"><code
  59.319 +   glyph is added. This is a geometric process that happens <a
  59.320 +   href="#after"><em>after</em></a> bidi reordering, and thus has no effect
  59.321 +   on the interpretation of the ‘<a href="#direction0"><code
  59.322 +   class=property>direction</code></a>’ property (which is independent of
  59.323 +   ‘<a href="#writing-mode1"><code
  59.324     class=property>writing-mode</code></a>’). (See <a
  59.325     href="http://www.w3.org/TR/SVG/text.html#RelationshipWithBiDirectionality">Relationship
  59.326     with bidirectionality</a>. <a href="#SVG11"
  59.327 @@ -1488,9 +1488,9 @@
  59.328    <div class=figure>
  59.329     <p><img
  59.330      alt="Latin prefers the alphabetic baseline, on top of which most                  letters rest, though some have descenders that dangle below it.                  Indic scripts are sometimes typeset with a hanging baseline,                  since their glyph shapes appear to be hanging from a                  horizontal line.                  Han-based systems, whose glyphs are designed to fill a square,                  tend to align on their bottoms."
  59.331 -    src=script-preferred-baselines.gif></p>
  59.332 -
  59.333 -   <p class=caption>Preferred baselines in various writing systems</p>
  59.334 +    src=script-preferred-baselines.gif>
  59.335 +
  59.336 +   <p class=caption>Preferred baselines in various writing systems
  59.337    </div>
  59.338  
  59.339    <p>A well-constructed font contains a <dfn id=baseline-table>baseline
  59.340 @@ -1499,13 +1499,13 @@
  59.341     with the font size.)
  59.342  
  59.343    <div class=figure>
  59.344 -   <p><img alt="" src=baselines.gif></p>
  59.345 +   <p><img alt="" src=baselines.gif>
  59.346  
  59.347     <p class=caption>In a well-designed mixed-script font, the glyphs are
  59.348      positioned in the coordinate space to harmonize with one another when
  59.349      typeset together. The baseline table is then constructed to match the
  59.350      shape of the glyphs, each baseline positioned to match the glyphs from
  59.351 -    its preferred scripts.</p>
  59.352 +    its preferred scripts.
  59.353    </div>
  59.354  
  59.355    <p>The baseline table is a property of the font, and the positions of the
  59.356 @@ -1872,7 +1872,6 @@
  59.357       href="#use-glyph-orientation"><code
  59.358       class=css>use-glyph-orientation</code></a>’ behavior is the same as
  59.359       for ‘<a href="#mixed-right"><code class=css>mixed-right</code></a>’.
  59.360 -     
  59.361  
  59.362      <p class=note>This value is at-risk and may be dropped during CR.
  59.363    </dl>
  59.364 @@ -1908,7 +1907,7 @@
  59.365     <p class=caption>‘<a href="#text-orientation0"><code
  59.366      class=property>text-orientation</code></a>’ values (‘<a
  59.367      href="#writing-mode1"><code class=property>writing-mode</code></a>’ is
  59.368 -    ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’)</p>
  59.369 +    ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’)
  59.370    </div>
  59.371  
  59.372    <div class=example>
  59.373 @@ -1933,82 +1932,90 @@
  59.374     alignment. Refer to <a href="#text-baselines">Text Baselines</a> for more
  59.375     details.
  59.376  
  59.377 -  <h4 id=vertical-orientations><span class=secno>5.1.1. </span> Vertical
  59.378 -   Orientations</h4>
  59.379 -
  59.380 -  <p><a href=vosimple.txt>This data file</a> defines two properties in UCD
  59.381 -   format <a href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>:
  59.382 -
  59.383 -  <dl>
  59.384 -   <dt><dfn id=mvosimple>MVOsimple</dfn>
  59.385 -
  59.386 -   <dd>This property defines character orientations for ‘<a
  59.387 -    href="#mixed-right"><code class=css>mixed-right</code></a>’.
  59.388 -
  59.389 -   <dt><dfn id=svosimple>SVOsimple</dfn>
  59.390 -
  59.391 -   <dd>This property defines character orientations for ‘<a
  59.392 -    href="#upright"><code class=css>upright</code></a>’.
  59.393 -  </dl>
  59.394 -
  59.395 -  <p>The UA must render a <a href="#character"><i>character</i></a> upright
  59.396 -   if the value is ‘<code class=css>U</code>’, or sideways (90°
  59.397 -   clockwise from horizontal) if ‘<code class=css>R</code>’.
  59.398 -
  59.399 -  <div class=note> ‘<a href="#mvosimple"><code
  59.400 -   class=property>MVOsimple</code></a>’ and ‘<a href="#svosimple"><code
  59.401 -   class=property>SVOsimple</code></a>’ derived properties are defined in
  59.402 -   terms of the corresponding Unicode porperty value, MVO and SVO
  59.403 -   respectively. If the orientation value is ‘<code class=css>R</code>’
  59.404 -   then the simple value is ‘<code class=css>R</code>’. If the
  59.405 -   orientation value is ‘<code class=css>U</code>’, ‘<code
  59.406 -   class=css>T</code>’, ‘<code class=css>Tu</code>’, or ‘<code
  59.407 -   class=css>Tr</code>’ then the simple value is ‘<code
  59.408 -   class=css>U</code>’. The one exception is for scripts like Mongolian for
  59.409 -   which special handling is required for the stacked case due to the
  59.410 -   vertical-only nature of the underlying script.
  59.411 -   <p> Going forward, CSS Writing Modes will be tracking changes in <a
  59.412 -    href="#UTR50" rel=biblioentry>[UTR50]<!--{{UTR50}}--></a>, and thus
  59.413 -    converging with (rather than diverging from) Unicode.
  59.414 -  </div>
  59.415 +  <h4 id=vertical-orientations><span class=secno>5.1.1. </span> Mixed
  59.416 +   Vertical Orientations</h4>
  59.417 +
  59.418 +  <p> <a href="#UTR50" rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> defines
  59.419 +   the "mixed vertical orientation" (MVO) property in UCD format <a
  59.420 +   href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. When ‘<a
  59.421 +   href="#text-orientation0"><code
  59.422 +   class=property>text-orientation</code></a>’ is ‘<a
  59.423 +   href="#mixed-right"><code class=css>mixed-right</code></a>’, the UA must
  59.424 +   render a <a href="#character"><i>character</i></a> upright if the MVO
  59.425 +   value is ‘<code class=css>U</code>’, ‘<code class=css>T</code>’,
  59.426 +   ‘<code class=css>Tu</code>’, or ‘<code class=css>Tr</code>’, or
  59.427 +   else sideways (90° clockwise from horizontal) if ‘<code
  59.428 +   class=css>R</code>’.
  59.429 +
  59.430 +  <p class=issue> As of the time of publication, Unicode has not yet
  59.431 +   officially updated its orientation data to account for the many errata
  59.432 +   that were accepted in June 2012. Therefore, the official UTR50 data
  59.433 +   (version 5) should not be used. (Instead, see <a
  59.434 +   href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this
  59.435 +   draft of version 6</a>.) When Unicode publishes a proper update, this spec
  59.436 +   will update its references accordingly.
  59.437  
  59.438    <h4 id=vertical-font-features><span class=secno>5.1.2. </span> Vertical
  59.439     Typesetting and Font Features</h4>
  59.440  
  59.441 -  <p>When typesetting text in vertical writing modes:
  59.442 -
  59.443 -  <ul>
  59.444 -   <li>Upright characters in ‘<a href="#mixed-right"><code
  59.445 -    class=css>mixed-right</code></a>’ and ‘<a href="#upright"><code
  59.446 -    class=css>upright</code></a>’ modes are typeset with vertical font
  59.447 -    metrics. The UA must synthesize vertical font metrics for fonts that lack
  59.448 -    them. (This specification does not define heuristics for synthesizing
  59.449 -    such metrics.) Additionally, font features (such as alternate glyphs)
  59.450 -    intended for use in vertical typesetting must be used. (E.g. the OpenType
  59.451 -    ‘<code class=css>vert</code>’ feature must be enabled.) Furthermore,
  59.452 +  <p>When typesetting text in ‘<a href="#mixed-right"><code
  59.453 +   class=css>mixed-right</code></a>’ and ‘<a href="#upright"><code
  59.454 +   class=css>upright</code></a>’ orientations:
  59.455 +
  59.456 +  <dl>
  59.457 +   <dt>upright characters
  59.458 +
  59.459 +   <dd> Are typeset with vertical font metrics. The UA must synthesize
  59.460 +    vertical font metrics for fonts that lack them. (This specification does
  59.461 +    not define heuristics for synthesizing such metrics.) Additionally, font
  59.462 +    features (such as alternate glyphs) intended for use in vertical
  59.463 +    typesetting must be used. (E.g. the OpenType ‘<code
  59.464 +    class=css>vert</code>’ feature must be enabled.) Furthermore,
  59.465      characters from horizontal cursive scripts (such as Arabic) are shaped in
  59.466      their isolated forms when typeset upright.
  59.467 -
  59.468 -   <li>Sideways characters in ‘<a href="#mixed-right"><code
  59.469 -    class=css>mixed-right</code></a>’ and ‘<a href="#upright"><code
  59.470 -    class=css>upright</code></a>’ modes are typeset with horizontal
  59.471 -    metrics, and vertical typesetting features are not used. However, if the
  59.472 -    font has features meant to be enabled for sideways text that is typeset
  59.473 -    in vertical lines (e.g. to adjust brush stroke angles or alignment),
  59.474 -    those features are used.
  59.475 -    <p class=issue>Propose ‘<code class=property>svrt</code>’ as an
  59.476 -     OpenType substitution feature that is applied to rotated horizontal text
  59.477 -     in vertical text runs, to handle these cases.
  59.478 -
  59.479 -   <li>All text in ‘<a href="#sideways"><code
  59.480 -    class=css>sideways</code></a>’, ‘<a href="#sideways-right"><code
  59.481 -    class=css>sideways-right</code></a>’, and ‘<a
  59.482 -    href="#sideways-left"><code class=css>sideways-left</code></a>’ modes
  59.483 -    is typeset using horizontal font metrics and the normal set of features
  59.484 -    used for horizontal text runs. Vertical metrics, vertical glyph
  59.485 -    variations, and any other features meant for text typeset in vertical
  59.486 -    lines are <em>not</em> used.
  59.487 -  </ul>
  59.488 +    <p class=note> Note that in OpenType systems, <a
  59.489 +     href="#character"><i>characters</i></a> from the Mongolian and Phags-pa
  59.490 +     scripts must actually be rendered <a
  59.491 +     href="#typeset-sideways">sideways</a>. This is because the "upright"
  59.492 +     orientation in the Unicode code charts (which assume vertical
  59.493 +     typesetting) and the "upright" orientation of the glyphs of these
  59.494 +     scripts in most OpenType fonts (which assume horizontal typesetting)
  59.495 +     don't match.
  59.496 +
  59.497 +    <p class=note>Note that even when typeset "upright", some glyphs should
  59.498 +     appear rotated. For example, dashes and enclosing punctuation (such as
  59.499 +     〈 LEFT ANGLE BRACKET U+3008) should be oriented relative to the inline
  59.500 +     axis. In OpenType, this is typically handled by glyph substitution,
  59.501 +     although not all fonts have alternate glyphs for all relevant
  59.502 +     codepoints. (East Asian fonts usually provide alternates for East Asian
  59.503 +     codepoints, but Western fonts typically lack any vertical typesetting
  59.504 +     features.) Unicode published draft data on which <a
  59.505 +     href="#character"><i>characters</i></a> should appear sideways as the
  59.506 +     SVO property in <a
  59.507 +     href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this
  59.508 +     data file</a>; however, this property has been abandoned for future
  59.509 +     revisions of <a href="#UTR50"
  59.510 +     rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a>.
  59.511 +
  59.512 +   <dt id=typeset-sideways>sideways characters
  59.513 +
  59.514 +   <dd> Are typeset with horizontal metrics, and vertical typesetting
  59.515 +    features are not used. However, if the font has features meant to be
  59.516 +    enabled for sideways text that is typeset in vertical lines (e.g. to
  59.517 +    adjust brush stroke angles or alignment), those features are used.
  59.518 +    <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature
  59.519 +      that is applied to rotated horizontal text in vertical text runs,
  59.520 +      to handle these cases.-->
  59.521 +  </dl>
  59.522 +
  59.523 +  <p> All text in ‘<a href="#sideways"><code
  59.524 +   class=css>sideways</code></a>’, ‘<a href="#sideways-right"><code
  59.525 +   class=css>sideways-right</code></a>’, and ‘<a
  59.526 +   href="#sideways-left"><code class=css>sideways-left</code></a>’
  59.527 +   orientations is typeset using horizontal font metrics and the normal set
  59.528 +   of features used for horizontal text runs. Vertical metrics, vertical
  59.529 +   glyph variations, and any other features meant for text typeset in
  59.530 +   vertical lines are <em>not</em> used.
  59.531  
  59.532    <p class=issue>This section needs additional work. Suggestions are welcome.
  59.533     <!-- random notes
  59.534 @@ -2028,7 +2035,6 @@
  59.535    get the right behavior in most cases. But as soon as you get to 13, you
  59.536    have a problem.
  59.537  -->
  59.538 -   
  59.539  
  59.540    <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2>
  59.541  
  59.542 @@ -2104,13 +2110,13 @@
  59.543      <i>horizontal dimension</i> in horizontal writing modes, and the
  59.544      <i>vertical dimension</i> in vertical writing modes.
  59.545  
  59.546 -   <dt><dfn id=inline-axis>inline-axis</dfn>
  59.547 +   <dt><dfn id=block-axis>block-axis</dfn>
  59.548  
  59.549     <dd>The axis in the block dimension, i.e. the <i>vertical axis</i> in
  59.550      horizontal writing modes and the <i>horizontal axis</i> in vertical
  59.551      writing modes.
  59.552  
  59.553 -   <dt><dfn id=block-axis>block-axis</dfn>
  59.554 +   <dt><dfn id=inline-axis>inline-axis</dfn>
  59.555  
  59.556     <dd>The axis in the inline dimension, i.e. the <i>horizontal axis</i> in
  59.557      horizontal writing modes and the <i>vertical axis</i> in vertical writing
  59.558 @@ -2151,7 +2157,7 @@
  59.559     follows:
  59.560  
  59.561    <dl>
  59.562 -   <dt><dfn id=head>head</dfn>
  59.563 +   <dt><dfn id=head>head</dfn>/<dfn id=before>before</dfn>
  59.564  
  59.565     <dd>Nominally the side that comes earlier in the block progression, as
  59.566      determined by the ‘<a href="#writing-mode1"><code
  59.567 @@ -2161,7 +2167,7 @@
  59.568      class=css>vertical-rl</code></a>’, and the left in ‘<a
  59.569      href="#vertical-lr"><code class=css>vertical-lr</code></a>’.
  59.570  
  59.571 -   <dt><dfn id=foot>foot</dfn>
  59.572 +   <dt><dfn id=foot>foot</dfn>/<dfn id=after>after</dfn>
  59.573  
  59.574     <dd>The side opposite <a href="#head"><i>head</i></a>.
  59.575  
  59.576 @@ -2181,6 +2187,14 @@
  59.577     <dd>The side opposite <a href="#start"><i>start</i></a>.
  59.578    </dl>
  59.579  
  59.580 +  <p class=issue> The naming of the block-axis logical directions is under
  59.581 +   discussion. The before/after set of names is used in XSL-FO, but is
  59.582 +   unfortunately somewhat confusing with DOM-relative directions (e.g. the
  59.583 +   ::before/::after pseudo-elements), and is not sufficiently distinct from
  59.584 +   start/end, which is used for the inline axis. Feedback is welcome, see <a
  59.585 +   href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0321.html">Koji's
  59.586 +   summary email</a>.
  59.587 +
  59.588    <p class=note>Note that while determining the <a
  59.589     href="#head"><i>head</i></a> and <a href="#foot"><i>foot</i></a> sides of
  59.590     a box depends only on the ‘<a href="#writing-mode1"><code
  59.591 @@ -2193,7 +2207,7 @@
  59.592     class=property>text-orientation</code></a>’ properties.
  59.593  
  59.594    <div class=example>
  59.595 -   <p>An English (LTR-TB) block:</p>
  59.596 +   <p>An English (LTR-TB) block:
  59.597  
  59.598     <pre class=ascii-art>
  59.599                    &lt;----- width / measure  -----&gt;
  59.600 @@ -2213,7 +2227,7 @@
  59.601    </div>
  59.602  
  59.603    <div class=example>
  59.604 -   <p>A vertical Japanese block (TTB-RL):</p>
  59.605 +   <p>A vertical Japanese block (TTB-RL):
  59.606  
  59.607     <pre class=ascii-art>
  59.608                    &lt;----- width / extent ------&gt;
  59.609 @@ -2300,14 +2314,14 @@
  59.610    <div class=figure> <a href="diagrams/line-orient-up.svg"
  59.611     type="image/svg+xml"> <img alt="Line orientation compass" class=landscape
  59.612     src="diagrams/line-orient-up.png"></a>
  59.613 -   <p class=caption>Line orientation compass</p>
  59.614 +   <p class=caption>Line orientation compass
  59.615    </div>
  59.616  
  59.617    <div class=figurepair>
  59.618     <div class=figure> <a href="diagrams/line-orient-right.svg"
  59.619      type="image/svg+xml"> <img alt="Typical orientation in vertical"
  59.620      class=portrait src="diagrams/line-orient-right.png"></a>
  59.621 -    <p class=caption>Typical orientation in vertical</p>
  59.622 +    <p class=caption>Typical orientation in vertical
  59.623     </div>
  59.624  
  59.625     <div class=figure> <a href="diagrams/line-orient-left.svg"
  59.626 @@ -2315,7 +2329,7 @@
  59.627      alt="Line orientation with ''text-orientation: sideways-left''"
  59.628      class=portrait src="diagrams/line-orient-left.png"></a>
  59.629      <p class=caption>Line orientation with ‘<code
  59.630 -     class=css>text-orientation: sideways-left</code>’</p>
  59.631 +     class=css>text-orientation: sideways-left</code>’
  59.632     </div>
  59.633    </div>
  59.634  
  59.635 @@ -2550,7 +2564,7 @@
  59.636       class=property>margin-left</code>’ property still affects the lefthand
  59.637       margin, for example; however in a ‘<a href="#vertical-rl"><code
  59.638       class=css>vertical-rl</code></a>’ writing mode it takes part in margin
  59.639 -     collapsing in place of ‘<code class=property>margin-bottom</code>’.</p>
  59.640 +     collapsing in place of ‘<code class=property>margin-bottom</code>’.
  59.641  
  59.642     <li>
  59.643      <p>Layout rules that depend on the ‘<a href="#direction0"><code
  59.644 @@ -2583,7 +2597,7 @@
  59.645       class=example src="diagrams/vertical-table.png"></a>
  59.646  
  59.647      <p class=caption>Table in ‘<a href="#vertical-rl"><code
  59.648 -     class=css>vertical-rl</code></a>’ RTL writing mode</p>
  59.649 +     class=css>vertical-rl</code></a>’ RTL writing mode
  59.650     </div>
  59.651    </div>
  59.652  
  59.653 @@ -2678,102 +2692,143 @@
  59.654      and ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’).
  59.655    </ul>
  59.656  
  59.657 -  <p>To handle the second case, CSS layout calculations are divided into two
  59.658 -   phases: sizing a box, and positioning the box within its flow. In the
  59.659 -   sizing phase—calculating the width and height of the box—the
  59.660 -   dimensions of the box and the containing block are mapped to the measure
  59.661 -   and extent and calculations performed accordingly using the writing mode
  59.662 -   of the element. In the positioning phase—calculating the positioning
  59.663 -   offsets, margins, borders, and padding—the dimensions of the box and its
  59.664 -   containing block are mapped to the measure and extent and calculations
  59.665 -   performed according to the writing mode of the containing block.
  59.666 -
  59.667 -  <p>For example, if a vertical block is placed inside a horizontal block,
  59.668 -   then when calculating the physical height (which is the measure) of the
  59.669 -   child block the physical height of the parent block is used as the child's
  59.670 -   containing block measure, even though the physical height is the extent,
  59.671 -   not the measure, of the parent block.
  59.672 -
  59.673 -  <p>Since auto margins are resolved consistent with the containing block's
  59.674 -   writing mode, a box establishing an orthogonal flow, can, once sized, be
  59.675 -   aligned or centered within its containing block just like other
  59.676 -   block-level elements by using auto margins.
  59.677 -
  59.678 -  <p>It is common in CSS for a containing block to have a defined measure,
  59.679 -   but not a defined extent. This typically happens in CSS2.1 when a
  59.680 +  <p> When an element has a writing mode that is perpendicular to its
  59.681 +   containing block it is said to be in, or establish, an <dfn
  59.682 +   id=orthogonal-flow>orthogonal flow</dfn>.
  59.683 +
  59.684 +  <p> To handle this case, CSS layout calculations are divided into two
  59.685 +   phases: sizing a box, and positioning the box within its flow.
  59.686 +
  59.687 +  <ul>
  59.688 +   <li> In the sizing phase—calculating the width and height of the
  59.689 +    box—the dimensions of the box and the containing block are mapped to
  59.690 +    the measure and extent and calculations are performed accordingly using
  59.691 +    the writing mode of the <em>element</em>.
  59.692 +
  59.693 +   <li> In the positioning phase—calculating the positioning offsets,
  59.694 +    margins, borders, and padding—the dimensions of the box and its
  59.695 +    containing block are mapped to the measure and extent and calculations
  59.696 +    are performed according to the writing mode of the <em>containing
  59.697 +    block</em>.
  59.698 +  </ul>
  59.699 +
  59.700 +  <p>Since ‘<code class=css>auto</code>’ margins are resolved consistent
  59.701 +   with the containing block's writing mode, a box establishing an orthogonal
  59.702 +   flow can, once sized, be aligned or centered within its containing block
  59.703 +   just like other block-level elements by using auto margins.
  59.704 +
  59.705 +  <div class=example>
  59.706 +   <p> For example, if a vertical block is placed inside a horizontal block,
  59.707 +    then when calculating the physical height (which is the measure) of the
  59.708 +    child block the physical height of the parent block is used as the
  59.709 +    child's containing block measure, even though the physical height is the
  59.710 +    extent, not the measure, of the parent block.
  59.711 +
  59.712 +   <p> On the other hand, because the containing block is in a horizontal
  59.713 +    writing mode, the vertical margins on the child participate in
  59.714 +    margin-collapsing, even though they are in the inline-axis of the child,
  59.715 +    and horizontal auto margins will expand to fill the containing block,
  59.716 +    even though they are in the block-axis of the child.
  59.717 +
  59.718 +   <p class=issue> Add a picture.
  59.719 +  </div>
  59.720 +
  59.721 +  <p>It is common in CSS for a containing block to have a definite measure,
  59.722 +   but not a definite extent. This typically happens in CSS2.1 when a
  59.723     containing block has an ‘<code class=css>auto</code>’ height, for
  59.724     example: its width is given by the calculations in <a
  59.725     href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, but
  59.726 -   its extent depends on its contents. In such cases the <dfn
  59.727 -   id=available-measure>available measure</dfn> is defined as the measure of
  59.728 -   the containing block; but the <dfn id=available-extent>available
  59.729 -   extent</dfn>, which would otherwise be the extent of the containing block,
  59.730 -   is infinite.
  59.731 -
  59.732 -  <p>Orthogonal flows allow the opposite to happen: for the <a
  59.733 -   href="#available-extent"><i>available extent</i></a> to be defined, but
  59.734 -   the <a href="#available-measure"><i>available measure</i></a> to be
  59.735 +   its extent depends on its contents. In such cases the <i>available
  59.736 +   measure</i> is defined as the measure of the containing block; but the
  59.737 +   <i>available extent</i>, which would otherwise be the extent of the
  59.738 +   containing block, is infinite.
  59.739 +
  59.740 +  <p>Orthogonal flows allow the opposite to happen: for the <i>available
  59.741 +   extent</i> to be defined, but the <i>available measure</i> to be
  59.742     indefinite. In such cases a percentage of the containing block measure
  59.743     cannot be defined, and inline-axis computations cannot be resolved. In
  59.744     these cases, the initial containing block's size is used as a
  59.745 -   <i>fallback</i> variable in place of the <a
  59.746 -   href="#available-measure"><i>available measure</i></a> for calculations
  59.747 -   that require a definite available measure.
  59.748 +   <i>fallback</i> variable in place of the <i>available measure</i> for
  59.749 +   calculations that require a definite <i>available measure</i>.
  59.750  
  59.751    <h4 id=orthogonal-auto><span class=secno>7.3.1. </span> Auto-sizing in
  59.752     Orthogonal Flows</h4>
  59.753  
  59.754 -  <p>If the computed measure of an element establishing an orthogonal flow is
  59.755 -   ‘<code class=css>auto</code>’, then the used measure is calculated as
  59.756 -   the <a href="#fit-content"><i>fit-content</i></a> (shrink-to-fit) size
  59.757 -   using a <a href="#fill-available"><i>fill-available</i></a> fit into the
  59.758 -   minimum of the <a href="#available-measure"><i>available measure</i></a>
  59.759 -   (when definite) and the <a href="#fallback-measure"><i>fallback available
  59.760 -   measure</i></a>. In other words, the calculation becomes <code>min(<a
  59.761 -   href="#max-content"><i>max-content</i></a>, max(<a
  59.762 -   href="#min-content"><i>min-content</i></a>, <a
  59.763 -   href="#fill-available"><i>fill-available</i></a>, <i>fill-<a
  59.764 -   href="#fallback-measure">fallback</a></i>))</code> (where <a
  59.765 -   href="#fill-available"><i>fill-available</i></a> is dropped when
  59.766 -   indefinite).
  59.767 +  <p> If the UA does not support CSS Multi-column Layout <a href="#CSS3COL"
  59.768 +   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a
  59.769 +   block container, when the computed measure of the element establishing an
  59.770 +   orthogonal flow is ‘<code class=css>auto</code>’, then the used inner
  59.771 +   measure is calculated as:
  59.772 +
  59.773 +  <p> <code>min(<var>max-content</var>, max(<var>min-content</var>,
  59.774 +   min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>, where:
  59.775 +
  59.776 +  <dl>
  59.777 +   <dt><var>min-content</var>
  59.778 +
  59.779 +   <dd>the <a
  59.780 +    href="http://www.w3.org/TR/css3-sizing/#min-content-measure">min-content
  59.781 +    measure</a> of the element
  59.782 +
  59.783 +   <dt><var>max-content</var>
  59.784 +
  59.785 +   <dd>the <a
  59.786 +    href="http://www.w3.org/TR/css3-sizing/#max-content-measure">max-content
  59.787 +    measure</a> of the element
  59.788 +
  59.789 +   <dt><var>fill-available</var>
  59.790 +
  59.791 +   <dd>the <a
  59.792 +    href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available
  59.793 +    fit</a> into the element's containing block's size in the element's
  59.794 +    inline axis
  59.795 +
  59.796 +   <dt><var>fill-fallback</var>
  59.797 +
  59.798 +   <dd>the <a
  59.799 +    href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available
  59.800 +    fit</a> into the initial containing block's size in the element's inline
  59.801 +    axis
  59.802 +  </dl>
  59.803 +
  59.804 +  <p> See <a href="#CSS3-SIZING"
  59.805 +   rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> for further
  59.806 +   details.
  59.807  
  59.808    <h4 id=orthogonal-multicol><span class=secno>7.3.2. </span> Multi-column
  59.809     Layout in Orthogonal Flows</h4>
  59.810  
  59.811 -  <p>If the UA supports CSS Multi-column Layout <a href="#CSS3COL"
  59.812 -   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>, then for the case where
  59.813 -   the element's extent or available extent is defined but the element's
  59.814 -   measure is ‘<code class=css>auto</code>’:
  59.815 +  <p> If the UA supports CSS Multi-column Layout <a href="#CSS3COL"
  59.816 +   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a
  59.817 +   block container or multi-column element, for the case where the element's
  59.818 +   extent or available extent is <i>definite</i> but the element's measure is
  59.819 +   ‘<code class=css>auto</code>’:
  59.820  
  59.821    <ol>
  59.822 -   <li>If ‘<code class=property>column-count</code>’ and ‘<code
  59.823 +   <li> If ‘<code class=property>column-count</code>’ and ‘<code
  59.824      class=property>column-width</code>’ are both ‘<code
  59.825 -    class=css>auto</code>’, a used ‘<code
  59.826 -    class=property>column-width</code>’ is calculated for the element as
  59.827 -    the <a href="#fill-available-measure"><i>fill-available measure</i></a>
  59.828 -    using the minimum of the <a href="#available-measure"><i>available
  59.829 -    measure</i></a> (when definite) and the <a
  59.830 -    href="#fallback-measure"><i>fallback available measure</i></a> as the <a
  59.831 -    href="#available-measure"><i>available measure</i></a>.
  59.832 -
  59.833 -   <li>If the columns' extent is not fixed, the <a
  59.834 -    href="#fill-available-extent"><i>fill-available extent</i></a> of the
  59.835 -    element is used.
  59.836 -
  59.837 -   <li>The used column-count then follows from filling the resulting columns
  59.838 -    with the element's content.
  59.839 +    class=css>auto</code>’, calculate the used ‘<code
  59.840 +    class=property>column-width</code>’ as the inner measure for ‘<code
  59.841 +    class=css>auto</code>’-sized elements, as defined above.
  59.842 +
  59.843 +   <li> If the columns' extent is <i>indefinite</i>, the <i>fill-available
  59.844 +    extent</i> of the element is used.
  59.845 +
  59.846 +   <li> The used ‘<code class=property>column-count</code>’ then follows
  59.847 +    from filling the resulting columns with the element's content.
  59.848    </ol>
  59.849  
  59.850 -  <p>The used measure of the resulting multi-column element is then
  59.851 -   calculated: if the content neither wraps nor paginates within the
  59.852 -   multi-column element, then the used measure is the <a
  59.853 -   href="#max-content-measure"><i>max-content measure</i></a> of the
  59.854 -   element's contents; else it is calculated from the used column width,
  59.855 -   column count, and column gap.
  59.856 -
  59.857 -  <p>The used extent of the element is either the used column extent (if
  59.858 -   multiple columns were used) or the <a
  59.859 -   href="#max-content-extent"><i>max-content extent</i></a> of the content.
  59.860 +  <p> The used measure of the resulting multi-column element is then
  59.861 +   calculated: if the content neither line-wraps nor fragments within the
  59.862 +   multi-column element, then the used measure is the <i>max-content
  59.863 +   measure</i> of the element's contents; else it is calculated from the used
  59.864 +   ‘<code class=property>column-width</code>’, ‘<code
  59.865 +   class=property>column-count</code>’, and ‘<code
  59.866 +   class=property>column-gap</code>’.
  59.867 +
  59.868 +  <p> The used extent of the element is either the used column extent (if
  59.869 +   multiple columns were used) or the <i>max-content extent</i> of the
  59.870 +   content.
  59.871  
  59.872    <p class=note>This should behave the same as the auto-sizing algorithm
  59.873     defined in the previous section, except overflowing content, instead of
  59.874 @@ -2781,16 +2836,16 @@
  59.875     in the flow direction of the containing block, thus avoiding T-shaped
  59.876     documents.
  59.877  
  59.878 -  <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Paginating
  59.879 +  <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Fragmenting
  59.880     Orthogonal Flows</h4>
  59.881  
  59.882    <p><em>This section is informative.</em>
  59.883  
  59.884 -  <p>With regards to pagination, the rules in CSS2.1 still hold in vertical
  59.885 -   writing modes and orthogonal flows: page break opportunities do not occur
  59.886 -   inside line boxes, only between them. UAs that support <a href="#CSS3COL"
  59.887 -   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break in the
  59.888 -   (potentially zero-width) gap between columns, however.
  59.889 +  <p>With regards to fragmentation, the rules in CSS2.1 still hold in
  59.890 +   vertical writing modes and orthogonal flows: break opportunities do not
  59.891 +   occur inside line boxes, only between them. UAs that support <a
  59.892 +   href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break
  59.893 +   in the (potentially zero-width) gap between columns, however.
  59.894  
  59.895    <p>Note that if content spills outside the pagination stream established by
  59.896     the root element, the UA is not required to print such content. Authors
  59.897 @@ -2901,7 +2956,6 @@
  59.898      the CSS Text Module defines this in more detail and provides additional
  59.899      controls for controlling the position of underlines and overlines. <a
  59.900      href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a></span>
  59.901 -    
  59.902    </ul>
  59.903  
  59.904    <h3 id=physical-only><span class=secno>7.6. </span> Purely Physical
  59.905 @@ -3240,7 +3294,7 @@
  59.906      class=css>text-combine-horizontal</code></a>’ effect is often used to
  59.907      display Latin-based strings such as components of a date or letters of an
  59.908      initialism, always in a horizontal writing mode regardless of the writing
  59.909 -    mode of the line:</p>
  59.910 +    mode of the line:
  59.911  
  59.912     <div class=figure>
  59.913      <p><img
  59.914 @@ -3248,16 +3302,16 @@
  59.915       class=example src=tate-chu-yoko.png>
  59.916  
  59.917      <p class=caption>Example of horizontal-in-vertical <i
  59.918 -     lang=ja>tate-chu-yoko</i></p>
  59.919 +     lang=ja>tate-chu-yoko</i>
  59.920     </div>
  59.921  
  59.922 -   <p>The figure is the result of the rules</p>
  59.923 +   <p>The figure is the result of the rules
  59.924  
  59.925     <pre>
  59.926  <!-- -->date { text-combine-horizontal: digits 2; }
  59.927      </pre>
  59.928  
  59.929 -   <p>and the following markup:</p>
  59.930 +   <p>and the following markup:
  59.931  
  59.932     <pre>
  59.933  <!-- -->&lt;date&gt;平成20年4月16日に&lt;/date&gt;
  59.934 @@ -3279,7 +3333,7 @@
  59.935       alt="Rendering of the above markup with 'text-combine-horizontal: digits':                    the first two digits of the number are rendered as tate-chu-yoko                    while the rest of the number is rendered sideways."
  59.936       class=example src=bad-tate-chu-yoko.png>
  59.937  
  59.938 -    <p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i></p>
  59.939 +    <p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i>
  59.940     </div>
  59.941    </div>
  59.942  
  59.943 @@ -3309,7 +3363,6 @@
  59.944      all Han-based scripts, so would have to appear in any usable ideographic
  59.945      font; and its shape is very full in both dimensions, so it would be
  59.946      unlikely to be shortened in a proportional font -->
  59.947 -   
  59.948  
  59.949    <p>The automatic text combinations are determined before ‘<code
  59.950     class=property>text-transform</code>’ is applied. Any CSS fullwidth
  59.951 @@ -3425,7 +3478,6 @@
  59.952  
  59.953       <li>a three-character composition uses 1/3-em glyphs (if the font
  59.954        supports this feature, else fall back to 1/2-em or proportional glyphs)
  59.955 -      
  59.956  
  59.957       <li>etc.
  59.958      </ul>
  59.959 @@ -3467,8 +3519,9 @@
  59.960  
  59.961     <li>Added data tables for orientation of characters in Unicode.
  59.962  
  59.963 -   <li>Replaced <i>before</i> with <a href="#head"><i>head</i></a> and
  59.964 -    <i>after</i> with <a href="#foot"><i>foot</i></a>.
  59.965 +   <li>Replaced <a href="#before"><i>before</i></a> with <a
  59.966 +    href="#head"><i>head</i></a> and <a href="#after"><i>after</i></a> with
  59.967 +    <a href="#foot"><i>foot</i></a>.
  59.968    </ul>
  59.969  
  59.970    <h3 class=no-num id=changes-201109> Changes from the <a
  59.971 @@ -3525,7 +3578,7 @@
  59.972     <code>class="example"</code>, like this:
  59.973  
  59.974    <div class=example>
  59.975 -   <p>This is an example of an informative example.</p>
  59.976 +   <p>This is an example of an informative example.
  59.977    </div>
  59.978  
  59.979    <p>Informative notes begin with the word “Note” and are set apart from
  59.980 @@ -3930,307 +3983,6 @@
  59.981     their vertical orientation. In horizontal text, they are typeset in a 90°
  59.982     counter-clockwise rotation from this orientation.
  59.983  
  59.984 -  <h2 class=no-num id=intrinsic-sizing>Appendix D: Intrinsic Dimensions</h2>
  59.985 -
  59.986 -  <p><em>This section is normative.</em>
  59.987 -
  59.988 -  <p>CSS layout has several different concepts of automatic sizing that are
  59.989 -   used in various layout calculations. This section defines some more
  59.990 -   precise terminology to help connect the layout behaviors of this spec to
  59.991 -   the calculations used in other modules, and some new keywords for the
  59.992 -   width and height properties to allow authors to assign elements the
  59.993 -   dimensions resulting from these size calculations.
  59.994 -
  59.995 -  <p>For the purposes of these definitions, a <dfn id=definite>definite</dfn>
  59.996 -   size is one that can be determined without measuring content, i.e. is a
  59.997 -   <var>&lt;length></var>, a size of the initial containing block, or a
  59.998 -   <var>&lt;percentage></var> that is resolved against a <a
  59.999 -   href="#definite"><i>definite</i></a> size. An <dfn
 59.1000 -   id=indefinite>indefinite</dfn> size is one that is not <a
 59.1001 -   href="#definite"><i>definite</i></a>. An <a
 59.1002 -   href="#indefinite"><i>indefinite</i></a> <i>available size</i> is
 59.1003 -   essentially infinite.
 59.1004 -
 59.1005 -  <table class=propdef>
 59.1006 -   <tbody>
 59.1007 -    <tr>
 59.1008 -     <th>Properties:
 59.1009 -
 59.1010 -     <td>‘<code class=property>width</code>’, ‘<code
 59.1011 -      class=property>min-width</code>’, ‘<code
 59.1012 -      class=property>max-width</code>’, ‘<code
 59.1013 -      class=property>height</code>’, ‘<code
 59.1014 -      class=property>min-height</code>’, ‘<code
 59.1015 -      class=property>max-height</code>’
 59.1016 -
 59.1017 -    <tr>
 59.1018 -     <th>New Values:
 59.1019 -
 59.1020 -     <td>‘<a href="#min-content"><code class=css>min-content</code></a>’
 59.1021 -      | ‘<a href="#max-content"><code class=css>max-content</code></a>’ |
 59.1022 -      ‘<a href="#fill-available"><code
 59.1023 -      class=css>fill-available</code></a>’ | ‘<a
 59.1024 -      href="#fit-content"><code class=css>fit-content</code></a>’
 59.1025 -
 59.1026 -    <tr>
 59.1027 -     <th>Initial:
 59.1028 -
 59.1029 -     <td>as defined in <a href="#CSS21"
 59.1030 -      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 59.1031 -
 59.1032 -    <tr>
 59.1033 -     <th>Applies to:
 59.1034 -
 59.1035 -     <td>as defined in <a href="#CSS21"
 59.1036 -      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 59.1037 -
 59.1038 -    <tr>
 59.1039 -     <th>Inherited:
 59.1040 -
 59.1041 -     <td>as defined in <a href="#CSS21"
 59.1042 -      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 59.1043 -
 59.1044 -    <tr>
 59.1045 -     <th>Percentages:
 59.1046 -
 59.1047 -     <td>as defined in <a href="#CSS21"
 59.1048 -      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 59.1049 -
 59.1050 -    <tr>
 59.1051 -     <th>Media:
 59.1052 -
 59.1053 -     <td>as defined in <a href="#CSS21"
 59.1054 -      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 59.1055 -
 59.1056 -    <tr>
 59.1057 -     <th>Computed value:
 59.1058 -
 59.1059 -     <td>specified value if keyword specified, else as defined in <a
 59.1060 -      href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 59.1061 -  </table>
 59.1062 -
 59.1063 -  <p>There are four types of automatically-determined sizes in CSS (which are
 59.1064 -   represented in the width and height properties by the keywords defined
 59.1065 -   above):
 59.1066 -   <!-- XXX Make these anchors dated once CSS2.1 hits REC, since we might
 59.1067 -  decide to fix these gross editorial inconsistencies at some point in
 59.1068 -  the errata. -->
 59.1069 -   
 59.1070 -
 59.1071 -  <dl>
 59.1072 -   <dt><dfn id=min-content>min-content</dfn>
 59.1073 -
 59.1074 -   <dd>Called the <i>preferred minimum width</i> in <a
 59.1075 -    href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
 59.1076 -    and the <i>minimum content width</i> in <a
 59.1077 -    href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>,
 59.1078 -    the <dfn id=min-content-measure>min-content measure</dfn> is defined
 59.1079 -    roughly as the narrowest measure a box could take while fitting around
 59.1080 -    its contents if <em>all</em> line break opportunities within the box were
 59.1081 -    taken.
 59.1082 -
 59.1083 -   <dt><dfn id=max-content>max-content</dfn>
 59.1084 -
 59.1085 -   <dd>Called the <i>preferred width</i> in <a
 59.1086 -    href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
 59.1087 -    and the <i>maximum cell width</i> in <a
 59.1088 -    href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>,
 59.1089 -    the <dfn id=max-content-measure>max-content measure</dfn> is defined
 59.1090 -    roughly as the narrowest measure a box could take while fitting around
 59.1091 -    its contents if <em>none</em> of the optional line break opportunities
 59.1092 -    within the box were taken.
 59.1093 -
 59.1094 -   <dt><dfn id=fill-available>fill-available</dfn>
 59.1095 -
 59.1096 -   <dd>Called the <i>available width</i> in <a
 59.1097 -    href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
 59.1098 -    and computed by the rules in <a
 59.1099 -    href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>,
 59.1100 -    the <dfn id=fill-available-measure>fill-available measure</dfn> is
 59.1101 -    calculated by subtracting out the element's margins, borders, and padding
 59.1102 -    from the <a href="#available-measure"><i>available measure</i></a> and
 59.1103 -    flooring the result at zero. If the available measure is infinite, then a
 59.1104 -    <dfn id=fallback-measure>fallback available measure</dfn> is used in
 59.1105 -    place of the <a href="#available-measure"><i>available measure</i></a> in
 59.1106 -    this calculation. Unless otherwise specified, this is the measure of the
 59.1107 -    initial containing block. The <dfn
 59.1108 -    id=fill-available-extent>fill-available extent</dfn> is similarly
 59.1109 -    calculated by using the corresponding values from the block dimension.
 59.1110 -    <p class=issue>There have been some suggestions on improving this
 59.1111 -     definition for extents, see <a
 59.1112 -     href="http://lists.w3.org/Archives/Public/www-style/2009Nov/0286.html">dbaron</a>‘<code
 59.1113 -     class=css>s message and <a
 59.1114 -     href="http://lists.w3.org/Archives/Public/www-style/2012Jun/0129.html">tab</a></code>’s
 59.1115 -     message.
 59.1116 -
 59.1117 -   <dt><dfn id=fit-content>fit-content</dfn>
 59.1118 -
 59.1119 -   <dd>Called the <i>shrink-to-fit</i> width in <a
 59.1120 -    href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>,
 59.1121 -    and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS
 59.1122 -    Multi-column Layout § 3.4</a>, the <dfn
 59.1123 -    id=fit-content-measure>fit-content measure</dfn> is defined as
 59.1124 -    <code>min(<a href="#max-content"><i>max-content</i></a>, max(<a
 59.1125 -    href="#min-content"><i>min-content</i></a>, <a
 59.1126 -    href="#fill-available"><i>fill-available</i></a>))</code> if the
 59.1127 -    available measure is finite, and as the <a
 59.1128 -    href="#max-content"><i>max-content</i></a> measure otherwise. The <dfn
 59.1129 -    id=fit-content-extent>fit-content extent</dfn> is calculated from the
 59.1130 -    same expression applied to the block dimension.
 59.1131 -  </dl>
 59.1132 -
 59.1133 -  <p>For the layout models in CSS2.1, both the <dfn
 59.1134 -   id=min-content-extent>min-content extent</dfn> and <dfn
 59.1135 -   id=max-content-extent>max-content extent</dfn> of non-replaced elements
 59.1136 -   are defined as the content extent as defined (for horizontal writing
 59.1137 -   modes) in <a
 59.1138 -   href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a>
 59.1139 -   and <a
 59.1140 -   href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a>
 59.1141 -   for elements with ‘<code class=css>height: auto</code>’.
 59.1142 -
 59.1143 -  <p>For replaced elements, the <a href="#min-content"><i>min-content</i></a>
 59.1144 -   and <a href="#max-content"><i>max-content</i></a> sizes are equivalent and
 59.1145 -   correspond to the used size of the replaced element according to the
 59.1146 -   ‘<code class=css>auto</code>’ width and height calculations.
 59.1147 -
 59.1148 -  <h3 class=no-num id=multicol-intrinsic> Intrinsic Sizes in Multi-column
 59.1149 -   Layout</h3>
 59.1150 -
 59.1151 -  <p>The <a href="#min-content"><i>min-content</i></a> and <a
 59.1152 -   href="#max-content"><i>max-content</i></a> sizes of a multi-column element
 59.1153 -   are undefined per <a href="#CSS3COL"
 59.1154 -   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>. A future specification
 59.1155 -   may define them. <!-- Sketchbook area. See 
 59.1156 -  http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html
 59.1157 -  http://lists.w3.org/Archives/Public/www-style/2011May/0468.html
 59.1158 -  
 59.1159 -<h4 id="multicol-intrinsic-measures">
 59.1160 -Intrinsic Sizes for Multi-column Elements</h4>
 59.1161 -
 59.1162 -  <p class="issue">This section is under discussion and may be removed</p>
 59.1163 -
 59.1164 -  <dl>
 59.1165 -    <dt>min-content</dt>
 59.1166 -    <dd>The <i>min-content</i> measure of the multi-column element is
 59.1167 -      the <i>min-content</i> measure of the multi-column element's
 59.1168 -      contents.
 59.1169 -    <dt>max-content</dt>
 59.1170 -  </dl>
 59.1171 -
 59.1172 -  <p>For multi-column elements laid out with infinite available measure (see
 59.1173 -    <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>),
 59.1174 -    the <i>min-content</i> extent is the extent that would result
 59.1175 -    from taking every permissible pagination break as a column break, and the
 59.1176 -    <i>max-content</i> extent is the extent that would result from taking
 59.1177 -    only the forced breaks. For all other multi-column elements it is, like
 59.1178 -    CSS2.1 block-level boxes, the extent that would be calculated for an
 59.1179 -    ''auto'' extent per [[CSS3MULTICOL]].
 59.1180 -
 59.1181 -NOTES FROM ROSSEN:
 59.1182 -  min-content measure is min(column-width, min-content)
 59.1183 -  max-content measure is
 59.1184 -    1. Pass w/ colspans displ: none;
 59.1185 -       Get width
 59.1186 -    2. Pass with colspans only in width
 59.1187 -       Get remaining height
 59.1188 -    3. Pass w/ spans again using remaining height
 59.1189 -       Get width
 59.1190 -    4. Layout in width as final
 59.1191 -    Will lay out perfectly without colspans; will have some slack but no
 59.1192 -    overflow when colspans present.
 59.1193 -
 59.1194 -<h4 id="multicol-intrinsic-columns">
 59.1195 -Intrinsic Sizes for Columns</h4>
 59.1196 --->
 59.1197 -   
 59.1198 -
 59.1199 -  <table class=propdef>
 59.1200 -   <tbody>
 59.1201 -    <tr>
 59.1202 -     <th>Property:
 59.1203 -
 59.1204 -     <td>‘<code class=property>column-width</code>’
 59.1205 -
 59.1206 -    <tr>
 59.1207 -     <th>New Values:
 59.1208 -
 59.1209 -     <td>‘<a href="#min-content"><code class=css>min-content</code></a>’
 59.1210 -      | ‘<a href="#max-content"><code class=css>max-content</code></a>’ |
 59.1211 -      ‘<a href="#fill-available"><code
 59.1212 -      class=css>fill-available</code></a>’ | ‘<a
 59.1213 -      href="#fit-content"><code class=css>fit-content</code></a>’
 59.1214 -
 59.1215 -    <tr>
 59.1216 -     <th>Initial:
 59.1217 -
 59.1218 -     <td>as defined in <a href="#CSS3COL"
 59.1219 -      rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
 59.1220 -
 59.1221 -    <tr>
 59.1222 -     <th>Applies to:
 59.1223 -
 59.1224 -     <td>as defined in <a href="#CSS3COL"
 59.1225 -      rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
 59.1226 -
 59.1227 -    <tr>
 59.1228 -     <th>Inherited:
 59.1229 -
 59.1230 -     <td>as defined in <a href="#CSS3COL"
 59.1231 -      rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
 59.1232 -
 59.1233 -    <tr>
 59.1234 -     <th>Percentages:
 59.1235 -
 59.1236 -     <td>as defined in <a href="#CSS3COL"
 59.1237 -      rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
 59.1238 -
 59.1239 -    <tr>
 59.1240 -     <th>Media:
 59.1241 -
 59.1242 -     <td>as defined in <a href="#CSS3COL"
 59.1243 -      rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
 59.1244 -
 59.1245 -    <tr>
 59.1246 -     <th>Computed value:
 59.1247 -
 59.1248 -     <td>specified value if keyword specified, else as defined in <a
 59.1249 -      href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
 59.1250 -  </table>
 59.1251 -
 59.1252 -  <p>When used as values for <a
 59.1253 -   href="http://www.w3.org/TR/css3-multicol/#cw">‘<code
 59.1254 -   class=property>column-width</code>’</a>, the new keywords specify the
 59.1255 -   optimal column width:
 59.1256 -
 59.1257 -  <dl>
 59.1258 -   <dt>‘<a href="#min-content"><code class=css>min-content</code></a>’
 59.1259 -
 59.1260 -   <dd>Specifies the optimal column width as the <a
 59.1261 -    href="#min-content-measure"><i>min-content measure</i></a> of the
 59.1262 -    multi-column element's contents.
 59.1263 -
 59.1264 -   <dt>‘<a href="#max-content"><code class=css>max-content</code></a>’
 59.1265 -
 59.1266 -   <dd>Specifies the optimal column width as the <a
 59.1267 -    href="#max-content-measure"><i>max-content measure</i></a> of the
 59.1268 -    multi-column element's contents.
 59.1269 -
 59.1270 -   <dt>‘<a href="#fill-available"><code
 59.1271 -    class=css>fill-available</code></a>’
 59.1272 -
 59.1273 -   <dd>Specifies the optimal column width as the <a
 59.1274 -    href="#fill-available-measure"><i>fill-available measure</i></a> of the
 59.1275 -    multi-column element.
 59.1276 -
 59.1277 -   <dt>‘<a href="#fit-content"><code class=css>fit-content</code></a>’
 59.1278 -
 59.1279 -   <dd>Specifies the optimal column width as <code>min(<a
 59.1280 -    href="#max-content"><i>max-content</i></a>, max(<a
 59.1281 -    href="#min-content"><i>min-content</i></a>, <a
 59.1282 -    href="#fill-available"><i>fill-available</i></a>))</code>.
 59.1283 -  </dl>
 59.1284 -
 59.1285    <h2 class=no-num id=references> References</h2>
 59.1286  
 59.1287    <h3 class=no-num id=normative-references> Normative references</h3>
 59.1288 @@ -4248,17 +4000,27 @@
 59.1289      Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
 59.1290      2011. W3C Recommendation. URL: <a
 59.1291      href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
 59.1292 -    </dd>
 59.1293 +   </dd>
 59.1294     <!---->
 59.1295  
 59.1296 +   <dt id=CSS3-SIZING>[CSS3-SIZING]
 59.1297 +
 59.1298 +   <dd>Tab Atkins; Elika J. Etemad. <a
 59.1299 +    href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927"><cite>CSS
 59.1300 +    Intrinsic and Extrinsic Sizing Level 3.</cite></a> 27 September 2012. W3C
 59.1301 +    Working Draft. (Work in progress.) URL: <a
 59.1302 +    href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927">http://www.w3.org/TR/2012/WD-css3-sizing-20120927</a>
 59.1303 +   </dd>
 59.1304 +   <!---->
 59.1305 +
 59.1306     <dt id=CSS3BG>[CSS3BG]
 59.1307  
 59.1308     <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
 59.1309 -    href="http://www.w3.org/TR/2012/CR-css3-background-20120417/"><cite>CSS
 59.1310 -    Backgrounds and Borders Module Level 3.</cite></a> 17 April 2012. W3C
 59.1311 +    href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
 59.1312 +    Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
 59.1313      Candidate Recommendation. (Work in progress.) URL: <a
 59.1314 -    href="http://www.w3.org/TR/2012/CR-css3-background-20120417/">http://www.w3.org/TR/2012/CR-css3-background-20120417/</a>
 59.1315 -    </dd>
 59.1316 +    href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
 59.1317 +   </dd>
 59.1318     <!---->
 59.1319  
 59.1320     <dt id=CSS3COL>[CSS3COL]
 59.1321 @@ -4268,7 +4030,7 @@
 59.1322      Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
 59.1323      Recommendation. (Work in progress.) URL: <a
 59.1324      href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
 59.1325 -    </dd>
 59.1326 +   </dd>
 59.1327     <!---->
 59.1328  
 59.1329     <dt id=RFC2119>[RFC2119]
 59.1330 @@ -4277,7 +4039,7 @@
 59.1331      words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
 59.1332      RFC 2119. URL: <a
 59.1333      href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
 59.1334 -    </dd>
 59.1335 +   </dd>
 59.1336     <!---->
 59.1337  
 59.1338     <dt id=SVG11>[SVG11]
 59.1339 @@ -4287,7 +4049,7 @@
 59.1340      Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
 59.1341      W3C Recommendation. URL: <a
 59.1342      href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
 59.1343 -    </dd>
 59.1344 +   </dd>
 59.1345     <!---->
 59.1346  
 59.1347     <dt id=UAX11>[UAX11]
 59.1348 @@ -4296,7 +4058,7 @@
 59.1349      href="http://www.unicode.org/reports/tr11/"><cite>East Asian
 59.1350      Width.</cite></a> 17 January 2012. Unicode Standard Annex #11. URL: <a
 59.1351      href="http://www.unicode.org/reports/tr11/">http://www.unicode.org/reports/tr11/</a>
 59.1352 -    </dd>
 59.1353 +   </dd>
 59.1354     <!---->
 59.1355  
 59.1356     <dt id=UAX24>[UAX24]
 59.1357 @@ -4305,7 +4067,7 @@
 59.1358      href="http://www.unicode.org/reports/tr24/"><cite>Unicode Script
 59.1359      Property.</cite></a> 13 January 2012. Unicode Standard Annex #24. URL: <a
 59.1360      href="http://www.unicode.org/reports/tr24/">http://www.unicode.org/reports/tr24/</a>
 59.1361 -    </dd>
 59.1362 +   </dd>
 59.1363     <!---->
 59.1364  
 59.1365     <dt id=UAX29>[UAX29]
 59.1366 @@ -4315,7 +4077,7 @@
 59.1367      Segmentation.</cite></a> 24 January 2012. Unicode Standard Annex #29.
 59.1368      URL: <a
 59.1369      href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
 59.1370 -    </dd>
 59.1371 +   </dd>
 59.1372     <!---->
 59.1373  
 59.1374     <dt id=UAX44>[UAX44]
 59.1375 @@ -4324,7 +4086,7 @@
 59.1376      href="http://www.unicode.org/reports/tr44/"><cite>Unicode Character
 59.1377      Database.</cite></a> 23 January 2012. Unicode Standard Annex #44. URL: <a
 59.1378      href="http://www.unicode.org/reports/tr44/">http://www.unicode.org/reports/tr44/</a>
 59.1379 -    </dd>
 59.1380 +   </dd>
 59.1381     <!---->
 59.1382  
 59.1383     <dt id=UAX9>[UAX9]
 59.1384 @@ -4333,7 +4095,7 @@
 59.1385      href="http://www.unicode.org/reports/tr9/"><cite>Unicode Bidirectional
 59.1386      Algorithm.</cite></a> 16 January 2012. Unicode Standard Annex #9. URL: <a
 59.1387      href="http://www.unicode.org/reports/tr9/">http://www.unicode.org/reports/tr9/</a>
 59.1388 -    </dd>
 59.1389 +   </dd>
 59.1390     <!---->
 59.1391  
 59.1392     <dt id=UNICODE>[UNICODE]
 59.1393 @@ -4344,7 +4106,17 @@
 59.1394      Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated
 59.1395      from time to time by the publication of new versions URL: <a
 59.1396      href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a>
 59.1397 -    </dd>
 59.1398 +   </dd>
 59.1399 +   <!---->
 59.1400 +
 59.1401 +   <dt id=UTR50>[UTR50]
 59.1402 +
 59.1403 +   <dd>Eric Muller. <a
 59.1404 +    href="http://www.unicode.org/reports/tr50/tr50-5.html"><cite>Unicode
 59.1405 +    Properties for Vertical Text Layout.</cite></a> 17 May 2012. Proposed
 59.1406 +    Draft Unicode Technical Report #50. URL: <a
 59.1407 +    href="http://www.unicode.org/reports/tr50/tr50-5.html">http://www.unicode.org/reports/tr50/tr50-5.html</a>
 59.1408 +   </dd>
 59.1409     <!---->
 59.1410    </dl>
 59.1411    <!--end-normative-->
 59.1412 @@ -4364,17 +4136,17 @@
 59.1413      Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
 59.1414      Recommendation. URL: <a
 59.1415      href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
 59.1416 -    </dd>
 59.1417 +   </dd>
 59.1418     <!---->
 59.1419  
 59.1420     <dt id=CSS3-FONTS>[CSS3-FONTS]
 59.1421  
 59.1422     <dd>John Daggett. <a
 59.1423 -    href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/"><cite>CSS Fonts
 59.1424 -    Module Level 3.</cite></a> 4 October 2011. W3C Working Draft. (Work in
 59.1425 +    href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/"><cite>CSS Fonts
 59.1426 +    Module Level 3.</cite></a> 23 August 2012. W3C Working Draft. (Work in
 59.1427      progress.) URL: <a
 59.1428 -    href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/">http://www.w3.org/TR/2011/WD-css3-fonts-20111004/</a>
 59.1429 -    </dd>
 59.1430 +    href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">http://www.w3.org/TR/2012/WD-css3-fonts-20120823/</a>
 59.1431 +   </dd>
 59.1432     <!---->
 59.1433  
 59.1434     <dt id=CSS3COLOR>[CSS3COLOR]
 59.1435 @@ -4383,7 +4155,7 @@
 59.1436      href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
 59.1437      Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
 59.1438      href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
 59.1439 -    </dd>
 59.1440 +   </dd>
 59.1441     <!---->
 59.1442  
 59.1443     <dt id=CSS3LIST>[CSS3LIST]
 59.1444 @@ -4393,7 +4165,7 @@
 59.1445      and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft.
 59.1446      (Work in progress.) URL: <a
 59.1447      href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a>
 59.1448 -    </dd>
 59.1449 +   </dd>
 59.1450     <!---->
 59.1451  
 59.1452     <dt id=CSS3PAGE>[CSS3PAGE]
 59.1453 @@ -4403,17 +4175,17 @@
 59.1454      Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
 59.1455      progress.) URL: <a
 59.1456      href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
 59.1457 -    </dd>
 59.1458 +   </dd>
 59.1459     <!---->
 59.1460  
 59.1461     <dt id=CSS3TEXT>[CSS3TEXT]
 59.1462  
 59.1463     <dd>Elika J. Etemad; Koji Ishii. <a
 59.1464 -    href="http://www.w3.org/TR/2012/WD-css3-text-20120119/"><cite>CSS Text
 59.1465 -    Level 3.</cite></a> 19 January 2012. W3C Working Draft. (Work in
 59.1466 +    href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text
 59.1467 +    Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in
 59.1468      progress.) URL: <a
 59.1469 -    href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a>
 59.1470 -    </dd>
 59.1471 +    href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a>
 59.1472 +   </dd>
 59.1473     <!---->
 59.1474  
 59.1475     <dt id=HTML401>[HTML401]
 59.1476 @@ -4422,7 +4194,7 @@
 59.1477      href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
 59.1478      Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
 59.1479      href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
 59.1480 -    </dd>
 59.1481 +   </dd>
 59.1482     <!---->
 59.1483  
 59.1484     <dt id=HTML5>[HTML5]
 59.1485 @@ -4431,7 +4203,7 @@
 59.1486      href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
 59.1487      25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
 59.1488      href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
 59.1489 -    </dd>
 59.1490 +   </dd>
 59.1491     <!---->
 59.1492  
 59.1493     <dt id=UTN22>[UTN22]
 59.1494 @@ -4441,16 +4213,6 @@
 59.1495      #22. URL: <a
 59.1496      href="http://unicode.org/notes/tn22/">http://unicode.org/notes/tn22/</a></dd>
 59.1497     <!---->
 59.1498 -
 59.1499 -   <dt id=UTR50>[UTR50]
 59.1500 -
 59.1501 -   <dd>Eric Muller. <a
 59.1502 -    href="http://www.unicode.org/reports/tr50/tr50-5.html"><cite>Unicode
 59.1503 -    Properties for Vertical Text Layout.</cite></a> 17 May 2012. Proposed
 59.1504 -    Draft Unicode Technical Report #50. URL: <a
 59.1505 -    href="http://www.unicode.org/reports/tr50/tr50-5.html">http://www.unicode.org/reports/tr50/tr50-5.html</a>
 59.1506 -    </dd>
 59.1507 -   <!---->
 59.1508    </dl>
 59.1509    <!--end-informative-->
 59.1510  
 59.1511 @@ -4495,36 +4257,6 @@
 59.1512  
 59.1513       <td>
 59.1514  
 59.1515 -     <td>as defined in [CSS21]
 59.1516 -
 59.1517 -     <td>as defined in [CSS21]
 59.1518 -
 59.1519 -     <td>as defined in [CSS21]
 59.1520 -
 59.1521 -     <td>as defined in [CSS21]
 59.1522 -
 59.1523 -     <td>as defined in [CSS21]
 59.1524 -
 59.1525 -    <tr>
 59.1526 -     <th><span class=property></span>
 59.1527 -
 59.1528 -     <td>
 59.1529 -
 59.1530 -     <td>as defined in [CSS3COL]
 59.1531 -
 59.1532 -     <td>as defined in [CSS3COL]
 59.1533 -
 59.1534 -     <td>as defined in [CSS3COL]
 59.1535 -
 59.1536 -     <td>as defined in [CSS3COL]
 59.1537 -
 59.1538 -     <td>as defined in [CSS3COL]
 59.1539 -
 59.1540 -    <tr>
 59.1541 -     <th><span class=property></span>
 59.1542 -
 59.1543 -     <td>
 59.1544 -
 59.1545       <td>head
 59.1546  
 59.1547       <td>same as CSS2.1
    60.1 --- a/css3-writing-modes/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    60.2 +++ b/css3-writing-modes/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    60.3 @@ -887,7 +887,7 @@
    60.4  <!-- -->                       &lt;option>français
    60.5  <!-- -->                       &lt;option>فارسی
    60.6  <!-- -->                       &lt;option>中文
    60.7 -<!-- -->                       &lt;option>日本语&lt;/select>&lt;/label>
    60.8 +<!-- -->                       &lt;option>日本語&lt;/select>&lt;/label>
    60.9  <!-- -->&lt;/form></pre>
   60.10  
   60.11      <p><img alt="Screenshot of vertical layout: the input element is
   60.12 @@ -1349,41 +1349,32 @@
   60.13    <p class="note">Changing the value of this property may affect inline-level alignment.
   60.14      Refer to <a href="#text-baselines">Text Baselines</a> for more details.</p>
   60.15  
   60.16 -<h4 id=vertical-orientations>
   60.17 -Vertical Orientations</h4>
   60.18 -
   60.19 -  <p><a href="vosimple.txt">This data file</a>
   60.20 -    defines two properties in UCD format [[!UAX44]]:</p>
   60.21 +<h4 id='vertical-orientations'>
   60.22 +Mixed Vertical Orientations</h4>
   60.23 +
   60.24 +  <p>
   60.25 +    [[!UTR50]] defines the "mixed vertical orientation" (MVO) property in UCD format [[!UAX44]].
   60.26 +    When 'text-orientation' is ''mixed-right'',
   60.27 +    the UA must render a <i>character</i> upright if the MVO value is ''U'', ''T'', ''Tu'', or ''Tr'',
   60.28 +    or else sideways (90&deg; clockwise from horizontal) if ''R''.
   60.29 +
   60.30 +  <p class='issue'>
   60.31 +    As of the time of publication,
   60.32 +    Unicode has not yet officially updated its orientation data to account for the many errata that were accepted in June 2012.
   60.33 +    Therefore, the official UTR50 data (version 5) should not be used.
   60.34 +    (Instead, see <a href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this draft of version 6</a>.)
   60.35 +    When Unicode publishes a proper update,
   60.36 +    this spec will update its references accordingly.
   60.37 +    
   60.38 +<h4 id='vertical-font-features'>
   60.39 +Vertical Typesetting and Font Features</h4>
   60.40 +
   60.41 +  <p>When typesetting text in ''mixed-right'' and ''upright'' orientations:
   60.42 +  
   60.43    <dl>
   60.44 -    <dt><dfn>MVOsimple</dfn></dt>
   60.45 -    <dd>This property defines character orientations for ''mixed-right''.</dd>
   60.46 -    <dt><dfn>SVOsimple</dfn></dt>
   60.47 -    <dd>This property defines character orientations for ''upright''.</dd>
   60.48 -  </dl>
   60.49 -  <p>The UA must render a <i>character</i> upright if the value is ''U'',
   60.50 -    or sideways (90&deg; clockwise from horizontal) if ''R''.</p>
   60.51 -  <div class="note">
   60.52 -    'MVOsimple' and 'SVOsimple' derived properties are defined in terms of
   60.53 -    the corresponding Unicode porperty value, MVO and SVO respectively.
   60.54 -    If the orientation value is ''R'' then the simple value is ''R''.
   60.55 -    If the orientation value is ''U'', ''T'', ''Tu'', or ''Tr'' then
   60.56 -    the simple value is ''U''.
   60.57 -    The one exception is for scripts like Mongolian for which special handling
   60.58 -    is required for the stacked case due to the vertical-only nature of the underlying
   60.59 -    script.
   60.60 -  <p>
   60.61 -    Going forward, CSS Writing Modes will be tracking changes in [[UTR50]],
   60.62 -    and thus converging with (rather than diverging from) Unicode.
   60.63 -  </div>
   60.64 -    
   60.65 -<h4 id=vertical-font-features>
   60.66 -Vertical Typesetting and Font Features</h4>
   60.67 -
   60.68 -  <p>When typesetting text in vertical writing modes:
   60.69 -  
   60.70 -  <ul>
   60.71 -    <li>Upright characters in ''mixed-right'' and ''upright'' modes are
   60.72 -      typeset with vertical font metrics.
   60.73 +    <dt>upright characters
   60.74 +    <dd>
   60.75 +      Are typeset with vertical font metrics.
   60.76        The UA must synthesize vertical font metrics for fonts that lack them.
   60.77        (This specification does not define heuristics for synthesizing such metrics.)
   60.78        Additionally, font features (such as alternate glyphs) intended
   60.79 @@ -1391,22 +1382,45 @@
   60.80        (E.g. the OpenType ''vert'' feature must be enabled.)
   60.81        Furthermore, characters from horizontal cursive scripts (such as Arabic)
   60.82        are shaped in their isolated forms when typeset upright.
   60.83 -    <li>Sideways characters in ''mixed-right'' and ''upright'' modes are
   60.84 -      typeset with horizontal metrics,
   60.85 +      <p class="note">
   60.86 +        Note that in OpenType systems,
   60.87 +        <i>characters</i> from the Mongolian and Phags-pa scripts
   60.88 +        must actually be rendered <a href="#typeset-sideways">sideways</a>.
   60.89 +        This is because the "upright" orientation in the Unicode code charts (which assume vertical typesetting)
   60.90 +        and the "upright" orientation of the glyphs of these scripts in most OpenType fonts (which assume horizontal typesetting)
   60.91 +        don't match.
   60.92 +      <p class="note">Note that even when typeset "upright",
   60.93 +        some glyphs should appear rotated.
   60.94 +        For example, dashes and enclosing punctuation 
   60.95 +        (such as 〈 LEFT ANGLE BRACKET U+3008)
   60.96 +        should be oriented relative to the inline axis.
   60.97 +        In OpenType, this is typically handled by glyph substitution,
   60.98 +        although not all fonts have alternate glyphs for all relevant codepoints.
   60.99 +        (East Asian fonts usually provide alternates for East Asian codepoints,
  60.100 +        but Western fonts typically lack any vertical typesetting features.)
  60.101 +        Unicode published draft data on which <i>characters</i> should appear sideways
  60.102 +        as the SVO property in <a href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this data file</a>;
  60.103 +        however, this property has been abandoned for future revisions of [[!UTR50]].
  60.104 +
  60.105 +    <dt id='typeset-sideways'>sideways characters 
  60.106 +    <dd>
  60.107 +      Are typeset with horizontal metrics,
  60.108        and vertical typesetting features are not used.
  60.109        However, if the font has features meant to be enabled
  60.110        for sideways text that is typeset in vertical lines
  60.111        (e.g. to adjust brush stroke angles or alignment),
  60.112        those features are used.
  60.113 -      <p class="issue">Propose 'svrt' as an OpenType substitution feature
  60.114 +      <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature
  60.115        that is applied to rotated horizontal text in vertical text runs,
  60.116 -      to handle these cases.
  60.117 -    <li>All text in ''sideways'', ''sideways-right'', and ''sideways-left'' modes is
  60.118 -      typeset using horizontal font metrics and the normal set of features
  60.119 -      used for horizontal text runs.
  60.120 -      Vertical metrics, vertical glyph variations, and any other features meant
  60.121 -      for text typeset in vertical lines are <em>not</em> used.
  60.122 -  </ul>
  60.123 +      to handle these cases.-->
  60.124 +  </dl>
  60.125 +
  60.126 +  <p>
  60.127 +    All text in ''sideways'', ''sideways-right'', and ''sideways-left'' orientations is
  60.128 +    typeset using horizontal font metrics and the normal set of features
  60.129 +    used for horizontal text runs.
  60.130 +    Vertical metrics, vertical glyph variations, and any other features meant
  60.131 +    for text typeset in vertical lines are <em>not</em> used.
  60.132  
  60.133    <p class=issue>This section needs additional work. Suggestions are welcome.
  60.134  
  60.135 @@ -1485,11 +1499,11 @@
  60.136        <dd>The dimension parallel to the flow of text within a line, i.e.
  60.137          the <i>horizontal dimension</i> in horizontal writing modes, and
  60.138          the <i>vertical dimension</i> in vertical writing modes.</dd>
  60.139 -    <dt><dfn>inline-axis</dfn></dt>
  60.140 +    <dt><dfn>block-axis</dfn></dt>
  60.141        <dd>The axis in the block dimension, i.e. the <i>vertical
  60.142          axis</i> in horizontal writing modes and the <i>horizontal
  60.143          axis</i> in vertical writing modes.</dd>
  60.144 -    <dt><dfn>block-axis</dfn></dt>
  60.145 +    <dt><dfn>inline-axis</dfn></dt>
  60.146        <dd>The axis in the inline dimension, i.e. the <i>horizontal
  60.147          axis</i> in horizontal writing modes and the <i>vertical axis</i>
  60.148          in vertical writing modes.</dd>
  60.149 @@ -1519,12 +1533,12 @@
  60.150      defined as follows:
  60.151  
  60.152    <dl>
  60.153 -  <dt><dfn>head</dfn>
  60.154 +  <dt><dfn>head</dfn>/<dfn>before</dfn>
  60.155      <dd>Nominally the side that comes earlier in the block progression,
  60.156      as determined by the 'writing-mode' property: the physical top
  60.157      in ''horizontal-tb'' mode, the right in ''vertical-rl'', and the
  60.158      left in ''vertical-lr''.
  60.159 -  <dt><dfn>foot</dfn>
  60.160 +  <dt><dfn>foot</dfn>/<dfn>after</dfn>
  60.161      <dd>The side opposite <i>head</i>.
  60.162    <dt><dfn>start</dfn>
  60.163      <dd>Nominally the side from which text of its inline base direction
  60.164 @@ -1535,6 +1549,16 @@
  60.165      <dd>The side opposite <i>start</i>.
  60.166    </dl>
  60.167  
  60.168 +  <p class='issue'>
  60.169 +    The naming of the block-axis logical directions is under discussion.
  60.170 +    The before/after set of names is used in XSL-FO,
  60.171 +    but is unfortunately somewhat confusing with DOM-relative directions
  60.172 +    (e.g. the ::before/::after pseudo-elements),
  60.173 +    and is not sufficiently distinct from start/end,
  60.174 +    which is used for the inline axis.
  60.175 +    Feedback is welcome,
  60.176 +    see <a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0321.html">Koji's summary email</a>.
  60.177 +
  60.178    <p class="note">Note that while determining the <i>head</i> and
  60.179      <i>foot</i> sides of a box depends only on the 'writing-mode' property,
  60.180      determining the <i>start</i> and <i>end</i> sides of a box depends not
  60.181 @@ -1901,6 +1925,7 @@
  60.182  
  60.183    <p>When an element has a different 'writing-mode' from its
  60.184      containing block two cases are possible:
  60.185 +
  60.186    <ul>
  60.187      <li>The two writing modes are parallel to each other. (For example,
  60.188        ''vertical-rl'' and ''vertical-lr'').</li>
  60.189 @@ -1908,38 +1933,62 @@
  60.190        example, ''horizontal-tb'' and ''vertical-rl'').</li>
  60.191    </ul>
  60.192  
  60.193 -  <p>To handle the second case, CSS layout calculations are divided into
  60.194 +  <p>
  60.195 +    When an element has a writing mode that is perpendicular to its containing block
  60.196 +    it is said to be in, or establish, an <dfn>orthogonal flow</dfn>.
  60.197 +
  60.198 +  <p>
  60.199 +    To handle this case, CSS layout calculations are divided into
  60.200      two phases: sizing a box, and positioning the box within its flow.
  60.201 -    In the sizing phase&#8212;calculating the width and height of the
  60.202 -    box&#8212;the dimensions of the box and the containing block
  60.203 -    are mapped to the measure and extent and calculations performed
  60.204 -    accordingly using the writing mode of the element.
  60.205 -    In the positioning phase&#8212;calculating the positioning offsets,
  60.206 -    margins, borders, and padding&#8212;the dimensions of the box and
  60.207 -    its containing block are mapped to the measure and extent and
  60.208 -    calculations performed according to the writing mode of the
  60.209 -    containing block.
  60.210 -
  60.211 -  <p>For example, if a vertical block is placed inside a horizontal
  60.212 -    block, then when calculating the physical height (which is the
  60.213 -    measure) of the child block the physical height of the parent
  60.214 -    block is used as the child's containing block measure, even
  60.215 -    though the physical height is the extent, not the measure, of
  60.216 -    the parent block.</p>
  60.217 -
  60.218 -  <p>Since auto margins are resolved consistent with the containing
  60.219 -    block's writing mode, a box establishing an orthogonal flow, can,
  60.220 +
  60.221 +  <ul>
  60.222 +    <li>
  60.223 +      In the sizing phase—calculating the width and height of the
  60.224 +      box—the dimensions of the box and the containing block
  60.225 +      are mapped to the measure and extent and calculations are performed
  60.226 +      accordingly using the writing mode of the <em>element</em>.
  60.227 +    <li>
  60.228 +      In the positioning phase—calculating the positioning offsets,
  60.229 +      margins, borders, and padding—the dimensions of the box and
  60.230 +      its containing block are mapped to the measure and extent and
  60.231 +      calculations are performed according to the writing mode of the
  60.232 +      <em>containing block</em>.
  60.233 +  </ul>
  60.234 +
  60.235 +  <p>Since ''auto'' margins are resolved consistent with the containing
  60.236 +    block's writing mode, a box establishing an orthogonal flow can,
  60.237      once sized, be aligned or centered within its containing block just
  60.238      like other block-level elements by using auto margins.
  60.239  
  60.240 -  <p>It is common in CSS for a containing block to have a defined
  60.241 -    measure, but not a defined extent. This typically happens in
  60.242 +  <div class='example'>
  60.243 +    <p>
  60.244 +      For example, if a vertical block is placed inside a horizontal
  60.245 +      block, then when calculating the physical height (which is the
  60.246 +      measure) of the child block the physical height of the parent
  60.247 +      block is used as the child's containing block measure, even
  60.248 +      though the physical height is the extent, not the measure, of
  60.249 +      the parent block.
  60.250 +
  60.251 +    <p>
  60.252 +      On the other hand,
  60.253 +      because the containing block is in a horizontal writing mode,
  60.254 +      the vertical margins on the child participate in margin-collapsing,
  60.255 +      even though they are in the inline-axis of the child,
  60.256 +      and horizontal auto margins will expand to fill the containing block,
  60.257 +      even though they are in the block-axis of the child.
  60.258 +
  60.259 +    <p class='issue'>
  60.260 +      Add a picture.
  60.261 +  </div>
  60.262 +
  60.263 +  <p>It is common in CSS for a containing block to have a definite
  60.264 +    measure, but not a definite extent. This typically happens in
  60.265      CSS2.1 when a containing block has an ''auto'' height, for
  60.266      example: its width is given by the calculations in
  60.267      <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>,
  60.268      but its extent depends on its contents. In such cases the
  60.269 -    <dfn>available measure</dfn> is defined as the measure of the
  60.270 -    containing block; but the <dfn>available extent</dfn>, which
  60.271 +    <i>available measure</i> is defined as the measure of the
  60.272 +    containing block; but the <i>available extent</i>, which
  60.273      would otherwise be the extent of the containing block, is
  60.274      infinite.
  60.275      
  60.276 @@ -1950,50 +1999,69 @@
  60.277      computations cannot be resolved. In these cases, the initial
  60.278      containing block's size is used as a <i>fallback</i> variable
  60.279      in place of the <i>available measure</i> for calculations that
  60.280 -    require a definite available measure.
  60.281 +    require a definite <i>available measure</i>.
  60.282  
  60.283  <h4 id="orthogonal-auto">
  60.284  Auto-sizing in Orthogonal Flows</h4>
  60.285  
  60.286 -  <p>If the computed measure of an element establishing an orthogonal
  60.287 -    flow is ''auto'', then the used measure is calculated as the
  60.288 -    <i>fit-content</i> (shrink-to-fit) size using
  60.289 -    a <i>fill-available</i> fit into the minimum of the
  60.290 -    <i>available measure</i> (when definite) and the <i>fallback available measure</i>.
  60.291 -    In other words, the calculation becomes
  60.292 -    <code>min(<a href="#max-content"><i>max-content</i></a>,
  60.293 -      max(<a href="#min-content"><i>min-content</i></a>, <a href="#fill-available"><i>fill-available</i></a>, <i>fill-<a href="#fallback-measure">fallback</a></i>))</code>
  60.294 -    (where <i>fill-available</i> is dropped when indefinite).
  60.295 +  <p>
  60.296 +    If the UA does not support CSS Multi-column Layout [[!CSS3COL]]
  60.297 +    and the element is a block container,
  60.298 +    when the computed measure of the element establishing an orthogonal flow is ''auto'', 
  60.299 +    then the used inner measure is calculated as:
  60.300 +  
  60.301 +  <p>
  60.302 +    <code>min(<var>max-content</var>, max(<var>min-content</var>, min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>,
  60.303 +    where:
  60.304 +
  60.305 +  <dl>
  60.306 +    <dt><var>min-content</var>
  60.307 +    <dd>the <a href="http://www.w3.org/TR/css3-sizing/#min-content-measure">min-content measure</a> of the element
  60.308 +
  60.309 +    <dt><var>max-content</var>
  60.310 +    <dd>the <a href="http://www.w3.org/TR/css3-sizing/#max-content-measure">max-content measure</a> of the element
  60.311 +
  60.312 +    <dt><var>fill-available</var>
  60.313 +    <dd>the <a href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available fit</a> into the element's containing block's size in the element's inline axis
  60.314 +
  60.315 +    <dt><var>fill-fallback</var>
  60.316 +    <dd>the <a href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available fit</a> into the initial containing block's size in the element's inline axis
  60.317 +  </dl>
  60.318 +
  60.319 +  <p>
  60.320 +    See [[!CSS3-SIZING]] for further details.
  60.321  
  60.322  <h4 id="orthogonal-multicol">
  60.323  Multi-column Layout in Orthogonal Flows</h4>
  60.324  
  60.325 -  <p>If the UA supports CSS Multi-column Layout [[!CSS3COL]], then
  60.326 +  <p>
  60.327 +    If the UA supports CSS Multi-column Layout [[!CSS3COL]]
  60.328 +    and the element is a block container or multi-column element,
  60.329      for the case where the element's extent or available extent is
  60.330 -    defined but the element's measure is ''auto'':
  60.331 +    <i>definite</i> but the element's measure is ''auto'':
  60.332  
  60.333    <ol>
  60.334 -    <li>If 'column-count' and 'column-width' are both ''auto'', a
  60.335 -      used 'column-width' is calculated for the element as the
  60.336 -      <i>fill-available measure</i> using the minimum of the
  60.337 -      <i>available measure</i> (when definite) and the
  60.338 -      <i>fallback available measure</i> as the <i>available measure</i>.
  60.339 -    <li>If the columns' extent is not fixed, the <i>fill-available
  60.340 -      extent</i> of the element is used.
  60.341 -    <li>The used column-count then follows from filling the resulting
  60.342 -      columns with the element's content.
  60.343 +    <li>
  60.344 +      If 'column-count' and 'column-width' are both ''auto'', 
  60.345 +      calculate the used 'column-width' as 
  60.346 +      the inner measure for ''auto''-sized elements, as defined above.
  60.347 +    <li>
  60.348 +      If the columns' extent is <i>indefinite</i>, 
  60.349 +      the <i>fill-available extent</i> of the element is used.
  60.350 +    <li>
  60.351 +      The used 'column-count' then follows from filling the resulting columns with the element's content.
  60.352    </ol>
  60.353  
  60.354 -  <p>The used measure of the resulting multi-column element is then
  60.355 -    calculated:
  60.356 -    if the content neither wraps nor paginates within the multi-column
  60.357 -    element, then the used measure is the <i>max-content measure</i>
  60.358 -    of the element's contents;
  60.359 -    else it is calculated from the used column width, column count,
  60.360 -    and column gap.
  60.361 -  <p>The used extent of the element is either the used column extent
  60.362 -    (if multiple columns were used) or the <i>max-content extent</i>
  60.363 -    of the content.
  60.364 +  <p>
  60.365 +    The used measure of the resulting multi-column element is then calculated:
  60.366 +    if the content neither line-wraps nor fragments within the multi-column element,
  60.367 +    then the used measure is the <i>max-content measure</i> of the element's contents;
  60.368 +    else it is calculated from the used 'column-width', 'column-count', and 'column-gap'.
  60.369 +
  60.370 +  <p>
  60.371 +    The used extent of the element is either the used column extent
  60.372 +    (if multiple columns were used) 
  60.373 +    or the <i>max-content extent</i> of the content.
  60.374  
  60.375    <p class="note">This should behave the same as the auto-sizing algorithm
  60.376      defined in the previous section, except overflowing content, instead of
  60.377 @@ -2002,12 +2070,12 @@
  60.378      T-shaped documents.</p>
  60.379  
  60.380  <h4 id="orthogonal-pagination">
  60.381 -Paginating Orthogonal Flows</h4>
  60.382 +Fragmenting Orthogonal Flows</h4>
  60.383  
  60.384    <p><em>This section is informative.</em></p>
  60.385  
  60.386 -  <p>With regards to pagination, the rules in CSS2.1 still hold in
  60.387 -    vertical writing modes and orthogonal flows: page break opportunities
  60.388 +  <p>With regards to fragmentation, the rules in CSS2.1 still hold in
  60.389 +    vertical writing modes and orthogonal flows: break opportunities
  60.390      do not occur inside line boxes, only between them.
  60.391      UAs that support [[!CSS3COL]] may break in the (potentially zero-width)
  60.392      gap between columns, however.
  60.393 @@ -2794,7 +2862,7 @@
  60.394    <p>Unicode defines properties for characters, but for 'text-orientation',
  60.395      it is necessary to determine the properties of a grapheme cluster.
  60.396      For the purposes of CSS Writing Modes, the properties of a grapheme
  60.397 -    cluster are given by its base character&#8212;except in two cases:
  60.398 +    cluster are given by its base character—except in two cases:
  60.399    <ul>
  60.400      <li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common
  60.401      script are considered to be Other Symbols (So) in the Common script.
  60.402 @@ -2876,232 +2944,6 @@
  60.403      In horizontal text, they are typeset in a 90&deg; counter-clockwise
  60.404      rotation from this orientation.
  60.405  
  60.406 -<h2 id="intrinsic-sizing" class="no-num">Appendix D:
  60.407 -Intrinsic Dimensions</h2>
  60.408 -
  60.409 -  <p><em>This section is normative.</em></p>
  60.410 -  
  60.411 -  <p>CSS layout has several different concepts of automatic sizing that
  60.412 -    are used in various layout calculations. This section defines some
  60.413 -    more precise terminology to help connect the layout behaviors of this
  60.414 -    spec to the calculations used in other modules, and some new keywords
  60.415 -    for the width and height properties to allow authors to assign elements
  60.416 -    the dimensions resulting from these size calculations.
  60.417 -
  60.418 -  <p>For the purposes of these definitions,
  60.419 -    a <dfn>definite</dfn> size is one that can be determined without measuring content,
  60.420 -    i.e. is a <var>&lt;length></var>, a size of the initial containing block,
  60.421 -    or a <var>&lt;percentage></var> that is resolved against a <i>definite</i> size.
  60.422 -    An <dfn>indefinite</dfn> size is one that is not <i>definite</i>.
  60.423 -    An <i>indefinite</i> <i>available size</i> is essentially infinite.
  60.424 -
  60.425 -  <table class="propdef">
  60.426 -    <tbody>
  60.427 -      <tr>
  60.428 -        <th>Properties:</th>
  60.429 -        <td>'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height'</td>
  60.430 -      </tr>
  60.431 -      <tr>
  60.432 -        <th>New Values:</th>
  60.433 -        <td>''min-content'' | ''max-content'' | ''fill-available'' | ''fit-content''</td>
  60.434 -      </tr>
  60.435 -      <tr>
  60.436 -        <th>Initial:</th>
  60.437 -        <td>as defined in [[!CSS21]]</td>
  60.438 -      </tr>
  60.439 -      <tr>
  60.440 -        <th>Applies to:</th>
  60.441 -        <td>as defined in [[!CSS21]]</td>
  60.442 -      </tr>
  60.443 -      <tr>
  60.444 -        <th>Inherited:</th>
  60.445 -        <td>as defined in [[!CSS21]]</td>
  60.446 -      </tr>
  60.447 -      <tr>
  60.448 -        <th>Percentages:</th>
  60.449 -        <td>as defined in [[!CSS21]]</td>
  60.450 -      </tr>
  60.451 -      <tr>
  60.452 -        <th>Media:</th>
  60.453 -        <td>as defined in [[!CSS21]]</td>
  60.454 -      </tr>
  60.455 -      <tr>
  60.456 -        <th>Computed&#160;value:</th>
  60.457 -        <td>specified value if keyword specified, else as defined in [[!CSS21]]</td>
  60.458 -      </tr>
  60.459 -    </tbody>
  60.460 -  </table>
  60.461 -
  60.462 -  <p>There are four types of automatically-determined sizes in CSS (which
  60.463 -    are represented in the width and height properties by the keywords
  60.464 -    defined above):
  60.465 -
  60.466 -  <!-- XXX Make these anchors dated once CSS2.1 hits REC, since we might
  60.467 -  decide to fix these gross editorial inconsistencies at some point in
  60.468 -  the errata. -->
  60.469 -
  60.470 -  <dl>
  60.471 -    <dt><dfn>min-content</dfn></dt>
  60.472 -    <dd>Called the <i>preferred minimum width</i> in
  60.473 -      <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1&sect;10.3.5</a>
  60.474 -      and the <i>minimum content width</i> in
  60.475 -      <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1&sect;17.5.2.2</a>,
  60.476 -      the <dfn>min-content measure</dfn> is defined roughly as the narrowest
  60.477 -      measure a box could take while fitting around its contents if <em>all</em>
  60.478 -      line break opportunities within the box were taken.
  60.479 -    <dt><dfn>max-content</dfn></dt>
  60.480 -    <dd>Called the <i>preferred width</i> in
  60.481 -      <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1&sect;10.3.5</a>
  60.482 -      and the <i>maximum cell width</i> in
  60.483 -      <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1&sect;17.5.2.2</a>,
  60.484 -      the <dfn>max-content measure</dfn> is defined roughly as the narrowest
  60.485 -      measure a box could take while fitting around its contents if <em>none</em>
  60.486 -      of the optional line break opportunities within the box were taken.
  60.487 -    <dt><dfn>fill-available</dfn></dt>
  60.488 -    <dd>Called the <i>available width</i> in
  60.489 -      <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1&sect;10.3.5</a>
  60.490 -      and computed by the rules in
  60.491 -      <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1&sect;10.3.3</a>,
  60.492 -      the <dfn>fill-available measure</dfn> is calculated by subtracting out
  60.493 -      the element's margins, borders, and padding from the <i>available measure</i>
  60.494 -      and flooring the result at zero.
  60.495 -      If the available measure is infinite, then a <dfn id=fallback-measure>fallback available measure</dfn>
  60.496 -      is used in place of the <i>available measure</i> in this calculation.
  60.497 -      Unless otherwise specified, this is the measure of the initial
  60.498 -      containing block.
  60.499 -      The <dfn>fill-available extent</dfn> is similarly calculated by
  60.500 -      using the corresponding values from the block dimension.
  60.501 -      <p class=issue>There have been some suggestions on improving this definition
  60.502 -        for extents, see <a href="http://lists.w3.org/Archives/Public/www-style/2009Nov/0286.html">dbaron</a>'s message
  60.503 -        and <a href="http://lists.w3.org/Archives/Public/www-style/2012Jun/0129.html">tab</a>'s message.
  60.504 -    <dt><dfn>fit-content</dfn></dt>
  60.505 -    <dd>Called the <i>shrink-to-fit</i> width in
  60.506 -      <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1&sect;10.3.5</a>,
  60.507 -      and
  60.508 -      <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout &sect; 3.4</a>,
  60.509 -      the <dfn>fit-content measure</dfn> is defined as
  60.510 -      <code>min(<i>max-content</i>, max(<i>min-content</i>, <i>fill-available</i>))</code>
  60.511 -      if the available measure is finite, and as the <i>max-content</i>
  60.512 -      measure otherwise. The <dfn>fit-content extent</dfn> is calculated
  60.513 -      from the same expression applied to the block dimension.
  60.514 -  </dl>
  60.515 -
  60.516 -  <p>For the layout models in CSS2.1, both the <dfn>min-content extent</dfn>
  60.517 -    and <dfn>max-content extent</dfn> of non-replaced elements are defined
  60.518 -    as the content extent as defined (for horizontal writing modes) in
  60.519 -    <a href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1&sect;10.6.3</a>
  60.520 -    and <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1&sect;17.5.3</a>
  60.521 -    for elements with ''height: auto''.
  60.522 -
  60.523 -  <p>For replaced elements, the <i>min-content</i> and <i>max-content</i>
  60.524 -    sizes are equivalent and correspond to the used size of the replaced element
  60.525 -    according to the ''auto'' width and height calculations.
  60.526 -
  60.527 -<h3 id="multicol-intrinsic" class="no-num">
  60.528 -Intrinsic Sizes in Multi-column Layout</h3>
  60.529 -
  60.530 -  <p>The <i>min-content</i> and <i>max-content</i> sizes of a multi-column
  60.531 -    element are undefined per [[!CSS3COL]]. A future specification may
  60.532 -    define them.
  60.533 -
  60.534 -<!-- Sketchbook area. See 
  60.535 -  http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html
  60.536 -  http://lists.w3.org/Archives/Public/www-style/2011May/0468.html
  60.537 -  
  60.538 -<h4 id="multicol-intrinsic-measures">
  60.539 -Intrinsic Sizes for Multi-column Elements</h4>
  60.540 -
  60.541 -  <p class="issue">This section is under discussion and may be removed</p>
  60.542 -
  60.543 -  <dl>
  60.544 -    <dt>min-content</dt>
  60.545 -    <dd>The <i>min-content</i> measure of the multi-column element is
  60.546 -      the <i>min-content</i> measure of the multi-column element's
  60.547 -      contents.
  60.548 -    <dt>max-content</dt>
  60.549 -  </dl>
  60.550 -
  60.551 -  <p>For multi-column elements laid out with infinite available measure (see
  60.552 -    <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>),
  60.553 -    the <i>min-content</i> extent is the extent that would result
  60.554 -    from taking every permissible pagination break as a column break, and the
  60.555 -    <i>max-content</i> extent is the extent that would result from taking
  60.556 -    only the forced breaks. For all other multi-column elements it is, like
  60.557 -    CSS2.1 block-level boxes, the extent that would be calculated for an
  60.558 -    ''auto'' extent per [[CSS3MULTICOL]].
  60.559 -
  60.560 -NOTES FROM ROSSEN:
  60.561 -  min-content measure is min(column-width, min-content)
  60.562 -  max-content measure is
  60.563 -    1. Pass w/ colspans displ: none;
  60.564 -       Get width
  60.565 -    2. Pass with colspans only in width
  60.566 -       Get remaining height
  60.567 -    3. Pass w/ spans again using remaining height
  60.568 -       Get width
  60.569 -    4. Layout in width as final
  60.570 -    Will lay out perfectly without colspans; will have some slack but no
  60.571 -    overflow when colspans present.
  60.572 -
  60.573 -<h4 id="multicol-intrinsic-columns">
  60.574 -Intrinsic Sizes for Columns</h4>
  60.575 --->
  60.576 -
  60.577 -  <table class="propdef">
  60.578 -    <tbody>
  60.579 -      <tr>
  60.580 -        <th>Property:</th>
  60.581 -        <td>'column-width'</td>
  60.582 -      </tr>
  60.583 -      <tr>
  60.584 -        <th>New Values:</th>
  60.585 -        <td>''min-content'' | ''max-content'' | ''fill-available'' | ''fit-content''</td>
  60.586 -      </tr>
  60.587 -      <tr>
  60.588 -        <th>Initial:</th>
  60.589 -        <td>as defined in [[!CSS3COL]]</td>
  60.590 -      </tr>
  60.591 -      <tr>
  60.592 -        <th>Applies to:</th>
  60.593 -        <td>as defined in [[!CSS3COL]]</td>
  60.594 -      </tr>
  60.595 -      <tr>
  60.596 -        <th>Inherited:</th>
  60.597 -        <td>as defined in [[!CSS3COL]]</td>
  60.598 -      </tr>
  60.599 -      <tr>
  60.600 -        <th>Percentages:</th>
  60.601 -        <td>as defined in [[!CSS3COL]]</td>
  60.602 -      </tr>
  60.603 -      <tr>
  60.604 -        <th>Media:</th>
  60.605 -        <td>as defined in [[!CSS3COL]]</td>
  60.606 -      </tr>
  60.607 -      <tr>
  60.608 -        <th>Computed&#160;value:</th>
  60.609 -        <td>specified value if keyword specified, else as defined in [[!CSS3COL]]</td>
  60.610 -      </tr>
  60.611 -    </tbody>
  60.612 -  </table>
  60.613 -
  60.614 -  <p>When  used as values for <a href="http://www.w3.org/TR/css3-multicol/#cw">'column-width'</a>,
  60.615 -    the new keywords specify the optimal column width:
  60.616 -
  60.617 -  <dl>
  60.618 -    <dt>''min-content''
  60.619 -    <dd>Specifies the optimal column width as the <i>min-content measure</i>
  60.620 -      of the multi-column element's contents.
  60.621 -    <dt>''max-content''
  60.622 -    <dd>Specifies the optimal column width as the <i>max-content measure</i>
  60.623 -      of the multi-column element's contents.
  60.624 -    <dt>''fill-available''
  60.625 -    <dd>Specifies the optimal column width as the <i>fill-available measure</i>
  60.626 -      of the multi-column element.
  60.627 -    <dt>''fit-content''
  60.628 -    <dd>Specifies the optimal column width as
  60.629 -      <code>min(<i>max-content</i>, max(<i>min-content</i>, <i>fill-available</i>))</code>.
  60.630 -  </dl>
  60.631 -
  60.632  <h2 class="no-num">
  60.633  References</h2>
  60.634  
    61.1 --- a/css4-background/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    61.2 +++ b/css4-background/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    61.3 @@ -2,10 +2,23 @@
    61.4  "http://www.w3.org/TR/html4/strict.dtd">
    61.5  
    61.6  <html lang=en>
    61.7 - <head>
    61.8 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
    61.9    <title>CSS Backgrounds and Borders Module Level 4</title>
   61.10 +
   61.11 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   61.12 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   61.13 +   rel=dcterms.rights>
   61.14 +  <meta content="CSS Backgrounds and Borders Module Level 4"
   61.15 +   name=dcterms.title>
   61.16 +  <meta content=text name=dcterms.type>
   61.17 +  <meta content=2012-10-12 name=dcterms.issued>
   61.18 +  <meta content="Bert Bos" name=dcterms.creator>
   61.19 +  <meta content="Elika J. Etemad" name=dcterms.creator>
   61.20 +  <meta content="Brad Kemper" name=dcterms.creator>
   61.21 +  <meta content=W3C name=dcterms.publisher>
   61.22 +  <meta content="http://www.w3.org/TR/2012/ED-css3-background-20121012/"
   61.23 +   name=dcterms.identifier>
   61.24    <link href="../default.css" rel=stylesheet type="text/css">
   61.25 -
   61.26    <style type="text/css">
   61.27      .prod { font-family: inherit; font-size: inherit }
   61.28      pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
   61.29 @@ -13,7 +26,7 @@
   61.30      #box-shadow-samples td { background: white; color: black; }
   61.31    </style>
   61.32    <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   61.33 -  type="text/css">
   61.34 +   type="text/css">
   61.35  
   61.36   <body>
   61.37    <div class=head> <!--begin-logo-->
   61.38 @@ -22,27 +35,25 @@
   61.39  
   61.40     <h1>CSS Backgrounds and Borders Module Level 4</h1>
   61.41  
   61.42 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 June 2012</h2>
   61.43 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 October
   61.44 +    2012</h2>
   61.45  
   61.46     <dl>
   61.47      <dt>This version:
   61.48  
   61.49 -    <dd><!-- <a href="http://www.w3.org/TR/2012/CR-css3-background-20120622">http://www.w3.org/TR/2012/ED-css3-background-20120622/</a> -->
   61.50 +    <dd><!-- <a href="http://www.w3.org/TR/2012/CR-css3-background-20121012">http://www.w3.org/TR/2012/ED-css3-background-20121012/</a> -->
   61.51       <a
   61.52       href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
   61.53 -     
   61.54  
   61.55      <dt>Latest version:
   61.56  
   61.57      <dd><a
   61.58       href="http://www.w3.org/TR/css3-background">http://www.w3.org/TR/css3-background/</a>
   61.59 -     
   61.60  
   61.61      <dt>Previous versions:
   61.62  
   61.63      <dd><a
   61.64       href="http://www.w3.org/TR/2010/WD-css3-background-20100612/">http://www.w3.org/TR/2010/WD-css3-background-20100612/</a>
   61.65 -     
   61.66  
   61.67      <dt id=editors-list>Editors:
   61.68  
   61.69 @@ -92,7 +103,13 @@
   61.70     class=property>background-repeat</code></a>’.
   61.71  
   61.72    <h2 class="no-num no-toc" id=status> Status of this document</h2>
   61.73 -  <!--begin-status-->
   61.74 +
   61.75 +  <p style="color: red; background: yellow; border: solid thick red;">
   61.76 +   <strong>This draft is not actively-maintained at the moment. Comments are
   61.77 +   welcome, but please refer to <a
   61.78 +   href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds and
   61.79 +   Borders</a> if you are implementing something.</strong>
   61.80 +   <!--begin-status-->
   61.81  
   61.82    <p>This is a public copy of the editors' draft. It is provided for
   61.83     discussion only and may change at any moment. Its publication here does
   61.84 @@ -124,19 +141,6 @@
   61.85     href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   61.86     W3C Patent Policy</a>.</p>
   61.87    <!--end-status-->
   61.88 -  <!--
   61.89 -  <p>The following features are at-risk and may be dropped at the
   61.90 -  end of the CR period if there has not been enough interest from
   61.91 -  implementers: [...]
   61.92 -  -->
   61.93 -
   61.94 -  <p>The CSS WG maintains an <a
   61.95 -   href="http://www.w3.org/Style/CSS/Tracker/products/11">issues list</a> for
   61.96 -   this module. A <a href="http://www.w3.org/Style/CSS/Test/">test suite</a>
   61.97 -   and implementation report for CSS Backgrounds and Borders Level 4 will be
   61.98 -   developed during the Candidate Recommendation phase, which will last a
   61.99 -   minimum of three months<!--, i.e., at least until 15 May 2011-->. See the
  61.100 -   section <a href="#exit">“CR exit criteria”</a> for more details.
  61.101  
  61.102    <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  61.103    <!--begin-toc-->
  61.104 @@ -263,7 +267,6 @@
  61.105      <ul class=toc>
  61.106       <li><a href="#the-border-clip-properties"><span class=secno>8.1.
  61.107        </span>The ‘<code class=property>border-clip</code>’ properties</a>
  61.108 -      
  61.109      </ul>
  61.110  
  61.111     <li><a href="#acknowledgments"><span class=secno>9.
  61.112 @@ -310,7 +313,6 @@
  61.113     area and with the background of the content, padding and border areas.
  61.114     Additionally the box may be given a "drop-shadow" effect with the ‘<a
  61.115     href="#box-shadow"><code class=property>box-shadow</code></a>’ property.
  61.116 -   
  61.117  
  61.118    <p>If an element is broken into multiple boxes, ‘<a
  61.119     href="#box-decoration-break"><code
  61.120 @@ -525,7 +527,6 @@
  61.121     images”</a> for how ‘<a href="#background-image"><code
  61.122     class=property>background-image</code></a>’ interacts with other
  61.123     comma-separated background properties to form each background image layer.
  61.124 -   
  61.125  
  61.126    <p>When setting a background image, authors should also specify a ‘<a
  61.127     href="#background-color"><code class=css>background-color</code></a>’
  61.128 @@ -554,7 +555,7 @@
  61.129     for image display.
  61.130  
  61.131    <div class=example>
  61.132 -   <p>Some examples specifying background images:</p>
  61.133 +   <p>Some examples specifying background images:
  61.134  
  61.135     <pre>
  61.136  <!-- -->body { background-image: url("marble.svg") }
  61.137 @@ -720,7 +721,6 @@
  61.138       src=bg-repeat><!--<SPAN class="dlink">   <A
  61.139        name="img-bg-repeat" href="images/longdesc/bg-repeat-desc.html"
  61.140        title="Long description for background pattern">[D]</A></SPAN>-->
  61.141 -     
  61.142  
  61.143      <p class=caption>The effect of ‘<a href="#repeat-y"><code
  61.144       class=css>repeat-y</code></a>’: One copy of the background image is
  61.145 @@ -750,7 +750,6 @@
  61.146     images”</a> for how ‘<a href="#background-repeat"><code
  61.147     class=property>background-repeat</code></a>’ interacts with other
  61.148     comma-separated background properties to form each background image layer.
  61.149 -   
  61.150  
  61.151    <h3 id=the-background-attachment><span class=secno>3.5. </span> The ‘<a
  61.152     href="#background-attachment"><code
  61.153 @@ -891,7 +890,6 @@
  61.154     images”</a> for how ‘<a href="#background-attachment"><code
  61.155     class=property>background-attachment</code></a>’ interacts with other
  61.156     comma-separated background properties to form each background image layer.
  61.157 -   
  61.158  
  61.159    <h3 id=the-background-position><span class=secno>3.6. </span> The ‘<a
  61.160     href="#background-position"><code
  61.161 @@ -988,7 +986,7 @@
  61.162  
  61.163    <div class=example>
  61.164     <p>The following declarations give the stated (horizontal, vertical)
  61.165 -    offsets from the top left corner:</p>
  61.166 +    offsets from the top left corner:
  61.167  
  61.168     <pre>
  61.169  <!-- -->background-position: left 10px top 15px;   /* 10px, 15px */
  61.170 @@ -1082,7 +1080,7 @@
  61.171      class=property>background</code></a>’ shorthand declarations use
  61.172      keywords to set ‘<a href="#background-position"><code
  61.173      class=property>background-position</code></a>’ to the stated percentage
  61.174 -    values.</p>
  61.175 +    values.
  61.176  
  61.177     <pre>
  61.178  <!-- -->body { background: url("banner.jpeg") right top }    /* 100%   0% */
  61.179 @@ -1116,7 +1114,6 @@
  61.180     images”</a> for how ‘<a href="#background-position"><code
  61.181     class=property>background-position</code></a>’ interacts with other
  61.182     comma-separated background properties to form each background image layer.
  61.183 -   
  61.184  
  61.185    <h3 id=the-background-clip><span class=secno>3.7. </span> The ‘<a
  61.186     href="#background-clip"><code class=property>background-clip</code></a>’
  61.187 @@ -1210,7 +1207,6 @@
  61.188     images”</a> for how ‘<a href="#background-clip"><code
  61.189     class=css>background-clip</code></a>’ interacts with other
  61.190     comma-separated background properties to form each background image layer.
  61.191 -   
  61.192  
  61.193    <h3 id=the-background-origin><span class=secno>3.8. </span> The ‘<a
  61.194     href="#background-origin"><code
  61.195 @@ -1309,7 +1305,6 @@
  61.196     images”</a> for how ‘<a href="#background-origin"><code
  61.197     class=css>background-origin</code></a>’ interacts with other
  61.198     comma-separated background properties to form each background image layer.
  61.199 -   
  61.200  
  61.201    <h3 id=the-background-size><span class=secno>3.9. </span> The ‘<a
  61.202     href="#background-size"><code class=property>background-size</code></a>’
  61.203 @@ -1522,7 +1517,6 @@
  61.204      times in the background height. The width is the approximately the width
  61.205      that correspond to a 4em height at the original aspect ratio: scaled
  61.206      slightly so that it fits a whole number of times in the background width.
  61.207 -    
  61.208  
  61.209     <pre>
  61.210  <!-- -->div {
  61.211 @@ -1539,7 +1533,6 @@
  61.212     images”</a> for how ‘<a href="#background-size"><code
  61.213     class=property>background-size</code></a>’ interacts with other
  61.214     comma-separated background properties to form each background image layer.
  61.215 -   
  61.216  
  61.217    <h3 id=the-background><span class=secno>3.10. </span> The ‘<a
  61.218     href="#background"><code class=property>background</code></a>’ shorthand
  61.219 @@ -1972,7 +1965,6 @@
  61.220       <th>Value:
  61.221  
  61.222       <td><a href="#ltborder-stylegt"><var>&lt;border-style&gt;</var></a>{1,4}
  61.223 -      
  61.224  
  61.225      <tr>
  61.226       <th>Initial:
  61.227 @@ -2161,7 +2153,6 @@
  61.228       <th>Value:
  61.229  
  61.230       <td><a href="#ltborder-widthgt"><var>&lt;border-width&gt;</var></a>{1,4}
  61.231 -      
  61.232  
  61.233      <tr>
  61.234       <th>Initial:
  61.235 @@ -2459,7 +2450,6 @@
  61.236  
  61.237       <td>[ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ]{1,4} [
  61.238        / [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ]{1,4} ]?
  61.239 -      
  61.240  
  61.241      <tr>
  61.242       <th>Initial:
  61.243 @@ -2573,7 +2563,6 @@
  61.244     <p class=caption>The effect of a rounded corner when the two borders it
  61.245      connects are of unequal thickness (left) and the effect of a rounded
  61.246      corner on borders that are thicker than the radius of the corner (right).
  61.247 -    
  61.248    </div>
  61.249  
  61.250    <h3 id=corner-clipping><span class=secno>5.3. </span> Corner Clipping</h3>
  61.251 @@ -2766,7 +2755,7 @@
  61.252      <tr>
  61.253       <th>Initial:
  61.254  
  61.255 -     <td>round
  61.256 +     <td>curve
  61.257  
  61.258      <tr>
  61.259       <th>Applies to:
  61.260 @@ -2936,7 +2925,7 @@
  61.261     <p>This shows a more complicated example, demonstrating how the border
  61.262      image corresponds to the fallback border-style but can also extend beyond
  61.263      the border area. The border image is a wavy green border with an extended
  61.264 -    corner effect:</p>
  61.265 +    corner effect:
  61.266  
  61.267     <div class=figure>
  61.268      <p><img
  61.269 @@ -2947,11 +2936,11 @@
  61.270       class=property>border-image-source</code></a>’ image, with the four
  61.271       ‘<a href="#border-image-slice"><code
  61.272       class=property>border-image-slice</code></a>’ cuts at 124px dividing
  61.273 -     the image into nine parts.</p>
  61.274 +     the image into nine parts.
  61.275     </div>
  61.276  
  61.277     <p>The rest of the border properties then interact to lay out the tiles as
  61.278 -    follows:</p>
  61.279 +    follows:
  61.280  
  61.281     <div class=figure>
  61.282      <p><img
  61.283 @@ -2960,7 +2949,7 @@
  61.284  
  61.285      <p class=caption>Diagram of all border-image properties and how they
  61.286       interact, and showing the rendering with and without the border-image in
  61.287 -     effect.</p>
  61.288 +     effect.
  61.289     </div>
  61.290  
  61.291     <p>Here, even though the border-width is 12px, the ‘<a
  61.292 @@ -2976,7 +2965,7 @@
  61.293     <p>Notice that the ‘<a href="#border"><code
  61.294      class=property>border</code></a>’ shorthand resets ‘<a
  61.295      href="#border-image"><code class=property>border-image</code></a>’.
  61.296 -    This makes it easy to turn off or reset all border effects:</p>
  61.297 +    This makes it easy to turn off or reset all border effects:
  61.298  
  61.299     <pre>
  61.300  <!-- -->.notebox {
  61.301 @@ -3207,7 +3196,6 @@
  61.302       <th>Computed value:
  61.303  
  61.304       <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
  61.305 -      
  61.306    </table>
  61.307  
  61.308    <p>The border image is drawn inside an area called the <a
  61.309 @@ -3313,7 +3301,6 @@
  61.310       <th>Computed value:
  61.311  
  61.312       <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
  61.313 -      
  61.314    </table>
  61.315  
  61.316    <p>The values specify the amount by which the <dfn
  61.317 @@ -3454,7 +3441,7 @@
  61.318         width is not scaled. The height of the middle image is scaled by the
  61.319         same factor as the left image unless that factor is zero or infinity,
  61.320         in which case the scaling factor of the right image is substituted,
  61.321 -       and failing that, the height is not scaled.</p>
  61.322 +       and failing that, the height is not scaled.
  61.323      </ul>
  61.324  
  61.325     <li>Scale to ‘<a href="#border-image-repeat"><code
  61.326 @@ -3675,7 +3662,7 @@
  61.327       (including any justification, bidi reordering, page breaks, etc.), all
  61.328       the element's boxes are taken and put one after the other in visual
  61.329       order. The background is applied to the bounding box of this composite
  61.330 -     box and then the boxes are put back, with their share of the background.</p>
  61.331 +     box and then the boxes are put back, with their share of the background.
  61.332  
  61.333      <p>For boxes broken across lines, first boxes on the same line are
  61.334       connected in visual order. Then boxes on subsequent lines are ordered
  61.335 @@ -3685,7 +3672,7 @@
  61.336       the first box is the leftmost box on the first line and boxes from
  61.337       subsequent lines are put to the right of it. In a right-to-left
  61.338       containing block, the first box is the rightmost on the first line and
  61.339 -     subsequent boxes are put to the left of it.</p>
  61.340 +     subsequent boxes are put to the left of it.
  61.341  
  61.342      <p>For boxes broken across columns, the columns are treated as one
  61.343       continuous element, as if the column boxes were glued together in the
  61.344 @@ -3859,11 +3846,11 @@
  61.345  
  61.346    <div class=example>
  61.347     <p>The example below demonstrates the effects of spread and blur on the
  61.348 -    shadow:</p>
  61.349 +    shadow:
  61.350  
  61.351     <p class=figure> <img
  61.352      alt="An example of spread and blur on a box with two round corners and two square ones"
  61.353 -    src=spread-blur.png></p>
  61.354 +    src=spread-blur.png>
  61.355    </div>
  61.356  
  61.357    <p>The shadow effects are applied front-to-back: the first shadow is on top
  61.358 @@ -3884,7 +3871,7 @@
  61.359  
  61.360    <div class=example>
  61.361     <p>Below are some examples of an orange box with a blue border being given
  61.362 -    a drop shadow.</p>
  61.363 +    a drop shadow.
  61.364  
  61.365     <table class=data id=box-shadow-samples>
  61.366      <tbody>
  61.367 @@ -4008,7 +3995,6 @@
  61.368       <th>Value:
  61.369  
  61.370       <td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+
  61.371 -      
  61.372  
  61.373      <tr>
  61.374       <th>Initial:
  61.375 @@ -4078,10 +4064,10 @@
  61.376  
  61.377     <div
  61.378      style="position: relative; width: 250px; height: 150px; background: white;">
  61.379 -    
  61.380 +
  61.381      <div
  61.382       style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
  61.383 -     
  61.384 +
  61.385       <div
  61.386        style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
  61.387  
  61.388 @@ -4100,10 +4086,10 @@
  61.389  
  61.390     <div
  61.391      style="position: relative; width: 250px; height: 150px; background: white;">
  61.392 -    
  61.393 +
  61.394      <div
  61.395       style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
  61.396 -     
  61.397 +
  61.398       <div
  61.399        style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
  61.400  
  61.401 @@ -4125,10 +4111,10 @@
  61.402  
  61.403     <div
  61.404      style="position: relative; width: 250px; height: 150px; background: white;">
  61.405 -    
  61.406 +
  61.407      <div
  61.408       style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
  61.409 -     
  61.410 +
  61.411       <div
  61.412        style="position: absolute; background: white; left: -5px; top: -5px; height: 10px; width: 15px"></div>
  61.413  
  61.414 @@ -4154,10 +4140,10 @@
  61.415  
  61.416     <div
  61.417      style="position: relative; width: 250px; height: 150px; background: white;">
  61.418 -    
  61.419 +
  61.420      <div
  61.421       style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
  61.422 -     
  61.423 +
  61.424       <div
  61.425        style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
  61.426  
  61.427 @@ -4177,10 +4163,10 @@
  61.428  
  61.429     <div
  61.430      style="position: relative; width: 250px; height: 150px; background: white;">
  61.431 -    
  61.432 +
  61.433      <div
  61.434       style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
  61.435 -     
  61.436 +
  61.437       <div
  61.438        style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
  61.439  
  61.440 @@ -4198,10 +4184,10 @@
  61.441  
  61.442     <div
  61.443      style="position: relative; width: 250px; height: 150px; background: white;">
  61.444 -    
  61.445 +
  61.446      <div
  61.447       style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
  61.448 -     
  61.449 +
  61.450       <div
  61.451        style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
  61.452  
  61.453 @@ -4245,7 +4231,7 @@
  61.454  
  61.455     <div
  61.456      style="position: relative; width: 100px; background: white; padding: 20px">
  61.457 -    
  61.458 +
  61.459      <div style="border: 2px solid black; height: 40px"></div>
  61.460  
  61.461      <div
  61.462 @@ -4283,7 +4269,7 @@
  61.463  
  61.464     <div
  61.465      style="position: relative; width: 105px; background: white; padding: 20px">
  61.466 -    
  61.467 +
  61.468      <div style="border: 2px solid black; height: 40px"></div>
  61.469  
  61.470      <div
  61.471 @@ -4323,7 +4309,7 @@
  61.472  
  61.473     <div
  61.474      style="position: relative; width: 192px; background: white; padding: 40px">
  61.475 -    
  61.476 +
  61.477      <div style="border: 4px solid black; height: 40px"></div>
  61.478  
  61.479      <div
  61.480 @@ -4360,7 +4346,7 @@
  61.481  
  61.482     <div
  61.483      style="position: relative; width: 192px; background: white; padding: 40px">
  61.484 -    
  61.485 +
  61.486      <div style="border: 4px solid black; height: 40px"></div>
  61.487  
  61.488      <div
  61.489 @@ -4396,7 +4382,7 @@
  61.490  
  61.491     <div
  61.492      style="position: relative; width: 190px; background: white; padding: 40px">
  61.493 -    
  61.494 +
  61.495      <div style="border: 4px solid black; border-top: none; height: 40px"></div>
  61.496  
  61.497      <div
  61.498 @@ -4443,7 +4429,7 @@
  61.499  
  61.500     <div
  61.501      style="position: relative; width: 440px; background: white; padding: 40px">
  61.502 -    
  61.503 +
  61.504      <div style="border: 4px solid black; border-top: none; height: 40px"></div>
  61.505  
  61.506      <div
  61.507 @@ -4516,7 +4502,7 @@
  61.508      Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
  61.509      2011. W3C Recommendation. URL: <a
  61.510      href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
  61.511 -    </dd>
  61.512 +   </dd>
  61.513     <!---->
  61.514  
  61.515     <dt id=HTML401>[HTML401]
  61.516 @@ -4525,7 +4511,7 @@
  61.517      href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
  61.518      Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
  61.519      href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
  61.520 -    </dd>
  61.521 +   </dd>
  61.522     <!---->
  61.523  
  61.524     <dt id=XHTML11>[XHTML11]
  61.525 @@ -4534,7 +4520,7 @@
  61.526      href="http://www.w3.org/TR/2001/REC-xhtml11-20010531"><cite>XHTML™ 1.1
  61.527      - Module-based XHTML.</cite></a> 31 May 2001. W3C Recommendation. URL: <a
  61.528      href="http://www.w3.org/TR/2001/REC-xhtml11-20010531">http://www.w3.org/TR/2001/REC-xhtml11-20010531</a>
  61.529 -    </dd>
  61.530 +   </dd>
  61.531     <!---->
  61.532    </dl>
  61.533    <!--end-normative-->
  61.534 @@ -4554,7 +4540,7 @@
  61.535      Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
  61.536      Recommendation. URL: <a
  61.537      href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
  61.538 -    </dd>
  61.539 +   </dd>
  61.540     <!---->
  61.541  
  61.542     <dt id=CSS3GRID>[CSS3GRID]
  61.543 @@ -4564,7 +4550,7 @@
  61.544      Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working
  61.545      Draft. (Work in progress.) URL: <a
  61.546      href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
  61.547 -    </dd>
  61.548 +   </dd>
  61.549     <!---->
  61.550  
  61.551     <dt id=WCAG20>[WCAG20]
  61.552 @@ -4574,7 +4560,7 @@
  61.553      Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C
  61.554      Recommendation. URL: <a
  61.555      href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a>
  61.556 -    </dd>
  61.557 +   </dd>
  61.558     <!---->
  61.559    </dl>
  61.560    <!--end-informative-->
  61.561 @@ -4601,21 +4587,6 @@
  61.562  
  61.563     <tbody>
  61.564      <tr>
  61.565 -     <th><a class=property href="#background">background</a>
  61.566 -
  61.567 -     <td>[ &lt;bg-layer&gt; , ]* &lt;final-bg-layer&gt;
  61.568 -
  61.569 -     <td>see individual properties
  61.570 -
  61.571 -     <td>all elements
  61.572 -
  61.573 -     <td>no
  61.574 -
  61.575 -     <td>see individual properties
  61.576 -
  61.577 -     <td>visual
  61.578 -
  61.579 -    <tr>
  61.580       <th><a class=property
  61.581        href="#background-attachment">background-attachment</a>
  61.582  
  61.583 @@ -4739,17 +4710,17 @@
  61.584       <td>visual
  61.585  
  61.586      <tr>
  61.587 -     <th><a class=property href="#border">border</a>
  61.588 -
  61.589 -     <td>&lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt;
  61.590 -
  61.591 -     <td>See individual properties
  61.592 +     <th><a class=property href="#background">background</a>
  61.593 +
  61.594 +     <td>[ &lt;bg-layer&gt; , ]* &lt;final-bg-layer&gt;
  61.595 +
  61.596 +     <td>see individual properties
  61.597  
  61.598       <td>all elements
  61.599  
  61.600       <td>no
  61.601  
  61.602 -     <td>N/A
  61.603 +     <td>see individual properties
  61.604  
  61.605       <td>visual
  61.606  
  61.607 @@ -4793,7 +4764,7 @@
  61.608  
  61.609       <td>curve | bevel | scoop | notch
  61.610  
  61.611 -     <td>round
  61.612 +     <td>curve
  61.613  
  61.614       <td>all elements, except table element when ‘border-collapse’ is
  61.615        ‘collapse’
  61.616 @@ -4805,6 +4776,73 @@
  61.617       <td>visual
  61.618  
  61.619      <tr>
  61.620 +     <th><a class=property
  61.621 +      href="#border-image-outset">border-image-outset</a>
  61.622 +
  61.623 +     <td>[ &lt;length&gt; | &lt;number&gt; ]{1,4}
  61.624 +
  61.625 +     <td>0
  61.626 +
  61.627 +     <td>All elements, except internal table elements when
  61.628 +      ‘border-collapse’ is ‘collapse’
  61.629 +
  61.630 +     <td>no
  61.631 +
  61.632 +     <td>N/A
  61.633 +
  61.634 +     <td>visual
  61.635 +
  61.636 +    <tr>
  61.637 +     <th><a class=property
  61.638 +      href="#border-image-repeat">border-image-repeat</a>
  61.639 +
  61.640 +     <td>[ stretch | repeat | round | space ]{1,2}
  61.641 +
  61.642 +     <td>stretch
  61.643 +
  61.644 +     <td>All elements, except internal table elements when
  61.645 +      ‘border-collapse’ is ‘collapse’
  61.646 +
  61.647 +     <td>no
  61.648 +
  61.649 +     <td>N/A
  61.650 +
  61.651 +     <td>visual
  61.652 +
  61.653 +    <tr>
  61.654 +     <th><a class=property href="#border-image-slice">border-image-slice</a>
  61.655 +
  61.656 +     <td>[&lt;number&gt; | &lt;percentage&gt;]{1,4} &amp;&amp; fill?
  61.657 +
  61.658 +     <td>100%
  61.659 +
  61.660 +     <td>All elements, except internal table elements when
  61.661 +      ‘border-collapse’ is ‘collapse’
  61.662 +
  61.663 +     <td>no
  61.664 +
  61.665 +     <td>refer to size of the border image
  61.666 +
  61.667 +     <td>visual
  61.668 +
  61.669 +    <tr>
  61.670 +     <th><a class=property
  61.671 +      href="#border-image-source">border-image-source</a>
  61.672 +
  61.673 +     <td>none | &lt;image&gt;
  61.674 +
  61.675 +     <td>none
  61.676 +
  61.677 +     <td>All elements, except internal table elements when
  61.678 +      ‘border-collapse’ is ‘collapse’
  61.679 +
  61.680 +     <td>no
  61.681 +
  61.682 +     <td>N/A
  61.683 +
  61.684 +     <td>visual
  61.685 +
  61.686 +    <tr>
  61.687       <th><a class=property href="#border-image">border-image</a>
  61.688  
  61.689       <td>&lt;‘border-image-source’&gt; ||
  61.690 @@ -4823,73 +4861,6 @@
  61.691       <td>visual
  61.692  
  61.693      <tr>
  61.694 -     <th><a class=property
  61.695 -      href="#border-image-outset">border-image-outset</a>
  61.696 -
  61.697 -     <td>[ &lt;length&gt; | &lt;number&gt; ]{1,4}
  61.698 -
  61.699 -     <td>0
  61.700 -
  61.701 -     <td>All elements, except internal table elements when
  61.702 -      ‘border-collapse’ is ‘collapse’
  61.703 -
  61.704 -     <td>no
  61.705 -
  61.706 -     <td>N/A
  61.707 -
  61.708 -     <td>visual
  61.709 -
  61.710 -    <tr>
  61.711 -     <th><a class=property
  61.712 -      href="#border-image-repeat">border-image-repeat</a>
  61.713 -
  61.714 -     <td>[ stretch | repeat | round | space ]{1,2}
  61.715 -
  61.716 -     <td>stretch
  61.717 -
  61.718 -     <td>All elements, except internal table elements when
  61.719 -      ‘border-collapse’ is ‘collapse’
  61.720 -
  61.721 -     <td>no
  61.722 -
  61.723 -     <td>N/A
  61.724 -
  61.725 -     <td>visual
  61.726 -
  61.727 -    <tr>
  61.728 -     <th><a class=property href="#border-image-slice">border-image-slice</a>
  61.729 -
  61.730 -     <td>[&lt;number&gt; | &lt;percentage&gt;]{1,4} &amp;&amp; fill?
  61.731 -
  61.732 -     <td>100%
  61.733 -
  61.734 -     <td>All elements, except internal table elements when
  61.735 -      ‘border-collapse’ is ‘collapse’
  61.736 -
  61.737 -     <td>no
  61.738 -
  61.739 -     <td>refer to size of the border image
  61.740 -
  61.741 -     <td>visual
  61.742 -
  61.743 -    <tr>
  61.744 -     <th><a class=property
  61.745 -      href="#border-image-source">border-image-source</a>
  61.746 -
  61.747 -     <td>none | &lt;image&gt;
  61.748 -
  61.749 -     <td>none
  61.750 -
  61.751 -     <td>All elements, except internal table elements when
  61.752 -      ‘border-collapse’ is ‘collapse’
  61.753 -
  61.754 -     <td>no
  61.755 -
  61.756 -     <td>N/A
  61.757 -
  61.758 -     <td>visual
  61.759 -
  61.760 -    <tr>
  61.761       <th><a class=property href="#border-image-width">border-image-width</a>
  61.762  
  61.763       <td>[ &lt;length&gt; | &lt;percentage&gt; | &lt;number&gt; | auto ]{1,4}
  61.764 @@ -4923,6 +4894,21 @@
  61.765       <td>visual
  61.766  
  61.767      <tr>
  61.768 +     <th><a class=property href="#border">border</a>
  61.769 +
  61.770 +     <td>&lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt;
  61.771 +
  61.772 +     <td>See individual properties
  61.773 +
  61.774 +     <td>all elements
  61.775 +
  61.776 +     <td>no
  61.777 +
  61.778 +     <td>N/A
  61.779 +
  61.780 +     <td>visual
  61.781 +
  61.782 +    <tr>
  61.783       <th><a class=property href="#border-style">border-style</a>
  61.784  
  61.785       <td>&lt;border-style&gt;{1,4}
  61.786 @@ -4938,24 +4924,6 @@
  61.787       <td>visual
  61.788  
  61.789      <tr>
  61.790 -     <th><a class=property href="#border-top">border-top</a>, <a
  61.791 -      class=property href="#border-right">border-right</a>, <a class=property
  61.792 -      href="#border-bottom">border-bottom</a>, <a class=property
  61.793 -      href="#border-left">border-left</a>
  61.794 -
  61.795 -     <td>&lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt;
  61.796 -
  61.797 -     <td>See individual properties
  61.798 -
  61.799 -     <td>all elements
  61.800 -
  61.801 -     <td>no
  61.802 -
  61.803 -     <td>N/A
  61.804 -
  61.805 -     <td>visual
  61.806 -
  61.807 -    <tr>
  61.808       <th><a class=property href="#border-top-color">border-top-color </a>, <a
  61.809        class=property href="#border-right-color">border-right-color</a>, <a
  61.810        class=property href="#border-bottom-color">border-bottom-color</a>, <a
  61.811 @@ -4997,6 +4965,24 @@
  61.812       <td>visual
  61.813  
  61.814      <tr>
  61.815 +     <th><a class=property href="#border-top">border-top</a>, <a
  61.816 +      class=property href="#border-right">border-right</a>, <a class=property
  61.817 +      href="#border-bottom">border-bottom</a>, <a class=property
  61.818 +      href="#border-left">border-left</a>
  61.819 +
  61.820 +     <td>&lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt;
  61.821 +
  61.822 +     <td>See individual properties
  61.823 +
  61.824 +     <td>all elements
  61.825 +
  61.826 +     <td>no
  61.827 +
  61.828 +     <td>N/A
  61.829 +
  61.830 +     <td>visual
  61.831 +
  61.832 +    <tr>
  61.833       <th><a class=property href="#border-top-style">border-top-style</a>, <a
  61.834        class=property href="#border-right-style">border-right-style</a>, <a
  61.835        class=property href="#border-bottom-style">border-bottom-style</a>, <a
  61.836 @@ -5190,13 +5176,11 @@
  61.837        class=property>background-clip</code></a>’ value, <a
  61.838        href="#border-box"
  61.839        title="''border-box'', 'background-clip' value"><strong>3.7.</strong></a>
  61.840 -      
  61.841  
  61.842       <li>‘<a href="#background-origin"><code
  61.843        class=property>background-origin</code></a>’ value, <a
  61.844        href="#border-box0"
  61.845        title="''border-box'', 'background-origin' value"><strong>3.8.</strong></a>
  61.846 -      
  61.847      </ul>
  61.848  
  61.849     <li>border-clip, <a href="#border-clip"
  61.850 @@ -5306,7 +5290,6 @@
  61.851        class=property>background-position</code></a>’ value, <a
  61.852        href="#bottom"
  61.853        title="''bottom'', 'background-position' value"><strong>3.6.</strong></a>
  61.854 -      
  61.855      </ul>
  61.856  
  61.857     <li><a href="#ltboxgt"><var>&lt;box&gt;</var></a>, <a href="#ltboxgt"
  61.858 @@ -5324,7 +5307,6 @@
  61.859        class=property>background-position</code></a>’ value, <a
  61.860        href="#center"
  61.861        title="''center'', 'background-position' value"><strong>3.6.</strong></a>
  61.862 -      
  61.863      </ul>
  61.864  
  61.865     <li>‘<a href="#clone"><code class=css>clone</code></a>’, <a
  61.866 @@ -5341,13 +5323,12 @@
  61.867  
  61.868     <li>‘<a href="#content-box0"><code class=css>content-box</code></a>’,
  61.869      <a href="#content-box0" title="''content-box''"><strong>3.8.</strong></a>
  61.870 -    
  61.871 +
  61.872      <ul>
  61.873       <li>‘<a href="#background-clip"><code
  61.874        class=property>background-clip</code></a>’ value, <a
  61.875        href="#content-box"
  61.876        title="''content-box'', 'background-clip' value"><strong>3.7.</strong></a>
  61.877 -      
  61.878      </ul>
  61.879  
  61.880     <li>‘<a href="#cover"><code class=css>cover</code></a>’, <a
  61.881 @@ -5393,7 +5374,6 @@
  61.882       <li>‘<a href="#background-position"><code
  61.883        class=property>background-position</code></a>’ value, <a href="#left"
  61.884        title="''left'', 'background-position' value"><strong>3.6.</strong></a>
  61.885 -      
  61.886      </ul>
  61.887  
  61.888     <li>‘<a href="#local0"><code class=css>local</code></a>’, <a
  61.889 @@ -5410,7 +5390,6 @@
  61.890        class=property>border-image-source</code></a>’ value, <a
  61.891        href="#none1"
  61.892        title="''none'', 'border-image-source' value"><strong>6.1.</strong></a>
  61.893 -      
  61.894  
  61.895       <li>‘<a href="#border-style"><code
  61.896        class=property>border-style</code></a>’ value, <a href="#none0"
  61.897 @@ -5423,7 +5402,6 @@
  61.898        class=property>background-repeat</code></a>’ value, <a
  61.899        href="#no-repeat"
  61.900        title="''no-repeat'', 'background-repeat' value"><strong>3.4.</strong></a>
  61.901 -      
  61.902      </ul>
  61.903  
  61.904     <li>‘<a href="#notch"><code class=css>notch</code></a>’, <a
  61.905 @@ -5438,13 +5416,11 @@
  61.906        class=property>background-clip</code></a>’ value, <a
  61.907        href="#padding-box"
  61.908        title="''padding-box'', 'background-clip' value"><strong>3.7.</strong></a>
  61.909 -      
  61.910  
  61.911       <li>‘<a href="#background-origin"><code
  61.912        class=property>background-origin</code></a>’ value, <a
  61.913        href="#padding-box0"
  61.914        title="''padding-box'', 'background-origin' value"><strong>3.8.</strong></a>
  61.915 -      
  61.916      </ul>
  61.917  
  61.918     <li><a href="#ltpositiongt"><var>&lt;position&gt;</var></a>, <a
  61.919 @@ -5455,13 +5431,11 @@
  61.920       <li>‘<a href="#background-repeat"><code
  61.921        class=property>background-repeat</code></a>’ value, <a href="#repeat"
  61.922        title="''repeat'', 'background-repeat' value"><strong>3.4.</strong></a>
  61.923 -      
  61.924  
  61.925       <li>‘<a href="#border-image-repeat"><code
  61.926        class=property>border-image-repeat</code></a>’ value, <a
  61.927        href="#repeat0"
  61.928        title="''repeat'', 'border-image-repeat' value"><strong>6.5.</strong></a>
  61.929 -      
  61.930      </ul>
  61.931  
  61.932     <li><a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a>, <a
  61.933 @@ -5483,7 +5457,6 @@
  61.934        class=property>background-position</code></a>’ value, <a
  61.935        href="#right"
  61.936        title="''right'', 'background-position' value"><strong>3.6.</strong></a>
  61.937 -      
  61.938      </ul>
  61.939  
  61.940     <li>‘<code class=css>round</code>’
  61.941 @@ -5496,7 +5469,6 @@
  61.942        class=property>border-image-repeat</code></a>’ value, <a
  61.943        href="#round0"
  61.944        title="''round'', 'border-image-repeat' value"><strong>6.5.</strong></a>
  61.945 -      
  61.946      </ul>
  61.947  
  61.948     <li>‘<a href="#scoop"><code class=css>scoop</code></a>’, <a
  61.949 @@ -5525,7 +5497,6 @@
  61.950        class=property>border-image-repeat</code></a>’ value, <a
  61.951        href="#space0"
  61.952        title="''space'', 'border-image-repeat' value"><strong>6.5.</strong></a>
  61.953 -      
  61.954      </ul>
  61.955  
  61.956     <li>‘<a href="#stretch"><code class=css>stretch</code></a>’, <a
    62.1 --- a/css4-background/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    62.2 +++ b/css4-background/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    62.3 @@ -60,19 +60,13 @@
    62.4  
    62.5  <h2 class="no-num no-toc" id="status">
    62.6  Status of this document</h2>
    62.7 +
    62.8 +<p style="color: red; background: yellow; border: solid thick red;">
    62.9 +<strong>This draft is not actively-maintained at the moment.
   62.10 +Comments are welcome, but please refer to
   62.11 +<a href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds and Borders</a>
   62.12 +if you are implementing something.</strong>
   62.13  <!--status-->
   62.14 -  <!--
   62.15 -  <p>The following features are at-risk and may be dropped at the
   62.16 -  end of the CR period if there has not been enough interest from
   62.17 -  implementers: [...]
   62.18 -  -->
   62.19 -
   62.20 -  <p>The CSS WG maintains an <a href="http://www.w3.org/Style/CSS/Tracker/products/11">issues
   62.21 -  list</a> for this module. A <a href="http://www.w3.org/Style/CSS/Test/">test
   62.22 -  suite</a> and implementation report for CSS Backgrounds and Borders Level 4
   62.23 -  will be developed during the Candidate Recommendation phase, which will last
   62.24 -  a minimum of three months<!--, i.e., at least until 15 May 2011-->. See the
   62.25 -  section <a href="#exit">“CR exit criteria”</a> for more details.
   62.26  
   62.27  <h2 class="no-num no-toc" id="contents">Table of contents</h2>
   62.28  <!--toc-->
   62.29 @@ -2022,7 +2016,7 @@
   62.30        <td>curve | bevel | scoop | notch
   62.31      <tr>
   62.32        <th>Initial:
   62.33 -      <td>round
   62.34 +      <td>curve
   62.35      <tr>
   62.36        <th>Applies to:
   62.37         <td>all elements, except table element when 'border-collapse' is
    63.1 --- a/css4-images/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    63.2 +++ b/css4-images/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    63.3 @@ -6,17 +6,17 @@
    63.4    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    63.5    <title>CSS Image Values and Replaced Content Module Level 4</title>
    63.6  
    63.7 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
    63.8 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
    63.9 +  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   63.10 +   rel=dcterms.rights>
   63.11    <meta content="CSS Image Values and Replaced Content Module Level 4"
   63.12 -   name=DC.title>
   63.13 -  <meta content=text name=DC.type>
   63.14 -  <meta content=2012-09-21 name=DC.issued>
   63.15 -  <meta content="http://dev.w3.org/csswg/css4-images/" name=DC.creator>
   63.16 -  <meta content=W3C name=DC.publisher>
   63.17 -  <meta content="http://www.w3.org/TR/2012/ED-css4-images-20120921/"
   63.18 -   name=DC.identifier>
   63.19 -  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   63.20 -   rel=DC.rights>
   63.21 +   name=dcterms.title>
   63.22 +  <meta content=text name=dcterms.type>
   63.23 +  <meta content=2012-10-18 name=dcterms.issued>
   63.24 +  <meta content="http://dev.w3.org/csswg/css4-images/" name=dcterms.creator>
   63.25 +  <meta content=W3C name=dcterms.publisher>
   63.26 +  <meta content="http://www.w3.org/TR/2012/ED-css4-images-20121018/"
   63.27 +   name=dcterms.identifier>
   63.28    <link href="../default.css" rel=stylesheet type="text/css">
   63.29    <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   63.30     type="text/css">
   63.31 @@ -28,7 +28,7 @@
   63.32  
   63.33     <h1>CSS Image Values and Replaced Content Module Level 4</h1>
   63.34  
   63.35 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 September
   63.36 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October
   63.37      2012</h2>
   63.38  
   63.39     <dl>
   63.40 @@ -36,7 +36,7 @@
   63.41  
   63.42      <dd><a
   63.43       href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a>
   63.44 -     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20120921/">http://www.w3.org/TR/2012/WD-css4-images-20120921/</a>-->
   63.45 +     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20121018/">http://www.w3.org/TR/2012/WD-css4-images-20121018/</a>-->
   63.46  
   63.47      <dt>Latest Version:
   63.48  
   63.49 @@ -290,24 +290,27 @@
   63.50     <li><a href="#serialization"><span class=secno>8. </span>
   63.51      Serialization</a>
   63.52  
   63.53 -   <li><a href="#conformance"><span class=secno>9. </span> Conformance</a>
   63.54 +   <li><a href="#changes"><span class=secno>9. </span> Changes since Images
   63.55 +    3</a>
   63.56 +
   63.57 +   <li><a href="#conformance"><span class=secno>10. </span> Conformance</a>
   63.58      <ul class=toc>
   63.59 -     <li><a href="#conventions"><span class=secno>9.1. </span> Document
   63.60 +     <li><a href="#conventions"><span class=secno>10.1. </span> Document
   63.61        Conventions</a>
   63.62  
   63.63 -     <li><a href="#conformance-classes"><span class=secno>9.2. </span>
   63.64 +     <li><a href="#conformance-classes"><span class=secno>10.2. </span>
   63.65        Conformance Classes</a>
   63.66  
   63.67 -     <li><a href="#partial"><span class=secno>9.3. </span> Partial
   63.68 +     <li><a href="#partial"><span class=secno>10.3. </span> Partial
   63.69        Implementations</a>
   63.70  
   63.71 -     <li><a href="#experimental"><span class=secno>9.4. </span> Experimental
   63.72 +     <li><a href="#experimental"><span class=secno>10.4. </span> Experimental
   63.73        Implementations</a>
   63.74  
   63.75 -     <li><a href="#testing"><span class=secno>9.5. </span>Non-Experimental
   63.76 +     <li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental
   63.77        Implementations</a>
   63.78  
   63.79 -     <li><a href="#cr-exit-criteria"><span class=secno>9.6. </span> CR Exit
   63.80 +     <li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit
   63.81        Criteria</a>
   63.82      </ul>
   63.83  
   63.84 @@ -392,13 +395,9 @@
   63.85  
   63.86     <li>Logical keywords for specifying linear gradient direction.
   63.87  
   63.88 -   <li>Conical gradients
   63.89 -
   63.90     <li>More interpolation modes for gradients: <a
   63.91      href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html">http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a>
   63.92  
   63.93 -   <li>How to transition/animate gradients
   63.94 -
   63.95     <li>Ability to reference an SVG paint server via url (maybe as
   63.96      element(&lt;string>)?)
   63.97    </ol>
   63.98 @@ -1454,8 +1453,7 @@
   63.99     href="#side-or-corner"><var>&lt;side-or-corner></var></a> ] ,]? 
  63.100  <!--
  63.101  		-->	<a
  63.102 -   href="#color-stop-type"><var>&lt;color-stop></var></a>[, <a
  63.103 -   href="#color-stop-type"><var>&lt;color-stop></var></a>]+
  63.104 +   href="#ltcolor-stop-list"><var>&lt;color-stop-list></var></a>
  63.105  <!--
  63.106  		-->)
  63.107  <!--
  63.108 @@ -1469,7 +1467,7 @@
  63.109     and determines how color-stops are positioned. It may be omitted; if so,
  63.110     it defaults to ‘<code class=css>to bottom</code>’.
  63.111  
  63.112 -  <p> The <a href="#gradient-line"><i title="gradient line">gradient
  63.113 +  <p> The <a href="#gradient-line0"><i title="gradient line">gradient
  63.114     line's</i></a> direction may be specified in two ways:
  63.115  
  63.116    <dl>
  63.117 @@ -1485,14 +1483,14 @@
  63.118      <p> If the argument is ‘<code class=css>to top</code>’, ‘<code
  63.119       class=css>to right</code>’, ‘<code class=css>to bottom</code>’, or
  63.120       ‘<code class=css>to left</code>’, the angle of the <a
  63.121 -     href="#gradient-line"><i>gradient line</i></a> is ‘<code
  63.122 +     href="#gradient-line0"><i>gradient line</i></a> is ‘<code
  63.123       class=css>0deg</code>’, ‘<code class=css>90deg</code>’, ‘<code
  63.124       class=css>180deg</code>’, or ‘<code class=css>270deg</code>’,
  63.125       respectively.
  63.126  
  63.127      <p> If the argument instead specifies a corner of the box such as
  63.128       ‘<code class=css>to top left</code>’, the <a
  63.129 -     href="#gradient-line"><i>gradient line</i></a> must be angled such that
  63.130 +     href="#gradient-line0"><i>gradient line</i></a> must be angled such that
  63.131       it points into the same quadrant as the specified corner, and is
  63.132       perpendicular to a line intersecting the two neighboring corners of the
  63.133       <a href="#gradient-box"><i>gradient box</i></a>. <span class=note>This
  63.134 @@ -1502,9 +1500,9 @@
  63.135  
  63.136    <p> Starting from the center of the <a href="#gradient-box"><i>gradient
  63.137     box</i></a>, extend a line at the specified angle in both directions. The
  63.138 -   ending point is the point on the <a href="#gradient-line"><i>gradient
  63.139 +   ending point is the point on the <a href="#gradient-line0"><i>gradient
  63.140     line</i></a> where a line drawn perpendicular to the <a
  63.141 -   href="#gradient-line"><i>gradient line</i></a> would intersect the corner
  63.142 +   href="#gradient-line0"><i>gradient line</i></a> would intersect the corner
  63.143     of the <a href="#gradient-box"><i>gradient box</i></a> in the specified
  63.144     direction. The starting point is determined identically, but in the
  63.145     opposite direction.
  63.146 @@ -1519,9 +1517,9 @@
  63.147      src="images/gradient-diagram.png"
  63.148      style="float: right; margin-left: 1em;">
  63.149      <p> This example illustrates visually how to calculate the <a
  63.150 -     href="#gradient-line"><i>gradient line</i></a> from the rules above.
  63.151 +     href="#gradient-line0"><i>gradient line</i></a> from the rules above.
  63.152       This shows the starting and ending point of the <a
  63.153 -     href="#gradient-line"><i>gradient line</i></a>, long with the actual
  63.154 +     href="#gradient-line0"><i>gradient line</i></a>, long with the actual
  63.155       gradient, produced by an element with ‘<code class=css>background:
  63.156       linear-gradient(45deg, white, black);</code>’.
  63.157  
  63.158 @@ -1534,9 +1532,9 @@
  63.159    </div>
  63.160  
  63.161    <p> The gradient's color stops are typically placed between the starting
  63.162 -   point and ending point on the <a href="#gradient-line"><i>gradient
  63.163 +   point and ending point on the <a href="#gradient-line0"><i>gradient
  63.164     line</i></a>, but this isn't required - the <a
  63.165 -   href="#gradient-line"><i>gradient line</i></a> extends infinitely in both
  63.166 +   href="#gradient-line0"><i>gradient line</i></a> extends infinitely in both
  63.167     directions. The starting point and ending point are merely arbitrary
  63.168     location markers - the starting point defines where 0%, 0px, etc are
  63.169     located when specifying color-stops, and the ending point defines where
  63.170 @@ -1545,8 +1543,8 @@
  63.171  
  63.172    <p> The color of the gradient at any point is determined by finding the
  63.173     unique line passing through that point that is perpendicular to the <a
  63.174 -   href="#gradient-line"><i>gradient line</i></a>. The point's color is the
  63.175 -   color of the <a href="#gradient-line"><i>gradient line</i></a> at the
  63.176 +   href="#gradient-line0"><i>gradient line</i></a>. The point's color is the
  63.177 +   color of the <a href="#gradient-line0"><i>gradient line</i></a> at the
  63.178     point where this line intersects it.
  63.179     <!-- ====================================================================== -->
  63.180  
  63.181 @@ -1577,7 +1575,7 @@
  63.182    <div class=example>
  63.183     <p> This demonstrates the use of an angle in the gradient. Note that,
  63.184      though the angle is not exactly the same as the angle between the
  63.185 -    corners, the <a href="#gradient-line"><i>gradient line</i></a> is still
  63.186 +    corners, the <a href="#gradient-line0"><i>gradient line</i></a> is still
  63.187      sized so as to make the gradient yellow exactly at the upper-left corner,
  63.188      and blue exactly at the lower-right corner.
  63.189  
  63.190 @@ -1669,8 +1667,7 @@
  63.191  		-->  ]?
  63.192  <!--
  63.193  		-->  <a
  63.194 -   href="#color-stop-type"><var>&lt;color-stop></var></a> [ , <a
  63.195 -   href="#color-stop-type"><var>&lt;color-stop></var></a> ]+
  63.196 +   href="#ltcolor-stop-list"><var>&lt;color-stop-list></var></a>
  63.197  <!--
  63.198  		-->)</pre>
  63.199  
  63.200 @@ -1832,9 +1829,7 @@
  63.201  <!--
  63.202  		-->  ]?
  63.203  <!--
  63.204 -		-->  <a
  63.205 -    href="#color-stop-type"><var>&lt;color-stop></var></a> [ , <a
  63.206 -    href="#color-stop-type"><var>&lt;color-stop></var></a> ]+
  63.207 +		-->  <var>&lt;color-stop></var> [ , <var>&lt;color-stop></var> ]+
  63.208  <!--
  63.209  		-->)
  63.210  <!--
  63.211 @@ -1844,19 +1839,19 @@
  63.212    <h4 class=no-toc id=radial-color-stops><span class=secno>4.2.2. </span>
  63.213     Placing Color Stops</h4>
  63.214  
  63.215 -  <p> Color-stops are placed on a <dfn id=gradient-ray>gradient ray</dfn>,
  63.216 -   similar to the <a href="#gradient-line"><i>gradient line</i></a> of linear
  63.217 -   gradients. The <a href="#gradient-ray"><i>gradient ray</i></a> is anchored
  63.218 -   at the center of the gradient and extends toward the right. The 0%
  63.219 -   location is at the start of the <a href="#gradient-ray"><i>gradient
  63.220 -   ray</i></a>, and the 100% location is on the point where the <a
  63.221 -   href="#gradient-ray"><i>gradient ray</i></a> intersects the <a
  63.222 +  <p> Color-stops are placed on a <a href="#gradient-line0"><i>gradient
  63.223 +   line</i></a>, similar to the <a href="#gradient-line0"><i>gradient
  63.224 +   line</i></a> of linear gradients. The <a
  63.225 +   href="#gradient-line0"><i>gradient line's</i></a> <i>start point</i> is at
  63.226 +   the center of the gradient, and it extends toward the right, with the <a
  63.227 +   href="#ending-point"><i>ending point</i></a> on the point where the <a
  63.228 +   href="#gradient-line0"><i>gradient line</i></a> intersects the <a
  63.229     href="#ending-shape"><i>ending shape</i></a>. A color-stop can be placed
  63.230 -   at a negative location; though the negative region of the <a
  63.231 -   href="#gradient-ray"><i>gradient ray</i></a> is never directly consulted
  63.232 -   for rendering, color stops placed there can affect the color of
  63.233 -   non-negative locations on the <a href="#gradient-ray"><i>gradient
  63.234 -   ray</i></a> through interpolation or repetition (see <a
  63.235 +   at a location before 0%; though the negative region of the <a
  63.236 +   href="#gradient-line0"><i>gradient line</i></a> is never directly
  63.237 +   consulted for rendering, color stops placed there can affect the color of
  63.238 +   non-negative locations on the <a href="#gradient-line0"><i>gradient
  63.239 +   line</i></a> through interpolation or repetition (see <a
  63.240     href="#repeating-gradients">repeating gradients</a>). For example,
  63.241     ‘<code class=css>radial-gradient(red -50px, yellow 100px)</code>’
  63.242     produces an elliptical gradient that starts with a reddish-orange color in
  63.243 @@ -1867,8 +1862,8 @@
  63.244    <p> The color of the gradient at any point is determined by first finding
  63.245     the unique ellipse passing through that point with the same center,
  63.246     orientation, and ratio between major and minor axises as the ending-shape.
  63.247 -   The point's color is then the color of the <a
  63.248 -   href="#gradient-ray"><i>gradient ray</i></a> at the location where this
  63.249 +   The point's color is then the color of the positive section of the <a
  63.250 +   href="#gradient-line0"><i>gradient line</i></a> at the location where this
  63.251     ellipse intersects it.
  63.252  
  63.253    <h4 class=no-toc id=degenerate-radials><span class=secno>4.2.3. </span>
  63.254 @@ -2026,8 +2021,7 @@
  63.255     href="#position"><var>&lt;position></var></a> , ]?
  63.256  <!--
  63.257  	-->  <a
  63.258 -   href="#angular-color-stop-type"><var>&lt;angular-color-stop></var></a> [ , <a
  63.259 -   href="#angular-color-stop-type"><var>&lt;angular-color-stop></var></a> ]+
  63.260 +   href="#ltangular-color-stop-list"><var>&lt;angular-color-stop-list></var></a>
  63.261  <!--
  63.262  	-->)</pre>
  63.263  
  63.264 @@ -2036,17 +2030,13 @@
  63.265     object area and the gradient box as the positioning area. If this argument
  63.266     is omitted, it defaults to ‘<code class=css>at center</code>’.
  63.267  
  63.268 -  <p> The <a
  63.269 -   href="#angular-color-stop-type"><code>&lt;angular-color-stop></code></a>
  63.270 -   is defined in the section on color-stops.
  63.271 -
  63.272    <p class=issue> Anything else that might be useful? Defining the shape of
  63.273     the gradient as elliptical, perhaps?
  63.274  
  63.275    <h4 class=no-toc id=conic-color-stops><span class=secno>4.3.2. </span>
  63.276     Placing Color Stops</h4>
  63.277  
  63.278 -  <p> Color stops are placed on a <a href="#gradient-line"><i>gradient
  63.279 +  <p> Color stops are placed on a <a href="#gradient-line0"><i>gradient
  63.280     line</i></a> that curves around the center in a circle, with both the 0%
  63.281     and 100% locations at 0deg. Just like linear gradients, 0deg points to the
  63.282     top of the page, and increasing angles correspond to clockwise movement
  63.283 @@ -2070,7 +2060,7 @@
  63.284    <p> The color of the gradient at any point is determined by first finding
  63.285     the unique ray anchored at the center of the gradient that passes through
  63.286     the given point. The point's color is then the color of the <a
  63.287 -   href="#gradient-line"><i>gradient line</i></a> at the location where this
  63.288 +   href="#gradient-line0"><i>gradient line</i></a> at the location where this
  63.289     ray intersects it.
  63.290  
  63.291    <h4 class=no-toc id=conic-gradient-examples><span class=secno>4.3.3.
  63.292 @@ -2245,76 +2235,172 @@
  63.293    <h3 id=color-stop-syntax><span class=secno>4.5. </span> Gradient
  63.294     Color-Stops</h3>
  63.295  
  63.296 -  <pre class=prod><dfn
  63.297 -   id=color-stop-type>&lt;color-stop></dfn> = <var>&lt;color></var> [ <var>&lt;percentage></var> | <a
  63.298 -   href="#radial-size-circle"><var>&lt;length></var></a> ]{0,2}</pre>
  63.299 -
  63.300 -  <pre class=prod><dfn
  63.301 -   id=angular-color-stop-type>&lt;angular-color-stop></dfn> = <var>&lt;color></var> [ <var>&lt;percentage></var> | <var>&lt;angle></var> ]{0,2}</pre>
  63.302 -
  63.303 -  <p class=issue> Should we allow the color/percentage to be swapped? CSS is
  63.304 -   usually permissive about the order of things as long as it doesn't
  63.305 -   introduce ambiguity. The counter-argument is that people <em>might</em> be
  63.306 -   confused by an expression like "50% black", which sounds like a gray
  63.307 -   color.
  63.308 -
  63.309 -  <p> Color-stops are points placed along the <a
  63.310 -   href="#gradient-line"><i>gradient line</i></a> defined by the gradient
  63.311 -   function in which the color-stop is used. Color-stops must be specified in
  63.312 -   order. Percentages refer to the length of the gradient line, with 0% being
  63.313 -   at the starting point and 100% being at the ending point. Lengths are
  63.314 -   measured from the starting point in the direction of the ending point.
  63.315 -   Angles are measured with 0deg pointing up, and positive angles
  63.316 -   corresponding to clockwise rotations. Color-stops are usually placed
  63.317 -   between the starting point and ending point, but that's not required; the
  63.318 -   gradient line extends infinitely in both directions, and a color-stop can
  63.319 -   be placed at any position on the line.
  63.320 -
  63.321 -  <p> A color-stop with two locations is exactly equivalent to specifying two
  63.322 -   color-stops with the same color, one at each location, including how it
  63.323 -   reacts to the clean-up steps below. <span class=note>Specifying two
  63.324 -   locations makes it easier to create solid-color "stripes" in a gradient,
  63.325 -   without having to repeat the color twice.</span>
  63.326 -
  63.327 -  <p class=issue> Make sure this is handled well in the serialization rules.
  63.328 -
  63.329 -  <p> At each color-stop, the line is the color of the color-stop. Between
  63.330 -   two color-stops, the line's color is linearly interpolated between the
  63.331 -   colors of the two color-stops, with the interpolation taking place in
  63.332 -   premultiplied RGBA space. Before the first color-stop, the line is the
  63.333 -   color of the first color-stop. After the last color-stop, the line is the
  63.334 -   color of the last color-stop.
  63.335 +  <pre class=prod>
  63.336 +<!--
  63.337 +		--><dfn
  63.338 +   id=ltcolor-stop-list>&lt;color-stop-list></dfn> = 
  63.339 +<!--
  63.340 +		-->  <a
  63.341 +   href="#ltcap-linear-color-stop"><var>&lt;cap-linear-color-stop></var></a> , [ <a
  63.342 +   href="#ltlinear-color-stop"><var>&lt;linear-color-stop></var></a># , ]? <a
  63.343 +   href="#ltcap-linear-color-stop"><var>&lt;cap-linear-color-stop></var></a>
  63.344 +<!--
  63.345 +		--><dfn
  63.346 +   id=ltcap-linear-color-stop>&lt;cap-linear-color-stop></dfn> = <var>&lt;color></var> &amp;&amp; <a
  63.347 +   href="#ltcolor-stop-length"><var>&lt;color-stop-length></var></a>?
  63.348 +<!--
  63.349 +		--><dfn
  63.350 +   id=ltlinear-color-stop>&lt;linear-color-stop></dfn> = <var>&lt;color></var> || <a
  63.351 +   href="#ltcolor-stop-length"><var>&lt;color-stop-length></var></a>
  63.352 +<!--
  63.353 +		--><dfn
  63.354 +   id=ltcolor-stop-length>&lt;color-stop-length></dfn> = [ <var
  63.355 +   title="">&lt;length></var> | <var>&lt;percentage></var> ]{1,2}
  63.356 +<!--
  63.357 +		-->
  63.358 +<!--
  63.359 +		--><dfn
  63.360 +   id=ltangular-color-stop-list>&lt;angular-color-stop-list></dfn> = 
  63.361 +<!--
  63.362 +		-->  <a
  63.363 +   href="#ltcap-angular-color-stop"><var>&lt;cap-angular-color-stop></var></a> , [ <a
  63.364 +   href="#ltangular-color-stop"><var>&lt;angular-color-stop></var></a># , ]? <a
  63.365 +   href="#ltcap-angular-color-stop"><var>&lt;cap-angular-color-stop></var></a>
  63.366 +<!--
  63.367 +		--><dfn
  63.368 +   id=ltcap-angular-color-stop>&lt;cap-angular-color-stop></dfn> = <var>&lt;color></var> &amp;&amp; <a
  63.369 +   href="#ltcolor-stop-angle"><var>&lt;color-stop-angle></var></a>?
  63.370 +<!--
  63.371 +		--><dfn
  63.372 +   id=ltangular-color-stop>&lt;angular-color-stop></dfn> = <var>&lt;color></var> || <a
  63.373 +   href="#ltcolor-stop-angle"><var>&lt;color-stop-angle></var></a>
  63.374 +<!--
  63.375 +		--><dfn
  63.376 +   id=ltcolor-stop-angle>&lt;color-stop-angle></dfn> = [ <var>&lt;angle></var> | <var>&lt;percentage></var> ]{1,2}</pre>
  63.377 +
  63.378 +  <p class=issue> This is past the complexity point where it can be easily
  63.379 +   understood with just prose. Add a diagram illustrating the possibilities,
  63.380 +   preferably for all three kinds of gradients (to show off the three shapes
  63.381 +   of gradient lines).
  63.382 +
  63.383 +  <p> The colors in gradients are specified using <a
  63.384 +   href="#color-stop"><i>color stops</i></a>. A <dfn id=color-stop>color
  63.385 +   stop</dfn> is a combination of a color and one or two positions.
  63.386 +   (Depending on the type of gradient, that position can be a length, angle,
  63.387 +   or percentage.) While every color stop conceptually has both of these,
  63.388 +   either of them can be omitted when writing a stylesheet. (The missing
  63.389 +   parts are automatically filled in by the user agent.)
  63.390 +
  63.391 +  <p> Color stops are organized into a <dfn id=color-stop-list>color stop
  63.392 +   list</dfn>, which is a list of two or more <a href="#color-stop"><i>color
  63.393 +   stops</i></a>. The first and last <a href="#color-stop"><i>color
  63.394 +   stops</i></a> in the list must have a color (though their position can be
  63.395 +   omitted).
  63.396 +
  63.397 +  <p> <a href="#color-stop"><i>Color stops</i></a> are placed on a <dfn
  63.398 +   id=gradient-line0>gradient line</dfn>, which defines the colors at every
  63.399 +   point of a gradient. The gradient function defines the shape and length of
  63.400 +   the <a href="#gradient-line0"><i>gradient line</i></a>, along with its
  63.401 +   <dfn id=starting-point>starting point</dfn> and <dfn
  63.402 +   id=ending-point>ending point</dfn>.
  63.403 +
  63.404 +  <p> <a href="#color-stop"><i>Color stops</i></a> must be specified in
  63.405 +   order. Percentages refer to the length of the <a
  63.406 +   href="#gradient-line0"><i>gradient line</i></a> between the <a
  63.407 +   href="#starting-point"><i>starting point</i></a> and <a
  63.408 +   href="#ending-point"><i>ending point</i></a>, with 0% being at the
  63.409 +   starting point and 100% being at the ending point. Lengths are measured
  63.410 +   from the <a href="#starting-point"><i>starting point</i></a> in the
  63.411 +   direction of the <a href="#ending-point"><i>ending point</i></a> along the
  63.412 +   <a href="#gradient-line0"><i>gradient line</i></a>. Angles are measured
  63.413 +   with 0deg pointing up, and positive angles corresponding to clockwise
  63.414 +   rotations from there.
  63.415 +
  63.416 +  <p> <a href="#color-stop"><i>Color stops</i></a> are usually placed between
  63.417 +   the <a href="#starting-point"><i>starting point</i></a> and <a
  63.418 +   href="#ending-point"><i>ending point</i></a>, but that's not required; the
  63.419 +   gradient line extends infinitely in both directions, and a <a
  63.420 +   href="#color-stop"><i>color stop</i></a> can be placed at any position on
  63.421 +   the <a href="#gradient-line0"><i>gradient line</i></a>.
  63.422 +
  63.423 +  <p> A <a href="#color-stop"><i>color stop</i></a> with two locations is
  63.424 +   mostly equivalent to specifying two <a href="#color-stop"><i>color
  63.425 +   stops</i></a> with the same color, one for each position. However, if the
  63.426 +   color is omitted, it's treated slightly differently by step 4 in the
  63.427 +   clean-up algorithm below. <span class=note>Specifying two locations makes
  63.428 +   it easier to create solid-color "stripes" in a gradient, without having to
  63.429 +   repeat the color twice.</span>
  63.430 +
  63.431 +  <p> The position of a <a href="#color-stop"><i>color stop</i></a> can be
  63.432 +   omitted. This causes the <a href="#color-stop"><i>color stop</i></a> to
  63.433 +   position itself automatically between the two surrounding stops. If
  63.434 +   multiple stops in a row lack a position, they space themselves out
  63.435 +   equally.
  63.436 +
  63.437 +  <p> Similarly, the color of a <a href="#color-stop"><i>color stop</i></a>
  63.438 +   can be omitted. The causes the <em>color</em> to be automatically computed
  63.439 +   to halfway between the two surrounding stops, so that the "midpoint" of a
  63.440 +   transition can be easily adjusted. If multiple stops in a row lack a
  63.441 +   color, they space themselves out equally in "color space", giving more
  63.442 +   control over the smoothness of the transition.
  63.443  
  63.444    <p> The following steps must be applied <em>in order</em> to process the
  63.445 -   list of color-stops. After applying these rules, all color-stops will have
  63.446 -   a definite position and they will be in ascending order:
  63.447 +   list of <a href="#color-stop"><i>color stops</i></a>. After applying these
  63.448 +   rules, all <a href="#color-stop"><i>color stops</i></a> will have a
  63.449 +   definite position and color and they will be in ascending order:
  63.450  
  63.451    <ol>
  63.452 -   <li> If the first color-stop does not have a position, set its position to
  63.453 -    0%. If the last color-stop does not have a position, set its position to
  63.454 -    100%.
  63.455 -
  63.456 -   <li> If a color-stop has a position that is less than the specified
  63.457 -    position of any color-stop before it in the list, set its position to be
  63.458 -    equal to the largest specified position of any color-stop before it.
  63.459 -
  63.460 -   <li> If any color-stop still does not have a position, then, for each run
  63.461 -    of adjacent color-stops without positions, set their positions so that
  63.462 -    they are evenly spaced between the preceding and following color-stops
  63.463 -    with positions.
  63.464 +   <li> If the first <a href="#color-stop"><i>color stop</i></a> does not
  63.465 +    have a position, set its position to 0%. If the last <a
  63.466 +    href="#color-stop"><i>color stop</i></a> does not have a position, set
  63.467 +    its position to 100%.
  63.468 +
  63.469 +   <li> If a <a href="#color-stop"><i>color stop</i></a> has a position that
  63.470 +    is less than the specified position of any <a href="#color-stop"><i>color
  63.471 +    stop</i></a> before it in the list, set its position to be equal to the
  63.472 +    largest specified position of any <a href="#color-stop"><i>color
  63.473 +    stop</i></a> before it.
  63.474 +
  63.475 +   <li> If any <a href="#color-stop"><i>color stop</i></a> still does not
  63.476 +    have a position, then, for each run of adjacent <a
  63.477 +    href="#color-stop"><i>color stops</i></a> without positions, set their
  63.478 +    positions so that they are evenly spaced between the preceding and
  63.479 +    following <a href="#color-stop"><i>color stops</i></a> with positions.
  63.480 +
  63.481 +   <li> If any <a href="#color-stop"><i>color stop</i></a> does not have a
  63.482 +    color, then, for each run of adjacent <a href="#color-stop"><i>color
  63.483 +    stops</i></a> without colors, set their colors to be evenly spaced linear
  63.484 +    interpolations in premultiplied sRGBA space between the preceding and
  63.485 +    following <a href="#color-stop"><i>color stops</i></a> with colors. Note
  63.486 +    that a <a href="#color-stop"><i>color stop</i></a> with two positions is
  63.487 +    still counted as a single <a href="#color-stop"><i>color stop</i></a> by
  63.488 +    this step, so both positions will be assigned the same color.
  63.489    </ol>
  63.490  
  63.491    <p class=issue> This requires us to wait until <em>after</em> layout to do
  63.492     fix-up, because implied-position stops (set by step 3) may depend on stops
  63.493     that need layout information to place, and which may be corrected by step
  63.494 -   2. Swapping steps 2 and 3 would let us interpolate color-stops purely at
  63.495 -   computed-value time, which is a nice plus, at the cost of changing
  63.496 -   behavior from level 3 for some edge cases that triggered fixup.
  63.497 -
  63.498 -  <p> If multiple color-stops have the same position, they produce an
  63.499 -   infinitesimal transition from the one specified first in the rule to the
  63.500 -   one specified last. In effect, the color suddenly changes at that position
  63.501 -   rather than smoothly transitioning.
  63.502 +   2. Swapping steps 2 and 3 would let us interpolate <a
  63.503 +   href="#color-stop"><i>color stops</i></a> purely at computed-value time,
  63.504 +   which is a nice plus, at the cost of changing behavior from level 3 for
  63.505 +   some edge cases that triggered fixup. Make sure this is handled well in
  63.506 +   the serialization rules.
  63.507 +
  63.508 +  <p> At each <a href="#color-stop"><i>color stop</i></a> position, the line
  63.509 +   is the color of the <a href="#color-stop"><i>color stop</i></a>. Between
  63.510 +   two <a href="#color-stop"><i>color stops</i></a>, the line's color is
  63.511 +   linearly interpolated between the colors of the two <a
  63.512 +   href="#color-stop"><i>color stops</i></a>, with the interpolation taking
  63.513 +   place in premultiplied RGBA space. Before the first <a
  63.514 +   href="#color-stop"><i>color stop</i></a>, the line is the color of the
  63.515 +   first <a href="#color-stop"><i>color stop</i></a>. After the last <a
  63.516 +   href="#color-stop"><i>color stop</i></a>, the line is the color of the
  63.517 +   last <a href="#color-stop"><i>color stop</i></a>.
  63.518 +
  63.519 +  <p> If multiple <a href="#color-stop"><i>color stops</i></a> have the same
  63.520 +   position, they produce an infinitesimal transition from the one specified
  63.521 +   first in the rule to the one specified last. In effect, the color suddenly
  63.522 +   changes at that position rather than smoothly transitioning.
  63.523  
  63.524    <div class=example>
  63.525     <p> Below are several pairs of gradients. The latter of each pair is a
  63.526 @@ -2376,7 +2462,15 @@
  63.527  <!--
  63.528  		-->   =23=>
  63.529  <!--
  63.530 -		-->   linear-gradient(red 80px, white 80px, black 90px, blue 100px)</pre>
  63.531 +		-->   linear-gradient(red 80px, white 80px, black 90px, blue 100px)
  63.532 +<!--
  63.533 +		-->
  63.534 +<!--
  63.535 +		-->8. linear-gradient(red, 25%, white)
  63.536 +<!--
  63.537 +		-->   =14=>
  63.538 +<!--
  63.539 +		-->   linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%)</pre>
  63.540    </div>
  63.541  
  63.542    <div class=example>
  63.543 @@ -2404,14 +2498,15 @@
  63.544    </div>
  63.545  
  63.546    <p class=note> Note: It is recommended that authors not mix different types
  63.547 -   of units, such as px, em, or %, in a single rule, as this can cause a
  63.548 -   color-stop to unintentionally try to move before an earlier one. For
  63.549 -   example, the rule ‘<code class=css>background-image:
  63.550 -   linear-gradient(yellow 100px, blue 50%)</code>’ wouldn't require any
  63.551 -   fix-up as long as the background area is at least 200px tall. If it was
  63.552 -   150px tall, however, the blue color-stop's position would be equivalent to
  63.553 -   "75px", which precedes the yellow color-stop, and would be corrected to a
  63.554 -   position of 100px.
  63.555 +   of units, such as px, em, or %, in a single rule, as this can cause a <a
  63.556 +   href="#color-stop"><i>color stop</i></a> to unintentionally try to move
  63.557 +   before an earlier one. For example, the rule ‘<code
  63.558 +   class=css>background-image: linear-gradient(yellow 100px, blue
  63.559 +   50%)</code>’ wouldn't require any fix-up as long as the background area
  63.560 +   is at least 200px tall. If it was 150px tall, however, the blue <a
  63.561 +   href="#color-stop"><i>color stop's</i></a> position would be equivalent to
  63.562 +   "75px", which precedes the yellow <a href="#color-stop"><i>color
  63.563 +   stop</i></a>, and would be corrected to a position of 100px.
  63.564  
  63.565    <p class=note> Note: The definition and implications of "premultiplied"
  63.566     color spaces are given elsewhere in the technical literature, but a quick
  63.567 @@ -3092,7 +3187,7 @@
  63.568      <tr>
  63.569       <th><a href="#values">Value:</a>
  63.570  
  63.571 -     <td>[from-image || <var>&lt;resolution></var>] && snap?
  63.572 +     <td>[from-image || <var>&lt;resolution></var>] &amp;&amp; snap?
  63.573  
  63.574      <tr>
  63.575       <th>Initial:
  63.576 @@ -3566,16 +3661,13 @@
  63.577      class=css>radial-gradient()</code>’ or a ‘<code
  63.578      class=css>repeating-linear-gradient()</code>’.)
  63.579  
  63.580 -   <li> Both the starting and ending gradient must have the same number of <a
  63.581 -    href="#color-stop-type"><var>&lt;color-stop></var></a>s. For this
  63.582 -    purpose, a repeating gradient is considered to have infinite <a
  63.583 -    href="#color-stop-type"><var>&lt;color-stop></var></a>s, and thus all
  63.584 -    repeating gradients have the same number of <a
  63.585 -    href="#color-stop-type"><var>&lt;color-stop></var></a>s. (Note that one
  63.586 -    may pad a gradient with additional <a
  63.587 -    href="#color-stop-type"><var>&lt;color-stop></var></a>s placed atop each
  63.588 -    other, if necessary to make two gradients have the same number of <a
  63.589 -    href="#color-stop-type"><var>&lt;color-stop></var></a>s.)
  63.590 +   <li> Both the starting and ending gradient must have the same number of
  63.591 +    <var>&lt;color-stop></var>s. For this purpose, a repeating gradient is
  63.592 +    considered to have infinite <var>&lt;color-stop></var>s, and thus all
  63.593 +    repeating gradients have the same number of <var>&lt;color-stop></var>s.
  63.594 +    (Note that one may pad a gradient with additional
  63.595 +    <var>&lt;color-stop></var>s placed atop each other, if necessary to make
  63.596 +    two gradients have the same number of <var>&lt;color-stop></var>s.)
  63.597    </ol>
  63.598  
  63.599    <p> If the two gradients satisfy both of those constraints, they must be
  63.600 @@ -3709,9 +3801,46 @@
  63.601        TTTTTTTTTTT       hhhhhhh     hhhhhhh    eeeeeeeeeeeeee       EEEEEEEEEEEEEEEEEEEEEE  nnnnnn    nnnnnn   ddddddddd   ddddd
  63.602  -->
  63.603  
  63.604 -  <h2 id=conformance><span class=secno>9. </span> Conformance</h2>
  63.605 -
  63.606 -  <h3 id=conventions><span class=secno>9.1. </span> Document Conventions</h3>
  63.607 +  <h2 id=changes><span class=secno>9. </span> Changes since Images 3</h2>
  63.608 +
  63.609 +  <ul>
  63.610 +   <li>added ‘<code class=property>x</code>’ unit (or rather, put in an
  63.611 +    issue about adding it as a general alias for dppx)
  63.612 +
  63.613 +   <li>restored the ltr/rtl keywords in image(), but in a different place
  63.614 +
  63.615 +   <li>added image-set()
  63.616 +
  63.617 +   <li>re-added element()
  63.618 +
  63.619 +   <li>re-added cross-fade()
  63.620 +    <ul>
  63.621 +     <li>changed the syntax a bit to allow interesting things
  63.622 +    </ul>
  63.623 +
  63.624 +   <li>added issue for focus-moving to radial-gradient()
  63.625 +
  63.626 +   <li>added conic-gradient()
  63.627 +
  63.628 +   <li>added two-position syntax for color-stops
  63.629 +
  63.630 +   <li>allowed the color to be omitted from color-stops
  63.631 +
  63.632 +   <li>loosened the syntax for color-stops to allow color/length in either
  63.633 +    order
  63.634 +
  63.635 +   <li>added image-orientation:from-image
  63.636 +
  63.637 +   <li>re-added image-rendering
  63.638 +
  63.639 +   <li>added interpolation section
  63.640 +
  63.641 +   <li>added serialization section
  63.642 +  </ul>
  63.643 +
  63.644 +  <h2 id=conformance><span class=secno>10. </span> Conformance</h2>
  63.645 +
  63.646 +  <h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3>
  63.647  
  63.648    <p>Conformance requirements are expressed with a combination of descriptive
  63.649     assertions and RFC 2119 terminology. The key words “MUST”, “MUST
  63.650 @@ -3738,7 +3867,7 @@
  63.651  
  63.652    <p class=note>Note, this is an informative note.
  63.653  
  63.654 -  <h3 id=conformance-classes><span class=secno>9.2. </span> Conformance
  63.655 +  <h3 id=conformance-classes><span class=secno>10.2. </span> Conformance
  63.656     Classes</h3>
  63.657  
  63.658    <p>Conformance to CSS Image Values and Replaced Content Module Level 4 is
  63.659 @@ -3783,7 +3912,7 @@
  63.660     feature in this module, and meet all other conformance requirements of
  63.661     style sheets as described in this module.
  63.662  
  63.663 -  <h3 id=partial><span class=secno>9.3. </span> Partial Implementations</h3>
  63.664 +  <h3 id=partial><span class=secno>10.3. </span> Partial Implementations</h3>
  63.665  
  63.666    <p>So that authors can exploit the forward-compatible parsing rules to
  63.667     assign fallback values, CSS renderers <strong>must</strong> treat as
  63.668 @@ -3797,7 +3926,7 @@
  63.669     unsupported values must be), CSS requires that the entire declaration be
  63.670     ignored.
  63.671  
  63.672 -  <h3 id=experimental><span class=secno>9.4. </span> Experimental
  63.673 +  <h3 id=experimental><span class=secno>10.4. </span> Experimental
  63.674     Implementations</h3>
  63.675  
  63.676    <p>To avoid clashes with future CSS features, the CSS2.1 specification
  63.677 @@ -3811,7 +3940,7 @@
  63.678     vendor-prefixed syntax for such features, including those in W3C Working
  63.679     Drafts. This avoids incompatibilities with future changes in the draft.
  63.680  
  63.681 -  <h3 id=testing><span class=secno>9.5. </span>Non-Experimental
  63.682 +  <h3 id=testing><span class=secno>10.5. </span>Non-Experimental
  63.683     Implementations</h3>
  63.684  
  63.685    <p>Once a specification reaches the Candidate Recommendation stage,
  63.686 @@ -3833,7 +3962,7 @@
  63.687     href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  63.688     mailing list.
  63.689  
  63.690 -  <h3 id=cr-exit-criteria><span class=secno>9.6. </span> CR Exit Criteria</h3>
  63.691 +  <h3 id=cr-exit-criteria><span class=secno>10.6. </span> CR Exit Criteria</h3>
  63.692  
  63.693    <p>For this specification to be advanced to Proposed Recommendation, there
  63.694     must be at least two independent, interoperable implementations of each
  63.695 @@ -4094,15 +4223,24 @@
  63.696    <!--begin-index-->
  63.697  
  63.698    <ul class=indexlist>
  63.699 -   <li>&lt;angular-color-stop>, <a href="#angular-color-stop-type"
  63.700 +   <li>&lt;angular-color-stop>, <a href="#ltangular-color-stop"
  63.701      title="&lt;angular-color-stop>"><strong>4.5.</strong></a>
  63.702  
  63.703 +   <li>&lt;angular-color-stop-list>, <a href="#ltangular-color-stop-list"
  63.704 +    title="&lt;angular-color-stop-list>"><strong>4.5.</strong></a>
  63.705 +
  63.706     <li>authoring tool, <a href="#authoring-tool"
  63.707 -    title="authoring tool"><strong>9.2.</strong></a>
  63.708 +    title="authoring tool"><strong>10.2.</strong></a>
  63.709  
  63.710     <li>auto, <a href="#image-rendering-auto"
  63.711      title=auto><strong>6.3.</strong></a>
  63.712  
  63.713 +   <li>&lt;cap-angular-color-stop>, <a href="#ltcap-angular-color-stop"
  63.714 +    title="&lt;cap-angular-color-stop>"><strong>4.5.</strong></a>
  63.715 +
  63.716 +   <li>&lt;cap-linear-color-stop>, <a href="#ltcap-linear-color-stop"
  63.717 +    title="&lt;cap-linear-color-stop>"><strong>4.5.</strong></a>
  63.718 +
  63.719     <li>‘<a href="#radial-closest-corner"><code
  63.720      class=css>closest-corner</code></a>’, <a href="#radial-closest-corner"
  63.721      title="''closest-corner''"><strong>4.2.1.</strong></a>
  63.722 @@ -4111,8 +4249,20 @@
  63.723      class=css>closest-side</code></a>’, <a href="#radial-closest-side"
  63.724      title="''closest-side''"><strong>4.2.1.</strong></a>
  63.725  
  63.726 -   <li>&lt;color-stop>, <a href="#color-stop-type"
  63.727 -    title="&lt;color-stop>"><strong>4.5.</strong></a>
  63.728 +   <li>color stop, <a href="#color-stop"
  63.729 +    title="color stop"><strong>4.5.</strong></a>
  63.730 +
  63.731 +   <li>&lt;color-stop-angle>, <a href="#ltcolor-stop-angle"
  63.732 +    title="&lt;color-stop-angle>"><strong>4.5.</strong></a>
  63.733 +
  63.734 +   <li>&lt;color-stop-length>, <a href="#ltcolor-stop-length"
  63.735 +    title="&lt;color-stop-length>"><strong>4.5.</strong></a>
  63.736 +
  63.737 +   <li>&lt;color-stop-list>, <a href="#ltcolor-stop-list"
  63.738 +    title="&lt;color-stop-list>"><strong>4.5.</strong></a>
  63.739 +
  63.740 +   <li>color stop list, <a href="#color-stop-list"
  63.741 +    title="color stop list"><strong>4.5.</strong></a>
  63.742  
  63.743     <li>concrete object size, <a href="#concrete-object-size"
  63.744      title="concrete object size"><strong>5.1.</strong></a>
  63.745 @@ -4147,6 +4297,9 @@
  63.746     <li>element-not-rendered, <a href="#element-not-rendered"
  63.747      title=element-not-rendered><strong>3.4.</strong></a>
  63.748  
  63.749 +   <li>ending point, <a href="#ending-point"
  63.750 +    title="ending point"><strong>4.5.</strong></a>
  63.751 +
  63.752     <li>ending shape, <a href="#ending-shape"
  63.753      title="ending shape"><strong>4.2.</strong></a>
  63.754  
  63.755 @@ -4173,10 +4326,8 @@
  63.756      title="gradient box"><strong>4.</strong></a>
  63.757  
  63.758     <li>gradient line, <a href="#gradient-line"
  63.759 -    title="gradient line"><strong>4.1.1.</strong></a>
  63.760 -
  63.761 -   <li>gradient ray, <a href="#gradient-ray"
  63.762 -    title="gradient ray"><strong>4.2.2.</strong></a>
  63.763 +    title="gradient line"><strong>4.1.1.</strong></a>, <a
  63.764 +    href="#gradient-line0" title="gradient line"><strong>4.5.</strong></a>
  63.765  
  63.766     <li>&lt;image>, <a href="#image-type"
  63.767      title="&lt;image>"><strong>3.</strong></a>
  63.768 @@ -4233,6 +4384,9 @@
  63.769      <var>&lt;percentage></var> ]{2}, <a href="#radial-size-ellipse"
  63.770      title="[ &lt;length> | &lt;percentage> ]{2}"><strong>4.2.1.</strong></a>
  63.771  
  63.772 +   <li>&lt;linear-color-stop>, <a href="#ltlinear-color-stop"
  63.773 +    title="&lt;linear-color-stop>"><strong>4.5.</strong></a>
  63.774 +
  63.775     <li>&lt;linear-gradient>, <a href="#linear-gradient-type"
  63.776      title="&lt;linear-gradient>"><strong>4.1.1.</strong></a>
  63.777  
  63.778 @@ -4256,7 +4410,8 @@
  63.779     <li>&lt;radial-gradient>, <a href="#radial-gradient-type"
  63.780      title="&lt;radial-gradient>"><strong>4.2.1.</strong></a>
  63.781  
  63.782 -   <li>renderer, <a href="#renderer" title=renderer><strong>9.2.</strong></a>
  63.783 +   <li>renderer, <a href="#renderer"
  63.784 +    title=renderer><strong>10.2.</strong></a>
  63.785  
  63.786     <li>&lt;repeating-conic-gradient>, <a
  63.787      href="#repeating-conic-gradient-type"
  63.788 @@ -4282,10 +4437,13 @@
  63.789     <li>specified size, <a href="#specified-size"
  63.790      title="specified size"><strong>5.1.</strong></a>
  63.791  
  63.792 +   <li>starting point, <a href="#starting-point"
  63.793 +    title="starting point"><strong>4.5.</strong></a>
  63.794 +
  63.795     <li>style sheet
  63.796      <ul>
  63.797       <li>as conformance class, <a href="#style-sheet"
  63.798 -      title="style sheet, as conformance class"><strong>9.2.</strong></a>
  63.799 +      title="style sheet, as conformance class"><strong>10.2.</strong></a>
  63.800      </ul>
  63.801    </ul>
  63.802    <!--end-index-->
  63.803 @@ -4344,7 +4502,7 @@
  63.804      <tr>
  63.805       <th><a class=property href="#image-resolution">image-resolution</a>
  63.806  
  63.807 -     <td>[from-image || &lt;resolution>] && snap?
  63.808 +     <td>[from-image || &lt;resolution>] &amp;&amp; snap?
  63.809  
  63.810       <td>1dppx
  63.811  
    64.1 --- a/css4-images/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    64.2 +++ b/css4-images/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    64.3 @@ -132,12 +132,8 @@
    64.4  
    64.5  	<li>Logical keywords for specifying linear gradient direction.
    64.6  
    64.7 -	<li>Conical gradients
    64.8 -
    64.9  	<li>More interpolation modes for gradients: <a href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html">http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a>
   64.10  
   64.11 -	<li>How to transition/animate gradients
   64.12 -
   64.13  	<li>Ability to reference an SVG paint server via url (maybe as element(&lt;string>)?)
   64.14  </ol>
   64.15  
   64.16 @@ -1114,7 +1110,7 @@
   64.17  	<pre class=prod><!--
   64.18  		--><dfn id='linear-gradient-type'>&lt;linear-gradient></dfn> = linear-gradient(&#xa;<!--
   64.19  		-->	[ [ <var>&lt;angle></var> | to <var>&lt;side-or-corner></var> ] ,]? &#xa;<!--
   64.20 -		-->	<var>&lt;color-stop></var>[, <var>&lt;color-stop></var>]+&#xa;<!--
   64.21 +		-->	<var>&lt;color-stop-list></var>&#xa;<!--
   64.22  		-->)&#xa;<!--
   64.23  		-->&#xa;<!--
   64.24  		--><dfn id='side-or-corner'>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]</pre>
   64.25 @@ -1308,7 +1304,7 @@
   64.26  		-->  [ [ <var>&lt;shape></var> || <var>&lt;size></var> ] [ at <var>&lt;position></var> ]? , |&#xa;<!--
   64.27  		-->    at <var>&lt;position></var>, &#xa;<!--
   64.28  		-->  ]?&#xa;<!--
   64.29 -		-->  <var>&lt;color-stop></var> [ , <var>&lt;color-stop></var> ]+&#xa;<!--
   64.30 +		-->  <var>&lt;color-stop-list></var>&#xa;<!--
   64.31  		-->)</pre>
   64.32  
   64.33  	<div class=example>
   64.34 @@ -1448,19 +1444,19 @@
   64.35  		-->&lt;extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side</pre>
   64.36  	</div>
   64.37  
   64.38 +
   64.39  <h4 class="no-toc" id="radial-color-stops">
   64.40  Placing Color Stops</h4>
   64.41  
   64.42  	<p>
   64.43 -		Color-stops are placed on a <dfn>gradient ray</dfn>, 
   64.44 +		Color-stops are placed on a <i>gradient line</i>, 
   64.45  		similar to the <i>gradient line</i> of linear gradients.  
   64.46 -		The <i>gradient ray</i> is anchored at the center of the gradient 
   64.47 -		and extends toward the right.  
   64.48 -		The 0% location is at the start of the <i>gradient ray</i>, 
   64.49 -		and the 100% location is on the point where the <i>gradient ray</i> intersects the <i>ending shape</i>.  
   64.50 -		A color-stop can be placed at a negative location; 
   64.51 -		though the negative region of the <i>gradient ray</i> is never directly consulted for rendering, 
   64.52 -		color stops placed there can affect the color of non-negative locations on the <i>gradient ray</i> through interpolation or repetition 
   64.53 +		The <i>gradient line's</i> <i>start point</i> is at the center of the gradient,
   64.54 +		and it extends toward the right,
   64.55 +		with the <i>ending point</i> on the point where the <i>gradient line</i> intersects the <i>ending shape</i>.
   64.56 +		A color-stop can be placed at a location before 0%;
   64.57 +		though the negative region of the <i>gradient line</i> is never directly consulted for rendering, 
   64.58 +		color stops placed there can affect the color of non-negative locations on the <i>gradient line</i> through interpolation or repetition 
   64.59  		(see <a href='#repeating-gradients'>repeating gradients</a>).  
   64.60  		For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient 
   64.61  		that starts with a reddish-orange color in the center 
   64.62 @@ -1472,7 +1468,7 @@
   64.63  		The color of the gradient at any point is determined by 
   64.64  		first finding the unique ellipse passing through that point 
   64.65  		with the same center, orientation, and ratio between major and minor axises as the ending-shape.
   64.66 -		The point's color is then the color of the <i>gradient ray</i> at the location where this ellipse intersects it.
   64.67 +		The point's color is then the color of the positive section of the <i>gradient line</i> at the location where this ellipse intersects it.
   64.68  
   64.69  <h4 class="no-toc" id="degenerate-radials">
   64.70  Degenerate Radial Gradients</h4>
   64.71 @@ -1613,7 +1609,7 @@
   64.72  	<pre class='prod'><!--
   64.73  	--><dfn id='conic-gradient-type'>&lt;conic-gradient></dfn> = conic-gradient(&#xa;<!--
   64.74  	-->  [ at <var>&lt;position></var> , ]?&#xa;<!--
   64.75 -	-->  <var>&lt;angular-color-stop></var> [ , <var>&lt;angular-color-stop></var> ]+&#xa;<!--
   64.76 +	-->  <var>&lt;angular-color-stop-list></var>&#xa;<!--
   64.77  	-->)</pre>
   64.78  
   64.79  	<p>
   64.80 @@ -1623,9 +1619,6 @@
   64.81  		If this argument is omitted, 
   64.82  		it defaults to 'at center'.
   64.83  
   64.84 -	<p>
   64.85 -		The <code>&lt;angular-color-stop></code> is defined in the section on color-stops.
   64.86 -
   64.87  	<p class='issue'>
   64.88  		Anything else that might be useful?  Defining the shape of the gradient as elliptical, perhaps?
   64.89  
   64.90 @@ -1827,72 +1820,115 @@
   64.91  <h3 id='color-stop-syntax'>
   64.92  Gradient Color-Stops</h3>
   64.93  
   64.94 -	<pre class=prod><dfn id='color-stop-type'>&lt;color-stop></dfn> = <var>&lt;color></var> [ <var>&lt;percentage></var> | <var>&lt;length></var> ]{0,2}</pre>
   64.95 -	<pre class=prod><dfn id='angular-color-stop-type'>&lt;angular-color-stop></dfn> = <var>&lt;color></var> [ <var>&lt;percentage></var> | <var>&lt;angle></var> ]{0,2}</pre>
   64.96 +	<pre class=prod>&#xa;<!--
   64.97 +		--><dfn>&lt;color-stop-list></dfn> = &#xa;<!--
   64.98 +		-->  <var>&lt;cap-linear-color-stop></var> , [ <var>&lt;linear-color-stop></var># , ]? <var>&lt;cap-linear-color-stop></var>&#xa;<!--
   64.99 +		--><dfn>&lt;cap-linear-color-stop></dfn> = <var>&lt;color></var> &amp;&amp; <var>&lt;color-stop-length></var>?&#xa;<!--
  64.100 +		--><dfn>&lt;linear-color-stop></dfn> = <var>&lt;color></var> || <var>&lt;color-stop-length></var>&#xa;<!--
  64.101 +		--><dfn>&lt;color-stop-length></dfn> = [ <var title=''>&lt;length></var> | <var>&lt;percentage></var> ]{1,2}&#xa;<!--
  64.102 +		-->&#xa;<!--
  64.103 +		--><dfn>&lt;angular-color-stop-list></dfn> = &#xa;<!--
  64.104 +		-->  <var>&lt;cap-angular-color-stop></var> , [ <var>&lt;angular-color-stop></var># , ]? <var>&lt;cap-angular-color-stop></var>&#xa;<!--
  64.105 +		--><dfn>&lt;cap-angular-color-stop></dfn> = <var>&lt;color></var> &amp;&amp; <var>&lt;color-stop-angle></var>?&#xa;<!--
  64.106 +		--><dfn>&lt;angular-color-stop></dfn> = <var>&lt;color></var> || <var>&lt;color-stop-angle></var>&#xa;<!--
  64.107 +		--><dfn>&lt;color-stop-angle></dfn> = [ <var>&lt;angle></var> | <var>&lt;percentage></var> ]{1,2}</pre>
  64.108  
  64.109  	<p class='issue'>
  64.110 -		Should we allow the color/percentage to be swapped?
  64.111 -		CSS is usually permissive about the order of things as long as it doesn't introduce ambiguity.
  64.112 -		The counter-argument is that people <em>might</em> be confused by an expression like "50% black",
  64.113 -		which sounds like a gray color.
  64.114 +		This is past the complexity point where it can be easily understood with just prose.
  64.115 +		Add a diagram illustrating the possibilities,
  64.116 +		preferably for all three kinds of gradients
  64.117 +		(to show off the three shapes of gradient lines).
  64.118  
  64.119  	<p>
  64.120 -		Color-stops are points placed along the <i>gradient line</i>
  64.121 -		defined by the gradient function in which the color-stop is used.
  64.122 -		Color-stops must be specified in order. 
  64.123 -		Percentages refer to the length of the gradient line, 
  64.124 +		The colors in gradients are specified using <i>color stops</i>.
  64.125 +		A <dfn>color stop</dfn> is a combination of a color and one or two positions.
  64.126 +		(Depending on the type of gradient, that position can be a length, angle, or percentage.)
  64.127 +		While every color stop conceptually has both of these,
  64.128 +		either of them can be omitted when writing a stylesheet.
  64.129 +		(The missing parts are automatically filled in by the user agent.)
  64.130 +
  64.131 +	<p>
  64.132 +		Color stops are organized into a <dfn>color stop list</dfn>,
  64.133 +		which is a list of two or more <i>color stops</i>.
  64.134 +		The first and last <i>color stops</i> in the list 
  64.135 +		must have a color
  64.136 +		(though their position can be omitted).
  64.137 +
  64.138 +	<p>
  64.139 +		<i>Color stops</i> are placed on a <dfn>gradient line</dfn>,
  64.140 +		which defines the colors at every point of a gradient.
  64.141 +		The gradient function defines the shape and length of the <i>gradient line</i>,
  64.142 +		along with its <dfn>starting point</dfn> and <dfn>ending point</dfn>.
  64.143 +
  64.144 +	<p>
  64.145 +		<i>Color stops</i> must be specified in order. 
  64.146 +		Percentages refer to the length of the <i>gradient line</i> between the <i>starting point</i> and <i>ending point</i>, 
  64.147  		with 0% being at the starting point 
  64.148 -		and 100% being at the ending point. 
  64.149 -		Lengths are measured from the starting point in the direction of the ending point.
  64.150 +		and 100% being at the ending point.
  64.151 +		Lengths are measured from the <i>starting point</i> in the direction of the <i>ending point</i> along the <i>gradient line</i>.
  64.152  		Angles are measured with 0deg pointing up,
  64.153 -		and positive angles corresponding to clockwise rotations.
  64.154 -		Color-stops are usually placed between the starting point and ending point, 
  64.155 +		and positive angles corresponding to clockwise rotations from there.
  64.156 +
  64.157 +	<p>
  64.158 +		<i>Color stops</i> are usually placed between the <i>starting point</i> and <i>ending point</i>, 
  64.159  		but that's not required; 
  64.160  		the gradient line extends infinitely in both directions, 
  64.161 -		and a color-stop can be placed at any position on the line.
  64.162 +		and a <i>color stop</i> can be placed at any position on the <i>gradient line</i>.
  64.163  
  64.164  	<p>
  64.165 -		A color-stop with two locations is exactly equivalent 
  64.166 -		to specifying two color-stops with the same color,
  64.167 -		one at each location,
  64.168 -		including how it reacts to the clean-up steps below.
  64.169 +		A <i>color stop</i> with two locations is mostly equivalent 
  64.170 +		to specifying two <i>color stops</i> with the same color,
  64.171 +		one for each position.
  64.172 +		However, if the color is omitted, 
  64.173 +		it's treated slightly differently by step 4 in the clean-up algorithm below.
  64.174  		<span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient,
  64.175  			without having to repeat the color twice.</span>
  64.176  
  64.177 -	<p class='issue'>
  64.178 -		Make sure this is handled well in the serialization rules.
  64.179 -
  64.180  	<p>
  64.181 -		At each color-stop, 
  64.182 -		the line is the color of the color-stop.  
  64.183 -		Between two color-stops, 
  64.184 -		the line's color is linearly interpolated between the colors of the two color-stops, 
  64.185 -		with the interpolation taking place in premultiplied RGBA space.  
  64.186 -		Before the first color-stop, 
  64.187 -		the line is the color of the first color-stop.  
  64.188 -		After the last color-stop, the line is the color of the last color-stop.
  64.189 +		The position of a <i>color stop</i> can be omitted.
  64.190 +		This causes the <i>color stop</i> to position itself automatically
  64.191 +		between the two surrounding stops.
  64.192 +		If multiple stops in a row lack a position,
  64.193 +		they space themselves out equally.
  64.194  
  64.195  	<p>
  64.196 -		The following steps must be applied <em>in order</em> to process the list of color-stops.  
  64.197 +		Similarly, the color of a <i>color stop</i> can be omitted.
  64.198 +		The causes the <em>color</em> to be automatically computed
  64.199 +		to halfway between the two surrounding stops,
  64.200 +		so that the "midpoint" of a transition can be easily adjusted.
  64.201 +		If multiple stops in a row lack a color,
  64.202 +		they space themselves out equally in "color space",
  64.203 +		giving more control over the smoothness of the transition.
  64.204 +
  64.205 +	<p>
  64.206 +		The following steps must be applied <em>in order</em> to process the list of <i>color stops</i>.  
  64.207  		After applying these rules, 
  64.208 -		all color-stops will have a definite position 
  64.209 +		all <i>color stops</i> will have a definite position and color
  64.210  		and they will be in ascending order:
  64.211  
  64.212  	<ol>
  64.213  		<li>
  64.214 -			If the first color-stop does not have a position, 
  64.215 +			If the first <i>color stop</i> does not have a position, 
  64.216  			set its position to 0%. 
  64.217 -			If the last color-stop does not have a position, 
  64.218 +			If the last <i>color stop</i> does not have a position, 
  64.219  			set its position to 100%.
  64.220  
  64.221  		<li>
  64.222 -			If a color-stop has a position that is less than the specified position of any color-stop before it in the list, 
  64.223 -			set its position to be equal to the largest specified position of any color-stop before it.
  64.224 +			If a <i>color stop</i> has a position that is less than the specified position of any <i>color stop</i> before it in the list, 
  64.225 +			set its position to be equal to the largest specified position of any <i>color stop</i> before it.
  64.226  
  64.227  		<li>
  64.228 -			If any color-stop still does not have a position, 
  64.229 -			then, for each run of adjacent color-stops without positions, 
  64.230 -			set their positions so that they are evenly spaced between the preceding and following color-stops with positions.
  64.231 +			If any <i>color stop</i> still does not have a position, 
  64.232 +			then, for each run of adjacent <i>color stops</i> without positions, 
  64.233 +			set their positions so that they are evenly spaced between the preceding and following <i>color stops</i> with positions.
  64.234 +
  64.235 +		<li>
  64.236 +			If any <i>color stop</i> does not have a color,
  64.237 +			then, for each run of adjacent <i>color stops</i> without colors,
  64.238 +			set their colors to be evenly spaced linear interpolations in premultiplied sRGBA space
  64.239 +			between the preceding and following <i>color stops</i> with colors.
  64.240 +			Note that a <i>color stop</i> with two positions is still counted as a single <i>color stop</i> by this step,
  64.241 +			so both positions will be assigned the same color.
  64.242  	</ol>
  64.243  
  64.244  	<p class='issue'>
  64.245 @@ -1900,12 +1936,23 @@
  64.246  		because implied-position stops (set by step 3)
  64.247  		may depend on stops that need layout information to place,
  64.248  		and which may be corrected by step 2.
  64.249 -		Swapping steps 2 and 3 would let us interpolate color-stops purely at computed-value time,
  64.250 +		Swapping steps 2 and 3 would let us interpolate <i>color stops</i> purely at computed-value time,
  64.251  		which is a nice plus,
  64.252  		at the cost of changing behavior from level 3 for some edge cases that triggered fixup.
  64.253 +		Make sure this is handled well in the serialization rules.
  64.254  
  64.255  	<p>
  64.256 -		If multiple color-stops have the same position, 
  64.257 +		At each <i>color stop</i> position, 
  64.258 +		the line is the color of the <i>color stop</i>.  
  64.259 +		Between two <i>color stops</i>, 
  64.260 +		the line's color is linearly interpolated between the colors of the two <i>color stops</i>, 
  64.261 +		with the interpolation taking place in premultiplied RGBA space.  
  64.262 +		Before the first <i>color stop</i>, 
  64.263 +		the line is the color of the first <i>color stop</i>.  
  64.264 +		After the last <i>color stop</i>, the line is the color of the last <i>color stop</i>.
  64.265 +
  64.266 +	<p>
  64.267 +		If multiple <i>color stops</i> have the same position, 
  64.268  		they produce an infinitesimal transition from the one specified first in the rule 
  64.269  		to the one specified last.  
  64.270  		In effect, the color suddenly changes at that position rather than smoothly transitioning.
  64.271 @@ -1945,7 +1992,11 @@
  64.272  		-->&#xa;<!--
  64.273  		-->7. linear-gradient(red 80px, white 0px, black, blue 100px)&#xa;<!--
  64.274  		-->   =23=>&#xa;<!--
  64.275 -		-->   linear-gradient(red 80px, white 80px, black 90px, blue 100px)</pre>
  64.276 +		-->   linear-gradient(red 80px, white 80px, black 90px, blue 100px)&#xa;<!--
  64.277 +		-->&#xa;<!--
  64.278 +		-->8. linear-gradient(red, 25%, white)&#xa;<!--
  64.279 +		-->   =14=>&#xa;<!--
  64.280 +		-->   linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%)</pre>
  64.281  	</div>
  64.282  
  64.283  	<div class=example>
  64.284 @@ -1980,12 +2031,12 @@
  64.285  		Note: It is recommended that authors not mix different types of units, 
  64.286  		such as px, em, or %, 
  64.287  		in a single rule, 
  64.288 -		as this can cause a color-stop to unintentionally try to move before an earlier one.  
  64.289 +		as this can cause a <i>color stop</i> to unintentionally try to move before an earlier one.  
  64.290  		For example, the rule ''background-image: linear-gradient(yellow 100px, blue 50%)'' 
  64.291  		wouldn't require any fix-up as long as the background area is at least 200px tall. 
  64.292  		If it was 150px tall, however, 
  64.293 -		the blue color-stop's position would be equivalent to "75px", 
  64.294 -		which precedes the yellow color-stop, 
  64.295 +		the blue <i>color stop's</i> position would be equivalent to "75px", 
  64.296 +		which precedes the yellow <i>color stop</i>, 
  64.297  		and would be corrected to a position of 100px.
  64.298  
  64.299  	<p class=note>
  64.300 @@ -2568,7 +2619,7 @@
  64.301  			<td><dfn>image-resolution</dfn>
  64.302  		<tr>
  64.303  			<th><a href="#values">Value:</a>
  64.304 -			<td>[from-image || <var>&lt;resolution></var>] && snap?
  64.305 +			<td>[from-image || <var>&lt;resolution></var>] &amp;&amp; snap?
  64.306  		<tr>
  64.307  			<th>Initial:
  64.308  			<td>1dppx
  64.309 @@ -3168,6 +3219,30 @@
  64.310  -->
  64.311  
  64.312  
  64.313 +<h2 id='changes'>
  64.314 +Changes since Images 3</h2>
  64.315 +
  64.316 +	<ul>
  64.317 +		<li>added 'x' unit (or rather, put in an issue about adding it as a
  64.318 +	general alias for dppx)
  64.319 +		<li>restored the ltr/rtl keywords in image(), but in a different place
  64.320 +		<li>added image-set()
  64.321 +		<li>re-added element()
  64.322 +		<li>re-added cross-fade()
  64.323 +			<ul>
  64.324 +	    		<li>changed the syntax a bit to allow interesting things
  64.325 +	    	</ul>
  64.326 +		<li>added issue for focus-moving to radial-gradient()
  64.327 +		<li>added conic-gradient()
  64.328 +		<li>added two-position syntax for color-stops
  64.329 +		<li>allowed the color to be omitted from color-stops
  64.330 +		<li>loosened the syntax for color-stops to allow color/length in either order
  64.331 +		<li>added image-orientation:from-image
  64.332 +		<li>re-added image-rendering
  64.333 +		<li>added interpolation section
  64.334 +		<li>added serialization section
  64.335 +	</ul>
  64.336 +
  64.337  
  64.338  
  64.339  <h2 id="conformance">
    65.1 --- a/cssom/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    65.2 +++ b/cssom/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    65.3 @@ -18,7 +18,7 @@
    65.4  
    65.5     <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    65.6  
    65.7 -   <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 2 October 2012</h2>
    65.8 +   <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 19 October 2012</h2>
    65.9  
   65.10     <dl>
   65.11  
   65.12 @@ -83,7 +83,7 @@
   65.13    can be found in the
   65.14    <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
   65.15  
   65.16 -  <p class="dontpublish">This is the 2 October 2012 Editor's Draft of CSSOM. Please send comments to
   65.17 +  <p class="dontpublish">This is the 19 October 2012 Editor's Draft of CSSOM. Please send comments to
   65.18    <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
   65.19    (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
   65.20    with <samp>[cssom]</samp> at the start of the subject line.
   65.21 @@ -1548,6 +1548,9 @@
   65.22  
   65.23    <p>To <dfn id="parse-a-css-rule">parse a CSS rule</dfn> ...</p>
   65.24  
   65.25 +  <p class="issue">Should a rule be instantiated in OM if there is a parse error? To
   65.26 +  what extent should original (but non-valid) CSS text be captured in cssText?</p>
   65.27 +
   65.28    <p>To <dfn id="serialize-a-css-rule">serialize a CSS rule</dfn> depends on the type of CSS rule, as
   65.29    follows:</p>
   65.30  
   65.31 @@ -1839,10 +1842,10 @@
   65.32    ordered. This matters for the
   65.33    <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
   65.34  
   65.35 -
   65.36 -  <p class="issue">To
   65.37 -  <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn>
   65.38 -  ...</p>
   65.39 +  <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p>
   65.40 +
   65.41 +  <p class="issue">What should be captured in the cssText of a declaration block which fails
   65.42 +  to parse?</p>
   65.43  
   65.44    <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
   65.45    represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
    66.1 --- a/cssom/cssom-source	Mon Oct 22 00:33:44 2012 +0200
    66.2 +++ b/cssom/cssom-source	Mon Oct 22 00:41:17 2012 +0200
    66.3 @@ -1318,6 +1318,9 @@
    66.4  
    66.5    <p>To <dfn>parse a CSS rule</dfn> ...</p>
    66.6  
    66.7 +  <p class="issue">Should a rule be instantiated in OM if there is a parse error? To
    66.8 +  what extent should original (but non-valid) CSS text be captured in cssText?</p>
    66.9 +
   66.10    <p>To <dfn>serialize a CSS rule</dfn> depends on the type of CSS rule, as
   66.11    follows:</p>
   66.12  
   66.13 @@ -1442,10 +1445,10 @@
   66.14    ordered. This matters for the
   66.15    <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
   66.16  
   66.17 +  <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p>
   66.18  
   66.19 -  <p class="issue">To
   66.20 -  <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn>
   66.21 -  ...</p>
   66.22 +  <p class="issue">What should be captured in the cssText of a declaration block which fails
   66.23 +  to parse?</p>
   66.24  
   66.25    <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
   66.26    represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
    67.1 --- a/selectors4/Overview.html	Mon Oct 22 00:33:44 2012 +0200
    67.2 +++ b/selectors4/Overview.html	Mon Oct 22 00:41:17 2012 +0200
    67.3 @@ -4,16 +4,16 @@
    67.4   <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
    67.5    <title>Selectors Level 4</title>
    67.6  
    67.7 -  <link href="http://purl.org/dc/terms/" rel=schema.DC>
    67.8 -  <meta content="Selectors Level 4" name=DC.title>
    67.9 -  <meta content=text name=DC.type>
   67.10 -  <meta content=2012-09-05 name=DC.issued>
   67.11 -  <meta content="http://dev.w3.org/csswg/selectors4/" name=DC.creator>
   67.12 -  <meta content=W3C name=DC.publisher>
   67.13 -  <meta content="http://www.w3.org/TR/2012/ED-selectors4-20120905/"
   67.14 -   name=DC.identifier>
   67.15 +  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   67.16    <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   67.17 -   rel=DC.rights>
   67.18 +   rel=dcterms.rights>
   67.19 +  <meta content="Selectors Level 4" name=dcterms.title>
   67.20 +  <meta content=text name=dcterms.type>
   67.21 +  <meta content=2012-10-15 name=dcterms.issued>
   67.22 +  <meta content="http://dev.w3.org/csswg/selectors4/" name=dcterms.creator>
   67.23 +  <meta content=W3C name=dcterms.publisher>
   67.24 +  <meta content="http://www.w3.org/TR/2012/ED-selectors4-20121015/"
   67.25 +   name=dcterms.identifier>
   67.26    <link href="../default.css" rel=stylesheet type="text/css">
   67.27    <style type="text/css">
   67.28      .tprofile td, th { vertical-align: baseline; padding: 0 0.5em; }
   67.29 @@ -29,14 +29,14 @@
   67.30  
   67.31     <h1 id=title>Selectors Level 4</h1>
   67.32  
   67.33 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 September
   67.34 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 October
   67.35      2012</h2>
   67.36  
   67.37     <dl>
   67.38      <dt>This version:
   67.39  
   67.40 -    <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120905/">
   67.41 -     http://www.w3.org/TR/2012/ED-selectors4-20120905/</a>
   67.42 +    <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20121015/">
   67.43 +     http://www.w3.org/TR/2012/ED-selectors4-20121015/</a>
   67.44  
   67.45      <dt>Editor's draft:
   67.46  
   67.47 @@ -1247,7 +1247,7 @@
   67.48      href="#roo-pseudo"><code>:root</code></a> pseudo-class, however, still
   67.49      only matches the actual root of the document.)
   67.50  
   67.51 -   <dt><dfn id=scope-constrained>scope-constrained</dfn> selectors
   67.52 +   <dt><dfn id=scope-filtered>scope-filtered</dfn> selectors
   67.53  
   67.54     <dd> With this method of scoping, a selector matches if the <i>subject</i>
   67.55      of the selector is within the scope, even if other components of the
   67.56 @@ -1265,8 +1265,8 @@
   67.57     <p> For example, the <code>element.querySelector()</code> function defined
   67.58      in <a href="#SELECTORS-API2"
   67.59      rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> allows the
   67.60 -    author to define a <a
   67.61 -    href="#scope-constrained"><i>scope-constrained</i></a> selector.
   67.62 +    author to define a <a href="#scope-filtered"><i>scope-filtered</i></a>
   67.63 +    selector.
   67.64  
   67.65     <p> On the other hand, the <code>element.find()</code> function defined in
   67.66      <a href="#SELECTORS-API2"
   67.67 @@ -1475,10 +1475,10 @@
   67.68  
   67.69    <p><strong>Warning</strong>: the equivalence is true in this example
   67.70     because all the selectors are valid selectors. If just one of these
   67.71 -   selectors were invalid, the entire group of selectors would be invalid.
   67.72 -   This would invalidate the rule for all three heading elements, whereas in
   67.73 -   the former case only one of the three individual heading rules would be
   67.74 -   invalidated.
   67.75 +   selectors were invalid, the entire <a href="#selector-list"><i>selector
   67.76 +   list</i></a> would be invalid. This would invalidate the rule for all
   67.77 +   three heading elements, whereas in the former case only one of the three
   67.78 +   individual heading rules would be invalidated.
   67.79  
   67.80    <div class=example>
   67.81     <p>Invalid CSS example:
   67.82 @@ -1810,10 +1810,10 @@
   67.83      by "-" (U+002D). This is primarily intended to allow language subcode
   67.84      matches (e.g., the <code>hreflang</code> attribute on the <code>a</code>
   67.85      element in HTML) as described in BCP 47 (<a href="#BCP47"
   67.86 -    rel=biblioentry>[BCP47]<!--{{BCP47}}--></a>) or its successor. For <a
   67.87 -    href="#lang-pseudo"><code>lang</code></a> (or <code>xml:lang</code>)
   67.88 -    language subcode matching, please see <a href="#lang-pseudo">the
   67.89 -    <code>:lang</code> pseudo-class</a>.
   67.90 +    rel=biblioentry>[BCP47]<!--{{BCP47}}--></a>) or its successor. For
   67.91 +    <code>lang</code> (or <code>xml:lang</code>) language subcode matching,
   67.92 +    please see <a href="#lang-pseudo">the <code>:lang</code>
   67.93 +    pseudo-class</a>.
   67.94    </dl>
   67.95  
   67.96    <p>Attribute values must be CSS <a
   67.97 @@ -2003,13 +2003,13 @@
   67.98     appear in the document tree. Selectors should be designed so that they
   67.99     work whether or not the default values are included in the document tree.
  67.100  
  67.101 -  <p>For example, a XML UA may, but is <a
  67.102 -   href="#negation-pseudo"><em>not</em></a> required to read an "external
  67.103 -   subset" of the DTD but <em>is</em> required to look for default attribute
  67.104 -   values in the document's "internal subset." (See, e.g., <a href="#XML10"
  67.105 -   rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions of these
  67.106 -   subsets.) Depending on the UA, a default attribute value defined in the
  67.107 -   external subset of the DTD might or might not appear in the document tree.
  67.108 +  <p>For example, a XML UA may, but is <em>not</em> required to read an
  67.109 +   "external subset" of the DTD but <em>is</em> required to look for default
  67.110 +   attribute values in the document's "internal subset." (See, e.g., <a
  67.111 +   href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions
  67.112 +   of these subsets.) Depending on the UA, a default attribute value defined
  67.113 +   in the external subset of the DTD might or might not appear in the
  67.114 +   document tree.
  67.115  
  67.116    <p>A UA that recognizes an XML namespace may, but is not required to use
  67.117     its knowledge of that namespace to treat default attribute values as if
  67.118 @@ -2577,8 +2577,7 @@
  67.119     innermost element, or ancestor of an element, that is currently being
  67.120     displayed.
  67.121  
  67.122 -  <p>Its alternate form <a
  67.123 -   href="#current-pseudo"><code>:current()</code></a>, like <a
  67.124 +  <p>Its alternate form <code>:current()</code>, like <a
  67.125     href="#matches-pseudo"><code>:matches()</code></a>, takes a list of <a
  67.126     href="#compound"><i>compound selectors</i></a> as its argument: it
  67.127     represents the <a href="#current-pseudo"><code>:current</code></a> element
  67.128 @@ -2630,10 +2629,9 @@
  67.129     write selectors that represent an element based on its directionality as
  67.130     determined by the document language. For example, in HTML <a
  67.131     href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the
  67.132 -   directionality of an element is determined by the <a
  67.133 -   href="#dir-pseudo"><code>dir</code></a> attribute. The <a
  67.134 -   href="#dir-pseudo"><code>:dir()</code></a> pseudo-class does not select
  67.135 -   based on stylistic states—for example, the CSS ‘<code
  67.136 +   directionality of an element is determined by the <code>dir</code>
  67.137 +   attribute. The <a href="#dir-pseudo"><code>:dir()</code></a> pseudo-class
  67.138 +   does not select based on stylistic states—for example, the CSS ‘<code
  67.139     class=property>direction</code>’ property does not affect whether it
  67.140     matches.
  67.141  
  67.142 @@ -2653,9 +2651,9 @@
  67.143     attribute on the element, while the <code>:dir(C)</code> pseudo-class uses
  67.144     the UAs knowledge of the document's semantics to perform the comparison.
  67.145     For example, in HTML, the directionality of an element inherits so that a
  67.146 -   child without a <a href="#dir-pseudo"><code>dir</code></a> attribute will
  67.147 -   have the same directionality as its closest ancestor with a valid <a
  67.148 -   href="#dir-pseudo"><code>dir</code></a> attribute. As another example, <a
  67.149 +   child without a <code>dir</code> attribute will have the same
  67.150 +   directionality as its closest ancestor with a valid <code>dir</code>
  67.151 +   attribute. As another example, <a
  67.152     href="http://www.w3.org/TR/html5/global-attributes.html#the-directionality">in
  67.153     HTML5</a>, an element that matches <code>[dir=auto]</code> will match
  67.154     either <code>:dir(ltr)</code> or <code>:dir(rtl)</code> depending on the
  67.155 @@ -2682,10 +2680,10 @@
  67.156     document language. For example, in HTML <a href="#HTML401"
  67.157     rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the <a
  67.158     href="#language"><i>language</i></a> is determined by a combination of the
  67.159 -   <a href="#lang-pseudo"><code>lang</code></a> attribute, information from
  67.160 -   <code>meta</code> elements, and possibly also the protocol (e.g. from HTTP
  67.161 -   headers). XML languages can use the <code>xml:lang</code> attribute to
  67.162 -   indicate language information for an element.
  67.163 +   <code>lang</code> attribute, information from <code>meta</code> elements,
  67.164 +   and possibly also the protocol (e.g. from HTTP headers). XML languages can
  67.165 +   use the <code>xml:lang</code> attribute to indicate language information
  67.166 +   for an element.
  67.167  
  67.168    <p>The element's <i>language matches</i> a <i>language range</i> if the
  67.169     element's <a href="#language"><i>language</i></a> (normalized to BCP 47
    68.1 --- a/selectors4/Overview.src.html	Mon Oct 22 00:33:44 2012 +0200
    68.2 +++ b/selectors4/Overview.src.html	Mon Oct 22 00:41:17 2012 +0200
    68.3 @@ -611,7 +611,7 @@
    68.4        (The <code>:root</code> pseudo-class, however,
    68.5        still only matches the actual root of the document.)
    68.6  
    68.7 -    <dt><dfn>scope-constrained</dfn> selectors
    68.8 +    <dt><dfn>scope-filtered</dfn> selectors
    68.9      <dd>
   68.10        With this method of scoping, a selector matches if
   68.11        the <i>subject</i> of the selector is within the scope,
   68.12 @@ -627,7 +627,7 @@
   68.13      <p>
   68.14        For example,
   68.15        the <code>element.querySelector()</code> function defined in [[SELECTORS-API2]]
   68.16 -      allows the author to define a <i>scope-constrained</i> selector.
   68.17 +      allows the author to define a <i>scope-filtered</i> selector.
   68.18  
   68.19      <p>
   68.20        On the other hand, the <code>element.find()</code> function defined in [[SELECTORS-API2]]
   68.21 @@ -804,7 +804,7 @@
   68.22  
   68.23    <p><strong>Warning</strong>: the equivalence is true in this example
   68.24    because all the selectors are valid selectors. If just one of these
   68.25 -  selectors were invalid, the entire group of selectors would be
   68.26 +  selectors were invalid, the entire <i>selector list</i> would be
   68.27    invalid. This would invalidate the rule for all three heading
   68.28    elements, whereas in the former case only one of the three individual
   68.29    heading rules would be invalidated.

mercurial