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
|
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test - Add fix for incompatible property
// For properties like "user-select", there exists an alias
// "-webkit-user-select", that is supported on all platform
// as a result of its popularity. If such a universally
// compatible alias exists, we shouldn't show compatibility
// warning for the base declaration.
// In this case "user-select" is marked compatible because the
// universally compatible alias "-webkit-user-select" exists
// alongside.
const TARGET_BROWSERS = [
{
// Chrome doesn't need any prefix for both user-select and text-size-adjust.
id: "chrome",
status: "current",
},
{
// The safari_ios needs -webkit prefix for both properties.
id: "safari_ios",
status: "current",
},
];
const TEST_URI = `
<style>
div {
color: green;
background-color: black;
user-select: none;
text-size-adjust: none;
}
</style>
<div>`;
const TEST_DATA_INITIAL = [
{
rules: [
{},
{
color: { value: "green" },
"background-color": { value: "black" },
"user-select": {
value: "none",
expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
},
"text-size-adjust": {
value: "none",
expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
},
},
],
},
];
const TEST_DATA_FIX_USER_SELECT = [
{
rules: [
{},
{
color: { value: "green" },
"background-color": { value: "black" },
"user-select": { value: "none" },
"-webkit-user-select": { value: "none" },
"text-size-adjust": {
value: "none",
expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
},
},
],
},
];
// text-size-adjust is an experimental property with aliases.
// Adding -webkit makes it compatible on all platforms but will
// still show an inline warning for its experimental status.
const TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED = [
{
rules: [
{},
{
color: { value: "green" },
"background-color": { value: "black" },
"user-select": { value: "none" },
"-webkit-user-select": { value: "none" },
"text-size-adjust": {
value: "none",
expected: COMPATIBILITY_TOOLTIP_MESSAGE["experimental-supported"],
},
},
],
},
];
add_task(async function () {
await pushPref(
"devtools.inspector.compatibility.target-browsers",
JSON.stringify(TARGET_BROWSERS)
);
await pushPref(
"devtools.inspector.ruleview.inline-compatibility-warning.enabled",
true
);
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
// We're only looking for properties on this single node so select it here instead of
// passing `selector` to `runCSSCompatibilityTests` (otherwise addition requests are sent
// to the server and we may end up with pending promises when the toolbox closes).
await selectNode("div", inspector);
await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
info(
'Add -webkit-user-select: "none" which solves the compatibility issue from user-select'
);
await addProperty(view, 1, "-webkit-user-select", "none");
await runCSSCompatibilityTests(view, inspector, TEST_DATA_FIX_USER_SELECT);
info(
'Add -webkit-text-size-adjust: "none" fixing issue but leaving an inline warning of an experimental property'
);
await addProperty(view, 1, "-webkit-text-size-adjust", "none");
await runCSSCompatibilityTests(
view,
inspector,
TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED
);
});
|
