blob: 064f1d8cf1a49e2651dfa618cb00db660e27682a [file] [log] [blame]
PASS .grid 1
PASS .grid 2
PASS .grid 3
PASS .grid 4
PASS .grid 5
PASS .grid 6
PASS .grid 7
PASS .grid 8
PASS .grid 9
PASS .grid 10
PASS .grid 11
PASS .grid 12
PASS .grid 13
PASS .grid 14
PASS .grid 15
PASS .grid 16
PASS .grid 17
This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.
Grid using fixed width and height.
All grid items sized with min-{width, height} auto.
Enough available space in the inline axis, so parallel tracks grow until their limits; orthogonal tracks, however, are limited to the bloc-axis available space, which will determine their column tracks size.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid width under min-content constrain and fixed height.
All grid items sized with min-{width, height} auto.
Orthogonal green row track assumed as infinity, hence 10px for the column track. Actual row tracks size is different, hence overflowing.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid width under max-content constrain and fixed height.
All grid items sized with min-{width, height} auto.
Parallel blue column track sized as its max of 150x, while Orthogonal green row, assumed as infinity, sized as 10px. Since actual row tracks size is different, green column track will occupy some space initally assigned to the blue one.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid width under fit-content constrain and fixed height.
All grid items sized with min-{width, height} auto.
Since we use assumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid with fixed width and height under min-content constrain.
All grid items sized with min-{width, height} auto.
Since there is enough space in the inline-axis, the orthogonal green row sets the min-content size, which is 50px because of the 5 chars line.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid with fixed width and height under min-content constrain.
All grid items sized with min-{width, height} auto.
Both paralell and orthogonal tracks reach their maximum sizes.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid with fixed width and height under min-content constrain.
All grid items sized with min-{width, height} auto.
Same result as sizing under max-content constrain.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid using fixed width and height.
All grid items sized with min-width: 0px, min-height: auto.
Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid width under min-content constrain and fixed height.
All grid items sized with min-width: 0px, min-height: auto.
Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid width under max-content constrain and fixed height.
All grid items sized with min-width: 0px, min-height: auto.
Since container is sized under max-content, tracks will use its maximum size.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid with fixed width and height under min-content constrain.
All grid items sized with min-width: auto, min-height: 0px.
Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid with fixed width and height under max-content constrain.
All grid items sized with min-width: auto, min-height: 0px.
Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid using fixed width and height.
All grid items sized with min-width: 50px, min-height: auto.
Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid width under min-content constrain and fixed height.
All grid items sized with min-width: 50px, min-height: auto.
Column tracks size is set by min-width, while rows grow until exhaust the available height.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid width under max-content constrain and fixed height.
All grid items sized with min-width: 50px, min-height: auto.
.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid with fixed width and height under min-content constrain.
All grid items sized with min-width: auto, min-height: 50px.
Parallel blue row track must grow to fulfill min-height restriction, while orthogonal shrink to satisfy container's min-content constrain.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
Grid with fixed width and height under max-content constrain.
All grid items sized with min-width: auto, min-height: 50px.
Orthogonal rows can grow now to reach their maximum, exceeding min-height as well, while parallel row tracks are still sized according to min-height.
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX