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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html

Issue 1929483002: [css-grid] Fix static position for positioned grid items (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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
OLDNEW
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 5
6 .grid { 6 .grid {
7 grid-template-columns: 100px 200px; 7 grid-template-columns: 100px 200px;
8 grid-template-rows: 50px 150px; 8 grid-template-rows: 50px 150px;
9 width: 100%; 9 width: 100%;
10 height: 100%; 10 height: 100%;
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
53 <script src="../../resources/testharnessreport.js"></script> 53 <script src="../../resources/testharnessreport.js"></script>
54 <script src="../../resources/check-layout-th.js"></script> 54 <script src="../../resources/check-layout-th.js"></script>
55 <body onload="checkLayout('.grid')"> 55 <body onload="checkLayout('.grid')">
56 <div id="log"></div> 56 <div id="log"></div>
57 57
58 <p>This test checks the different size options for absolutely positioned grid it ems.</p> 58 <p>This test checks the different size options for absolutely positioned grid it ems.</p>
59 59
60 <div class="unconstrainedContainer"> 60 <div class="unconstrainedContainer">
61 <div class="grid"> 61 <div class="grid">
62 <div class="absolute autoRowAutoColumn sizedToGridArea" 62 <div class="absolute autoRowAutoColumn sizedToGridArea"
63 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat a-expected-height="1030"> 63 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data- expected-height="1030">
64 </div> 64 </div>
65 <div class="absolute secondRowSecondColumn sizedToGridArea" 65 <div class="absolute secondRowSecondColumn sizedToGridArea"
66 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat a-expected-height="965"> 66 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat a-expected-height="965">
67 </div> 67 </div>
68 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" 68 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
69 data-offset-x="15" data-offset-y="15" data-expected-width="100" data -expected-height="50"> 69 data-offset-x="15" data-offset-y="15" data-expected-width="100" data -expected-height="50">
70 </div> 70 </div>
71 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" 71 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
72 data-offset-x="15" data-offset-y="15" data-expected-width="315" data -expected-height="215"> 72 data-offset-x="0" data-offset-y="0" data-expected-width="315" data-e xpected-height="215">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 76
77 <div class="unconstrainedContainer"> 77 <div class="unconstrainedContainer">
78 <div class="grid"> 78 <div class="grid">
79 <div class="absolute autoRowAutoColumn lengthSize" 79 <div class="absolute autoRowAutoColumn lengthSize"
80 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="20"> 80 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="20">
81 </div> 81 </div>
82 <div class="absolute secondRowSecondColumn lengthSize" 82 <div class="absolute secondRowSecondColumn lengthSize"
83 data-offset-x="115" data-offset-y="65" data-expected-width="50" data -expected-height="20"> 83 data-offset-x="115" data-offset-y="65" data-expected-width="50" data -expected-height="20">
84 </div> 84 </div>
85 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" 85 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
86 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="20"> 86 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="20">
87 </div> 87 </div>
88 <div class="absolute endSecondRowEndSecondColumn lengthSize" 88 <div class="absolute endSecondRowEndSecondColumn lengthSize"
89 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="20"> 89 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="20">
90 </div> 90 </div>
91 </div> 91 </div>
92 </div> 92 </div>
93 93
94 <div class="unconstrainedContainer"> 94 <div class="unconstrainedContainer">
95 <div class="grid"> 95 <div class="grid">
96 <div class="absolute autoRowAutoColumn percentageSize" 96 <div class="absolute autoRowAutoColumn percentageSize"
97 data-offset-x="15" data-offset-y="15" data-expected-width="515" data -expected-height="206"> 97 data-offset-x="0" data-offset-y="0" data-expected-width="515" data-e xpected-height="206">
98 </div> 98 </div>
99 <div class="absolute secondRowSecondColumn percentageSize" 99 <div class="absolute secondRowSecondColumn percentageSize"
100 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" d ata-expected-height="193"> 100 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" d ata-expected-height="193">
101 </div> 101 </div>
102 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" 102 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
103 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="10"> 103 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="10">
104 </div> 104 </div>
105 <div class="absolute endSecondRowEndSecondColumn percentageSize" 105 <div class="absolute endSecondRowEndSecondColumn percentageSize"
106 data-offset-x="15" data-offset-y="15" data-expected-width="157.5" da ta-expected-height="43"> 106 data-offset-x="0" data-offset-y="0" data-expected-width="157.5" data -expected-height="43">
107 </div> 107 </div>
108 </div> 108 </div>
109 </div> 109 </div>
110 110
111 <div class="unconstrainedContainer"> 111 <div class="unconstrainedContainer">
112 <div class="grid"> 112 <div class="grid">
113 <div class="absolute autoRowAutoColumn offsets" 113 <div class="absolute autoRowAutoColumn offsets"
114 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data -expected-height="995"> 114 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data -expected-height="995">
115 </div> 115 </div>
116 <div class="absolute secondRowSecondColumn offsets" 116 <div class="absolute secondRowSecondColumn offsets"
117 data-offset-x="120" data-offset-y="80" data-expected-width="900" dat a-expected-height="930"> 117 data-offset-x="120" data-offset-y="80" data-expected-width="900" dat a-expected-height="930">
118 </div> 118 </div>
119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" 119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
120 data-offset-x="20" data-offset-y="30" data-expected-width="85" data- expected-height="15"> 120 data-offset-x="20" data-offset-y="30" data-expected-width="85" data- expected-height="15">
121 </div> 121 </div>
122 <div class="absolute endSecondRowEndSecondColumn offsets" 122 <div class="absolute endSecondRowEndSecondColumn offsets"
123 data-offset-x="5" data-offset-y="15" data-expected-width="300" data- expected-height="180"> 123 data-offset-x="5" data-offset-y="15" data-expected-width="300" data- expected-height="180">
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 127
128 <div class="unconstrainedContainer"> 128 <div class="unconstrainedContainer">
129 <div class="grid directionRTL"> 129 <div class="grid directionRTL">
130 <div class="absolute autoRowAutoColumn sizedToGridArea" 130 <div class="absolute autoRowAutoColumn sizedToGridArea"
131 data-offset-x="-15" data-offset-y="15" data-expected-width="1030" da ta-expected-height="1030"> 131 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data- expected-height="1030">
132 </div> 132 </div>
133 <div class="absolute secondRowSecondColumn sizedToGridArea" 133 <div class="absolute secondRowSecondColumn sizedToGridArea"
134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data- expected-height="965"> 134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data- expected-height="965">
135 </div> 135 </div>
136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" 136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat a-expected-height="50"> 137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat a-expected-height="50">
138 </div> 138 </div>
139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" 139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
140 data-offset-x="700" data-offset-y="15" data-expected-width="315" dat a-expected-height="215"> 140 data-offset-x="715" data-offset-y="0" data-expected-width="315" data -expected-height="215">
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 144
145 <div class="unconstrainedContainer"> 145 <div class="unconstrainedContainer">
146 <div class="grid directionRTL"> 146 <div class="grid directionRTL">
147 <div class="absolute autoRowAutoColumn lengthSize" 147 <div class="absolute autoRowAutoColumn lengthSize"
148 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="20"> 148 data-offset-x="980" data-offset-y="0" data-expected-width="50" data- expected-height="20">
149 </div> 149 </div>
150 <div class="absolute secondRowSecondColumn lengthSize" 150 <div class="absolute secondRowSecondColumn lengthSize"
151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data -expected-height="20"> 151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data -expected-height="20">
152 </div> 152 </div>
153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" 153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="20"> 154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="20">
155 </div> 155 </div>
156 <div class="absolute endSecondRowEndSecondColumn lengthSize" 156 <div class="absolute endSecondRowEndSecondColumn lengthSize"
157 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="20"> 157 data-offset-x="980" data-offset-y="0" data-expected-width="50" data- expected-height="20">
158 </div> 158 </div>
159 </div> 159 </div>
160 </div> 160 </div>
161 161
162 <div class="unconstrainedContainer"> 162 <div class="unconstrainedContainer">
163 <div class="grid directionRTL"> 163 <div class="grid directionRTL">
164 <div class="absolute autoRowAutoColumn percentageSize" 164 <div class="absolute autoRowAutoColumn percentageSize"
165 data-offset-x="500" data-offset-y="15" data-expected-width="515" dat a-expected-height="206"> 165 data-offset-x="515" data-offset-y="0" data-expected-width="515" data -expected-height="206">
166 </div> 166 </div>
167 <div class="absolute secondRowSecondColumn percentageSize" 167 <div class="absolute secondRowSecondColumn percentageSize"
168 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5" data-expected-height="193"> 168 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5" data-expected-height="193">
169 </div> 169 </div>
170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" 170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="10"> 171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="10">
172 </div> 172 </div>
173 <div class="absolute endSecondRowEndSecondColumn percentageSize" 173 <div class="absolute endSecondRowEndSecondColumn percentageSize"
174 data-offset-x="858" data-offset-y="15" data-expected-width="157.5" d ata-expected-height="43"> 174 data-offset-x="873" data-offset-y="0" data-expected-width="157.5" da ta-expected-height="43">
175 </div> 175 </div>
176 </div> 176 </div>
177 </div> 177 </div>
178 178
179 <div class="unconstrainedContainer"> 179 <div class="unconstrainedContainer">
180 <div class="grid directionRTL"> 180 <div class="grid directionRTL">
181 <div class="absolute autoRowAutoColumn offsets" 181 <div class="absolute autoRowAutoColumn offsets"
182 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data -expected-height="995"> 182 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data -expected-height="995">
183 </div> 183 </div>
184 <div class="absolute secondRowSecondColumn offsets" 184 <div class="absolute secondRowSecondColumn offsets"
185 data-offset-x="5" data-offset-y="80" data-expected-width="900" data- expected-height="930"> 185 data-offset-x="5" data-offset-y="80" data-expected-width="900" data- expected-height="930">
186 </div> 186 </div>
187 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" 187 <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
188 data-offset-x="920" data-offset-y="30" data-expected-width="85" data -expected-height="15"> 188 data-offset-x="920" data-offset-y="30" data-expected-width="85" data -expected-height="15">
189 </div> 189 </div>
190 <div class="absolute endSecondRowEndSecondColumn offsets" 190 <div class="absolute endSecondRowEndSecondColumn offsets"
191 data-offset-x="720" data-offset-y="15" data-expected-width="300" dat a-expected-height="180"> 191 data-offset-x="720" data-offset-y="15" data-expected-width="300" dat a-expected-height="180">
192 </div> 192 </div>
193 </div> 193 </div>
194 </div> 194 </div>
195 195
196 </body> 196 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698