blob: 1caad2fea1e095b6e77d52a8aa0d8afaf2072a40 [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">
jfernandez@igalia.com339b0062015-04-26 22:44:11 +000056 <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 80px;"></div>
57 <div class="gridItem firstRowSecondColumn" style="left: 180px; top: 20px;"></div>
58 <div class="gridItem secondRowFirstColumn" style="left: 160px; top: 80px;"></div>
59 <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div>
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +000060 </div>
61</div>
62
63<div class="testContainer">
64 <div class="grid gridShort">
jfernandez@igalia.com339b0062015-04-26 22:44:11 +000065 <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 60px;"></div>
66 <div class="gridItem firstRowSecondColumn" style="left: 180px; top: 0px;"></div>
67 <div class="gridItem secondRowFirstColumn" style="left: 160px; top: 40px;"></div>
68 <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div>
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +000069 </div>
70</div>
71
72<div class="testContainer">
73 <div class="grid gridLong">
jfernandez@igalia.com339b0062015-04-26 22:44:11 +000074 <div class="gridItem firstRowFirstColumn" style="top: 80px;"></div>
75 <div class="gridItem firstRowSecondColumn" style="top: 20px;"></div>
76 <div class="gridItem secondRowFirstColumn" style="left: 20px; top: 80px"></div>
77 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div>
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +000078 </div>
79</div>
80
81<div class="testContainer">
82 <div class="grid gridShort">
jfernandez@igalia.com339b0062015-04-26 22:44:11 +000083 <div class="gridItem firstRowFirstColumn" style="top: 60px;"></div>
84 <div class="gridItem firstRowSecondColumn" style="top: 0px;"></div>
85 <div class="gridItem secondRowFirstColumn" style="left: 20px; top: 40px;" ></div>
86 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div>
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +000087 </div>
88</div>