[cssom-view] Make clientTop, clientLeft, clientWidth, clientHeight, offsetTop, offsetLeft, offsetWidth and offsetHeight ignore transforms. https://www.w3.org/Bugs/Public/show_bug.cgi?id=15430

Author: Simon Pieters

cssom-view/Overview.html

@@ -417,6 +417,9 @@ <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
 
 <p>The term <dfn id="layout-box">layout box</dfn> refers to either a <a href="#css-layout-box">CSS layout box</a> or an <a href="#svg-layout-box">SVG layout box</a>.
 
+<p>The term <dfn id="transforms">transforms</dfn> refers to SVG transforms and CSS transforms. <a href="#refsSVG">[SVG]</a> <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a>
+
+
 <h3 id="css-pixels"><span class="secno">3.1 </span>CSS pixels</h3>
 
 <p>All coordinates and dimensions for the APIs defined in this
@@ -966,8 +969,8 @@ <h3 id="the-caretposition-interface"><span class="secno">6.1 </span>The <code ti
   </ol>
  <li><p>If <a href="#caret-node">caret node</a> is a text entry widget that is a replaced element,
  and that is in the document, return a <code><a href="#domrect">DOMRect</a></code> object for the caret
- in the widget as represented by the <a href="#caret-offset">caret offset</a> value. The SVG transforms and CSS transforms that apply to the element and its ancestors are
- applied. <a href="#refsSVG">[SVG]</a> <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a>
+ in the widget as represented by the <a href="#caret-offset">caret offset</a> value. The <a href="#transforms">transforms</a> that apply to the element and its ancestors are
+ applied.
  <li><p>Return null.
 </ol>
 
@@ -1002,16 +1005,14 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
  <li><p>If the element has an associated <a href="#svg-layout-box">SVG layout box</a> return a
  <code><a href="#domrectlist">DOMRectList</a></code> object containing a single
  <code><a href="#domrect">DOMRect</a></code> object that describes the bounding box of the
- element as defined by the SVG specification, applying the SVG transforms and CSS transforms that apply to the element and its ancestors.
- <a href="#refsSVG">[SVG]</a> <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a></li>
+ element as defined by the SVG specification, applying the <a href="#transforms">transforms</a> that apply to the element and its ancestors.</li>
  <li>
   <p>Return a <code><a href="#domrectlist">DOMRectList</a></code> object containing a list of
   <code><a href="#domrect">DOMRect</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>Apply the SVG transforms and CSS transforms that apply to the element and its ancestors. <a href="#refsSVG">[SVG]</a>
-   <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a>
+   <li><p>Apply the <a href="#transforms">transforms</a> that apply to the element and its ancestors.
    <li><p>If the element on which the method was invoked has a computed
    value for the 'display' property of 'table' or
    'inline-table' include both the table box and the caption
@@ -1173,14 +1174,14 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
 <ol>
  <li><p>If the element has no associated <a href="#css-layout-box">CSS layout box</a> or if the <a href="#css-layout-box">CSS layout box</a> is inline, return zero.
  <li><p>Return the computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top <a href="#padding-edge">padding
- edge</a> and the top <a href="#border-edge">border edge</a>.
+ edge</a> and the top <a href="#border-edge">border edge</a>, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.
 </ol>
 
 <p>The <dfn id="dom-element-clientleft" title="dom-Element-clientLeft"><code>clientLeft</code></dfn> attribute must run these steps:
 <ol>
  <li><p>If the element has no associated <a href="#css-layout-box">CSS layout box</a> or if the <a href="#css-layout-box">CSS layout box</a> is inline, return zero.
  <li><p>Return the computed value of the 'border-left-width' 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>.
+ edge</a> and the left <a href="#border-edge">border edge</a>, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.
 </ol>
 
 <p>The <dfn id="dom-element-clientwidth" title="dom-Element-clientWidth"><code>clientWidth</code></dfn> attribute must run these steps:
@@ -1191,7 +1192,7 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, return the <a href="#viewport">viewport</a> width excluding the size of a rendered scroll bar
  (if any).
  <li><p>Return 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>.
+ <a href="#border-edge">border edge</a>, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.
 </ol>
 
 <p>The <dfn id="dom-element-clientheight" title="dom-Element-clientHeight"><code>clientHeight</code></dfn> attribute must run these steps:
@@ -1202,7 +1203,7 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, return the <a href="#viewport">viewport</a> height excluding the size of a rendered scroll
  bar (if any).
  <li><p>Return the height of the <a href="#padding-edge">padding edge</a> excluding the height of any rendered scrollbar between the <a href="#padding-edge">padding edge</a> and the
- <a href="#border-edge">border edge</a>.
+ <a href="#border-edge">border edge</a>, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.
 </ol>
 
 <h3 id="the-getclientrects()-and-getboundingclientrect()-methods"><span class="secno">7.1 </span>The <code title="">getClientRects()</code> and
@@ -1403,15 +1404,15 @@ <h2 id="extensions-to-the-htmlelement-interface"><span class="secno">8 </span>Ex
  <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
  <a href="#css-layout-box">CSS layout box</a> associated with the element, relative to the
- <a href="#initial-containing-block">initial containing block</a> origin, and terminate this
+ <a href="#initial-containing-block">initial containing block</a> origin, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors, 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 <a href="#css-layout-box">CSS layout box</a> 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 <a href="#css-layout-box">CSS layout box</a> associated
   with the element, relative to the <a href="#initial-containing-block">initial containing block</a>
-  origin.</p>
+  origin, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.</p>
   <p class="note">An inline element that consists of multiple line boxes
   will only have its first <a href="#css-layout-box">CSS layout box</a> considered.</p>
  </li>
@@ -1425,28 +1426,30 @@ <h2 id="extensions-to-the-htmlelement-interface"><span class="secno">8 </span>Ex
  <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
  <a href="#css-layout-box">CSS layout box</a> associated with the element, relative to the
- <a href="#initial-containing-block">initial containing block</a> origin, and terminate this
+ <a href="#initial-containing-block">initial containing block</a> origin, , ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors, 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 <a href="#css-layout-box">CSS layout box</a> 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 <a href="#css-layout-box">CSS layout box</a> associated
   with the element, relative to the <a href="#initial-containing-block">initial containing block</a>
-  origin.</p>
+  origin, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.</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 <a href="#css-layout-box">CSS layout box</a> return zero and terminate this algorithm.</li>
- <li><p>Return the <a href="#border-edge">border edge</a> width of the first <a href="#css-layout-box">CSS layout box</a> associated with the element.</li>
+ <li><p>Return the <a href="#border-edge">border edge</a> width of the first <a href="#css-layout-box">CSS layout box</a> associated with the element, ignoring any <a href="#transforms">transforms</a>
+ that apply to the element and its ancestors.</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 <a href="#css-layout-box">CSS layout box</a> return zero and terminate this algorithm.</li>
- <li><p>Return the <a href="#border-edge">border edge</a> height of the first <a href="#css-layout-box">CSS layout box</a> associated with the element.</li>
+ <li><p>Return the <a href="#border-edge">border edge</a> height of the first <a href="#css-layout-box">CSS layout box</a> associated with the element, ignoring any <a href="#transforms">transforms</a>
+ that apply to the element and its ancestors.</li>
 </ol>
 
 <h2 id="extensions-to-the-range-interface"><span class="secno">9 </span>Extensions to the <code title="">Range</code> Interface</h2>
@@ -1475,8 +1478,7 @@ <h2 id="extensions-to-the-range-interface"><span class="secno">9 </span>Extensio
  whole line box). The bounds of these <code><a href="#domrect">DOMRect</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. The SVG transforms and CSS transforms that apply to the ancestors are applied.
- <a href="#refsSVG">[SVG]</a> <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a></li>
+ the horizontal dimension by the text advance width. The <a href="#transforms">transforms</a> that apply to the ancestors are applied.
 </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