From 9900174d5090908c1e0a438a9f6165af88ed0829 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Mon, 20 Jan 2020 22:39:19 +0800
Subject: [PATCH] HTML: don't treat colons as namespace prefix delimiters in
 tag names (#7273)

---
 changelog_unreleased/html/pr-7273.md          |  59 +++
 src/language-html/parser-html.js              |  12 +-
 src/language-html/utils.js                    |  15 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 335 ++++++++++++++++++
 tests/html_basics/with-colon.html             | 112 ++++++
 .../__snapshots__/jsfmt.spec.js.snap          |  37 +-
 tests/html_tags/tags.html                     |   2 +-
 7 files changed, 551 insertions(+), 21 deletions(-)
 create mode 100644 changelog_unreleased/html/pr-7273.md
 create mode 100644 tests/html_basics/with-colon.html

diff --git a/changelog_unreleased/html/pr-7273.md b/changelog_unreleased/html/pr-7273.md
new file mode 100644
index 000000000..29af027e7
--- /dev/null
+++ b/changelog_unreleased/html/pr-7273.md
@@ -0,0 +1,59 @@
+#### Don't treat colons as namespace prefix delimiters in tag names ([#7273](https://github.com/prettier/prettier/pull/7273) by [@fisker](https://github.com/fisker))
+
+In HTML5, colons don't have any special meaning in tag names. Previously, Prettier treated them the XML way, as namespace prefix delimiters, but no more. In practice, this means that tags whose ancestors have colons in their names are now treated as usual HTML tags: if they're known standard tags, their names can be lowercased and assumptions can be made about their whitespace sensitivity; custom elements whose names are unknown to Prettier retain the casing of their names and are treated as inline with `--html-whitespace-sensitivity css`.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<with:colon>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+</with:colon>
+
+<!-- Prettier stable -->
+<with:colon>
+  <div>
+    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+  </div>
+  <DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div
+  ><div> block </div>
+  <pre> pre pr e</pre>
+  <textarea> pre-wrap pr e-wrap </textarea>
+  <span>
+    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+  </span>
+  <span> inline </span><span> inline </span> <span> inline </span
+  ><span> inline </span>
+</with:colon>
+
+<!-- Prettier master -->
+<with:colon>
+  <div>
+    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+  </div>
+  <div>block</div>
+  <div>block</div>
+  <div>block</div>
+  <div>block</div>
+  <div>block</div>
+  <pre>
+ pre pr
+e</pre
+  >
+  <textarea>
+ pre-wrap pr
+e-wrap </textarea
+  >
+  <span>
+    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+  </span>
+  <span> inline </span><span> inline </span> <span> inline </span
+  ><span> inline </span>
+</with:colon>
+```
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index c486fa0da..84eea0748 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -1,7 +1,11 @@
 "use strict";
 
 const parseFrontMatter = require("../utils/front-matter");
-const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS } = require("./utils");
+const {
+  HTML_ELEMENT_ATTRIBUTES,
+  HTML_TAGS,
+  isUnknownNamespace
+} = require("./utils");
 const { hasPragma } = require("./pragma");
 const createError = require("../common/parser-create-error");
 const { Node } = require("./ast");
@@ -112,7 +116,8 @@ function ngHtmlParser(
       if (
         normalizeTagName &&
         (!node.namespace ||
-          node.namespace === node.tagDefinition.implicitNamespacePrefix)
+          node.namespace === node.tagDefinition.implicitNamespacePrefix ||
+          isUnknownNamespace(node))
       ) {
         node.name = lowerCaseIfFn(
           node.name,
@@ -154,7 +159,8 @@ function ngHtmlParser(
       );
       if (
         !node.namespace ||
-        node.namespace === tagDefinition.implicitNamespacePrefix
+        node.namespace === tagDefinition.implicitNamespacePrefix ||
+        isUnknownNamespace(node)
       ) {
         node.tagDefinition = tagDefinition;
       } else {
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index b930a9453..8059d9ece 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -501,17 +501,27 @@ function getNodeCssStyleDisplay(node, options) {
     default:
       return (
         (node.type === "element" &&
-          (!node.namespace || isInSvgForeignObject) &&
+          (!node.namespace ||
+            isInSvgForeignObject ||
+            isUnknownNamespace(node)) &&
           CSS_DISPLAY_TAGS[node.name]) ||
         CSS_DISPLAY_DEFAULT
       );
   }
 }
 
+function isUnknownNamespace(node) {
+  return (
+    node.type === "element" &&
+    !node.hasExplicitNamespace &&
+    !["html", "svg"].includes(node.namespace)
+  );
+}
+
 function getNodeCssStyleWhiteSpace(node) {
   return (
     (node.type === "element" &&
-      !node.namespace &&
+      (!node.namespace || isUnknownNamespace(node)) &&
       CSS_WHITE_SPACE_TAGS[node.name]) ||
     CSS_WHITE_SPACE_DEFAULT
   );
@@ -635,6 +645,7 @@ module.exports = {
   isTextLikeNode,
   isTrailingSpaceSensitiveNode,
   isWhitespaceSensitiveNode,
+  isUnknownNamespace,
   normalizeParts,
   preferHardlineAsLeadingSpaces,
   preferHardlineAsTrailingSpaces,
diff --git a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
index 2079732d9..7c44e1a65 100644
--- a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
@@ -503,3 +503,338 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`with-colon.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!-- unknown tag with colon -->
+<div>
+<foo:bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:bar>
+</div>
+
+<!-- block tag with colon -->
+<div>
+<foo:div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:div>
+</div>
+
+<!-- inline tag with colon -->
+<div>
+<foo:span>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:span>
+</div>
+
+<!-- unknown -->
+<div>
+<foo-bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo-bar>
+</div>
+
+<!-- without colon -->
+<div>
+<div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></div>
+</div>
+
+<!-- #7236 -->
+<with:colon>
+  <div><h1> text  text  text  text  text  text  text  text  text  text  text  text  text  text </h1></div>
+  <script>
+  const func = function() { console.log('Hello, there');}
+  </script>
+  </with:colon>
+
+=====================================output=====================================
+<!-- unknown tag with colon -->
+<div>
+  <foo:bar>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo:bar
+  >
+</div>
+
+<!-- block tag with colon -->
+<div>
+  <foo:div>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo:div
+  >
+</div>
+
+<!-- inline tag with colon -->
+<div>
+  <foo:span>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo:span
+  >
+</div>
+
+<!-- unknown -->
+<div>
+  <foo-bar>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo-bar
+  >
+</div>
+
+<!-- without colon -->
+<div>
+  <div>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+  </div>
+</div>
+
+<!-- #7236 -->
+<with:colon>
+  <div>
+    <h1>
+      text text text text text text text text text text text text text text
+    </h1>
+  </div>
+  <script>
+    const func = function() { console.log('Hello, there');}
+  </script>
+</with:colon>
+
+================================================================================
+`;
diff --git a/tests/html_basics/with-colon.html b/tests/html_basics/with-colon.html
new file mode 100644
index 000000000..aad6b4158
--- /dev/null
+++ b/tests/html_basics/with-colon.html
@@ -0,0 +1,112 @@
+<!-- unknown tag with colon -->
+<div>
+<foo:bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:bar>
+</div>
+
+<!-- block tag with colon -->
+<div>
+<foo:div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:div>
+</div>
+
+<!-- inline tag with colon -->
+<div>
+<foo:span>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:span>
+</div>
+
+<!-- unknown -->
+<div>
+<foo-bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo-bar>
+</div>
+
+<!-- without colon -->
+<div>
+<div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></div>
+</div>
+
+<!-- #7236 -->
+<with:colon>
+  <div><h1> text  text  text  text  text  text  text  text  text  text  text  text  text  text </h1></div>
+  <script>
+  const func = function() { console.log('Hello, there');}
+  </script>
+  </with:colon>
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 3be078897..8d364772a 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1887,7 +1887,7 @@ printWidth: 80
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root><SPAN>tag name in other namespace should also lower cased</SPAN></x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".
@@ -2071,7 +2071,9 @@ printWidth: 80
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root
+  ><span>tag name in other namespace should also lower cased</span></x:root
+>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".
@@ -2196,7 +2198,7 @@ printWidth: 1
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root><SPAN>tag name in other namespace should also lower cased</SPAN></x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".
@@ -2549,15 +2551,16 @@ printWidth: 1
   ></app-footer>
 </div>
 <x:root
-  ><SPAN
-    >foreign
-    tag
+  ><span
+    >tag
     name
+    in
+    other
+    namespace
     should
-    not
-    be
+    also
     lower
-    cased</SPAN
+    cased</span
   ></x:root
 >
 <div>
@@ -2705,7 +2708,7 @@ printWidth: Infinity
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root><SPAN>tag name in other namespace should also lower cased</SPAN></x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".
@@ -2826,7 +2829,7 @@ printWidth: Infinity
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root><span>tag name in other namespace should also lower cased</span></x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".
 </div>
@@ -2951,7 +2954,7 @@ printWidth: 80
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root><SPAN>tag name in other namespace should also lower cased</SPAN></x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".
@@ -3121,7 +3124,9 @@ printWidth: 80
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root
+  ><span>tag name in other namespace should also lower cased</span></x:root
+>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".
@@ -3247,7 +3252,7 @@ printWidth: 80
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root><SPAN>tag name in other namespace should also lower cased</SPAN></x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".
@@ -3458,7 +3463,9 @@ printWidth: 80
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root>
+  <span>tag name in other namespace should also lower cased</span>
+</x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
   <strong>seddoeiusmod</strong>
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 96b7a27f3..a5aeddf1f 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -99,7 +99,7 @@
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
-<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<x:root><SPAN>tag name in other namespace should also lower cased</SPAN></x:root>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   "<strong>seddoeiusmod</strong>".