| 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 |