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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html

Issue 637033003: [CSS Grid Layout] Fix positioned grid children position and size (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years 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 | « LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt ('k') | LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5
6 .grid {
7 grid-template-columns: 50px 100px;
8 grid-template-rows: 50px 100px;
9 width: 150px;
10 height: 150px;
11 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
12 position: relative;
13 /* Ensures that the grid container is the containing block of the fixed posi tioned grid children. */
14 transform: translate(10px, 20px);
15 }
16
17 .absolute {
18 position: absolute;
19 }
20
21 .fixed {
22 position: fixed;
23 }
24
25 .offsetLeft100 {
26 left: 100px;
27 }
28
29 </style>
30 <script src="../../resources/check-layout.js"></script>
31 <body onload="checkLayout('.grid')">
32
33 <p>This test checks that positioned items shouldn't take up space or otherwise p articipate in the layout of the grid.</p>
34
35 <p>Absolutely positioned:</p>
36
37 <div class="grid">
38 <div class="sizedToGridArea absolute autoRowAutoColumn"
39 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expec ted-height="150">
40 </div>
41 <div class="sizedToGridArea autoRowAutoColumn"
42 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
43 </div>
44 </div>
45
46 <div class="grid">
47 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
48 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-exp ected-height="150">
49 </div>
50 <div class="sizedToGridArea autoRowAutoColumn"
51 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
52 </div>
53 </div>
54
55 <div class="grid">
56 <div class="sizedToGridArea autoRowAutoColumn"
57 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
58 </div>
59 <div class="sizedToGridArea absolute autoRowAutoColumn"
60 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expec ted-height="150">
61 </div>
62 <div class="sizedToGridArea autoRowAutoColumn"
63 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
64 </div>
65 </div>
66
67 <div class="grid">
68 <div class="sizedToGridArea autoRowAutoColumn"
69 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
70 </div>
71 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
72 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-exp ected-height="150">
73 </div>
74 <div class="sizedToGridArea autoRowAutoColumn"
75 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
76 </div>
77 </div>
78
79 <div class="grid">
80 <div class="sizedToGridArea autoRowAutoColumn"
81 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
82 </div>
83 <div class="sizedToGridArea autoRowAutoColumn"
84 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
85 <div class="sizedToGridArea absolute autoRowAutoColumn"
86 data-offset-x="50" data-offset-y="0" data-expected-width="150" data- expected-height="150">
87 </div>
88 </div>
89 <div class="sizedToGridArea autoRowAutoColumn"
90 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expec ted-height="100">
91 </div>
92 </div>
93
94 <div class="grid">
95 <div class="sizedToGridArea autoRowAutoColumn"
96 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
97 </div>
98 <div class="sizedToGridArea autoRowAutoColumn"
99 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
100 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
101 data-offset-x="100" data-offset-y="0" data-expected-width="150" data -expected-height="150">
102 </div>
103 </div>
104 <div class="sizedToGridArea autoRowAutoColumn"
105 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expec ted-height="100">
106 </div>
107 </div>
108
109 <p>Fixed positioned:</p>
110
111 <div class="grid">
112 <div class="sizedToGridArea fixed autoRowAutoColumn"
113 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expec ted-height="150">
114 </div>
115 <div class="sizedToGridArea autoRowAutoColumn"
116 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
117 </div>
118 </div>
119
120 <div class="grid">
121 <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
122 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-exp ected-height="150">
123 </div>
124 <div class="sizedToGridArea autoRowAutoColumn"
125 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
126 </div>
127 </div>
128
129 <div class="grid">
130 <div class="sizedToGridArea autoRowAutoColumn"
131 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
132 </div>
133 <div class="sizedToGridArea fixed autoRowAutoColumn"
134 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expec ted-height="150">
135 </div>
136 <div class="sizedToGridArea autoRowAutoColumn"
137 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
138 </div>
139 </div>
140
141 <div class="grid">
142 <div class="sizedToGridArea autoRowAutoColumn"
143 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
144 </div>
145 <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
146 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-exp ected-height="150">
147 </div>
148 <div class="sizedToGridArea autoRowAutoColumn"
149 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
150 </div>
151 </div>
152
153 <div class="grid">
154 <div class="sizedToGridArea autoRowAutoColumn"
155 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
156 </div>
157 <div class="sizedToGridArea autoRowAutoColumn"
158 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
159 <div class="sizedToGridArea fixed autoRowAutoColumn"
160 data-offset-x="50" data-offset-y="0" data-expected-width="150" data- expected-height="150">
161 </div>
162 </div>
163 <div class="sizedToGridArea autoRowAutoColumn"
164 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expec ted-height="100">
165 </div>
166 </div>
167
168 <div class="grid">
169 <div class="sizedToGridArea autoRowAutoColumn"
170 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expect ed-height="50">
171 </div>
172 <div class="sizedToGridArea autoRowAutoColumn"
173 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expe cted-height="50">
174 <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
175 data-offset-x="100" data-offset-y="0" data-expected-width="150" data -expected-height="150">
176 </div>
177 </div>
178 <div class="sizedToGridArea autoRowAutoColumn"
179 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expec ted-height="100">
180 </div>
181 </div>
182
183 </body>
184 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt ('k') | LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698