Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet"> | 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet"> |
| 5 <link href="resources/grid.css" rel="stylesheet"> | 5 <link href="resources/grid.css" rel="stylesheet"> |
| 6 <link href="resources/grid-alignment.css" rel="stylesheet"> | 6 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 7 <style> | 7 <style> |
| 8 .definite { | 8 .definite { |
| 9 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ | 9 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ |
| 10 width: 800px; | 10 width: 800px; |
| 11 height: 600px; | 11 height: 600px; |
| 12 } | 12 } |
| 13 .gridItem { | 13 .gridItem { |
| 14 grid-column: 1; | 14 grid-column: 1; |
| 15 grid-row: 1; | 15 grid-row: 1; |
| 16 height: 22px; | 16 height: 22px; |
| 17 width: 77px; | 17 width: 77px; |
| 18 } | 18 } |
| 19 .gridWithFixed { | 19 .gridWithFixed { |
| 20 grid-template-columns: [first] 10px; | 20 grid-template-columns: [first] 10px; |
| 21 grid-template-rows: [first] 15px; | 21 grid-template-rows: [first] 15px; |
| 22 } | 22 } |
| 23 .gridWithPercent { | 23 .gridWithPercent { |
| 24 grid-template-columns: 53% [last]; | 24 grid-template-columns: 50% [last]; |
|
svillar
2016/06/08 10:38:03
I guess this is not really needed. It also leads t
Manuel Rego
2016/06/08 11:56:30
Again the same reason than before.
| |
| 25 grid-template-rows: 27% [last]; | 25 grid-template-rows: 27% [last]; |
| 26 } | 26 } |
| 27 .gridWithAuto { | 27 .gridWithAuto { |
| 28 grid-template-columns: [first] auto; | 28 grid-template-columns: [first] auto; |
| 29 grid-template-rows: auto [last]; | 29 grid-template-rows: auto [last]; |
| 30 } | 30 } |
| 31 .gridWithMinMax { | 31 .gridWithMinMax { |
| 32 grid-template-columns: [first] minmax(10%, 15px); | 32 grid-template-columns: [first] minmax(10%, 15px); |
| 33 grid-template-rows: minmax(20px, 50%) [last]; | 33 grid-template-rows: minmax(20px, 50%) [last]; |
| 34 } | 34 } |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 97 <div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBracke ts"></div> | 97 <div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBracke ts"></div> |
| 98 <div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrac kets"></div> | 98 <div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrac kets"></div> |
| 99 <div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustom Idents"></div> | 99 <div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustom Idents"></div> |
| 100 | 100 |
| 101 <script src="resources/grid-definitions-parsing-utils.js"></script> | 101 <script src="resources/grid-definitions-parsing-utils.js"></script> |
| 102 <script> | 102 <script> |
| 103 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected'); | 103 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected'); |
| 104 | 104 |
| 105 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); | 105 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); |
| 106 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " [first] 10px", "[first] 15px"); | 106 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " [first] 10px", "[first] 15px"); |
| 107 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]"); | 107 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "400px [last]", "162px [last]"); |
| 108 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px [last]", "0px [last]"); | 108 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px [last]", "0px [last]"); |
| 109 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "77px [last]", "22px [last]"); | 109 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "38.5px [last]", "22px [last]"); |
| 110 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[ first] 0px", "0px [last]"); | 110 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[ first] 0px", "0px [last]"); |
| 111 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "[first] 77px", "22px [last]"); | 111 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "[first] 77px", "22px [last]"); |
| 112 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first ] 80px", "300px [last]"); | 112 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first ] 80px", "300px [last]"); |
| 113 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]"); | 113 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]"); |
| 114 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [ nav2] 450px [last]"); | 114 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [ nav2] 450px [last]"); |
| 115 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav n av2] 150px [last]"); | 115 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav n av2] 150px [last]"); |
| 116 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px"); | 116 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px"); |
| 117 | 117 |
| 118 debug(""); | 118 debug(""); |
| 119 debug("Test getting and setting grid-template-columns and grid-template-rows through JS"); | 119 debug("Test getting and setting grid-template-columns and grid-template-rows through JS"); |
| (...skipping 25 matching lines...) Expand all Loading... | |
| 145 testGridDefinitionsSetBadJSValues("[foo]", "[bar"); | 145 testGridDefinitionsSetBadJSValues("[foo]", "[bar"); |
| 146 testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]"); | 146 testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]"); |
| 147 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); | 147 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); |
| 148 testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2 em"); | 148 testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2 em"); |
| 149 testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em") ; | 149 testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em") ; |
| 150 testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]"); | 150 testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]"); |
| 151 testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]"); | 151 testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]"); |
| 152 </script> | 152 </script> |
| 153 </body> | 153 </body> |
| 154 </html> | 154 </html> |
| OLD | NEW |