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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that pseudo elements have no side effect on the box model widget for their
// container. See bug 1350499.
const TEST_URI = `<style>
.test::before {
content: 'before';
margin-top: 5px;
padding-top: 5px;
width: 5px;
}
</style>
<div style='width:200px;'>
<div class=test></div>
</div>`;
add_task(async function () {
const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
const { inspector, boxmodel } = await openLayoutView();
const browser = tab.linkedBrowser;
await selectNode(".test", inspector);
// No margin-top defined.
info("Test that margins are not impacted by a pseudo element");
is(
await getStyle(browser, ".test", "margin-top"),
"",
"margin-top is correct"
);
await checkValueInBoxModel(
".boxmodel-margin.boxmodel-top",
"0",
boxmodel.document
);
// No padding-top defined.
info("Test that paddings are not impacted by a pseudo element");
is(
await getStyle(browser, ".test", "padding-top"),
"",
"padding-top is correct"
);
await checkValueInBoxModel(
".boxmodel-padding.boxmodel-top",
"0",
boxmodel.document
);
// Width should be driven by the parent div.
info("Test that dimensions are not impacted by a pseudo element");
is(await getStyle(browser, ".test", "width"), "", "width is correct");
await checkValueInBoxModel(
".boxmodel-content.boxmodel-width",
"200",
boxmodel.document
);
});
async function checkValueInBoxModel(selector, expectedValue, doc) {
const span = doc.querySelector(selector + " > span");
await waitForElementTextContent(span, expectedValue);
EventUtils.synthesizeMouseAtCenter(span, {}, doc.defaultView);
const editor = doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, expectedValue, "Should have the right value in the editor.");
const onBlur = once(editor, "blur");
EventUtils.synthesizeKey("VK_RETURN", {}, doc.defaultView);
await onBlur;
}
|
