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
131
132
133
134
135
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view content displays @import conditions.
const TEST_URI = `
<style type="text/css">
@import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) screen and (width > 10px);
@import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer) (height > 42px);
@import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex);
@import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex) screen and (width > 10px);
@import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayerTwo) supports(display: flex) screen and (width > 10px);
@import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
</style>
<h1>Hello @import!</h1>
`;
add_task(async function () {
// Enable the pref for @import supports()
await pushPref("layout.css.import-supports.enabled", true);
await addTab(
"https://example.com/document-builder.sjs?html=" +
encodeURIComponent(TEST_URI)
);
const { inspector, view } = await openRuleView();
await selectNode("h1", inspector);
const expectedRules = [
{ selector: "element", ancestorRulesData: null },
{
// Checking that we don't show @import for rules from imported stylesheet with no conditions
selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`,
ancestorRulesData: null,
},
{
selector: `h1, [test-hint="imported-conditional"]`,
ancestorRulesData: [
"@import supports(display: flex) screen and (width > 10px) {",
],
},
{
selector: `h1, [test-hint="imported-conditional"]`,
ancestorRulesData: ["@import supports(display: flex) {"],
},
{
selector: `h1, [test-hint="imported-conditional"]`,
ancestorRulesData: ["@import screen and (width > 10px) {"],
},
{
selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
ancestorRulesData: [
"@import supports(display: flex) screen and (width > 10px) {",
" @layer importedLayerTwo {",
" @media screen {",
],
},
{
selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
ancestorRulesData: [
"@import supports(display: flex) screen and (width > 10px) {",
" @layer importedLayerTwo {",
" @media screen {",
" @layer in-imported-stylesheet {",
],
},
{
selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`,
ancestorRulesData: [
"@import supports(display: flex) screen and (width > 10px) {",
" @layer importedLayerTwo {",
" @layer importedNestedLayer {",
" @layer in-imported-nested-stylesheet {",
],
},
{
selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
ancestorRulesData: [
"@import (height > 42px) {",
" @layer importedLayer {",
" @media screen {",
],
},
{
selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
ancestorRulesData: [
"@import (height > 42px) {",
" @layer importedLayer {",
" @media screen {",
" @layer in-imported-stylesheet {",
],
},
{
selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`,
ancestorRulesData: [
"@import (height > 42px) {",
" @layer importedLayer {",
" @layer importedNestedLayer {",
" @layer in-imported-nested-stylesheet {",
],
},
];
const rulesInView = Array.from(view.element.children);
is(
rulesInView.length,
expectedRules.length,
"All expected rules are displayed"
);
for (let i = 0; i < expectedRules.length; i++) {
const expectedRule = expectedRules[i];
info(`Checking rule #${i}: ${expectedRule.selector}`);
const selector = rulesInView[i].querySelector(
".ruleview-selectors-container"
).innerText;
is(selector, expectedRule.selector, `Expected selector for ${selector}`);
if (expectedRule.ancestorRulesData == null) {
is(
getRuleViewAncestorRulesDataElementByIndex(view, i),
null,
`No ancestor rules data displayed for ${selector}`
);
} else {
is(
getRuleViewAncestorRulesDataTextByIndex(view, i),
expectedRule.ancestorRulesData.join("\n"),
`Expected ancestor rules data displayed for ${selector}`
);
}
}
});
|
