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

Description Xianzhu Wang 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.
Comment 1 Alexey Proskuryakov 2010-11-05 13:49:41 PDT 
Background is a shorthand property. Does this also affect regular properties?
Comment 2 Xianzhu Wang 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?
Comment 3 Alexis Menard (darktears) 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???
Comment 4 Ian Henderson 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?
Comment 5 Alexis Menard (darktears) 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.
Comment 6 Anna 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);
Comment 7 Ahmad Saleem 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!
Comment 8 Ryosuke Niwa 2022-07-26 21:47:09 PDT 
Yeah, this is working now.