tor-browser

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

browser_rules_inline-style-order.js (3130B)

      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 when the order of properties in the inline style changes, the inline style
      7 // rule updates accordingly.
      8 // This can happen in cases such as this one:
      9 // Given this DOM node:
     10 // <div style="margin:0;color:red;"></div>
     11 // Executing this:
     12 // element.style.margin = "10px";
     13 // Will result in the following attribute value:
     14 // <div style="color: red; margin: 10px;"></div>
     15 // The inline style rule in the rule-view need to update to reflect the new order of
     16 // properties accordingly.
     17 // Note however that we do not want to expect a specific order in this test, and be
     18 // subject to failures if it changes again. Instead, the test compares the order against
     19 // what is in the style DOM attribute.
     20 // See bug 1467076.
     21 
     22 // Test cases, these are { name, value } objects used to change the DOM element's style
     23 // property. After each of these changes, the inline style rule's content will be checked
     24 // against the style DOM attribute's content.
     25 const TEST_CASES = [
     26  { name: "margin", value: "10px" },
     27  { name: "color", value: "blue" },
     28  { name: "padding", value: "20px" },
     29  { name: "margin", value: "0px" },
     30  { name: "color", value: "black" },
     31 ];
     32 
     33 add_task(async function () {
     34  const { linkedBrowser: browser } = await addTab(
     35    `data:text/html;charset=utf-8,<div style="margin:0;color:red;">Inspect me!</div>`
     36  );
     37 
     38  const { inspector, view } = await openRuleView();
     39  await selectNode("div", inspector);
     40 
     41  for (const { name, value } of TEST_CASES) {
     42    info(`Setting style.${name} to ${value} on the test node`);
     43 
     44    const onStyleMutation = waitForStyleModification(inspector);
     45    const onRuleRefreshed = inspector.once("rule-view-refreshed");
     46    await SpecialPowers.spawn(
     47      browser,
     48      [{ name, value }],
     49      async function (change) {
     50        content.document.querySelector("div").style[change.name] = change.value;
     51      }
     52    );
     53    await Promise.all([onStyleMutation, onRuleRefreshed]);
     54 
     55    info("Getting and parsing the content of the node's style attribute");
     56    const markupContainer = inspector.markup.getContainer(
     57      inspector.selection.nodeFront
     58    );
     59    const styleAttrValue =
     60      markupContainer.elt.querySelector(".attr-value").textContent;
     61    const parsedStyleAttr = styleAttrValue
     62      .split(";")
     63      .filter(v => v.trim())
     64      .map(decl => {
     65        const nameValue = decl.split(":").map(v => v.trim());
     66        return { name: nameValue[0], value: nameValue[1] };
     67      });
     68 
     69    info("Checking the content of the rule-view");
     70    const ruleEditor = getRuleViewRuleEditor(view, 0);
     71    const propertiesEls = ruleEditor.propertyList.children;
     72 
     73    parsedStyleAttr.forEach((expected, i) => {
     74      is(
     75        propertiesEls[i].querySelector(".ruleview-propertyname").textContent,
     76        expected.name,
     77        `Correct name found for property ${i}`
     78      );
     79      is(
     80        propertiesEls[i].querySelector(".ruleview-propertyvalue").textContent,
     81        expected.value,
     82        `Correct value found for property ${i}`
     83      );
     84    });
     85  }
     86 });