summaryrefslogtreecommitdiffstats
path: root/dom/grid/test/chrome/test_grid_object.html
blob: ab8b9abfa000c8f0f0fbf5ab15ed86dbf51ebb14 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!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>