tor-browser

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

browser_rules_layer.js (4042B)

      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 the rule-view content is correct when the page defines layers.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    @import url(${URL_ROOT_COM_SSL}doc_imported_anonymous_layer.css) layer;
     11    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer);
     12    @import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
     13 
     14    @layer myLayer {
     15      h1, [test-hint=named-layer] {
     16        background-color: tomato;
     17        color: lightgreen;
     18      }
     19    }
     20 
     21    @layer {
     22      h1, [test-hint=anonymous-layer] {
     23        color: green;
     24        font-variant: small-caps
     25      }
     26    }
     27 
     28    h1, [test-hint=no-rule-layer] {
     29      color: pink;
     30    }
     31  </style>
     32  <h1>Hello @layer!</h1>
     33 `;
     34 
     35 add_task(async function () {
     36  await addTab(
     37    "https://example.com/document-builder.sjs?html=" +
     38      encodeURIComponent(TEST_URI)
     39  );
     40  const { inspector, view } = await openRuleView();
     41 
     42  await selectNode("h1", inspector);
     43 
     44  const expectedRules = [
     45    { selector: "element", ancestorRulesData: null },
     46    { selector: `h1, [test-hint="no-rule-layer"]`, ancestorRulesData: null },
     47    {
     48      selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`,
     49      ancestorRulesData: null,
     50    },
     51    {
     52      selector: `h1, [test-hint="anonymous-layer"]`,
     53      ancestorRulesData: ["@layer {"],
     54    },
     55    {
     56      selector: `h1, [test-hint="named-layer"]`,
     57      ancestorRulesData: ["@layer myLayer {"],
     58    },
     59    {
     60      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
     61      ancestorRulesData: ["@layer importedLayer {", "  @media screen {"],
     62    },
     63    {
     64      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
     65      ancestorRulesData: [
     66        "@layer importedLayer {",
     67        "  @media screen {",
     68        "    @layer in-imported-stylesheet {",
     69      ],
     70    },
     71    {
     72      selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`,
     73      ancestorRulesData: [
     74        "@layer importedLayer {",
     75        "  @layer importedNestedLayer {",
     76        "    @layer in-imported-nested-stylesheet {",
     77      ],
     78    },
     79    {
     80      selector: `h1, [test-hint="imported-anonymous-layer--no-rule-layer"]`,
     81      ancestorRulesData: ["@layer {"],
     82    },
     83  ];
     84 
     85  const rulesInView = Array.from(view.element.children);
     86  is(
     87    rulesInView.length,
     88    expectedRules.length,
     89    "All expected rules are displayed"
     90  );
     91 
     92  for (let i = 0; i < expectedRules.length; i++) {
     93    const expectedRule = expectedRules[i];
     94    info(`Checking rule #${i}: ${expectedRule.selector}`);
     95 
     96    const selector = rulesInView[i].querySelector(
     97      ".ruleview-selectors-container"
     98    ).innerText;
     99    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
    100 
    101    if (expectedRule.ancestorRulesData == null) {
    102      is(
    103        getRuleViewAncestorRulesDataElementByIndex(view, i),
    104        null,
    105        `No ancestor rules data displayed for ${selector}`
    106      );
    107    } else {
    108      is(
    109        getRuleViewAncestorRulesDataTextByIndex(view, i),
    110        expectedRule.ancestorRulesData.join("\n"),
    111        `Expected ancestor rules data displayed for ${selector}`
    112      );
    113    }
    114  }
    115 });
    116 
    117 add_task(async function editStylesheetLayerRule() {
    118  await addTab(
    119    "https://example.com/document-builder.sjs?html=" +
    120      encodeURIComponent(`
    121        <link rel="stylesheet" href="${URL_ROOT_COM_SSL}doc_layer_edit.css">
    122        <h1>Editing @layer stylesheet</h1>
    123      `)
    124  );
    125 
    126  const { inspector, view } = await openRuleView();
    127 
    128  info("Select h1 node");
    129  await selectNode("h1", inspector);
    130 
    131  is(
    132    await getComputedStyleProperty("h1", null, "font-size"),
    133    "20px",
    134    "original font-size value for h1 is 20px"
    135  );
    136 
    137  const prop = getTextProperty(view, 1, { "font-size": "20px" });
    138 
    139  info("Change font-size");
    140  await setProperty(view, prop, "42px");
    141 
    142  is(
    143    await getComputedStyleProperty("h1", null, "font-size"),
    144    "42px",
    145    "h1 font-size was properly set"
    146  );
    147 });