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

This commit is contained in:
dbaron%dbaron.org 2007-01-27 18:36:57 +00:00
parent a37f6ddb24
commit 5cb78b8e99
62 changed files with 806 additions and 36 deletions

View File

@ -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

View File

@ -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;
}

View File

@ -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) &&
// 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));
NS_CSS_FRAME_TYPE_BLOCK == NS_FRAME_GET_TYPE(mFrameType);
nsSize size =
frame->ComputeSize(rendContext,
nsSize(aContainingBlockWidth,

View File

@ -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/
// columns, but it's not clear how to handle that anyway
availSize.height = NS_UNCONSTRAINEDSIZE;
nsSize availSize(mBlockReflowState->ComputedWidth(), 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){
// Adjust available width to account for the left margin. The
// right margin will be accounted for when we finish flowing the
// frame.
NS_ASSERTION(NS_UNCONSTRAINEDSIZE != aReflowState.availableWidth,
"shouldn't have unconstrained widths anymore");
if (NS_UNCONSTRAINEDSIZE == aReflowState.ComputedWidth()) {
// 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;
}
}

View File

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

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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")

View File

@ -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)

View File

@ -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;
}
}

View File

@ -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,

View File

@ -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

View File

@ -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;