Fix bug 427129 / 377664: When displacing blocks that don't interact with floats around floats, displace the border box rather than the margin box. Fix bug 427782: Simultaneously, only displace when the width actually won't go down to an amount that fits (i.e., if it will go to an amount smaller than the intrinsic minimum width, let it). b=427129 r+sr=roc a=schrep

layout/generic/nsBlockFrame.cpp

@@ -1770,18 +1770,20 @@ nsBlockFrame::ReflowDirtyLines(nsBlockReflowState& aState)
       line->MarkDirty();
     }
 
-    nscoord replacedWidth = 0;
+    ReplacedElementWidthToClear replacedWidthStruct;
+    ReplacedElementWidthToClear *replacedWidth = nsnull;
     if (line->IsBlock() &&
         !nsBlockFrame::BlockCanIntersectFloats(line->mFirstChild)) {
-      replacedWidth =
+      replacedWidthStruct =
         nsBlockFrame::WidthToClearPastFloats(aState, line->mFirstChild);
+      replacedWidth = &replacedWidthStruct;
     }
 
     // We have to reflow the line if it's a block whose clearance
     // might have changed, so detect that.
     if (!line->IsDirty() &&
         (line->GetBreakTypeBefore() != NS_STYLE_CLEAR_NONE ||
-         replacedWidth != 0)) {
+         replacedWidth)) {
       nscoord curY = aState.mY;
       // See where we would be after applying any clearance due to
       // BRs.
@@ -2794,10 +2796,12 @@ nsBlockFrame::ReflowBlockFrame(nsBlockReflowState& aState,
   PRBool treatWithClearance = aLine->HasClearance();
 
   PRBool mightClearFloats = breakType != NS_STYLE_CLEAR_NONE;
-  nscoord replacedWidth = 0;
+  ReplacedElementWidthToClear replacedWidthStruct;
+  ReplacedElementWidthToClear *replacedWidth = nsnull;
   if (!nsBlockFrame::BlockCanIntersectFloats(frame)) {
     mightClearFloats = PR_TRUE;
-    replacedWidth = nsBlockFrame::WidthToClearPastFloats(aState, frame);
+    replacedWidthStruct = nsBlockFrame::WidthToClearPastFloats(aState, frame);
+    replacedWidth = &replacedWidthStruct;
   }
 
   // If our top margin was counted as part of some parents top-margin
@@ -2945,7 +2949,7 @@ nsBlockFrame::ReflowBlockFrame(nsBlockReflowState& aState,
     PRBool isImpacted = aState.IsImpactedByFloat() ? PR_TRUE : PR_FALSE;
     aLine->SetLineIsImpactedByFloat(isImpacted);
     nsRect availSpace;
-    aState.ComputeBlockAvailSpace(frame, display, availSpace);
+    aState.ComputeBlockAvailSpace(frame, display, replacedWidth, availSpace);
     
     // Now put the Y coordinate back to the top of the top-margin +
     // clearance, and flow the block.
@@ -6767,57 +6771,109 @@ nsBlockFrame::BlockCanIntersectFloats(nsIFrame* aFrame)
          !(aFrame->GetStateBits() & NS_BLOCK_SPACE_MGR);
 }
 
-static nscoord
-OneWidthToClearPastFloats(nsPresContext* aPresContext,
-                          const nsHTMLReflowState& aParentReflowState,
-                          nscoord aCBWidth,
-                          nsIFrame* aFrame)
-{
-  // We need to compute percent widths, since intrinsic width
-  // computation doesn't.
-  if (aFrame->GetStylePosition()->mWidth.GetUnit() == eStyleUnit_Percent) {
-    // All we really need here is the result of ComputeSize, and we
-    // could *almost* get that from an nsCSSOffsetState, except for the
-    // last argument.
-    nsSize availSpace(aCBWidth, NS_UNCONSTRAINEDSIZE);
-    nsHTMLReflowState reflowState(aPresContext, aParentReflowState,
-                                  aFrame, availSpace);
-    return reflowState.ComputedWidth();
-  }
-
-  return nsLayoutUtils::IntrinsicForContainer(aParentReflowState.rendContext,
-                                              aFrame,
-                                              nsLayoutUtils::MIN_WIDTH);
-}
-
+// Note that this width can vary based on the vertical position.
+// However, the cases where it varies are the cases where the width fits
+// in the available space given, which means that variation shouldn't
+// matter.
 /* static */
-nscoord
+nsBlockFrame::ReplacedElementWidthToClear
 nsBlockFrame::WidthToClearPastFloats(nsBlockReflowState& aState,
                                      nsIFrame* aFrame)
 {
-  nscoord result;
+  aState.GetAvailableSpace();
+  nscoord leftOffset, rightOffset;
+  nsCSSOffsetState offsetState(aFrame, aState.mReflowState.rendContext,
+                               aState.mContentArea.width);
+
+  ReplacedElementWidthToClear result;
   // A table outer frame is an exception in that it is a block child
   // that is not a containing block for its children.
   if (aFrame->GetType() == nsGkAtoms::tableOuterFrame) {
-    nsSize availSpace(aState.mContentArea.width, NS_UNCONSTRAINEDSIZE);
-    nsHTMLReflowState outerRS(aState.mPresContext, aState.mReflowState,
-                              aFrame, availSpace);
     nsIFrame *innerTable = aFrame->GetFirstChild(nsnull);
     nsIFrame *caption = aFrame->GetFirstChild(nsGkAtoms::captionList);
-    result = OneWidthToClearPastFloats(aState.mPresContext, outerRS,
-                                       aState.mContentArea.width, innerTable);
-    if (caption) {
-      nscoord captionWidth = OneWidthToClearPastFloats(aState.mPresContext,
-                               outerRS, aState.mContentArea.width, caption);
-      PRUint8 captionSide = caption->GetStyleTableBorder()->mCaptionSide;
-      if (captionSide == NS_SIDE_TOP || captionSide == NS_SIDE_BOTTOM)
-        result = PR_MAX(result, captionWidth);
-      else
-        result += captionWidth;
+
+    nsMargin tableMargin, captionMargin;
+    {
+      nsCSSOffsetState tableOS(innerTable, aState.mReflowState.rendContext,
+                               aState.mContentArea.width);
+      tableMargin = tableOS.mComputedMargin;
     }
+
+    if (caption) {
+      nsCSSOffsetState captionOS(caption, aState.mReflowState.rendContext,
+                                 aState.mContentArea.width);
+      captionMargin = captionOS.mComputedMargin;
+    }
+
+    PRUint8 captionSide;
+    if (!caption ||
+        ((captionSide = caption->GetStyleTableBorder()->mCaptionSide)
+           == NS_STYLE_CAPTION_SIDE_TOP ||
+         captionSide == NS_STYLE_CAPTION_SIDE_BOTTOM)) {
+      result.marginLeft = tableMargin.left;
+      result.marginRight = tableMargin.right;
+    } else if (captionSide == NS_STYLE_CAPTION_SIDE_TOP_OUTSIDE ||
+               captionSide == NS_STYLE_CAPTION_SIDE_BOTTOM_OUTSIDE) {
+      // FIXME:  This doesn't treat the caption and table independently,
+      // since we adjust by only the smaller margin, and the table outer
+      // frame doesn't know about it.
+      result.marginLeft  = PR_MIN(tableMargin.left,  captionMargin.left);
+      result.marginRight = PR_MIN(tableMargin.right, captionMargin.right);
+    } else {
+      NS_ASSERTION(captionSide == NS_STYLE_CAPTION_SIDE_LEFT ||
+                   captionSide == NS_STYLE_CAPTION_SIDE_RIGHT,
+                   "unexpected caption-side");
+      if (captionSide == NS_STYLE_CAPTION_SIDE_LEFT) {
+        result.marginLeft = captionMargin.left;
+        result.marginRight = tableMargin.right;
+      } else {
+        result.marginLeft = tableMargin.left;
+        result.marginRight = captionMargin.right;
+      }
+    }
+
+    aState.ComputeReplacedBlockOffsetsForFloats(aFrame, leftOffset, rightOffset,
+                                                &result);
+
+    nscoord availWidth = aState.mContentArea.width - leftOffset - rightOffset
+                           + result.marginLeft + result.marginRight;
+    // Force the outer frame to shrink-wrap (otherwise it just sizes to
+    // the available width unconditionally).
+    result.borderBoxWidth =
+      aFrame->ComputeSize(aState.mReflowState.rendContext,
+                          nsSize(aState.mContentArea.width,
+                                 NS_UNCONSTRAINEDSIZE),
+                          availWidth,
+                          nsSize(offsetState.mComputedMargin.LeftRight(),
+                                 offsetState.mComputedMargin.TopBottom()),
+                          nsSize(offsetState.mComputedBorderPadding.LeftRight() -
+                                   offsetState.mComputedPadding.LeftRight(),
+                                 offsetState.mComputedBorderPadding.TopBottom() -
+                                   offsetState.mComputedPadding.TopBottom()),
+                          nsSize(offsetState.mComputedPadding.LeftRight(),
+                                 offsetState.mComputedPadding.TopBottom()),
+                          PR_TRUE).width +
+      offsetState.mComputedBorderPadding.LeftRight() -
+      (result.marginLeft + result.marginRight);
   } else {
-    result = OneWidthToClearPastFloats(aState.mPresContext,
-               aState.mReflowState, aState.mContentArea.width, aFrame);
+    aState.ComputeReplacedBlockOffsetsForFloats(aFrame, leftOffset, rightOffset);
+    nscoord availWidth = aState.mContentArea.width - leftOffset - rightOffset;
+
+    // We actually don't want the min width here; see bug 427782; we only
+    // want to displace if the width won't compute to a value small enough
+    // to fit.
+    // All we really need here is the result of ComputeSize, and we
+    // could *almost* get that from an nsCSSOffsetState, except for the
+    // last argument.
+    nsSize availSpace(availWidth, NS_UNCONSTRAINEDSIZE);
+    nsHTMLReflowState reflowState(aState.mPresContext, aState.mReflowState,
+                                  aFrame, availSpace);
+    result.borderBoxWidth = reflowState.ComputedWidth() +
+                            reflowState.mComputedBorderPadding.LeftRight();
+    // Use the margins from offsetState rather than reflowState so that
+    // they aren't reduced by ignoring margins in overconstrained cases.
+    result.marginLeft  = offsetState.mComputedMargin.left;
+    result.marginRight = offsetState.mComputedMargin.right;
   }
   return result;
 }

layout/generic/nsBlockFrame.h

@@ -299,8 +299,13 @@ public:
    * Returns the width that needs to be cleared past floats for blocks
    * that cannot intersect floats.
    */
-  static nscoord WidthToClearPastFloats(nsBlockReflowState& aState,
-                                        nsIFrame* aFrame);
+  struct ReplacedElementWidthToClear {
+    nscoord marginLeft, borderBoxWidth, marginRight;
+    nscoord MarginBoxWidth() const
+      { return marginLeft + borderBoxWidth + marginRight; }
+  };
+  static ReplacedElementWidthToClear
+    WidthToClearPastFloats(nsBlockReflowState& aState, nsIFrame* aFrame);
 
   /**
    * Walks up the frame tree, starting with aCandidate, and returns the first

layout/generic/nsBlockReflowState.cpp

@@ -198,12 +198,65 @@ nsBlockReflowState::FreeLineBox(nsLineBox* aLine)
   }
 }
 
+void
+nsBlockReflowState::ComputeReplacedBlockOffsetsForFloats(nsIFrame* aFrame,
+                                                         nscoord& aLeftResult,
+                                                         nscoord& aRightResult,
+                                                         nsBlockFrame::
+                                                      ReplacedElementWidthToClear
+                                                                 *aReplacedWidth)
+{
+  // The frame is clueless about the space manager and therefore we
+  // only give it free space. An example is a table frame - the
+  // tables do not flow around floats.
+  // However, we can let its margins intersect floats.
+  NS_ASSERTION(mAvailSpaceRect.x >= 0, "bad avail space rect x");
+  NS_ASSERTION(mAvailSpaceRect.width == 0 ||
+               mAvailSpaceRect.XMost() <= mContentArea.width,
+               "bad avail space rect width");
+
+  nscoord leftOffset, rightOffset;
+  if (mAvailSpaceRect.width == mContentArea.width) {
+    // We don't need to compute margins when there are no floats around.
+    leftOffset = 0;
+    rightOffset = 0;
+  } else {
+    // We pass in aReplacedWidth to make handling outer table frames
+    // work correctly.  For outer table frames, we need to subtract off
+    // the margin that's going to be at the edge of them, since we're
+    // dealing with margin that it's really the child's responsibility
+    // to place.
+    nsCSSOffsetState os(aFrame, mReflowState.rendContext, mContentArea.width);
+    NS_ASSERTION(!aReplacedWidth ||
+                 aFrame->GetType() == nsGkAtoms::tableOuterFrame ||
+                 (aReplacedWidth->marginLeft  == os.mComputedMargin.left &&
+                  aReplacedWidth->marginRight == os.mComputedMargin.right),
+                 "unexpected aReplacedWidth");
+
+    nscoord leftFloatXOffset = mAvailSpaceRect.x;
+    leftOffset = PR_MAX(leftFloatXOffset, os.mComputedMargin.left) -
+                 (aReplacedWidth ? aReplacedWidth->marginLeft
+                                 : os.mComputedMargin.left);
+    leftOffset = PR_MAX(leftOffset, 0); // in case of negative margin
+    nscoord rightFloatXOffset = mContentArea.width - mAvailSpaceRect.XMost();
+    rightOffset = PR_MAX(rightFloatXOffset, os.mComputedMargin.right) -
+                  (aReplacedWidth ? aReplacedWidth->marginRight
+                                  : os.mComputedMargin.right);
+    rightOffset = PR_MAX(rightOffset, 0); // in case of negative margin
+  }
+  aLeftResult = leftOffset;
+  aRightResult = rightOffset;
+}
+
 // Compute the amount of available space for reflowing a block frame
 // at the current Y coordinate. This method assumes that
 // GetAvailableSpace has already been called.
 void
 nsBlockReflowState::ComputeBlockAvailSpace(nsIFrame* aFrame,
                                            const nsStyleDisplay* aDisplay,
+                                           nsBlockFrame::
+                                             ReplacedElementWidthToClear
+                                                               *aReplacedWidth,
                                            nsRect& aResult)
 {
 #ifdef REALLY_NOISY_REFLOW
@@ -232,7 +285,9 @@ nsBlockReflowState::ComputeBlockAvailSpace(nsIFrame* aFrame,
   // nsBlockFrame::WidthToClearPastFloats would need to use the
   // shrink-wrap formula, max(MIN_WIDTH, min(avail width, PREF_WIDTH))
   // rather than just using MIN_WIDTH.
-  if (nsBlockFrame::BlockCanIntersectFloats(aFrame)) {
+  NS_ASSERTION(nsBlockFrame::BlockCanIntersectFloats(aFrame) == !aReplacedWidth,
+               "unexpected replaced width");
+  if (!aReplacedWidth) {
     if (mBand.GetFloatCount()) {
       // Use the float-edge property to determine how the child block
       // will interact with the float.
@@ -300,11 +355,11 @@ nsBlockReflowState::ComputeBlockAvailSpace(nsIFrame* aFrame,
     }
   }
   else {
-    // The frame is clueless about the space manager and therefore we
-    // only give it free space. An example is a table frame - the
-    // tables do not flow around floats.
-    aResult.x = mAvailSpaceRect.x + borderPadding.left;
-    aResult.width = mAvailSpaceRect.width;
+    nscoord leftOffset, rightOffset;
+    ComputeReplacedBlockOffsetsForFloats(aFrame, leftOffset, rightOffset,
+                                         aReplacedWidth);
+    aResult.x = borderPadding.left + leftOffset;
+    aResult.width = mContentArea.width - leftOffset - rightOffset;
   }
 
 #ifdef REALLY_NOISY_REFLOW
@@ -1050,7 +1105,7 @@ nsBlockReflowState::PlaceBelowCurrentLineFloats(nsFloatCacheFreeList& aList, PRB
 
 nscoord
 nsBlockReflowState::ClearFloats(nscoord aY, PRUint8 aBreakType,
-                                nscoord aReplacedWidth)
+                     nsBlockFrame::ReplacedElementWidthToClear *aReplacedWidth)
 {
 #ifdef DEBUG
   if (nsBlockFrame::gNoisyReflow) {
@@ -1073,10 +1128,16 @@ nsBlockReflowState::ClearFloats(nscoord aY, PRUint8 aBreakType,
     newY = bp.top + mSpaceManager->ClearFloats(newY - bp.top, aBreakType);
   }
 
-  if (aReplacedWidth > 0) {
+  if (aReplacedWidth) {
     for (;;) {
       GetAvailableSpace(newY, PR_FALSE);
-      if (mAvailSpaceRect.width >= aReplacedWidth || mBand.GetFloatCount() == 0) {
+      if (mBand.GetFloatCount() == 0 ||
+          PR_MAX(mAvailSpaceRect.x, aReplacedWidth->marginLeft) +
+            aReplacedWidth->borderBoxWidth +
+            PR_MAX(mContentArea.width -
+                     PR_MIN(mContentArea.width, mAvailSpaceRect.XMost()),
+                   aReplacedWidth->marginRight) <=
+          mContentArea.width) {
         break;
       }
       // See the analogous code for inlines in nsBlockFrame::DoReflowInlineFrames

layout/generic/nsBlockReflowState.h

@@ -46,9 +46,7 @@
 #include "nsBlockBandData.h"
 #include "nsLineBox.h"
 #include "nsFrameList.h"
-#include "nsContainerFrame.h"
-
-class nsBlockFrame;
+#include "nsBlockFrame.h"
 
   // block reflow state flags
 #define BRS_UNCONSTRAINEDHEIGHT   0x00000001
@@ -111,7 +109,8 @@ public:
   // Returns the first coordinate >= aY that clears the
   // floats indicated by aBreakType and has enough width between floats
   // (or no floats remaining) to accomodate aReplacedWidth.
-  nscoord ClearFloats(nscoord aY, PRUint8 aBreakType, nscoord aReplacedWidth = 0);
+  nscoord ClearFloats(nscoord aY, PRUint8 aBreakType,
+    nsBlockFrame::ReplacedElementWidthToClear *aReplacedWidth = nsnull);
 
   PRBool IsAdjacentWithTop() const {
     return mY ==
@@ -141,8 +140,18 @@ public:
   // Reconstruct the previous bottom margin that goes above |aLine|.
   void ReconstructMarginAbove(nsLineList::iterator aLine);
 
+  // Caller must have called GetAvailableSpace for the current mY
+  void ComputeReplacedBlockOffsetsForFloats(nsIFrame* aFrame,
+                                            nscoord& aLeftResult,
+                                            nscoord& aRightResult,
+                                        nsBlockFrame::ReplacedElementWidthToClear
+                                                       *aReplacedWidth = nsnull);
+
+  // Caller must have called GetAvailableSpace for the current mY
   void ComputeBlockAvailSpace(nsIFrame* aFrame,
                               const nsStyleDisplay* aDisplay,
+                              nsBlockFrame::ReplacedElementWidthToClear
+                                                               *aReplacedWidth,
                               nsRect& aResult);
 
 protected:

layout/reftests/bugs/134706-3-left-scrollframe-ref.html

@@ -7,11 +7,9 @@
 </head>
 <body>
 
-<div style="width: 300px; height: 150px; background: aqua">
+<div style="width: 300px; height: 100px; background: aqua">
   <div style="float:left; background:blue; width: 100px; height: 100px"></div>
-  <div style="float:left; background:yellow; width: 300px; height: 50px">
-    <div style="background:purple; width: 250px; height: 50px"></div>
-  </div>
+  <div style="float:left; background:purple; width: 200px; height: 50px"></div>
 </div>
 
 </body>

layout/reftests/bugs/134706-3-right-scrollframe-ref.html

@@ -7,11 +7,9 @@
 </head>
 <body>
 
-<div style="width: 300px; height: 150px; background: aqua">
+<div style="width: 300px; height: 100px; background: aqua">
   <div style="float:right; background:blue; width: 100px; height: 100px"></div>
-  <div style="float:left; background:yellow; width: 300px; height: 50px">
-    <div style="background:purple; width: 250px; height: 50px"></div>
-  </div>
+  <div style="float:left; background:purple; width: 200px; height: 50px"></div>
 </div>
 
 </body>

layout/reftests/bugs/134706-4-ref.html

@@ -34,33 +34,25 @@
 <div style="width: 300px; height: 20px; background: aqua"><tr><td>
   <div style="float:left; background:blue; width: 100px; height: 20px"></div>
   <div style="float:left; background:silver; width: 100px; height: 6px"></div>
-  <div style="float:left; width: 200px; height: 10px; background: yellow">
-    <div style="float:left; width: 150px; height: 10px; background: purple"></div>
-  </div>
+  <div style="float:left; width: 100px; height: 10px; background: purple"></div>
 </div>
 
 <div style="width: 300px; height: 20px; background: aqua"><tr><td>
   <div style="float:left; background:blue; width: 100px; height: 20px"></div>
   <div style="float:right; background:silver; width: 100px; height: 6px"></div>
-  <div style="float:left; width: 200px; height: 10px; background: yellow">
-    <div style="float:left; width: 150px; height: 10px; background: purple"></div>
-  </div>
+  <div style="float:left; width: 100px; height: 10px; background: purple"></div>
 </div>
 
 <div style="width: 300px; height: 20px; background: aqua"><tr><td>
   <div style="float:right; background:blue; width: 100px; height: 20px"></div>
   <div style="float:left; background:silver; width: 100px; height: 6px"></div>
-  <div style="float:left; width: 200px; height: 10px; background: yellow">
-    <div style="float:left; width: 150px; height: 10px; background: purple"></div>
-  </div>
+  <div style="float:left; width: 100px; height: 10px; background: purple"></div>
 </div>
 
 <div style="width: 300px; height: 20px; background: aqua"><tr><td>
   <div style="float:right; background:blue; width: 100px; height: 20px"></div>
   <div style="float:right; background:silver; width: 100px; height: 6px"></div>
-  <div style="float:left; width: 200px; height: 10px; background: yellow">
-    <div style="float:left; width: 150px; height: 10px; background: purple"></div>
-  </div>
+  <div style="float:left; width: 100px; height: 10px; background: purple"></div>
 </div>
 
 </body>

layout/reftests/bugs/427129-image.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Reftest, bug 427129</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	html, body { margin: 0; }
+
+	.contain {
+		background: aqua; color: black;
+		height: 10px; margin: 2px 50px;
+		padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
+	}
+
+	.fl, .fr { height: 5px; }
+	.fl { float: left; width: 56px; }
+	.fr { float: right; width: 73px; }
+
+	.t { display: block; background: blue; height: 5px; width: 85px;
+	     border-left: 1px solid blue; padding-left: 2px;
+	     padding-right: 4px; border-right: 8px solid blue; }
+
+	</style>
+</head>
+<body>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: 30px">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: 56px">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: 73px">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: 100px">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: auto">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: auto; margin-right: 30px">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: auto; margin-right: 56px">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: auto; margin-right: 73px">
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<img src="solidblue2.png" class="t" style="margin-left: auto; margin-right: 100px">
+</div>
+
+<!-- Remember that the extra end-edge margin gets ignored -->
+<div style="width: 300px">
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="width: 56px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px; width: 56px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="width: 57px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px; width: 57px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px 0 56px; width: 56px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px 0 57px; width: 56px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 73px 0 15px; width: 56px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 74px 0 15px; width: 56px">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="width: 28%">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px; width: 28%">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="width: 29%">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px; width: 29%">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px 0 56px; width: 28%">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 15px 0 57px; width: 28%">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 73px 0 15px; width: 28%">
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<img src="solidblue2.png" class="t" style="margin: 0 74px 0 15px; width: 28%">
+	</div>
+</div>
+
+</body>
+</html>

layout/reftests/bugs/427129-ref.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Reftest, bug 427129</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	html, body { margin: 0; }
+
+	.contain {
+		background: aqua; color: black;
+		height: 10px; margin: 2px 50px;
+		padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
+	}
+
+	.t { background: blue; height: 5px; width: 100px; }
+
+	</style>
+</head>
+<body>
+
+<div class="contain">
+	<div class="t" style="margin-left: 56px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: 56px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: 56px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: 73px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: 100px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: auto; margin-right: 73px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: auto; margin-right: 73px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: auto; margin-right: 73px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: auto; margin-right: 73px"></div>
+</div>
+
+<div class="contain">
+	<div class="t" style="margin-left: auto; margin-right: 100px"></div>
+</div>
+
+<!-- Remember that the extra end-edge margin gets ignored -->
+<div style="width: 300px">
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-top: 5px; width: 72px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-top: 5px; margin-left: 15px; width: 72px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-top: 5px; margin-left: 57px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+        <!-- maybe we should ignore margin-right here?  It's hard to do
+             for tables, though. -->
+		<div class="t" style="margin-top: 5px; margin-left: 15px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-top: 5px; width: 73px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-top: 5px; margin-left: 15px; width: 73px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-top: 5px; margin-left: 57px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="t" style="margin-left: 56px; width: 71px"></div>
+	</div>
+
+	<div class="contain">
+        <!-- maybe we should ignore margin-right here?  It's hard to do
+             for tables, though. -->
+		<div class="t" style="margin-top: 5px; margin-left: 15px; width: 71px"></div>
+	</div>
+</div>
+
+</body>
+</html>

layout/reftests/bugs/427129-scrollframe.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Reftest, bug 427129</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	html, body { margin: 0; }
+
+	.contain {
+		background: aqua; color: black;
+		height: 10px; margin: 2px 50px;
+		padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
+	}
+
+	.fl, .fr { height: 5px; }
+	.fl { float: left; width: 56px; }
+	.fr { float: right; width: 73px; }
+
+	.t { overflow: hidden; background: blue; height: 5px; width: 85px;
+	     border-left: 1px solid blue; padding-left: 2px;
+	     padding-right: 4px; border-right: 8px solid blue; }
+
+	</style>
+</head>
+<body>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: 30px"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: 56px"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: 73px"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: 100px"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: auto"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: auto; margin-right: 30px"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: auto; margin-right: 56px"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: auto; margin-right: 73px"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<div class="t" style="margin-left: auto; margin-right: 100px"></div>
+</div>
+
+<!-- Remember that the extra end-edge margin gets ignored -->
+<div style="width: 300px">
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="width: 56px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px; width: 56px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="width: 57px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px; width: 57px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px 0 56px; width: 56px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px 0 57px; width: 56px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 73px 0 15px; width: 56px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 74px 0 15px; width: 56px"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="width: 28%"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px; width: 28%"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="width: 29%"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px; width: 29%"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px 0 56px; width: 28%"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 15px 0 57px; width: 28%"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 73px 0 15px; width: 28%"></div>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<div class="t" style="margin: 0 74px 0 15px; width: 28%"></div>
+	</div>
+</div>
+
+</body>
+</html>

layout/reftests/bugs/427129-table-caption-ref.html

@@ -0,0 +1,711 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Reftest, bug 427129</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	html, body { margin: 0; }
+
+	.contain {
+		background: aqua; color: black;
+		height: 4px; margin: 1px 50px;
+		padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
+	}
+
+	div.pushed { height: 2px; }
+	div.t { background: blue; height: 1px; width: 100px; }
+	div.caption { background: purple; height: 1px; width: 100px; }
+	div.side { display: inline-block; vertical-align: top; }
+
+	</style>
+</head>
+<body>
+
+<!--
+  
+  WARNING: Both this test and the reference are constructed to test
+  our current behavior, which is far from optimal in a number of cases.
+  Fixing the test to test better behavior is encouraged when such
+  behavior is implemented.
+
+  To test the behavior under resizing, every test in this page is
+  repeated three times, once in a container one pixel above the
+  transition width, once at the transition width (just fitting), and
+  once in a container a pixel below the transition width.
+
+-->
+
+<div style="width: 335px">
+	<div class="contain">
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 116px"></div>
+	</div>
+</div>
+
+<div style="width: 334px">
+	<div class="contain">
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 116px"></div>
+	</div>
+</div>
+
+<div style="width: 333px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 55px"></div>
+		<div class="caption" style="margin-left: 115px"></div>
+	</div>
+</div>
+
+<div style="width: 334px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 116px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 333px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 116px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 332px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: 116px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 334px">
+	<div class="contain">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 117px"></div>
+	</div>
+</div>
+
+<div style="width: 333px">
+	<div class="contain">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 117px"></div>
+	</div>
+</div>
+
+<div style="width: 332px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 117px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 328px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain">
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain">
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 55px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 55px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 328px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: 55px"></div>
+		<div class="t" style="margin-left: 55px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 57px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain">
+		<div class="caption" style="margin-left: 57px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: 57px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 657px">
+	<div class="contain">
+		<div class="side caption" style="margin-left: 56px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 656px">
+	<div class="contain">
+		<div class="side caption" style="margin-left: 56px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 655px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="side caption" style="margin-left: 55px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 657px">
+	<div class="contain">
+		<div class="side caption" style="margin-left: 56px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 656px">
+	<div class="contain">
+		<div class="side caption" style="margin-left: 56px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 655px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="side caption" style="margin-left: 56px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 658px">
+	<div class="contain">
+		<div class="side caption" style="margin-left: 57px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 657px">
+	<div class="contain">
+		<div class="side caption" style="margin-left: 57px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 656px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="side caption" style="margin-left: 57px"></div
+		><div class="side t" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 657px">
+	<div class="contain">
+		<div class="side t" style="margin-left: 56px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 656px">
+	<div class="contain">
+		<div class="side t" style="margin-left: 56px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 655px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="side t" style="margin-left: 55px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 657px">
+	<div class="contain">
+		<div class="side t" style="margin-left: 56px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 656px">
+	<div class="contain">
+		<div class="side t" style="margin-left: 56px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 655px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="side t" style="margin-left: 56px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 658px">
+	<div class="contain">
+		<div class="side t" style="margin-left: 57px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 657px">
+	<div class="contain">
+		<div class="side t" style="margin-left: 57px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 656px">
+	<div class="contain">
+		<div class="pushed"></div>
+		<div class="side t" style="margin-left: 57px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 338px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 65px"></div>
+		<div class="caption" style="margin-left: -15px"></div>
+	</div>
+</div>
+
+<div style="width: 337px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 64px"></div>
+		<div class="caption" style="margin-left: -16px"></div>
+	</div>
+</div>
+
+<div style="width: 336px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 64px"></div>
+		<div class="caption" style="margin-left: -16px"></div>
+	</div>
+</div>
+
+<div style="width: 337px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: -16px"></div>
+		<div class="t" style="margin-left: 64px"></div>
+	</div>
+</div>
+
+<div style="width: 336px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: -17px"></div>
+		<div class="t" style="margin-left: 63px"></div>
+	</div>
+</div>
+
+<div style="width: 335px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: -18px"></div>
+		<div class="t" style="margin-left: 62px"></div>
+	</div>
+</div>
+
+<div style="width: 337px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 63px"></div>
+		<div class="caption" style="margin-left: -17px"></div>
+	</div>
+</div>
+
+<div style="width: 336px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 62px"></div>
+		<div class="caption" style="margin-left: -18px"></div>
+	</div>
+</div>
+
+<div style="width: 335px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 61px"></div>
+		<div class="caption" style="margin-left: -19px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: 57px"></div>
+		<div class="t" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 328px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: 55px"></div>
+		<div class="t" style="margin-left: 55px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 58px"></div>
+		<div class="caption" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 58px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: 57px"></div>
+		<div class="t" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 328px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 57px"></div>
+		<div class="caption" style="margin-left: 58px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain rtl">
+		<div class="t" style="margin-left: 56px"></div>
+		<div class="caption" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="t" style="margin-left: 55px"></div>
+		<div class="caption" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 331px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: 57px"></div>
+		<div class="t" style="margin-left: 58px"></div>
+	</div>
+</div>
+
+<div style="width: 330px">
+	<div class="contain rtl">
+		<div class="caption" style="margin-left: 56px"></div>
+		<div class="t" style="margin-left: 57px"></div>
+	</div>
+</div>
+
+<div style="width: 329px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="caption" style="margin-left: 55px"></div>
+		<div class="t" style="margin-left: 56px"></div>
+	</div>
+</div>
+
+<div style="width: 673px">
+	<div class="contain rtl">
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 72px"></div>
+	</div>
+</div>
+
+<div style="width: 672px">
+	<div class="contain rtl">
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 72px"></div>
+	</div>
+</div>
+
+<div style="width: 671px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 72px"></div>
+	</div>
+</div>
+
+<div style="width: 674px">
+	<div class="contain rtl">
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 73px"></div>
+	</div>
+</div>
+
+<div style="width: 673px">
+	<div class="contain rtl">
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 73px"></div>
+	</div>
+</div>
+
+<div style="width: 672px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 73px"></div>
+	</div>
+</div>
+
+<div style="width: 675px">
+	<div class="contain rtl">
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 74px"></div>
+	</div>
+</div>
+
+<div style="width: 674px">
+	<div class="contain rtl">
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 74px"></div>
+	</div>
+</div>
+
+<div style="width: 673px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<!-- margins showing up in the wrong places? -->
+		<div class="side caption" style="margin-left: 100px"></div
+		><div class="side t" style="margin-left: 74px"></div>
+	</div>
+</div>
+
+<div style="width: 673px">
+	<div class="contain rtl">
+		<div class="side t" style="margin-left: 101px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 672px">
+	<div class="contain rtl">
+		<div class="side t" style="margin-left: 100px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 671px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="side t" style="margin-left: 99px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 674px">
+	<div class="contain rtl">
+		<div class="side t" style="margin-left: 101px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 673px">
+	<div class="contain rtl">
+		<div class="side t" style="margin-left: 100px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 672px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="side t" style="margin-left: 99px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 675px">
+	<div class="contain rtl">
+		<div class="side t" style="margin-left: 101px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 674px">
+	<div class="contain rtl">
+		<div class="side t" style="margin-left: 100px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+<div style="width: 673px">
+	<div class="contain rtl">
+		<div class="pushed"></div>
+		<div class="side t" style="margin-left: 99px"></div
+		><div class="side caption" style="margin-left: 100px"></div>
+	</div>
+</div>
+
+</body>
+</html>

layout/reftests/bugs/427129-table.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Reftest, bug 427129</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	html, body { margin: 0; }
+
+	.contain {
+		background: aqua; color: black;
+		height: 10px; margin: 2px 50px;
+		padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
+	}
+
+	.fl, .fr { height: 5px; }
+	.fl { float: left; width: 56px; }
+	.fr { float: right; width: 73px; }
+
+	/* tables default to border-box sizing */
+	.t { background: blue; height: 5px; width: 100px; border-spacing: 0;
+	     border-left: 1px solid blue; padding-left: 2px;
+	     padding-right: 4px; border-right: 8px solid blue; }
+	.t td { padding: 0; }
+
+	</style>
+</head>
+<body>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: 30px"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: 56px"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: 73px"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: 100px"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: auto"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: auto; margin-right: 30px"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: auto; margin-right: 56px"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: auto; margin-right: 73px"><tr><td></td></tr></table>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="fr"></div>
+	<table class="t" style="margin-left: auto; margin-right: 100px"><tr><td></td></tr></table>
+</div>
+
+<!-- Remember that the extra end-edge margin gets ignored -->
+<div style="width: 300px">
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="width: 71px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px; width: 71px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="width: 72px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px; width: 72px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px 0 56px; width: 71px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px 0 57px; width: 71px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 73px 0 15px; width: 71px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 74px 0 15px; width: 71px"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="width: 35.5%"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px; width: 35.5%"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="width: 36.5%"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px; width: 36.5%"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px 0 56px; width: 35.5%"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 15px 0 57px; width: 35.5%"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 73px 0 15px; width: 35.5%"><tr><td></td></tr></table>
+	</div>
+
+	<div class="contain">
+		<div class="fl"></div>
+		<div class="fr"></div>
+		<table class="t" style="margin: 0 74px 0 15px; width: 35.5%"><tr><td></td></tr></table>
+	</div>
+</div>
+
+</body>
+</html>

layout/reftests/bugs/reftest.list

@@ -798,4 +798,8 @@ fails-if(MOZ_WIDGET_TOOLKIT=="gtk2") == 424074-1-ref2.xul 424074-1-ref3.xul
 == 425972-2.html 425972-2-ref.html
 != 425972-1.html 425972-2.html
 != 427017-1.xhtml about:blank    # crash test (needs reftest-print)
+== 427129-scrollframe.html 427129-ref.html
+== 427129-table.html 427129-ref.html
+== 427129-image.html 427129-ref.html
+== 427129-table-caption.html 427129-table-caption-ref.html
 == 427370-1.html 427370-1-ref.html