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 |
11 .cell { | 11 .cell { |
12 width: 10px; | 12 width: 10px; |
13 height: 20px; | 13 height: 20px; |
14 } | 14 } |
15 | 15 |
| 16 .justifySelfAuto { |
| 17 justify-self: auto; |
| 18 } |
| 19 |
16 .justifySelfStretch { | 20 .justifySelfStretch { |
17 justify-self: stretch; | 21 justify-self: stretch; |
18 } | 22 } |
19 | 23 |
20 .justifySelfStart { | 24 .justifySelfStart { |
21 justify-self: start; | 25 justify-self: start; |
22 } | 26 } |
23 | 27 |
24 .justifySelfEnd { | 28 .justifySelfEnd { |
25 justify-self: end; | 29 justify-self: end; |
(...skipping 19 matching lines...) Expand all Loading... |
45 justify-self: flex-end; | 49 justify-self: flex-end; |
46 } | 50 } |
47 | 51 |
48 .justifySelfSelfStart { | 52 .justifySelfSelfStart { |
49 justify-self: self-start; | 53 justify-self: self-start; |
50 } | 54 } |
51 | 55 |
52 .justifySelfSelfEnd { | 56 .justifySelfSelfEnd { |
53 justify-self: self-end; | 57 justify-self: self-end; |
54 } | 58 } |
| 59 |
| 60 .justifyItemsCenter { |
| 61 justify-items: center; |
| 62 } |
55 </style> | 63 </style> |
56 <script src="../../resources/check-layout.js"></script> | 64 <script src="../../resources/check-layout.js"></script> |
57 <body onload="checkLayout('.grid')"> | 65 <body onload="checkLayout('.grid')"> |
58 | 66 |
59 <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> |
60 | 68 |
61 <div style="position: relative" class="constrainedContainer"> | 69 <div style="position: relative" class="constrainedContainer"> |
62 <div class="grid" data-expected-width="200" data-expected-height="400"> | 70 <div class="grid" data-expected-width="200" data-expected-height="400"> |
63 <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="0"></div> |
64 <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> |
65 <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> |
66 <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> |
67 <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> |
68 <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> |
69 </div> | 77 </div> |
70 | 78 |
71 <div style="position: relative" class="constrainedContainer"> | 79 <div style="position: relative" class="constrainedContainer"> |
72 <div class="grid" data-expected-width="200" data-expected-height="400"> | 80 <div class="grid" data-expected-width="200" data-expected-height="400"> |
73 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-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> |
74 <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> |
75 <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> |
76 <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> |
77 </div> | 85 </div> |
78 </div> | 86 </div> |
79 | 87 |
| 88 <!-- Default justification and initial values. --> |
| 89 <div style="position: relative"> |
| 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> |
| 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> |
| 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> |
| 96 </div> |
| 97 |
| 98 <div style="position: relative"> |
| 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> |
| 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> |
| 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> |
| 105 </div> |
| 106 |
80 <!-- Vertical writing mode. --> | 107 <!-- Vertical writing mode. --> |
81 <div style="position: relative" class="constrainedContainer"> | 108 <div style="position: relative" class="constrainedContainer"> |
82 <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
"> |
83 <!-- FIXME: Why is offset-x 400? --> | 110 <!-- FIXME: Why is offset-x 400? --> |
84 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="400" data
-offset-y="0" data-expected-width="0" 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> |
85 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> | 112 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390"
data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
86 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="390" da
ta-offset-y="180" 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> |
87 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="190"
data-offset-y="40" 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> |
88 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
data-offset-y="100" 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> |
89 <div class="cell justifySelfLeft 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> |
90 </div> | 117 </div> |
91 | 118 |
92 <div style="position: relative" class="constrainedContainer"> | 119 <div style="position: relative" class="constrainedContainer"> |
93 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200
"> | 120 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200
"> |
94 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 121 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-offset-y="80" data-expected-width="10" data-expected-height="20"></div> |
95 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="0
" data-offset-y="100" 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> |
96 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="2
00" data-offset-y="0" 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> |
97 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="20
0" data-offset-y="180" 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> |
98 </div> | 125 </div> |
99 </div> | 126 </div> |
100 | 127 |
101 <!-- RTL direction. --> | 128 <!-- RTL direction. --> |
102 <div style="position: relative" class="constrainedContainer"> | 129 <div style="position: relative" class="constrainedContainer"> |
103 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> | 130 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> |
104 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="100" data-expected-height="0"></div> | 131 <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="100" data-expected-height="0"></div> |
105 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="190"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 132 <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="190"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
106 <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="100" da
ta-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> |
107 <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="45"
data-offset-y="200" 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> |
108 <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190"
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> |
109 <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="100"
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> |
110 </div> | 137 </div> |
111 | 138 |
112 <div style="position: relative" class="constrainedContainer"> | 139 <div style="position: relative" class="constrainedContainer"> |
113 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> | 140 <div class="grid directionRTL" data-expected-width="200" data-expected-height="4
00"> |
114 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="90"
data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> | 141 <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" d
ata-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
115 <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="1
90" data-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> |
116 <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="9
0" data-offset-y="200" 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> |
117 <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="10
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> |
118 </div> | 145 </div> |
119 </div> | 146 </div> |
120 | 147 |
121 <!-- RTL direction with opposite directions grid container vs grid item. --> | 148 <!-- RTL direction with opposite directions grid container vs grid item. --> |
122 <div style="position: relative" class="constrainedContainer"> | 149 <div style="position: relative" class="constrainedContainer"> |
123 <div class="grid" data-expected-width="200" data-expected-height="400"> | 150 <div class="grid" data-expected-width="200" data-expected-height="400"> |
124 <div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset
-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></di
v> | 151 <div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset
-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></di
v> |
125 <div class="cell justifySelfStart firstRowSecondColumn directionRTL" data-of
fset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20
"></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> |
126 <div class="cell justifySelfEnd firstRowSecondColumn directionRTL" data-offs
et-x="190" 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> |
127 <div class="cell justifySelfCenter secondRowFirstColumn directionRTL" data-o
ffset-x="45" data-offset-y="200" 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> |
128 <div class="cell justifySelfRight secondRowSecondColumn directionRTL" data-o
ffset-x="190" 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> |
129 <div class="cell justifySelfLeft secondRowSecondColumn directionRTL" data-of
fset-x="100" 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> |
130 </div> | 157 </div> |
131 | 158 |
132 <div style="position: relative" class="constrainedContainer"> | 159 <div style="position: relative" class="constrainedContainer"> |
133 <div class="grid" data-expected-width="200" data-expected-height="400"> | 160 <div class="grid" data-expected-width="200" data-expected-height="400"> |
134 <div class="cell justifySelfFlexEnd firstRowFirstColumn directionRTL" data-o
ffset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"
></div> | 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> |
135 <div class="cell justifySelfFlexStart firstRowSecondColumn directionRTL" dat
a-offset-x="100" 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> |
136 <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> | 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> |
137 <div class="cell justifySelfSelfEnd secondRowSecondColumn directionRTL" data
-offset-x="100" 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> |
138 </div> | 165 </div> |
139 </div> | 166 </div> |
140 | 167 |
141 </body> | 168 </body> |
142 </html> | 169 </html> |
OLD | NEW |