Image with decimal dimensions causes Optimizer to emit AMP Validation error #4493
Description
Bug Description
Given input HTML like so:
<amp-img src="https://blog.amp.dev/wp-content/uploads/2020/03/AMP_camp_Blog.png" alt="" height="938" width="1333.8226950355" layout="intrinsic"></amp-img>Take note of the decimal value in the width. This is valid AMP.
When the Optimizer is enabled, this gets optimized as:
<amp-img src="https://blog.amp.dev/wp-content/uploads/2020/03/AMP_camp_Blog.png" alt="" height="938" width="1333.8226950355" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
<i-amphtml-sizer class="i-amphtml-sizer">
<img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height="938" width="1333.8226950355" xmlns="http://www.w3.org/2000/svg" version="1.1"/>">
</i-amphtml-sizer>
</amp-img>Which is not valid AMP. A validation error is raised:
The attribute 'src' in tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is set to the invalid value 'data:image/svg+xml;charset=utf-8,<svg height="938" width="1333.8226950355" xmlns="http://www.w3.org/2000/svg" version="1.1"/>'.
When the AMP optimizer is disabled, the AMP runtime is generating constructing the DOM as follows:
<amp-img src="https://blog.amp.dev/wp-content/uploads/2020/03/AMP_camp_Blog.png" alt="" height="938" width="1333.8226950355" layout="intrinsic" class="i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="intrinsic" style="--loader-delay-offset:119ms !important;">
<i-amphtml-sizer class="i-amphtml-sizer">
<img alt="" role="presentation" aria-hidden="true" class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height="938px" width="1333.8226950355px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>">
</i-amphtml-sizer>
<img decoding="async" alt="" src="https://blog.amp.dev/wp-content/uploads/2020/03/AMP_camp_Blog.png" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>Note that the decimal width is used here as well. This indicates that the validator spec is at fault here, namely the IMG-I-AMPHTML-INTRINSIC-SIZER spec which defines the src attribute to have a value_regex as follows:
"data:image\\/svg\\+xml;charset=utf-8,<svg height=\"\\d+\" width=\"\\d+\" xmlns=\"http:\\/\\/www\\.w3\\.org\\/2000\\/svg\" version=\"1\\.1\"\\/>|data:image\\/svg\\+xml;charset=utf-8,<svg height='100' width='300' xmlns='http:\\/\\/www\\.w3\\.org\\/2000\\/svg' version='1\\.1'\\/>"
This needs to be changed to allow for decimal values, for example:
"data:image\\/svg\\+xml;charset=utf-8,<svg height=\"\\d+(\.\\d+)?\" width=\"\\d+(\.\\d+)?\" xmlns=\"http:\\/\\/www\\.w3\\.org\\/2000\\/svg\" version=\"1\\.1\"\\/>|data:image\\/svg\\+xml;charset=utf-8,<svg height='100' width='300' xmlns='http:\\/\\/www\\.w3\\.org\\/2000\\/svg' version='1\\.1'\\/>"
In the time being, should the AMP plugin hotfix by rounding the decimal value to an integer when generating the sizer image?
Expected Behaviour
Validation errors should not be raised when an amp-img has a decimal width or height.
Steps to reproduce
- Paste the above
amp-imginto a Custom HTML block - View an Optimized AMP page.
- Look for validation error.
Additional context
- WordPress version: 5.4
- Plugin version: 1.5.1
Support forum topics:
Do not alter or remove anything below. The following sections will be managed by moderators only.