tor-browser

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

browser_rules_edit-property-computed.js (2780B)

      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 computed values of a style (the shorthand expansion) are
      7 // properly updated after the style is changed.
      8 
      9 const TEST_URI = `
     10  <style type="text/css">
     11    #testid {
     12      padding: 10px;
     13    }
     14  </style>
     15  <div id="testid">Styled Node</div>
     16 `;
     17 
     18 add_task(async function () {
     19  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     20  const { inspector, view } = await openRuleView();
     21  await selectNode("#testid", inspector);
     22  await editAndCheck(view);
     23 });
     24 
     25 async function editAndCheck(view) {
     26  const prop = getTextProperty(view, 1, { padding: "10px" });
     27  const propEditor = prop.editor;
     28  const newPaddingValue = "20px";
     29 
     30  info("Focusing the inplace editor field");
     31  const editor = await focusEditableField(view, propEditor.valueSpan);
     32  is(
     33    inplaceEditor(propEditor.valueSpan),
     34    editor,
     35    "Focused editor should be the value span."
     36  );
     37 
     38  const onPropertyChange = waitForComputedStyleProperty(
     39    "#testid",
     40    null,
     41    "padding-top",
     42    newPaddingValue
     43  );
     44  const onRefreshAfterPreview = once(view, "ruleview-changed");
     45 
     46  info("Entering a new value");
     47  EventUtils.sendString(newPaddingValue, view.styleWindow);
     48 
     49  info(
     50    "Waiting for the debounced previewValue to apply the " +
     51      "changes to document"
     52  );
     53 
     54  view.debounce.flush();
     55  await onPropertyChange;
     56 
     57  info("Waiting for ruleview-refreshed after previewValue was applied.");
     58  await onRefreshAfterPreview;
     59 
     60  const onBlur = once(editor.input, "blur");
     61 
     62  info("Entering the commit key and finishing edit");
     63  EventUtils.synthesizeKey("KEY_Enter");
     64 
     65  info("Waiting for blur on the field");
     66  await onBlur;
     67 
     68  info("Waiting for the style changes to be applied");
     69  await once(view, "ruleview-changed");
     70 
     71  const computed = prop.computed;
     72  const propNames = [
     73    "padding-top",
     74    "padding-right",
     75    "padding-bottom",
     76    "padding-left",
     77  ];
     78 
     79  is(computed.length, propNames.length, "There should be 4 computed values");
     80  propNames.forEach((propName, i) => {
     81    is(
     82      computed[i].name,
     83      propName,
     84      "Computed property #" + i + " has name " + propName
     85    );
     86    is(
     87      computed[i].value,
     88      newPaddingValue,
     89      "Computed value of " + propName + " is as expected"
     90    );
     91  });
     92 
     93  propEditor.expander.click();
     94  const computedDom = propEditor.computed;
     95  is(
     96    computedDom.children.length,
     97    propNames.length,
     98    "There should be 4 nodes in the DOM"
     99  );
    100  propNames.forEach((propName, i) => {
    101    is(
    102      computedDom.getElementsByClassName("ruleview-propertyvalue")[i]
    103        .textContent,
    104      newPaddingValue,
    105      "Computed value of " + propName + " in DOM is as expected"
    106    );
    107  });
    108 }