| <!DOCTYPE html> |
| <html> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| grid-template-columns: [first] 50px [middle] 100px [last]; |
| grid-template-rows: [first] 50px [middle] 100px [last]; |
| /* To detect how much we extend the grid. */ |
| grid-auto-columns: 200px; |
| grid-auto-rows: 200px; |
| |
| /* Make the grid shrink-to-fit. */ |
| position: absolute; |
| } |
| |
| .negativeStartPositionGrowGridInColumnDirection { |
| grid-column: -1 / auto; |
| grid-row: 1; |
| } |
| |
| .negativeStartPositionGrowGridInRowDirection { |
| grid-column: 1; |
| grid-row: -1 / auto; |
| } |
| |
| .lastNamedGridLineStartPositionGrowGridInRowDirection { |
| grid-column: 1; |
| grid-row: -1 / auto; |
| } |
| |
| .lastNamedGridLineStartPositionGrowGridInColumnDirection { |
| grid-column: last / auto; |
| grid-row: 1; |
| } |
| |
| .negativeStartPositionGrowGridInRowDirection { |
| grid-column: 1; |
| grid-row: last / auto; |
| } |
| |
| .endSpanGrowGridInColumnDirection { |
| grid-column: -2 / span 3; |
| grid-row: 1; |
| } |
| |
| .endSpanGrowGridInRowDirection { |
| grid-column: 1; |
| grid-row: -2 / span 3; |
| } |
| |
| .namedEndSpanGrowGridInColumnDirection { |
| grid-column: -1 middle / span 3; |
| grid-row: 1; |
| } |
| |
| .namedEndSpanGrowGridInRowDirection { |
| grid-column: 1; |
| grid-row: 2 middle / span 3; |
| } |
| |
| .negativeEndPositionStartSpanInColumnDirection { |
| grid-column: span / -1; |
| grid-row: 1; |
| } |
| |
| .negativeEndPositionStartSpanInRowDirection { |
| grid-column: 1; |
| grid-row: span 5 / -1; |
| } |
| |
| .negativeNamedGridLineEndPositionStartSpanInColumnDirection { |
| grid-column: span / last; |
| grid-row: 1; |
| } |
| |
| .negativeNamedGridLineEndPositionStartSpanInRowDirection { |
| grid-column: 1; |
| grid-row: span 5 / last; |
| } |
| |
| .negativeEndPositionStartNegativeInColumnDirection { |
| grid-column: -3 / -1; |
| grid-row: 1; |
| } |
| |
| .negativeEndPositionStartNegativeInRowDirection { |
| grid-column: -5 / -2; |
| grid-row: 1; |
| } |
| |
| .namedGridLineEndPositionStartNegativeInColumnDirection { |
| grid-column: -3 / 10 last; |
| grid-row: 1; |
| } |
| |
| .namedGridLineEndPositionStartNegativeInRowDirection { |
| grid-column: -5 / -2 middle; |
| grid-row: 1; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <body onload="checkLayout('.grid');"> |
| |
| <p>Test that negative grid positions are correctly resolved.</p> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="350" data-expected-height="150"> |
| <div class="sizedToGridArea negativeStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="350"> |
| <div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInRowDirection" 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" data-expected-width="350" data-expected-height="150"> |
| <div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="350"> |
| <div class="sizedToGridArea negativeStartPositionGrowGridInRowDirection" 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" data-expected-width="550" data-expected-height="150"> |
| <div class="sizedToGridArea endSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="550"> |
| <div class="sizedToGridArea endSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="550" data-expected-height="150"> |
| <div class="sizedToGridArea namedEndSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="550"> |
| <div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="150"> |
| <div class="sizedToGridArea negativeEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="750"> |
| <div class="sizedToGridArea negativeEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="750"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="150"> |
| <div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="750"> |
| <div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="750"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="150"> |
| <div class="sizedToGridArea negativeEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="550" data-expected-height="150"> |
| <div class="sizedToGridArea negativeEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="450" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="150" data-expected-height="150"> |
| <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div class="grid" data-expected-width="550" data-expected-height="150"> |
| <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="450" data-expected-height="50"></div> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
