feat(html): preserve surrounding linebreaks (#5596)

2018-12-11 12:43:53 +08:00 · 2018-12-11 12:43:53 +08:00 · d97fe0a1e0
parent fa7eafaa6d
commit d97fe0a1e0
9 changed files with 366 additions and 100 deletions
--- 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)
  );
 }

--- 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>

 <!-- 
--- 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>
--- 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>
--- 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>

 ================================================================================
 `;
--- 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>
--- 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>

 ================================================================================
--- 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"]
--- a/tests/html_whitespace/surrounding-linebreak.html
+++ 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>