tor-browser

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

test_grid_line_numbers.html (2979B)

      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  grid-gap: 0px;
     14  background-color: #f00;
     15 }
     16 .wrapper > div {
     17  background-color: #444;
     18  color: #fff;
     19 }
     20 .repeatColumns {
     21  width: 400px;
     22  grid-auto-columns: 50px;
     23  grid-template-columns: repeat(auto-fit, 100px);
     24 }
     25 .repeatRows {
     26  height: 400px;
     27  grid-auto-rows: 50px;
     28  grid-template-rows: repeat(auto-fit, 100px);
     29 }
     30 </style>
     31 
     32 <script>
     33 "use strict";
     34 
     35 SimpleTest.waitForExplicitFinish();
     36 
     37 function testLines(elementName, lines, expectedValues) {
     38  is(lines.count, expectedValues.count, elementName + " has expected number of lines.");
     39  for (let i = 0; i < lines.length; i++) {
     40    is(lines[i].number, expectedValues[i].number, elementName + " line index " + i + " has expected number.");
     41    is(lines[i].negativeNumber, expectedValues[i].negativeNumber, elementName + " line index " + i + " has expected negativeNumber.");
     42  }
     43 }
     44 
     45 function runTests() {
     46  let grid;
     47  let lines;
     48  let expectedValues;
     49 
     50  grid = document.getElementById("gridWithColumns").getGridFragments()[0];
     51  lines = grid.cols.lines;
     52  expectedValues = [
     53    { "number": 0,
     54      "negativeNumber": -9 },
     55    { "number": 0,
     56      "negativeNumber": -8 },
     57    { "number": 0,
     58      "negativeNumber": -7 },
     59    { "number": 0,
     60      "negativeNumber": -6 },
     61    { "number": 1,
     62      "negativeNumber": -5 },
     63    { "number": 2,
     64      "negativeNumber": -4 },
     65    { "number": 3,
     66      "negativeNumber": -3 },
     67    { "number": 4,
     68      "negativeNumber": -2 },
     69    { "number": 5,
     70      "negativeNumber": -1 },
     71    { "number": 6,
     72      "negativeNumber": 0 },
     73  ];
     74  testLines("gridWithColumns", lines, expectedValues);
     75 
     76 
     77  grid = document.getElementById("gridWithRows").getGridFragments()[0];
     78  lines = grid.rows.lines;
     79  expectedValues = [
     80    { "number": 0,
     81      "negativeNumber": -9 },
     82    { "number": 0,
     83      "negativeNumber": -8 },
     84    { "number": 0,
     85      "negativeNumber": -7 },
     86    { "number": 0,
     87      "negativeNumber": -6 },
     88    { "number": 1,
     89      "negativeNumber": -5 },
     90    { "number": 2,
     91      "negativeNumber": -4 },
     92    { "number": 3,
     93      "negativeNumber": -3 },
     94    { "number": 4,
     95      "negativeNumber": -2 },
     96    { "number": 5,
     97      "negativeNumber": -1 },
     98    { "number": 6,
     99      "negativeNumber": 0 },
    100  ];
    101  testLines("gridWithRows", lines, expectedValues);
    102 
    103  SimpleTest.finish();
    104 }
    105 </script>
    106 </head>
    107 <body onLoad="runTests();">
    108 
    109 <div id="gridWithColumns" class="wrapper repeatColumns">
    110 <div style="grid-column: -9">A</div>
    111 <div style="grid-column: 2">B</div>
    112 <div style="grid-column: 5">C</div>
    113 </div>
    114 
    115 <div id="gridWithRows" class="wrapper repeatRows">
    116 <div style="grid-row: span 4 / 1">A</div>
    117 <div style="grid-row: 3">B</div>
    118 <div style="grid-row: 4 / span 2">C</div>
    119 </div>
    120 
    121 </body>
    122 </html>