Values are not properly converted to DOMString

[cdoublev]

I'm not sure that the following behavior tested in Chrome and Firefox is described in any specification:

// Case 1: toString() from prototype
class Prop {
  toString() {
    return 1 // Number
  }
}
style.setProperty('opacity', new Prop) // Ok, new value: 1

// Case 2: toString() from instance
const Prop = {
  toString() {
    return 1
  }
}
style.setProperty('opacity', Prop) // Ok, new value: 1

// Case 3: recursive toString()
class RecursiveProp {
  toString() {
    return new Prop()
  }
}
style.setProperty('opacity', new RecursiveProp) // Error

Ie. the value should be converted to String if it has a toString() method. cssstyle currently returns '' for all cases, ie. it results to an invalid value. Chrome and Firefox throw an error for case 3.

[cdoublev]

From what I understand, a value is converted to a DOMString when passing from JavaScript to a DOM element style interface.

Interface CSSStyleDeclaration

void setProperty(in DOMString propertyName, in DOMString value, in DOMString priority) raises(DOMException);

https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

ECMAScript values are converted to an IDL value when passed to a platform object expecting that type

https://heycam.github.io/webidl/#es-type-mapping

An ECMAScript value V is converted to an IDL DOMString value by running the following algorithm:

1. If V is null and the conversion is to an IDL type associated with the LegacyNullToEmptyString extended attribute, then return the DOMString value that represents the empty string.
2. Let x be ToString(V)
3. Return the IDL DOMString value [...]

https://heycam.github.io/webidl/#es-DOMString

I renamed the title of this issue to handle the following cases that were also not handled correctly:

target.style.opacity = Symbol('1')                             // Error
target.style.opacity = { toString: () => [0] }                 // Error
target.style.opacity = BigInt(1)                               // '1'
target.style.setProperty('--custom', undefined)                // 'undefined'
target.style.setProperty('--custom', true)                     // 'true'
target.style.setProperty('--custom', { toString: () => null }) // 'null'

[domenic]

To summarize this issue (continuing discussion from #190 (comment)):

In browsers,

document.body.style.backgroundColor = { toString() { return "blue"; } };
document.body.style.backgroundColor; // "blue"

document.body.style.opacity = { toString() { return 1; } };
document.body.style.opacity; // "1"

In cssstyle, this doesn't work as expected.

Full conversion in the style of #116 or #140 is one way to fix this. However given low maintainer bandwidth for this repository those kind of large rewrites have not been reviewable in the past. (See latest discussion at #140 (comment) .)

So a quick fix for this and/or #189 and #190 might be simpler.

[asamuzaK]

Added failing tests based on this issue
jsdom/jsdom#3871