Changeset 41724

Timestamp:

10/04/2017 02:49:19 AM (7 years ago)

Author:

joemcgill

Message:

Media: Use max-width for default captions.

This alters the HTML output of the image caption shortcode to use
max-width instead of width to improve compatibility with
flexible layouts.

Props aaronrutley, desrosj.
Fixes #33981.

Location:

trunk

Files:

• src/wp-includes/media.php (modified) (1 diff)
• tests/phpunit/tests/media.php (modified) (4 diffs)
• tests/phpunit/tests/shortcode.php (modified) (1 diff)

trunk/src/wp-includes/media.php

@@ -1579 +1579 @@
     $style = '';
     if ( $caption_width ) {
-        $style = 'style="width: ' . (int) $caption_width . 'px" ';
+        $style = 'style="max-width: ' . (int) $caption_width . 'px" ';
     }
 

trunk/tests/phpunit/tests/media.php

@@ -29 +29 @@
         parent::setUp();
         $this->caption = 'A simple caption.';
+        $this->alternate_caption = 'Alternate caption.';
         $this->html_content = <<<CAP
 A <strong class='classy'>bolded</strong> <em>caption</em> with a <a href="#">link</a>.
@@ -52 +53 @@
     }
 
-    function test_img_caption_shortcode_with_bad_attr() {
-        $result = img_caption_shortcode( array(), 'content' );
-        $this->assertEquals( 'content', 'content' );
+    /**
+     * @ticket 33981
+     */
+    function test_img_caption_shortcode_with_empty_params_but_content() {
+        $result = img_caption_shortcode( array(), $this->caption );
+        $this->assertEquals( $this->caption, $result );
+    }
+
+    /**
+     * @ticket 33981
+     */
+    function test_img_caption_shortcode_short_circuit_filter() {
+        add_filter( 'img_caption_shortcode', array( $this, '_return_alt_caption' ) );
+
+        $result = img_caption_shortcode( array(), $this->caption );
+        $this->assertEquals( $this->alternate_caption, $result );
+    }
+
+    /**
+     * Filter used in test_img_caption_shortcode_short_circuit_filter()
+     */
+    function _return_alt_caption() {
+        return $this->alternate_caption;
+    }
+
+    /**
+     * @ticket 33981
+     */
+    function test_img_caption_shortcode_empty_width() {
+        $result = img_caption_shortcode(
+            array(
+                'width' => 0,
+            ),
+            $this->caption
+        );
+        $this->assertEquals( $this->caption, $result );
+    }
+
+    /**
+     * @ticket 33981
+     */
+    function test_img_caption_shortcode_empty_caption() {
+        $result = img_caption_shortcode(
+            array(
+                'caption' => '',
+            )
+        );
+        $this->assertNull( $result );
+    }
+
+    /**
+     * @ticket 33981
+     */
+    function test_img_caption_shortcode_empty_caption_and_content() {
+        $result = img_caption_shortcode(
+            array(
+                'caption' => '',
+            ),
+            $this->caption
+        );
+        $this->assertEquals( $this->caption, $result );
     }
 
@@ -67 +126 @@
 
         if ( current_theme_supports( 'html5', 'caption' ) ) {
-            $this->assertEquals( 1, preg_match_all( "/width: 20/", $result, $_r ) );
+            $this->assertEquals( 1, preg_match_all( "/max-width: 20/", $result, $_r ) );
         } else {
-            $this->assertEquals( 1, preg_match_all( "/width: 30/", $result, $_r ) );
+            $this->assertEquals( 1, preg_match_all( "/max-width: 30/", $result, $_r ) );
         }
     }
@@ -85 +144 @@
         $this->assertEquals( 1, preg_match_all( '/id="myId"/', $result, $_r ) );
         $this->assertEquals( 1, preg_match_all( "/{$this->caption}/", $result, $_r ) );
+    }
+
+    function test_img_caption_shortcode_with_old_format_and_class() {
+        $result = img_caption_shortcode(
+            array(
+                'width' => 20,
+                'class' => 'some-class another-class',
+                'caption' => $this->caption,
+            )
+        );
+        $this->assertEquals( 1, preg_match_all( '/wp-caption alignnone some-class another-class/', $result, $_r ) );
+
     }
 

trunk/tests/phpunit/tests/shortcode.php

@@ -478 +478 @@
             array(
                 '[caption caption="test" width="2"]<div>hello</div>[/caption]',
-                '<div style="width: 12px" class="wp-caption alignnone"><div>hello</div><p class="wp-caption-text">test</p></div>',
+                '<div style="max-width: 12px" class="wp-caption alignnone"><div>hello</div><p class="wp-caption-text">test</p></div>',
             ),
             array(