OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
esprehn
2015/10/01 08:43:28
leave out html
Manuel Rego
2015/10/01 11:29:25
Done.
| |
3 <link href="resources/grid.css" rel="stylesheet"> | |
4 <style> | |
5 | |
6 .grid { | |
7 grid-template-columns: 100px 200px; | |
8 grid-template-rows: 50px 150px; | |
9 width: 500px; | |
10 height: 300px; | |
11 border: 5px solid black; | |
12 margin: 30px; | |
13 padding: 15px; | |
14 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ | |
15 position: relative; | |
16 } | |
17 | |
18 .absolute { | |
19 position: absolute; | |
20 } | |
21 | |
22 .startUnknownLine { | |
23 background-color: blue; | |
24 grid-column: foo / 3; | |
25 grid-row: bar / 3; | |
26 } | |
27 | |
28 .endUnknownLine { | |
29 background-color: orange; | |
30 grid-column: 1 / foo; | |
31 grid-row: 1 / bar; | |
32 } | |
33 | |
34 .startAndEndUnknownLines { | |
35 background-color: green; | |
36 grid-column: foo / bar; | |
37 grid-row: foo / bar; | |
38 } | |
39 | |
40 </style> | |
41 <script src="../../resources/check-layout.js"></script> | |
42 <body onload="checkLayout('.grid')"> | |
43 | |
44 <p>This test checks that grid placement properties of absolutely positioned item s using unknown named grid lines are treated as "auto".</p> | |
45 | |
46 <div class="grid"> | |
47 <div class="absolute sizedToGridArea startAndEndUnknownLines" | |
48 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp ected-height="330"> | |
49 </div> | |
50 <div class="absolute sizedToGridArea endUnknownLine" | |
51 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp ected-height="315"> | |
52 </div> | |
53 <div class="absolute sizedToGridArea startUnknownLine" | |
54 data-offset-x="15" data-offset-y="15" data-expected-width="315" data-exp ected-height="215"> | |
55 </div> | |
56 </div> | |
57 | |
58 </body> | |
OLD | NEW |