From 182a92eb281f866e53b8e2439ddab124bbe310ca Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 10 Nov 2018 16:44:44 +0800
Subject: [PATCH] fix(html): preserve incomplete ie conditional comment (#5429)

---
 src/language-html/parser-html.js              | 25 ++++--
 src/language-html/utils.js                    |  6 ++
 .../__snapshots__/jsfmt.spec.js.snap          | 83 +++++++++++++++++++
 tests/html_comments/conditional.html          |  8 ++
 4 files changed, 116 insertions(+), 6 deletions(-)
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 2e5322ac4179..972088eb4954 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -256,19 +256,32 @@ function parseIeConditionalComment(node, parseHtml) {
   const [, openingTagSuffix, condition, data] = match;
   const offset = "<!--".length + openingTagSuffix.length;
   const contentStartSpan = node.sourceSpan.start.moveBy(offset);
+  const contentEndSpan = contentStartSpan.moveBy(data.length);
   const ParseSourceSpan = node.sourceSpan.constructor;
-  return Object.assign(parseHtml(data, contentStartSpan), {
+  const [complete, children] = (() => {
+    try {
+      return [true, parseHtml(data, contentStartSpan).children];
+    } catch (e) {
+      const text = {
+        type: "text",
+        value: data,
+        sourceSpan: new ParseSourceSpan(contentStartSpan, contentEndSpan)
+      };
+      return [false, [text]];
+    }
+  })();
+  return {
     type: "ieConditionalComment",
+    complete,
+    children,
     condition: condition.trim().replace(/\s+/g, " "),
+    sourceSpan: node.sourceSpan,
     startSourceSpan: new ParseSourceSpan(
       node.sourceSpan.start,
       contentStartSpan
     ),
-    endSourceSpan: new ParseSourceSpan(
-      contentStartSpan.moveBy(data.length),
-      node.sourceSpan.end
-    )
-  });
+    endSourceSpan: new ParseSourceSpan(contentEndSpan, node.sourceSpan.end)
+  };
 }
 
 function locStart(node) {
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 724dd2495479..6656a2e00f41 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -55,6 +55,12 @@ function shouldPreserveContent(node) {
     return true;
   }
 
+  // incomplete html in ie conditional comment
+  // e.g. <!--[if lt IE 9]></div><![endif]-->
+  if (node.type === "ieConditionalComment" && !node.complete) {
+    return true;
+  }
+
   // TODO: handle non-text children in <pre>
   if (
     isPreLikeNode(node) &&
diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index d34082746ecf..5e796d0c0f9c 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -91,6 +91,14 @@ exports[`conditional.html - html-verify 1`] = `
   <head></head>
   <body></body>
 </html>
+
+<body width="100%" align="center">
+  <center  >                                        
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div>  </div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center  >
+</body>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
 <html>
@@ -124,6 +132,14 @@ exports[`conditional.html - html-verify 1`] = `
   <body></body>
 </html>
 
+<body width="100%" align="center">
+  <center>
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div></div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center>
+</body>
+
 `;
 
 exports[`conditional.html - html-verify 2`] = `
@@ -160,6 +176,14 @@ exports[`conditional.html - html-verify 2`] = `
   <head></head>
   <body></body>
 </html>
+
+<body width="100%" align="center">
+  <center  >                                        
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div>  </div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center  >
+</body>
 ~
 <!DOCTYPE html>
 <html>
@@ -224,6 +248,17 @@ exports[`conditional.html - html-verify 2`] = `
   <body></body>
 </html>
 
+<body
+  width="100%"
+  align="center"
+>
+  <center>
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div></div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center>
+</body>
+
 `;
 
 exports[`conditional.html - html-verify 3`] = `
@@ -260,6 +295,14 @@ exports[`conditional.html - html-verify 3`] = `
   <head></head>
   <body></body>
 </html>
+
+<body width="100%" align="center">
+  <center  >                                        
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div>  </div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center  >
+</body>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
 <html>
@@ -293,6 +336,14 @@ exports[`conditional.html - html-verify 3`] = `
   <body></body>
 </html>
 
+<body width="100%" align="center">
+  <center>
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div></div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center>
+</body>
+
 `;
 
 exports[`conditional.html - html-verify 4`] = `
@@ -329,6 +380,14 @@ exports[`conditional.html - html-verify 4`] = `
   <head></head>
   <body></body>
 </html>
+
+<body width="100%" align="center">
+  <center  >                                        
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div>  </div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center  >
+</body>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
 <html>
@@ -362,6 +421,14 @@ exports[`conditional.html - html-verify 4`] = `
   <body></body>
 </html>
 
+<body width="100%" align="center">
+  <center>
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div> </div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center>
+</body>
+
 `;
 
 exports[`conditional.html - html-verify 5`] = `
@@ -398,6 +465,14 @@ exports[`conditional.html - html-verify 5`] = `
   <head></head>
   <body></body>
 </html>
+
+<body width="100%" align="center">
+  <center  >                                        
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div>  </div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center  >
+</body>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
 <html>
@@ -446,6 +521,14 @@ exports[`conditional.html - html-verify 5`] = `
   <body></body>
 </html>
 
+<body width="100%" align="center">
+  <center>
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div></div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center>
+</body>
+
 `;
 
 exports[`for_debugging.html - html-verify 1`] = `
diff --git a/tests/html_comments/conditional.html b/tests/html_comments/conditional.html
index a4e18e171ab8..14ae802cc3c5 100644
--- a/tests/html_comments/conditional.html
+++ b/tests/html_comments/conditional.html
@@ -31,3 +31,11 @@
   <head></head>
   <body></body>
 </html>
+
+<body width="100%" align="center">
+  <center  >                                        
+    <!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
+    <div>  </div>
+    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
+  </center  >
+</body>
