From 18ca8b44cd5a3e48dea4b84c883edf1dc3cc4ebb Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 11 Mar 2022 12:15:34 +0000
Subject: [PATCH] [FIX] web_editor: properly detect background color in toolbar

When a background color is applied on an ancestor, while it's visibly
there, `getComputedStyle` doesn't know. Because it did depend on it,
the toolbar showed the wrong color in these cases.
Eg: `<span style="background-color: red;"><b>a[]bc</b></span>` was
showing no background color.

task-2778416

X-original-commit: a125933b34500d51183bc5eb02a531fb3b293de5
Part-of: odoo/odoo#86930
---
 .../web_editor/static/lib/odoo-editor/src/OdooEditor.js  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
index 9eb0a0ac565..bd1ed80becd 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
@@ -1445,7 +1445,14 @@ export class OdooEditor extends EventTarget {
                 if (hasGradient && !hasTextGradientClass) {
                     hiliteColor = backgroundImage;
                 } else {
-                    hiliteColor = computedStyle.backgroundColor;
+                    let ancestor = endContainer;
+                    while (ancestor && !hiliteColor) {
+                        hiliteColor = ancestor.style.backgroundColor;
+                        ancestor = ancestor.parentElement;
+                    }
+                    if (!hiliteColor) {
+                        hiliteColor = computedStyle.backgroundColor;
+                    }
                 }
             }
         }