- From: François REMY <francois.remy.dev@outlook.com>
- Date: Fri, 1 Aug 2014 13:09:56 +0200
- To: "CSS WG" <www-style@w3.org>
Hi,
I would like once again to make sure my current understanding of the CSS
Grid spec is right. Could someone please have a look at the following test
cases (and the result I would expect) to check whether or not it’s consitent
with the spec?
Thanks a lot!
François
-------------------------------------------------
Test case:
<ul style="display: grid; grid-template-rows: (start) auto auto (end);
grid-template-columns: (start) auto auto (end)">
<li style="grid-row: 1; grid-column: 1 / span 1">1</li>
<li>2</li>
<li style="grid-row: 2 / span 2; grid-column: auto">3</li>
<li style="grid-column: 2 / span 2">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
Expected result:
Explicit Grid: 2x2
Implicit Grid: 3 columns ((2+2)-1)
1,2,0
3,4,4
3,5,6
7,0,0
-------------------------------------------------
Test case:
<!-- same as before, but removed <li>2</li> -->
<ul style="display: grid; grid-template-rows: (start) auto auto (end);
grid-template-columns: (start) auto auto (end)">
<li style="grid-row: 1; grid-column: 1 / span 1">1</li>
<li style="grid-row: 2 / span 2; grid-column: auto">3</li>
<li style="grid-column: 2 / span 2">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
Expected result:
Explicit Grid: 2x2
Implicit Grid: 3 columns ((2+2)-1)
1,4,4
3,5,6
3,7,0
-------------------------------------------------
Test case:
<!-- same as the first test case, but forced <li>2</li> on first
column -->
<ul style="display: grid; grid-template-rows: (start) auto auto (end);
grid-template-columns: (start) auto auto (end)">
<li style="grid-row: 1; grid-column: 1 / span 1">1</li>
<li style="grid-column: 1">2</li>
<li style="grid-row: 2 / span 2; grid-column: auto">3</li>
<li style="grid-column: 2 / span 2">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
Expected result:
Explicit Grid: 2x2
Implicit Grid: 3 columns ((2+2)-1)
1,0,0
3,0,0
3,0,0
2,4,4
5,6,7
-------------------------------------------------
Test case:
<!-- same as before, but forced <li>2</li> on second row, too -->
<ul style="display: grid; grid-template-rows: (start) auto auto (end);
grid-template-columns: (start) auto auto (end)">
<li style="grid-row: 1; grid-column: 1 / span 1">1</li>
<li style="grid-row: 2; grid-column: 1">2</li>
<li style="grid-row: 2 / span 2; grid-column: auto">3</li>
<li style="grid-column: 2 / span 2">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
Expected result:
Explicit Grid: 2x2
Implicit Grid: 3 columns ((2+2)-1)
1,4,4
2,3,5
6,3,7
Received on Friday, 1 August 2014 11:10:19 UTC