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
123
124
125
126
127
128
129
130
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test for InactivePropertyHelper</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
<script type="application/javascript">
"use strict";
SimpleTest.waitForExplicitFinish();
(async function() {
const { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs");
const { isPropertyUsed } = require("devtools/server/actors/utils/inactive-property-helper");
const INACTIVE_CSS_PREF = "devtools.inspector.inactive.css.enabled";
const CUSTOM_HIGHLIGHT_API = "dom.customHighlightAPI.enabled";
const TEXT_WRAP_BALANCE = "layout.css.text-wrap-balance.enabled";
const ALIGN_CONTENT_BLOCKS = "layout.css.align-content.blocks.enabled";
const TEXT_FRAGMENTS = "dom.text_fragments.enabled";
Services.prefs.setBoolPref(INACTIVE_CSS_PREF, true);
Services.prefs.setBoolPref(CUSTOM_HIGHLIGHT_API, true);
Services.prefs.setBoolPref(TEXT_WRAP_BALANCE, true);
Services.prefs.setBoolPref(ALIGN_CONTENT_BLOCKS, true);
Services.prefs.setBoolPref(TEXT_FRAGMENTS, true);
SimpleTest.registerCleanupFunction(() => {
Services.prefs.clearUserPref(INACTIVE_CSS_PREF);
Services.prefs.clearUserPref(CUSTOM_HIGHLIGHT_API);
Services.prefs.clearUserPref(TEXT_WRAP_BALANCE);
Services.prefs.clearUserPref(ALIGN_CONTENT_BLOCKS);
Services.prefs.clearUserPref(TEXT_FRAGMENTS);
});
const FOLDER = "./inactive-property-helper";
// Each file should `export default` an array of objects, representing each test case.
// A single test case is an object of the following shape:
// - {String} info: a summary of the test case
// - {String} property: the CSS property that should be tested
// - {String|undefined} tagName: the tagName of the element we're going to test.
// Optional only if there's a createTestElement property.
// - {Function|undefined} createTestElement: A function that takes a node as a parameter
// where elements used for the test case will
// be appended. The function should return the
// element that will be passed to
// isPropertyUsed.
// Optional only if there's a tagName property
// - {Array<String>} rules: An array of the rules that will be applied on the element.
// This can't be empty as isPropertyUsed need a rule.
// - {Integer|undefined} ruleIndex: If there are multiples rules in `rules`, the index
// of the one that should be tested in isPropertyUsed.
// - {Boolean} isActive: should the property be active (isPropertyUsed `used` result).
const testFiles = [
"align-content.mjs",
"border-image.mjs",
"cue-pseudo-element.mjs",
"first-letter-pseudo-element.mjs",
"first-line-pseudo-element.mjs",
"flex-grid-item-properties.mjs",
"float.mjs",
"gap.mjs",
"grid-container-properties.mjs",
"grid-with-absolute-properties.mjs",
"multicol-container-properties.mjs",
"highlight-pseudo-elements.mjs",
"margin-padding.mjs",
"max-min-width-height.mjs",
"place-items-content.mjs",
"placeholder-pseudo-element.mjs",
"positioned.mjs",
"scroll-padding.mjs",
"vertical-align.mjs",
"table.mjs",
"table-cell.mjs",
"text-overflow.mjs",
"text-wrap.mjs",
"width-height-ruby.mjs",
].map(file => `${FOLDER}/${file}`);
// Import all the test cases
const tests =
(await Promise.all(testFiles.map(f => import(f).then(data => data.default)))).flat();
for (const {
info: summary,
property,
tagName,
createTestElement,
rules,
ruleIndex,
isActive,
expectedMsgId,
} of tests) {
// Create an element which will contain the test elements.
const main = document.createElement("main");
document.firstElementChild.appendChild(main);
// Apply the CSS rules to the document.
const style = document.createElement("style");
main.append(style);
for (const dataRule of rules) {
style.sheet.insertRule(dataRule);
}
const rule = style.sheet.cssRules[ruleIndex || 0];
// Create the test elements
let el;
if (createTestElement) {
el = createTestElement(main);
} else {
el = document.createElement(tagName);
main.append(el);
}
const { used, msgId } = isPropertyUsed(el, getComputedStyle(el), rule, property);
ok(used === isActive, summary);
if (expectedMsgId) {
is(msgId, expectedMsgId, `${summary} - returned expected msgId`);
}
main.remove();
}
SimpleTest.finish();
})();
</script>
</head>
<body></body>
</html>
|
