Bug 1102464: Unit test: Show a trace of how a css variable got set in the inspector. r=gl
MozReview-Commit-ID: KgSLoXIN5nK
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -33,16 +33,17 @@ support-files =
doc_sourcemaps2.css^headers^
doc_sourcemaps2.html
doc_style_editor_link.css
doc_test_image.png
doc_urls_clickable.css
doc_urls_clickable.html
doc_variables_1.html
doc_variables_2.html
+ doc_variables_tooltip.html
head.js
!/devtools/client/commandline/test/helpers.js
!/devtools/client/framework/test/shared-head.js
!/devtools/client/inspector/test/head.js
!/devtools/client/inspector/test/shared-head.js
!/devtools/client/shared/test/test-actor.js
!/devtools/client/shared/test/test-actor-registry.js
@@ -95,16 +96,17 @@ support-files =
[browser_rules_completion-new-property_multiline.js]
[browser_rules_computed-lists_01.js]
[browser_rules_computed-lists_02.js]
[browser_rules_completion-popup-hidden-after-navigation.js]
[browser_rules_content_01.js]
[browser_rules_content_02.js]
[browser_rules_variables_01.js]
[browser_rules_variables_02.js]
+[browser_rules_variables_tooltip.js]
skip-if = e10s && debug # Bug 1250058 - Docshell leak on debug e10s
[browser_rules_context-menu-show-mdn-docs-01.js]
[browser_rules_context-menu-show-mdn-docs-02.js]
[browser_rules_context-menu-show-mdn-docs-03.js]
[browser_rules_copy_styles.js]
subsuite = clipboard
skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
[browser_rules_cssom.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_tooltip.js
@@ -0,0 +1,35 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for variable tooltips in ruleview
+
+const TEST_URI = URL_ROOT + "doc_variables_tooltip.html";
+
+add_task(function* () {
+ yield addTab(TEST_URI);
+ let {inspector, view} = yield openRuleView();
+ yield selectNode("#target", inspector);
+
+ info("Tests tooltip support for CSS variables. Formats tested: var(x, " +
+ "constant) and var(x, var(y, constant))");
+
+ let unsetVar = getRuleViewProperty(view, "div", "color").valueSpan
+ .querySelector(".ruleview-variable-unmatched");
+ let setVar = unsetVar.nextElementSibling.querySelector(".ruleview-variable");
+ let unmatchedVar = setVar.nextElementSibling;
+
+ is(unsetVar.dataset.variable, "--var1 is not set",
+ "--var1 is set to an undefined value");
+ is(setVar.dataset.variable, "--var2 = red", "var2 is not set correctly");
+ is(unmatchedVar.dataset.variable, undefined,
+ "black constant is parsed as a variable");
+
+ let previewTooltip = yield assertShowPreviewTooltip(view, unsetVar);
+ yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar);
+
+ previewTooltip = yield assertShowPreviewTooltip(view, setVar);
+ yield assertTooltipHiddenOnMouseOut(previewTooltip, setVar);
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_tooltip.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html><head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+ <style>
+
+ div {
+ --var2: red;
+ color: var(--var1, var(--var2, black));
+ }
+
+ </style>
+
+</head>
+<body>
+ <div id="target">some text</div>
+</body></html>