Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch rebased and refactoring of alignment css rules. Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script> 6 <script src="../../resources/check-layout.js"></script>
6 <style> 7 <style>
7 body { 8 body {
8 margin: 0px; 9 margin: 0px;
9 } 10 }
10 11
11 .grid { 12 .grid {
12 grid-auto-columns: 20px; 13 grid-auto-columns: 20px;
13 grid-auto-rows: 40px; 14 grid-auto-rows: 40px;
14 grid-template-areas: "a a b" 15 grid-template-areas: "a a b"
(...skipping 16 matching lines...) Expand all
31 } 32 }
32 .d { 33 .d {
33 grid-area: d; 34 grid-area: d;
34 background-color: orange; 35 background-color: orange;
35 } 36 }
36 .stretchedGrid { 37 .stretchedGrid {
37 grid-auto-columns: minmax(20px, auto); 38 grid-auto-columns: minmax(20px, auto);
38 grid-auto-rows: minmax(40px, auto); 39 grid-auto-rows: minmax(40px, auto);
39 } 40 }
40 41
41 .spaceBetween {
42 justify-content: space-between;
43 align-content: space-between;
44 }
45
46 .spaceAround {
47 justify-content: space-around;
48 align-content: space-around;
49 }
50
51 .spaceEvenly {
52 justify-content: space-evenly;
53 align-content: space-evenly;
54 }
55
56 .stretch {
57 justify-content: stretch;
58 align-content: stretch;
59 }
60 42
61 .cell { 43 .cell {
62 width: 20px; 44 width: 20px;
63 height: 40px; 45 height: 40px;
64 } 46 }
65 .justifyCenter {
66 justify-self: center;
67 }
68 .alignCenter {
69 align-self: center;
70 }
71 .justifyEnd {
72 justify-self: end;
73 }
74 .alignEnd {
75 align-self: end;
76 }
77 </style> 47 </style>
78 </head> 48 </head>
79 <body onload="checkLayout('.grid')"> 49 <body onload="checkLayout('.grid')">
80 50
81 <p>This test checks that Content Distribution alignment works fine in combinatio n with Self Alignmet and items span more than one track.</p> 51 <p>This test checks that Content Distribution alignment works fine in combinatio n with Self Alignmet and items span more than one track.</p>
82 52
83 <div style="position: relative"> 53 <div style="position: relative">
84 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</ p> 54 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</ p>
85 <div class="grid spaceBetween" data-expected-width="300" data-expected-heigh t="200"> 55 <div class="grid contentSpaceBetween" data-expected-width="300" data-expecte d-height="200">
86 <div class="a cell justifyCenter" data-offset-x="70" data-offset-y="0" d ata-expected-width="20" data-expected-height="40"></div> 56 <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
87 <div class="b cell alignCenter" data-offset-x="280" data-offset-y="80" d ata-expected-width="20" data-expected-height="40"></div> 57 <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="8 0" data-expected-width="20" data-expected-height="40"></div>
88 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div> 58 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div>
89 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 59 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
90 </div> 60 </div>
91 </div> 61 </div>
92 62
93 <div style="position: relative"> 63 <div style="position: relative">
94 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> 64 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
95 <div class="grid spaceBetween" data-expected-width="300" data-expected-heigh t="200"> 65 <div class="grid contentSpaceBetween" data-expected-width="300" data-expecte d-height="200">
96 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" dat a-expected-width="20" data-expected-height="40"></div> 66 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
97 <div class="b cell alignEnd" data-offset-x="280" data-offset-y="160" dat a-expected-width="20" data-expected-height="40"></div> 67 <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
98 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div> 68 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div>
99 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 69 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
100 </div> 70 </div>
101 </div> 71 </div>
102 72
103 <div style="position: relative"> 73 <div style="position: relative">
104 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p > 74 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p >
105 <div class="grid spaceAround" data-expected-width="300" data-expected-height ="200"> 75 <div class="grid contentSpaceAround" data-expected-width="300" data-expected -height="200">
106 <div class="a cell justifyCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 76 <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y=" 30" data-expected-width="20" data-expected-height="40"></div>
107 <div class="b cell alignCenter" data-offset-x="240" data-offset-y="80" d ata-expected-width="20" data-expected-height="40"></div> 77 <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="8 0" data-expected-width="20" data-expected-height="40"></div>
108 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div> 78 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div>
109 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 79 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
110 </div> 80 </div>
111 </div> 81 </div>
112 82
113 <div style="position: relative"> 83 <div style="position: relative">
114 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> 84 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
115 <div class="grid spaceAround" data-expected-width="300" data-expected-height ="200"> 85 <div class="grid contentSpaceAround" data-expected-width="300" data-expected -height="200">
116 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" da ta-expected-width="20" data-expected-height="40"></div> 86 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30 " data-expected-width="20" data-expected-height="40"></div>
117 <div class="b cell alignEnd" data-offset-x="240" data-offset-y="130" dat a-expected-width="20" data-expected-height="40"></div> 87 <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
118 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div> 88 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div>
119 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 89 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
120 </div> 90 </div>
121 </div> 91 </div>
122 92
123 <div style="position: relative"> 93 <div style="position: relative">
124 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p > 94 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p >
125 <div class="grid spaceEvenly" data-expected-width="300" data-expected-height ="200"> 95 <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected -height="200">
126 <div class="a cell justifyCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> 96 <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y= "40" data-expected-width="20" data-expected-height="40"></div>
127 <div class="b cell alignCenter" data-offset-x="220" data-offset-y="80" d ata-expected-width="20" data-expected-height="40"></div> 97 <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="8 0" data-expected-width="20" data-expected-height="40"></div>
128 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div> 98 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div>
129 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 99 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
130 </div> 100 </div>
131 </div> 101 </div>
132 102
133 <div style="position: relative"> 103 <div style="position: relative">
134 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> 104 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
135 <div class="grid spaceEvenly" data-expected-width="300" data-expected-height ="200"> 105 <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected -height="200">
136 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" da ta-expected-width="20" data-expected-height="40"></div> 106 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40 " data-expected-width="20" data-expected-height="40"></div>
137 <div class="b cell alignEnd" data-offset-x="220" data-offset-y="120" dat a-expected-width="20" data-expected-height="40"></div> 107 <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
138 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div> 108 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div>
139 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 109 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
140 </div> 110 </div>
141 </div> 111 </div>
142 112
143 <div style="position: relative"> 113 <div style="position: relative">
144 <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p> 114 <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
145 <div class="grid stretchedGrid stretch" data-expected-width="300" data-expec ted-height="200"> 115 <div class="grid stretchedGrid contentStretch" data-expected-width="300" dat a-expected-height="200">
146 <div class="a cell justifyCenter alignCenter" data-offset-x="90" data-of fset-y="30" data-expected-width="20" data-expected-height="40"></div> 116 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
147 <div class="b cell justifyCenter alignCenter" data-offset-x="240" data-o ffset-y="80" data-expected-width="20" data-expected-height="40"></div> 117 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240 " data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
148 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div> 118 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div>
149 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 119 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
150 </div> 120 </div>
151 </div> 121 </div>
152 122
153 <div style="position: relative"> 123 <div style="position: relative">
154 <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p> 124 <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
155 <div class="grid stretchedGrid stretch" data-expected-width="300" data-expec ted-height="200"> 125 <div class="grid stretchedGrid contentStretch" data-expected-width="300" dat a-expected-height="200">
156 <div class="a cell justifyEnd alignEnd" data-offset-x="180" data-offset- y="60" data-expected-width="20" data-expected-height="40"></div> 126 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data -offset-y="60" data-expected-width="20" data-expected-height="40"></div>
157 <div class="b cell justifyEnd alignEnd" data-offset-x="280" data-offset- y="160" data-expected-width="20" data-expected-height="40"></div> 127 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data -offset-y="160" data-expected-width="20" data-expected-height="40"></div>
158 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div> 128 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div>
159 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 129 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
160 </div> 130 </div>
161 </div> 131 </div>
162 132
163 <!-- RTL direction. --> 133 <!-- RTL direction. -->
164 <div style="position: relative"> 134 <div style="position: relative">
165 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</ p> 135 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</ p>
166 <div class="grid spaceBetween directionRTL" data-expected-width="300" data-e xpected-height="200"> 136 <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
167 <div class="a cell justifyCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 137 <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
168 <div class="b cell alignCenter" data-offset-x="0" data-offset-y="80" dat a-expected-width="20" data-expected-height="40"></div> 138 <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
169 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 139 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
170 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 140 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
171 </div> 141 </div>
172 </div> 142 </div>
173 143
174 <div style="position: relative"> 144 <div style="position: relative">
175 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> 145 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
176 <div class="grid spaceBetween directionRTL" data-expected-width="300" data-e xpected-height="200"> 146 <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
177 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" dat a-expected-width="20" data-expected-height="40"></div> 147 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
178 <div class="b cell alignEnd" data-offset-x="0" data-offset-y="160" data- expected-width="20" data-expected-height="40"></div> 148 <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" d ata-expected-width="20" data-expected-height="40"></div>
179 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 149 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
180 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 150 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
181 </div> 151 </div>
182 </div> 152 </div>
183 153
184 <div style="position: relative"> 154 <div style="position: relative">
185 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p > 155 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p >
186 <div class="grid spaceAround directionRTL" data-expected-width="300" data-ex pected-height="200"> 156 <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
187 <div class="a cell justifyCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 157 <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y= "30" data-expected-width="20" data-expected-height="40"></div>
188 <div class="b cell alignCenter" data-offset-x="40" data-offset-y="80" da ta-expected-width="20" data-expected-height="40"></div> 158 <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80 " data-expected-width="20" data-expected-height="40"></div>
189 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 159 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
190 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 160 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
191 </div> 161 </div>
192 </div> 162 </div>
193 163
194 <div style="position: relative"> 164 <div style="position: relative">
195 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> 165 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
196 <div class="grid spaceAround directionRTL" data-expected-width="300" data-ex pected-height="200"> 166 <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
197 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" da ta-expected-width="20" data-expected-height="40"></div> 167 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30 " data-expected-width="20" data-expected-height="40"></div>
198 <div class="b cell alignEnd" data-offset-x="40" data-offset-y="130" data -expected-width="20" data-expected-height="40"></div> 168 <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
199 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 169 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
200 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 170 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
201 </div> 171 </div>
202 </div> 172 </div>
203 173
204 <div style="position: relative"> 174 <div style="position: relative">
205 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p > 175 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p >
206 <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-ex pected-height="200"> 176 <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
207 <div class="a cell justifyCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> 177 <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y= "40" data-expected-width="20" data-expected-height="40"></div>
208 <div class="b cell alignCenter" data-offset-x="60" data-offset-y="80" da ta-expected-width="20" data-expected-height="40"></div> 178 <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80 " data-expected-width="20" data-expected-height="40"></div>
209 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 179 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
210 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 180 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
211 </div> 181 </div>
212 </div> 182 </div>
213 183
214 <div style="position: relative"> 184 <div style="position: relative">
215 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> 185 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
216 <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-ex pected-height="200"> 186 <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
217 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" da ta-expected-width="20" data-expected-height="40"></div> 187 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40 " data-expected-width="20" data-expected-height="40"></div>
218 <div class="b cell alignEnd" data-offset-x="60" data-offset-y="120" data -expected-width="20" data-expected-height="40"></div> 188 <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
219 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 189 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
220 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 190 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
221 </div> 191 </div>
222 </div> 192 </div>
223 193
224 <div style="position: relative"> 194 <div style="position: relative">
225 <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p> 195 <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
226 <div class="grid stretchedGrid stretch directionRTL" data-expected-width="30 0" data-expected-height="200"> 196 <div class="grid stretchedGrid contentStretch directionRTL" data-expected-wi dth="300" data-expected-height="200">
227 <div class="a cell justifyCenter alignCenter" data-offset-x="190" data-o ffset-y="30" data-expected-width="20" data-expected-height="40"></div> 197 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190 " data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
228 <div class="b cell justifyCenter alignCenter" data-offset-x="40" data-of fset-y="80" data-expected-width="20" data-expected-height="40"></div> 198 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
229 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 199 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
230 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 200 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
231 </div> 201 </div>
232 </div> 202 </div>
233 203
234 <div style="position: relative"> 204 <div style="position: relative">
235 <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p> 205 <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
236 <div class="grid stretchedGrid stretch directionRTL" data-expected-width="30 0" data-expected-height="200"> 206 <div class="grid stretchedGrid contentStretch directionRTL" data-expected-wi dth="300" data-expected-height="200">
237 <div class="a cell justifyEnd alignEnd" data-offset-x="100" data-offset- y="60" data-expected-width="20" data-expected-height="40"></div> 207 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data -offset-y="60" data-expected-width="20" data-expected-height="40"></div>
238 <div class="b cell justifyEnd alignEnd" data-offset-x="0" data-offset-y= "160" data-expected-width="20" data-expected-height="40"></div> 208 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-o ffset-y="160" data-expected-width="20" data-expected-height="40"></div>
239 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 209 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
240 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 210 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
241 </div> 211 </div>
242 </div> 212 </div>
243 213
244 </body> 214 </body>
245 </html> 215 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698