OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <script> | |
4 if (window.testRunner) | |
5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | |
Julien - ping for review
2014/03/04 18:33:27
This is unneeded!
jfernandez
2014/03/05 12:39:50
Done.
| |
6 </script> | |
7 <style> | |
8 .grid { | |
9 display: grid; | |
10 grid-template-columns: 200px 200px; | |
11 grid-template-rows: 200px 200px; | |
12 } | |
13 | |
14 #absolutePos { | |
15 position: absolute; | |
16 } | |
17 | |
18 #fixedPos { | |
19 position: fixed; | |
20 } | |
21 | |
22 #floatPos { | |
23 float: left; | |
24 } | |
25 | |
26 #one { | |
27 color: blue; | |
28 background: red; | |
29 grid-column: 1; | |
30 grid-row: 1; | |
31 } | |
32 | |
33 #two { | |
34 color: yellow; | |
35 background: green; | |
36 grid-column: 2; | |
37 grid-row: 1; | |
38 } | |
39 #three { | |
40 color: gray; | |
41 background: pink; | |
42 grid-column: 1; | |
43 grid-row: 2; | |
44 } | |
45 #four { | |
46 color: orange; | |
47 background: brown; | |
48 grid-column: 2; | |
49 grid-row: 2; | |
50 } | |
51 </style> | |
52 <script src="../../resources/check-layout.js"></script> | |
53 <body onload="checkLayout('.grid')"> | |
54 | |
55 <p>The following grid should be 400px * 400px.</p> | |
Julien - ping for review
2014/03/04 18:33:27
The following grid*S* no?
Please let's have a des
jfernandez
2014/03/05 12:39:50
Done.
| |
56 | |
57 <div class="grid" id="regularGrid" data-expected-height="400" data-expected-widt h="769"> | |
58 <div class="gg" id="one"></div> | |
59 <div class="gg" id="two"></div> | |
60 <div class="gg" id="three"></div> | |
61 <div class="gg" id="four"></div> | |
62 </div> | |
63 | |
64 <div class="grid" id="absolutePos" data-expected-height="400" data-expected-widt h="400"> | |
65 <div class="gg" id="one"></div> | |
66 <div class="gg" id="two"></div> | |
67 <div class="gg" id="three"></div> | |
68 <div class="gg" id="four"></div> | |
69 </div> | |
70 | |
71 <div class="grid" id="fixedPos" data-expected-height="400" data-expected-width=" 400"> | |
72 <div class="gg" id="one"></div> | |
73 <div class="gg" id="two"></div> | |
74 <div class="gg" id="three"></div> | |
75 <div class="gg" id="four"></div> | |
76 </div> | |
77 | |
78 <div class="grid" id="floatPos" data-expected-height="400" data-expected-width=" 400"> | |
79 <div class="gg" id="one"></div> | |
80 <div class="gg" id="two"></div> | |
81 <div class="gg" id="three"></div> | |
82 <div class="gg" id="four"></div> | |
83 </div> | |
84 | |
85 </body> | |
86 </html> | |
OLD | NEW |