layout/style/test/test_computed_style_difference.html
author Jan de Mooij <jdemooij@mozilla.com>
Mon, 27 Sep 2021 11:15:49 +0000
changeset 593265 5144ad09cfb7011b98c5422b78b82936b1343541
parent 474362 159848724347565e9f92d8049d2a847e754faed6
permissions -rw-r--r--
Bug 1732281 part 2 - Transpile ValueToIteratorResult in Warp. r=iain Depends on D126514 Differential Revision: https://phabricator.services.mozilla.com/D126515

<!doctype html>
<title>Test that the difference of the computed style of an element is always correctly propagated</title>
<!--
  There are CSS property changes that don't have an effect in computed style.

  It's relatively easy to return `nsChangeHint(0)` for the case where the
  property changes but it should have no rendering difference.

  That's however incorrect, since if it's an inherited property, or a
  descendant explicitly inherits it, we should still propagate the change
  downwards.

  This test tests that computed style diffing is correct.
-->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="property_database.js"></script>
<div id="outer">
  <div id="inner"></div>
</div>
<script>
// We need to skip checking for properties for which the value returned by
// getComputedStyle depends on the parent.
//
// TODO(emilio): We could test a subset of these, see below.
const kWhitelist = [
  // Could test display values that don't force blockification of children.
  "display",

  // Could avoid testing only the ones that have percentages.
  "transform",
  "transform-origin",
  "perspective-origin",

  "padding-bottom",
  "padding-left",
  "padding-right",
  "padding-top",
  "padding-inline-end",
  "padding-inline-start",
  "padding-block-end",
  "padding-block-start",

  "margin-bottom",
  "margin-left",
  "margin-right",
  "margin-top",
  "margin-inline-end",
  "margin-inline-start",
  "margin-block-end",
  "margin-block-start",

  "width",
  "height",
  "block-size",
  "inline-size",

  "min-height",
  "min-width",
  "min-block-size",
  "min-inline-size",
];

const outer = document.getElementById("outer");
const inner = document.getElementById("inner");

function testValue(prop, value) {
  outer.style.setProperty(prop, value);
  const computed = getComputedStyle(outer).getPropertyValue(prop);
  assert_equals(
    getComputedStyle(inner).getPropertyValue(prop), computed,
    "Didn't handle the inherited change correctly?"
  )
}

// Note that we intentionally ignore the "prerequisites" here, since that's
// the most likely place where the diffing could potentially go wrong.
function testProperty(prop, info) {
  // We only care about longhands, changing shorthands is not that interesting,
  // since we're interested of changing as little as possible, and changing
  // them would be equivalent to changing all the longhands at the same time.
  if (info.type !== CSS_TYPE_LONGHAND)
    return;
  if (kWhitelist.includes(prop))
    return;

  inner.style.setProperty(prop, "inherit");
  for (const v of info.initial_values)
    testValue(prop, v);
  for (const v of info.other_values)
    testValue(prop, v);
  // Test again the first value so that we test changing to it, not just from
  // it.
  //
  // TODO(emilio): We could test every value against every-value if we wanted,
  // might be worth it.
  testValue(prop, info.initial_values[0]);

  inner.style.removeProperty(prop);
}

for (let prop in gCSSProperties)
  test(() => testProperty(prop, gCSSProperties[prop]), "Diffing for " + prop);
</script>