From 7a21ddf601e29a25e492ba97309d593e6eeff6b4 Mon Sep 17 00:00:00 2001
From: milde <milde@929543f6-e4f2-0310-98a6-ba3bd3dd1d04>
Date: Fri, 3 Apr 2020 16:57:36 +0000
Subject: html5 writer: wrap image elements in <p> unless inline or in figure.

In HTML, <img> is by default an inline element.
The rST "image" directive generates block-level elements
(unless used in a "substitution" directive).

Wrapping in a container enables more advanced CSS styling.
A paragraph as wrapper fits well with Docutils wrapping
inline content in paragraphs by default.

No change for the "html4css1" writer (ensure backwards compatibility).

git-svn-id: http://svn.code.sf.net/p/docutils/code/trunk@8510 929543f6-e4f2-0310-98a6-ba3bd3dd1d04
---
 .../functional/expected/standalone_rst_html5.html  | 40 +++++++++++-----------
 1 file changed, 20 insertions(+), 20 deletions(-)

(limited to 'docutils/test/functional/expected')

diff --git a/docutils/test/functional/expected/standalone_rst_html5.html b/docutils/test/functional/expected/standalone_rst_html5.html
index 86382bac3..3906cd610 100644
--- a/docutils/test/functional/expected/standalone_rst_html5.html
+++ b/docutils/test/functional/expected/standalone_rst_html5.html
@@ -567,31 +567,31 @@ document (a document-wide <a class="reference internal" href="#table-of-contents
 <section id="images-and-figures">
 <h3><a class="toc-backref" href="#toc-entry-54"><span class="sectnum">2.14.2</span> Images and Figures</a></h3>
 <p>An image directive (also clickable -- a hyperlink reference):</p>
-<a class="reference internal image-reference" href="#directives"><img alt="../../../docs/user/rst/images/title.png" class="class1 class2" src="../../../docs/user/rst/images/title.png" /></a>
+<p class="image-wrapper"><a class="reference internal image-reference" href="#directives"><img alt="../../../docs/user/rst/images/title.png" class="class1 class2" src="../../../docs/user/rst/images/title.png" /></a></p>
 <p>Image with multiple IDs:</p>
-<span id="image-target-2"></span><span id="image-target-1"></span><img alt="../../../docs/user/rst/images/title.png" id="image-target-3" src="../../../docs/user/rst/images/title.png" />
+<p class="image-wrapper"><span id="image-target-2"></span><span id="image-target-1"></span><img alt="../../../docs/user/rst/images/title.png" id="image-target-3" src="../../../docs/user/rst/images/title.png" /></p>
 <p>A centered image:</p>
-<img alt="../../../docs/user/rst/images/biohazard.png" class="align-center" src="../../../docs/user/rst/images/biohazard.png" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.png" class="align-center" src="../../../docs/user/rst/images/biohazard.png" /></p>
 <p>A left-aligned image:</p>
-<img alt="../../../docs/user/rst/images/biohazard.png" class="align-left" src="../../../docs/user/rst/images/biohazard.png" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.png" class="align-left" src="../../../docs/user/rst/images/biohazard.png" /></p>
 <p>This paragraph might flow around the image.
 The specific behavior depends upon the style sheet and
 the browser or rendering software used.</p>
 <p>A right-aligned image:</p>
-<img alt="../../../docs/user/rst/images/biohazard.png" class="align-right" src="../../../docs/user/rst/images/biohazard.png" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.png" class="align-right" src="../../../docs/user/rst/images/biohazard.png" /></p>
 <p>This paragraph might flow around the image.
 The specific behavior depends upon the style sheet and
 the browser or rendering software used.</p>
 <p>For inline images see <a class="reference internal" href="#substitution-definitions">Substitution Definitions</a>.</p>
 <p>Image size:</p>
 <p>An image 2 em wide:</p>
-<img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 2em;" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 2em;" /></p>
 <p>An image 2 em wide and 15 pixel high:</p>
-<img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 2em; height: 15px;" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 2em; height: 15px;" /></p>
 <p>An image occupying 50% of the line width:</p>
-<img alt="../../../docs/user/rst/images/title.png" src="../../../docs/user/rst/images/title.png" style="width: 50%;" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/title.png" src="../../../docs/user/rst/images/title.png" style="width: 50%;" /></p>
 <p>An image 2 cm high:</p>
-<img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="height: 2cm;" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="height: 2cm;" /></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>
@@ -1238,7 +1238,7 @@ crunchy, now would it?</p></td>
 <h1><a class="toc-backref" href="#toc-entry-41"><span class="sectnum">3</span> HTML specific</a></h1>
 <section id="svg-images">
 <h2><a class="toc-backref" href="#toc-entry-42"><span class="sectnum">3.1</span> SVG Images</a></h2>
-<img alt="../../../docs/user/rst/images/biohazard.svg" class="align-left" src="../../../docs/user/rst/images/biohazard.svg" style="width: 48px; height: 48px;" />
+<p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.svg" class="align-left" src="../../../docs/user/rst/images/biohazard.svg" style="width: 48px; height: 48px;" /></p>
 <p>Scalable vector graphics (SVG) images are the only standards-compliable way
 to include vector graphics in HTML documents. However, they are not
 supported by all backends/output formats. (E.g., LaTeX supports the
@@ -1273,30 +1273,30 @@ deficiencies or require plug-ins (i.e. don't support the <span class="docutils l
 SVG image is scaled or clipped/padded. Images wrapped in <span class="docutils literal">&lt;img&gt;</span> are
 always scaled.</p>
 <ul>
-<li><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" />
+<li><p class="image-wrapper"><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" /></p>
 <p>A scaling image (scales with the browser window), occupying 50% of the line
 width. The <span class="docutils literal">viewBox</span> setting in the image file enables auto-scaling also in
 <span class="docutils literal">&lt;object&gt;</span> tags and embedded SVG (if width and hight are set to 100% in the
 SVG &lt;image&gt; tag).</p>
 </li>
-<li><img alt="../../../docs/user/rst/images/title.svg" class="align-right" src="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" />
+<li><p class="image-wrapper"><img alt="../../../docs/user/rst/images/title.svg" class="align-right" src="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" /></p>
 <p>A fixed-size image in a box 50% wide and 15 pixles high. This image is
 scaled, if wrapped in an <span class="docutils literal">&lt;img&gt;</span> tag but clipped in an <span class="docutils literal">&lt;object&gt;</span> tag
 or within SVG.</p>
 </li>
-<li><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.5em;" />
+<li><p class="image-wrapper"><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.5em;" /></p>
 <p>A right aligned, scaling image 50% wide and 1.5 em high. (This SVG image
 keeps the aspect ratio.)</p>
 </li>
 <li><p>An inline image <img alt="inline-svg" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 0.8em;" /> scaled to a height of 0.8 em.</p>
 </li>
-<li><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" />
+<li><p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" /></p>
 <p>A scaling image 1 em high, right aligned:</p>
 </li>
 <li><p>A scaling image 5 mm x 5 mm, centered, with hyperlink reference:</p>
-<a class="reference internal image-reference" href="#svg-images"><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-center" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" /></a>
+<p class="image-wrapper"><a class="reference internal image-reference" href="#svg-images"><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-center" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" /></a></p>
 </li>
-<li><img alt="../../../docs/user/rst/images/biohazard.svg" class="align-right" src="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" />
+<li><p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard.svg" class="align-right" src="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" /></p>
 <p>A fixed-size image in a  4 cm x 2 em box.</p>
 </li>
 </ul>
@@ -1304,12 +1304,12 @@ keeps the aspect ratio.)</p>
 konqueror) support the <span class="docutils literal">&lt;img&gt;</span> tag but don't display contained bitmap
 images in this case.</p>
 <ul>
-<li><img alt="../../../docs/user/rst/images/biohazard-bitmap.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" />
+<li><p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard-bitmap.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" /></p>
 <p>A small, fixed-size SVG image with embedded bitmap, The <span class="docutils literal">:width:</span> is
 set to 3 em in the rST source. Does not scale if wrapped in <span class="docutils literal">&lt;object&gt;</span>
 tags.</p>
 </li>
-<li><img alt="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" style="width: 3em;" />
+<li><p class="image-wrapper"><img alt="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" style="width: 3em;" /></p>
 <p>A scaling SVG image with embedded bitmap, 3 em wide.</p>
 </li>
 </ul>
@@ -1330,8 +1330,8 @@ support via a plugin. It is sometimes blocked due to privacy/security
 concerns.</p>
 <p>Images with extension <span class="docutils literal">.swf</span> are placed inside &lt;object&gt; elements.
 For complete control over display options use raw HTML.</p>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard.swf" style="width: 4cm; height: 2em;" type="application/x-shockwave-flash">
-[biohazard.swf]</object>
+<p class="image-wrapper"><object class="align-left" data="../../../docs/user/rst/images/biohazard.swf" style="width: 4cm; height: 2em;" type="application/x-shockwave-flash"></p>
+[biohazard.swf]</object></p>
 <p>An SWF image in a  4 cm x 2 em box, left aligned.</p>
 <p>An inline SWF image <object data="../../../docs/user/rst/images/biohazard.swf" style="width: 0.8em; height: 0.8em;" type="application/x-shockwave-flash">inline-swf</object> scaled to 0.8 em x 0.8 em.</p>
 </section>
-- 
cgit v1.2.1