Bug 1651530 - Apply min/max-block-size to tables. r=mats

Differential Revision: https://phabricator.services.mozilla.com/D84130
2024-10-20 16:55:40 +00:00 · 2020-07-21 11:50:01 +00:00 · 2020-07-21 11:50:01 +00:00 · 1a2268d278
commit 1a2268d278
parent e0ab27174e
15 changed files with 304 additions and 42 deletions
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@ -2304,8 +2304,8 @@ void ReflowInput::InitConstraints(
      }

      // Calculate the computed block size
-      if ((StyleDisplay::TableColumn == mStyleDisplay->mDisplay) ||
-          (StyleDisplay::TableColumnGroup == mStyleDisplay->mDisplay)) {
+      if (StyleDisplay::TableColumn == mStyleDisplay->mDisplay ||
+          StyleDisplay::TableColumnGroup == mStyleDisplay->mDisplay) {
        // 'blockSize' property doesn't apply to table columns and column groups
        isAutoBSize = true;
      }
@ -2319,10 +2319,9 @@ void ReflowInput::InitConstraints(
                              blockSize.AsLengthPercentage());
      }

-      // Doesn't apply to table elements
+      // Doesn't apply to internal table elements
      ComputedMinWidth() = ComputedMinHeight() = 0;
      ComputedMaxWidth() = ComputedMaxHeight() = NS_UNCONSTRAINEDSIZE;
-
    } else if (NS_FRAME_GET_TYPE(mFrameType) == NS_CSS_FRAME_TYPE_ABSOLUTE) {
      // XXX not sure if this belongs here or somewhere else - cwk
      InitAbsoluteConstraints(aPresContext, cbri,
--- a/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html
@ -59,13 +59,13 @@ x { display:block; width:16px; height:16px; }
 <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 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 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 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="an 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 mh20 wfill"><td><x></x></td></table></div>

 <pre><!--min-height:0--></pre>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 wfill"><td><x></x></td></table></div>
--- a/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
@ -82,13 +82,13 @@ t { display:block; width:6px; height:6px; }
 <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="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 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 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 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>
+<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>
 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
--- a/layout/reftests/css-grid/grid-item-table-stretch-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-table-stretch-003-ref.html
@ -53,7 +53,7 @@ t { display:block; width:6px; height:6px; }
 .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 { 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.w20, .r .na.w20, .r .end.w20 { margin-left:-6px; }
 .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>
 <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 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 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 h8"><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 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>
--- a/layout/reftests/text-overflow/clipped-elements-ref.html
+++ b/layout/reftests/text-overflow/clipped-elements-ref.html
@ -63,7 +63,7 @@ select[size="4"],iframe,textarea,hr { height:10px; margin:0; }

  <div class="test">&#x2026;</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:block;"></span></div>
  <div class="test rel">1<span style="position:relative;"></span></div>
--- a/layout/tables/nsTableFrame.cpp
+++ b/layout/tables/nsTableFrame.cpp
@ -1790,9 +1790,11 @@ void nsTableFrame::Reflow(nsPresContext* aPresContext,
      // when there is a specified table bsize
      if (!GetPrevInFlow() &&
          NS_UNCONSTRAINEDSIZE != aReflowInput.AvailableBSize()) {
-        nscoord tableSpecifiedBSize = CalcBorderBoxBSize(aReflowInput);
-        if ((tableSpecifiedBSize > 0) &&
-            (tableSpecifiedBSize != NS_UNCONSTRAINEDSIZE)) {
+        LogicalMargin bp = GetChildAreaOffset(wm, &aReflowInput);
+        nscoord tableSpecifiedBSize =
+            CalcBorderBoxBSize(aReflowInput, bp, NS_UNCONSTRAINEDSIZE);
+        if (tableSpecifiedBSize > 0 &&
+            tableSpecifiedBSize != NS_UNCONSTRAINEDSIZE) {
          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
  RowGroupArray rowGroups;
  OrderRowGroups(rowGroups);
+  nscoord desiredBSize = borderPadding.BStartEnd(wm);
  if (rowGroups.IsEmpty()) {
-    // tables can be used as rectangular items without content
-    nscoord tableSpecifiedBSize = CalcBorderBoxBSize(aReflowInput);
-    if ((NS_UNCONSTRAINEDSIZE != tableSpecifiedBSize) &&
-        (tableSpecifiedBSize > 0) &&
-        eCompatibility_NavQuirks != PresContext()->CompatibilityMode()) {
+    if (eCompatibility_NavQuirks == PresContext()->CompatibilityMode()) {
      // empty tables should not have a size in quirks mode
-      aDesiredSize.BSize(wm) = tableSpecifiedBSize;
-    } else {
      aDesiredSize.BSize(wm) = 0;
+    } else {
+      aDesiredSize.BSize(wm) =
+          CalcBorderBoxBSize(aReflowInput, borderPadding, desiredBSize);
    }
    return;
  }
  int32_t rowCount = cellMap->GetRowCount();
  int32_t colCount = cellMap->GetColCount();
-  nscoord desiredBSize = borderPadding.BStartEnd(wm);
  if (rowCount > 0 && colCount > 0) {
    desiredBSize += GetRowSpacing(-1);
    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
  if (!GetPrevInFlow()) {
-    nscoord tableSpecifiedBSize = CalcBorderBoxBSize(aReflowInput);
-    if ((tableSpecifiedBSize > 0) &&
-        (tableSpecifiedBSize != NS_UNCONSTRAINEDSIZE) &&
-        (tableSpecifiedBSize > desiredBSize)) {
+    nscoord bSize =
+        CalcBorderBoxBSize(aReflowInput, borderPadding, desiredBSize);
+    if (bSize > desiredBSize) {
      // proportionately distribute the excess bsize to unconstrained rows in
      // each unconstrained row group.
-      DistributeBSizeToRows(aReflowInput, tableSpecifiedBSize - desiredBSize);
+      DistributeBSizeToRows(aReflowInput, bSize - desiredBSize);
      // this might have changed the overflow area incorporate the childframe
      // overflow area.
      for (nsIFrame* kidFrame : mFrames) {
        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) {
@ -3683,16 +3687,19 @@ bool nsTableFrame::IsAutoBSize(WritingMode aWM) {
  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();
-  if (NS_UNCONSTRAINEDSIZE != bSize) {
-    WritingMode wm = aReflowInput.GetWritingMode();
-    LogicalMargin borderPadding = GetChildAreaOffset(wm, &aReflowInput);
-    bSize += borderPadding.BStartEnd(wm);
+  nscoord bp = aBorderPadding.BStartEnd(wm);
+  if (bSize == NS_UNCONSTRAINEDSIZE) {
+    if (aIntrinsicBorderBoxBSize == NS_UNCONSTRAINEDSIZE) {
+      return NS_UNCONSTRAINEDSIZE;
+    }
+    bSize = std::max(0, aIntrinsicBorderBoxBSize - bp);
  }
-  bSize = std::max(0, bSize);
-
-  return bSize;
+  return aReflowInput.ApplyMinMaxBSize(bSize) + bp;
 }

 bool nsTableFrame::IsAutoLayout() {
--- a/layout/tables/nsTableFrame.h
+++ b/layout/tables/nsTableFrame.h
@ -646,7 +646,9 @@ class nsTableFrame : public nsContainerFrame {
 public:
  // calculate the computed block-size of aFrame including its border and
  // padding given its reflow input.
-  nscoord CalcBorderBoxBSize(const ReflowInput& aReflowInput);
+  nscoord CalcBorderBoxBSize(const ReflowInput& aReflowInput,
+                             const LogicalMargin& aBorderPadding,
+                             nscoord aIntrinsicBorderBoxBSize);

 protected:
  // update the  desired block-size of this table taking into account the
--- a/testing/web-platform/tests/css/css-tables/empty-table-height.html
+++ b/testing/web-platform/tests/css/css-tables/empty-table-height.html
@ -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>
--- a/testing/web-platform/tests/css/css-tables/max-height-table-ref.html
+++ b/testing/web-platform/tests/css/css-tables/max-height-table-ref.html
@ -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>
--- a/testing/web-platform/tests/css/css-tables/max-height-table.html
+++ b/testing/web-platform/tests/css/css-tables/max-height-table.html
@ -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>
--- a/testing/web-platform/tests/css/css-tables/min-height-table-2.html
+++ b/testing/web-platform/tests/css/css-tables/min-height-table-2.html
@ -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>
--- a/testing/web-platform/tests/css/css-tables/min-height-table-ref.html
+++ b/testing/web-platform/tests/css/css-tables/min-height-table-ref.html
@ -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>
--- a/testing/web-platform/tests/css/css-tables/min-height-table.html
+++ b/testing/web-platform/tests/css/css-tables/min-height-table.html
@ -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>
--- a/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box-ref.html
+++ b/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box-ref.html
@ -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>
--- a/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box.html
+++ b/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box.html
@ -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>