Default Captions Should Use max-width

[Howdy_McGee]

HTML5 Captions should really be using max-width: image-size + px rather than a static width. It's widely supported and more mobile friendly than the default width style.

<figure id="attachment_116" style="max-width: 400px;" class="wp-caption alignright">
	<img class="wp-image-116 size-full" src="image.jpg" alt="redraw" width="400" height="365">
	<figcaption class="wp-caption-text">Phasellus nec sem in justo pellentesque facilisis.</figcaption>
</figure>

Works just as well - ​Can I Use: max-width

[desrosj]

Refreshed the patch. Minor change, but looks good to me. Tested with all the default themes and no issues.

[joemcgill]

Update unit tests

[joemcgill]

@desrosj – Looks like we need to update the unit tests for this too. The only test I can see that currently covers this style in the HTML is the curiously named test_img_caption_shortcode_with_old_format() in 'tests/phpunit/tests/media.php'. It was passing because it uses a loose preg_match_all() where max-width: 20 and width: 20 would both match /width: 20/.

33981.2.patch​ Updates that test, but I'm wondering if our coverage for img_caption_shortcode() is adequate.

[desrosj]

In 33981.3.patch​, I made a handful of test adjustments:

• test_img_caption_shortcode_with_bad_attr() was checking that two identical strings were equal and not checking the result of the function. It was also not passing a content parameter. I renamed this test test_img_caption_shortcode_with_empty_params_but_content().
• Added test_img_caption_shortcode_short_circuit_filter() to test that the function properly returns the results of the short circuit filter.
• Added test_img_caption_shortcode_empty_width() to ensure that $content is returned unaltered when width is < 1.
• Added test_img_caption_shortcode_empty_caption() to ensure that null is returned when $atts['caption'] is empty and no $content is specified.
• Added test_img_caption_shortcode_empty_caption_and_content() to ensure that $content is returned unaltered when $atts['caption'] is empty.

Makes the tests for that function slightly better, but we probably could still add some more scenarios.

One thing I thought of when diving in, could changing width to max-width cause problems with the img_caption_shortcode_width filter where someone needs the caption to be guaranteed a certain width? I think it is possible, but I don't know if that should hold this small change back.

[joemcgill]

@desrosj, 33981.3.patch​ looks good to me. It may be a bit cleaner to use a data provider for the new shortcode tests, but that's certainly not a blocker. While testing this I noticed an additional test that was failing in tests/phpunit/tests/shortcode.php, which I've updated in 33981.diff​.

[joemcgill]

33981.2.diff​ is the same as 33981.diff​, but removes the use of an anonymous callback function in a filter in the Tests_Media::test_img_caption_shortcode_short_circuit_filter() unit test to avoid failures on PHP 5.3 and below.

[desrosj]

@joemcgill 33981.2.diff​ looks good to me.

[joemcgill]

In 41724:

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.

[jakeqz]

It's widely supported and more mobile friendly

An actual use case demonstrating why this change was needed would be helpful.

could changing width to max-width cause problems...?

Indeed it could – see #43123.

[joemcgill]

In 42837:

Revert max-width styles on caption shortcodes.

This is a partial revert of [41724], so image captions include an
inline width style instead of max-width.

This returns the caption shortcode to the pre-4.9.0 behavior, while
retaining the extra unit test coverage added in [41724].

Fixes #43123. See #33981.

[joemcgill]

In 42838:

Revert max-width styles on caption shortcodes.

This is a partial revert of [41724], so image captions include an
inline width style instead of max-width.

This returns the caption shortcode to the pre-4.9.0 behavior, while
retaining the extra unit test coverage added in [41724].

Fixes #43123. See #33981.

Merges [42837] to the 4.9 branch.

[ocean90]

#49601 was marked as a duplicate.