[css-transforms-2] The reference box for resolving percentage on translate

[BorisChiou]

Per the spec definition of translate, we resolve its percentage by containing block:

relative to the width of the containing block (for the first value) or the height (for the second value)

Here, we use containing block. However, for transform property, we use its reference box to resolve the percentage:

refer to the size of reference box

The containing block has a special meaning, I think, based on the spec of visual formatting model. It may refer to the content edge or padding edge, based on its position value. I checked the implmentation of Blink and Gecko, and it seems both use transform-box (default: view-box) as the reference box for both transform and translate. So my suggestion is to update how we resolve the percentage for translate. i.e. Use reference box, instead of containing block.

[BorisChiou]

cc @tabatkins

[ewilligers]

Thanks for the PR. Yes we should be consistent with transform.