Merge pull request #225 from vivliostyle/float_clear_fix-r#176

fix #223
vivliostyle · Apr 25, 2016 · f99510c · f99510c
2 parents b92fab1 + f3f9c76
commit f99510c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,8 @@
   - <https://github.com/vivliostyle/vivliostyle.js/pull/222>
 - Fix Incorrect float positioning
   - <https://github.com/vivliostyle/vivliostyle.js/issues/192>
+- Fix Incorrect float clearance
+  - <https://github.com/vivliostyle/vivliostyle.js/issues/223>
 
 ## [2016.4](https://github.com/vivliostyle/vivliostyle.js/releases/tag/2016.4) - 2016-04-08
 

diff --git a/src/adapt/layout.js b/src/adapt/layout.js
@@ -266,6 +266,7 @@ adapt.layout.Column = function(element, layoutContext, clientLayout) {
 	/** @type {boolean} */ this.forceNonfitting = true;
 	/** @type {number} */ this.leftFloatEdge = 0;  // bottom of the bottommost left float
 	/** @type {number} */ this.rightFloatEdge = 0;  // bottom of the bottommost right float
+	/** @type {number} */ this.bottommostFloatTop = 0;  // Top of the bottommost float
 };
 goog.inherits(adapt.layout.Column, adapt.vtree.Container);
 
@@ -947,6 +948,12 @@ adapt.layout.Column.prototype.layoutFloat = function(nodeContext) {
 	    if (self.vertical) {
 	    	floatHorBox = adapt.geom.rotateBox(floatBox);
 	    }
+        var dir = self.getBoxDir();
+        if (floatHorBox.y1 < self.bottommostFloatTop * dir) {
+            var boxExtent = floatHorBox.y2 - floatHorBox.y1;
+            floatHorBox.y1 = self.bottommostFloatTop * dir;
+            floatHorBox.y2 = floatHorBox.y1 + boxExtent;
+        }
 	    adapt.geom.positionFloat(box, self.bands, floatHorBox, floatSide);
 	    if (self.vertical) {
 	    	floatBox = adapt.geom.unrotateBox(floatHorBox);
@@ -956,7 +963,12 @@ adapt.layout.Column.prototype.layoutFloat = function(nodeContext) {
 	    		(floatBox.x1 - self.getLeftEdge() + self.paddingLeft) + "px");
 	    adapt.base.setCSSProperty(element, "top",
 	    		(floatBox.y1 - self.getTopEdge() + self.paddingTop) + "px");
+        if (nodeContext.clearSpacer instanceof Node) {
+            nodeContext.viewNode.parentNode.removeChild(nodeContext.clearSpacer);
+            nodeContext.clearSpacer = null;
+        }
 	    var floatBoxEdge = self.vertical ? floatBox.x1 : floatBox.y2;
+        var floatBoxTop = self.vertical? floatBox.x2 : floatBox.y1;
 	    // TODO: subtract after margin when determining overflow.
 	    if (!self.isOverflown(floatBoxEdge) || self.breakPositions.length == 0) {
 	        // no overflow
@@ -969,6 +981,7 @@ adapt.layout.Column.prototype.layoutFloat = function(nodeContext) {
 	        } else {
 	        	self.rightFloatEdge = floatBoxEdge;	        	
 	        }
+            self.bottommostFloatTop = floatBoxTop;
 	    	self.updateMaxReachedAfterEdge(floatBoxEdge);
 	        frame.finish(nodeContextAfter);
 	    } else {
@@ -1655,6 +1668,7 @@ adapt.layout.Column.prototype.applyClearance = function(nodeContext) {
 			}
 			spacer.style.marginBottom = hAdj + "px";			
 		}
+        nodeContext.clearSpacer = spacer;            
 	}
 };
 
@@ -2021,6 +2035,7 @@ adapt.layout.Column.prototype.initGeom = function() {
     this.afterEdge = columnBBox ? (this.vertical ? columnBBox.left : columnBBox.bottom) : 0;
     this.leftFloatEdge = this.beforeEdge;
     this.rightFloatEdge = this.beforeEdge;
+    this.bottommostFloatTop = this.beforeEdge;
     this.footnoteEdge = this.afterEdge;
     this.bands = adapt.geom.shapesToBands(this.box, [this.getInnerShape()],
     		this.exclusions, 8, this.snapHeight, this.vertical);

diff --git a/src/adapt/vtree.js b/src/adapt/vtree.js
@@ -584,6 +584,7 @@ adapt.vtree.NodeContext = function(sourceNode, parent, boxOffset) {
     /** @type {?string} */ this.breakBefore = null;
     /** @type {?string} */ this.breakAfter = null;
     /** @type {Node} */ this.viewNode = null;
+    /** @type {Node} */ this.clearSpacer = null;    
     /** @type {Object.<string,number|string>} */ this.inheritedProps = parent ? parent.inheritedProps : {};
     /** @type {boolean} */ this.vertical = parent ? parent.vertical : false;
 	/** @type {string} */ this.direction = parent ? parent.direction : "ltr";
@@ -597,6 +598,7 @@ adapt.vtree.NodeContext.prototype.resetView = function() {
     this.inline = true;
     this.breakPenalty = this.parent ? this.parent.breakPenalty : 0;
     this.viewNode = null;
+    this.clearSpacer = null;        
     this.offsetInNode = 0;
     this.after = false;
     this.floatSide = null;
@@ -633,6 +635,7 @@ adapt.vtree.NodeContext.prototype.cloneItem = function() {
     np.breakBefore = this.breakBefore;
     np.breakAfter = this.breakAfter;
     np.viewNode = this.viewNode;
+    np.clearSpacer = this.clearSpacer;
     np.firstPseudo = this.firstPseudo;
     np.vertical = this.vertical;
     np.overflow = this.overflow;

diff --git a/test/files/clear-bug-test.html b/test/files/clear-bug-test.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"/>
+    <style>
+.F1 {
+  float: right;
+  border: solid green;
+  width: 100px;
+  height: 100px;
+}
+.F2 {
+  float: right;
+  clear: right;
+  border: solid orange;
+  width: 100px;
+  height: 100px;
+}
+    </style>
+  </head>
+  <body>
+    <div class="F1">Float 1.</div>
+    <div>Normal text 1. Normal text 1. Normal text 1. Normal text 1.</div>
+    <div class="F2">Float 2 (clear).</div>
+    <div>Normal text 2 (no clear). Normal text 2 (no clear). Normal text 2 (no clear). Normal text 2 (no clear). </div>
+  </body>
+</html>
diff --git a/test/files/index.html b/test/files/index.html
@@ -42,6 +42,7 @@
     <li><a href="float-bug-test.html">Float bug test</a> [<a href="../../../vivliostyle-ui/build/vivliostyle-viewer-dev.html#x=../../vivliostyle.js/test/files/float-bug-test.html&amp;debug=true">dev</a>|<a href="../../../vivliostyle-ui/build/vivliostyle-viewer.html#x=../../vivliostyle.js/test/files/float-bug-test.html">prod</a>]</li>
     <li><a href="left-float-bug.html">Float bug test: Left float</a> [<a href="../../../vivliostyle-ui/build/vivliostyle-viewer-dev.html#x=../../vivliostyle.js/test/files/left-float-bug.html&amp;debug=true">dev</a>|<a href="../../../vivliostyle-ui/build/vivliostyle-viewer.html#x=../../vivliostyle.js/test/files/left-float-bug.html">prod</a>]</li>            
     <li><a href="white-space_clear.html">Combination of white-space and clear</a> [<a href="../../../vivliostyle-ui/build/vivliostyle-viewer-dev.html#x=../../vivliostyle.js/test/files/white-space_clear.html&amp;debug=true">dev</a>|<a href="../../../vivliostyle-ui/build/vivliostyle-viewer.html#x=../../vivliostyle.js/test/files/white-space_clear.html">prod</a>]</li>
+    <li><a href="clear-bug-test.html">Float clear bug</a> [<a href="../../../vivliostyle-ui/build/vivliostyle-viewer-dev.html#x=../../vivliostyle.js/test/files/clear-bug-test.html&amp;debug=true">dev</a>|<a href="../../../vivliostyle-ui/build/vivliostyle-viewer.html#x=../../vivliostyle.js/test/files/clear-bug-test.html">prod</a>]</li>                
 </ul>
 </body>
 </html>