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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view computed lists can be expanded/collapsed,
// and contain the right subproperties.
var TEST_URI = `
<style type="text/css">
#testid {
margin: 0px 1px 2px 3px;
top: 0px;
}
</style>
<h1 id="testid">Styled Node</h1>
`;
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 testComputedList(inspector, view);
});
function testComputedList(inspector, view) {
const prop = getTextProperty(view, 1, { margin: "0px 1px 2px 3px" });
const propEditor = prop.editor;
const expander = propEditor.expander;
ok(!expander.hasAttribute("open"), "margin computed list is closed");
info("Opening the computed list of margin property");
expander.click();
ok(expander.hasAttribute("open"), "margin computed list is open");
const computed = propEditor.prop.computed;
const computedDom = propEditor.computed;
const propNames = [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
];
is(computed.length, propNames.length, "There should be 4 computed values");
is(
computedDom.children.length,
propNames.length,
"There should be 4 nodes in the DOM"
);
propNames.forEach((propName, i) => {
const propValue = i + "px";
is(
computed[i].name,
propName,
"Computed property #" + i + " has name " + propName
);
is(
computed[i].value,
propValue,
"Computed property #" + i + " has value " + propValue
);
is(
computedDom.querySelectorAll(".ruleview-propertyname")[i].textContent,
propName,
"Computed property #" + i + " in DOM has correct name"
);
is(
computedDom.querySelectorAll(".ruleview-propertyvalue")[i].textContent,
propValue,
"Computed property #" + i + " in DOM has correct value"
);
});
info("Closing the computed list of margin property");
expander.click();
ok(!expander.hasAttribute("open"), "margin computed list is closed");
info("Opening the computed list of margin property");
expander.click();
ok(expander.hasAttribute("open"), "margin computed list is open");
is(computed.length, propNames.length, "Still 4 computed values");
is(computedDom.children.length, propNames.length, "Still 4 nodes in the DOM");
}
|
