Implement CSS display types inline-block and inline-table. b=9458, 18217 r+sr=bzbarsky

layout/base/nsCSSFrameConstructor.cpp

@@ -2374,6 +2374,7 @@ IsTableRelated(PRUint8 aDisplay,
                PRBool  aIncludeSpecial) 
 {
   if ((aDisplay == NS_STYLE_DISPLAY_TABLE)              ||
+      (aDisplay == NS_STYLE_DISPLAY_INLINE_TABLE)       ||
       (aDisplay == NS_STYLE_DISPLAY_TABLE_HEADER_GROUP) ||
       (aDisplay == NS_STYLE_DISPLAY_TABLE_ROW_GROUP)    ||
       (aDisplay == NS_STYLE_DISPLAY_TABLE_FOOTER_GROUP) ||
@@ -2741,9 +2742,17 @@ nsCSSFrameConstructor::CreatePseudoTableFrame(PRInt32                  aNameSpac
   parentStyle = parentFrame->GetStyleContext(); 
   nsIContent* parentContent = parentFrame->GetContent();   
 
+  // Thankfully, the parent can't change display type without causing
+  // frame reconstruction, so this won't need to change.
+  nsIAtom *pseudoType;
+  if (parentStyle->GetStyleDisplay()->mDisplay == NS_STYLE_DISPLAY_INLINE)
+    pseudoType = nsCSSAnonBoxes::inlineTable;
+  else
+    pseudoType = nsCSSAnonBoxes::table;
+
   // create the SC for the inner table which will be the parent of the outer table's SC
   childStyle = mPresShell->StyleSet()->ResolvePseudoStyleFor(parentContent,
-                                                             nsCSSAnonBoxes::table,
+                                                             pseudoType,
                                                              parentStyle);
 
   nsPseudoFrameData& pseudoOuter = aState.mPseudoFrames.mTableOuter;
@@ -6385,6 +6394,7 @@ nsCSSFrameConstructor::ConstructFrameByDisplayType(nsFrameConstructorState& aSta
   // XXX Ignore tables for the time being
   if (aDisplay->IsBlockLevel() &&
       aDisplay->mDisplay != NS_STYLE_DISPLAY_TABLE &&
+      aDisplay->mDisplay != NS_STYLE_DISPLAY_INLINE_TABLE &&
       aDisplay->IsScrollableOverflow() &&
       !propagatedScrollToViewport) {
 
@@ -6549,6 +6559,7 @@ nsCSSFrameConstructor::ConstructFrameByDisplayType(nsFrameConstructorState& aSta
     // Use the 'display' property to choose a frame type
     switch (aDisplay->mDisplay) {
     case NS_STYLE_DISPLAY_TABLE:
+    case NS_STYLE_DISPLAY_INLINE_TABLE:
     {
       nsIFrame* innerTable;
       rv = ConstructTableFrame(aState, aContent, 
@@ -8641,7 +8652,7 @@ nsCSSFrameConstructor::NeedSpecialFrameReframe(nsIContent*     aParent1,
     nsRefPtr<nsStyleContext> styleContext;
     styleContext = ResolveStyleContext(aParentFrame, aChild);
     const nsStyleDisplay* display = styleContext->GetStyleDisplay();
-    childIsBlock = display->IsBlockLevel() || IsTableRelated(display->mDisplay, PR_TRUE);
+    childIsBlock = display->IsBlockLevel();
   }
   nsIFrame* prevParent; // parent of prev sibling
   nsIFrame* nextParent; // parent of next sibling

layout/generic/nsFrame.cpp

@@ -3774,6 +3774,7 @@ nsFrame::IsFrameTreeTooDeep(const nsHTMLReflowState& aReflowState,
   // Absolute positioning causes |display->mDisplay| to be set to block,
   // if needed.
   return display->mDisplay == NS_STYLE_DISPLAY_BLOCK || 
+         display->mDisplay == NS_STYLE_DISPLAY_INLINE_BLOCK || 
          display->mDisplay == NS_STYLE_DISPLAY_LIST_ITEM ||
          display->mDisplay == NS_STYLE_DISPLAY_TABLE_CELL;
 }

layout/generic/nsHTMLReflowState.cpp

@@ -403,6 +403,7 @@ nsHTMLReflowState::InitFrameType()
       break;
 
     case NS_STYLE_DISPLAY_INLINE:
+    case NS_STYLE_DISPLAY_INLINE_BLOCK:
     case NS_STYLE_DISPLAY_MARKER:
     case NS_STYLE_DISPLAY_INLINE_TABLE:
     case NS_STYLE_DISPLAY_INLINE_BOX:
@@ -1635,12 +1636,7 @@ nsHTMLReflowState::InitConstraints(nsPresContext* aPresContext,
                               aContainingBlockHeight);
     } else {
       PRBool isBlock =
-        NS_CSS_FRAME_TYPE_BLOCK == NS_FRAME_GET_TYPE(mFrameType) &&
+        NS_CSS_FRAME_TYPE_BLOCK == NS_FRAME_GET_TYPE(mFrameType);
-        // Hack to work around the fact that we have some tables that
-        // _should_ be inline-table but aren't
-        (frame->GetType() != nsGkAtoms::tableOuterFrame ||
-         !parentReflowState ||
-         NS_CSS_FRAME_TYPE_BLOCK == NS_FRAME_GET_TYPE(parentReflowState->mFrameType));
       nsSize size =
         frame->ComputeSize(rendContext,
                            nsSize(aContainingBlockWidth,

layout/generic/nsLineLayout.cpp

@@ -715,23 +715,8 @@ nsLineLayout::ReflowFrame(nsIFrame* aFrame,
 
   // Compute the available size for the frame. This available width
   // includes room for the side margins.
-  nsSize availSize;
-  if (NS_UNCONSTRAINEDSIZE == psd->mRightEdge) {
-    availSize.width = NS_UNCONSTRAINEDSIZE;
-  }
-  else {
-    availSize.width = psd->mRightEdge - psd->mX;
-    if (psd->mNoWrap) {
-      // Make up a width to use for reflowing into.  XXX what value to
-      // use? for tables, we want to limit it; for other elements
-      // (e.g. text) it can be unlimited...
-      availSize.width = psd->mReflowState->availableWidth;
-    }
-  }
   // For now, set the available height to unconstrained always.
-  // XXX inline blocks and tables won't be able to break across pages/
+  nsSize availSize(mBlockReflowState->ComputedWidth(), NS_UNCONSTRAINEDSIZE);
-  // columns, but it's not clear how to handle that anyway
-  availSize.height = NS_UNCONSTRAINEDSIZE;
 
   // Setup reflow state for reflowing the frame
   nsHTMLReflowState reflowState(mPresContext, *psd->mReflowState,
@@ -742,6 +727,14 @@ nsLineLayout::ReflowFrame(nsIFrame* aFrame,
   mTextJustificationNumSpaces = 0;
   mTextJustificationNumLetters = 0;
 
+  // Inline-ish and text-ish things don't compute their width;
+  // everything else does.  We need to give them an available width that
+  // reflects the space left on the line.
+  NS_ASSERTION(psd->mRightEdge != NS_UNCONSTRAINEDSIZE,
+               "shouldn't have unconstrained widths anymore");
+  if (reflowState.ComputedWidth() == NS_UNCONSTRAINEDSIZE)
+    reflowState.availableWidth = psd->mRightEdge - psd->mX;
+
   // Stash copies of some of the computed state away for later
   // (vertical alignment, for example)
   pfd->mFrame = aFrame;
@@ -1051,10 +1044,13 @@ nsLineLayout::ApplyStartMargin(PerFrameData* pfd,
   else {
     pfd->mBounds.x += ltr ? pfd->mMargin.left : pfd->mMargin.right;
 
-    if (NS_UNCONSTRAINEDSIZE != aReflowState.availableWidth){
+    NS_ASSERTION(NS_UNCONSTRAINEDSIZE != aReflowState.availableWidth,
-      // Adjust available width to account for the left margin. The
+                 "shouldn't have unconstrained widths anymore");
-      // right margin will be accounted for when we finish flowing the
+    if (NS_UNCONSTRAINEDSIZE == aReflowState.ComputedWidth()) {
-      // frame.
+      // For inline-ish and text-ish things (which don't compute widths
+      // in the reflow state), adjust available width to account for the
+      // left margin. The right margin will be accounted for when we
+      // finish flowing the frame.
       aReflowState.availableWidth -= ltr ? pfd->mMargin.left : pfd->mMargin.right;
     }
   }

layout/reftests/bugs/18217-basic-1-ref.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+</head>
+<body>
+<p>abc</p>
+</body>
+</html>

layout/reftests/bugs/18217-basic-1.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span { display: inline-table; }
+</style>
+</head>
+<body>
+<p>a<span>b</span>c</p>
+</body>
+</html>

layout/reftests/bugs/18217-basic-2-ref.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+</head>
+<body>
+<p>abcde</p>
+</body>
+</html>

layout/reftests/bugs/18217-basic-2a.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span { display: inline-table; }
+span > span { display: block; visibility: hidden; }
+</style>
+</head>
+<body>
+<p>a<span>bcd<span>x</span></span>e</p>
+</body>
+</html>

layout/reftests/bugs/18217-basic-2b.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span > span { display: table-cell; }
+span > span > span { display: block; visibility: hidden; }
+</style>
+</head>
+<body>
+<p><span>a<span>bcd<span>x</span></span>e</span></p>
+</body>
+</html>

layout/reftests/bugs/18217-height-1-ref.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { display: table; width: 10em; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>Test<br>Test</div>
+</body>
+</html>

layout/reftests/bugs/18217-height-1.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { display: inline-table; width: 10em; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>Test<br>Test</div>
+</body>
+</html>

layout/reftests/bugs/18217-height-2-ref.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { display: table; height: 5em; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>test</div>
+</body>
+</html>

layout/reftests/bugs/18217-height-2.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { display: inline-table; height: 5em; vertical-align: baseline; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>test</div>
+</body>
+</html>

layout/reftests/bugs/18217-valign-1-ref.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span#table { display: inline-table; }
+span#rowgroup { display: table-row-group; }
+span#row { display: table-row; }
+span#cell { display: table-cell; }
+span#table, span#rowgroup, span#row, span#cell {
+  border: 4px solid white;
+  margin: 3px 0;
+  border-width: 4px 0;
+  padding: 9px 0;
+  border-spacing: 0 5px;
+}
+span#block { display: block; visibility: hidden; }
+</style>
+</head>
+<body>
+<table border><tr><td>
+<p><span id="table"><span id="rowgroup"><span id="row"><span id="cell">abcde<span id="block">x</span></span></span></span></span></p>
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/18217-valign-1.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span#table { display: inline-table; }
+span#rowgroup { display: table-row-group; }
+span#row { display: table-row; }
+span#cell { display: table-cell; }
+span#table, span#rowgroup, span#row, span#cell {
+  border: 4px solid white;
+  margin: 3px 0;
+  border-width: 4px 0;
+  padding: 9px 0;
+  border-spacing: 0 5px;
+}
+span#block { display: block; visibility: hidden; }
+</style>
+</head>
+<body>
+<table border><tr><td>
+<p>a<span id="table"><span id="rowgroup"><span id="row"><span id="cell">bcd<span id="block">x</span></span></span></span></span>e</p>
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/18217-width-1-ref.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: table; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>x<div>This is some text that is wider than 10em but has no words wider than 10em.</div>z</div>
+</body>
+</html>

layout/reftests/bugs/18217-width-1a.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-table; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>x <div>This is some text that is wider than 10em but has no words wider than 10em.</div> z</div>
+</body>
+</html>

layout/reftests/bugs/18217-width-1b.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-table; background: green; color: white; width: 10em; }
+</style>
+</head>
+<body>
+<div>x <div>This is some text that is wider than 10em but has no words wider than 10em.</div> z</div>
+</body>
+</html>

layout/reftests/bugs/18217-width-2-ref.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: table; background: green; color: white; width: 20em; }
+</style>
+</head>
+<body>
+<div>x<div>y</div>z</div>
+</body>
+</html>

layout/reftests/bugs/18217-width-2a.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-table; background: green; color: white; }
+body > div > div > div { width: 20em; }
+</style>
+</head>
+<body>
+<div>x<div><div>y</div></div>z</div>
+</body>
+</html>

layout/reftests/bugs/18217-width-2b.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-table; background: green; color: white; width: 20em; }
+body > div > div > div { width: 20em; }
+</style>
+</head>
+<body>
+<div>x<div><div>y</div></div>z</div>
+</body>
+</html>

layout/reftests/bugs/18217-zorder-1.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { width: 2em; height: 2em; }
+span { display:inline-table; vertical-align: top; width: 2em; height: 2em; background: green; }
+div#after { margin-top:-2em; background: red; }
+</style>
+</head>
+<body>
+<div><span>&nbsp;</span></div>
+<div id="after">&nbsp;</div>
+</body>
+</html>

layout/reftests/bugs/18217-zorder-2.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { width: 2em; height: 2em; }
+span { display:inline-table; vertical-align: top; width: 2em; height: 2em; }
+span span { display: block; background: green; }
+div#after { margin-top: -2em; background: red; }
+</style>
+</head>
+<body>
+<div><span><span>&nbsp;</span></span></div>
+<div id="after">&nbsp;</div>
+</body>
+</html>

layout/reftests/bugs/18217-zorder-3.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { height: 1em; }
+span { display:inline-table; vertical-align: top; height: 1em; background: red; color: red; }
+div#after { margin-top:-1em; }
+div#after span { display: inline; background: green; color: green; }
+</style>
+</head>
+<body>
+<div><span>X</span></div>
+<div id="after"><span>X</span></div>
+</body>
+</html>

layout/reftests/bugs/18217-zorder-4.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span { display:inline-table; vertical-align: top; background: green; color: green; }
+div#before { height: 1em; margin-bottom:-1em; }
+div#before span { display: inline; background: red; color: red; }
+</style>
+</head>
+<body>
+<div id="before"><span>X</span></div>
+<div><span>X</span></div>
+</body>
+</html>

layout/reftests/bugs/18217-zorder-5.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span { display:inline-table; vertical-align: top; }
+span span { display: block; background: green; color: green; }
+div#before { height: 1em; margin-bottom:-1em; }
+div#before span { display: inline; background: red; color: red; }
+</style>
+</head>
+<body>
+<div id="before"><span>X</span></div>
+<div><span><span>X</span></span></div>
+</body>
+</html>

layout/reftests/bugs/18217-zorder-ref-inline.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+span { background: green; color: green; }
+</style>
+</head>
+<body>
+<div><span>X</span></div>
+</body>
+</html>

layout/reftests/bugs/18217-zorder-ref.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-table (bug 18217)</title>
+<style type="text/css">
+div { display:table; width: 2em; height: 2em; background: green; }
+</style>
+</head>
+<body>
+<div>&nbsp;</div>
+</body>
+</html>

layout/reftests/bugs/367504-float-1-ref.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase, bug 367504 -- inline block as margin root</title>
+<style type="text/css">
+
+span#ib { display: inline-block; vertical-align: text-bottom; }
+
+span#ib span { display:block }
+
+</style>
+</head>
+<body>
+<table border><tr><td>
+
+<p>x<span id="ib"><span>test</span></span>x</p>
+
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/367504-float-1.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase, bug 367504 -- inline block as margin root</title>
+<style type="text/css">
+
+span#ib { display: inline-block; vertical-align: text-bottom; }
+
+span#ib span { float:left }
+
+</style>
+</head>
+<body>
+<table border><tr><td>
+
+<p>x<span id="ib"><span>test</span></span>x</p>
+
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/367504-margin-1-ref.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase, bug 367504 -- inline block as margin root</title>
+<style type="text/css">
+
+span#ib { display: inline-block; vertical-align: text-bottom; }
+
+span#ib span { display: block; padding: 7px; }
+
+</style>
+</head>
+<body>
+<table border><tr><td>
+
+<p>x<span id="ib"><span>test</span></span>x</p>
+
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/367504-margin-1.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase, bug 367504 -- inline block as margin root</title>
+<style type="text/css">
+
+span#ib { display: inline-block; vertical-align: text-bottom; margin: 4px; }
+
+span#ib span { display: block; margin: 3px; }
+
+</style>
+</head>
+<body>
+<table border><tr><td>
+
+<p>x<span id="ib"><span>test</span></span>x</p>
+
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/9458-basic-1-ref.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+</head>
+<body>
+<p>abc</p>
+</body>
+</html>

layout/reftests/bugs/9458-basic-1.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+span { display: inline-block; }
+</style>
+</head>
+<body>
+<p>a<span>b</span>c</p>
+</body>
+</html>

layout/reftests/bugs/9458-height-1-ref.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { width: 10em; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>Test<br>Test</div>
+</body>
+</html>

layout/reftests/bugs/9458-height-1.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { display: inline-block; width: 10em; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>Test<br>Test</div>
+</body>
+</html>

layout/reftests/bugs/9458-height-2-ref.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { height: 5em; width:10em; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>test</div>
+</body>
+</html>

layout/reftests/bugs/9458-height-2.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { display: inline-block; height: 5em; width:10em; vertical-align: baseline; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>test</div>
+</body>
+</html>

layout/reftests/bugs/9458-valign-1-ref.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+</head>
+<body>
+<table border height="200"><tr><td valign="bottom">
+<p>abcde</p>
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/9458-valign-1.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+span { display: inline-block; }
+span > span { display: block; visibility: hidden; }
+</style>
+</head>
+<body>
+<table border height="200"><tr><td valign="bottom">
+<p>a<span><span>x</span>bcd</span>e</p>
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/9458-valign-2-ref.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body { background: white; color: black; }
+span { display: inline-block; margin: 3px 0; border: 4px solid white; border-width: 4px 0; padding: 9px 0; }
+span > span { display: block; visibility: hidden; }
+</style>
+</head>
+<body>
+<table border><tr><td>
+<p><span><span>x</span>abcde</span></p>
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/9458-valign-2.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body { background: white; color: black; }
+span { display: inline-block; margin: 3px 0; border: 4px solid white; border-width: 4px 0; padding: 9px 0; }
+span > span { display: block; visibility: hidden; }
+</style>
+</head>
+<body>
+<table border><tr><td>
+<p>a<span><span>x</span>bcd</span>e</p>
+</td></tr></table>
+</body>
+</html>

layout/reftests/bugs/9458-width-1-ref.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { background: green; color: white; }
+</style>
+</head>
+<body>
+<div>x<div>This is some text that is wider than 10em but has no words wider than 10em.</div>z</div>
+</body>
+</html>

layout/reftests/bugs/9458-width-1a.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-block; background: green; color: white; }
+</style>
+</head>
+<body>
+<div>x <div>This is some text that is wider than 10em but has no words wider than 10em.</div> z</div>
+</body>
+</html>

layout/reftests/bugs/9458-width-1b.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-block; background: green; color: white; width: 10em; }
+</style>
+</head>
+<body>
+<div>x <div>This is some text that is wider than 10em but has no words wider than 10em.</div> z</div>
+</body>
+</html>

layout/reftests/bugs/9458-width-2-ref.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { background: green; color: white; width: 20em; }
+</style>
+</head>
+<body>
+<div>x<div>y</div>z</div>
+</body>
+</html>

layout/reftests/bugs/9458-width-2a.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-block; background: green; color: white; }
+body > div > div > div { width: 20em; }
+</style>
+</head>
+<body>
+<div>x<div><div>y</div></div>z</div>
+</body>
+</html>

layout/reftests/bugs/9458-width-2b.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+body > div { width: 10em; }
+body > div > div { display: inline-block; background: green; color: white; width: 20em; }
+body > div > div > div { width: 20em; }
+</style>
+</head>
+<body>
+<div>x<div><div>y</div></div>z</div>
+</body>
+</html>

layout/reftests/bugs/9458-zorder-1.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { width: 2em; height: 1em; }
+span { display:inline-block; vertical-align: top; width: 2em; height: 1em; background: green; }
+div#after { margin-top:-1em; background: red; }
+</style>
+</head>
+<body>
+<div><span>&nbsp;</span></div>
+<div id="after">&nbsp;</div>
+</body>
+</html>

layout/reftests/bugs/9458-zorder-2.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { width: 2em; height: 1em; }
+span { display:inline-block; vertical-align: top; width: 2em; height: 1em; }
+span span { display: block; background: green; }
+div#after { margin-top: -1em; background: red; }
+</style>
+</head>
+<body>
+<div><span><span>&nbsp;</span></span></div>
+<div id="after">&nbsp;</div>
+</body>
+</html>

layout/reftests/bugs/9458-zorder-3.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { height: 1em; }
+span { display:inline-block; vertical-align: top; height: 1em; background: red; color: red; }
+div#after { margin-top:-1em; }
+div#after span { display: inline; background: green; color: green; }
+</style>
+</head>
+<body>
+<div><span>X</span></div>
+<div id="after"><span>X</span></div>
+</body>
+</html>

layout/reftests/bugs/9458-zorder-4.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+span { display:inline-block; vertical-align: top; background: green; color: green; }
+div#before { height: 1em; margin-bottom:-1em; }
+div#before span { display: inline; background: red; color: red; }
+</style>
+</head>
+<body>
+<div id="before"><span>X</span></div>
+<div><span>X</span></div>
+</body>
+</html>

layout/reftests/bugs/9458-zorder-5.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+span { display:inline-block; vertical-align: top; }
+span span { display: block; background: green; color: green; }
+div#before { height: 1em; margin-bottom:-1em; }
+div#before span { display: inline; background: red; color: red; }
+</style>
+</head>
+<body>
+<div id="before"><span>X</span></div>
+<div><span><span>X</span></span></div>
+</body>
+</html>

layout/reftests/bugs/9458-zorder-ref-inline.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+span { background: green; color: green; }
+</style>
+</head>
+<body>
+<div><span>X</span></div>
+</body>
+</html>

layout/reftests/bugs/9458-zorder-ref.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for inline-block (bug 9458)</title>
+<style type="text/css">
+div { display:block; width: 2em; height: 1em; background: green; }
+</style>
+</head>
+<body>
+<div>&nbsp;</div>
+</body>
+</html>

layout/reftests/reftest.list

@@ -4,6 +4,35 @@
 != data:text/plain,HELLO about:blank
 
 # bugs/
+== bugs/9458-basic-1.html bugs/9458-basic-1-ref.html
+== bugs/9458-valign-1.html bugs/9458-valign-1-ref.html
+== bugs/9458-valign-2.html bugs/9458-valign-2-ref.html
+== bugs/9458-height-1.html bugs/9458-height-1-ref.html
+== bugs/9458-height-2.html bugs/9458-height-2-ref.html
+== bugs/9458-width-1a.html bugs/9458-width-1-ref.html
+== bugs/9458-width-1b.html bugs/9458-width-1-ref.html
+== bugs/9458-width-2a.html bugs/9458-width-2-ref.html
+== bugs/9458-width-2b.html bugs/9458-width-2-ref.html
+== bugs/9458-zorder-1.html bugs/9458-zorder-ref.html
+== bugs/9458-zorder-2.html bugs/9458-zorder-ref.html
+== bugs/9458-zorder-3.html bugs/9458-zorder-ref-inline.html
+== bugs/9458-zorder-4.html bugs/9458-zorder-ref-inline.html
+== bugs/9458-zorder-5.html bugs/9458-zorder-ref-inline.html
+== bugs/18217-basic-1.html bugs/18217-basic-1-ref.html
+== bugs/18217-basic-2a.html bugs/18217-basic-2-ref.html
+== bugs/18217-basic-2b.html bugs/18217-basic-2-ref.html
+== bugs/18217-valign-1.html bugs/18217-valign-1-ref.html
+== bugs/18217-height-1.html bugs/18217-height-1-ref.html
+== bugs/18217-height-2.html bugs/18217-height-2-ref.html
+== bugs/18217-width-1a.html bugs/18217-width-1-ref.html
+== bugs/18217-width-1b.html bugs/18217-width-1-ref.html
+== bugs/18217-width-2a.html bugs/18217-width-2-ref.html
+== bugs/18217-width-2b.html bugs/18217-width-2-ref.html
+== bugs/18217-zorder-1.html bugs/18217-zorder-ref.html
+== bugs/18217-zorder-2.html bugs/18217-zorder-ref.html
+== bugs/18217-zorder-3.html bugs/18217-zorder-ref-inline.html
+== bugs/18217-zorder-4.html bugs/18217-zorder-ref-inline.html
+== bugs/18217-zorder-5.html bugs/18217-zorder-ref-inline.html
 == bugs/142233-1.html bugs/142233-1-ref.html
 == bugs/339289-1.html bugs/339289-1-ref.html
 == bugs/347912-1.html bugs/347912-1-ref.html
@@ -23,7 +52,7 @@ f== bugs/351641-2b.html bugs/351641-2-ref.html # bug 358433 (2006-10-19)
 == bugs/359903-2.html bugs/359903-2-ref.html
 == bugs/360757-1a.html bugs/360757-1-ref.html
 == bugs/360757-1b.html bugs/360757-1-ref.html
-f== bugs/360065-1.html bugs/360065-1-ref.html # bug 18217
+== bugs/360065-1.html bugs/360065-1-ref.html
 == bugs/332557-1.html bugs/332557-1-ref.html
 == bugs/315620-1a.html bugs/315620-1-ref.html
 != bugs/315620-1b.html bugs/315620-1-ref.html
@@ -50,6 +79,8 @@ f== bugs/360065-1.html bugs/360065-1-ref.html # bug 18217
 == bugs/367332-1e.html bugs/367332-1-ref.html
 == bugs/367332-1f.html bugs/367332-1-ref.html
 == bugs/367332-1g.html bugs/367332-1-ref.html
+== bugs/367504-margin-1.html bugs/367504-margin-1-ref.html
+== bugs/367504-float-1.html bugs/367504-float-1-ref.html
 
 # table-dom/
 == table-dom/appendCells1.html table-dom/appendCells1-ref.html

layout/style/nsCSSAnonBoxList.h

@@ -70,6 +70,7 @@ CSS_ANON_BOX(radio, ":-moz-radio")
 CSS_ANON_BOX(check, ":-moz-checkbox")
 CSS_ANON_BOX(mozDisplayComboboxControlFrame, ":-moz-display-comboboxcontrol-frame")
 
+CSS_ANON_BOX(inlineTable, ":-moz-inline-table")
 CSS_ANON_BOX(table, ":-moz-table")
 CSS_ANON_BOX(tableCell, ":-moz-table-cell")
 CSS_ANON_BOX(tableColGroup, ":-moz-table-column-group")

layout/style/nsCSSKeywordList.h

@@ -119,11 +119,9 @@ CSS_KEY(-moz-hangul, _moz_hangul)
 CSS_KEY(-moz-hyperlinktext, _moz_hyperlinktext)
 CSS_KEY(-moz-info, _moz_info)
 CSS_KEY(-moz-initial, _moz_initial)
-CSS_KEY(-moz-inline-block, _moz_inline_block)
 CSS_KEY(-moz-inline-box, _moz_inline_box)
 CSS_KEY(-moz-inline-grid, _moz_inline_grid)
 CSS_KEY(-moz-inline-stack, _moz_inline_stack)
-CSS_KEY(-moz-inline-table, _moz_inline_table)
 CSS_KEY(-moz-japanese-formal, _moz_japanese_formal)
 CSS_KEY(-moz-japanese-informal, _moz_japanese_informal)
 CSS_KEY(-moz-kannada, _moz_kannada)
@@ -293,6 +291,8 @@ CSS_KEY(infotext, infotext)
 CSS_KEY(inherit, inherit)
 CSS_KEY(inline, inline)
 CSS_KEY(inline-axis, inline_axis)
+CSS_KEY(inline-block, inline_block)
+CSS_KEY(inline-table, inline_table)
 CSS_KEY(inset, inset)
 CSS_KEY(inside, inside)
 CSS_KEY(invert, invert)

layout/style/nsCSSParser.cpp

@@ -4613,7 +4613,6 @@ PRBool CSSParserImpl::ParseSingleValueProperty(nsresult& aErrorCode,
 					case NS_STYLE_DISPLAY_MARKER:        // bug 2055
 					case NS_STYLE_DISPLAY_RUN_IN:		 // bug 2056
 					case NS_STYLE_DISPLAY_COMPACT:       // bug 14983
-					case NS_STYLE_DISPLAY_INLINE_TABLE:  // bug 18218
 						return PR_FALSE;
 				}
 			}

layout/style/nsCSSProps.cpp

@@ -520,13 +520,13 @@ const PRInt32 nsCSSProps::kDirectionKTable[] = {
 const PRInt32 nsCSSProps::kDisplayKTable[] = {
   eCSSKeyword_inline,             NS_STYLE_DISPLAY_INLINE,
   eCSSKeyword_block,              NS_STYLE_DISPLAY_BLOCK,
-  eCSSKeyword__moz_inline_block,  NS_STYLE_DISPLAY_INLINE_BLOCK,
+  eCSSKeyword_inline_block,       NS_STYLE_DISPLAY_INLINE_BLOCK,
   eCSSKeyword_list_item,          NS_STYLE_DISPLAY_LIST_ITEM,
   eCSSKeyword__moz_run_in,        NS_STYLE_DISPLAY_RUN_IN,
   eCSSKeyword__moz_compact,       NS_STYLE_DISPLAY_COMPACT,
   eCSSKeyword__moz_marker,        NS_STYLE_DISPLAY_MARKER,
   eCSSKeyword_table,              NS_STYLE_DISPLAY_TABLE,
-  eCSSKeyword__moz_inline_table,  NS_STYLE_DISPLAY_INLINE_TABLE,
+  eCSSKeyword_inline_table,       NS_STYLE_DISPLAY_INLINE_TABLE,
   eCSSKeyword_table_row_group,    NS_STYLE_DISPLAY_TABLE_ROW_GROUP,
   eCSSKeyword_table_header_group, NS_STYLE_DISPLAY_TABLE_HEADER_GROUP,
   eCSSKeyword_table_footer_group, NS_STYLE_DISPLAY_TABLE_FOOTER_GROUP,

layout/style/nsRuleNode.cpp

@@ -2837,6 +2837,9 @@ nsRuleNode::ComputeDisplayData(nsStyleStruct* aStartStruct,
     // pseudo-elements must not be positioned or floated (CSS2 12.1) and
     // must be limited to certain display types (depending on the
     // display type of the element to which they are attached).
+    // XXX These restrictions are no longer present in CSS2.1.  We
+    // should ensure that we support removing them before doing so,
+    // though.
 
     if (display->mPosition != NS_STYLE_POSITION_STATIC)
       display->mPosition = NS_STYLE_POSITION_STATIC;
@@ -2847,7 +2850,9 @@ nsRuleNode::ComputeDisplayData(nsStyleStruct* aStartStruct,
     if (displayValue != NS_STYLE_DISPLAY_NONE &&
         displayValue != NS_STYLE_DISPLAY_INLINE) {
       inherited = PR_TRUE;
-      if (parentDisplay->IsBlockLevel()) {
+      // XXX IsBlockInside?  (except for the marker bit)
+      if (parentDisplay->IsBlockLevel() ||
+          parentDisplay->mDisplay == NS_STYLE_DISPLAY_INLINE_BLOCK) {
         // If the subject of the selector is a block-level element,
         // allowed values are 'none', 'inline', 'block', and 'marker'.
         // If the value of the 'display' has any other value, the

layout/style/ua.css

@@ -57,8 +57,13 @@
   -moz-box-sizing: border-box; /* XXX do we really want this? */
 }
 
+*|*::-moz-inline-table {
+  display: inline-table !important;
+  -moz-box-sizing: border-box; /* XXX do we really want this? */
+}
+
 *|*::-moz-table-outer {
-  display: table !important;
+  display: inherit !important; /* table or inline-table */
   margin: 0 ! important;
   padding: 0 ! important;
   border: none ! important;