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-end: 10; | 12 grid-column-end: 10; |
13 grid-row-end: 15; | 13 grid-row-end: 15; |
14 } | 14 } |
15 .gridItemWithNegativeInteger { | 15 .gridItemWithNegativeInteger { |
16 grid-column-end: -10; | 16 grid-column-end: -10; |
17 grid-row-end: -15; | 17 grid-row-end: -15; |
18 } | 18 } |
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
94 | 94 |
95 debug(""); | 95 debug(""); |
96 debug("Test getting and setting grid-column-end and grid-row-end through JS"
); | 96 debug("Test getting and setting grid-column-end and grid-row-end through JS"
); |
97 testColumnEndRowEndJSParsing("18", "66"); | 97 testColumnEndRowEndJSParsing("18", "66"); |
98 testColumnEndRowEndJSParsing("-55", "-40"); | 98 testColumnEndRowEndJSParsing("-55", "-40"); |
99 testColumnEndRowEndJSParsing("'first'", "'last'", "1 first", "1 last"); | 99 testColumnEndRowEndJSParsing("'first'", "'last'", "1 first", "1 last"); |
100 testColumnEndRowEndJSParsing("span 7", "span 2"); | 100 testColumnEndRowEndJSParsing("span 7", "span 2"); |
101 testColumnEndRowEndJSParsing("span 'first'", "span 'last'", "span 1 first",
"span 1 last"); | 101 testColumnEndRowEndJSParsing("span 'first'", "span 'last'", "span 1 first",
"span 1 last"); |
102 testColumnEndRowEndJSParsing("auto", "auto"); | 102 testColumnEndRowEndJSParsing("auto", "auto"); |
103 testColumnEndRowEndJSParsing("thirdArea", "secondArea"); | 103 testColumnEndRowEndJSParsing("thirdArea", "secondArea"); |
104 testColumnEndRowEndJSParsing("nonExistentArea", "secondArea", "nonExistentAr
ea", "secondArea"); | 104 testColumnEndRowEndJSParsing("nonExistentArea", "secondArea", "auto", "secon
dArea"); |
105 testColumnEndRowEndJSParsing("secondArea", "nonExistentArea", "secondArea",
"nonExistentArea"); | 105 testColumnEndRowEndJSParsing("secondArea", "nonExistentArea", "secondArea",
"auto"); |
106 | 106 |
107 debug(""); | 107 debug(""); |
108 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug
h JS"); | 108 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug
h JS"); |
109 testColumnEndRowEndInheritJSParsing("inherit", "18"); | 109 testColumnEndRowEndInheritJSParsing("inherit", "18"); |
110 testColumnEndRowEndInheritJSParsing("2", "inherit"); | 110 testColumnEndRowEndInheritJSParsing("2", "inherit"); |
111 testColumnEndRowEndInheritJSParsing("inherit", "inherit"); | 111 testColumnEndRowEndInheritJSParsing("inherit", "inherit"); |
112 | 112 |
113 debug(""); | 113 debug(""); |
114 debug("Test setting grid-column-start and grid-row-start to 'initial' throug
h JS"); | 114 debug("Test setting grid-column-start and grid-row-start to 'initial' throug
h JS"); |
115 testEndAfterInitialJSParsing(); | 115 testEndAfterInitialJSParsing(); |
116 | 116 |
117 debug(""); | 117 debug(""); |
118 debug("Test setting grid-column-end and grid-row-end back to 'auto' through
JS"); | 118 debug("Test setting grid-column-end and grid-row-end back to 'auto' through
JS"); |
119 element.style.gridColumnEnd = "18"; | 119 element.style.gridColumnEnd = "18"; |
120 element.style.gridRowEnd = "66"; | 120 element.style.gridRowEnd = "66"; |
121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')"
, "'18'"); | 121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')"
, "'18'"); |
122 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / 18'"); | 122 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / 18'"); |
123 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "
'66'"); | 123 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "
'66'"); |
124 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / 66'"); | 124 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / 66'"); |
125 element.style.gridColumnEnd = "auto"; | 125 element.style.gridColumnEnd = "auto"; |
126 element.style.gridRowEnd = "auto"; | 126 element.style.gridRowEnd = "auto"; |
127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')"
, "'auto'"); | 127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')"
, "'auto'"); |
128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); | 128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'
auto / auto'"); |
129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "
'auto'"); | 129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "
'auto'"); |
130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); | 130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut
o / auto'"); |
131 </script> | 131 </script> |
132 <script src="../js/resources/js-test-post.js"></script> | 132 <script src="../js/resources/js-test-post.js"></script> |
133 </body> | 133 </body> |
134 </html> | 134 </html> |
OLD | NEW |