Bug 1534567 - Ensure inherited CSS variables are case sensitive; r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Tue, 12 Mar 2019 13:45:00 +0000
changeset 521550 5c4d90e31d8c
parent 521549 5b275de602ae
child 521551 74df776abe14
push id10867
push userdvarga@mozilla.com
push dateThu, 14 Mar 2019 15:20:45 +0000
treeherdermozilla-beta@abad13547875 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1534567, 1512634
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1534567 - Ensure inherited CSS variables are case sensitive; r=pbro Bug 1512634 introduced a case-insensitive check for CSS properties. This caused a regression whereby inherited CSS variables with mixed case were incorrectly unmatched when shown in the Rules view. To fix this, we do a strict check for CSS variables in CSSProperties front because they are case sensitive (--color and --COLOR are different CSS variables). See: https://www.w3.org/TR/css-variables-1/ > Unlike other CSS properties, custom property names are case-sensitive. Differential Revision: https://phabricator.services.mozilla.com/D23113
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
devtools/client/inspector/rules/test/doc_variables_3.html
devtools/shared/fronts/css-properties.js
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -34,16 +34,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_3.html
   head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
 
@@ -99,16 +100,17 @@ skip-if = (verify && !debug && os == 'wi
 [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]
 skip-if = e10s && debug # Bug 1250058 - Docshell leak on debug e10s
+[browser_rules_variables_03-case-sensitive.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]
 [browser_rules_cubicbezier-appears-on-swatch-click.js]
 [browser_rules_cubicbezier-commit-on-ENTER.js]
 [browser_rules_cubicbezier-revert-on-ESC.js]
 [browser_rules_custom.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
@@ -0,0 +1,23 @@
+/* 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 that inherited CSS variables are case senstive.
+
+const TEST_URI = URL_ROOT + "doc_variables_3.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const {inspector, view} = await openRuleView();
+  await selectNode("#target", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(view, "div", "color").valueSpan
+    .querySelector(".ruleview-variable");
+  const lowerCaseVarEl = getRuleViewProperty(view, "div", "background").valueSpan
+    .querySelector(".ruleview-variable");
+
+  is(upperCaseVarEl.textContent, "--COLOR", "upper case variable is matched");
+  is(lowerCaseVarEl.textContent, "--background", "lower case variable is matched");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_3.html
@@ -0,0 +1,16 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html style="--COLOR: green; --background: black">
+<head>
+
+  <style>
+    div {
+      background: var(--background);
+      color: var(--COLOR);
+    }
+  </style>
+</head>
+<body>
+  <div id="target">test</div>
+</body>
+</html>
--- a/devtools/shared/fronts/css-properties.js
+++ b/devtools/shared/fronts/css-properties.js
@@ -100,17 +100,18 @@ CssProperties.prototype = {
   /**
    * Checks to see if the property is known by the browser. This function has
    * `this` already bound so that it can be passed around by reference.
    *
    * @param {String} property The property name to be checked.
    * @return {Boolean}
    */
   isKnown(property) {
-    property = property.toLowerCase();
+    // Custom Property Names (aka CSS Variables) are case-sensitive; do not lowercase.
+    property = property.startsWith("--") ? property : property.toLowerCase();
     return !!this.properties[property] || isCssVariable(property);
   },
 
   /**
    * Quickly check if a CSS name/value combo is valid on the client.
    *
    * @param {String} Property name.
    * @param {String} Property value.
@@ -195,17 +196,18 @@ CssProperties.prototype = {
    * does not name a valid property, an empty array is returned.  If
    * the property is not a shorthand property, then array containing
    * just the property itself is returned.
    *
    * @param {String} name The property to query
    * @return {Array} An array of subproperty names.
    */
   getSubproperties(name) {
-    name = name.toLowerCase();
+    // Custom Property Names (aka CSS Variables) are case-sensitive; do not lowercase.
+    name = name.startsWith("--") ? name : name.toLowerCase();
     if (this.isKnown(name)) {
       if (this.properties[name] && this.properties[name].subproperties) {
         return this.properties[name].subproperties;
       }
       return [name];
     }
     return [];
   },