tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_grid_areas.html (4515B)

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
      7 <style>
      8 body {
      9  margin: 40px;
     10 }
     11 .wrapper {
     12  display: grid;
     13  width: 600px;
     14  height: 600px;
     15  grid-gap: 20px;
     16  grid-template-columns: 50px 1fr 50px;
     17  grid-template-rows: 1fr 1fr 1fr;
     18  grid-template-areas: "areaA areaA ....."
     19             "areaB areaC areaC"
     20             "areaB areaC areaC";
     21  background-color: #f00;
     22 }
     23 .box {
     24  background-color: #444;
     25  color: #fff;
     26 }
     27 .a {
     28  grid-area: areaA;
     29 }
     30 .b {
     31  grid-area: areaB;
     32 }
     33 .c {
     34  grid-area: areaC;
     35 }
     36 </style>
     37 
     38 <script>
     39 "use strict";
     40 
     41 SimpleTest.waitForExplicitFinish();
     42 
     43 function runTests() {
     44  var wrapper = document.getElementById("wrapper");
     45  var grid = wrapper.getGridFragments()[0];
     46 
     47  // test existence of property
     48  isnot(typeof(grid.areas), "undefined", "Grid.areas property exists.");
     49 
     50  if (typeof(grid.areas) != "undefined") {
     51    // test that the right number of areas are reported
     52    is(grid.areas.length, 3, "3 areas are reported.");
     53 
     54    if (grid.areas.length == 3) {
     55      // test area names
     56      is(grid.areas[0].name, "areaA", "Area 0 has proper name.");
     57      is(grid.areas[1].name, "areaB", "Area 1 has proper name.");
     58      is(grid.areas[2].name, "areaC", "Area 2 has proper name.");
     59 
     60      // test area types
     61      is(grid.areas[0].type, "explicit", "Area 0 is explicit.");
     62      is(grid.areas[1].type, "explicit", "Area 1 is explicit.");
     63      is(grid.areas[2].type, "explicit", "Area 2 is explicit.");
     64 
     65      // test numbers of start and end lines
     66      is(grid.areas[0].rowStart, 1, "Area 0 has start row line of 1.");
     67      is(grid.areas[0].rowEnd, 2, "Area 0 has end row line of 2.");
     68      is(grid.areas[0].columnStart, 1, "Area 0 has start column line of 1.");
     69      is(grid.areas[0].columnEnd, 3, "Area 0 has end column line of 3.");
     70 
     71      is(grid.areas[1].rowStart, 2, "Area 1 has start row line of 2.");
     72      is(grid.areas[1].rowEnd, 4, "Area 1 has end row line of 4.");
     73      is(grid.areas[1].columnStart, 1, "Area 1 has start column line of 1.");
     74      is(grid.areas[1].columnEnd, 2, "Area 1 has end column line of 2.");
     75 
     76      is(grid.areas[2].rowStart, 2, "Area 2 has start row line of 2.");
     77      is(grid.areas[2].rowEnd, 4, "Area 2 has end row line of 4.");
     78      is(grid.areas[2].columnStart, 2, "Area 2 has start column line of 2.");
     79      is(grid.areas[2].columnEnd, 4, "Area 2 has end column line of 4.");
     80 
     81      // test names of all the row lines
     82      isnot(grid.rows.lines[0].names.indexOf("areaA-start"), -1,
     83        "Grid row line 1 has the name 'areaA-start'."
     84      );
     85 
     86      isnot(grid.rows.lines[1].names.indexOf("areaA-end"), -1,
     87        "Grid row line 2 has the name 'areaA-end'."
     88      );
     89      isnot(grid.rows.lines[1].names.indexOf("areaB-start"), -1,
     90        "Grid row line 2 has the name 'areaB-start'."
     91      );
     92      isnot(grid.rows.lines[1].names.indexOf("areaC-start"), -1,
     93        "Grid row line 2 has the name 'areaC-start'."
     94      );
     95 
     96      is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");
     97 
     98      isnot(grid.rows.lines[3].names.indexOf("areaB-end"), -1,
     99        "Grid row line 4 has the name 'areaB-end'."
    100      );
    101      isnot(grid.rows.lines[3].names.indexOf("areaC-end"), -1,
    102        "Grid row line 4 has the name 'areaC-end'."
    103      );
    104 
    105      // test names of all the column lines
    106      isnot(grid.cols.lines[0].names.indexOf("areaA-start"), -1,
    107        "Grid column line 1 has the name 'areaA-start'."
    108      );
    109      isnot(grid.cols.lines[0].names.indexOf("areaB-start"), -1,
    110        "Grid column line 1 has the name 'areaB-start'."
    111      );
    112 
    113      isnot(grid.cols.lines[1].names.indexOf("areaB-end"), -1,
    114        "Grid column line 2 has the name 'areaB-end'."
    115      );
    116      isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
    117        "Grid column line 2 has the name 'areaC-start'."
    118      );
    119 
    120      isnot(grid.cols.lines[2].names.indexOf("areaA-end"), -1,
    121        "Grid column line 3 has the name 'areaA-end'."
    122      );
    123 
    124      isnot(grid.cols.lines[3].names.indexOf("areaC-end"), -1,
    125        "Grid column line 4 has the name 'areaC-end'."
    126      );
    127    }
    128  }
    129 
    130  SimpleTest.finish();
    131 }
    132 </script>
    133 </head>
    134 <body onLoad="runTests();">
    135 
    136  <div id="wrapper" class="wrapper">
    137    <div id="boxA" class="box a">A</div>
    138    <div id="boxB" class="box b">B</div>
    139    <div id="boxC" class="box c">C</div>
    140  </div>
    141 
    142 </body>
    143 </html>