Source code

Revision control

Other Tools

Test Info:

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