[css-variables] serializing shorthand values

In the CSS Variables spec, I think there's a small error in the way
shorthand handling is specified. Section 3.2 [1] contains the
following paragraph:

  Similarly, while [CSSOM] defines that shorthand properties are
  serialized by appropriately concatenating the values of their
  corresponding longhands, shorthands containing var() functions
  must instead retain their original, var()-containing, value. If
  serializing a shorthand’s value would involve serializing a
  pending-substitution value, the shorthand must instead be
  serialized by serializing its original value.

This is actually only true for shorthands which are explicitly set to
contain a variable reference. Longhand properties with pending
substitution values can be included in several shorthands. For these
other shorthands, the serialized value must be an empty string.

Example 1:

  el.style.setProperty("border", "var(--a)");
  el.style.getPropertyValue("border") ==> "var(--a)"
  el.style.getPropertyValue("border-right") ==> ""
  el.style.getPropertyValue("border-right-style") ==> ""

Example 2:

  el.style.setProperty("border-right", "var(--a)");
  el.style.getPropertyValue("border") ==> ""
  el.style.getPropertyValue("border-right") ==> "var(--a)"
  el.style.getPropertyValue("border-right-style") ==> ""

Suggested edit - replace the last sentence in the paragraph quoted above with:

  Shorthands that are specified with explicit variable references
  must serialize to the original, variable reference containing
  value. For other shorthands, if any of the longhand
  subproperties for that shorthand have pending substitution
  values then the serialized value of the shorthand must be the
  empty string.

Maybe add an example?

Regards,

John Daggett
Mozilla Japan

[1] http://dev.w3.org/csswg/css-variables/#variables-in-shorthands

Firefox bug related to this issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=1053114

Received on Thursday, 14 August 2014 08:27:15 UTC