1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
<!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>
|
