More pictures! Add illustration for text-decoration-skip: ink and make pictures match colors.

--HG--
extra : rebase_source : c076085927b9e31fd7bb7d720726e5036637dc8f

Author: fantasai

css-counter-styles-3/Overview.html

@@ -10,7 +10,7 @@
    rel=dcterms.rights>
   <meta content="CSS Text Decoration Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-02-22 name=dcterms.issued>
+  <meta content=2013-03-01 name=dcterms.issued>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Koji Ishii" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -29,13 +29,12 @@
 
    <h1>CSS Text Decoration Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 February
-    2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 March 2013</h2>
 
    <dl>
     <dt>This version:</dt>
     <!--  
-    <dd><a href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130222/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130222/</a></dd>
+    <dd><a href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130301/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130301/</a></dd>
   -->
 
     <dd><a
@@ -805,6 +804,13 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
     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.
+    <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."
+      src=decoration-skip-ink.png title="text-decoration-skip: ink">
+
+     <p class=caption>‘<code class=css>text-decoration-skip: ink</code>’
+    </div>
 
    <dt><dfn id=edges title="text-decoration-skip:edges">‘<code
     class=css>edges</code>’</dfn>
@@ -820,7 +826,8 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
     class=css>box-decoration</code>’</dfn>
 
    <dd> Skip over the box's margin, border, and padding areas. Note that this
-    only has an effect on decorations imposed by an ancestor.
+    only has an effect on decorations imposed by an ancestor; a <i>decorating
+    element</i> never draws over its own box decoration.
   </dl>
 
   <p class=note>Note that this property inherits and that descendant elements

css-counter-styles-3/Overview.src.html

@@ -495,7 +495,14 @@ <h3 id="text-decoration-skip-property">
     <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>
+      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."
+            src="decoration-skip-ink.png"
+            >
+        <p class="caption">''text-decoration-skip: ink''</p>
+      </div>
     <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt>
     <dd>The UA should place the start and end of the line inwards from
       the content edge of the <i>decorating element</i> so that, e.g. two
@@ -505,7 +512,8 @@ <h3 id="text-decoration-skip-property">
     <dt><dfn title="text-decoration-skip:box-decoration">''box-decoration''</dfn>
     <dd>
       Skip over the box's margin, border, and padding areas.
-      Note that this only has an effect on decorations imposed by an ancestor.
+      Note that this only has an effect on decorations imposed by an ancestor;
+      a <i>decorating element</i> never draws over its own box decoration.
   </dl>
 
   <p class="note">Note that this property inherits and that descendant

css-counter-styles-3/images/black.svg

@@ -230,6 +230,9 @@ div.figure pre, div.sidefigure pre, figure pre {
 	display: table;
 	margin: 1em auto;
 }
+.figure table, figure table {
+	margin: auto;
+}
 div.sidefigure, figure.sidefigure {
 	float: right;
 	width: 50%;