| 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 <style> | 8 <style> |
| 9 .gridItemWithPositiveInteger { | 9 .gridItemWithPositiveInteger { |
| 10 grid-column: 10; | 10 grid-column: 10; |
| (...skipping 25 matching lines...) Expand all Loading... |
| 36 } | 36 } |
| 37 .gridItemWith2OnlySpan { | 37 .gridItemWith2OnlySpan { |
| 38 grid-column: span / span; | 38 grid-column: span / span; |
| 39 grid-row: span / span; | 39 grid-row: span / span; |
| 40 } | 40 } |
| 41 .gridItemWith2Auto { | 41 .gridItemWith2Auto { |
| 42 grid-column: auto / auto; | 42 grid-column: auto / auto; |
| 43 grid-row: auto / auto; | 43 grid-row: auto / auto; |
| 44 } | 44 } |
| 45 .gridItemWithBothLongHand { | 45 .gridItemWithBothLongHand { |
| 46 grid-end: 11; | 46 grid-column-end: 11; |
| 47 grid-before: 4; | 47 grid-row-start: 4; |
| 48 } | 48 } |
| 49 .gridItemWithNoSpace { | 49 .gridItemWithNoSpace { |
| 50 grid-column: auto/1; | 50 grid-column: auto/1; |
| 51 grid-row: 5/auto; | 51 grid-row: 5/auto; |
| 52 } | 52 } |
| 53 .gridItemWithString { | 53 .gridItemWithString { |
| 54 grid-column: "first"; | 54 grid-column: "first"; |
| 55 grid-row: "last"; | 55 grid-row: "last"; |
| 56 } | 56 } |
| 57 .gridItemWithSpanString { | 57 .gridItemWithSpanString { |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 100 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto"
); | 100 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto"
); |
| 101 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / au
to"); | 101 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / au
to"); |
| 102 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 /
span 1 last"); | 102 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 /
span 1 last"); |
| 103 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first",
"-1 / span 2 last"); | 103 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first",
"-1 / span 2 last"); |
| 104 | 104 |
| 105 debug(""); | 105 debug(""); |
| 106 debug("Test the initial value"); | 106 debug("Test the initial value"); |
| 107 var element = document.createElement("div"); | 107 var element = document.createElement("div"); |
| 108 document.body.appendChild(element); | 108 document.body.appendChild(element); |
| 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); | 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); |
| 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'a
uto'"); | 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start'
)", "'auto'"); |
| 111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'aut
o'"); | 111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')"
, "'auto'"); |
| 112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); | 112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); |
| 113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "'
auto'"); | 113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')",
"'auto'"); |
| 114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'a
uto'"); | 114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "
'auto'"); |
| 115 | 115 |
| 116 debug(""); | 116 debug(""); |
| 117 debug("Test getting and setting grid-column and grid-row through JS"); | 117 debug("Test getting and setting grid-column and grid-row through JS"); |
| 118 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); | 118 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); |
| 119 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); | 119 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); |
| 120 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); | 120 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); |
| 121 testColumnRowJSParsing("10 / 55", "1 / 10"); | 121 testColumnRowJSParsing("10 / 55", "1 / 10"); |
| 122 testColumnRowJSParsing("span 5 / 5", "4 / span 4"); | 122 testColumnRowJSParsing("span 5 / 5", "4 / span 4"); |
| 123 testColumnRowJSParsing("-5 / 5", "4 / -4"); | 123 testColumnRowJSParsing("-5 / 5", "4 / -4"); |
| 124 testColumnRowJSParsing("4 / auto", "5 / auto"); | 124 testColumnRowJSParsing("4 / auto", "5 / auto"); |
| 125 testColumnRowJSParsing("auto / 5", "auto / 8"); | 125 testColumnRowJSParsing("auto / 5", "auto / 8"); |
| 126 testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1"); | 126 testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1"); |
| 127 testColumnRowJSParsing("'first' span / 3", "5 / 'last' span", "span 1 first
/ 3", "5 / span 1 last"); | 127 testColumnRowJSParsing("'first' span / 3", "5 / 'last' span", "span 1 first
/ 3", "5 / span 1 last"); |
| 128 testColumnRowJSParsing("'first' / 'last'", "'nav' / 'last' span", "1 first /
1 last", "1 nav / span 1 last"); | 128 testColumnRowJSParsing("'first' / 'last'", "'nav' / 'last' span", "1 first /
1 last", "1 nav / span 1 last"); |
| 129 testColumnRowJSParsing("3 'first' / 2 'last'", "5 'nav' / 'last' 7 span", "3
first / 2 last", "5 nav / span 7 last"); | 129 testColumnRowJSParsing("3 'first' / 2 'last'", "5 'nav' / 'last' 7 span", "3
first / 2 last", "5 nav / span 7 last"); |
| 130 testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'na
v'", "span 3 first / -3 last", "span 2 last / -1 nav"); | 130 testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'na
v'", "span 3 first / -3 last", "span 2 last / -1 nav"); |
| 131 | 131 |
| 132 debug(""); | 132 debug(""); |
| 133 debug("Test setting grid-column and grid-row back to 'auto' through JS"); | 133 debug("Test setting grid-column and grid-row back to 'auto' through JS"); |
| 134 element.style.gridColumn = "18 / 19"; | 134 element.style.gridColumn = "18 / 19"; |
| 135 element.style.gridRow = "66 / 68"; | 135 element.style.gridRow = "66 / 68"; |
| 136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
18 / 19'"); | 136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
18 / 19'"); |
| 137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'1
8'"); | 137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start'
)", "'18'"); |
| 138 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'19'
"); | 138 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')"
, "'19'"); |
| 139 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66
/ 68'"); | 139 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66
/ 68'"); |
| 140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "'
66'"); | 140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')",
"'66'"); |
| 141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'6
8'"); | 141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "
'68'"); |
| 142 | 142 |
| 143 element.style.gridColumn = "auto"; | 143 element.style.gridColumn = "auto"; |
| 144 element.style.gridRow = "auto"; | 144 element.style.gridRow = "auto"; |
| 145 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); | 145 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); |
| 146 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'a
uto'"); | 146 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start'
)", "'auto'"); |
| 147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'aut
o'"); | 147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')"
, "'auto'"); |
| 148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); | 148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); |
| 149 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "'
auto'"); | 149 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')",
"'auto'"); |
| 150 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'a
uto'"); | 150 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "
'auto'"); |
| 151 | 151 |
| 152 debug(""); | 152 debug(""); |
| 153 debug("Test getting and setting 'initial' grid-column and grid-row through J
S"); | 153 debug("Test getting and setting 'initial' grid-column and grid-row through J
S"); |
| 154 testColumnRowInitialJSParsing(); | 154 testColumnRowInitialJSParsing(); |
| 155 | 155 |
| 156 debug(""); | 156 debug(""); |
| 157 debug("Test getting and setting 'inherit' grid-column and grid-row through J
S"); | 157 debug("Test getting and setting 'inherit' grid-column and grid-row through J
S"); |
| 158 testColumnRowInheritJSParsing("1 / auto", "inherit"); | 158 testColumnRowInheritJSParsing("1 / auto", "inherit"); |
| 159 testColumnRowInheritJSParsing("inherit", "1 / auto"); | 159 testColumnRowInheritJSParsing("inherit", "1 / auto"); |
| 160 testColumnRowInheritJSParsing("inherit", "inherit"); | 160 testColumnRowInheritJSParsing("inherit", "inherit"); |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 203 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'fir
st' / span 'last'"); | 203 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'fir
st' / span 'last'"); |
| 204 | 204 |
| 205 // We don't allow span to be between the <integer> and the <string>. | 205 // We don't allow span to be between the <integer> and the <string>. |
| 206 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / '
last'"); | 206 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / '
last'"); |
| 207 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last'
span 7"); | 207 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last'
span 7"); |
| 208 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3"); | 208 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3"); |
| 209 </script> | 209 </script> |
| 210 <script src="../js/resources/js-test-post.js"></script> | 210 <script src="../js/resources/js-test-post.js"></script> |
| 211 </body> | 211 </body> |
| 212 </html> | 212 </html> |
| OLD | NEW |