4 <link href=
"resources/grid.css" rel=
"stylesheet">
5 <script src=
"../../resources/check-layout.js"></script>
12 grid-auto-columns:
20px;
14 grid-template-areas:
"a a b"
22 background-color: blue;
26 background-color: lime;
30 background-color: purple;
34 background-color: orange;
37 grid-auto-columns: auto;
42 justify-content: space-between;
43 align-content: space-between;
47 justify-content: space-around;
48 align-content: space-around;
52 justify-content: space-evenly;
53 align-content: space-evenly;
57 justify-content: stretch;
58 align-content: stretch;
62 <body onload=
"checkLayout('.grid')">
64 <p>This test checks that Content Distribution alignment is applied correctly when items span more than one track.
</p>
66 <div style=
"position: relative">
67 <p>direction: LTR | distribution: 'space-between'
</p>
68 <div class=
"grid spaceBetween verticalRL" data-expected-width=
"200" data-expected-height=
"300">
69 <div class=
"a" data-offset-x=
"160" data-offset-y=
"0" data-expected-width=
"40" data-expected-height=
"160"></div>
70 <div class=
"b" data-offset-x=
"0" data-offset-y=
"280" data-expected-width=
"200" data-expected-height=
"20"></div>
71 <div class=
"c" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"40" data-expected-height=
"20"></div>
72 <div class=
"d" data-offset-x=
"0" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"20"></div>
76 <div style=
"position: relative">
77 <p>direction: LTR | distribution: 'space-around'
</p>
78 <div class=
"grid spaceAround verticalRL" data-expected-width=
"200" data-expected-height=
"300">
79 <div class=
"a" data-offset-x=
"130" data-offset-y=
"40" data-expected-width=
"40" data-expected-height=
"120"></div>
80 <div class=
"b" data-offset-x=
"30" data-offset-y=
"240" data-expected-width=
"140" data-expected-height=
"20"></div>
81 <div class=
"c" data-offset-x=
"30" data-offset-y=
"40" data-expected-width=
"40" data-expected-height=
"20"></div>
82 <div class=
"d" data-offset-x=
"30" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"20"></div>
86 <div style=
"position: relative">
87 <p>direction: LTR | distribution: 'space-evenly'
</p>
88 <div class=
"grid spaceEvenly verticalRL" data-expected-width=
"200" data-expected-height=
"300">
89 <div class=
"a" data-offset-x=
"120" data-offset-y=
"60" data-expected-width=
"40" data-expected-height=
"100"></div>
90 <div class=
"b" data-offset-x=
"40" data-offset-y=
"220" data-expected-width=
"120" data-expected-height=
"20"></div>
91 <div class=
"c" data-offset-x=
"40" data-offset-y=
"60" data-expected-width=
"40" data-expected-height=
"20"></div>
92 <div class=
"d" data-offset-x=
"40" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"20"></div>
96 <div style=
"position: relative">
97 <p>direction: LTR | distribution: 'stretch'
</p>
98 <div class=
"grid stretchedGrid stretch verticalRL" data-expected-width=
"200" data-expected-height=
"300">
99 <div class=
"a" data-offset-x=
"100" data-offset-y=
"0" data-expected-width=
"100" data-expected-height=
"200"></div>
100 <div class=
"b" data-offset-x=
"0" data-offset-y=
"200" data-expected-width=
"200" data-expected-height=
"100"></div>
101 <div class=
"c" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"100" data-expected-height=
"100"></div>
102 <div class=
"d" data-offset-x=
"0" data-offset-y=
"100" data-expected-width=
"100" data-expected-height=
"100"></div>
106 <!-- RTL direction. -->
107 <div style=
"position: relative">
108 <p>direction: RTL | distribution: 'space-between'
</p>
109 <div class=
"grid spaceBetween verticalRL directionRTL" data-expected-width=
"200" data-expected-height=
"300">
110 <div class=
"a" data-offset-x=
"160" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"160"></div>
111 <div class=
"b" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"200" data-expected-height=
"20"></div>
112 <div class=
"c" data-offset-x=
"0" data-offset-y=
"280" data-expected-width=
"40" data-expected-height=
"20"></div>
113 <div class=
"d" data-offset-x=
"0" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"20"></div>
117 <div style=
"position: relative">
118 <p>direction: RTL | distribution: 'space-around'
</p>
119 <div class=
"grid spaceAround verticalRL directionRTL" data-expected-width=
"200" data-expected-height=
"300">
120 <div class=
"a" data-offset-x=
"130" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"120"></div>
121 <div class=
"b" data-offset-x=
"30" data-offset-y=
"40" data-expected-width=
"140" data-expected-height=
"20"></div>
122 <div class=
"c" data-offset-x=
"30" data-offset-y=
"240" data-expected-width=
"40" data-expected-height=
"20"></div>
123 <div class=
"d" data-offset-x=
"30" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"20"></div>
127 <div style=
"position: relative">
128 <p>direction: RTL | distribution: 'space-evenly'
</p>
129 <div class=
"grid spaceEvenly verticalRL directionRTL" data-expected-width=
"200" data-expected-height=
"300">
130 <div class=
"a" data-offset-x=
"120" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"100"></div>
131 <div class=
"b" data-offset-x=
"40" data-offset-y=
"60" data-expected-width=
"120" data-expected-height=
"20"></div>
132 <div class=
"c" data-offset-x=
"40" data-offset-y=
"220" data-expected-width=
"40" data-expected-height=
"20"></div>
133 <div class=
"d" data-offset-x=
"40" data-offset-y=
"140" data-expected-width=
"40" data-expected-height=
"20"></div>
137 <div style=
"position: relative">
138 <p>direction: RTL | distribution: 'stretch'
</p>
139 <div class=
"grid stretchedGrid stretch verticalRL directionRTL" data-expected-width=
"200" data-expected-height=
"300">
140 <div class=
"a" data-offset-x=
"100" data-offset-y=
"100" data-expected-width=
"100" data-expected-height=
"200"></div>
141 <div class=
"b" data-offset-x=
"0" data-offset-y=
"0" data-expected-width=
"200" data-expected-height=
"100"></div>
142 <div class=
"c" data-offset-x=
"0" data-offset-y=
"200" data-expected-width=
"100" data-expected-height=
"100"></div>
143 <div class=
"d" data-offset-x=
"0" data-offset-y=
"100" data-expected-width=
"100" data-expected-height=
"100"></div>