Merge pull request #13402 from calixteman/xfa_layout1

XFA - Fix lot of layout issues

src/core/xfa/bind.js

@@ -22,6 +22,7 @@ import {
   $finalize,
   $getAttributeIt,
   $getChildren,
+  $getDataValue,
   $getParent,
   $getRealChildrenByNameIt,
   $global,
@@ -88,7 +89,7 @@ class Binder {
 
     if (formNode[$hasSettableValue]()) {
       if (data[$isDataValue]()) {
-        const value = data[$content].trim();
+        const value = data[$getDataValue]();
         // TODO: use picture.
         formNode[$setValue](createText(value));
         formNode[$data] = data;
@@ -114,7 +115,7 @@ class Binder {
     }
   }
 
-  _findDataByNameToConsume(name, dataNode, global) {
+  _findDataByNameToConsume(name, isValue, dataNode, global) {
     if (!name) {
       return null;
     }
@@ -130,9 +131,16 @@ class Binder {
         /* allTransparent = */ false,
         /* skipConsumed = */ true
       );
-      match = generator.next().value;
+      // Try to find a match of the same kind.
-      if (match) {
+      while (true) {
-        return match;
+        match = generator.next().value;
+        if (!match) {
+          break;
+        }
+
+        if (isValue === match[$isDataValue]()) {
+          return match;
+        }
       }
       if (
         dataNode[$namespaceId] === NamespaceIds.datasets.id &&
@@ -149,7 +157,7 @@ class Binder {
 
     // Secondly, if global try to find it just under the root of datasets
     // (which is the location of global variables).
-    generator = this.datasets[$getRealChildrenByNameIt](
+    generator = this.data[$getRealChildrenByNameIt](
       name,
       /* allTransparent = */ false,
       /* skipConsumed = */ false
@@ -478,6 +486,7 @@ class Binder {
       if (child.bind) {
         switch (child.bind.match) {
           case "none":
+            this._bindElement(child, dataNode);
             continue;
           case "global":
             global = true;
@@ -485,6 +494,7 @@ class Binder {
           case "dataRef":
             if (!child.bind.ref) {
               warn(`XFA - ref is empty in node ${child[$nodeName]}.`);
+              this._bindElement(child, dataNode);
               continue;
             }
             ref = child.bind.ref;
@@ -545,6 +555,7 @@ class Binder {
           while (matches.length < max) {
             const found = this._findDataByNameToConsume(
               child.name,
+              child[$hasSettableValue](),
               dataNode,
               global
             );
@@ -580,6 +591,8 @@ class Binder {
         }
         this._bindOccurrences(child, match, picture);
       } else if (min > 0) {
+        this._setProperties(child, dataNode);
+        this._bindItems(child, dataNode);
         this._bindElement(child, dataNode);
       } else {
         uselessNodes.push(child);

src/core/xfa/builder.js

@@ -17,6 +17,7 @@ import { $buildXFAObject, NamespaceIds } from "./namespaces.js";
 import {
   $cleanup,
   $finalize,
+  $ids,
   $nsAttributes,
   $onChild,
   $resolvePrototypes,
@@ -27,13 +28,11 @@ import { Template } from "./template.js";
 import { UnknownNamespace } from "./unknown.js";
 import { warn } from "../../shared/util.js";
 
-const _ids = Symbol();
-
 class Root extends XFAObject {
   constructor(ids) {
     super(-1, "root", Object.create(null));
     this.element = null;
-    this[_ids] = ids;
+    this[$ids] = ids;
   }
 
   [$onChild](child) {
@@ -44,7 +43,8 @@ class Root extends XFAObject {
   [$finalize]() {
     super[$finalize]();
     if (this.element.template instanceof Template) {
-      this.element.template[$resolvePrototypes](this[_ids]);
+      this.element.template[$resolvePrototypes](this[$ids]);
+      this.element.template[$ids] = this[$ids];
     }
   }
 }

src/core/xfa/html_utils.js

@@ -13,18 +13,38 @@
  * limitations under the License.
  */
 
-import { $extra, $getParent, $toStyle, XFAObject } from "./xfa_object.js";
+import {
+  $extra,
+  $getParent,
+  $nodeName,
+  $toStyle,
+  XFAObject,
+} from "./xfa_object.js";
+import { getMeasurement } from "./utils.js";
 import { warn } from "../../shared/util.js";
 
+const wordNonWordRegex = new RegExp(
+  "([\\p{N}\\p{L}\\p{M}]+)|([^\\p{N}\\p{L}\\p{M}]+)",
+  "gu"
+);
+const wordFirstRegex = new RegExp("^[\\p{N}\\p{L}\\p{M}]", "u");
+
 function measureToString(m) {
   if (typeof m === "string") {
     return "0px";
   }
+
   return Number.isInteger(m) ? `${m}px` : `${m.toFixed(2)}px`;
 }
 
 const converters = {
   anchorType(node, style) {
+    const parent = node[$getParent]();
+    if (!parent || (parent.layout && parent.layout !== "position")) {
+      // anchorType is only used in a positioned layout.
+      return;
+    }
+
     if (!("transform" in style)) {
       style.transform = "";
     }
@@ -57,12 +77,28 @@ const converters = {
   },
   dimensions(node, style) {
     const parent = node[$getParent]();
-    const extra = parent[$extra];
     let width = node.w;
-    if (extra && extra.columnWidths) {
+    const height = node.h;
-      width = extra.columnWidths[extra.currentColumn];
+    if (parent.layout && parent.layout.includes("row")) {
-      extra.currentColumn =
+      const extra = parent[$extra];
-        (extra.currentColumn + 1) % extra.columnWidths.length;
+      const colSpan = node.colSpan;
+      let w;
+      if (colSpan === -1) {
+        w = extra.columnWidths
+          .slice(extra.currentColumn)
+          .reduce((a, x) => a + x, 0);
+        extra.currentColumn = 0;
+      } else {
+        w = extra.columnWidths
+          .slice(extra.currentColumn, extra.currentColumn + colSpan)
+          .reduce((a, x) => a + x, 0);
+        extra.currentColumn =
+          (extra.currentColumn + node.colSpan) % extra.columnWidths.length;
+      }
+
+      if (!isNaN(w)) {
+        width = node.w = w;
+      }
     }
 
     if (width !== "") {
@@ -72,17 +108,21 @@ const converters = {
       if (node.maxW > 0) {
         style.maxWidth = measureToString(node.maxW);
       }
-      style.minWidth = measureToString(node.minW);
+      if (parent.layout === "position") {
+        style.minWidth = measureToString(node.minW);
+      }
     }
 
-    if (node.h !== "") {
+    if (height !== "") {
-      style.height = measureToString(node.h);
+      style.height = measureToString(height);
     } else {
       style.height = "auto";
       if (node.maxH > 0) {
         style.maxHeight = measureToString(node.maxH);
       }
-      style.minHeight = measureToString(node.minH);
+      if (parent.layout === "position") {
+        style.minHeight = measureToString(node.minH);
+      }
     }
   },
   position(node, style) {
@@ -118,22 +158,31 @@ const converters = {
     }
   },
   hAlign(node, style) {
-    switch (node.hAlign) {
+    if (node[$nodeName] === "para") {
-      case "justifyAll":
+      switch (node.hAlign) {
-        style.textAlign = "justify-all";
+        case "justifyAll":
-        break;
+          style.textAlign = "justify-all";
-      case "radix":
+          break;
-        // TODO: implement this correctly !
+        case "radix":
-        style.textAlign = "left";
+          // TODO: implement this correctly !
-        break;
+          style.textAlign = "left";
-      default:
+          break;
-        style.textAlign = node.hAlign;
+        default:
+          style.textAlign = node.hAlign;
+      }
+    } else {
+      switch (node.hAlign) {
+        case "right":
+        case "center":
+          style.justifyContent = node.hAlign;
+          break;
+      }
     }
   },
   borderMarginPadding(node, style) {
     // Get border width in order to compute margin and padding.
     const borderWidths = [0, 0, 0, 0];
-    const marginWidths = [0, 0, 0, 0];
+    const borderInsets = [0, 0, 0, 0];
     const marginNode = node.margin
       ? [
           node.margin.topInset,
@@ -142,30 +191,211 @@ const converters = {
           node.margin.leftInset,
         ]
       : [0, 0, 0, 0];
+
+    let borderMargin;
     if (node.border) {
-      Object.assign(style, node.border[$toStyle](borderWidths, marginWidths));
+      Object.assign(style, node.border[$toStyle](borderWidths, borderInsets));
+      borderMargin = style.margin;
+      delete style.margin;
     }
 
     if (borderWidths.every(x => x === 0)) {
-      // No border: margin & padding are padding
+      if (marginNode.every(x => x === 0)) {
-      if (node.margin) {
+        return;
-        Object.assign(style, node.margin[$toStyle]());
       }
+
+      // No border: margin & padding are padding
+      Object.assign(style, node.margin[$toStyle]());
       style.padding = style.margin;
       delete style.margin;
-    } else {
+      delete style.outline;
-      style.padding =
+      delete style.outlineOffset;
-        measureToString(marginNode[0] - borderWidths[0] - marginWidths[0]) +
+      return;
-        " " +
-        measureToString(marginNode[1] - borderWidths[1] - marginWidths[1]) +
-        " " +
-        measureToString(marginNode[2] - borderWidths[2] - marginWidths[2]) +
-        " " +
-        measureToString(marginNode[3] - borderWidths[3] - marginWidths[3]);
     }
+
+    if (node.margin) {
+      Object.assign(style, node.margin[$toStyle]());
+      style.padding = style.margin;
+      delete style.margin;
+    }
+
+    if (!style.borderWidth) {
+      // We've an outline so no need to fake one.
+      return;
+    }
+
+    style.borderData = {
+      borderWidth: style.borderWidth,
+      borderColor: style.borderColor,
+      borderStyle: style.borderStyle,
+      margin: borderMargin,
+    };
+
+    delete style.borderWidth;
+    delete style.borderColor;
+    delete style.borderStyle;
   },
 };
 
+function layoutText(text, fontSize, space) {
+  // Try to guess width and height for the given text in taking into
+  // account the space where the text should fit.
+  // The computed dimensions are just an overestimation.
+  // TODO: base this estimation on real metrics.
+  let width = 0;
+  let height = 0;
+  let totalWidth = 0;
+  const lineHeight = fontSize * 1.5;
+  const averageCharSize = fontSize * 0.4;
+  const maxCharOnLine = Math.floor(space.width / averageCharSize);
+  const chunks = text.match(wordNonWordRegex);
+  let treatedChars = 0;
+
+  let i = 0;
+  let chunk = chunks[0];
+  while (chunk) {
+    const w = chunk.length * averageCharSize;
+    if (width + w <= space.width) {
+      width += w;
+      treatedChars += chunk.length;
+      chunk = chunks[i++];
+      continue;
+    }
+
+    if (!wordFirstRegex.test(chunk) || chunk.length > maxCharOnLine) {
+      const numOfCharOnLine = Math.floor(
+        (space.width - width) / averageCharSize
+      );
+      chunk = chunk.slice(numOfCharOnLine);
+      treatedChars += numOfCharOnLine;
+      if (height + lineHeight > space.height) {
+        return { width: 0, height: 0, splitPos: treatedChars };
+      }
+      totalWidth = Math.max(width, totalWidth);
+      width = 0;
+      height += lineHeight;
+      continue;
+    }
+
+    if (height + lineHeight > space.height) {
+      return { width: 0, height: 0, splitPos: treatedChars };
+    }
+
+    totalWidth = Math.max(width, totalWidth);
+    width = w;
+    height += lineHeight;
+    chunk = chunks[i++];
+  }
+
+  if (totalWidth === 0) {
+    totalWidth = width;
+  }
+
+  if (totalWidth !== 0) {
+    height += lineHeight;
+  }
+
+  return { width: totalWidth, height, splitPos: -1 };
+}
+
+function computeBbox(node, html, availableSpace) {
+  let bbox;
+  if (node.w !== "" && node.h !== "") {
+    bbox = [node.x, node.y, node.w, node.h];
+  } else {
+    if (!availableSpace) {
+      return null;
+    }
+    let width = node.w;
+    if (width === "") {
+      if (node.maxW === 0) {
+        const parent = node[$getParent]();
+        if (parent.layout === "position" && parent.w !== "") {
+          width = 0;
+        } else {
+          width = node.minW;
+        }
+      } else {
+        width = Math.min(node.maxW, availableSpace.width);
+      }
+      html.attributes.style.width = measureToString(width);
+    }
+
+    let height = node.h;
+    if (height === "") {
+      if (node.maxH === 0) {
+        const parent = node[$getParent]();
+        if (parent.layout === "position" && parent.h !== "") {
+          height = 0;
+        } else {
+          height = node.minH;
+        }
+      } else {
+        height = Math.min(node.maxH, availableSpace.height);
+      }
+      html.attributes.style.height = measureToString(height);
+    }
+
+    bbox = [node.x, node.y, width, height];
+  }
+  return bbox;
+}
+
+function fixDimensions(node) {
+  const parent = node[$getParent]();
+  if (parent.layout && parent.layout.includes("row")) {
+    const extra = parent[$extra];
+    const colSpan = node.colSpan;
+    let width;
+    if (colSpan === -1) {
+      width = extra.columnWidths
+        .slice(extra.currentColumn)
+        .reduce((a, w) => a + w, 0);
+    } else {
+      width = extra.columnWidths
+        .slice(extra.currentColumn, extra.currentColumn + colSpan)
+        .reduce((a, w) => a + w, 0);
+    }
+    if (!isNaN(width)) {
+      node.w = width;
+    }
+  }
+
+  if (parent.w && node.w) {
+    node.w = Math.min(parent.w, node.w);
+  }
+
+  if (parent.h && node.h) {
+    node.h = Math.min(parent.h, node.h);
+  }
+
+  if (parent.layout && parent.layout !== "position") {
+    // Useless in this context.
+    node.x = node.y = 0;
+    if (parent.layout === "tb") {
+      if (
+        parent.w !== "" &&
+        (node.w === "" || node.w === 0 || node.w > parent.w)
+      ) {
+        node.w = parent.w;
+      }
+    }
+  }
+
+  if (node.layout === "position") {
+    // Acrobat doesn't take into account min, max values
+    // for containers with positioned layout (which makes sense).
+    node.minW = node.minH = 0;
+    node.maxW = node.maxH = Infinity;
+  } else {
+    if (node.layout === "table") {
+      if (node.w === "" && Array.isArray(node.columnWidths)) {
+        node.w = node.columnWidths.reduce((a, x) => a + x, 0);
+      }
+    }
+  }
+}
+
 function layoutClass(node) {
   switch (node.layout) {
     case "position":
@@ -211,26 +441,145 @@ function toStyle(node, ...names) {
   return style;
 }
 
-function addExtraDivForMargin(html) {
+function addExtraDivForBorder(html) {
   const style = html.attributes.style;
-  if (style.margin) {
+  const data = style.borderData;
-    const padding = style.margin;
+  const children = [];
-    delete style.margin;
-    const width = style.width || "auto";
-    const height = style.height || "auto";
 
-    style.width = "100%";
+  const attributes = {
-    style.height = "100%";
+    class: "xfaWrapper",
+    style: Object.create(null),
+  };
 
-    return {
+  for (const key of ["top", "left"]) {
+    if (style[key] !== undefined) {
+      attributes.style[key] = style[key];
+    }
+  }
+
+  delete style.top;
+  delete style.left;
+
+  if (style.position === "absolute") {
+    attributes.style.position = "absolute";
+  } else {
+    attributes.style.position = "relative";
+  }
+  delete style.position;
+
+  if (style.justifyContent) {
+    attributes.style.justifyContent = style.justifyContent;
+    delete style.justifyContent;
+  }
+
+  if (data) {
+    delete style.borderData;
+
+    let insets;
+    if (data.margin) {
+      insets = data.margin.split(" ");
+      delete data.margin;
+    } else {
+      insets = ["0px", "0px", "0px", "0px"];
+    }
+
+    let width = "100%";
+    let height = width;
+
+    if (insets[1] !== "0px" || insets[3] !== "0px") {
+      width = `calc(100% - ${parseInt(insets[1]) + parseInt(insets[3])}px`;
+    }
+
+    if (insets[0] !== "0px" || insets[2] !== "0px") {
+      height = `calc(100% - ${parseInt(insets[0]) + parseInt(insets[2])}px`;
+    }
+
+    const borderStyle = {
+      top: insets[0],
+      left: insets[3],
+      width,
+      height,
+    };
+
+    for (const [k, v] of Object.entries(data)) {
+      borderStyle[k] = v;
+    }
+
+    if (style.transform) {
+      borderStyle.transform = style.transform;
+    }
+
+    const borderDiv = {
       name: "div",
       attributes: {
-        style: { padding, width, height },
+        class: "xfaBorderDiv",
+        style: borderStyle,
       },
-      children: [html],
     };
+
+    children.push(borderDiv);
   }
-  return html;
+
+  children.push(html);
+
+  return {
+    name: "div",
+    attributes,
+    children,
+  };
 }
 
-export { addExtraDivForMargin, layoutClass, measureToString, toStyle };
+function fixTextIndent(styles) {
+  const indent = getMeasurement(styles.textIndent, "0px");
+  if (indent >= 0) {
+    return;
+  }
+
+  const align = styles.textAlign || "left";
+  if (align === "left" || align === "right") {
+    const name = "margin" + (align === "left" ? "Left" : "Right");
+    const margin = getMeasurement(styles[name], "0px");
+    styles[name] = `${margin - indent}pt`;
+  }
+}
+
+function getFonts(family) {
+  if (family.startsWith("'")) {
+    family = `"${family.slice(1, family.length - 1)}"`;
+  } else if (family.includes(" ") && !family.startsWith('"')) {
+    family = `"${family}"`;
+  }
+
+  // TODO in case Myriad is not available we should generate a new
+  // font based on helvetica but where glyphs have been rescaled in order
+  // to have the exact same metrics.
+  const fonts = [family];
+  switch (family) {
+    case `"Myriad Pro"`:
+      fonts.push(
+        `"Roboto Condensed"`,
+        `"Ubuntu Condensed"`,
+        `"Microsoft Sans Serif"`,
+        `"Apple Symbols"`,
+        "Helvetica",
+        `"sans serif"`
+      );
+      break;
+    case "Arial":
+      fonts.push("Helvetica", `"Liberation Sans"`, "Arimo", `"sans serif"`);
+      break;
+  }
+  return fonts.join(",");
+}
+
+export {
+  addExtraDivForBorder,
+  computeBbox,
+  fixDimensions,
+  fixTextIndent,
+  getFonts,
+  layoutClass,
+  layoutText,
+  measureToString,
+  toStyle,
+};

src/core/xfa/layout.js

@@ -0,0 +1,190 @@
+/* Copyright 2021 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { $extra, $flushHTML } from "./xfa_object.js";
+import { measureToString } from "./html_utils.js";
+
+// Subform and ExclGroup have a layout so they share these functions.
+
+/**
+ * How layout works ?
+ *
+ * A container has an initial space (with a width and a height) to fit in,
+ * which means that once all the children have been added then
+ * the total width/height must be lower than the given ones in
+ * the initial space.
+ * So if the container has known dimensions and these ones are ok with the
+ * space then continue else we return HTMLResult.FAILURE: it's up to the
+ * parent to deal with this failure (e.g. if parent layout is lr-tb and
+ * we fail to add a child at end of line (lr) then we try to add it on the
+ * next line).
+ * And then we run through the children, each child gets its initial space
+ * in calling its parent $getAvailableSpace method
+ * (see _filteredChildrenGenerator and $childrenToHTML in xfa_object.js)
+ * then we try to layout child in its space. If everything is ok then we add
+ * the result to its parent through $addHTML which will recompute the available
+ * space in parent according to its layout property else we return
+ * HTMLResult.Failure.
+ * Before a failure some children may have been layed out: they've been saved in
+ * [$extra].children and [$extra] has properties generator and failingNode
+ * in order to save the state where we were before a failure.
+ * This [$extra].children property is useful when a container has to be splited.
+ * So if a container is unbreakable, we must delete its [$extra] property before
+ * returning.
+ */
+
+function flushHTML(node) {
+  const attributes = node[$extra].attributes;
+  const html = {
+    name: "div",
+    attributes,
+    children: node[$extra].children,
+  };
+
+  if (node[$extra].failingNode) {
+    const htmlFromFailing = node[$extra].failingNode[$flushHTML]();
+    if (htmlFromFailing) {
+      html.children.push(htmlFromFailing);
+    }
+  }
+
+  if (html.children.length === 0) {
+    return null;
+  }
+
+  node[$extra].children = [];
+  delete node[$extra].line;
+
+  return html;
+}
+
+function addHTML(node, html, bbox) {
+  const extra = node[$extra];
+  const availableSpace = extra.availableSpace;
+
+  switch (node.layout) {
+    case "position": {
+      const [x, y, w, h] = bbox;
+      extra.width = Math.max(extra.width, x + w);
+      extra.height = Math.max(extra.height, y + h);
+      extra.children.push(html);
+      break;
+    }
+    case "lr-tb":
+    case "rl-tb":
+      if (!extra.line || extra.attempt === 1) {
+        extra.line = {
+          name: "div",
+          attributes: {
+            class: node.layout === "lr-tb" ? "xfaLr" : "xfaRl",
+          },
+          children: [],
+        };
+        extra.children.push(extra.line);
+      }
+      extra.line.children.push(html);
+
+      if (extra.attempt === 0) {
+        // Add the element on the line
+        const [, , w, h] = bbox;
+        extra.currentWidth += w;
+        extra.height = Math.max(extra.height, extra.prevHeight + h);
+      } else {
+        const [, , w, h] = bbox;
+        extra.width = Math.max(extra.width, extra.currentWidth);
+        extra.currentWidth = w;
+        extra.prevHeight = extra.height;
+        extra.height += h;
+
+        // The element has been added on a new line so switch to line mode now.
+        extra.attempt = 0;
+      }
+      break;
+    case "rl-row":
+    case "row": {
+      extra.children.push(html);
+      const [, , w, h] = bbox;
+      extra.width += w;
+      extra.height = Math.max(extra.height, h);
+      const height = measureToString(extra.height);
+      for (const child of extra.children) {
+        if (child.attributes.class === "xfaWrapper") {
+          child.children[child.children.length - 1].attributes.style.height =
+            height;
+        } else {
+          child.attributes.style.height = height;
+        }
+      }
+      break;
+    }
+    case "table": {
+      const [, , w, h] = bbox;
+      extra.width = Math.min(availableSpace.width, Math.max(extra.width, w));
+      extra.height += h;
+      extra.children.push(html);
+      break;
+    }
+    case "tb": {
+      const [, , , h] = bbox;
+      extra.width = availableSpace.width;
+      extra.height += h;
+      extra.children.push(html);
+      break;
+    }
+  }
+}
+
+function getAvailableSpace(node) {
+  const availableSpace = node[$extra].availableSpace;
+
+  switch (node.layout) {
+    case "lr-tb":
+    case "rl-tb":
+      switch (node[$extra].attempt) {
+        case 0:
+          return {
+            width: availableSpace.width - node[$extra].currentWidth,
+            height: availableSpace.height - node[$extra].prevHeight,
+          };
+        case 1:
+          return {
+            width: availableSpace.width,
+            height: availableSpace.height - node[$extra].height,
+          };
+        default:
+          return {
+            width: Infinity,
+            height: availableSpace.height - node[$extra].prevHeight,
+          };
+      }
+    case "rl-row":
+    case "row":
+      const width = node[$extra].columnWidths
+        .slice(node[$extra].currentColumn)
+        .reduce((a, x) => a + x);
+      return { width, height: availableSpace.height };
+    case "table":
+    case "tb":
+      return {
+        width: availableSpace.width,
+        height: availableSpace.height - node[$extra].height,
+      };
+    case "position":
+    default:
+      return availableSpace;
+  }
+}
+
+export { addHTML, flushHTML, getAvailableSpace };

src/core/xfa/parser.js

@@ -35,6 +35,7 @@ class XFAParser extends XMLParserBase {
     this._current = this._builder.buildRoot(this._ids);
     this._errorCode = XMLParserErrorCode.NoError;
     this._whiteRegex = /^\s+$/;
+    this._nbsps = /\xa0+/g;
   }
 
   parse(data) {
@@ -50,6 +51,9 @@ class XFAParser extends XMLParserBase {
   }
 
   onText(text) {
+    // Normally by definition a &nbsp is unbreakable
+    // but in real life Acrobat can break strings on &nbsp.
+    text = text.replace(this._nbsps, match => match.slice(1) + " ");
     if (this._current[$acceptWhitespace]()) {
       this._current[$onText](text);
       return;

src/core/xfa/som.js

@@ -275,19 +275,32 @@ function createDataNode(root, container, expr) {
   }
 
   for (let ii = parsed.length; i < ii; i++) {
-    const { cacheName, index } = parsed[i];
+    const { name, operator, index } = parsed[i];
     if (!isFinite(index)) {
       parsed[i].index = 0;
       return createNodes(root, parsed.slice(i));
     }
 
-    const cached = somCache.get(root);
+    let children;
-    if (!cached) {
+    switch (operator) {
-      warn(`XFA - createDataNode must be called after searchNode.`);
+      case operators.dot:
-      return null;
+        children = root[$getChildrenByName](name, false);
+        break;
+      case operators.dotDot:
+        children = root[$getChildrenByName](name, true);
+        break;
+      case operators.dotHash:
+        children = root[$getChildrenByClass](name);
+        if (children instanceof XFAObjectArray) {
+          children = children.children;
+        } else {
+          children = [children];
+        }
+        break;
+      default:
+        break;
     }
 
-    const children = cached.get(cacheName);
     if (children.length === 0) {
       return createNodes(root, parsed.slice(i));
     }

src/core/xfa/utils.js

@@ -18,6 +18,7 @@ const dimConverters = {
   cm: x => (x / 2.54) * 72,
   mm: x => (x / (10 * 2.54)) * 72,
   in: x => x * 72,
+  px: x => x,
 };
 const measurementPattern = /([+-]?[0-9]+\.?[0-9]*)(.*)/;
 
@@ -163,6 +164,21 @@ function getBBox(data) {
   return { x, y, width, height };
 }
 
+class HTMLResult {
+  constructor(success, html, bbox) {
+    this.success = success;
+    this.html = html;
+    this.bbox = bbox;
+  }
+
+  static success(html, bbox = null) {
+    return new HTMLResult(true, html, bbox);
+  }
+}
+
+HTMLResult.FAILURE = new HTMLResult(false, null, null);
+HTMLResult.EMPTY = new HTMLResult(true, null, null);
+
 export {
   getBBox,
   getColor,
@@ -173,4 +189,5 @@ export {
   getRatio,
   getRelevant,
   getStringOption,
+  HTMLResult,
 };

src/core/xfa/xfa_object.js

@@ -13,14 +13,16 @@
  * limitations under the License.
  */
 
-import { getInteger, getKeyword } from "./utils.js";
+import { getInteger, getKeyword, HTMLResult } from "./utils.js";
 import { shadow, warn } from "../../shared/util.js";
 import { NamespaceIds } from "./namespaces.js";
 
 // We use these symbols to avoid name conflict between tags
 // and properties/methods names.
 const $acceptWhitespace = Symbol();
+const $addHTML = Symbol();
 const $appendChild = Symbol();
+const $break = Symbol();
 const $childrenToHTML = Symbol();
 const $clean = Symbol();
 const $cleanup = Symbol();
@@ -31,16 +33,21 @@ const $data = Symbol("data");
 const $dump = Symbol();
 const $extra = Symbol("extra");
 const $finalize = Symbol();
+const $flushHTML = Symbol();
 const $getAttributeIt = Symbol();
+const $getAvailableSpace = Symbol();
 const $getChildrenByClass = Symbol();
 const $getChildrenByName = Symbol();
 const $getChildrenByNameIt = Symbol();
+const $getDataValue = Symbol();
 const $getRealChildrenByNameIt = Symbol();
 const $getChildren = Symbol();
+const $getNextPage = Symbol();
 const $getParent = Symbol();
 const $global = Symbol();
 const $hasItem = Symbol();
 const $hasSettableValue = Symbol();
+const $ids = Symbol();
 const $indexOf = Symbol();
 const $insertAt = Symbol();
 const $isDataValue = Symbol();
@@ -55,6 +62,7 @@ const $onChildCheck = Symbol();
 const $onText = Symbol();
 const $removeChild = Symbol();
 const $resolvePrototypes = Symbol();
+const $searchNode = Symbol();
 const $setId = Symbol();
 const $setSetAttributes = Symbol();
 const $setValue = Symbol();
@@ -70,6 +78,7 @@ const _children = Symbol("_children");
 const _cloneAttribute = Symbol();
 const _dataValue = Symbol();
 const _defaultValue = Symbol();
+const _filteredChildrenGenerator = Symbol();
 const _getPrototype = Symbol();
 const _getUnsetAttributes = Symbol();
 const _hasChildren = Symbol();
@@ -270,20 +279,67 @@ class XFAObject {
   }
 
   [$toHTML]() {
+    return HTMLResult.EMPTY;
+  }
+
+  *[_filteredChildrenGenerator](filter, include) {
+    for (const node of this[$getChildren]()) {
+      if (!filter || include === filter.has(node[$nodeName])) {
+        const availableSpace = this[$getAvailableSpace]();
+        const res = node[$toHTML](availableSpace);
+        if (!res.success) {
+          this[$extra].failingNode = node;
+        }
+        yield res;
+      }
+    }
+  }
+
+  [$flushHTML]() {
     return null;
   }
 
+  [$addHTML](html, bbox) {
+    this[$extra].children.push(html);
+  }
+
+  [$getAvailableSpace]() {}
+
   [$childrenToHTML]({ filter = null, include = true }) {
-    const res = [];
+    if (!this[$extra].generator) {
-    this[$getChildren]().forEach(node => {
+      this[$extra].generator = this[_filteredChildrenGenerator](
-      if (!filter || include === filter.has(node[$nodeName])) {
+        filter,
-        const html = node[$toHTML]();
+        include
-        if (html) {
+      );
-          res.push(html);
+    } else {
-        }
+      const availableSpace = this[$getAvailableSpace]();
+      const res = this[$extra].failingNode[$toHTML](availableSpace);
+      if (!res.success) {
+        return false;
       }
-    });
+      if (res.html) {
-    return res;
+        this[$addHTML](res.html, res.bbox);
+      }
+      delete this[$extra].failingNode;
+    }
+
+    while (true) {
+      const gen = this[$extra].generator.next();
+      if (gen.done) {
+        break;
+      }
+      const res = gen.value;
+      if (!res.success) {
+        return false;
+      }
+      if (res.html) {
+        this[$addHTML](res.html, res.bbox);
+      }
+    }
+
+    this[$extra].generator = null;
+
+    return true;
   }
 
   [$setSetAttributes](attributes) {
@@ -640,13 +696,13 @@ class XmlObject extends XFAObject {
 
   [$toHTML]() {
     if (this[$nodeName] === "#text") {
-      return {
+      return HTMLResult.success({
         name: "#text",
         value: this[$content],
-      };
+      });
     }
 
-    return null;
+    return HTMLResult.EMPTY;
   }
 
   [$getChildren](name = null) {
@@ -710,11 +766,27 @@ class XmlObject extends XFAObject {
 
   [$isDataValue]() {
     if (this[_dataValue] === null) {
-      return this[_children].length === 0;
+      return (
+        this[_children].length === 0 ||
+        this[_children][0][$namespaceId] === NamespaceIds.xhtml.id
+      );
     }
     return this[_dataValue];
   }
 
+  [$getDataValue]() {
+    if (this[_dataValue] === null) {
+      if (this[_children].length === 0) {
+        return this[$content].trim();
+      }
+      if (this[_children][0][$namespaceId] === NamespaceIds.xhtml.id) {
+        return this[_children][0][$text]().trim();
+      }
+      return null;
+    }
+    return this[$content].trim();
+  }
+
   [$dump]() {
     const dumped = Object.create(null);
     if (this[$content]) {
@@ -811,7 +883,9 @@ class Option10 extends IntegerObject {
 
 export {
   $acceptWhitespace,
+  $addHTML,
   $appendChild,
+  $break,
   $childrenToHTML,
   $clean,
   $cleanup,
@@ -822,16 +896,21 @@ export {
   $dump,
   $extra,
   $finalize,
+  $flushHTML,
   $getAttributeIt,
+  $getAvailableSpace,
   $getChildren,
   $getChildrenByClass,
   $getChildrenByName,
   $getChildrenByNameIt,
+  $getDataValue,
+  $getNextPage,
   $getParent,
   $getRealChildrenByNameIt,
   $global,
   $hasItem,
   $hasSettableValue,
+  $ids,
   $indexOf,
   $insertAt,
   $isDataValue,
@@ -845,6 +924,7 @@ export {
   $onText,
   $removeChild,
   $resolvePrototypes,
+  $searchNode,
   $setId,
   $setSetAttributes,
   $setValue,

src/core/xfa/xhtml.js

@@ -17,6 +17,7 @@ import {
   $acceptWhitespace,
   $childrenToHTML,
   $content,
+  $extra,
   $nodeName,
   $onText,
   $text,
@@ -24,8 +25,8 @@ import {
   XmlObject,
 } from "./xfa_object.js";
 import { $buildXFAObject, NamespaceIds } from "./namespaces.js";
-import { getMeasurement } from "./utils.js";
+import { fixTextIndent, getFonts, measureToString } from "./html_utils.js";
-import { measureToString } from "./html_utils.js";
+import { getMeasurement, HTMLResult } from "./utils.js";
 
 const XHTML_NS_ID = NamespaceIds.xhtml.id;
 
@@ -79,14 +80,16 @@ const StyleMapping = new Map([
   ],
   ["xfa-spacerun", ""],
   ["xfa-tab-stops", ""],
-  ["font-size", value => measureToString(getMeasurement(value))],
+  ["font-size", value => measureToString(1 * getMeasurement(value))],
   ["letter-spacing", value => measureToString(getMeasurement(value))],
-  ["line-height", value => measureToString(getMeasurement(value))],
+  ["line-height", value => measureToString(0.99 * getMeasurement(value))],
   ["margin", value => measureToString(getMeasurement(value))],
   ["margin-bottom", value => measureToString(getMeasurement(value))],
   ["margin-left", value => measureToString(getMeasurement(value))],
   ["margin-right", value => measureToString(getMeasurement(value))],
   ["margin-top", value => measureToString(getMeasurement(value))],
+  ["text-indent", value => measureToString(getMeasurement(value))],
+  ["font-family", value => getFonts(value)],
 ]);
 
 const spacesRegExp = /\s+/g;
@@ -121,6 +124,8 @@ function mapStyle(styleStr) {
         newValue;
     }
   }
+
+  fixTextIndent(style);
   return style;
 }
 
@@ -162,16 +167,27 @@ class XhtmlObject extends XmlObject {
     }
   }
 
-  [$toHTML]() {
+  [$toHTML](availableSpace) {
-    return {
+    const children = [];
+    this[$extra] = {
+      children,
+    };
+
+    this[$childrenToHTML]({});
+
+    if (children.length === 0 && !this[$content]) {
+      return HTMLResult.EMPTY;
+    }
+
+    return HTMLResult.success({
       name: this[$nodeName],
       attributes: {
         href: this.href,
         style: mapStyle(this.style),
       },
-      children: this[$childrenToHTML]({}),
+      children,
       value: this[$content] || "",
-    };
+    });
   }
 }
 
@@ -193,10 +209,15 @@ class Body extends XhtmlObject {
     super(attributes, "body");
   }
 
-  [$toHTML]() {
+  [$toHTML](availableSpace) {
-    const html = super[$toHTML]();
+    const res = super[$toHTML](availableSpace);
+    const { html } = res;
+    if (!html) {
+      return HTMLResult.EMPTY;
+    }
+    html.name = "div";
     html.attributes.class = "xfaRich";
-    return html;
+    return res;
   }
 }
 
@@ -209,10 +230,10 @@ class Br extends XhtmlObject {
     return "\n";
   }
 
-  [$toHTML]() {
+  [$toHTML](availableSpace) {
-    return {
+    return HTMLResult.success({
       name: "br",
-    };
+    });
   }
 }
 
@@ -221,34 +242,39 @@ class Html extends XhtmlObject {
     super(attributes, "html");
   }
 
-  [$toHTML]() {
+  [$toHTML](availableSpace) {
-    const children = this[$childrenToHTML]({});
+    const children = [];
+    this[$extra] = {
+      children,
+    };
+
+    this[$childrenToHTML]({});
     if (children.length === 0) {
-      return {
+      return HTMLResult.success({
         name: "div",
         attributes: {
           class: "xfaRich",
           style: {},
         },
         value: this[$content] || "",
-      };
+      });
     }
 
     if (children.length === 1) {
       const child = children[0];
       if (child.attributes && child.attributes.class === "xfaRich") {
-        return child;
+        return HTMLResult.success(child);
       }
     }
 
-    return {
+    return HTMLResult.success({
       name: "div",
       attributes: {
         class: "xfaRich",
         style: {},
       },
       children,
-    };
+    });
   }
 }
 
@@ -274,6 +300,10 @@ class P extends XhtmlObject {
   constructor(attributes) {
     super(attributes, "p");
   }
+
+  [$text]() {
+    return super[$text]() + "\n";
+  }
 }
 
 class Span extends XhtmlObject {

src/display/xfa_layer.js

@@ -21,7 +21,11 @@ class XfaLayer {
       }
 
       if (key !== "style") {
-        html.setAttribute(key, value);
+        if (key === "textContent") {
+          html.textContent = value;
+        } else {
+          html.setAttribute(key, value);
+        }
       } else {
         Object.assign(html.style, value);
       }

test/unit/xfa_parser_spec.js

@@ -332,7 +332,7 @@ describe("XFAParser", function () {
         [
           " The first line of this paragraph is indented a half-inch.\n",
           " Successive lines are not indented.\n",
-          " This is the last line of the paragraph.\n ",
+          " This is the last line of the paragraph.\n \n",
         ].join("")
       );
     });

test/unit/xfa_tohtml_spec.js

@@ -28,7 +28,7 @@ describe("XFAFactory", function () {
           <contentArea x="123pt" w="456pt" h="789pt"/>
           <medium stock="default" short="456pt" long="789pt"/>
           <draw y="1pt" w="11pt" h="22pt" rotate="90" x="2pt">
-            <font size="7pt" typeface="Arial" baselineShift="2pt">
+            <font size="7pt" typeface="FooBar" baselineShift="2pt">
               <fill>
                 <color value="12,23,34"/>
                 <solid/>
@@ -43,6 +43,7 @@ describe("XFAFactory", function () {
       <subform name="first">
       </subform>
       <subform name="second">
+        <breakBefore targetType="pageArea" startNew="1"/>
       </subform>
     </subform>
   </template>
@@ -73,18 +74,23 @@ describe("XFAFactory", function () {
         position: "absolute",
       });
 
-      const draw = page1.children[1];
+      const wrapper = page1.children[1];
+      const draw = wrapper.children[0];
+
+      expect(wrapper.attributes.class).toEqual("xfaWrapper");
+      expect(wrapper.attributes.style).toEqual({
+        left: "2px",
+        position: "absolute",
+        top: "1px",
+      });
+
       expect(draw.attributes.class).toEqual("xfaDraw xfaFont");
       expect(draw.attributes.style).toEqual({
         color: "#0c1722",
-        fontFamily: "Arial",
+        fontFamily: "FooBar",
-        fontSize: "7px",
+        fontSize: "6.93px",
         height: "22px",
-        left: "2px",
         padding: "1px 4px 2px 3px",
-        position: "absolute",
-        textAlign: "left",
-        top: "1px",
         transform: "rotate(-90deg)",
         transformOrigin: "top left",
         verticalAlign: "2px",
@@ -93,7 +99,7 @@ describe("XFAFactory", function () {
 
       // draw element must be on each page.
       expect(draw.attributes.style).toEqual(
-        factory.getPage(1).children[1].attributes.style
+        factory.getPage(1).children[1].children[0].attributes.style
       );
     });
   });

web/xfa_layer_builder.css

@@ -24,6 +24,8 @@
 .xfaLayer * {
   color: inherit;
   font: inherit;
+  font-style: inherit;
+  font-weight: inherit;
   font-kerning: inherit;
   letter-spacing: inherit;
   text-align: inherit;
@@ -33,6 +35,14 @@
   background: transparent;
 }
 
+.xfaLayer a {
+  color: blue;
+}
+
+.xfaRich li {
+  margin-left: 3em;
+}
+
 .xfaFont {
   color: black;
   font-weight: normal;
@@ -58,6 +68,7 @@
 
 .xfaRich {
   z-index: 300;
+  line-height: 1.2;
 }
 
 .xfaSubform {
@@ -76,23 +87,52 @@
   flex: 1 1 auto;
 }
 
+.xfaBorderDiv {
+  background: transparent;
+  position: absolute;
+  pointer-events: none;
+}
+
+.xfaWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
+}
+
+.xfaContentArea {
+  overflow: hidden;
+}
+
+.xfaTextfield,
+.xfaSelect {
+  background-color: rgba(0, 54, 255, 0.13);
+}
+
+.xfaTextfield:focus,
+.xfaSelect:focus {
+  background-color: transparent;
+}
+
 .xfaTextfield,
 .xfaSelect {
   width: 100%;
   height: 100%;
-  flex: 1 1 auto;
+  flex: 100 1 0;
   border: none;
   resize: none;
 }
 
-.xfaLabel > input[type="checkbox"] {
+.xfaLabel > input[type="radio"] {
   /* Use this trick to make the checkbox invisible but
        but still focusable. */
   position: absolute;
   left: -99999px;
 }
 
-.xfaLabel > input[type="checkbox"]:focus + .xfaCheckboxMark {
+.xfaLabel > input[type="radio"]:focus + .xfaCheckboxMark {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
 }
 
@@ -133,19 +173,48 @@
   white-space: pre-wrap;
 }
 
-.xfaImage,
+.xfaImage {
-.xfaRich {
   width: 100%;
   height: 100%;
 }
 
-.xfaLrTb,
+.xfaRich {
-.xfaRlTb,
+  width: 100%;
-.xfaTb,
+  height: auto;
+}
+
 .xfaPosition {
   display: block;
 }
 
+.xfaLrTb,
+.xfaRlTb,
+.xfaTb {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.xfaLr,
+.xfaRl,
+.xfaTb > div {
+  flex: 1 1 auto;
+}
+
+.xfaTb > div {
+  justify-content: left;
+}
+
+.xfaLr > div {
+  display: inline;
+  float: left;
+}
+
+.xfaRl > div {
+  display: inline;
+  float: right;
+}
+
 .xfaPosition {
   position: relative;
 }