amphtml
amphtml copied to clipboard
ampproject
Validator returns incorrect column number when opening <style> is on the same line
Description
For a minified layout like this
<style amp-custom>body{color:red}error</style>
the length of <style amp-custom> (which is 18) will be ignored when calculating error's column.
For the code above column will be 15 (length of just body{color:red}).
Some more examples:
<!-- column=0, expected 18 -->
<style amp-custom>error</style>
<!-- column=21 — length of <head> (6) + length of body{color:red} (15), expected 39 -->
<head><style amp-custom>body{color:red}error</style>
The behavior is similar for AMP, AMP4EMAIL and AMP4ADS modes.
Reproduction Steps
Paste this code
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<style amp-custom>body{wrong:0}</style>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body></body>
</html>
to https://validator.ampproject.org/#htmlFormat=AMP4EMAIL
Error will be on column 7 (expected 25), and exclamation mark will be visually misaligned:
Or open a page with this JS code (works from browser console too):
const html = `<!doctype html>
<html ⚡4email data-css-strict>
<head>
<style amp-custom>body{wrong:0}</style>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body></body>
</html>`
const script = document.createElement('script')
script.src = 'https://cdn.ampproject.org/v0/validator_wasm.js'
script.addEventListener('load', async () => {
await amp.validator.init()
const {errors} = amp.validator.validateString(html, 'AMP4EMAIL')
console.log('expected single error on 4:25, got:')
console.log(errors.map(({line,col}) => `${line}:${col}`))
})
document.head.appendChild(script)
Relevant Logs
Browser(s) Affected
No response
OS(s) Affected
No response
Device(s) Affected
No response
AMP Version Affected
No response
