Google Git
Sign in
webkit / WebKit / 356bd394f6507abf43409bdd63c4c34db697f0c6 / . / LayoutTests / fast / css-grid-layout / grid-item-margin-auto-columns-rows-vertical-ltr.html
blob: e88c8bf7f024492ad50bd2ef148c4ff357ac1d05 [file] [log] [blame]
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]1<!DOCTYPE html>
2<html>
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]3<link href="resources/grid.css" rel="stylesheet">
jfernandez@igalia.comfcb06d32016-03-03 11:05:32 +0000[diff] [blame]4<link href="resources/grid-alignment.css" rel="stylesheet">
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]5<style>
6.grid {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]7 grid-template-rows: auto auto;
8 grid-template-columns: auto auto;
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]9 width: 200px;
10}
11
12.gridItem {
13 width: 20px;
14 height: 40px;
15}
16
17.marginTop {
18 margin-top: 20px;
19}
20
21.marginBottom {
22 margin-bottom: 20px;
23}
24
25.testContainer {
26 position: relative;
27 margin-bottom: 20px;
28}
29
30</style>
31</head>
32<body>
33
34<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>
35
36<div class="testContainer">
jfernandez@igalia.comfcb06d32016-03-03 11:05:32 +0000[diff] [blame]37 <div class="grid contentStart verticalRL">
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]38 <div class="gridItem marginTop firstRowFirstColumn"></div>
39 <div class="gridItem firstRowSecondColumn"></div>
40 <div class="gridItem secondRowFirstColumn"></div>
41 <div class="gridItem marginBottom secondRowSecondColumn"></div>
42 </div>
43</div>
44
45<div class="testContainer">
jfernandez@igalia.comfcb06d32016-03-03 11:05:32 +0000[diff] [blame]46 <div class="grid contentStart verticalRL">
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]47 <div class="gridItem marginTop firstRowFirstColumn"></div>
48 <div class="gridItem firstRowSecondColumn"></div>
49 <div class="gridItem marginBottom secondRowFirstColumn"></div>
50 <div class="gridItem secondRowSecondColumn"></div>
51 </div>
52</div>
53
54<div class="testContainer">
jfernandez@igalia.comfcb06d32016-03-03 11:05:32 +0000[diff] [blame]55 <div class="grid contentStart verticalLR">
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]56 <div class="gridItem marginTop firstRowFirstColumn"></div>
57 <div class="gridItem firstRowSecondColumn"></div>
58 <div class="gridItem secondRowFirstColumn"></div>
59 <div class="gridItem marginBottom secondRowSecondColumn"></div>
60 </div>
61</div>
62
63<div class="testContainer">
jfernandez@igalia.comfcb06d32016-03-03 11:05:32 +0000[diff] [blame]64 <div class="grid contentStart verticalLR">
commit-queue@webkit.orgc1a81a92014-05-22 12:01:32 +0000[diff] [blame]65 <div class="gridItem marginTop firstRowFirstColumn"></div>
66 <div class="gridItem firstRowSecondColumn"></div>
67 <div class="gridItem marginBottom secondRowFirstColumn"></div>
68 <div class="gridItem secondRowSecondColumn"></div>
69 </div>
70</div>