Bug 1151204 part 6 - [css-grid] Reftests for grid container baselines.
authorMats Palmgren <mats@mozilla.com>
Sat, 01 Oct 2016 02:26:39 +0200
changeset 316106 c8b0d217e5a4a903975eb2a104a3fb5e56899e6f
parent 316105 69e356ace5532f61c97a36615ecb4a681f9d2138
child 316107 fcc62bbf09eecabf27c8d198d5d3719e16b296ea
push id30759
push userphilringnalda@gmail.com
push dateSat, 01 Oct 2016 06:25:09 +0000
treeherdermozilla-central@fcc62bbf09ee [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1151204
milestone52.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 1151204 part 6 - [css-grid] Reftests for grid container baselines.
layout/reftests/css-grid/grid-container-baselines-001-ref.html
layout/reftests/css-grid/grid-container-baselines-001.html
layout/reftests/css-grid/grid-container-baselines-002-ref.html
layout/reftests/css-grid/grid-container-baselines-002.html
layout/reftests/css-grid/grid-container-baselines-003-ref.html
layout/reftests/css-grid/grid-container-baselines-003.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-001-ref.html
@@ -0,0 +1,87 @@
+<!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: Grid container baselines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  font-size:12px;
+}
+span:nth-child(1) {font-size:32px; }
+span:nth-child(2) {padding-block-end:20px; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last-baseline; }
+.cfb { align-content:baseline; align-self:start; }
+.clb { align-content:last-baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last-baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.ib {
+  display: inline-block;
+  border: 2px solid;
+  height: 120px;
+  margin: 1px;
+  font-size:1px;
+  position:relative;
+}
+.ib2 {
+  display: inline-block;
+  padding-bottom: 20px;
+  font-size:1px;
+}
+
+</style>
+</head>
+<body>
+
+A<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:left">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right; visibility:hidden">C<br>C</span><span style="position:absolute; bottom:0; right:0; padding-bottom:20px;">C<br>C</span></div>
+
+<!-- TODO: figure out a reference for the corresponding test -->
+<!-- TODO: figure out a reference for the corresponding test -->
+
+<div class="ib"><div style="display:inline-grid; height:120px; align-content:end;"><div><span>B<br>B</span><span>C<br>C</span></div></div></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+<!--
+<div class="ib"><span style="vertical-align:bottom; margin-bottom:-1px">B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="vertical-align:bottom; margin-bottom:-21px">C<br>C</span></div>
+-->
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+
+<br>
+
+A<!--<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+--><div class="ib"><span style="vertical-align:bottom; margin-top:50px">B<br>B</span><span style="float:right; margin-top:50px">C<br>C</span></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-001.html
@@ -0,0 +1,92 @@
+<!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: Grid container baselines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-baselines-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 120px / repeat(4, min-content);
+  align-items: start;
+  justify-items: start;
+  border: 2px solid;
+  margin: 1px;
+}
+.r2 { grid-template-rows: 0 120px; }
+.r3 { grid-template-rows: 50px 70px; }
+.r4 { grid-template-rows: 120px 0; }
+.grid .grid {
+  border: 0;
+  margin: 0;
+}
+.vgrid { grid: repeat(4, min-content) / 120px;}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+span:nth-child(1) {font-size:32px; }
+span:nth-child(2) {font-size:12px; padding-block-end:20px;}
+
+.sfb { align-self:baseline; }
+.slb { align-self:last-baseline; }
+.cfb { align-content:baseline; align-self:start; }
+.clb { align-content:last-baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last-baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+A<div class="grid"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span></div>
+<div class="grid"><span>B<br>B</span><span class="slb">C<br>C</span></div>
+
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb">C<br>C</span></div> -->
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb vl" style="padding:20px 0">D<br>D</span></div> -->
+
+<div class="grid"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div>
+<div class="grid"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span style="order:1">B<br>B</span><span class="sfb">C<br>C</span></div>
+
+<!--
+<div class="grid r2"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:2; order:1">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+-->
+
+<div class="grid r2"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r3"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r3"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+
+<br>
+A<!--<div class="grid r4"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid r4"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div>
+<div class="grid"><div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div></div>
+--><div class="grid"><div class="grid r3"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-002-ref.html
@@ -0,0 +1,87 @@
+<!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: Grid container baselines w. spacing before first row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  font-size: 12px;
+}
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { padding-block-end:20px; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last-baseline; }
+.cfb { align-content:baseline; align-self:start; }
+.clb { align-content:last-baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last-baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.ib {
+  display: inline-block;
+  border: 2px solid;
+  height: 120px;
+  padding: 10px 0;
+  margin: 1px;
+  font-size: 1px;
+}
+.ib2 { display: inline-block; padding-top:10px; }
+.ib3 { display: inline-block; padding-top:20px; }
+
+</style>
+</head>
+<body>
+
+A<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:left">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+
+<!-- TODO: figure out a reference for the corresponding test -->
+<!-- TODO: figure out a reference for the corresponding test -->
+
+<div class="ib"><div style="display:inline-grid; height:120px; align-content:end;"><div><span>B<br>B</span><span>C<br>C</span></div></div></div>
+
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+
+<!--
+<div class="ib"><span style="vertical-align:bottom; margin-bottom:-1px">B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="vertical-align:bottom; margin-bottom:-21px">C<br>C</span></div>
+-->
+
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+
+<br>
+
+A<!--<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><div class="ib2"><span>B<br>B</span><span style="float:right">C<br>C</span></div></div>
+<div class="ib"><div class="ib3"><span>B<br>B</span><span style="float:right">C<br>C</span></div></div>
+--><div class="ib"><span style="vertical-align:bottom; margin-top:60px">B<br>B</span><span style="float:right; margin-top:60px">C<br>C</span></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-002.html
@@ -0,0 +1,96 @@
+<!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: Grid container baselines w. spacing before first row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-baselines-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 120px / repeat(4, min-content);
+  align-items: start;
+  justify-items: start;
+  border: 2px solid;
+  margin: 1px;
+  align-content: center;
+  height: 140px;
+}
+.r2 { grid-template-rows: 0 120px; }
+.r3 { grid-template-rows: 50px 70px; }
+.r4 { grid-template-rows: 120px 0; }
+.grid .grid {
+  border: 0;
+  margin: 0;
+}
+.vgrid { grid: repeat(4, min-content) / 120px;}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+span:nth-child(1) {font-size:32px; }
+span:nth-child(2) {font-size:12px; padding-block-end:20px;}
+
+.sfb { align-self:baseline; }
+.slb { align-self:last-baseline; }
+.cfb { align-content:baseline; align-self:start; }
+.clb { align-content:last-baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last-baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+A<div class="grid"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span></div>
+
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb">C<br>C</span></div> -->
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb vl" style="padding:20px 0">D<br>D</span></div> -->
+
+<div class="grid"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div>
+
+<div class="grid"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span style="order:1">B<br>B</span><span class="sfb">C<br>C</span></div>
+
+<!--
+<div class="grid r2"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:2; order:1">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+-->
+
+<div class="grid r2"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+
+<div class="grid r3"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r3"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+
+<br>
+
+A<!--<div class="grid r4"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid r4"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div>
+<div class="grid"><div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div></div>
+--><div class="grid"><div class="grid r3"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-003-ref.html
@@ -0,0 +1,118 @@
+<!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: Grid container baselines, nested grids</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.ib {
+  display: inline-block;
+  height: 163px;
+  width: 120px;
+  border: 1px solid;
+  margin: 1px;
+}
+.ib2 {
+  display: inline-flex;
+  border: 1px solid;
+  margin: 1px;
+}
+
+span { display: inline-block; }
+.a {
+  border: 3px solid black;
+  background:lime;
+}
+
+span:nth-of-type(1) { font-size:32px; }
+span:nth-of-type(2) { font-size:36px; }
+span:nth-of-type(3) { font-size:48px; }
+span:nth-of-type(4) { font-size:24px; }
+span.i { font-size:12px; grid-column:2; }
+.f { display:inline-flex; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+.igrid {
+  display: inline-grid;
+  grid: 13px repeat(3,50px) / 60px 60px;
+  border: 1px solid;
+  margin: 1px;
+}
+.slb { align-self:last-baseline; align-content:self-end; }
+
+</style>
+</head>
+<body>
+
+A<div class="ib">
+  <div class="ib" style="height:120px; width:56px;"><span
+     class="a f" style="width:1em; padding-bottom:5px;">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span>
+</div></div>
+
+<div class="ib" style="width:180px;">
+  <div class="ib" style="height:120px; width:56px;"><span
+     class="a f" style="width:1em; padding-top:5px; margin-top:7px">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span><span
+     class="a f" style="width:54px; padding-top:20px">E<br>F</span>
+</div>
+
+<div class="ib" style="width:180px;">
+  <div class="ib" style="height:120px; width:56px;"><span
+     class="a" style="width:1em; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span><span
+     class="a f" style="width:54px; padding-top:20px">E<br>F</span>
+</div>
+
+<div class="ib" style="width:200px;">
+  <div class="ib" style="height:120px; width:76px; white-space:nowrap"><span
+     class="a" style="width:32px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span
+     class="a" style="float:right; width:36px; margin-right:-2px; padding-bottom:22px; margin-top:-100px">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span><span
+     class="a f" style="width:54px; padding-top:20px;">E<br>F</span>
+</div>
+
+<br>
+
+<x style="position:relative; top:-33px">A</x><div class="ib" style="width:200px">
+  <div class="ib vl" style="height:70px; width:196px;">
+    <span class="a" style="display:block; padding-block-end:15px; height:-moz-min-content">A<br>B</span>
+  </div>
+</div><div class="ib" style="width:200px">
+  <div class="ib vl" style="height:70px; width:196px;">
+    <span class="a" style="display:block; padding-block-end:15px; width:calc(100% - 48px); height:-moz-min-content">A<br>B</span>
+  </div>
+</div><div class="ib" style="width:200px">
+  <div class="ib vl" style="height:70px; width:196px;">
+    <span class="a" style="display:block; height:-moz-min-content; padding-block-end:15px; width:calc(100% - 48px); height:-moz-min-content">A<br>B</span>
+  </div>
+</div>
+
+<br>
+
+A<div class="igrid slb">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px 3px; grid-row: span 4;">
+    <n></n>
+    <n style="grid-row:2"></n>
+    <span class="slb a" style="margin-bottom:7px; padding-bottom:5px; grid-row:3">A<br>B</span>
+  </div>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <n></n>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-003.html
@@ -0,0 +1,223 @@
+<!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: Grid container baselines, nested grids</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-baselines-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.igrid { display: inline-grid; }
+.grid { display: grid; }
+.grid, .igrid {
+  grid: 13px repeat(3,50px) / 60px 60px;
+  border: 1px solid;
+  margin: 1px;
+}
+.grid.sfb , .igrid.sfb {
+  grid: repeat(3,50px) 13px / 60px 60px;
+}
+
+.a {
+  border: 3px solid black;
+  background:lime;
+}
+
+span:nth-of-type(1) { font-size:32px; }
+span:nth-of-type(2) { font-size:36px; }
+span:nth-of-type(3) { font-size:48px; }
+span:nth-of-type(4) { font-size:24px; }
+span.i { font-size:12px; grid-column:2; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last-baseline; align-content:self-end; }
+.jfb { justify-self:baseline; justify-content:self-end; }
+.jlb { justify-self:last-baseline; justify-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<!--  TODO: figure out a way to make a reference for these:
+
+A<div class="igrid">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="slb a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+  </div>
+  <n></n>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+</div>
+
+<div class="igrid" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;">
+    <n></n>
+    <span class="slb a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+  </div>
+  <n></n>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <span class="slb a" style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span>
+</div>
+
+<div class="igrid" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+  </div>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <span class="slb a " style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span>
+</div>
+
+<div class="igrid" style="grid-template-columns:80px 60px 60px">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px 36px; grid-row: span 4;">
+    <span class="a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+    <span class="a" style="grid-row:3; ">A<br>B</span>
+  </div>
+  <n></n>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <span class="slb a " style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span>
+</div>
+
+<br>
+-->
+
+A<div class="igrid sfb">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;">
+    <span class="sfb a" style="margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <n></n>
+</div>
+
+<div class="igrid sfb" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;">
+    <span class="sfb a" style="margin-top:7px; padding-top:5px;">A<br>B</span>
+    <n></n>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <span class="sfb a" style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span>
+  <n></n>
+</div>
+
+<div class="igrid sfb" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;">
+    <span class="a" style="margin-top:7px; padding-top:5px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <span class="sfb a " style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span>
+</div>
+
+<div class="igrid sfb" style="grid-template-columns:80px 60px 60px">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px 36px; grid-row: span 4;">
+    <span class="a" style="margin-top:7px; padding-top:5px;">A<br>B</span>
+    <span class="a" style="">A<br>B</span>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <span class="sfb a " style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span>
+  <n></n>
+</div>
+
+<br>
+
+<!-- TODO: impossible to make a reference due to bug 1166120
+
+A<div class="igrid" style="grid: auto / 100px;">
+<span class="jfb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid" style="grid: auto / 100px;">
+<span class="jlb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid slb" style="grid: auto / 100px;">
+<span class="jlb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid vl" style="grid: 100px / 50px;">
+<span class="jlb a" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid slb vl" style="grid: 100px / 50px;">
+<span class="jfb a" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid sfb vl" style="grid: 100px / 50px;">
+<span class="jfb a" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+
+-->
+
+<!--  TODO: figure out a way to make a reference for these:
+
+A<div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="slb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="jlb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+  </div>
+</div>
+
+-->
+
+A<div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <span class="sfb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <span class="a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <span class="jfb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+</div>
+
+<br>
+
+A<div class="igrid slb">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px 3px; grid-row: span 4;">
+    <n></n><n></n>
+    <n></n><n></n>
+    <span class="slb a" style="margin-bottom:7px; padding-bottom:5px;">A<br>B</span><n></n>
+  </div>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <n></n>
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -84,16 +84,19 @@ skip-if(!gtkWidget) == grid-item-content
 skip-if(!gtkWidget) == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001-ref.html # ditto
 skip-if(!gtkWidget) == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002-ref.html # ditto
 skip-if(!gtkWidget) == 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
 == grid-justify-content-001.html grid-justify-content-001-ref.html
 skip-if(Android&&isDebugBuild) == grid-justify-content-002.html grid-justify-content-002-ref.html # Bug 1245884 - slow
 skip-if(Android&&isDebugBuild) == grid-justify-content-003.html grid-justify-content-003-ref.html # Bug 1245884 - slow
+skip-if(!gtkWidget) == grid-container-baselines-001.html grid-container-baselines-001-ref.html
+skip-if(!gtkWidget) == grid-container-baselines-002.html grid-container-baselines-002-ref.html
+skip-if(!gtkWidget) == grid-container-baselines-003.html grid-container-baselines-003-ref.html
 skip-if(Android&&isDebugBuild) == grid-column-gap-001.html grid-column-gap-001-ref.html # Bug 1245884 - slow
 == grid-column-gap-002.html grid-column-gap-002-ref.html
 == grid-column-gap-003.html grid-column-gap-003-ref.html
 == grid-column-gap-004.html grid-column-gap-004-ref.html
 == grid-row-gap-001.html grid-row-gap-001-ref.html
 == grid-percent-grid-gap-001.html grid-percent-grid-gap-001-ref.html
 skip-if(Android&&isDebugBuild) == grid-row-gap-002.html grid-row-gap-002-ref.html # Bug 1245884 - slow
 skip-if(Android&&isDebugBuild) == grid-row-gap-003.html grid-row-gap-003-ref.html # Bug 1245884 - slow