tor-browser

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

browser_boxmodel_properties.js (2753B)

      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 properties list displays the right values
      7 // and that it updates when the node's style is changed.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    div {
     12      box-sizing: border-box;
     13      display: block;
     14      float: left;
     15      line-height: 20px;
     16      position: relative;
     17      z-index: 2;
     18      height: 100px;
     19      width: 100px;
     20      border: 10px solid black;
     21      padding: 20px;
     22      margin: 30px auto;
     23    }
     24  </style>
     25  <div>Test Node</div>
     26 `;
     27 
     28 const res1 = [
     29  {
     30    property: "box-sizing",
     31    value: "border-box",
     32  },
     33  {
     34    property: "display",
     35    value: "block",
     36  },
     37  {
     38    property: "float",
     39    value: "left",
     40  },
     41  {
     42    property: "line-height",
     43    value: "20px",
     44  },
     45  {
     46    property: "position",
     47    value: "relative",
     48  },
     49  {
     50    property: "z-index",
     51    value: "2",
     52  },
     53 ];
     54 
     55 const res2 = [
     56  {
     57    property: "box-sizing",
     58    value: "content-box",
     59  },
     60  {
     61    property: "display",
     62    value: "block",
     63  },
     64  {
     65    property: "float",
     66    value: "right",
     67  },
     68  {
     69    property: "line-height",
     70    value: "10px",
     71  },
     72  {
     73    property: "position",
     74    value: "static",
     75  },
     76  {
     77    property: "z-index",
     78    value: "5",
     79  },
     80 ];
     81 
     82 add_task(async function () {
     83  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     84  const { inspector, boxmodel } = await openLayoutView();
     85  await selectNode("div", inspector);
     86 
     87  await testInitialValues(inspector, boxmodel);
     88  await testChangingValues(inspector, boxmodel);
     89 });
     90 
     91 function testInitialValues(inspector, boxmodel) {
     92  info("Test that the initial values of the box model are correct");
     93  const doc = boxmodel.document;
     94 
     95  for (const { property, value } of res1) {
     96    const elt = doc.querySelector(getPropertySelector(property));
     97    is(elt.textContent, value, property + " has the right value.");
     98  }
     99 }
    100 
    101 async function testChangingValues(inspector, boxmodel) {
    102  info("Test that changing the document updates the box model");
    103  const doc = boxmodel.document;
    104 
    105  const onUpdated = waitForUpdate(inspector);
    106  await setContentPageElementAttribute(
    107    "div",
    108    "style",
    109    "box-sizing:content-box;float:right;" +
    110      "line-height:10px;position:static;z-index:5;"
    111  );
    112  await onUpdated;
    113 
    114  for (const { property, value } of res2) {
    115    const elt = doc.querySelector(getPropertySelector(property));
    116    is(
    117      elt.textContent,
    118      value,
    119      property + " has the right value after style update."
    120    );
    121  }
    122 }
    123 
    124 function getPropertySelector(propertyName) {
    125  return (
    126    `.boxmodel-container .computed-property-view` +
    127    `[data-property-name=${propertyName}] .computed-property-value`
    128  );
    129 }