From 63a37a2a1d48aa0df8fca65b88b300bf05f81a11 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Wed, 24 Jun 2020 18:33:13 +0800
Subject: [PATCH] Treat <option> and <optgroup> as block (#8620)

---
 changelog_unreleased/html/pr-8275.md          |  4 +-
 src/language-html/constants.evaluate.js       |  3 +-
 .../tags/__snapshots__/jsfmt.spec.js.snap     | 57 +++++++++++--------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/changelog_unreleased/html/pr-8275.md b/changelog_unreleased/html/pr-8275.md
index 0d69e3eb3..d498b177b 100644
--- a/changelog_unreleased/html/pr-8275.md
+++ b/changelog_unreleased/html/pr-8275.md
@@ -1,6 +1,6 @@
-#### Treat `<select>` and `<optgroup>` as inline-block ([#8275](https://github.com/prettier/prettier/pull/8275) by [@thorn0](https://github.com/thorn0))
+#### Treat `<select>` as inline-block and `<optgroup>`/`<option>` as block ([#8275](https://github.com/prettier/prettier/pull/8275) by [@thorn0](https://github.com/thorn0), [#8620](https://github.com/prettier/prettier/pull/8620) by [@fisker](https://github.com/fisker))
 
-Now Prettier knows that it's safe to add whitespace inside `select` and `optgroup` tags.
+Now Prettier knows that it's safe to add whitespace inside `select`, `option` and `optgroup` tags.
 
 <!-- prettier-ignore -->
 ```html
diff --git a/src/language-html/constants.evaluate.js b/src/language-html/constants.evaluate.js
index f93bbf605..4fc49df6e 100644
--- a/src/language-html/constants.evaluate.js
+++ b/src/language-html/constants.evaluate.js
@@ -36,7 +36,8 @@ const CSS_DISPLAY_TAGS = {
   video: "inline-block",
   audio: "inline-block",
   select: "inline-block",
-  optgroup: "inline-block",
+  option: "block",
+  optgroup: "block",
 };
 const CSS_DISPLAY_DEFAULT = "inline";
 const CSS_WHITE_SPACE_TAGS = getCssStyleTags("white-space");
diff --git a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
index 598ef8c07..e21e663f0 100644
--- a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
@@ -784,9 +784,12 @@ printWidth: Infinity
 
 =====================================output=====================================
 <select>
-  <option>Blue</option
-  ><option>Green</option
-  ><optgroup label="Darker"><option>Dark Blue</option><option>Dark Green</option></optgroup>
+  <option>Blue</option>
+  <option>Green</option>
+  <optgroup label="Darker">
+    <option>Dark Blue</option>
+    <option>Dark Green</option>
+  </optgroup>
 </select>
 <input list="colors" />
 <datalist id="colors">
@@ -809,20 +812,23 @@ printWidth: 1
 
 =====================================output=====================================
 <select>
-  <option
-    >Blue</option
-  ><option
-    >Green</option
-  ><optgroup
+  <option>
+    Blue
+  </option>
+  <option>
+    Green
+  </option>
+  <optgroup
     label="Darker"
   >
-    <option
-      >Dark
-      Blue</option
-    ><option
-      >Dark
-      Green</option
-    >
+    <option>
+      Dark
+      Blue
+    </option>
+    <option>
+      Dark
+      Green
+    </option>
   </optgroup>
 </select>
 <input
@@ -831,12 +837,12 @@ printWidth: 1
 <datalist
   id="colors"
 >
-  <option
-    >Blue</option
-  >
-  <option
-    >Green</option
-  >
+  <option>
+    Blue
+  </option>
+  <option>
+    Green
+  </option>
 </datalist>
 
 ================================================================================
@@ -854,10 +860,11 @@ printWidth: 80
 
 =====================================output=====================================
 <select>
-  <option>Blue</option
-  ><option>Green</option
-  ><optgroup label="Darker">
-    <option>Dark Blue</option><option>Dark Green</option>
+  <option>Blue</option>
+  <option>Green</option>
+  <optgroup label="Darker">
+    <option>Dark Blue</option>
+    <option>Dark Green</option>
   </optgroup>
 </select>
 <input list="colors" />