author Jan de Mooij <>
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:

<!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

  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>
// 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.

  // Could avoid testing only the ones that have percentages.





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

function testValue(prop, value) {, value);
  const computed = getComputedStyle(outer).getPropertyValue(prop);
    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)
  if (kWhitelist.includes(prop))
    return;, "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]);;

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