Amphtml: Google's internal AMP Validator doesn't recognize <track> as a void element

[ejulcsi]

What's the issue?

A discrepancy found between the html specification in the documentation and the validator regarding the allowed tags inside amp-ima-video component.

Here is a case where the validator says that this site is invalid with the issue The parent tag of tag 'audio > track' is 'track', but it can only be 'audio'.
https://search.google.com/test/amp?id=fMVv8o7rGHTdygYtv1lKzg

Whereas the spec says that the components accepts the source, track and script nodes as children so it should be fine, also it doesn't include the audio node.
https://amp.dev/documentation/components/amp-ima-video/#overview

How is this possible? What can be wrong? Might be the case that the documentation is not updated?

[abelerdesz]

May I just add that The parent tag of tag 'audio > track' is 'track' sounds like a contradiction.

Thanks for anyone looking into this!

[abelerdesz]

Some additional information:

This page is fine, and it uses the same <amp-ima-video> component. The only difference seems to be that this one uses one <track> whereas the one in the bug report uses two.

[caroqliu]

cc @ampproject/wg-caching It appears the non-validating sample code in the link provided above contains two <track> elements with this structure:

<amp-ima-video  ... >
   <source ... />
   <track kind="captions" label="en_US" src="https://kinja.com/api/videoupload/caption/10002.vtt"/>
   <track kind="captions" label="en" src="https://kinja.com/api/videoupload/caption/10964.vtt"/>
   <div fallback="">
      <p>This browser does not support the video element.</p>
   </div>
</amp-ima-video>

In this case the second track element triggers a validator error. Based on the error message, is it possible the second track is identifying the prior track as a parent?

[Gregable]

@caroqliu is correct. The second track is a child of the first in this context, which is an error.

The trailing / at the end of each track tag is an HTML parse error and is ignored. It is not a "self-closing tag", which is not an actual thing in HTML5.

This is WAI.

[ejulcsi]

So then does this mean that the search console’s validator doesn’t support multiple tracks for a video?
We also tried the track element without closing the tag, however it threw the same error. (please ignore the error with the key attribute, that’s a mistake).
Which may lead to assume that there is no possibility to have multiple tracks. Is that a case?

If it's not the right repo to raise this issue could you please help redirecting it where it's appropriate?

[Gregable]

You need to correctly close your track elements. So in Caroline's example, the correct version would be:

<amp-ima-video  ... >
   <source ... />
   <track kind="captions" label="en_US" src="https://kinja.com/api/videoupload/caption/10002.vtt"></track>
   <track kind="captions" label="en" src="https://kinja.com/api/videoupload/caption/10964.vtt"></track>
   <div fallback="">
      <p>This browser does not support the video element.</p>
   </div>
</amp-ima-video>

Note the closing </track> elements.

[abelerdesz]

@Gregable

If you paste your example into https://validator.w3.org/nu/#textarea, you'll see that it marks the closing </track>s with a "stray end tag" error.

This is consistent with W3's examples:

https://www.w3.org/TR/2011/WD-html5-author-20110809/the-track-element.html

[Gregable]

Ah, you are correct. I forgot that <track> was a void element.

The trailing / in the track tags is still unnecessary, but the closing </track> tags are also invalid HTML5.

It doesn't look like the Search Console validator is aware that <track> has been added to the list of void elements, which is the main issue, so re-opening.

In the meantime, my version with the closing </track> tags is a workaround. It's invalid HTML5, but will not become invalid AMP, since AMP ignores extraneous closing tags.

[Gregable]

Tracked internally with Google as #134501117

[abelerdesz]

@Gregable Thank you!

[Gregable]

This was fixed last year, but the external issue never got closed. Closing.