CSSStyleDeclaration.getPropertyValue() shall not return null

[DartBot]

This issue was originally filed by @tomyeh

---

What steps will reproduce the problem?

1. If toggling the style's border as follows, it causes a NullPointerException
   label.on.click.add((event) {
     event.target.style.border =
       event.target.style.border.isEmpty() ? "1px solid blue": "";
   });
2. A simplified case:
   print("${node.style.border}"); //an empty string
   node.style.border = "1px solid blue";
   node.style.border = "";
   print("${node.style.border}"); //Wrong! it shall not be null

What is the expected output? What do you see instead?
getPropertyValue() shall always returns an empty string.

What version of the product are you using? On what operating system?
Dartium 125150

[DartBot]

This comment was originally written by [email protected]

---

cc @jacob314.
Added Area-UI, Triaged labels.

[vsmenon]

Removed Area-UI label.
Added Area-DOM label.

[vsmenon]

Added this to the M1 milestone.

[iposva-google]

Removed Area-DOM label.
Added Area-HTML label.

[vsmenon]

Removed Area-HTML label.
Added Area-Dartium label.

[DartBot]

This comment was originally written by [email protected]

---

Set owner to [email protected].

[DartBot]

This comment was originally written by [email protected]

---

WebKit DOM IDLs explicitly say that null values returned by CSSStyleDeclaration.getPropertyValue should translate to null.

Is there any additional considerations? Should we generalize this to other methods?

---

Added Invalid label.

[DartBot]

This comment was originally written by @tomyeh

---

Sorry, as described http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/CSSStyleDeclaration.html#getPropertyValue_java.lang.String_, it shall be an empty string. Which document do you refer to?

[DartBot]

This comment was originally written by [email protected]

---

Dart rather follows JavaScript than Java in this regard, see http://trac.webkit.org/browser/trunk/Source/WebCore/css/CSSStyleDeclaration.idl#L39 which is our primary source for code generation.

Still, if you believe there is a reason to default to empty string than to null, we can override this.

I am concerned though for people coming from JS.

[DartBot]

This comment was originally written by @tomyeh

---

Agree to be compatible with JavaScript, but the following doesn't match:

//JS
document.document.getElementById("aa").style.width; //return an empty string

//Dart
document.query("#aa").style.width; //return null

[DartBot]

This comment was originally written by @tomyeh

---

On the other hand, getPropertyValue returns null in JS (and Dart). The difference between getPropertyValue("width") and width makes me wondering if it is a good spec.

[DartBot]

This comment was originally written by @tomyeh

---

In additions, getPropertyValue shall return the value that was set by setProperty. It is easy to cause unpleasant surprise if the getter doesn't return the same value set to the setter.

BTW, I tested it a bit on different browsers. Both Opera and Firefox return an empty string (while Webkit browser returns null).

[DartBot]

This comment was originally written by [email protected]

---

tom.yeh.m, I am definitely with you that difference between similar methods and esp. across browsers is suspicious.

But Dartium being WebKit based browser, we try hard to be closer to Chromium/Safari.

[DartBot]

This comment was originally written by @tomyeh

---

Even though, style.width shall return an empty string, not null. It is still a bug.

[DartBot]

This comment was originally written by [email protected]

---

tom.yeh.m,

getters like width and alike are just shortcuts for getProperty('width').

Why we should introduce a subtle semantic difference here?

[DartBot]

This comment was originally written by @tomyeh

---

That is what I tried to raise my point if you read my comments closely. As I described in the previous comments, Webkit decides to return an empty string for style.width, while null for getProperty.

Therefore, there are two choices. Stick with Webkit and, as you said, be closer to Chromium/Safari. Then, style.width shall return an empty string.

Or, to have a consistent api. Like w3c.org, return an empty string for both cases.

In short, the current implementation in Dart has to change to adapt one of the above.

Here is the code you can verify the behavior of Chrome/Safari or whatever:

<html>
<head>
<title></title>
</head>
<body>
  <div id="a"/>
  <script>
  console.log("0>" + document.getElementById("a").style.width);
  console.log("1>" + document.getElementById("a").style.getPropertyValue("width"));
  document.getElementById("a").style.setProperty("width", "", "");
  console.log("2>" + document.getElementById("a").style.getPropertyValue("width"));
  </script>
</body>
</html>

[DartBot]

This comment was originally written by [email protected]

---

Let's discuss it in wider context of other dart:html implementations.

Stephen, Vijay, any thoughts?

---

cc @rakudrama.
cc @vsmenon.
Removed the owner.
Removed Area-Dartium label.
Added Area-HTML, Waiting labels.

[vsmenon]

Set owner to @blois.
Added Triaged label.

[blois]

Quick recap:

For unset CSS properties there are discrepancies in the return value of style.getPropertyValue:

• W3C spec states that it should return an empty string (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-getPropertyValue)
• Chrome and Safari return a null string.
• Firefox and IE return an empty string.

In addition, Dart's API mimics the style.propertyName syntax, which returns empty string.