From 92f4cc52a639911328676c42b6a6714741efde65 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 28 Jul 2021 11:34:48 +0200
Subject: [PATCH] XFA - Add a transparent blue background on all text fields
 for consistency

---
 src/core/xfa/template.js  | 22 ++++++++++++++++------
 web/xfa_layer_builder.css | 13 +++++++++----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/core/xfa/template.js b/src/core/xfa/template.js
index 3640f8890..9ce1dc8b3 100644
--- a/src/core/xfa/template.js
+++ b/src/core/xfa/template.js
@@ -2926,16 +2926,22 @@ class Fill extends XFAObject {
     const ggrandpa = grandpa[$getParent]();
     const style = Object.create(null);
 
+    // Use for color, i.e. #...
     let propName = "color";
+
+    // Use for non-color, i.e. gradient, radial-gradient...
+    let altPropName = propName;
+
     if (parent instanceof Border) {
-      propName = "background";
+      propName = "background-color";
+      altPropName = "background";
       if (ggrandpa instanceof Ui) {
         // The default fill color is white.
-        style.background = "white";
+        style.backgroundColor = "white";
       }
     }
     if (parent instanceof Rectangle || parent instanceof Arc) {
-      propName = "fill";
+      propName = altPropName = "fill";
       style.fill = "white";
     }
 
@@ -2948,12 +2954,16 @@ class Fill extends XFAObject {
         continue;
       }
 
-      style[propName] = obj[$toStyle](this.color);
+      const color = obj[$toStyle](this.color);
+      if (color) {
+        style[color.startsWith("#") ? propName : altPropName] = color;
+      }
       return style;
     }
 
-    if (this.color) {
-      style[propName] = this.color[$toStyle]();
+    if (this.color && this.color.value) {
+      const color = this.color[$toStyle]();
+      style[color.startsWith("#") ? propName : altPropName] = color;
     }
 
     return style;
diff --git a/web/xfa_layer_builder.css b/web/xfa_layer_builder.css
index 38e7d21d8..eca82e927 100644
--- a/web/xfa_layer_builder.css
+++ b/web/xfa_layer_builder.css
@@ -13,6 +13,10 @@
  * limitations under the License.
  */
 
+:root {
+  --unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+}
+
 .xfaPage {
   overflow: hidden;
   position: relative;
@@ -45,7 +49,7 @@
   text-align: inherit;
   text-decoration: inherit;
   box-sizing: border-box;
-  background: transparent;
+  background-color: transparent;
   padding: 0;
   margin: 0;
   pointer-events: auto;
@@ -136,7 +140,7 @@
 }
 
 .xfaBorder {
-  background: transparent;
+  background-color: transparent;
   position: absolute;
   pointer-events: none;
 }
@@ -148,7 +152,8 @@
 
 .xfaTextfield:focus,
 .xfaSelect:focus {
-  background: transparent;
+  background-image: none;
+  background-color: transparent;
   outline: none;
 }
 
@@ -159,7 +164,7 @@
   flex: 1 1 auto;
   border: none;
   resize: none;
-  background: rgba(0, 54, 255, 0.13);
+  background-image: var(--unfocused-field-background);
 }
 
 .xfaTop > .xfaTextfield,