Visual difference on Image styles between AMP and non-AMP pages

[amedina]

Bug Description

Pair browsing of an AMP-first site in Transitional mode shows visual differences on image layouts.

Expected Behaviour

There should be no visual disparities.

Steps to reproduce

1. Activate the plugin in Transitional mode
2. Activate TwentyTwenty
3. Install Theme Unit Test data
4. Pair browse blog feed

Screenshots

Additional context

Version: 1.5.0-RC1

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

It's because the amp-img is getting display:inline-block whereas non-AMP img has display:block. In particular, it's because Twenty Twenty has this CSS:

svg,
img,
embed,
object {
	display: block;
	height: auto;
	max-width: 100%;
}

However, an amp-img with layout=intrinsic gets:

.i-amphtml-layout-intrinsic {
    display: inline-block;
    position: relative;
    max-width: 100%
}

This is overriding the specificity of the img selector.

I think what may be needed is adding a style rule to the core theme sanitizer specifically for Twenty Twenty that does this:

amp-img[layout=intrinsic] {
    display: block;
}

[westonruter]

This is not a regression in 1.5-alpha. I tested in WordPress 5.0 with AMP plugin v1.4.x and it happens there as well.

[westonruter]

I have an initial fix in #4421 specific for Twenty Twenty. It works by prepending a style rule to style[amp-custom] which sets amp-img to have display:block, with a selector that is specific enough to be weightier than .i-amphtml-layout-intrinsic.

There may be an opportunity to generalize this fix at the CSS parser level. For example, if coming across a selector that has just img and the rule includes display:block, then this could automatically result a style rule being added like:

.amp-block-img { display:block }

While at the same time adding the amp-block-img class to every amp-img. This should be more robust/automatic, though I can imagine there would be more edge cases. Namely, images added via amp-list or amp-script.