Re: [css-grid] Confirming some test-case results

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