html5: Use semantic tags <figure> and <figcaption>.

git-svn-id: http://svn.code.sf.net/p/docutils/code/trunk@8473 929543f6-e4f2-0310-98a6-ba3bd3dd1d04

2 files changed, 139 insertions, 17 deletions

diff --git a/docutils/test/functional/expected/standalone_rst_html5.html b/docutils/test/functional/expected/standalone_rst_html5.html
index e50130f04..3d1ef43cf 100644
--- a/docutils/test/functional/expected/standalone_rst_html5.html
+++ b/docutils/test/functional/expected/standalone_rst_html5.html
@@ -595,9 +595,10 @@ the browser or rendering software used.</p>
 <p>A <em>figure</em> is an image with a caption and/or a legend.  With page-based output
 media, figures might float to a different position if this helps the page
 layout.</p>
-<div class="figclass1 figclass2 figure">
+<figure class="figclass1 figclass2">
 <img alt="reStructuredText, the markup syntax" class="class1 class2" src="../../../docs/user/rst/images/title.png" style="width: 258px;" />
-<p class="caption">Plaintext markup syntax and parser system.</p>
+<figcaption>
+<p>Plaintext markup syntax and parser system.</p>
 <div class="legend">
 <table>
 <colgroup>
@@ -618,40 +619,47 @@ layout.</p>
 </table>
 <p>This paragraph is also part of the legend.</p>
 </div>
-</div>
+</figcaption>
+</figure>
 <p>A left-aligned figure:</p>
-<div class="figclass1 figclass2 figure align-left" style="width: 70%">
+<figure class="figclass1 figclass2 align-left" style="width: 70%">
 <img alt="reStructuredText, the markup syntax" class="class1 class2" src="../../../docs/user/rst/images/biohazard.png" style="width: 40px;" />
-<p class="caption">This is the caption.</p>
+<figcaption>
+<p>This is the caption.</p>
 <div class="legend">
 <p>This is the legend.</p>
 <p>The legend may consist of several paragraphs.</p>
 </div>
-</div>
+</figcaption>
+</figure>
 <p>This paragraph might flow around the figure.</p>
 <p>The specific behavior depends upon the style sheet and the browser or
 rendering software used.</p>
 <p>A centered figure:</p>
-<div class="figure align-center">
+<figure class="align-center">
 <img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 40px;" />
-<p class="caption">This is the caption.</p>
+<figcaption>
+<p>This is the caption.</p>
 <div class="legend">
 <p>This is the legend.</p>
 <p>The legend may consist of several paragraphs.</p>
 </div>
-</div>
+</figcaption>
+</figure>
 <p>This paragraph might flow around the figure.</p>
 <p>The specific behavior depends upon the style sheet and the browser or
 rendering software used.</p>
 <p>A right-aligned figure:</p>
-<div class="figure align-right">
+<figure class="align-right">
 <img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 40px;" />
-<p class="caption">This is the caption.</p>
+<figcaption>
+<p>This is the caption.</p>
 <div class="legend">
 <p>This is the legend.</p>
 <p>The legend may consist of several paragraphs.</p>
 </div>
-</div>
+</figcaption>
+</figure>
 <p>This paragraph might flow around the figure. The specific behavior depends
 upon the style sheet and the browser or rendering software used.</p>
 <p>Tables may be given titles and additional arguments with the <em>table</em>
@@ -1307,10 +1315,12 @@ tags.</p>
 </ul>
 <p>SVG images can also be put in figures:</p>
 <blockquote>
-<div class="figure align-center">
+<figure class="align-center">
 <img alt="reStructuredText, the markup syntax" src="../../../docs/user/rst/images/title.svg" style="width: 290px; height: 28px;" />
-<p class="caption"><strong>Figure:</strong> SVG image in a figure.</p>
-</div>
+<figcaption>
+<p><strong>Figure:</strong> SVG image in a figure.</p>
+</figcaption>
+</figure>
 </blockquote>
 </section>
 <section id="swf-images">
diff --git a/docutils/test/test_writers/test_html5_polyglot_parts.py b/docutils/test/test_writers/test_html5_polyglot_parts.py
index f3bf17ee5..2c77bb644 100644
--- a/docutils/test/test_writers/test_html5_polyglot_parts.py
+++ b/docutils/test/test_writers/test_html5_polyglot_parts.py
@@ -423,7 +423,8 @@ Not a docinfo.
 :simple field list with loooong field: names
 """,
 """\
-{'fragment': '''<p>Not a docinfo.</p>
+{'fragment': '''\
+<p>Not a docinfo.</p>
 <dl class="field-list simple">
 <dt>This is</dt>
 <dd><p>a</p>
@@ -432,7 +433,8 @@ Not a docinfo.
 <dd><p>names</p>
 </dd>
 </dl>\\n''',
- 'html_body': '''<div class="document">
+ 'html_body': '''\
+<div class="document">
 <p>Not a docinfo.</p>
 <dl class="field-list simple">
 <dt>This is</dt>
@@ -445,7 +447,117 @@ Not a docinfo.
 </div>\\n''',
  'html_head': '''...<title>&lt;string&gt;</title>\\n'''}
 """],
+["""\
+.. figure:: dummy.png
+
+   The figure's caption.
+
+   A legend.
+
+   The legend's second paragraph.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption.</p>
+<div class="legend">
+<p>A legend.</p>
+<p>The legend's second paragraph.</p>
+</div>
+</figcaption>
+</figure>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption.</p>
+<div class="legend">
+<p>A legend.</p>
+<p>The legend's second paragraph.</p>
+</div>
+</figcaption>
+</figure>
+</div>\\n''',
+ 'html_head': '''...<title>&lt;string&gt;</title>\\n'''}
+"""],
+["""\
+.. figure:: dummy.png
+
+   The figure's caption, no legend.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption, no legend.</p>
+</figcaption>
+</figure>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption, no legend.</p>
+</figcaption>
+</figure>
+</div>\\n''',
+ 'html_head': '''...<title>&lt;string&gt;</title>\\n'''}
+"""],
+["""\
+.. figure:: dummy.png
+
+   ..
+
+   A legend without caption.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<div class="legend">
+<p>A legend without caption.</p>
+</div>
+</figcaption>
+</figure>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<div class="legend">
+<p>A legend without caption.</p>
+</div>
+</figcaption>
+</figure>
+</div>\\n''',
+ 'html_head': '''...<title>&lt;string&gt;</title>\\n'''}
+"""],
 ])
+["""\
+.. figure:: dummy.png
+
+No caption nor legend.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+</figure>
+<p>No caption nor legend.</p>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+</figure>
+<p>No caption nor legend.</p>
+</div>\\n''',
+ 'html_head': '''...<title>&lt;string&gt;</title>\\n'''}
+"""],
 
 
 if __name__ == '__main__':