Skip to content

Commit 4367a3d

Browse files
author
Simon Pieters
committed
[cssom-view] Introduce x/y members for DOMRect. Make top/right/bottom/left readonly and represent minY/maxX/maxY/minX, respectively. http://lists.w3.org/Archives/Public/www-style/2013Sep/0780.html 
1 parent 8d01810 commit 4367a3d

2 files changed

Lines changed: 116 additions & 66 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1612,66 +1612,91 @@ <h3 id="the-domrectlist-interface"><span class="secno">11.1 </span>The <code tit
16121612

16131613
<h3 id="the-domrect-and-domrectreadonly-interfaces"><span class="secno">11.2 </span>The <code title="">DOMRect</code> and <code title="">DOMRectReadOnly</code> Interfaces</h3>
16141614

1615-
<p>Objects implementing the <code><a href="#domrect">DOMRect</a></code> or <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> interface represent a rectangular box. The type of box is specified by the
1616-
method or attribute that returns a <code><a href="#domrect">DOMRect</a></code> or <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> object. The interfaces are identical except the attributes of
1617-
<code><a href="#domrectreadonly">DOMRectReadOnly</a></code> are readonly.
1615+
<p>Objects implementing the <code><a href="#domrect">DOMRect</a></code> or <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> interface represent a <dfn id="concept-geometry-rectangle" title="concept-geometry-rectangle">rectangle</dfn>.
1616+
The type of box is specified by the method or attribute that returns a <code><a href="#domrect">DOMRect</a></code> or <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> object. The interfaces are identical
1617+
except the attributes of <code><a href="#domrectreadonly">DOMRectReadOnly</a></code> are readonly.
16181618

1619-
<pre class="idl">[<a href="#dom-domrect" title="dom-DOMRect">Constructor</a>(unrestricted double left, unrestricted double top, unrestricted double width, <!--
1619+
<p><a href="#concept-geometry-rectangle" title="concept-geometry-rectangle">Rectangles</a> have the following properties:
1620+
1621+
<dl>
1622+
<dt><dfn id="concept-geometry-rectangle-origin" title="concept-geometry-rectangle-origin">origin</dfn>
1623+
<dd><p>When the rectangle has a non-negative <a href="#concept-geometry-rectangle-width" title="concept-geometry-rectangle-width">width</a>, the rectangle's horizontal origin is the left edge;
1624+
otherwise, it is the right edge. Similarly, when the rectangle has a non-negative <a href="#concept-geometry-rectangle-height" title="concept-geometry-rectangle-height">height</a>, the rectangle's
1625+
vertical origin is the top edge; otherwise, it is the bottom edge.
1626+
<dt><dfn id="concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x coordinate</dfn>
1627+
<dd><p>The horizontal distance between the <a href="#viewport">viewport</a>'s left edge and the rectangle's <a href="#concept-geometry-rectangle-origin" title="concept-geometry-rectangle-origin">origin</a>.
1628+
<dt><dfn id="concept-geometry-rectangle-y-coordinate" title="concept-geometry-rectangle-y-coordinate">y coordinate</dfn>
1629+
<dd><p>The vertical distance between the <a href="#viewport">viewport</a>'s top edge and the rectangle's <a href="#concept-geometry-rectangle-origin" title="concept-geometry-rectangle-origin">origin</a>.
1630+
<dt><dfn id="concept-geometry-rectangle-width" title="concept-geometry-rectangle-width">width</dfn>
1631+
<dd><p>The width of the rectangle. Can be negative.
1632+
<dt><dfn id="concept-geometry-rectangle-height" title="concept-geometry-rectangle-height">height</dfn>
1633+
<dd><p>The height of the rectangle. Can be negative.
1634+
</dl>
1635+
1636+
<pre class="idl">[<a href="#dom-domrect" title="dom-DOMRect">Constructor</a>(unrestricted double x, unrestricted double y, unrestricted double width, <!--
16201637
-->unrestricted double height)]
16211638
interface <dfn id="domrect">DOMRect</dfn> {
1622-
attribute unrestricted double <a href="#dom-domrect-top" title="dom-DOMRect-top">top</a>;
1623-
attribute unrestricted double <a href="#dom-domrect-right" title="dom-DOMRect-right">right</a>;
1624-
attribute unrestricted double <a href="#dom-domrect-bottom" title="dom-DOMRect-bottom">bottom</a>;
1625-
attribute unrestricted double <a href="#dom-domrect-left" title="dom-DOMRect-left">left</a>;
1639+
attribute unrestricted double <a href="#dom-domrect-x" title="dom-DOMRect-x">x</a>;
1640+
attribute unrestricted double <a href="#dom-domrect-y" title="dom-DOMRect-y">y</a>;
16261641
attribute unrestricted double <a href="#dom-domrect-width" title="dom-DOMRect-width">width</a>;
16271642
attribute unrestricted double <a href="#dom-domrect-height" title="dom-DOMRect-height">height</a>;
1643+
readonly attribute unrestricted double <a href="#dom-domrect-top" title="dom-DOMRect-top">top</a>;
1644+
readonly attribute unrestricted double <a href="#dom-domrect-right" title="dom-DOMRect-right">right</a>;
1645+
readonly attribute unrestricted double <a href="#dom-domrect-bottom" title="dom-DOMRect-bottom">bottom</a>;
1646+
readonly attribute unrestricted double <a href="#dom-domrect-left" title="dom-DOMRect-left">left</a>;
16281647
};
16291648

16301649
interface <dfn id="domrectreadonly">DOMRectReadOnly</dfn> {
1650+
readonly attribute unrestricted double <a href="#dom-domrectreadonly-x" title="dom-DOMRectReadOnly-x">x</a>;
1651+
readonly attribute unrestricted double <a href="#dom-domrectreadonly-y" title="dom-DOMRectReadOnly-y">y</a>;
1652+
readonly attribute unrestricted double <a href="#dom-domrectreadonly-width" title="dom-DOMRectReadOnly-width">width</a>;
1653+
readonly attribute unrestricted double <a href="#dom-domrectreadonly-height" title="dom-DOMRectReadOnly-height">height</a>;
16311654
readonly attribute unrestricted double <a href="#dom-domrectreadonly-top" title="dom-DOMRectReadOnly-top">top</a>;
16321655
readonly attribute unrestricted double <a href="#dom-domrectreadonly-right" title="dom-DOMRectReadOnly-right">right</a>;
16331656
readonly attribute unrestricted double <a href="#dom-domrectreadonly-bottom" title="dom-DOMRectReadOnly-bottom">bottom</a>;
16341657
readonly attribute unrestricted double <a href="#dom-domrectreadonly-left" title="dom-DOMRectReadOnly-left">left</a>;
1635-
readonly attribute unrestricted double <a href="#dom-domrectreadonly-width" title="dom-DOMRectReadOnly-width">width</a>;
1636-
readonly attribute unrestricted double <a href="#dom-domrectreadonly-height" title="dom-DOMRectReadOnly-height">height</a>;
16371658
};
16381659

16391660
typedef (<a href="#domrect">DOMRect</a> or <a href="#domrectreadonly">DOMRectReadOnly</a>) <dfn id="domrectany">DOMRectAny</dfn>;</pre>
16401661

1641-
<p class="atrisk">The <dfn id="dom-domrect" title="dom-DOMRect"><code>DOMRect(<var>left</var>, <var>top</var>, <var>width</var>, <var>height</var>)</code></dfn> constructor, when
1662+
<p class="atrisk">The <dfn id="dom-domrect" title="dom-DOMRect"><code>DOMRect(<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>)</code></dfn> constructor, when
16421663
invoked, must run the following steps:
16431664

16441665
<ol>
1645-
<li><p>Let <var>right</var> be <var>left</var> plus <var>width</var>.
1646-
<li><p>Let <var>bottom</var> be <var>top</var> plus <var>height</var>.
1647-
<li><p>Return a new <code><a href="#domrect">DOMRect</a></code> object with <a href="#dom-domrect-top" title="dom-DOMRect-top">top</a> set to <var>top</var>, <a href="#dom-domrect-right" title="dom-DOMRect-right">right</a>
1648-
set to <var>right</var>, <a href="#dom-domrect-bottom" title="dom-DOMRect-bottom">bottom</a> set to <var>bottom</var> and <a href="#dom-domrect-left" title="dom-DOMRect-left">left</a> set to
1649-
<var>left</var>.
1666+
<li><p>Return a new <code><a href="#domrect">DOMRect</a></code> object with <a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x coordinate</a> set to <var>x</var>,
1667+
<a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">y coordinate</a> set to <var>y</var>, <a href="#concept-geometry-rectangle-width" title="concept-geometry-rectangle-width">width</a> set to
1668+
<var>width</var> and <a href="#concept-geometry-rectangle-height" title="concept-geometry-rectangle-height">height</a> set to <var>height</var>.
16501669
</ol>
16511670

1652-
<p>The <dfn id="dom-domrect-top" title="dom-DOMRect-top"><code>top</code></dfn> attribute gives the y-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the top of
1653-
the rectangle box. On getting, it must return the current value. On setting, the current value must be set to the new value.</p>
1671+
<p>The <dfn id="dom-domrect-x" title="dom-DOMRect-x"><code>x</code></dfn> attribute, on getting, it must return the <a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x
1672+
coordinate</a>. On setting, the <a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x coordinate</a> must be set to the new value.</p>
1673+
1674+
<p>The <dfn id="dom-domrect-y" title="dom-DOMRect-y"><code>y</code></dfn> attribute, on getting, it must return the <a href="#concept-geometry-rectangle-y-coordinate" title="concept-geometry-rectangle-y-coordinate">y
1675+
coordinate</a>. On setting, the <a href="#concept-geometry-rectangle-y-coordinate" title="concept-geometry-rectangle-y-coordinate">y coordinate</a> must be set to the new value.</p>
1676+
1677+
<p>The <dfn id="dom-domrect-width" title="dom-DOMRect-width"><code>width</code></dfn> attribute, on getting, must return the <a href="#concept-geometry-rectangle-width" title="concept-geometry-rectangle-width">width</a>.
1678+
On setting, the <a href="#concept-geometry-rectangle-width" title="concept-geometry-rectangle-width">width</a> must be set to the new value.
16541679

1655-
<p>The <dfn id="dom-domrect-right" title="dom-DOMRect-right"><code>right</code></dfn> attribute gives the x-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the
1656-
right of the rectangle box. On getting, it must return the current value. On setting, the current value must be set to the new value.</p>
1680+
<p>The <dfn id="dom-domrect-height" title="dom-DOMRect-height"><code>height</code></dfn> attribute, on getting, must return the
1681+
<a href="#concept-geometry-rectangle-height" title="concept-geometry-rectangle-height">height</a>. On setting, the <a href="#concept-geometry-rectangle-height" title="concept-geometry-rectangle-height">height</a> must be set to the new
1682+
value.
16571683

1658-
<p>The <dfn id="dom-domrect-bottom" title="dom-DOMRect-bottom"><code>bottom</code></dfn> attribute gives the y-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the
1659-
bottom of the rectangle box. On getting, it must return the current value. On setting, the current value must be set to the new value.</p>
1684+
<p>The <dfn id="dom-domrect-top" title="dom-DOMRect-top"><code>top</code></dfn> attribute, on getting, must return min(<a href="#concept-geometry-rectangle-y-coordinate" title="concept-geometry-rectangle-y-coordinate">y
1685+
coordinate</a>, <a href="#concept-geometry-rectangle-y-coordinate" title="concept-geometry-rectangle-y-coordinate">y coordinate</a> - <a href="#concept-geometry-rectangle-height" title="concept-geometry-rectangle-height">height</a>).
16601686

1661-
<p>The <dfn id="dom-domrect-left" title="dom-DOMRect-left"><code>left</code></dfn> attribute gives the x-coordinate, relative to the <a href="#viewport">viewport</a> origin, of the left
1662-
of the rectangle box. On getting, it must return the current value. On setting, the current value must be set to the new value.</p>
1687+
<p>The <dfn id="dom-domrect-right" title="dom-DOMRect-right"><code>right</code></dfn> attribute, on getting, must return max(<a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x
1688+
coordinate</a>, <a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x coordinate</a> + <a href="#concept-geometry-rectangle-width" title="concept-geometry-rectangle-width">width</a>).
16631689

1664-
<p>The <dfn id="dom-domrect-width" title="dom-DOMRect-width"><code>width</code></dfn> attribute, on getting, must return the value of <code title="dom-DOMRect-right"><a href="#dom-domrect-right">right</a></code> minus
1665-
<code title="dom-DOMRect-left"><a href="#dom-domrect-left">left</a></code>. On setting, the <code title="dom-DOMRect-right"><a href="#dom-domrect-right">right</a></code> attribute must be set to the new value plus the value of
1666-
<code title="dom-DOMRect-left"><a href="#dom-domrect-left">left</a></code>.</p>
1690+
<p>The <dfn id="dom-domrect-bottom" title="dom-DOMRect-bottom"><code>bottom</code></dfn> attribute, on getting, must return max(<a href="#concept-geometry-rectangle-y-coordinate" title="concept-geometry-rectangle-y-coordinate">y
1691+
coordinate</a>, <a href="#concept-geometry-rectangle-y-coordinate" title="concept-geometry-rectangle-y-coordinate">y coordinate</a> + <a href="#concept-geometry-rectangle-height" title="concept-geometry-rectangle-height">height</a>).
16671692

1668-
<p>The <dfn id="dom-domrect-height" title="dom-DOMRect-height"><code>height</code></dfn> attribute, on getting, must return the value of <code title="dom-DOMRect-bottom"><a href="#dom-domrect-bottom">bottom</a></code>
1669-
minus <code title="dom-DOMRect-top"><a href="#dom-domrect-top">top</a></code>. On setting, the <code title="dom-DOMRect-bottom"><a href="#dom-domrect-bottom">bottom</a></code> attribute must be set to the new value plus the value
1670-
of <code title="dom-DOMRect-top"><a href="#dom-domrect-top">top</a></code>.</p>
1693+
<p>The <dfn id="dom-domrect-left" title="dom-DOMRect-left"><code>left</code></dfn> attribute, on getting, must return min(<a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x
1694+
coordinate</a>, <a href="#concept-geometry-rectangle-x-coordinate" title="concept-geometry-rectangle-x-coordinate">x coordinate</a> - <a href="#concept-geometry-rectangle-width" title="concept-geometry-rectangle-width">width</a>).
16711695

1672-
<p>The <dfn id="dom-domrectreadonly-top" title="dom-DOMRectReadOnly-top"><code>top</code></dfn>, <dfn id="dom-domrectreadonly-right" title="dom-DOMRectReadOnly-right"><code>right</code></dfn>,
1673-
<dfn id="dom-domrectreadonly-bottom" title="dom-DOMRectReadOnly-bottom"><code>bottom</code></dfn>, <dfn id="dom-domrectreadonly-left" title="dom-DOMRectReadOnly-left"><code>left</code></dfn>,
1674-
<dfn id="dom-domrectreadonly-width" title="dom-DOMRectReadOnly-width"><code>width</code></dfn> and <dfn id="dom-domrectreadonly-height" title="dom-DOMRectReadOnly-height"><code>height</code></dfn> attributes of the
1696+
<p>The <dfn id="dom-domrectreadonly-x" title="dom-DOMRectReadOnly-x"><code>x</code></dfn>, <dfn id="dom-domrectreadonly-y" title="dom-DOMRectReadOnly-y"><code>y</code></dfn>,
1697+
<dfn id="dom-domrectreadonly-width" title="dom-DOMRectReadOnly-width"><code>width</code></dfn>, <dfn id="dom-domrectreadonly-height" title="dom-DOMRectReadOnly-height"><code>height</code></dfn>,
1698+
<dfn id="dom-domrectreadonly-top" title="dom-DOMRectReadOnly-top"><code>top</code></dfn>, <dfn id="dom-domrectreadonly-right" title="dom-DOMRectReadOnly-right"><code>right</code></dfn>,
1699+
<dfn id="dom-domrectreadonly-bottom" title="dom-DOMRectReadOnly-bottom"><code>bottom</code></dfn> and <dfn id="dom-domrectreadonly-left" title="dom-DOMRectReadOnly-left"><code>left</code></dfn> attributes of the
16751700
<code><a href="#domrectreadonly">DOMRectReadOnly</a></code> interface, on getting, must behave the same as the attribute of the same name on the <code><a href="#domrect">DOMRect</a></code> interface.
16761701

16771702

0 commit comments

Comments
 (0)