From ddd60015202cbb7e89f36ec8ef326da7cca53acf Mon Sep 17 00:00:00 2001
From: Georgii Dolzhykov <thorn.mailbox@gmail.com>
Date: Mon, 11 May 2020 14:13:40 +0300
Subject: [PATCH] Treat <select> and <optgroup> as inline-block for whitespace
 sensitivity (#8275)

---
 changelog_unreleased/html/pr-8275.md          |  28 ++++
 src/language-html/constants.evaluate.js       |   2 +
 .../tags/__snapshots__/jsfmt.spec.js.snap     | 150 ++++++++++++++++++
 tests/html/tags/option.html                   |   3 +
 4 files changed, 183 insertions(+)
 create mode 100644 changelog_unreleased/html/pr-8275.md
 create mode 100644 tests/html/tags/option.html

diff --git a/changelog_unreleased/html/pr-8275.md b/changelog_unreleased/html/pr-8275.md
new file mode 100644
index 000000000..0d69e3eb3
--- /dev/null
+++ b/changelog_unreleased/html/pr-8275.md
@@ -0,0 +1,28 @@
+#### Treat `<select>` and `<optgroup>` as inline-block ([#8275](https://github.com/prettier/prettier/pull/8275) by [@thorn0](https://github.com/thorn0))
+
+Now Prettier knows that it's safe to add whitespace inside `select` and `optgroup` tags.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<select><option>Blue</option><option>Green</option><optgroup label="Darker"><option>Dark Blue</option><option>Dark Green</option></optgroup></select>
+
+<!-- Prettier stable -->
+<select
+  ><option>Blue</option
+  ><option>Green</option
+  ><optgroup label="Darker"
+    ><option>Dark Blue</option><option>Dark Green</option></optgroup
+  ></select
+>
+
+<!-- Prettier master -->
+<select>
+  <option>Blue</option>
+  <option>Green</option>
+  <optgroup label="Darker">
+    <option>Dark Blue</option>
+    <option>Dark Green</option>
+  </optgroup>
+</select>
+```
diff --git a/src/language-html/constants.evaluate.js b/src/language-html/constants.evaluate.js
index 62eaafcb6..f93bbf605 100644
--- a/src/language-html/constants.evaluate.js
+++ b/src/language-html/constants.evaluate.js
@@ -35,6 +35,8 @@ const CSS_DISPLAY_TAGS = {
   // there's no css display for these elements but they behave these ways
   video: "inline-block",
   audio: "inline-block",
+  select: "inline-block",
+  optgroup: "inline-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 d57b097f8..598ef8c07 100644
--- a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
@@ -719,6 +719,156 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`option.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "ignore"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<select><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><option>Blue</option><option>Green</option></datalist>
+
+=====================================output=====================================
+<select>
+  <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">
+  <option>Blue</option>
+  <option>Green</option>
+</datalist>
+
+================================================================================
+`;
+
+exports[`option.html - {"htmlWhitespaceSensitivity":"strict"} format 1`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "strict"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<select><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><option>Blue</option><option>Green</option></datalist>
+
+=====================================output=====================================
+<select
+  ><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"><option>Blue</option><option>Green</option></datalist>
+
+================================================================================
+`;
+
+exports[`option.html - {"printWidth":"Infinity"} format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: Infinity
+=====================================input======================================
+<select><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><option>Blue</option><option>Green</option></datalist>
+
+=====================================output=====================================
+<select>
+  <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">
+  <option>Blue</option>
+  <option>Green</option>
+</datalist>
+
+================================================================================
+`;
+
+exports[`option.html - {"printWidth":1} format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 1
+ | printWidth
+=====================================input======================================
+<select><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><option>Blue</option><option>Green</option></datalist>
+
+=====================================output=====================================
+<select>
+  <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"
+>
+  <option
+    >Blue</option
+  >
+  <option
+    >Green</option
+  >
+</datalist>
+
+================================================================================
+`;
+
+exports[`option.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<select><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><option>Blue</option><option>Green</option></datalist>
+
+=====================================output=====================================
+<select>
+  <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">
+  <option>Blue</option>
+  <option>Green</option>
+</datalist>
+
+================================================================================
+`;
+
 exports[`pre.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
 ====================================options=====================================
 htmlWhitespaceSensitivity: "ignore"
diff --git a/tests/html/tags/option.html b/tests/html/tags/option.html
new file mode 100644
index 000000000..1c308258c
--- /dev/null
+++ b/tests/html/tags/option.html
@@ -0,0 +1,3 @@
+<select><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><option>Blue</option><option>Green</option></datalist>