mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 01:05:45 +00:00
Bug 1651530 - Apply min/max-block-size to tables. r=mats
Differential Revision: https://phabricator.services.mozilla.com/D84130
This commit is contained in:
parent
e0ab27174e
commit
1a2268d278
@ -2304,8 +2304,8 @@ void ReflowInput::InitConstraints(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Calculate the computed block size
|
// Calculate the computed block size
|
||||||
if ((StyleDisplay::TableColumn == mStyleDisplay->mDisplay) ||
|
if (StyleDisplay::TableColumn == mStyleDisplay->mDisplay ||
|
||||||
(StyleDisplay::TableColumnGroup == mStyleDisplay->mDisplay)) {
|
StyleDisplay::TableColumnGroup == mStyleDisplay->mDisplay) {
|
||||||
// 'blockSize' property doesn't apply to table columns and column groups
|
// 'blockSize' property doesn't apply to table columns and column groups
|
||||||
isAutoBSize = true;
|
isAutoBSize = true;
|
||||||
}
|
}
|
||||||
@ -2319,10 +2319,9 @@ void ReflowInput::InitConstraints(
|
|||||||
blockSize.AsLengthPercentage());
|
blockSize.AsLengthPercentage());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Doesn't apply to table elements
|
// Doesn't apply to internal table elements
|
||||||
ComputedMinWidth() = ComputedMinHeight() = 0;
|
ComputedMinWidth() = ComputedMinHeight() = 0;
|
||||||
ComputedMaxWidth() = ComputedMaxHeight() = NS_UNCONSTRAINEDSIZE;
|
ComputedMaxWidth() = ComputedMaxHeight() = NS_UNCONSTRAINEDSIZE;
|
||||||
|
|
||||||
} else if (NS_FRAME_GET_TYPE(mFrameType) == NS_CSS_FRAME_TYPE_ABSOLUTE) {
|
} else if (NS_FRAME_GET_TYPE(mFrameType) == NS_CSS_FRAME_TYPE_ABSOLUTE) {
|
||||||
// XXX not sure if this belongs here or somewhere else - cwk
|
// XXX not sure if this belongs here or somewhere else - cwk
|
||||||
InitAbsoluteConstraints(aPresContext, cbri,
|
InitAbsoluteConstraints(aPresContext, cbri,
|
||||||
|
@ -59,13 +59,13 @@ x { display:block; width:16px; height:16px; }
|
|||||||
<pre><!--min-height:20px--></pre>
|
<pre><!--min-height:20px--></pre>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 wfill"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 wfill"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="h16"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h16 wfill"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20 wfill"><td><x></x></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h16 wfill"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20 wfill"><td><x></x></td></table></div>
|
||||||
|
|
||||||
<pre><!--min-height:0--></pre>
|
<pre><!--min-height:0--></pre>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 wfill"><td><x></x></td></table></div>
|
<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 wfill"><td><x></x></td></table></div>
|
||||||
|
@ -82,13 +82,13 @@ t { display:block; width:6px; height:6px; }
|
|||||||
<pre><!--min-height:20px--></pre>
|
<pre><!--min-height:20px--></pre>
|
||||||
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="end h8 w8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="end mh20 w8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill as h8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill an h8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
|
|
||||||
<pre><!--min-height:0--></pre>
|
<pre><!--min-height:0--></pre>
|
||||||
<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
|
@ -53,7 +53,7 @@ t { display:block; width:6px; height:6px; }
|
|||||||
.sa.w20 caption, .na.w20 caption, .end.w20 caption { width:px; }
|
.sa.w20 caption, .na.w20 caption, .end.w20 caption { width:px; }
|
||||||
.r .as, .r .an, .r .end { margin-top:-14px; }
|
.r .as, .r .an, .r .end { margin-top:-14px; }
|
||||||
.as.h20, .an.h20, .end.h20 { margin-top:12px; }
|
.as.h20, .an.h20, .end.h20 { margin-top:12px; }
|
||||||
.r .as.h20, .r .an.h20, .r .end.h20 { margin-top:-16px; }
|
.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, .r .na, .r .end { margin-left:6px; }
|
||||||
.r .sa.w20, .r .na.w20, .r .end.w20 { 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; }
|
.r .sa caption, .r .na caption, .r .end caption { width:aauto; }
|
||||||
@ -74,13 +74,13 @@ t { display:block; width:6px; height:6px; }
|
|||||||
<pre><!--min-height:20px--></pre>
|
<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="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="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h8 w8"><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"><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="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"><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="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 h8"><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 h8"><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>
|
<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="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
|
||||||
|
@ -63,7 +63,7 @@ select[size="4"],iframe,textarea,hr { height:10px; margin:0; }
|
|||||||
|
|
||||||
<div class="test">…</div>
|
<div class="test">…</div>
|
||||||
<div class="test"><span style="display:inline-block;"></span></div>
|
<div class="test"><span style="display:inline-block;"></span></div>
|
||||||
<div class="test"></div>
|
<div class="test"><span style="display:inline-table;"></span></div>
|
||||||
<div class="test"><span style="display:list-item;"></span></div>
|
<div class="test"><span style="display:list-item;"></span></div>
|
||||||
<div class="test"><span style="display:block;"></span></div>
|
<div class="test"><span style="display:block;"></span></div>
|
||||||
<div class="test rel">1<span style="position:relative;"></span></div>
|
<div class="test rel">1<span style="position:relative;"></span></div>
|
||||||
|
@ -1790,9 +1790,11 @@ void nsTableFrame::Reflow(nsPresContext* aPresContext,
|
|||||||
// when there is a specified table bsize
|
// when there is a specified table bsize
|
||||||
if (!GetPrevInFlow() &&
|
if (!GetPrevInFlow() &&
|
||||||
NS_UNCONSTRAINEDSIZE != aReflowInput.AvailableBSize()) {
|
NS_UNCONSTRAINEDSIZE != aReflowInput.AvailableBSize()) {
|
||||||
nscoord tableSpecifiedBSize = CalcBorderBoxBSize(aReflowInput);
|
LogicalMargin bp = GetChildAreaOffset(wm, &aReflowInput);
|
||||||
if ((tableSpecifiedBSize > 0) &&
|
nscoord tableSpecifiedBSize =
|
||||||
(tableSpecifiedBSize != NS_UNCONSTRAINEDSIZE)) {
|
CalcBorderBoxBSize(aReflowInput, bp, NS_UNCONSTRAINEDSIZE);
|
||||||
|
if (tableSpecifiedBSize > 0 &&
|
||||||
|
tableSpecifiedBSize != NS_UNCONSTRAINEDSIZE) {
|
||||||
needToInitiateSpecialReflow = true;
|
needToInitiateSpecialReflow = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -3160,22 +3162,19 @@ void nsTableFrame::CalcDesiredBSize(const ReflowInput& aReflowInput,
|
|||||||
// get the natural bsize based on the last child's (row group) rect
|
// get the natural bsize based on the last child's (row group) rect
|
||||||
RowGroupArray rowGroups;
|
RowGroupArray rowGroups;
|
||||||
OrderRowGroups(rowGroups);
|
OrderRowGroups(rowGroups);
|
||||||
|
nscoord desiredBSize = borderPadding.BStartEnd(wm);
|
||||||
if (rowGroups.IsEmpty()) {
|
if (rowGroups.IsEmpty()) {
|
||||||
// tables can be used as rectangular items without content
|
if (eCompatibility_NavQuirks == PresContext()->CompatibilityMode()) {
|
||||||
nscoord tableSpecifiedBSize = CalcBorderBoxBSize(aReflowInput);
|
|
||||||
if ((NS_UNCONSTRAINEDSIZE != tableSpecifiedBSize) &&
|
|
||||||
(tableSpecifiedBSize > 0) &&
|
|
||||||
eCompatibility_NavQuirks != PresContext()->CompatibilityMode()) {
|
|
||||||
// empty tables should not have a size in quirks mode
|
// empty tables should not have a size in quirks mode
|
||||||
aDesiredSize.BSize(wm) = tableSpecifiedBSize;
|
|
||||||
} else {
|
|
||||||
aDesiredSize.BSize(wm) = 0;
|
aDesiredSize.BSize(wm) = 0;
|
||||||
|
} else {
|
||||||
|
aDesiredSize.BSize(wm) =
|
||||||
|
CalcBorderBoxBSize(aReflowInput, borderPadding, desiredBSize);
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
int32_t rowCount = cellMap->GetRowCount();
|
int32_t rowCount = cellMap->GetRowCount();
|
||||||
int32_t colCount = cellMap->GetColCount();
|
int32_t colCount = cellMap->GetColCount();
|
||||||
nscoord desiredBSize = borderPadding.BStartEnd(wm);
|
|
||||||
if (rowCount > 0 && colCount > 0) {
|
if (rowCount > 0 && colCount > 0) {
|
||||||
desiredBSize += GetRowSpacing(-1);
|
desiredBSize += GetRowSpacing(-1);
|
||||||
for (uint32_t rgIdx = 0; rgIdx < rowGroups.Length(); rgIdx++) {
|
for (uint32_t rgIdx = 0; rgIdx < rowGroups.Length(); rgIdx++) {
|
||||||
@ -3187,22 +3186,27 @@ void nsTableFrame::CalcDesiredBSize(const ReflowInput& aReflowInput,
|
|||||||
|
|
||||||
// see if a specified table bsize requires dividing additional space to rows
|
// see if a specified table bsize requires dividing additional space to rows
|
||||||
if (!GetPrevInFlow()) {
|
if (!GetPrevInFlow()) {
|
||||||
nscoord tableSpecifiedBSize = CalcBorderBoxBSize(aReflowInput);
|
nscoord bSize =
|
||||||
if ((tableSpecifiedBSize > 0) &&
|
CalcBorderBoxBSize(aReflowInput, borderPadding, desiredBSize);
|
||||||
(tableSpecifiedBSize != NS_UNCONSTRAINEDSIZE) &&
|
if (bSize > desiredBSize) {
|
||||||
(tableSpecifiedBSize > desiredBSize)) {
|
|
||||||
// proportionately distribute the excess bsize to unconstrained rows in
|
// proportionately distribute the excess bsize to unconstrained rows in
|
||||||
// each unconstrained row group.
|
// each unconstrained row group.
|
||||||
DistributeBSizeToRows(aReflowInput, tableSpecifiedBSize - desiredBSize);
|
DistributeBSizeToRows(aReflowInput, bSize - desiredBSize);
|
||||||
// this might have changed the overflow area incorporate the childframe
|
// this might have changed the overflow area incorporate the childframe
|
||||||
// overflow area.
|
// overflow area.
|
||||||
for (nsIFrame* kidFrame : mFrames) {
|
for (nsIFrame* kidFrame : mFrames) {
|
||||||
ConsiderChildOverflow(aDesiredSize.mOverflowAreas, kidFrame);
|
ConsiderChildOverflow(aDesiredSize.mOverflowAreas, kidFrame);
|
||||||
}
|
}
|
||||||
desiredBSize = tableSpecifiedBSize;
|
aDesiredSize.BSize(wm) = bSize;
|
||||||
|
} else {
|
||||||
|
// Tables don't shrink below their intrinsic size, apparently, even when
|
||||||
|
// constrained by stuff like flex / grid or what not.
|
||||||
|
aDesiredSize.BSize(wm) = desiredBSize;
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
// FIXME(emilio): Is this right? This only affects fragmented tables...
|
||||||
|
aDesiredSize.BSize(wm) = desiredBSize;
|
||||||
}
|
}
|
||||||
aDesiredSize.BSize(wm) = desiredBSize;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static void ResizeCells(nsTableFrame& aTableFrame) {
|
static void ResizeCells(nsTableFrame& aTableFrame) {
|
||||||
@ -3683,16 +3687,19 @@ bool nsTableFrame::IsAutoBSize(WritingMode aWM) {
|
|||||||
return bsize.ConvertsToPercentage() && bsize.ToPercentage() <= 0.0f;
|
return bsize.ConvertsToPercentage() && bsize.ToPercentage() <= 0.0f;
|
||||||
}
|
}
|
||||||
|
|
||||||
nscoord nsTableFrame::CalcBorderBoxBSize(const ReflowInput& aReflowInput) {
|
nscoord nsTableFrame::CalcBorderBoxBSize(const ReflowInput& aReflowInput,
|
||||||
|
const LogicalMargin& aBorderPadding,
|
||||||
|
nscoord aIntrinsicBorderBoxBSize) {
|
||||||
|
WritingMode wm = aReflowInput.GetWritingMode();
|
||||||
nscoord bSize = aReflowInput.ComputedBSize();
|
nscoord bSize = aReflowInput.ComputedBSize();
|
||||||
if (NS_UNCONSTRAINEDSIZE != bSize) {
|
nscoord bp = aBorderPadding.BStartEnd(wm);
|
||||||
WritingMode wm = aReflowInput.GetWritingMode();
|
if (bSize == NS_UNCONSTRAINEDSIZE) {
|
||||||
LogicalMargin borderPadding = GetChildAreaOffset(wm, &aReflowInput);
|
if (aIntrinsicBorderBoxBSize == NS_UNCONSTRAINEDSIZE) {
|
||||||
bSize += borderPadding.BStartEnd(wm);
|
return NS_UNCONSTRAINEDSIZE;
|
||||||
|
}
|
||||||
|
bSize = std::max(0, aIntrinsicBorderBoxBSize - bp);
|
||||||
}
|
}
|
||||||
bSize = std::max(0, bSize);
|
return aReflowInput.ApplyMinMaxBSize(bSize) + bp;
|
||||||
|
|
||||||
return bSize;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
bool nsTableFrame::IsAutoLayout() {
|
bool nsTableFrame::IsAutoLayout() {
|
||||||
|
@ -646,7 +646,9 @@ class nsTableFrame : public nsContainerFrame {
|
|||||||
public:
|
public:
|
||||||
// calculate the computed block-size of aFrame including its border and
|
// calculate the computed block-size of aFrame including its border and
|
||||||
// padding given its reflow input.
|
// padding given its reflow input.
|
||||||
nscoord CalcBorderBoxBSize(const ReflowInput& aReflowInput);
|
nscoord CalcBorderBoxBSize(const ReflowInput& aReflowInput,
|
||||||
|
const LogicalMargin& aBorderPadding,
|
||||||
|
nscoord aIntrinsicBorderBoxBSize);
|
||||||
|
|
||||||
protected:
|
protected:
|
||||||
// update the desired block-size of this table taking into account the
|
// update the desired block-size of this table taking into account the
|
||||||
|
@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>Empty tables still account for paddings / borders</title>
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height">
|
||||||
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||||
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||||
|
<link rel="match" href="min-height-table-ref.html">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: table;
|
||||||
|
background-color: green;
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 155px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
@ -0,0 +1,23 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>CSS test reference</title>
|
||||||
|
<style>
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: green;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><div></div></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
@ -0,0 +1,31 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>max-height cannot shrink a table under its intrinsic size</title>
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336">
|
||||||
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||||
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||||
|
<link rel="match" href="max-height-table-ref.html">
|
||||||
|
<style>
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
max-height: 0;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: green;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><div></div></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
@ -0,0 +1,41 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>min-height can grow a table over its intrinsic size</title>
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336">
|
||||||
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||||
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||||
|
<link rel="match" href="min-height-table-ref.html">
|
||||||
|
<style>
|
||||||
|
:root { overflow: hidden; }
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
max-height: 40px; /* Just to make sure that min trumps max, like everywhere else */
|
||||||
|
min-height: 50%;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: green;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
/* 300px from the ref, plus 12px for border + padding, which applies to the table wrapper box, not the grid box */
|
||||||
|
height: calc((300px + 12px) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
width: 300px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="outer">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><div class="inner"></div></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
@ -0,0 +1,23 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>CSS test reference</title>
|
||||||
|
<style>
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: green;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><div></div></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
@ -0,0 +1,30 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>min-height can grow a table over its intrinsic size</title>
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336">
|
||||||
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||||
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||||
|
<link rel="match" href="min-height-table-ref.html">
|
||||||
|
<style>
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
min-height: 312px; /* To account for the padding + border, which apply to the wrapper box, not the grid box */
|
||||||
|
border: 1px solid black;
|
||||||
|
background: green;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: 300px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><div></div></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
@ -0,0 +1,43 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>CSS Test Reference</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
font: 16px/0 monospace;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
box-sizing: content-box;
|
||||||
|
border: 3px solid black;
|
||||||
|
padding: 5px;
|
||||||
|
background: blue content-box;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="table"><div class="td"></div></div><br>
|
||||||
|
<div class="table" style="min-height: 50px"><div class="td"></div></div><br>
|
||||||
|
<div class="table" style="min-width: 50px"><div class="td"></div></div><br>
|
||||||
|
<div class="table"><div class="td"><div class="big"></div></div></div><br>
|
||||||
|
<div class="table"><div class="td"><div class="big"></div></div></div><br>
|
||||||
|
<div class="grid"><div class="table" style="max-height: 50px"><div class="td"></div></div></div>
|
||||||
|
<div class="grid"><div class="table" style="max-width: 50px"><div class="td"></div></div></div>
|
@ -0,0 +1,47 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<title>min/max-{width,height} on tables with box-sizing: content-box</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336">
|
||||||
|
<link rel="author" href="mailto:mats@mozilla.com" title="Mats Palmgren">
|
||||||
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||||
|
<link rel="match" href="min-max-size-table-content-box-ref.html">
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
font: 16px/1 monospace;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
box-sizing: content-box;
|
||||||
|
border: 3px solid black;
|
||||||
|
padding: 5px;
|
||||||
|
background: blue content-box;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table><td></td></table>
|
||||||
|
<table style="min-height:50px"><td></td></table>
|
||||||
|
<table style="min-width:50px"><td></td></table>
|
||||||
|
<table style="max-height:50px"><td><div></div></td></table>
|
||||||
|
<table style="max-width:50px"><td><div></div></td></table>
|
||||||
|
<div class="grid"><table style="max-height:50px"><td></td></table></div>
|
||||||
|
<div class="grid"><table style="max-width:50px"><td></td></table></div>
|
Loading…
Reference in New Issue
Block a user