- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 1 Aug 2014 08:19:18 -0500
- To: François REMY <francois.remy.dev@outlook.com>
- Cc: www-style list <www-style@w3.org>
- Message-ID: <CAAWBYDBBeHBwt+MR5caBL8KDi0PVJmaXeBndNuenDs_+AGAV1Q@mail.gmail.com>
On Aug 1, 2014 6:12 AM, "François REMY" <francois.remy.dev@outlook.com> wrote: > > 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 Yes, these all look correct. ~TJ
Received on Friday, 1 August 2014 13:19:45 UTC