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

cssom-view-1/Overview.bs

@@ -1861,46 +1861,74 @@ 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(node, anchestor) must run the following steps:
 <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 node.
+ 2. let transformationMatrix be the current transformation matrix of currentElement (https://www.w3.org/TR/css-transforms-2/#ctm)
+ 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 the offsetParent of currentElement 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': https://drafts.csswg.org/css-box-4/#box-edges - use the margin-box
+    - 'padding': https://drafts.csswg.org/css-box-4/#box-edges - use the padding-box
+    - 'content': https://drafts.csswg.org/css-box-4/#box-edges - use the content-box
+    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>
 
 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 node and the document.defaultView via the algorithm defined in getCompleteTransform
+ 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
+ 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>