<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<style>
body {
  margin: 40px;
}
.wrapper {
  display: grid;
  width: 600px;
  height: 600px;
  grid-gap: 20px;
  grid-template-columns: 50px 1fr 50px;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "areaA areaA ....."
             "areaB areaC areaC"
             "areaB areaC areaC";
  background-color: #f00;
}
.box {
  background-color: #444;
  color: #fff;
}
.a {
  grid-area: areaA;
}
.b {
  grid-area: areaB;
}
.c {
  grid-area: areaC;
}
</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function runTests() {
  var wrapper = document.getElementById("wrapper");
  var grid = wrapper.getGridFragments()[0];

  // test existence of property
  isnot(typeof(grid.areas), "undefined", "Grid.areas property exists.");

  if (typeof(grid.areas) != "undefined") {
    // test that the right number of areas are reported
    is(grid.areas.length, 3, "3 areas are reported.");

    if (grid.areas.length == 3) {
      // test area names
      is(grid.areas[0].name, "areaA", "Area 0 has proper name.");
      is(grid.areas[1].name, "areaB", "Area 1 has proper name.");
      is(grid.areas[2].name, "areaC", "Area 2 has proper name.");

      // test area types
      is(grid.areas[0].type, "explicit", "Area 0 is explicit.");
      is(grid.areas[1].type, "explicit", "Area 1 is explicit.");
      is(grid.areas[2].type, "explicit", "Area 2 is explicit.");

      // test numbers of start and end lines
      is(grid.areas[0].rowStart, 1, "Area 0 has start row line of 1.");
      is(grid.areas[0].rowEnd, 2, "Area 0 has end row line of 2.");
      is(grid.areas[0].columnStart, 1, "Area 0 has start column line of 1.");
      is(grid.areas[0].columnEnd, 3, "Area 0 has end column line of 3.");

      is(grid.areas[1].rowStart, 2, "Area 1 has start row line of 2.");
      is(grid.areas[1].rowEnd, 4, "Area 1 has end row line of 4.");
      is(grid.areas[1].columnStart, 1, "Area 1 has start column line of 1.");
      is(grid.areas[1].columnEnd, 2, "Area 1 has end column line of 2.");

      is(grid.areas[2].rowStart, 2, "Area 2 has start row line of 2.");
      is(grid.areas[2].rowEnd, 4, "Area 2 has end row line of 4.");
      is(grid.areas[2].columnStart, 2, "Area 2 has start column line of 2.");
      is(grid.areas[2].columnEnd, 4, "Area 2 has end column line of 4.");

      // test names of all the row lines
      isnot(grid.rows.lines[0].names.indexOf("areaA-start"), -1,
        "Grid row line 1 has the name 'areaA-start'."
      );

      isnot(grid.rows.lines[1].names.indexOf("areaA-end"), -1,
        "Grid row line 2 has the name 'areaA-end'."
      );
      isnot(grid.rows.lines[1].names.indexOf("areaB-start"), -1,
        "Grid row line 2 has the name 'areaB-start'."
      );
      isnot(grid.rows.lines[1].names.indexOf("areaC-start"), -1,
        "Grid row line 2 has the name 'areaC-start'."
      );

      is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");

      isnot(grid.rows.lines[3].names.indexOf("areaB-end"), -1,
        "Grid row line 4 has the name 'areaB-end'."
      );
      isnot(grid.rows.lines[3].names.indexOf("areaC-end"), -1,
        "Grid row line 4 has the name 'areaC-end'."
      );

      // test names of all the column lines
      isnot(grid.cols.lines[0].names.indexOf("areaA-start"), -1,
        "Grid column line 1 has the name 'areaA-start'."
      );
      isnot(grid.cols.lines[0].names.indexOf("areaB-start"), -1,
        "Grid column line 1 has the name 'areaB-start'."
      );

      isnot(grid.cols.lines[1].names.indexOf("areaB-end"), -1,
        "Grid column line 2 has the name 'areaB-end'."
      );
      isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
        "Grid column line 2 has the name 'areaC-start'."
      );

      isnot(grid.cols.lines[2].names.indexOf("areaA-end"), -1,
        "Grid column line 3 has the name 'areaA-end'."
      );

      isnot(grid.cols.lines[3].names.indexOf("areaC-end"), -1,
        "Grid column line 4 has the name 'areaC-end'."
      );
    }
  }

  SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">

  <div id="wrapper" class="wrapper">
    <div id="boxA" class="box a">A</div>
    <div id="boxB" class="box b">B</div>
    <div id="boxC" class="box c">C</div>
  </div>

</body>
</html>
