tor-browser

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

browser_rules_inactive_css_flexbox.js (3030B)

      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 flex properties.
      7 
      8 const TEST_URI = `
      9 <head>
     10  <style>
     11    #container {
     12      width: 200px;
     13      height: 100px;
     14      border: 1px solid #000;
     15      align-content: space-between;
     16      order: 1;
     17    }
     18 
     19    .flex-item {
     20      flex-basis: auto;
     21      flex-grow: 1;
     22      flex-shrink: 1;
     23      flex-direction: row;
     24    }
     25 
     26    #self-aligned {
     27      align-self: stretch;
     28    }
     29  </style>
     30 </head>
     31 <body>
     32    <h1>browser_rules_inactive_css_flexbox.js</h1>
     33    <div id="container" style="display:flex">
     34      <div class="flex-item item-1" style="order:1">1</div>
     35      <div class="flex-item item-2" style="order:2">2</div>
     36      <div class="flex-item item-3" style="order:3">3</div>
     37    </div>
     38    <div id="self-aligned"></div>
     39 </body>`;
     40 
     41 const BEFORE = [
     42  {
     43    selector: "#self-aligned",
     44    inactiveDeclarations: [
     45      {
     46        declaration: {
     47          "align-self": "stretch",
     48        },
     49        ruleIndex: 1,
     50      },
     51    ],
     52  },
     53  {
     54    selector: ".item-2",
     55    activeDeclarations: [
     56      {
     57        declarations: {
     58          order: "2",
     59        },
     60        ruleIndex: 0,
     61      },
     62      {
     63        declarations: {
     64          "flex-basis": "auto",
     65          "flex-grow": "1",
     66          "flex-shrink": "1",
     67        },
     68        ruleIndex: 1,
     69      },
     70    ],
     71    inactiveDeclarations: [
     72      {
     73        declaration: {
     74          "flex-direction": "row",
     75        },
     76        ruleIndex: 1,
     77      },
     78    ],
     79  },
     80  {
     81    selector: "#container",
     82    activeDeclarations: [
     83      {
     84        declarations: {
     85          display: "flex",
     86        },
     87        ruleIndex: 0,
     88      },
     89      {
     90        declarations: {
     91          width: "200px",
     92          height: "100px",
     93          border: "1px solid #000",
     94          "align-content": "space-between",
     95        },
     96        ruleIndex: 1,
     97      },
     98    ],
     99    inactiveDeclarations: [
    100      {
    101        declaration: {
    102          order: "1",
    103        },
    104        ruleIndex: 1,
    105      },
    106    ],
    107  },
    108 ];
    109 
    110 const AFTER = [
    111  {
    112    selector: ".item-2",
    113    inactiveDeclarations: [
    114      {
    115        declaration: {
    116          order: "2",
    117        },
    118        ruleIndex: 0,
    119      },
    120      {
    121        declaration: {
    122          "flex-basis": "auto",
    123        },
    124        ruleIndex: 1,
    125      },
    126      {
    127        declaration: {
    128          "flex-grow": "1",
    129        },
    130        ruleIndex: 1,
    131      },
    132      {
    133        declaration: {
    134          "flex-shrink": "1",
    135        },
    136        ruleIndex: 1,
    137      },
    138      {
    139        declaration: {
    140          "flex-direction": "row",
    141        },
    142        ruleIndex: 1,
    143      },
    144    ],
    145  },
    146 ];
    147 
    148 add_task(async function () {
    149  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    150  const { inspector, view } = await openRuleView();
    151 
    152  await runInactiveCSSTests(view, inspector, BEFORE);
    153 
    154  // Toggle `display:flex` to disabled.
    155  await toggleDeclaration(view, 0, {
    156    display: "flex",
    157  });
    158  await runInactiveCSSTests(view, inspector, AFTER);
    159 });