tor-browser

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

browser_grids_grid-outline-writing-mode.js (4616B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that the grid outline adjusts to match the container's writing mode.
      7 
      8 const TEST_URI = `
      9  <style type='text/css'>
     10    .grid {
     11      display: grid;
     12      width: 400px;
     13      height: 300px;
     14    }
     15    .rtl {
     16      direction: rtl;
     17    }
     18    .v-rl {
     19      writing-mode: vertical-rl;
     20    }
     21    .v-lr {
     22      writing-mode: vertical-lr;
     23    }
     24    .s-rl {
     25      writing-mode: sideways-rl;
     26    }
     27    .s-lr {
     28      writing-mode: sideways-lr;
     29    }
     30  </style>
     31  <div class="grid">
     32    <div id="cella">Cell A</div>
     33    <div id="cellb">Cell B</div>
     34    <div id="cellc">Cell C</div>
     35  </div>
     36  <div class="grid rtl">
     37    <div id="cella">Cell A</div>
     38    <div id="cellb">Cell B</div>
     39    <div id="cellc">Cell C</div>
     40  </div>
     41  <div class="grid v-rl">
     42    <div id="cella">Cell A</div>
     43    <div id="cellb">Cell B</div>
     44    <div id="cellc">Cell C</div>
     45  </div>
     46  <div class="grid v-lr">
     47    <div id="cella">Cell A</div>
     48    <div id="cellb">Cell B</div>
     49    <div id="cellc">Cell C</div>
     50  </div>
     51  <div class="grid s-rl">
     52    <div id="cella">Cell A</div>
     53    <div id="cellb">Cell B</div>
     54    <div id="cellc">Cell C</div>
     55  </div>
     56  <div class="grid s-lr">
     57    <div id="cella">Cell A</div>
     58    <div id="cellb">Cell B</div>
     59    <div id="cellc">Cell C</div>
     60  </div>
     61 `;
     62 
     63 add_task(async function () {
     64  await pushPref("devtools.gridinspector.maxHighlighters", 1);
     65  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     66 
     67  const { inspector, gridInspector } = await openLayoutView();
     68  const { document: doc } = gridInspector;
     69  const { highlighters, store } = inspector;
     70 
     71  info("Checking the initial state of the Grid Inspector.");
     72  ok(
     73    !doc.getElementById("grid-outline-container"),
     74    "There should be no grid outline shown."
     75  );
     76 
     77  let elements;
     78 
     79  elements = await enableGrid(doc, highlighters, store, 0);
     80  is(
     81    elements[0].style.transform,
     82    "matrix(1, 0, 0, 1, 0, 0)",
     83    "Transform matches for horizontal-tb and ltr."
     84  );
     85  await disableGrid(doc, highlighters, store, 0);
     86 
     87  elements = await enableGrid(doc, highlighters, store, 1);
     88  is(
     89    elements[0].style.transform,
     90    "matrix(-1, 0, 0, 1, 200, 0)",
     91    "Transform matches for horizontal-tb and rtl"
     92  );
     93  await disableGrid(doc, highlighters, store, 1);
     94 
     95  elements = await enableGrid(doc, highlighters, store, 2);
     96  is(
     97    elements[0].style.transform,
     98    "matrix(6.12323e-17, 1, -1, 6.12323e-17, 200, 0)",
     99    "Transform matches for vertical-rl and ltr"
    100  );
    101  await disableGrid(doc, highlighters, store, 2);
    102 
    103  elements = await enableGrid(doc, highlighters, store, 3);
    104  is(
    105    elements[0].style.transform,
    106    "matrix(-6.12323e-17, 1, 1, 6.12323e-17, 0, 0)",
    107    "Transform matches for vertical-lr and ltr"
    108  );
    109  await disableGrid(doc, highlighters, store, 3);
    110 
    111  elements = await enableGrid(doc, highlighters, store, 4);
    112  is(
    113    elements[0].style.transform,
    114    "matrix(6.12323e-17, 1, -1, 6.12323e-17, 200, 0)",
    115    "Transform matches for sideways-rl and ltr"
    116  );
    117  await disableGrid(doc, highlighters, store, 4);
    118 
    119  elements = await enableGrid(doc, highlighters, store, 5);
    120  is(
    121    elements[0].style.transform,
    122    "matrix(6.12323e-17, -1, 1, 6.12323e-17, -9.18485e-15, 150)",
    123    "Transform matches for sideways-lr and ltr"
    124  );
    125  await disableGrid(doc, highlighters, store, 5);
    126 });
    127 
    128 async function enableGrid(doc, highlighters, store, index) {
    129  info(`Enabling the CSS grid highlighter for grid ${index}.`);
    130  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
    131  const onCheckboxChange = waitUntilState(
    132    store,
    133    state => state.grids.length == 6 && state.grids[index].highlighted
    134  );
    135  const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group");
    136  const gridList = doc.getElementById("grid-list");
    137  gridList.children[index].querySelector("input").click();
    138  await onHighlighterShown;
    139  await onCheckboxChange;
    140  return onGridOutlineRendered;
    141 }
    142 
    143 async function disableGrid(doc, highlighters, store, index) {
    144  info(`Disabling the CSS grid highlighter for grid ${index}.`);
    145  const onHighlighterShown = highlighters.once("grid-highlighter-hidden");
    146  const onCheckboxChange = waitUntilState(
    147    store,
    148    state => state.grids.length == 6 && !state.grids[index].highlighted
    149  );
    150  const onGridOutlineRemoved = waitForDOM(doc, "#grid-cell-group", 0);
    151  const gridList = doc.getElementById("grid-list");
    152  gridList.children[index].querySelector("input").click();
    153  await onHighlighterShown;
    154  await onCheckboxChange;
    155  return onGridOutlineRemoved;
    156 }