| 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 #oneValueGridArea { | 9 #oneValueGridArea { |
| 10 grid-area: 1; | 10 grid-area: 1; |
| (...skipping 18 matching lines...) Expand all Loading... |
| 29 <div id="twoValueGridArea"></div> | 29 <div id="twoValueGridArea"></div> |
| 30 <div id="threeValueGridArea"></div> | 30 <div id="threeValueGridArea"></div> |
| 31 <div id="fourValueGridArea"></div> | 31 <div id="fourValueGridArea"></div> |
| 32 <script> | 32 <script> |
| 33 description('This test checks that grid-area is properly parsed and stored i
nternally.'); | 33 description('This test checks that grid-area is properly parsed and stored i
nternally.'); |
| 34 function valueOrDefaultGridPosition(gridPosition) | 34 function valueOrDefaultGridPosition(gridPosition) |
| 35 { | 35 { |
| 36 return gridPosition === undefined ? "auto" : gridPosition; | 36 return gridPosition === undefined ? "auto" : gridPosition; |
| 37 } | 37 } |
| 38 | 38 |
| 39 function checkColumnRowValues(gridItem, gridStart, gridBefore, gridEnd, grid
After) | 39 function checkColumnRowValues(gridItem, gridColumnStart, gridRowStart, gridC
olumnEnd, gridRowEnd) |
| 40 { | 40 { |
| 41 this.gridItem = gridItem; | 41 this.gridItem = gridItem; |
| 42 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-start')", gridStart); | 42 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-column-start')", gridColumnStart); |
| 43 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-before')", valueOrDefaultGridPosition(gridBefore)); | 43 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-row-start')", valueOrDefaultGridPosition(gridRowStart)); |
| 44 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-end')", valueOrDefaultGridPosition(gridEnd)); | 44 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-column-end')", valueOrDefaultGridPosition(gridColumnEnd)); |
| 45 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-after')", valueOrDefaultGridPosition(gridAfter)); | 45 shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('
grid-row-end')", valueOrDefaultGridPosition(gridRowEnd)); |
| 46 } | 46 } |
| 47 | 47 |
| 48 function testGridAreaCSSParsing(gridItemId, gridStart, gridBefore, gridEnd,
gridAfter) | 48 function testGridAreaCSSParsing(gridItemId, gridColumnStart, gridRowStart, g
ridColumnEnd, gridRowEnd) |
| 49 { | 49 { |
| 50 checkColumnRowValues(document.getElementById(gridItemId), gridStart, gri
dBefore, gridEnd, gridAfter); | 50 checkColumnRowValues(document.getElementById(gridItemId), gridColumnStar
t, gridRowStart, gridColumnEnd, gridRowEnd); |
| 51 } | 51 } |
| 52 | 52 |
| 53 function testGridAreaJSParsing(gridAreaValue) | 53 function testGridAreaJSParsing(gridAreaValue) |
| 54 { | 54 { |
| 55 var element = document.createElement("div"); | 55 var element = document.createElement("div"); |
| 56 document.body.appendChild(element); | 56 document.body.appendChild(element); |
| 57 // Pre-fill it with values to detect that we properly handle and reset u
nset values. | 57 // Pre-fill it with values to detect that we properly handle and reset u
nset values. |
| 58 element.style.gridArea = "1 / 2 / 3 / 4"; | 58 element.style.gridArea = "1 / 2 / 3 / 4"; |
| 59 element.style.gridArea = gridAreaValue; | 59 element.style.gridArea = gridAreaValue; |
| 60 | 60 |
| 61 // Get the different values. | 61 // Get the different values. |
| 62 var gridColumnRowValues = gridAreaValue.split("/"); | 62 var gridColumnRowValues = gridAreaValue.split("/"); |
| 63 var gridBefore = gridColumnRowValues[1] ? gridColumnRowValues[1].trim()
: undefined; | 63 var gridRowStart = gridColumnRowValues[1] ? gridColumnRowValues[1].trim(
) : undefined; |
| 64 var gridEnd = gridColumnRowValues[2] ? gridColumnRowValues[2].trim() : u
ndefined; | 64 var gridColumnEnd = gridColumnRowValues[2] ? gridColumnRowValues[2].trim
() : undefined; |
| 65 var gridAfter = gridColumnRowValues[3] ? gridColumnRowValues[3].trim() :
undefined; | 65 var gridRowEnd = gridColumnRowValues[3] ? gridColumnRowValues[3].trim()
: undefined; |
| 66 checkColumnRowValues(element, gridColumnRowValues[0].trim(), gridBefore,
gridEnd, gridAfter); | 66 checkColumnRowValues(element, gridColumnRowValues[0].trim(), gridRowStar
t, gridColumnEnd, gridRowEnd); |
| 67 document.body.removeChild(element); | 67 document.body.removeChild(element); |
| 68 } | 68 } |
| 69 | 69 |
| 70 function testGridAreaInvalidJSParsing(gridAreaValue) | 70 function testGridAreaInvalidJSParsing(gridAreaValue) |
| 71 { | 71 { |
| 72 var element = document.createElement("div"); | 72 var element = document.createElement("div"); |
| 73 document.body.appendChild(element); | 73 document.body.appendChild(element); |
| 74 checkColumnRowValues(element, "auto", "auto", "auto", "auto"); | 74 checkColumnRowValues(element, "auto", "auto", "auto", "auto"); |
| 75 document.body.removeChild(element); | 75 document.body.removeChild(element); |
| 76 } | 76 } |
| (...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 125 | 125 |
| 126 debug(""); | 126 debug(""); |
| 127 debug("Test setting some positions to invalid values through JS"); | 127 debug("Test setting some positions to invalid values through JS"); |
| 128 testGridAreaInvalidJSParsing("span / span / span /"); | 128 testGridAreaInvalidJSParsing("span / span / span /"); |
| 129 testGridAreaInvalidJSParsing("1/ span span / 1 / span"); | 129 testGridAreaInvalidJSParsing("1/ span span / 1 / span"); |
| 130 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1"); | 130 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1"); |
| 131 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1"); | 131 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1"); |
| 132 </script> | 132 </script> |
| 133 </body> | 133 </body> |
| 134 </html> | 134 </html> |
| OLD | NEW |