Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect highlighting of trailing slash in unquoted HTML attribute values #161764

Closed
hsivonen opened this issue Sep 26, 2022 · 4 comments
Closed

Incorrect highlighting of trailing slash in unquoted HTML attribute values #161764

hsivonen opened this issue Sep 26, 2022 · 4 comments
Assignees
@alexr00
Labels
grammar Syntax highlighting grammar upstream-issue-linked This is an upstream issue that has been reported upstream

Comments

@hsivonen
Copy link

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: 1.72.0-insider from 3 hours before reporting
  • OS Version: Ubuntu 22.04.1

Steps to Reproduce:

  1. code-insiders --disable-extensions test.html
  2. Type:
<!DOCTYPE html>
<a href=https://example.com/><img class=foo/></a>

Actual results:

The trailing slash in the value of the href attribute is highlighted as an error. The trailing slash in the class value foo/ is highlighted as if it was not part of the attribute value.

code-slash

Expected results

Expected both slashes to be highlighted in the attribute value color, since they parse as part of the attribute value according to the HTML spec.
@aeschli aeschli assigned alexr00 and unassigned aeschli Sep 26, 2022
@alexr00
Copy link
Member

alexr00 commented Sep 26, 2022 •
edited
Loading

@hsivonen the spec you link indicates that the href value should be put in double quotes. I do not see this issue when surrounding the href value with double quotes.

If I am misunderstanding the spec, then please let me know.

@alexr00 alexr00 closed this as completed Sep 26, 2022
@hsivonen
Copy link
Author

I think you are misunderstanding. I didn't link to the spec. I linked to a tool that parses the input using the HTML parser in your browser and, therefore, shows how a real parser tokenizes the input according to the spec (assuming, of course, that the browser you are using complies with the spec on this point).

As for the actual spec, I don't see a requirement to use quotes around the href value. Can you point me to where the spec says so?

In any case, highlighting the trailing slash in an unquoted attribute value in red is defensible to call out something that the user of the editor might not intend. However, the way the slash in the value of the class attribute is highlighted in the example that I gave is unambiguously incorrect. The highlighting suggests that the slash isn't part of the attribute value when it most certainly is per spec and per spec-compliant browser behavior.

@hsivonen
Copy link
Author

Specifically, in the "Attribute value (unquoted) state" the slash goes through the "Anything else" case.

@alexr00
Copy link
Member

alexr00 commented Sep 27, 2022

Thanks for clarifying! We get our html syntax highlighting grammar from https://github.com/textmate/html.tmbundle, so this is a duplicate of the upstream issue textmate/html.tmbundle#118.

@alexr00 alexr00 added grammar Syntax highlighting grammar upstream-issue-linked This is an upstream issue that has been reported upstream labels Sep 27, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Nov 10, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alexr00 alexr00

Labels
grammar Syntax highlighting grammar upstream-issue-linked This is an upstream issue that has been reported upstream
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hsivonen @aeschli @alexr00