Bug 49059

Summary: Unable to remove 'important' priority of a CSS shorthand property
Product: WebKit Reporter: Xianzhu Wang <phnixwxz>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, cdumez, ganna.khabibullina, ian, koivisto, menard, mitz, rniwa, simon.fraser, wangxianzhu
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: OS X 10.5   
See Also: https://bugs.webkit.org/show_bug.cgi?id=162263
Attachments:
Description Flags
test case none

Xianzhu Wang
Reported 2010-11-05 01:29:19 PDT
Created attachment 73043 [details] test case <!DOCTYPE html> <html> <head></head> <body> <div id='d1' style='background: yellow !important'>d1 should be red</div> <div id='d2' style='background: yellow !important'>d2 should be red</div> <div id='d3' style='background: yellow !important'>d3 should be red</div> <script> // 1. Unable to change value of an important property by setting JS property. var d1 = document.getElementById('d1'); d1.style.background = 'red'; // 2. Unable to change value of an important property with setProperty(). var d2 = document.getElementById('d2'); d2.style.setProperty('background', 'red'); // 3. The 'important' priority still remains even if the property is removed with removeProperty(). var d3 = document.getElementById('d3'); d3.style.removeProperty('background'); d3.style.setProperty('background', 'red', ''); // The following will succeed: // d3.style.setProperty('background', 'red', 'important'); // or // d3.style.background = 'red !important'; </script> </body> </html> Firefox also behaves like WebKit. However, the behavior seems unreasonable and not to comply with the draft CSSOM standard. http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface Anyway, I agree to delay fixing this issue until the CSSOM standard is frozen.
Attachments
test case (579 bytes, text/html)
2010-11-05 01:29 PDT, Xianzhu Wang 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2010-11-05 13:49:41 PDT
Background is a shorthand property. Does this also affect regular properties?
Xianzhu Wang
Comment 2 2010-11-06 01:41:56 PDT
Just verified that the issue only affects shorthand properties. Maybe we can merge this bug into bug 49098 because they might be of the same cause?
Alexis Menard (darktears)
Comment 3 2012-02-10 10:19:07 PST
(In reply to comment #2) > Just verified that the issue only affects shorthand properties. Maybe we can merge this bug into bug 49098 because they might be of the same cause? It also affect regular longhand properties. It seems that it behaves like this on purpose : https://bugs.webkit.org/show_bug.cgi?id=60007 Now I couldn't find anything in the spec about Ian's comment : "An element with a !important property in its style will allow you to override this property in JavaScript without using !important." If I take the snippet and run it into Opera 11, Firefox 10 it runs as expecting overriding the !important property. So what should we do here? I'll be happy to make the patch if a behavior fix is needed. Ian, Dan???
Ian Henderson
Comment 4 2012-02-10 11:24:11 PST
(In reply to comment #3) > (In reply to comment #2) > > Just verified that the issue only affects shorthand properties. Maybe we can merge this bug into bug 49098 because they might be of the same cause? > > It also affect regular longhand properties. > > It seems that it behaves like this on purpose : > > https://bugs.webkit.org/show_bug.cgi?id=60007 > > Now I couldn't find anything in the spec about Ian's comment : > "An element with a !important property in its style will allow you to override this property in JavaScript without using !important." > > If I take the snippet and run it into Opera 11, Firefox 10 it runs as expecting overriding the !important property. > > So what should we do here? I'll be happy to make the patch if a behavior fix is needed. > > Ian, Dan??? If you have "#elem { background: yellow !important; background: red }" in a stylesheet, should the element end up yellow? If so, why should the behavior of the JS equivalent be different?
Alexis Menard (darktears)
Comment 5 2012-02-10 11:43:32 PST
(In reply to comment #4) > (In reply to comment #3) > > (In reply to comment #2) > > > Just verified that the issue only affects shorthand properties. Maybe we can merge this bug into bug 49098 because they might be of the same cause? > > > > It also affect regular longhand properties. > > > > It seems that it behaves like this on purpose : > > > > https://bugs.webkit.org/show_bug.cgi?id=60007 > > > > Now I couldn't find anything in the spec about Ian's comment : > > "An element with a !important property in its style will allow you to override this property in JavaScript without using !important." > > > > If I take the snippet and run it into Opera 11, Firefox 10 it runs as expecting overriding the !important property. > > > > So what should we do here? I'll be happy to make the patch if a behavior fix is needed. > > > > Ian, Dan??? > > If you have "#elem { background: yellow !important; background: red }" in a stylesheet, should the element end up yellow? If so, why should the behavior of the JS equivalent be different? The element should be yellow. Opera and Firefox are doing so. It then means that the behavior is different.
Anna
Comment 6 2013-10-28 09:11:19 PDT
I don't believe it's a bug, this seems to be xbrowser approach. Once set as important you cannot override the style with the other non-important style. Having met the same problem, I did the following: // Get the style object. var styleObj= document.getElementById('foo').style; // Remove the property with important priority you want to override. In the example below - height. styleObj.removeProperty('height'); // Set the new value for the property with non-important priority. document.getElementById('foo').style.setProperty('height', '100px', null);
Ahmad Saleem
Comment 7 2022-07-26 14:07:57 PDT
I am unable to reproduce this bug using attached test case in Safari 15.6 on macOS 12.6 and Safari show all three lines as red background and it is matched across all other browsers (Chrome Canary 106 and Firefox Nightly 104). Safari also pass quite a few tests on WPT while searching for (Important): https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=important Just wanted to share updated results, ignore my comment, if I am incorrect here. Thanks!
Ryosuke Niwa
Comment 8 2022-07-26 21:47:09 PDT
Yeah, this is working now.
Note You need to log in before you can comment on or make changes to this bug.