OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
| 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re
l="stylesheet"> |
4 <link href="resources/grid.css" rel="stylesheet"> | 6 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 7 <style> |
6 .grid { | |
7 width: -webkit-min-content; | |
8 height: -webkit-min-content; | |
9 } | |
10 | |
11 .margin { | 8 .margin { |
12 margin: 10px; | 9 margin: 10px; |
13 } | 10 } |
14 | 11 |
15 .border { | 12 .border { |
16 border: 5px solid black; | 13 border: 5px solid black; |
17 } | 14 } |
18 | 15 |
19 .padding { | 16 .padding { |
20 padding: 20px; | 17 padding: 20px; |
21 } | 18 } |
22 | 19 |
23 .scroll { | 20 .scroll { |
24 overflow: scroll; | 21 overflow: scroll; |
25 } | 22 } |
26 | 23 |
27 .item { | 24 .item { |
28 width: 100px; | 25 width: 100px; |
29 height: 100px; | 26 height: 100px; |
30 background: lime; | 27 background: lime; |
31 } | 28 } |
32 </style> | 29 </style> |
33 <script src="../../resources/check-layout.js"></script> | 30 <script src="../../resources/check-layout.js"></script> |
34 </head> | 31 </head> |
35 <body onload="checkLayout('.grid');"> | 32 <body onload="checkLayout('.grid');"> |
36 <p>This test checks that grid container size includes border, padding and sc
rollbar; ignoring margin as expected.</p> | 33 <p>This test checks that grid container size includes border, padding and sc
rollbar; ignoring margin as expected.</p> |
37 | 34 |
38 <div class="grid" data-expected-width="100" data-expected-height="100"> | 35 <div class="grid min-content" data-expected-width="100" data-expected-height
="100"> |
39 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 36 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
40 </div> | 37 </div> |
41 | 38 |
42 <div class="grid margin" data-expected-width="100" data-expected-height="100
"> | 39 <div class="grid min-content margin" data-expected-width="100" data-expected
-height="100"> |
43 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 40 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
44 </div> | 41 </div> |
45 | 42 |
46 <div class="grid border" data-expected-width="110" data-expected-height="110
"> | 43 <div class="grid min-content border" data-expected-width="110" data-expected
-height="110"> |
47 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 44 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
48 </div> | 45 </div> |
49 | 46 |
50 <div class="grid padding" data-expected-width="140" data-expected-height="14
0"> | 47 <div class="grid min-content padding" data-expected-width="140" data-expecte
d-height="140"> |
51 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 48 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
52 </div> | 49 </div> |
53 | 50 |
54 <div class="grid scroll" data-expected-width="115" data-expected-height="115
"> | 51 <div class="grid min-content scroll" data-expected-width="115" data-expected
-height="115"> |
55 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 52 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
56 </div> | 53 </div> |
57 | 54 |
58 <div class="grid margin border" data-expected-width="110" data-expected-heig
ht="110"> | 55 <div class="grid min-content margin border" data-expected-width="110" data-e
xpected-height="110"> |
59 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 56 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
60 </div> | 57 </div> |
61 | 58 |
62 <div class="grid margin padding" data-expected-width="140" data-expected-hei
ght="140"> | 59 <div class="grid min-content margin padding" data-expected-width="140" data-
expected-height="140"> |
63 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 60 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
64 </div> | 61 </div> |
65 | 62 |
66 <div class="grid margin scroll" data-expected-width="115" data-expected-heig
ht="115"> | 63 <div class="grid min-content margin scroll" data-expected-width="115" data-e
xpected-height="115"> |
67 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 64 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
68 </div> | 65 </div> |
69 | 66 |
70 <div class="grid border padding" data-expected-width="150" data-expected-hei
ght="150"> | 67 <div class="grid min-content border padding" data-expected-width="150" data-
expected-height="150"> |
71 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 68 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
72 </div> | 69 </div> |
73 | 70 |
74 <div class="grid border scroll" data-expected-width="125" data-expected-heig
ht="125"> | 71 <div class="grid min-content border scroll" data-expected-width="125" data-e
xpected-height="125"> |
75 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 72 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
76 </div> | 73 </div> |
77 | 74 |
78 <div class="grid padding scroll" data-expected-width="155" data-expected-hei
ght="155"> | 75 <div class="grid min-content padding scroll" data-expected-width="155" data-
expected-height="155"> |
79 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 76 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
80 </div> | 77 </div> |
81 | 78 |
82 <div class="grid margin border padding" data-expected-width="150" data-expec
ted-height="150"> | 79 <div class="grid min-content margin border padding" data-expected-width="150
" data-expected-height="150"> |
83 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 80 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
84 </div> | 81 </div> |
85 | 82 |
86 <div class="grid margin border scroll" data-expected-width="125" data-expect
ed-height="125"> | 83 <div class="grid min-content margin border scroll" data-expected-width="125"
data-expected-height="125"> |
87 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 84 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
88 </div> | 85 </div> |
89 | 86 |
90 <div class="grid margin padding scroll" data-expected-width="155" data-expec
ted-height="155"> | 87 <div class="grid min-content margin padding scroll" data-expected-width="155
" data-expected-height="155"> |
91 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 88 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
92 </div> | 89 </div> |
93 | 90 |
94 <div class="grid border padding scroll" data-expected-width="165" data-expec
ted-height="165"> | 91 <div class="grid min-content border padding scroll" data-expected-width="165
" data-expected-height="165"> |
95 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 92 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
96 </div> | 93 </div> |
97 | 94 |
98 <div class="grid margin border padding scroll" data-expected-width="165" dat
a-expected-height="165"> | 95 <div class="grid min-content margin border padding scroll" data-expected-wid
th="165" data-expected-height="165"> |
99 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> | 96 <div class="item" data-expected-width="100" data-expected-height="100"><
/div> |
100 </div> | 97 </div> |
101 | 98 |
102 </body> | 99 </body> |
103 </html> | 100 </html> |
OLD | NEW |