Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e91afa6
Work on description of getBoxQuads API
jogibear9988 Jul 8, 2024
57dc349
Update Overview.bs
jogibear9988 Jul 8, 2024
db85f76
Update Overview.bs
jogibear9988 Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 49 additions & 19 deletions cssom-view-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1781,46 +1781,76 @@ Document includes GeometryUtils;
typedef (Text or Element or CSSPseudoElement or Document) GeometryNode;
</pre>

The <dfn method for=GeometryUtils lt="getBoxQuads(options)|getBoxQuads()">getBoxQuads(<var>options</var>)</dfn> method must run the following steps:

The helper method getCompleteTransform(anchestor) must run the following steps:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

<ol>
<li class=issue>
DOM order

p1 = top left even in RTL

scale to 0 means divide by zero, return 0x0

cross-frames not allowed, throw WrongDocumentError?

points are flattened (3d transform), z=0. like getClientRect

test block in inline
1. let currentElement be the element getCompleteTransform() called on.
2. let transformationMatrix be the current transformation matrix of currentElement (https://www.w3.org/TR/css-transforms-2/#ctm)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use bikeshed references for this.

3. while currentElement is not null do
<ol>
1. create a translation matrix from the currentElement offsetLeft and offsetTop
2. multiply the matrix from 4. with the transformationMatrix and store the result in transformationMatrix
3. assign currentElement offsetParent to currentElement
4. let parentTransformationMatrix be the current transformation matrix of currentElement (https://www.w3.org/TR/css-transforms-2/#ctm)
5. multiply the parentTransformationMatrix with the transformationMatrix and store in transformationMatrix
6. if currentElement is the anchestor or the anchestor is null return the transformationMatrix
</ol>
</ol>

pseudo-elements before/after are children of the element
The <dfn method for=GeometryUtils lt="getBoxQuads(options)|getBoxQuads()">getBoxQuads(<var>options</var>)</dfn> method must run the following steps:

viewport boxes are all the same
<ol>
1. create an array as result container
2. for each css-fragment of the element run the following steps
<ol>
1. Create a DOMRect of the Element with the x,y value of 0 and the offsetWith and offsetHeight.
2. Depending on the value of options.box modify the Rect from 1. with the calculated style values of the element.
- 'border': no change
- 'margin': x - margin.left, y - margin.top, width + margin.left + margin.right and height + margin.top + margin.bottom
- 'padding': x + border.leftWidth, y + border.topWidth, width - border.leftWidth - border.rightWidth and height - border.topWidth - border.bottomWidth
- 'content': x + border.leftWidth + padding.left, y + border.topWidth + padding.top, width - border.leftWidth - padding.left - border.rightWidth - padding.rigth and height - border.topWidth - padding.top - border.bottomWidth - padding.bottom
3. create a DomQuad from the rect via DOMQuad.fromRect
4. Calculate the resulting transformation matrix between the element and options.realtiveTo (if relativeTo is unset use window.defaultView) via the algorithm defined in getCompleteTransform
5. transform every Point of the quad via the matrix calculated in 4. and add the result to the result container
</ol>
3. return the result container
</ol>
</ol>

The <dfn method for=GeometryUtils lt="convertQuadFromNode(quad, from, options)|convertQuadFromNode(quad, from)">convertQuadFromNode(<var>quad</var>, <var>from</var>, <var>options</var>)</dfn> method
must run the following steps:

<ol>
<li><p class=issue>...
1. transform each point of the DOMQuad via convertPointFromNode
</ol>

The <dfn method for=GeometryUtils lt="convertRectFromNode(rect, from, options)|convertRectFromNode(rect, from)">convertRectFromNode(<var>rect</var>, <var>from</var>, <var>options</var>)</dfn> method
must run the following steps:

<ol>
<li><p class=issue>...
1. create a DOMQuad from the rect via DOMQuad.fromRect
2. transform each point of the DOMQuad from 1. via convertPointFromNode
</ol>

The <dfn method for=GeometryUtils lt="convertPointFromNode(point, from, options)|convertPointFromNode(point, from)">convertPointFromNode(<var>point</var>, <var>from</var>, <var>options</var>)</dfn>
method must run the following steps:

<ol>
<li><p class=issue>...
1. get the resulting matrix between the element and the document.defaultView via the algorithm defined in getCompleteTransform
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

2. get the resulting matrix between the from and the document.defaultView via the algorithm defined in getCompleteTransform
3. inverse the matrix in 2.
4. Depending on the value of options.fromBox modify the point with the calculated style values of the element.
- 'border': no change
- 'margin': x - margin.left, y - margin.top
- 'padding': x + border.leftWidth, y + border.topWidth
- 'content': x + border.leftWidth + padding.left, y + border.topWidth + padding.top
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

5. transform the point from 4. with the matrix in 1.
6. transfrom the point from 5. with the matrix in 2.
7. Depending on the value of options.toBox modify the point from 6. with the calculated style values of the element.
- 'border': no change
- 'margin': x + margin.left, y + margin.top
- 'padding': x - border.leftWidth, y - border.topWidth
- 'content': x - border.leftWidth - padding.left, y - border.topWidth - padding.top

</ol>

<h2 id=visualViewport>VisualViewport</h2>
Expand Down