Entire picture element tree is removed when img child is expected to persist

[westonruter]

Bug Description

In #1316 we were originally looking to support the picture element, but we ended up closing it. We should at least ensure that the img child of a picture element is able to replace the picture element. Instead, as it stands right now, when the following markup as input:

<picture>
    <source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)">
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg" alt="">
</picture>

The result is the entire tree is removed, unexpectedly.

Expected Behaviour

Instead it is is expected that the parent picture would be removed only, with the img left so that it is then converted into an amp-img like so:

<amp-img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg" alt="" width="298" height="332" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img>

Screenshots

No response

PHP Version

No response

Plugin Version

2.2

AMP plugin template mode

Standard, Transitional, Reader

WordPress Version

No response

Site Health

No response

Gutenberg Version

No response

OS(s) Affected

No response

Browser(s) Affected

No response

Device(s) Affected

No response

Acceptance Criteria

No response

Implementation Brief

Update AMP_Img_Sanitizer so that if the native_img_used arg is false, it:

1. At the beginning of the sanitize method, it loops over all picture elements.
2. For each picture, it finds the child img and replaces the picture with the img, deleting any source elements in the process.

Otherwise, if native_img_used is true, then at the beginning of the sanitize method, loop over all picture elements and pass each into ValidationExemption::mark_node_as_px_verified(), along with the child source and img elements.

QA Testing Instructions

No response

Demo

No response

Changelog Entry

No response

[dhaval-parekh]

Steps for QA

• Create one post with the below content.

<div>
Image 1
<picture><source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)"><img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg?image=1" alt="">
</picture>

Image 2
<picture><source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)"><img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg?image=2" alt="">
</picture>
</div>
----
<div>
Image 3
<picture><source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)"><img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg??image=3" alt="">
</picture>
</div>
----
<div>
Picture without img tag
<picture><source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg?image=3" media="(min-width: 800px)"></picture>
</div>

• Output should be (Updated markup)

<div>
<p>Image 1</p>
<img src="[https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg?image=1](view-source:https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg?image=1)" alt="" width="[298]()" height="[332]()" class="[amp-wp-enforced-sizes]()" decoding="[async]()">Image 2
<img src="[https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg?image=2](view-source:https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg?image=2)" alt="" width="[240]()" height="[200]()" class="[amp-wp-enforced-sizes]()" decoding="[async]()"></div>
<p>—-</p>
<div>
Image 3
<img src="[https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg??image=3](view-source:https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg??image=3)" alt="" width="[298]()" height="[332]()" class="[amp-wp-enforced-sizes]()" decoding="[async]()"></div>
<p>—-</p>
<div>
<p>Picture without img tag</p>
</div>

[pooja-muchandikar]

QA Passed ✅

[westonruter]

@pooja-muchandikar It seems you're testing on the develop branch (with 2.3-alpha) as opposed to the 2.2 branch (with 2.2.2-alpha). At the moment the only difference between the two branches is native img is being used in develop, but generally QA should be done with release branch builds.

[pooja-muchandikar]

Hi @westonruter,

Sorry for the confusion. I did check the issue with release branch that is 2.2.2-alpha and its working fine.