Google Git
Sign in
webkit / WebKit / 8bde3ead3fc6049bffee0a9d68c7b464d3930194 / . / LayoutTests / fast / css-grid-layout / grid-positioned-items-within-grid-implicit-track.html
blob: 1c1f6ea15cffe852c185dbc997f3b1d12c203ad4 [file] [log] [blame]
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]1<!DOCTYPE html>
2<link href="resources/grid.css" rel="stylesheet">
3<style>
4
5.grid {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]6 grid-template-columns: 200px 300px;
7 grid-template-rows: 150px 250px;
8 grid-auto-columns: 100px;
9 grid-auto-rows: 50px;
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]10 width: 800px;
11 height: 600px;
12 border: 5px solid black;
13 margin: 30px;
14 padding: 15px;
15 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
16 position: relative;
17}
18
19.absolute {
20 position: absolute;
21 top: 0;
22 left: 0;
23 width: 100%;
24 height: 100%;
25 background: cyan;
26}
27
28.sixRowsAndSixColumns {
29 background: magenta;
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]30 grid-row: -5 / 5;
31 grid-column: -5 / 5;
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]32}
33
34</style>
35<script src="../../resources/check-layout.js"></script>
36<body onload="checkLayout('.grid')">
37
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]38<p>This test checks that positioned grid items are placed properly (including implicit tracks) even if the grid has implicit tracks.</p>
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]39
40<div class="grid">
41 <div class="sixRowsAndSixColumns"
42 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
43 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]44 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]45 data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115">
46 </div>
47</div>
48
49<div class="grid">
50 <div class="sixRowsAndSixColumns"
51 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
52 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]53 <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]54 data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265">
55 </div>
56</div>
57
58<div class="grid">
59 <div class="sixRowsAndSixColumns"
60 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
61 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]62 <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]63 data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115">
64 </div>
65</div>
66
67<div class="grid">
68 <div class="sixRowsAndSixColumns"
69 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
70 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]71 <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;"
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]72 data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365">
73 </div>
74</div>
75
76<div class="grid">
77 <div class="sixRowsAndSixColumns"
78 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
79 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]80 <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]81 data-offset-x="115" data-offset-y="65" data-expected-width="100" data-expected-height="50">
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]82 </div>
83</div>
84
85<div class="grid">
86 <div class="sixRowsAndSixColumns"
87 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
88 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]89 <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]90 data-offset-x="115" data-offset-y="65" data-expected-width="300" data-expected-height="200">
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]91 </div>
92</div>
93
94<div class="grid">
95 <div class="sixRowsAndSixColumns"
96 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
97 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]98 <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]99 data-offset-x="715" data-offset-y="515" data-expected-width="100" data-expected-height="50">
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]100 </div>
101</div>
102
103<div class="grid">
104 <div class="sixRowsAndSixColumns"
105 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
106 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]107 <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]108 data-offset-x="415" data-offset-y="265" data-expected-width="400" data-expected-height="300">
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]109 </div>
110</div>
111
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]112<div class="grid directionRTL">
113 <div class="sixRowsAndSixColumns"
114 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
115 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]116 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]117 data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
118 </div>
119</div>
120
121<div class="grid directionRTL">
122 <div class="sixRowsAndSixColumns"
123 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
124 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]125 <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]126 data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
127 </div>
128</div>
129
130<div class="grid directionRTL">
131 <div class="sixRowsAndSixColumns"
132 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
133 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]134 <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]135 data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
136 </div>
137</div>
138
139<div class="grid directionRTL">
140 <div class="sixRowsAndSixColumns"
141 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
142 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]143 <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;"
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]144 data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
145 </div>
146</div>
147
148<div class="grid directionRTL">
149 <div class="sixRowsAndSixColumns"
150 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
151 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]152 <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]153 data-offset-x="615" data-offset-y="65" data-expected-width="100" data-expected-height="50">
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]154 </div>
155</div>
156
157<div class="grid directionRTL">
158 <div class="sixRowsAndSixColumns"
159 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
160 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]161 <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]162 data-offset-x="415" data-offset-y="65" data-expected-width="300" data-expected-height="200">
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]163 </div>
164</div>
165
166<div class="grid directionRTL">
167 <div class="sixRowsAndSixColumns"
168 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
169 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]170 <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]171 data-offset-x="15" data-offset-y="515" data-expected-width="100" data-expected-height="50">
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]172 </div>
173</div>
174
175<div class="grid directionRTL">
176 <div class="sixRowsAndSixColumns"
177 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
178 </div>
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]179 <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;"
rego@igalia.combb78d272016-06-01 07:24:21 +0000[diff] [blame]180 data-offset-x="15" data-offset-y="265" data-expected-width="400" data-expected-height="300">
rego@igalia.comfd94e852016-04-06 10:21:59 +0000[diff] [blame]181 </div>
182</div>
183
rego@igalia.com98ca2182016-03-09 14:26:39 +0000[diff] [blame]184</body>