fix exception when processing an mj-section with background-size

FelixSchwarz · Nov 17, 2023 · 8273334 · 8273334
1 parent 449d707
commit 8273334
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - require css-inline 0.11.x for performance improvements
 - drop css-inline Python 3.6 support
+- fix exception when processing an `mj-section` with `background-size` (reported by Thomas Handorf)
 
 
 0.9.1 (2023-09-23)

diff --git a/mjml/elements/mj_section.py b/mjml/elements/mj_section.py
@@ -339,7 +339,7 @@ def renderWithBackground(self, content):
             bgPosY = self._get_bg_percentage(bgPos.posY, ('top', 'center', 'bottom'), default='0%')
             # this logic is different when using repeat or no-repeat
             vX = self._calc_origin_pos_value(is_x=True, bg_pos=bgPosX)
-            vY = self._calc_origin_pos_value(is_y=False, bg_pos=bgPosY)
+            vY = self._calc_origin_pos_value(is_x=False, bg_pos=bgPosY)
 
         vrect_style = {'mso-width-percent': '1000'} if fullWidth else {'width': str(containerWidth)}
         vrect_attrs = self.html_attrs(**{

diff --git a/tests/testdata/mj-section-with-background-expected.html b/tests/testdata/mj-section-with-background-expected.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <title>
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }
+
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }
+
+    p {
+      display: block;
+      margin: 13px 0;
+    }
+
+  </style>
+  <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+  <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
+
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }
+
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }
+
+  </style>
+  <style type="text/css">
+  </style>
+  <style type="text/css">
+  </style>
+</head>
+
+<body style="word-spacing:normal;">
+  <div style="">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0.5, 0" position="0.5, 0" src="http://site.example/test.png" type="tile" size="1,1" aspect="atmost" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
+    <div style="background:url('http://site.example/test.png') center top / contain repeat;background-position:center top;background-repeat:repeat;background-size:contain;margin:0px auto;max-width:600px;">
+      <div style="line-height:0;font-size:0;">
+        <table align="center" background="http://site.example/test.png" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('http://site.example/test.png') center top / contain repeat;background-position:center top;background-repeat:repeat;background-size:contain;width:100%;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+                <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                    <tbody>
+                      <tr>
+                        <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                          <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Foo Bar</div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!--[if mso | IE]></v:textbox></v:rect></td></tr></table><![endif]-->
+  </div>
+</body>
+
+</html>
diff --git a/tests/testdata/mj-section-with-background.mjml b/tests/testdata/mj-section-with-background.mjml
@@ -0,0 +1,9 @@
+<mjml>
+  <mj-body>
+    <mj-section background-url="http://site.example/test.png" background-size="contain">
+      <mj-column>
+        <mj-text>Foo Bar</mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/tests/upstream_alignment_test.py b/tests/upstream_alignment_test.py
@@ -40,6 +40,7 @@ class UpstreamAlignmentTest(TestCase):
         'mj-section-with-css-class',
         'mj-section-with-mj-class',
         'mj-section-with-background-url',
+        'mj-section-with-background',
         'mj-font',
         'mj-font-multiple',
         'mj-font-unused',
@@ -86,7 +87,7 @@ def test_accepts_also_plain_strings_as_input(self):
     @skipIf(sys.version_info < (3, 7), reason='css_inline requires >= python3.7')
     def test_can_use_css_inlining(self):
         try:
-            import css_inline  # noqa: unused-import
+            import css_inline  # noqa: F401 (unused-import)
         except ImportError:
             raise SkipTest('"css_inline" not installed')
         test_id = 'css-inlining'