3 <link href=
"resources/grid.css" rel=
"stylesheet">
6 grid-template-rows: [firstRow]
10px
20px;
7 grid-template-columns: [firstColumn]
30px
40px;
13 grid-row: span
5 firstRow / span
1;
17 grid-column: span / span
3;
23 grid-row: span
5 firstRow / auto;
27 grid-column: span / auto;
31 <script src=
"../../resources/check-layout.js"></script>
32 <body onload=
"checkLayout('.grid')">
34 <p>This test checks that we resolve
2 opposite 'span' / 'auto' positions by applying the auto-placement algorithm.
</p>
36 <div style=
"position: relative">
38 <div class=
"sizedToGridArea firstRowFirstColumn" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"30" data-expected-height=
"10"></div>
39 <div class=
"sizedToGridArea bothSpanRow" data-offset-x=
"0" data-offset-y=
"10" data-expected-width=
"30" data-expected-height=
"20"></div>
43 <div style=
"position: relative">
45 <div class=
"sizedToGridArea firstRowFirstColumn" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"30" data-expected-height=
"10"></div>
46 <div class=
"sizedToGridArea bothSpanColumn" data-offset-x=
"30" data-offset-y=
"0" data-expected-width=
"40" data-expected-height=
"10"></div>
50 <div style=
"position: relative">
52 <div class=
"sizedToGridArea firstRowFirstColumn" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"30" data-expected-height=
"10"></div>
53 <div class=
"sizedToGridArea spanAutoRow" data-offset-x=
"0" data-offset-y=
"10" data-expected-width=
"30" data-expected-height=
"20"></div>
57 <div style=
"position: relative">
59 <div class=
"sizedToGridArea firstRowFirstColumn" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"30" data-expected-height=
"10"></div>
60 <div class=
"sizedToGridArea spanAutoColumn" data-offset-x=
"30" data-offset-y=
"0" data-expected-width=
"40" data-expected-height=
"10"></div>