XFA - Fix auto-sized fields (bug 1722030)

- In order to better compute text fields size, use line height with no gaps (and consequently guessed height for text are slightly better in general).
  - Fix default background color in fields.

web/xfa_layer_builder.css

@@ -84,7 +84,7 @@
 
 .xfaCaption {
   overflow: hidden;
-  flex: 0 1 auto;
+  flex: 0 0 auto;
 }
 
 .xfaCaptionForCheckButton {
@@ -103,8 +103,16 @@
   align-items: center;
 }
 
+.xfaRight {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
 .xfaLeft > .xfaCaption,
-.xfaLeft > .xfaCaptionForCheckButton {
+.xfaLeft > .xfaCaptionForCheckButton,
+.xfaRight > .xfaCaption,
+.xfaRight > .xfaCaptionForCheckButton {
   max-height: 100%;
 }
 
@@ -114,8 +122,16 @@
   align-items: flex-start;
 }
 
+.xfaBottom {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+}
+
 .xfaTop > .xfaCaption,
-.xfaTop > .xfaCaptionForCheckButton {
+.xfaTop > .xfaCaptionForCheckButton,
+.xfaBottom > .xfaCaption,
+.xfaBottom > .xfaCaptionForCheckButton {
   width: 100%;
 }
 
@@ -130,24 +146,27 @@
   height: 100%;
 }
 
-.xfaTextfield,
-.xfaSelect {
-  background-color: rgba(0, 54, 255, 0.13);
-}
-
 .xfaTextfield:focus,
 .xfaSelect:focus {
-  background-color: transparent;
+  background: transparent;
   outline: none;
 }
 
 .xfaTextfield,
 .xfaSelect {
-  width: 100%;
   height: 100%;
-  flex: 1 1 0;
+  width: 100%;
+  flex: 1 1 auto;
   border: none;
   resize: none;
+  background: rgba(0, 54, 255, 0.13);
+}
+
+.xfaTop > .xfaTextfield,
+.xfaTop > .xfaSelect,
+.xfaBottom > .xfaTextfield,
+.xfaBottom > .xfaSelect {
+  flex: 0 1 auto;
 }
 
 .xfaButton {
@@ -158,10 +177,6 @@
   text-align: center;
 }
 
-.xfaButton:hover {
-  background: Highlight;
-}
-
 .xfaCheckbox,
 .xfaRadio {
   width: 100%;
@@ -255,7 +270,7 @@
 @media print {
   .xfaTextfield,
   .xfaSelect {
-    background-color: transparent;
+    background: transparent;
   }
 
   .xfaSelect {