tor-browser

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

browser_rules_inactive_css_grid.js (5325B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test inactive grid properties.
      7 
      8 const TEST_URI = `
      9 <head>
     10  <style>
     11    html {
     12      grid-area: foo;
     13    }
     14    #container {
     15      width: 200px;
     16      height: 100px;
     17      border: 1px solid #000;
     18      column-gap: 10px;
     19      row-gap: 10px;
     20      align-self: start;
     21      position: relative;
     22    }
     23 
     24    .item-1 {
     25      grid-column-start: 1;
     26      grid-column-end: 3;
     27      grid-row-start: 1;
     28      grid-row-end: auto;
     29      flex-direction: row
     30    }
     31 
     32    #abspos {
     33      position: absolute;
     34      grid-column: 2;
     35    }
     36 
     37    #self-aligned {
     38      align-self: stretch;
     39    }
     40  </style>
     41 </head>
     42 <body>
     43    <h1>browser_rules_inactive_css_grid.js</h1>
     44    <div id="container" style="display:grid">
     45      <div class="grid-item item-1">1</div>
     46      <div class="grid-item item-2">2</div>
     47      <div class="grid-item item-3">3</div>
     48      <div class="grid-item item-4">4</div>
     49      <div class="grid-item item-5">
     50        <div id="abspos">AbsPos item</div>
     51      </div>
     52    </div>
     53    <div id="self-aligned"></div>
     54 </body>`;
     55 
     56 const BEFORE = [
     57  {
     58    // Check first that the getting grid-related data about the <html> node doesn't break.
     59    // See bug 1576484.
     60    selector: "html",
     61    inactiveDeclarations: [
     62      {
     63        declaration: {
     64          "grid-area": "foo",
     65        },
     66        ruleIndex: 1,
     67      },
     68    ],
     69  },
     70  {
     71    selector: "#self-aligned",
     72    inactiveDeclarations: [
     73      {
     74        declaration: {
     75          "align-self": "stretch",
     76        },
     77        ruleIndex: 1,
     78      },
     79    ],
     80  },
     81  {
     82    selector: ".item-1",
     83    activeDeclarations: [
     84      {
     85        declarations: {
     86          "grid-column-start": "1",
     87          "grid-column-end": "3",
     88          "grid-row-start": "1",
     89          "grid-row-end": "auto",
     90        },
     91        ruleIndex: 1,
     92      },
     93    ],
     94    inactiveDeclarations: [
     95      {
     96        declaration: {
     97          "flex-direction": "row",
     98        },
     99        ruleIndex: 1,
    100      },
    101    ],
    102  },
    103  {
    104    selector: "#abspos",
    105    activeDeclarations: [
    106      {
    107        declarations: {
    108          "grid-column": 2,
    109        },
    110        ruleIndex: 1,
    111      },
    112    ],
    113  },
    114  {
    115    selector: "#container",
    116    activeDeclarations: [
    117      {
    118        declarations: {
    119          display: "grid",
    120        },
    121        ruleIndex: 0,
    122      },
    123      {
    124        declarations: {
    125          width: "200px",
    126          height: "100px",
    127          border: "1px solid #000",
    128          "column-gap": "10px",
    129          "row-gap": "10px",
    130        },
    131        ruleIndex: 1,
    132      },
    133    ],
    134    inactiveDeclarations: [
    135      {
    136        declaration: {
    137          "align-self": "start",
    138        },
    139        ruleIndex: 1,
    140      },
    141    ],
    142  },
    143 ];
    144 
    145 const AFTER = [
    146  {
    147    activeDeclarations: [
    148      {
    149        declarations: {
    150          display: "grid",
    151        },
    152        ruleIndex: 0,
    153      },
    154      {
    155        declarations: {
    156          width: "200px",
    157          height: "100px",
    158          border: "1px solid #000",
    159        },
    160        ruleIndex: 1,
    161      },
    162    ],
    163    inactiveDeclarations: [
    164      {
    165        declaration: {
    166          "column-gap": "10px",
    167        },
    168        ruleIndex: 1,
    169      },
    170      {
    171        declaration: {
    172          "row-gap": "10px",
    173        },
    174        ruleIndex: 1,
    175      },
    176      {
    177        declaration: {
    178          "align-self": "start",
    179        },
    180        ruleIndex: 1,
    181      },
    182    ],
    183  },
    184  {
    185    selector: "#abspos",
    186    inactiveDeclarations: [
    187      {
    188        declaration: {
    189          "grid-column": 2,
    190        },
    191        ruleIndex: 1,
    192      },
    193    ],
    194  },
    195 ];
    196 
    197 add_task(async function () {
    198  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    199  const { inspector, view } = await openRuleView();
    200 
    201  await runInactiveCSSTests(view, inspector, BEFORE);
    202 
    203  // Toggle `display:grid` to disabled.
    204  await toggleDeclaration(view, 0, {
    205    display: "grid",
    206  });
    207  await view.once("ruleview-refreshed");
    208  await runInactiveCSSTests(view, inspector, AFTER);
    209 
    210  info("Toggle `display: grid` to enabled again.");
    211  await selectNode("#container", inspector);
    212  await toggleDeclaration(view, 0, {
    213    display: "grid",
    214  });
    215  await runAbsPosGridElementTests(view, inspector);
    216 });
    217 
    218 /**
    219 * Tests for absolute positioned elements in a grid.
    220 */
    221 async function runAbsPosGridElementTests(view, inspector) {
    222  info("Toggling `position: relative` to disabled.");
    223  await toggleDeclaration(view, 1, {
    224    position: "relative",
    225  });
    226  await runInactiveCSSTests(view, inspector, [
    227    {
    228      selector: "#abspos",
    229      inactiveDeclarations: [
    230        {
    231          declaration: {
    232            "grid-column": 2,
    233          },
    234          ruleIndex: 1,
    235        },
    236      ],
    237    },
    238  ]);
    239 
    240  info("Toggling `position: relative` back to enabled.");
    241  await selectNode("#container", inspector);
    242  await toggleDeclaration(view, 1, {
    243    position: "relative",
    244  });
    245 
    246  info("Toggling `position: absolute` on grid element to disabled.");
    247  await selectNode("#abspos", inspector);
    248  await toggleDeclaration(view, 1, {
    249    position: "absolute",
    250  });
    251 
    252  await runInactiveCSSTests(view, inspector, [
    253    {
    254      selector: "#abspos",
    255      inactiveDeclarations: [
    256        {
    257          declaration: {
    258            "grid-column": 2,
    259          },
    260          ruleIndex: 1,
    261        },
    262      ],
    263    },
    264  ]);
    265 }