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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41724 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/media.php

@@ -1578,7 +1578,7 @@ function img_caption_shortcode( $attr, $content = null ) {
 
 	$style = '';
 	if ( $caption_width ) {
-		$style = 'style="width: ' . (int) $caption_width . 'px" ';
+		$style = 'style="max-width: ' . (int) $caption_width . 'px" ';
 	}
 
 	if ( $html5 ) {

tests/phpunit/tests/media.php

@@ -28,6 +28,7 @@ class Tests_Media extends WP_UnitTestCase {
 	function setUp() {
 		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>.
 CAP;
@@ -51,9 +52,67 @@ CAP;
 		$this->assertNull( $result );
 	}
 
-	function test_img_caption_shortcode_with_bad_attr() {
+	/**
-		$result = img_caption_shortcode( array(), 'content' );
+	 * @ticket 33981
-		$this->assertEquals( 'content', 'content' );
+	 */
+	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 );
 	}
 
 	function test_img_caption_shortcode_with_old_format() {
@@ -66,9 +125,9 @@ CAP;
 		$this->assertEquals( 1, preg_match_all( "/{$this->caption}/", $result, $_r ) );
 
 		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 ) );
 		}
 	}
 
@@ -86,6 +145,18 @@ CAP;
 		$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 ) );
+
+	}
+
 	function test_new_img_caption_shortcode_with_html_caption() {
 		$result = img_caption_shortcode(
 			array( 'width' => 20, 'caption' => $this->html_content )

tests/phpunit/tests/shortcode.php

@@ -477,7 +477,7 @@ EOF;
 			),
 			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(
 				'<div [gallery]>',