class-observer throws DOMException on line break + tertiary operator

[CasiOo]

Line breaks in the class attribute throws a DOMException when combined with using the tertiary operator

Start with a working example:

<div class="${someBoolean ? 'is-true' : 'is-false'}">

</div>

Now insert a line break at the end (valid html according to https://validator.w3.org):

<div class="${someBoolean ? 'is-true' : 'is-false'}
">

</div>

The following exception is then thrown:

Unhandled promise rejection DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('is-true
') contains HTML space characters, which are not valid in tokens.
    at Error (native)
    at ClassObserver.setValue (http://localhost:9000/jspm_packages/npm/aurelia-binding@1.0.0-beta.1.0.2/aurelia-binding.js:3764:34)

The funny part is that the line break is part of the class name here https://github.com/aurelia/binding/blob/master/src/class-observer.js#L26

[gheoan]

That HTML is not valid. The error is caused by calling Element.classList.add with whitespace (' ') which should rise an error.

http://www.w3.org/TR/dom/#interface-domtokenlist

The add(tokens…) method must run these steps:

1. If one of tokens is the empty string, throw a "SyntaxError" exception.
2. If one of tokens contains any ASCII whitespace, then throw an "InvalidCharacterError" exception.
3. For each token in tokens, in given order, that is not in tokens, append token to tokens.
4. Run the update steps.

[jdanyow]

@gheoan I think @CasiOo's point is the Aurelia ClassObserver is calling classList.add with unnecessary whitespace.