OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 .grid { | 5 .grid { |
6 grid-template-columns: 100px 100px; | 6 grid-template-columns: 100px 100px; |
7 grid-template-rows: 200px 200px; | 7 grid-template-rows: 200px 200px; |
8 width: -webkit-fit-content; | 8 width: -webkit-fit-content; |
9 } | 9 } |
10 | 10 |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
61 justify-items: center; | 61 justify-items: center; |
62 } | 62 } |
63 </style> | 63 </style> |
64 <script src="../../resources/check-layout.js"></script> | 64 <script src="../../resources/check-layout.js"></script> |
65 <body onload="checkLayout('.grid')"> | 65 <body onload="checkLayout('.grid')"> |
66 | 66 |
67 <p>This test checks that the justify-self property is applied correctly.</p> | 67 <p>This test checks that the justify-self property is applied correctly.</p> |
68 | 68 |
69 <div style="position: relative" class="constrainedContainer"> | 69 <div style="position: relative" class="constrainedContainer"> |
70 <div class="grid" data-expected-width="200" data-expected-height="400"> | 70 <div class="grid" data-expected-width="200" data-expected-height="400"> |
71 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="100" data-expected-height="0"></div> | 71 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="100" data-expected-height="200"></div> |
72 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 72 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
73 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="190" da
ta-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 73 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="190" da
ta-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
74 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="45"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 74 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="45"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
75 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 75 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
76 <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 76 <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
77 </div> | 77 </div> |
78 | 78 |
79 <div style="position: relative" class="constrainedContainer"> | 79 <div style="position: relative" class="constrainedContainer"> |
80 <div class="grid" data-expected-width="200" data-expected-height="400"> | 80 <div class="grid" data-expected-width="200" data-expected-height="400"> |
81 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="90"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 81 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="90"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
82 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="1
00" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 82 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="1
00" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
83 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0
" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 83 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0
" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
84 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="19
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 84 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="19
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
85 </div> | 85 </div> |
86 </div> | 86 </div> |
87 | 87 |
88 <!-- Default justification and initial values. --> | 88 <!-- Default justification and initial values. --> |
89 <div style="position: relative"> | 89 <div style="position: relative"> |
90 <div class="grid justifyItemsCenter" data-expected-width="200" data-expected
-height="400"> | 90 <div class="grid justifyItemsCenter" data-expected-width="200" data-expected
-height="400"> |
91 <div class="cell justifySelfAuto firstRowFirstColumn" data-offset-x="45"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 91 <div class="cell justifySelfAuto firstRowFirstColumn" data-offset-x="45"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
92 <div class="cell firstRowSecondColumn" data-offset-x="145" data-offset-y
="0" data-expected-width="10" data-expected-height="20"></div> | 92 <div class="cell firstRowSecondColumn" data-offset-x="145" data-offset-y
="0" data-expected-width="10" data-expected-height="20"></div> |
93 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-
x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></d
iv> | 93 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-
x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></d
iv> |
94 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x
="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></
div> | 94 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x
="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></
div> |
95 </div> | 95 </div> |
96 </div> | 96 </div> |
97 | 97 |
98 <div style="position: relative"> | 98 <div style="position: relative"> |
99 <div class="grid" data-expected-width="200" data-expected-height="400"> | 99 <div class="grid" data-expected-width="200" data-expected-height="400"> |
100 <div class="cell justifySelfAuto firstRowFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 100 <div class="justifySelfAuto firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
101 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="10" data-expected-height="20"></div> | 101 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="10" data-expected-height="20"></div> |
102 <div class="cell justifySelfStart secondRowFirstColumn" data-offset-x="0
" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 102 <div class="cell justifySelfStart secondRowFirstColumn" data-offset-x="0
" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
103 <div class="cell justifySelfEnd secondRowSecondColumn" data-offset-x="19
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 103 <div class="cell justifySelfEnd secondRowSecondColumn" data-offset-x="19
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
104 </div> | 104 </div> |
105 </div> | 105 </div> |
106 | 106 |
107 <!-- Vertical writing mode. --> | 107 <!-- Vertical writing mode. --> |
108 <div style="position: relative" class="constrainedContainer"> | 108 <div style="position: relative" class="constrainedContainer"> |
109 <div class="grid verticalRL" data-expected-width="400" data-expected-height="200
"> | 109 <div class="grid verticalRL" data-expected-width="400" data-expected-height="200
"> |
110 <!-- FIXME: Why is offset-x 400? --> | 110 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="200" data
-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
111 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="400" data
-offset-y="0" data-expected-width="0" data-expected-height="100"></div> | |
112 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> | 111 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
113 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="390" da
ta-offset-y="180" data-expected-width="10" data-expected-height="20"></div> | 112 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="390" da
ta-offset-y="180" data-expected-width="10" data-expected-height="20"></div> |
114 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="190"
data-offset-y="40" data-expected-width="10" data-expected-height="20"></div> | 113 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="190"
data-offset-y="40" data-expected-width="10" data-expected-height="20"></div> |
115 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> | 114 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
116 <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="190"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> | 115 <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="190"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
117 </div> | 116 </div> |
118 | 117 |
119 <div style="position: relative" class="constrainedContainer"> | 118 <div style="position: relative" class="constrainedContainer"> |
120 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200
"> | 119 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200
"> |
121 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-offset-y="80" data-expected-width="10" data-expected-height="20"></div> | 120 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-offset-y="80" data-expected-width="10" data-expected-height="20"></div> |
122 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="0
" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> | 121 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="0
" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
123 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="2
00" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 122 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="2
00" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
124 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="20
0" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div> | 123 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="20
0" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div> |
125 </div> | 124 </div> |
126 </div> | 125 </div> |
127 | 126 |
128 <!-- RTL direction. --> | 127 <!-- RTL direction. --> |
129 <div style="position: relative" class="constrainedContainer"> | 128 <div style="position: relative" class="constrainedContainer"> |
130 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> | 129 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> |
131 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="100" data-expected-height="0"></div> | 130 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="100" data-expected-height="200"></div> |
132 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="190"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 131 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="190"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
133 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="100" da
ta-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 132 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="100" da
ta-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
134 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="45"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 133 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="45"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
135 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 134 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
136 <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 135 <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
137 </div> | 136 </div> |
138 | 137 |
139 <div style="position: relative" class="constrainedContainer"> | 138 <div style="position: relative" class="constrainedContainer"> |
140 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> | 139 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> |
141 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 140 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
142 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="1
90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 141 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="1
90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
143 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="9
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 142 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="9
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
144 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="10
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> | 143 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="10
0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
145 </div> | 144 </div> |
146 </div> | 145 </div> |
147 | 146 |
148 <!-- RTL direction with opposite directions grid container vs grid item. --> | 147 <!-- RTL direction with opposite directions grid container vs grid item. --> |
149 <div style="position: relative" class="constrainedContainer"> | 148 <div style="position: relative" class="constrainedContainer"> |
150 <div class="grid" data-expected-width="200" data-expected-height="400"> | 149 <div class="grid" data-expected-width="200" data-expected-height="400"> |
151 <div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset
-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></di
v> | 150 <div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset
-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></
div> |
152 <div class="cell justifySelfStart firstRowSecondColumn directionRTL" data-of
fset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20
"></div> | 151 <div class="cell justifySelfStart firstRowSecondColumn directionRTL" data-of
fset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20
"></div> |
153 <div class="cell justifySelfEnd firstRowSecondColumn directionRTL" data-offs
et-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20">
</div> | 152 <div class="cell justifySelfEnd firstRowSecondColumn directionRTL" data-offs
et-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20">
</div> |
154 <div class="cell justifySelfCenter secondRowFirstColumn directionRTL" data-o
ffset-x="45" data-offset-y="200" data-expected-width="10" data-expected-height="
20"></div> | 153 <div class="cell justifySelfCenter secondRowFirstColumn directionRTL" data-o
ffset-x="45" data-offset-y="200" data-expected-width="10" data-expected-height="
20"></div> |
155 <div class="cell justifySelfRight secondRowSecondColumn directionRTL" data-o
ffset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height=
"20"></div> | 154 <div class="cell justifySelfRight secondRowSecondColumn directionRTL" data-o
ffset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height=
"20"></div> |
156 <div class="cell justifySelfLeft secondRowSecondColumn directionRTL" data-of
fset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="
20"></div> | 155 <div class="cell justifySelfLeft secondRowSecondColumn directionRTL" data-of
fset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="
20"></div> |
157 </div> | 156 </div> |
158 | 157 |
159 <div style="position: relative" class="constrainedContainer"> | 158 <div style="position: relative" class="constrainedContainer"> |
160 <div class="grid" data-expected-width="200" data-expected-height="400"> | 159 <div class="grid" data-expected-width="200" data-expected-height="400"> |
161 <div class="cell justifySelfFlexEnd firstRowFirstColumn directionRTL" data-o
ffset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20
"></div> | 160 <div class="cell justifySelfFlexEnd firstRowFirstColumn directionRTL" data-o
ffset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20
"></div> |
162 <div class="cell justifySelfFlexStart firstRowSecondColumn directionRTL" dat
a-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height
="20"></div> | 161 <div class="cell justifySelfFlexStart firstRowSecondColumn directionRTL" dat
a-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height
="20"></div> |
163 <div class="cell justifySelfSelfStart secondRowFirstColumn directionRTL" dat
a-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-heigh
t="20"></div> | 162 <div class="cell justifySelfSelfStart secondRowFirstColumn directionRTL" dat
a-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-heigh
t="20"></div> |
164 <div class="cell justifySelfSelfEnd secondRowSecondColumn directionRTL" data
-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-heigh
t="20"></div> | 163 <div class="cell justifySelfSelfEnd secondRowSecondColumn directionRTL" data
-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-heigh
t="20"></div> |
165 </div> | 164 </div> |
166 </div> | 165 </div> |
167 | 166 |
168 </body> | 167 </body> |
169 </html> | 168 </html> |
OLD | NEW |