OLD | NEW |
---|---|
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 if (window.testRunner) | 5 if (window.testRunner) |
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
7 </script> | 7 </script> |
8 <link href="resources/grid.css" rel="stylesheet"> | 8 <link href="resources/grid.css" rel="stylesheet"> |
9 <style> | 9 <style> |
10 .grid { | 10 .grid { |
11 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ | 11 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ |
12 width: 800px; | 12 width: 800px; |
13 height: 600px; | 13 height: 600px; |
14 } | 14 } |
15 .gridItem { | 15 .gridItem { |
16 grid-column: 1; | 16 grid-column: 1; |
17 grid-row: 1; | 17 grid-row: 1; |
18 height: 22px; | 18 height: 22px; |
19 width: 77px; | 19 width: 77px; |
20 } | 20 } |
21 .gridWithFixed { | 21 .gridWithFixed { |
22 grid-definition-columns: "first" 10px; | 22 grid-definition-columns: (first) 10px; |
23 grid-definition-rows: "first" 15px; | 23 grid-definition-rows: (first) 15px; |
24 } | 24 } |
25 .gridWithPercent { | 25 .gridWithPercent { |
26 grid-definition-columns: 53% "last"; | 26 grid-definition-columns: 53% (last); |
27 grid-definition-rows: 27% "last"; | 27 grid-definition-rows: 27% (last); |
28 } | 28 } |
29 .gridWithAuto { | 29 .gridWithAuto { |
30 grid-definition-columns: "first" auto; | 30 grid-definition-columns: (first) auto; |
31 grid-definition-rows: auto "last"; | 31 grid-definition-rows: auto (last); |
32 } | 32 } |
33 .gridWithMinMax { | 33 .gridWithMinMax { |
34 grid-definition-columns: "first" minmax(10%, 15px); | 34 grid-definition-columns: (first) minmax(10%, 15px); |
35 grid-definition-rows: minmax(20px, 50%) "last"; | 35 grid-definition-rows: minmax(20px, 50%) (last); |
36 } | 36 } |
37 .gridWithFixedMultiple { | 37 .gridWithFixedMultiple { |
38 grid-definition-columns: "first" "nav" 10px "last"; | 38 grid-definition-columns: (first nav) 10px (last); |
39 grid-definition-rows: "first" "nav" 15px "last"; | 39 grid-definition-rows: (first nav) 15px (last); |
40 } | 40 } |
41 .gridWithPercentageSameStringMultipleTimes { | 41 .gridWithPercentageSameStringMultipleTimes { |
42 grid-definition-columns: "first" "nav" 10% "nav" 15% "last"; | 42 grid-definition-columns: (first nav) 10% (nav) 15% (last); |
43 grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last"; | 43 grid-definition-rows: (first nav2) 25% (nav2) 75% (last); |
44 } | |
45 .gridWithRepeat { | |
46 grid-definition-columns: (first) 10px repeat(2, (nav nav2) 50%); | |
47 grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last); | |
48 } | |
49 .gridWithoutParentheses { | |
50 grid-definition-columns: first nav 10px; | |
51 grid-definition-rows: first 50% last; | |
52 } | |
53 .gridWithInvalidNestedParentheses { | |
54 grid-definition-columns: (first (nav)) 10px (last); | |
55 grid-definition-rows: (first) 50% (last (nav) nav2); | |
56 } | |
57 .gridWithUnbalancedParentheses { | |
58 grid-definition-columns: (first nav 10px; | |
59 grid-definition-rows: (first) 50% last); | |
60 } | |
61 .gridWithMisplacedParentheses { | |
62 grid-definition-columns: (first 10px) 50%; | |
63 grid-definition-rows: (first) (nav 50%); | |
64 } | |
65 .gridWithEmptyParentheses { | |
66 grid-definition-columns: () 10px; | |
67 grid-definition-rows: 2em 50px (); | |
44 } | 68 } |
45 </style> | 69 </style> |
46 <script src="../../resources/js-test.js"></script> | 70 <script src="../../resources/js-test.js"></script> |
47 </head> | 71 </head> |
48 <body> | 72 <body> |
49 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> | 73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
50 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> | 74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
51 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> | 75 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> |
52 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> | 76 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> |
53 <div class="gridItem"></div> | 77 <div class="gridItem"></div> |
54 </div> | 78 </div> |
55 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> | 79 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> |
56 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> | 80 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> |
57 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div> | 81 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div> |
82 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div> | |
83 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div> | |
84 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare ntheses"></div> | |
85 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese s"></div> | |
86 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses" ></div> | |
87 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> | |
58 | 88 |
59 <script src="resources/grid-definitions-parsing-utils.js"></script> | 89 <script src="resources/grid-definitions-parsing-utils.js"></script> |
60 <script> | 90 <script> |
61 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); | 91 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); |
62 | 92 |
63 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); | 93 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); |
64 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px"); | 94 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px"); |
65 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last"); | 95 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last"); |
66 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst 0px", "0px last"); | 96 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst 0px", "0px last"); |
67 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "first 77px", "22px last"); | 97 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "first 77px", "22px last"); |
68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last"); | 98 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last"); |
69 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last"); | 99 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last"); |
70 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450p x last"); | 100 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450p x last"); |
101 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "first 10px nav nav2 400px nav nav2 400px", "100px nav nav2 150px nav nav2 150px last"); | |
71 | 102 |
72 debug(""); | 103 debug(""); |
73 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); | 104 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); |
74 testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last"); | 105 testGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "first 18px", "66px last", "first 18px", "66px last"); |
75 testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 440px", " 240px last", "first 55%", "40% last"); | 106 testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "first 440px", " 240px last", "first 55%", "40% last"); |
76 testGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first 0px", " 0px last", "first auto", "auto last"); | 107 testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "first 0px", " 0px last", "first auto", "auto last"); |
77 testGridDefinitionsSetJSValues("'first' min-content", "min-content 'last'", "first 0px", "0px last", "first min-content", "min-content last"); | 108 testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "first 0px", "0px last", "first min-content", "min-content last"); |
78 testGridDefinitionsSetJSValues("'first' max-content", "max-content 'last'", "first 0px", "0px last", "first max-content", "max-content last"); | 109 testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "first 0px", "0px last", "first max-content", "max-content last"); |
79 testGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40 %) 'last'", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px , 40%) last"); | 110 testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40 %) (last)", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px , 40%) last"); |
80 testGridDefinitionsSetJSValues("'first' minmax(22em, max-content)", "minmax( max-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, max-c ontent)", "minmax(max-content, 5em) last"); | 111 testGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax( max-content, 5em) (last)", "first 220px", "50px last", "first minmax(22em, max-c ontent)", "minmax(max-content, 5em) last"); |
81 testGridDefinitionsSetJSValues("'first' minmax(22em, min-content)", "minmax( min-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, min-c ontent)", "minmax(min-content, 5em) last"); | 112 testGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax( min-content, 5em) (last)", "first 220px", "50px last", "first minmax(22em, min-c ontent)", "minmax(min-content, 5em) last"); |
82 testGridDefinitionsSetJSValues("'first' minmax(min-content, max-content)", " minmax(max-content, min-content) 'last'", "first 0px", "0px last", "first minmax (min-content, max-content)", "minmax(max-content, min-content) last"); | 113 testGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", " minmax(max-content, min-content) (last)", "first 0px", "0px last", "first minmax (min-content, max-content)", "minmax(max-content, min-content) last"); |
83 testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-conten t) 'last'", "'first' 'nav' minmax(max-content, min-content) 'last'", "first nav 0px last", "first nav 0px last", "first nav minmax(min-content, max-content) las t", "first nav minmax(max-content, min-content) last"); | 114 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "first nav 0px last", "first nav 0px last", "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last"); |
84 testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-conten t) 'nav' auto 'last'", "'first' 'nav2' minmax(max-content, min-content) 'nav2' m inmax(10px, 15px) 'last'", "first nav 0px nav 0px last", "first nav2 0px nav2 15 px last", "first nav minmax(min-content, max-content) nav auto last", "first nav 2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last"); | 115 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minma x(10px, 15px) (last)", "first nav 0px nav 0px last", "first nav2 0px nav2 15px l ast", "first nav minmax(min-content, max-content) nav auto last", "first nav2 mi nmax(max-content, min-content) nav2 minmax(10px, 15px) last"); |
85 testGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' ' bar' auto 'foo' auto 'bar'", "foo bar 0px foo 0px bar", "foo bar 0px foo 0px bar ", "foo bar auto foo auto bar", "foo bar auto foo auto bar"); | 116 testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "foo bar 0px foo 0px bar", "foo bar 0px foo 0px bar", " foo bar auto foo auto bar", "foo bar auto foo auto bar"); |
117 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22 0px (foo) repeat(1, 50% (baz)", "first 0px foo bar 20px foo bar 20px", "220px fo o 300px baz", "first auto foo bar 20px foo bar 20px", "220px foo 50% baz"); | |
118 | |
119 debug(""); | |
120 debug("Test getting invalid grid-definition-columns and grid-definition-rows set through CSS"); | |
121 testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"), "none", "none"); | |
122 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare ntheses"), "none", "none"); | |
123 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth eses"), "none", "none"); | |
124 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe ses"), "none", "none"); | |
125 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses" ), "none", "none"); | |
rune
2013/11/14 20:54:43
According to the current ED [1], a track list may
| |
86 | 126 |
87 debug(""); | 127 debug(""); |
88 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); | 128 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); |
89 element = document.createElement("div"); | 129 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); |
90 document.body.appendChild(element); | 130 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); |
91 element.style.display = "grid"; | 131 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); |
92 element.style.gridDefinitionColumns = "'foo'"; | 132 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em"); |
93 element.style.gridDefinitionRows = "'bar"; | 133 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ; |
94 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); | 134 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); |
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none"); | |
96 | |
97 element = document.createElement("div"); | |
98 document.body.appendChild(element); | |
99 element.style.display = "grid"; | |
100 element.style.gridDefinitionColumns = "'foo' 'bar'"; | |
101 element.style.gridDefinitionRows = "'bar' 'foo'"; | |
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); | |
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none"); | |
104 </script> | 135 </script> |
105 </body> | 136 </body> |
106 </html> | 137 </html> |
OLD | NEW |