feat(parser/html): correctly parse void elements

crates/biome_html_parser/src/syntax/mod.rs

@@ -14,6 +14,12 @@ use biome_parser::Parser;
 
 const RECOVER_ATTRIBUTE_LIST: TokenSet<HtmlSyntaxKind> = token_set!(T![>], T![<], T![/]);
 
+/// These elements are effectively always self-closing. They should not have a closing tag (if they do, it should be a parsing error). They might not contain a `/` like in `<img />`.
+static VOID_ELEMENTS: &[&str] = &[
+    "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track",
+    "wbr",
+];
+
 pub(crate) fn parse_root(p: &mut HtmlParser) {
     let m = p.start();
 
@@ -54,6 +60,8 @@ fn parse_element(p: &mut HtmlParser) -> ParsedSyntax {
     let m = p.start();
 
     p.bump(T![<]);
+    let opening_tag_name = p.cur_text().to_string();
+    let should_be_self_closing = VOID_ELEMENTS.contains(&opening_tag_name.as_str());
     parse_literal(p).or_add_diagnostic(p, expected_element_name);
 
     AttributeList.parse_list(p);
@@ -63,10 +71,28 @@ fn parse_element(p: &mut HtmlParser) -> ParsedSyntax {
         p.expect(T![>]);
         Present(m.complete(p, HTML_SELF_CLOSING_ELEMENT))
     } else {
+        if should_be_self_closing {
+            if p.at(T![/]) {
+                p.bump(T![/]);
+            }
+            p.expect(T![>]);
+            return Present(m.complete(p, HTML_SELF_CLOSING_ELEMENT));
+        }
         p.expect_with_context(T![>], HtmlLexContext::ElementList);
         let opening = m.complete(p, HTML_OPENING_ELEMENT);
-        ElementList.parse_list(p);
-        parse_closing_element(p).or_add_diagnostic(p, expected_closing_tag);
+        loop {
+            ElementList.parse_list(p);
+            if let Some(mut closing) =
+                parse_closing_element(p).or_add_diagnostic(p, expected_closing_tag)
+            {
+                if !closing.text(p).contains(opening_tag_name.as_str()) {
+                    p.error(expected_matching_closing_tag(p, closing.range(p)).into_diagnostic(p));
+                    closing.change_to_bogus(p);
+                    continue;
+                }
+            }
+            break;
+        }
         let previous = opening.precede(p);
 
         Present(previous.complete(p, HTML_ELEMENT))
@@ -80,6 +106,10 @@ fn parse_closing_element(p: &mut HtmlParser) -> ParsedSyntax {
     let m = p.start();
     p.bump(T![<]);
     p.bump(T![/]);
+    let should_be_self_closing = VOID_ELEMENTS.contains(&p.cur_text());
+    if should_be_self_closing {
+        p.error(void_element_should_not_have_closing_tag(p, p.cur_range()).into_diagnostic(p));
+    }
     let _name = parse_literal(p);
     p.bump(T![>]);
     Present(m.complete(p, HTML_CLOSING_ELEMENT))

crates/biome_html_parser/src/syntax/parse_error.rs

@@ -30,6 +30,10 @@ pub(crate) fn expected_closing_tag(p: &HtmlParser, range: TextRange) -> ParseDia
     expected_node("closing tag", range, p).into_diagnostic(p)
 }
 
+pub(crate) fn expected_matching_closing_tag(p: &HtmlParser, range: TextRange) -> ParseDiagnostic {
+    expected_node("matching closing tag", range, p).into_diagnostic(p)
+}
+
 /// The parser was encountered a tag that does not have a name.
 ///
 /// ```html
@@ -39,3 +43,16 @@ pub(crate) fn expected_closing_tag(p: &HtmlParser, range: TextRange) -> ParseDia
 pub(crate) fn expected_element_name(p: &HtmlParser, range: TextRange) -> ParseDiagnostic {
     expected_node("element name", range, p).into_diagnostic(p)
 }
+
+/// Void elements should not have a closing tag.
+///
+/// ```html
+/// <img></img>
+///      ^^^^^^ should not have a closing tag
+/// ```
+pub(crate) fn void_element_should_not_have_closing_tag(
+    _p: &HtmlParser,
+    range: TextRange,
+) -> ParseDiagnostic {
+    ParseDiagnostic::new("Void elements should not have a closing tag.", range)
+}

crates/biome_html_parser/tests/html_specs/error/element/br-with-end.html

@@ -0,0 +1 @@
+<span>foo<br>This text is inside br.</br>bar</span>

crates/biome_html_parser/tests/html_specs/error/element/br-with-end.html.snap

@@ -0,0 +1,164 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```html
+<span>foo<br>This text is inside br.</br>bar</span>
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    directive: missing (optional),
+    html: HtmlBogusElement {
+        items: [
+            HtmlOpeningElement {
+                l_angle_token: [email protected] "<" [] [],
+                name: HtmlName {
+                    value_token: [email protected] "span" [] [],
+                },
+                attributes: HtmlAttributeList [],
+                r_angle_token: [email protected] ">" [] [],
+            },
+            HtmlElementList [
+                HtmlContent {
+                    value_token: [email protected] "foo" [] [],
+                },
+                HtmlSelfClosingElement {
+                    l_angle_token: [email protected] "<" [] [],
+                    name: HtmlName {
+                        value_token: [email protected] "br" [] [],
+                    },
+                    attributes: HtmlAttributeList [],
+                    slash_token: missing (optional),
+                    r_angle_token: [email protected] ">" [] [],
+                },
+                HtmlContent {
+                    value_token: [email protected] "This" [] [Whitespace(" ")],
+                },
+                HtmlContent {
+                    value_token: [email protected] "text" [] [Whitespace(" ")],
+                },
+                HtmlContent {
+                    value_token: [email protected] "is" [] [Whitespace(" ")],
+                },
+                HtmlContent {
+                    value_token: [email protected] "inside" [] [Whitespace(" ")],
+                },
+                HtmlContent {
+                    value_token: [email protected] "br." [] [],
+                },
+            ],
+            HtmlBogusElement {
+                items: [
+                    [email protected] "<" [] [],
+                    [email protected] "/" [] [],
+                    HtmlName {
+                        value_token: [email protected] "br" [] [],
+                    },
+                    [email protected] ">" [] [],
+                ],
+            },
+            HtmlElementList [
+                HtmlContent {
+                    value_token: [email protected] "bar" [] [],
+                },
+            ],
+            HtmlClosingElement {
+                l_angle_token: [email protected] "<" [] [],
+                slash_token: [email protected] "/" [] [],
+                name: HtmlName {
+                    value_token: [email protected] "span" [] [],
+                },
+                r_angle_token: [email protected] ">" [] [],
+            },
+        ],
+    },
+    eof_token: [email protected] "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: [email protected]
+  0: (empty)
+  1: (empty)
+  2: [email protected]
+    0: [email protected]
+      0: [email protected] "<" [] []
+      1: [email protected]
+        0: [email protected] "span" [] []
+      2: [email protected]
+      3: [email protected] ">" [] []
+    1: [email protected]
+      0: [email protected]
+        0: [email protected] "foo" [] []
+      1: [email protected]
+        0: [email protected] "<" [] []
+        1: [email protected]
+          0: [email protected] "br" [] []
+        2: [email protected]
+        3: (empty)
+        4: [email protected] ">" [] []
+      2: [email protected]
+        0: [email protected] "This" [] [Whitespace(" ")]
+      3: [email protected]
+        0: [email protected] "text" [] [Whitespace(" ")]
+      4: [email protected]
+        0: [email protected] "is" [] [Whitespace(" ")]
+      5: [email protected]
+        0: [email protected] "inside" [] [Whitespace(" ")]
+      6: [email protected]
+        0: [email protected] "br." [] []
+    2: [email protected]
+      0: [email protected] "<" [] []
+      1: [email protected] "/" [] []
+      2: [email protected]
+        0: [email protected] "br" [] []
+      3: [email protected] ">" [] []
+    3: [email protected]
+      0: [email protected]
+        0: [email protected] "bar" [] []
+    4: [email protected]
+      0: [email protected] "<" [] []
+      1: [email protected] "/" [] []
+      2: [email protected]
+        0: [email protected] "span" [] []
+      3: [email protected] ">" [] []
+  3: [email protected] "" [Newline("\n")] []
+
+```
+
+## Diagnostics
+
+```
+br-with-end.html:1:39 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Void elements should not have a closing tag.
+
+  > 1 │ <span>foo<br>This text is inside br.</br>bar</span>
+      │                                       ^^
+    2 │ 
+
+br-with-end.html:1:37 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Expected a matching closing tag but instead found '</br>'.
+
+  > 1 │ <span>foo<br>This text is inside br.</br>bar</span>
+      │                                     ^^^^^
+    2 │ 
+
+  i Expected a matching closing tag here.
+
+  > 1 │ <span>foo<br>This text is inside br.</br>bar</span>
+      │                                     ^^^^^
+    2 │ 
+
+```

crates/biome_html_parser/tests/html_specs/ok/no-end-tags/br-in-span.html

@@ -0,0 +1 @@
+<span>foo<br>bar</span>