Changeset 90630 in webkit

Timestamp:

Jul 8, 2011 7:51:00 AM (13 years ago)

Author:

apavlov@chromium.org

Message:

Web Inspector: CSS inspector gets confused about specificity of !important properties
​https://bugs.webkit.org/show_bug.cgi?id=64074

Reviewed by Yury Semikhatsky.

Source/WebCore:

• inspector/front-end/StylesSidebarPane.js:

(WebInspector.StylesSidebarPane.prototype._markUsedProperties):

LayoutTests:

• inspector/elements/elements-panel-styles-expected.txt:
• inspector/elements/resources/elements-panel-styles.css:

(#container .foo):
(.foo):

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/elements/elements-panel-styles-expected.txt (modified) (6 diffs)
• LayoutTests/inspector/elements/resources/elements-panel-styles.css (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/inspector/front-end/StylesSidebarPane.js (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2011-07-08  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: CSS inspector gets confused about specificity of !important properties
+        https://bugs.webkit.org/show_bug.cgi?id=64074
+
+        Reviewed by Yury Semikhatsky.
+
+        * inspector/elements/elements-panel-styles-expected.txt:
+        * inspector/elements/resources/elements-panel-styles.css:
+        (#container .foo):
+        (.foo):
+
 2011-07-08  Andrey Kosyakov  <caseq@chromium.org>
 

trunk/LayoutTests/inspector/elements/elements-panel-styles-expected.txt

@@ -3 +3 @@
 [expanded]  ()
 border-bottom-left-radius: 5px;
-    .foo - 5px 5px elements-panel-styles.css:10
+    .foo - 5px 5px elements-panel-styles.css:14
 border-bottom-right-radius: 5px;
-    .foo - 5px 5px elements-panel-styles.css:10
+    .foo - 5px 5px elements-panel-styles.css:14
 border-top-left-radius: 5px;
-    .foo - 5px 5px elements-panel-styles.css:10
+    .foo - 5px 5px elements-panel-styles.css:14
 border-top-right-radius: 5px;
-    .foo - 5px 5px elements-panel-styles.css:10
+    .foo - 5px 5px elements-panel-styles.css:14
 color: blue;
-    .foo, .foo::before - blue elements-panel-styles.css:16
-    /-- overloaded --/ .foo - black elements-panel-styles.css:10
+    .foo, .foo::before - blue elements-panel-styles.css:21
+    /-- overloaded --/ .foo - black elements-panel-styles.css:14
 display: none;
     element.style - none 
@@ -21 +21 @@
     #container - 14px elements-panel-styles.css:5
     /-- overloaded --/ body - 12px elements-panel-styles.css:1
+font-style: italic;
+    #container .foo - italic !important elements-panel-styles.css:10
+    /-- overloaded --/ .foo - normal !important elements-panel-styles.css:14
 margin-bottom: 2px;
-    .foo - 2px elements-panel-styles.css:10
+    .foo - 2px elements-panel-styles.css:14
 margin-left: 0px;
-    .foo - 0px elements-panel-styles.css:10
+    .foo - 0px elements-panel-styles.css:14
 margin-right: 0px;
-    .foo - 0px elements-panel-styles.css:10
+    .foo - 0px elements-panel-styles.css:14
 margin-top: 10px;
-    .foo - 10px elements-panel-styles.css:10
+    .foo - 10px elements-panel-styles.css:14
 
 [expanded] element.style { ()
@@ -34 +37 @@
 
 ======== Matched CSS Rules ========
-[expanded] .foo { (elements-panel-styles.css:34)
+[expanded] #container .foo { (elements-panel-styles.css:10)
+font-style: italic !important;
 
-[expanded] .foo, .foo::before { (elements-panel-styles.css:16)
+[expanded] .foo { (elements-panel-styles.css:39)
+
+[expanded] .foo, .foo::before { (elements-panel-styles.css:21)
 content: "[before Foo]";
 color: blue;
 
-[expanded] .foo { (elements-panel-styles.css:10)
+[expanded] .foo { (elements-panel-styles.css:14)
 /-- overloaded --/ color: black;
 margin: 10px 0 2px;
@@ -52 +58 @@
     border-bottom-right-radius: 5px 5px;
     border-bottom-left-radius: 5px 5px;
+/-- overloaded --/ font-style: normal !important;
 
 [expanded] div { (user agent stylesheet)
@@ -67 +74 @@
 
 ======== Pseudo ::before element ========
-[expanded] .foo::before { (elements-panel-styles.css:38)
+[expanded] .foo::before { (elements-panel-styles.css:43)
 
-[expanded] .foo::before { (elements-panel-styles.css:21)
+[expanded] .foo::before { (elements-panel-styles.css:26)
 color: red;
 
-[expanded] .foo, .foo::before { (elements-panel-styles.css:16)
+[expanded] .foo, .foo::before { (elements-panel-styles.css:21)
 content: "[before Foo]";
 /-- overloaded --/ color: blue;
@@ -78 +85 @@
 
 ======== Pseudo ::after element ========
-[expanded] .foo::after { (elements-panel-styles.css:29)
+[expanded] .foo::after { (elements-panel-styles.css:34)
 font-family: courier;
 content: "[after Foo 2]";
 
-[expanded] .foo::after { (elements-panel-styles.css:25)
+[expanded] .foo::after { (elements-panel-styles.css:30)
 /-- overloaded --/ content: "[after Foo]";
 color: green;

trunk/LayoutTests/inspector/elements/resources/elements-panel-styles.css

@@ -8 +8 @@
 }
 
+#container .foo {
+    font-style: italic !important;
+}
+
 .foo {
     color: black;
     margin: 10px 0 2px;
     border-radius: 5px;
+    font-style: normal !important;
 }
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2011-07-08  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: CSS inspector gets confused about specificity of !important properties
+        https://bugs.webkit.org/show_bug.cgi?id=64074
+
+        Reviewed by Yury Semikhatsky.
+
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylesSidebarPane.prototype._markUsedProperties):
+
 2011-07-08  Alexander Pavlov  <apavlov@chromium.org>
 

trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js

@@ -453 +453 @@
             var foundPriorityProperties = [];
 
-            // Walk in reverse to match the order !important overrides.
-            for (var i = (styleRules.length - 1); i >= 0; --i) {
+            // Walk in direct order to detect the active/most specific rule providing a priority
+            // (in this case all subsequent !important values get canceled.)
+            for (var i = 0; i < styleRules.length; ++i) {
                 if (styleRules[i].computedStyle || styleRules[i].isStyleSeparator)
                     continue;