| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| grid-template-areas: "firstArea secondArea" |
| "thirdArea thirdArea"; |
| } |
| |
| #oneValueGridArea { |
| grid-area: 1; |
| } |
| |
| #oneValueIdentGridArea { |
| grid-area: thirdArea; |
| } |
| |
| #twoValueGridArea { |
| grid-area: -1 / span 1; |
| } |
| |
| #twoValueIdentGridArea { |
| grid-area: firstArea / secondArea; |
| } |
| |
| #threeValueGridArea { |
| grid-area: span 1 / 10 / -1; |
| } |
| |
| #fourValueGridArea { |
| grid-area: -5 / 5 span / span 8 / 9; |
| } |
| |
| #fourValueMixedGridArea { |
| grid-area: firstArea / span 1 / nonexistent / 1 foobar; |
| } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div class="grid"> |
| <div id="oneValueGridArea"></div> |
| <div id="oneValueIdentGridArea"></div> |
| <div id="twoValueGridArea"></div> |
| <div id="twoValueIdentGridArea"></div> |
| <div id="threeValueGridArea"></div> |
| <div id="fourValueGridArea"></div> |
| <div id="fourValueMixedGridArea"></div> |
| </div> |
| <script> |
| description('This test checks that grid-area is properly parsed and stored internally.'); |
| function valueOrDefaultGridPosition(gridPosition) |
| { |
| return gridPosition === undefined ? "auto" : gridPosition; |
| } |
| |
| function checkColumnRowValues(gridItem, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd) |
| { |
| this.gridItem = gridItem; |
| shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-start')", gridRowStart); |
| shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-start')", valueOrDefaultGridPosition(gridColumnStart)); |
| |
| shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-end')", valueOrDefaultGridPosition(gridRowEnd)); |
| shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-end')", valueOrDefaultGridPosition(gridColumnEnd)); |
| } |
| |
| function testGridAreaCSSParsing(gridItemId, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd) |
| { |
| checkColumnRowValues(document.getElementById(gridItemId), gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd); |
| } |
| |
| function testGridAreaJSParsing(gridAreaValue) |
| { |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| // Pre-fill it with values to detect that we properly handle and reset unset values. |
| element.style.gridArea = "1 / 2 / 3 / 4"; |
| element.style.gridArea = gridAreaValue; |
| |
| // Get the different values. |
| var gridColumnRowValues = gridAreaValue.split("/"); |
| var gridColumnStart = gridColumnRowValues[1] ? gridColumnRowValues[1].trim() : undefined; |
| var gridRowEnd = gridColumnRowValues[2] ? gridColumnRowValues[2].trim() : undefined; |
| var gridColumnEnd = gridColumnRowValues[3] ? gridColumnRowValues[3].trim() : undefined; |
| checkColumnRowValues(element, gridColumnRowValues[0].trim(), gridColumnStart, gridRowEnd, gridColumnEnd); |
| document.body.removeChild(element); |
| } |
| |
| function testGridAreaInvalidJSParsing(gridAreaValue) |
| { |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkColumnRowValues(element, "auto", "auto", "auto", "auto"); |
| document.body.removeChild(element); |
| } |
| |
| debug("Test getting grid-area set through CSS"); |
| testGridAreaCSSParsing("oneValueGridArea", "1"); |
| testGridAreaCSSParsing("oneValueIdentGridArea", "thirdArea", "thirdArea", "thirdArea", "thirdArea"); |
| testGridAreaCSSParsing("twoValueGridArea", "-1", "span 1"); |
| testGridAreaCSSParsing("twoValueIdentGridArea", "firstArea", "secondArea", "firstArea", "secondArea"); |
| testGridAreaCSSParsing("threeValueGridArea", "span 1", "10", "-1"); |
| testGridAreaCSSParsing("fourValueGridArea", "-5", "span 5", "span 8", "9"); |
| testGridAreaCSSParsing("fourValueMixedGridArea", "firstArea", "span 1", "nonexistent", "1 foobar"); |
| |
| debug(""); |
| debug("Test getting and setting grid-area set through JS"); |
| testGridAreaJSParsing("-1"); |
| testGridAreaJSParsing("-1 / span 5"); |
| testGridAreaJSParsing("-1 / 10 / span 3"); |
| |
| debug(""); |
| debug("Test setting some positions to invalid values through JS"); |
| testGridAreaInvalidJSParsing("span / span / span /"); |
| testGridAreaInvalidJSParsing("1/ span span / 1 / span"); |
| testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1"); |
| testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1"); |
| </script> |
| </body> |
| </html> |
