FFFF cleanup the getClientRects and getBoundingClientRect stuff · w3c/csswg-drafts@d966395 · GitHub
Skip to content

Commit d966395

Browse files
annevkannevk
committed
cleanup the getClientRects and getBoundingClientRect stuff
1 parent 18669d9 commit d966395

2 files changed

Lines changed: 138 additions & 137 deletions

File tree

‎cssom/Overview.html‎

Lines changed: 71 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2316,7 +2316,7 @@ <h3 id=the-documentlayout><span class=secno>4.2. </span>The <code><a
23162316

23172317
<pre class=idl>interface <dfn id=documentlayout>DocumentLayout</dfn> {
23182318
Element <a href="#documentlayout-elementfrompoint" title=documentlayout-elementfrompoint>elementFromPoint</a>(in unsigned long <var title="">x</var>, in unsigned long <var title="">y</var>);
2319-
}</pre>
2319+
};</pre>
23202320

23212321
<p>The <dfn id=documentlayout-elementfrompoint
23222322
title=documentlayout-elementfrompoint><code>elementFromPoint(<var
@@ -2334,24 +2334,24 @@ <h3 id=the-elementlayout><span class=secno>4.3. </span>The <code><a
23342334
href="#elementlayout">ElementLayout</a></code> interface. [DOM3Core]
23352335

23362336
<pre class=idl>interface <dfn id=elementlayout>ElementLayout</dfn> {
2337-
<a href="#textrectanglelist">TextRectangleList</a> <a href="#elementlayout-getclientrects">getClientRects</a>();
2338-
<a href="#textrectangle">TextRectangle</a> <a href="#elementlayout-getboundingclientrect">getBoundingClientRect</a>();
2339-
2340-
readonly attribute float <a href="#elementlayout-offsettop">offsetTop</a>;
2341-
readonly attribute float <a href="#elementlayout-offsetleft">offsetLeft</a>;
2342-
readonly attribute float <a href="#elementlayout-offsetwidth">offsetWidth</a>;
2343-
readonly attribute float <a href="#elementlayout-offsetheight">offsetHeight</a>;
2344-
readonly attribute HTMLElement <a href="#elementlayout-offsetparent">offsetParent</a>; // HTMLElement
2345-
2346-
attribute float <span>scrollTop</span>; // scroll on setting
2347-
attribute float <span>scrollLeft</span>; // scroll on setting
2348-
readonly attribute float <span>scrollWidth</span>;
2349-
readonly attribute float <span>scrollHeight</span>;
2350-
2351-
readonly attribute float <a href="#elementlayout-clienttop">clientTop</a>;
2352-
readonly attribute float <a href="#elementlayout-clientleft">clientLeft</a>;
2353-
readonly attribute float <a href="#elementlayout-clientwidth">clientWidth</a>;
2354-
readonly attribute float <a href="#elementlayout-clientheight">clientHeight</a>;
2337+
<a href="#textrectanglelist">TextRectangleList</a> <a href="#elementlayout-getclientrects">getClientRects</a>();
2338+
<a href="#textrectangle">TextRectangle</a> <a href="#elementlayout-getboundingclientrect">getBoundingClientRect</a>();
2339+
2340+
readonly attribute float <a href="#elementlayout-offsettop">offsetTop</a>;
2341+
readonly attribute float <a href="#elementlayout-offsetleft">offsetLeft</a>;
2342+
readonly attribute float <a href="#elementlayout-offsetwidth">offsetWidth</a>;
2343+
readonly attribute float <a href="#elementlayout-offsetheight">offsetHeight</a>;
2344+
readonly attribute HTMLElement <a href="#elementlayout-offsetparent">offsetParent</a>; // HTMLElement
2345+
2346+
attribute float <span>scrollTop</span>; // scroll on setting
2347+
attribute float <span>scrollLeft</span>; // scroll on setting
2348+
readonly attribute float <span>scrollWidth</span>;
2349+
readonly attribute float <span>scrollHeight</span>;
2350+
2351+
readonly attribute float <a href="#elementlayout-clienttop">clientTop</a>;
2352+
readonly attribute float <a href="#elementlayout-clientleft">clientLeft</a>;
2353+
readonly attribute float <a href="#elementlayout-clientwidth">clientWidth</a>;
2354+
readonly attribute float <a href="#elementlayout-clientheight">clientHeight</a>;
23552355
};</pre>
23562356

23572357
<h4 id=the-getclientrects><span class=secno>4.3.1. </span>The <code><a
@@ -2365,17 +2365,18 @@ <h4 id=the-getclientrects><span class=secno>4.3.1. </span>The <code><a
23652365

23662366
<p>The <dfn
23672367
id=elementlayout-getclientrects><code>getClientRects()</code></dfn> method
2368-
of element <var>A</var> <em class=ct>must</em> return a <code><a
2368+
<em class=ct>must</em>, when invoked, return a <code><a
23692369
href="#textrectanglelist">TextRectangleList</a></code> object containing a
23702370
list of <code><a href="#textrectangle">TextRectangle</a></code> objects
2371-
describing the border boxes for <var>A</var>.
2371+
describing the border boxes for the element on which it was invoked.
23722372

23732373
<p>The <dfn
23742374
id=elementlayout-getboundingclientrect><code>getBoundingClientRect()</code></dfn>
2375-
method of element <var>A</var> <em class=ct>must</em> return a union of
2376-
the rectangles returned by <code><a
2375+
method <em class=ct>must</em>, when invoked, return a union of the
2376+
rectangles returned by <code><a
23772377
href="#elementlayout-getclientrects">getClientRects()</a></code> in a
2378-
<code><a href="#textrectangle">TextRectangle</a></code> object.
2378+
single <code><a href="#textrectangle">TextRectangle</a></code> object for
2379+
the element on which it was invoked.
23792380

23802381
<p>The values of the attributes of the <code><a
23812382
href="#textrectangle">TextRectAngle</a></code> object <em
@@ -2420,64 +2421,61 @@ <h5 id=the-textrectanglelist><span class=secno>4.3.1.1. </span>The <code><a
24202421

24212422
<pre
24222423
class=idl>interface <dfn id=textrectanglelist>TextRectangleList</dfn> {
2423-
readonly attribute unsigned long <a href="#textrectanglelist-length" title=textrectanglelist-length>length</a>;
2424-
<a href="#textrectangle">TextRectangle</a> <a href="#textrectanglelist-item" title=textrectanglelist-item>item</a>(in unsigned long <var title="">index</var>);
2424+
readonly attribute unsigned long <a href="#textrectanglelist-length" title=textrectanglelist-length>length</a>;
2425+
<a href="#textrectangle">TextRectangle</a> <a href="#textrectanglelist-item" title=textrectanglelist-item>item</a>(in unsigned long <var title="">index</var>);
24252426
};</pre>
24262427

2427-
<dl class=members>
2428-
<dt><dfn id=textrectanglelist-length
2429-
title=textrectanglelist-length><code>length</code> of type <code>unsigned
2430-
long</code>, readonly</dfn>
2431-
2432-
<dd>This attribute <em class=ct>must</em> return the number of <code><a
2433-
href="#textrectangle">TextRectangle</a></code> objects associated with
2434-
the object.
2435-
2436-
<dt><dfn id=textrectanglelist-item
2437-
title=textrectanglelist-item><code>item(<var
2438-
title="">index</var>)</code>, method</dfn>
2439-
2440-
<dd>When invoked, if <var title="">index</var> is negative or greater than
2441-
the number of <code><a href="#textrectangle">TextRectangle</a></code>
2442-
objects associated with the object an <code>INDEX_SIZE_ERR</code>
2443-
exception <em class=ct>must</em> be raised. Otherwise, the <code><a
2444-
href="#textrectangle">TextRectangle</a></code> object at <var
2445-
title="">index</var> <em class=ct>must</em> be returned.
2446-
</dl>
2428+
<p>The <dfn id=textrectanglelist-length
2429+
title=textrectanglelist-length><code>length</code> attribute <em
2430+
class=ct>must</em> return the number of <code>TextRectangle</code> objects
2431+
associated with the object.</dfn>
2432+
2433+
<p>The <dfn id=textrectanglelist-item
2434+
title=textrectanglelist-item><code>item(<var
2435+
title="">index</var>)</code></dfn> method, when invoked, <em
2436+
class=ct>must</em> raise an <code>INDEX_SIZE_ERR</code> exception when
2437+
<var title="">index</var> is negative or greater than the number of
2438+
<code><a href="#textrectangle">TextRectangle</a></code> objects associated
2439+
with the object. Otherwise, the <code><a
2440+
href="#textrectangle">TextRectangle</a></code> object at <var
2441+
title="">index</var> <em class=ct>must</em> be returned.
2442+
2443+
<p>In ECMAScript implementations, objects that implement the <code><a
2444+
href="#textrectanglelist">TextRectangleList</a></code> interface <em
2445+
class=ct>must</em> also have a <code>[[Get]]</code> method that, when
2446+
invoked with a number, acts like the <code title=textrectanglelist-item><a
2447+
href="#textrectanglelist-item">item()</a></code> method would when invoked
2448+
with that argument.
24472449

24482450
<h5 id=the-textrectangle><span class=secno>4.3.1.2. </span>The <code><a
24492451
href="#textrectangle">TextRectangle</a></code> Interface</h5>
24502452

24512453
<pre class=idl>interface <dfn id=textrectangle>TextRectangle</dfn> {
2452-
readonly attribute float <a href="#textrectangle-top" title=textrectangle-top>top</a>;
2453-
readonly attribute float <a href="#textrectangle-right" title=textrectangle-right>right</a>;
2454-
readonly attribute float <a href="#textrectangle-bottom" title=textrectangle-bottom>bottom</a>;
2455-
readonly attribute float <a href="#textrectangle-left" title=textrectangle-left>left</a>;
2454+
readonly attribute float <a href="#textrectangle-top" title=textrectangle-top>top</a>;
2455+
readonly attribute float <a href="#textrectangle-right" title=textrectangle-right>right</a>;
2456+
readonly attribute float <a href="#textrectangle-bottom" title=textrectangle-bottom>bottom</a>;
2457+
readonly attribute float <a href="#textrectangle-left" title=textrectangle-left>left</a>;
24562458
}</pre>
24572459

2458-
<dl class=members>
2459-
<dt><dfn id=textrectangle-top title=textrectangle-top><code>top</code> of
2460-
type <code>float</code>, readonly</dfn>
2461-
2462-
<dd>...
2463-
2464-
<dt><dfn id=textrectangle-right
2465-
title=textrectangle-right><code>right</code> of type <code>float</code>,
2466-
readonly</dfn>
2467-
2468-
<dd>...
2469-
2470-
<dt><dfn id=textrectangle-bottom
2471-
title=textrectangle-bottom><code>bottom</code> of type
2472-
<code>float</code>, readonly</dfn>
2473-
2474-
< 232D dd>...
2475-
2476-
<dt><dfn id=textrectangle-left title=textrectangle-left><code>left</code>
2477-
of type <code>float</code>, readonly</dfn>
2478-
2479-
<dd>...
2480-
</dl>
2460+
<p>The <dfn id=textrectangle-top
2461+
title=textrectangle-top><code>top</code></dfn> attribute, on getting, <em
2462+
class=ct>must</em> return the distance between the top of the viewport and
2463+
the top of the rectangle box.
2464+
2465+
<p>The <dfn id=textrectangle-right
2466+
title=textrectangle-right><code>right</code></dfn> attribute, on getting,
2467+
<em class=ct>must</em> return the distance between the left of the
2468+
viewport and the right of the rectangle box.
2469+
2470+
<p>The <dfn id=textrectangle-bottom
2471+
title=textrectangle-bottom><code>bottom</code></dfn> attribute, on
2472+
getting, <em class=ct>must</em> return the distance between the top of the
2473+
viewport and the bottom of the rectangle box.
2474+
2475+
<p>The <dfn id=textrectangle-left
2476+
title=textrectangle-left><code>left</code></dfn> attribute, on getting,
2477+
<em class=ct>must</em> return the distance between the left of the
2478+
viewport and the left of the rectangle box.
24812479

24822480
<h4 id=the-offset><span class=secno>4.3.2. </span>The
24832481
<code>offset<var>*</var></code> attributes</h4>

‎cssom/Overview.src.html‎

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1903,7 +1903,7 @@ <h3>The <code>DocumentLayout</code> Interface</h3>
19031903

19041904
<pre class="idl">interface <dfn>DocumentLayout</dfn> {
19051905
Element <span title="documentlayout-elementfrompoint">elementFromPoint</span>(in unsigned long <var title="">x</var>, in unsigned long <var title="">y</var>);
1906-
}</pre>
1906+
};</pre>
19071907

19081908
<p>The
19091909
<dfn id="documentlayout-elementfrompoint" title="documentlayout-elementfrompoint"><code>elementFromPoint(<var title="">x</var>,
@@ -1921,24 +1921,24 @@ <h3>The <code>ElementLayout</code> Interface</h3>
19211921
interface. [DOM3Core]</p>
19221922

19231923
<pre class="idl">interface <dfn>ElementLayout</dfn> {
1924-
<span>TextRectangleList</span> <span>getClientRects</span>();
1925-
<span>TextRectangle</span> <span>getBoundingClientRect</span>();
1926-
1927-
readonly attribute float <span>offsetTop</span>;
1928-
readonly attribute float <span>offsetLeft</span>;
1929-
readonly attribute float <span>offsetWidth</span>;
1930-
readonly attribute float <span>offsetHeight</span>;
1931-
readonly attribute HTMLElement <span>offsetParent</span>; // HTMLElement
1932-
1933-
attribute float <span>scrollTop</span>; // scroll on setting
1934-
attribute float <span>scrollLeft</span>; // scroll on setting
1935-
readonly attribute float <span>scrollWidth</span>;
1936-
readonly attribute float <span>scrollHeight</span>;
1937-
1938-
readonly attribute float <span>clientTop</span>;
1939-
readonly attribute float <span>clientLeft</span>;
1940-
readonly attribute float <span>clientWidth</span>;
1941-
readonly attribute float <span>clientHeight</span>;
1924+
<span>TextRectangleList</span> <span>getClientRects</span>();
1925+
<span>TextRectangle</span> <span>getBoundingClientRect</span>();
1926+
1927+
readonly attribute float <span>offsetTop</span>;
1928+
readonly attribute float <span>offsetLeft</span>;
1929+
readonly attribute float <span>offsetWidth</span>;
1930+
readonly attribute float <span>offsetHeight</span>;
1931+
readonly attribute HTMLElement <span>offsetParent</span>; // HTMLElement
1932+
1933+
attribute float <span>scrollTop</span>; // scroll on setting
1934+
attribute float <span>scrollLeft</span>; // scroll on setting
1935+
readonly attribute float <span>scrollWidth</span>;
1936+
readonly attribute float <span>scrollHeight</span>;
1937+
1938+
readonly attribute float <span>clientTop</span>;
1939+
readonly attribute float <span>clientLeft</span>;
1940+
readonly attribute float <span>clientWidth</span>;
1941+
readonly attribute float <span>clientHeight</span>;
19421942
};</pre>
19431943

19441944
<h4>The <code>getClientRects()</code> and <code>getBoundingClientRect</code>
@@ -1950,16 +1950,16 @@ <h4>The <code>getClientRects()</code> and <code>getBoundingClientRect</code>
19501950

19511951
<p>The
19521952
<dfn id="elementlayout-getclientrects"><code>getClientRects()</code></dfn>
1953-
method of element <var>A</var> <em class="ct">must</em> return a
1953+
method <em class="ct">must</em>, when invoked, return a
19541954
<code>TextRectangleList</code> object containing a list of
1955-
<code>TextRectangle</code> objects describing the border boxes for
1956-
<var>A</var>.</p>
1955+
<code>TextRectangle</code> objects describing the border boxes for the element
1956+
on which it was invoked.</p>
19571957

19581958
<p>The
19591959
<dfn id="elementlayout-getboundingclientrect"><code>getBoundingClientRect()</code></dfn>
1960-
method of element <var>A</var> <em class="ct">must</em> return a union of
1961-
the rectangles returned by <code>getClientRects()</code> in a
1962-
<code>TextRectangle</code> object.</p>
1960+
method <em class="ct">must</em>, when invoked, return a union of the
1961+
rectangles returned by <code>getClientRects()</code> in a single
1962+
<code>TextRectangle</code> object for the element on which it was invoked.</p>
19631963

19641964
<p>The values of the attributes of the <code>TextRectAngle</code> object
19651965
<em class="ct">must</em> all be expressed in CSS pixels. They are all relative
@@ -1993,64 +1993,67 @@ <h4>The <code>getClientRects()</code> and <code>getBoundingClientRect</code>
19931993
the top-left of the border-box for the first (content order) CSS box for the
19941994
element.
19951995
-->
1996+
19961997
<h5>The <code>TextRectangleList</code> Interface</h5>
19971998

19981999
<p>The <code>TextRectangleList</code> object consists of an ordered list of
19992000
<code>TextRectAngle</code> objects.</p>
20002001

20012002
<pre class="idl">interface <dfn>TextRectangleList</dfn> {
2002-
readonly attribute unsigned long <span title="textrectanglelist-length">length</span>;
2003-
<span>TextRectangle</span> <span title="textrectanglelist-item">item</span>(in unsigned long <var title="">index</var>);
2003+
readonly attribute unsigned long <span title="textrectanglelist-length">length</span>;
2004+
<span>TextRectangle</span> <span title="textrectanglelist-item">item</span>(in unsigned long <var title="">index</var>);
20042005
};</pre>
20052006

2006-
<dl class="members">
2007-
<dt><dfn id="textrectanglelist-length" title="textrectanglelist-length"><code>length</code>
2008-
of type <code>unsigned long</code>, readonly</dfn></dt>
2009-
2010-
<dd>This attribute <em class="ct">must</em> return the number of
2011-
<code>TextRectangle</code> objects associated with the object.</dd>
2012-
2013-
<dt><dfn id="textrectanglelist-item" title="textrectanglelist-item"><code>item(<var title="">index</var>)</code>,
< D89D /code>
2014-
method</dfn></dt>
2007+
<p>The
2008+
<dfn id="textrectanglelist-length" title="textrectanglelist-length"><code>length</code>
2009+
attribute <em class="ct">must</em> return the number of
2010+
<code>TextRectangle</code> objects associated with the object.</p>
20152011

2016-
<dd>When invoked, if <var title="">index</var> is negative or greater than
2017-
the number of <code>TextRectangle</code> objects associated with the object
2018-
an <code>INDEX_SIZE_ERR</code> exception <em class="ct">must</em> be
2019-
raised. Otherwise, the <code>TextRectangle</code> object at
2020-
<var title="">index</var> <em class="ct">must</em> be returned.</dd>
2021-
</dl>
2012+
<p>The
2013+
<dfn id="textrectanglelist-item" title="textrectanglelist-item"><code>item(<var title="">index</var>)</code></dfn>
2014+
method, when invoked, <em class="ct">must</em> raise an
2015+
<code>INDEX_SIZE_ERR</code> exception when <var title="">index</var> is
2016+
negative or greater than the number of <code>TextRectangle</code> objects
2017+
associated with the object. Otherwise, the <code>TextRectangle</code> object
2018+
at <var title="">index</var> <em class="ct">must</em> be returned.</p>
2019+
2020+
<p>In ECMAScript implementations, objects that implement the
2021+
<code>TextRectangleList</code> interface <em class="ct">must</em> also have a
2022+
<code>[[Get]]</code> method that, when invoked with a number, acts like the
2023+
<code title="textrectanglelist-item">item()</code> method would when invoked
2024+
with that argument.</p>
20222025

20232026
<h5>The <code>TextRectangle</code> Interface</h5>
20242027

20252028
<pre class="idl">interface <dfn>TextRectangle</dfn> {
2026-
readonly attribute float <span title="textrectangle-top">top</span>;
2027-
readonly attribute float <span title="textrectangle-right">right</span>;
2028-
readonly attribute float <span title="textrectangle-bottom">bottom</span>;
2029-
readonly attribute float <span title="textrectangle-left">left</span>;
2029+
readonly attribute float <span title="textrectangle-top">top</span>;
2030+
readonly attribute float <span title="textrectangle-right">right</span>;
2031+
readonly attribute float <span title="textrectangle-bottom">bottom</span>;
2032+
readonly attribute float <span title="textrectangle-left">left</span>;
20302033
}</pre>
2034+
2035+
<p>The
2036+
<dfn id="textrectangle-top" title="textrectangle-top"><code>top</code></dfn>
2037+
attribute, on getting, <em class="ct">must</em> return the distance between
2038+
the top of the viewport and the top of the rectangle box.</p>
20312039

2032-
<dl class="members">
2033-
<dt><dfn id="textrectangle-top" title="textrectangle-top"><code>top</code>
2034-
of type <code>float</code>, readonly</dfn></dt>
2035-
2036-
<dd>...</dd>
2037-
2038-
<dt><dfn id="textrectangle-right" title="textrectangle-right"><code>right</code>
2039-
of type <code>float</code>, readonly</dfn></dt>
2040-
2041-
<dd>...</dd>
2042-
2043-
<dt><dfn id="textrectangle-bottom" title="textrectangle-bottom"><code>bottom</code>
2044-
of type <code>float</code>, readonly</dfn></dt>
2040+
<p>The
2041+
<dfn id="textrectangle-right" title="textrectangle-right"><code>right</code></dfn>
2042+
attribute, on getting, <em class="ct">must</em> return the distance between
2043+
the left of the viewport and the right of the rectangle box.</p>
2044+
2045+
<p>The
2046+
<dfn id="textrectangle-bottom" title="textrectangle-bottom"><code>bottom</code></dfn>
2047+
attribute, on getting, <em class="ct">must</em> return the distance between
2048+
the top of the viewport and the bottom of the rectangle box.</p>
20452049

2046-
<dd>...</dd>
20472050

2048-
<dt><dfn id="textrectangle-left" title="textrectangle-left"><code>left</code>
2049-
of type <code>float</code>, readonly</dfn></dt>
2051+
<p>The
2052+
<dfn id="textrectangle-left" title="textrectangle-left"><code>left</code></dfn>
2053+
attribute, on getting, <em class="ct">must</em> return the distance between
2054+
the left of the viewport and the left of the rectangle box.</p>
20502055

2051-
<dd>...</dd>
20522056

2053-
</dl>
20542057

20552058
<h4>The <code>offset<var>*</var></code> attributes</h4>
20562059

0 commit comments

Comments
 (0)