[cssom-view] Make new DOMQuad(rect) use x/y/width/height instead of top/right/bottom/left (so when width/height are negative, p1 is the bottom right corner).

Author: Simon Pieters

cssom-view/Overview.html

@@ -1773,21 +1773,21 @@ <h3 class="atrisk" id="the-domquad-interface"><span class="secno">11.4 </span>Th
  <li><p>If invoked with one argument, follow these substeps:
   <ol>
    <li><p>Let <var>rect</var> be the argument.
-   <li><p>Let <var>top</var>, <var>right</var>, <var>bottom</var> and <var>left</var> be <var>rect</var>'s the value of <code title="dom-DOMRect-top"><a href="#dom-domrect-top">top</a></code>,
-   <code title="dom-DOMRect-right"><a href="#dom-domrect-right">right</a></code>, <code title="dom-DOMRect-bottom"><a href="#dom-domrect-bottom">bottom</a></code> and <code title="dom-DOMRect-left"><a href="#dom-domrect-left">left</a></code> attributes,
+   <li><p>Let <var>x</var>, <var>y</var>, <var>width</var> and <var>height</var> be <var>rect</var>'s the value of <code title="dom-DOMRect-x"><a href="#dom-domrect-x">x</a></code>,
+   <code title="dom-DOMRect-y"><a href="#dom-domrect-y">y</a></code>, <code title="dom-DOMRect-width"><a href="#dom-domrect-width">width</a></code> and <code title="dom-DOMRect-height"><a href="#dom-domrect-height">height</a></code> attributes,
    respectively.
-   <li><p>Let <var>point 1</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>left</var>,
-   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>top</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to
+   <li><p>Let <var>point 1</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>x</var>,
+   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>y</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to
    one.
-   <li><p>Let <var>point 2</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>right</var>,
-   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>top</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to
-   one.
-   <li><p>Let <var>point 3</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>right</var>,
-   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>bottom</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to
-   one.
-   <li><p>Let <var>point 4</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>left</var>,
-   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>bottom</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to
+   <li><p>Let <var>point 2</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>x</var> + <var>width</var>,
+   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>y</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to
    one.
+   <li><p>Let <var>point 3</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>x</var> + <var>width</var>,
+   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>y</var> + <var>height</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and
+   <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to one.
+   <li><p>Let <var>point 4</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with <code title="dom-DOMPoint-x"><a href="#dom-dompoint-x">x</a></code> set to <var>x</var>,
+   <code title="dom-DOMPoint-y"><a href="#dom-dompoint-y">y</a></code> set to <var>y</var> + <var>height</var>, <code title="dom-DOMPoint-z"><a href="#dom-dompoint-z">z</a></code> set to zero and
+   <code title="dom-DOMPoint-w"><a href="#dom-dompoint-w">w</a></code> set to one.
    <li><p>Let <var>bounds</var> be a new <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> object with its attributes set to the values of the namesake attributes in
    <var>rect</var>.
   </ol>
@@ -1802,8 +1802,8 @@ <h3 class="atrisk" id="the-domquad-interface"><span class="secno">11.4 </span>Th
    <var>p3</var>.
    <li><p>Let <var>point 4</var> be a new <code><a href="#dompoint">DOMPoint</a></code> object with its attributes set to the values of the namesake dictionary members in
    <var>p4</var>.
-   <li><p>Let <var>bounds</var> be a new <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> object describing the bounding box of <var>point 1</var>, <var>point 2</var>, <var>point
-   3</var> and <var>point 4</var>.
+   <li><p>Let <var>bounds</var> be a new <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> object describing the smallest bounding box of <var>point 1</var>, <var>point 2</var>,
+   <var>point 3</var> and <var>point 4</var>.
   </ol>
  <li><p>Return a new <code><a href="#domquad">DOMQuad</a></code> with <code title="dom-DOMQuad-p1"><a href="#dom-domquad-p1">p1</a></code> set to <var>point 1</var>, <code title="dom-DOMQuad-p2"><a href="#dom-domquad-p2">p2</a></code> set to
  <var>point 2</var>, <code title="dom-DOMQuad-p3"><a href="#dom-domquad-p3">p3</a></code> set to <var>point 3</var> and <code title="dom-DOMQuad-p4"><a href="#dom-domquad-p4">p4</a></code> set to <var>point 4</var>, and
@@ -1822,7 +1822,7 @@ <h3 class="atrisk" id="the-domquad-interface"><span class="secno">11.4 </span>Th
 
 <p>The <a href="#associated-bounding-rectangle">associated bounding rectangle</a> is live; whenever the objects in <code title="dom-DOMQuad-p1"><a href="#dom-domquad-p1">p1</a></code>, <code title="dom-DOMQuad-p2"><a href="#dom-domquad-p2">p2</a></code>,
 <code title="dom-DOMQuad-p3"><a href="#dom-domquad-p3">p3</a></code> or <code title="dom-DOMQuad-p4"><a href="#dom-domquad-p4">p4</a></code> are changed, the <a href="#associated-bounding-rectangle">associated bounding rectangle</a> must update its
-attributes as appropriate to describe the new bounding box of the four points.
+attributes as appropriate to describe the new smallest bounding box of the four points.
 
 
 <h3 class="atrisk" id="the-geometryutils-interface"><span class="secno">11.5 </span>The <code title="">GeometryUtils</code> Interface</h3>

cssom-view/Overview.src.html

@@ -1731,21 +1731,21 @@ <h3 class=atrisk>The <code title>DOMQuad</code> Interface</h3>
  <li><p>If invoked with one argument, follow these substeps:
   <ol>
    <li><p>Let <var>rect</var> be the argument.
-   <li><p>Let <var>top</var>, <var>right</var>, <var>bottom</var> and <var>left</var> be <var>rect</var>'s the value of <code title=dom-DOMRect-top>top</code>,
-   <code title=dom-DOMRect-right>right</code>, <code title=dom-DOMRect-bottom>bottom</code> and <code title=dom-DOMRect-left>left</code> attributes,
+   <li><p>Let <var>x</var>, <var>y</var>, <var>width</var> and <var>height</var> be <var>rect</var>'s the value of <code title=dom-DOMRect-x>x</code>,
+   <code title=dom-DOMRect-y>y</code>, <code title=dom-DOMRect-width>width</code> and <code title=dom-DOMRect-height>height</code> attributes,
    respectively.
-   <li><p>Let <var>point 1</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>left</var>,
-   <code title=dom-DOMPoint-y>y</code> set to <var>top</var>, <code title=dom-DOMPoint-z>z</code> set to zero and <code title=dom-DOMPoint-w>w</code> set to
+   <li><p>Let <var>point 1</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>x</var>,
+   <code title=dom-DOMPoint-y>y</code> set to <var>y</var>, <code title=dom-DOMPoint-z>z</code> set to zero and <code title=dom-DOMPoint-w>w</code> set to
    one.
-   <li><p>Let <var>point 2</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>right</var>,
-   <code title=dom-DOMPoint-y>y</code> set to <var>top</var>, <code title=dom-DOMPoint-z>z</code> set to zero and <code title=dom-DOMPoint-w>w</code> set to
-   one.
-   <li><p>Let <var>point 3</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>right</var>,
-   <code title=dom-DOMPoint-y>y</code> set to <var>bottom</var>, <code title=dom-DOMPoint-z>z</code> set to zero and <code title=dom-DOMPoint-w>w</code> set to
-   one.
-   <li><p>Let <var>point 4</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>left</var>,
-   <code title=dom-DOMPoint-y>y</code> set to <var>bottom</var>, <code title=dom-DOMPoint-z>z</code> set to zero and <code title=dom-DOMPoint-w>w</code> set to
+   <li><p>Let <var>point 2</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>x</var> + <var>width</var>,
+   <code title=dom-DOMPoint-y>y</code> set to <var>y</var>, <code title=dom-DOMPoint-z>z</code> set to zero and <code title=dom-DOMPoint-w>w</code> set to
    one.
+   <li><p>Let <var>point 3</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>x</var> + <var>width</var>,
+   <code title=dom-DOMPoint-y>y</code> set to <var>y</var> + <var>height</var>, <code title=dom-DOMPoint-z>z</code> set to zero and
+   <code title=dom-DOMPoint-w>w</code> set to one.
+   <li><p>Let <var>point 4</var> be a new <code>DOMPoint</code> object with <code title=dom-DOMPoint-x>x</code> set to <var>x</var>,
+   <code title=dom-DOMPoint-y>y</code> set to <var>y</var> + <var>height</var>, <code title=dom-DOMPoint-z>z</code> set to zero and
+   <code title=dom-DOMPoint-w>w</code> set to one.
    <li><p>Let <var>bounds</var> be a new <code>DOMRectReadOnly</code> object with its attributes set to the values of the namesake attributes in
    <var>rect</var>.
   </ol>
@@ -1760,8 +1760,8 @@ <h3 class=atrisk>The <code title>DOMQuad</code> Interface</h3>
    <var>p3</var>.
    <li><p>Let <var>point 4</var> be a new <code>DOMPoint</code> object with its attributes set to the values of the namesake dictionary members in
    <var>p4</var>.
-   <li><p>Let <var>bounds</var> be a new <code>DOMRectReadOnly</code> object describing the bounding box of <var>point 1</var>, <var>point 2</var>, <var>point
-   3</var> and <var>point 4</var>.
+   <li><p>Let <var>bounds</var> be a new <code>DOMRectReadOnly</code> object describing the smallest bounding box of <var>point 1</var>, <var>point 2</var>,
+   <var>point 3</var> and <var>point 4</var>.
   </ol>
  <li><p>Return a new <code>DOMQuad</code> with <code title=dom-DOMQuad-p1>p1</code> set to <var>point 1</var>, <code title=dom-DOMQuad-p2>p2</code> set to
  <var>point 2</var>, <code title=dom-DOMQuad-p3>p3</code> set to <var>point 3</var> and <code title=dom-DOMQuad-p4>p4</code> set to <var>point 4</var>, and
@@ -1780,7 +1780,7 @@ <h3 class=atrisk>The <code title>DOMQuad</code> Interface</h3>
 
 <p>The <span>associated bounding rectangle</span> is live; whenever the objects in <code title=dom-DOMQuad-p1>p1</code>, <code title=dom-DOMQuad-p2>p2</code>,
 <code title=dom-DOMQuad-p3>p3</code> or <code title=dom-DOMQuad-p4>p4</code> are changed, the <span>associated bounding rectangle</span> must update its
-attributes as appropriate to describe the new bounding box of the four points.
+attributes as appropriate to describe the new smallest bounding box of the four points.
 
 
 <h3 class=atrisk>The <code title>GeometryUtils</code> Interface</h3>