[css-text-decor] Define painting order of text decorations. See <http://lists.w3.org/Archives/Public/www-style/2013Mar/0527.html>, <http://lists.w3.org/Archives/Public/www-style/2013Mar/0526.html>, <http://lists.w3.org/Archives/Public/www-style/2013Mar/0525.html>

--HG--
extra : rebase_source : 267417db11a59d50cb85fc51b16462c5a3bdfa03

Author: fantasai

css-text-decor/Overview.html

@@ -235,24 +235,27 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
    <li><a href="#text-shadow-property"><span class=secno>4. </span> Text
     Shadows: the ‘<code class=property>text-shadow</code>’ property</a>
 
-   <li><a href="#conformance"><span class=secno>5. </span> Conformance</a>
+   <li><a href="#painting-order"><span class=secno>5. </span> Painting Order
+    of Text Decorations</a>
+
+   <li><a href="#conformance"><span class=secno>6. </span> Conformance</a>
     <ul class=toc>
-     <li><a href="#conventions"><span class=secno>5.1. </span> Document
+     <li><a href="#conventions"><span class=secno>6.1. </span> Document
       Conventions</a>
 
-     <li><a href="#conformance-classes"><span class=secno>5.2. </span>
+     <li><a href="#conformance-classes"><span class=secno>6.2. </span>
       Conformance Classes</a>
 
-     <li><a href="#partial"><span class=secno>5.3. </span> Partial
+     <li><a href="#partial"><span class=secno>6.3. </span> Partial
       Implementations</a>
 
-     <li><a href="#experimental"><span class=secno>5.4. </span> Experimental
+     <li><a href="#experimental"><span class=secno>6.4. </span> Experimental
       Implementations</a>
 
-     <li><a href="#testing"><span class=secno>5.5. </span>Non-Experimental
+     <li><a href="#testing"><span class=secno>6.5. </span>Non-Experimental
       Implementations</a>
 
-     <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit
+     <li><a href="#cr-exit-criteria"><span class=secno>6.6. </span> CR Exit
       Criteria</a>
     </ul>
 
@@ -365,7 +368,7 @@ <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
    <em>applied</em> to such boxes.
 
   <p> By default underlines, overlines, and line-throughs are applied only to
-   non-replaced inline boxes, and are drawn over all text (including white
+   non-replaced inline boxes, and are drawn across all text (including white
    space, letter spacing, and word spacing). Atomic inlines, such as images,
    are not decorated. The ‘<a href="#text-decoration-skip"><code
    class=property>text-decoration-skip</code></a>’ property can be used to
@@ -803,9 +806,9 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
     class=css>ink</code>’</dfn>
 
    <dd>Skip over where glyphs are drawn: interrupt the decoration line to let
-    text show through where the text decoration would otherwise cross over a
-    glyph. The UA may also skip a small distance to either side of the glyph
-    outline.
+    the shape of the text show through where the text decoration would
+    otherwise cross over a glyph. The UA must skip a small distance to either
+    side of the glyph outline.
     <div class=figure>
      <p><img
       alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
@@ -1710,9 +1713,45 @@ <h2 id=text-shadow-property><span class=secno>4. </span> Text Shadows: the
    property applies to both the <code>::first-line</code> and
    <code>::first-letter</code> pseudo-elements.
 
-  <h2 id=conformance><span class=secno>5. </span> Conformance</h2>
+  <h2 id=painting-order><span class=secno>5. </span> Painting Order of Text
+   Decorations</h2>
+
+  <p> As in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
+   text decorations are drawn immediately over/under the text they decorate,
+   in the following order (bottommost first):
+
+  <ul>
+   <li>shadows (‘<a href="#text-shadow"><code
+    class=property>text-shadow</code></a>’)
+
+   <li>underlines (‘<a href="#text-decoration"><code
+    class=property>text-decoration</code></a>’)
+
+   <li>overlines (‘<a href="#text-decoration"><code
+    class=property>text-decoration</code></a>’)
+
+   <li>text
+
+   <li>emphasis marks (‘<a href="#text-emphasis"><code
+    class=property>text-emphasis</code></a>’)
+
+   <li>line-through (‘<a href="#text-decoration"><code
+    class=property>text-decoration</code></a>’)
+  </ul>
+
+  <p> Text decorations are graphically affected by
+   filters/opacity/transformations/etc. atomically with the text they
+   decorate.
+
+  <p> Where line decorations are drawn across box decorations or atomic
+   inlines, they are drawn over non-positioned content and just below any
+   positioned descendants (immediately below layer #8 in CSS2.1 Appendix E).
+   These portions of a line decoration are graphically associated with the
+   affected box.
+
+  <h2 id=conformance><span class=secno>6. </span> Conformance</h2>
 
-  <h3 id=conventions><span class=secno>5.1. </span> Document Conventions</h3>
+  <h3 id=conventions><span class=secno>6.1. </span> Document Conventions</h3>
 
   <p>Conformance requirements are expressed with a combination of descriptive
    assertions and RFC 2119 terminology. The key words “MUST”, “MUST
@@ -1739,7 +1778,7 @@ <h3 id=conventions><span class=secno>5.1. </span> Document Conventions</h3>
 
   <p class=note>Note, this is an informative note.
 
-  <h3 id=conformance-classes><span class=secno>5.2. </span> Conformance
+  <h3 id=conformance-classes><span class=secno>6.2. </span> Conformance
    Classes</h3>
 
   <p>Conformance to CSS Text Level 3 is defined for three conformance
@@ -1783,7 +1822,7 @@ <h3 id=conformance-classes><span class=secno>5.2. </span> Conformance
    other conformance requirements of style sheets as described in this
    module.
 
-  <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>
+  <h3 id=partial><span class=secno>6.3. </span> Partial Implementations</h3>
 
   <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as
@@ -1797,7 +1836,7 @@ <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>
    unsupported values must be), CSS requires that the entire declaration be
    ignored.
 
-  <h3 id=experimental><span class=secno>5.4. </span> Experimental
+  <h3 id=experimental><span class=secno>6.4. </span> Experimental
    Implementations</h3>
 
   <p>To avoid clashes with future CSS features, the CSS2.1 specification
@@ -1811,7 +1850,7 @@ <h3 id=experimental><span class=secno>5.4. </span> Experimental
    vendor-prefixed syntax for such features, including those in W3C Working
    Drafts. This avoids incompatibilities with future changes in the draft.
 
-  <h3 id=testing><span class=secno>5.5. </span>Non-Experimental
+  <h3 id=testing><span class=secno>6.5. </span>Non-Experimental
    Implementations</h3>
 
   <p>Once a specification reaches the Candidate Recommendation stage,
@@ -1833,7 +1872,7 @@ <h3 id=testing><span class=secno>5.5. </span>Non-Experimental
    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
    mailing list.
 
-  <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>
+  <h3 id=cr-exit-criteria><span class=secno>6.6. </span> CR Exit Criteria</h3>
 
   <p> For this specification to be advanced to Proposed Recommendation, there
    must be at least two independent, interoperable implementations of each

css-text-decor/Overview.src.html

@@ -201,7 +201,7 @@ <h2 id="line-decoration">
 
   <p>
     By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
-    and are drawn over all text (including white space, letter spacing, and word spacing).
+    and are drawn across all text (including white space, letter spacing, and word spacing).
     Atomic inlines, such as images, are not decorated.
     The 'text-decoration-skip' property can be used to modify this behavior, 
     for example allowing atomic inlines to be underlined 
@@ -497,10 +497,10 @@ <h3 id="text-decoration-skip-property">
       and all <i>word separator characters</i>,
       plus any adjacent letter-spacing or word-spacing [[!CSS3TEXT]].
     <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt>
-    <dd>Skip over where glyphs are drawn: interrupt the decoration
-      line to let text show through where the text decoration would
-      otherwise cross over a glyph. The UA may also skip a small
-      distance to either side of the glyph outline.
+    <dd>Skip over where glyphs are drawn:
+      interrupt the decoration line to let the shape of the text show through
+      where the text decoration would otherwise cross over a glyph.
+      The UA must skip a small distance to either side of the glyph outline.
       <div class="figure">
         <p><img title="text-decoration-skip: ink"
             alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
@@ -1164,6 +1164,30 @@ <h2 id="text-shadow-property">
     <code>::first-line</code> and <code>::first-letter</code>
     pseudo-elements.</p>
 
+<h2 id="painting-order">
+Painting Order of Text Decorations</h2>
+
+  <p>
+    As in [[!CSS21]], text decorations are drawn immediately over/under the text they decorate,
+    in the following order (bottommost first):
+  <ul>
+    <li>shadows ('text-shadow')
+    <li>underlines ('text-decoration')
+    <li>overlines ('text-decoration')
+    <li>text
+    <li>emphasis marks ('text-emphasis')
+    <li>line-through ('text-decoration')
+  </ul>
+  <p>
+    Text decorations are graphically affected by filters/opacity/transformations/etc.
+    atomically with the text they decorate.
+
+  <p>
+    Where line decorations are drawn across box decorations or atomic inlines,
+    they are drawn over non-positioned content and just below any positioned descendants
+    (immediately below layer #8 in CSS2.1 Appendix E).
+    These portions of a line decoration are graphically associated with the affected box.
+
 <h2 id="conformance">
 Conformance</h2>