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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
/* 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 a pseudo-element.
const TEST_URI = `
<style type='text/css'>
div {
box-sizing: border-box;
display: block;
float: left;
line-height: 20px;
position: relative;
z-index: 2;
height: 100px;
width: 100px;
border: 10px solid black;
padding: 20px;
margin: 30px auto;
}
div::before {
content: 'before';
display: block;
width: 32px;
height: 32px;
margin: 0 auto 6px;
}
</style>
<div>Test Node</div>
`;
// Expected values:
const res1 = [
{
selector: ".boxmodel-element-size",
value: "32" + "\u00D7" + "32",
},
{
selector: ".boxmodel-size > .boxmodel-width",
value: "32",
},
{
selector: ".boxmodel-size > .boxmodel-height",
value: "32",
},
{
selector: ".boxmodel-margin.boxmodel-top > span",
value: "0",
},
{
selector: ".boxmodel-margin.boxmodel-left > span",
value: "4", // (100 - (10 * 2) - (20 * 2) - 32) / 2
},
{
selector: ".boxmodel-margin.boxmodel-bottom > span",
value: "6",
},
{
selector: ".boxmodel-margin.boxmodel-right > span",
value: "4", // (100 - (10 * 2) - (20 * 2) - 32) / 2
},
{
selector: ".boxmodel-padding.boxmodel-top > span",
value: "0",
},
{
selector: ".boxmodel-padding.boxmodel-left > span",
value: "0",
},
{
selector: ".boxmodel-padding.boxmodel-bottom > span",
value: "0",
},
{
selector: ".boxmodel-padding.boxmodel-right > span",
value: "0",
},
{
selector: ".boxmodel-border.boxmodel-top > span",
value: "0",
},
{
selector: ".boxmodel-border.boxmodel-left > span",
value: "0",
},
{
selector: ".boxmodel-border.boxmodel-bottom > span",
value: "0",
},
{
selector: ".boxmodel-border.boxmodel-right > span",
value: "0",
},
];
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, boxmodel } = await openLayoutView();
const node = await getNodeFront("div", inspector);
const children = await inspector.markup.walker.children(node);
const beforeElement = children.nodes[0];
await selectNode(beforeElement, inspector);
await testInitialValues(inspector, boxmodel);
});
function testInitialValues(inspector, boxmodel) {
info("Test that the initial values of the box model are correct");
const doc = boxmodel.document;
for (let i = 0; i < res1.length; i++) {
const elt = doc.querySelector(res1[i].selector);
is(
elt.textContent,
res1[i].value,
res1[i].selector + " has the right value."
);
}
}
|
