XFA - Convert some template properties into CSS ones (#13082)

- implement few positioning properties: position, width, height, anchor;
  - implement font element;
  - implement fill element (used by font) and its children (linear, radial, ...);
  - font property is inherited from ancestor container (see https://www.pdfa.org/wp-content/uploads/2020/07/XFA-3_3.pdf#page=43) so let CSS handles that stuff;
  - in order to reduce the number of properties to set, only set non default properties and put the default in CSS;
  - set a background to some containers to be able to see them (will be removed in a future commit).

web/xfa_layer_builder.css

@@ -20,3 +20,43 @@
   z-index: 200;
   transform-origin: 0 0;
 }
+
+.xfaLayer * {
+  color: inherit;
+  font: inherit;
+  font-kerning: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+.xfaFont {
+  color: black;
+  font-weight: normal;
+  font-kerning: none;
+  font-size: 10px;
+  font-style: normal;
+  letter-spacing: 0;
+  text-decoration: none;
+  vertical-align: 0;
+}
+
+.xfaDraw {
+  z-index: 200;
+  background-color: #ff000080;
+}
+
+.xfaExclgroup {
+  z-index: 300;
+  background-color: #0000ff80;
+}
+
+.xfaField {
+  z-index: 300;
+  background-color: #00ff0080;
+}
+
+.xfaSubform {
+  z-index: 100;
+  background-color: #ffff0080;
+}

web/xfa_layer_builder.js

@@ -57,7 +57,6 @@ class XfaLayerBuilder {
       } else {
         // Create an xfa layer div and render the form
         this.div = document.createElement("div");
-        this.div.className = "xfaLayer";
         this.pageDiv.appendChild(this.div);
         parameters.div = this.div;