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