tor-browser

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

browser_computed_pseudo-element.js (2868B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that pseudoelements are displayed correctly in the rule view.
      7 
      8 const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
      9 
     10 add_task(async function () {
     11  await addTab(TEST_URI);
     12  const { inspector, view } = await openComputedView();
     13  await testTopLeft(inspector, view);
     14 });
     15 
     16 async function testTopLeft(inspector, view) {
     17  const node = await getNodeFront("#topleft", inspector.markup);
     18  await selectNode(node, inspector);
     19  const float = getComputedViewPropertyValue(view, "float");
     20  is(float, "left", "The computed view shows the correct float");
     21 
     22  const children = await inspector.markup.walker.children(node);
     23  is(children.nodes.length, 3, "Element has correct number of children");
     24 
     25  const beforeElement = children.nodes[0];
     26  await selectNode(beforeElement, inspector);
     27 
     28  info("check `top` property on #topleft::before");
     29  await checkMatchedSelectorForProperty(view, {
     30    property: "top",
     31    expectedComputedValue: "0px",
     32    expectedMatchedSelectors: [
     33      {
     34        selector: ".topleft::before",
     35        value: "0px",
     36      },
     37      {
     38        selector: ":where(.topleft)::before",
     39        value: "10px",
     40      },
     41    ],
     42  });
     43 
     44  info("check `left` property on #topleft::before");
     45  await checkMatchedSelectorForProperty(view, {
     46    property: "left",
     47    expectedComputedValue: "0px",
     48    expectedMatchedSelectors: [
     49      {
     50        selector: ".topleft::before",
     51        value: "0px",
     52      },
     53      {
     54        selector: ":where(.topleft)::before",
     55        value: "20px",
     56      },
     57    ],
     58  });
     59 
     60  info("check `color` property on #topleft::before");
     61  await checkMatchedSelectorForProperty(view, {
     62    property: "color",
     63    expectedComputedValue: "rgb(0, 255, 0)",
     64    expectedMatchedSelectors: [
     65      {
     66        selector: ":where(.topleft)::before",
     67        value: "lime",
     68      },
     69      {
     70        selector: ".topleft",
     71        value: "blue",
     72        match: false,
     73      },
     74      {
     75        selector: "body",
     76        value: "rgb(51, 51, 51)",
     77        match: false,
     78      },
     79      {
     80        selector: ":root",
     81        value: "canvastext",
     82        match: false,
     83      },
     84    ],
     85  });
     86 
     87  const afterElement = children.nodes.at(-1);
     88  await selectNode(afterElement, inspector);
     89 
     90  info("check `top` property on #topleft::after");
     91  await checkMatchedSelectorForProperty(view, {
     92    property: "top",
     93    expectedComputedValue: "96px",
     94    expectedMatchedSelectors: [
     95      {
     96        selector: ".box::after",
     97        value: "50%",
     98      },
     99    ],
    100  });
    101 
    102  info("check `left` property on #topleft::after");
    103  await checkMatchedSelectorForProperty(view, {
    104    property: "left",
    105    expectedComputedValue: "96px",
    106    expectedMatchedSelectors: [
    107      {
    108        selector: ".box::after",
    109        value: "50%",
    110      },
    111    ],
    112  });
    113 }