<!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 &lt;indent&gt;.");
    // <ident> only allows a leading '-'.
    element.style.gridTemplateAreas = "'nav-up'";
    testJSGridTemplateAreas(element, "none");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>