You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1441 lines
78 KiB
1441 lines
78 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="en-US"><head>
|
|
<title>CSSOM View Module</title>
|
|
|
|
<style type="text/css">
|
|
pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
|
|
pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
|
|
dfn { font-weight:bold; font-style:normal }
|
|
div.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
|
|
div.example code { color:inherit }
|
|
p.note { margin-left:2em; color:green; font-style:italic; font-weight:bold }
|
|
p.note::before { content:"Note: " }
|
|
.XXX { padding:.5em; border:solid red }
|
|
.XXX::before { content:"Issue: " }
|
|
code { color:orangered }
|
|
code :link, code :visited { color:inherit }
|
|
</style>
|
|
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="draft">
|
|
<div class="head">
|
|
|
|
<!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
|
|
<!--end-logo-->
|
|
|
|
<h1 id="cssom-view-module">CSSOM View Module</h1>
|
|
|
|
<h2 class="no-num no-toc" id="w3c-doctype">W3C Working Draft 4 August 2011</h2>
|
|
|
|
<dl>
|
|
|
|
<dt>This Version:</dt>
|
|
<dd class="publish"><a href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/">http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a></dd>
|
|
|
|
<dt class="publish">Latest Version:</dt>
|
|
<dd class="publish"><a href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></dd>
|
|
|
|
<dt class="publish">Latest Editor Draft:</dt>
|
|
<dd class="publish"><a href="http://dev.w3.org/csswg/cssom-view/">http://dev.w3.org/csswg/cssom-view/</a></dd>
|
|
|
|
<dt>Previous Versions:</dt>
|
|
<dd><a href="http://www.w3.org/TR/2009/WD-cssom-view-20090804/">http://www.w3.org/TR/2009/WD-cssom-view-20090804/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2008/WD-cssom-view-20080222/">http://www.w3.org/TR/2008/WD-cssom-view-20080222/</a></dd>
|
|
|
|
<dt>Editor:</dt>
|
|
<dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
|
|
(<a href="http://www.opera.com/">Opera Software ASA</a>)
|
|
<<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd>
|
|
</dl>
|
|
|
|
|
|
<!--begin-copyright-->
|
|
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
|
|
|
|
<p>The APIs introduced by this specification provide authors with a way to
|
|
inspect and manipulate the visual view of a document. This includes
|
|
getting the position of element layout boxes, obtaining the width
|
|
of the viewport through script, and also scrolling an element.</p>
|
|
|
|
|
|
|
|
<h2 class="no-num no-toc" id="sotd">Status of this Document</h2>
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>This is the 4 August 2011 W3C Working Draft of CSSOM View. Please send
|
|
comments to
|
|
<a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a>
|
|
(<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
|
|
with <samp>[cssom-view]</samp> at the start of the subject line.
|
|
|
|
<p>This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
|
|
<h2 class="no-num no-toc" id="toc">Table of Contents</h2>
|
|
|
|
|
|
<!--begin-toc-->
|
|
<ol class="toc">
|
|
<li><a href="#background"><span class="secno">1 </span>Background</a></li>
|
|
<li><a href="#conformance"><span class="secno">2 </span>Conformance</a>
|
|
<ol class="toc">
|
|
<li><a href="#webidl"><span class="secno">2.1 </span>Web IDL</a></ol></li>
|
|
<li><a href="#terminology"><span class="secno">3 </span>Terminology</a>
|
|
<ol class="toc">
|
|
<li><a href="#css-pixels"><span class="secno">3.1 </span>CSS pixels</a></ol></li>
|
|
<li><a href="#extensions-to-the-window-interface"><span class="secno">4 </span>Extensions to the <code title="">Window</code> Interface</a>
|
|
<ol class="toc">
|
|
<li><a href="#the-mediaquerylist-interface"><span class="secno">4.1 </span>The <code title="">MediaQueryList</code> Interface</a></li>
|
|
<li><a href="#the-screen-interface"><span class="secno">4.2 </span>The <code title="">Screen</code> Interface</a></ol></li>
|
|
<li><a href="#extensions-to-the-document-interface"><span class="secno">5 </span>Extensions to the <code title="">Document</code> Interface</a>
|
|
<ol class="toc">
|
|
<li><a href="#the-caretposition-interface"><span class="secno">5.1 </span>The <code title="">CaretPosition</code> Interface</a></ol></li>
|
|
<li><a href="#extensions-to-the-element-interface"><span class="secno">6 </span>Extensions to the <code title="">Element</code> Interface</a>
|
|
<ol class="toc">
|
|
<li><a href="#the-getclientrects-and-getboundingclientrect-methods"><span class="secno">6.1 </span>The <code title="">getClientRects()</code> and
|
|
<code title="">getBoundingClientRect()</code> methods</a></li>
|
|
<li><a href="#element-scrolling-members"><span class="secno">6.2 </span><code title="">Element</code> Scrolling Members</a></li>
|
|
<li><a href="#client-attributes"><span class="secno">6.3 </span>The <code title="">clientTop</code>,
|
|
<code title="">clientLeft</code>, <code title="">clientWidth</code>, and
|
|
<code title="">clientHeight</code> attributes</a></ol></li>
|
|
<li><a href="#extensions-to-the-htmlelement-interface"><span class="secno">7 </span>Extensions to the <code title="">HTMLElement</code> Interface</a>
|
|
<ol class="toc">
|
|
<li><a href="#offset-attributes"><span class="secno">7.1 </span>The <code title="">offsetParent</code>,
|
|
<code title="">offsetTop</code>, <code title="">offsetLeft</code>,
|
|
<code title="">offsetWidth</code>, and <code title="">offsetHeight</code>
|
|
attributes</a></ol></li>
|
|
<li><a href="#extensions-to-the-range-interface"><span class="secno">8 </span>Extensions to the <code title="">Range</code> Interface</a></li>
|
|
<li><a href="#extensions-to-the-mouseevent-interface"><span class="secno">9 </span>Extensions to the <code title="">MouseEvent</code> Interface</a></li>
|
|
<li><a href="#rectangles"><span class="secno">10 </span>Rectangles</a>
|
|
<ol class="toc">
|
|
<li><a href="#the-clientrectlist-interface"><span class="secno">10.1 </span>The <code title="">ClientRectList</code> Interface</a></li>
|
|
<li><a href="#the-clientrect-interface"><span class="secno">10.2 </span>The <code title="">ClientRect</code> Interface</a></ol></li>
|
|
<li><a class="no-num" href="#references">References</a>
|
|
<ol class="toc">
|
|
<li><a class="no-num" href="#normative-references">Normative references</a></ol></li>
|
|
<li><a class="no-num" href="#acknowledgments">Acknowledgments</a></ol>
|
|
<!--end-toc-->
|
|
|
|
|
|
<h2 id="background"><span class="secno">1 </span>Background</h2>
|
|
|
|
<p>Many of the features defined in this specification have been supported
|
|
by browsers for a long period of time. The goal of this specification is
|
|
to define these features in such a way that they can be implemented by all
|
|
browsers in an interoperable manner. The specification also defines a
|
|
couple of new features that will hopefully be useful to authors. (If they
|
|
are not you can bug us!)</p>
|
|
|
|
|
|
<h2 id="conformance"><span class="secno">2 </span>Conformance</h2>
|
|
|
|
<p>All diagrams, examples, and notes in this specification are
|
|
non-normative, as are all sections explicitly marked non-normative.
|
|
Everything else in this specification is normative.
|
|
|
|
<p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
|
|
NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
|
|
"OPTIONAL" in the normative parts of this document are to be
|
|
interpreted as described in RFC2119. For readability, these words do
|
|
not appear in all uppercase letters in this specification. <a href="#refsRFC2119">[RFC2119]</a>
|
|
|
|
<p>Requirements phrased in the imperative as part of algorithms
|
|
(such as "strip any leading space characters" or "return false and
|
|
terminate these steps") are to be interpreted with the meaning of the
|
|
key word ("must", "should", "may", etc) used in introducing the
|
|
algorithm.
|
|
|
|
<p>Conformance requirements phrased as algorithms or specific steps
|
|
may be implemented in any manner, so long as the end result is
|
|
equivalent. (In particular, the algorithms defined in this
|
|
specification are intended to be easy to follow, and not intended to
|
|
be performant.)
|
|
|
|
<p id="hardwareLimitations">User agents may impose
|
|
implementation-specific limits on otherwise unconstrained inputs,
|
|
e.g. to prevent denial of service attacks, to guard against running
|
|
out of memory, or to work around platform-specific limitations.
|
|
|
|
<p>When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
|
|
|
|
<p>Unless otherwise stated, string comparisons are done in a <span>case-sensitive</span> manner.
|
|
|
|
<p>A conforming user agent implements all the requirements made by this
|
|
specification.</p>
|
|
|
|
|
|
<h3 id="webidl"><span class="secno">2.1 </span>Web IDL</h3>
|
|
|
|
<p>The IDL fragments in this specification must be
|
|
interpreted as required for conforming IDL fragments, as described in the
|
|
Web IDL specification. <a href="#refsWEBIDL">[WEBIDL]</a>
|
|
|
|
|
|
<h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
|
|
|
|
<p>Terminology used in this specification is from
|
|
DOM Core,
|
|
DOM Range,
|
|
CSSOM and
|
|
HTML.
|
|
<a href="#refsDOMCORE">[DOMCORE]</a>
|
|
<a href="#refsDOMRANGE">[DOMRANGE]</a>
|
|
<a href="#refsCSSOM">[CSSOM]</a>
|
|
<a href="#refsHTML">[HTML]</a>
|
|
|
|
<p class="XXX"><dfn id="mouseevent"><code>MouseEvent</code></dfn> is defined in …
|
|
|
|
<p><dfn id="the-html-body-element">The HTML <code>body</code> element</dfn> is the first
|
|
<code>body</code>
|
|
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#html-elements" title="HTML elements">HTML element</a> child of the root
|
|
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#html-elements" title="HTML elements">HTML element</a> <code>html</code>.</p>
|
|
|
|
<p><dfn id="content-edge">Content edge</dfn>,
|
|
<dfn id="padding-edge">padding edge</dfn>,
|
|
<dfn id="border-edge">border edge</dfn>, and
|
|
<dfn id="canvas">canvas</dfn> are defined by CSS.
|
|
<!--<span data-anolis-ref>CSS</span>-->
|
|
|
|
<p><dfn id="viewport">Viewport</dfn> and
|
|
<dfn id="initial-containing-block">initial containing block</dfn> are
|
|
defined by CSS 2.1 unless there is an ancestor <code>foreignObject</code>
|
|
element in the <code>http://www.w3.org/2000/svg</code> namespace in which
|
|
case that element acts as viewport and initial containing block.
|
|
<!--<span data-anolis-ref>CSS</span>-->
|
|
|
|
<p>The term <dfn id="content">content</dfn> refers to the dimensions of the element's
|
|
content area, including overflown content.
|
|
<!--<span data-anolis-ref>CSS</span>-->
|
|
|
|
<p>The term <dfn id="document-content">document content</dfn> refers to the area on the
|
|
<a href="#canvas">canvas</a> that is rendered upon, excluding content on negative
|
|
axis.</p>
|
|
|
|
|
|
<h3 id="css-pixels"><span class="secno">3.1 </span>CSS pixels</h3>
|
|
|
|
<p>All coordinates and dimensions for the APIs defined in this
|
|
specification are in CSS pixels. <!--<span data-anolis-ref>CSS</span>-->
|
|
|
|
<p class="note">This does not apply to e.g.
|
|
<code title="dom-Window-matchMedia"><a href="#dom-window-matchmedia">matchMedia()</a></code> as the units
|
|
are explicitly given there.</p>
|
|
|
|
|
|
|
|
<h2 id="extensions-to-the-window-interface"><span class="secno">4 </span>Extensions to the <code title="">Window</code> Interface</h2>
|
|
|
|
<pre class="idl">partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a> {
|
|
<a href="#mediaquerylist">MediaQueryList</a> <a href="#dom-window-matchmedia" title="dom-Window-matchMedia">matchMedia</a>(DOMString <var title="">media_query_list</var>);
|
|
readonly attribute <a href="#screen">Screen</a> <a href="#dom-window-screen" title="dom-Window-screen">screen</a>;
|
|
|
|
// viewport
|
|
readonly attribute long <a href="#dom-window-innerwidth" title="dom-Window-innerWidth">innerWidth</a>;
|
|
readonly attribute long <a href="#dom-window-innerheight" title="dom-Window-innerHeight">innerHeight</a>;
|
|
|
|
// viewport scrolling
|
|
readonly attribute long <a href="#dom-window-scrollx" title="dom-Window-scrollX">scrollX</a>;
|
|
readonly attribute long <a href="#dom-window-pagexoffset" title="dom-Window-pageXOffset">pageXOffset</a>;
|
|
readonly attribute long <a href="#dom-window-scrolly" title="dom-Window-scrollY">scrollY</a>;
|
|
readonly attribute long <a href="#dom-window-pageyoffset" title="dom-Window-pageYOffset">pageYOffset</a>;
|
|
void <a href="#dom-window-scroll" title="dom-Window-scroll">scroll</a>(long <var title="">x</var>, long <var title="">y</var>);
|
|
void <a href="#dom-window-scrollto" title="dom-Window-scrollto">scrollTo</a>(long <var title="">x</var>, long <var title="">y</var>);
|
|
void <a href="#dom-window-scrollby" title="dom-Window-scrollby">scrollBy</a>(long <var title="">x</var>, long <var title="">y</var>);
|
|
|
|
// client
|
|
readonly attribute long <a href="#dom-window-screenx" title="dom-Window-screenX">screenX</a>;
|
|
readonly attribute long <a href="#dom-window-screeny" title="dom-Window-screenY">screenY</a>;
|
|
readonly attribute long <a href="#dom-window-outerwidth" title="dom-Window-outerWidth">outerWidth</a>;
|
|
readonly attribute long <a href="#dom-window-outerheight" title="dom-Window-outerHeight">outerHeight</a>;
|
|
};</pre>
|
|
|
|
|
|
<p>When the
|
|
<dfn id="dom-window-matchmedia" title="dom-Window-matchMedia"><code>matchMedia(<var title="">media_query_list</var>)</code></dfn>
|
|
method is invoked these steps must be run:</p>
|
|
|
|
<ol>
|
|
<li><p>Let <var title="">parsed_media_query_list</var> be the result of
|
|
<a class="external" href="http://dev.w3.org/csswg/cssom/#parse-a-media-query-list" title="parse a media query list">parsing</a>
|
|
<var title="">media_query_list</var>.</li>
|
|
|
|
<li><p>Return a <em>new</em> <code><a href="#mediaquerylist">MediaQueryList</a></code> object,
|
|
associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object, with
|
|
<var title="">parsed_media_query_list</var> as its associated
|
|
media query list.</li>
|
|
</ol>
|
|
|
|
<p>The
|
|
<dfn id="dom-window-screen" title="dom-Window-screen"><code>screen</code></dfn>
|
|
attribute must return the <code><a href="#screen">Screen</a></code> object
|
|
associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object. It always returns the same
|
|
object.</p>
|
|
|
|
<p class="note">Accessing <code title="dom-Window-screen"><a href="#dom-window-screen">screen</a></code> through a <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#windowproxy">WindowProxy</a></code> object might yield different results
|
|
when the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is navigated.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-window-innerwidth" title="dom-Window-innerWidth"><code>innerWidth</code></dfn>
|
|
attribute must return the
|
|
<a href="#viewport">viewport</a> width including the size of a rendered scroll bar
|
|
(if any).</p>
|
|
|
|
<div class="example">
|
|
<p>The following snippet shows how to obtain the width of the
|
|
viewport:</p>
|
|
|
|
<pre><code>var viewportWidth = innerWidth</code></pre>
|
|
</div>
|
|
|
|
<p>The <dfn id="dom-window-innerheight" title="dom-Window-innerHeight"><code>innerHeight</code></dfn>
|
|
attribute must return the
|
|
<a href="#viewport">viewport</a> height including the size of a rendered scroll bar
|
|
(if any).</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-window-scrollx" title="dom-Window-scrollX"><code>scrollX</code></dfn> and
|
|
<dfn id="dom-window-pagexoffset" title="dom-Window-pageXOffset"><code>pageXOffset</code></dfn>
|
|
attributes must return the x-coordinate,
|
|
relative to the <a href="#initial-containing-block">initial containing block</a> origin, of the left
|
|
of the <a href="#viewport">viewport</a>.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-window-scrolly" title="dom-Window-scrollY"><code>scrollY</code></dfn> and
|
|
<dfn id="dom-window-pageyoffset" title="dom-Window-pageYOffset"><code>pageYOffset</code></dfn>
|
|
attributes must return the y-coordinate,
|
|
relative to the <a href="#initial-containing-block">initial containing block</a> origin, of the top
|
|
of the <a href="#viewport">viewport</a>.</p>
|
|
|
|
<p>When the
|
|
<dfn id="dom-window-scroll" title="dom-Window-scroll"><code>scroll(<var>x</var>,<var>y</var>)</code></dfn>
|
|
method is invoked these steps must be run:</p>
|
|
|
|
<ol>
|
|
<li><p>If either <var title="">x</var> or <var title="">y</var> is
|
|
infinite or NaN terminate this algorithm.</li>
|
|
|
|
<li>
|
|
<dl>
|
|
<dt>If <a href="#document-content">document content</a> can have overflow to the right
|
|
<dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>,
|
|
<a href="#content">content</a> width - <a href="#content-edge">content edge</a>
|
|
width)).</dd>
|
|
|
|
<dt>If <a href="#document-content">document content</a> can have overflow to the left
|
|
(under right-to-left conditions)
|
|
<dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>,
|
|
<a href="#content-edge">content edge</a> width - <a href="#content">content</a>
|
|
width)).</dd>
|
|
</dl>
|
|
|
|
<li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
|
|
<a href="#document-content">document content</a> height - <a href="#viewport">viewport</a>
|
|
height excluding the size of a rendered scroll bar (if any))).</li>
|
|
|
|
<li><p>Align the x-coordinate <var title="">x</var> of the
|
|
<a href="#document-content">document content</a> with the left of the <a href="#viewport">viewport</a>
|
|
and align the y-coordinate <var title="">y</var> of the <a href="#document-content">document
|
|
content</a> with the top of the <a href="#viewport">viewport</a>.</li>
|
|
|
|
<li><p>If the aligning caused content to move <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a>
|
|
to
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-event-fire" title="concept-event-fire">fire an event</a>
|
|
named <code title="event-scroll">scroll</code> that bubbles at the
|
|
<code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object, unless a
|
|
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#concept-task" title="concept-task">task</a> to fire that event at the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object
|
|
was already <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task" title="queue a task">queued</a>.</li>
|
|
</ol>
|
|
|
|
<p>When the
|
|
<dfn id="dom-window-scrollto" title="dom-Window-scrollto"><code>scrollTo(<var title="">x</var>,<var title="">y</var>)</code></dfn>
|
|
method is invoked, the user agent must act as if the
|
|
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with
|
|
the same arguments.</p>
|
|
|
|
<p>When the
|
|
<dfn id="dom-window-scrollby" title="dom-Window-scrollby"><code>scrollBy(<var title="">x</var>,<var title="">y</var>)</code></dfn>
|
|
method is invoked, the user agent must act as if the
|
|
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with
|
|
<var title="">x</var> plus <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>
|
|
as first argument and <var title="">y</var> plus
|
|
<code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second argument.</p>
|
|
|
|
<p>The <dfn id="dom-window-screenx" title="dom-Window-screenX"><code>screenX</code></dfn>
|
|
attribute must return the x-coordinate,
|
|
relative to the origin of the screen of the output device, of the top of
|
|
the client window as number of pixels, or zero if there is no such
|
|
thing.</p>
|
|
|
|
<p>The <dfn id="dom-window-screeny" title="dom-Window-screenY"><code>screenY</code></dfn>
|
|
attribute must return the y-coordinate,
|
|
relative to the origin of the screen of the output device, of the left of
|
|
the client window as number of pixels, or zero if there is no such
|
|
thing.</p>
|
|
|
|
<p>The <dfn id="dom-window-outerwidth" title="dom-Window-outerWidth"><code>outerWidth</code></dfn>
|
|
attribute must return the width of the
|
|
client window. If there is no client window this
|
|
attribute must return zero.</p>
|
|
|
|
<p>The <dfn id="dom-window-outerheight" title="dom-Window-outerHeight"><code>outerHeight</code></dfn>
|
|
attribute must return the height of the
|
|
client window. If there is no client window
|
|
this attribute must return zero.</p>
|
|
|
|
|
|
|
|
<h3 id="the-mediaquerylist-interface"><span class="secno">4.1 </span>The <code title="">MediaQueryList</code> Interface</h3>
|
|
|
|
<p>A <code><a href="#mediaquerylist">MediaQueryList</a></code> object has an associated media query list
|
|
set on creation and an associated
|
|
<dfn id="list-of-media-query-list-listeners">list of media query list listeners</dfn>, which is initially
|
|
empty.</p>
|
|
|
|
<p>If the associated media query list changes in evaluation then, for each
|
|
listener in the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a> — in
|
|
appending order, <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> that invokes the listener,
|
|
passing as argument the <code><a href="#mediaquerylist">MediaQueryList</a></code> object.</p>
|
|
|
|
<div class="example">
|
|
<p>A simple piece of code that detects changes in the orientation of the
|
|
viewport can be written as follows:</p>
|
|
<pre><code>function handleOrientationChange(mql) {
|
|
if(mql.matches) // landscape
|
|
…
|
|
else
|
|
…
|
|
}
|
|
var mql = matchMedia("(orientation:landscape)")
|
|
mql.addListener(handleOrientationChange)</code></pre>
|
|
</div>
|
|
|
|
<pre class="idl">interface <dfn id="mediaquerylist">MediaQueryList</dfn> {
|
|
readonly attribute DOMString <a href="#dom-mediaquerylist-media" title="dom-MediaQueryList-media">media</a>;
|
|
readonly attribute boolean <a href="#dom-mediaquerylist-matches" title="dom-MediaQueryList-matches">matches</a>;
|
|
void <a href="#dom-mediaquerylist-addlistener" title="dom-MediaQueryList-addListener">addListener</a>(<a href="#mediaquerylistlistener">MediaQueryListListener</a> <var title="">listener</var>);
|
|
void <a href="#dom-mediaquerylist-removelistener" title="dom-MediaQueryList-removeListener">removeListener</a>(<a href="#mediaquerylistlistener">MediaQueryListListener</a> <var title="">listener</var>);
|
|
};
|
|
|
|
[Callback, NoInterfaceObject]
|
|
interface <dfn id="mediaquerylistlistener">MediaQueryListListener</dfn> {
|
|
void <span>handleChange</span>(<a href="#mediaquerylist">MediaQueryList</a> <var title="">mql</var>);
|
|
};</pre>
|
|
|
|
<p>The
|
|
<dfn id="dom-mediaquerylist-media" title="dom-MediaQueryList-media"><code>media</code></dfn>
|
|
must return the
|
|
<a class="external" href="http://dev.w3.org/csswg/cssom/#serialize-a-media-query-list" title="serialize a media query list">serialized</a> form of the associated media query list.</p>
|
|
|
|
<p>The <dfn id="dom-mediaquerylist-matches" title="dom-MediaQueryList-matches"><code>matches</code></dfn>
|
|
must return true if the associated media query list
|
|
matches the state of the rendered <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> and false if it
|
|
does not.</p>
|
|
|
|
<p>When the
|
|
<dfn id="dom-mediaquerylist-addlistener" title="dom-MediaQueryList-addListener"><code>addListener(<var>listener</var>)</code></dfn>
|
|
is invoked <var title="">listener</var> must be
|
|
appended to the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>, unless
|
|
it is already in the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>.</p>
|
|
|
|
<p>When the
|
|
<dfn id="dom-mediaquerylist-removelistener" title="dom-MediaQueryList-removeListener"><code>removeListener(<var>listener</var>)</code></dfn>
|
|
is invoked <var title="">listener</var> must be
|
|
removed from the <a href="#list-of-media-query-list-listeners">list of media query list listeners</a>.</p>
|
|
|
|
|
|
|
|
<h3 id="the-screen-interface"><span class="secno">4.2 </span>The <code title="">Screen</code> Interface</h3>
|
|
|
|
<p>As its name suggests, the <code><a href="#screen">Screen</a></code> interface represents
|
|
information about the screen of the output device.</p>
|
|
|
|
<pre class="idl">interface <dfn id="screen">Screen</dfn> {
|
|
readonly attribute unsigned long <a href="#dom-screen-availwidth" title="dom-Screen-availWidth">availWidth</a>;
|
|
readonly attribute unsigned long <a href="#dom-screen-availheight" title="dom-Screen-availHeight">availHeight</a>;
|
|
readonly attribute unsigned long <a href="#dom-screen-width" title="dom-Screen-width">width</a>;
|
|
readonly attribute unsigned long <a href="#dom-screen-height" title="dom-Screen-height">height</a>;
|
|
readonly attribute unsigned long <a href="#dom-screen-colordepth" title="dom-Screen-colorDepth">colorDepth</a>;
|
|
readonly attribute unsigned long <a href="#dom-screen-pixeldepth" title="dom-Screen-pixelDepth">pixelDepth</a>;
|
|
};</pre>
|
|
|
|
<p>The <dfn id="dom-screen-availwidth" title="dom-Screen-availWidth"><code>availWidth</code></dfn>
|
|
attribute must return the available width of the
|
|
rendering surface of the output device.</p>
|
|
|
|
<p>The <dfn id="dom-screen-availheight" title="dom-Screen-availHeight"><code>availHeight</code></dfn>
|
|
attribute must return the available height of the
|
|
rendering surface of the output device.</p>
|
|
|
|
<p>The <dfn id="dom-screen-width" title="dom-Screen-width"><code>width</code></dfn> attribute
|
|
must return the width of the output device.</p>
|
|
|
|
<p>The <dfn id="dom-screen-height" title="dom-Screen-height"><code>height</code></dfn> attribute
|
|
must return the height of the output device.</p>
|
|
|
|
<p>The <dfn id="dom-screen-colordepth" title="dom-Screen-colorDepth"><code>colorDepth</code></dfn> and
|
|
<dfn id="dom-screen-pixeldepth" title="dom-Screen-pixelDepth"><code>pixelDepth</code></dfn> attributes
|
|
must both return the number of bits allocated to
|
|
colors (i.e. excluding the alpha channel) in the output device. If the
|
|
output device does not support colors these attributes
|
|
must return zero.</p>
|
|
<!-- pixelDepth is not supported by Internet Explorer 7 -->
|
|
|
|
|
|
<h2 id="extensions-to-the-document-interface"><span class="secno">5 </span>Extensions to the <code title="">Document</code> Interface</h2>
|
|
|
|
<pre class="idl">partial interface <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a> {
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#element">Element</a>? <a href="#dom-document-elementfrompoint" title="dom-Document-elementFromPoint">elementFromPoint</a>(float <var title="">x</var>, float <var title="">y</var>);
|
|
<a href="#caretposition">CaretPosition</a>? <a href="#dom-document-caretpositionfrompoint" title="dom-Document-caretPositionFromPoint">caretPositionFromPoint</a>(float <var title="">x</var>, float <var title="">y</var>);
|
|
};</pre>
|
|
|
|
<p>The
|
|
<dfn id="dom-document-elementfrompoint" title="dom-Document-elementFromPoint"><code>elementFromPoint(<var>x</var>, <var>y</var>)</code></dfn>
|
|
method must return the element at coordinates <var>x</var>,<var>y</var> in
|
|
the <a href="#viewport">viewport</a>. The element to be returned is determined
|
|
through hit testing. If either argument is negative, <var title="">x</var> is
|
|
greater than the <a href="#viewport">viewport</a> width excluding the size of a
|
|
rendered scroll bar (if any), or <var title="">y</var> is greater than the
|
|
<a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar
|
|
(if any), the method must return null. If there is no element at the given
|
|
position the method must return the root element, if any, or null
|
|
otherwise.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-document-caretpositionfrompoint" title="dom-Document-caretPositionFromPoint"><code>caretPositionFromPoint(<var>x</var>, <var>y</var>)</code></dfn>
|
|
method must return the result of running these steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If either argument is negative, <var title="">x</var> is greater
|
|
than the <a href="#viewport">viewport</a> width excluding the size of a rendered
|
|
scroll bar (if any), <var title="">y</var> is greather than the
|
|
<a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar
|
|
(if any) return null.</li>
|
|
|
|
<li><p>If at the coordinates <var title="">x</var>,<var title="">y</var>
|
|
in the <a href="#viewport">viewport</a> no text insertion point indicator would have
|
|
been inserted return null.</li>
|
|
|
|
<li>
|
|
<p>If at the coordinates <var title="">x</var>,<var title="">y</var>
|
|
in the <a href="#viewport">viewport</a> a text insertion point indicator would have
|
|
been inserted in a text entry widget which is also a replaced element
|
|
return a <a href="#caret-position">caret position</a> with its properties set as
|
|
follows:</p>
|
|
|
|
<dl>
|
|
<dt><a href="#caret-node">caret node</a></dt>
|
|
<dd><p>The node corresponding to the text entry widget.</dd>
|
|
|
|
<dt><a href="#caret-offset">caret offset</a></dt>
|
|
<dd><p>The amount of 16-bit units to the left of where the
|
|
text insertion point indicator would have inserted.</dd>
|
|
|
|
<dt><a href="#caret-range">caret range</a></dt>
|
|
<dd><p>null</dd>
|
|
</dl>
|
|
</li>
|
|
|
|
<li>
|
|
<p>Otherwise, return a <a href="#caret-position">caret position</a> where the
|
|
<a href="#caret-range">caret range</a> is a collapsed
|
|
<code class="external"><a href="http://html5.org/specs/dom-range.html#range">Range</a></code> object for the position
|
|
where the text insertion point indicator would have been inserted and
|
|
the other properties are set as follows:</p>
|
|
|
|
<dl>
|
|
<dt><a href="#caret-node">caret node</a></dt>
|
|
<dd><p>The <code class="external" title="dom-Range-startContainer"><a href="http://html5.org/specs/dom-range.html#dom-range-startcontainer">startContainer</a></code>
|
|
of the <a href="#caret-range">caret range</a>.</dd>
|
|
|
|
<dt><a href="#caret-offset">caret offset</a></dt>
|
|
<dd><p>The <code class="external" title="dom-Range-startOffset"><a href="http://html5.org/specs/dom-range.html#dom-range-startoffset">startOffset</a></code> of
|
|
the <a href="#caret-range">caret range</a>.</p>
|
|
</dl>
|
|
</li>
|
|
</ol>
|
|
|
|
<p class="note">The specifics of hit testing are out of scope of this
|
|
specification and therefore the exact details of
|
|
<code title="dom-Document-elementFromPoint"><a href="#dom-document-elementfrompoint">elementFromPoint()</a></code> and
|
|
<code title="dom-Document-caretPositionFromPoint"><a href="#dom-document-caretpositionfrompoint">caretPositionFromPoint()</a></code>
|
|
are therefore too. Hit testing will hopefully be defined in a future
|
|
revision of CSS or HTML.</p>
|
|
|
|
|
|
|
|
<h3 id="the-caretposition-interface"><span class="secno">5.1 </span>The <code title="">CaretPosition</code> Interface</h3>
|
|
|
|
<p>A <dfn id="caret-position">caret position</dfn> gives the position of a
|
|
text insertion point indicator. It always has an associated
|
|
<dfn id="caret-node">caret node</dfn>, <dfn id="caret-offset">caret offset</dfn>, and
|
|
<dfn id="caret-range">caret range</dfn>. It is represented by a <code><a href="#caretposition">CaretPosition</a></code>
|
|
object.</p>
|
|
|
|
<pre class="idl">interface <dfn id="caretposition">CaretPosition</dfn> {
|
|
readonly attribute <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#node">Node</a> <a href="#dom-caretposition-offsetnode" title="dom-CaretPosition-offsetNode">offsetNode</a>;
|
|
readonly attribute unsigned long <a href="#dom-caretposition-offset" title="dom-CaretPosition-offset">offset</a>;<!--
|
|
readonly attribute <span data-anolis-spec=domrange>Range</span>? <span title="dom-CaretPosition-range">range</span>;-->
|
|
};</pre>
|
|
|
|
<p>The
|
|
<dfn id="dom-caretposition-offsetnode" title="dom-CaretPosition-offsetNode"><code>offsetNode</code></dfn>
|
|
attribute must return the <a href="#caret-node">caret node</a>.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-caretposition-offset" title="dom-CaretPosition-offset"><code>offset</code></dfn>
|
|
attribute must return the <a href="#caret-offset">caret offset</a>.</p>
|
|
|
|
<!--
|
|
<p>The
|
|
<dfn id="dom-caretposition-range" title="dom-CaretPosition-range"><code>range</code></dfn>
|
|
attribute must return the <span>caret range</span>.</p>
|
|
-->
|
|
<!-- https://bugs.webkit.org/show_bug.cgi?id=27046 -->
|
|
|
|
|
|
<h2 id="extensions-to-the-element-interface"><span class="secno">6 </span>Extensions to the <code title="">Element</code> Interface</h2>
|
|
|
|
<pre class="idl">partial interface <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#element">Element</a> {
|
|
<a href="#clientrectlist">ClientRectList</a> <a href="#dom-element-getclientrects" title="dom-Element-getClientRects">getClientRects</a>();
|
|
<a href="#clientrect">ClientRect</a> <a href="#dom-element-getboundingclientrect" title="dom-Element-getBoundingClientRect">getBoundingClientRect</a>();
|
|
|
|
// scrolling
|
|
void <a href="#dom-element-scrollintoview" title="dom-Element-scrollIntoView">scrollIntoView</a>(optional boolean <var title="">top</var>);
|
|
attribute long <a href="#dom-element-scrolltop" title="dom-Element-scrollTop">scrollTop</a>; // scroll on setting
|
|
attribute long <a href="#dom-element-scrollleft" title="dom-Element-scrollLeft">scrollLeft</a>; // scroll on setting
|
|
readonly attribute long <a href="#dom-element-scrollwidth" title="dom-Element-scrollWidth">scrollWidth</a>;
|
|
readonly attribute long <a href="#dom-element-scrollheight" title="dom-Element-scrollHeight">scrollHeight</a>;
|
|
|
|
readonly attribute long <a href="#dom-element-clienttop" title="dom-Element-clientTop">clientTop</a>;
|
|
readonly attribute long <a href="#dom-element-clientleft" title="dom-Element-clientLeft">clientLeft</a>;
|
|
readonly attribute long <a href="#dom-element-clientwidth" title="dom-Element-clientWidth">clientWidth</a>;
|
|
readonly attribute long <a href="#dom-element-clientheight" title="dom-Element-clientHeight">clientHeight</a>;
|
|
};</pre>
|
|
|
|
|
|
<h3 id="the-getclientrects-and-getboundingclientrect-methods"><span class="secno">6.1 </span>The <code title="">getClientRects()</code> and
|
|
<code title="">getBoundingClientRect()</code> methods</h3>
|
|
|
|
<p>The <code title="dom-Element-getClientRects"><a href="#dom-element-getclientrects">getClientRects()</a></code> and <code title="dom-Element-getBoundingClientRect"><a href="#dom-element-getboundingclientrect">getBoundingClientRect()</a></code>
|
|
methods provide information about the position of the border box edges of
|
|
an element relative to the viewport. The objects these methods return
|
|
must be static. That is, changes to the underlying
|
|
document are not reflected in the objects.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-element-getclientrects" title="dom-Element-getClientRects"><code>getClientRects()</code></dfn>
|
|
method, when invoked, must return the result of the
|
|
following algorithm:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element on which it was invoked does not have an associated
|
|
CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code>
|
|
namespace return an empty <code><a href="#clientrectlist">ClientRectList</a></code> object and stop
|
|
this algorithm.</li>
|
|
|
|
<li><p>If the element does not have an associated CSS layout box and is
|
|
in the <code>http://www.w3.org/2000/svg</code> namespace return a
|
|
<code><a href="#clientrectlist">ClientRectList</a></code> object containing a single
|
|
<code><a href="#clientrect">ClientRect</a></code> object that describes the bounding box of the
|
|
element as defined by the SVG specification.
|
|
<a href="#refsSVG">[SVG]</a>
|
|
|
|
<li>
|
|
<p>Return a <code><a href="#clientrectlist">ClientRectList</a></code> object containing a list of
|
|
<code><a href="#clientrect">ClientRect</a></code> objects in content order describing the border
|
|
boxes (including those with a height or width of zero) with the
|
|
following constraints:</p>
|
|
|
|
<ul>
|
|
<li><p>If the element on which the method was invoked has a computed
|
|
value for <code>display</code> property of <code>table</code> or
|
|
<code>inline-table</code> include both the table box and the caption
|
|
box, if any, but not the anonymous container box.
|
|
<!--<span data-anolis-ref>CSS</span>-->
|
|
|
|
<li><p>Replace each
|
|
<a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">anonymous
|
|
block box</a> with its child box(es) and repeat this until no anonymous
|
|
block boxes are left in the final list.
|
|
<!--<span data-anolis-ref>CSS</span>-->
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
|
|
<p>The
|
|
<dfn id="dom-element-getboundingclientrect" title="dom-Element-getBoundingClientRect"><code>getBoundingClientRect()</code></dfn>
|
|
method, when invoked, must return the result of the
|
|
following algorithm:</p>
|
|
|
|
<ol>
|
|
<li><p>Let <var>list</var> be the result of invoking
|
|
<code title="dom-Element-getClientRects"><a href="#dom-element-getclientrects">getClientRects()</a></code> on the
|
|
same element this method was invoked on.</li>
|
|
|
|
<li><p>If the <var>list</var> is empty return a <code><a href="#clientrect">ClientRect</a></code>
|
|
object whose <code title="dom-ClientRect-top"><a href="#dom-clientrect-top">top</a></code>,
|
|
<code title="dom-ClientRect-right"><a href="#dom-clientrect-right">right</a></code>,
|
|
<code title="dom-ClientRect-bottom"><a href="#dom-clientrect-bottom">bottom</a></code> and
|
|
<code title="dom-ClientRect-left"><a href="#dom-clientrect-left">left</a></code> members are zero.</li>
|
|
|
|
<li><p>Otherwise, return a <code><a href="#clientrect">ClientRect</a></code> object describing the
|
|
smallest rectangle that includes the first rectangle in <var>list</var>
|
|
and all of the remaining rectangles of which the height or width is not
|
|
zero.</li>
|
|
</ol>
|
|
|
|
<div class="example">
|
|
<p>The following snippet gets the dimensions of the first
|
|
<code>div</code> element in a document:</p>
|
|
|
|
<pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
|
|
var exampleWidth = example.width;
|
|
var exampleHeight = example.height;</code></pre>
|
|
</div>
|
|
|
|
|
|
<h3 id="element-scrolling-members"><span class="secno">6.2 </span><code title="">Element</code> Scrolling Members</h3>
|
|
|
|
<p>To <dfn id="scroll-an-element-into-view">scroll an element into view</dfn>, optionally with an
|
|
<i title="">align to top flag</i> set, means to run these steps for each
|
|
ancestor element or <a href="#viewport">viewport</a> that establishes a
|
|
scrolling box, in order of innermost to outermost scrolling box:</p>
|
|
|
|
<ol>
|
|
<li><p>If the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> associated
|
|
with the element to be
|
|
scrolled into view is not <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#same-origin">same origin</a> with the
|
|
<code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> associated with the element or
|
|
<a href="#viewport">viewport</a> associated with the scrolling box, terminate these
|
|
steps.</li>
|
|
|
|
<li><p>If the <i title="">align to top flag</i> is set align the top of
|
|
the border box of the element to be scrolled into view with the top of
|
|
the scrolling box.</li>
|
|
|
|
<li><p>Otherwise, if the <i title="">align to top flag</i> is not set
|
|
align the bottom of the border box of the element to be scrolled into
|
|
view with the bottom of the scrolling box.</li>
|
|
|
|
<li><p>Align the left of the border box of the element to be scrolled
|
|
into view with the left of the scrolling box.
|
|
<!-- RTL is not special cased in implementations?! -->
|
|
|
|
<li><p>If the aligning did not cause content to move terminate these
|
|
steps.</li>
|
|
|
|
<li>
|
|
<dl>
|
|
<dt>If the scrolling box is associated with an element</dt>
|
|
<dd><p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">Queue a task</a> to <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-event-fire" title="concept-event-fire">fire an event</a>
|
|
named <code title="event-scroll">scroll</code> at the element
|
|
associated with the scrolling box, unless a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#concept-task" title="concept-task">task</a> to fire
|
|
that event at that element was already
|
|
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task" title="queue a task">queued</a>.</dd>
|
|
|
|
<dt>If the scrolling box is associated with a <a href="#viewport">viewport</a></dt>
|
|
<dd><p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">Queue a task</a> to <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-event-fire" title="concept-event-fire">fire an event</a>
|
|
named <code title="event-scroll">scroll</code> that bubbles at the
|
|
<code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object associated with the <a href="#viewport">viewport</a>,
|
|
unless a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#concept-task" title="concept-task">task</a> to fire that event at that
|
|
<code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object was already
|
|
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task" title="queue a task">queued</a>.</dd>
|
|
</dl>
|
|
</li>
|
|
</ol>
|
|
|
|
|
|
<p>To <dfn id="scroll-an-element">scroll an element</dfn> to <var title="">x</var>,<var title="">y</var> means to:</p>
|
|
|
|
<ol>
|
|
<li><p>If either <var title="">x</var> or <var title="">y</var> is
|
|
infinite or NaN terminate this algorithm.</p>
|
|
|
|
<li>
|
|
<dl>
|
|
<dt>If the element can have overflow to the right</dt>
|
|
|
|
<dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>,
|
|
<a href="#content">content</a> width -
|
|
<a href="#content-edge">content edge</a> width)).</dd>
|
|
|
|
<dt>If the element can have overflow to the left (under right-to-left
|
|
conditions)</dt>
|
|
|
|
<dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>,
|
|
<a href="#content-edge">content edge</a> width -
|
|
<a href="#content">content</a> width)).</dd>
|
|
</dl>
|
|
</li>
|
|
|
|
<li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
|
|
<a href="#content">content</a> height - <a href="#content-edge">content edge</a> height)).</li>
|
|
|
|
<li><p>Align <a href="#content">content</a> x-coordinate <var title="">x</var> with
|
|
the left of the <a href="#content-edge">content edge</a> of the element and align
|
|
<a href="#content">content</a> y-coordinate <var title="">y</var> with
|
|
the top of the <a href="#content-edge">content edge</a> of the element.</li>
|
|
|
|
<li><p>If the aligning caused content to move <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a>
|
|
to <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-event-fire" title="concept-event-fire">fire an event</a> named
|
|
<code title="event-scroll">scroll</code> at the element, unless a
|
|
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#concept-task" title="concept-task">task</a> to fire that event at that element was already
|
|
<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task" title="queue a task">queued</a>.</li>
|
|
</ol>
|
|
|
|
|
|
<p>The
|
|
<dfn id="dom-element-scrollintoview" title="dom-Element-scrollIntoView"><code>scrollIntoView([<var>top</var>])</code></dfn>
|
|
method must run these steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element does not have any associated CSS layout box
|
|
terminate these steps.</li>
|
|
|
|
<li><p><a href="#scroll-an-element-into-view" title="scroll an element into view">Scroll the element into view</a>
|
|
with the <i title="">align to top flag</i> set if <var title="">top</var>
|
|
is true or omitted.</li>
|
|
</ol>
|
|
|
|
|
|
<p>The <dfn id="dom-element-scrolltop" title="dom-Element-scrollTop"><code>scrollTop</code></dfn>
|
|
attribute must return the result of running these
|
|
steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element does not have any associated CSS layout box or the
|
|
element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return zero and terminate these steps.</li>
|
|
|
|
<li><p>If the element is the root element return the value of
|
|
<code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code>.</li>
|
|
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>,
|
|
the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element
|
|
does not have any overflow, return the value of
|
|
<code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code>.</li>
|
|
|
|
<li><p>Return the y-coordinate of the <a href="#content">content</a> at the
|
|
alignment point with the top of the <a href="#content-edge">content edge</a> of the
|
|
element.</li>
|
|
</ol>
|
|
|
|
<p>When setting the <code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code>
|
|
attribute these steps must be run:</p>
|
|
|
|
<ol>
|
|
<li><p>Let <var title="">y</var> be the given value.</li>
|
|
|
|
<li><p>If the element does not have any associated CSS layout box, the
|
|
element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, or the element has no overflow, terminate these
|
|
steps.</li>
|
|
|
|
<li><p>If the element is the root element invoke
|
|
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with zero as first
|
|
argument and <var title="">y</var> as second.</li>
|
|
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>,
|
|
the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element
|
|
does not have any vertical overflow, invoke
|
|
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
|
|
<code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> as first
|
|
argument and <var title="">y</var> as second.</li>
|
|
|
|
<li><p><a href="#scroll-an-element" title="scroll an element">Scroll the element</a> to
|
|
<code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code>,<var title="">y</var>.
|
|
</ol>
|
|
|
|
<p>The <dfn id="dom-element-scrollleft" title="dom-Element-scrollLeft"><code>scrollLeft</code></dfn>
|
|
attribute must return the result of running these
|
|
steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element does not have any associated CSS layout box or the
|
|
element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a> return zero and terminate these steps.</li>
|
|
|
|
<li><p>If the element is the root element return the value of
|
|
<code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>.</li>
|
|
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>,
|
|
the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element
|
|
does not have any overflow, return the value of
|
|
<code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>.</li>
|
|
|
|
<li><p>Return the x-coordinate of the <a href="#content">content</a> at the
|
|
alignment point with the left of the <a href="#content-edge">content edge</a> of the
|
|
element.</li>
|
|
</ol>
|
|
|
|
<p>When setting the <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code> attribute these steps
|
|
must be run:</p>
|
|
|
|
<ol>
|
|
<li><p>Let <var title="">x</var> be the given value.</li>
|
|
|
|
<li><p>If the element does not have any associated CSS layout box, the
|
|
element is the root element and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, or the element has no overflow, terminate these
|
|
steps.</li>
|
|
|
|
<li><p>If the element is the root element invoke
|
|
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
|
|
<var title="">x</var> as first argument and zero as second.</li>
|
|
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>,
|
|
the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>, and the element
|
|
does not have any vertical overflow, invoke
|
|
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
|
|
<var title="">x</var> as first argument and
|
|
<code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second.</li>
|
|
|
|
<li><p><a href="#scroll-an-element" title="Scroll an element">Scroll the element</a> to
|
|
<var title="">x</var>,<code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code>.
|
|
</ol>
|
|
|
|
<p>The <dfn id="dom-element-scrollwidth" title="dom-Element-scrollWidth"><code>scrollWidth</code></dfn>
|
|
attribute must return the result of running these
|
|
steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element does not have any associated CSS layout box return
|
|
zero and terminate these steps.</li>
|
|
|
|
<li><p>If the element is the root element and the
|
|
<code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is not in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>
|
|
return
|
|
max(<a href="#document-content">document content</a> width, value of <code title="dom-Window-innerWidth"><a href="#dom-window-innerwidth">innerWidth</a></code>).</li>
|
|
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>
|
|
and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>
|
|
return
|
|
max(<a href="#document-content">document content</a> width, value of <code title="dom-Window-innerWidth"><a href="#dom-window-innerwidth">innerWidth</a></code>).</li>
|
|
|
|
<li><p>Return the computed value of the '<code>padding-left</code>'
|
|
property, plus the computed value of the '<code>padding-right</code>',
|
|
plus the <a href="#content">content</a> width of the element.</li>
|
|
</ol>
|
|
|
|
<p>The <dfn id="dom-element-scrollheight" title="dom-Element-scrollHeight"><code>scrollHeight</code></dfn>
|
|
attribute must return the result of running these
|
|
steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element does not have any associated CSS layout box return
|
|
zero and terminate these steps.</li>
|
|
|
|
<li><p>If the element is the root element and the
|
|
<code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is not in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>
|
|
return
|
|
max(<a href="#document-content">document content</a> height, value of <code title="dom-Window-innerHeight"><a href="#dom-window-innerheight">innerHeight</a></code>).</li>
|
|
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>
|
|
and the <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> is in
|
|
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>
|
|
return
|
|
max(<a href="#document-content">document content</a> height, value of <code title="dom-Window-innerHeight"><a href="#dom-window-innerheight">innerHeight</a></code>).</li>
|
|
|
|
<li><p>Return the computed value of the '<code>padding-top</code>'
|
|
property, plus the computed value of the '<code>padding-bottom</code>',
|
|
plus the <a href="#content">content</a> height of the element.</li>
|
|
</ol>
|
|
|
|
<!-- for inline boxes offsetWidth and offsetHeight are identical to offset* -->
|
|
|
|
|
|
<h3 id="client-attributes"><span class="secno">6.3 </span>The <code title="">clientTop</code>,
|
|
<code title="">clientLeft</code>, <code title="">clientWidth</code>, and
|
|
<code title="">clientHeight</code> attributes</h3>
|
|
|
|
<p>The <dfn id="dom-element-clienttop" title="dom-Element-clientTop"><code>clientTop</code></dfn>,
|
|
<dfn id="dom-element-clientleft" title="dom-Element-clientLeft"><code>clientLeft</code></dfn>,
|
|
<dfn id="dom-element-clientwidth" title="dom-Element-clientWidth"><code>clientWidth</code></dfn>, and
|
|
<dfn id="dom-element-clientheight" title="dom-Element-clientHeight"><code>clientHeight</code></dfn>
|
|
attributes must return zero if the element does not
|
|
have any associated CSS layout box or if the CSS layout box is inline.
|
|
Otherwise, these attributes must behave as defined in
|
|
the remainder of this section.</p>
|
|
|
|
<p>The <code title="dom-Element-clientTop"><a href="#dom-element-clienttop">clientTop</a></code> attribute returns the computed value of the
|
|
'<code>border-top-width</code>' property plus the width of any scrollbar
|
|
rendered between the top <a href="#padding-edge">padding edge</a> and the top
|
|
<a href="#border-edge">border edge</a>.</p>
|
|
|
|
<p>The <code title="dom-Element-clientLeft"><a href="#dom-element-clientleft">clientLeft</a></code> attribute returns the computed
|
|
value of the '<code>border-left-width</code>' property plus the width of
|
|
any scrollbar rendered between the left <a href="#padding-edge">padding edge</a> and the
|
|
left <a href="#border-edge">border edge</a>.
|
|
|
|
<p>The <code title="dom-Element-clientWidth"><a href="#dom-element-clientwidth">clientWidth</a></code> attribute returns the
|
|
<a href="#viewport">viewport</a> width excluding the size of a rendered scroll bar
|
|
(if any) if the element is the root element and the
|
|
width of the <a href="#padding-edge">padding edge</a> (excluding the width of any
|
|
rendered scrollbar between the <a href="#padding-edge">padding edge</a> and the
|
|
<a href="#border-edge">border edge</a>) otherwise.</p>
|
|
|
|
<p>The <code title="dom-Element-clientHeight"><a href="#dom-element-clientheight">clientHeight</a></code> attribute returns the
|
|
<a href="#viewport">viewport</a> height excluding the size of a rendered scroll bar
|
|
(if any) if the element is the root element and the
|
|
height of the <a href="#padding-edge">padding edge</a> (excluding the width of any
|
|
rendered scrollbar between the <a href="#padding-edge">padding edge</a> and the
|
|
<a href="#border-edge">border edge</a>) otherwise.</p>
|
|
|
|
|
|
|
|
<h2 id="extensions-to-the-htmlelement-interface"><span class="secno">7 </span>Extensions to the <code title="">HTMLElement</code> Interface</h2>
|
|
|
|
<pre class="idl">partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#htmlelement">HTMLElement</a> {
|
|
readonly attribute Element <a href="#dom-htmlelement-offsetparent" title="dom-HTMLElement-offsetParent">offsetParent</a>;
|
|
readonly attribute long <a href="#dom-htmlelement-offsettop" title="dom-HTMLElement-offsetTop">offsetTop</a>;
|
|
readonly attribute long <a href="#dom-htmlelement-offsetleft" title="dom-HTMLElement-offsetLeft">offsetLeft</a>;
|
|
readonly attribute long <a href="#dom-htmlelement-offsetwidth" title="dom-HTMLElement-offsetWidth">offsetWidth</a>;
|
|
readonly attribute long <a href="#dom-htmlelement-offsetheight" title="dom-HTMLElement-offsetHeight">offsetHeight</a>;
|
|
};</pre>
|
|
|
|
|
|
<h3 id="offset-attributes"><span class="secno">7.1 </span>The <code title="">offsetParent</code>,
|
|
<code title="">offsetTop</code>, <code title="">offsetLeft</code>,
|
|
<code title="">offsetWidth</code>, and <code title="">offsetHeight</code>
|
|
attributes</h3>
|
|
|
|
<p>The
|
|
<dfn id="dom-htmlelement-offsetparent" title="dom-HTMLElement-offsetParent"><code>offsetParent</code></dfn>
|
|
attribute must return the result of running these
|
|
steps:</p>
|
|
|
|
<ol>
|
|
<li>
|
|
<p>If any of the following holds true return null and terminate this
|
|
algorithm:</p>
|
|
|
|
<ul>
|
|
<li>The element does not have an associated CSS layout box.</li>
|
|
|
|
<li>The element is the root element.</li>
|
|
|
|
<li>The element is
|
|
<a href="#the-html-body-element">the HTML <code>body</code> element</a>.</li>
|
|
|
|
<li>The element's computed value of the '<code>position</code>'
|
|
property is <code>fixed</code>.</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<p>Return the nearest ancestor element of the element for which at least
|
|
one of the following is true and terminate this algorithm if such an
|
|
ancestor is found:</p>
|
|
|
|
<ul>
|
|
<li>The computed value of the '<code>position</code>' property is not
|
|
<code>static</code>.</li>
|
|
|
|
<li>It is <a href="#the-html-body-element">the HTML <code>body</code> element</a>.</li>
|
|
|
|
<li>The computed value of the '<code>position</code>' property of
|
|
the element is <code>static</code> and the ancestor is one of the
|
|
following <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#html-elements" title="HTML elements">HTML elements</a>:
|
|
<code>td</code>, <code>th</code>, or <code>table</code>.</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><p>Return null.</li>
|
|
</ol>
|
|
|
|
<p>The <dfn id="dom-htmlelement-offsettop" title="dom-HTMLElement-offsetTop"><code>offsetTop</code></dfn>
|
|
attribute must return the result of running these
|
|
steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>
|
|
or does not have any associated CSS layout box return zero and terminate
|
|
this algorithm.</li>
|
|
|
|
<li><p>If the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element is null return the
|
|
y-coordinate of the top <a href="#border-edge">border edge</a> of the first
|
|
CSS layout box associated with the element, relative to the
|
|
<a href="#initial-containing-block">initial containing block</a> origin, and terminate this
|
|
algorithm.</li>
|
|
|
|
<li>
|
|
<p>Return the result of subtracting the y-coordinate of the top
|
|
<a href="#padding-edge">padding edge</a> of the first CSS layout box associated with
|
|
the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element from the y-coordinate of
|
|
the top <a href="#border-edge">border edge</a> of the first CSS layout box associated
|
|
with the element, relative to the <a href="#initial-containing-block">initial containing block</a>
|
|
origin.</p>
|
|
|
|
<p class="note">An inline element that consists of multiple line boxes
|
|
will only have its first CSS layout box considered.</p>
|
|
</li>
|
|
</ol>
|
|
|
|
<p>The <dfn id="dom-htmlelement-offsetleft" title="dom-HTMLElement-offsetLeft"><code>offsetLeft</code></dfn>
|
|
attribute must return the result of running these steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code>
|
|
element</a> or does not have any associated CSS layout box return zero
|
|
and terminate this algorithm.</li>
|
|
|
|
<li><p>If the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element is null return the
|
|
x-coordinate of the left <a href="#border-edge">border edge</a> of the first
|
|
CSS layout box associated with the element, relative to the
|
|
<a href="#initial-containing-block">initial containing block</a> origin, and terminate this
|
|
algorithm.</li>
|
|
|
|
<li>
|
|
<p>Return the result of subtracting the x-coordinate of the left
|
|
<a href="#padding-edge">padding edge</a> of the first CSS layout box associated with
|
|
the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element from the x-coordinate of
|
|
the left <a href="#border-edge">border edge</a> of the first CSS layout box associated
|
|
with the element, relative to the <a href="#initial-containing-block">initial containing block</a>
|
|
origin.</p>
|
|
</li>
|
|
</ol>
|
|
|
|
<p>The
|
|
<dfn id="dom-htmlelement-offsetwidth" title="dom-HTMLElement-offsetWidth"><code>offsetWidth</code></dfn>
|
|
attribute must return the result of running these steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element does not have any associated CSS layout box return
|
|
zero and terminate this algorithm.</li>
|
|
|
|
<li><p>Return the <a href="#border-edge">border edge</a> width of the first
|
|
CSS layout box associated with the element.</li>
|
|
</ol>
|
|
|
|
<p>The
|
|
<dfn id="dom-htmlelement-offsetheight" title="dom-HTMLElement-offsetHeight"><code>offsetHeight</code></dfn>
|
|
attribute must return the result of running these steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the element does not have any associated CSS layout box return
|
|
zero and terminate this algorithm.</li>
|
|
|
|
<li><p>Return the <a href="#border-edge">border edge</a> height of the first
|
|
CSS layout box associated with the element.</li>
|
|
</ol>
|
|
|
|
|
|
<h2 id="extensions-to-the-range-interface"><span class="secno">8 </span>Extensions to the <code title="">Range</code> Interface</h2>
|
|
|
|
<pre class="idl">partial interface <a class="external" href="http://html5.org/specs/dom-range.html#range">Range</a> {
|
|
<a href="#clientrectlist">ClientRectList</a> <a href="#dom-range-getclientrects" title="dom-Range-getClientRects">getClientRects</a>();
|
|
<a href="#clientrect">ClientRect</a> <a href="#dom-range-getboundingclientrect" title="dom-Range-getBoundingClientRect">getBoundingClientRect</a>();
|
|
};</pre>
|
|
|
|
<p>The objects the methods described below return must
|
|
be static.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-range-getclientrects" title="dom-Range-getClientRects"><code>getClientRects()</code></dfn>
|
|
method, when invoked, must return an empty
|
|
<code><a href="#clientrectlist">ClientRectList</a></code> object if the range is not in the document and
|
|
otherwise a <code><a href="#clientrectlist">ClientRectList</a></code> object containing a list of
|
|
<code><a href="#clientrect">ClientRect</a></code> objects in content order that matches the
|
|
following constraints:</p>
|
|
|
|
<ul>
|
|
<li>For each element selected by the range, whose parent is not selected
|
|
by the range, include the border boxes returned by invoking
|
|
<code title="dom-Element-getClientRects"><a href="#dom-element-getclientrects">getClientRects()</a></code> on the
|
|
element.</li>
|
|
|
|
<li>For each <code>Text</code> node selected or partially selected by the
|
|
range (including when the boundary-points are identical), include a
|
|
<code><a href="#clientrect">ClientRect</a></code> object (for the part that is selected, not the
|
|
whole line box). The bounds of these <code><a href="#clientrect">ClientRect</a></code> objects are
|
|
computed using font metrics; thus, for horizontal writing, the vertical
|
|
dimension of each box is determined by the font ascent and descent, and
|
|
the horizontal dimension by the text advance width.</li>
|
|
</ul>
|
|
|
|
<p>The
|
|
<dfn id="dom-range-getboundingclientrect" title="dom-Range-getBoundingClientRect"><code>getBoundingClientRect()</code></dfn>
|
|
method, when invoked, must return the result of the
|
|
following algorithm:</p>
|
|
|
|
<ol>
|
|
<li><p>Let <var>list</var> be the result of invoking
|
|
<code title="dom-Range-getClientRects"><a href="#dom-range-getclientrects">getClientRects()</a></code> on the
|
|
same range this method was invoked on.</li>
|
|
|
|
<li><p>If <var>list</var> is empty return a
|
|
<code><a href="#clientrect">ClientRect</a></code> object whose
|
|
<code title="dom-ClientRect-top"><a href="#dom-clientrect-top">top</a></code>,
|
|
<code title="dom-ClientRect-right"><a href="#dom-clientrect-right">right</a></code>,
|
|
<code title="dom-ClientRect-bottom"><a href="#dom-clientrect-bottom">bottom</a></code> and
|
|
<code title="dom-ClientRect-left"><a href="#dom-clientrect-left">left</a></code> members are zero.</li>
|
|
|
|
<li><p>Otherwise, return a <code><a href="#clientrect">ClientRect</a></code> object describing the
|
|
smallest rectangle that includes the first rectangle in <var>list</var>
|
|
and all of the remaining rectangles of which the height or width is not
|
|
zero.</li>
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
<h2 id="extensions-to-the-mouseevent-interface"><span class="secno">9 </span>Extensions to the <code title="">MouseEvent</code> Interface</h2>
|
|
|
|
<pre class="idl">partial interface <a href="#mouseevent">MouseEvent</a> {
|
|
readonly attribute long <a href="#dom-mouseevent-screenx" title="dom-MouseEvent-screenX">screenX</a>;
|
|
readonly attribute long <a href="#dom-mouseevent-screeny" title="dom-MouseEvent-screenY">screenY</a>;
|
|
|
|
readonly attribute long <a href="#dom-mouseevent-pagex" title="dom-MouseEvent-pageX">pageX</a>;
|
|
readonly attribute long <a href="#dom-mouseevent-pagey" title="dom-MouseEvent-pageY">pageY</a>;
|
|
|
|
readonly attribute long <a href="#dom-mouseevent-clientx" title="dom-MouseEvent-clientX">clientX</a>;
|
|
readonly attribute long <a href="#dom-mouseevent-clienty" title="dom-MouseEvent-clientY">clientY</a>;
|
|
readonly attribute long <a href="#dom-mouseevent-x" title="dom-MouseEvent-x">x</a>;
|
|
readonly attribute long <a href="#dom-mouseevent-y" title="dom-MouseEvent-y">y</a>;
|
|
|
|
readonly attribute long <a href="#dom-mouseevent-offsetx" title="dom-MouseEvent-offsetX">offsetX</a>;
|
|
readonly attribute long <a href="#dom-mouseevent-offsety" title="dom-MouseEvent-offsetY">offsetY</a>;
|
|
};</pre>
|
|
|
|
<p class="XXX">The object IDL fragment redefines some members. Can we
|
|
resolve this somehow?</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-mouseevent-screenx" title="dom-MouseEvent-screenX"><code>screenX</code></dfn>
|
|
attribute must return the x-coordinate of
|
|
the position where the event occurred relative to the origin of the
|
|
screen.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-mouseevent-screeny" title="dom-MouseEvent-screenY"><code>screenY</code></dfn>
|
|
attribute must return the y-coordinate of
|
|
the position where the event occurred relative to the origin of the
|
|
screen.</p>
|
|
|
|
<p>The <dfn id="dom-mouseevent-pagex" title="dom-MouseEvent-pageX"><code>pageX</code></dfn> attribute
|
|
must return the horizontal coordinate of
|
|
the position where the event occurred relative to
|
|
the origin of the <a href="#initial-containing-block">initial containing block</a>.</p>
|
|
|
|
<p>The <dfn id="dom-mouseevent-pagey" title="dom-MouseEvent-pageY"><code>pageY</code></dfn> attribute
|
|
must return the y-coordinate of the
|
|
position where the event occurred relative to the origin of the
|
|
<a href="#initial-containing-block">initial containing block</a>.</p>
|
|
|
|
<p>The <dfn id="dom-mouseevent-clientx" title="dom-MouseEvent-clientX"><code>clientX</code></dfn>
|
|
attribute must return the x-coordinate of
|
|
the position where the event occurred relative to the origin of the
|
|
<a href="#viewport">viewport</a>.</p>
|
|
|
|
<p>The <dfn id="dom-mouseevent-clienty" title="dom-MouseEvent-clientY"><code>clientY</code></dfn>
|
|
attribute must return the y-coordinate of
|
|
the position where the event occurred relative to the origin of the
|
|
<a href="#viewport">viewport</a>.</p>
|
|
|
|
<p>The <dfn id="dom-mouseevent-x" title="dom-MouseEvent-x"><code>x</code></dfn>
|
|
attribute must return the value of
|
|
<code title="dom-MouseEvent-clientX"><a href="#dom-mouseevent-clientx">clientX</a></code>.</p>
|
|
|
|
<p>The <dfn id="dom-mouseevent-y" title="dom-MouseEvent-y"><code>y</code></dfn>
|
|
attribute must return the value of
|
|
<code title="dom-MouseEvent-clientY"><a href="#dom-mouseevent-clienty">clientY</a></code>.</p>
|
|
|
|
<!-- x/y do not match IE in the position:relative case but do match other
|
|
browsers -->
|
|
|
|
|
|
<p>The <dfn id="dom-mouseevent-offsetx" title="dom-MouseEvent-offsetX"><code>offsetX</code></dfn>
|
|
attribute must return the x-coordinate of
|
|
the position where the event occurred relative to the origin of the
|
|
<a href="#padding-edge">padding edge</a> of the target node.</p>
|
|
|
|
<p>The <dfn id="dom-mouseevent-offsety" title="dom-MouseEvent-offsetY"><code>offsetY</code></dfn>
|
|
attribute must return the y-coordinate of
|
|
the position where the event occurred relative to the origin of the
|
|
<a href="#padding-edge">padding edge</a> of the target node.</p>
|
|
|
|
<!-- XXX layerX/layerY -->
|
|
|
|
|
|
|
|
<h2 id="rectangles"><span class="secno">10 </span>Rectangles</h2>
|
|
|
|
|
|
<h3 id="the-clientrectlist-interface"><span class="secno">10.1 </span>The <code title="">ClientRectList</code> Interface</h3>
|
|
|
|
<p>The <code><a href="#clientrectlist">ClientRectList</a></code> object consists of an ordered list
|
|
of <code><a href="#clientrect">ClientRect</a></code> objects.</p>
|
|
|
|
<pre class="idl">interface <dfn id="clientrectlist">ClientRectList</dfn> {
|
|
readonly attribute unsigned long <a href="#dom-clientrectlist-length" title="dom-ClientRectList-length">length</a>;
|
|
getter <a href="#clientrect">ClientRect</a> <a href="#dom-clientrectlist-item" title="dom-ClientRectList-item">item</a>(unsigned long <var title="">index</var>);
|
|
};</pre>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrectlist-length" title="dom-ClientRectList-length"><code>length</code></dfn>
|
|
attribute must return the total number of
|
|
<code><a href="#clientrect">ClientRect</a></code> objects associated with the object.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrectlist-item" title="dom-ClientRectList-item"><code>item(<var>index</var>)</code></dfn>
|
|
method, when invoked, must raise an
|
|
<code>INDEX_SIZE_ERR</code> exception when <var title="">index</var> is
|
|
greater than the number of <code><a href="#clientrect">ClientRect</a></code> objects associated with
|
|
the object. Otherwise, the <code><a href="#clientrect">ClientRect</a></code> object at
|
|
<var title="">index</var> must be returned.</p>
|
|
|
|
|
|
<h3 id="the-clientrect-interface"><span class="secno">10.2 </span>The <code title="">ClientRect</code> Interface</h3>
|
|
|
|
<p>Objects implementing the <code><a href="#clientrect">ClientRect</a></code> interface represent
|
|
a rectangular box. The type of box is specified by the method that returns
|
|
a <code><a href="#clientrect">ClientRect</a></code> object.</p>
|
|
|
|
<pre class="idl">interface <dfn id="clientrect">ClientRect</dfn> {
|
|
readonly attribute float <a href="#dom-clientrect-top" title="dom-ClientRect-top">top</a>;
|
|
readonly attribute float <a href="#dom-clientrect-right" title="dom-ClientRect-right">right</a>;
|
|
readonly attribute float <a href="#dom-clientrect-bottom" title="dom-ClientRect-bottom">bottom</a>;
|
|
readonly attribute float <a href="#dom-clientrect-left" title="dom-ClientRect-left">left</a>;
|
|
readonly attribute float <a href="#dom-clientrect-width" title="dom-ClientRect-width">width</a>;
|
|
readonly attribute float <a href="#dom-clientrect-height" title="dom-ClientRect-height">height</a>;
|
|
};</pre>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrect-top" title="dom-ClientRect-top"><code>top</code></dfn>
|
|
attribute must return the y-coordinate,
|
|
relative to the <a href="#viewport">viewport</a> origin, of the top of the rectangle
|
|
box.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrect-right" title="dom-ClientRect-right"><code>right</code></dfn>
|
|
attribute must return the x-coordinate,
|
|
relative to the <a href="#viewport">viewport</a> origin, of the right of the
|
|
rectangle box.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrect-bottom" title="dom-ClientRect-bottom"><code>bottom</code></dfn>
|
|
attribute must return the y-coordinate,
|
|
relative to the <a href="#viewport">viewport</a> origin, of the bottom of the
|
|
rectangle box.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrect-left" title="dom-ClientRect-left"><code>left</code></dfn>
|
|
attribute must return the x-coordinate,
|
|
relative to the <a href="#viewport">viewport</a> origin, of the left of the rectangle
|
|
box.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrect-width" title="dom-ClientRect-width"><code>width</code></dfn>
|
|
attribute must return the width of the
|
|
rectangle box.</p>
|
|
|
|
<p class="note">This is identical to
|
|
<code title="dom-ClientRect-right"><a href="#dom-clientrect-right">right</a></code> minus
|
|
<code title="dom-ClientRect-left"><a href="#dom-clientrect-left">left</a></code>.</p>
|
|
|
|
<p>The
|
|
<dfn id="dom-clientrect-height" title="dom-ClientRect-height"><code>height</code></dfn>
|
|
attribute must return the height of the
|
|
rectangle box.</p>
|
|
|
|
<p class="note">This is identical to
|
|
<code title="dom-ClientRect-bottom"><a href="#dom-clientrect-bottom">bottom</a></code> minus
|
|
<code title="dom-ClientRect-top"><a href="#dom-clientrect-top">top</a></code>.</p>
|
|
|
|
|
|
|
|
<h2 class="no-num" id="references">References</h2>
|
|
<h3 class="no-num" id="normative-references">Normative references</h3>
|
|
<div id="anolis-references-normative"><dl><dt id="refsCSSOM">[CSSOM]
|
|
<dd><cite><a href="http://dev.w3.org/csswg/cssom/">CSSOM</a></cite>, A. van Kesteren. W3C.
|
|
|
|
<dt id="refsDOMCORE">[DOMCORE]
|
|
<dd><cite><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM Core</a></cite>, A. van Kesteren and Ms2ger. W3C.
|
|
|
|
<dt id="refsDOMRANGE">[DOMRANGE]
|
|
<dd><cite><a href="http://html5.org/specs/dom-range.html">DOM Range</a></cite>, Ms2ger. WHATWG.
|
|
|
|
<dt id="refsHTML">[HTML]
|
|
<dd><cite><a href="http://www.whatwg.org/html">HTML</a></cite>, I. Hickson. WHATWG.
|
|
|
|
<dt id="refsRFC2119">[RFC2119]
|
|
<dd><cite><a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF.
|
|
|
|
<dt id="refsSVG">[SVG]
|
|
<dd><cite><a href="http://www.w3.org/TR/SVG/">Scalable Vector Graphics (SVG)</a></cite>, O. Andersson, R. Berjon, E. Dahlström et al.. W3C.
|
|
|
|
<dt id="refsWEBIDL">[WEBIDL]
|
|
<dd><cite><a href="http://dev.w3.org/2006/webapi/WebIDL/">Web IDL</a></cite>, C. McCormack. W3C.
|
|
|
|
</dl></div>
|
|
|
|
|
|
<!--
|
|
<h3 class=no-num>Informative references</h3>
|
|
<div id=anolis-references-informative></div>
|
|
-->
|
|
|
|
|
|
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
|
|
|
|
<p>The editor would like to thank
|
|
|
|
Alexey Feldgendler,
|
|
Björn Höhrmann,
|
|
David Vest,
|
|
Garrett Smith,
|
|
Hallvord R. M. Steen,
|
|
Leif Arne Storset,
|
|
Luiz Agostini,
|
|
Maciej Stachowiak,
|
|
Michael Dyck,
|
|
Mike Wilson,
|
|
Morten Stenshorne,
|
|
Peter-Paul Koch,
|
|
Rachel Kmetz,
|
|
Robert O'Callahan,
|
|
Sam Weinig,
|
|
Simon Pieters,
|
|
Sylvain Galineau,
|
|
Tarquin Wilton-Jones,
|
|
Thomas Moore, and
|
|
Xiaomei Ji<!-- should actually use real name here -->
|
|
|
|
for their contributions to this document.</p>
|
|
|
|
<p>Special thanks to the Microsoft employees who first implemented many of
|
|
the features specified in this draft, which were first widely deployed by
|
|
the Windows Internet Explorer browser.</p>
|
|
|
|
|
|
|