tor-browser

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

browser_rules_attributes-style.js (4300B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that attributes style (presentational hints) "rules" are displayed
      7 
      8 const TEST_URI = `
      9  <style>
     10    .right {
     11      text-align: right;
     12    }
     13  </style>
     14  <canvas width=100 height=150 style="outline: 1px solid"></canvas>
     15  <h1 align="center">
     16    In <span>a galaxy </span><span class="right">far far</span> <p align="left">away</p>
     17  </h1>
     18  <h2 align="left" style="text-align: center">foo</h2>
     19  <table></table>
     20 `;
     21 
     22 add_task(async function () {
     23  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     24  const { inspector, view } = await openRuleView();
     25 
     26  // Check that the element style and element attribute style are displayed
     27  await selectNode("canvas", inspector);
     28  checkRuleViewContent(view, [
     29    {
     30      selector: "element",
     31      selectorEditable: false,
     32      declarations: [{ name: "outline", value: "1px solid" }],
     33    },
     34    {
     35      selector: "element attributes style",
     36      selectorEditable: false,
     37      declarations: [{ name: "aspect-ratio", value: "auto 100 / 150" }],
     38    },
     39  ]);
     40 
     41  // Check that the element attribute style are displayed
     42  await selectNode("h1", inspector);
     43  checkRuleViewContent(view, [
     44    {
     45      selector: "element",
     46      selectorEditable: false,
     47      declarations: [],
     48    },
     49    {
     50      selector: "element attributes style",
     51      selectorEditable: false,
     52      declarations: [{ name: "text-align", value: "-moz-center" }],
     53    },
     54  ]);
     55 
     56  // Check that the inherited element attribute style are displayed
     57  await selectNode("h1 > span", inspector);
     58  checkRuleViewContent(view, [
     59    {
     60      selector: "element",
     61      selectorEditable: false,
     62      declarations: [],
     63    },
     64    {
     65      header: "Inherited from h1",
     66    },
     67    {
     68      selector: "element attributes style",
     69      selectorEditable: false,
     70      inherited: true,
     71      declarations: [{ name: "text-align", value: "-moz-center" }],
     72    },
     73  ]);
     74 
     75  // Check that the .right rule is displayed, as well as inherited element attribute style
     76  // with overridden text-align declaration
     77  await selectNode("h1 > span.right", inspector);
     78  checkRuleViewContent(view, [
     79    {
     80      selector: "element",
     81      selectorEditable: false,
     82      declarations: [],
     83    },
     84    {
     85      selector: ".right",
     86      declarations: [{ name: "text-align", value: "right" }],
     87    },
     88    {
     89      header: "Inherited from h1",
     90    },
     91    {
     92      selector: "element attributes style",
     93      selectorEditable: false,
     94      inherited: true,
     95      declarations: [
     96        { name: "text-align", value: "-moz-center", overridden: true },
     97      ],
     98    },
     99  ]);
    100 
    101  // Check that element attribute style is displayed, as well as inherited element attribute
    102  // style with overridden text-align declaration
    103  await selectNode("h1 > p[align]", inspector);
    104  checkRuleViewContent(view, [
    105    {
    106      selector: "element",
    107      selectorEditable: false,
    108      declarations: [],
    109    },
    110    {
    111      selector: "element attributes style",
    112      selectorEditable: false,
    113      declarations: [{ name: "text-align", value: "-moz-left" }],
    114    },
    115    {
    116      header: "Inherited from h1",
    117    },
    118    {
    119      selector: "element attributes style",
    120      selectorEditable: false,
    121      inherited: true,
    122      declarations: [
    123        { name: "text-align", value: "-moz-center", overridden: true },
    124      ],
    125    },
    126  ]);
    127 
    128  // Check that element style is displayed, as well as element attribute style with overridden
    129  // text-align declaration
    130  await selectNode("h2", inspector);
    131  checkRuleViewContent(view, [
    132    {
    133      selector: "element",
    134      selectorEditable: false,
    135      declarations: [{ name: "text-align", value: "center" }],
    136    },
    137    {
    138      selector: "element attributes style",
    139      selectorEditable: false,
    140      declarations: [
    141        { name: "text-align", value: "-moz-left", overridden: true },
    142      ],
    143    },
    144  ]);
    145 
    146  await selectNode("table", inspector);
    147  checkRuleViewContent(view, [
    148    {
    149      selector: "element",
    150      selectorEditable: false,
    151      declarations: [],
    152    },
    153    {
    154      selector: "element attributes style",
    155      selectorEditable: false,
    156      declarations: [{ name: "color", value: "-moz-inherit-from-body-quirk" }],
    157    },
    158  ]);
    159 });