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 grid-template: "firstArea" "secondArea" | 7 grid-template: "firstArea secondArea" |
8 "thirdArea" "thirdArea"; | 8 "thirdArea thirdArea"; |
9 } | 9 } |
10 | 10 |
11 .gridItemWithPositiveInteger { | 11 .gridItemWithPositiveInteger { |
12 grid-column-start: 10; | 12 grid-column-start: 10; |
13 grid-row-start: 15; | 13 grid-row-start: 15; |
14 } | 14 } |
15 .gridItemWithNegativeInteger { | 15 .gridItemWithNegativeInteger { |
16 grid-column-start: -10; | 16 grid-column-start: -10; |
17 grid-row-start: -15; | 17 grid-row-start: -15; |
18 } | 18 } |
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
99 | 99 |
100 debug(""); | 100 debug(""); |
101 debug("Test getting and setting grid-column-start and grid-row-start through
JS"); | 101 debug("Test getting and setting grid-column-start and grid-row-start through
JS"); |
102 testColumnStartRowStartJSParsing("18", "66"); | 102 testColumnStartRowStartJSParsing("18", "66"); |
103 testColumnStartRowStartJSParsing("-55", "-40"); | 103 testColumnStartRowStartJSParsing("-55", "-40"); |
104 testColumnStartRowStartJSParsing("'nav'", "'last'", "1 nav", "1 last"); | 104 testColumnStartRowStartJSParsing("'nav'", "'last'", "1 nav", "1 last"); |
105 testColumnStartRowStartJSParsing("span 3", "span 20"); | 105 testColumnStartRowStartJSParsing("span 3", "span 20"); |
106 testColumnStartRowStartJSParsing("span 'nav'", "span 'last'", "span 1 nav",
"span 1 last"); | 106 testColumnStartRowStartJSParsing("span 'nav'", "span 'last'", "span 1 nav",
"span 1 last"); |
107 testColumnStartRowStartJSParsing("auto", "auto"); | 107 testColumnStartRowStartJSParsing("auto", "auto"); |
108 testColumnStartRowStartJSParsing("thirdArea", "secondArea"); | 108 testColumnStartRowStartJSParsing("thirdArea", "secondArea"); |
109 testColumnStartRowStartJSParsing("nonExistentArea", "secondArea", "nonExiste
ntArea", "secondArea"); | 109 testColumnStartRowStartJSParsing("nonExistentArea", "secondArea", "auto", "s
econdArea"); |
110 testColumnStartRowStartJSParsing("secondArea", "nonExistentArea", "secondAre
a", "nonExistentArea"); | 110 testColumnStartRowStartJSParsing("secondArea", "nonExistentArea", "secondAre
a", "auto"); |
111 | 111 |
112 debug(""); | 112 debug(""); |
113 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug
h JS"); | 113 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug
h JS"); |
114 testColumnStartRowStartInheritJSParsing("inherit", "18"); | 114 testColumnStartRowStartInheritJSParsing("inherit", "18"); |
115 testColumnStartRowStartInheritJSParsing("2", "inherit"); | 115 testColumnStartRowStartInheritJSParsing("2", "inherit"); |
116 testColumnStartRowStartInheritJSParsing("inherit", "inherit"); | 116 testColumnStartRowStartInheritJSParsing("inherit", "inherit"); |
117 | 117 |
118 debug(""); | 118 debug(""); |
119 debug("Test setting grid-column-start and grid-row-start to 'initial' throug
h JS"); | 119 debug("Test setting grid-column-start and grid-row-start to 'initial' throug
h JS"); |
120 testColumnStartRowStartInitialJSParsing(); | 120 testColumnStartRowStartInitialJSParsing(); |
121 | 121 |
122 debug(""); | 122 debug(""); |
123 debug("Test setting grid-column-start and grid-row-start back to 'auto' thro
ugh JS"); | 123 debug("Test setting grid-column-start and grid-row-start back to 'auto' thro
ugh JS"); |
124 element.style.gridColumnStart = "18"; | 124 element.style.gridColumnStart = "18"; |
125 element.style.gridRowStart = "66"; | 125 element.style.gridRowStart = "66"; |
126 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start'
)", "'18'"); | 126 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start'
)", "'18'"); |
127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
18 / auto'"); | 127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
18 / auto'"); |
128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')",
"'66'"); | 128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')",
"'66'"); |
129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66
/ auto'"); | 129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66
/ auto'"); |
130 element.style.gridColumnStart = "auto"; | 130 element.style.gridColumnStart = "auto"; |
131 element.style.gridRowStart = "auto"; | 131 element.style.gridRowStart = "auto"; |
132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start'
)", "'auto'"); | 132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start'
)", "'auto'"); |
133 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); | 133 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); |
134 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')",
"'auto'"); | 134 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')",
"'auto'"); |
135 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); | 135 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); |
136 </script> | 136 </script> |
137 <script src="../js/resources/js-test-post.js"></script> | 137 <script src="../js/resources/js-test-post.js"></script> |
138 </body> | 138 </body> |
139 </html> | 139 </html> |
OLD | NEW |