49059 2010-11-05 01:29:19 -0700 Unable to remove 'important' priority of a CSS shorthand property 2022-07-26 21:47:09 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC OS X 10.5 RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=162263 P2 Normal --- 1 phnixwxz webkit-unassigned ahmad.saleem792 ap bfulgham cdumez ganna.khabibullina ian koivisto menard mitz rniwa simon.fraser wangxianzhu oldest_to_newest 305178 0 73043 phnixwxz 2010-11-05 01:29:19 -0700 Created attachment 73043 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. 305496 1 ap 2010-11-05 13:49:41 -0700 Background is a shorthand property. Does this also affect regular properties? 305773 2 phnixwxz 2010-11-06 01:41:56 -0700 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? 554151 3 menard 2012-02-10 10:19:07 -0800 (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??? 554241 4 ian 2012-02-10 11:24:11 -0800 (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? 554255 5 menard 2012-02-10 11:43:32 -0800 (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. 944108 6 ganna.khabibullina 2013-10-28 09:11:19 -0700 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); 1886891 7 ahmad.saleem792 2022-07-26 14:07:57 -0700 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! 1887001 8 rniwa 2022-07-26 21:47:09 -0700 Yeah, this is working now. 73043 2010-11-05 01:29:19 -0700 2010-11-05 01:29:19 -0700 test case testsetproperty.html text/html 579 phnixwxz PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD48L2hlYWQ+Cjxib2R5Pgo8ZGl2IGlkPSdkMScg c3R5bGU9J2JhY2tncm91bmQ6IHllbGxvdyAhaW1wb3J0YW50Jz5kMSBzaG91bGQgYmUgcmVkPC9k aXY+CjxkaXYgaWQ9J2QyJyBzdHlsZT0nYmFja2dyb3VuZDogeWVsbG93ICFpbXBvcnRhbnQnPmQy IHNob3VsZCBiZSByZWQ8L2Rpdj4KPGRpdiBpZD0nZDMnIHN0eWxlPSdiYWNrZ3JvdW5kOiB5ZWxs b3cgIWltcG9ydGFudCc+ZDMgc2hvdWxkIGJlIHJlZDwvZGl2Pgo8c2NyaXB0Pgp2YXIgZDEgPSBk b2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZDEnKTsKZDEuc3R5bGUuYmFja2dyb3VuZCA9ICdyZWQn Owp2YXIgZDIgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZDInKTsKZDIuc3R5bGUuc2V0UHJv cGVydHkoJ2JhY2tncm91bmQnLCAncmVkJyk7CnZhciBkMyA9IGRvY3VtZW50LmdldEVsZW1lbnRC eUlkKCdkMycpOwpkMy5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgnYmFja2dyb3VuZCcpOwpkMy5zdHls ZS5zZXRQcm9wZXJ0eSgnYmFja2dyb3VuZCcsICdyZWQnLCAnJyk7Cjwvc2NyaXB0Pgo8L2JvZHk+ CjwvaHRtbD4K