tor-browser

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

browser_boxmodel_offsetparent.js (2766B)

      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 the offset parent and that it
      7 // updates when the node's style is changed
      8 
      9 const TEST_URI = `
     10  <div id="relative_parent" style="position: relative">
     11    <div id="absolute_child" style="position: absolute"></div>
     12  </div>
     13  <div id="static"></div>
     14  <div id="no_parent" style="position: absolute"></div>
     15  <div id="fixed" style="position: fixed"></div>
     16  <div id="transform" style="transform: translate(0,0)">
     17    <div id="transform-fixed" style="position: fixed"></div>
     18  </div>
     19 `;
     20 
     21 const OFFSET_PARENT_SELECTOR =
     22  ".computed-property-value-container .objectBox-node";
     23 
     24 const res1 = [
     25  {
     26    selector: "#absolute_child",
     27    offsetParentValue: "div#relative_parent",
     28  },
     29  {
     30    selector: "#no_parent",
     31    offsetParentValue: "body",
     32  },
     33  {
     34    selector: "#relative_parent",
     35    offsetParentValue: "body",
     36  },
     37  {
     38    selector: "#static",
     39    offsetParentValue: null,
     40  },
     41  {
     42    selector: "#fixed",
     43    offsetParentValue: null,
     44  },
     45  {
     46    selector: "#transform-fixed",
     47    offsetParentValue: "div#transform",
     48  },
     49 ];
     50 
     51 const updates = [
     52  {
     53    selector: "#absolute_child",
     54    update: "position: static",
     55  },
     56 ];
     57 
     58 const res2 = [
     59  {
     60    selector: "#absolute_child",
     61    offsetParentValue: null,
     62  },
     63 ];
     64 
     65 add_task(async function () {
     66  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
     67  const { inspector, boxmodel } = await openLayoutView();
     68 
     69  await testInitialValues(inspector, boxmodel);
     70  await testChangingValues(inspector, boxmodel);
     71 });
     72 
     73 async function testInitialValues(inspector, boxmodel) {
     74  info(
     75    "Test that the initial values of the box model offset parent are correct"
     76  );
     77  const viewdoc = boxmodel.document;
     78 
     79  for (const { selector, offsetParentValue } of res1) {
     80    await selectNode(selector, inspector);
     81 
     82    const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
     83    is(
     84      elt && elt.textContent,
     85      offsetParentValue,
     86      selector + " has the right value."
     87    );
     88  }
     89 }
     90 
     91 async function testChangingValues(inspector, boxmodel) {
     92  info("Test that changing the document updates the box model");
     93  const viewdoc = boxmodel.document;
     94 
     95  for (const { selector, update } of updates) {
     96    const onUpdated = waitForUpdate(inspector);
     97    await setContentPageElementAttribute(selector, "style", update);
     98    await onUpdated;
     99  }
    100 
    101  for (const { selector, offsetParentValue } of res2) {
    102    await selectNode(selector, inspector);
    103 
    104    const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
    105    is(
    106      elt && elt.textContent,
    107      offsetParentValue,
    108      selector + " has the right value after style update."
    109    );
    110  }
    111 }