1334072 - CSSProperties do not show the priority

Status: NEW

(DevTools :: Console, defect, P3)

Description

[Vassilis Virvilis]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20161201031821

Steps to reproduce:

I believe the problem is on every site but let's take google for example.

Let's go to https://www.google.com/

Open the developers tools (F12) and from the console I try to set a style property with priority important. See what happens:

>document.styleSheets[1].cssRules[2].style
CSS2Properties { padding-bottom: "35px" }
# ok
>document.styleSheets[1].cssRules[2].style.setProperty("color", "white")
undefined
document.styleSheets[1].cssRules[2].style
CSS2Properties { padding-bottom: "35px", color: "white" }
# ok setProperty work without priority
document.styleSheets[1].cssRules[2].style.setProperty("color", "white", "important")
undefined
document.styleSheets[1].cssRules[2].style
CSS2Properties { padding-bottom: "35px", color: "white" }
# Oups!! *** Where is !important

In chrome works. According to https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration it should work
        


Actual results:

It doesn't set the priority (important) of the style.


Expected results:

It should set the priority (important) of the style

Comment 1

[Vassilis Virvilis]

Ok I am reposting the session with proper highlight of the commands.

Let's go to https://www.google.com/

Open the developers tools (F12) and from the console I try to set a style property with priority important. See what happens:

>document.styleSheets[1].cssRules[2].style
CSS2Properties { padding-bottom: "35px" }
# ok
>document.styleSheets[1].cssRules[2].style.setProperty("color", "white")
undefined
>document.styleSheets[1].cssRules[2].style
CSS2Properties { padding-bottom: "35px", color: "white" }
# ok setProperty work without priority
>document.styleSheets[1].cssRules[2].style.setProperty("color", "white", "important")
undefined
>document.styleSheets[1].cssRules[2].style
CSS2Properties { padding-bottom: "35px", color: "white" }
# Oups!! *** Where is !important priority?

In chrome works. According to https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration it should work.

Comment 2

[Tom Tromey :tromey]

Printing ".style" seems to just show a summary.
If you want the full text of the style you have to use ".style.cssText", like:

> document.styleSheets[0].cssRules[0].style.cssText  
border: 1px solid rgb(255, 255, 255, 0.1); background-color: red !important; color: white !important;

The |.toSource()| method also seem to work.

Offhand I am not sure if this is a bug in the console or if it is intended behavior of CSSOM somehow.
Moving to the console for investigation there - definitely not a rule-view bug.

Comment 3

[Vassilis Virvilis]

A ok thanks.

I had a problem with this in my setup but the rule was not applying due to another problem in my code. I tried it in chrome and it worked and the console output (difference between chrome and firefox) made sense at the time hence the bug report.

Thank you - you can close the bug as far as I am concerned

I agree that the rule.style output is somewhat misleading.

Thanks again

Comment 4

[Tom Tromey :tromey]

I'm inclined to leave it open, as I found the current behavior confusing as well.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

We are missing data from the server to cover this. Here is what the grip looks like : 
```
{
  "from": "server3.conn2.child26/consoleActor2",
  "input": "document.styleSheets[1].cssRules[2].style",
  "result": {
    "type": "object",
    "actor": "server3.conn2.child26/obj31",
    "class": "CSS2Properties",
    "extensible": true,
    "frozen": false,
    "sealed": false,
    "ownPropertyLength": 2,
    "preview": {
      "kind": "MapLike",
      "size": 2,
      "entries": [
        [
          "padding-bottom",
          "35px"
        ],
        [
          "color",
          "white"
        ]
      ]
    }
  },
  "timestamp": 1511976325643,
  "exception": null,
  "frame": null,
  "helperResult": null,
  "notes": null
}
```