Bug 1228984 - [css-grid] Add more auto-placement tests.
authorMats Palmgren <mats@mozilla.com>
Wed, 02 Dec 2015 14:12:24 +0100
changeset 309405 349b2d9ac5aa1a4558a92725c552b5a5b61ad73f
parent 309404 16f3eb09533de8063eb57d9855589d3adf9f31a9
child 309406 01480efcc2813129fe123ffba854ec0048353af8
push id5513
push userraliiev@mozilla.com
push dateMon, 25 Jan 2016 13:55:34 +0000
treeherdermozilla-beta@5ee97dd05b5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1228984, 1229009
milestone45.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 1228984 - [css-grid] Add more auto-placement tests. The added tests are based on the original testcases contributed by Manuel Rego Casasnovas <rego@igalia.com> in bug 1228984 and bug 1229009.
layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html
layout/reftests/css-grid/grid-placement-auto-col-dense-001.html
layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html
layout/reftests/css-grid/grid-placement-auto-row-dense-001.html
layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html
layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html
--- a/layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html
+++ b/layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html
@@ -1,28 +1,45 @@
 <!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
 <html><head>
-    <meta charset="utf-8">
-    <title></title>
-    <style type="text/css">
+  <meta charset="utf-8">
+  <title>Reference: grid item auto placement: column dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
 .grid {
   height: 60px;
   border: 1px solid green;
   position: relative;
   font-size: 12px;
 }
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  border: 1px solid green;
+}
 
 span {
   position: absolute;
   background: lime;
   border: 1px solid black;
   box-sizing: border-box;
   width: 20px;
   height: 20px;
 }
+x {
+  background: lime;
+  border: 1px solid black;
+}
 
 .test1 .a {
   top: 0;
   left: 20px;
   width: 20px;
   height: 20px;
 }
 .test1 .b {
@@ -190,10 +207,27 @@ span {
 <span class="a">a</span>
 <span class="b">b</span>
 <span class="c">c</span>
 <span class="test6">d</span>
 <span class="test6d2">D</span>
 <span class="test6e">e</span>
 </div>
 
+<!-- bug 1228984 test 1 -->
+<div class="grid2">
+<x style="grid-column: 1; grid-row: 1 / 3">1</x>
+<x style="grid-column: 2; grid-row: 1">2</x>
+<x style="grid-column: 3; grid-row: span 2">3</x>
+<x style="grid-column: 2; grid-row: 2">4</x>
+</div>
+
+<!-- bug 1228984 test 2 with "column dense" -->
+<div class="grid2">
+<x style="grid-column: 1; grid-row: 1 / 3">1</x>
+<x style="grid-column: 2; grid-row: 2 / 4">2</x>
+<x style="grid-column: 3; grid-row: 1 / 4">3</x>
+<x style="grid-column: 1; grid-row: 3">4</x>
+<x style="grid-column: 2; grid-row: 1">5</x>
+</div>
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html
+++ b/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html
@@ -1,22 +1,37 @@
 <!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
 <html><head>
-    <meta charset="utf-8">
-    <title></title>
-    <style type="text/css">
+  <meta charset="utf-8">
+  <title>CSS Test: grid item auto placement: column dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
+  <link rel="match" href="grid-placement-auto-col-dense-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
 .grid {
   display: grid;
   border: 1px solid green;
   grid-template-columns: 20px 20px 20px 20px;
   grid-template-rows: 20px 20px 20px;
   grid-auto-flow: dense column;
   grid-auto-columns: 20px;
   grid-auto-rows: 20px;
-  font-size: 12px;
+}
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  grid-auto-flow: column dense;
+  border: 1px solid green;
 }
 
 span {
   background: lime;
   border: 1px solid;
 }
 
 .test1 .a {
@@ -128,10 +143,27 @@ span {
 <span class="a">a</span>
 <span class="b">b</span>
 <span class="c">c</span>
 <span class="test6">d</span>
 <span class="test6">D</span>
 <span class="e">e</span>
 </div>
 
+<!-- bug 1228984 test 1 -->
+<div class="grid2">
+<span style="grid-column: 1; grid-row: 1 / 3">1</span>
+<span style="grid-column: 2; grid-row: 1">2</span>
+<span style="grid-row: span 2">3</span>
+<span style="grid-row: 2">4</span>
+</div>
+
+<!-- bug 1228984 test 2 with "column dense" -->
+<div class="grid2">
+<span style="grid-row: 1 / 3">1</span>
+<span style="grid-row: 2 / 4">2</span>
+<span style="grid-row: 1 / 4">3</span>
+<span style="">4</span>
+<span style="">5</span>
+</div>
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html
+++ b/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html
@@ -1,29 +1,49 @@
 <!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
 <html><head>
-    <meta charset="utf-8">
-    <title></title>
-    <style type="text/css">
+  <meta charset="utf-8">
+  <title>Reference: grid item auto placement: row dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
 .grid {
   height: 60px;
   border: 1px solid green;
   position: relative;
   font-size: 12px;
 }
 
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  grid-auto-flow: row dense;
+  border: 1px solid green;
+}
+
 span {
   position: absolute;
   background: lime;
   border: 1px solid black;
   box-sizing: border-box;
   width: 20px;
   height: 20px;
 }
 
+x {
+  background: lime;
+  border: 1px solid black;
+}
+
 .test1 .a {
   top: 0;
   left: 20px;
   width: 20px;
   height: 20px;
 }
 .test1 .b {
   top: 20px;
@@ -188,10 +208,44 @@ span {
 <span class="a">a</span>
 <span class="b">b</span>
 <span class="c">c</span>
 <span class="test6">d</span>
 <span class="test6d2">D</span>
 <span class="test6e">e</span>
 </div>
 
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<x style="grid-row: 1 / 3">1</x>
+<x style="grid-row: 2 / 4">2</x>
+<x style="grid-row: 1 / 4">3</x>
+<x style="">4</x>
+<x style="">5</x>
+</div>
+
+<!-- bug 1228984 test 1: with "row dense" -->
+<div class="grid2">
+<x style="grid-column: 1; grid-row: 1 / 3">1</x>
+<x style="grid-column: 2; grid-row: 1">2</x>
+<x style="grid-row: span 2">3</x>
+<x style="grid-row: 2">4</x>
+</div>
+
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<x style="grid-column: 1 / 3; grid-row: 1;">1</x>
+<x style="grid-column: 1; grid-row: 2;">2</x>
+<x style="grid-column: span 2; grid-row: 3;">3</x>
+<x style="grid-column: 2; grid-row: 2;">4</x>
+</div>
+
+<!-- bug 1228984 test 3 -->
+<div class="grid2">
+<x style="grid-row: 1 / 3">1</x>
+<x style="grid-row: 2 / 4">2</x>
+<x style="grid-row: 1 / 4">3</x>
+<x style="">4</x>
+<x style="">5</x>
+</div>
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html
+++ b/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html
@@ -1,22 +1,38 @@
 <!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
 <html><head>
-    <meta charset="utf-8">
-    <title></title>
-    <style type="text/css">
+  <meta charset="utf-8">
+  <title>CSS Test: grid item auto placement: row dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
+  <link rel="match" href="grid-placement-auto-row-dense-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
 .grid {
   display: grid;
   border: 1px solid green;
   grid-template-columns: 20px 20px 20px 20px;
   grid-template-rows: 20px 20px 20px;
   grid-auto-flow: dense row;
   grid-auto-columns: 20px;
   grid-auto-rows: 20px;
-  font-size: 12px;
+}
+
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  grid-auto-flow: row dense;
+  border: 1px solid green;
 }
 
 span {
   background: lime;
   border: 1px solid;
 }
 
 .test1 .a {
@@ -127,10 +143,45 @@ span {
 <span class="a">a</span>
 <span class="b">b</span>
 <span class="c">c</span>
 <span class="test6">d</span>
 <span class="test6">D</span>
 <span class="e">e</span>
 </div>
 
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<span style="grid-row: 1 / 3">1</span>
+<span style="grid-row: 2 / 4">2</span>
+<span style="grid-row: 1 / 4">3</span>
+<span style="">4</span>
+<span style="">5</span>
+</div>
+
+<!-- bug 1228984 test 1: with "row dense" -->
+<div class="grid2">
+<span style="grid-column: 1; grid-row: 1 / 3">1</span>
+<span style="grid-column: 2; grid-row: 1">2</span>
+<span style="grid-row: span 2">3</span>
+<span style="grid-row: 2">4</span>
+</div>
+
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<span style="grid-column: 1 / 3; grid-row: 1;">1</span>
+<span style="grid-column: 1; grid-row: 2;">2</span>
+<span style="grid-column: span 2;">3</span>
+<span style="grid-column: 2;">4</span>
+</div>
+
+<!-- bug 1228984 test 3 -->
+<div class="grid2">
+<span style="grid-row: 1 / 3">1</span>
+<span style="grid-row: 2 / 4">2</span>
+<span style="grid-row: 1 / 4">3</span>
+<span style="">4</span>
+<span style="">5</span>
+</div>
+
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html
+++ b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html
@@ -1,20 +1,39 @@
 <!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
 <html><head>
-    <meta charset="utf-8">
-    <title></title>
-    <style type="text/css">
+  <meta charset="utf-8">
+  <title>Reference: grid item auto placement: row sparse</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
 .grid {
   height: 60px;
   border: 1px solid green;
   position: relative;
   font-size: 12px;
 }
 
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  border: 1px solid green;
+}
+
+x {
+  background: lime;
+  border: 1px solid black;
+}
+
 span {
   position: absolute;
   background: lime;
   border: 1px solid black;
   box-sizing: border-box;
   width: 20px;
   height: 20px;
 }
@@ -190,10 +209,18 @@ span {
 <span class="a">a</span>
 <span class="b">b</span>
 <span class="c">c</span>
 <span class="test6">d</span>
 <span class="test6d2">D</span>
 <span class="test6e">e</span>
 </div>
 
+<!-- bug 1229009 -->
+<div class="grid2">
+<x style="grid-column: 2; grid-row: 1;">1</x>
+<x style="grid-column: 1; grid-row: 2;">2</x>
+<x style="grid-column: 3; grid-row: 1 / 3;">3</x>
+<x style="grid-column: 2; grid-row: 2;">4</x>
+</div>
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html
+++ b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html
@@ -1,22 +1,37 @@
 <!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
 <html><head>
-    <meta charset="utf-8">
-    <title></title>
-    <style type="text/css">
+  <meta charset="utf-8">
+  <title>CSS Test: grid item auto placement: row sparse</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
+  <link rel="match" href="grid-placement-auto-row-sparse-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
 .grid {
   display: grid;
   border: 1px solid green;
   grid-template-columns: 20px 20px 20px 20px;
   grid-template-rows: 20px 20px 20px;
   grid-auto-flow: row;
   grid-auto-columns: 20px;
   grid-auto-rows: 20px;
-  font-size: 12px;
+}
+
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  border: 1px solid green;
 }
 
 span {
   background: lime;
   border: 1px solid;
 }
 
 .test1 .a {
@@ -128,10 +143,18 @@ span {
 <span class="a">a</span>
 <span class="b">b</span>
 <span class="c">c</span>
 <span class="test6">d</span>
 <span class="test6">D</span>
 <span class="e">e</span>
 </div>
 
+<!-- bug 1229009 -->
+<div class="grid2">
+<span style="grid-column: 2; grid-row: 1;">1</span>
+<span style="grid-column: 1; grid-row: 2;">2</span>
+<span style="grid-row: 1 / 3;">3</span>
+<span style="grid-row: 2;">4</span>
+</div>
+
 </body>
 </html>