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
|
<!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";
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);
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);
});
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>
|
