Files
sousa-gecko/devtools/client/inspector/rules/test/doc_variables_1.html
T
Nicolas Chevobbe c18b0bc3e5 Bug 1912285 - [devtools] Display empty computed value in var tooltip. r=devtools-reviewers,jdescottes.
The #createNode function wasn't adding attribute if they
were empty, meaning that the data-variable-computed attribute
wouldn't be set for empty computed value (which are stil valid).

Note that this doesn't look great in the tooltip at the moment,
we may display empty values differently in Bug 1912267.

Differential Revision: https://phabricator.services.mozilla.com/D218849
2024-08-09 15:33:07 +00:00

32 lines
782 B
HTML

<!-- Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>variables test</title>
<style>
* {
--color: tomato;
--bg: violet;
--empty: ;
--nested: var(--color);
--theme-color: light-dark(var(--color), var(--bg));
--nested-with-function: var(--theme-color);
--nested-with-empty: var(--empty);
}
div {
--color: chartreuse;
color: var(--color, red);
background: var(--nested-with-empty);
background-color: var(--not-set, var(--bg));
outline-color: var(--nested);
border-color: var(--nested-with-function);
}
</style>
</head>
<body>
<div id="target" style="--bg: seagreen;"> the ocean </div>
</body>
</html>