OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | |
5 if (window.testRunner) | |
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | |
7 </script> | |
8 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
9 <style> | 5 <style> |
10 .grid { | 6 .grid { |
11 /* 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 */ |
12 width: 800px; | 8 width: 800px; |
13 height: 600px; | 9 height: 600px; |
14 } | 10 } |
15 .gridItem { | 11 .gridItem { |
16 grid-column: 1; | 12 grid-column: 1; |
17 grid-row: 1; | 13 grid-row: 1; |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
69 .gridWithContiguousParentheses { | 65 .gridWithContiguousParentheses { |
70 grid-definition-columns: (first) (nav) 10px; | 66 grid-definition-columns: (first) (nav) 10px; |
71 grid-definition-rows: 50px (nav nav2) (middle) 10px; | 67 grid-definition-rows: 50px (nav nav2) (middle) 10px; |
72 } | 68 } |
73 </style> | 69 </style> |
74 <script src="../../resources/js-test.js"></script> | 70 <script src="../../resources/js-test.js"></script> |
75 </head> | 71 </head> |
76 <body> | 72 <body> |
77 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> | 73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
78 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> | 74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
| 75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">
</div> |
| 76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi
thChildren"> |
| 77 <div class="gridItem"></div> |
| 78 </div> |
79 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> | 79 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> |
80 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> | 80 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> |
81 <div class="gridItem"></div> | 81 <div class="gridItem"></div> |
82 </div> | 82 </div> |
83 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> | 83 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> |
84 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> | 84 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> |
85 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta
geSameStringMultipleTimes"></div> | 85 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta
geSameStringMultipleTimes"></div> |
86 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div> | 86 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div> |
87 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> | 87 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> |
88 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div> | 88 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div> |
89 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare
ntheses"></div> | 89 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare
ntheses"></div> |
90 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese
s"></div> | 90 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese
s"></div> |
91 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses"
></div> | 91 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses"
></div> |
92 <div class="grid gridWithContiguousParentheses" id="gridWithContiguousParenthese
s"></div> | 92 <div class="grid gridWithContiguousParentheses" id="gridWithContiguousParenthese
s"></div> |
93 | 93 |
94 <script src="resources/grid-definitions-parsing-utils.js"></script> | 94 <script src="resources/grid-definitions-parsing-utils.js"></script> |
95 <script> | 95 <script> |
96 description('Test that setting and getting grid-definition-columns and grid-
definition-rows works as expected'); | 96 description('Test that setting and getting grid-definition-columns and grid-
definition-rows works as expected'); |
97 | 97 |
98 debug("Test getting grid-definition-columns and grid-definition-rows set thr
ough CSS"); | 98 debug("Test getting grid-definition-columns and grid-definition-rows set thr
ough CSS"); |
99 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
(first) 10px", "(first) 15px"); | 99 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
(first) 10px", "(first) 15px"); |
100 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"424px (last)", "162px (last)"); | 100 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"424px (last)", "162px (last)"); |
| 101 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
e"), "0px (last)", "0px (last)"); |
| 102 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
eWithChildren"), "77px (last)", "22px (last)"); |
101 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(
first) 0px", "0px (last)"); | 103 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(
first) 0px", "0px (last)"); |
102 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE
lement"), "(first) 77px", "22px (last)"); | 104 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE
lement"), "(first) 77px", "22px (last)"); |
103 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first
) 80px", "300px (last)"); | 105 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first
) 80px", "300px (last)"); |
104 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"),
"(first nav) 10px (last)", "(first nav) 15px (last)"); | 106 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"),
"(first nav) 10px (last)", "(first nav) 15px (last)"); |
105 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr
ingMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px (
nav2) 450px (last)"); | 107 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr
ingMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px (
nav2) 450px (last)"); |
106 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"),
"(first) 10px (nav nav2) 400px (nav nav2) 400px", "100px (nav nav2) 150px (nav n
av2) 150px (last)"); | 108 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"),
"(first) 10px (nav nav2) 400px (nav nav2) 400px", "100px (nav nav2) 150px (nav n
av2) 150px (last)"); |
107 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses"
), "10px", "20px 50px"); | 109 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses"
), "10px", "20px 50px"); |
108 | 110 |
109 debug(""); | 111 debug(""); |
110 debug("Test getting and setting grid-definition-columns and grid-definition-
rows through JS"); | 112 debug("Test getting and setting grid-definition-columns and grid-definition-
rows through JS"); |
(...skipping 23 matching lines...) Expand all Loading... |
134 debug("Test getting and setting invalid grid-definition-columns and grid-def
inition-rows through JS"); | 136 debug("Test getting and setting invalid grid-definition-columns and grid-def
inition-rows through JS"); |
135 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); | 137 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); |
136 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); | 138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); |
137 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); | 139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); |
138 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2
em"); | 140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2
em"); |
139 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em")
; | 141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em")
; |
140 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); | 142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); |
141 </script> | 143 </script> |
142 </body> | 144 </body> |
143 </html> | 145 </html> |
OLD | NEW |