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/computed/test/browser_computed_custom_properties.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/computed/test/browser_computed_custom_properties.js | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/devtools/client/inspector/computed/test/browser_computed_custom_properties.js b/devtools/client/inspector/computed/test/browser_computed_custom_properties.js new file mode 100644 index 0000000000..230bffa726 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_custom_properties.js @@ -0,0 +1,106 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that custom properties are displayed in the computed view. + +const TEST_URI = ` + <style type="text/css"> + body { + --global-custom-property: red; + } + + h1 { + color: var(--global-custom-property); + } + + #match-1 { + --global-custom-property: blue; + --custom-property-1: lime; + } + #match-2 { + --global-custom-property: gold; + --custom-property-2: cyan; + } + </style> + <h1 id="match-1">Hello</h1> + <h1 id="match-2">World</h1> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + + await assertComputedPropertiesForNode(inspector, view, "body", [ + { + name: "--global-custom-property", + value: "red", + }, + ]); + + await assertComputedPropertiesForNode(inspector, view, "#match-1", [ + { + name: "color", + value: "rgb(0, 0, 255)", + }, + { + name: "--custom-property-1", + value: "lime", + }, + { + name: "--global-custom-property", + value: "blue", + }, + ]); + + await assertComputedPropertiesForNode(inspector, view, "#match-2", [ + { + name: "color", + value: "rgb(255, 215, 0)", + }, + { + name: "--custom-property-2", + value: "cyan", + }, + { + name: "--global-custom-property", + value: "gold", + }, + ]); + + await assertComputedPropertiesForNode(inspector, view, "html", []); +}); + +async function assertComputedPropertiesForNode( + inspector, + view, + selector, + expected +) { + await selectNode(selector, inspector); + + const computedItems = getComputedViewProperties(view); + is( + computedItems.length, + expected.length, + `Computed view has the expected number of items for "${selector}"` + ); + for (let i = 0; i < computedItems.length; i++) { + const expectedData = expected[i]; + const computedEl = computedItems[i]; + const nameSpan = computedEl.querySelector(".computed-property-name"); + const valueSpan = computedEl.querySelector(".computed-property-value"); + + is( + nameSpan.firstChild.textContent, + expectedData.name, + `computed item #${i} for "${selector}" is the expected one` + ); + is( + valueSpan.textContent, + expectedData.value, + `computed item #${i} for "${selector}" has expected value` + ); + } +} |