diff --git a/src/language-html/options.js b/src/language-html/options.js
index ee8d6c0592dc..44179df1ca1b 100644
--- a/src/language-html/options.js
+++ b/src/language-html/options.js
@@ -24,5 +24,28 @@ module.exports = {
         description: "Whitespaces are considered insensitive."
       }
     ]
+  },
+  htmlTopLevelIndent: {
+    since: "1.18.0",
+    category: CATEGORY_HTML,
+    type: "choice",
+    default: "auto",
+    description: "How to handle top-level indent in HTML.",
+    choices: [
+      {
+        value: "always",
+        description:
+          "Always apply top-level indent for templates, scripts and styles."
+      },
+      {
+        value: "never",
+        description: "Avoid top-level indent for templates, scripts and styles."
+      },
+      {
+        value: "auto",
+        description:
+          "Avoid top-level indent for scripts and styles inside Vue files."
+      }
+    ]
   }
 };
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index ce5a8fab8f34..d586ebe81460 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -227,9 +227,11 @@ function genericPrint(path, options, print) {
                       ? ifBreak(indent(childrenDoc), childrenDoc, {
                           groupId: attrGroupId
                         })
-                      : isScriptLikeTag(node) &&
-                        node.parent.type === "root" &&
-                        options.parser === "vue"
+                      : node.parent.type === "root" &&
+                        ((options.htmlTopLevelIndent === "auto" &&
+                          isScriptLikeTag(node) &&
+                          options.parser === "vue") ||
+                          options.htmlTopLevelIndent === "never")
                       ? childrenDoc
                       : indent(childrenDoc))(
                     concat([
diff --git a/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap b/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap
index d08d4efdaa63..8b4f4cd8a86e 100644
--- a/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap
@@ -17,3 +17,60 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`basic.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <i class.bind="icon"></i>
+</template>
+
+=====================================output=====================================
+<template>
+  <i class.bind="icon"></i>
+</template>
+
+================================================================================
+`;
+
+exports[`basic.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <i class.bind="icon"></i>
+</template>
+
+=====================================output=====================================
+<template>
+  <i class.bind="icon"></i>
+</template>
+
+================================================================================
+`;
+
+exports[`basic.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <i class.bind="icon"></i>
+</template>
+
+=====================================output=====================================
+<template>
+<i class.bind="icon"></i>
+</template>
+
+================================================================================
+`;
diff --git a/tests/html_aurelia/jsfmt.spec.js b/tests/html_aurelia/jsfmt.spec.js
index 53763df9b20b..53078dba5fde 100644
--- a/tests/html_aurelia/jsfmt.spec.js
+++ b/tests/html_aurelia/jsfmt.spec.js
@@ -1 +1,4 @@
 run_spec(__dirname, ["html"]);
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "never" });
diff --git a/tests/html_css/__snapshots__/jsfmt.spec.js.snap b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
index 1effb3f87af8..6c2b1f48879a 100644
--- a/tests/html_css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
@@ -14,6 +14,51 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`empty.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style></style>
+
+=====================================output=====================================
+<style></style>
+
+================================================================================
+`;
+
+exports[`empty.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style></style>
+
+=====================================output=====================================
+<style></style>
+
+================================================================================
+`;
+
+exports[`empty.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style></style>
+
+=====================================output=====================================
+<style></style>
+
+================================================================================
+`;
+
 exports[`less.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -60,6 +105,147 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`less.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+<style lang="less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+=====================================output=====================================
+<style type="text/less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+<style lang="less">
+  @nice-blue: #5b83ad;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`less.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+<style lang="less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+=====================================output=====================================
+<style type="text/less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+<style lang="less">
+  @nice-blue: #5b83ad;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`less.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+<style lang="less">
+  @nice-blue: #5B83AD;
+  @light-blue: @nice-blue + #111;
+
+  #header {
+    color: @light-blue;
+  }
+</style>
+
+=====================================output=====================================
+<style type="text/less">
+@nice-blue: #5B83AD;
+@light-blue: @nice-blue + #111;
+
+#header {
+  color: @light-blue;
+}
+</style>
+
+<style lang="less">
+@nice-blue: #5b83ad;
+@light-blue: @nice-blue + #111;
+
+#header {
+  color: @light-blue;
+}
+</style>
+
+================================================================================
+`;
+
 exports[`postcss.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -92,6 +278,105 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`postcss.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/css">
+  body { background: navy; color: yellow; }
+</style>
+
+<style lang="postcss">
+  body { background: navy; color: yellow; }
+</style>
+
+=====================================output=====================================
+<style type="text/css">
+  body {
+    background: navy;
+    color: yellow;
+  }
+</style>
+
+<style lang="postcss">
+  body {
+    background: navy;
+    color: yellow;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`postcss.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/css">
+  body { background: navy; color: yellow; }
+</style>
+
+<style lang="postcss">
+  body { background: navy; color: yellow; }
+</style>
+
+=====================================output=====================================
+<style type="text/css">
+  body {
+    background: navy;
+    color: yellow;
+  }
+</style>
+
+<style lang="postcss">
+  body {
+    background: navy;
+    color: yellow;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`postcss.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/css">
+  body { background: navy; color: yellow; }
+</style>
+
+<style lang="postcss">
+  body { background: navy; color: yellow; }
+</style>
+
+=====================================output=====================================
+<style type="text/css">
+body {
+  background: navy;
+  color: yellow;
+}
+</style>
+
+<style lang="postcss">
+body {
+  background: navy;
+  color: yellow;
+}
+</style>
+
+================================================================================
+`;
+
 exports[`scss.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -168,14 +453,341 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`simple.html 1`] = `
+exports[`scss.html 2`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["html"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-<!DOCTYPE html>
-<html>
+<style type="text/x-scss">
+  $font-stack:    Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+  $font-stack:    Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+.someElement {
+    @include bp-medium {
+      display: flex;
+    }
+    
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+}
+</style>
+
+=====================================output=====================================
+<style type="text/x-scss">
+  $font-stack: Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+  $font-stack: Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+  .someElement {
+    @include bp-medium {
+      display: flex;
+    }
+
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`scss.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/x-scss">
+  $font-stack:    Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+  $font-stack:    Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+.someElement {
+    @include bp-medium {
+      display: flex;
+    }
+    
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+}
+</style>
+
+=====================================output=====================================
+<style type="text/x-scss">
+  $font-stack: Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+  $font-stack: Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+  .someElement {
+    @include bp-medium {
+      display: flex;
+    }
+
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`scss.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style type="text/x-scss">
+  $font-stack:    Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+  $font-stack:    Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>
+
+<style lang="scss">
+.someElement {
+    @include bp-medium {
+      display: flex;
+    }
+    
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+}
+</style>
+
+=====================================output=====================================
+<style type="text/x-scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>
+
+<style lang="scss">
+.someElement {
+  @include bp-medium {
+    display: flex;
+  }
+
+  @include bp-large {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+</style>
+
+================================================================================
+`;
+
+exports[`simple.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <style>a { color: red; }</style>
+    <style>
+      body { background: navy; color: yellow; }
+    </style>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <style>
+      a {
+        color: red;
+      }
+    </style>
+    <style>
+      body {
+        background: navy;
+        color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`simple.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <style>a { color: red; }</style>
+    <style>
+      body { background: navy; color: yellow; }
+    </style>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <style>
+      a {
+        color: red;
+      }
+    </style>
+    <style>
+      body {
+        background: navy;
+        color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`simple.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
   <head>
     <title>Sample styled page</title>
     <style>a { color: red; }</style>
@@ -215,6 +827,54 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`simple.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <style>a { color: red; }</style>
+    <style>
+      body { background: navy; color: yellow; }
+    </style>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Sample styled page</title>
+  <style>
+    a {
+      color: red;
+    }
+  </style>
+  <style>
+    body {
+      background: navy;
+      color: yellow;
+    }
+  </style>
+</head>
+<body>
+  <h1>Sample styled page</h1>
+  <p>This page is just a demo.</p>
+</body>
+</html>
+
+================================================================================
+`;
+
 exports[`single-style.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -246,3 +906,102 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`single-style.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style>a { color: red; }</style>
+<style>
+  h1 {
+    font-size: 120%;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    color: #333366;
+  }
+</style>
+
+=====================================output=====================================
+<style>
+  a {
+    color: red;
+  }
+</style>
+<style>
+  h1 {
+    font-size: 120%;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    color: #333366;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`single-style.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style>a { color: red; }</style>
+<style>
+  h1 {
+    font-size: 120%;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    color: #333366;
+  }
+</style>
+
+=====================================output=====================================
+<style>
+  a {
+    color: red;
+  }
+</style>
+<style>
+  h1 {
+    font-size: 120%;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    color: #333366;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`single-style.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style>a { color: red; }</style>
+<style>
+  h1 {
+    font-size: 120%;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    color: #333366;
+  }
+</style>
+
+=====================================output=====================================
+<style>
+a {
+  color: red;
+}
+</style>
+<style>
+h1 {
+  font-size: 120%;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  color: #333366;
+}
+</style>
+
+================================================================================
+`;
diff --git a/tests/html_css/jsfmt.spec.js b/tests/html_css/jsfmt.spec.js
index 53763df9b20b..53078dba5fde 100644
--- a/tests/html_css/jsfmt.spec.js
+++ b/tests/html_css/jsfmt.spec.js
@@ -1 +1,4 @@
 run_spec(__dirname, ["html"]);
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "never" });
diff --git a/tests/html_js/__snapshots__/jsfmt.spec.js.snap b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
index 66ca2ccdf9cc..004c7e677679 100644
--- a/tests/html_js/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
@@ -14,6 +14,51 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`empty.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script></script>
+
+=====================================output=====================================
+<script></script>
+
+================================================================================
+`;
+
+exports[`empty.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script></script>
+
+=====================================output=====================================
+<script></script>
+
+================================================================================
+`;
+
+exports[`empty.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script></script>
+
+=====================================output=====================================
+<script></script>
+
+================================================================================
+`;
+
 exports[`js.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -74,6 +119,189 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`js.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="application/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script>
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="text/babel">
+            const    someJS    =   'this should be formatted'
+</script>
+<script type="module">
+      import lib from './lib.js';
+  
+        function myFunction() { return 'foo'; }
+  </script>
+
+=====================================output=====================================
+<script type="text/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="application/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script>
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="text/babel">
+  const someJS = "this should be formatted";
+</script>
+<script type="module">
+  import lib from "./lib.js";
+
+  function myFunction() {
+    return "foo";
+  }
+</script>
+
+================================================================================
+`;
+
+exports[`js.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="application/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script>
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="text/babel">
+            const    someJS    =   'this should be formatted'
+</script>
+<script type="module">
+      import lib from './lib.js';
+  
+        function myFunction() { return 'foo'; }
+  </script>
+
+=====================================output=====================================
+<script type="text/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="application/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script>
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="text/babel">
+  const someJS = "this should be formatted";
+</script>
+<script type="module">
+  import lib from "./lib.js";
+
+  function myFunction() {
+    return "foo";
+  }
+</script>
+
+================================================================================
+`;
+
+exports[`js.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="application/javascript">
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script>
+  var message = "Alert!";
+
+  alert(message);
+</script>
+<script type="text/babel">
+            const    someJS    =   'this should be formatted'
+</script>
+<script type="module">
+      import lib from './lib.js';
+  
+        function myFunction() { return 'foo'; }
+  </script>
+
+=====================================output=====================================
+<script type="text/javascript">
+var message = "Alert!";
+
+alert(message);
+</script>
+<script type="application/javascript">
+var message = "Alert!";
+
+alert(message);
+</script>
+<script>
+var message = "Alert!";
+
+alert(message);
+</script>
+<script type="text/babel">
+const someJS = "this should be formatted";
+</script>
+<script type="module">
+import lib from "./lib.js";
+
+function myFunction() {
+  return "foo";
+}
+</script>
+
+================================================================================
+`;
+
 exports[`simple.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -120,93 +348,858 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`single-script.html 1`] = `
+exports[`simple.html 2`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["html"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-<script>alert('test');</script>
-<script>
-  document.getElementById("demo").innerHTML = "Hello JavaScript!";
-</script>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <script>alert('test');</script>
+    <script>
+      var message = "Alert!";
+
+      alert(message);
+    </script>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
 
 =====================================output=====================================
-<script>
-  alert("test");
-</script>
-<script>
-  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <script>
+      alert("test");
+    </script>
+    <script>
+      var message = "Alert!";
+
+      alert(message);
+    </script>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`simple.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <script>alert('test');</script>
+    <script>
+      var message = "Alert!";
+
+      alert(message);
+    </script>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <script>
+      alert("test");
+    </script>
+    <script>
+      var message = "Alert!";
+
+      alert(message);
+    </script>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`simple.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample styled page</title>
+    <script>alert('test');</script>
+    <script>
+      var message = "Alert!";
+
+      alert(message);
+    </script>
+  </head>
+  <body>
+    <h1>Sample styled page</h1>
+    <p>This page is just a demo.</p>
+  </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Sample styled page</title>
+  <script>
+    alert("test");
+  </script>
+  <script>
+    var message = "Alert!";
+
+    alert(message);
+  </script>
+</head>
+<body>
+  <h1>Sample styled page</h1>
+  <p>This page is just a demo.</p>
+</body>
+</html>
+
+================================================================================
+`;
+
+exports[`single-script.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>alert('test');</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+=====================================output=====================================
+<script>
+  alert("test");
+</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+================================================================================
+`;
+
+exports[`single-script.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>alert('test');</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+=====================================output=====================================
+<script>
+  alert("test");
+</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+================================================================================
+`;
+
+exports[`single-script.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>alert('test');</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+=====================================output=====================================
+<script>
+  alert("test");
+</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+================================================================================
+`;
+
+exports[`single-script.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>alert('test');</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+=====================================output=====================================
+<script>
+alert("test");
+</script>
+<script>
+document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+================================================================================
+`;
+
+exports[`something-else.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/template">
+ <div>
+    </div>
+</script>
+
+=====================================output=====================================
+<script type="text/template">
+  <div>
+     </div>
+</script>
+
+================================================================================
+`;
+
+exports[`something-else.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/template">
+ <div>
+    </div>
+</script>
+
+=====================================output=====================================
+<script type="text/template">
+  <div>
+     </div>
+</script>
+
+================================================================================
+`;
+
+exports[`something-else.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/template">
+ <div>
+    </div>
+</script>
+
+=====================================output=====================================
+<script type="text/template">
+  <div>
+     </div>
+</script>
+
+================================================================================
+`;
+
+exports[`something-else.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/template">
+ <div>
+    </div>
+</script>
+
+=====================================output=====================================
+<script type="text/template">
+<div>
+   </div>
+</script>
+
+================================================================================
+`;
+
+exports[`template-literal.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    </head>
+    <body>
+        <script>
+            function foo() {
+                return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+            }
+        </script>
+    </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html lang="en">
+  <head> </head>
+  <body>
+    <script>
+      function foo() {
+        return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+      }
+    </script>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`template-literal.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    </head>
+    <body>
+        <script>
+            function foo() {
+                return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+            }
+        </script>
+    </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html lang="en">
+  <head> </head>
+  <body>
+    <script>
+      function foo() {
+        return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+      }
+    </script>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`template-literal.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    </head>
+    <body>
+        <script>
+            function foo() {
+                return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+            }
+        </script>
+    </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html lang="en">
+  <head> </head>
+  <body>
+    <script>
+      function foo() {
+        return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+      }
+    </script>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`template-literal.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    </head>
+    <body>
+        <script>
+            function foo() {
+                return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+            }
+        </script>
+    </body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html lang="en">
+<head> </head>
+<body>
+  <script>
+    function foo() {
+      return \`
+                    <div>
+                        <p>Text</p>
+                    </div>
+                \`;
+    }
+  </script>
+</body>
+</html>
+
+================================================================================
+`;
+
+exports[`typescript.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="application/x-typescript">
+  class Student {
+    fullName: string;
+    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person : Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="ts">
+  class Student {
+    fullName: string;
+    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person : Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="tsx">
+  class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> {
+    constructor(){
+      super()
+      this.state = { data: [] };
+    }
+    fetchComments() {
+      $.ajax({
+        url: this.props.url,
+        dataType: 'json',
+        cache: false,
+        success: (data) => this.setState({ data: data }),
+        error: (xhr, status, err) => console.error(status, err)
+      })
+    }
+    componentDidMount() {
+      this.fetchComments();
+      setInterval(this.fetchComments.bind(this), this.props.pollInterval);
+    }
+    render() {
+      let handleCommentSubmit = (comment: { author: string, text: string }) => {
+        console.warn('comment submitted!', comment);
+        const updated = this.state.data.slice(0);
+        updated.push(comment);
+        this.setState({ data: updated });
+      }
+      return (
+        <div className="commentBox">
+        <h1>Comments</h1>
+        <CommentList data={this.state.data}/>
+      <CommentForm onCommentSubmit={handleCommentSubmit} />
+      </div>
+    );
+    }
+  }
+</script>
+
+=====================================output=====================================
+<script type="application/x-typescript">
+  class Student {
+    fullName: string;
+    constructor(
+      public firstName: string,
+      public middleInitial: string,
+      public lastName: string
+    ) {
+      this.fullName = firstName + " " + middleInitial + " " + lastName;
+    }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person: Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="ts">
+  class Student {
+    fullName: string;
+    constructor(
+      public firstName: string,
+      public middleInitial: string,
+      public lastName: string
+    ) {
+      this.fullName = firstName + " " + middleInitial + " " + lastName;
+    }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person: Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="tsx">
+  class CommentBox extends React.Component<
+    { url: string; pollInterval: number },
+    CommentData
+  > {
+    constructor() {
+      super();
+      this.state = { data: [] };
+    }
+    fetchComments() {
+      $.ajax({
+        url: this.props.url,
+        dataType: "json",
+        cache: false,
+        success: data => this.setState({ data: data }),
+        error: (xhr, status, err) => console.error(status, err)
+      });
+    }
+    componentDidMount() {
+      this.fetchComments();
+      setInterval(this.fetchComments.bind(this), this.props.pollInterval);
+    }
+    render() {
+      let handleCommentSubmit = (comment: { author: string; text: string }) => {
+        console.warn("comment submitted!", comment);
+        const updated = this.state.data.slice(0);
+        updated.push(comment);
+        this.setState({ data: updated });
+      };
+      return (
+        <div className="commentBox">
+          <h1>Comments</h1>
+          <CommentList data={this.state.data} />
+          <CommentForm onCommentSubmit={handleCommentSubmit} />
+        </div>
+      );
+    }
+  }
+</script>
+
+================================================================================
+`;
+
+exports[`typescript.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="application/x-typescript">
+  class Student {
+    fullName: string;
+    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person : Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="ts">
+  class Student {
+    fullName: string;
+    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person : Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="tsx">
+  class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> {
+    constructor(){
+      super()
+      this.state = { data: [] };
+    }
+    fetchComments() {
+      $.ajax({
+        url: this.props.url,
+        dataType: 'json',
+        cache: false,
+        success: (data) => this.setState({ data: data }),
+        error: (xhr, status, err) => console.error(status, err)
+      })
+    }
+    componentDidMount() {
+      this.fetchComments();
+      setInterval(this.fetchComments.bind(this), this.props.pollInterval);
+    }
+    render() {
+      let handleCommentSubmit = (comment: { author: string, text: string }) => {
+        console.warn('comment submitted!', comment);
+        const updated = this.state.data.slice(0);
+        updated.push(comment);
+        this.setState({ data: updated });
+      }
+      return (
+        <div className="commentBox">
+        <h1>Comments</h1>
+        <CommentList data={this.state.data}/>
+      <CommentForm onCommentSubmit={handleCommentSubmit} />
+      </div>
+    );
+    }
+  }
 </script>
 
-================================================================================
-`;
+=====================================output=====================================
+<script type="application/x-typescript">
+  class Student {
+    fullName: string;
+    constructor(
+      public firstName: string,
+      public middleInitial: string,
+      public lastName: string
+    ) {
+      this.fullName = firstName + " " + middleInitial + " " + lastName;
+    }
+  }
 
-exports[`something-else.html 1`] = `
-====================================options=====================================
-parsers: ["html"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-<script type="text/template">
- <div>
-    </div>
-</script>
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
 
-=====================================output=====================================
-<script type="text/template">
-  <div>
-     </div>
+  function greeter(person: Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
 </script>
+<script lang="ts">
+  class Student {
+    fullName: string;
+    constructor(
+      public firstName: string,
+      public middleInitial: string,
+      public lastName: string
+    ) {
+      this.fullName = firstName + " " + middleInitial + " " + lastName;
+    }
+  }
 
-================================================================================
-`;
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
 
-exports[`template-literal.html 1`] = `
-====================================options=====================================
-parsers: ["html"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-    </head>
-    <body>
-        <script>
-            function foo() {
-                return \`
-                    <div>
-                        <p>Text</p>
-                    </div>
-                \`;
-            }
-        </script>
-    </body>
-</html>
+  function greeter(person: Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
 
-=====================================output=====================================
-<!DOCTYPE html>
-<html lang="en">
-  <head> </head>
-  <body>
-    <script>
-      function foo() {
-        return \`
-                    <div>
-                        <p>Text</p>
-                    </div>
-                \`;
-      }
-    </script>
-  </body>
-</html>
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="tsx">
+  class CommentBox extends React.Component<
+    { url: string; pollInterval: number },
+    CommentData
+  > {
+    constructor() {
+      super();
+      this.state = { data: [] };
+    }
+    fetchComments() {
+      $.ajax({
+        url: this.props.url,
+        dataType: "json",
+        cache: false,
+        success: data => this.setState({ data: data }),
+        error: (xhr, status, err) => console.error(status, err)
+      });
+    }
+    componentDidMount() {
+      this.fetchComments();
+      setInterval(this.fetchComments.bind(this), this.props.pollInterval);
+    }
+    render() {
+      let handleCommentSubmit = (comment: { author: string; text: string }) => {
+        console.warn("comment submitted!", comment);
+        const updated = this.state.data.slice(0);
+        updated.push(comment);
+        this.setState({ data: updated });
+      };
+      return (
+        <div className="commentBox">
+          <h1>Comments</h1>
+          <CommentList data={this.state.data} />
+          <CommentForm onCommentSubmit={handleCommentSubmit} />
+        </div>
+      );
+    }
+  }
+</script>
 
 ================================================================================
 `;
 
-exports[`typescript.html 1`] = `
+exports[`typescript.html 3`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["html"]
 printWidth: 80
                                                                                 | printWidth
@@ -383,3 +1376,183 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`typescript.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="application/x-typescript">
+  class Student {
+    fullName: string;
+    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person : Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="ts">
+  class Student {
+    fullName: string;
+    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+  }
+
+  interface Person {
+    firstName: string;
+    lastName: string;
+  }
+
+  function greeter(person : Person) {
+    return "Hello, " + person.firstName + " " + person.lastName;
+  }
+
+  let user = new Student("Jane", "M.", "User");
+
+  document.body.innerHTML = greeter(user);
+</script>
+<script lang="tsx">
+  class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> {
+    constructor(){
+      super()
+      this.state = { data: [] };
+    }
+    fetchComments() {
+      $.ajax({
+        url: this.props.url,
+        dataType: 'json',
+        cache: false,
+        success: (data) => this.setState({ data: data }),
+        error: (xhr, status, err) => console.error(status, err)
+      })
+    }
+    componentDidMount() {
+      this.fetchComments();
+      setInterval(this.fetchComments.bind(this), this.props.pollInterval);
+    }
+    render() {
+      let handleCommentSubmit = (comment: { author: string, text: string }) => {
+        console.warn('comment submitted!', comment);
+        const updated = this.state.data.slice(0);
+        updated.push(comment);
+        this.setState({ data: updated });
+      }
+      return (
+        <div className="commentBox">
+        <h1>Comments</h1>
+        <CommentList data={this.state.data}/>
+      <CommentForm onCommentSubmit={handleCommentSubmit} />
+      </div>
+    );
+    }
+  }
+</script>
+
+=====================================output=====================================
+<script type="application/x-typescript">
+class Student {
+  fullName: string;
+  constructor(
+    public firstName: string,
+    public middleInitial: string,
+    public lastName: string
+  ) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+}
+
+interface Person {
+  firstName: string;
+  lastName: string;
+}
+
+function greeter(person: Person) {
+  return "Hello, " + person.firstName + " " + person.lastName;
+}
+
+let user = new Student("Jane", "M.", "User");
+
+document.body.innerHTML = greeter(user);
+</script>
+<script lang="ts">
+class Student {
+  fullName: string;
+  constructor(
+    public firstName: string,
+    public middleInitial: string,
+    public lastName: string
+  ) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+}
+
+interface Person {
+  firstName: string;
+  lastName: string;
+}
+
+function greeter(person: Person) {
+  return "Hello, " + person.firstName + " " + person.lastName;
+}
+
+let user = new Student("Jane", "M.", "User");
+
+document.body.innerHTML = greeter(user);
+</script>
+<script lang="tsx">
+class CommentBox extends React.Component<
+  { url: string; pollInterval: number },
+  CommentData
+> {
+  constructor() {
+    super();
+    this.state = { data: [] };
+  }
+  fetchComments() {
+    $.ajax({
+      url: this.props.url,
+      dataType: "json",
+      cache: false,
+      success: data => this.setState({ data: data }),
+      error: (xhr, status, err) => console.error(status, err)
+    });
+  }
+  componentDidMount() {
+    this.fetchComments();
+    setInterval(this.fetchComments.bind(this), this.props.pollInterval);
+  }
+  render() {
+    let handleCommentSubmit = (comment: { author: string; text: string }) => {
+      console.warn("comment submitted!", comment);
+      const updated = this.state.data.slice(0);
+      updated.push(comment);
+      this.setState({ data: updated });
+    };
+    return (
+      <div className="commentBox">
+        <h1>Comments</h1>
+        <CommentList data={this.state.data} />
+        <CommentForm onCommentSubmit={handleCommentSubmit} />
+      </div>
+    );
+  }
+}
+</script>
+
+================================================================================
+`;
diff --git a/tests/html_js/jsfmt.spec.js b/tests/html_js/jsfmt.spec.js
index 53763df9b20b..53078dba5fde 100644
--- a/tests/html_js/jsfmt.spec.js
+++ b/tests/html_js/jsfmt.spec.js
@@ -1 +1,4 @@
 run_spec(__dirname, ["html"]);
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "never" });
diff --git a/tests/html_lwc/__snapshots__/jsfmt.spec.js.snap b/tests/html_lwc/__snapshots__/jsfmt.spec.js.snap
index 63197acfbc90..d12f1aa34b10 100644
--- a/tests/html_lwc/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_lwc/__snapshots__/jsfmt.spec.js.snap
@@ -115,3 +115,120 @@ semi: false
 
 ================================================================================
 `;
+
+exports[`attributes.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parser: "lwc"
+parsers: ["lwc"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div
+    data-for={value}
+    data-for={value[0]}
+    data-for={value.toString()}
+    data-for={value()}
+    class="test"
+  ></div>
+  </template>
+<template if:true={value.error}>
+    <c-error-panel errors={value.error}></c-error-panel>
+</template>
+<a href="#" onclick={aFunction}>
+=====================================output=====================================
+<template>
+  <div
+    data-for={value}
+    data-for={value[0]}
+    data-for={value.toString()}
+    data-for={value()}
+    class="test"
+  ></div>
+</template>
+<template if:true={value.error}>
+  <c-error-panel errors={value.error}></c-error-panel>
+</template>
+<a href="#" onclick={aFunction}></a>
+
+================================================================================
+`;
+
+exports[`attributes.html 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parser: "lwc"
+parsers: ["lwc"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div
+    data-for={value}
+    data-for={value[0]}
+    data-for={value.toString()}
+    data-for={value()}
+    class="test"
+  ></div>
+  </template>
+<template if:true={value.error}>
+    <c-error-panel errors={value.error}></c-error-panel>
+</template>
+<a href="#" onclick={aFunction}>
+=====================================output=====================================
+<template>
+  <div
+    data-for={value}
+    data-for={value[0]}
+    data-for={value.toString()}
+    data-for={value()}
+    class="test"
+  ></div>
+</template>
+<template if:true={value.error}>
+  <c-error-panel errors={value.error}></c-error-panel>
+</template>
+<a href="#" onclick={aFunction}></a>
+
+================================================================================
+`;
+
+exports[`attributes.html 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parser: "lwc"
+parsers: ["lwc"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div
+    data-for={value}
+    data-for={value[0]}
+    data-for={value.toString()}
+    data-for={value()}
+    class="test"
+  ></div>
+  </template>
+<template if:true={value.error}>
+    <c-error-panel errors={value.error}></c-error-panel>
+</template>
+<a href="#" onclick={aFunction}>
+=====================================output=====================================
+<template>
+<div
+  data-for={value}
+  data-for={value[0]}
+  data-for={value.toString()}
+  data-for={value()}
+  class="test"
+></div>
+</template>
+<template if:true={value.error}>
+<c-error-panel errors={value.error}></c-error-panel>
+</template>
+<a href="#" onclick={aFunction}></a>
+
+================================================================================
+`;
diff --git a/tests/html_lwc/jsfmt.spec.js b/tests/html_lwc/jsfmt.spec.js
index 8286bbff48fb..902b20e78000 100644
--- a/tests/html_lwc/jsfmt.spec.js
+++ b/tests/html_lwc/jsfmt.spec.js
@@ -1,3 +1,6 @@
 run_spec(__dirname, ["lwc"], { parser: "lwc" });
 run_spec(__dirname, ["lwc"], { parser: "lwc", trailingComma: "es5" });
 run_spec(__dirname, ["lwc"], { parser: "lwc", semi: false });
+run_spec(__dirname, ["lwc"], { parser: "lwc", htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["lwc"], { parser: "lwc", htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["lwc"], { parser: "lwc", htmlTopLevelIndent: "never" });
diff --git a/tests/html_script/__snapshots__/jsfmt.spec.js.snap b/tests/html_script/__snapshots__/jsfmt.spec.js.snap
index 18a5cad25c06..8c39fca150a0 100644
--- a/tests/html_script/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_script/__snapshots__/jsfmt.spec.js.snap
@@ -17,3 +17,60 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`script.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="application/ld+json">
+  {   "json":true  }
+</script>
+
+=====================================output=====================================
+<script type="application/ld+json">
+  { "json": true }
+</script>
+
+================================================================================
+`;
+
+exports[`script.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="application/ld+json">
+  {   "json":true  }
+</script>
+
+=====================================output=====================================
+<script type="application/ld+json">
+  { "json": true }
+</script>
+
+================================================================================
+`;
+
+exports[`script.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="application/ld+json">
+  {   "json":true  }
+</script>
+
+=====================================output=====================================
+<script type="application/ld+json">
+{ "json": true }
+</script>
+
+================================================================================
+`;
diff --git a/tests/html_script/jsfmt.spec.js b/tests/html_script/jsfmt.spec.js
index 53763df9b20b..53078dba5fde 100644
--- a/tests/html_script/jsfmt.spec.js
+++ b/tests/html_script/jsfmt.spec.js
@@ -1 +1,4 @@
 run_spec(__dirname, ["html"]);
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "never" });
diff --git a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
index 48ba45e0c86c..9a45fc107dc3 100644
--- a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
@@ -111,3 +111,342 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`svg.html 2`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SVG</title>
+  </head>
+  <body>
+    <svg width="100" height="100">
+      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+    </svg>
+  </body>
+</html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+<defs /> <style >
+    polygon { fill: black }
+
+    div {
+  color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+ <g>
+  <g><polygon points="5,5 195,10 185,185 10,195" />
+      <text>    Text</text></g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      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>
+    </div>
+  </foreignObject>
+</svg>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SVG</title>
+  </head>
+  <body>
+    <svg width="100" height="100">
+      <circle
+        cx="50"
+        cy="50"
+        r="40"
+        stroke="green"
+        stroke-width="4"
+        fill="yellow"
+      />
+    </svg>
+  </body>
+</html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs />
+  <style>
+    polygon {
+      fill: black;
+    }
+
+    div {
+      color: white;
+      font: 18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+  <g>
+    <g>
+      <polygon points="5,5 195,10 185,185 10,195" />
+      <text>Text</text>
+    </g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      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>
+    </div>
+  </foreignObject>
+</svg>
+
+================================================================================
+`;
+
+exports[`svg.html 3`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SVG</title>
+  </head>
+  <body>
+    <svg width="100" height="100">
+      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+    </svg>
+  </body>
+</html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+<defs /> <style >
+    polygon { fill: black }
+
+    div {
+  color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+ <g>
+  <g><polygon points="5,5 195,10 185,185 10,195" />
+      <text>    Text</text></g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      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>
+    </div>
+  </foreignObject>
+</svg>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SVG</title>
+  </head>
+  <body>
+    <svg width="100" height="100">
+      <circle
+        cx="50"
+        cy="50"
+        r="40"
+        stroke="green"
+        stroke-width="4"
+        fill="yellow"
+      />
+    </svg>
+  </body>
+</html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs />
+  <style>
+    polygon {
+      fill: black;
+    }
+
+    div {
+      color: white;
+      font: 18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+  <g>
+    <g>
+      <polygon points="5,5 195,10 185,185 10,195" />
+      <text>Text</text>
+    </g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      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>
+    </div>
+  </foreignObject>
+</svg>
+
+================================================================================
+`;
+
+exports[`svg.html 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SVG</title>
+  </head>
+  <body>
+    <svg width="100" height="100">
+      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+    </svg>
+  </body>
+</html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+<defs /> <style >
+    polygon { fill: black }
+
+    div {
+  color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+ <g>
+  <g><polygon points="5,5 195,10 185,185 10,195" />
+      <text>    Text</text></g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      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>
+    </div>
+  </foreignObject>
+</svg>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html>
+<head>
+  <title>SVG</title>
+</head>
+<body>
+  <svg width="100" height="100">
+    <circle
+      cx="50"
+      cy="50"
+      r="40"
+      stroke="green"
+      stroke-width="4"
+      fill="yellow"
+    />
+  </svg>
+</body>
+</html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+<defs />
+<style>
+  polygon {
+    fill: black;
+  }
+
+  div {
+    color: white;
+    font: 18px serif;
+    height: 100%;
+    overflow: auto;
+  }
+</style>
+
+<g>
+  <g>
+    <polygon points="5,5 195,10 185,185 10,195" />
+    <text>Text</text>
+  </g>
+</g>
+
+<!-- Common use case: embed HTML text into SVG -->
+<foreignObject x="20" y="20" width="160" height="160">
+  <!--
+      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>
+  </div>
+</foreignObject>
+</svg>
+
+================================================================================
+`;
diff --git a/tests/html_svg/jsfmt.spec.js b/tests/html_svg/jsfmt.spec.js
index 53763df9b20b..53078dba5fde 100644
--- a/tests/html_svg/jsfmt.spec.js
+++ b/tests/html_svg/jsfmt.spec.js
@@ -1 +1,4 @@
 run_spec(__dirname, ["html"]);
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "never" });
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 41f028cc18f9..fc57cbd0352e 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -75,6 +75,51 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`case-sensitive.html 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<CaseSensitive CaseSensitive="true">hello world</CaseSensitive>
+
+=====================================output=====================================
+<CaseSensitive CaseSensitive="true">hello world</CaseSensitive>
+
+================================================================================
+`;
+
+exports[`case-sensitive.html 7`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<CaseSensitive CaseSensitive="true">hello world</CaseSensitive>
+
+=====================================output=====================================
+<CaseSensitive CaseSensitive="true">hello world</CaseSensitive>
+
+================================================================================
+`;
+
+exports[`case-sensitive.html 8`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<CaseSensitive CaseSensitive="true">hello world</CaseSensitive>
+
+=====================================output=====================================
+<CaseSensitive CaseSensitive="true">hello world</CaseSensitive>
+
+================================================================================
+`;
+
 exports[`closing-at-start.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -283,6 +328,135 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`closing-at-start.html 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>
+    aaaaaaaaaa
+    <a
+      href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+      >bbbbbbbbbb</a
+    >
+    cccccccccc
+</div>
+<div>
+    aaaaaaaaaa
+    <a
+      href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+      >bbbbbbbbbb</a
+    >cccccccccc
+</div>
+
+=====================================output=====================================
+<div>
+  aaaaaaaaaa
+  <a
+    href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+    >bbbbbbbbbb</a
+  >
+  cccccccccc
+</div>
+<div>
+  aaaaaaaaaa
+  <a
+    href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+    >bbbbbbbbbb</a
+  >cccccccccc
+</div>
+
+================================================================================
+`;
+
+exports[`closing-at-start.html 7`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>
+    aaaaaaaaaa
+    <a
+      href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+      >bbbbbbbbbb</a
+    >
+    cccccccccc
+</div>
+<div>
+    aaaaaaaaaa
+    <a
+      href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+      >bbbbbbbbbb</a
+    >cccccccccc
+</div>
+
+=====================================output=====================================
+<div>
+  aaaaaaaaaa
+  <a
+    href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+    >bbbbbbbbbb</a
+  >
+  cccccccccc
+</div>
+<div>
+  aaaaaaaaaa
+  <a
+    href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+    >bbbbbbbbbb</a
+  >cccccccccc
+</div>
+
+================================================================================
+`;
+
+exports[`closing-at-start.html 8`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>
+    aaaaaaaaaa
+    <a
+      href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+      >bbbbbbbbbb</a
+    >
+    cccccccccc
+</div>
+<div>
+    aaaaaaaaaa
+    <a
+      href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+      >bbbbbbbbbb</a
+    >cccccccccc
+</div>
+
+=====================================output=====================================
+<div>
+aaaaaaaaaa
+<a
+  href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+  >bbbbbbbbbb</a
+>
+cccccccccc
+</div>
+<div>
+aaaaaaaaaa
+<a
+  href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+  >bbbbbbbbbb</a
+>cccccccccc
+</div>
+
+================================================================================
+`;
+
 exports[`custom-element.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -364,6 +538,57 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`custom-element.html 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+=====================================output=====================================
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+================================================================================
+`;
+
+exports[`custom-element.html 7`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+=====================================output=====================================
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+================================================================================
+`;
+
+exports[`custom-element.html 8`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+=====================================output=====================================
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+================================================================================
+`;
+
 exports[`openging-at-end.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -719,41 +944,233 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`pre.html 1`] = `
+exports[`openging-at-end.html 6`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["html"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-<pre>
---------------------------------------------------------------------------------
-
+<p
+  >Want to write us a letter? Use our<a
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
 
-                                      *         *       *
-                                     **        **      ***
-                                     **        **       *
-   ****    ***  ****               ********  ********                   ***  ****
-  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
- *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
-**    **     **          *   ***     **        **       **     *   ***    **
-**    **     **         **    ***    **        **       **    **    ***   **
-**    **     **         ********     **        **       **    ********    **
-**    **     **         *******      **        **       **    *******     **
-**    **     **         **           **        **       **    **          **
-*******      ***        ****    *    **        **       **    ****    *   ***
-******        ***        *******      **        **      *** *  *******     ***
-**                        *****                          ***    *****
-**
-**
- **
+<p
+  >Want to write us a letter? Use our<a
+  href="contacts.html#Mailing_address"
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
 
---------------------------------------------------------------------------------
-</pre>
-<pre>
+<p
+  >Want to write us a letter? Use our<a
+  href="contacts.html#Mailing_address"
+  href1="contacts.html#Mailing_address"
+  href2="contacts.html#Mailing_address"
+  href3="contacts.html#Mailing_address"
+  href4="contacts.html#Mailing_address"
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
 
-        Text in a pre element
+=====================================output=====================================
+<p>
+  Want to write us a letter? Use our<a
+    ><b><a>mailing address</a></b></a
+  >.
+</p>
 
-    is displayed in a fixed-width
+<p>
+  Want to write us a letter? Use our<a href="contacts.html#Mailing_address"
+    ><b><a>mailing address</a></b></a
+  >.
+</p>
+
+<p>
+  Want to write us a letter? Use our<a
+    href="contacts.html#Mailing_address"
+    href1="contacts.html#Mailing_address"
+    href2="contacts.html#Mailing_address"
+    href3="contacts.html#Mailing_address"
+    href4="contacts.html#Mailing_address"
+    ><b><a>mailing address</a></b></a
+  >.
+</p>
+
+================================================================================
+`;
+
+exports[`openging-at-end.html 7`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<p
+  >Want to write us a letter? Use our<a
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
+
+<p
+  >Want to write us a letter? Use our<a
+  href="contacts.html#Mailing_address"
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
+
+<p
+  >Want to write us a letter? Use our<a
+  href="contacts.html#Mailing_address"
+  href1="contacts.html#Mailing_address"
+  href2="contacts.html#Mailing_address"
+  href3="contacts.html#Mailing_address"
+  href4="contacts.html#Mailing_address"
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
+
+=====================================output=====================================
+<p>
+  Want to write us a letter? Use our<a
+    ><b><a>mailing address</a></b></a
+  >.
+</p>
+
+<p>
+  Want to write us a letter? Use our<a href="contacts.html#Mailing_address"
+    ><b><a>mailing address</a></b></a
+  >.
+</p>
+
+<p>
+  Want to write us a letter? Use our<a
+    href="contacts.html#Mailing_address"
+    href1="contacts.html#Mailing_address"
+    href2="contacts.html#Mailing_address"
+    href3="contacts.html#Mailing_address"
+    href4="contacts.html#Mailing_address"
+    ><b><a>mailing address</a></b></a
+  >.
+</p>
+
+================================================================================
+`;
+
+exports[`openging-at-end.html 8`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<p
+  >Want to write us a letter? Use our<a
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
+
+<p
+  >Want to write us a letter? Use our<a
+  href="contacts.html#Mailing_address"
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
+
+<p
+  >Want to write us a letter? Use our<a
+  href="contacts.html#Mailing_address"
+  href1="contacts.html#Mailing_address"
+  href2="contacts.html#Mailing_address"
+  href3="contacts.html#Mailing_address"
+  href4="contacts.html#Mailing_address"
+    ><b
+      ><a>mailing address</a></b
+    ></a
+  >.</p
+>
+
+=====================================output=====================================
+<p>
+Want to write us a letter? Use our<a
+  ><b><a>mailing address</a></b></a
+>.
+</p>
+
+<p>
+Want to write us a letter? Use our<a href="contacts.html#Mailing_address"
+  ><b><a>mailing address</a></b></a
+>.
+</p>
+
+<p>
+Want to write us a letter? Use our<a
+  href="contacts.html#Mailing_address"
+  href1="contacts.html#Mailing_address"
+  href2="contacts.html#Mailing_address"
+  href3="contacts.html#Mailing_address"
+  href4="contacts.html#Mailing_address"
+  ><b><a>mailing address</a></b></a
+>.
+</p>
+
+================================================================================
+`;
+
+exports[`pre.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<pre>
+--------------------------------------------------------------------------------
+
+
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
+
+--------------------------------------------------------------------------------
+</pre>
+<pre>
+
+        Text in a pre element
+
+    is displayed in a fixed-width
 
    font, and it preserves
 
@@ -1636,78 +2053,1685 @@ ___________________________
 ================================================================================
 `;
 
-exports[`tags.html 1`] = `
+exports[`pre.html 6`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["html"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-<br/>
-<br />
-<br  />
-<br
-/>
-<br attribute-a />
-<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute />
-<br attribute-a="value" />
-<br
-  attribute-a="value"
-/>
-<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value" />
-<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value" />
-<br attribute-a="value" attribute-b="value" attribute-c="value" attribute-d="value" attribute-e="value" attribute-f="value" />
-<div>string</div>
-<div>very very very very very very very very very very very very very very very very long string</div>
-<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute>string</div>
-<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">string</div>
-<div attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value">string</div>
-<div attribute="value">very very very very very very very very very very very very very very very very long string</div>
-<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
-<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
-<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.
-</video>
-<div><div>string</div></div>
-<div><div>string</div><div>string</div></div>
-<div><div><div>string</div></div><div>string</div></div>
-<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>string</div></div></div></div></div></div></div>
-<div>
-  <div>string</div>
-</div>
-<div>
+<pre>
+--------------------------------------------------------------------------------
 
-  <div>string</div>
 
-</div>
-<div>
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
 
-  <div>string</div>
+--------------------------------------------------------------------------------
+</pre>
+<pre>
 
-  <div>string</div>
+        Text in a pre element
 
-</div>
-<ul
-  >123<li
-    class="foo"
-    id="bar"
-  >First</li
-  >456<li
-    class="baz"
-  >Second</li
-  >789</ul
->
-<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>
+    is displayed in a fixed-width
+
+   font, and it preserves
+
+   both             spaces and
+
+   line breaks
+
+</pre>
+<pre>     Foo     Bar     </pre>
+<pre>
+     Foo     Bar
+</pre>
+<pre>Foo     Bar
+</pre>
+<pre>
+     Foo     Bar</pre>
+<figure role="img" aria-labelledby="cow-caption">
+  <pre>
+___________________________
+< I'm an expert in my field. >
+---------------------------
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||
+___________________________
+  </pre>
+  <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
+</pre>
+<div>
+  <div>
+    <div>
+      <div>
+        <pre>
+          ______
+          STRING
+          ______
+        </pre>
+      </div>
+    </div>
+  </div>
+</div>
+<pre></pre>
+
+<pre><code #foo></code></pre>
+
+=====================================output=====================================
+<pre>
+--------------------------------------------------------------------------------
+
+
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
+
+--------------------------------------------------------------------------------
+</pre>
+<pre>
+
+        Text in a pre element
+
+    is displayed in a fixed-width
+
+   font, and it preserves
+
+   both             spaces and
+
+   line breaks
+
+</pre>
+<pre>     Foo     Bar     </pre>
+<pre>
+     Foo     Bar
+</pre>
+<pre>
+Foo     Bar
+</pre>
+<pre>     Foo     Bar</pre>
+<figure role="img" aria-labelledby="cow-caption">
+  <pre>
+___________________________
+< I'm an expert in my field. >
+---------------------------
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||
+___________________________
+  </pre>
+  <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
+</pre>
+<div>
+  <div>
+    <div>
+      <div>
+        <pre>
+          ______
+          STRING
+          ______
+        </pre>
+      </div>
+    </div>
+  </div>
+</div>
+<pre></pre>
+
+<pre><code #foo></code></pre>
+
+================================================================================
+`;
+
+exports[`pre.html 7`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<pre>
+--------------------------------------------------------------------------------
+
+
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
+
+--------------------------------------------------------------------------------
+</pre>
+<pre>
+
+        Text in a pre element
+
+    is displayed in a fixed-width
+
+   font, and it preserves
+
+   both             spaces and
+
+   line breaks
+
+</pre>
+<pre>     Foo     Bar     </pre>
+<pre>
+     Foo     Bar
+</pre>
+<pre>Foo     Bar
+</pre>
+<pre>
+     Foo     Bar</pre>
+<figure role="img" aria-labelledby="cow-caption">
+  <pre>
+___________________________
+< I'm an expert in my field. >
+---------------------------
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||
+___________________________
+  </pre>
+  <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
+</pre>
+<div>
+  <div>
+    <div>
+      <div>
+        <pre>
+          ______
+          STRING
+          ______
+        </pre>
+      </div>
+    </div>
+  </div>
+</div>
+<pre></pre>
+
+<pre><code #foo></code></pre>
+
+=====================================output=====================================
+<pre>
+--------------------------------------------------------------------------------
+
+
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
+
+--------------------------------------------------------------------------------
+</pre>
+<pre>
+
+        Text in a pre element
+
+    is displayed in a fixed-width
+
+   font, and it preserves
+
+   both             spaces and
+
+   line breaks
+
+</pre>
+<pre>     Foo     Bar     </pre>
+<pre>
+     Foo     Bar
+</pre>
+<pre>
+Foo     Bar
+</pre>
+<pre>     Foo     Bar</pre>
+<figure role="img" aria-labelledby="cow-caption">
+  <pre>
+___________________________
+< I'm an expert in my field. >
+---------------------------
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||
+___________________________
+  </pre>
+  <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
+</pre>
+<div>
+  <div>
+    <div>
+      <div>
+        <pre>
+          ______
+          STRING
+          ______
+        </pre>
+      </div>
+    </div>
+  </div>
+</div>
+<pre></pre>
+
+<pre><code #foo></code></pre>
+
+================================================================================
+`;
+
+exports[`pre.html 8`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<pre>
+--------------------------------------------------------------------------------
+
+
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
+
+--------------------------------------------------------------------------------
+</pre>
+<pre>
+
+        Text in a pre element
+
+    is displayed in a fixed-width
+
+   font, and it preserves
+
+   both             spaces and
+
+   line breaks
+
+</pre>
+<pre>     Foo     Bar     </pre>
+<pre>
+     Foo     Bar
+</pre>
+<pre>Foo     Bar
+</pre>
+<pre>
+     Foo     Bar</pre>
+<figure role="img" aria-labelledby="cow-caption">
+  <pre>
+___________________________
+< I'm an expert in my field. >
+---------------------------
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||
+___________________________
+  </pre>
+  <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
+</pre>
+<div>
+  <div>
+    <div>
+      <div>
+        <pre>
+          ______
+          STRING
+          ______
+        </pre>
+      </div>
+    </div>
+  </div>
+</div>
+<pre></pre>
+
+<pre><code #foo></code></pre>
+
+=====================================output=====================================
+<pre>
+--------------------------------------------------------------------------------
+
+
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
+
+--------------------------------------------------------------------------------
+</pre>
+<pre>
+
+        Text in a pre element
+
+    is displayed in a fixed-width
+
+   font, and it preserves
+
+   both             spaces and
+
+   line breaks
+
+</pre>
+<pre>     Foo     Bar     </pre>
+<pre>
+     Foo     Bar
+</pre>
+<pre>
+Foo     Bar
+</pre>
+<pre>     Foo     Bar</pre>
+<figure role="img" aria-labelledby="cow-caption">
+<pre>
+___________________________
+< I'm an expert in my field. >
+---------------------------
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||
+___________________________
+  </pre>
+<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
+</pre>
+<div>
+<div>
+  <div>
+    <div>
+      <pre>
+          ______
+          STRING
+          ______
+        </pre>
+    </div>
+  </div>
+</div>
+</div>
+<pre></pre>
+
+<pre><code #foo></code></pre>
+
+================================================================================
+`;
+
+exports[`tags.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<br/>
+<br />
+<br  />
+<br
+/>
+<br attribute-a />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute />
+<br attribute-a="value" />
+<br
+  attribute-a="value"
+/>
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value" />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value" />
+<br attribute-a="value" attribute-b="value" attribute-c="value" attribute-d="value" attribute-e="value" attribute-f="value" />
+<div>string</div>
+<div>very very very very very very very very very very very very very very very very long string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute>string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">string</div>
+<div attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value">string</div>
+<div attribute="value">very very very very very very very very very very very very very very very very long string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
+<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.
+</video>
+<div><div>string</div></div>
+<div><div>string</div><div>string</div></div>
+<div><div><div>string</div></div><div>string</div></div>
+<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>string</div></div></div></div></div></div></div>
+<div>
+  <div>string</div>
+</div>
+<div>
+
+  <div>string</div>
+
+</div>
+<div>
+
+  <div>string</div>
+
+  <div>string</div>
+
+</div>
+<ul
+  >123<li
+    class="foo"
+    id="bar"
+  >First</li
+  >456<li
+    class="baz"
+  >Second</li
+  >789</ul
+>
+<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 />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</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 />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<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>
+<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 />
+<br />
+<br />
+<br />
+<br attribute-a />
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
+/>
+<br attribute-a="value" />
+<br attribute-a="value" />
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
+/>
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
+/>
+<br
+  attribute-a="value"
+  attribute-b="value"
+  attribute-c="value"
+  attribute-d="value"
+  attribute-e="value"
+  attribute-f="value"
+/>
+<div>string</div>
+<div>
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
+<div
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
+>
+  string
+</div>
+<div
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
+>
+  string
+</div>
+<div
+  attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
+>
+  string
+</div>
+<div attribute="value">
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
+<div
+  attribute="value"
+  attributea="value"
+  attributeb="value"
+  attributec="value"
+  attributed="value"
+  attributef="value"
+>
+  string
+</div>
+<div
+  attribute="value"
+  attributea="value"
+  attributeb="value"
+  attributec="value"
+  attributed="value"
+  attributef="value"
+>
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
+<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.
+</video>
+<div><div>string</div></div>
+<div>
+  <div>string</div>
+  <div>string</div>
+</div>
+<div>
+  <div><div>string</div></div>
+  <div>string</div>
+</div>
+<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>string</div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+
+  <div>string</div>
+</div>
+<ul>
+  123
+  <li class="foo" id="bar">First</li>
+  456
+  <li class="baz">Second</li>
+  789
+</ul>
+<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 />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</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 />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>
+  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+</li>
+<div>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-nav [input]="something"></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet>
+  <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>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
+
+================================================================================
+`;
+
+exports[`tags.html 2`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 1
+ | printWidth
+=====================================input======================================
+<br/>
+<br />
+<br  />
+<br
+/>
+<br attribute-a />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute />
+<br attribute-a="value" />
+<br
+  attribute-a="value"
+/>
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value" />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value" />
+<br attribute-a="value" attribute-b="value" attribute-c="value" attribute-d="value" attribute-e="value" attribute-f="value" />
+<div>string</div>
+<div>very very very very very very very very very very very very very very very very long string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute>string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">string</div>
+<div attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value">string</div>
+<div attribute="value">very very very very very very very very very very very very very very very very long string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
+<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.
+</video>
+<div><div>string</div></div>
+<div><div>string</div><div>string</div></div>
+<div><div><div>string</div></div><div>string</div></div>
+<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>string</div></div></div></div></div></div></div>
+<div>
+  <div>string</div>
+</div>
+<div>
+
+  <div>string</div>
+
+</div>
+<div>
+
+  <div>string</div>
+
+  <div>string</div>
+
+</div>
+<ul
+  >123<li
+    class="foo"
+    id="bar"
+  >First</li
+  >456<li
+    class="baz"
+  >Second</li
+  >789</ul
+>
+<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 />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</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 />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<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>
+<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 />
+<br />
+<br />
+<br />
+<br
+  attribute-a
+/>
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
+/>
+<br
+  attribute-a="value"
+/>
+<br
+  attribute-a="value"
+/>
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
+/>
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
+/>
+<br
+  attribute-a="value"
+  attribute-b="value"
+  attribute-c="value"
+  attribute-d="value"
+  attribute-e="value"
+  attribute-f="value"
+/>
+<div>
+  string
+</div>
+<div>
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  long
+  string
+</div>
+<div
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
+>
+  string
+</div>
+<div
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
+>
+  string
+</div>
+<div
+  attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
+>
+  string
+</div>
+<div
+  attribute="value"
+>
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  long
+  string
+</div>
+<div
+  attribute="value"
+  attributea="value"
+  attributeb="value"
+  attributec="value"
+  attributed="value"
+  attributef="value"
+>
+  string
+</div>
+<div
+  attribute="value"
+  attributea="value"
+  attributeb="value"
+  attributec="value"
+  attributed="value"
+  attributef="value"
+>
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  very
+  long
+  string
+</div>
+<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.
+</video>
+<div>
+  <div>
+    string
+  </div>
+</div>
+<div>
+  <div>
+    string
+  </div>
+  <div>
+    string
+  </div>
+</div>
+<div>
+  <div>
+    <div>
+      string
+    </div>
+  </div>
+  <div>
+    string
+  </div>
+</div>
+<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>
+              string
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div>
+    string
+  </div>
+</div>
+<div>
+  <div>
+    string
+  </div>
+</div>
+<div>
+  <div>
+    string
+  </div>
+
+  <div>
+    string
+  </div>
+</div>
+<ul>
+  123
+  <li
+    class="foo"
+    id="bar"
+  >
+    First
+  </li>
+  456
+  <li
+    class="baz"
+  >
+    Second
+  </li>
+  789
+</ul>
+<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 />
+<button
+  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+>
+  12345678901234567890
+</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 />
+<p>
+  "<span
+    [innerHTML]="title"
+  ></span
+  >"
+  is
+  the
+  <i
+    >property
+    bound</i
+  >
+  title.
+</p>
+<li>
+  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+</li>
+<div>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-nav
+    [input]="something"
+  ></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet>
+  <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>
+<span>
+  <i
+    class="fa fa-refresh fa-spin"
+  />
+  <i
+    class="fa fa-refresh fa-spin"
+  />
+  <i
+    class="fa fa-refresh fa-spin"
+  />
+</span>
+
+================================================================================
+`;
+
+exports[`tags.html 3`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: Infinity
+=====================================input======================================
+<br/>
+<br />
+<br  />
+<br
+/>
+<br attribute-a />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute />
+<br attribute-a="value" />
+<br
+  attribute-a="value"
+/>
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value" />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value" />
+<br attribute-a="value" attribute-b="value" attribute-c="value" attribute-d="value" attribute-e="value" attribute-f="value" />
+<div>string</div>
+<div>very very very very very very very very very very very very very very very very long string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute>string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">string</div>
+<div attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value">string</div>
+<div attribute="value">very very very very very very very very very very very very very very very very long string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
+<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.
+</video>
+<div><div>string</div></div>
+<div><div>string</div><div>string</div></div>
+<div><div><div>string</div></div><div>string</div></div>
+<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>string</div></div></div></div></div></div></div>
+<div>
+  <div>string</div>
+</div>
+<div>
+
+  <div>string</div>
+
+</div>
+<div>
+
+  <div>string</div>
+
+  <div>string</div>
+
+</div>
+<ul
+  >123<li
+    class="foo"
+    id="bar"
+  >First</li
+  >456<li
+    class="baz"
+  >Second</li
+  >789</ul
+>
+<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 />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</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 />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<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>
+<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 />
+<br />
+<br />
+<br />
+<br attribute-a />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute />
+<br attribute-a="value" />
+<br attribute-a="value" />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value" />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value" />
+<br attribute-a="value" attribute-b="value" attribute-c="value" attribute-d="value" attribute-e="value" attribute-f="value" />
+<div>string</div>
+<div>very very very very very very very very very very very very very very very very long string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute>string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">string</div>
+<div attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value">string</div>
+<div attribute="value">very very very very very very very very very very very very very very very very long string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
+<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.
+</video>
+<div><div>string</div></div>
+<div>
+  <div>string</div>
+  <div>string</div>
+</div>
+<div>
+  <div><div>string</div></div>
+  <div>string</div>
+</div>
+<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>string</div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+</div>
+<div>
+  <div>string</div>
+
+  <div>string</div>
+</div>
+<ul>
+  123
+  <li class="foo" id="bar">First</li>
+  456
+  <li class="baz">Second</li>
+  789
+</ul>
+<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 />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</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 />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-nav [input]="something"></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet>
+  <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>
+<span>
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+</span>
+
+================================================================================
+`;
+
+exports[`tags.html 4`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "strict"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<br/>
+<br />
+<br  />
+<br
+/>
+<br attribute-a />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute />
+<br attribute-a="value" />
+<br
+  attribute-a="value"
+/>
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value" />
+<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value" />
+<br attribute-a="value" attribute-b="value" attribute-c="value" attribute-d="value" attribute-e="value" attribute-f="value" />
+<div>string</div>
+<div>very very very very very very very very very very very very very very very very long string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute>string</div>
+<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">string</div>
+<div attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value">string</div>
+<div attribute="value">very very very very very very very very very very very very very very very very long string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
+<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
+<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.
+</video>
+<div><div>string</div></div>
+<div><div>string</div><div>string</div></div>
+<div><div><div>string</div></div><div>string</div></div>
+<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>string</div></div></div></div></div></div></div>
+<div>
+  <div>string</div>
+</div>
+<div>
+
+  <div>string</div>
+
+</div>
+<div>
+
+  <div>string</div>
+
+  <div>string</div>
+
+</div>
+<ul
+  >123<li
+    class="foo"
+    id="bar"
+  >First</li
+  >456<li
+    class="baz"
+  >Second</li
+  >789</ul
+>
+<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>
@@ -1784,29 +3808,26 @@ printWidth: 80
   attribute-f="value"
 />
 <div>string</div>
-<div>
-  very very very very very very very very very very very very very very very
-  very long string
-</div>
+<div
+  >very very very very very very very very very very very very very very very
+  very long string</div
+>
 <div
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
+  >string</div
 >
-  string
-</div>
 <div
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
+  >string</div
 >
-  string
-</div>
 <div
   attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
+  >string</div
+>
+<div attribute="value"
+  >very very very very very very very very very very very very very very very
+  very long string</div
 >
-  string
-</div>
-<div attribute="value">
-  very very very very very very very very very very very very very very very
-  very long string
-</div>
 <div
   attribute="value"
   attributea="value"
@@ -1814,9 +3835,8 @@ printWidth: 80
   attributec="value"
   attributed="value"
   attributef="value"
+  >string</div
 >
-  string
-</div>
 <div
   attribute="value"
   attributea="value"
@@ -1824,44 +3844,36 @@ printWidth: 80
   attributec="value"
   attributed="value"
   attributef="value"
+  >very very very very very very very very very very very very very very very
+  very long string</div
 >
-  very very very very very very very very very very very very very very very
-  very long string
-</div>
 <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.
 </video>
 <div><div>string</div></div>
-<div>
-  <div>string</div>
-  <div>string</div>
-</div>
-<div>
-  <div><div>string</div></div>
-  <div>string</div>
-</div>
-<div>
-  <div>string</div>
-  <div><div>string</div></div>
-</div>
+<div><div>string</div><div>string</div></div>
+<div
+  ><div><div>string</div></div
+  ><div>string</div></div
+>
+<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>string</div></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<div><div></div><div></div></div>
+<div
+  ><div
+    ><div
+      ><div
+        ><div
+          ><div><div>string</div></div></div
+        ></div
+      ></div
+    ></div
+  ></div
+>
 <div>
   <div>string</div>
 </div>
@@ -1873,20 +3885,18 @@ printWidth: 80
 
   <div>string</div>
 </div>
-<ul>
-  123
-  <li class="foo" id="bar">First</li>
-  456
-  <li class="baz">Second</li>
-  789
-</ul>
+<ul
+  >123<li class="foo" id="bar">First</li
+  >456<li class="baz">Second</li
+  >789</ul
+>
 <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 a/></p>
 <p>x<meta /></p>
 <span></span>
 
@@ -1899,21 +3909,21 @@ printWidth: 80
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
 <br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)">
-  Disabled Cancel
-</button>
+<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>
+<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>
+<li
+  >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
+>
 <div>
   <app-nav></app-nav>
   <router-outlet></router-outlet>
@@ -1945,11 +3955,12 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`tags.html 2`] = `
+exports[`tags.html 5`] = `
 ====================================options=====================================
+htmlWhitespaceSensitivity: "ignore"
 parsers: ["html"]
-printWidth: 1
- | printWidth
+printWidth: 80
+                                                                                | printWidth
 =====================================input======================================
 <br/>
 <br />
@@ -2072,18 +4083,12 @@ printWidth: 1
 <br />
 <br />
 <br />
-<br
-  attribute-a
-/>
+<br attribute-a />
 <br
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
 />
-<br
-  attribute-a="value"
-/>
-<br
-  attribute-a="value"
-/>
+<br attribute-a="value" />
+<br attribute-a="value" />
 <br
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
 />
@@ -2098,28 +4103,10 @@ printWidth: 1
   attribute-e="value"
   attribute-f="value"
 />
+<div>string</div>
 <div>
-  string
-</div>
-<div>
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  long
-  string
+  very very very very very very very very very very very very very very very
+  very long string
 </div>
 <div
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
@@ -2136,27 +4123,9 @@ printWidth: 1
 >
   string
 </div>
-<div
-  attribute="value"
->
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  long
-  string
+<div attribute="value">
+  very very very very very very very very very very very very very very very
+  very long string
 </div>
 <div
   attribute="value"
@@ -2176,83 +4145,28 @@ printWidth: 1
   attributed="value"
   attributef="value"
 >
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  very
-  long
-  string
+  very very very very very very very very very very very very very very very
+  very long string
 </div>
-<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.
+<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.
 </video>
+<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>string</div>
+  <div>string</div>
 </div>
 <div>
-  <div>
-    string
-  </div>
-  <div>
-    <div>
-      string
-    </div>
-  </div>
+  <div><div>string</div></div>
+  <div>string</div>
 </div>
 <div>
-  <div></div>
+  <div>string</div>
+  <div><div>string</div></div>
 </div>
+<div><div></div></div>
 <div>
   <div></div>
   <div></div>
@@ -2262,76 +4176,54 @@ printWidth: 1
     <div>
       <div>
         <div>
-          <div>
-            <div>
-              string
-            </div>
-          </div>
+          <div><div>string</div></div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div>
-  <div>
-    string
-  </div>
+  <div>string</div>
 </div>
 <div>
-  <div>
-    string
-  </div>
+  <div>string</div>
 </div>
 <div>
-  <div>
-    string
-  </div>
+  <div>string</div>
 
-  <div>
-    string
-  </div>
+  <div>string</div>
 </div>
 <ul>
   123
-  <li
-    class="foo"
-    id="bar"
-  >
-    First
-  </li>
+  <li class="foo" id="bar">First</li>
   456
-  <li
-    class="baz"
-  >
-    Second
-  </li>
+  <li class="baz">Second</li>
   789
 </ul>
-<span
-  >*<b
-    >200</b
-  ></span
->
+<span>
+  *
+  <b>200</b>
+</span>
 <img
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-/>123
+/>
+123
 <div>
-  123<meta
-    attr
-  />456
+  123
+  <meta attr />
+  456
 </div>
 <p>
-  x<span
-    a="b"
-  ></span>
+  x
+  <span a="b"></span>
 </p>
 <p>
-  x<meta
-    a
-  />
+  x
+  <meta a />
 </p>
 <p>
-  x<meta />
+  x
+  <meta />
 </p>
 <span></span>
 
@@ -2341,47 +4233,29 @@ printWidth: 1
 |
 <span></span>
 <br />
-<button
-  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
->
-  12345678901234567890
-</button>
-<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br />
+<br />
 
-<button
-  bind-disabled="isUnchanged"
-  on-click="onSave($event)"
->
-  Disabled
-  Cancel
-</button>
-<br /><br />
-<button
-  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
->
-  12345678901234567890
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
 </button>
-<br /><br />
+<br />
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br />
+<br />
 
-<button
-  bind-disabled="isUnchanged"
-  on-click="onSave($event)"
->
-  Disabled
-  Cancel
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
 </button>
-<br /><br />
+<br />
+<br />
 <p>
-  "<span
-    [innerHTML]="title"
-  ></span
-  >"
-  is
-  the
-  <i
-    >property
-    bound</i
-  >
+  "
+  <span [innerHTML]="title"></span>
+  " is the
+  <i>property bound</i>
   title.
 </p>
 <li>
@@ -2392,73 +4266,40 @@ printWidth: 1
   <router-outlet></router-outlet>
   <app-footer></app-footer>
 
-  <app-nav
-    [input]="something"
-  ></app-nav>
+  <app-nav [input]="something"></app-nav>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
 
   <app-primary-navigation></app-primary-navigation>
   <router-outlet></router-outlet>
-  <app-footer
-    [input]="something"
-  ></app-footer>
+  <app-footer [input]="something"></app-footer>
 </div>
-<x:root
-  ><SPAN
-    >foreign
-    tag
-    name
-    should
-    not
-    be
-    lower
-    cased</SPAN
-  ></x:root
->
+<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>".
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
+  <strong>seddoeiusmod</strong>
+  ".
 </div>
 <div>
-  Lorem
-  ipsum
-  dolor
-  sit
-  amet,
-  consectetur
-  adipiscing
-  elit,
-  <strong
-    >seddoeiusmod</strong
-  >.
+  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"
-  />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
+  <i class="fa fa-refresh fa-spin" />
 </span>
 
 ================================================================================
 `;
 
-exports[`tags.html 3`] = `
+exports[`tags.html 6`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["html"]
-printWidth: Infinity
+printWidth: 80
+                                                                                | printWidth
 =====================================input======================================
 <br/>
 <br />
@@ -2582,20 +4423,70 @@ printWidth: Infinity
 <br />
 <br />
 <br attribute-a />
-<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute />
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
+/>
 <br attribute-a="value" />
 <br attribute-a="value" />
-<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value" />
-<br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value" />
-<br attribute-a="value" attribute-b="value" attribute-c="value" attribute-d="value" attribute-e="value" attribute-f="value" />
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
+/>
+<br
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
+/>
+<br
+  attribute-a="value"
+  attribute-b="value"
+  attribute-c="value"
+  attribute-d="value"
+  attribute-e="value"
+  attribute-f="value"
+/>
 <div>string</div>
-<div>very very very very very very very very very very very very very very very very long string</div>
-<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute>string</div>
-<div very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">string</div>
-<div attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value">string</div>
-<div attribute="value">very very very very very very very very very very very very very very very very long string</div>
-<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
-<div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
+<div>
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
+<div
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
+>
+  string
+</div>
+<div
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
+>
+  string
+</div>
+<div
+  attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
+>
+  string
+</div>
+<div attribute="value">
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
+<div
+  attribute="value"
+  attributea="value"
+  attributeb="value"
+  attributec="value"
+  attributed="value"
+  attributef="value"
+>
+  string
+</div>
+<div
+  attribute="value"
+  attributea="value"
+  attributeb="value"
+  attributec="value"
+  attributed="value"
+  attributef="value"
+>
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
 <video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.ogg" type="video/ogg" />
@@ -2649,26 +4540,39 @@ printWidth: Infinity
   789
 </ul>
 <span>*<b>200</b></span>
-<img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<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> |
+<label
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+></label>
+|
 <span></span>
 <br />
-<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
+</button>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
 <br /><br />
-<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<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>
+<li>
+  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+</li>
 <div>
   <app-nav></app-nav>
   <router-outlet></router-outlet>
@@ -2684,7 +4588,8 @@ printWidth: Infinity
 </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>".
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
 </div>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -2699,9 +4604,9 @@ printWidth: Infinity
 ================================================================================
 `;
 
-exports[`tags.html 4`] = `
+exports[`tags.html 7`] = `
 ====================================options=====================================
-htmlWhitespaceSensitivity: "strict"
+htmlTopLevelIndent: "always"
 parsers: ["html"]
 printWidth: 80
                                                                                 | printWidth
@@ -2848,26 +4753,29 @@ printWidth: 80
   attribute-f="value"
 />
 <div>string</div>
-<div
-  >very very very very very very very very very very very very very very very
-  very long string</div
->
+<div>
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
 <div
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
-  >string</div
 >
+  string
+</div>
 <div
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
-  >string</div
 >
+  string
+</div>
 <div
   attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
-  >string</div
->
-<div attribute="value"
-  >very very very very very very very very very very very very very very very
-  very long string</div
 >
+  string
+</div>
+<div attribute="value">
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
 <div
   attribute="value"
   attributea="value"
@@ -2875,8 +4783,9 @@ printWidth: 80
   attributec="value"
   attributed="value"
   attributef="value"
-  >string</div
 >
+  string
+</div>
 <div
   attribute="value"
   attributea="value"
@@ -2884,36 +4793,44 @@ printWidth: 80
   attributec="value"
   attributed="value"
   attributef="value"
-  >very very very very very very very very very very very very very very very
-  very long string</div
 >
+  very very very very very very very very very very very very very very very
+  very long string
+</div>
 <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.
 </video>
 <div><div>string</div></div>
-<div><div>string</div><div>string</div></div>
-<div
-  ><div><div>string</div></div
-  ><div>string</div></div
->
-<div
-  ><div>string</div><div><div>string</div></div></div
->
+<div>
+  <div>string</div>
+  <div>string</div>
+</div>
+<div>
+  <div><div>string</div></div>
+  <div>string</div>
+</div>
+<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>string</div></div></div
-        ></div
-      ></div
-    ></div
-  ></div
->
+<div>
+  <div></div>
+  <div></div>
+</div>
+<div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div><div>string</div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 <div>
   <div>string</div>
 </div>
@@ -2925,18 +4842,20 @@ printWidth: 80
 
   <div>string</div>
 </div>
-<ul
-  >123<li class="foo" id="bar">First</li
-  >456<li class="baz">Second</li
-  >789</ul
->
+<ul>
+  123
+  <li class="foo" id="bar">First</li>
+  456
+  <li class="baz">Second</li>
+  789
+</ul>
 <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 a /></p>
 <p>x<meta /></p>
 <span></span>
 
@@ -2949,21 +4868,21 @@ printWidth: 80
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
 <br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)"
-  >Disabled Cancel</button
->
+<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
->
+<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
->
+<li>
+  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+</li>
 <div>
   <app-nav></app-nav>
   <router-outlet></router-outlet>
@@ -2995,9 +4914,9 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`tags.html 5`] = `
+exports[`tags.html 8`] = `
 ====================================options=====================================
-htmlWhitespaceSensitivity: "ignore"
+htmlTopLevelIndent: "never"
 parsers: ["html"]
 printWidth: 80
                                                                                 | printWidth
@@ -3145,27 +5064,27 @@ printWidth: 80
 />
 <div>string</div>
 <div>
-  very very very very very very very very very very very very very very very
-  very long string
+very very very very very very very very very very very very very very very very
+long string
 </div>
 <div
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
 >
-  string
+string
 </div>
 <div
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value"
 >
-  string
+string
 </div>
 <div
   attribute="very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value"
 >
-  string
+string
 </div>
 <div attribute="value">
-  very very very very very very very very very very very very very very very
-  very long string
+very very very very very very very very very very very very very very very very
+long string
 </div>
 <div
   attribute="value"
@@ -3175,7 +5094,7 @@ printWidth: 80
   attributed="value"
   attributef="value"
 >
-  string
+string
 </div>
 <div
   attribute="value"
@@ -3185,86 +5104,69 @@ printWidth: 80
   attributed="value"
   attributef="value"
 >
-  very very very very very very very very very very very very very very very
-  very long string
+very very very very very very very very very very very very very very very very
+long string
 </div>
 <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.mp4" type="video/mp4" />
+<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>string</div>
+<div>string</div>
 </div>
 <div>
-  <div><div>string</div></div>
-  <div>string</div>
+<div><div>string</div></div>
+<div>string</div>
 </div>
 <div>
-  <div>string</div>
-  <div><div>string</div></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>string</div></div>
-        </div>
+        <div><div>string</div></div>
       </div>
     </div>
   </div>
 </div>
+</div>
 <div>
-  <div>string</div>
+<div>string</div>
 </div>
 <div>
-  <div>string</div>
+<div>string</div>
 </div>
 <div>
-  <div>string</div>
+<div>string</div>
 
-  <div>string</div>
+<div>string</div>
 </div>
 <ul>
-  123
-  <li class="foo" id="bar">First</li>
-  456
-  <li class="baz">Second</li>
-  789
+123
+<li class="foo" id="bar">First</li>
+456
+<li class="baz">Second</li>
+789
 </ul>
-<span>
-  *
-  <b>200</b>
-</span>
+<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>
+/>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
@@ -3274,61 +5176,49 @@ printWidth: 80
 <span></span>
 <br />
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
-<br />
-<br />
+<br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)">
-  Disabled Cancel
+Disabled Cancel
 </button>
-<br />
-<br />
+<br /><br />
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
-<br />
-<br />
+<br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)">
-  Disabled Cancel
+Disabled Cancel
 </button>
-<br />
-<br />
-<p>
-  "
-  <span [innerHTML]="title"></span>
-  " is the
-  <i>property bound</i>
-  title.
-</p>
+<br /><br />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>
-  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+12345678901234567890123456789012345678901234567890123456789012345678901234567890
 </li>
 <div>
-  <app-nav></app-nav>
-  <router-outlet></router-outlet>
-  <app-footer></app-footer>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
 
-  <app-nav [input]="something"></app-nav>
-  <router-outlet></router-outlet>
-  <app-footer></app-footer>
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
 
-  <app-primary-navigation></app-primary-navigation>
-  <router-outlet></router-outlet>
-  <app-footer [input]="something"></app-footer>
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<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>
-  .
+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" />
+<i class="fa fa-refresh fa-spin" />
+<i class="fa fa-refresh fa-spin" />
+<i class="fa fa-refresh fa-spin" />
 </span>
 
 ================================================================================
@@ -3703,6 +5593,225 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`textarea.html 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <textarea rows="10" cols="45" name="text">
+                        String
+                        </textarea>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
+
+=====================================output=====================================
+<div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <textarea rows="10" cols="45" name="text">
+                        String
+                        </textarea>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
+
+================================================================================
+`;
+
+exports[`textarea.html 7`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <textarea rows="10" cols="45" name="text">
+                        String
+                        </textarea>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
+
+=====================================output=====================================
+<div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <textarea rows="10" cols="45" name="text">
+                        String
+                        </textarea>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
+
+================================================================================
+`;
+
+exports[`textarea.html 8`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <textarea rows="10" cols="45" name="text">
+                        String
+                        </textarea>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
+
+=====================================output=====================================
+<div>
+<div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <textarea rows="10" cols="45" name="text">
+                        String
+                        </textarea>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+<textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
+
+================================================================================
+`;
+
 exports[`unsupported.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -3773,3 +5882,48 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`unsupported.html 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<center></center>
+
+=====================================output=====================================
+<center></center>
+
+================================================================================
+`;
+
+exports[`unsupported.html 7`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<center></center>
+
+=====================================output=====================================
+<center></center>
+
+================================================================================
+`;
+
+exports[`unsupported.html 8`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<center></center>
+
+=====================================output=====================================
+<center></center>
+
+================================================================================
+`;
diff --git a/tests/html_tags/jsfmt.spec.js b/tests/html_tags/jsfmt.spec.js
index 27febda276cf..1863924e3ce4 100644
--- a/tests/html_tags/jsfmt.spec.js
+++ b/tests/html_tags/jsfmt.spec.js
@@ -3,3 +3,6 @@ run_spec(__dirname, ["html"], { printWidth: 1 });
 run_spec(__dirname, ["html"], { printWidth: Infinity });
 run_spec(__dirname, ["html"], { htmlWhitespaceSensitivity: "strict" });
 run_spec(__dirname, ["html"], { htmlWhitespaceSensitivity: "ignore" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["html"], { htmlTopLevelIndent: "never" });
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 648d73daf513..6936b452d4de 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -326,6 +326,333 @@ semi: false
 ================================================================================
 `;
 
+exports[`attributes.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="{row}"
+  slot-scope="{destructuring:{a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
+  @click="() => {console.log(test)}"
+  @click="
+    () => {
+      console.log(test);
+    }
+  "
+  @click="doSomething()"
+  @click="doSomething;"
+></div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div
+    v-for="item in items"
+    v-for="item of items"
+    v-for="(item, index) in items"
+    v-for="value in object"
+    v-for="(value, key) in object"
+    v-for="(value, key) of object"
+    v-for="(value, key, index) in object"
+    v-for="n in evenNumbers"
+    v-for="n in even(numbers)"
+    v-for="n in 10"
+    v-for="{ a } in [0].map(() => ({ a: 1 }))"
+    v-for="({ a }, [c]) in [0].map(() => 1)"
+    v-for="n in items.map(x => {
+      return x;
+    })"
+    @click="/* hello */"
+    @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */ /* 5 */"
+    @click="$emit('click')"
+    @click="$emit('click')"
+    @click="
+      $emit('click');
+      if (something) {
+        for (let i = j; i < 100; i++) {}
+      } else {
+      }
+    "
+    slot-scope="{ row }"
+    slot-scope="{
+      destructuring: {
+        a: { b }
+      }
+    }"
+    :class="{
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+    }"
+    :class="
+      (() => {
+        return 'hello';
+      })()
+    "
+    :key="index /* hello */"
+    :key="
+      index // hello
+    "
+    @click="
+      () => {
+        console.log(test);
+      }
+    "
+    @click="
+      () => {
+        console.log(test);
+      }
+    "
+    @click="doSomething()"
+    @click="doSomething;"
+  ></div>
+</template>
+
+================================================================================
+`;
+
+exports[`attributes.vue 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="{row}"
+  slot-scope="{destructuring:{a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
+  @click="() => {console.log(test)}"
+  @click="
+    () => {
+      console.log(test);
+    }
+  "
+  @click="doSomething()"
+  @click="doSomething;"
+></div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div
+    v-for="item in items"
+    v-for="item of items"
+    v-for="(item, index) in items"
+    v-for="value in object"
+    v-for="(value, key) in object"
+    v-for="(value, key) of object"
+    v-for="(value, key, index) in object"
+    v-for="n in evenNumbers"
+    v-for="n in even(numbers)"
+    v-for="n in 10"
+    v-for="{ a } in [0].map(() => ({ a: 1 }))"
+    v-for="({ a }, [c]) in [0].map(() => 1)"
+    v-for="n in items.map(x => {
+      return x;
+    })"
+    @click="/* hello */"
+    @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */ /* 5 */"
+    @click="$emit('click')"
+    @click="$emit('click')"
+    @click="
+      $emit('click');
+      if (something) {
+        for (let i = j; i < 100; i++) {}
+      } else {
+      }
+    "
+    slot-scope="{ row }"
+    slot-scope="{
+      destructuring: {
+        a: { b }
+      }
+    }"
+    :class="{
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+    }"
+    :class="
+      (() => {
+        return 'hello';
+      })()
+    "
+    :key="index /* hello */"
+    :key="
+      index // hello
+    "
+    @click="
+      () => {
+        console.log(test);
+      }
+    "
+    @click="
+      () => {
+        console.log(test);
+      }
+    "
+    @click="doSomething()"
+    @click="doSomething;"
+  ></div>
+</template>
+
+================================================================================
+`;
+
+exports[`attributes.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="{row}"
+  slot-scope="{destructuring:{a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
+  @click="() => {console.log(test)}"
+  @click="
+    () => {
+      console.log(test);
+    }
+  "
+  @click="doSomething()"
+  @click="doSomething;"
+></div>
+</template>
+
+=====================================output=====================================
+<template>
+<div
+  v-for="item in items"
+  v-for="item of items"
+  v-for="(item, index) in items"
+  v-for="value in object"
+  v-for="(value, key) in object"
+  v-for="(value, key) of object"
+  v-for="(value, key, index) in object"
+  v-for="n in evenNumbers"
+  v-for="n in even(numbers)"
+  v-for="n in 10"
+  v-for="{ a } in [0].map(() => ({ a: 1 }))"
+  v-for="({ a }, [c]) in [0].map(() => 1)"
+  v-for="n in items.map(x => {
+    return x;
+  })"
+  @click="/* hello */"
+  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */ /* 5 */"
+  @click="$emit('click')"
+  @click="$emit('click')"
+  @click="
+    $emit('click');
+    if (something) {
+      for (let i = j; i < 100; i++) {}
+    } else {
+    }
+  "
+  slot-scope="{ row }"
+  slot-scope="{
+    destructuring: {
+      a: { b }
+    }
+  }"
+  :class="{
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+  }"
+  :class="
+    (() => {
+      return 'hello';
+    })()
+  "
+  :key="index /* hello */"
+  :key="
+    index // hello
+  "
+  @click="
+    () => {
+      console.log(test);
+    }
+  "
+  @click="
+    () => {
+      console.log(test);
+    }
+  "
+  @click="doSomething()"
+  @click="doSomething;"
+></div>
+</template>
+
+================================================================================
+`;
+
 exports[`board_card.vue 1`] = `
 ====================================options=====================================
 parsers: ["vue"]
@@ -491,11 +818,509 @@ export default {
 ================================================================================
 `;
 
-exports[`board_card.vue 2`] = `
+exports[`board_card.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<script>
+import './issue_card_inner';
+import eventHub from '../eventhub';
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardsIssueCard',
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains('js-no-trigger')) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit('clearDetailIssue');
+        } else {
+          eventHub.$emit('newDetailIssue', this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="card"
+    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)">
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true" />
+  </li>
+</template>
+
+=====================================output=====================================
+<script>
+import "./issue_card_inner";
+import eventHub from "../eventhub";
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: "BoardsIssueCard",
+  components: {
+    "issue-card-inner": gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains("js-no-trigger")) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit("clearDetailIssue");
+        } else {
+          eventHub.$emit("newDetailIssue", this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible,
+    }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)"
+  >
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true"
+    />
+  </li>
+</template>
+
+================================================================================
+`;
+
+exports[`board_card.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<script>
+import './issue_card_inner';
+import eventHub from '../eventhub';
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardsIssueCard',
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains('js-no-trigger')) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit('clearDetailIssue');
+        } else {
+          eventHub.$emit('newDetailIssue', this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="card"
+    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)">
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true" />
+  </li>
+</template>
+
+=====================================output=====================================
+<script>
+import "./issue_card_inner"
+import eventHub from "../eventhub"
+
+const Store = gl.issueBoards.BoardsStore
+
+export default {
+  name: "BoardsIssueCard",
+  components: {
+    "issue-card-inner": gl.issueBoards.IssueCardInner
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail
+    }
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      )
+    }
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true
+    },
+    mouseMove() {
+      this.showDetail = false
+    },
+    showIssue(e) {
+      if (e.target.classList.contains("js-no-trigger")) return
+
+      if (this.showDetail) {
+        this.showDetail = false
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit("clearDetailIssue")
+        } else {
+          eventHub.$emit("newDetailIssue", this.issue)
+          Store.detail.list = this.list
+        }
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible
+    }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)"
+  >
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true"
+    />
+  </li>
+</template>
+
+================================================================================
+`;
+
+exports[`board_card.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>
+import './issue_card_inner';
+import eventHub from '../eventhub';
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardsIssueCard',
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains('js-no-trigger')) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit('clearDetailIssue');
+        } else {
+          eventHub.$emit('newDetailIssue', this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="card"
+    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)">
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true" />
+  </li>
+</template>
+
+=====================================output=====================================
+<script>
+import "./issue_card_inner";
+import eventHub from "../eventhub";
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: "BoardsIssueCard",
+  components: {
+    "issue-card-inner": gl.issueBoards.IssueCardInner
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    }
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains("js-no-trigger")) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit("clearDetailIssue");
+        } else {
+          eventHub.$emit("newDetailIssue", this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible
+    }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)"
+  >
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true"
+    />
+  </li>
+</template>
+
+================================================================================
+`;
+
+exports[`board_card.vue 5`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["vue"]
 printWidth: 80
-trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <script>
@@ -574,60 +1399,60 @@ export default {
 
 =====================================output=====================================
 <script>
-import "./issue_card_inner";
-import eventHub from "../eventhub";
+  import "./issue_card_inner";
+  import eventHub from "../eventhub";
 
-const Store = gl.issueBoards.BoardsStore;
+  const Store = gl.issueBoards.BoardsStore;
 
-export default {
-  name: "BoardsIssueCard",
-  components: {
-    "issue-card-inner": gl.issueBoards.IssueCardInner,
-  },
-  props: {
-    list: Object,
-    issue: Object,
-    issueLinkBase: String,
-    disabled: Boolean,
-    index: Number,
-    rootPath: String,
-  },
-  data() {
-    return {
-      showDetail: false,
-      detailIssue: Store.detail,
-    };
-  },
-  computed: {
-    issueDetailVisible() {
-      return (
-        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
-      );
+  export default {
+    name: "BoardsIssueCard",
+    components: {
+      "issue-card-inner": gl.issueBoards.IssueCardInner
     },
-  },
-  methods: {
-    mouseDown() {
-      this.showDetail = true;
+    props: {
+      list: Object,
+      issue: Object,
+      issueLinkBase: String,
+      disabled: Boolean,
+      index: Number,
+      rootPath: String
     },
-    mouseMove() {
-      this.showDetail = false;
+    data() {
+      return {
+        showDetail: false,
+        detailIssue: Store.detail
+      };
     },
-    showIssue(e) {
-      if (e.target.classList.contains("js-no-trigger")) return;
-
-      if (this.showDetail) {
+    computed: {
+      issueDetailVisible() {
+        return (
+          this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+        );
+      }
+    },
+    methods: {
+      mouseDown() {
+        this.showDetail = true;
+      },
+      mouseMove() {
         this.showDetail = false;
-
-        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
-          eventHub.$emit("clearDetailIssue");
-        } else {
-          eventHub.$emit("newDetailIssue", this.issue);
-          Store.detail.list = this.list;
+      },
+      showIssue(e) {
+        if (e.target.classList.contains("js-no-trigger")) return;
+
+        if (this.showDetail) {
+          this.showDetail = false;
+
+          if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+            eventHub.$emit("clearDetailIssue");
+          } else {
+            eventHub.$emit("newDetailIssue", this.issue);
+            Store.detail.list = this.list;
+          }
         }
       }
-    },
-  },
-};
+    }
+  };
 </script>
 
 <template>
@@ -636,7 +1461,7 @@ export default {
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,
-      'is-active': issueDetailVisible,
+      'is-active': issueDetailVisible
     }"
     :index="index"
     :data-issue-id="issue.id"
@@ -657,11 +1482,11 @@ export default {
 ================================================================================
 `;
 
-exports[`board_card.vue 3`] = `
+exports[`board_card.vue 6`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "never"
 parsers: ["vue"]
 printWidth: 80
-semi: false
                                                                                 | printWidth
 =====================================input======================================
 <script>
@@ -740,10 +1565,10 @@ export default {
 
 =====================================output=====================================
 <script>
-import "./issue_card_inner"
-import eventHub from "../eventhub"
+import "./issue_card_inner";
+import eventHub from "../eventhub";
 
-const Store = gl.issueBoards.BoardsStore
+const Store = gl.issueBoards.BoardsStore;
 
 export default {
   name: "BoardsIssueCard",
@@ -762,69 +1587,126 @@ export default {
     return {
       showDetail: false,
       detailIssue: Store.detail
-    }
+    };
   },
   computed: {
     issueDetailVisible() {
       return (
         this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
-      )
+      );
     }
   },
   methods: {
     mouseDown() {
-      this.showDetail = true
+      this.showDetail = true;
     },
     mouseMove() {
-      this.showDetail = false
+      this.showDetail = false;
     },
     showIssue(e) {
-      if (e.target.classList.contains("js-no-trigger")) return
+      if (e.target.classList.contains("js-no-trigger")) return;
 
       if (this.showDetail) {
-        this.showDetail = false
+        this.showDetail = false;
 
         if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
-          eventHub.$emit("clearDetailIssue")
+          eventHub.$emit("clearDetailIssue");
         } else {
-          eventHub.$emit("newDetailIssue", this.issue)
-          Store.detail.list = this.list
+          eventHub.$emit("newDetailIssue", this.issue);
+          Store.detail.list = this.list;
         }
       }
     }
   }
-}
+};
 </script>
 
 <template>
-  <li
-    class="card"
-    :class="{
-      'user-can-drag': !disabled && issue.id,
-      'is-disabled': disabled || !issue.id,
-      'is-active': issueDetailVisible
-    }"
-    :index="index"
-    :data-issue-id="issue.id"
-    @mousedown="mouseDown"
-    @mousemove="mouseMove"
-    @mouseup="showIssue($event)"
-  >
-    <issue-card-inner
-      :list="list"
-      :issue="issue"
-      :issue-link-base="issueLinkBase"
-      :root-path="rootPath"
-      :update-filters="true"
-    />
-  </li>
+<li
+  class="card"
+  :class="{
+    'user-can-drag': !disabled && issue.id,
+    'is-disabled': disabled || !issue.id,
+    'is-active': issueDetailVisible
+  }"
+  :index="index"
+  :data-issue-id="issue.id"
+  @mousedown="mouseDown"
+  @mousemove="mouseMove"
+  @mouseup="showIssue($event)"
+>
+  <issue-card-inner
+    :list="list"
+    :issue="issue"
+    :issue-link-base="issueLinkBase"
+    :root-path="rootPath"
+    :update-filters="true"
+  />
+</li>
+</template>
+
+================================================================================
+`;
+
+exports[`case-sensitive-tags.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+	<Input></Input>
+</template>
+
+=====================================output=====================================
+<template>
+  <Input></Input>
+</template>
+
+================================================================================
+`;
+
+exports[`case-sensitive-tags.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<template>
+	<Input></Input>
+</template>
+
+=====================================output=====================================
+<template>
+  <Input></Input>
+</template>
+
+================================================================================
+`;
+
+exports[`case-sensitive-tags.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<template>
+	<Input></Input>
+</template>
+
+=====================================output=====================================
+<template>
+  <Input></Input>
 </template>
 
 ================================================================================
 `;
 
-exports[`case-sensitive-tags.vue 1`] = `
+exports[`case-sensitive-tags.vue 4`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["vue"]
 printWidth: 80
                                                                                 | printWidth
@@ -841,11 +1723,11 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`case-sensitive-tags.vue 2`] = `
+exports[`case-sensitive-tags.vue 5`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["vue"]
 printWidth: 80
-trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <template>
@@ -860,11 +1742,11 @@ trailingComma: "es5"
 ================================================================================
 `;
 
-exports[`case-sensitive-tags.vue 3`] = `
+exports[`case-sensitive-tags.vue 6`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "never"
 parsers: ["vue"]
 printWidth: 80
-semi: false
                                                                                 | printWidth
 =====================================input======================================
 <template>
@@ -873,7 +1755,7 @@ semi: false
 
 =====================================output=====================================
 <template>
-  <Input></Input>
+<Input></Input>
 </template>
 
 ================================================================================
@@ -938,38 +1820,360 @@ trailingComma: "es5"
 ================================================================================
 `;
 
-exports[`custom-block.vue 3`] = `
+exports[`custom-block.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html><head></head><body></body></html>
+
+=====================================output=====================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html>
+  <head></head>
+  <body></body>
+</html>
+
+================================================================================
+`;
+
+exports[`custom-block.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html><head></head><body></body></html>
+
+=====================================output=====================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html>
+  <head></head>
+  <body></body>
+</html>
+
+================================================================================
+`;
+
+exports[`custom-block.vue 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html><head></head><body></body></html>
+
+=====================================output=====================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html>
+  <head></head>
+  <body></body>
+</html>
+
+================================================================================
+`;
+
+exports[`custom-block.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html><head></head><body></body></html>
+
+=====================================output=====================================
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html>
+<head></head>
+<body></body>
+</html>
+
+================================================================================
+`;
+
+exports[`filter.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
+
+=====================================output=====================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{
+      value
+        | thisIsARealSuperLongFilterPipe("arg1", arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    }}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="allowed"
+    :class="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="not-allowed"
+    v-if="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+</template>
+
+================================================================================
+`;
+
+exports[`filter.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
+
+=====================================output=====================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{
+      value
+        | thisIsARealSuperLongFilterPipe("arg1", arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    }}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="allowed"
+    :class="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="not-allowed"
+    v-if="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+</template>
+
+================================================================================
+`;
+
+exports[`filter.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
+
+=====================================output=====================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{
+      value
+        | thisIsARealSuperLongFilterPipe("arg1", arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    }}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="allowed"
+    :class="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="not-allowed"
+    v-if="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+</template>
+
+================================================================================
+`;
+
+exports[`filter.vue 4`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["vue"]
 printWidth: 80
-semi: false
                                                                                 | printWidth
 =====================================input======================================
-<i18n>
-  en:
-    one: One
-    two: Two
-</i18n>
-
-<html><head></head><body></body></html>
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
 
 =====================================output=====================================
-<i18n>
-  en:
-    one: One
-    two: Two
-</i18n>
-
-<html>
-  <head></head>
-  <body></body>
-</html>
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{
+      value
+        | thisIsARealSuperLongFilterPipe("arg1", arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    }}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="allowed"
+    :class="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="not-allowed"
+    v-if="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+</template>
 
 ================================================================================
 `;
 
-exports[`filter.vue 1`] = `
+exports[`filter.vue 5`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["vue"]
 printWidth: 80
                                                                                 | printWidth
@@ -1025,124 +2229,459 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`filter.vue 2`] = `
+exports[`filter.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
+
+=====================================output=====================================
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+<div class="allowed">
+  {{
+    value
+      | thisIsARealSuperLongFilterPipe("arg1", arg2)
+      | anotherPipeLongJustForFun
+      | pipeTheThird
+  }}
+</div>
+<div
+  class="allowed"
+  v-bind:something="
+    value
+      | thisIsARealSuperLongFilterPipe('arg1', arg2)
+      | anotherPipeLongJustForFun
+      | pipeTheThird
+  "
+></div>
+<div
+  class="allowed"
+  :class="
+    value
+      | thisIsARealSuperLongFilterPipe('arg1', arg2)
+      | anotherPipeLongJustForFun
+      | pipeTheThird
+  "
+></div>
+<div
+  class="not-allowed"
+  v-if="
+    value |
+      thisIsARealSuperLongFilterPipe('arg1', arg2) |
+      anotherPipeLongJustForFun |
+      pipeTheThird
+  "
+></div>
+</template>
+
+================================================================================
+`;
+
+exports[`interpolations.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div>
+    Fuga magnam facilis. Voluptatem quaerat porro.{{
+      x => {
+        const hello = "world";
+        return hello;
+      }
+    }}
+    Magni consectetur in et molestias neque esse voluptatibus voluptas.
+    {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
+    error
+    {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+    }}
+    reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
+  </div>
+
+  <script type="text/jsx">
+    export default {
+      render (h) {
+        return (
+          <ul
+            class={{
+              'a': b,
+              'c': d,
+              "e": f
+            }}
+          >
+            { this.xyz }
+          </ul>
+      )
+    };
+  </script>
+
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{
+      something
+    }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{
+      something
+    }}
+    1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }} 1234567890
+  </div>
+</template>
+
+================================================================================
+`;
+
+exports[`interpolations.vue 2`] = `
 ====================================options=====================================
 parsers: ["vue"]
 printWidth: 80
 trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
-<!-- vue filters are only allowed in v-bind and interpolation -->
 <template>
-  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
-  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
-  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
-  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
 </template>
 
 =====================================output=====================================
-<!-- vue filters are only allowed in v-bind and interpolation -->
 <template>
-  <div class="allowed">
+  <div>
+    Fuga magnam facilis. Voluptatem quaerat porro.{{
+      x => {
+        const hello = "world";
+        return hello;
+      }
+    }}
+    Magni consectetur in et molestias neque esse voluptatibus voluptas.
+    {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
+    error
     {{
-      value
-        | thisIsARealSuperLongFilterPipe("arg1", arg2)
-        | anotherPipeLongJustForFun
-        | pipeTheThird
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
     }}
+    reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
+  </div>
+
+  <script type="text/jsx">
+    export default {
+      render (h) {
+        return (
+          <ul
+            class={{
+              'a': b,
+              'c': d,
+              "e": f
+            }}
+          >
+            { this.xyz }
+          </ul>
+      )
+    };
+  </script>
+
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{
+      something
+    }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{
+      something
+    }}
+    1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }} 1234567890
   </div>
-  <div
-    class="allowed"
-    v-bind:something="
-      value
-        | thisIsARealSuperLongFilterPipe('arg1', arg2)
-        | anotherPipeLongJustForFun
-        | pipeTheThird
-    "
-  ></div>
-  <div
-    class="allowed"
-    :class="
-      value
-        | thisIsARealSuperLongFilterPipe('arg1', arg2)
-        | anotherPipeLongJustForFun
-        | pipeTheThird
-    "
-  ></div>
-  <div
-    class="not-allowed"
-    v-if="
-      value |
-        thisIsARealSuperLongFilterPipe('arg1', arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
-    "
-  ></div>
 </template>
 
 ================================================================================
 `;
 
-exports[`filter.vue 3`] = `
+exports[`interpolations.vue 3`] = `
 ====================================options=====================================
 parsers: ["vue"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
 =====================================input======================================
-<!-- vue filters are only allowed in v-bind and interpolation -->
 <template>
-  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
-  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
-  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
-  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
 </template>
 
-=====================================output=====================================
-<!-- vue filters are only allowed in v-bind and interpolation -->
-<template>
-  <div class="allowed">
-    {{
-      value
-        | thisIsARealSuperLongFilterPipe("arg1", arg2)
-        | anotherPipeLongJustForFun
-        | pipeTheThird
+=====================================output=====================================
+<template>
+  <div>
+    Fuga magnam facilis. Voluptatem quaerat porro.{{
+      x => {
+        const hello = "world"
+        return hello
+      }
+    }}
+    Magni consectetur in et molestias neque esse voluptatibus voluptas.
+    {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
+    error
+    {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+    }}
+    reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
+  </div>
+
+  <script type="text/jsx">
+    export default {
+      render (h) {
+        return (
+          <ul
+            class={{
+              'a': b,
+              'c': d,
+              "e": f
+            }}
+          >
+            { this.xyz }
+          </ul>
+      )
+    };
+  </script>
+
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{
+      something
+    }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{
+      something
     }}
+    1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }} 1234567890
   </div>
-  <div
-    class="allowed"
-    v-bind:something="
-      value
-        | thisIsARealSuperLongFilterPipe('arg1', arg2)
-        | anotherPipeLongJustForFun
-        | pipeTheThird
-    "
-  ></div>
-  <div
-    class="allowed"
-    :class="
-      value
-        | thisIsARealSuperLongFilterPipe('arg1', arg2)
-        | anotherPipeLongJustForFun
-        | pipeTheThird
-    "
-  ></div>
-  <div
-    class="not-allowed"
-    v-if="
-      value |
-        thisIsARealSuperLongFilterPipe('arg1', arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
-    "
-  ></div>
 </template>
 
 ================================================================================
 `;
 
-exports[`interpolations.vue 1`] = `
+exports[`interpolations.vue 4`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["vue"]
 printWidth: 80
                                                                                 | printWidth
@@ -1271,11 +2810,11 @@ x => {
 ================================================================================
 `;
 
-exports[`interpolations.vue 2`] = `
+exports[`interpolations.vue 5`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["vue"]
 printWidth: 80
-trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <template>
@@ -1402,139 +2941,457 @@ x => {
 ================================================================================
 `;
 
-exports[`interpolations.vue 3`] = `
+exports[`interpolations.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
+</template>
+
+=====================================output=====================================
+<template>
+<div>
+  Fuga magnam facilis. Voluptatem quaerat porro.{{
+    x => {
+      const hello = "world";
+      return hello;
+    }
+  }}
+  Magni consectetur in et molestias neque esse voluptatibus voluptas.
+  {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
+  error
+  {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+  }}
+  reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
+</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}
+  1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{ something }} 1234567890
+</div>
+</template>
+
+================================================================================
+`;
+
+exports[`pre-child.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+</template>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>
+
+=====================================output=====================================
+<template>
+  <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+  <pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+</template>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+    </pre
+  >
+</template>
+
+================================================================================
+`;
+
+exports[`pre-child.vue 2`] = `
 ====================================options=====================================
 parsers: ["vue"]
 printWidth: 80
-semi: false
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <template>
-<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
-
-
-x => {
-    const hello = 'world'
-    return hello;
-}
-
-
-
-}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
-    
-    
-    some_variable 
-
-
-
-}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+</template>
 
-                    preserve
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
 
-                    invalid
-                    
-                    interpolation
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
 
-}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>
 
-<script type="text/jsx">
-  export default {
-    render (h) {
-      return (
-        <ul
-          class={{
-            'a': b,
-            'c': d,
-            "e": f
-          }}
-        >
-          { this.xyz }
-        </ul>
-    )
-  };
-</script>
+=====================================output=====================================
+<template>
+  <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+  <pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+</template>
 
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
-</div>
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
-</div>
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
-</div>
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
-</div>
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
 </template>
 
-=====================================output=====================================
 <template>
-  <div>
-    Fuga magnam facilis. Voluptatem quaerat porro.{{
-      x => {
-        const hello = "world"
-        return hello
-      }
-    }}
-    Magni consectetur in et molestias neque esse voluptatibus voluptas.
-    {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
-    error
-    {{
+  <pre class="woot">
+  {{ stuff }}
+  </pre>
+</template>
 
-                    preserve
+<template>
+  <pre class="woot">
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+    </pre
+  >
+</template>
 
-                    invalid
-                    
-                    interpolation
+================================================================================
+`;
 
-    }}
-    reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
+exports[`pre-child.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<template>
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
   </div>
+</pre>
+</template>
 
-  <script type="text/jsx">
-    export default {
-      render (h) {
-        return (
-          <ul
-            class={{
-              'a': b,
-              'c': d,
-              "e": f
-            }}
-          >
-            { this.xyz }
-          </ul>
-      )
-    };
-  </script>
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
 
-  <div>
-    1234567890123456789012345678901234567890123456789012345678901234567890{{
-      something
-    }}1234567890
-  </div>
-  <div>
-    1234567890123456789012345678901234567890123456789012345678901234567890
-    {{ something }}1234567890
-  </div>
-  <div>
-    1234567890123456789012345678901234567890123456789012345678901234567890{{
-      something
-    }}
-    1234567890
-  </div>
-  <div>
-    1234567890123456789012345678901234567890123456789012345678901234567890
-    {{ something }} 1234567890
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>
+
+=====================================output=====================================
+<template>
+  <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+  <pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
   </div>
+</pre>
+</template>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+    </pre
+  >
 </template>
 
 ================================================================================
 `;
 
-exports[`pre-child.vue 1`] = `
+exports[`pre-child.vue 4`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["vue"]
 printWidth: 80
                                                                                 | printWidth
@@ -1638,11 +3495,11 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`pre-child.vue 2`] = `
+exports[`pre-child.vue 5`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["vue"]
 printWidth: 80
-trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <template>
@@ -1744,11 +3601,11 @@ trailingComma: "es5"
 ================================================================================
 `;
 
-exports[`pre-child.vue 3`] = `
+exports[`pre-child.vue 6`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "never"
 parsers: ["vue"]
 printWidth: 80
-semi: false
                                                                                 | printWidth
 =====================================input======================================
 <template>
@@ -1797,8 +3654,8 @@ semi: false
 
 =====================================output=====================================
 <template>
-  <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
-  <pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
   <code
     v-show="!detailJob.isLoading"
     class="bash"
@@ -1818,33 +3675,33 @@ semi: false
 
 <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
 <template>
-  <pre class="code-block rounded">
+<pre class="code-block rounded">
     <code class="d-block">{{ code }}</code>
   </pre>
 </template>
 
 <template>
-  <pre class="woot">
+<pre class="woot">
   {{ stuff }}
   </pre>
 </template>
 
 <template>
-  <pre class="woot">
+<pre class="woot">
   123{{
+    wqeqwwqwqweqweqwewwq ||
       wqeqwwqwqweqweqwewwq ||
-        wqeqwwqwqweqweqwewwq ||
-        wqeqwwqwqweqweqwewwq ||
-        wqeqwwqwqweqweqwewwq
-    }}123
+      wqeqwwqwqweqweqwewwq ||
+      wqeqwwqwqweqweqwewwq
+  }}123
   123{{
+    wqeqwwqwqweqweqwewwq ||
       wqeqwwqwqweqweqwewwq ||
-        wqeqwwqwqweqweqwewwq ||
-        wqeqwwqwqweqweqwewwq ||
-        wqeqwwqwqweqweqwewwq
-    }}123
+      wqeqwwqwqweqweqwewwq ||
+      wqeqwwqwqweqweqwewwq
+  }}123
     </pre
-  >
+>
 </template>
 
 ================================================================================
@@ -1900,8 +3757,194 @@ semi: false
 ================================================================================
 `;
 
-exports[`self_closing.vue 1`] = `
+exports[`script_src.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+
+=====================================output=====================================
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+
+================================================================================
+`;
+
+exports[`script_src.vue 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+
+=====================================output=====================================
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+
+================================================================================
+`;
+
+exports[`script_src.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+
+=====================================output=====================================
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+
+================================================================================
+`;
+
+exports[`self_closing.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+
+<template>
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div />
+</template>
+
+<script>
+foo();
+</script>
+
+<template>
+  <div class="container">
+    <HomeH />
+    <HomeA />
+    <HomeX />
+    <HomeY />
+  </div>
+</template>
+
+================================================================================
+`;
+
+exports[`self_closing.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+
+<template>
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div />
+</template>
+
+<script>
+foo();
+</script>
+
+<template>
+  <div class="container">
+    <HomeH />
+    <HomeA />
+    <HomeX />
+    <HomeY />
+  </div>
+</template>
+
+================================================================================
+`;
+
+exports[`self_closing.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+
+<template>
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div />
+</template>
+
+<script>
+foo()
+</script>
+
+<template>
+  <div class="container">
+    <HomeH />
+    <HomeA />
+    <HomeX />
+    <HomeY />
+  </div>
+</template>
+
+================================================================================
+`;
+
+exports[`self_closing.vue 4`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["vue"]
 printWidth: 80
                                                                                 | printWidth
@@ -1944,11 +3987,11 @@ foo();
 ================================================================================
 `;
 
-exports[`self_closing.vue 2`] = `
+exports[`self_closing.vue 5`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["vue"]
 printWidth: 80
-trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <template>
@@ -1974,7 +4017,7 @@ foo( )
 </template>
 
 <script>
-foo();
+  foo();
 </script>
 
 <template>
@@ -1989,11 +4032,11 @@ foo();
 ================================================================================
 `;
 
-exports[`self_closing.vue 3`] = `
+exports[`self_closing.vue 6`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "never"
 parsers: ["vue"]
 printWidth: 80
-semi: false
                                                                                 | printWidth
 =====================================input======================================
 <template>
@@ -2015,20 +4058,20 @@ foo( )
 
 =====================================output=====================================
 <template>
-  <div />
+<div />
 </template>
 
 <script>
-foo()
+foo();
 </script>
 
 <template>
-  <div class="container">
-    <HomeH />
-    <HomeA />
-    <HomeX />
-    <HomeY />
-  </div>
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
 </template>
 
 ================================================================================
@@ -2102,6 +4145,75 @@ semi: false
 ================================================================================
 `;
 
+exports[`self_closing_style.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+
+=====================================output=====================================
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+
+================================================================================
+`;
+
+exports[`self_closing_style.vue 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+
+=====================================output=====================================
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+
+================================================================================
+`;
+
+exports[`self_closing_style.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+
+=====================================output=====================================
+<template>
+<span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+
+================================================================================
+`;
+
 exports[`tag-name.vue 1`] = `
 ====================================options=====================================
 parsers: ["vue"]
@@ -2158,10 +4270,199 @@ semi: false
 ================================================================================
 `;
 
-exports[`template.vue 1`] = `
+exports[`tag-name.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <Table></Table>
+</template>
+
+=====================================output=====================================
+<template>
+  <Table></Table>
+</template>
+
+================================================================================
+`;
+
+exports[`tag-name.vue 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <Table></Table>
+</template>
+
+=====================================output=====================================
+<template>
+  <Table></Table>
+</template>
+
+================================================================================
+`;
+
+exports[`tag-name.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <Table></Table>
+</template>
+
+=====================================output=====================================
+<template>
+<Table></Table>
+</template>
+
+================================================================================
+`;
+
+exports[`template.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+=====================================output=====================================
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"
+      />
+      <p v-if="renderInfo" class="file-info prepend-top-10">
+        <template v-if="fileSize > 0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize > 0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+================================================================================
+`;
+
+exports[`template.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+=====================================output=====================================
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"
+      />
+      <p v-if="renderInfo" class="file-info prepend-top-10">
+        <template v-if="fileSize > 0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize > 0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+================================================================================
+`;
+
+exports[`template.vue 3`] = `
 ====================================options=====================================
 parsers: ["vue"]
 printWidth: 80
+semi: false
                                                                                 | printWidth
 =====================================input======================================
 <!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
@@ -2223,11 +4524,11 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`template.vue 2`] = `
+exports[`template.vue 4`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "auto"
 parsers: ["vue"]
 printWidth: 80
-trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
@@ -2289,11 +4590,11 @@ trailingComma: "es5"
 ================================================================================
 `;
 
-exports[`template.vue 3`] = `
+exports[`template.vue 5`] = `
 ====================================options=====================================
+htmlTopLevelIndent: "always"
 parsers: ["vue"]
 printWidth: 80
-semi: false
                                                                                 | printWidth
 =====================================input======================================
 <!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
@@ -2355,6 +4656,72 @@ semi: false
 ================================================================================
 `;
 
+exports[`template.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+=====================================output=====================================
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+<div class="file-container">
+  <div class="file-content image_file">
+    <img
+      ref="contentImg"
+      :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+      :src="path"
+      :alt="path"
+      @load="onImgLoad"
+      @click="onImgClick"
+    />
+    <p v-if="renderInfo" class="file-info prepend-top-10">
+      <template v-if="fileSize > 0">
+        {{ fileSizeReadable }}
+      </template>
+      <template v-if="fileSize > 0 && width && height">
+        |
+      </template>
+      <template v-if="width && height">
+        W: {{ width }} | H: {{ height }}
+      </template>
+    </p>
+  </div>
+</div>
+</template>
+
+================================================================================
+`;
+
 exports[`template-lang.vue 1`] = `
 ====================================options=====================================
 parsers: ["vue"]
@@ -2449,6 +4816,123 @@ semi: false
 
 
    
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>
+
+=====================================output=====================================
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+================================================================================
+`;
+
+exports[`template-lang.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>
+
+=====================================output=====================================
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+================================================================================
+`;
+
+exports[`template-lang.vue 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>
+
+=====================================output=====================================
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+================================================================================
+`;
+
+exports[`template-lang.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
    lang='pug'>
   .test
     #foo
@@ -2565,3 +5049,99 @@ semi: false
 
 ================================================================================
 `;
+
+exports[`test.vue 4`] = `
+====================================options=====================================
+htmlTopLevelIndent: "auto"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>
+</script>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+
+=====================================output=====================================
+<script></script>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`test.vue 5`] = `
+====================================options=====================================
+htmlTopLevelIndent: "always"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>
+</script>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+
+=====================================output=====================================
+<script></script>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`test.vue 6`] = `
+====================================options=====================================
+htmlTopLevelIndent: "never"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>
+</script>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+
+=====================================output=====================================
+<script></script>
+
+<template>
+<br />
+<footer>
+  foo
+  <br />
+</footer>
+</template>
+
+================================================================================
+`;
diff --git a/tests/html_vue/jsfmt.spec.js b/tests/html_vue/jsfmt.spec.js
index cb7655fcd824..447f9f5e85c1 100644
--- a/tests/html_vue/jsfmt.spec.js
+++ b/tests/html_vue/jsfmt.spec.js
@@ -1,3 +1,6 @@
 run_spec(__dirname, ["vue"]);
 run_spec(__dirname, ["vue"], { trailingComma: "es5" });
 run_spec(__dirname, ["vue"], { semi: false });
+run_spec(__dirname, ["vue"], { htmlTopLevelIndent: "auto" });
+run_spec(__dirname, ["vue"], { htmlTopLevelIndent: "always" });
+run_spec(__dirname, ["vue"], { htmlTopLevelIndent: "never" });
diff --git a/tests_integration/__tests__/__snapshots__/early-exit.js.snap b/tests_integration/__tests__/__snapshots__/early-exit.js.snap
index 458a18be656d..9cab569c0359 100644
--- a/tests_integration/__tests__/__snapshots__/early-exit.js.snap
+++ b/tests_integration/__tests__/__snapshots__/early-exit.js.snap
@@ -65,6 +65,9 @@ Format options:
   --end-of-line <auto|lf|crlf|cr>
                            Which end of line characters to apply.
                            Defaults to auto.
+  --html-top-level-indent <always|never|auto>
+                           How to handle top-level indent in HTML.
+                           Defaults to auto.
   --html-whitespace-sensitivity <css|strict|ignore>
                            How to handle whitespaces in HTML.
                            Defaults to css.
@@ -218,6 +221,9 @@ Format options:
   --end-of-line <auto|lf|crlf|cr>
                            Which end of line characters to apply.
                            Defaults to auto.
+  --html-top-level-indent <always|never|auto>
+                           How to handle top-level indent in HTML.
+                           Defaults to auto.
   --html-whitespace-sensitivity <css|strict|ignore>
                            How to handle whitespaces in HTML.
                            Defaults to css.
diff --git a/tests_integration/__tests__/__snapshots__/help-options.js.snap b/tests_integration/__tests__/__snapshots__/help-options.js.snap
index 4f43f9fa9f3c..39e7fa66776e 100644
--- a/tests_integration/__tests__/__snapshots__/help-options.js.snap
+++ b/tests_integration/__tests__/__snapshots__/help-options.js.snap
@@ -171,6 +171,25 @@ exports[`show detailed usage with --help help (stdout) 1`] = `
 
 exports[`show detailed usage with --help help (write) 1`] = `Array []`;
 
+exports[`show detailed usage with --help html-top-level-indent (stderr) 1`] = `""`;
+
+exports[`show detailed usage with --help html-top-level-indent (stdout) 1`] = `
+"--html-top-level-indent <always|never|auto>
+
+  How to handle top-level indent in HTML.
+
+Valid options:
+
+  always   Always apply top-level indent for templates, scripts and styles.
+  never    Avoid top-level indent for templates, scripts and styles.
+  auto     Avoid top-level indent for scripts and styles inside Vue files.
+
+Default: auto
+"
+`;
+
+exports[`show detailed usage with --help html-top-level-indent (write) 1`] = `Array []`;
+
 exports[`show detailed usage with --help html-whitespace-sensitivity (stderr) 1`] = `""`;
 
 exports[`show detailed usage with --help html-whitespace-sensitivity (stdout) 1`] = `
diff --git a/tests_integration/__tests__/__snapshots__/plugin-options.js.snap b/tests_integration/__tests__/__snapshots__/plugin-options.js.snap
index 28016078e54f..f63381133524 100644
--- a/tests_integration/__tests__/__snapshots__/plugin-options.js.snap
+++ b/tests_integration/__tests__/__snapshots__/plugin-options.js.snap
@@ -13,11 +13,11 @@ exports[` 1`] = `
                              Defaults to auto.
 +   --foo-option <bar|baz>   foo description
 +                            Defaults to bar.
+    --html-top-level-indent <always|never|auto>
+                             How to handle top-level indent in HTML.
+                             Defaults to auto.
     --html-whitespace-sensitivity <css|strict|ignore>
-                             How to handle whitespaces in HTML.
-                             Defaults to css.
-    --jsx-bracket-same-line  Put > on the last line instead of at a new line.
-                             Defaults to false."
+                             How to handle whitespaces in HTML."
 `;
 
 exports[`show detailed external option with \`--help foo-option\` (stderr) 1`] = `""`;
diff --git a/tests_integration/__tests__/__snapshots__/schema.js.snap b/tests_integration/__tests__/__snapshots__/schema.js.snap
index 26b422c704a4..c2ff71093d6f 100644
--- a/tests_integration/__tests__/__snapshots__/schema.js.snap
+++ b/tests_integration/__tests__/__snapshots__/schema.js.snap
@@ -79,6 +79,30 @@ This option cannot be used with --range-start and --range-end.",
           "description": "Specify the input filepath. This will be used to do parser inference.",
           "type": "string",
         },
+        "htmlTopLevelIndent": Object {
+          "default": "auto",
+          "description": "How to handle top-level indent in HTML.",
+          "oneOf": Array [
+            Object {
+              "description": "Always apply top-level indent for templates, scripts and styles.",
+              "enum": Array [
+                "always",
+              ],
+            },
+            Object {
+              "description": "Avoid top-level indent for templates, scripts and styles.",
+              "enum": Array [
+                "never",
+              ],
+            },
+            Object {
+              "description": "Avoid top-level indent for scripts and styles inside Vue files.",
+              "enum": Array [
+                "auto",
+              ],
+            },
+          ],
+        },
         "htmlWhitespaceSensitivity": Object {
           "default": "css",
           "description": "How to handle whitespaces in HTML.",
diff --git a/tests_integration/__tests__/__snapshots__/support-info.js.snap b/tests_integration/__tests__/__snapshots__/support-info.js.snap
index 0a9974b62e4d..cbed73e52fc1 100644
--- a/tests_integration/__tests__/__snapshots__/support-info.js.snap
+++ b/tests_integration/__tests__/__snapshots__/support-info.js.snap
@@ -611,7 +611,27 @@ exports[`API getSupportInfo() with version 1.16.0 -> undefined 1`] = `
       ],
       \\"Markdown\\": Array [
         \\"markdown\\",
-@@ -135,10 +138,11 @@
+@@ -95,10 +98,19 @@
+      },
+      \\"filepath\\": Object {
+        \\"default\\": undefined,
+        \\"type\\": \\"path\\",
+      },
++     \\"htmlTopLevelIndent\\": Object {
++       \\"choices\\": Array [
++         \\"always\\",
++         \\"never\\",
++         \\"auto\\",
++       ],
++       \\"default\\": \\"auto\\",
++       \\"type\\": \\"choice\\",
++     },
+      \\"htmlWhitespaceSensitivity\\": Object {
+        \\"choices\\": Array [
+          \\"css\\",
+          \\"strict\\",
+          \\"ignore\\",
+@@ -135,10 +147,11 @@
           \\"mdx\\",
           \\"vue\\",
           \\"yaml\\",
@@ -623,7 +643,7 @@ exports[`API getSupportInfo() with version 1.16.0 -> undefined 1`] = `
         \\"type\\": \\"choice\\",
       },
       \\"pluginSearchDirs\\": Object {
-@@ -165,10 +169,19 @@
+@@ -165,10 +178,19 @@
           \\"preserve\\",
         ],
         \\"default\\": \\"preserve\\",
@@ -1104,6 +1124,29 @@ exports[`CLI --support-info (stdout) 1`] = `
       \\"since\\": \\"1.4.0\\",
       \\"type\\": \\"path\\"
     },
+    {
+      \\"category\\": \\"HTML\\",
+      \\"choices\\": [
+        {
+          \\"description\\": \\"Always apply top-level indent for templates, scripts and styles.\\",
+          \\"value\\": \\"always\\"
+        },
+        {
+          \\"description\\": \\"Avoid top-level indent for templates, scripts and styles.\\",
+          \\"value\\": \\"never\\"
+        },
+        {
+          \\"description\\": \\"Avoid top-level indent for scripts and styles inside Vue files.\\",
+          \\"value\\": \\"auto\\"
+        }
+      ],
+      \\"default\\": \\"auto\\",
+      \\"description\\": \\"How to handle top-level indent in HTML.\\",
+      \\"name\\": \\"htmlTopLevelIndent\\",
+      \\"pluginDefaults\\": {},
+      \\"since\\": \\"1.18.0\\",
+      \\"type\\": \\"choice\\"
+    },
     {
       \\"category\\": \\"HTML\\",
       \\"choices\\": [