nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1898249 - [devtools] Add output parser tests for relative color syntax. r=devtools-reviewers,bomsy.

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D211330
This commit is contained in:
Nicolas Chevobbe 2024-05-24 10:53:04 +00:00
parent 869f6f9bc2
commit 0e7ecf590e
1 changed files with 56 additions and 0 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

56
devtools/client/shared/test/browser_outputparser.js
View file

@ -14,6 +14,7 @@ async function performTest() {
await SpecialPowers.pushPrefEnv({
set: [["security.allow_unsafe_parent_loads", true]],
});
await pushPref("layout.css.relative-color-syntax.enabled", true);
const OutputParser = require("resource://devtools/client/shared/output-parser.js");
@ -254,6 +255,42 @@ function testParseCssProperty(doc, parser) {
")",
]
),
makeColorTest("color", "rgb(from gold r g b)", [
{ name: "rgb(from gold r g b)" },
]),
makeColorTest("color", "color(from hsl(0 100% 50%) xyz x y 0.5)", [
{ name: "color(from hsl(0 100% 50%) xyz x y 0.5)" },
]),
makeColorTest(
"color",
"oklab(from red calc(l - 1) calc(a * 2) calc(b + 3) / alpha)",
[{ name: "oklab(from red calc(l - 1) calc(a * 2) calc(b + 3) / alpha)" }]
),
makeColorTest(
"color",
"rgb(from color-mix(in lch, plum 40%, pink) r g b)",
[{ name: "rgb(from color-mix(in lch, plum 40%, pink) r g b)" }]
),
makeColorTest("color", "rgb(from rgb(from gold r g b) r g b)", [
{ name: "rgb(from rgb(from gold r g b) r g b)" },
]),
makeColorTest(
"background-image",
"linear-gradient(to right, #F60 10%, rgb(from gold r g b))",
[
"linear-gradient(to right, ",
{ name: "#F60", colorFunction: "linear-gradient" },
" 10%, ",
{ name: "rgb(from gold r g b)", colorFunction: "linear-gradient" },
")",
]
),
];
const target = doc.querySelector("div");
@ -685,6 +722,25 @@ function testParseVariable(doc, parser) {
")</span>" +
"</span>",
},
{
text: "rgba(from var(--base) r g 0 / calc(var(--a) * 0.5))",
variables: { "--base": "red", "--a": "0.8" },
expected:
// prettier-ignore
'<span data-color="rgba(from red r g 0 / calc(0.8 * 0.5))">' +
"<span>rgba("+
"from " +
"<span>" +
'var(<span data-variable="--base = red">--base</span>)' +
"</span> r g 0 / " +
"calc(" +
"<span>" +
'var(<span data-variable="--a = 0.8">--a</span>)' +
"</span>" +
" * 0.5)" +
")</span>" +
"</span>",
},
{
text: "rgb(var(--not-seen, 255), 0, 0)",
variables: {},