amphtml: [Story Player] AMP validator failures for SSR'd with intrinsic layout

This is a follow-up to #30414 which fixed a validator issue for SSR’ed amp-story-player with a responsive layout. The fix in #30434 addressed the issue with responsive layout, but not the intrinsic layout.

Given this input:

<amp-story-player width="360" height="600" layout="intrinsic">
    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp" data-amp-original-style="--story-player-poster: url(https://amp.dev/static/samples/img/story_dog2_portrait.jpg)" class="amp-wp-77421fc">
        Stories in AMP – Hello World
    </a>
</amp-story-player>

The SSR’d output via amp optimize input.html can be seen on the playground. It likewise has one validation error:

The parent tag of tag ‘img’ is ‘i-amphtml-sizer’, but it can only be ‘amp-img (transformed)’.

The amp-story-player is optimized as:

<amp-story-player width="360" height="600" 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;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
    </i-amphtml-sizer>
    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp" data-amp-original-style="--story-player-poster: url(https://amp.dev/static/samples/img/story_dog2_portrait.jpg)" class="amp-wp-77421fc"> Stories in AMP – Hello World </a>
</amp-story-player>

When the responsive layout is used, the sizer is:

<i-amphtml-sizer style="display:block;padding-top:166.6667%;"></i-amphtml-sizer>

And this is allowed by #30414. However, when the intrinsic layout is used, the sizer is:

<i-amphtml-sizer class="i-amphtml-sizer">
    <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
</i-amphtml-sizer>

The img here is not currently allowed by the validator.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 15 (15 by maintainers)

Most upvoted comments

in that case, the value_regex isn’t matching the src.

Humm. Doesn’t it match?

Given this rule:

https://github.com/ampproject/amphtml/blob/53dd79cbfce73496c13f3b1b227d3f67c35d14c9/validator/validator-main.protoascii#L4565-L4569

And this img:

 <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">

The value_regex pattern seems to match the src:

const pattern = new RegExp("data:image\\/svg\\+xml;charset=utf-8,\\s*<svg height=\"\\d+(\\.\\d+)?\" width=\"\\d+(\\.\\d+)?\" xmlns=\"http:\\/\\/www\\.w3\\.org\\/2000\\/svg\" version=\"1\\.1\"\\/>|data:image\\/svg\\+xml;charset=utf-8,\\s*<svg height='\\d+(\\.\\d+)?\' width='\\d+(\\.\\d+)?\' xmlns='http:\\/\\/www\\.w3\\.org\\/2000\\/svg' version='1\\.1'\\/>|data:image\\/svg\\+xml;base64,[a-zA-Z0-9+\\/=]+");
pattern.test("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=");
// => true

westonruter on Jan 24, 2021