diff --git a/validator/engine/validator.js b/validator/engine/validator.js index c501a7b2857a..58d6d68a8e49 100644 --- a/validator/engine/validator.js +++ b/validator/engine/validator.js @@ -4404,8 +4404,8 @@ function validateAttributes( const attrsByName = parsedTagSpec.getAttrsByName(); for (const attr of encounteredTag.attrs()) { // For transformed AMP, attributes `class` and `i-amphtml-layout` are - // handled within validateSsrLayout. - if (context.isTransformed() && + // handled within validateSsrLayout for non-sizer elements. + if (context.isTransformed() && encounteredTag.lowerName() !== 'i-amphtml-sizer' && (attr.name === 'class' || attr.name === 'i-amphtml-layout')) { continue; } diff --git a/validator/testdata/transformed_feature_tests/server_side_rendering.html b/validator/testdata/transformed_feature_tests/server_side_rendering.html index f76280ab9ac4..1fbba208866d 100644 --- a/validator/testdata/transformed_feature_tests/server_side_rendering.html +++ b/validator/testdata/transformed_feature_tests/server_side_rendering.html @@ -17,7 +17,8 @@ Test Description: Test for server side rendering transformer: - html tag attributes i-amphtml-layout and i-amphtml-no-boilerplate present - - i-amphtml-sizer tag with style attribute + - responsive layout: i-amphtml-sizer tag with style attribute + - intrinsic layout: i-amphtml-sizer tag with img tag --> @@ -35,6 +36,20 @@ + + + + + + + + + + + + + + diff --git a/validator/testdata/transformed_feature_tests/server_side_rendering.out b/validator/testdata/transformed_feature_tests/server_side_rendering.out index 4370d3b7618c..86ffdac7ed1a 100644 --- a/validator/testdata/transformed_feature_tests/server_side_rendering.out +++ b/validator/testdata/transformed_feature_tests/server_side_rendering.out @@ -18,7 +18,8 @@ FAIL | Test Description: | Test for server side rendering transformer: | - html tag attributes i-amphtml-layout and i-amphtml-no-boilerplate present -| - i-amphtml-sizer tag with style attribute +| - responsive layout: i-amphtml-sizer tag with style attribute +| - intrinsic layout: i-amphtml-sizer tag with img tag | --> | | @@ -36,35 +37,53 @@ FAIL | | | +| +| +| +| +| +| +>> ^~~~~~~~~ +transformed_feature_tests/server_side_rendering.html:44:45 The attribute 'src' in tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is set to the invalid value 'image.png'. +| +| +| +| +| +>> ^~~~~~~~~ +transformed_feature_tests/server_side_rendering.html:49:6 The parent tag of tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is 'i-amphtml-sizer', but it can only be 'i-amphtml-sizer-intrinsic'. +| +| +| | | | >> ^~~~~~~~~ -transformed_feature_tests/server_side_rendering.html:40:2 Invalid value 'nodisplay' for attribute 'i-amphtml-layout' in tag 'amp-img' - for layout 'RESPONSIVE', set the attribute 'i-amphtml-layout' to value 'responsive'. (see https://amp.dev/documentation/components/amp-img) +transformed_feature_tests/server_side_rendering.html:55:2 Invalid value 'nodisplay' for attribute 'i-amphtml-layout' in tag 'amp-img' - for layout 'RESPONSIVE', set the attribute 'i-amphtml-layout' to value 'responsive'. (see https://amp.dev/documentation/components/amp-img) | | | | >> ^~~~~~~~~ -transformed_feature_tests/server_side_rendering.html:44:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img) +transformed_feature_tests/server_side_rendering.html:59:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img) | | | | >> ^~~~~~~~~ -transformed_feature_tests/server_side_rendering.html:48:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img) +transformed_feature_tests/server_side_rendering.html:63:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img) | | >> ^~~~~~~~~ -transformed_feature_tests/server_side_rendering.html:50:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img) +transformed_feature_tests/server_side_rendering.html:65:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img) | | | >> ^~~~~~~~~ -transformed_feature_tests/server_side_rendering.html:53:4 CSS syntax error in tag 'i-amphtml-sizer' - the property 'display' is set to the disallowed value 'none'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages) +transformed_feature_tests/server_side_rendering.html:68:4 CSS syntax error in tag 'I-AMPHTML-SIZER-RESPONSIVE' - the property 'display' is set to the disallowed value 'none'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages) >> ^~~~~~~~~ -transformed_feature_tests/server_side_rendering.html:53:4 The property 'padding-bottom' in attribute 'style' in tag 'i-amphtml-sizer' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages) +transformed_feature_tests/server_side_rendering.html:68:4 The property 'padding-bottom' in attribute 'style' in tag 'I-AMPHTML-SIZER-RESPONSIVE' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages) | | | -| +| \ No newline at end of file diff --git a/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out b/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out index b97752330f83..c228999c3092 100644 --- a/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out +++ b/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out @@ -44,7 +44,7 @@ transformed_feature_tests/transformed_but_not_identified_transformed.html:31:2 T transformed_feature_tests/transformed_but_not_identified_transformed.html:31:2 The attribute 'i-amphtml-layout' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img) | >> ^~~~~~~~~ -transformed_feature_tests/transformed_but_not_identified_transformed.html:32:4 The tag 'i-amphtml-sizer' is disallowed. +transformed_feature_tests/transformed_but_not_identified_transformed.html:32:4 The tag 'i-amphtml-sizer' is disallowed except in specific forms. | | | @@ -53,4 +53,4 @@ transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 T >> ^~~~~~~~~ transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites) >> ^~~~~~~~~ -transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites) +transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites) \ No newline at end of file diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii index cbf705a3d32d..124a0dfdaea6 100644 --- a/validator/validator-main.protoascii +++ b/validator/validator-main.protoascii @@ -5320,9 +5320,11 @@ tags: { html_format: ACTIONS enabled_by: "transformed" tag_name: "I-AMPHTML-SIZER" + spec_name: "I-AMPHTML-SIZER-RESPONSIVE" explicit_attrs_only: true attrs: { name: "style" + dispatch_key: NAME_DISPATCH mandatory: true blacklisted_value_regex: "!\\s*important" css_declaration: { @@ -5333,6 +5335,49 @@ tags: { } } +tags: { + html_format: AMP + html_format: ACTIONS + enabled_by: "transformed" + tag_name: "I-AMPHTML-SIZER" + spec_name: "I-AMPHTML-SIZER-INTRINSIC" + explicit_attrs_only: true + attrs: { + name: "class" + value: "i-amphtml-sizer" + mandatory: true + dispatch_key: NAME_DISPATCH + } +} + +tags: { + html_format: AMP + enabled_by: "transformed" + tag_name: "IMG" + spec_name: "IMG-I-AMPHTML-INTRINSIC-SIZER" + mandatory_parent: "I-AMPHTML-SIZER-INTRINSIC" + attrs: { + name: "alt" + value: "" + mandatory: true + } + attrs: { + name: "aria-hidden" + value: "true" + mandatory: true + } + attrs: { + name: "role" + value: "presentation" + mandatory: true + } + attrs: { + name: "src" + value_regex: "data:image\/svg\+xml;charset=utf-8," + mandatory: true + } +} + # AMP Layout attributes: implied for TagSpecs with amp_layout field # set. Note that while these attributes are defined as optional here, # depending on amp layout the validator will examine these fields and