OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 | 5 |
6 .grid { | 6 .grid { |
7 margin: 1px; | 7 margin: 5px; |
8 width: 50px; | 8 width: 50px; |
9 height: 25px; | 9 height: 25px; |
10 grid: 100% / 100%; | 10 grid: 20px / 30px; |
11 padding: 5px 10px 15px 20px; | 11 padding: 5px 10px 15px 20px; |
12 border-style: solid; | |
13 border-width: 5px 10px 15px 20px; | |
14 float: left; | |
12 /* Ensures that the grid container is the containing block of the grid child ren. */ | 15 /* Ensures that the grid container is the containing block of the grid child ren. */ |
13 position: relative; | 16 position: relative; |
14 } | 17 } |
15 | 18 |
16 .absolute { | 19 .absolute { |
17 position: absolute; | 20 position: absolute; |
18 } | 21 } |
19 | 22 |
20 .onlyFirstRowOnlyFirstColumn { | 23 .onlyFirstRowOnlyFirstColumn { |
21 background-color: green; | 24 background-color: green; |
22 grid-column: 1 / 2; | 25 grid-column: 1 / 2; |
23 grid-row: 1 / 2; | 26 grid-row: 1 / 2; |
24 } | 27 } |
25 | 28 |
29 .offsets { | |
30 left: 0; | |
31 top: 0; | |
32 } | |
33 | |
26 .red { | 34 .red { |
27 background-color: red; | 35 background-color: red; |
28 width: 50px; | |
29 height: 25px; | |
30 top: 5px; | |
31 left: 20px; | |
32 } | 36 } |
33 | 37 |
34 </style> | 38 </style> |
35 <body> | 39 <body> |
36 | 40 |
37 <p>This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.</p> | 41 <p>This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.</p> |
38 <p>For the test to pass you should see no red and all the green boxes should hav e the very the same position and size within each grey box. The black box will b e positioned depending on the writing mode and text direction values.</p> | 42 <p>For the test to pass you should see no red and only green boxes. The black bo x will be positioned depending on the writing mode and text direction values.</p > |
39 | 43 |
40 <div class="grid"> | 44 <div class="grid"> |
41 <div class="sizedToGridArea red"></div> | 45 <div class="sizedToGridArea red"></div> |
42 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> | 46 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> |
43 </div> | 47 </div> |
44 | 48 |
45 <div class="grid verticalRL"> | 49 <div class="grid verticalRL"> |
46 <div class="sizedToGridArea red"></div> | 50 <div class="sizedToGridArea red"></div> |
47 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> | 51 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> |
48 </div> | 52 </div> |
(...skipping 11 matching lines...) Expand all Loading... | |
60 <div class="grid verticalRL directionRTL"> | 64 <div class="grid verticalRL directionRTL"> |
61 <div class="sizedToGridArea red"></div> | 65 <div class="sizedToGridArea red"></div> |
62 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> | 66 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> |
63 </div> | 67 </div> |
64 | 68 |
65 <div class="grid verticalLR directionRTL"> | 69 <div class="grid verticalLR directionRTL"> |
66 <div class="sizedToGridArea red"></div> | 70 <div class="sizedToGridArea red"></div> |
67 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> | 71 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> |
68 </div> | 72 </div> |
69 | 73 |
74 <div class="grid"> | |
75 <div class="sizedToGridArea red"></div> | |
svillar
2016/04/22 08:17:21
Do you need all the sizedToGridArea ?
Manuel Rego
2016/04/22 08:43:56
Nope as it stretches by default, I've just removed
| |
76 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div> | |
77 </div> | |
78 | |
79 <div class="grid verticalRL"> | |
80 <div class="sizedToGridArea red"></div> | |
81 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div> | |
82 </div> | |
83 | |
84 <div class="grid verticalLR"> | |
85 <div class="sizedToGridArea red"></div> | |
86 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div> | |
87 </div> | |
88 | |
89 <div class="grid directionRTL"> | |
90 <div class="sizedToGridArea red"></div> | |
91 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div> | |
92 </div> | |
93 | |
94 <div class="grid verticalRL directionRTL"> | |
95 <div class="sizedToGridArea red"></div> | |
96 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div> | |
97 </div> | |
98 | |
99 <div class="grid verticalLR directionRTL"> | |
100 <div class="sizedToGridArea red"></div> | |
101 <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX </div> | |
102 </div> | |
103 | |
70 </body> | 104 </body> |
71 </html> | 105 </html> |
OLD | NEW |