| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| #gridWithSingleStringTemplate { |
| grid-template-areas: "area"; |
| } |
| |
| #gridWithTwoColumnsTemplate { |
| grid-template-areas: "first second"; |
| } |
| |
| #gridWithTwoRowsTemplate { |
| grid-template-areas: "first" |
| "second"; |
| } |
| |
| #gridWithSpanningColumnsTemplate { |
| grid-template-areas: "span span"; |
| } |
| |
| #gridWithSpanningRowsDotTemplate { |
| grid-template-areas: "span" |
| "."; |
| } |
| |
| #gridWithSpanningRowsDotsTemplate { |
| grid-template-areas: "span" |
| "...."; |
| } |
| |
| #gridWithDotColumn { |
| grid-template-areas: "header ." |
| "footer ."; |
| } |
| |
| #gridWithDotsColumn { |
| grid-template-areas: "header ......" |
| "footer ......"; |
| } |
| |
| #gridWithDotCells { |
| grid-template-areas: "first ." |
| ". second"; |
| } |
| |
| #gridWithDotsCells { |
| grid-template-areas: "first ......" |
| "..... second"; |
| } |
| |
| #gridWithComplexDotAreas { |
| grid-template-areas: ". header header ." |
| ". . . ." |
| "nav main main aside" |
| "nav main main aside" |
| ". . . aside" |
| ". footer footer aside"; |
| } |
| |
| #gridWithComplexDotsAreas { |
| grid-template-areas: "... header header ....." |
| "... ...... ...... ....." |
| "nav main main aside" |
| "nav main main aside" |
| "... ...... ...... aside" |
| "... footer footer aside"; |
| } |
| |
| #gridWithMixedDotAndDotsAreas { |
| grid-template-areas: "... title ." |
| ".. main main" |
| "nav ................... aside" |
| ". footer ......"; |
| } |
| |
| #gridWithDotsNoSpaceTwoColumns { |
| grid-template-areas: "...A" |
| ".A" |
| "B.." |
| "B."; |
| } |
| |
| #gridWithDotsNoSpaceThreeColumns { |
| grid-template-areas: "...A.." |
| ".A." |
| "B..C" |
| "B.C"; |
| } |
| |
| #gridWithDotsNoSpaceFourColumns { |
| grid-template-areas: "...A..B" |
| ".A.B" |
| "..A.B" |
| ".A...B" |
| "C....D....." |
| "C.D." |
| "C...D." |
| "C.D...."; |
| } |
| |
| #gridWithDotsNoSpaceComplex { |
| grid-template-areas: ".title...nav. ..main test" |
| "... title.nav... .main test" |
| "..title .. nav . .. main test" |
| ". title .nav... . main test"; |
| ".... title ...nav ... ...main test"; |
| } |
| |
| #gridWithHorizontalRectangle { |
| grid-template-areas: "a a a" |
| "a a a"; |
| } |
| |
| #gridWithVerticalRectangle { |
| 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="gridWithSpanningRowsDotsTemplate"></div> |
| <div class="grid" id="gridWithDotColumn"></div> |
| <div class="grid" id="gridWithDotsColumn"></div> |
| <div class="grid" id="gridWithDotCells"></div> |
| <div class="grid" id="gridWithDotsCells"></div> |
| <div class="grid" id="gridWithComplexDotAreas"></div> |
| <div class="grid" id="gridWithComplexDotsAreas"></div> |
| <div class="grid" id="gridWithMixedDotAndDotsAreas"></div> |
| <div class="grid" id="gridWithDotsNoSpaceTwoColumns"></div> |
| <div class="grid" id="gridWithDotsNoSpaceThreeColumns"></div> |
| <div class="grid" id="gridWithDotsNoSpaceFourColumns"></div> |
| <div class="grid" id="gridWithDotsNoSpaceComplex"></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('grid-template-areas')", expectedResult); |
| } |
| |
| function testJSGridTemplateAreas(element, expectedResult) { |
| this.element = element; |
| shouldBeEqualToString("getComputedStyle(element).getPropertyValue('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("gridWithSpanningRowsDotsTemplate", '"span" "."'); |
| testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."'); |
| testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."'); |
| testGridTemplateAreas("gridWithDotCells", '"first ." ". second"'); |
| testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"'); |
| testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"'); |
| testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"'); |
| testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main main" "nav . aside" ". footer ."'); |
| testGridTemplateAreas("gridWithDotsNoSpaceTwoColumns", '". A" ". A" "B ." "B ."'); |
| testGridTemplateAreas("gridWithDotsNoSpaceThreeColumns", '". A ." ". A ." "B . C" "B . C"'); |
| testGridTemplateAreas("gridWithDotsNoSpaceFourColumns", '". A . B" ". A . B" ". A . B" ". A . B" "C . D ." "C . D ." "C . D ." "C . D ."'); |
| testGridTemplateAreas("gridWithDotsNoSpaceComplex", '". title . nav . . main test" ". title . nav . . main test" ". title . nav . . main test" ". title . nav . . main test"'); |
| 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.gridTemplateAreas = "'foobar'"; |
| testJSGridTemplateAreas(element, '"foobar"'); |
| element.style.gridTemplateAreas = "initial"; |
| testJSGridTemplateAreas(element, 'none'); |
| element.style.gridTemplateAreas = "'foobar'"; |
| testJSGridTemplateAreas(element, '"foobar"'); |
| element.style.gridTemplateAreas = "none"; |
| testJSGridTemplateAreas(element, 'none'); |
| document.body.removeChild(element); |
| |
| debug("Test grid-template-areas: inherit"); |
| var parentElement = document.createElement("div"); |
| document.body.appendChild(parentElement); |
| parentElement.style.gridTemplateAreas = "'foo bar'"; |
| shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('grid-template-areas')", '"foo bar"'); |
| |
| var element = document.createElement("div"); |
| parentElement.appendChild(element); |
| element.style.gridTemplateAreas = "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.gridTemplateAreas = "'nav head' 'nav nav'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // 'nav' is not contiguous in the column direction. |
| element.style.gridTemplateAreas = "'nav head nav'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // 'nav' is not contiguous in the row direction. |
| element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // The rows don't have the same number of columns. |
| element.style.gridTemplateAreas = "'nav head' 'foot'"; |
| testJSGridTemplateAreas(element, "none"); |
| |
| // Empty rows. |
| element.style.gridTemplateAreas = "'' ''"; |
| 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.gridTemplateAreas = "'nav-up'"; |
| testJSGridTemplateAreas(element, "none"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
