OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 5 <style> |
6 .grid { | 6 .grid { |
7 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ | 7 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ |
8 width: 800px; | 8 width: 800px; |
9 height: 600px; | 9 height: 600px; |
10 } | 10 } |
11 .gridItem { | 11 .gridItem { |
12 grid-column: 1; | 12 grid-column: 1; |
13 grid-row: 1; | 13 grid-row: 1; |
14 height: 22px; | 14 height: 22px; |
15 width: 77px; | 15 width: 77px; |
16 } | 16 } |
17 .gridWithFixed { | 17 .gridWithFixed { |
18 grid-template-columns: (first) 10px; | 18 grid-template: (first) 10px / (first) "a" 15px; |
19 grid-template-rows: (first) 15px; | |
20 } | 19 } |
21 .gridWithPercent { | 20 .gridWithPercent { |
22 grid-template-columns: 53% (last); | 21 grid-template: 53% (last) / "a" 27% (last); |
23 grid-template-rows: 27% (last); | |
24 } | 22 } |
25 .gridWithAuto { | 23 .gridWithAuto { |
26 grid-template-columns: (first) auto; | 24 grid-template: (first) auto / "a" (last); |
27 grid-template-rows: auto (last); | |
28 } | 25 } |
29 .gridWithMinMax { | 26 .gridWithMinMax { |
30 grid-template-columns: (first) minmax(10%, 15px); | 27 grid-template: (first) minmax(10%, 15px) / "a" minmax(20px, 50%) (last); |
31 grid-template-rows: minmax(20px, 50%) (last); | |
32 } | 28 } |
33 .gridWithFixedMultiple { | 29 .gridWithFixedMultiple { |
34 grid-template-columns: (first nav) 10px (last); | 30 grid-template: (first nav) 10px (last) / (first nav) "a" 15px (last); |
35 grid-template-rows: (first nav) 15px (last); | |
36 } | 31 } |
37 .gridWithPercentageSameStringMultipleTimes { | 32 .gridWithPercentageSameStringMultipleTimes { |
38 grid-template-columns: (first nav) 10% (nav) 15% (last); | 33 grid-template: (first nav) 10% (nav) 15% (last) / (first nav2) "a b" 25% (na
v2) |
39 grid-template-rows: (first nav2) 25% (nav2) 75% (last); | 34 "c d" 75% (la
st); |
40 } | 35 } |
41 .gridWithRepeat { | 36 .gridWithRepeat { |
42 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%); | 37 grid-template: (first) 10px repeat(2, (nav nav2) 50%) / "a b c" 100px
(nav) |
43 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last); | 38 (nav2) "d e f" 25%
(nav) |
| 39 (nav2) "g h i" 25%
(last); |
44 } | 40 } |
45 .gridWithEmptyParentheses { | 41 .gridWithEmptyParentheses { |
46 grid-template-columns: () 10px; | 42 grid-template: () 10px / "a" 20px ( ) |
47 grid-template-rows: 20px ( ) 50px (); | 43 "b" 50px (); |
48 } | 44 } |
49 .gridWithoutParentheses { | 45 .gridWithoutParentheses { |
50 grid-template-columns: first nav 10px; | 46 grid-template: first nav 10px / first "a" 50% last; |
51 grid-template-rows: first 50% last; | |
52 } | 47 } |
53 .gridWithInvalidNestedParentheses { | 48 .gridWithInvalidNestedParentheses { |
54 grid-template-columns: (first (nav)) 10px (last); | 49 grid-template: (first (nav)) 10px (last) / (first) "a" 50% (last (nav) nav2)
; |
55 grid-template-rows: (first) 50% (last (nav) nav2); | |
56 } | 50 } |
57 .gridWithUnbalancedParentheses { | 51 .gridWithUnbalancedParentheses { |
58 grid-template-columns: (first nav 10px; | 52 grid-template: (first nav 10px / (first) "a" 50% last); |
59 grid-template-rows: (first) 50% last); | |
60 } | 53 } |
61 .gridWithMisplacedParentheses { | 54 .gridWithMisplacedParentheses { |
62 grid-template-columns: (first 10px) 50%; | 55 grid-template: (first 10px) 50% / (first) "a b" (nav 50%); |
63 grid-template-rows: (first) (nav 50%); | |
64 } | 56 } |
65 .gridWithContiguousParentheses { | 57 .gridWithContiguousParentheses { |
66 grid-template-columns: (first) (nav) 10px; | 58 grid-template: (first) (nav) 10px / "a" 50px (nav nav2) |
67 grid-template-rows: 50px (nav nav2) (middle) 10px; | 59 "b" (middle) |
| 60 "c" 10px; |
68 } | 61 } |
69 </style> | 62 </style> |
70 <script src="../../resources/js-test.js"></script> | 63 <script src="../../resources/js-test.js"></script> |
71 </head> | 64 </head> |
72 <body> | 65 <body> |
73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> | 66 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> | 67 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">
</div> | 68 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">
</div> |
76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi
thChildren"> | 69 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi
thChildren"> |
77 <div class="gridItem"></div> | 70 <div class="gridItem"></div> |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
136 debug("Test getting and setting invalid grid-template-columns and grid-templ
ate-rows through JS"); | 129 debug("Test getting and setting invalid grid-template-columns and grid-templ
ate-rows through JS"); |
137 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); | 130 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); |
138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); | 131 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); |
139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); | 132 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); |
140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2
em"); | 133 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2
em"); |
141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em")
; | 134 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em")
; |
142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); | 135 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); |
143 </script> | 136 </script> |
144 </body> | 137 </body> |
145 </html> | 138 </html> |
OLD | NEW |