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 } |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
59 grid-template-rows: (first) 50% last); | 59 grid-template-rows: (first) 50% last); |
60 } | 60 } |
61 .gridWithMisplacedParentheses { | 61 .gridWithMisplacedParentheses { |
62 grid-template-columns: (first 10px) 50%; | 62 grid-template-columns: (first 10px) 50%; |
63 grid-template-rows: (first) (nav 50%); | 63 grid-template-rows: (first) (nav 50%); |
64 } | 64 } |
65 .gridWithContiguousParentheses { | 65 .gridWithContiguousParentheses { |
66 grid-template-columns: (first) (nav) 10px; | 66 grid-template-columns: (first) (nav) 10px; |
67 grid-template-rows: 50px (nav nav2) (middle) 10px; | 67 grid-template-rows: 50px (nav nav2) (middle) 10px; |
68 } | 68 } |
| 69 .gridWithAutoAsCustomIdent { |
| 70 grid-template-columns: (auto) 10px 50px; |
| 71 grid-template-rows: 50px (auto) 10px; |
| 72 } |
| 73 .gridWithMinmaxAsCustomIdent { |
| 74 grid-template-columns: (minmax) 10px 50px; |
| 75 grid-template-rows: 50px (minmax) 10px; |
| 76 } |
| 77 .gridWithSubgridAsCustomIdent { |
| 78 grid-template-columns: (subgrid) 10px 50px; |
| 79 grid-template-rows: 50px (subgrid) 10px; |
| 80 } |
69 </style> | 81 </style> |
70 <script src="../../resources/js-test.js"></script> | 82 <script src="../../resources/js-test.js"></script> |
71 </head> | 83 </head> |
72 <body> | 84 <body> |
73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> | 85 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> | 86 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">
</div> | 87 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">
</div> |
76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi
thChildren"> | 88 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi
thChildren"> |
77 <div class="gridItem"></div> | 89 <div class="gridItem"></div> |
78 </div> | 90 </div> |
79 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> | 91 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> |
80 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> | 92 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> |
81 <div class="gridItem"></div> | 93 <div class="gridItem"></div> |
82 </div> | 94 </div> |
83 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> | 95 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> |
84 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> | 96 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> |
85 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta
geSameStringMultipleTimes"></div> | 97 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta
geSameStringMultipleTimes"></div> |
86 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div> | 98 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div> |
87 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> | 99 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> |
88 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div> | 100 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div> |
89 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare
ntheses"></div> | 101 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare
ntheses"></div> |
90 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese
s"></div> | 102 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese
s"></div> |
91 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses"
></div> | 103 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses"
></div> |
92 <div class="grid gridWithContiguousParentheses" id="gridWithContiguousParenthese
s"></div> | 104 <div class="grid gridWithContiguousParentheses" id="gridWithContiguousParenthese
s"></div> |
| 105 <div class="grid gridWithAutoAsCustomIdent" id="gridWithAutoAsCustomIdent"></div
> |
| 106 <div class="grid gridWithMinmaxAsCustomIdent" id="gridWithMinmaxAsCustomIdent"><
/div> |
| 107 <div class="grid gridWithSubgridAsCustomIdent" id="gridWithSubgridAsCustomIdent"
></div> |
93 | 108 |
94 <script src="resources/grid-definitions-parsing-utils.js"></script> | 109 <script src="resources/grid-definitions-parsing-utils.js"></script> |
95 <script> | 110 <script> |
96 description('Test that setting and getting grid-template-columns and grid-te
mplate-rows works as expected'); | 111 description('Test that setting and getting grid-template-columns and grid-te
mplate-rows works as expected'); |
97 | 112 |
98 debug("Test getting grid-template-columns and grid-template-rows set through
CSS"); | 113 debug("Test getting grid-template-columns and grid-template-rows set through
CSS"); |
99 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
(first) 10px", "(first) 15px"); | 114 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
(first) 10px", "(first) 15px"); |
100 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"424px (last)", "162px (last)"); | 115 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"424px (last)", "162px (last)"); |
101 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
e"), "0px (last)", "0px (last)"); | 116 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
e"), "0px (last)", "0px (last)"); |
102 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
eWithChildren"), "77px (last)", "22px (last)"); | 117 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
eWithChildren"), "77px (last)", "22px (last)"); |
(...skipping 21 matching lines...) Expand all Loading... |
124 testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar)
auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0
px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)")
; | 139 testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar)
auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0
px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)")
; |
125 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22
0px (foo) repeat(1, 50% (baz)", "(first) 0px (foo bar) 20px (foo bar) 20px", "22
0px (foo) 300px (baz)", "(first) auto (foo bar) 20px (foo bar) 20px", "220px (fo
o) 50% (baz)"); | 140 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22
0px (foo) repeat(1, 50% (baz)", "(first) 0px (foo bar) 20px (foo bar) 20px", "22
0px (foo) 300px (baz)", "(first) auto (foo bar) 20px (foo bar) 20px", "220px (fo
o) 50% (baz)"); |
126 | 141 |
127 debug(""); | 142 debug(""); |
128 debug("Test getting invalid grid-template-columns and grid-template-rows set
through CSS"); | 143 debug("Test getting invalid grid-template-columns and grid-template-rows set
through CSS"); |
129 testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"),
"none", "none"); | 144 testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"),
"none", "none"); |
130 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare
ntheses"), "none", "none"); | 145 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare
ntheses"), "none", "none"); |
131 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth
eses"), "none", "none"); | 146 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth
eses"), "none", "none"); |
132 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe
ses"), "none", "none"); | 147 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe
ses"), "none", "none"); |
133 testGridDefinitionsValues(document.getElementById("gridWithContiguousParenth
eses"), "none", "none"); | 148 testGridDefinitionsValues(document.getElementById("gridWithContiguousParenth
eses"), "none", "none"); |
| 149 testGridDefinitionsValues(document.getElementById("gridWithAutoAsCustomIdent
"), "none", "none"); |
| 150 testGridDefinitionsValues(document.getElementById("gridWithMinmaxAsCustomIde
nt"), "none", "none"); |
| 151 testGridDefinitionsValues(document.getElementById("gridWithSubgridAsCustomId
ent"), "none", "none"); |
134 | 152 |
135 debug(""); | 153 debug(""); |
136 debug("Test getting and setting invalid grid-template-columns and grid-templ
ate-rows through JS"); | 154 debug("Test getting and setting invalid grid-template-columns and grid-templ
ate-rows through JS"); |
137 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); | 155 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); |
138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); | 156 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); |
139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); | 157 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); |
140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2
em"); | 158 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2
em"); |
141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em")
; | 159 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em")
; |
142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); | 160 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); |
| 161 testGridDefinitionsSetBadJSValues("(foo auto) 2em", "50% (auto)"); |
| 162 testGridDefinitionsSetBadJSValues("10% (minmax nav)", "(minmax) 50% (minmax
end)"); |
| 163 testGridDefinitionsSetBadJSValues("(start) 2em (subgrid)", "(subgrid) 2em"); |
| 164 |
143 </script> | 165 </script> |
144 </body> | 166 </body> |
145 </html> | 167 </html> |
OLD | NEW |