From 8b0bdf52be1eb4e6062f0a8cfd168abd3fe17536 Mon Sep 17 00:00:00 2001
From: Evilebot Tnawi <evilebottnawi@users.noreply.github.com>
Date: Thu, 13 Sep 2018 16:06:49 +0300
Subject: [PATCH] [WIP] feat: html support (#4753)

* feat: html support

* fix: support empty lines between children

* refactor: isScriptTagNode util

* refactor: rename `glimmer` and `handlebars` tests

* fix don't add newline after `directive` node

* fix: support `pre` tag

* fix: don't trim comments content

* fix: `script` and `style` tags output

* feat: indent `head` and `body` inside `html`

* fix: better handle quotes around attribute value

* feat: better handle embed

* tests: svg into html

* fix: better handle boolean and empty attributes

* chore(deps): update `parse5` to latest version

* fix: better handle empty attribute

* tests: fix

* fix: extra newline in multiline node

* fix: print `pre` and `textarea` in right way

* tests: xhtml doctype

* fix: use `>` instead `/>`

* tests: case

* refactor: remove `toLowerCase()`

* feat: support `prettier-ignore`

* tests: empty `script` and `style` tags

* fix: clean

* tests: refactor and more
---
 package.json                                  |   3 +-
 src/language-html/clean.js                    |   2 +-
 src/language-html/embed.js                    |   6 +-
 src/language-html/parser-parse5.js            |  11 +-
 src/language-html/printer-htmlparser2.js      | 364 +++++++++++++---
 .../__snapshots__/jsfmt.spec.js.snap          |   0
 .../block-statement.hbs                       |   0
 tests/{html_glimmer => glimmer}/component.hbs |   0
 .../concat-statement.hbs                      |   0
 .../element-modifier-statement.hbs            |   0
 .../element-node.hbs                          |   0
 tests/{html_glimmer => glimmer}/else-if.hbs   |   0
 tests/{html_glimmer => glimmer}/jsfmt.spec.js |   0
 tests/{html_glimmer => glimmer}/literals.hbs  |   0
 tests/{html_glimmer => glimmer}/loop.hbs      |   0
 .../sub-expressions.hbs                       |   0
 .../__snapshots__/jsfmt.spec.js.snap          |   0
 .../basic-handlebars.hbs                      |   0
 .../comments.hbs                              |   0
 .../{html_handlebars => handlebars}/each.hbs  |   0
 .../if-else.hbs                               |   0
 tests/{html_handlebars => handlebars}/if.hbs  |   0
 .../jsfmt.spec.js                             |   0
 .../nested-path.hbs                           |   0
 tests/{html_handlebars => handlebars}/raw.hbs |   0
 .../__snapshots__/jsfmt.spec.js.snap          | 216 ++++++++++
 tests/html_attributes/attributes.html         |  60 +++
 tests/html_attributes/boolean.html            |  17 +
 tests/html_attributes/dobule-quotes.html      |   1 +
 tests/html_attributes/jsfmt.spec.js           |   1 +
 tests/html_attributes/single-quotes.html      |   1 +
 tests/html_attributes/without-quotes.html     |   1 +
 .../__snapshots__/jsfmt.spec.js.snap          |   6 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 400 ++++++++++++++---
 tests/html_basics/empty-doc.html              |   5 +
 tests/html_basics/empty.html                  |   0
 tests/html_basics/form.html                   |  68 +++
 tests/html_basics/html5-boilerplate.html      |  40 ++
 tests/html_basics/more-html.html              |   1 +
 .../__snapshots__/jsfmt.spec.js.snap          |  50 +++
 tests/html_case/case.html                     |  16 +
 tests/html_case/jsfmt.spec.js                 |   1 +
 .../__snapshots__/jsfmt.spec.js.snap          |  99 +++++
 tests/html_comments/conditional.html          |  12 +
 tests/html_comments/for_debugging.html        |  18 +
 tests/html_comments/hidden.html               |  13 +
 tests/html_comments/jsfmt.spec.js             |   1 +
 .../html_css/__snapshots__/jsfmt.spec.js.snap | 170 ++++++++
 tests/html_css/empty.html                     |   1 +
 tests/html_css/jsfmt.spec.js                  |   1 +
 tests/html_css/less.html                      |  17 +
 tests/html_css/postcss.html                   |   7 +
 tests/html_css/scss.html                      |  19 +
 tests/html_css/simple.html                    |  14 +
 tests/html_css/single-style.html              |   8 +
 .../__snapshots__/jsfmt.spec.js.snap          | 163 +++++++
 .../html4.01_frameset.html                    |  11 +
 .../html4.01_strict.html                      |  11 +
 .../html4.01_transitional.html                |  11 +
 tests/html_doctype_declarations/html5.html    |  10 +
 tests/html_doctype_declarations/jsfmt.spec.js |   1 +
 tests/html_doctype_declarations/xhtml1.1.html |  22 +
 .../html_js/__snapshots__/jsfmt.spec.js.snap  | 207 +++++++++
 tests/html_js/empty.html                      |   1 +
 tests/html_js/js.html                         |  15 +
 tests/html_js/jsfmt.spec.js                   |   1 +
 tests/html_js/simple.html                     |  16 +
 tests/html_js/single-script.html              |   4 +
 tests/html_js/typescript.html                 |  78 ++++
 .../__snapshots__/jsfmt.spec.js.snap          |  92 ++++
 tests/html_prettier_ignore/document.html      |  43 ++
 tests/html_prettier_ignore/jsfmt.spec.js      |   1 +
 .../html_svg/__snapshots__/jsfmt.spec.js.snap |  35 ++
 tests/html_svg/jsfmt.spec.js                  |   1 +
 tests/html_svg/svg.html                       |  11 +
 .../__snapshots__/jsfmt.spec.js.snap          |  12 +
 tests/html_symbol_entities/jsfmt.spec.js      |   1 +
 .../symbol_entitites.html                     |   3 +
 .../__snapshots__/jsfmt.spec.js.snap          | 404 ++++++++++++++++++
 tests/html_tags/jsfmt.spec.js                 |   1 +
 tests/html_tags/pre.html                      |  78 ++++
 tests/html_tags/tags.html                     |  49 +++
 tests/html_tags/textarea.html                 |  28 ++
 tests/html_tags/unsupported.html              |   1 +
 .../__snapshots__/jsfmt.spec.js.snap          |  20 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  20 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  20 +-
 yarn.lock                                     |  16 +-
 88 files changed, 2846 insertions(+), 191 deletions(-)
 rename tests/{html_glimmer => glimmer}/__snapshots__/jsfmt.spec.js.snap (100%)
 rename tests/{html_glimmer => glimmer}/block-statement.hbs (100%)
 rename tests/{html_glimmer => glimmer}/component.hbs (100%)
 rename tests/{html_glimmer => glimmer}/concat-statement.hbs (100%)
 rename tests/{html_glimmer => glimmer}/element-modifier-statement.hbs (100%)
 rename tests/{html_glimmer => glimmer}/element-node.hbs (100%)
 rename tests/{html_glimmer => glimmer}/else-if.hbs (100%)
 rename tests/{html_glimmer => glimmer}/jsfmt.spec.js (100%)
 rename tests/{html_glimmer => glimmer}/literals.hbs (100%)
 rename tests/{html_glimmer => glimmer}/loop.hbs (100%)
 rename tests/{html_glimmer => glimmer}/sub-expressions.hbs (100%)
 rename tests/{html_handlebars => handlebars}/__snapshots__/jsfmt.spec.js.snap (100%)
 rename tests/{html_handlebars => handlebars}/basic-handlebars.hbs (100%)
 rename tests/{html_handlebars => handlebars}/comments.hbs (100%)
 rename tests/{html_handlebars => handlebars}/each.hbs (100%)
 rename tests/{html_handlebars => handlebars}/if-else.hbs (100%)
 rename tests/{html_handlebars => handlebars}/if.hbs (100%)
 rename tests/{html_handlebars => handlebars}/jsfmt.spec.js (100%)
 rename tests/{html_handlebars => handlebars}/nested-path.hbs (100%)
 rename tests/{html_handlebars => handlebars}/raw.hbs (100%)
 create mode 100644 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_attributes/attributes.html
 create mode 100644 tests/html_attributes/boolean.html
 create mode 100644 tests/html_attributes/dobule-quotes.html
 create mode 100644 tests/html_attributes/jsfmt.spec.js
 create mode 100644 tests/html_attributes/single-quotes.html
 create mode 100644 tests/html_attributes/without-quotes.html
 create mode 100644 tests/html_basics/empty-doc.html
 create mode 100644 tests/html_basics/empty.html
 create mode 100644 tests/html_basics/form.html
 create mode 100644 tests/html_basics/html5-boilerplate.html
 create mode 100644 tests/html_case/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_case/case.html
 create mode 100644 tests/html_case/jsfmt.spec.js
 create mode 100644 tests/html_comments/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_comments/conditional.html
 create mode 100644 tests/html_comments/for_debugging.html
 create mode 100644 tests/html_comments/hidden.html
 create mode 100644 tests/html_comments/jsfmt.spec.js
 create mode 100644 tests/html_css/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_css/empty.html
 create mode 100644 tests/html_css/jsfmt.spec.js
 create mode 100644 tests/html_css/less.html
 create mode 100644 tests/html_css/postcss.html
 create mode 100644 tests/html_css/scss.html
 create mode 100644 tests/html_css/simple.html
 create mode 100644 tests/html_css/single-style.html
 create mode 100644 tests/html_doctype_declarations/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_doctype_declarations/html4.01_frameset.html
 create mode 100644 tests/html_doctype_declarations/html4.01_strict.html
 create mode 100644 tests/html_doctype_declarations/html4.01_transitional.html
 create mode 100644 tests/html_doctype_declarations/html5.html
 create mode 100644 tests/html_doctype_declarations/jsfmt.spec.js
 create mode 100644 tests/html_doctype_declarations/xhtml1.1.html
 create mode 100644 tests/html_js/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_js/empty.html
 create mode 100644 tests/html_js/js.html
 create mode 100644 tests/html_js/jsfmt.spec.js
 create mode 100644 tests/html_js/simple.html
 create mode 100644 tests/html_js/single-script.html
 create mode 100644 tests/html_js/typescript.html
 create mode 100644 tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_prettier_ignore/document.html
 create mode 100644 tests/html_prettier_ignore/jsfmt.spec.js
 create mode 100644 tests/html_svg/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_svg/jsfmt.spec.js
 create mode 100644 tests/html_svg/svg.html
 create mode 100644 tests/html_symbol_entities/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_symbol_entities/jsfmt.spec.js
 create mode 100644 tests/html_symbol_entities/symbol_entitites.html
 create mode 100644 tests/html_tags/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_tags/jsfmt.spec.js
 create mode 100644 tests/html_tags/pre.html
 create mode 100644 tests/html_tags/tags.html
 create mode 100644 tests/html_tags/textarea.html
 create mode 100644 tests/html_tags/unsupported.html

diff --git a/package.json b/package.json
index d4b22c38a..48cab48f4 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
     "minimatch": "3.0.4",
     "minimist": "1.2.0",
     "normalize-path": "3.0.0",
-    "parse5": "3.0.3",
+    "parse5": "5.0.0",
+    "parse5-htmlparser2-tree-adapter": "5.0.0",
     "postcss-less": "1.1.5",
     "postcss-media-query-parser": "0.2.3",
     "postcss-scss": "1.0.6",
diff --git a/src/language-html/clean.js b/src/language-html/clean.js
index 0103c35cf..40b35e249 100644
--- a/src/language-html/clean.js
+++ b/src/language-html/clean.js
@@ -1,7 +1,7 @@
 "use strict";
 
 module.exports = function(ast, newNode) {
-  delete newNode.__location;
+  delete newNode.sourceCodeLocation;
 
   if (ast.type === "text") {
     return null;
diff --git a/src/language-html/embed.js b/src/language-html/embed.js
index 7b8a14125..44e16ec66 100644
--- a/src/language-html/embed.js
+++ b/src/language-html/embed.js
@@ -21,7 +21,7 @@ function embed(path, print, textToDoc, options) {
       ) {
         const parser = options.parser === "flow" ? "flow" : "babylon";
         const doc = textToDoc(getText(options, node), { parser });
-        return concat([hardline, doc]);
+        return concat([hardline, stripTrailingHardline(doc)]);
       }
 
       // Inline TypeScript
@@ -35,7 +35,7 @@ function embed(path, print, textToDoc, options) {
           { parser: "typescript" },
           options
         );
-        return concat([hardline, doc]);
+        return concat([hardline, stripTrailingHardline(doc)]);
       }
 
       // Inline Styles
@@ -49,7 +49,7 @@ function embed(path, print, textToDoc, options) {
 
     case "attribute": {
       /*
-       * Vue binding sytax: JS expressions
+       * Vue binding syntax: JS expressions
        * :class="{ 'some-key': value }"
        * v-bind:id="'list-' + id"
        * v-if="foo && !bar"
diff --git a/src/language-html/parser-parse5.js b/src/language-html/parser-parse5.js
index 84ab96aa0..a799b9d02 100644
--- a/src/language-html/parser-parse5.js
+++ b/src/language-html/parser-parse5.js
@@ -3,12 +3,15 @@
 function parse(text /*, parsers, opts*/) {
   // Inline the require to avoid loading all the JS if we don't use it
   const parse5 = require("parse5");
+  const htmlparser2TreeAdapter = require("parse5-htmlparser2-tree-adapter");
+
   try {
     const isFragment = !/^\s*<(!doctype|html|head|body|!--)/i.test(text);
     const ast = (isFragment ? parse5.parseFragment : parse5.parse)(text, {
-      treeAdapter: parse5.treeAdapters.htmlparser2,
-      locationInfo: true
+      treeAdapter: htmlparser2TreeAdapter,
+      sourceCodeLocationInfo: true
     });
+
     return normalize(extendAst(ast));
   } catch (error) {
     throw error;
@@ -64,10 +67,10 @@ module.exports = {
       parse,
       astFormat: "htmlparser2",
       locStart(node) {
-        return node.__location && node.__location.startOffset;
+        return node.sourceCodeLocation && node.sourceCodeLocation.startOffset;
       },
       locEnd(node) {
-        return node.__location && node.__location.endOffset;
+        return node.sourceCodeLocation && node.sourceCodeLocation.endOffset;
       }
     }
   }
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 1b40f2d41..21e2a491c 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -2,34 +2,21 @@
 
 const embed = require("./embed");
 const clean = require("./clean");
-const { hasNewlineInRange, hasIgnoreComment } = require("../common/util");
+const { getLast, hasIgnoreComment } = require("../common/util");
+const { isNextLineEmpty } = require("../common/util-shared");
 const {
-  concat,
-  join,
-  hardline,
-  line,
-  softline,
-  group,
-  indent
-} = require("../doc").builders;
-
-// http://w3c.github.io/html/single-page.html#void-elements
-const voidTags = {
-  area: true,
-  base: true,
-  br: true,
-  col: true,
-  embed: true,
-  hr: true,
-  img: true,
-  input: true,
-  link: true,
-  meta: true,
-  param: true,
-  source: true,
-  track: true,
-  wbr: true
-};
+  builders: {
+    concat,
+    line,
+    hardline,
+    softline,
+    group,
+    indent,
+    conditionalGroup,
+    dedentToRoot
+  },
+  utils: { willBreak, isLineNext, isEmpty }
+} = require("../doc");
 
 function genericPrint(path, options, print) {
   const n = path.getValue();
@@ -43,50 +30,170 @@ function genericPrint(path, options, print) {
 
   switch (n.type) {
     case "root": {
-      return printChildren(path, print);
+      return concat(printChildren(path, print, options));
     }
     case "directive": {
-      return concat(["<", n.data, ">", hardline]);
+      return concat([
+        "<",
+        n.data.replace('!DOCTYPE html ""', "!DOCTYPE html"),
+        ">",
+        hardline
+      ]);
     }
     case "text": {
+      const parentNode = path.getParentNode();
+
+      if (
+        parentNode &&
+        (isPreTagNode(parentNode) || isTextAreaTagNode(parentNode))
+      ) {
+        return n.data;
+      }
+
       return n.data.replace(/\s+/g, " ").trim();
     }
     case "script":
     case "style":
     case "tag": {
-      const selfClose = voidTags[n.name] ? ">" : " />";
-      const children = printChildren(path, print);
+      const isVoid = isVoidTagNode(n);
+      const openingPrinted = printOpeningPart(path, print);
 
-      const hasNewline = hasNewlineInRange(
-        options.originalText,
-        options.locStart(n),
-        options.locEnd(n)
-      );
+      // Print self closing tag
+      if (isVoid) {
+        return concat([openingPrinted]);
+      }
 
-      return group(
+      const closingPrinted = printClosingPart(path, print);
+      const hasChildren = n.children.length > 0;
+
+      // Print tags without children
+      if (!hasChildren) {
+        return concat([openingPrinted, closingPrinted]);
+      }
+
+      const children = printChildren(path, print, options);
+
+      // NOTE: If the next token is a U+000A LINE FEED (LF) character token, then ignore that token and move
+      // on to the next one. (Newlines at the start of textarea elements are ignored as an authoring convenience.)
+      if (isPreTagNode(n) || isTextAreaTagNode(n)) {
+        const originalTagContent = options.originalText.slice(
+          n.sourceCodeLocation.startTag.endOffset,
+          n.sourceCodeLocation.endTag.startOffset
+        );
+        const hasNewlineAfterTag = /^(\r\n|\r|\n)/.test(originalTagContent);
+
+        return dedentToRoot(
+          group(
+            concat([
+              openingPrinted,
+              hasNewlineAfterTag ? hardline : "",
+              concat(children),
+              closingPrinted
+            ])
+          )
+        );
+      }
+
+      const isScriptTag = isScriptTagNode(n);
+
+      if (isScriptTag) {
+        return group(
+          concat([openingPrinted, concat(children), closingPrinted])
+        );
+      }
+
+      const containsTag =
+        n.children.filter(
+          node => ["script", "style", "tag"].indexOf(node.type) !== -1
+        ).length > 0;
+      const containsMultipleAttributes = n.attributes.length > 1;
+
+      let forcedBreak =
+        willBreak(openingPrinted) || containsTag || containsMultipleAttributes;
+
+      // Trim trailing lines (or empty strings)
+      while (
+        children.length &&
+        (isLineNext(getLast(children)) || isEmpty(getLast(children)))
+      ) {
+        children.pop();
+      }
+
+      // Trim leading lines (or empty strings)
+      while (
+        children.length &&
+        (isLineNext(children[0]) || isEmpty(children[0])) &&
+        (isLineNext(children[1]) || isEmpty(children[1]))
+      ) {
+        children.shift();
+        children.shift();
+      }
+
+      // Detect whether we will force this element to output over multiple lines.
+      const multilineChildren = [];
+
+      children.forEach(child => {
+        multilineChildren.push(child);
+
+        if (willBreak(child)) {
+          forcedBreak = true;
+        }
+      });
+
+      const containsOnlyEmptyTextNodes = n.children.every(node => {
+        return node.type === "text" && /^\s+$/.test(node.data);
+      });
+
+      const printedMultilineChildren = concat([
+        !isScriptTag && !containsOnlyEmptyTextNodes ? hardline : "",
+        group(concat(multilineChildren), { shouldBreak: true })
+      ]);
+
+      const multiLineElem = group(
         concat([
-          hasNewline ? hardline : "",
-          "<",
-          n.name,
-          printAttributes(path, print),
-
-          n.children.length ? ">" : selfClose,
-
-          n.name.toLowerCase() === "html"
-            ? concat([hardline, children])
-            : indent(children),
-          n.children.length ? concat([softline, "</", n.name, ">"]) : hardline
+          openingPrinted,
+          indent(printedMultilineChildren),
+          hardline,
+          closingPrinted
         ])
       );
+
+      if (forcedBreak) {
+        return multiLineElem;
+      }
+
+      return conditionalGroup([
+        group(concat([openingPrinted, concat(children), closingPrinted])),
+        multiLineElem
+      ]);
     }
     case "comment": {
-      return concat(["<!-- ", n.data.trim(), " -->"]);
+      return concat(["<!--", n.data, "-->"]);
     }
     case "attribute": {
       if (!n.value) {
-        return n.key;
+        if (isBooleanAttributeNode(n)) {
+          return n.key;
+        }
+
+        const parentNode = path.getParentNode();
+
+        if (!parentNode || !parentNode.sourceCodeLocation) {
+          return n.key;
+        }
+
+        const attributeSourceCodeLocation =
+          parentNode.sourceCodeLocation.attrs[n.key];
+        const originalAttributeSourceCode = options.originalText.slice(
+          attributeSourceCodeLocation.startOffset,
+          attributeSourceCodeLocation.endOffset
+        );
+        const hasEqualSign = originalAttributeSourceCode.indexOf("=") !== -1;
+
+        return hasEqualSign ? concat([n.key, '=""']) : n.key;
       }
-      return concat([n.key, '="', n.value, '"']);
+
+      return concat([n.key, '="', n.value.replace(/"/g, "&quot;"), '"']);
     }
 
     default:
@@ -95,25 +202,152 @@ function genericPrint(path, options, print) {
   }
 }
 
-function printAttributes(path, print) {
-  const node = path.getValue();
-
-  return concat([
-    node.attributes.length ? " " : "",
-    indent(join(line, path.map(print, "attributes")))
-  ]);
+function isBooleanAttributeNode(node) {
+  return (
+    node.type === "attribute" &&
+    [
+      "allowfullscreen",
+      "allowpaymentrequest",
+      "async",
+      "autofocus",
+      "autoplay",
+      "checked",
+      "controls",
+      "default",
+      "defer",
+      "disabled",
+      "formnovalidate",
+      "hidden",
+      "ismap",
+      "itemscope",
+      "loop",
+      "multiple",
+      "muted",
+      "nomodule",
+      "novalidate",
+      "open",
+      "readonly",
+      "required",
+      "reversed",
+      "selected",
+      "typemustmatch"
+    ].indexOf(node.key) !== -1
+  );
 }
 
-function printChildren(path, print) {
-  const children = [];
-  path.each(childPath => {
+// http://w3c.github.io/html/single-page.html#void-elements
+function isVoidTagNode(node) {
+  return (
+    node.type === "tag" &&
+    [
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "link",
+      "meta",
+      "param",
+      "source",
+      "track",
+      "wbr"
+    ].indexOf(node.name) !== -1
+  );
+}
+
+function isPreTagNode(node) {
+  return node.type === "tag" && node.name === "pre";
+}
+
+function isTextAreaTagNode(node) {
+  return node.type === "tag" && node.name === "textarea";
+}
+
+function isScriptTagNode(node) {
+  return (
+    (node.type === "script" || node.type === "style") &&
+    ["script", "style"].indexOf(node.name) !== -1
+  );
+}
+
+function printOpeningPart(path, print) {
+  const n = path.getValue();
+  const isVoid = isVoidTagNode(n);
+
+  // Don't break self-closing elements with no attributes
+  if (isVoid && !n.attributes.length) {
+    return concat(["<", n.name, ">"]);
+  }
+
+  // Don't break up opening elements with a single long text attribute
+  if (n.attributes && n.attributes.length === 1 && n.attributes[0].value) {
+    return group(
+      concat([
+        "<",
+        path.call(print, "name"),
+        " ",
+        concat(path.map(print, "attributes")),
+        ">"
+      ])
+    );
+  }
+
+  return group(
+    concat([
+      "<",
+      n.name,
+      concat([
+        indent(
+          concat(path.map(attr => concat([line, print(attr)]), "attributes"))
+        ),
+        softline
+      ]),
+      ">"
+    ])
+  );
+}
+
+function printClosingPart(path, print) {
+  return concat(["</", path.call(print, "name"), ">"]);
+}
+
+function printChildren(path, print, options) {
+  const parts = [];
+
+  path.map((childPath, i) => {
+    const parentNode = childPath.getParentNode();
     const child = childPath.getValue();
-    if (child.type !== "text") {
-      children.push(hardline);
+    const printedChild = print(childPath);
+
+    if (
+      parentNode &&
+      parentNode.children[i - 2] &&
+      parentNode.children[i - 2].type === "comment" &&
+      parentNode.children[i - 2].data.trim() === "prettier-ignore"
+    ) {
+      parts.push(
+        options.originalText.slice(
+          options.locStart(child),
+          options.locEnd(child)
+        )
+      );
+    } else {
+      parts.push(printedChild);
+    }
+
+    if (child.type !== "text" && child.type !== "directive") {
+      parts.push(hardline);
+    }
+
+    if (isNextLineEmpty(options.originalText, childPath.getValue(), options)) {
+      parts.push(hardline);
     }
-    children.push(childPath.call(print));
   }, "children");
-  return concat(children);
+
+  return parts;
 }
 
 module.exports = {
diff --git a/tests/html_glimmer/__snapshots__/jsfmt.spec.js.snap b/tests/glimmer/__snapshots__/jsfmt.spec.js.snap
similarity index 100%
rename from tests/html_glimmer/__snapshots__/jsfmt.spec.js.snap
rename to tests/glimmer/__snapshots__/jsfmt.spec.js.snap
diff --git a/tests/html_glimmer/block-statement.hbs b/tests/glimmer/block-statement.hbs
similarity index 100%
rename from tests/html_glimmer/block-statement.hbs
rename to tests/glimmer/block-statement.hbs
diff --git a/tests/html_glimmer/component.hbs b/tests/glimmer/component.hbs
similarity index 100%
rename from tests/html_glimmer/component.hbs
rename to tests/glimmer/component.hbs
diff --git a/tests/html_glimmer/concat-statement.hbs b/tests/glimmer/concat-statement.hbs
similarity index 100%
rename from tests/html_glimmer/concat-statement.hbs
rename to tests/glimmer/concat-statement.hbs
diff --git a/tests/html_glimmer/element-modifier-statement.hbs b/tests/glimmer/element-modifier-statement.hbs
similarity index 100%
rename from tests/html_glimmer/element-modifier-statement.hbs
rename to tests/glimmer/element-modifier-statement.hbs
diff --git a/tests/html_glimmer/element-node.hbs b/tests/glimmer/element-node.hbs
similarity index 100%
rename from tests/html_glimmer/element-node.hbs
rename to tests/glimmer/element-node.hbs
diff --git a/tests/html_glimmer/else-if.hbs b/tests/glimmer/else-if.hbs
similarity index 100%
rename from tests/html_glimmer/else-if.hbs
rename to tests/glimmer/else-if.hbs
diff --git a/tests/html_glimmer/jsfmt.spec.js b/tests/glimmer/jsfmt.spec.js
similarity index 100%
rename from tests/html_glimmer/jsfmt.spec.js
rename to tests/glimmer/jsfmt.spec.js
diff --git a/tests/html_glimmer/literals.hbs b/tests/glimmer/literals.hbs
similarity index 100%
rename from tests/html_glimmer/literals.hbs
rename to tests/glimmer/literals.hbs
diff --git a/tests/html_glimmer/loop.hbs b/tests/glimmer/loop.hbs
similarity index 100%
rename from tests/html_glimmer/loop.hbs
rename to tests/glimmer/loop.hbs
diff --git a/tests/html_glimmer/sub-expressions.hbs b/tests/glimmer/sub-expressions.hbs
similarity index 100%
rename from tests/html_glimmer/sub-expressions.hbs
rename to tests/glimmer/sub-expressions.hbs
diff --git a/tests/html_handlebars/__snapshots__/jsfmt.spec.js.snap b/tests/handlebars/__snapshots__/jsfmt.spec.js.snap
similarity index 100%
rename from tests/html_handlebars/__snapshots__/jsfmt.spec.js.snap
rename to tests/handlebars/__snapshots__/jsfmt.spec.js.snap
diff --git a/tests/html_handlebars/basic-handlebars.hbs b/tests/handlebars/basic-handlebars.hbs
similarity index 100%
rename from tests/html_handlebars/basic-handlebars.hbs
rename to tests/handlebars/basic-handlebars.hbs
diff --git a/tests/html_handlebars/comments.hbs b/tests/handlebars/comments.hbs
similarity index 100%
rename from tests/html_handlebars/comments.hbs
rename to tests/handlebars/comments.hbs
diff --git a/tests/html_handlebars/each.hbs b/tests/handlebars/each.hbs
similarity index 100%
rename from tests/html_handlebars/each.hbs
rename to tests/handlebars/each.hbs
diff --git a/tests/html_handlebars/if-else.hbs b/tests/handlebars/if-else.hbs
similarity index 100%
rename from tests/html_handlebars/if-else.hbs
rename to tests/handlebars/if-else.hbs
diff --git a/tests/html_handlebars/if.hbs b/tests/handlebars/if.hbs
similarity index 100%
rename from tests/html_handlebars/if.hbs
rename to tests/handlebars/if.hbs
diff --git a/tests/html_handlebars/jsfmt.spec.js b/tests/handlebars/jsfmt.spec.js
similarity index 100%
rename from tests/html_handlebars/jsfmt.spec.js
rename to tests/handlebars/jsfmt.spec.js
diff --git a/tests/html_handlebars/nested-path.hbs b/tests/handlebars/nested-path.hbs
similarity index 100%
rename from tests/html_handlebars/nested-path.hbs
rename to tests/handlebars/nested-path.hbs
diff --git a/tests/html_handlebars/raw.hbs b/tests/handlebars/raw.hbs
similarity index 100%
rename from tests/html_handlebars/raw.hbs
rename to tests/handlebars/raw.hbs
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..030640caf
--- /dev/null
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attributes.html - parse5-verify 1`] = `
+<input name=address maxlength=200>
+<input name='address' maxlength='200'>
+<input name="address" maxlength="200">
+<div class="foo"></div>
+<div   class="foo"   ></div>
+<div class="foo bar"></div>
+<div class="foo bar" id="header"></div>
+<div   class="foo bar"   id="header"   ></div>
+<div data-prettier></div>
+<div data-prettier="true"></div>
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<div attribute>String</div>
+<div attribute="">String</div>
+<div attribute=''>String</div>
+<div attribute >String</div>
+<div attribute = "" >String</div>
+<div attribute = '' >String</div>
+<div  attribute  >String</div>
+<div  attribute  =  ""  >String</div>
+<div  attribute  =  ''  >String</div>
+<div attribute="attribute = attribute"></div>
+<div ATTRIBUTE>String</div>
+<div ATTRIBUTE="">String</div>
+<div ATTRIBUTE=''>String</div>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">...</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+  ...
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+
+
+
+</article>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<input name="address" maxlength="200">
+<input name="address" maxlength="200">
+<input name="address" maxlength="200">
+<div class="foo"></div>
+<div class="foo"></div>
+<div class="foo bar"></div>
+<div class="foo bar" id="header"></div>
+<div class="foo bar" id="header"></div>
+<div data-prettier></div>
+<div data-prettier="true"></div>
+<meta
+  property="og:description"
+  content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
+>
+<div attribute>String</div>
+<div attribute="">String</div>
+<div attribute="">String</div>
+<div attribute>String</div>
+<div attribute="">String</div>
+<div attribute="">String</div>
+<div attribute>String</div>
+<div attribute="">String</div>
+<div attribute="">String</div>
+<div attribute="attribute = attribute"></div>
+<div attribute>String</div>
+<div attribute="">String</div>
+<div attribute="">String</div>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"
+>
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"
+>
+  ...
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"
+>
+  ...
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"
+>
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"
+>
+</article>
+
+`;
+
+exports[`boolean.html - parse5-verify 1`] = `
+<button type="submit">This is valid.</button>
+<button type="submit" disabled>This is valid.</button>
+<button type="submit" disabled="">This is valid.</button>
+<button type="submit" disabled="disabled">This is valid.</button>
+<button type="submit" disabled=true>This is valid. This will be disabled.</button>
+<button type="submit" disabled='true'>This is valid. This will be disabled.</button>
+<button type="submit" disabled="true">This is valid. This will be disabled.</button>
+<button type="submit" disabled=false>This is valid. This will be disabled.</button>
+<button type="submit" disabled="false">This is valid. This will be disabled.</button>
+<button type="submit" disabled='false'>This is valid. This will be disabled.</button>
+<button type="submit" disabled=hahah>This is valid. This will be disabled.</button>
+<button type="submit" disabled='hahah'>This is valid. This will be disabled.</button>
+<button type="submit" disabled="hahah">This is valid. This will be disabled.</button>
+<input type="checkbox" checked disabled name="cheese">
+<input type="checkbox" checked="checked" disabled="disabled" name="cheese">
+<input type='checkbox' checked="" disabled="" name=cheese >
+<div lang=""></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<button type="submit">This is valid.</button>
+<button type="submit" disabled>
+  This is valid.
+</button>
+<button type="submit" disabled>
+  This is valid.
+</button>
+<button type="submit" disabled="disabled">
+  This is valid.
+</button>
+<button type="submit" disabled="true">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="true">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="true">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="false">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="false">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="false">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="hahah">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="hahah">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="hahah">
+  This is valid. This will be disabled.
+</button>
+<input type="checkbox" checked disabled name="cheese">
+<input type="checkbox" checked="checked" disabled="disabled" name="cheese">
+<input type="checkbox" checked disabled name="cheese">
+<div lang=""></div>
+
+`;
+
+exports[`dobule-quotes.html - parse5-verify 1`] = `
+<img src="test.png" alt="John 'ShotGun' Nelson">
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<img src="test.png" alt="John 'ShotGun' Nelson">
+
+`;
+
+exports[`single-quotes.html - parse5-verify 1`] = `
+<img src="test.png" alt='John "ShotGun" Nelson'>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<img src="test.png" alt="John &quot;ShotGun&quot; Nelson">
+
+`;
+
+exports[`without-quotes.html - parse5-verify 1`] = `
+<p title=Title>String</p>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<p title="Title">String</p>
+
+`;
diff --git a/tests/html_attributes/attributes.html b/tests/html_attributes/attributes.html
new file mode 100644
index 000000000..a1950c3f8
--- /dev/null
+++ b/tests/html_attributes/attributes.html
@@ -0,0 +1,60 @@
+<input name=address maxlength=200>
+<input name='address' maxlength='200'>
+<input name="address" maxlength="200">
+<div class="foo"></div>
+<div   class="foo"   ></div>
+<div class="foo bar"></div>
+<div class="foo bar" id="header"></div>
+<div   class="foo bar"   id="header"   ></div>
+<div data-prettier></div>
+<div data-prettier="true"></div>
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<div attribute>String</div>
+<div attribute="">String</div>
+<div attribute=''>String</div>
+<div attribute >String</div>
+<div attribute = "" >String</div>
+<div attribute = '' >String</div>
+<div  attribute  >String</div>
+<div  attribute  =  ""  >String</div>
+<div  attribute  =  ''  >String</div>
+<div attribute="attribute = attribute"></div>
+<div ATTRIBUTE>String</div>
+<div ATTRIBUTE="">String</div>
+<div ATTRIBUTE=''>String</div>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">...</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+  ...
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+
+</article>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+
+
+
+</article>
diff --git a/tests/html_attributes/boolean.html b/tests/html_attributes/boolean.html
new file mode 100644
index 000000000..9d6ae14d7
--- /dev/null
+++ b/tests/html_attributes/boolean.html
@@ -0,0 +1,17 @@
+<button type="submit">This is valid.</button>
+<button type="submit" disabled>This is valid.</button>
+<button type="submit" disabled="">This is valid.</button>
+<button type="submit" disabled="disabled">This is valid.</button>
+<button type="submit" disabled=true>This is valid. This will be disabled.</button>
+<button type="submit" disabled='true'>This is valid. This will be disabled.</button>
+<button type="submit" disabled="true">This is valid. This will be disabled.</button>
+<button type="submit" disabled=false>This is valid. This will be disabled.</button>
+<button type="submit" disabled="false">This is valid. This will be disabled.</button>
+<button type="submit" disabled='false'>This is valid. This will be disabled.</button>
+<button type="submit" disabled=hahah>This is valid. This will be disabled.</button>
+<button type="submit" disabled='hahah'>This is valid. This will be disabled.</button>
+<button type="submit" disabled="hahah">This is valid. This will be disabled.</button>
+<input type="checkbox" checked disabled name="cheese">
+<input type="checkbox" checked="checked" disabled="disabled" name="cheese">
+<input type='checkbox' checked="" disabled="" name=cheese >
+<div lang=""></div>
diff --git a/tests/html_attributes/dobule-quotes.html b/tests/html_attributes/dobule-quotes.html
new file mode 100644
index 000000000..aab2364d8
--- /dev/null
+++ b/tests/html_attributes/dobule-quotes.html
@@ -0,0 +1 @@
+<img src="test.png" alt="John 'ShotGun' Nelson">
diff --git a/tests/html_attributes/jsfmt.spec.js b/tests/html_attributes/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_attributes/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_attributes/single-quotes.html b/tests/html_attributes/single-quotes.html
new file mode 100644
index 000000000..8a360f103
--- /dev/null
+++ b/tests/html_attributes/single-quotes.html
@@ -0,0 +1 @@
+<img src="test.png" alt='John "ShotGun" Nelson'>
diff --git a/tests/html_attributes/without-quotes.html b/tests/html_attributes/without-quotes.html
new file mode 100644
index 000000000..845e140d4
--- /dev/null
+++ b/tests/html_attributes/without-quotes.html
@@ -0,0 +1 @@
+<p title=Title>String</p>
diff --git a/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap b/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap
index 97f98b63c..c54c58dcd 100644
--- a/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_aurelia/__snapshots__/jsfmt.spec.js.snap
@@ -5,11 +5,9 @@ exports[`basic.html - parse5-verify 1`] = `
   <i class.bind="icon"></i>
 </template>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-
 <template>
-
-  <i class.bind="icon" />
+  <i class.bind="icon"></i>
 
 </template>
+
 `;
diff --git a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
index 6f40c76e5..4c0f88b5a 100644
--- a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,208 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`empty.html - parse5-verify 1`] = `
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+`;
+
+exports[`empty-doc.html - parse5-verify 1`] = `
+<!doctype html>
+<html>
+<head></head>
+<body></body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body></body>
+</html>
+
+`;
+
+exports[`form.html - parse5-verify 1`] = `
+<form>
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-group">
+    <label for="exampleSelect1">Example select</label>
+    <select class="form-control" id="exampleSelect1">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleSelect2">Example multiple select</label>
+    <select multiple class="form-control" id="exampleSelect2">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleTextarea">Example textarea</label>
+    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputFile">File input</label>
+    <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
+    <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
+  </div>
+  <fieldset class="form-group">
+    <legend>Radio buttons</legend>
+    <div class="form-check">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+        Option one is this and that&mdash;be sure to include why it's great
+      </label>
+    </div>
+    <div class="form-check">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
+        Option two can be something else and selecting it will deselect option one
+      </label>
+    </div>
+    <div class="form-check disabled">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+        Option three is disabled
+      </label>
+    </div>
+  </fieldset>
+  <div class="form-check">
+    <label class="form-check-label">
+      <input type="checkbox" class="form-check-input">
+      Check me out
+    </label>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<form>
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input
+      type="email"
+      class="form-control"
+      id="exampleInputEmail1"
+      aria-describedby="emailHelp"
+      placeholder="Enter email"
+    >
+    <small id="emailHelp" class="form-text text-muted">
+      We'll never share your email with anyone else.
+    </small>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input
+      type="password"
+      class="form-control"
+      id="exampleInputPassword1"
+      placeholder="Password"
+    >
+  </div>
+  <div class="form-group">
+    <label for="exampleSelect1">Example select</label>
+    <select class="form-control" id="exampleSelect1">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleSelect2">Example multiple select</label>
+    <select multiple class="form-control" id="exampleSelect2">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleTextarea">Example textarea</label>
+    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputFile">File input</label>
+    <input
+      type="file"
+      class="form-control-file"
+      id="exampleInputFile"
+      aria-describedby="fileHelp"
+    >
+    <small id="fileHelp" class="form-text text-muted">
+      This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
+    </small>
+  </div>
+  <fieldset class="form-group">
+    <legend>Radio buttons</legend>
+    <div class="form-check">
+      <label class="form-check-label">
+        <input
+          type="radio"
+          class="form-check-input"
+          name="optionsRadios"
+          id="optionsRadios1"
+          value="option1"
+          checked
+        >
+        Option one is this and that—be sure to include why it's great
+      </label>
+    </div>
+    <div class="form-check">
+      <label class="form-check-label">
+        <input
+          type="radio"
+          class="form-check-input"
+          name="optionsRadios"
+          id="optionsRadios2"
+          value="option2"
+        >
+        Option two can be something else and selecting it will deselect option one
+      </label>
+    </div>
+    <div class="form-check disabled">
+      <label class="form-check-label">
+        <input
+          type="radio"
+          class="form-check-input"
+          name="optionsRadios"
+          id="optionsRadios3"
+          value="option3"
+          disabled
+        >
+        Option three is disabled
+      </label>
+    </div>
+  </fieldset>
+  <div class="form-check">
+    <label class="form-check-label">
+      <input type="checkbox" class="form-check-input">
+      Check me out
+    </label>
+  </div>
+  <button type="submit" class="btn btn-primary">
+    Submit
+  </button>
+</form>
+
+`;
+
 exports[`hello-world.html - parse5-verify 1`] = `
 <!DOCTYPE html>
 <html lang="en">
@@ -16,30 +219,20 @@ exports[`hello-world.html - parse5-verify 1`] = `
 </html>
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 <!DOCTYPE html>
-
-
 <html lang="en">
-
-
-<head>
-  <meta charset="UTF-8">
-
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0">
-
-  <meta http-equiv="X-UA-Compatible"
-    content="ie=edge">
-
-  <title>Document</title>
-</head>
-
-<body>
-  <!-- A comment -->
-  <h1>Hello World</h1>
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+  </head>
+  <body>
+    <!-- A comment -->
+    <h1>Hello World</h1>
+  </body>
 </html>
+
 `;
 
 exports[`html-comments.html - parse5-verify 1`] = `
@@ -51,22 +244,15 @@ exports[`html-comments.html - parse5-verify 1`] = `
   </body>
 </html>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 <!-- htmlhint attr-lowercase: false -->
-
 <html>
-
-<head />
-
-
-<body>
-  <a href="#">Anchor</a>
-  <div hidden
-    class="foo"
-    id="bar" />
-
-</body>
+  <head></head>
+  <body>
+    <a href="#">Anchor</a>
+    <div hidden class="foo" id="bar"></div>
+  </body>
 </html>
+
 `;
 
 exports[`html-fragment.html - parse5-verify 1`] = `
@@ -74,35 +260,131 @@ exports[`html-fragment.html - parse5-verify 1`] = `
 
 <textarea>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 <a href="#">Link</a>
-<textarea />
+
+<textarea></textarea>
+
+`;
+
+exports[`html5-boilerplate.html - parse5-verify 1`] = `
+<!doctype html>
+<html class="no-js" lang="">
+
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="apple-touch-icon" href="icon.png">
+    <!-- Place favicon.ico in the root directory -->
+
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+
+  <body>
+    <!--[if lte IE 9]>
+    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+    <![endif]-->
+
+    <!-- Add your site or application content here -->
+    <p>Hello world! This is HTML5 Boilerplate.</p>
+    <script src="js/vendor/modernizr-3.6.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\\/script>')</script>
+    <script src="js/plugins.js"></script>
+    <script src="js/main.js"></script>
+
+    <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+    <script>
+      window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+      ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    </script>
+    <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+  </body>
+
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    >
+
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="apple-touch-icon" href="icon.png">
+    <!-- Place favicon.ico in the root directory -->
+
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+
+  <body>
+    <!--[if lte IE 9]>
+    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+    <![endif]-->
+
+    <!-- Add your site or application content here -->
+    <p>Hello world! This is HTML5 Boilerplate.</p>
+    <script src="js/vendor/modernizr-3.6.0.min.js"></script>
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.min.js"
+      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+      crossorigin="anonymous"
+    ></script>
+    <script>
+    window.jQuery ||
+      document.write('<script src="js/vendor/jquery-3.3.1.min.js"></script>');
+    </script>
+    <script src="js/plugins.js"></script>
+    <script src="js/main.js"></script>
+
+    <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+    <script>
+    window.ga = function() {
+      ga.q.push(arguments);
+    };
+    ga.q = [];
+    ga.l = +new Date();
+    ga("create", "UA-XXXXX-Y", "auto");
+    ga("send", "pageview");
+    </script>
+    <script
+      src="https://www.google-analytics.com/analytics.js"
+      async
+      defer
+    ></script>
+  </body>
+</html>
 
 `;
 
 exports[`more-html.html - parse5-verify 1`] = `
 <html>
+<head></head>
 <body>
     <a href="#">Anchor</a>
     <div hidden class="foo" id=bar></div>
 </body>
 </html>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-
 <html>
-
-<head />
-
-
-<body>
-  <a href="#">Anchor</a>
-  <div hidden
-    class="foo"
-    id="bar" />
-
-</body>
+  <head></head>
+  <body>
+    <a href="#">Anchor</a>
+    <div hidden class="foo" id="bar"></div>
+  </body>
 </html>
+
 `;
 
 exports[`void-elements.html - parse5-verify 1`] = `
@@ -114,20 +396,12 @@ exports[`void-elements.html - parse5-verify 1`] = `
 <body></body>
 </html>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-
 <html>
-
-
-<head>
-  <meta charset="UTF-8">
-
-  <link rel="stylesheet"
-    href="code-guide.css">
-
-</head>
-
-<body>
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="code-guide.css">
+  </head>
+  <body></body>
 </html>
+
 `;
diff --git a/tests/html_basics/empty-doc.html b/tests/html_basics/empty-doc.html
new file mode 100644
index 000000000..0a5364f28
--- /dev/null
+++ b/tests/html_basics/empty-doc.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<html>
+<head></head>
+<body></body>
+</html>
diff --git a/tests/html_basics/empty.html b/tests/html_basics/empty.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/html_basics/form.html b/tests/html_basics/form.html
new file mode 100644
index 000000000..2359be3f0
--- /dev/null
+++ b/tests/html_basics/form.html
@@ -0,0 +1,68 @@
+<form>
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-group">
+    <label for="exampleSelect1">Example select</label>
+    <select class="form-control" id="exampleSelect1">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleSelect2">Example multiple select</label>
+    <select multiple class="form-control" id="exampleSelect2">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleTextarea">Example textarea</label>
+    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputFile">File input</label>
+    <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
+    <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
+  </div>
+  <fieldset class="form-group">
+    <legend>Radio buttons</legend>
+    <div class="form-check">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+        Option one is this and that&mdash;be sure to include why it's great
+      </label>
+    </div>
+    <div class="form-check">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
+        Option two can be something else and selecting it will deselect option one
+      </label>
+    </div>
+    <div class="form-check disabled">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+        Option three is disabled
+      </label>
+    </div>
+  </fieldset>
+  <div class="form-check">
+    <label class="form-check-label">
+      <input type="checkbox" class="form-check-input">
+      Check me out
+    </label>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>
diff --git a/tests/html_basics/html5-boilerplate.html b/tests/html_basics/html5-boilerplate.html
new file mode 100644
index 000000000..eaec6ee6e
--- /dev/null
+++ b/tests/html_basics/html5-boilerplate.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="apple-touch-icon" href="icon.png">
+    <!-- Place favicon.ico in the root directory -->
+
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+
+  <body>
+    <!--[if lte IE 9]>
+    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+    <![endif]-->
+
+    <!-- Add your site or application content here -->
+    <p>Hello world! This is HTML5 Boilerplate.</p>
+    <script src="js/vendor/modernizr-3.6.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
+    <script src="js/plugins.js"></script>
+    <script src="js/main.js"></script>
+
+    <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+    <script>
+      window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+      ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    </script>
+    <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+  </body>
+
+</html>
diff --git a/tests/html_basics/more-html.html b/tests/html_basics/more-html.html
index a21da1b9f..8b7f4cff9 100644
--- a/tests/html_basics/more-html.html
+++ b/tests/html_basics/more-html.html
@@ -1,4 +1,5 @@
 <html>
+<head></head>
 <body>
     <a href="#">Anchor</a>
     <div hidden class="foo" id=bar></div>
diff --git a/tests/html_case/__snapshots__/jsfmt.spec.js.snap b/tests/html_case/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..e170300a9
--- /dev/null
+++ b/tests/html_case/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`case.html - parse5-verify 1`] = `
+<!DOCTYPE html>
+<HTML CLASS="no-js mY-ClAsS">
+  <HEAD>
+    <META CHARSET="utf-8">
+    <TITLE>My tITlE</TITLE>
+    <META NAME="description" content="My CoNtEnT">
+  </HEAD>
+  <body>
+    <P>Hello world!<BR> This is HTML5 Boilerplate.</P>
+    <SCRIPT>
+      window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+      ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    </SCRIPT>
+    <SCRIPT src="https://www.google-analytics.com/analytics.js" ASYNC DEFER></SCRIPT>
+  </body>
+</HTML>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html class="no-js mY-ClAsS">
+  <head>
+    <meta charset="utf-8">
+    <title>My tITlE</title>
+    <meta name="description" content="My CoNtEnT">
+  </head>
+  <body>
+    <p>
+      Hello world!<br>
+      This is HTML5 Boilerplate.
+    </p>
+    <script>
+    window.ga = function() {
+      ga.q.push(arguments);
+    };
+    ga.q = [];
+    ga.l = +new Date();
+    ga("create", "UA-XXXXX-Y", "auto");
+    ga("send", "pageview");
+    </script>
+    <script
+      src="https://www.google-analytics.com/analytics.js"
+      async
+      defer
+    ></script>
+  </body>
+</html>
+
+`;
diff --git a/tests/html_case/case.html b/tests/html_case/case.html
new file mode 100644
index 000000000..feff88c0e
--- /dev/null
+++ b/tests/html_case/case.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<HTML CLASS="no-js mY-ClAsS">
+  <HEAD>
+    <META CHARSET="utf-8">
+    <TITLE>My tITlE</TITLE>
+    <META NAME="description" content="My CoNtEnT">
+  </HEAD>
+  <body>
+    <P>Hello world!<BR> This is HTML5 Boilerplate.</P>
+    <SCRIPT>
+      window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+      ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    </SCRIPT>
+    <SCRIPT src="https://www.google-analytics.com/analytics.js" ASYNC DEFER></SCRIPT>
+  </body>
+</HTML>
diff --git a/tests/html_case/jsfmt.spec.js b/tests/html_case/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_case/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..8012017d3
--- /dev/null
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`conditional.html - parse5-verify 1`] = `
+<!DOCTYPE html>
+<html>
+  <body>
+
+    <!--[if IE 5]>This is IE 5<br><![endif]-->
+    <!--[if IE 6]>This is IE 6<br><![endif]-->
+    <!--[if IE 7]>This is IE 7<br><![endif]-->
+    <!--[if IE 8]>This is IE 8<br><![endif]-->
+    <!--[if IE 9]>This is IE 9<br><![endif]-->
+
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <!--[if IE 5]>This is IE 5<br><![endif]-->
+    <!--[if IE 6]>This is IE 6<br><![endif]-->
+    <!--[if IE 7]>This is IE 7<br><![endif]-->
+    <!--[if IE 8]>This is IE 8<br><![endif]-->
+    <!--[if IE 9]>This is IE 9<br><![endif]-->
+  </body>
+</html>
+
+`;
+
+exports[`for_debugging.html - parse5-verify 1`] = `
+<!DOCTYPE html>
+<html>
+  <body>
+
+<!-- Do not display this at the moment
+<img border="0" src="pic_trulli.jpg" alt="Trulli">
+-->
+
+  <!-- Do not display this at the moment
+  <img border="0" src="pic_trulli.jpg" alt="Trulli">
+  -->
+
+    <!-- Do not display this at the moment
+    <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <!-- Do not display this at the moment
+<img border="0" src="pic_trulli.jpg" alt="Trulli">
+-->
+
+    <!-- Do not display this at the moment
+  <img border="0" src="pic_trulli.jpg" alt="Trulli">
+  -->
+
+    <!-- Do not display this at the moment
+    <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+  </body>
+</html>
+
+`;
+
+exports[`hidden.html - parse5-verify 1`] = `
+<!DOCTYPE html>
+<html>
+    <body>
+
+        <!--This is a comment-->
+        <!-- This is a comment -->
+        <!--  This is a comment  -->
+        <!--   This   is   a   comment   -->
+        <p>This is a paragraph.</p>
+        <!-- Comments are not displayed in the browser -->
+
+    </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <!--This is a comment-->
+    <!-- This is a comment -->
+    <!--  This is a comment  -->
+    <!--   This   is   a   comment   -->
+    <p>This is a paragraph.</p>
+    <!-- Comments are not displayed in the browser -->
+  </body>
+</html>
+
+`;
diff --git a/tests/html_comments/conditional.html b/tests/html_comments/conditional.html
new file mode 100644
index 000000000..35394ad60
--- /dev/null
+++ b/tests/html_comments/conditional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <body>
+
+    <!--[if IE 5]>This is IE 5<br><![endif]-->
+    <!--[if IE 6]>This is IE 6<br><![endif]-->
+    <!--[if IE 7]>This is IE 7<br><![endif]-->
+    <!--[if IE 8]>This is IE 8<br><![endif]-->
+    <!--[if IE 9]>This is IE 9<br><![endif]-->
+
+  </body>
+</html>
diff --git a/tests/html_comments/for_debugging.html b/tests/html_comments/for_debugging.html
new file mode 100644
index 000000000..2e226da21
--- /dev/null
+++ b/tests/html_comments/for_debugging.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <body>
+
+<!-- Do not display this at the moment
+<img border="0" src="pic_trulli.jpg" alt="Trulli">
+-->
+
+  <!-- Do not display this at the moment
+  <img border="0" src="pic_trulli.jpg" alt="Trulli">
+  -->
+
+    <!-- Do not display this at the moment
+    <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+  </body>
+</html>
diff --git a/tests/html_comments/hidden.html b/tests/html_comments/hidden.html
new file mode 100644
index 000000000..079bb7dd7
--- /dev/null
+++ b/tests/html_comments/hidden.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <body>
+
+        <!--This is a comment-->
+        <!-- This is a comment -->
+        <!--  This is a comment  -->
+        <!--   This   is   a   comment   -->
+        <p>This is a paragraph.</p>
+        <!-- Comments are not displayed in the browser -->
+
+    </body>
+</html>
diff --git a/tests/html_comments/jsfmt.spec.js b/tests/html_comments/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_comments/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_css/__snapshots__/jsfmt.spec.js.snap b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..2b49ef97c
--- /dev/null
+++ b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty.html - parse5-verify 1`] = `
+<style></style>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<style></style>
+
+`;
+
+exports[`less.html - parse5-verify 1`] = `
+<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>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<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 - parse5-verify 1`] = `
+<style type="text/css">
+  body { background: navy; color: yellow; }
+</style>
+
+<style lang="postcss">
+  body { background: navy; color: yellow; }
+</style>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<style type="text/css">
+body {
+  background: navy;
+  color: yellow;
+}</style>
+
+<style lang="postcss">
+body {
+  background: navy;
+  color: yellow;
+}</style>
+
+`;
+
+exports[`scss.html - parse5-verify 1`] = `
+<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 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>
+
+`;
+
+exports[`simple.html - parse5-verify 1`] = `
+<!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>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!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 - parse5-verify 1`] = `
+<style>a { color: red; }</style>
+<style>
+  h1 {
+    font-size: 120%;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    color: #333366;
+  }
+</style>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<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/empty.html b/tests/html_css/empty.html
new file mode 100644
index 000000000..6f29e9e9f
--- /dev/null
+++ b/tests/html_css/empty.html
@@ -0,0 +1 @@
+<style></style>
diff --git a/tests/html_css/jsfmt.spec.js b/tests/html_css/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_css/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_css/less.html b/tests/html_css/less.html
new file mode 100644
index 000000000..3f2dcd1ca
--- /dev/null
+++ b/tests/html_css/less.html
@@ -0,0 +1,17 @@
+<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>
diff --git a/tests/html_css/postcss.html b/tests/html_css/postcss.html
new file mode 100644
index 000000000..7c7a677c7
--- /dev/null
+++ b/tests/html_css/postcss.html
@@ -0,0 +1,7 @@
+<style type="text/css">
+  body { background: navy; color: yellow; }
+</style>
+
+<style lang="postcss">
+  body { background: navy; color: yellow; }
+</style>
diff --git a/tests/html_css/scss.html b/tests/html_css/scss.html
new file mode 100644
index 000000000..bffd0b54b
--- /dev/null
+++ b/tests/html_css/scss.html
@@ -0,0 +1,19 @@
+<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>
diff --git a/tests/html_css/simple.html b/tests/html_css/simple.html
new file mode 100644
index 000000000..2e1e0b242
--- /dev/null
+++ b/tests/html_css/simple.html
@@ -0,0 +1,14 @@
+<!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>
diff --git a/tests/html_css/single-style.html b/tests/html_css/single-style.html
new file mode 100644
index 000000000..84dccb63a
--- /dev/null
+++ b/tests/html_css/single-style.html
@@ -0,0 +1,8 @@
+<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_doctype_declarations/__snapshots__/jsfmt.spec.js.snap b/tests/html_doctype_declarations/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..5438d2201
--- /dev/null
+++ b/tests/html_doctype_declarations/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`html4.01_frameset.html - parse5-verify 1`] = `
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8"  />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+
+`;
+
+exports[`html4.01_strict.html - parse5-verify 1`] = `
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+
+`;
+
+exports[`html4.01_transitional.html - parse5-verify 1`] = `
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+
+`;
+
+exports[`html5.html - parse5-verify 1`] = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
+
+`;
+
+exports[`xhtml1.1.html - parse5-verify 1`] = `
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
+    <title>XHTML markup</title>
+  </head>
+  <body style="background-color:#ffffcc; color:#008800">
+    <br />
+    <h2 align="center">Sample XHTML page</h2>
+    <br />
+    <div align="center">
+      <img src="../images/bee3.jpg" width="400" height="250" alt="Beep" vspace="20" />
+    </div>
+    <p align="center" style="font-size:17px">Bar Foo,<br />
+      Foo,<br />
+      Bar<br />
+      Foo</p>
+    <p align="center"><em>String</em></p>
+    <br />
+    <hr />
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
+    <title>XHTML markup</title>
+  </head>
+  <body style="background-color:#ffffcc; color:#008800">
+    <br>
+    <h2 align="center">Sample XHTML page</h2>
+    <br>
+    <div align="center">
+      <img
+        src="../images/bee3.jpg"
+        width="400"
+        height="250"
+        alt="Beep"
+        vspace="20"
+      >
+    </div>
+    <p align="center" style="font-size:17px">
+      Bar Foo,<br>
+      Foo,<br>
+      Bar<br>
+      Foo
+    </p>
+    <p align="center">
+      <em>String</em>
+    </p>
+    <br>
+    <hr>
+  </body>
+</html>
+
+`;
diff --git a/tests/html_doctype_declarations/html4.01_frameset.html b/tests/html_doctype_declarations/html4.01_frameset.html
new file mode 100644
index 000000000..0a48c9b72
--- /dev/null
+++ b/tests/html_doctype_declarations/html4.01_frameset.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8"  />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
diff --git a/tests/html_doctype_declarations/html4.01_strict.html b/tests/html_doctype_declarations/html4.01_strict.html
new file mode 100644
index 000000000..1171d316e
--- /dev/null
+++ b/tests/html_doctype_declarations/html4.01_strict.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
diff --git a/tests/html_doctype_declarations/html4.01_transitional.html b/tests/html_doctype_declarations/html4.01_transitional.html
new file mode 100644
index 000000000..101498871
--- /dev/null
+++ b/tests/html_doctype_declarations/html4.01_transitional.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
diff --git a/tests/html_doctype_declarations/html5.html b/tests/html_doctype_declarations/html5.html
new file mode 100644
index 000000000..218980b98
--- /dev/null
+++ b/tests/html_doctype_declarations/html5.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>An HTML standard template</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <p>… Your HTML content here …</p>
+  </body>
+</html>
diff --git a/tests/html_doctype_declarations/jsfmt.spec.js b/tests/html_doctype_declarations/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_doctype_declarations/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_doctype_declarations/xhtml1.1.html b/tests/html_doctype_declarations/xhtml1.1.html
new file mode 100644
index 000000000..0a78c723a
--- /dev/null
+++ b/tests/html_doctype_declarations/xhtml1.1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
+    <title>XHTML markup</title>
+  </head>
+  <body style="background-color:#ffffcc; color:#008800">
+    <br />
+    <h2 align="center">Sample XHTML page</h2>
+    <br />
+    <div align="center">
+      <img src="../images/bee3.jpg" width="400" height="250" alt="Beep" vspace="20" />
+    </div>
+    <p align="center" style="font-size:17px">Bar Foo,<br />
+      Foo,<br />
+      Bar<br />
+      Foo</p>
+    <p align="center"><em>String</em></p>
+    <br />
+    <hr />
+  </body>
+</html>
diff --git a/tests/html_js/__snapshots__/jsfmt.spec.js.snap b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..cbc76b92e
--- /dev/null
+++ b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty.html - parse5-verify 1`] = `
+<script></script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script></script>
+
+`;
+
+exports[`js.html - parse5-verify 1`] = `
+<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/javascript">
+var message = "Alert!";
+
+alert(message);
+</script>
+<script type="application/javascript">
+var message = "Alert!";
+
+alert(message);
+</script>
+<script>
+var message = "Alert!";
+
+alert(message);
+</script>
+
+`;
+
+exports[`simple.html - parse5-verify 1`] = `
+<!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>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!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 - parse5-verify 1`] = `
+<script>alert('test');</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script>
+alert("test");
+</script>
+<script>
+document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
+
+`;
+
+exports[`typescript.html - parse5-verify 1`] = `
+<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>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<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/empty.html b/tests/html_js/empty.html
new file mode 100644
index 000000000..5d2a3a05b
--- /dev/null
+++ b/tests/html_js/empty.html
@@ -0,0 +1 @@
+<script></script>
diff --git a/tests/html_js/js.html b/tests/html_js/js.html
new file mode 100644
index 000000000..65b7ace93
--- /dev/null
+++ b/tests/html_js/js.html
@@ -0,0 +1,15 @@
+<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>
diff --git a/tests/html_js/jsfmt.spec.js b/tests/html_js/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_js/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_js/simple.html b/tests/html_js/simple.html
new file mode 100644
index 000000000..a2dcd0189
--- /dev/null
+++ b/tests/html_js/simple.html
@@ -0,0 +1,16 @@
+<!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>
diff --git a/tests/html_js/single-script.html b/tests/html_js/single-script.html
new file mode 100644
index 000000000..bd93db13c
--- /dev/null
+++ b/tests/html_js/single-script.html
@@ -0,0 +1,4 @@
+<script>alert('test');</script>
+<script>
+  document.getElementById("demo").innerHTML = "Hello JavaScript!";
+</script>
diff --git a/tests/html_js/typescript.html b/tests/html_js/typescript.html
new file mode 100644
index 000000000..777a1b70f
--- /dev/null
+++ b/tests/html_js/typescript.html
@@ -0,0 +1,78 @@
+<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_prettier_ignore/__snapshots__/jsfmt.spec.js.snap b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..50b0ff603
--- /dev/null
+++ b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`document.html - parse5-verify 1`] = `
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- prettier-ignore -->
+    <p>
+      Test  Test   Test
+    </p>
+
+    <!-- prettier-ignore -->
+    <p attribute  =  "value">
+      Test  Test   Test
+    </p>
+
+    <!-- prettier-ignore -->
+    <ul
+      ><li> First  </li
+      ><li>Second<i>1</i><div><div>String</div></div></li
+    ></ul>
+
+    <!-- prettier-ignore -->
+    <div>
+
+
+
+
+
+    </div>
+
+    <!-- prettier-ignore -->
+    <ul><!--
+      --><li>   First   </li><!--
+      --><li>   Second   </li><!--
+    --></ul>
+
+    <!-- prettier-ignore -->
+    <br />
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- prettier-ignore -->
+    <p>
+      Test  Test   Test
+    </p>
+
+    <!-- prettier-ignore -->
+    <p attribute  =  "value">
+      Test  Test   Test
+    </p>
+
+    <!-- prettier-ignore -->
+    <ul
+      ><li> First  </li
+      ><li>Second<i>1</i><div><div>String</div></div></li
+    ></ul>
+
+    <!-- prettier-ignore -->
+    <div>
+
+
+
+
+
+    </div>
+
+    <!-- prettier-ignore -->
+    <ul><!--
+      --><li>   First   </li><!--
+      --><li>   Second   </li><!--
+    --></ul>
+
+    <!-- prettier-ignore -->
+    <br />
+  </body>
+</html>
+
+`;
diff --git a/tests/html_prettier_ignore/document.html b/tests/html_prettier_ignore/document.html
new file mode 100644
index 000000000..62dfd302c
--- /dev/null
+++ b/tests/html_prettier_ignore/document.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- prettier-ignore -->
+    <p>
+      Test  Test   Test
+    </p>
+
+    <!-- prettier-ignore -->
+    <p attribute  =  "value">
+      Test  Test   Test
+    </p>
+
+    <!-- prettier-ignore -->
+    <ul
+      ><li> First  </li
+      ><li>Second<i>1</i><div><div>String</div></div></li
+    ></ul>
+
+    <!-- prettier-ignore -->
+    <div>
+
+
+
+
+
+    </div>
+
+    <!-- prettier-ignore -->
+    <ul><!--
+      --><li>   First   </li><!--
+      --><li>   Second   </li><!--
+    --></ul>
+
+    <!-- prettier-ignore -->
+    <br />
+  </body>
+</html>
diff --git a/tests/html_prettier_ignore/jsfmt.spec.js b/tests/html_prettier_ignore/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_prettier_ignore/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..da586afbf
--- /dev/null
+++ b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`svg.html - parse5-verify 1`] = `
+<!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>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!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"
+      ></circle>
+    </svg>
+  </body>
+</html>
+
+`;
diff --git a/tests/html_svg/jsfmt.spec.js b/tests/html_svg/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_svg/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_svg/svg.html b/tests/html_svg/svg.html
new file mode 100644
index 000000000..5d3189faf
--- /dev/null
+++ b/tests/html_svg/svg.html
@@ -0,0 +1,11 @@
+<!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>
diff --git a/tests/html_symbol_entities/__snapshots__/jsfmt.spec.js.snap b/tests/html_symbol_entities/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..2d5927c88
--- /dev/null
+++ b/tests/html_symbol_entities/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`symbol_entitites.html - parse5-verify 1`] = `
+<p>I will display &euro;</p>
+<p>I will display &#8364;</p>
+<p>I will display &#x20AC;</p>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<p>I will display €</p>
+<p>I will display €</p>
+<p>I will display €</p>
+
+`;
diff --git a/tests/html_symbol_entities/jsfmt.spec.js b/tests/html_symbol_entities/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_symbol_entities/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_symbol_entities/symbol_entitites.html b/tests/html_symbol_entities/symbol_entitites.html
new file mode 100644
index 000000000..2ccc4ed19
--- /dev/null
+++ b/tests/html_symbol_entities/symbol_entitites.html
@@ -0,0 +1,3 @@
+<p>I will display &euro;</p>
+<p>I will display &#8364;</p>
+<p>I will display &#x20AC;</p>
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..452e322fc
--- /dev/null
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,404 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pre.html - parse5-verify 1`] = `
+<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>
+--------------------------------------------------------------------------------
+
+
+                                      *         *       *
+                                     **        **      ***
+                                     **        **       *
+   ****    ***  ****               ********  ********                   ***  ****
+  * ***  *  **** **** *    ***    ********  ********  ***        ***     **** **** *
+ *   ****    **   ****    * ***      **        **      ***      * ***     **   ****
+**    **     **          *   ***     **        **       **     *   ***    **
+**    **     **         **    ***    **        **       **    **    ***   **
+**    **     **         ********     **        **       **    ********    **
+**    **     **         *******      **        **       **    *******     **
+**    **     **         **           **        **       **    **          **
+*******      ***        ****    *    **        **       **    ****    *   ***
+******        ***        *******      **        **      *** *  *******     ***
+**                        *****                          ***    *****
+**
+**
+ **
+
+--------------------------------------------------------------------------------
+</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>
+
+`;
+
+exports[`tags.html - parse5-verify 1`] = `
+<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>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<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>
+
+`;
+
+exports[`textarea.html - parse5-verify 1`] = `
+<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>
+  <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>
+
+`;
+
+exports[`unsupported.html - parse5-verify 1`] = `
+<center></center>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<center></center>
+
+`;
diff --git a/tests/html_tags/jsfmt.spec.js b/tests/html_tags/jsfmt.spec.js
new file mode 100644
index 000000000..3ebd9a9e3
--- /dev/null
+++ b/tests/html_tags/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["parse5"]);
diff --git a/tests/html_tags/pre.html b/tests/html_tags/pre.html
new file mode 100644
index 000000000..6e36211ba
--- /dev/null
+++ b/tests/html_tags/pre.html
@@ -0,0 +1,78 @@
+<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>
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
new file mode 100644
index 000000000..4c78872d5
--- /dev/null
+++ b/tests/html_tags/tags.html
@@ -0,0 +1,49 @@
+<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>
diff --git a/tests/html_tags/textarea.html b/tests/html_tags/textarea.html
new file mode 100644
index 000000000..3543920e9
--- /dev/null
+++ b/tests/html_tags/textarea.html
@@ -0,0 +1,28 @@
+<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>
diff --git a/tests/html_tags/unsupported.html b/tests/html_tags/unsupported.html
new file mode 100644
index 000000000..98d2a9bbb
--- /dev/null
+++ b/tests/html_tags/unsupported.html
@@ -0,0 +1 @@
+<center></center>
diff --git a/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap
index a95adc01e..9494a85f8 100644
--- a/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap
@@ -14,23 +14,15 @@ exports[`html-with-css-style.html - parse5-verify 1`] = `
 </html>
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 <!DOCTYPE html>
-
-
 <html lang="en">
-
-
-<head>
-
-  <style>
+  <head>
+    <style>
     blink {
       display: none;
-    }
-  </style>
-</head>
-
-<body>
-</body>
+    }</style>
+  </head>
+  <body></body>
 </html>
+
 `;
diff --git a/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap
index 716098270..7718bbbc8 100644
--- a/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap
@@ -13,22 +13,14 @@ exports[`html-with-js-script.html - parse5-verify 1`] = `
 </html>
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 <!DOCTYPE html>
-
-
 <html lang="en">
-
-
-<head>
-
-  <script type="text/javascript">
+  <head>
+    <script type="text/javascript">
     hello("world");
-
-  </script>
-</head>
-
-<body>
-</body>
+    </script>
+  </head>
+  <body></body>
 </html>
+
 `;
diff --git a/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap
index 5a991fc5d..7bbb4d4c5 100644
--- a/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap
@@ -22,26 +22,18 @@ exports[`html-with-ts-script.html - parse5-verify 1`] = `
 </html>
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 <!DOCTYPE html>
-
-
 <html lang="en">
-
-
-<head>
-
-  <script lang="ts">
+  <head>
+    <script lang="ts">
     type X = { [K in keyof Y]: Partial<K> };
 
     class Foo<T> {
       constructor(private foo: keyof Apple) {}
     }
-
-  </script>
-</head>
-
-<body>
-</body>
+    </script>
+  </head>
+  <body></body>
 </html>
+
 `;
diff --git a/yarn.lock b/yarn.lock
index 7f77eb65c..d66db51d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -573,10 +573,6 @@
   dependencies:
     commander "*"
 
-"@types/node@*":
-  version "8.0.47"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.47.tgz#968e596f91acd59069054558a00708c445ca30c2"
-
 "@types/semver@^5.4.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
@@ -4384,11 +4380,15 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse5@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
+parse5-htmlparser2-tree-adapter@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-5.0.0.tgz#f941eced8061ecb1bc2db744c416a037abfe64d1"
   dependencies:
-    "@types/node" "*"
+    parse5 "^5.0.0"
+
+parse5@5.0.0, parse5@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.0.0.tgz#4d02710d44f3c3846197a11e205d4ef17842b81a"
 
 parse5@4.0.0:
   version "4.0.0"