From d97fe0a1e0a2a3be17214f4d7dec39fb365b8125 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 11 Dec 2018 12:43:53 +0800
Subject: [PATCH] feat(html): preserve surrounding linebreaks (#5596)

---
 src/language-html/utils.js                    |  23 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 201 +++++++++++++-----
 .../__snapshots__/jsfmt.spec.js.snap          |   3 +-
 .../html_svg/__snapshots__/jsfmt.spec.js.snap |   8 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 150 ++++++++++---
 tests/html_tags/tags.html                     |   5 +
 .../html_vue/__snapshots__/jsfmt.spec.js.snap |  15 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  44 ++++
 .../surrounding-linebreak.html                |  17 ++
 9 files changed, 366 insertions(+), 100 deletions(-)
 create mode 100644 tests/html_whitespace/surrounding-linebreak.html

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index fe1b6d31..5b263ece 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -273,7 +273,12 @@ function forceBreakContent(node) {
     (node.type === "element" &&
       node.children.length !== 0 &&
       (["body", "template", "script", "style"].indexOf(node.name) !== -1 ||
-        node.children.some(child => hasNonTextChild(child))))
+        node.children.some(child => hasNonTextChild(child)))) ||
+    (node.firstChild &&
+      node.firstChild === node.lastChild &&
+      (hasLeadingLineBreak(node.firstChild) &&
+        (!node.lastChild.isTrailingSpaceSensitive ||
+          hasTrailingLineBreak(node.lastChild))))
   );
 }
 
@@ -291,7 +296,7 @@ function preferHardlineAsLeadingSpaces(node) {
   return (
     preferHardlineAsSurroundingSpaces(node) ||
     (node.prev && preferHardlineAsTrailingSpaces(node.prev)) ||
-    isCustomElementWithSurroundingLineBreak(node)
+    hasSurroundingLineBreak(node)
   );
 }
 
@@ -299,19 +304,7 @@ function preferHardlineAsTrailingSpaces(node) {
   return (
     preferHardlineAsSurroundingSpaces(node) ||
     (node.type === "element" && node.fullName === "br") ||
-    isCustomElementWithSurroundingLineBreak(node)
-  );
-}
-
-function isCustomElementWithSurroundingLineBreak(node) {
-  return isCustomElement(node) && hasSurroundingLineBreak(node);
-}
-
-function isCustomElement(node) {
-  return (
-    node.type === "element" &&
-    !node.namespace &&
-    (node.name.includes("-") || /[A-Z]/.test(node.name[0]))
+    hasSurroundingLineBreak(node)
   );
 }
 
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index de9d3daa..2bfac28a 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -3458,7 +3458,10 @@ can be found in the LICENSE file at http://angular.io/license
 
 <p>My current hero is {{ currentHero.name }}</p>
 
-<h3>{{ title }} <img src="{{ heroImageUrl }}" style="height:30px" /></h3>
+<h3>
+  {{ title }}
+  <img src="{{ heroImageUrl }}" style="height:30px" />
+</h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
 <p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
@@ -3476,7 +3479,8 @@ can be found in the LICENSE file at http://angular.io/license
   [hidden]="isUnchanged")
 </p>
 <div class="context">
-  {{ title }} <span [hidden]="isUnchanged">changed</span>
+  {{ title }}
+  <span [hidden]="isUnchanged">changed</span>
 </div>
 
 <p>Template input variable expression context (let hero)</p>
@@ -3487,7 +3491,8 @@ can be found in the LICENSE file at http://angular.io/license
 
 <p>Template reference variable expression context (#heroInput)</p>
 <div (keyup)="(0)" class="context">
-  Type something: <input #heroInput /> {{ heroInput.value }}
+  Type something:
+  <input #heroInput /> {{ heroInput.value }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3496,10 +3501,14 @@ can be found in the LICENSE file at http://angular.io/license
 <h2 id="statement-context">Statement context</h2>
 
 <p>Component statement context ( (click)="onSave() )</p>
-<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
 
 <p>Template $event statement context</p>
-<div class="context"><button (click)="onSave($event)">Save</button></div>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
 
 <p>Template input variable statement context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
@@ -3523,7 +3532,9 @@ can be found in the LICENSE file at http://angular.io/license
 <!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
 <!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
 <div class="special">Mental Model</div>
-<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />
+<img src="assets/images/hero.png" />
+<button disabled>Save</button>
+<br /><br />
 
 <div>
   <!-- Normal HTML -->
@@ -3549,17 +3560,25 @@ can be found in the LICENSE file at http://angular.io/license
 <button (click)="onSave()">Save</button>
 <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
 <div (myClick)="clicked = $event" clickable>click me</div>
-{{ clicked }} <br /><br />
-
-<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
+{{ clicked }}
 <br /><br />
 
-<button [attr.aria-label]="help">help</button> <br /><br />
+<div>
+  Hero Name:
+  <input [(ngModel)]="name" />
+  {{ name }}
+</div>
+<br /><br />
+
+<button [attr.aria-label]="help">help</button>
+<br /><br />
 
 <div [class.special]="isSpecial">Special</div>
 <br /><br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">
+  button
+</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -3571,7 +3590,8 @@ can be found in the LICENSE file at http://angular.io/license
 
 <br /><br />
 
-<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
+<img [src]="iconUrl" />
+<img bind-src="heroImageUrl" />
 <img [attr.src]="villainImageUrl" />
 
 <a class="to-toc" href="#toc">top</a>
@@ -3580,8 +3600,10 @@ can be found in the LICENSE file at http://angular.io/license
 <hr />
 <h2 id="buttons">Buttons</h2>
 
-<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
-<button disabled="false">Still disabled</button> <br /><br />
+<button>Enabled (but does nothing)</button>
+<button disabled>Disabled</button>
+<button disabled="false">Still disabled</button>
+<br /><br />
 <button disabled>disabled by attribute</button>
 <button [disabled]="isUnchanged">disabled by property binding</button>
 <br /><br />
@@ -3604,7 +3626,9 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- ERROR: HeroDetailComponent.hero expects a
      Hero object, not the string "currentHero" -->
-<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
+<div *ngIf="false">
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+</div>
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
 <p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
@@ -3769,14 +3793,20 @@ can be found in the LICENSE file at http://angular.io/license
   [value]="currentHero.name"
   (input)="currentHero.name = $event.target.value"
 />
-without NgModel <br />
-<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
-<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
+without NgModel
+<br />
+<input [(ngModel)]="currentHero.name" />
+[(ngModel)]
+<br />
+<input bindon-ngModel="currentHero.name" />
+bindon-ngModel
+<br />
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="currentHero.name = $event"
 />
-(ngModelChange)="...name=$event" <br />
+(ngModelChange)="...name=$event"
+<br />
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="setUppercaseName($event)"
@@ -3804,7 +3834,8 @@ without NgModel <br />
     [value]="!isUnchanged"
     (change)="isUnchanged = !isUnchanged"
 /></label>
-| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
+|
+<label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
 <button (click)="setCurrentClasses()">Refresh currentClasses</button>
 <br /><br />
 <div [ngClass]="currentClasses">
@@ -3840,7 +3871,8 @@ without NgModel <br />
 <label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
 <label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
 <label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
-<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
+<button (click)="setCurrentStyles()">Refresh currentStyles</button>
+<br /><br />
 <div [ngStyle]="currentStyles">
   This div should be {{ canSave ? "italic" : "plain" }},
   {{ isUnchanged ? "normal weight" : "bold" }} and,
@@ -4033,7 +4065,8 @@ without NgModel <br />
 <hr />
 <h2 id="inputs-and-outputs">Inputs and Outputs</h2>
 
-<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
+<img [src]="iconUrl" />
+<button (click)="onSave()">Save</button>
 
 <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
 </app-hero-detail>
@@ -4050,7 +4083,10 @@ without NgModel <br />
 <div>Title through uppercase pipe: {{ title | uppercase }}</div>
 
 <!-- Pipe chaining: convert title to uppercase, then to lowercase -->
-<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
+<div>
+  Title through a pipe chain:
+  {{ title | uppercase | lowercase }}
+</div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
 <div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
@@ -4160,7 +4196,9 @@ can be found in the LICENSE file at http://angular.io/license
     </div>
     <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
   </form>
-  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
+  <div [hidden]="!heroForm.form.valid">
+    {{ submitMessage }}
+  </div>
 </div>
 
 <!-- 
@@ -4949,7 +4987,10 @@ can be found in the LICENSE file at http://angular.io/license
 
 <p>My current hero is {{ currentHero.name }}</p>
 
-<h3>{{ title }} <img src="{{ heroImageUrl }}" style="height:30px" /></h3>
+<h3>
+  {{ title }}
+  <img src="{{ heroImageUrl }}" style="height:30px" />
+</h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
 <p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
@@ -4967,7 +5008,8 @@ can be found in the LICENSE file at http://angular.io/license
   [hidden]="isUnchanged")
 </p>
 <div class="context">
-  {{ title }} <span [hidden]="isUnchanged">changed</span>
+  {{ title }}
+  <span [hidden]="isUnchanged">changed</span>
 </div>
 
 <p>Template input variable expression context (let hero)</p>
@@ -4978,7 +5020,8 @@ can be found in the LICENSE file at http://angular.io/license
 
 <p>Template reference variable expression context (#heroInput)</p>
 <div (keyup)="(0)" class="context">
-  Type something: <input #heroInput /> {{ heroInput.value }}
+  Type something:
+  <input #heroInput /> {{ heroInput.value }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -4987,10 +5030,14 @@ can be found in the LICENSE file at http://angular.io/license
 <h2 id="statement-context">Statement context</h2>
 
 <p>Component statement context ( (click)="onSave() )</p>
-<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
 
 <p>Template $event statement context</p>
-<div class="context"><button (click)="onSave($event)">Save</button></div>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
 
 <p>Template input variable statement context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
@@ -5014,7 +5061,9 @@ can be found in the LICENSE file at http://angular.io/license
 <!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
 <!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
 <div class="special">Mental Model</div>
-<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />
+<img src="assets/images/hero.png" />
+<button disabled>Save</button>
+<br /><br />
 
 <div>
   <!-- Normal HTML -->
@@ -5040,17 +5089,25 @@ can be found in the LICENSE file at http://angular.io/license
 <button (click)="onSave()">Save</button>
 <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
 <div (myClick)="clicked = $event" clickable>click me</div>
-{{ clicked }} <br /><br />
-
-<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
+{{ clicked }}
 <br /><br />
 
-<button [attr.aria-label]="help">help</button> <br /><br />
+<div>
+  Hero Name:
+  <input [(ngModel)]="name" />
+  {{ name }}
+</div>
+<br /><br />
+
+<button [attr.aria-label]="help">help</button>
+<br /><br />
 
 <div [class.special]="isSpecial">Special</div>
 <br /><br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">
+  button
+</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -5062,7 +5119,8 @@ can be found in the LICENSE file at http://angular.io/license
 
 <br /><br />
 
-<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
+<img [src]="iconUrl" />
+<img bind-src="heroImageUrl" />
 <img [attr.src]="villainImageUrl" />
 
 <a class="to-toc" href="#toc">top</a>
@@ -5071,8 +5129,10 @@ can be found in the LICENSE file at http://angular.io/license
 <hr />
 <h2 id="buttons">Buttons</h2>
 
-<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
-<button disabled="false">Still disabled</button> <br /><br />
+<button>Enabled (but does nothing)</button>
+<button disabled>Disabled</button>
+<button disabled="false">Still disabled</button>
+<br /><br />
 <button disabled>disabled by attribute</button>
 <button [disabled]="isUnchanged">disabled by property binding</button>
 <br /><br />
@@ -5095,7 +5155,9 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- ERROR: HeroDetailComponent.hero expects a
      Hero object, not the string "currentHero" -->
-<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
+<div *ngIf="false">
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+</div>
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
 <p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
@@ -5260,14 +5322,20 @@ can be found in the LICENSE file at http://angular.io/license
   [value]="currentHero.name"
   (input)="currentHero.name = $event.target.value"
 />
-without NgModel <br />
-<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
-<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
+without NgModel
+<br />
+<input [(ngModel)]="currentHero.name" />
+[(ngModel)]
+<br />
+<input bindon-ngModel="currentHero.name" />
+bindon-ngModel
+<br />
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="currentHero.name = $event"
 />
-(ngModelChange)="...name=$event" <br />
+(ngModelChange)="...name=$event"
+<br />
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="setUppercaseName($event)"
@@ -5295,7 +5363,8 @@ without NgModel <br />
     [value]="!isUnchanged"
     (change)="isUnchanged = !isUnchanged"
 /></label>
-| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
+|
+<label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
 <button (click)="setCurrentClasses()">Refresh currentClasses</button>
 <br /><br />
 <div [ngClass]="currentClasses">
@@ -5331,7 +5400,8 @@ without NgModel <br />
 <label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
 <label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
 <label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
-<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
+<button (click)="setCurrentStyles()">Refresh currentStyles</button>
+<br /><br />
 <div [ngStyle]="currentStyles">
   This div should be {{ canSave ? "italic" : "plain" }},
   {{ isUnchanged ? "normal weight" : "bold" }} and,
@@ -5524,7 +5594,8 @@ without NgModel <br />
 <hr />
 <h2 id="inputs-and-outputs">Inputs and Outputs</h2>
 
-<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
+<img [src]="iconUrl" />
+<button (click)="onSave()">Save</button>
 
 <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
 </app-hero-detail>
@@ -5541,7 +5612,10 @@ without NgModel <br />
 <div>Title through uppercase pipe: {{ title | uppercase }}</div>
 
 <!-- Pipe chaining: convert title to uppercase, then to lowercase -->
-<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
+<div>
+  Title through a pipe chain:
+  {{ title | uppercase | lowercase }}
+</div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
 <div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
@@ -5651,7 +5725,9 @@ can be found in the LICENSE file at http://angular.io/license
     </div>
     <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
   </form>
-  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
+  <div [hidden]="!heroForm.form.valid">
+    {{ submitMessage }}
+  </div>
 </div>
 
 <!-- 
@@ -9917,10 +9993,14 @@ can be found in the LICENSE file at http://angular.io/license
 <h2 id="statement-context">Statement context</h2>
 
 <p>Component statement context ( (click)="onSave() )</p>
-<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
 
 <p>Template $event statement context</p>
-<div class="context"><button (click)="onSave($event)">Save</button></div>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
 
 <p>Template input variable statement context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
@@ -9996,7 +10076,9 @@ can be found in the LICENSE file at http://angular.io/license
 <br />
 <br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">
+  button
+</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -10047,7 +10129,9 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- ERROR: HeroDetailComponent.hero expects a
      Hero object, not the string "currentHero" -->
-<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
+<div *ngIf="false">
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+</div>
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
 <p>
@@ -10370,7 +10454,9 @@ bindon-ngModel
 
 <!-- Does not show because isActive is false! -->
 <div>Hero Detail removed from DOM (via template) because isActive is false</div>
-<ng-template [ngIf]="isActive"><app-hero-detail></app-hero-detail></ng-template>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
 
 <!-- isSpecial is true -->
 <div [class.hidden]="!isSpecial">Show with class</div>
@@ -10583,7 +10669,10 @@ bindon-ngModel
 <div>Title through uppercase pipe: {{ title | uppercase }}</div>
 
 <!-- Pipe chaining: convert title to uppercase, then to lowercase -->
-<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
+<div>
+  Title through a pipe chain:
+  {{ title | uppercase | lowercase }}
+</div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
 <div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
@@ -10706,7 +10795,9 @@ can be found in the LICENSE file at http://angular.io/license
     </div>
     <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
   </form>
-  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
+  <div [hidden]="!heroForm.form.valid">
+    {{ submitMessage }}
+  </div>
 </div>
 
 <!-- 
diff --git a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
index 1c3dfe24..4cbe261d 100644
--- a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
@@ -228,7 +228,8 @@ printWidth: 80
   </fieldset>
   <div class="form-check">
     <label class="form-check-label">
-      <input type="checkbox" class="form-check-input" /> Check me out
+      <input type="checkbox" class="form-check-input" />
+      Check me out
     </label>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
diff --git a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
index a678902a..48ba45e0 100644
--- a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
@@ -99,8 +99,12 @@ printWidth: 80
       In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
     -->
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <p>123</p>
-      <span> 123 </span>
+      <p>
+        123
+      </p>
+      <span>
+        123
+      </span>
     </div>
   </foreignObject>
 </svg>
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 92468054..41f028cc 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -181,8 +181,15 @@ printWidth: Infinity
 </div>
 
 =====================================output=====================================
-<div>aaaaaaaaaa <a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a> cccccccccc</div>
-<div>aaaaaaaaaa <a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a>cccccccccc</div>
+<div>
+  aaaaaaaaaa
+  <a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a>
+  cccccccccc
+</div>
+<div>
+  aaaaaaaaaa
+  <a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a>cccccccccc
+</div>
 
 ================================================================================
 `;
@@ -1240,7 +1247,9 @@ ___________________________
              ||     ||
 ___________________________
   </pre>
-  <figcaption id="cow-caption">A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.</figcaption>
+  <figcaption id="cow-caption">
+    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
+  </figcaption>
 </figure>
 <pre data-attr-1="foo" data-attr-2="foo" data-attr-3="foo" data-attr-4="foo" data-attr-5="foo" data-attr-6="foo">
      Foo     Bar
@@ -1743,6 +1752,11 @@ printWidth: 80
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 =====================================output=====================================
 <br />
@@ -1848,8 +1862,12 @@ printWidth: 80
     </div>
   </div>
 </div>
-<div><div>string</div></div>
-<div><div>string</div></div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+</div>
 <div>
   <div>string</div>
 
@@ -1875,7 +1893,9 @@ printWidth: 80
 <label
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 ></label>
-| <span></span> <br />
+|
+<span></span>
+<br />
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
 <br /><br />
 
@@ -1916,6 +1936,11 @@ printWidth: 80
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 ================================================================================
 `;
@@ -2036,6 +2061,11 @@ printWidth: 1
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 =====================================output=====================================
 <br />
@@ -2410,6 +2440,17 @@ printWidth: 1
     >seddoeiusmod</strong
   >.
 </div>
+<span>
+  <i
+    class="fa fa-refresh fa-spin"
+  />
+  <i
+    class="fa fa-refresh fa-spin"
+  />
+  <i
+    class="fa fa-refresh fa-spin"
+  />
+</span>
 
 ================================================================================
 `;
@@ -2529,6 +2570,11 @@ printWidth: Infinity
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 =====================================output=====================================
 <br />
@@ -2584,8 +2630,12 @@ printWidth: Infinity
     </div>
   </div>
 </div>
-<div><div>string</div></div>
-<div><div>string</div></div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+</div>
 <div>
   <div>string</div>
 
@@ -2598,20 +2648,25 @@ printWidth: Infinity
   <li class="baz">Second</li>
   789
 </ul>
-<span>*<b>200</b></span> <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<span>*<b>200</b></span>
+<img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr />456</div>
 <p>x<span a="b"></span></p>
 <p>x<meta a /></p>
 <p>x<meta /></p>
 <span></span>
 
-<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> | <span></span> <br />
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
+<span></span>
+<br />
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<br /><br />
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 <div>
@@ -2628,8 +2683,18 @@ printWidth: Infinity
   <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
-<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".</div>
-<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <strong>seddoeiusmod</strong>.</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 ================================================================================
 `;
@@ -2751,6 +2816,11 @@ printWidth: 80
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 =====================================output=====================================
 <br />
@@ -2819,10 +2889,11 @@ printWidth: 80
 >
 <video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4" />
-  <source src="movie.ogg" type="video/ogg" /> Your browser does not support the
-  video tag.
+  <source src="movie.ogg" type="video/ogg" />
+  Your browser does not support the video tag.
 </video>
-<div><div>string</div></div> <div><div>string</div><div>string</div></div>
+<div><div>string</div></div>
+<div><div>string</div><div>string</div></div>
 <div
   ><div><div>string</div></div
   ><div>string</div></div
@@ -2830,7 +2901,8 @@ printWidth: 80
 <div
   ><div>string</div><div><div>string</div></div></div
 >
-<div><div></div></div> <div><div></div><div></div></div>
+<div><div></div></div>
+<div><div></div><div></div></div>
 <div
   ><div
     ><div
@@ -2842,7 +2914,12 @@ printWidth: 80
     ></div
   ></div
 >
-<div> <div>string</div> </div> <div> <div>string</div> </div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+</div>
 <div>
   <div>string</div>
 
@@ -2856,13 +2933,19 @@ printWidth: 80
 <span>*<b>200</b></span>
 <img
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-/>123 <div>123<meta attr />456</div> <p>x<span a="b"></span></p>
-<p>x<meta a/></p> <p>x<meta /></p> <span></span>
+/>123
+<div>123<meta attr />456</div>
+<p>x<span a="b"></span></p>
+<p>x<meta a/></p>
+<p>x<meta /></p>
+<span></span>
 
 <label
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 ></label>
-| <span></span> <br />
+|
+<span></span>
+<br />
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
 <br /><br />
 
@@ -2903,6 +2986,11 @@ printWidth: 80
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 ================================================================================
 `;
@@ -3024,6 +3112,11 @@ printWidth: 80
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 =====================================output=====================================
 <br />
@@ -3129,8 +3222,12 @@ printWidth: 80
     </div>
   </div>
 </div>
-<div><div>string</div></div>
-<div><div>string</div></div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+</div>
 <div>
   <div>string</div>
 
@@ -3228,6 +3325,11 @@ printWidth: 80
   <strong>seddoeiusmod</strong>
   .
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
 
 ================================================================================
 `;
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 8d978c4f..96b7a27f 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -108,3 +108,8 @@
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
 </div>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 7e59fbb1..0362594d 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -2437,7 +2437,10 @@ printWidth: 80
 
 <template>
   <br />
-  <footer>foo <br /></footer>
+  <footer>
+    foo
+    <br />
+  </footer>
 </template>
 
 ================================================================================
@@ -2466,7 +2469,10 @@ trailingComma: "es5"
 
 <template>
   <br />
-  <footer>foo <br /></footer>
+  <footer>
+    foo
+    <br />
+  </footer>
 </template>
 
 ================================================================================
@@ -2495,7 +2501,10 @@ semi: false
 
 <template>
   <br />
-  <footer>foo <br /></footer>
+  <footer>
+    foo
+    <br />
+  </footer>
 </template>
 
 ================================================================================
diff --git a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
index 489d5563..ac9e673c 100644
--- a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -218,6 +218,50 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`surrounding-linebreak.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<span>123</span>
+<span>
+123</span>
+<span>123
+</span>
+<span>
+123
+</span>
+
+<div>123</div>
+<div>
+123</div>
+<div>123
+</div>
+<div>
+123
+</div>
+
+=====================================output=====================================
+<span>123</span>
+<span> 123</span>
+<span>123 </span>
+<span>
+  123
+</span>
+
+<div>123</div>
+<div>
+  123
+</div>
+<div>123</div>
+<div>
+  123
+</div>
+
+================================================================================
+`;
+
 exports[`table.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
diff --git a/tests/html_whitespace/surrounding-linebreak.html b/tests/html_whitespace/surrounding-linebreak.html
new file mode 100644
index 00000000..06862eba
--- /dev/null
+++ b/tests/html_whitespace/surrounding-linebreak.html
@@ -0,0 +1,17 @@
+<span>123</span>
+<span>
+123</span>
+<span>123
+</span>
+<span>
+123
+</span>
+
+<div>123</div>
+<div>
+123</div>
+<div>123
+</div>
+<div>
+123
+</div>