Bug 1316051 part 6 - [css-grid] Reftests for <table> grid items.
authorMats Palmgren <mats@mozilla.com>
Fri, 18 Nov 2016 19:08:31 +0100
changeset 323467 728c0feff62374ea8b2d117cdd80aa1751665c96
parent 323466 70a0b4ff9d0886ce56078a3cd67aeb14af12be30
child 323468 1f6d26f6de3504439bc4a39f2db450d2d1a799f8
push id30978
push usercbook@mozilla.com
push dateMon, 21 Nov 2016 14:44:46 +0000
treeherdermozilla-central@0534254e9a40 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1316051
milestone53.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1316051 part 6 - [css-grid] Reftests for <table> grid items.
layout/reftests/css-grid/grid-item-table-stretch-001-ref.html
layout/reftests/css-grid/grid-item-table-stretch-001.html
layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
layout/reftests/css-grid/grid-item-table-stretch-002.html
layout/reftests/css-grid/grid-item-table-stretch-003-ref.html
layout/reftests/css-grid/grid-item-table-stretch-003.html
layout/reftests/css-grid/grid-item-table-stretch-004-ref.html
layout/reftests/css-grid/grid-item-table-stretch-004.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html
@@ -0,0 +1,176 @@
+<!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 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=">
+  <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;
+  min-width: 0;
+  min-height: 0px;
+}
+x { display:block; width:16px; height:16px; }
+
+.w20 { width: 20px }
+.wfill { width:32px }
+.mxw2 { width: 2px }
+.mxw10 { width: 10px }
+.mw20 { width: 20px }
+
+.h20 { height: 20px }
+.hfill { height:32px }
+.mxh10 { height: 10px }
+.mxh2 { height: 2px }
+.mh20 { height: 20px }
+.h16 { height: 16px } /* XXX to workaround bug 307866 */
+
+  </style>
+</head>
+<body>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<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="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>
+
+<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 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0 wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0 wfill"><td><x></x></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-001.html
@@ -0,0 +1,178 @@
+<!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 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-001-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;
+}
+x { display:block; width:16px; height:16px; }
+
+.start {align-self:start; justify-self:start}
+.na {align-self:normal; justify-self:start}
+.sa {align-self:stretch; justify-self:start}
+.an {align-self:start; justify-self:normal}
+.as {align-self:start; 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><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<pre><!--min-height:20px--></pre>
+<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="mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start mh20 mxw10"><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 mh20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20"><td><x></x></td></table></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0"><td><x></x></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
@@ -0,0 +1,191 @@
+<!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 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; }
+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:32px }
+
+.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:14px }
+
+.as, .an, .end { margin-top:6px; }
+.sa, .na, .end { margin-left:-4px; }
+.sa.mw20, .na.mw20, .end.mw20 { margin-left:-16px; }
+.sa.w20, .na.w20, .end.w20 { margin-left:-16px; }
+.sa caption, .na caption, .end caption { width:6px; }
+.sa.mw20 caption, .na.mw20 caption, .end.mw20 caption { width:18px; }
+.sa.w20 caption, .na.w20 caption, .end.w20 caption { width:18px; }
+.r .as, .r .an, .r .end { margin-top:-22px; }
+.as.h20, .an.h20, .end.h20 { margin-top:-6px; }
+.r .as.h20, .r .an.h20, .r .end.h20 { margin-top:-34px; }
+.r .sa, .r .na, .r .end { margin-left:14px; }
+.r .sa.w20, .r .na.w20, .r .end.w20 { margin-left:12px; }
+.r .sa caption, .r .na caption, .r .end caption { width:auto; }
+  </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 h8 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>
+
+<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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-002.html
@@ -0,0 +1,180 @@
+<!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 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; }
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-003-ref.html
@@ -0,0 +1,191 @@
+<!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 { 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 h8 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>
+
+<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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-003.html
@@ -0,0 +1,180 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-004-ref.html
@@ -0,0 +1,67 @@
+<!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 with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 60px / 100px;
+  padding: 10px 4px 3px 6px;
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:20px; height:20px; }
+
+.hma10 { margin: 7px 3px 1px 0; }
+.hmaa  { margin: 7px 0 1px 0; }
+.vma10 { margin: 0 7px 3px 1px; }
+.vmaa  { margin: 0 7px 0 1px; }
+
+.js { justify-self: start; }
+.je { justify-self: end; }
+.jc { justify-self: center; }
+.as { align-self: start; }
+.ae { align-self: end; }
+.ac { align-self: center; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hma10 je"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hmaa jc"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hma10 je"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hmaa jc"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:82px"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vma10 ae"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vmaa ac"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vma10 ae"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vmaa ac"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:34px; width:100px"><caption class="hma10 js"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:34px; width:100px"><caption class="hmaa js"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:39px; width:100px"><caption class="vma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:42px; width:100px"><caption class="vmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:79px"><caption class="hma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:82px"><caption class="hmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:74px"><caption class="vma10 js"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:74px"><caption class="vmaa js"><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-004.html
@@ -0,0 +1,62 @@
+<!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 with auto-margins and/or orthogonal writing-mode</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-004-ref.html">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 10px 60px 3px / 6px 100px 4px;
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  grid-area:2/2;
+}
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:20px; height:20px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hmaa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vmaa"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="hma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="hmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="vma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="vmaa"><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -110,16 +110,20 @@ skip-if(Android) == grid-auto-min-sizing
 == grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
 == grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
 == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
 == grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
 == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
 == grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
 == grid-item-canvas-001.html grid-item-canvas-001-ref.html
 skip-if(Android) == 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
+== 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-self-baseline-001.html grid-item-self-baseline-001-ref.html
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-001.html grid-item-content-baseline-001-ref.html # depends on exact Ahem baseline font metrics which seems to differ between platforms: bug 1310792
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-002.html grid-item-content-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-003.html grid-item-mixed-baseline-003-ref.html # ditto
 skip-if(!gtkWidget) == grid-item-mixed-baseline-004.html grid-item-mixed-baseline-004-ref.html # ditto
 == grid-align-content-001.html grid-align-content-001-ref.html