зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1807963 - Remove non-standard values of caption-side for good. r=TYLin,layout-reviewers
They have been disabled since bug 1688695. There's a variety of table-caption bugs that would be easier to fix if we didn't have to account for side-captions. Differential Revision: https://phabricator.services.mozilla.com/D165690
This commit is contained in:
Emilio Cobos Álvarez
Родитель
2922349567
Коммит
3ad7017163
|
|
@ -5621,15 +5621,11 @@ exports.CSS_PROPERTIES = {
|
|||
"supports": [],
|
||||
"values": [
|
||||
"bottom",
|
||||
"bottom-outside",
|
||||
"inherit",
|
||||
"initial",
|
||||
"left",
|
||||
"revert",
|
||||
"revert-layer",
|
||||
"right",
|
||||
"top",
|
||||
"top-outside",
|
||||
"unset"
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ function runTest() {
|
|||
var tableBoundingRect = table.getBoundingClientRect();
|
||||
var cellBoundingRect = cell.getBoundingClientRect();
|
||||
var captionBoundingRect = caption.getBoundingClientRect();
|
||||
|
||||
|
||||
is(tableRects.length, 2, "Table should have rects for body and caption");
|
||||
isEqualRect(tableRects[0], cellBoundingRect, 10,
|
||||
"Table first rect should be cell rect");
|
||||
|
|
@ -51,41 +51,18 @@ function runTest() {
|
|||
is(captionBoundingRect.right - captionBoundingRect.left, 50, "Caption incorrect width");
|
||||
is(captionBoundingRect.bottom - captionBoundingRect.top, 70, "Caption incorrect height");
|
||||
is(captionBoundingRect.top, cellBoundingRect.bottom + 10, "Discontiguous vertical geometry");
|
||||
|
||||
|
||||
is(tableBoundingRect.top, cellBoundingRect.top - 10, "Table top error");
|
||||
is(tableBoundingRect.left, cellBoundingRect.left - 10, "Table left error");
|
||||
is(tableBoundingRect.bottom, captionBoundingRect.bottom, "Table bottom error");
|
||||
is(tableBoundingRect.right, cellBoundingRect.right + 10, "Table right error");
|
||||
|
||||
caption.style.captionSide = "left";
|
||||
|
||||
tableRects = table.getClientRects();
|
||||
tableBoundingRect = table.getBoundingClientRect();
|
||||
cellBoundingRect = cell.getBoundingClientRect();
|
||||
captionBoundingRect = caption.getBoundingClientRect();
|
||||
|
||||
is(tableRects.length, 2, "Table should have rects for body and caption");
|
||||
isEqualRect(tableRects[0], cellBoundingRect, 10,
|
||||
"Table first rect should be cell rect plus border");
|
||||
isEqualRect(tableRects[1], captionBoundingRect, 0,
|
||||
"Table second rect should be caption rect");
|
||||
is(cellBoundingRect.right - cellBoundingRect.left, 80, "Cell incorrect width");
|
||||
is(cellBoundingRect.bottom - cellBoundingRect.top, 100, "Cell incorrect height");
|
||||
is(captionBoundingRect.right - captionBoundingRect.left, 50, "Caption incorrect width");
|
||||
is(captionBoundingRect.bottom - captionBoundingRect.top, 70, "Caption incorrect height");
|
||||
is(captionBoundingRect.right + 10, cellBoundingRect.left, "Discontiguous horizontal geometry");
|
||||
is(tableBoundingRect.top, cellBoundingRect.top - 10, "Table top error");
|
||||
is(tableBoundingRect.left, captionBoundingRect.left, "Table left error");
|
||||
is(tableBoundingRect.bottom, cellBoundingRect.bottom + 10, "Table bottom error");
|
||||
is(tableBoundingRect.right, cellBoundingRect.right + 10, "Table right error");
|
||||
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
|
||||
addLoadEvent(function() {
|
||||
SpecialPowers.pushPrefEnv({"set": [["layout.css.caption-side-non-standard.enabled", true]]}, runTest);
|
||||
});
|
||||
addLoadEvent(runTest);
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,6 @@ JSObject* HTMLTableCaptionElement::WrapNode(JSContext* aCx,
|
|||
NS_IMPL_ELEMENT_CLONE(HTMLTableCaptionElement)
|
||||
|
||||
static const nsAttrValue::EnumTable kCaptionAlignTable[] = {
|
||||
{"left", StyleCaptionSide::Left},
|
||||
{"right", StyleCaptionSide::Right},
|
||||
{"top", StyleCaptionSide::Top},
|
||||
{"bottom", StyleCaptionSide::Bottom},
|
||||
{nullptr, 0}};
|
||||
|
|
|
|||
|
|
@ -2127,17 +2127,6 @@ static eNormalLineHeightControl GetNormalLineHeightCalcControl(void) {
|
|||
return sNormalLineHeightControl;
|
||||
}
|
||||
|
||||
static inline bool IsSideCaption(nsIFrame* aFrame,
|
||||
const nsStyleDisplay* aStyleDisplay,
|
||||
WritingMode aWM) {
|
||||
if (aStyleDisplay->mDisplay != StyleDisplay::TableCaption) {
|
||||
return false;
|
||||
}
|
||||
auto captionSide = aFrame->StyleTableBorder()->mCaptionSide;
|
||||
return captionSide == StyleCaptionSide::Left ||
|
||||
captionSide == StyleCaptionSide::Right;
|
||||
}
|
||||
|
||||
// XXX refactor this code to have methods for each set of properties
|
||||
// we are computing: width,height,line-height; margin; offsets
|
||||
|
||||
|
|
@ -2425,9 +2414,6 @@ void ReflowInput::InitConstraints(
|
|||
if (!isBlockLevel) {
|
||||
return false;
|
||||
}
|
||||
if (IsSideCaption(mFrame, mStyleDisplay, cbwm)) {
|
||||
return false;
|
||||
}
|
||||
if (mStyleDisplay->mDisplay == StyleDisplay::InlineTable) {
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -954,45 +954,22 @@ LogicalSize nsContainerFrame::ComputeAutoSize(
|
|||
AutoMaybeDisableFontInflation an(this);
|
||||
|
||||
WritingMode tableWM = GetParent()->GetWritingMode();
|
||||
StyleCaptionSide captionSide = StyleTableBorder()->mCaptionSide;
|
||||
|
||||
if (aWM.IsOrthogonalTo(tableWM)) {
|
||||
if (captionSide == StyleCaptionSide::Top ||
|
||||
captionSide == StyleCaptionSide::TopOutside ||
|
||||
captionSide == StyleCaptionSide::Bottom ||
|
||||
captionSide == StyleCaptionSide::BottomOutside) {
|
||||
// For an orthogonal caption on a block-dir side of the table,
|
||||
// shrink-wrap to min-isize.
|
||||
result.ISize(aWM) = GetMinISize(aRenderingContext);
|
||||
} else {
|
||||
// An orthogonal caption on an inline-dir side of the table
|
||||
// is constrained to the containing block.
|
||||
nscoord pref = GetPrefISize(aRenderingContext);
|
||||
if (pref > aCBSize.ISize(aWM)) {
|
||||
pref = aCBSize.ISize(aWM);
|
||||
}
|
||||
if (pref < result.ISize(aWM)) {
|
||||
result.ISize(aWM) = pref;
|
||||
}
|
||||
}
|
||||
// For an orthogonal caption on a block-dir side of the table, shrink-wrap
|
||||
// to min-isize.
|
||||
result.ISize(aWM) = GetMinISize(aRenderingContext);
|
||||
} else {
|
||||
if (captionSide == StyleCaptionSide::Left ||
|
||||
captionSide == StyleCaptionSide::Right) {
|
||||
result.ISize(aWM) = GetMinISize(aRenderingContext);
|
||||
} else if (captionSide == StyleCaptionSide::Top ||
|
||||
captionSide == StyleCaptionSide::Bottom) {
|
||||
// The outer frame constrains our available isize to the isize of
|
||||
// the table. Grow if our min-isize is bigger than that, but not
|
||||
// larger than the containing block isize. (It would really be nice
|
||||
// to transmit that information another way, so we could grow up to
|
||||
// the table's available isize, but that's harder.)
|
||||
nscoord min = GetMinISize(aRenderingContext);
|
||||
if (min > aCBSize.ISize(aWM)) {
|
||||
min = aCBSize.ISize(aWM);
|
||||
}
|
||||
if (min > result.ISize(aWM)) {
|
||||
result.ISize(aWM) = min;
|
||||
}
|
||||
// The outer frame constrains our available isize to the isize of
|
||||
// the table. Grow if our min-isize is bigger than that, but not
|
||||
// larger than the containing block isize. (It would really be nice
|
||||
// to transmit that information another way, so we could grow up to
|
||||
// the table's available isize, but that's harder.)
|
||||
nscoord min = GetMinISize(aRenderingContext);
|
||||
if (min > aCBSize.ISize(aWM)) {
|
||||
min = aCBSize.ISize(aWM);
|
||||
}
|
||||
if (min > result.ISize(aWM)) {
|
||||
result.ISize(aWM) = min;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
<!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 1062963</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: 40px; margin: 1px 50px;
|
||||
padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
|
||||
}
|
||||
|
||||
div.pushed { height: 20px; }
|
||||
div.t { background: blue; height: 10px; width: 100px; }
|
||||
div.caption { background: purple; height: 10px; width: 100px; }
|
||||
div.side { display: inline-block; vertical-align: top; }
|
||||
|
||||
#test { width: 699px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="test">
|
||||
|
||||
<div style="width: 676px">
|
||||
<div class="contain rtl">
|
||||
<div class="side t" style="margin-left: 102px"></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: 672px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="side t" style="margin-left: 98px"></div
|
||||
><div class="side caption" style="margin-left: 100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US" class="reftest-wait">
|
||||
<head>
|
||||
<title>Reftest, bug 1062963</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; }
|
||||
|
||||
.rtl { direction: rtl; }
|
||||
|
||||
.contain {
|
||||
background: aqua; color: black;
|
||||
height: 40px; margin: 1px 50px;
|
||||
padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
|
||||
}
|
||||
|
||||
.fl, .fr { height: 20px; }
|
||||
.fl { float: left; width: 100px; }
|
||||
.fr { float: right; width: 73px; }
|
||||
|
||||
.t { background: blue; height: 10px; width: 100px; border-spacing: 0; }
|
||||
.t caption { background: purple; height: 10px; width: 100px; }
|
||||
.t td { padding: 0; }
|
||||
|
||||
#test {
|
||||
width: 700px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
function run() {
|
||||
var test = document.getElementById("test");
|
||||
test.style.width = "699px";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="run()">
|
||||
|
||||
<div id="test">
|
||||
|
||||
<div style="width: 676px">
|
||||
<div class="contain rtl">
|
||||
<div class="fl"></div>
|
||||
<div class="fr"></div>
|
||||
<table class="t" style="margin: 0 74px 0 100px; caption-side: right">
|
||||
<caption style="margin: 0 100px 0 100px"></caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 674px">
|
||||
<div class="contain rtl">
|
||||
<div class="fl"></div>
|
||||
<div class="fr"></div>
|
||||
<table class="t" style="margin: 0 74px 0 100px; caption-side: right">
|
||||
<caption style="margin: 0 100px 0 100px"></caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 672px">
|
||||
<div class="contain rtl">
|
||||
<div class="fl"></div>
|
||||
<div class="fr"></div>
|
||||
<table class="t" style="margin: 0 74px 0 100px; caption-side: right">
|
||||
<caption style="margin: 0 100px 0 100px"></caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<title>CSS 2.1 Test Suite: Test for flow around floats</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" />
|
||||
<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." />
|
||||
<meta name="flags" content="" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 16px; }
|
||||
|
||||
table { margin: 0; border-spacing: 0; }
|
||||
caption, td, th { padding: 0; vertical-align: top; text-align: left; }
|
||||
|
||||
table table caption { background: yellow; }
|
||||
table table { background: purple; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table width="300" style="background: aqua"><tr><td>
|
||||
<div style="float:left; clear:left; background:blue; width:150px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:145px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:140px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:135px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:130px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:125px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:120px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:115px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:110px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:105px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:100px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:95px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:90px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:85px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:80px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:75px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:70px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:65px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:60px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:55px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:50px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:45px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:40px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:35px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:30px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:25px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:20px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:15px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:10px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:5px; height:1px"></div>
|
||||
<table>
|
||||
<caption style="caption-side: left; height:30px; width: 90px;">Caption</caption>
|
||||
<tr><td><div style="height: 30px; width: 102px">Cell</div></td></tr>
|
||||
</table>
|
||||
</td></tr></table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<title>CSS 2.1 Test Suite: Test for flow around floats</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" />
|
||||
<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." />
|
||||
<meta name="flags" content="" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 16px; }
|
||||
|
||||
table { margin: 0; border-spacing: 0; }
|
||||
caption, td, th { padding: 0; vertical-align: top; text-align: left; }
|
||||
|
||||
table table caption { background: yellow; }
|
||||
table table { background: purple; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table width="300" style="background: aqua"><tr><td>
|
||||
<div style="float:left; clear:left; background:blue; width:150px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:145px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:140px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:135px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:130px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:125px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:120px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:115px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:110px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:105px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:100px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:95px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:90px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:85px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:80px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:75px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:70px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:65px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:60px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:55px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:50px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:45px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:40px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:35px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:30px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:25px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:20px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:15px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:10px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:5px; height:1px"></div>
|
||||
<table>
|
||||
<caption style="caption-side: right; height:30px; width: 90px;">Caption</caption>
|
||||
<tr><td><div style="height: 30px; width: 102px">Cell</div></td></tr>
|
||||
</table>
|
||||
</td></tr></table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +1,31 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
"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">
|
||||
<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; }
|
||||
html, body { margin: 0; }
|
||||
|
||||
.contain {
|
||||
background: aqua; color: black;
|
||||
height: 4px; margin: 1px 50px;
|
||||
padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
|
||||
}
|
||||
.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; }
|
||||
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>
|
||||
</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
|
||||
|
|
@ -39,660 +39,135 @@
|
|||
-->
|
||||
|
||||
<div style="width: 405px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
</div>
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 404px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
</div>
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 403px">
|
||||
<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 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: 405px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 404px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 116px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 403px">
|
||||
<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 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: 406px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 57px"></div>
|
||||
<div class="caption" style="margin-left: 117px"></div>
|
||||
</div>
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 57px"></div>
|
||||
<div class="caption" style="margin-left: 117px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 405px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 57px"></div>
|
||||
<div class="caption" style="margin-left: 117px"></div>
|
||||
</div>
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 57px"></div>
|
||||
<div class="caption" style="margin-left: 117px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 404px">
|
||||
<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: 401px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 112px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 400px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 112px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 399px">
|
||||
<div class="contain">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 112px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 401px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 112px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 400px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 112px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 399px">
|
||||
<div class="contain">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 55px"></div>
|
||||
<div class="caption" style="margin-left: 111px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 400px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 111px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 399px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 111px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 398px">
|
||||
<div class="contain">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
<div class="caption" style="margin-left: 111px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 400px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 111px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 399px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 111px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 398px">
|
||||
<div class="contain">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 110px"></div>
|
||||
<div class="t" style="margin-left: 55px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 402px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 57px"></div>
|
||||
<div class="caption" style="margin-left: 113px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 401px">
|
||||
<div class="contain">
|
||||
<div class="t" style="margin-left: 57px"></div>
|
||||
<div class="caption" style="margin-left: 113px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 400px">
|
||||
<div class="contain">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 57px"></div>
|
||||
<div class="caption" style="margin-left: 113px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 402px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 113px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 401px">
|
||||
<div class="contain">
|
||||
<div class="caption" style="margin-left: 113px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 400px">
|
||||
<div class="contain">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 113px"></div>
|
||||
<div class="t" style="margin-left: 56px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 656px">
|
||||
<div class="contain">
|
||||
<div class="side caption" style="margin-left: 155px"></div
|
||||
><div class="side t" style="margin-left: 100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 655px">
|
||||
<div class="contain">
|
||||
<div class="side caption" style="margin-left: 155px"></div
|
||||
><div class="side t" style="margin-left: 100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 654px">
|
||||
<div class="contain">
|
||||
<div class="side caption" style="margin-left: 155px"></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: 156px"></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: 156px"></div
|
||||
><div class="side t" style="margin-left: 100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 655px">
|
||||
<div class="contain">
|
||||
<div class="side caption" style="margin-left: 156px"></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: 157px"></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: 157px"></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: 157px"></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="side t" style="margin-left: 56px"></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="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="side t" style="margin-left: 57px"></div
|
||||
><div class="side caption" style="margin-left: 100px"></div>
|
||||
</div>
|
||||
<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: 425px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 152px"></div>
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 152px"></div>
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 424px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 423px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 425px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
<div class="t" style="margin-left: 152px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
<div class="t" style="margin-left: 152px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 424px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 423px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
<div class="t" style="margin-left: 150px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
<div class="t" style="margin-left: 150px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 426px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 152px"></div>
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 152px"></div>
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 425px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 151px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 424px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 150px"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 418px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
<div class="t" style="margin-left: 145px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 417px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
<div class="t" style="margin-left: 144px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 416px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
<div class="t" style="margin-left: 143px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 418px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 145px"></div>
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 417px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 144px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 416px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 144px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 417px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 144px"></div>
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 416px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 143px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 415px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 142px"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 417px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
<div class="t" style="margin-left: 144px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 416px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
<div class="t" style="margin-left: 143px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 415px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
<div class="t" style="margin-left: 143px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 419px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 145px"></div>
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 418px">
|
||||
<div class="contain rtl">
|
||||
<div class="t" style="margin-left: 144px"></div>
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 417px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 143px"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 419px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 72px"></div>
|
||||
<div class="t" style="margin-left: 146px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 418px">
|
||||
<div class="contain rtl">
|
||||
<div class="caption" style="margin-left: 71px"></div>
|
||||
<div class="t" style="margin-left: 145px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 417px">
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
<div class="t" style="margin-left: 144px"></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: 201px"></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: 200px"></div
|
||||
><div class="side t" style="margin-left: 72px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 671px">
|
||||
<div class="contain rtl">
|
||||
<!-- margins showing up in the wrong places? -->
|
||||
<div class="side caption" style="margin-left: 199px"></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: 201px"></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: 200px"></div
|
||||
><div class="side t" style="margin-left: 73px"></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: 199px"></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: 201px"></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: 200px"></div
|
||||
><div class="side t" style="margin-left: 74px"></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: 199px"></div
|
||||
><div class="side t" style="margin-left: 74px"></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="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="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="side t" style="margin-left: 99px"></div
|
||||
><div class="side caption" style="margin-left: 100px"></div>
|
||||
</div>
|
||||
<div class="contain rtl">
|
||||
<div class="pushed"></div>
|
||||
<div class="t" style="margin-left: 150px"></div>
|
||||
<div class="caption" style="margin-left: 70px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -1,16 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for table + caption vertical margins (bug 478614)</title>
|
||||
<style type="text/css">
|
||||
body {margin-top: 0} /* Don't let collapsing of the body's top margin interfere with positioning */
|
||||
caption {margin-top: 150px;caption-side:top-outside}
|
||||
table { width:100px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table><caption>caption</caption>
|
||||
<tr><td>td</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for table + caption vertical margins (bug 478614)</title>
|
||||
<style type="text/css">
|
||||
body {margin-top: 0} /* Don't let collapsing of the body's top margin interfere with positioning */
|
||||
caption {margin-top: 100px;caption-side:top-outside}
|
||||
table {margin-top: 50px; width:100px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table><caption>caption</caption>
|
||||
<tr><td>td</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for table + caption vertical margins (bug 478614)</title>
|
||||
<style type="text/css">
|
||||
body {margin-top: 0} /* Don't let collapsing of the body's top margin interfere with positioning */
|
||||
caption {margin-top: 50px;caption-side:bottom-outside}
|
||||
table {width:100px;}
|
||||
div {margin-top: 150px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table><caption>caption</caption>
|
||||
<tr><td>td</td></tr>
|
||||
</table>
|
||||
<div>block</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for table + caption vertical margins (bug 478614)</title>
|
||||
<style type="text/css">
|
||||
body {margin-top: 0} /* Don't let collapsing of the body's top margin interfere with positioning */
|
||||
caption {margin-top: 50px; margin-bottom: 100px; caption-side:bottom-outside}
|
||||
table {margin-bottom: 50px; width:100px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table><caption>caption</caption>
|
||||
<tr><td>td</td></tr>
|
||||
</table>
|
||||
<div>block</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -143,8 +143,6 @@ random == 99850-1b.html 99850-1-ref.html # bug 471629
|
|||
== 134706-4.html 134706-4-ref.html
|
||||
== 134706-5.html 134706-5-ref.html
|
||||
== 134706-6.html 134706-6-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == 134706-6b.html 134706-6b-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == 134706-6c.html 134706-6c-ref.html
|
||||
== 134706-7.html 134706-7-ref.html
|
||||
== 139550-1a.html 139550-1-ref.html
|
||||
== 139550-1b.html 139550-1-ref.html
|
||||
|
|
@ -1029,7 +1027,7 @@ asserts(3) != 427017-1.xhtml about:blank # crash test (needs reftest-paged). exi
|
|||
== 427129-scrollframe.html 427129-ref.html
|
||||
== 427129-table.html 427129-ref.html
|
||||
== 427129-image.html 427129-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == 427129-table-caption.html 427129-table-caption-ref.html
|
||||
== 427129-table-caption.html 427129-table-caption-ref.html
|
||||
fuzzy(0-1,0-60) == 427370-1.html 427370-1-ref.html
|
||||
== 427730-1.html 427730-1-ref.html
|
||||
== 428278.html 428278-ref.html
|
||||
|
|
@ -1144,8 +1142,8 @@ random == 445004-1.html 445004-1-ref.html # bug 472268
|
|||
== 445142-2b.html 445142-2-ref.html
|
||||
skip-if(winWidget&&isCoverageBuild) fails-if(usesRepeatResampling) fails-if(!useDrawSnapshot&&!winWidget) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),86-87,73-73) == 446100-1a.html about:blank
|
||||
fuzzy-if(winWidget&&isCoverageBuild,178-178,127-127) fails-if(Android) fails-if(usesRepeatResampling) fails-if(!useDrawSnapshot&&!winWidget) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),177-178,127-127) == 446100-1b.html about:blank
|
||||
skip-if(winWidget&&isCoverageBuild) fuzzy(171-172,192-192) fails-if(!winWidget) fails-if(useDrawSnapshot) == 446100-1c.html about:blank
|
||||
skip-if(winWidget&&isCoverageBuild) fails-if(usesRepeatResampling) fails-if(!winWidget) fails-if(useDrawSnapshot) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),111-112,212-212) == 446100-1d.html about:blank
|
||||
skip-if(winWidget&&isCoverageBuild) fuzzy(171-172,192-192) fails-if(!useDrawSnapshot&&!winWidget) == 446100-1c.html about:blank
|
||||
skip-if(winWidget&&isCoverageBuild) fails-if(usesRepeatResampling) fails-if(!useDrawSnapshot&&!winWidget) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),111-112,212-212) == 446100-1d.html about:blank
|
||||
skip-if(winWidget&&isCoverageBuild) fails-if(usesRepeatResampling) fails-if(!useDrawSnapshot&&!winWidget) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),31-32,35-35) == 446100-1e.html about:blank
|
||||
fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),0-141,0-19) == 446100-1f.html about:blank
|
||||
fails-if(winWidget&&isCoverageBuild) fails-if(usesRepeatResampling) fails-if(Android) fails-if(!useDrawSnapshot&&!winWidget) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),141-142,19-19) == 446100-1g.html about:blank
|
||||
|
|
@ -1261,8 +1259,6 @@ skip-if(Android) random-if(d2d) == chrome://reftest/content/bugs/478377-1.xhtml
|
|||
== 478614-3.html 478614-3-ref.html
|
||||
== 478614-4.html 478614-4-ref.html
|
||||
== 478614-5.html 478614-5-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == 478614-6.html 478614-6-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == 478614-7.html 478614-7-ref.html
|
||||
== 478811-1.html 478811-1-ref.html
|
||||
== 478811-2.html 478811-2-ref.html
|
||||
== 478811-3.html 478811-3-ref.html
|
||||
|
|
@ -1814,7 +1810,6 @@ fails-if(!useDrawSnapshot) == 1059498-2.html 1059498-1-ref.html # WebRender: see
|
|||
fails-if(!useDrawSnapshot) == 1059498-3.html 1059498-1-ref.html # WebRender: see bug 1499113
|
||||
== 1062108-1.html 1062108-1-ref.html
|
||||
== 1062792-1.html 1062792-1-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == 1062963-floatmanager-reflow.html 1062963-floatmanager-reflow-ref.html
|
||||
== 1066554-1.html 1066554-1-ref.html
|
||||
== 1069716-1.html 1069716-1-ref.html
|
||||
== 1078262-1.html about:blank # bug 1656792
|
||||
|
|
|
|||
|
|
@ -1,191 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching table items that has a side-caption with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
|
||||
<style type="text/css">
|
||||
* { vertical-align: bottom; }
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 3px solid grey;
|
||||
grid: 32px / 4px;
|
||||
margin-right:20px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
}
|
||||
.r { grid: 4px / 32px; }
|
||||
|
||||
table {
|
||||
border: 1px solid;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: lightgrey;
|
||||
}
|
||||
caption { border: 1px dashed blue; caption-side: right; }
|
||||
x { display:block; width:16px; height:16px; }
|
||||
t { display:block; width:6px; height:6px; }
|
||||
|
||||
.w20 { width: 20px }
|
||||
.mxw2 { width: 2px }
|
||||
.mxw10 { width: 10px }
|
||||
.mw20 { width: 20px }
|
||||
.wfill { width:14px }
|
||||
|
||||
.h20 { height: 20px }
|
||||
.mxh10 { height: 10px }
|
||||
.mxh2 { height: 2px }
|
||||
.mh20 { height: 20px }
|
||||
.h16 { height: 16px } /* XXX to workaround bug 307866 */
|
||||
.h8 { height: 8px } /* XXX to workaround bug 307866 */
|
||||
.w8 { width: 8px } /* XXX to workaround bug 307866 */
|
||||
.hfill { height:32px }
|
||||
|
||||
.as, .an, .end { margin-top:14px; }
|
||||
.sa, .na, .end { margin-left:-22px; }
|
||||
.sa.mw20, .na.mw20, .end.mw20 { margin-left:-34px; }
|
||||
.sa.w20, .na.w20, .end.w20 { margin-left:-34px; }
|
||||
.sa caption, .na caption, .end caption { width:px; }
|
||||
.sa.mw20 caption, .na.mw20 caption, .end.mw20 caption { width:px; }
|
||||
.sa.w20 caption, .na.w20 caption, .end.w20 caption { width:px; }
|
||||
.r .as, .r .an, .r .end { margin-top:-14px; }
|
||||
.as.h20, .an.h20, .end.h20 { margin-top:12px; }
|
||||
.r .as.h20, .r .an.h20, .r .end.h20, .r .as.mh20, .r .an.mh20, .r .end.mh20 { margin-top:-16px; }
|
||||
.r .sa, .r .na, .r .end { margin-left:6px; }
|
||||
.r .sa.w20, .r .na.w20, .r .end.w20 { margin-left:-6px; }
|
||||
.r .sa caption, .r .na caption, .r .end caption { width:aauto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-height:20px--></pre>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="end mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-height:0--></pre>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8 mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!----></pre>
|
||||
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-width:20px--></pre>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-width:0--></pre>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--width:20px--></pre>
|
||||
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--width:20px--></pre>
|
||||
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--height:20px--></pre>
|
||||
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--height:20px--></pre>
|
||||
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: stretching table items that has a side-caption with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
|
||||
<link rel="match" href="grid-item-table-stretch-002-ref.html">
|
||||
<style type="text/css">
|
||||
* { vertical-align: bottom; }
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 3px solid grey;
|
||||
grid: 32px / 4px;
|
||||
margin-right:20px;
|
||||
}
|
||||
.r { grid: 4px / 32px; }
|
||||
|
||||
table {
|
||||
border: 1px solid;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: lightgrey;
|
||||
}
|
||||
caption { border: 1px dashed blue; caption-side: right; }
|
||||
x { display:block; width:16px; height:16px; }
|
||||
t { display:block; width:6px; height:6px; }
|
||||
|
||||
.end {align-self:end; justify-self:end}
|
||||
.na { justify-self:end}
|
||||
.sa {align-self:stretch; justify-self:end}
|
||||
.an {align-self:end; }
|
||||
.as {align-self:end; justify-self:stretch}
|
||||
.w20 { width: 20px }
|
||||
.mw20 { min-width: 20px }
|
||||
.mxw10 { max-width: 10px }
|
||||
.mxw2 { max-width: 2px }
|
||||
.mw0 { min-width: 0px }
|
||||
|
||||
.h20 { height: 20px }
|
||||
.mh20 { min-height: 20px }
|
||||
.mxh10 { max-height: 10px }
|
||||
.mxh2 { max-height: 2px }
|
||||
.mh0 { min-height: 0px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-height:20px--></pre>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="end mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-height:0--></pre>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!----></pre>
|
||||
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-width:20px--></pre>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--min-width:0--></pre>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--width:20px--></pre>
|
||||
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--width:20px--></pre>
|
||||
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--height:20px--></pre>
|
||||
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
<pre><!--height:20px--></pre>
|
||||
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -125,7 +125,6 @@ fuzzy-if(winWidget,0-1,0-10) == grid-max-sizing-flex-003.html grid-max-sizing-fl
|
|||
== grid-item-button-001.html grid-item-button-001-ref.html
|
||||
== grid-item-table-stretch-001.html grid-item-table-stretch-001-ref.html
|
||||
== grid-item-table-stretch-002.html grid-item-table-stretch-002-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == grid-item-table-stretch-003.html grid-item-table-stretch-003-ref.html
|
||||
== grid-item-table-stretch-004.html grid-item-table-stretch-004-ref.html
|
||||
== grid-item-fieldset-stretch-001.html grid-item-fieldset-stretch-001-ref.html
|
||||
skip-if(Android) == grid-item-video-stretch-001.html grid-item-video-stretch-001-ref.html # Huh, Android doesn't have webm support?
|
||||
|
|
|
|||
|
|
@ -662,27 +662,14 @@ fuzzy-if(winWidget&&!nativeThemePref,0-4,0-36) == block-overflow-5c-dyn.html blo
|
|||
== table-caption-2a-dyn.html table-caption-2-ref.html
|
||||
== table-caption-2b-dyn.html table-caption-2-ref.html
|
||||
== table-caption-2c-dyn.html table-caption-2-ref.html
|
||||
# Note: CSS 2.1 suggests that the 'caption-side' values 'top-outside' and
|
||||
# 'bottom-outside' will be used in a future CSS Module to restore the
|
||||
# CSS 2 definition of 'top' and 'bottom' (which is different from CSS 2.1's).
|
||||
# Since Bug #659828 was fixed, 'top-outside' and 'bottom-outside' act as an
|
||||
# alias for the CSS 2.1 values 'top' and 'bottom' respectively.
|
||||
== table-caption-top-1.html table-caption-top-1-ref.html
|
||||
== table-caption-top-2.html table-caption-top-2-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-top-outside-1.html table-caption-top-1-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-top-outside-2.html table-caption-top-1-ref.html
|
||||
== table-caption-bottom-1.html table-caption-bottom-1-ref.html
|
||||
== table-caption-bottom-2.html table-caption-bottom-2-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-bottom-outside-1.html table-caption-bottom-1-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-bottom-outside-2.html table-caption-bottom-1-ref.html
|
||||
== table-caption-top-1-dyn.html table-caption-top-1-ref.html
|
||||
== table-caption-top-2-dyn.html table-caption-top-1-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-top-outside-1-dyn.html table-caption-top-1-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-top-outside-2-dyn.html table-caption-top-2-ref.html
|
||||
== table-caption-bottom-1-dyn.html table-caption-bottom-1-ref.html
|
||||
== table-caption-bottom-2-dyn.html table-caption-bottom-1-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-bottom-outside-1-dyn.html table-caption-bottom-1-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-bottom-outside-2-dyn.html table-caption-bottom-1-ref.html
|
||||
fails == caption-sibling-1a.html caption-sibling-1-ref.html # Bug 144517
|
||||
!= caption-sibling-1a.html caption-sibling-1-noref.html
|
||||
fails == caption-sibling-1b.html caption-sibling-1-ref.html # Bug 144517
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#block1, #block2 {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#block1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#block2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
}
|
||||
#caption {
|
||||
display: table-cell;
|
||||
caption-side: bottom-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function test() {
|
||||
document.getElementById('caption').style.display = 'table-caption';
|
||||
document.documentElement.removeAttribute('class');
|
||||
}
|
||||
document.addEventListener('MozReftestInvalidate', test);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="block1"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div id="block2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#block1, #block2 {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#block1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#block2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
}
|
||||
#caption {
|
||||
display: table-caption;
|
||||
caption-side: bottom-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="block1"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div id="block2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
.block {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#caption {
|
||||
display: table-cell;
|
||||
caption-side: bottom-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function test() {
|
||||
document.getElementById('caption').style.display = 'table-caption';
|
||||
document.documentElement.removeAttribute('class');
|
||||
}
|
||||
document.addEventListener('MozReftestInvalidate', test);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div class="block"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
.block {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#caption {
|
||||
display: table-caption;
|
||||
caption-side: bottom-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div class="block"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#block1, #block2 {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#block1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#block2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
}
|
||||
#caption {
|
||||
display: table-cell;
|
||||
caption-side: top-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function test() {
|
||||
document.getElementById('caption').style.display = 'table-caption';
|
||||
document.documentElement.removeAttribute('class');
|
||||
}
|
||||
document.addEventListener('MozReftestInvalidate', test);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="block1"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div id="block2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#block1, #block2 {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#block1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#block2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
}
|
||||
#caption {
|
||||
display: table-caption;
|
||||
caption-side: top-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="block1"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div id="block2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
.block {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
width: 100px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#caption {
|
||||
display: table-cell;
|
||||
caption-side: top-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function test() {
|
||||
document.getElementById('caption').style.display = 'table-caption';
|
||||
document.documentElement.removeAttribute('class');
|
||||
}
|
||||
document.addEventListener('MozReftestInvalidate', test);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div class="block"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
.block {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#table {
|
||||
display: table;
|
||||
width: 100px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#caption {
|
||||
display: table-caption;
|
||||
caption-side: top-outside;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: blue;
|
||||
}
|
||||
#cell {
|
||||
display: table-cell;
|
||||
height: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block"></div>
|
||||
<div id="table">
|
||||
<div id="caption"></div>
|
||||
<div id="cell"></div>
|
||||
</div>
|
||||
<div class="block"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -63,12 +63,8 @@ fuzzy(0-1,0-23) == resize-reflow-001.html resize-reflow-001.ref.html
|
|||
== table-caption-splitaftercaption-3.html table-caption-splitaftercaption-3-ref.html
|
||||
== table-caption-splitaftercaption-4.html table-caption-splitaftercaption-4-ref.html
|
||||
== table-caption-splitaftercaption-5.html table-caption-splitaftercaption-5-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-splitaftercaption-6.html table-caption-splitaftercaption-6-ref.html
|
||||
pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-splitaftercaption-7.html table-caption-splitaftercaption-7-ref.html
|
||||
# == table-caption-splitaftercaption-8.html blank.html # bug 672654
|
||||
# == table-caption-splitaftercaption-9.html blank.html # bug 672654
|
||||
# pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-splitaftercaption-10.html blank.html # bug 672654
|
||||
# pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-splitaftercaption-11.html blank.html # bug 672654
|
||||
== table-cell-breaking-1a.html table-cell-breaking-1-ref.html
|
||||
== table-cell-breaking-1b.html table-cell-breaking-1-ref.html
|
||||
== table-cell-breaking-2a.html table-cell-breaking-2-ref.html
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US" class="reftest-paged">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
div.filler {height:5px; width: 50px; border:thin solid blue;}
|
||||
div.spacer { height: 0px; width: 0px; padding: 20px;border:thin solid green;}
|
||||
caption {margin-top: 5px; margin-bottom:5px; caption-side:top-outside}
|
||||
table {margin-top: 5px; margin-bottom:5px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<caption><div class="spacer" style="padding-top:160px"></div></caption>
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US" class="reftest-paged">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
div.filler {height:5px; width: 50px; border:thin solid blue;}
|
||||
div.spacer { height: 0px; width: 0px; padding: 20px;border:thin solid green;}
|
||||
caption {margin-top: 5px; margin-bottom:5px; caption-side:bottom-outside}
|
||||
table {margin-top: 5px; margin-bottom:5px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<caption><div class="spacer" style="padding-top:160px"></div></caption>
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US" class="reftest-paged">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
div.spacer { height: 0px; width: 0px; padding: 0.2in;border:thin solid green;}
|
||||
caption {margin-top: 0.1in; margin-bottom:0.3in; caption-side:top-outside}
|
||||
table {margin-top: 0.1in; margin-bottom:0.1in}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<caption><div class="spacer"></div></caption>
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
|
||||
<table cellspacing="0" cellpadding="0" style="page-break-before:always">
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US" class="reftest-paged">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
div.spacer { height: 0px; width: 0px; padding: 0.2in;border:thin solid green;}
|
||||
caption {margin-top: 0.1in; margin-bottom:0.3in; caption-side:top-outside}
|
||||
table {margin-top: 0.1in; margin-bottom:0.1in}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<caption><div class="spacer"></div></caption>
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US" class="reftest-paged">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
div.spacer { height: 0px; width: 0px; padding: 0.2in;border:thin solid green;}
|
||||
caption {margin-top: 0.1in; margin-bottom:0.3in; caption-side:bottom-outside}
|
||||
table {margin-top: 0.1in; margin-bottom:0.1in}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<caption><div class="spacer"></div></caption>
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
|
||||
<table cellspacing="0" cellpadding="0" style="page-break-before:always">
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US" class="reftest-paged">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
div.spacer { height: 0px; width: 0px; padding: 0.2in;border:thin solid green;}
|
||||
caption {margin-top: 0.1in; margin-bottom:0.3in; caption-side:bottom-outside}
|
||||
table {margin-top: 0.1in; margin-bottom:0.1in}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<caption><div class="spacer"></div></caption>
|
||||
<tbody>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
<tr><td><div class="spacer"></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><td><div class="spacer"></div></td></tr></tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -75,9 +75,7 @@ fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progres
|
|||
fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-007.xht multicol-count-002-ref.xht
|
||||
|
||||
fuzzy-if(Android,0-255,0-38) == table-caption-top-1.html table-caption-top-1-ref.html
|
||||
fuzzy-if(Android,0-255,0-38) pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-bottom-1.html table-caption-bottom-1-ref.html
|
||||
fuzzy-if(Android,0-244,0-27) pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-left-1.html table-caption-left-1-ref.html
|
||||
fuzzy-if(Android,0-244,0-27) pref(layout.css.caption-side-non-standard.enabled,true) == table-caption-right-1.html table-caption-right-1-ref.html
|
||||
fuzzy-if(Android,0-255,0-38) == table-caption-bottom-1.html table-caption-bottom-1-ref.html
|
||||
|
||||
== border-collapse-bevels-1a.html border-collapse-bevels-1-ref.html
|
||||
fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1b.html border-collapse-bevels-1-ref.html
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<style>
|
||||
html {
|
||||
font: 0px sans-serif;
|
||||
}
|
||||
body > div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.h {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.t {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background: silver;
|
||||
}
|
||||
.c {
|
||||
background: cyan;
|
||||
text-align: center;
|
||||
min-block-size: 20px;
|
||||
font-size: 12px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="h">
|
||||
<div class="c" style="display: inline-block; inline-size: min-content">table caption</div>
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
</div>
|
||||
|
||||
<div class="h">
|
||||
<div class="c" style="display: inline-block; inline-size: min-content">table caption</div>
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div>
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div>
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div>
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div>
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
</div>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<style>
|
||||
html {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
.h {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0;
|
||||
margin-bottom: 10px;
|
||||
caption-side: left;
|
||||
}
|
||||
td {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background: silver;
|
||||
padding: 0;
|
||||
}
|
||||
caption {
|
||||
background: cyan;
|
||||
min-block-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="h ltr">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="h rtl">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vlr ltr">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vlr rtl">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vrl ltr">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vrl rtl">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<style>
|
||||
html {
|
||||
font: 0px sans-serif;
|
||||
}
|
||||
body > div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.h {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.t {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background: silver;
|
||||
}
|
||||
.c {
|
||||
background: cyan;
|
||||
text-align: center;
|
||||
min-block-size: 20px;
|
||||
font-size: 12px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="h">
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
<div class="c" style="display: inline-block; inline-size: min-content">table caption</div>
|
||||
</div>
|
||||
|
||||
<div class="h">
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
<div class="c" style="display: inline-block; inline-size: min-content">table caption</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="t" style="display: inline-block"></div>
|
||||
<div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div>
|
||||
</div>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<style>
|
||||
html {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
.h {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0;
|
||||
margin-bottom: 10px;
|
||||
caption-side: right;
|
||||
}
|
||||
td {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background: silver;
|
||||
padding: 0;
|
||||
}
|
||||
caption {
|
||||
background: cyan;
|
||||
min-block-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="h ltr">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="h rtl">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vlr ltr">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vlr rtl">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vrl ltr">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
||||
<table class="vrl rtl">
|
||||
<caption>table caption</caption>
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
|
|
@ -5080,7 +5080,7 @@ var gCSSProperties = {
|
|||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: ["top"],
|
||||
other_values: ["bottom"],
|
||||
invalid_values: [],
|
||||
invalid_values: ["right", "left", "top-outside", "bottom-outside"],
|
||||
},
|
||||
"caret-color": {
|
||||
domProp: "caretColor",
|
||||
|
|
@ -11631,22 +11631,6 @@ function get_computed_value(cs, property) {
|
|||
return cs.getPropertyValue(property);
|
||||
}
|
||||
|
||||
const kNonStandardCaptionSideValues = [
|
||||
"right",
|
||||
"left",
|
||||
"top-outside",
|
||||
"bottom-outside",
|
||||
];
|
||||
if (IsCSSPropertyPrefEnabled("layout.css.caption-side-non-standard.enabled")) {
|
||||
gCSSProperties["caption-side"].other_values.push(
|
||||
...kNonStandardCaptionSideValues
|
||||
);
|
||||
} else {
|
||||
gCSSProperties["caption-side"].invalid_values.push(
|
||||
...kNonStandardCaptionSideValues
|
||||
);
|
||||
}
|
||||
|
||||
{
|
||||
const mozHiddenUnscrollableEnabled = IsCSSPropertyPrefEnabled(
|
||||
"layout.css.overflow-moz-hidden-unscrollable.enabled"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
#include "nsTableWrapperFrame.h"
|
||||
|
||||
#include "LayoutConstants.h"
|
||||
#include "mozilla/ComputedStyle.h"
|
||||
#include "mozilla/PresShell.h"
|
||||
#include "nsFrameManager.h"
|
||||
|
|
@ -159,12 +160,6 @@ void nsTableWrapperFrame::RemoveFrame(ChildListID aListID,
|
|||
// The inner frame can't be removed so this should be the caption
|
||||
MOZ_ASSERT(FrameChildListID::Caption == aListID, "can't remove inner frame");
|
||||
|
||||
if (HasSideCaption()) {
|
||||
// The old caption isize had an effect on the inner table isize, so
|
||||
// we're going to need to reflow it. Mark it dirty
|
||||
InnerTableFrame()->MarkSubtreeDirty();
|
||||
}
|
||||
|
||||
// Remove the frame and destroy it
|
||||
mCaptionFrames.DestroyFrame(aOldFrame);
|
||||
|
||||
|
|
@ -260,12 +255,8 @@ nscoord nsTableWrapperFrame::GetMinISize(gfxContext* aRenderingContext) {
|
|||
nscoord capISize = nsLayoutUtils::IntrinsicForContainer(
|
||||
aRenderingContext, mCaptionFrames.FirstChild(),
|
||||
IntrinsicISizeType::MinISize);
|
||||
if (HasSideCaption()) {
|
||||
iSize += capISize;
|
||||
} else {
|
||||
if (capISize > iSize) {
|
||||
iSize = capISize;
|
||||
}
|
||||
if (capISize > iSize) {
|
||||
iSize = capISize;
|
||||
}
|
||||
}
|
||||
return iSize;
|
||||
|
|
@ -278,33 +269,12 @@ nscoord nsTableWrapperFrame::GetPrefISize(gfxContext* aRenderingContext) {
|
|||
|
||||
maxISize = nsLayoutUtils::IntrinsicForContainer(
|
||||
aRenderingContext, InnerTableFrame(), IntrinsicISizeType::PrefISize);
|
||||
if (Maybe<StyleCaptionSide> captionSide = GetCaptionSide()) {
|
||||
switch (*captionSide) {
|
||||
case StyleCaptionSide::Left:
|
||||
case StyleCaptionSide::Right: {
|
||||
nscoord capMin = nsLayoutUtils::IntrinsicForContainer(
|
||||
aRenderingContext, mCaptionFrames.FirstChild(),
|
||||
IntrinsicISizeType::MinISize);
|
||||
maxISize += capMin;
|
||||
} break;
|
||||
default: {
|
||||
IntrinsicISizeType iwt;
|
||||
if (*captionSide == StyleCaptionSide::Top ||
|
||||
*captionSide == StyleCaptionSide::Bottom) {
|
||||
// Don't let the caption's pref isize expand the table's pref
|
||||
// isize.
|
||||
iwt = IntrinsicISizeType::MinISize;
|
||||
} else {
|
||||
MOZ_ASSERT(*captionSide == StyleCaptionSide::TopOutside ||
|
||||
*captionSide == StyleCaptionSide::BottomOutside,
|
||||
"unexpected caption side");
|
||||
iwt = IntrinsicISizeType::PrefISize;
|
||||
}
|
||||
nscoord capPref = nsLayoutUtils::IntrinsicForContainer(
|
||||
aRenderingContext, mCaptionFrames.FirstChild(), iwt);
|
||||
maxISize = std::max(maxISize, capPref);
|
||||
} break;
|
||||
}
|
||||
if (mCaptionFrames.NotEmpty()) {
|
||||
// Don't let the caption's pref isize expand the table's pref isize.
|
||||
const nscoord capMinISize = nsLayoutUtils::IntrinsicForContainer(
|
||||
aRenderingContext, mCaptionFrames.FirstChild(),
|
||||
IntrinsicISizeType::MinISize);
|
||||
maxISize = std::max(maxISize, capMinISize);
|
||||
}
|
||||
return maxISize;
|
||||
}
|
||||
|
|
@ -340,9 +310,8 @@ LogicalSize nsTableWrapperFrame::InnerTableShrinkWrapSize(
|
|||
// be applied to the inner table directly, so we don't need to subtract
|
||||
// caption-area when preparing innerOverrides for
|
||||
// nsTableFrame::ComputeSize().
|
||||
const LogicalSize areaOccupiedByCaption(aWM);
|
||||
StyleSizeOverrides innerOverrides = ComputeSizeOverridesForInnerTable(
|
||||
aTableFrame, aSizeOverrides, bpSize, areaOccupiedByCaption);
|
||||
aTableFrame, aSizeOverrides, bpSize, /* aBSizeOccupiedByCaption = */ 0);
|
||||
auto size =
|
||||
aTableFrame
|
||||
->ComputeSize(aRenderingContext, aWM, aCBSize, aAvailableISize,
|
||||
|
|
@ -389,8 +358,7 @@ StyleSize nsTableWrapperFrame::ReduceStyleSizeBy(
|
|||
StyleSizeOverrides nsTableWrapperFrame::ComputeSizeOverridesForInnerTable(
|
||||
const nsTableFrame* aTableFrame,
|
||||
const StyleSizeOverrides& aWrapperSizeOverrides,
|
||||
const LogicalSize& aBorderPadding,
|
||||
const LogicalSize& aAreaOccupiedByCaption) const {
|
||||
const LogicalSize& aBorderPadding, nscoord aBSizeOccupiedByCaption) const {
|
||||
if (aWrapperSizeOverrides.mApplyOverridesVerbatim ||
|
||||
!aWrapperSizeOverrides.HasAnyLengthOverrides()) {
|
||||
// We are asked to apply the size overrides directly to the inner table, or
|
||||
|
|
@ -399,7 +367,7 @@ StyleSizeOverrides nsTableWrapperFrame::ComputeSizeOverridesForInnerTable(
|
|||
}
|
||||
|
||||
const auto wm = aTableFrame->GetWritingMode();
|
||||
LogicalSize areaOccupied = aAreaOccupiedByCaption;
|
||||
LogicalSize areaOccupied(wm, 0, aBSizeOccupiedByCaption);
|
||||
if (aTableFrame->StylePosition()->mBoxSizing == StyleBoxSizing::Content) {
|
||||
// If the inner table frame has 'box-sizing: content', enlarge the occupied
|
||||
// area by adding border & padding because they should also be subtracted
|
||||
|
|
@ -486,65 +454,26 @@ LogicalSize nsTableWrapperFrame::ComputeAutoSize(
|
|||
}
|
||||
}
|
||||
|
||||
// Match the availableISize logic in Reflow.
|
||||
// Match the logic in Reflow() that sets aside space for the caption.
|
||||
Maybe<StyleCaptionSide> captionSide = GetCaptionSide();
|
||||
|
||||
// The result.ISize() is unconditionally set to a meaningful value in the
|
||||
// logic that follows, but the unconstrained BSize() value might be used for
|
||||
// cases where either BSize is indeed unconstrained).
|
||||
LogicalSize result(aWM, 0, NS_UNCONSTRAINEDSIZE);
|
||||
const LogicalSize innerTableSize = InnerTableShrinkWrapSize(
|
||||
aRenderingContext, InnerTableFrame(), aWM, aCBSize, kidAvailableISize,
|
||||
aSizeOverrides, flags);
|
||||
if (!captionSide) {
|
||||
result = InnerTableShrinkWrapSize(aRenderingContext, InnerTableFrame(), aWM,
|
||||
aCBSize, kidAvailableISize,
|
||||
aSizeOverrides, flags);
|
||||
} else if (*captionSide == StyleCaptionSide::Left ||
|
||||
*captionSide == StyleCaptionSide::Right) {
|
||||
const LogicalSize captionSize =
|
||||
CaptionShrinkWrapSize(aRenderingContext, mCaptionFrames.FirstChild(),
|
||||
aWM, aCBSize, kidAvailableISize, flags);
|
||||
const LogicalSize innerTableSize = InnerTableShrinkWrapSize(
|
||||
aRenderingContext, InnerTableFrame(), aWM, aCBSize,
|
||||
kidAvailableISize - captionSize.ISize(aWM), aSizeOverrides, flags);
|
||||
|
||||
result.ISize(aWM) = captionSize.ISize(aWM) + innerTableSize.ISize(aWM);
|
||||
if (captionSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE &&
|
||||
innerTableSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE) {
|
||||
result.BSize(aWM) =
|
||||
std::max(captionSize.BSize(aWM), innerTableSize.BSize(aWM));
|
||||
}
|
||||
} else if (*captionSide == StyleCaptionSide::Top ||
|
||||
*captionSide == StyleCaptionSide::Bottom) {
|
||||
const LogicalSize innerTableSize = InnerTableShrinkWrapSize(
|
||||
aRenderingContext, InnerTableFrame(), aWM, aCBSize, kidAvailableISize,
|
||||
aSizeOverrides, flags);
|
||||
const LogicalSize captionSize =
|
||||
CaptionShrinkWrapSize(aRenderingContext, mCaptionFrames.FirstChild(),
|
||||
aWM, aCBSize, innerTableSize.ISize(aWM), flags);
|
||||
result.ISize(aWM) =
|
||||
std::max(innerTableSize.ISize(aWM), captionSize.ISize(aWM));
|
||||
if (innerTableSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE &&
|
||||
captionSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE) {
|
||||
result.BSize(aWM) = innerTableSize.BSize(aWM) + captionSize.BSize(aWM);
|
||||
}
|
||||
} else {
|
||||
MOZ_ASSERT(*captionSide == StyleCaptionSide::TopOutside ||
|
||||
*captionSide == StyleCaptionSide::BottomOutside,
|
||||
"unexpected caption-side");
|
||||
const LogicalSize innerTableSize = InnerTableShrinkWrapSize(
|
||||
aRenderingContext, InnerTableFrame(), aWM, aCBSize, kidAvailableISize,
|
||||
aSizeOverrides, flags);
|
||||
const LogicalSize captionSize =
|
||||
CaptionShrinkWrapSize(aRenderingContext, mCaptionFrames.FirstChild(),
|
||||
aWM, aCBSize, kidAvailableISize, flags);
|
||||
result.ISize(aWM) =
|
||||
std::max(innerTableSize.ISize(aWM), captionSize.ISize(aWM));
|
||||
if (innerTableSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE &&
|
||||
captionSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE) {
|
||||
result.BSize(aWM) = innerTableSize.BSize(aWM) + captionSize.BSize(aWM);
|
||||
}
|
||||
return innerTableSize;
|
||||
}
|
||||
|
||||
return result;
|
||||
const LogicalSize captionSize =
|
||||
CaptionShrinkWrapSize(aRenderingContext, mCaptionFrames.FirstChild(), aWM,
|
||||
aCBSize, innerTableSize.ISize(aWM), flags);
|
||||
const nscoord iSize =
|
||||
std::max(innerTableSize.ISize(aWM), captionSize.ISize(aWM));
|
||||
nscoord bSize = NS_UNCONSTRAINEDSIZE;
|
||||
if (innerTableSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE &&
|
||||
captionSize.BSize(aWM) != NS_UNCONSTRAINEDSIZE) {
|
||||
bSize = innerTableSize.BSize(aWM) + captionSize.BSize(aWM);
|
||||
}
|
||||
return LogicalSize(aWM, iSize, bSize);
|
||||
}
|
||||
|
||||
Maybe<StyleCaptionSide> nsTableWrapperFrame::GetCaptionSide() const {
|
||||
|
|
@ -563,29 +492,10 @@ nscoord nsTableWrapperFrame::ComputeFinalBSize(
|
|||
const MaybeCaptionSide& aCaptionSide, const LogicalSize& aInnerSize,
|
||||
const LogicalSize& aCaptionSize, const LogicalMargin& aCaptionMargin,
|
||||
const WritingMode aWM) const {
|
||||
nscoord bSize = aInnerSize.BSize(aWM);
|
||||
|
||||
// compute the overall block-size
|
||||
if (aCaptionSide) {
|
||||
switch (*aCaptionSide) {
|
||||
case StyleCaptionSide::Top:
|
||||
case StyleCaptionSide::TopOutside:
|
||||
case StyleCaptionSide::Bottom:
|
||||
case StyleCaptionSide::BottomOutside:
|
||||
bSize = aInnerSize.BSize(aWM) +
|
||||
std::max(
|
||||
0, aCaptionSize.BSize(aWM) + aCaptionMargin.BStartEnd(aWM));
|
||||
break;
|
||||
case StyleCaptionSide::Left:
|
||||
case StyleCaptionSide::Right:
|
||||
bSize = std::max(aInnerSize.BSize(aWM),
|
||||
aCaptionSize.BSize(aWM) + aCaptionMargin.BEnd(aWM));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// negative sizes can upset overflow-area code
|
||||
return std::max(bSize, 0);
|
||||
return std::max(0, aInnerSize.BSize(aWM) +
|
||||
std::max(0, aCaptionSize.BSize(aWM) +
|
||||
aCaptionMargin.BStartEnd(aWM)));
|
||||
}
|
||||
|
||||
nsresult nsTableWrapperFrame::GetCaptionOrigin(
|
||||
|
|
@ -608,45 +518,13 @@ nsresult nsTableWrapperFrame::GetCaptionOrigin(
|
|||
NS_AUTOMARGIN != aCaptionMargin.BEnd(aWM),
|
||||
"The computed caption margin is auto?");
|
||||
|
||||
// inline-dir computation
|
||||
switch (aCaptionSide) {
|
||||
case StyleCaptionSide::Top:
|
||||
case StyleCaptionSide::TopOutside:
|
||||
case StyleCaptionSide::Bottom:
|
||||
case StyleCaptionSide::BottomOutside:
|
||||
aOrigin.I(aWM) = aCaptionMargin.IStart(aWM);
|
||||
break;
|
||||
case StyleCaptionSide::Left:
|
||||
case StyleCaptionSide::Right:
|
||||
aOrigin.I(aWM) = aCaptionMargin.IStart(aWM);
|
||||
if (aWM.IsBidiLTR() == (aCaptionSide == StyleCaptionSide::Right)) {
|
||||
aOrigin.I(aWM) += aInnerSize.ISize(aWM);
|
||||
}
|
||||
break;
|
||||
}
|
||||
aOrigin.I(aWM) = aCaptionMargin.IStart(aWM);
|
||||
|
||||
// block-dir computation
|
||||
switch (aCaptionSide) {
|
||||
case StyleCaptionSide::Right:
|
||||
case StyleCaptionSide::Left:
|
||||
aOrigin.B(aWM) = 0;
|
||||
switch (GetCaptionVerticalAlign()) {
|
||||
case StyleVerticalAlignKeyword::Middle:
|
||||
aOrigin.B(aWM) = std::max(
|
||||
0, (aInnerSize.BSize(aWM) - aCaptionSize.BSize(aWM)) / 2);
|
||||
break;
|
||||
case StyleVerticalAlignKeyword::Bottom:
|
||||
aOrigin.B(aWM) =
|
||||
std::max(0, aInnerSize.BSize(aWM) - aCaptionSize.BSize(aWM));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case StyleCaptionSide::BottomOutside:
|
||||
case StyleCaptionSide::Bottom:
|
||||
aOrigin.B(aWM) = aInnerSize.BSize(aWM) + aCaptionMargin.BStart(aWM);
|
||||
break;
|
||||
case StyleCaptionSide::TopOutside:
|
||||
case StyleCaptionSide::Top:
|
||||
aOrigin.B(aWM) = aCaptionMargin.BStart(aWM);
|
||||
break;
|
||||
|
|
@ -670,40 +548,12 @@ nsresult nsTableWrapperFrame::GetInnerOrigin(
|
|||
return NS_OK;
|
||||
}
|
||||
|
||||
nscoord minCapISize = aCaptionSize.ISize(aWM) + aCaptionMargin.IStartEnd(aWM);
|
||||
|
||||
// inline-dir computation
|
||||
if (aCaptionSide && IsSideCaption(*aCaptionSide)) {
|
||||
aOrigin.I(aWM) =
|
||||
(aWM.IsBidiLTR() == (*aCaptionSide == StyleCaptionSide::Left))
|
||||
? minCapISize
|
||||
: 0;
|
||||
}
|
||||
|
||||
// block-dir computation
|
||||
if (aCaptionSide) {
|
||||
switch (*aCaptionSide) {
|
||||
case StyleCaptionSide::Bottom:
|
||||
case StyleCaptionSide::BottomOutside:
|
||||
// Leave at zero.
|
||||
break;
|
||||
case StyleCaptionSide::Left:
|
||||
case StyleCaptionSide::Right:
|
||||
switch (GetCaptionVerticalAlign()) {
|
||||
case StyleVerticalAlignKeyword::Middle:
|
||||
aOrigin.B(aWM) = std::max(
|
||||
0, (aCaptionSize.BSize(aWM) - aInnerSize.BSize(aWM)) / 2);
|
||||
break;
|
||||
case StyleVerticalAlignKeyword::Bottom:
|
||||
aOrigin.B(aWM) =
|
||||
std::max(0, aCaptionSize.BSize(aWM) - aInnerSize.BSize(aWM));
|
||||
break;
|
||||
default:
|
||||
// Leave at zero.
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case StyleCaptionSide::TopOutside:
|
||||
case StyleCaptionSide::Top:
|
||||
aOrigin.B(aWM) =
|
||||
aCaptionSize.BSize(aWM) + aCaptionMargin.BStartEnd(aWM);
|
||||
|
|
@ -713,44 +563,18 @@ nsresult nsTableWrapperFrame::GetInnerOrigin(
|
|||
return NS_OK;
|
||||
}
|
||||
|
||||
LogicalSize nsTableWrapperFrame::GetAreaOccupiedByCaption(
|
||||
StyleCaptionSide aCaptionSide,
|
||||
const mozilla::LogicalSize& aCaptionMarginBoxSize) const {
|
||||
const WritingMode wm = GetWritingMode();
|
||||
LogicalSize area(wm);
|
||||
|
||||
switch (aCaptionSide) {
|
||||
case StyleCaptionSide::Top:
|
||||
case StyleCaptionSide::Bottom:
|
||||
case StyleCaptionSide::TopOutside:
|
||||
case StyleCaptionSide::BottomOutside:
|
||||
area.BSize(wm) = aCaptionMarginBoxSize.BSize(wm);
|
||||
break;
|
||||
case StyleCaptionSide::Left:
|
||||
case StyleCaptionSide::Right:
|
||||
area.ISize(wm) = aCaptionMarginBoxSize.ISize(wm);
|
||||
break;
|
||||
}
|
||||
|
||||
return area;
|
||||
}
|
||||
|
||||
void nsTableWrapperFrame::CreateReflowInputForInnerTable(
|
||||
nsPresContext* aPresContext, nsTableFrame* aTableFrame,
|
||||
const ReflowInput& aOuterRI, Maybe<ReflowInput>& aChildRI,
|
||||
const nscoord aAvailISize,
|
||||
const Maybe<LogicalSize>& aAreaOccupiedByCaption) const {
|
||||
const nscoord aAvailISize, nscoord aBSizeOccupiedByCaption) const {
|
||||
MOZ_ASSERT(InnerTableFrame() == aTableFrame);
|
||||
|
||||
const WritingMode wm = aTableFrame->GetWritingMode();
|
||||
const LogicalSize areaOccupiedByCaption =
|
||||
aAreaOccupiedByCaption ? *aAreaOccupiedByCaption : LogicalSize(wm);
|
||||
|
||||
// If we have a caption occupied our content-box area, reduce the available
|
||||
// block-size by the amount.
|
||||
nscoord availBSize = aOuterRI.AvailableBSize();
|
||||
if (availBSize != NS_UNCONSTRAINEDSIZE) {
|
||||
availBSize = std::max(0, availBSize - areaOccupiedByCaption.BSize(wm));
|
||||
availBSize = std::max(0, availBSize - aBSizeOccupiedByCaption);
|
||||
}
|
||||
const LogicalSize availSize(wm, aAvailISize, availBSize);
|
||||
|
||||
|
|
@ -765,11 +589,10 @@ void nsTableWrapperFrame::CreateReflowInputForInnerTable(
|
|||
// by the table wrapper, so we need to get our margin from aOuterRI.
|
||||
if (IsGridItem()) {
|
||||
const LogicalMargin margin = aOuterRI.ComputedLogicalMargin(wm);
|
||||
cbSize->ISize(wm) = std::max(0, cbSize->ISize(wm) - margin.IStartEnd(wm) -
|
||||
areaOccupiedByCaption.ISize(wm));
|
||||
cbSize->ISize(wm) = std::max(0, cbSize->ISize(wm) - margin.IStartEnd(wm));
|
||||
if (cbSize->BSize(wm) != NS_UNCONSTRAINEDSIZE) {
|
||||
cbSize->BSize(wm) = std::max(0, cbSize->BSize(wm) - margin.BStartEnd(wm) -
|
||||
areaOccupiedByCaption.BSize(wm));
|
||||
aBSizeOccupiedByCaption);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -800,7 +623,7 @@ void nsTableWrapperFrame::CreateReflowInputForInnerTable(
|
|||
|
||||
StyleSizeOverrides innerOverrides = ComputeSizeOverridesForInnerTable(
|
||||
aTableFrame, aOuterRI.mStyleSizeOverrides, borderPadding->Size(wm),
|
||||
areaOccupiedByCaption);
|
||||
aBSizeOccupiedByCaption);
|
||||
|
||||
aChildRI.emplace(aPresContext, aOuterRI, aTableFrame, availSize, Nothing(),
|
||||
ReflowInput::InitFlag::CallerWillInit, innerOverrides);
|
||||
|
|
@ -824,8 +647,7 @@ void nsTableWrapperFrame::CreateReflowInputForCaption(
|
|||
// See if we need to reset mIsTopOfPage flag.
|
||||
if (aChildRI->mFlags.mIsTopOfPage) {
|
||||
if (auto captionSide = GetCaptionSide()) {
|
||||
if (*captionSide == StyleCaptionSide::Bottom ||
|
||||
*captionSide == StyleCaptionSide::BottomOutside) {
|
||||
if (*captionSide == StyleCaptionSide::Bottom) {
|
||||
aChildRI->mFlags.mIsTopOfPage = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -908,62 +730,32 @@ void nsTableWrapperFrame::Reflow(nsPresContext* aPresContext,
|
|||
|
||||
MOZ_ASSERT(mCaptionFrames.NotEmpty() == captionSide.isSome());
|
||||
|
||||
if (!captionSide) {
|
||||
// We don't have a caption.
|
||||
CreateReflowInputForInnerTable(aPresContext, InnerTableFrame(), aOuterRI,
|
||||
innerRI, contentBoxISize);
|
||||
} else if (*captionSide == StyleCaptionSide::Left ||
|
||||
*captionSide == StyleCaptionSide::Right) {
|
||||
// ComputeAutoSize takes care of making side captions small. Compute
|
||||
// the caption's size first, and tell the table to fit in what's left.
|
||||
CreateReflowInputForCaption(aPresContext, mCaptionFrames.FirstChild(),
|
||||
aOuterRI, captionRI, contentBoxISize);
|
||||
captionWM = captionRI->GetWritingMode();
|
||||
nscoord innerAvailISize =
|
||||
contentBoxISize -
|
||||
captionRI->ComputedSizeWithMarginBorderPadding(wm).ISize(wm);
|
||||
CreateReflowInputForInnerTable(aPresContext, InnerTableFrame(), aOuterRI,
|
||||
innerRI, innerAvailISize);
|
||||
} else if (*captionSide == StyleCaptionSide::Top ||
|
||||
*captionSide == StyleCaptionSide::Bottom) {
|
||||
// Compute the table's size first, and then prevent the caption from
|
||||
// being larger in the inline dir unless it has to be.
|
||||
//
|
||||
// Note that CSS 2.1 (but not 2.0) says:
|
||||
// The width of the anonymous box is the border-edge width of the
|
||||
// table box inside it
|
||||
// We don't actually make our anonymous box that isize (if we did,
|
||||
// it would break 'auto' margins), but this effectively does that.
|
||||
CreateReflowInputForInnerTable(aPresContext, InnerTableFrame(), aOuterRI,
|
||||
innerRI, contentBoxISize);
|
||||
// It's good that CSS 2.1 says not to include margins, since we
|
||||
// can't, since they already been converted so they exactly
|
||||
// fill the available isize (ignoring the margin on one side if
|
||||
// neither are auto). (We take advantage of that later when we call
|
||||
// GetCaptionOrigin, though.)
|
||||
// Compute the table's size first, and then prevent the caption from
|
||||
// being larger in the inline dir unless it has to be.
|
||||
//
|
||||
// Note that CSS 2.1 (but not 2.0) says:
|
||||
// The width of the anonymous box is the border-edge width of the
|
||||
// table box inside it
|
||||
// We don't actually make our anonymous box that isize (if we did,
|
||||
// it would break 'auto' margins), but this effectively does that.
|
||||
CreateReflowInputForInnerTable(aPresContext, InnerTableFrame(), aOuterRI,
|
||||
innerRI, contentBoxISize);
|
||||
if (captionSide) {
|
||||
// It's good that CSS 2.1 says not to include margins, since we can't, since
|
||||
// they already been converted so they exactly fill the available isize
|
||||
// (ignoring the margin on one side if neither are auto). (We take
|
||||
// advantage of that later when we call GetCaptionOrigin, though.)
|
||||
nscoord innerBorderISize =
|
||||
innerRI->ComputedSizeWithBorderPadding(wm).ISize(wm);
|
||||
CreateReflowInputForCaption(aPresContext, mCaptionFrames.FirstChild(),
|
||||
aOuterRI, captionRI, innerBorderISize);
|
||||
captionWM = captionRI->GetWritingMode();
|
||||
} else {
|
||||
MOZ_ASSERT(*captionSide == StyleCaptionSide::TopOutside ||
|
||||
*captionSide == StyleCaptionSide::BottomOutside,
|
||||
"unexpected caption-side");
|
||||
// Size the table and the caption independently.
|
||||
captionWM = mCaptionFrames.FirstChild()->GetWritingMode();
|
||||
CreateReflowInputForCaption(
|
||||
aPresContext, mCaptionFrames.FirstChild(), aOuterRI, captionRI,
|
||||
aOuterRI.ComputedSize(captionWM).ISize(captionWM));
|
||||
CreateReflowInputForInnerTable(aPresContext, InnerTableFrame(), aOuterRI,
|
||||
innerRI, contentBoxISize);
|
||||
}
|
||||
|
||||
// First reflow the caption.
|
||||
Maybe<ReflowOutput> captionMet;
|
||||
LogicalSize captionSize(wm);
|
||||
LogicalMargin captionMargin(wm);
|
||||
Maybe<LogicalSize> areaOccupiedByCaption;
|
||||
if (captionSide) {
|
||||
captionMet.emplace(wm);
|
||||
// We intentionally don't merge capStatus into aStatus, since we currently
|
||||
|
|
@ -973,16 +765,15 @@ void nsTableWrapperFrame::Reflow(nsPresContext* aPresContext,
|
|||
*captionMet, capStatus);
|
||||
captionSize = captionMet->Size(wm);
|
||||
captionMargin = captionRI->ComputedLogicalMargin(wm);
|
||||
areaOccupiedByCaption.emplace(GetAreaOccupiedByCaption(
|
||||
*captionSide, captionSize + captionMargin.Size(wm)));
|
||||
|
||||
if (!areaOccupiedByCaption->IsAllZero()) {
|
||||
nscoord bSizeOccupiedByCaption =
|
||||
captionSize.BSize(wm) + captionMargin.BStartEnd(wm);
|
||||
if (bSizeOccupiedByCaption) {
|
||||
// Reset the inner table's ReflowInput to reduce various sizes because of
|
||||
// the area occupied by caption.
|
||||
innerRI.reset();
|
||||
CreateReflowInputForInnerTable(aPresContext, InnerTableFrame(), aOuterRI,
|
||||
innerRI, contentBoxISize,
|
||||
areaOccupiedByCaption);
|
||||
bSizeOccupiedByCaption);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -200,16 +200,6 @@ class nsTableWrapperFrame : public nsContainerFrame {
|
|||
// having "physical" names.)
|
||||
MaybeCaptionSide GetCaptionSide() const;
|
||||
|
||||
bool HasSideCaption() const {
|
||||
auto captionSide = GetCaptionSide();
|
||||
return captionSide && IsSideCaption(*captionSide);
|
||||
}
|
||||
|
||||
static bool IsSideCaption(const mozilla::StyleCaptionSide aCaptionSide) {
|
||||
return aCaptionSide == mozilla::StyleCaptionSide::Left ||
|
||||
aCaptionSide == mozilla::StyleCaptionSide::Right;
|
||||
}
|
||||
|
||||
mozilla::StyleVerticalAlignKeyword GetCaptionVerticalAlign() const;
|
||||
|
||||
nscoord ComputeFinalBSize(const MaybeCaptionSide&,
|
||||
|
|
@ -234,26 +224,15 @@ class nsTableWrapperFrame : public nsContainerFrame {
|
|||
mozilla::LogicalPoint& aOrigin,
|
||||
mozilla::WritingMode aWM);
|
||||
|
||||
// Returns the area occupied by the caption within our content box depending
|
||||
// on the caption side.
|
||||
//
|
||||
// @param aCaptionMarginBoxSize the caption's margin-box size in our
|
||||
// writing-mode.
|
||||
mozilla::LogicalSize GetAreaOccupiedByCaption(
|
||||
mozilla::StyleCaptionSide,
|
||||
const mozilla::LogicalSize& aCaptionMarginBoxSize) const;
|
||||
|
||||
// Create and init the child reflow input, using passed-in aChildRI, so that
|
||||
// caller can use it after we return.
|
||||
//
|
||||
// @param aAreaOccupiedByCaption the value computed by
|
||||
// GetAreaOccupiedByCaption() if we have a caption.
|
||||
// @param aBSizeOccupiedByCaption the block size occupied by the caption
|
||||
// within our content box.
|
||||
void CreateReflowInputForInnerTable(
|
||||
nsPresContext* aPresContext, nsTableFrame* aTableFrame,
|
||||
const ReflowInput& aOuterRI, Maybe<ReflowInput>& aChildRI,
|
||||
const nscoord aAvailISize,
|
||||
const mozilla::Maybe<mozilla::LogicalSize>& aAreaOccupiedByCaption =
|
||||
mozilla::Nothing()) const;
|
||||
const nscoord aAvailISize, nscoord aBSizeOccupiedByCaption = 0) const;
|
||||
void CreateReflowInputForCaption(nsPresContext* aPresContext,
|
||||
nsIFrame* aCaptionFrame,
|
||||
const ReflowInput& aOuterRI,
|
||||
|
|
@ -310,7 +289,7 @@ class nsTableWrapperFrame : public nsContainerFrame {
|
|||
const nsTableFrame* aTableFrame,
|
||||
const mozilla::StyleSizeOverrides& aWrapperSizeOverrides,
|
||||
const mozilla::LogicalSize& aBorderPadding,
|
||||
const mozilla::LogicalSize& aAreaOccupiedByCaption) const;
|
||||
nscoord aBSizeOccupiedByCaption) const;
|
||||
|
||||
private:
|
||||
nscoord GetFallbackLogicalBaseline(mozilla::WritingMode aWritingMode) const;
|
||||
|
|
|
|||
|
|
@ -8007,13 +8007,6 @@
|
|||
value: -1
|
||||
mirror: always
|
||||
|
||||
# Whether non-standard caption-side values are enabled
|
||||
- name: layout.css.caption-side-non-standard.enabled
|
||||
type: RelaxedAtomicBool
|
||||
value: false
|
||||
mirror: always
|
||||
rust: true
|
||||
|
||||
# Whether @layer is enabled
|
||||
- name: layout.css.cascade-layers.enabled
|
||||
type: RelaxedAtomicBool
|
||||
|
|
|
|||
|
|
@ -8,15 +8,9 @@
|
|||
///
|
||||
/// Note that despite having "physical" names, these are actually interpreted
|
||||
/// according to the table's writing-mode: Top and Bottom are treated as
|
||||
/// block-start and -end respectively, and Left and Right are treated as
|
||||
/// line-start and -end.
|
||||
/// block-start and -end respectively.
|
||||
///
|
||||
/// https://drafts.csswg.org/css-tables/#propdef-caption-side
|
||||
#[cfg(feature = "gecko")]
|
||||
fn caption_side_non_standard_enabled(_: &crate::parser::ParserContext) -> bool {
|
||||
static_prefs::pref!("layout.css.caption-side-non-standard.enabled")
|
||||
}
|
||||
|
||||
#[allow(missing_docs)]
|
||||
#[derive(
|
||||
Clone,
|
||||
|
|
@ -39,16 +33,4 @@ fn caption_side_non_standard_enabled(_: &crate::parser::ParserContext) -> bool {
|
|||
pub enum CaptionSide {
|
||||
Top,
|
||||
Bottom,
|
||||
#[cfg(feature = "gecko")]
|
||||
#[parse(condition = "caption_side_non_standard_enabled")]
|
||||
Right,
|
||||
#[cfg(feature = "gecko")]
|
||||
#[parse(condition = "caption_side_non_standard_enabled")]
|
||||
Left,
|
||||
#[cfg(feature = "gecko")]
|
||||
#[parse(condition = "caption_side_non_standard_enabled")]
|
||||
TopOutside,
|
||||
#[cfg(feature = "gecko")]
|
||||
#[parse(condition = "caption_side_non_standard_enabled")]
|
||||
BottomOutside,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[floats-wrap-bfc-006b.xht]
|
||||
prefs: [layout.css.caption-side-non-standard.enabled:true]
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[floats-wrap-bfc-006c.xht]
|
||||
prefs: [layout.css.caption-side-non-standard.enabled:true]
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head>
|
||||
<title>CSS Test: Test for flow around floats</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" />
|
||||
<link rel="match" href="floats-wrap-bfc-006b-ref.xht"/>
|
||||
<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="Content-Style-Type" content="text/css" />
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 16px; }
|
||||
|
||||
table { margin: 0; border-spacing: 0; }
|
||||
caption, td, th { padding: 0; vertical-align: top; text-align: left; }
|
||||
|
||||
table table caption { background: yellow; }
|
||||
table table { background: purple; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table width="300" style="background: aqua"><tbody><tr><td>
|
||||
<div style="float:left; clear:left; background:blue; width:150px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:145px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:140px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:135px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:130px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:125px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:120px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:115px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:110px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:105px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:100px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:95px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:90px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:85px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:80px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:75px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:70px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:65px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:60px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:55px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:50px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:45px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:40px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:35px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:30px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:25px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:20px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:15px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:10px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:5px; height:1px"></div>
|
||||
<table>
|
||||
<caption style="caption-side: left; height:30px; width: 90px;">Caption</caption>
|
||||
<tbody><tr><td><div style="height: 30px; width: 102px">Cell</div></td></tr>
|
||||
</tbody></table>
|
||||
</td></tr></tbody></table>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head>
|
||||
<title>CSS Test: Test for flow around floats</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" />
|
||||
<link rel="match" href="floats-wrap-bfc-006c-ref.xht"/>
|
||||
<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="Content-Style-Type" content="text/css" />
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 16px; }
|
||||
|
||||
table { margin: 0; border-spacing: 0; }
|
||||
caption, td, th { padding: 0; vertical-align: top; text-align: left; }
|
||||
|
||||
table table caption { background: yellow; }
|
||||
table table { background: purple; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table width="300" style="background: aqua"><tbody><tr><td>
|
||||
<div style="float:left; clear:left; background:blue; width:150px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:145px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:140px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:135px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:130px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:125px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:120px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:115px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:110px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:105px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:100px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:95px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:90px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:85px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:80px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:75px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:70px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:65px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:60px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:55px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:50px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:45px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:40px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:35px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:30px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:25px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:20px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:15px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:10px; height:1px"></div>
|
||||
<div style="float:left; clear:left; background:blue; width:5px; height:1px"></div>
|
||||
<table>
|
||||
<caption style="caption-side: right; height:30px; width: 90px;">Caption</caption>
|
||||
<tbody><tr><td><div style="height: 30px; width: 102px">Cell</div></td></tr>
|
||||
</tbody></table>
|
||||
</td></tr></tbody></table>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
Загрузка…
Ссылка в новой задаче