Skip to content

CSSStyleDeclaration#setProperty with Number 0 as value breaks getPropertyValue #81

@acusti

Description

@acusti

Here’s an illustration of the problem (see it demonstrated in this Tonic notebook):

var cssRule = require('cssom').parse('body {opacity: 0}').cssRules[0];
console.log(cssRule.cssText); // "body {opacity: 0;}"
cssRule.style.setProperty('opacity', 0.1); 
console.log(cssRule.cssText); // "body {opacity: 0.1;}"
cssRule.style.setProperty('opacity', 0);
console.log(cssRule.cssText); // "body {opacity: ;}"
cssRule.style.setProperty('opacity', '0');
console.log(cssRule.cssText); // "body {opacity: 0; opacity: 0;}"

When the cssText getter calls this.getPropertyValue(name) and the value is the Number 0, return this[name] || ""; returns the second part of the condition.

I quickly checked the spec and saw that setProperty takes value of type DOMString, and that a DOMString, by MDN’s description, is effectively just a JS string. This is already how the CSSOM.parse part of the API works, of course, so I propose having setProperty coerce it’s value argument to a string, i.e. change CSSStyleDeclaration.js:54 to:

        this[name] = value + "";

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions