OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <style> | |
4 .grid { | |
5 display: grid; | |
6 grid-template-columns: 200px 200px; | |
7 grid-template-rows: 200px 200px; | |
8 } | |
9 | |
10 #absolutePos { | |
11 position: absolute; | |
12 } | |
13 | |
14 #fixedPos { | |
15 position: fixed; | |
16 } | |
17 | |
18 #floatPos { | |
19 float: left; | |
20 } | |
21 | |
22 #one { | |
23 color: blue; | |
24 background: red; | |
25 grid-column: 1; | |
26 grid-row: 1; | |
27 } | |
28 | |
29 #two { | |
30 color: yellow; | |
31 background: green; | |
32 grid-column: 2; | |
33 grid-row: 1; | |
34 } | |
35 #three { | |
36 color: gray; | |
37 background: pink; | |
38 grid-column: 1; | |
39 grid-row: 2; | |
40 } | |
41 #four { | |
42 color: orange; | |
43 background: brown; | |
44 grid-column: 2; | |
45 grid-row: 2; | |
46 } | |
47 </style> | |
48 <script src="../../resources/check-layout.js"></script> | |
49 <body onload="checkLayout('.grid')"> | |
50 | |
51 <p>This test checks that the shirnk-to-fit behavior is applied when defining flo at or out-of-flow positioned elements.</p> | |
52 <p>The following grids should be 400px * 400px except the first one, which is 'r elative' positioned</p> | |
53 | |
54 <div class="grid" id="regularGrid" data-expected-height="400" data-expected-widt h="769"> | |
55 <div class="gg" id="one"></div> | |
Manuel Rego
2014/03/05 12:56:11
This "gg" class is undefined here. It doesn't seem
| |
56 <div class="gg" id="two"></div> | |
57 <div class="gg" id="three"></div> | |
58 <div class="gg" id="four"></div> | |
59 </div> | |
60 | |
61 <div class="grid" id="absolutePos" data-expected-height="400" data-expected-widt h="400"> | |
62 <div class="gg" id="one"></div> | |
63 <div class="gg" id="two"></div> | |
64 <div class="gg" id="three"></div> | |
65 <div class="gg" id="four"></div> | |
66 </div> | |
67 | |
68 <div class="grid" id="fixedPos" data-expected-height="400" data-expected-width=" 400"> | |
69 <div class="gg" id="one"></div> | |
70 <div class="gg" id="two"></div> | |
71 <div class="gg" id="three"></div> | |
72 <div class="gg" id="four"></div> | |
73 </div> | |
74 | |
75 <div class="grid" id="floatPos" data-expected-height="400" data-expected-width=" 400"> | |
76 <div class="gg" id="one"></div> | |
77 <div class="gg" id="two"></div> | |
78 <div class="gg" id="three"></div> | |
79 <div class="gg" id="four"></div> | |
80 </div> | |
81 | |
82 </body> | |
83 </html> | |
OLD | NEW |