W3C home > Mailing lists > Public > www-style@w3.org > August 2014

[css-grid] Confirming some test-case results

From: François REMY <francois.remy.dev@outlook.com>
Date: Fri, 1 Aug 2014 13:09:56 +0200
Message-ID: <DUB130-DS202D84EA92685097B91204A5E70@phx.gbl>
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

This archive was generated by hypermail 2.3.1 : Friday, 1 August 2014 11:10:20 UTC