Changeset 278848 in webkit

Timestamp:

Jun 14, 2021 1:01:30 PM (13 months ago)

Author:

Patrick Angle

Message:

Web Inspector: CSS variables not handled as case sensitive
​https://bugs.webkit.org/show_bug.cgi?id=226875

Reviewed by Devin Rousso.

Source/WebCore:

Test: inspector/css/overridden-property.html

CSS variables support distinct declarations with only differences in cases. Previously, we naively converted all
property names to lowercase, instead of properly providing variable names in their original case.

• inspector/InspectorStyleSheet.cpp:

(WebCore::InspectorStyle::styleWithProperties const):

LayoutTests:

Add a test to make sure that CSS variable declarations that vary only in case do not override each other.

• inspector/css/overridden-property-expected.txt:
• inspector/css/overridden-property.html:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/css/overridden-property-expected.txt (modified) (1 diff)
• LayoutTests/inspector/css/overridden-property.html (modified) (3 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/inspector/InspectorStyleSheet.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2021-06-14  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: CSS variables not handled as case sensitive
+        https://bugs.webkit.org/show_bug.cgi?id=226875
+
+        Reviewed by Devin Rousso.
+
+        Add a test to make sure that CSS variable declarations that vary only in case do not override each other.
+
+        * inspector/css/overridden-property-expected.txt:
+        * inspector/css/overridden-property.html:
+
 2021-06-14  Youenn Fablet  <youenn@apple.com>
 

trunk/LayoutTests/inspector/css/overridden-property-expected.txt

@@ -28 +28 @@
 PASS: border-top-color is NOT overridden.
 
+-- Running test case: OverriddenProperty.MixedCaseVariablesNotOverridden
+PASS: `--foo` is NOT overridden.
+PASS: `--FOO` is NOT overridden.
+

trunk/LayoutTests/inspector/css/overridden-property.html

@@ -153 +153 @@
     });
 
+    suite.addTestCase({
+        name: "OverriddenProperty.MixedCaseVariablesNotOverridden",
+        test(resolve, reject) {
+            getStyleDeclaration(".mixed-case-variables-not-overridden", (style) => {
+                const dontCreateIfMissing = true;
+                let lowercaseVariableProperty = style.propertyForName("--foo", dontCreateIfMissing);
+                InspectorTest.expectFalse(lowercaseVariableProperty.overridden, "`--foo` is NOT overridden.");
+
+                let uppercaseVariableProperty = style.propertyForName("--FOO", dontCreateIfMissing);
+                InspectorTest.expectFalse(uppercaseVariableProperty.overridden, "`--FOO` is NOT overridden.");
+
+                resolve();
+            }, reject);
+        }
+    });
+
     suite.runTestCasesAndFinish();
 }
@@ -183 +199 @@
         border-top-color: red;
     }
+
+    .mixed-case-variables-not-overridden {
+        --foo: green;
+        --FOO: red;
+    }
     </style>
     <div id="x" style="color: green"></div>
@@ -189 +210 @@
     <div class="shorthand-overridden-by-important-longhand"></div>
     <div class="shorthand-not-overridden-by-longhand"></div>
+    <div class="mixed-case-variables-not-overridden"></div>
 </body>
 </html>

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-06-14  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: CSS variables not handled as case sensitive
+        https://bugs.webkit.org/show_bug.cgi?id=226875
+
+        Reviewed by Devin Rousso.
+
+        Test: inspector/css/overridden-property.html
+
+        CSS variables support distinct declarations with only differences in cases. Previously, we naively converted all
+        property names to lowercase, instead of properly providing variable names in their original case.
+
+        * inspector/InspectorStyleSheet.cpp:
+        (WebCore::InspectorStyle::styleWithProperties const):
+
 2021-06-14  Youenn Fablet  <youenn@apple.com>
 

trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp

@@ -646 +646 @@
 
         auto property = Protocol::CSS::CSSProperty::create()
-            .setName(name.convertToASCIILowercase())
+            .setName(lowercasePropertyName(name))
             .setValue(propertyEntry.value)
             .release();