amphtml: Validator reports incorrect error messages for certain invalid elements

A few examples of confusing error messages when AMP’s development mode is triggered via #development=1:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?" foo="bar">

Actual: INVALID_ATTR_VALUE rel=stylesheet
Expected: MANDATORY_ATTR_MISSING type

(type="text/css" is missing.)

<link rel="stylesheet" href="http://fonts.googleapis.com/css?" type="text/css">

Actual: INVALID_ATTR_VALUE rel=stylesheet
Expected: INVALID_ATTR_VALUE http=not_whitelisted

(The scheme needs to be https.)

Note that Google Fonts’ sample embed code suggests the http scheme, not https.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 28 (10 by maintainers)

Most upvoted comments

@Gregable Sorry to dredge up an old post, but

<link href="style.css" rel="stylesheet" type="text/css"> “The error message needs improvement on our side. The issue is that you generally are not allowed to use external stylesheets, they must be inlined. Specific font providers are the exception.”

Why does the error not say:

“External stylesheets not permitted or the attribute ‘href’ in tag ‘link rel=stylesheet for fonts’ is set to the invalid value”

Instead of what is nonsensical for many use-cases:

“The attribute ‘href’ in tag ‘link rel=stylesheet for fonts’ is set to the invalid value”?

Hi @robertbrady, welcome to the wagon!

Your html includes: <link href="style.css" rel="stylesheet" type="text/css">

The error message needs improvement on our side. The issue is that you generally are not allowed to use external stylesheets, they must be inlined. Specific font providers are the exception.

See https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#author-stylesheets for more information on how to inline custom stylesheets.

Thanks for the specific example. We will improve these error messages.

For the curious: In both cases, the validator generates several possible errors (for each possible link tagspec it could be matching, there are currently 6), and tries to pick the one most likely to be helpful. It’s not doing a great job here because it thinks you are trying to do something different than including a font. I think what it’s trying to decide is between these two possible valid options:

<link rel=stylesheet href="https://fonts..."> and <link rel=amphtml href="http://fonts...">

In both cases, there is one incorrect attribute value. Validation isn’t sure which you wanted. Reporting both errors is even more confusing (you’d end up with 6 possible errors, I think).