Support fragmenting non-overflowing table when necessary

CHANGELOG.md

@@ -27,7 +27,7 @@
 - Avoid invalid fragmentation occurring between an edge of a block container and its child
   - <https://github.com/vivliostyle/vivliostyle.js/pull/383>
 - Fix a bug that a table is not fragmented correctly
-  - <https://github.com/vivliostyle/vivliostyle.js/pull/384>
+  - <https://github.com/vivliostyle/vivliostyle.js/pull/386>
 
 ## [2017.6](https://github.com/vivliostyle/vivliostyle.js/releases/tag/2017.6) - 2017-6-22
 

src/adapt/layout.js

@@ -317,6 +317,11 @@ adapt.layout.BreakPosition.prototype.getMinBreakPenalty = function() {};
  */
 adapt.layout.BreakPosition.prototype.calculateOffset = function(column) {};
 
+/**
+ * @param {!adapt.layout.Column} column
+ */
+adapt.layout.BreakPosition.prototype.breakPositionChosen = function(column) {};
+
 /**
  * @abstract
  * @constructor
@@ -342,6 +347,11 @@ adapt.layout.AbstractBreakPosition.prototype.calculateOffset = function(column)
         vivliostyle.repetitiveelements.collectElementsOffset(column));
 };
 
+/**
+ * @override
+ */
+adapt.layout.AbstractBreakPosition.prototype.breakPositionChosen = function(column) {};
+
 /**
  * @return {adapt.vtree.NodeContext}
  */
@@ -432,7 +442,7 @@ adapt.layout.EdgeBreakPosition = function(position, breakOnEdge, overflows,
     /** @type {boolean} */ this.overflows = overflows;
     /** @type {boolean} */ this.overflowIfRepetitiveElementsDropped = overflows;
     /** @const */ this.computedBlockSize = computedBlockSize;
-    /** @private @type {boolean} */ this.isEdgeUpdated = false;
+    /** @protected @type {boolean} */ this.isEdgeUpdated = false;
     /** @private @type {number} */ this.edge = 0;
 };
 goog.inherits(adapt.layout.EdgeBreakPosition, adapt.layout.AbstractBreakPosition);
@@ -3258,7 +3268,10 @@ adapt.layout.Column.prototype.doLayout = function(nodeContext, leadingEdge, brea
                 } else if (nodeContext && self.stopByOverflow(nodeContext)) {
                     // overflow (implicit page break): back up and find a page break
                     overflownNodeContext = nodeContext;
-                    nodeContext = self.findAcceptableBreakPosition().nodeContext;
+                    var bp = self.findAcceptableBreakPosition();
+                    nodeContext = bp.nodeContext;
+                    if (bp.breakPosition)
+                        bp.breakPosition.breakPositionChosen(self);
                     loopFrame.breakLoop(); // Loop end
                 } else {
                     if (pending) {

src/vivliostyle/table.js

@@ -1262,6 +1262,32 @@ goog.scope(function() {
         return adapt.task.newResult(true);
     };
 
+    /**
+     * @typedef {{calculateBreakPositionsInside: boolean}}
+     */
+    var TableLayoutOption;
+
+    /**
+     *  @type {Array<{root: !Node, tableLayoutOption: !TableLayoutOption}>}
+     */
+    var tableLayoutOptionCache = [];
+
+    /**
+     * @param {!Node} tableRootSourceNode
+     * @returns {?TableLayoutOption}
+     */
+    function getTableLayoutOption(tableRootSourceNode) {
+        var i = tableLayoutOptionCache.findIndex(function(c) {
+            return c.root === tableRootSourceNode;
+        });
+        var pair = tableLayoutOptionCache[i];
+        return pair ? pair.tableLayoutOption : null;
+    }
+
+    function clearTableLayoutOptionCache() {
+        tableLayoutOptionCache = [];
+    }
+
     /**
      * @constructor
      * @implements {adapt.layout.LayoutProcessor}
@@ -1434,11 +1460,24 @@ goog.scope(function() {
         var formattingContext = getTableFormattingContext(nodeContext.formattingContext);
         formattingContext.vertical = nodeContext.vertical;
         formattingContext.initializeRepetitiveElements(nodeContext.vertical);
+        goog.asserts.assert(nodeContext.sourceNode);
+        var tableLayoutOption = getTableLayoutOption(nodeContext.sourceNode);
+        clearTableLayoutOptionCache();
         var frame = adapt.task.newFrame("TableLayoutProcessor.doInitialLayout");
+        var initialNodeContext = nodeContext.copy();
         this.layoutEntireTable(nodeContext, column).then(function(nodeContextAfter) {
             var tableElement = nodeContextAfter.viewNode;
+            var tableBBox = column.clientLayout.getElementClientRect(tableElement);
+            var edge = column.vertical ? tableBBox.left : tableBBox.bottom;
+            edge += (column.vertical ? -1 : 1) * adapt.layout.calculateOffset(
+                nodeContext, vivliostyle.repetitiveelements.collectElementsOffset(column)).current;
+            if (!column.isOverflown(edge) &&
+                (!tableLayoutOption || !tableLayoutOption.calculateBreakPositionsInside)) {
+                column.breakPositions.push(new EntireTableBreakPosition(initialNodeContext));
+                frame.finish(nodeContextAfter);
+                return;
+            }
             this.normalizeColGroups(formattingContext, tableElement, column);
-            goog.asserts.assert(column.clientLayout);
             formattingContext.updateCellSizes(column.clientLayout);
             frame.finish(null);
         }.bind(this));
@@ -1708,6 +1747,95 @@ goog.scope(function() {
         return this.processor.doInitialLayout(nodeContext, column);
     };
 
+    /**
+     * @constructor
+     * @param {!adapt.vtree.NodeContext} tableNodeContext
+     * @extends {adapt.layout.EdgeBreakPosition}
+     */
+    vivliostyle.table.EntireTableBreakPosition = function(tableNodeContext) {
+        adapt.layout.EdgeBreakPosition.call(this, tableNodeContext, null, tableNodeContext.overflow, 0);
+    };
+    /** @const */ var EntireTableBreakPosition = vivliostyle.table.EntireTableBreakPosition;
+    goog.inherits(EntireTableBreakPosition, adapt.layout.EdgeBreakPosition);
+
+    /**
+     * @override
+     */
+    EntireTableBreakPosition.prototype.getMinBreakPenalty = function() {
+        if (!this.isEdgeUpdated) {
+            throw new Error("EdgeBreakPosition.prototype.updateEdge not called");
+        }
+        return (this.overflows ? 3 : 0)
+            + (this.position.parent ? this.position.parent.breakPenalty : 0);
+    };
+
+    /**
+     * @override
+     */
+    EntireTableBreakPosition.prototype.breakPositionChosen = function(column) {
+        column.fragmentLayoutConstraints.push(
+            new EntireTableLayoutConstraint(this.position.sourceNode));
+    };
+
+    /**
+     * @constructor
+     * @param {Node} tableRootNode
+     * @implements {adapt.layout.FragmentLayoutConstraint}
+     */
+    vivliostyle.table.EntireTableLayoutConstraint = function(tableRootNode) {
+        this.tableRootNode = tableRootNode;
+    };
+    /** @const */ var EntireTableLayoutConstraint = vivliostyle.table.EntireTableLayoutConstraint;
+
+    /**
+     * @override
+     */
+    EntireTableLayoutConstraint.prototype.allowLayout = function(nodeContext, overflownNodeContext, column) {
+        // If the nodeContext overflows, any EntireTableLayoutConstraint should not be registered in the first place.
+        // See TableLayoutProcessor.prototype.doInitialLayout.
+        goog.asserts.assert(!nodeContext.overflow);
+        return false;
+    };
+
+    /**
+     * @override
+     */
+    EntireTableLayoutConstraint.prototype.nextCandidate = function(nodeContext) {
+        return true;
+    };
+
+    /**
+     * @override
+     */
+    EntireTableLayoutConstraint.prototype.postLayout = function(allowed, positionAfter, initialPosition, column) {
+        goog.asserts.assert(positionAfter.sourceNode);
+        tableLayoutOptionCache.push({
+            root: positionAfter.sourceNode,
+            tableLayoutOption: /** @type {!TableLayoutOption} */({calculateBreakPositionsInside: true})
+        });
+    };
+
+    /**
+     * @override
+     */
+    EntireTableLayoutConstraint.prototype.finishBreak = function(nodeContext, column) {
+        return adapt.task.newResult(true);
+    };
+
+    /**
+     * @override
+     */
+    EntireTableLayoutConstraint.prototype.equalsTo = function(constraint) {
+        return (constraint instanceof EntireTableLayoutConstraint) &&
+            constraint.tableRootNode === this.tableRootNode;
+    };
+
+    /**
+     * @override
+     */
+    EntireTableLayoutConstraint.prototype.getPriorityOfFinishBreak = function() {
+        return 0;
+    };
 
     /**
      * @constructor

test/files/file-list.js

@@ -83,7 +83,8 @@ module.exports = [
             {file: "table/table_vertical_align.html", title: "Table vertical-align"},
             {file: "table/table_vertical_align_vertical.html", title: "Table vertical-align (vertical writing-mode)"},
             {file: "table/table_repeating_header_footer.html", title: "Table repeating header/footer"},
-            {file: "table/table_repeating_header_footer_vertical.html", title: "Table repeating header/footer (vertical writing-mode)"}
+            {file: "table/table_repeating_header_footer_vertical.html", title: "Table repeating header/footer (vertical writing-mode)"},
+            {file: "table/fragment_non-overflowing_table.html", title: "Fragment a non-overflowing table"}
         ]
     },
     {

test/files/table/table_colspan_vertical.html

@@ -794,7 +794,7 @@
 
 <section>
     <table class="border-collapse">
-        <caption>(11) Fragment between rows, inside a row-spanning column; colspan in 1st and 2nd columns, and in 3rd and 4th columns (also row-spanning); border-collapse: collapse</caption>
+        <caption>(12) Fragment between rows, inside a row-spanning column; colspan in 1st and 2nd columns, and in 3rd and 4th columns (also row-spanning); border-collapse: collapse</caption>
         <colgroup span="2" class="highlight"></colgroup>
         <tr>
             <td>