[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

1 files 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;
 };