[cssom-view-1] Added definition of getBoxQuads()

[jogibear9988]

Fixes #10537

A linked issue:
#10514

A firefox issue with a little bit of description:
https://bugzilla.mozilla.org/show_bug.cgi?id=1107559

A polyfill for the API
https://github.com/jogibear9988/getBoxQuadsPolyfill

[jogibear9988]

One issues atm:
My polyfill only works for 2D transformations, 3D with perspective do not work (yet). Have to figure out how to do this. Cause of that, also my spec only works for 2D. I've found some spect for the 3D matrix, wich then also could maybe reused: https://drafts.csswg.org/css-transforms-2/#accumulated-3d-transformation-matrix-computation

[SebastianZ]

I think it makes more sense to add another option to getBoxQuads() to consider the transformed coordinates instead of introducing a separate function getCompleteTransform() for that.

I imagine something like getBoxQuads({considerTransformations: true}).

Sebastian

[jogibear9988]

One issues atm: My polyfill only works for 2D transformations, 3D with perspective do not work (yet). Have to figure out how to do this. Cause of that, also my spec only works for 2D. I've found some spect for the 3D matrix, wich then also could maybe reused: https://drafts.csswg.org/css-transforms-2/#accumulated-3d-transformation-matrix-computation

should be fixed in current polyfill

[jogibear9988]

I think it makes more sense to add another option to getBoxQuads() to consider the transformed coordinates instead of introducing a separate function getCompleteTransform() for that.

I imagine something like getBoxQuads({considerTransformations: true}).

Sebastian

it's in a extra method, cause it is used from other functions in the spec (like convertPointFromNode). And convertPointFromNode use it multiple times

[emilio]

Thanks, this looks like a good start. Please look at how other specs (specially recent ones) use bikeshed in order to get the formatting and references correct. Also this needs to work in terms of nodes and boxes, not elements.

[emilio]

You need to get the element as a parameter, and use <div algorithm> for this for example:

<div algorithm="get the complete transform">
  In order to <dfn export>get the complete transform</dfn> of an node <var>node</var> relative to a node <var>ancestor</ancestor> ...
</div>

[emilio]

Please use bikeshed references for this.

[emilio]

All these algorithms need to be in terms of nodes, as GeometryUtils also applies to text nodes and such.

[emilio]

This is not actually based on the computed style but on the actual used padding box etc. Those boxes are defined already elsewhere and we should reuse the definitions.