tor-browser

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

browser_boxmodel_pseudo-element.js (2735B)

      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 box model displays the right values for a pseudo-element.
      7 
      8 const TEST_URI = `
      9  <style type='text/css'>
     10    div {
     11      box-sizing: border-box;
     12      display: block;
     13      float: left;
     14      line-height: 20px;
     15      position: relative;
     16      z-index: 2;
     17      height: 100px;
     18      width: 100px;
     19      border: 10px solid black;
     20      padding: 20px;
     21      margin: 30px auto;
     22    }
     23 
     24    div::before {
     25      content: 'before';
     26      display: block;
     27      width: 32px;
     28      height: 32px;
     29      margin: 0 auto 6px;
     30    }
     31  </style>
     32  <div>Test Node</div>
     33 `;
     34 
     35 // Expected values:
     36 const res1 = [
     37  {
     38    selector: ".boxmodel-element-size",
     39    value: "32" + "\u00D7" + "32",
     40  },
     41  {
     42    selector: ".boxmodel-size > .boxmodel-width",
     43    value: "32",
     44  },
     45  {
     46    selector: ".boxmodel-size > .boxmodel-height",
     47    value: "32",
     48  },
     49  {
     50    selector: ".boxmodel-margin.boxmodel-top > span",
     51    value: "0",
     52  },
     53  {
     54    selector: ".boxmodel-margin.boxmodel-left > span",
     55    value: "auto",
     56  },
     57  {
     58    selector: ".boxmodel-margin.boxmodel-bottom > span",
     59    value: "6",
     60  },
     61  {
     62    selector: ".boxmodel-margin.boxmodel-right > span",
     63    value: "auto",
     64  },
     65  {
     66    selector: ".boxmodel-padding.boxmodel-top > span",
     67    value: "0",
     68  },
     69  {
     70    selector: ".boxmodel-padding.boxmodel-left > span",
     71    value: "0",
     72  },
     73  {
     74    selector: ".boxmodel-padding.boxmodel-bottom > span",
     75    value: "0",
     76  },
     77  {
     78    selector: ".boxmodel-padding.boxmodel-right > span",
     79    value: "0",
     80  },
     81  {
     82    selector: ".boxmodel-border.boxmodel-top > span",
     83    value: "0",
     84  },
     85  {
     86    selector: ".boxmodel-border.boxmodel-left > span",
     87    value: "0",
     88  },
     89  {
     90    selector: ".boxmodel-border.boxmodel-bottom > span",
     91    value: "0",
     92  },
     93  {
     94    selector: ".boxmodel-border.boxmodel-right > span",
     95    value: "0",
     96  },
     97 ];
     98 
     99 add_task(async function () {
    100  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    101  const { inspector, boxmodel } = await openLayoutView();
    102  const node = await getNodeFront("div", inspector);
    103  const children = await inspector.markup.walker.children(node);
    104  const beforeElement = children.nodes[0];
    105 
    106  await selectNode(beforeElement, inspector);
    107  await testInitialValues(inspector, boxmodel);
    108 });
    109 
    110 function testInitialValues(inspector, boxmodel) {
    111  info("Test that the initial values of the box model are correct");
    112  const doc = boxmodel.document;
    113 
    114  for (let i = 0; i < res1.length; i++) {
    115    const elt = doc.querySelector(res1[i].selector);
    116    is(
    117      elt.textContent,
    118      res1[i].value,
    119      res1[i].selector + " has the right value."
    120    );
    121  }
    122 }