browser_rules_edit-property-computed.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that the computed values of a style (the shorthand expansion) are

// properly updated after the style is changed.

const TEST_URI = `

  <style type="text/css">

    #testid {

      padding: 10px;

  </style>

  <div id="testid">Styled Node</div>

`;

add_task(async function () {

  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

  const { inspector, view } = await openRuleView();

  await selectNode("#testid", inspector);

  await editAndCheck(view);

});

async function editAndCheck(view) {

  const prop = getTextProperty(view, 1, { padding: "10px" });

  const propEditor = prop.editor;

  const newPaddingValue = "20px";

  info("Focusing the inplace editor field");

  const editor = await focusEditableField(view, propEditor.valueSpan);

is(

    inplaceEditor(propEditor.valueSpan),

    editor,

    "Focused editor should be the value span."

);

  const onPropertyChange = waitForComputedStyleProperty(

    "#testid",

    null,

    "padding-top",

    newPaddingValue

);

  const onRefreshAfterPreview = once(view, "ruleview-changed");

  info("Entering a new value");

  EventUtils.sendString(newPaddingValue, view.styleWindow);

  info(

    "Waiting for the debounced previewValue to apply the " +

      "changes to document"

);

  view.debounce.flush();

  await onPropertyChange;

  info("Waiting for ruleview-refreshed after previewValue was applied.");

  await onRefreshAfterPreview;

  const onBlur = once(editor.input, "blur");

  info("Entering the commit key and finishing edit");

  EventUtils.synthesizeKey("KEY_Enter");

  info("Waiting for blur on the field");

  await onBlur;

  info("Waiting for the style changes to be applied");

  await once(view, "ruleview-changed");

  const computed = prop.computed;

  const propNames = [

    "padding-top",

    "padding-right",

    "padding-bottom",

    "padding-left",

];

  is(computed.length, propNames.length, "There should be 4 computed values");

  propNames.forEach((propName, i) => {

is(

      computed[i].name,

      propName,

      "Computed property #" + i + " has name " + propName

);

is(

      computed[i].value,

      newPaddingValue,

      "Computed value of " + propName + " is as expected"

);

});

  propEditor.expander.click();

  const computedDom = propEditor.computed;

is(

    computedDom.children.length,

    propNames.length,

    "There should be 4 nodes in the DOM"

);

  propNames.forEach((propName, i) => {

is(

      computedDom.getElementsByClassName("ruleview-propertyvalue")[i]

        .textContent,

      newPaddingValue,

      "Computed value of " + propName + " in DOM is as expected"

);

});