Stop using -moz-float-edge for list items, but offset the bullet position in the presence of floats. b=413840 (and numerous others) r+sr=roc a=blocking1.9+
authordbaron@dbaron.org
Sun, 10 Feb 2008 13:49:24 -0800
changeset 11520 ece16c841548ab249b27612d5f6768c26d4cc9f4
parent 11519 af65b8fe68db50f540ea2a15ee8c0a88122f0e73
child 11521 8d77803bc2f68dd0fc2eda321f0bf6311e8bd508
push idunknown
push userunknown
push dateunknown
reviewersblocking1
bugs413840
milestone1.9b4pre
Stop using -moz-float-edge for list items, but offset the bullet position in the presence of floats. b=413840 (and numerous others) r+sr=roc a=blocking1.9+
layout/generic/nsBlockFrame.cpp
layout/generic/nsBlockFrame.h
layout/generic/nsBlockReflowState.h
layout/reftests/bugs/413840-background-unchanged-ref.html
layout/reftests/bugs/413840-background-unchanged.html
layout/reftests/bugs/413840-bullet-first-line-ref.html
layout/reftests/bugs/413840-bullet-first-line.html
layout/reftests/bugs/413840-ltr-offsets-ref.html
layout/reftests/bugs/413840-ltr-offsets.html
layout/reftests/bugs/413840-pushed-line-bullet-ref.html
layout/reftests/bugs/413840-pushed-line-bullet.html
layout/reftests/bugs/413840-rtl-offsets-ref.html
layout/reftests/bugs/413840-rtl-offsets.html
layout/reftests/bugs/reftest.list
layout/style/html.css
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@@ -1061,23 +1061,28 @@ nsBlockFrame::Reflow(nsPresContext*     
   // participates in the height calculation of the list-item box's
   // first line box.
   //
   // There are exactly two places a bullet can be placed: near the
   // first or second line. It's only placed on the second line in a
   // rare case: an empty first line followed by a second line that
   // contains a block (example: <LI>\n<P>... ). This is where
   // the second case can happen.
-  if (mBullet && HaveOutsideBullet() &&
-      (mLines.empty() ||
-       mLines.front()->IsBlock() ||
-       0 == mLines.front()->mBounds.height)) {
+  if (mBullet && HaveOutsideBullet() && !mLines.empty() &&
+      (mLines.front()->IsBlock() ||
+       (0 == mLines.front()->mBounds.height &&
+        mLines.front() != mLines.back() &&
+        mLines.begin().next()->IsBlock()))) {
     // Reflow the bullet
     nsHTMLReflowMetrics metrics;
-    ReflowBullet(state, metrics);
+    // FIXME: aReflowState.mComputedBorderPadding.top isn't even the
+    // right place -- we really want the top of the line whose baseline
+    // we're using (or, actually, the entire line, once we fix bug
+    // 25888)
+    ReflowBullet(state, metrics, aReflowState.mComputedBorderPadding.top);
 
     nscoord baseline;
     if (nsLayoutUtils::GetFirstLineBaseline(this, &baseline)) {
       // We have some lines to align the bullet with.  
 
       // Doing the alignment using the baseline will also cater for
       // bullets that are placed next to a child block (bug 92896)
     
@@ -2184,17 +2189,18 @@ nsBlockFrame::ReflowDirtyLines(nsBlockRe
     if (NS_FRAME_IS_NOT_COMPLETE(aState.mReflowStatus)) {
       aState.mReflowStatus |= NS_FRAME_REFLOW_NEXTINFLOW;
     } //XXXfr shouldn't set this flag when nextinflow has no lines
   }
 
   // Handle an odd-ball case: a list-item with no lines
   if (mBullet && HaveOutsideBullet() && mLines.empty()) {
     nsHTMLReflowMetrics metrics;
-    ReflowBullet(aState, metrics);
+    ReflowBullet(aState, metrics,
+                 aState.mReflowState.mComputedBorderPadding.top);
 
     // There are no lines so we have to fake up some y motion so that
     // we end up with *some* height.
     aState.mY += metrics.height;
   }
 
   if (foundAnyClears) {
     AddStateBits(NS_BLOCK_HAS_CLEAR_CHILDREN);
@@ -3950,28 +3956,26 @@ nsBlockFrame::PlaceLine(nsBlockReflowSta
   // Vertically align the frames on this line.
   //
   // According to the CSS2 spec, section 12.6.1, the "marker" box
   // participates in the height calculation of the list-item box's
   // first line box.
   //
   // There are exactly two places a bullet can be placed: near the
   // first or second line. It's only placed on the second line in a
-  // rare case: an empty first line followed by a second line that
-  // contains a block (example: <LI>\n<P>... ).
-  //
-  // For this code, only the first case is possible because this
-  // method is used for placing a line of inline frames. If the rare
-  // case is happening then the worst that will happen is that the
-  // bullet frame will be reflowed twice.
+  // rare case: when the first line is empty.
   PRBool addedBullet = PR_FALSE;
-  if (mBullet && HaveOutsideBullet() && (aLine == mLines.front()) &&
-      (!aLineLayout.IsZeroHeight() || (aLine == mLines.back()))) {
+  if (mBullet && HaveOutsideBullet() &&
+      ((aLine == mLines.front() &&
+        (!aLineLayout.IsZeroHeight() || (aLine == mLines.back()))) ||
+       (mLines.front() != mLines.back() &&
+        0 == mLines.front()->mBounds.height &&
+        aLine == mLines.begin().next()))) {
     nsHTMLReflowMetrics metrics;
-    ReflowBullet(aState, metrics);
+    ReflowBullet(aState, metrics, aState.mY);
     aLineLayout.AddBulletFrame(mBullet, metrics);
     addedBullet = PR_TRUE;
   }
   aLineLayout.VerticalAlignLine();
 
 #ifdef DEBUG
   {
     static nscoord lastHeight = 0;
@@ -6537,17 +6541,18 @@ nsBlockFrame::RenumberListsFor(nsPresCon
       }
     }
   }
   return kidRenumberedABullet;
 }
 
 void
 nsBlockFrame::ReflowBullet(nsBlockReflowState& aState,
-                           nsHTMLReflowMetrics& aMetrics)
+                           nsHTMLReflowMetrics& aMetrics,
+                           nscoord aLineTop)
 {
   const nsHTMLReflowState &rs = aState.mReflowState;
 
   // Reflow the bullet now
   nsSize availSize;
   // Make up a width since it doesn't really matter (XXX).
   availSize.width = rs.ComputedWidth();
   availSize.height = NS_UNCONSTRAINEDSIZE;
@@ -6556,29 +6561,49 @@ nsBlockFrame::ReflowBullet(nsBlockReflow
   // XXXwaterson Should this look just like the logic in
   // nsBlockReflowContext::ReflowBlock and nsLineLayout::ReflowFrame?
   nsHTMLReflowState reflowState(aState.mPresContext, rs,
                                 mBullet, availSize);
   nsReflowStatus  status;
   mBullet->WillReflow(aState.mPresContext);
   mBullet->Reflow(aState.mPresContext, aMetrics, reflowState, status);
 
-  // Place the bullet now; use its right margin to distance it
-  // from the rest of the frames in the line
-  nscoord x = 
-#ifdef IBMBIDI
-           (NS_STYLE_DIRECTION_RTL == GetStyleVisibility()->mDirection)
-             // According to the CSS2 spec, section 12.6.1, outside marker box
-             // is distanced from the associated principal box's border edge.
-             // |rs.availableWidth| reflects exactly a border edge: it includes
-             // border, padding, and content area, without margins.
-             ? rs.ComputedWidth() + rs.mComputedBorderPadding.LeftRight() +
-               reflowState.mComputedMargin.left :
-#endif
-             - reflowState.mComputedMargin.right - aMetrics.width;
+  // Place the bullet now.  We want to place the bullet relative to the
+  // border-box of the associated box (using the right/left margin of
+  // the bullet frame as separation).  However, if a line box would be
+  // displaced by floats, we want to displace it by the same amount.
+  // That is, we act as though the edge of the floats is the
+  // content-edge of the block, and place the bullet at a position
+  // offset from there by the block's padding, the block's border, and
+  // the bullet frame's margin.
+  // FIXME (bug 25888): need to check the entire region that the first
+  // line overlaps, not just the top pixel.
+  nscoord x;
+  aState.GetAvailableSpace(aLineTop, PR_FALSE);
+  if (rs.mStyleVisibility->mDirection == NS_STYLE_DIRECTION_LTR) {
+    // Note: mAvailSpaceRect.x is relative to the content box and never
+    // less than zero.  Converting to frame coordinates and subtracting
+    // the padding and border cancel each other out, and the PR_MAX()
+    // with 0 (or with the left border+padding) is even implied in the
+    // right place.
+    x = aState.mAvailSpaceRect.x
+        - reflowState.mComputedMargin.right - aMetrics.width;
+  } else {
+    // The XMost() of the available space and the computed width both
+    // give us offsets from the left content edge.  Then we add the left
+    // border/padding to get into frame coordinates, and the right
+    // border/padding and the bullet's margin to offset the position.
+    x = PR_MIN(rs.ComputedWidth(), aState.mAvailSpaceRect.XMost())
+        + rs.mComputedBorderPadding.LeftRight()
+        + reflowState.mComputedMargin.left;
+  }
+
+  // FIXME: come up with rules for when mAvailSpaceRect is valid so we
+  // don't need to do this.
+  aState.GetAvailableSpace();
 
   // Approximate the bullets position; vertical alignment will provide
   // the final vertical location.
   const nsMargin& bp = aState.BorderPadding();
   nscoord y = bp.top;
   mBullet->SetRect(nsRect(x, y, aMetrics.width, aMetrics.height));
   mBullet->DidReflow(aState.mPresContext, &aState.mReflowState, NS_FRAME_REFLOW_FINISHED);
 }
--- a/layout/generic/nsBlockFrame.h
+++ b/layout/generic/nsBlockFrame.h
@@ -575,17 +575,18 @@ protected:
                               PRInt32* aOrdinal,
                               PRInt32 aDepth);
 
   PRBool RenumberListsFor(nsPresContext* aPresContext, nsIFrame* aKid, PRInt32* aOrdinal, PRInt32 aDepth);
 
   static PRBool FrameStartsCounterScope(nsIFrame* aFrame);
 
   void ReflowBullet(nsBlockReflowState& aState,
-                    nsHTMLReflowMetrics& aMetrics);
+                    nsHTMLReflowMetrics& aMetrics,
+                    nscoord aLineTop);
 
   //----------------------------------------
 
 public:
   nsLineList* GetOverflowLines() const;
 protected:
   nsLineList* RemoveOverflowLines();
   nsresult SetOverflowLines(nsLineList* aOverflowLines);
--- a/layout/generic/nsBlockReflowState.h
+++ b/layout/generic/nsBlockReflowState.h
@@ -220,16 +220,17 @@ public:
   // all lines before it are empty and do not have clearance. This line is
   // always before the current line.
   nsLineList::iterator mLineAdjacentToTop;
 
   // The current Y coordinate in the block
   nscoord mY;
 
   // The available space within the current band.
+  // (relative to the *content*-rect of the block)
   nsRect mAvailSpaceRect;
 
   // The combined area of all floats placed so far
   nsRect mFloatCombinedArea;
 
   nsFloatCacheFreeList mFloatCacheFreeList;
 
   // Previous child. This is used when pulling up a frame to update
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-background-unchanged-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test case for list items flowing around floats</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">
+
+	ul, ol, li { margin-top: 0; margin-bottom: 0; }
+	li { height: 2em; background: aqua; color: black; }
+
+	</style>
+</head>
+<body>
+
+<div style="background: aqua; color: black; margin-left: 40px">
+<div style="margin-left: -40px">
+<div style="margin-left: 60px"><ol start="1"><li>one</li></ol></div>
+<div style="margin-left: 60px"><ol start="2"><li>two</li></ol></div>
+<ol start="3"><li>three</li></ol>
+<ol start="4"><li>four</li></ol>
+</div>
+</div>
+
+<div style="background: aqua; color: black; margin-left: 40px">
+<div style="margin-left: -40px">
+<div style="margin-left: 60px"><ul><li>one</li></ul></div>
+<div style="margin-left: 60px"><ul><li>two</li></ul></div>
+<ul><li>three</li></ul>
+<ul><li>four</li></ul>
+</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-background-unchanged.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test case for list items flowing around floats</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">
+
+	div { float: left; height: 3em; width: 100px; }
+
+	ul, ol, li { margin-top: 0; margin-bottom: 0; }
+	li { height: 2em; background: aqua; color: black; }
+
+	</style>
+</head>
+<body>
+
+<div></div>
+
+<ol>
+  <li>one</li>
+  <li>two</li>
+  <li>three</li>
+  <li>four</li>
+</ol>
+
+<div></div>
+
+<ul>
+  <li>one</li>
+  <li>two</li>
+  <li>three</li>
+  <li>four</li>
+</ul>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-bullet-first-line-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test that bullet is on the first line!</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">
+
+	</style>
+</head>
+<body>
+
+<ul>
+    <li>first line</li>
+    <li style="list-style-type:none">second line</li>
+</ul>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-bullet-first-line.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test that bullet is on the first line!</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">
+
+	</style>
+</head>
+<body>
+
+<ul>
+    <li>first line<br>second line</li>
+</ul>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-ltr-offsets-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test case for list items flowing around floats</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<meta http-equiv="Content-Script-Type" content="text/javascript">
+	<style type="text/css">
+
+	ul, ol, li { margin: 0; padding: 0; }
+
+	</style>
+</head>
+<body>
+
+<div style="margin-left: 100px"><ul><li><div style="margin-left: 0px">item</li></ul></div>
+<div style="margin-left: 100px"><ul><li><div style="margin-left: 0px">item</li></ul></div>
+<div style="margin-left: 94px"><ul><li><div style="margin-left: 6px">item</li></ul></div>
+<div style="margin-left: 150px"><ul><li><div style="margin-left: 6px">item</li></ul></div>
+<div style="margin-left: 40px"><ul><li><div style="margin-left: 154px">item</li></ul></div>
+<div style="margin-left: 40px"><ul><li><div style="margin-left: 152px">item</li></ul></div>
+<div style="margin-left: 94px"><ol start="1"><li><div style="margin-left: 6px">item</li></ol></div>
+<div style="margin-left: 150px"><ol start="2"><li><div style="margin-left: 6px">item</li></ol></div>
+<div style="margin-left: 40px"><ol start="3"><li><div style="margin-left: 154px">item</li></ol></div>
+<div style="margin-left: 40px"><ol start="4"><li><div style="margin-left: 152px">item</li></ol></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-ltr-offsets.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test case for list items flowing around floats</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<meta http-equiv="Content-Script-Type" content="text/javascript">
+	<style type="text/css">
+
+	#float { float: left; width: 100px; height: 20em; }
+
+	ul, ol, li { margin: 0; padding: 0; }
+
+	</style>
+</head>
+<body>
+
+<div id="float"></div>
+
+<ul><li>item</li></ul>
+<ul style="margin-left: 1px; border-left: 2px solid transparent; padding-left: 4px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;"><li>item</li></ul>
+<ul>
+<li style="margin-left: 1px; border-left: 2px solid transparent; padding-left: 4px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+<li style="margin-left: 150px; border-left: 2px solid transparent; padding-left: 4px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+<li style="margin-left: 40px; border-left: 150px solid transparent; padding-left: 4px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+<li style="margin-left: 40px; border-left: 2px solid transparent; padding-left: 150px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+</ul>
+<ol>
+<li style="margin-left: 1px; border-left: 2px solid transparent; padding-left: 4px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+<li style="margin-left: 150px; border-left: 2px solid transparent; padding-left: 4px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+<li style="margin-left: 40px; border-left: 150px solid transparent; padding-left: 4px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+<li style="margin-left: 40px; border-left: 2px solid transparent; padding-left: 150px; padding-right: 8px; border-right: 16px solid transparent; margin-right: 32px;">item</li>
+</ol>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-pushed-line-bullet-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test for bullet lining up with element pushed past float</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; }
+	</style>
+</head>
+<body>
+
+<div style="width: 200px; display:list-item; margin-left: 50px; margin-top: 50px">
+  <select size="2">
+    <option>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
+    <option>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
+  </select>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-pushed-line-bullet.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test for bullet lining up with element pushed past float</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; }
+	</style>
+</head>
+<body>
+
+<div style="float: left; width: 150px; height: 50px"></div>
+<div style="width: 200px; display:list-item; margin-left: 50px">
+  <select size="2">
+    <option>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
+    <option>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
+  </select>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-rtl-offsets-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test case for list items flowing around floats</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<meta http-equiv="Content-Script-Type" content="text/javascript">
+	<style type="text/css">
+
+	body { direction: rtl; }
+	ul, ol, li { margin: 0; padding: 0; }
+
+	</style>
+</head>
+<body>
+
+<div style="margin-right: 100px"><ul><li><div style="margin-right: 0px">item</li></ul></div>
+<div style="margin-right: 100px"><ul><li><div style="margin-right: 0px">item</li></ul></div>
+<div style="margin-right: 94px"><ul><li><div style="margin-right: 6px">item</li></ul></div>
+<div style="margin-right: 150px"><ul><li><div style="margin-right: 6px">item</li></ul></div>
+<div style="margin-right: 40px"><ul><li><div style="margin-right: 154px">item</li></ul></div>
+<div style="margin-right: 40px"><ul><li><div style="margin-right: 152px">item</li></ul></div>
+<div style="margin-right: 94px"><ol start="1"><li><div style="margin-right: 6px">item</li></ol></div>
+<div style="margin-right: 150px"><ol start="2"><li><div style="margin-right: 6px">item</li></ol></div>
+<div style="margin-right: 40px"><ol start="3"><li><div style="margin-right: 154px">item</li></ol></div>
+<div style="margin-right: 40px"><ol start="4"><li><div style="margin-right: 152px">item</li></ol></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/413840-rtl-offsets.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Test case for list items flowing around floats</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<meta http-equiv="Content-Script-Type" content="text/javascript">
+	<style type="text/css">
+
+	body { direction: rtl; }
+	#float { float: right; width: 100px; height: 20em; }
+
+	ul, ol, li { margin: 0; padding: 0; }
+
+	</style>
+</head>
+<body>
+
+<div id="float"></div>
+
+<ul><li>item</li></ul>
+<ul style="margin-right: 1px; border-right: 2px solid transparent; padding-right: 4px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;"><li>item</li></ul>
+<ul>
+<li style="margin-right: 1px; border-right: 2px solid transparent; padding-right: 4px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+<li style="margin-right: 150px; border-right: 2px solid transparent; padding-right: 4px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+<li style="margin-right: 40px; border-right: 150px solid transparent; padding-right: 4px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+<li style="margin-right: 40px; border-right: 2px solid transparent; padding-right: 150px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+</ul>
+<ol>
+<li style="margin-right: 1px; border-right: 2px solid transparent; padding-right: 4px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+<li style="margin-right: 150px; border-right: 2px solid transparent; padding-right: 4px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+<li style="margin-right: 40px; border-right: 150px solid transparent; padding-right: 4px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+<li style="margin-right: 40px; border-right: 2px solid transparent; padding-right: 150px; padding-left: 8px; border-left: 16px solid transparent; margin-left: 32px;">item</li>
+</ol>
+
+</body>
+</html>
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -686,10 +686,15 @@ random == 403134-1.html 403134-1-ref.htm
 == 412607-1a.html 412607-1-ref.html
 == 412607-1b.html 412607-1-ref.html
 == 412679-1.html 412679-1-ref.html
 == 412679-2.html 412679-2-ref.html
 == 411334-1.xml 411334-1-ref.xml
 == 411792-1.html 411792-1-ref.html
 == 413292-1.html 413292-1-ref.html
 == 413361-1.html 413361-1-ref.html
+== 413840-background-unchanged.html 413840-background-unchanged-ref.html
+== 413840-ltr-offsets.html 413840-ltr-offsets-ref.html
+== 413840-rtl-offsets.html 413840-rtl-offsets-ref.html
+== 413840-pushed-line-bullet.html 413840-pushed-line-bullet-ref.html
+== 413840-bullet-first-line.html 413840-bullet-first-line-ref.html
 == 414123.xhtml 414123-ref.xhtml
 == 416106-1.xhtml 416106-1-ref.xhtml
--- a/layout/style/html.css
+++ b/layout/style/html.css
@@ -336,17 +336,16 @@ ol {
   display: block;
   list-style-type: decimal;
   margin: 1em 0;
   -moz-padding-start: 40px;
 }
 
 li {
   display: list-item;
-  -moz-float-edge: margin-box;
 }
 
 /* nested lists have no top/bottom margins */
 ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
 ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
 dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
 menu ul, menu ol, menu dir, menu menu, menu dl,
 dl ul,   dl ol,   dl dir,   dl menu,   dl dl {