diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /dom/grid/test/chrome/test_grid_areas.html | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'dom/grid/test/chrome/test_grid_areas.html')
| -rw-r--r-- | dom/grid/test/chrome/test_grid_areas.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/dom/grid/test/chrome/test_grid_areas.html b/dom/grid/test/chrome/test_grid_areas.html new file mode 100644 index 000000000..2f5d8ea44 --- /dev/null +++ b/dom/grid/test/chrome/test_grid_areas.html @@ -0,0 +1,143 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<script type="text/javascript" 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> |