From 7b1dae87b9d825924333d41ed10688ebb6c0305a Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Tue, 4 Jan 2022 20:14:12 +0100
Subject: [PATCH] m.htmlsanity: work around FF misbehavior in <figure>
 printing.

Counterpart to the previous commit. Done only if the figure has a
.m-figure CSS class, as that's where the Firefox bug is triggered due to
the `display: table-caption` -- code figures and console figures are
unaffected.

There's still a bit of potential future work where the figure
description shouldn't have any block-level elements. But that doesn't
trigger any rendering bugs so not so important.
---
 plugins/m/htmlsanity.py             | 32 ++++++++++++++++++++++++-----
 plugins/m/test/components/page.html |  4 +++-
 plugins/m/test/dot/page-240.html    |  4 +++-
 plugins/m/test/dot/page.html        |  4 +++-
 plugins/m/test/images/page.html     |  4 ++--
 5 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/plugins/m/htmlsanity.py b/plugins/m/htmlsanity.py
index 554a495c..4709d9df 100644
--- a/plugins/m/htmlsanity.py
+++ b/plugins/m/htmlsanity.py
@@ -256,6 +256,9 @@ class SaneHtmlTranslator(HTMLTranslator):
         if not hasattr(self, 'in_word_wrap_point'):
             self.in_word_wrap_point = HTMLTranslator.sollbruchstelle
 
+        # Used by depart_caption() and depart_figure(), see there for details
+        self.in_figure_caption_with_description = False
+
     # Somehow this does the trick and removes docinfo from the body. Was
     # present in the HTML4 translator but not in the HTML5 one, so copying it
     # verbatim over
@@ -323,13 +326,14 @@ class SaneHtmlTranslator(HTMLTranslator):
         self.section_level -= 1
         self.body.append('</section>\n')
 
-    # Legend inside figure -- print as <span> (instead of <div class="legend">,
-    # as that's not valid inside HTML5 <figure> element)
+    # Legend inside figure. This is handled in a special way inside
+    # depart_caption() and depart_figure() already, no need to add any extra
+    # tag again.
     def visit_legend(self, node):
-        self.body.append(self.starttag(node, 'span'))
+        pass
 
     def depart_legend(self, node):
-        self.body.append('</span>\n')
+        pass
 
     # Literal -- print as <code> (instead of some <span>)
     def visit_literal(self, node):
@@ -450,13 +454,31 @@ class SaneHtmlTranslator(HTMLTranslator):
         self.body.append(self.starttag(node, 'figure', **atts))
 
     def depart_figure(self, node):
+        # See depart_caption() below for details
+        if self.in_figure_caption_with_description:
+            self.body.append('</span>\n</figcaption>\n')
+            self.in_figure_caption_with_description = False
         self.body.append('</figure>\n')
 
     def visit_caption(self, node):
         self.body.append(self.starttag(node, 'figcaption', ''))
 
     def depart_caption(self, node):
-        self.body.append('</figcaption>\n')
+        # If this is a .m-figure and there's more content after a <figcaption>,
+        # we have to put all that into <figcaption> as well, otherwise FF will
+        # ignore it (due to `display: table-caption` being set for all
+        # .m-figure children, which apparently makes FF render just the first
+        # element). To avoid all that content styled as a caption, put it
+        # inside a .m-figure-description that undoes the styling for
+        # <figcaption>.
+        # TODO this may have false positives if there are reST comments and
+        # such, figure out a way to query if there are useful nodes. Can't
+        # check for just nodes.legend, as there can be arbitrary other stuff.
+        if 'classes' in node.parent and 'm-figure' in node.parent['classes'] and node.next_node(descend=False, siblings=True) is not None:
+            self.body.append(self.starttag(node, 'span', CLASS='m-figure-description'))
+            self.in_figure_caption_with_description = True
+        else:
+            self.body.append('</figcaption>\n')
 
     # Line blocks are <p> with lines separated using simple <br />. No need for
     # nested <div>s.
diff --git a/plugins/m/test/components/page.html b/plugins/m/test/components/page.html
index 4f9d5d85..e3435e66 100644
--- a/plugins/m/test/components/page.html
+++ b/plugins/m/test/components/page.html
@@ -64,8 +64,10 @@ snippet</pre>
 <svg class="m-math" style="width: 5rem; height: 5rem;"></svg><p>Math figure contents.</p>
 </figure>
 <figure class="m-figure">
-<svg class="m-graph" style="width: 5rem; height: 5rem;"></svg><figcaption>Caption</figcaption>
+<svg class="m-graph" style="width: 5rem; height: 5rem;"></svg><figcaption>Caption<span class="m-figure-description">
 <p>Graph figure contents.</p>
+</span>
+</figcaption>
 </figure>
 <div class="m-text m-dim">
 Dim text.</div>
diff --git a/plugins/m/test/dot/page-240.html b/plugins/m/test/dot/page-240.html
index 4a7566d3..d00a0c77 100644
--- a/plugins/m/test/dot/page-240.html
+++ b/plugins/m/test/dot/page-240.html
@@ -232,8 +232,10 @@ and the arrowheads, nothing else. Non-default font size should be preserved.</p>
 </g>
 </g>
 </svg>
-<figcaption>This is a title.</figcaption>
+<figcaption>This is a title.<span class="m-figure-description">
 <p>This is a description.</p>
+</span>
+</figcaption>
 </figure>
 <figure class="m-figure">
 <svg class="m-graph" style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
diff --git a/plugins/m/test/dot/page.html b/plugins/m/test/dot/page.html
index f860321c..1e85bff2 100644
--- a/plugins/m/test/dot/page.html
+++ b/plugins/m/test/dot/page.html
@@ -232,8 +232,10 @@ and the arrowheads, nothing else. Non-default font size should be preserved.</p>
 </g>
 </g>
 </svg>
-<figcaption>This is a title.</figcaption>
+<figcaption>This is a title.<span class="m-figure-description">
 <p>This is a description.</p>
+</span>
+</figcaption>
 </figure>
 <figure class="m-figure">
 <svg class="m-graph" style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
diff --git a/plugins/m/test/images/page.html b/plugins/m/test/images/page.html
index 04d20af0..bbb6e452 100644
--- a/plugins/m/test/images/page.html
+++ b/plugins/m/test/images/page.html
@@ -44,9 +44,9 @@
 <p>Figure:</p>
 <figure class="m-figure">
 <img src="./ship.jpg" />
-<figcaption>A Ship</figcaption>
-<span>
+<figcaption>A Ship<span class="m-figure-description">
 Yes.</span>
+</figcaption>
 </figure>
 <p>Figure with link, scale and only a caption:</p>
 <figure class="m-figure">
-- 
2.30.2