| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| if (window.testRunner) |
| testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
| </script> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .gridWithoutRepeat { |
| grid-columns: 'a' 50px 'b' 100px 'c' 200px 'd'; |
| grid-rows: 'e' 50px 'f' 100px 'g' 200px 'h'; |
| } |
| |
| .gridWithRepeat { |
| grid-columns: 'b' 50px 'b' 100px 'b' 200px 'b'; |
| grid-rows: 'g' 50px 'g' 100px 'g' 200px 'g'; |
| } |
| |
| .gridItemBToD { |
| grid-column: 'b' / 'd'; |
| grid-row: 1; |
| } |
| |
| .gridItemGToH { |
| grid-column: 1; |
| grid-row: 'g' / 'h'; |
| } |
| |
| .gridItemInvalidPositiveGridLine { |
| grid-column: "nonexistent" / span 2; |
| grid-row: span 2 / "nonexistent"; |
| } |
| |
| .gridItemInvalidNegativeGridLine { |
| grid-column: 1 / -1 "nonexistent"; |
| grid-row: span 2 / -10 "nonexistent"; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| </head> |
| <body onload="checkLayout('.grid')"> |
| |
| <p>This test checks that we resolve named grid line per the specification.</p> |
| |
| <div style="position: relative"> |
| <div class="grid gridWithoutRepeat"> |
| <div class="sizedToGridArea gridItemBToD" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid gridWithoutRepeat"> |
| <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div> |
| </div> |
| </div> |
| |
| |
| <div style="position: relative"> |
| <div class="grid gridWithRepeat"> |
| <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid gridWithRepeat"> |
| <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| |
| <div style="position: relative"> |
| <div class="grid gridWithoutRepeat"> |
| <div class="sizedToGridArea gridItemInvalidPositiveGridLine" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid gridWithoutRepeat"> |
| <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div> |
| </div> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
