| <!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 ......"; |
| } |
| |
| #gridWithDotsNoSpace { |
| grid-template-areas: ".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.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="gridWithDotsNoSpace"></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(gridId, expectedResult) { |
| shouldBeEqualToString("window.getComputedStyle(" + gridId + ").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("gridWithDotsNoSpace", '". 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'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '"foobar"') |
| element.style.gridTemplateAreas = "initial"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", 'none'); |
| element.style.gridTemplateAreas = "'foobar'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '"foobar"') |
| element.style.gridTemplateAreas = "none"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '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("window.getComputedStyle(parentElement).getPropertyValue('grid-template-areas')", '"foo bar"') |
| parentElement.style.gridTemplateAreas = "'foo" + "\t" + "bar'"; |
| shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyValue('grid-template-areas')", '"foo bar"') |
| parentElement.style.gridTemplateAreas = "'foo" + "\n" + "bar'"; |
| shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyValue('grid-template-areas')", '"foo bar"') |
| |
| var element = document.createElement("div"); |
| parentElement.appendChild(element); |
| element.style.gridTemplateAreas = "inherit"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '"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'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| |
| // 'nav' is not contiguous in the column direction. |
| element.style.gridTemplateAreas = "'nav head nav'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| |
| // 'nav' is not contiguous in the row direction. |
| element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| |
| // The rows don't have the same number of columns. |
| element.style.gridTemplateAreas = "'nav head' 'foot'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| |
| // Empty rows. |
| element.style.gridTemplateAreas = "'' ''"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| |
| element.style.gridTemplateAreas = "'^nav'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| element.style.gridTemplateAreas = "'n^av'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| |
| element.style.gridTemplateAreas = "'\x04nav'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| element.style.gridTemplateAreas = "'n\x04av'"; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "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"'; |
| shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none") |
| </script> |
| </body> |
| </html> |
