test: Update testcase for docutils-0.17 (<figure> and <figcaption>)

Since v0.17, docutils starts to use <figure> and <figcaption> for figure
and its caption on HTML output.  This modifies the expected value of our
testcases to support it.

3 files changed, 175 insertions, 158 deletions

diff --git a/tests/test_build_html.py b/tests/test_build_html.py
index ffd32d6f5..31c73c25f 100644
--- a/tests/test_build_html.py
+++ b/tests/test_build_html.py
@@ -24,6 +24,12 @@ from sphinx.testing.util import strip_escseq
 from sphinx.util import docutils, md5
 from sphinx.util.inventory import InventoryFile
 
+if docutils.__version_info__ < (0, 17):
+    FIGURE_CAPTION = ".//div[@class='figure align-default']/p[@class='caption']"
+else:
+    FIGURE_CAPTION = ".//figure/figcaption/p"
+
+
 ENV_WARNINGS = """\
 %(root)s/autodoc_fodder.py:docstring of autodoc_fodder.MarkupError:\\d+: \
 WARNING: Explicit markup ends without a blank line; unexpected unindent.
@@ -603,8 +609,7 @@ def test_numfig_disabled_warn(app, warning):
 
 @pytest.mark.parametrize("fname,expect", flat_dict({
     'index.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", None, True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", None, True),
         (".//table/caption/span[@class='caption-number']", None, True),
         (".//div[@class='code-block-caption']/"
          "span[@class='caption-number']", None, True),
@@ -620,22 +625,19 @@ def test_numfig_disabled_warn(app, warning):
         (".//li/p/a/span", '^Sect.1 Foo$', True),
     ],
     'foo.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", None, True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", None, True),
         (".//table/caption/span[@class='caption-number']", None, True),
         (".//div[@class='code-block-caption']/"
          "span[@class='caption-number']", None, True),
     ],
     'bar.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", None, True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", None, True),
         (".//table/caption/span[@class='caption-number']", None, True),
         (".//div[@class='code-block-caption']/"
          "span[@class='caption-number']", None, True),
     ],
     'baz.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", None, True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", None, True),
         (".//table/caption/span[@class='caption-number']", None, True),
         (".//div[@class='code-block-caption']/"
          "span[@class='caption-number']", None, True),
@@ -671,10 +673,8 @@ def test_numfig_without_numbered_toctree_warn(app, warning):
 
 @pytest.mark.parametrize("fname,expect", flat_dict({
     'index.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 9 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 10 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 9 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 10 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 9 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -695,14 +695,10 @@ def test_numfig_without_numbered_toctree_warn(app, warning):
         (".//li/p/code/span", '^Sect.{number}$', True),
     ],
     'foo.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 4 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 4 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -721,12 +717,9 @@ def test_numfig_without_numbered_toctree_warn(app, warning):
          "span[@class='caption-number']", '^Listing 4 $', True),
     ],
     'bar.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 5 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 7 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 8 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 5 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 7 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 8 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 5 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -741,8 +734,7 @@ def test_numfig_without_numbered_toctree_warn(app, warning):
          "span[@class='caption-number']", '^Listing 8 $', True),
     ],
     'baz.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 6 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 6 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 6 $', True),
         (".//div[@class='code-block-caption']/"
@@ -779,10 +771,8 @@ def test_numfig_with_numbered_toctree_warn(app, warning):
 
 @pytest.mark.parametrize("fname,expect", flat_dict({
     'index.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -803,14 +793,10 @@ def test_numfig_with_numbered_toctree_warn(app, warning):
         (".//li/p/a/span", '^Sect.1 Foo$', True),
     ],
     'foo.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.2 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.4 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.4 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 1.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -829,12 +815,9 @@ def test_numfig_with_numbered_toctree_warn(app, warning):
          "span[@class='caption-number']", '^Listing 1.4 $', True),
     ],
     'bar.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.4 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.4 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 2.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -849,8 +832,7 @@ def test_numfig_with_numbered_toctree_warn(app, warning):
          "span[@class='caption-number']", '^Listing 2.4 $', True),
     ],
     'baz.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 2.2 $', True),
         (".//div[@class='code-block-caption']/"
@@ -884,10 +866,8 @@ def test_numfig_with_prefix_warn(app, warning):
 
 @pytest.mark.parametrize("fname,expect", flat_dict({
     'index.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Tab_1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -908,14 +888,10 @@ def test_numfig_with_prefix_warn(app, warning):
         (".//li/p/a/span", '^Sect.1 Foo$', True),
     ],
     'foo.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:1.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:1.2 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:1.3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:1.4 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:1.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:1.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:1.3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:1.4 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Tab_1.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -934,12 +910,9 @@ def test_numfig_with_prefix_warn(app, warning):
          "span[@class='caption-number']", '^Code-1.4 $', True),
     ],
     'bar.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:2.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:2.3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:2.4 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:2.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:2.3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:2.4 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Tab_2.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -954,8 +927,7 @@ def test_numfig_with_prefix_warn(app, warning):
          "span[@class='caption-number']", '^Code-2.4 $', True),
     ],
     'baz.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Figure:2.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Figure:2.2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Tab_2.2 $', True),
         (".//div[@class='code-block-caption']/"
@@ -990,10 +962,8 @@ def test_numfig_with_secnum_depth_warn(app, warning):
 
 @pytest.mark.parametrize("fname,expect", flat_dict({
     'index.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -1014,14 +984,10 @@ def test_numfig_with_secnum_depth_warn(app, warning):
         (".//li/p/a/span", '^Sect.1 Foo$', True),
     ],
     'foo.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.1.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.1.2 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.2.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.1.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.1.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.2.1 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 1.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -1040,12 +1006,9 @@ def test_numfig_with_secnum_depth_warn(app, warning):
          "span[@class='caption-number']", '^Listing 1.2.1 $', True),
     ],
     'bar.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.1.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.1.3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.2.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.1.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.1.3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.2.1 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 2.1.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -1060,8 +1023,7 @@ def test_numfig_with_secnum_depth_warn(app, warning):
          "span[@class='caption-number']", '^Listing 2.2.1 $', True),
     ],
     'baz.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.1.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.1.2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 2.1.2 $', True),
         (".//div[@class='code-block-caption']/"
@@ -1081,10 +1043,8 @@ def test_numfig_with_secnum_depth(app, cached_etree_parse, fname, expect):
 
 @pytest.mark.parametrize("fname,expect", flat_dict({
     'index.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -1103,14 +1063,10 @@ def test_numfig_with_secnum_depth(app, cached_etree_parse, fname, expect):
         (".//li/p/a/span", '^Section.2.1$', True),
         (".//li/p/a/span", '^Fig.1 should be Fig.1$', True),
         (".//li/p/a/span", '^Sect.1 Foo$', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.2 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 1.4 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 1.4 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 1.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -1127,12 +1083,9 @@ def test_numfig_with_secnum_depth(app, cached_etree_parse, fname, expect):
          "span[@class='caption-number']", '^Listing 1.3 $', True),
         (".//div[@class='code-block-caption']/"
          "span[@class='caption-number']", '^Listing 1.4 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.1 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.3 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.4 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.1 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.3 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.4 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 2.1 $', True),
         (".//table/caption/span[@class='caption-number']",
@@ -1145,8 +1098,7 @@ def test_numfig_with_secnum_depth(app, cached_etree_parse, fname, expect):
          "span[@class='caption-number']", '^Listing 2.3 $', True),
         (".//div[@class='code-block-caption']/"
          "span[@class='caption-number']", '^Listing 2.4 $', True),
-        (".//div[@class='figure align-default']/p[@class='caption']/"
-         "span[@class='caption-number']", '^Fig. 2.2 $', True),
+        (FIGURE_CAPTION + "/span[@class='caption-number']", '^Fig. 2.2 $', True),
         (".//table/caption/span[@class='caption-number']",
          '^Table 2.2 $', True),
         (".//div[@class='code-block-caption']/"
@@ -1164,12 +1116,9 @@ def test_numfig_with_singlehtml(app, cached_etree_parse, fname, expect):
 
 @pytest.mark.parametrize("fname,expect", flat_dict({
     'index.html': [
-        (".//div[@class='figure align-default']/p[@class='caption']"
-         "/span[@class='caption-number']", "Fig. 1", True),
-        (".//div[@class='figure align-default']/p[@class='caption']"
-         "/span[@class='caption-number']", "Fig. 2", True),
-        (".//div[@class='figure align-default']/p[@class='caption']"
-         "/span[@class='caption-number']", "Fig. 3", True),
+        (FIGURE_CAPTION + "//span[@class='caption-number']", "Fig. 1", True),
+        (FIGURE_CAPTION + "//span[@class='caption-number']", "Fig. 2", True),
+        (FIGURE_CAPTION + "//span[@class='caption-number']", "Fig. 3", True),
         (".//div//span[@class='caption-number']", "No.1 ", True),
         (".//div//span[@class='caption-number']", "No.2 ", True),
         (".//li/p/a/span", 'Fig. 1', True),
@@ -1332,9 +1281,14 @@ def test_html_inventory(app):
 def test_html_anchor_for_figure(app):
     app.builder.build_all()
     content = (app.outdir / 'index.html').read_text()
-    assert ('<p class="caption"><span class="caption-text">The caption of pic</span>'
-            '<a class="headerlink" href="#id1" title="Permalink to this image">¶</a></p>'
-            in content)
+    if docutils.__version_info__ < (0, 17):
+        assert ('<p class="caption"><span class="caption-text">The caption of pic</span>'
+                '<a class="headerlink" href="#id1" title="Permalink to this image">¶</a></p>'
+                in content)
+    else:
+        assert ('<figcaption>\n<p><span class="caption-text">The caption of pic</span>'
+                '<a class="headerlink" href="#id1" title="Permalink to this image">¶</a></p>\n</figcaption>'
+                in content)
 
 
 @pytest.mark.sphinx('html', testroot='directives-raw')
diff --git a/tests/test_ext_graphviz.py b/tests/test_ext_graphviz.py
index a19261e96..1671133e7 100644
--- a/tests/test_ext_graphviz.py
+++ b/tests/test_ext_graphviz.py
@@ -13,6 +13,7 @@ import re
 import pytest
 
 from sphinx.ext.graphviz import ClickableMapDefinition
+from sphinx.util import docutils
 
 
 @pytest.mark.sphinx('html', testroot='ext-graphviz')
@@ -21,9 +22,15 @@ def test_graphviz_png_html(app, status, warning):
     app.builder.build_all()
 
     content = (app.outdir / 'index.html').read_text()
-    html = (r'<div class="figure align-default" .*?>\s*'
-            r'<div class="graphviz"><img .*?/></div>\s*<p class="caption">'
-            r'<span class="caption-text">caption of graph</span>.*</p>\s*</div>')
+    if docutils.__version_info__ < (0, 17):
+        html = (r'<div class="figure align-default" .*?>\s*'
+                r'<div class="graphviz"><img .*?/></div>\s*<p class="caption">'
+                r'<span class="caption-text">caption of graph</span>.*</p>\s*</div>')
+    else:
+        html = (r'<figure class="align-default" .*?>\s*'
+                r'<div class="graphviz"><img .*?/></div>\s*<figcaption>\s*'
+                r'<p><span class="caption-text">caption of graph</span>.*</p>\s*'
+                r'</figcaption>\s*</figure>')
     assert re.search(html, content, re.S)
 
     html = 'Hello <div class="graphviz"><img .*?/></div>\n graphviz world'
@@ -33,9 +40,15 @@ def test_graphviz_png_html(app, status, warning):
             'class="graphviz neato-graph" />')
     assert re.search(html, content, re.S)
 
-    html = (r'<div class="figure align-right" .*?>\s*'
-            r'<div class="graphviz"><img .*?/></div>\s*<p class="caption">'
-            r'<span class="caption-text">on <em>right</em></span>.*</p>\s*</div>')
+    if docutils.__version_info__ < (0, 17):
+        html = (r'<div class="figure align-right" .*?>\s*'
+                r'<div class="graphviz"><img .*?/></div>\s*<p class="caption">'
+                r'<span class="caption-text">on <em>right</em></span>.*</p>\s*</div>')
+    else:
+        html = (r'<figure class="align-right" .*?>\s*'
+                r'<div class="graphviz"><img .*?/></div>\s*<figcaption>\s*'
+                r'<p><span class="caption-text">on <em>right</em></span>.*</p>\s*'
+                r'</figcaption>\s*</figure>')
     assert re.search(html, content, re.S)
 
     html = (r'<div align=\"center\" class=\"align-center\">'
@@ -53,13 +66,24 @@ def test_graphviz_svg_html(app, status, warning):
 
     content = (app.outdir / 'index.html').read_text()
 
-    html = (r'<div class=\"figure align-default\" .*?>\n'
-            r'<div class="graphviz"><object data=\".*\.svg\".*>\n'
-            r'\s*<p class=\"warning\">digraph foo {\n'
-            r'bar -&gt; baz\n'
-            r'}</p></object></div>\n'
-            r'<p class=\"caption\"><span class=\"caption-text\">'
-            r'caption of graph</span>.*</p>\n</div>')
+    if docutils.__version_info__ < (0, 17):
+        html = (r'<div class=\"figure align-default\" .*?>\n'
+                r'<div class="graphviz"><object data=\".*\.svg\".*>\n'
+                r'\s*<p class=\"warning\">digraph foo {\n'
+                r'bar -&gt; baz\n'
+                r'}</p></object></div>\n'
+                r'<p class=\"caption\"><span class=\"caption-text\">'
+                r'caption of graph</span>.*</p>\n</div>')
+    else:
+        html = (r'<figure class=\"align-default\" .*?>\n'
+                r'<div class="graphviz"><object data=\".*\.svg\".*>\n'
+                r'\s*<p class=\"warning\">digraph foo {\n'
+                r'bar -&gt; baz\n'
+                r'}</p></object></div>\n'
+                r'<figcaption>\n'
+                r'<p><span class=\"caption-text\">caption of graph</span>.*</p>\n'
+                r'</figcaption>\n'
+                r'</figure>')
     assert re.search(html, content, re.S)
 
     html = (r'Hello <div class="graphviz"><object.*>\n'
@@ -67,14 +91,25 @@ def test_graphviz_svg_html(app, status, warning):
             r' graphviz world')
     assert re.search(html, content, re.S)
 
-    html = (r'<div class=\"figure align-right\" .*\>\n'
-            r'<div class="graphviz"><object data=\".*\.svg\".*>\n'
-            r'\s*<p class=\"warning\">digraph bar {\n'
-            r'foo -&gt; bar\n'
-            r'}</p></object></div>\n'
-            r'<p class=\"caption\"><span class=\"caption-text\">'
-            r'on <em>right</em></span>.*</p>\n'
-            r'</div>')
+    if docutils.__version_info__ < (0, 17):
+        html = (r'<div class=\"figure align-right\" .*\>\n'
+                r'<div class="graphviz"><object data=\".*\.svg\".*>\n'
+                r'\s*<p class=\"warning\">digraph bar {\n'
+                r'foo -&gt; bar\n'
+                r'}</p></object></div>\n'
+                r'<p class=\"caption\"><span class=\"caption-text\">'
+                r'on <em>right</em></span>.*</p>\n'
+                r'</div>')
+    else:
+        html = (r'<figure class=\"align-right\" .*\>\n'
+                r'<div class="graphviz"><object data=\".*\.svg\".*>\n'
+                r'\s*<p class=\"warning\">digraph bar {\n'
+                r'foo -&gt; bar\n'
+                r'}</p></object></div>\n'
+                r'<figcaption>\n'
+                r'<p><span class=\"caption-text\">on <em>right</em></span>.*</p>\n'
+                r'</figcaption>\n'
+                r'</figure>')
     assert re.search(html, content, re.S)
 
     html = (r'<div align=\"center\" class=\"align-center\">'
diff --git a/tests/test_ext_inheritance_diagram.py b/tests/test_ext_inheritance_diagram.py
index eada88e91..1dd26d9bb 100644
--- a/tests/test_ext_inheritance_diagram.py
+++ b/tests/test_ext_inheritance_diagram.py
@@ -16,6 +16,7 @@ import pytest
 
 from sphinx.ext.inheritance_diagram import (InheritanceDiagram, InheritanceException,
                                             import_classes)
+from sphinx.util import docutils
 
 
 @pytest.mark.sphinx(buildername="html", testroot="inheritance")
@@ -147,12 +148,20 @@ def test_inheritance_diagram_png_html(app, status, warning):
 
     content = (app.outdir / 'index.html').read_text()
 
-    pattern = ('<div class="figure align-default" id="id1">\n'
-               '<div class="graphviz">'
-               '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
-               'class="inheritance graphviz" /></div>\n<p class="caption">'
-               '<span class="caption-text">Test Foo!</span><a class="headerlink" href="#id1" '
-               'title="Permalink to this image">\xb6</a></p>')
+    if docutils.__version_info__ < (0, 17):
+        pattern = ('<div class="figure align-default" id="id1">\n'
+                   '<div class="graphviz">'
+                   '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
+                   'class="inheritance graphviz" /></div>\n<p class="caption">'
+                   '<span class="caption-text">Test Foo!</span><a class="headerlink" href="#id1" '
+                   'title="Permalink to this image">\xb6</a></p>\n</div>\n')
+    else:
+        pattern = ('<figure class="align-default" id="id1">\n'
+                   '<div class="graphviz">'
+                   '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
+                   'class="inheritance graphviz" /></div>\n<figcaption>\n<p>'
+                   '<span class="caption-text">Test Foo!</span><a class="headerlink" href="#id1" '
+                   'title="Permalink to this image">\xb6</a></p>\n</figcaption>\n</figure>\n')
     assert re.search(pattern, content, re.M)
 
 
@@ -164,14 +173,25 @@ def test_inheritance_diagram_svg_html(app, status, warning):
 
     content = (app.outdir / 'index.html').read_text()
 
-    pattern = ('<div class="figure align-default" id="id1">\n'
-               '<div class="graphviz">'
-               '<object data="_images/inheritance-\\w+.svg" '
-               'type="image/svg\\+xml" class="inheritance graphviz">\n'
-               '<p class=\"warning\">Inheritance diagram of test.Foo</p>'
-               '</object></div>\n<p class="caption"><span class="caption-text">'
-               'Test Foo!</span><a class="headerlink" href="#id1" '
-               'title="Permalink to this image">\xb6</a></p>')
+    if docutils.__version_info__ < (0, 17):
+        pattern = ('<div class="figure align-default" id="id1">\n'
+                   '<div class="graphviz">'
+                   '<object data="_images/inheritance-\\w+.svg" '
+                   'type="image/svg\\+xml" class="inheritance graphviz">\n'
+                   '<p class=\"warning\">Inheritance diagram of test.Foo</p>'
+                   '</object></div>\n<p class="caption"><span class="caption-text">'
+                   'Test Foo!</span><a class="headerlink" href="#id1" '
+                   'title="Permalink to this image">\xb6</a></p>\n</div>\n')
+    else:
+        pattern = ('<figure class="align-default" id="id1">\n'
+                   '<div class="graphviz">'
+                   '<object data="_images/inheritance-\\w+.svg" '
+                   'type="image/svg\\+xml" class="inheritance graphviz">\n'
+                   '<p class=\"warning\">Inheritance diagram of test.Foo</p>'
+                   '</object></div>\n<figcaption>\n<p><span class="caption-text">'
+                   'Test Foo!</span><a class="headerlink" href="#id1" '
+                   'title="Permalink to this image">\xb6</a></p>\n</figcaption>\n</figure>\n')
+
     assert re.search(pattern, content, re.M)
 
 
@@ -204,12 +224,20 @@ def test_inheritance_diagram_latex_alias(app, status, warning):
 
     content = (app.outdir / 'index.html').read_text()
 
-    pattern = ('<div class="figure align-default" id="id1">\n'
-               '<div class="graphviz">'
-               '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
-               'class="inheritance graphviz" /></div>\n<p class="caption">'
-               '<span class="caption-text">Test Foo!</span><a class="headerlink" href="#id1" '
-               'title="Permalink to this image">\xb6</a></p>')
+    if docutils.__version_info__ < (0, 17):
+        pattern = ('<div class="figure align-default" id="id1">\n'
+                   '<div class="graphviz">'
+                   '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
+                   'class="inheritance graphviz" /></div>\n<p class="caption">'
+                   '<span class="caption-text">Test Foo!</span><a class="headerlink" href="#id1" '
+                   'title="Permalink to this image">\xb6</a></p>\n</div>\n')
+    else:
+        pattern = ('<figure class="align-default" id="id1">\n'
+                   '<div class="graphviz">'
+                   '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
+                   'class="inheritance graphviz" /></div>\n<figcaption>\n<p>'
+                   '<span class="caption-text">Test Foo!</span><a class="headerlink" href="#id1" '
+                   'title="Permalink to this image">\xb6</a></p>\n</figcaption>\n</figure>\n')
     assert re.search(pattern, content, re.M)