Merge pull request #269 from codeclown/fix-table-attr

Bugfix: double quotes in table style attributes
Automattic · Aug 5, 2017 · 1847d88 · 1847d88
2 parents 4903a16 + 8d9af4e
commit 1847d88
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/lib/inline.js b/lib/inline.js
@@ -248,6 +248,12 @@ function inlineDocument($, css, options) {
     }
   }
 
+  function extractBackgroundUrl(value) {
+    return value.indexOf('url(') !== 0
+      ? value
+      : value.replace(/^url\((["'])?([^"']+)\1\)$/, '$2');
+  }
+
   function setAttributesOnTableElements(el) {
     if (!el.name) { return; }
     var elName = el.name.toUpperCase();
@@ -256,7 +262,12 @@ function inlineDocument($, css, options) {
     if (juiceClient.tableElements.indexOf(elName) > -1) {
       for (var i in el.styleProps) {
         if (styleProps.indexOf(el.styleProps[i].prop) > -1) {
-          $(el).attr(juiceClient.styleToAttribute[el.styleProps[i].prop], el.styleProps[i].value);
+          var prop = juiceClient.styleToAttribute[el.styleProps[i].prop];
+          var value = el.styleProps[i].value;
+          if (prop === 'background') {
+            value = extractBackgroundUrl(value)
+          }
+          $(el).attr(prop, value);
         }
       }
     }

diff --git a/test/cases/juice-content/table-attr.html b/test/cases/juice-content/table-attr.html
@@ -10,13 +10,31 @@
             background-image: url('test.png');
             background-color: red;
         }
+
+        td.double {
+            background-image: url("test.png");
+        }
+
+        td.single {
+            background-image: url('test.png');
+        }
+
+        td.none {
+            background-image: url(test.png);
+        }
     </style>
 </head>
 <body>
     <p>none</p>
     <table>
         <tr>
-            <td>
+            <td class="double">
+                wide
+            </td>
+            <td class="single">
+                wide
+            </td>
+            <td class="none">
                 wide
             </td>
         </tr>

diff --git a/test/cases/juice-content/table-attr.out b/test/cases/juice-content/table-attr.out
@@ -4,9 +4,15 @@
 </head>
 <body>
     <p style="text-align: center; vertical-align: middle;">none</p>
-    <table style="background-image: url('test.png'); background-color: red;" background="url('test.png')" bgcolor="red">
+    <table style="background-image: url('test.png'); background-color: red;" background="test.png" bgcolor="red">
         <tr>
-            <td style="text-align: center; vertical-align: middle;" align="center" valign="middle">
+            <td class="double" style="text-align: center; vertical-align: middle; background-image: url('test.png');" align="center" valign="middle" background="test.png">
+                wide
+            </td>
+            <td class="single" style="text-align: center; vertical-align: middle; background-image: url('test.png');" align="center" valign="middle" background="test.png">
+                wide
+            </td>
+            <td class="none" style="text-align: center; vertical-align: middle; background-image: url(test.png);" align="center" valign="middle" background="test.png">
                 wide
             </td>
         </tr>