Google Git
Sign in
webkit / WebKit / 42e436ee6bc216d7629fae788ed2a4a4b27cff54 / . / LayoutTests / fast / css-grid-layout / grid-percent-track-margin-border-padding.html
blob: cbaa40250e20d942bb0e847994e64974d2f5f971 [file] [log] [blame]
rego@igalia.com95f03602015-09-09 21:11:02 +0000[diff] [blame]1<!DOCTYPE html>
2<html>
3<head>
4<link href="resources/grid.css" rel="stylesheet">
5<style>
6.grid {
7 width: 100px;
8 height: 100px;
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]9 grid-template-columns: 20% 50% 30%;
10 grid-template-rows: 40% 60%;
rego@igalia.com95f03602015-09-09 21:11:02 +0000[diff] [blame]11}
12
13.margin {
14 margin: 10px;
15}
16
17.border {
18 border: 5px solid black;
19}
20
21.padding {
22 padding: 20px;
23}
24</style>
25<script src="../../resources/check-layout.js"></script>
26</head>
27<body onload="checkLayout('.grid');">
28 <p>This test checks that percentage tracks ignore grid container's margin, border and padding in order to calculate their breadths.</p>
29
30 <div class="grid">
31 <div data-expected-width="20" data-expected-height="40"></div>
32 <div data-expected-width="50" data-expected-height="40"></div>
33 <div data-expected-width="30" data-expected-height="40"></div>
34 <div data-expected-width="20" data-expected-height="60"></div>
35 <div data-expected-width="50" data-expected-height="60"></div>
36 <div data-expected-width="30" data-expected-height="60"></div>
37 </div>
38
39 <div class="grid margin">
40 <div data-expected-width="20" data-expected-height="40"></div>
41 <div data-expected-width="50" data-expected-height="40"></div>
42 <div data-expected-width="30" data-expected-height="40"></div>
43 <div data-expected-width="20" data-expected-height="60"></div>
44 <div data-expected-width="50" data-expected-height="60"></div>
45 <div data-expected-width="30" data-expected-height="60"></div>
46 </div>
47
48 <div class="grid border">
49 <div data-expected-width="20" data-expected-height="40"></div>
50 <div data-expected-width="50" data-expected-height="40"></div>
51 <div data-expected-width="30" data-expected-height="40"></div>
52 <div data-expected-width="20" data-expected-height="60"></div>
53 <div data-expected-width="50" data-expected-height="60"></div>
54 <div data-expected-width="30" data-expected-height="60"></div>
55 </div>
56
57 <div class="grid padding">
58 <div data-expected-width="20" data-expected-height="40"></div>
59 <div data-expected-width="50" data-expected-height="40"></div>
60 <div data-expected-width="30" data-expected-height="40"></div>
61 <div data-expected-width="20" data-expected-height="60"></div>
62 <div data-expected-width="50" data-expected-height="60"></div>
63 <div data-expected-width="30" data-expected-height="60"></div>
64 </div>
65
66 <div class="grid margin border">
67 <div data-expected-width="20" data-expected-height="40"></div>
68 <div data-expected-width="50" data-expected-height="40"></div>
69 <div data-expected-width="30" data-expected-height="40"></div>
70 <div data-expected-width="20" data-expected-height="60"></div>
71 <div data-expected-width="50" data-expected-height="60"></div>
72 <div data-expected-width="30" data-expected-height="60"></div>
73 </div>
74
75 <div class="grid margin padding">
76 <div data-expected-width="20" data-expected-height="40"></div>
77 <div data-expected-width="50" data-expected-height="40"></div>
78 <div data-expected-width="30" data-expected-height="40"></div>
79 <div data-expected-width="20" data-expected-height="60"></div>
80 <div data-expected-width="50" data-expected-height="60"></div>
81 <div data-expected-width="30" data-expected-height="60"></div>
82 </div>
83
84 <div class="grid border padding">
85 <div data-expected-width="20" data-expected-height="40"></div>
86 <div data-expected-width="50" data-expected-height="40"></div>
87 <div data-expected-width="30" data-expected-height="40"></div>
88 <div data-expected-width="20" data-expected-height="60"></div>
89 <div data-expected-width="50" data-expected-height="60"></div>
90 <div data-expected-width="30" data-expected-height="60"></div>
91 </div>
92
93 <div class="grid margin border padding">
94 <div data-expected-width="20" data-expected-height="40"></div>
95 <div data-expected-width="50" data-expected-height="40"></div>
96 <div data-expected-width="30" data-expected-height="40"></div>
97 <div data-expected-width="20" data-expected-height="60"></div>
98 <div data-expected-width="50" data-expected-height="60"></div>
99 <div data-expected-width="30" data-expected-height="60"></div>
100 </div>
101</body>
102</html>