-
Notifications
You must be signed in to change notification settings - Fork 55
Description
Originally from @barabo in microsoft/vscode#130284
Issue Type: Bug
I had a copy/paste error in my source HTML that led to a very subtle bug in my rendered HTML.
Consider this input:
<div id="client-secret">
<label>Client Secret</label>
<textarea class="form-control" ></textarea>
<br/>
</div>
</div id="jwks-uri">
<label>JWKS URI</label>
<input type="text" class="form-control" placeholder="JWKS URI" name="jwks-uri" autocomplete="on">
<br/>
</div>
</div id="jwks-inline">
<label>JWKS Inline</label>
<textarea class="form-control" ></textarea>
</div>The final two of three DIV element tags are actually end tags when they were intended to be start tags. The browser handled this by eliding the end tags entirely.
The DOM effectively had this instead:
<div id="client-secret">
<label>Client Secret</label>
<textarea class="form-control" ></textarea>
<br/>
</div>
<label>JWKS URI</label>
<input type="text" class="form-control" placeholder="JWKS URI" name="jwks-uri" autocomplete="on">
<br/>
<label>JWKS Inline</label>
<textarea class="form-control" ></textarea>Now consider how the syntax is highlighted:

I noticed this later when I used jquery to select the elements with affected ids - there were no div elements at all with the ids I expected, but the label and input elements were present. So, the page looked correct, but I couldn't select the entered values using jquery because the needed div with the ID wasn't there.
So, please improve the HTML syntax highlighter to visually "complain" about end tags that have attributes. This is not valid HTML and should never be allowed.