From f50ba68be72c8b63af87e8dcd0e726e5e3b77092 Mon Sep 17 00:00:00 2001
From: Nicolas Lempereur <nle@odoo.com>
Date: Thu, 16 Mar 2017 17:42:39 +0100
Subject: [PATCH] [FIX] web_editor: handle margin:initial correctly

The transcoder (which transforms stylesheet rules to inline style) did
some compression of the padding and margin css properties to not always
have margin-top + margin-right + margin-bottom + margin-left.

This could cause an issue when the value of margin or padding contained
an initial or inherit value because browsers (at least firefox and
google chrome) doesn't allow it. Thus the preview could for example have
bigger veritcal spaces arround `<p />` tag than what was seen when
editing.

With this fix instead of invalid:

    margin:initial initial initial initial

we have:

    margin:initial

And instead of invalid:

    margin:initial 5px 6px 7px

we have:

    margin-top: initial; margin-right: 5px; margin-bottom: 6px; margin-left: 7px;

opw-706535
---
 addons/web_editor/static/src/js/transcoder.js | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/addons/web_editor/static/src/js/transcoder.js b/addons/web_editor/static/src/js/transcoder.js
index d327252b63d..306369cddfa 100644
--- a/addons/web_editor/static/src/js/transcoder.js
+++ b/addons/web_editor/static/src/js/transcoder.js
@@ -99,20 +99,28 @@ var getMatchedCSSRules = function (a) {
     if (style.display === 'block') {
         delete style.display;
     }
-    if (style['margin-top']) {
-        style.margin = (style['margin-top'] || 0) + ' ' + (style['margin-right'] || 0) + ' ' + (style['margin-bottom'] || 0) + ' ' + (style['margin-left'] || 0);
-        delete style['margin-top'];
-        delete style['margin-right'];
-        delete style['margin-bottom'];
-        delete style['margin-left'];
-    }
-    if (style['padding-top']) {
-        style.padding = (style['padding-top'] || 0) + ' ' + (style['padding-right'] || 0) + ' ' + (style['padding-bottom'] || 0) + ' ' + (style['padding-left'] || 0);
-        delete style['padding-top'];
-        delete style['padding-right'];
-        delete style['padding-bottom'];
-        delete style['padding-left'];
-    }
+
+    _.each(['margin', 'padding'], function(p) {
+        if (style[p+'-top'] || style[p+'-right'] || style[p+'-bottom'] || style[p+'-left']) {
+            if (style[p+'-top'] === style[p+'-right'] && style[p+'-top'] === style[p+'-bottom'] && style[p+'-top'] === style[p+'-left']) {
+                // keep => property: [top/right/bottom/left value];
+                style[p] = style[p+'-top'];
+            }
+            else {
+                // keep => property: [top value] [right value] [bottom value] [left value];
+                style[p] = (style[p+'-top'] || 0) + ' ' + (style[p+'-right'] || 0) + ' ' + (style[p+'-bottom'] || 0) + ' ' + (style[p+'-left'] || 0);
+                if (style[p].indexOf('inherit') !== -1 || style[p].indexOf('initial') !== -1) {
+                    // keep => property-top: [top value]; property-right: [right value]; property-bottom: [bottom value]; property-left: [left value];
+                    delete style[p];
+                    return;
+                }
+            }
+            delete style[p+'-top'];
+            delete style[p+'-right'];
+            delete style[p+'-bottom'];
+            delete style[p+'-left'];
+        }
+    });
 
     return a.className ? cache[a.tagName + "." +a.className] = style : style;
 };