tor-browser

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

browser_rules_inactive_css_inline.js (4020B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test css properties that are inactive on block-level elements.
      7 
      8 const TEST_URI = `
      9 <style>
     10  #block {
     11    border: 1px solid #000;
     12    vertical-align: sub;
     13  }
     14  td {
     15    vertical-align: super;
     16  }
     17  #flex {
     18    display: inline-flex;
     19    vertical-align: text-bottom;
     20  }
     21  main {
     22    vertical-align: middle;
     23  }
     24  main::before {
     25    content: 'hello';
     26    vertical-align: middle;
     27    height: 10px;
     28    position: relative;
     29    top: 20px;
     30  }
     31 </style>
     32 <h1 style="vertical-align:text-bottom;">browser_rules_inactive_css_inline.js</h1>
     33 <div id="block">Block</div>
     34 <table>
     35  <tr><td>A table cell</td></tr>
     36 </table>
     37 <div id="flex">Inline flex element</div>
     38 <main></main>
     39 `;
     40 
     41 const TEST_DATA = [
     42  {
     43    selector: "h1",
     44    inactiveDeclarations: [
     45      {
     46        declaration: { "vertical-align": "text-bottom" },
     47        ruleIndex: 0,
     48      },
     49    ],
     50  },
     51  {
     52    selector: "#block",
     53    inactiveDeclarations: [
     54      {
     55        declaration: { "vertical-align": "sub" },
     56        ruleIndex: 1,
     57      },
     58    ],
     59  },
     60  {
     61    selector: "td",
     62    activeDeclarations: [
     63      {
     64        declarations: { "vertical-align": "super" },
     65        ruleIndex: 1,
     66      },
     67    ],
     68  },
     69  {
     70    selector: "#flex",
     71    activeDeclarations: [
     72      {
     73        declarations: { "vertical-align": "text-bottom" },
     74        ruleIndex: 1,
     75      },
     76    ],
     77  },
     78  {
     79    selector: "main",
     80    activeDeclarations: [
     81      {
     82        declarations: { "vertical-align": "middle", top: "20px" },
     83        // The ::before rule in the pseudo-element section
     84        ruleIndex: [1, 0],
     85      },
     86    ],
     87    inactiveDeclarations: [
     88      {
     89        declaration: { height: "10px" },
     90        // The ::before rule in the pseudo-element section
     91        ruleIndex: [1, 0],
     92      },
     93      {
     94        declaration: { "vertical-align": "middle" },
     95        ruleIndex: 4,
     96      },
     97    ],
     98  },
     99  {
    100    // Select the "main::before" node
    101    selectNode: async inspector => {
    102      const node = await getNodeFront("main", inspector);
    103      const children = await inspector.markup.walker.children(node);
    104      const beforeElement = children.nodes[0];
    105      await selectNode(beforeElement, inspector);
    106    },
    107    activeDeclarations: [
    108      {
    109        declarations: { "vertical-align": "middle", top: "20px" },
    110        ruleIndex: 0,
    111      },
    112    ],
    113    inactiveDeclarations: [
    114      {
    115        declaration: { height: "10px" },
    116        ruleIndex: 0,
    117      },
    118    ],
    119  },
    120 ];
    121 
    122 add_task(async function () {
    123  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    124  const { inspector, view } = await openRuleView();
    125 
    126  await runInactiveCSSTests(view, inspector, TEST_DATA);
    127 });
    128 
    129 add_task(async function () {
    130  await addTab(
    131    "data:text/html;charset=utf-8," +
    132      encodeURIComponent(`
    133        <style>
    134          button::before {
    135            content: "Hello ";
    136            position: relative;
    137            top: 10px;
    138          }
    139        </style>
    140        <button>World</button>`)
    141  );
    142  const { inspector, view } = await openRuleView();
    143 
    144  info(
    145    "First, select the button::before node, without selecting button before"
    146  );
    147  // It's important not to select "button" before selecting the pseudo element node,
    148  // otherwise we won't trigger the codepath this is asserting.
    149  const node = await getNodeFront("button", inspector);
    150  const children = await inspector.markup.walker.children(node);
    151  const beforeElement = children.nodes[0];
    152  await selectNode(beforeElement, inspector);
    153 
    154  // We also need to do an actual check to trigger the codepath
    155  await checkDeclarationIsActive(view, 0, {
    156    top: "10px",
    157  });
    158 
    159  info("Then select the button node");
    160  await selectNode("button", inspector);
    161 
    162  info("Set an inactive property on the element style");
    163  const inlineStyleRuleIndex = 3;
    164  await addProperty(view, inlineStyleRuleIndex, "left", "10px");
    165  await checkDeclarationIsInactive(view, inlineStyleRuleIndex, {
    166    left: "10px",
    167  });
    168 });