XFA - Fix layout issues (again)

- some elements weren't displayed because their rotation angle was not taken into account;
  - fix box model (XFA concept):
    - remove use of outline;
    - position correctly border which isn't part of box dimensions;
    - fix margins issues (see issue #13474).
  - move border on button instead of having it on wrapping div;

web/xfa_layer_builder.css

@@ -35,6 +35,11 @@
   background: transparent;
   padding: 0;
   margin: 0;
+  pointer-events: auto;
+}
+
+.xfaLayer div {
+  pointer-events: none;
 }
 
 .xfaLayer a {
@@ -45,6 +50,10 @@
   margin-left: 3em;
 }
 
+.xfaLayer p {
+  margin-bottom: -1px;
+}
+
 .xfaFont {
   color: black;
   font-weight: normal;
@@ -70,38 +79,79 @@
 
 .xfaRich {
   z-index: 300;
-  line-height: 1.2;
 }
 
 .xfaSubform {
   z-index: 200;
 }
 
+.xfaCaption {
+  overflow: hidden;
+  flex: 0 1 auto;
+}
+
 .xfaLabel {
+  height: 100%;
+  width: 100%;
+}
+
+.xfaLeft {
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 
-.xfaCaption {
-  flex: 1 1 auto;
+.xfaLeft > .xfaCaption {
+  max-height: 100%;
 }
 
-.xfaBorderDiv {
+.xfaRight {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.xfaRight > .xfaCaption {
+  max-height: 100%;
+}
+
+.xfaTop {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.xfaTop > .xfaCaption {
+  max-width: 100%;
+}
+
+.xfaBottom {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: start;
+}
+
+.xfaBottom > .xfaCaption {
+  max-width: 100%;
+}
+
+.xfaInline {
+  float: inline;
+}
+
+.xfaBorder {
   background: transparent;
   position: absolute;
   pointer-events: none;
 }
 
 .xfaWrapper {
-  position: relative;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  height: auto;
+  align-items: stretch;
+}
+
+.xfaWrapped {
+  flex: 1 1 auto;
 }
 
 .xfaContentArea {
@@ -122,7 +172,7 @@
 .xfaSelect {
   width: 100%;
   height: 100%;
-  flex: 100 1 0;
+  flex: 1 1 0;
   border: none;
   resize: none;
 }
@@ -160,10 +210,6 @@
   height: auto;
 }
 
-.xfaPosition {
-  display: block;
-}
-
 .xfaLrTb,
 .xfaRlTb,
 .xfaTb {
@@ -178,18 +224,28 @@
   flex: 1 1 auto;
 }
 
-.xfaTb > div {
-  justify-content: left;
+.xfaLr {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 }
 
 .xfaLr > div {
-  display: inline;
-  float: left;
+  flex: 1 1 auto;
+}
+
+.xfaRl {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: stretch;
 }
 
 .xfaRl > div {
-  display: inline;
-  float: right;
+  flex: 1 1 auto;
+}
+
+.xfaTb > div {
+  justify-content: left;
 }
 
 .xfaPosition {
@@ -205,25 +261,20 @@
   align-items: center;
 }
 
-.xfaLrTb > div {
-  display: inline;
-  float: left;
-}
-
-.xfaRlTb > div {
-  display: inline;
-  float: right;
-}
-
 .xfaTable {
   display: flex;
   flex-direction: column;
+  align-items: stretch;
+}
+
+.xfaTable > div {
+  flex: 1 1 auto;
 }
 
 .xfaTable .xfaRow {
   display: flex;
   flex-direction: row;
-  flex: 1 1 auto;
+  align-items: stretch;
 }
 
 .xfaTable .xfaRow > div {
@@ -233,6 +284,7 @@
 .xfaTable .xfaRlRow {
   display: flex;
   flex-direction: row-reverse;
+  align-items: stretch;
   flex: 1;
 }