Surround fignum and caption with <span> tag

3 files changed, 271 insertions, 256 deletions

diff --git a/sphinx/writers/html.py b/sphinx/writers/html.py
index 17cbe5fd..cf92fc5e 100644
--- a/sphinx/writers/html.py
+++ b/sphinx/writers/html.py
@@ -248,9 +248,11 @@ class HTMLTranslator(BaseTranslator):
     def add_fignumber(self, node):
         def append_fignumber(figtype, figure_id):
             if figure_id in self.builder.fignumbers.get(figtype, {}):
+                self.body.append(self.starttag(node, 'span', '', CLASS='caption-number'))
                 prefix = self.builder.config.numfig_prefix.get(figtype, '')
                 numbers = self.builder.fignumbers[figtype][figure_id]
                 self.body.append(prefix + '.'.join(map(str, numbers)) + " ")
+                self.body.append('</span>')
 
         if isinstance(node.parent, nodes.figure):
             append_fignumber('figure', node.parent['ids'][0])
@@ -276,6 +278,8 @@ class HTMLTranslator(BaseTranslator):
         BaseTranslator.visit_title(self, node)
         self.add_secnumber(node)
         self.add_fignumber(node)
+        if isinstance(node.parent, nodes.table):
+            self.body.append(self.starttag(node, 'span', '', CLASS='caption-text'))
 
     # overwritten
     def visit_literal_block(self, node):
@@ -308,8 +312,11 @@ class HTMLTranslator(BaseTranslator):
         else:
             BaseTranslator.visit_caption(self, node)
         self.add_fignumber(node)
+        self.body.append(self.starttag(node, 'span', '', CLASS='caption-text'))
 
     def depart_caption(self, node):
+        self.body.append('</span>')
+
         # append permalink if available
         if isinstance(node.parent, nodes.container) and node.parent.get('literal_block'):
             self.add_permalink_ref(node.parent, 'code')
@@ -593,6 +600,7 @@ class HTMLTranslator(BaseTranslator):
                                  _('Permalink to this headline'),
                                  self.permalink_text))
             elif isinstance(node.parent, nodes.table):
+                self.body.append('</span>')
                 self.add_permalink_ref(node.parent, 'table')
 
         BaseTranslator.depart_title(self, node)
diff --git a/tests/test_build_html.py b/tests/test_build_html.py
index ae518062..3d66cd24 100644
--- a/tests/test_build_html.py
+++ b/tests/test_build_html.py
@@ -305,8 +305,13 @@ class NslessParser(ET.XMLParser):
 
 def check_xpath(etree, fname, path, check, be_found=True):
     nodes = list(etree.findall(path))
-    assert nodes != [], ('did not find any node matching xpath '
-                         '%r in file %s' % (path, fname))
+    if check is None:
+        assert nodes == [], ('found any nodes matching xpath '
+                             '%r in file %s' % (path, fname))
+        return
+    else:
+        assert nodes != [], ('did not find any node matching xpath '
+                             '%r in file %s' % (path, fname))
     if hasattr(check, '__call__'):
         check(nodes)
     elif not check:
@@ -464,62 +469,24 @@ def test_numfig(app, status, warning):
 
     expects = {
         'index.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.2$', True),
-            (".//table/caption", '^should be Table 1$', True),
-            (".//table/caption", '^should be Table 2$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 1$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 2$', True),
+            (".//div[@class='figure']/p[@class='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),
         ],
         'foo.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.1.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.1.2$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.1.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.1.4$', True),
-            (".//table/caption", '^should be Table 1.1$', True),
-            (".//table/caption", '^should be Table 1.2$', True),
-            (".//table/caption", '^should be Table 1.3$', True),
-            (".//table/caption", '^should be Table 1.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 1.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 1.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 1.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 1.4$', True),
+            (".//div[@class='figure']/p[@class='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']/p[@class='caption']",
-                '^should be Fig.2.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.2.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^should be Fig.2.4$', True),
-            (".//table/caption", '^should be Table 2.1$', True),
-            (".//table/caption", '^should be Table 2.3$', True),
-            (".//table/caption", '^should be Table 2.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 2.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 2.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 2.4$', True),
+            (".//div[@class='figure']/p[@class='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']/p[@class='caption']",
-                '^should be Fig.2.2$', True),
-            (".//table/caption", '^should be Table 2.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^should be List 2.2$', True),
+            (".//div[@class='figure']/p[@class='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),
         ],
     }
 
@@ -547,62 +514,72 @@ def test_numfig_without_numbered_toctree(app, status, warning):
 
     expects = {
         'index.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.9 should be Fig.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.10 should be Fig.2$', True),
-            (".//table/caption", '^Table 9 should be Table 1$', True),
-            (".//table/caption", '^Table 10 should be Table 2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 9 should be List 1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 10 should be List 2$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.9 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.10 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 9 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 10 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 9 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 10 $', True),
             ],
         'foo.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1 should be Fig.1.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2 should be Fig.1.2$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.3 should be Fig.1.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.4 should be Fig.1.4$', True),
-            (".//table/caption", '^Table 1 should be Table 1.1$', True),
-            (".//table/caption", '^Table 2 should be Table 1.2$', True),
-            (".//table/caption", '^Table 3 should be Table 1.3$', True),
-            (".//table/caption", '^Table 4 should be Table 1.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1 should be List 1.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2 should be List 1.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 3 should be List 1.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 4 should be List 1.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.3 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.4 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 1 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 3 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 4 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 3 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 4 $', True),
             ],
         'bar.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.5 should be Fig.2.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.7 should be Fig.2.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.8 should be Fig.2.4$', True),
-            (".//table/caption", '^Table 5 should be Table 2.1$', True),
-            (".//table/caption", '^Table 7 should be Table 2.3$', True),
-            (".//table/caption", '^Table 8 should be Table 2.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 5 should be List 2.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 7 should be List 2.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 8 should be List 2.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.5 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.7 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.8 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 5 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 7 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 8 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 5 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 7 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 8 $', True),
         ],
         'baz.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.6 should be Fig.2.2$', True),
-            (".//table/caption", '^Table 6 should be Table 2.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 6 should be List 2.2$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.6 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 6 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 6 $', True),
         ],
     }
 
@@ -626,62 +603,72 @@ def test_numfig_with_numbered_toctree(app, status, warning):
 
     expects = {
         'index.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1 should be Fig.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2 should be Fig.2$', True),
-            (".//table/caption", '^Table 1 should be Table 1$', True),
-            (".//table/caption", '^Table 2 should be Table 2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1 should be List 1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2 should be List 2$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 1 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2 $', True),
             ],
         'foo.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.1 should be Fig.1.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.2 should be Fig.1.2$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.3 should be Fig.1.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.4 should be Fig.1.4$', True),
-            (".//table/caption", '^Table 1.1 should be Table 1.1$', True),
-            (".//table/caption", '^Table 1.2 should be Table 1.2$', True),
-            (".//table/caption", '^Table 1.3 should be Table 1.3$', True),
-            (".//table/caption", '^Table 1.4 should be Table 1.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.1 should be List 1.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.2 should be List 1.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.3 should be List 1.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.4 should be List 1.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1.2 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1.3 $', True),
+            (".//div[@class='figure']/p[@class='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']",
+             '^Table 1.2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 1.3 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 1.4 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.3 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.4 $', True),
             ],
         'bar.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.1 should be Fig.2.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.3 should be Fig.2.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.4 should be Fig.2.4$', True),
-            (".//table/caption", '^Table 2.1 should be Table 2.1$', True),
-            (".//table/caption", '^Table 2.3 should be Table 2.3$', True),
-            (".//table/caption", '^Table 2.4 should be Table 2.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.1 should be List 2.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.3 should be List 2.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.4 should be List 2.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2.3 $', True),
+            (".//div[@class='figure']/p[@class='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']",
+             '^Table 2.3 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 2.4 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2.3 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2.4 $', True),
         ],
         'baz.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.2 should be Fig.2.2$', True),
-            (".//table/caption", '^Table 2.2 should be Table 2.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.2 should be List 2.2$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2.2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 2.2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2.2 $', True),
         ],
     }
 
@@ -705,62 +692,72 @@ def test_numfig_with_prefix(app, status, warning):
 
     expects = {
         'index.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:1 should be Fig.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:2 should be Fig.2$', True),
-            (".//table/caption", '^Tab_1 should be Table 1$', True),
-            (".//table/caption", '^Tab_2 should be Table 2$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-1 should be List 1$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-2 should be List 2$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Tab_1 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Tab_2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-2 $', True),
             ],
         'foo.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:1.1 should be Fig.1.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:1.2 should be Fig.1.2$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:1.3 should be Fig.1.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:1.4 should be Fig.1.4$', True),
-            (".//table/caption", '^Tab_1.1 should be Table 1.1$', True),
-            (".//table/caption", '^Tab_1.2 should be Table 1.2$', True),
-            (".//table/caption", '^Tab_1.3 should be Table 1.3$', True),
-            (".//table/caption", '^Tab_1.4 should be Table 1.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-1.1 should be List 1.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-1.2 should be List 1.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-1.3 should be List 1.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-1.4 should be List 1.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:1.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:1.2 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:1.3 $', True),
+            (".//div[@class='figure']/p[@class='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']",
+             '^Tab_1.2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Tab_1.3 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Tab_1.4 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-1.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-1.2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-1.3 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-1.4 $', True),
             ],
         'bar.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:2.1 should be Fig.2.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:2.3 should be Fig.2.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:2.4 should be Fig.2.4$', True),
-            (".//table/caption", '^Tab_2.1 should be Table 2.1$', True),
-            (".//table/caption", '^Tab_2.3 should be Table 2.3$', True),
-            (".//table/caption", '^Tab_2.4 should be Table 2.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-2.1 should be List 2.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-2.3 should be List 2.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-2.4 should be List 2.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:2.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:2.3 $', True),
+            (".//div[@class='figure']/p[@class='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']",
+             '^Tab_2.3 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Tab_2.4 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-2.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-2.3 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-2.4 $', True),
         ],
         'baz.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Figure:2.2 should be Fig.2.2$', True),
-            (".//table/caption", '^Tab_2.2 should be Table 2.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^Code-2.2 should be List 2.2$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Figure:2.2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Tab_2.2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^Code-2.2 $', True),
         ],
     }
 
@@ -784,62 +781,72 @@ def test_numfig_with_secnum_depth(app, status, warning):
 
     expects = {
         'index.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1 should be Fig.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2 should be Fig.2$', True),
-            (".//table/caption", '^Table 1 should be Table 1$', True),
-            (".//table/caption", '^Table 2 should be Table 2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1 should be List 1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2 should be List 2$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 1 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2 $', True),
             ],
         'foo.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.1 should be Fig.1.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.1.1 should be Fig.1.2$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.1.2 should be Fig.1.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.1.2.1 should be Fig.1.4$', True),
-            (".//table/caption", '^Table 1.1 should be Table 1.1$', True),
-            (".//table/caption", '^Table 1.1.1 should be Table 1.2$', True),
-            (".//table/caption", '^Table 1.1.2 should be Table 1.3$', True),
-            (".//table/caption", '^Table 1.2.1 should be Table 1.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.1 should be List 1.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.1.1 should be List 1.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.1.2 should be List 1.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 1.2.1 should be List 1.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1.1.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.1.1.2 $', True),
+            (".//div[@class='figure']/p[@class='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']",
+             '^Table 1.1.1 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 1.1.2 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 1.2.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.1.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.1.2 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 1.2.1 $', True),
             ],
         'bar.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.1.1 should be Fig.2.1$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.1.3 should be Fig.2.3$', True),
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.2.1 should be Fig.2.4$', True),
-            (".//table/caption", '^Table 2.1.1 should be Table 2.1$', True),
-            (".//table/caption", '^Table 2.1.3 should be Table 2.3$', True),
-            (".//table/caption", '^Table 2.2.1 should be Table 2.4$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.1.1 should be List 2.1$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.1.3 should be List 2.3$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.2.1 should be List 2.4$', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2.1.1 $', True),
+            (".//div[@class='figure']/p[@class='caption']/span[@class='caption-number']",
+                '^Fig.2.1.3 $', True),
+            (".//div[@class='figure']/p[@class='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']",
+             '^Table 2.1.3 $', True),
+            (".//table/caption/span[@class='caption-number']",
+             '^Table 2.2.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2.1.1 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2.1.3 $', True),
+            (".//div[@class='code-block-caption']/span[@class='caption-number']",
+                '^List 2.2.1 $', True),
         ],
         'baz.html': [
-            (".//div[@class='figure']/p[@class='caption']",
-                '^Fig.2.1.2 should be Fig.2.2$', True),
-            (".//table/caption", '^Table 2.1.2 should be Table 2.2$', True),
-            (".//div[@class='code-block-caption']",
-                '^List 2.1.2 should be List 2.2$', True),
+            (".//div[@class='figure']/p[@class='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']/span[@class='caption-number']",
+                '^List 2.1.2 $', True),
         ],
     }
 
diff --git a/tests/test_directive_code.py b/tests/test_directive_code.py
index 90af8d5b..c2fa35e0 100644
--- a/tests/test_directive_code.py
+++ b/tests/test_directive_code.py
@@ -54,8 +54,8 @@ def test_code_block_caption_html(app, status, warning):
     app.builder.build(['caption'])
     html = (app.outdir / 'caption.html').text(encoding='utf-8')
     caption = (u'<div class="code-block-caption">'
-               u'caption <em>test</em> rb'
-               u'<a class="headerlink" href="#id1" '
+               u'<span class="caption-text">caption <em>test</em> rb'
+               u'</span><a class="headerlink" href="#id1" '
                u'title="Permalink to this code">\xb6</a></div>')
     assert caption in html
 
@@ -103,8 +103,8 @@ def test_literalinclude_caption_html(app, status, warning):
     app.builder.build('index')
     html = (app.outdir / 'caption.html').text(encoding='utf-8')
     caption = (u'<div class="code-block-caption">'
-               u'caption <strong>test</strong> py'
-               u'<a class="headerlink" href="#id2" '
+               u'<span class="caption-text">caption <strong>test</strong> py'
+               u'</span><a class="headerlink" href="#id2" '
                u'title="Permalink to this code">\xb6</a></div>')
     assert caption in html