tor-browser

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

test_grid_object.html (2562B)

      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: 400px;
     14  grid-gap: 10px;
     15  grid-template-columns: 100px 1fr 1fr 100px;
     16 }
     17 .oh {
     18  overflow: hidden;
     19 }
     20 .box {
     21  background-color: #444;
     22  color: #fff;
     23 }
     24 </style>
     25 
     26 <script>
     27 "use strict";
     28 
     29 SimpleTest.waitForExplicitFinish();
     30 
     31 function runTests() {
     32  // Test 1: elements styled with display:grid
     33  let idsWithGrid = [
     34    "gridDiv",
     35    "gridFieldset",
     36    "gridButton",
     37    "gridDivOh",
     38    "gridFieldsetOh",
     39    "gridButtonOh",
     40  ];
     41 
     42  for (let id of idsWithGrid) {
     43    let wrapper = document.getElementById(id);
     44 
     45    // test function existence
     46    is(typeof(wrapper.getGridFragments), "function",
     47      id + ": getGridFragments function exists."
     48    );
     49 
     50    // test that wrapper has one grid
     51    let gridFragments = wrapper.getGridFragments();
     52    is(gridFragments.length, 1,
     53      id + ": one grid on an un-fragmented display:grid styled element."
     54    );
     55 
     56    // test that the grid has cols and rows properties
     57    if (gridFragments.length) {
     58      let grid = gridFragments[0];
     59      isnot(typeof(grid.cols), "undefined", id + ": Grid.cols property exists.");
     60      isnot(typeof(grid.rows), "undefined", id + ": Grid.rows property exists.");
     61    }
     62  }
     63 
     64  // Test 2: elements styled without display:grid
     65  let idsWithoutGrid = [
     66    "boxA",
     67  ];
     68 
     69  for (let id of idsWithoutGrid) {
     70    let wrapper = document.getElementById(id);
     71 
     72    // test that wrapper has no grid
     73    let gridFragments = wrapper.getGridFragments();
     74    is(gridFragments.length, 0,
     75      id + ": no grid on element."
     76    );
     77  }
     78 
     79  SimpleTest.finish();
     80 }
     81 </script>
     82 </head>
     83 <body onLoad="runTests();">
     84 
     85  <div id="gridDiv" class="wrapper">
     86    <div id="boxA" class="box">A</div>
     87  </div>
     88 
     89  <fieldset id="gridFieldset" class="wrapper">
     90  <legend>a fieldset</legend>
     91  <label for="name">name</label>
     92  <input id="name">
     93  </fieldset>
     94 
     95  <button id="gridButton" class="wrapper">
     96  <span style="grid-row:2">test</span>
     97  </button>
     98 
     99  <div id="gridDivOh" class="wrapper oh">
    100    <div id="boxAOh" class="box">A</div>
    101  </div>
    102 
    103  <fieldset id="gridFieldsetOh" class="wrapper oh">
    104  <legend>a fieldset</legend>
    105  <label for="nameOh">name</label>
    106  <input id="nameOh">
    107  </fieldset>
    108 
    109  <button id="gridButtonOh" class="wrapper oh">
    110  <span style="grid-row:2">test</span>
    111  </button>
    112 
    113 </body>
    114 </html>