diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js new file mode 100644 index 0000000000..57ca54eae0 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js @@ -0,0 +1,166 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the rule view marks overridden rules correctly when using layers + +const HTML = ` + <style type='text/css'> + @layer A, B; + + h1 { + background-color: red; + color: tomato !important; + } + + @layer A { + h1 { + background-color: green; + color: darkseagreen !important; + color: lime !important; + color: forestgreen; + } + } + @layer B { + h1 { + background-color: cyan; + color: blue !important; + } + } + + @layer { + h2 { + color: red !important; + } + } + @layer { + h2 { + color: blue !important; + } + } + + @layer { + @layer A { + h3 { + color: red !important; + } + } + + @layer A { + h3 { + color: lime !important; + } + } + } + + @layer { + @layer A { + h3 { + color: blue !important; + } + } + } + </style> + <h1>Hello</h1> + <h2>world</h2> + <h3>!</h3> +`; + +add_task(async function () { + await addTab( + `https://example.com/document-builder.sjs?html=${encodeURIComponent(HTML)}` + ); + const { inspector, view } = await openRuleView(); + await selectNode("h1", inspector); + + info("Check background-color properties"); + is( + await getComputedStyleProperty("h1", null, "background-color"), + "rgb(255, 0, 0)", + "The h1 element has a red background-color, as the value in the layer-less rule wins" + ); + ok( + !isPropertyOverridden(view, 1, { "background-color": "red" }), + "background-color value in layer-less rule is not overridden" + ); + ok( + isPropertyOverridden(view, 2, { "background-color": "cyan" }), + "background-color value in layer B rule is overridden" + ); + ok( + isPropertyOverridden(view, 3, { "background-color": "green" }), + "background-color value in layer A rule is overridden" + ); + + info("Check (!important) color properties"); + is( + await getComputedStyleProperty("h1", null, "color"), + "rgb(0, 255, 0)", + "The h1 element has a lime color, as the last important value in the first declared layer wins" + ); + ok( + isPropertyOverridden(view, 1, { color: "tomato" }), + "important color value in layer-less rule is overridden" + ); + ok( + isPropertyOverridden(view, 2, { color: "blue" }), + "important color value in layer B rule is overridden" + ); + ok( + isPropertyOverridden(view, 3, { color: "darkseagreen" }), + "first important color value in layer A rule is overridden" + ); + ok( + !isPropertyOverridden(view, 3, { color: "lime" }), + "important color value in layer A rule is not overridden" + ); + ok( + isPropertyOverridden(view, 3, { color: "forestgreen" }), + "last, non-important color value in layer A rule is overridden" + ); + + info("Check (!important) color properties on nameless layers"); + await selectNode("h2", inspector); + is( + await getComputedStyleProperty("h2", null, "color"), + "rgb(255, 0, 0)", + "The h2 element has a blue color, as important value in the first nameless layer wins" + ); + ok( + isPropertyOverridden(view, 1, { color: "blue" }), + "important color value in second layer-less rule is overridden" + ); + ok( + !isPropertyOverridden(view, 2, { color: "red" }), + "important color value in first layer-less rule is not overridden" + ); + + info("Check (!important) color properties on nested layer in nameless layer"); + await selectNode("h3", inspector); + is( + await getComputedStyleProperty("h3", null, "color"), + "rgb(0, 255, 0)", + "The h3 element has a lime color, as important value in the last rule of the first declared nameless layer wins" + ); + ok( + isPropertyOverridden(view, 1, { color: "blue" }), + "important color value in second layer-less rule is overridden" + ); + ok( + !isPropertyOverridden(view, 2, { color: "lime" }), + "important color value in second rule of layer-less rule is not overridden" + ); + ok( + isPropertyOverridden(view, 3, { color: "red" }), + "important color value in first rule of layer-less rule is overridden" + ); +}); + +function isPropertyOverridden(view, ruleIndex, property) { + return getTextProperty( + view, + ruleIndex, + property + ).editor.element.classList.contains("ruleview-overridden"); +} |