Elements with decimal dimensions cause AMP validation errors in i-amphtml-sizer for Optimized/Transformed AMP #27528
Description
Originally reported in ampproject/amp-wp#4493.
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 (in both the Node.js and PHP version), 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:
amphtml/validator/validator-main.protoascii
Line 4879 in 2984894
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'\\/>"