Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[cssom] Doubt about resolved value of shorthands #1041
The spec talks about longhand so I'm not sure what's the expected behavior for shorthands.
I've tried the following example for the
<div style="display: flexbox;"> <div id="flexitem" style="flex: 1;">item</div> </div> <script> console.log("flex: " + window.getComputedStyle(document.querySelector("#flexitem")).flex); </script>
The output in Chrome, Safari and Edge is:
However in Firefox it's:
What's the expected behavior?
And now that we're talking about this, one more question if instead
document.querySelector("#flexitem").style.flex = "2"; console.log("flex (.style): " + document.querySelector("#flexitem").style.flex);
The output here is the same in all the browsers I've checked Chrome, Firefox, Safari and Edge:
referenced this issue
Mar 7, 2017
I think the spec indicates that shorthands don't have resolved value.
Gecko generally doesn't serialize shorthands for declaration block returned from
I'm not completely sure what should we do for this. I guess a reason against serializing shorthands in resolved value is that, it is hard to keep backward compatibility. When we extend a shorthand to cover more longhands, their serialized form may change, and anything relies on it may be broken.
This breakage may still happen when a longhand is converted to shorthand, but that happens relatively fewer times, and the result can be kept if the author doesn't touch the expanded longhands, so probably it can still be considered backward compatible.
I guess that reason may not be strong enough, because serialization of shorthands in specified value can also change when we extend the syntax. If we always omit the parts with initial value, then there is a larger chance that we can keep the result backward compatible with shorthand from both specified value and resolved value.