From 26740d54a5349174e7ea062b03772ac356c477f4 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Tue, 14 Jul 2020 22:02:32 +0800
Subject: [PATCH] Recognize known html tags (#8621)

---
 changelog_unreleased/html/pr-8621.md          |  47 +++
 src/language-html/constants.evaluate.js       |  11 +-
 src/language-html/utils.js                    |   1 +
 .../tags/__snapshots__/jsfmt.spec.js.snap     | 342 ++++++++++++++++++
 tests/html/tags/tags2.html                    |  11 +
 5 files changed, 411 insertions(+), 1 deletion(-)
 create mode 100644 changelog_unreleased/html/pr-8621.md
 create mode 100644 tests/html/tags/tags2.html

diff --git a/changelog_unreleased/html/pr-8621.md b/changelog_unreleased/html/pr-8621.md
new file mode 100644
index 000000000..0f3ac9a09
--- /dev/null
+++ b/changelog_unreleased/html/pr-8621.md
@@ -0,0 +1,47 @@
+#### Recognize known html tags ([#8621](https://github.com/prettier/prettier/pull/8621) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div>before<details><summary>summary long long long long </summary>details</details>after</div>
+<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
+<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>
+
+<!-- Prettier stable -->
+<div>
+  before<details><summary>summary long long long long </summary>details</details
+  >after
+</div>
+<div>
+  before<dialog open>dialog long long long long long long long long </dialog
+  >after
+</div>
+<div>
+  before<object data="horse.wav"
+    ><param name="autoplay" value="true" /><param
+      name="autoplay"
+      value="true" /></object
+  >after
+</div>
+
+<!-- Prettier master -->
+<div>
+  before
+  <details>
+    <summary>summary long long long long</summary>
+    details
+  </details>
+  after
+</div>
+<div>
+  before
+  <dialog open>dialog long long long long long long long long</dialog>
+  after
+</div>
+<div>
+  before<object data="horse.wav">
+    <param name="autoplay" value="true" />
+    <param name="autoplay" value="true" /></object
+  >after
+</div>
+```
diff --git a/src/language-html/constants.evaluate.js b/src/language-html/constants.evaluate.js
index 4fc49df6e..3ffadd67b 100644
--- a/src/language-html/constants.evaluate.js
+++ b/src/language-html/constants.evaluate.js
@@ -23,7 +23,6 @@ const CSS_DISPLAY_TAGS = {
   ...getCssStyleTags("display"),
 
   // TODO: send PR to upstream
-
   button: "inline-block",
 
   // special cases for some css display=none elements
@@ -31,8 +30,18 @@ const CSS_DISPLAY_TAGS = {
   source: "block",
   track: "block",
   script: "block",
+  param: "block",
+
+  // `noscript` is inline
+  // noscript: "inline",
 
   // there's no css display for these elements but they behave these ways
+  details: "block",
+  summary: "block",
+  dialog: "block",
+  meter: "inline-block",
+  progress: "inline-block",
+  object: "inline-block",
   video: "inline-block",
   audio: "inline-block",
   select: "inline-block",
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index bbba9923f..19ae1285f 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -269,6 +269,7 @@ function forceNextEmptyLine(node) {
   return (
     isFrontMatterNode(node) ||
     (node.next &&
+      node.sourceSpan.end &&
       node.sourceSpan.end.line + 1 < node.next.sourceSpan.start.line)
   );
 }
diff --git a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
index 2716a14bb..6d2f7a0eb 100644
--- a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
@@ -3723,6 +3723,348 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`tags2.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "ignore"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>before<noscript>noscript long long long long long long long long</noscript>after</div>
+
+<div>before<details><summary>summary long long long long </summary>details</details>after</div>
+
+<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
+
+<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>
+
+<div>before<meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>after</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+=====================================output=====================================
+<div>
+  before
+  <noscript>noscript long long long long long long long long</noscript>
+  after
+</div>
+
+<div>
+  before
+  <details>
+    <summary>summary long long long long</summary>
+    details
+  </details>
+  after
+</div>
+
+<div>
+  before
+  <dialog open>dialog long long long long long long long long</dialog>
+  after
+</div>
+
+<div>
+  before
+  <object data="horse.wav">
+    <param name="autoplay" value="true" />
+    <param name="autoplay" value="true" />
+  </object>
+  after
+</div>
+
+<div>
+  before
+  <meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>
+  after
+</div>
+
+<div>
+  before
+  <progress value=".5" max="1"></progress>
+  after
+</div>
+
+================================================================================
+`;
+
+exports[`tags2.html - {"htmlWhitespaceSensitivity":"strict"} format 1`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "strict"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>before<noscript>noscript long long long long long long long long</noscript>after</div>
+
+<div>before<details><summary>summary long long long long </summary>details</details>after</div>
+
+<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
+
+<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>
+
+<div>before<meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>after</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+=====================================output=====================================
+<div
+  >before<noscript>noscript long long long long long long long long</noscript
+  >after</div
+>
+
+<div
+  >before<details
+    ><summary>summary long long long long </summary>details</details
+  >after</div
+>
+
+<div
+  >before<dialog open>dialog long long long long long long long long </dialog
+  >after</div
+>
+
+<div
+  >before<object data="horse.wav"
+    ><param name="autoplay" value="true" /><param
+      name="autoplay"
+      value="true" /></object
+  >after</div
+>
+
+<div
+  >before<meter
+    min="0"
+    max="1"
+    low=".4"
+    high=".7"
+    optimum=".5"
+    value=".2"
+  ></meter
+  >after</div
+>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+================================================================================
+`;
+
+exports[`tags2.html - {"printWidth":"Infinity"} format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: Infinity
+=====================================input======================================
+<div>before<noscript>noscript long long long long long long long long</noscript>after</div>
+
+<div>before<details><summary>summary long long long long </summary>details</details>after</div>
+
+<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
+
+<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>
+
+<div>before<meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>after</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+=====================================output=====================================
+<div>before<noscript>noscript long long long long long long long long</noscript>after</div>
+
+<div>
+  before
+  <details>
+    <summary>summary long long long long</summary>
+    details
+  </details>
+  after
+</div>
+
+<div>
+  before
+  <dialog open>dialog long long long long long long long long</dialog>
+  after
+</div>
+
+<div>
+  before<object data="horse.wav">
+    <param name="autoplay" value="true" />
+    <param name="autoplay" value="true" /></object
+  >after
+</div>
+
+<div>before<meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>after</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+================================================================================
+`;
+
+exports[`tags2.html - {"printWidth":1} format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 1
+ | printWidth
+=====================================input======================================
+<div>before<noscript>noscript long long long long long long long long</noscript>after</div>
+
+<div>before<details><summary>summary long long long long </summary>details</details>after</div>
+
+<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
+
+<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>
+
+<div>before<meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>after</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+=====================================output=====================================
+<div>
+  before<noscript
+    >noscript
+    long
+    long
+    long
+    long
+    long
+    long
+    long
+    long</noscript
+  >after
+</div>
+
+<div>
+  before
+  <details>
+    <summary>
+      summary
+      long
+      long
+      long
+      long
+    </summary>
+    details
+  </details>
+  after
+</div>
+
+<div>
+  before
+  <dialog
+    open
+  >
+    dialog
+    long
+    long
+    long
+    long
+    long
+    long
+    long
+    long
+  </dialog>
+  after
+</div>
+
+<div>
+  before<object
+    data="horse.wav"
+  >
+    <param
+      name="autoplay"
+      value="true"
+    />
+    <param
+      name="autoplay"
+      value="true"
+    /></object
+  >after
+</div>
+
+<div>
+  before<meter
+    min="0"
+    max="1"
+    low=".4"
+    high=".7"
+    optimum=".5"
+    value=".2"
+  ></meter
+  >after
+</div>
+
+<div>
+  before<progress
+    value=".5"
+    max="1"
+  ></progress
+  >after
+</div>
+
+================================================================================
+`;
+
+exports[`tags2.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>before<noscript>noscript long long long long long long long long</noscript>after</div>
+
+<div>before<details><summary>summary long long long long </summary>details</details>after</div>
+
+<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
+
+<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>
+
+<div>before<meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>after</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+=====================================output=====================================
+<div>
+  before<noscript>noscript long long long long long long long long</noscript
+  >after
+</div>
+
+<div>
+  before
+  <details>
+    <summary>summary long long long long</summary>
+    details
+  </details>
+  after
+</div>
+
+<div>
+  before
+  <dialog open>dialog long long long long long long long long</dialog>
+  after
+</div>
+
+<div>
+  before<object data="horse.wav">
+    <param name="autoplay" value="true" />
+    <param name="autoplay" value="true" /></object
+  >after
+</div>
+
+<div>
+  before<meter
+    min="0"
+    max="1"
+    low=".4"
+    high=".7"
+    optimum=".5"
+    value=".2"
+  ></meter
+  >after
+</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>
+
+================================================================================
+`;
+
 exports[`textarea.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
 ====================================options=====================================
 htmlWhitespaceSensitivity: "ignore"
diff --git a/tests/html/tags/tags2.html b/tests/html/tags/tags2.html
new file mode 100644
index 000000000..f9cc62d91
--- /dev/null
+++ b/tests/html/tags/tags2.html
@@ -0,0 +1,11 @@
+<div>before<noscript>noscript long long long long long long long long</noscript>after</div>
+
+<div>before<details><summary>summary long long long long </summary>details</details>after</div>
+
+<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
+
+<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>
+
+<div>before<meter min="0" max="1" low=".4" high=".7" optimum=".5" value=".2"></meter>after</div>
+
+<div>before<progress value=".5" max="1"></progress>after</div>