XFA - Add support for few ui elements (#13115)

- input;
  - layout;
  - border;
  - margin;
  - color.

web/xfa_layer_builder.css

@@ -26,8 +26,10 @@
   font: inherit;
   font-kerning: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   vertical-align: inherit;
+  box-sizing: border-box;
 }
 
 .xfaFont {
@@ -43,20 +45,131 @@
 
 .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;
+}
+
+.xfaLabel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.xfaCaption {
+  flex: 1 1 auto;
+}
+
+.xfaTextfield,
+.xfaSelect {
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
+  border: none;
+}
+
+.xfaLabel > input[type="checkbox"] {
+  /* Use this trick to make the checkbox invisible but
+       but still focusable. */
+  position: absolute;
+  left: -99999px;
+}
+
+.xfaLabel > input[type="checkbox"]:focus + .xfaCheckboxMark {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
+}
+
+.xfaCheckboxMark {
+  cursor: pointer;
+  flex: 0 0 auto;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #8f8f9d;
+  font-size: 10px;
+  line-height: 10px;
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.xfaCheckbox:checked + .xfaCheckboxMark::after {
+  content: attr(mark);
+}
+
+.xfaButton {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border: none;
+  text-align: center;
+}
+
+.xfaButton:hover {
+  background: Highlight;
+}
+
+.xfaLrTb,
+.xfaRlTb,
+.xfaTb,
+.xfaPosition {
+  display: block;
+}
+
+.xfaPosition {
+  position: relative;
+}
+
+.xfaValignMiddle {
+  display: flex;
+  align-items: center;
+}
+
+.xfaLrTb > div {
+  display: inline;
+  float: left;
+}
+
+.xfaRlTb > div {
+  display: inline;
+  float: right;
+}
+
+.xfaTable {
+  display: flex;
+  flex-direction: column;
+}
+
+.xfaTable .xfaRow {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+}
+
+.xfaTable .xfaRow > div {
+  flex: 1 1 auto;
+}
+
+.xfaTable .xfaRlRow {
+  display: flex;
+  flex-direction: row-reverse;
+  flex: 1;
+}
+
+.xfaTable .xfaRlRow > div {
+  flex: 1;
 }