[css-variables][cssom] Empty value doesn't round-trip #9847
Description
<!DOCTYPE html>
<div style="--a: ; width: var(--a) 100px; height: 100px; background: cyan;"></div>
<script>
var el = document.querySelector("div");
el.style.setProperty("--a", getComputedStyle(el).getPropertyValue("--a"));
</script>I would expect the JS to be no-op as per the round-tripping principle.
However, an empty string has a special meaning in setProperty: it behaves as removeProperty, even though it's valid for custom properties.
Some reasonable possibilities:
- Don't redirect
setPropertytoremovePropertyfor custom properties, since empty string is a valid value. Authors could explicitly useremovePropertyif they want to remove. I suspect this may not be web compatible at this point. - Serialize empty values as
" "instead of""so that they can be safely used insetProperty, as @prjnt proposed in [css-syntax] Trim whitespace around declarations? #774 (comment)