<!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: 400px;
  grid-gap: 10px;
  grid-template-columns: 100px 1fr 1fr 100px;
}
.oh {
  overflow: hidden;
}
.box {
  background-color: #444;
  color: #fff;
}
</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function runTests() {
  // Test 1: elements styled with display:grid
  let idsWithGrid = [
    "gridDiv",
    "gridFieldset",
    "gridButton",
    "gridDivOh",
    "gridFieldsetOh",
    "gridButtonOh",
  ];

  for (let id of idsWithGrid) {
    let wrapper = document.getElementById(id);

    // test function existence
    is(typeof(wrapper.getGridFragments), "function",
      id + ": getGridFragments function exists."
    );

    // test that wrapper has one grid
    let gridFragments = wrapper.getGridFragments();
    is(gridFragments.length, 1,
      id + ": one grid on an un-fragmented display:grid styled element."
    );

    // test that the grid has cols and rows properties
    if (gridFragments.length) {
      let grid = gridFragments[0];
      isnot(typeof(grid.cols), "undefined", id + ": Grid.cols property exists.");
      isnot(typeof(grid.rows), "undefined", id + ": Grid.rows property exists.");
    }
  }

  // Test 2: elements styled without display:grid
  let idsWithoutGrid = [
    "boxA",
  ];

  for (let id of idsWithoutGrid) {
    let wrapper = document.getElementById(id);

    // test that wrapper has no grid
    let gridFragments = wrapper.getGridFragments();
    is(gridFragments.length, 0,
      id + ": no grid on element."
    );
  }

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

  <div id="gridDiv" class="wrapper">
    <div id="boxA" class="box">A</div>
  </div>

  <fieldset id="gridFieldset" class="wrapper">
  <legend>a fieldset</legend>
  <label for="name">name</label>
  <input id="name">
  </fieldset>

  <button id="gridButton" class="wrapper">
  <span style="grid-row:2">test</span>
  </button>

  <div id="gridDivOh" class="wrapper oh">
    <div id="boxAOh" class="box">A</div>
  </div>

  <fieldset id="gridFieldsetOh" class="wrapper oh">
  <legend>a fieldset</legend>
  <label for="nameOh">name</label>
  <input id="nameOh">
  </fieldset>

  <button id="gridButtonOh" class="wrapper oh">
  <span style="grid-row:2">test</span>
  </button>

</body>
</html>
