| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| #gridWithSingleStringTemplate { |
| -webkit-grid-template-areas: "area"; |
| } |
| |
| #gridWithTwoColumnsTemplate { |
| -webkit-grid-template-areas: "first second"; |
| } |
| |
| #gridWithTwoRowsTemplate { |
| -webkit-grid-template-areas: "first" |
| "second"; |
| } |
| |
| #gridWithSpanningColumnsTemplate { |
| -webkit-grid-template-areas: "span span"; |
| } |
| |
| #gridWithSpanningRowsDotTemplate { |
| -webkit-grid-template-areas: "span" |
| "."; |
| } |
| |
| #gridWithDotColumn { |
| -webkit-grid-template-areas: "header ." |
| "footer ."; |
| } |
| |
| #gridWithHorizontalRectangle { |
| -webkit-grid-template-areas: "a a a" |
| "a a a"; |
| } |
| |
| #gridWithVerticalRectangle { |
| -webkit-grid-template-areas: "a a" |
| "a a" |
| "a a"; |
| } |
| |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div class="grid" id="gridWithDefaultTemplate"></div> |
| <div class="grid" id="gridWithSingleStringTemplate"></div> |
| <div class="grid" id="gridWithTwoColumnsTemplate"></div> |
| <div class="grid" id="gridWithTwoRowsTemplate"></div> |
| <div class="grid" id="gridWithSpanningColumnsTemplate"></div> |
| <div class="grid" id="gridWithSpanningRowsDotTemplate"></div> |
| <div class="grid" id="gridWithDotColumn"></div> |
| <div class="grid" id="gridWithHorizontalRectangle"></div> |
| <div class="grid" id="gridWithVerticalRectangle"></div> |
| <script> |
| description("This test checks that grid-template-areas is properly parsed."); |
| |
| function testGridTemplateAreas(gridItemID, expectedResult) { |
| shouldBeEqualToString("getComputedStyle(" + gridItemID + ").getPropertyValue('-webkit-grid-template-areas')", expectedResult); |
| } |
| |
| function testJSGridTemplateAreas(element, expectedResult) { |
| this.element = element; |
| shouldBeEqualToString("getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas')", expectedResult); |
| } |
| |
| debug("Test getting grid-template-areas set through CSS."); |
| testGridTemplateAreas("gridWithDefaultTemplate", "none"); |
| testGridTemplateAreas("gridWithSingleStringTemplate", '"area"'); |
| testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"'); |
| testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"'); |
| testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"'); |
| testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."'); |
| testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."'); |
| testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"'); |
| testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"'); |
| |
| debug("Test grid-template-areas: initial"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.webkitGridTemplateAreas = "'foobar'"; |
| testJSGridTemplateAreas(element, '"foobar"'); |
| element.style.webkitGridTemplateAreas = "initial"; |
| document.body.removeChild(element); |
| |
| debug("Test grid-template-areas: inherit"); |
| var parentElement = document.createElement("div"); |
| document.body.appendChild(parentElement); |
| parentElement.style.webkitGridTemplateAreas = "'foo bar'"; |
| shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('-webkit-grid-template-areas')", '"foo bar"'); |
| |
| var element = document.createElement("div"); |
| parentElement.appendChild(element); |
| element.style.webkitGridTemplateAreas = "inherit"; |
| testJSGridTemplateAreas(element, '"foo bar"'); |
| document.body.removeChild(parentElement); |
| |
| debug("Test invalid grid-template-areas values."); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| // 'nav' is not a rectangular definition. |
| element.style.webkitGridTemplateAreas = "'nav head' 'nav nav'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // 'nav' is not contiguous in the column direction. |
| element.style.webkitGridTemplateAreas = "'nav head nav'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // 'nav' is not contiguous in the row direction. |
| element.style.webkitGridTemplateAreas = "'nav head' 'middle middle' 'nav footer'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // The rows don't have the same number of columns. |
| element.style.webkitGridTemplateAreas = "'nav head' 'foot'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // Empty rows. |
| element.style.webkitGridTemplateAreas = "'' ''"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| debug(""); |
| debug("FIXME: We currently don't validate that the named grid areas are <indent>."); |
| // <ident> only allows a leading '-'. |
| element.style.webkitGridTemplateAreas = "'nav-up'"; |
| testJSGridTemplateAreas(element, "none"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
