blob: 203723e02d1531e99b4e66d20b1ab58e7f7fadd2 [file] [log] [blame]
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +00001<!DOCTYPE html>
2<html>
3<style>
4.grid {
5 display: block;
6 background-color: grey;
7 width: 200px;
8}
9
10.gridLong {
11 height: 120px;
12}
13
14.gridShort {
15 height: 100px;
16}
17
18.firstRowFirstColumn {
19 background-color: blue;
20 position: absolute;
21}
22
23.firstRowSecondColumn {
24 background-color: lime;
25 position: absolute;
26}
27
28.secondRowFirstColumn {
29 background-color: purple;
30 position: absolute;
31}
32
33.secondRowSecondColumn {
34 background-color: orange;
35 position: absolute;
36 left: 20px;
37}
38
39.gridItem {
40 width: 20px;
41 height: 40px;
42}
43
44.testContainer {
45 position: relative;
46 margin-bottom: 20px;
47}
48</style>
49</head>
50<body>
51
52<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
53
54<div class="testContainer">
55 <div class="grid gridLong">
56 <div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
57 <div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>
58 <div class="gridItem secondRowFirstColumn" style="top: 60px;"></div>
59 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
60 </div>
61</div>
62
63<div class="testContainer">
64 <div class="grid gridShort">
65 <div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
66 <div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>
67 <div class="gridItem secondRowFirstColumn" style="top: 60px;"></div>
68 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
69 </div>
70</div>
71
72<div class="testContainer">
73 <div class="grid gridLong">
74 <div class="gridItem firstRowFirstColumn" style="top: 80px;"></div>
75 <div class="gridItem firstRowSecondColumn" style="left: 20px; top: 80px;"></div>
76 <div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>
77 <div class="gridItem secondRowSecondColumn" style="top: 20px;"></div>
78 </div>
79</div>
80
81<div class="testContainer">
82 <div class="grid gridShort">
83 <div class="gridItem firstRowFirstColumn" style="top: 60px;"></div>
84 <div class="gridItem firstRowSecondColumn" style="left: 20px; top: 40px;"></div>
85 <div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>
86 <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
87 </div>
88</div>
89
90</body>
91</html>