summaryrefslogtreecommitdiffstats
path: root/devtools/client/styleeditor/test
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
commitd8bbc7858622b6d9c278469aab701ca0b609cddf (patch)
treeeff41dc61d9f714852212739e6b3738b82a2af87 /devtools/client/styleeditor/test
parentReleasing progress-linux version 125.0.3-1~progress7.99u1. (diff)
downloadfirefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.tar.xz
firefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.zip
Merging upstream version 126.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/styleeditor/test')
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js30
-rw-r--r--devtools/client/styleeditor/test/media-rules.html7
2 files changed, 31 insertions, 6 deletions
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js b/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js
index a0a9bc93fd..d106d6780e 100644
--- a/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js
@@ -39,6 +39,8 @@ waitForExplicitFinish();
add_task(async function () {
await pushPref("layout.css.container-queries.enabled", true);
+ // Enable @property rules
+ await pushPref("layout.css.properties-and-values.enabled", true);
const { ui } = await openStyleEditorForURL(TESTCASE_URI);
@@ -88,7 +90,7 @@ async function testInlineMediaEditor(ui, editor) {
is(sidebar.hidden, false, "sidebar is showing on editor with @media");
const entries = sidebar.querySelectorAll(".at-rule-label");
- is(entries.length, 6, "6 @media rules displayed in sidebar");
+ is(entries.length, 7, "7 at-rules displayed in sidebar");
await testRule({
ui,
@@ -123,7 +125,6 @@ async function testInlineMediaEditor(ui, editor) {
ui,
editor,
rule: entries[3],
- conditionText: "",
line: 16,
type: "layer",
layerName: "myLayer",
@@ -146,6 +147,15 @@ async function testInlineMediaEditor(ui, editor) {
line: 21,
type: "support",
});
+
+ await testRule({
+ ui,
+ editor,
+ rule: entries[6],
+ line: 30,
+ type: "property",
+ propertyName: "--my-property",
+ });
}
async function testMediaEditor(ui, editor) {
@@ -273,27 +283,35 @@ async function testMediaRuleAdded(ui, editor) {
* @param {StyleEditorUI} options.ui
* @param {StyleSheetEditor} options.editor: The editor the rule is displayed in
* @param {Element} options.rule: The rule element in the media sidebar
- * @param {String} options.conditionText: media query condition text
+ * @param {String} options.conditionText: at-rule condition text (for @media, @container, @support)
* @param {Boolean} options.matches: Whether or not the document matches the rule
* @param {String} options.layerName: Optional name of the @layer
+ * @param {String} options.propertyName: Name of the @property if type is "property"
* @param {Number} options.line: Line of the rule
- * @param {String} options.type: The type of the rule (container, layer, media, support ).
+ * @param {String} options.type: The type of the rule (container, layer, media, support, property ).
* Defaults to "media".
*/
async function testRule({
ui,
editor,
rule,
- conditionText,
+ conditionText = "",
matches,
layerName,
+ propertyName,
line,
type = "media",
}) {
const atTypeEl = rule.querySelector(".at-rule-type");
+ let name;
+ if (type === "layer") {
+ name = layerName;
+ } else if (type === "property") {
+ name = propertyName;
+ }
is(
atTypeEl.textContent,
- `@${type}\u00A0${layerName ? `${layerName}\u00A0` : ""}`,
+ `@${type}\u00A0${name ? `${name}\u00A0` : ""}`,
"label for at-rule type is correct"
);
diff --git a/devtools/client/styleeditor/test/media-rules.html b/devtools/client/styleeditor/test/media-rules.html
index 76725bfb54..b74d97f6b2 100644
--- a/devtools/client/styleeditor/test/media-rules.html
+++ b/devtools/client/styleeditor/test/media-rules.html
@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="simple.css"/>
<link rel="stylesheet" href="media-rules.css"/>
<!-- This stylesheet is needed to ensure we cover the fix for Bug 1779043 -->
@@ -38,6 +39,12 @@
}
}
}
+
+ @property --my-property {
+ syntax: "<color>";
+ inherits: true;
+ initial-value: #f06;
+ }
</style>
</head>
<body>