index.html 77.6 KB

Raw Blame History Permalink

<!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>)
    &lt;<a href="mailto:annevk@opera.com">annevk@opera.com</a>&gt;</dd>
   </dl>


<!--begin-copyright-->
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 2011 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</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 &hellip;

  <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> &mdash; 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
    &hellip;
  else
    &hellip;
}
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&ouml;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&ouml;rn H&ouml;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>