From 27bf64f6ce23679f37d010fd47da81a6c379f2eb Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 20 Sep 2018 00:04:43 +0800
Subject: [PATCH] feat(html): self-closing for void tags (#5116)

XHTML compatibility.
---
 src/language-html/printer-htmlparser2.js      | 13 +++----
 .../__snapshots__/jsfmt.spec.js.snap          | 18 +++++-----
 .../__snapshots__/jsfmt.spec.js.snap          | 34 +++++++++----------
 .../__snapshots__/jsfmt.spec.js.snap          |  4 +--
 .../__snapshots__/jsfmt.spec.js.snap          | 18 +++++-----
 .../__snapshots__/jsfmt.spec.js.snap          |  2 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 18 +++++-----
 7 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 2b6232658..4ab42327b 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -188,7 +188,7 @@ function printOpeningTag(path, print, isVoid) {
 
   // Don't break self-closing elements with no attributes
   if (isVoid && !n.attributes.length) {
-    return concat(["<", n.name, ">"]);
+    return concat(["<", n.name, " />"]);
   }
 
   // Don't break up opening elements with a single long text attribute
@@ -202,13 +202,10 @@ function printOpeningTag(path, print, isVoid) {
     concat([
       "<",
       n.name,
-      concat([
-        indent(
-          concat(path.map(attr => concat([line, print(attr)]), "attributes"))
-        ),
-        softline
-      ]),
-      ">"
+      indent(
+        concat(path.map(attr => concat([line, print(attr)]), "attributes"))
+      ),
+      isVoid ? concat([line, "/>"]) : concat([softline, ">"])
     ])
   );
 }
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 030640caf..9c99b6d46 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -62,9 +62,9 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
 
 </article>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<input name="address" maxlength="200">
-<input name="address" maxlength="200">
-<input name="address" maxlength="200">
+<input name="address" maxlength="200" />
+<input name="address" maxlength="200" />
+<input name="address" maxlength="200" />
 <div class="foo"></div>
 <div class="foo"></div>
 <div class="foo bar"></div>
@@ -77,7 +77,7 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
   content="The Mozilla Developer Network (MDN) provides
 information about Open Web technologies including HTML, CSS, and APIs for both Web sites
 and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
->
+/>
 <div attribute>String</div>
 <div attribute="">String</div>
 <div attribute="">String</div>
@@ -187,9 +187,9 @@ exports[`boolean.html - parse5-verify 1`] = `
 <button type="submit" disabled="hahah">
   This is valid. This will be disabled.
 </button>
-<input type="checkbox" checked disabled name="cheese">
-<input type="checkbox" checked="checked" disabled="disabled" name="cheese">
-<input type="checkbox" checked disabled name="cheese">
+<input type="checkbox" checked disabled name="cheese" />
+<input type="checkbox" checked="checked" disabled="disabled" name="cheese" />
+<input type="checkbox" checked disabled name="cheese" />
 <div lang=""></div>
 
 `;
@@ -197,14 +197,14 @@ exports[`boolean.html - parse5-verify 1`] = `
 exports[`dobule-quotes.html - parse5-verify 1`] = `
 <img src="test.png" alt="John 'ShotGun' Nelson">
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<img src="test.png" alt="John 'ShotGun' Nelson">
+<img src="test.png" alt="John 'ShotGun' Nelson" />
 
 `;
 
 exports[`single-quotes.html - parse5-verify 1`] = `
 <img src="test.png" alt='John "ShotGun" Nelson'>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<img src="test.png" alt="John &quot;ShotGun&quot; Nelson">
+<img src="test.png" alt="John &quot;ShotGun&quot; Nelson" />
 
 `;
 
diff --git a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
index 74d18c7b8..31cd3eeda 100644
--- a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
@@ -106,7 +106,7 @@ exports[`form.html - parse5-verify 1`] = `
       id="exampleInputEmail1"
       aria-describedby="emailHelp"
       placeholder="Enter email"
-    >
+    />
     <small id="emailHelp" class="form-text text-muted">
       We'll never share your email with anyone else.
     </small>
@@ -118,7 +118,7 @@ exports[`form.html - parse5-verify 1`] = `
       class="form-control"
       id="exampleInputPassword1"
       placeholder="Password"
-    >
+    />
   </div>
   <div class="form-group">
     <label for="exampleSelect1">Example select</label>
@@ -151,7 +151,7 @@ exports[`form.html - parse5-verify 1`] = `
       class="form-control-file"
       id="exampleInputFile"
       aria-describedby="fileHelp"
-    >
+    />
     <small id="fileHelp" class="form-text text-muted">
       This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
     </small>
@@ -167,7 +167,7 @@ exports[`form.html - parse5-verify 1`] = `
           id="optionsRadios1"
           value="option1"
           checked
-        >
+        />
         Option one is this and that—be sure to include why it's great
       </label>
     </div>
@@ -179,7 +179,7 @@ exports[`form.html - parse5-verify 1`] = `
           name="optionsRadios"
           id="optionsRadios2"
           value="option2"
-        >
+        />
         Option two can be something else and selecting it will deselect option one
       </label>
     </div>
@@ -192,14 +192,14 @@ exports[`form.html - parse5-verify 1`] = `
           id="optionsRadios3"
           value="option3"
           disabled
-        >
+        />
         Option three is disabled
       </label>
     </div>
   </fieldset>
   <div class="form-check">
     <label class="form-check-label">
-      <input type="checkbox" class="form-check-input">
+      <input type="checkbox" class="form-check-input" />
       Check me out
     </label>
   </div>
@@ -230,8 +230,8 @@ exports[`hello-world.html - parse5-verify 1`] = `
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Document</title>
   </head>
   <body>
@@ -319,20 +319,20 @@ exports[`html5-boilerplate.html - parse5-verify 1`] = `
 <html class="no-js" lang="">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title></title>
-    <meta name="description" content="">
+    <meta name="description" content="" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    >
+    />
 
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="apple-touch-icon" href="icon.png">
+    <link rel="manifest" href="site.webmanifest" />
+    <link rel="apple-touch-icon" href="icon.png" />
     <!-- Place favicon.ico in the root directory -->
 
-    <link rel="stylesheet" href="css/normalize.css">
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/normalize.css" />
+    <link rel="stylesheet" href="css/main.css" />
   </head>
 
   <body>
@@ -406,7 +406,7 @@ exports[`void-elements.html - parse5-verify 1`] = `
 <html>
   <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="code-guide.css">
+    <link rel="stylesheet" href="code-guide.css" />
   </head>
   <body></body>
 </html>
diff --git a/tests/html_case/__snapshots__/jsfmt.spec.js.snap b/tests/html_case/__snapshots__/jsfmt.spec.js.snap
index e170300a9..622f08ada 100644
--- a/tests/html_case/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_case/__snapshots__/jsfmt.spec.js.snap
@@ -23,11 +23,11 @@ exports[`case.html - parse5-verify 1`] = `
   <head>
     <meta charset="utf-8">
     <title>My tITlE</title>
-    <meta name="description" content="My CoNtEnT">
+    <meta name="description" content="My CoNtEnT" />
   </head>
   <body>
     <p>
-      Hello world!<br>
+      Hello world!<br />
       This is HTML5 Boilerplate.
     </p>
     <script>
diff --git a/tests/html_doctype_declarations/__snapshots__/jsfmt.spec.js.snap b/tests/html_doctype_declarations/__snapshots__/jsfmt.spec.js.snap
index 5438d2201..b95093315 100644
--- a/tests/html_doctype_declarations/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_doctype_declarations/__snapshots__/jsfmt.spec.js.snap
@@ -130,13 +130,13 @@ exports[`xhtml1.1.html - parse5-verify 1`] = `
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
+    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
     <title>XHTML markup</title>
   </head>
   <body style="background-color:#ffffcc; color:#008800">
-    <br>
+    <br />
     <h2 align="center">Sample XHTML page</h2>
-    <br>
+    <br />
     <div align="center">
       <img
         src="../images/bee3.jpg"
@@ -144,19 +144,19 @@ exports[`xhtml1.1.html - parse5-verify 1`] = `
         height="250"
         alt="Beep"
         vspace="20"
-      >
+      />
     </div>
     <p align="center" style="font-size:17px">
-      Bar Foo,<br>
-      Foo,<br>
-      Bar<br>
+      Bar Foo,<br />
+      Foo,<br />
+      Bar<br />
       Foo
     </p>
     <p align="center">
       <em>String</em>
     </p>
-    <br>
-    <hr>
+    <br />
+    <hr />
   </body>
 </html>
 
diff --git a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
index 50b0ff603..ef64f31d2 100644
--- a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
@@ -49,7 +49,7 @@ exports[`document.html - parse5-verify 1`] = `
 <html class="no-js" lang="en">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>Title</title>
   </head>
   <body>
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 1a6658c39..401cbb358 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -226,14 +226,14 @@ exports[`tags.html - parse5-verify 1`] = `
 
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<br>
-<br>
-<br>
-<br>
-<br attribute-a>
+<br />
+<br />
+<br />
+<br />
+<br attribute-a />
 <br
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
->
+/>
 <br attribute-a="value">
 <br attribute-a="value">
 <br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">
@@ -245,7 +245,7 @@ exports[`tags.html - parse5-verify 1`] = `
   attribute-d="value"
   attribute-e="value"
   attribute-f="value"
->
+/>
 <div>string</div>
 <div>
   very very very very very very very very very very very very very very very very long string
@@ -285,8 +285,8 @@ exports[`tags.html - parse5-verify 1`] = `
   very very very very very very very very very very very very very very very very long string
 </div>
 <video width="320" height="240" controls>
-  <source src="movie.mp4" type="video/mp4">
-  <source src="movie.ogg" type="video/ogg">
+  <source src="movie.mp4" type="video/mp4" />
+  <source src="movie.ogg" type="video/ogg" />
   Your browser does not support the video tag.
 </video>
 <div>