238 lines
9.2 KiB
HTML
238 lines
9.2 KiB
HTML
<!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>
|