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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the box model displays the right values for the offset parent and that it
// updates when the node's style is changed
const TEST_URI = `
<div id="relative_parent" style="position: relative">
<div id="absolute_child" style="position: absolute"></div>
</div>
<div id="static"></div>
<div id="no_parent" style="position: absolute"></div>
<div id="fixed" style="position: fixed"></div>
`;
const OFFSET_PARENT_SELECTOR =
".computed-property-value-container .objectBox-node";
const res1 = [
{
selector: "#absolute_child",
offsetParentValue: "div#relative_parent",
},
{
selector: "#no_parent",
offsetParentValue: "body",
},
{
selector: "#relative_parent",
offsetParentValue: "body",
},
{
selector: "#static",
offsetParentValue: null,
},
{
selector: "#fixed",
offsetParentValue: null,
},
];
const updates = [
{
selector: "#absolute_child",
update: "position: static",
},
];
const res2 = [
{
selector: "#absolute_child",
offsetParentValue: null,
},
];
add_task(async function () {
await addTab("data:text/html," + encodeURIComponent(TEST_URI));
const { inspector, boxmodel } = await openLayoutView();
await testInitialValues(inspector, boxmodel);
await testChangingValues(inspector, boxmodel);
});
async function testInitialValues(inspector, boxmodel) {
info(
"Test that the initial values of the box model offset parent are correct"
);
const viewdoc = boxmodel.document;
for (const { selector, offsetParentValue } of res1) {
await selectNode(selector, inspector);
const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
is(
elt && elt.textContent,
offsetParentValue,
selector + " has the right value."
);
}
}
async function testChangingValues(inspector, boxmodel) {
info("Test that changing the document updates the box model");
const viewdoc = boxmodel.document;
for (const { selector, update } of updates) {
const onUpdated = waitForUpdate(inspector);
await setContentPageElementAttribute(selector, "style", update);
await onUpdated;
}
for (const { selector, offsetParentValue } of res2) {
await selectNode(selector, inspector);
const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
is(
elt && elt.textContent,
offsetParentValue,
selector + " has the right value after style update."
);
}
}
|
