[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

Thu, 19 Sep 2013 15:21:51 +0200

author
Simon Pieters <simonp@opera.com>
date
Thu, 19 Sep 2013 15:21:51 +0200
changeset 9218
6091febd3717
parent 9217
eb948cfc7ed6
child 9219
0e33c7674d1e

[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

cssom-view/Overview.html file | annotate | diff | comparison | revisions
cssom-view/Overview.src.html file | annotate | diff | comparison | revisions
     1.1 --- a/cssom-view/Overview.html	Thu Sep 19 13:58:24 2013 +0200
     1.2 +++ b/cssom-view/Overview.html	Thu Sep 19 15:21:51 2013 +0200
     1.3 @@ -417,6 +417,9 @@
     1.4  
     1.5  <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>.
     1.6  
     1.7 +<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>
     1.8 +
     1.9 +
    1.10  <h3 id="css-pixels"><span class="secno">3.1 </span>CSS pixels</h3>
    1.11  
    1.12  <p>All coordinates and dimensions for the APIs defined in this
    1.13 @@ -966,8 +969,8 @@
    1.14    </ol>
    1.15   <li><p>If <a href="#caret-node">caret node</a> is a text entry widget that is a replaced element,
    1.16   and that is in the document, return a <code><a href="#domrect">DOMRect</a></code> object for the caret
    1.17 - 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
    1.18 - applied. <a href="#refsSVG">[SVG]</a> <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a>
    1.19 + 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
    1.20 + applied.
    1.21   <li><p>Return null.
    1.22  </ol>
    1.23  
    1.24 @@ -1002,16 +1005,14 @@
    1.25   <li><p>If the element has an associated <a href="#svg-layout-box">SVG layout box</a> return a
    1.26   <code><a href="#domrectlist">DOMRectList</a></code> object containing a single
    1.27   <code><a href="#domrect">DOMRect</a></code> object that describes the bounding box of the
    1.28 - element as defined by the SVG specification, applying the SVG transforms and CSS transforms that apply to the element and its ancestors.
    1.29 - <a href="#refsSVG">[SVG]</a> <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a></li>
    1.30 + element as defined by the SVG specification, applying the <a href="#transforms">transforms</a> that apply to the element and its ancestors.</li>
    1.31   <li>
    1.32    <p>Return a <code><a href="#domrectlist">DOMRectList</a></code> object containing a list of
    1.33    <code><a href="#domrect">DOMRect</a></code> objects in content order describing the border
    1.34    boxes (including those with a height or width of zero) with the
    1.35    following constraints:</p>
    1.36    <ul>
    1.37 -   <li><p>Apply the SVG transforms and CSS transforms that apply to the element and its ancestors. <a href="#refsSVG">[SVG]</a>
    1.38 -   <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a>
    1.39 +   <li><p>Apply the <a href="#transforms">transforms</a> that apply to the element and its ancestors.
    1.40     <li><p>If the element on which the method was invoked has a computed
    1.41     value for the 'display' property of 'table' or
    1.42     'inline-table' include both the table box and the caption
    1.43 @@ -1173,14 +1174,14 @@
    1.44  <ol>
    1.45   <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.
    1.46   <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
    1.47 - edge</a> and the top <a href="#border-edge">border edge</a>.
    1.48 + 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.
    1.49  </ol>
    1.50      
    1.51  <p>The <dfn id="dom-element-clientleft" title="dom-Element-clientLeft"><code>clientLeft</code></dfn> attribute must run these steps:
    1.52  <ol>
    1.53   <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.
    1.54   <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
    1.55 - edge</a> and the left <a href="#border-edge">border edge</a>.
    1.56 + 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.
    1.57  </ol>
    1.58  
    1.59  <p>The <dfn id="dom-element-clientwidth" title="dom-Element-clientWidth"><code>clientWidth</code></dfn> attribute must run these steps:
    1.60 @@ -1191,7 +1192,7 @@
    1.61   <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
    1.62   (if any).
    1.63   <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
    1.64 - <a href="#border-edge">border edge</a>.
    1.65 + <a href="#border-edge">border edge</a>, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.
    1.66  </ol>
    1.67  
    1.68  <p>The <dfn id="dom-element-clientheight" title="dom-Element-clientHeight"><code>clientHeight</code></dfn> attribute must run these steps:
    1.69 @@ -1202,7 +1203,7 @@
    1.70   <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
    1.71   bar (if any).
    1.72   <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
    1.73 - <a href="#border-edge">border edge</a>.
    1.74 + <a href="#border-edge">border edge</a>, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.
    1.75  </ol>
    1.76  
    1.77  <h3 id="the-getclientrects()-and-getboundingclientrect()-methods"><span class="secno">7.1 </span>The <code title="">getClientRects()</code> and
    1.78 @@ -1403,7 +1404,7 @@
    1.79   <li><p>If the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element is null return the
    1.80   y-coordinate of the top <a href="#border-edge">border edge</a> of the first
    1.81   <a href="#css-layout-box">CSS layout box</a> associated with the element, relative to the
    1.82 - <a href="#initial-containing-block">initial containing block</a> origin, and terminate this
    1.83 + <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
    1.84   algorithm.</li>
    1.85   <li>
    1.86    <p>Return the result of subtracting the y-coordinate of the top
    1.87 @@ -1411,7 +1412,7 @@
    1.88    the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element from the y-coordinate of
    1.89    the top <a href="#border-edge">border edge</a> of the first <a href="#css-layout-box">CSS layout box</a> associated
    1.90    with the element, relative to the <a href="#initial-containing-block">initial containing block</a>
    1.91 -  origin.</p>
    1.92 +  origin, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.</p>
    1.93    <p class="note">An inline element that consists of multiple line boxes
    1.94    will only have its first <a href="#css-layout-box">CSS layout box</a> considered.</p>
    1.95   </li>
    1.96 @@ -1425,7 +1426,7 @@
    1.97   <li><p>If the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element is null return the
    1.98   x-coordinate of the left <a href="#border-edge">border edge</a> of the first
    1.99   <a href="#css-layout-box">CSS layout box</a> associated with the element, relative to the
   1.100 - <a href="#initial-containing-block">initial containing block</a> origin, and terminate this
   1.101 + <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
   1.102   algorithm.</li>
   1.103   <li>
   1.104    <p>Return the result of subtracting the x-coordinate of the left
   1.105 @@ -1433,20 +1434,22 @@
   1.106    the <code title="dom-HTMLElement-offsetParent"><a href="#dom-htmlelement-offsetparent">offsetParent</a></code> of the element from the x-coordinate of
   1.107    the left <a href="#border-edge">border edge</a> of the first <a href="#css-layout-box">CSS layout box</a> associated
   1.108    with the element, relative to the <a href="#initial-containing-block">initial containing block</a>
   1.109 -  origin.</p>
   1.110 +  origin, ignoring any <a href="#transforms">transforms</a> that apply to the element and its ancestors.</p>
   1.111   </li>
   1.112  </ol>
   1.113  
   1.114  <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>
   1.115  <ol>
   1.116   <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>
   1.117 - <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>
   1.118 + <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>
   1.119 + that apply to the element and its ancestors.</li>
   1.120  </ol>
   1.121  
   1.122  <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>
   1.123  <ol>
   1.124   <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>
   1.125 - <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>
   1.126 + <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>
   1.127 + that apply to the element and its ancestors.</li>
   1.128  </ol>
   1.129  
   1.130  <h2 id="extensions-to-the-range-interface"><span class="secno">9 </span>Extensions to the <code title="">Range</code> Interface</h2>
   1.131 @@ -1475,8 +1478,7 @@
   1.132   whole line box). The bounds of these <code><a href="#domrect">DOMRect</a></code> objects are
   1.133   computed using font metrics; thus, for horizontal writing, the vertical
   1.134   dimension of each box is determined by the font ascent and descent, and
   1.135 - the horizontal dimension by the text advance width. The SVG transforms and CSS transforms that apply to the ancestors are applied.
   1.136 - <a href="#refsSVG">[SVG]</a> <a href="#refsCSSTRANSFORMS">[CSSTRANSFORMS]</a></li>
   1.137 + the horizontal dimension by the text advance width. The <a href="#transforms">transforms</a> that apply to the ancestors are applied.
   1.138  </ul>
   1.139  
   1.140  <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
     2.1 --- a/cssom-view/Overview.src.html	Thu Sep 19 13:58:24 2013 +0200
     2.2 +++ b/cssom-view/Overview.src.html	Thu Sep 19 15:21:51 2013 +0200
     2.3 @@ -378,6 +378,9 @@
     2.4  
     2.5  <p>The term <dfn>layout box</dfn> refers to either a <span>CSS layout box</span> or an <span>SVG layout box</span>.
     2.6  
     2.7 +<p>The term <dfn>transforms</dfn> refers to SVG transforms and CSS transforms. <span data-anolis-ref>SVG</span> <span data-anolis-ref>CSSTRANSFORMS</span>
     2.8 +
     2.9 +
    2.10  <h3>CSS pixels</h3>
    2.11  
    2.12  <p>All coordinates and dimensions for the APIs defined in this
    2.13 @@ -927,8 +930,8 @@
    2.14    </ol>
    2.15   <li><p>If <span>caret node</span> is a text entry widget that is a replaced element,
    2.16   and that is in the document, return a <code>DOMRect</code> object for the caret
    2.17 - in the widget as represented by the <span>caret offset</span> value. The SVG transforms and CSS transforms that apply to the element and its ancestors are
    2.18 - applied. <span data-anolis-ref>SVG</span> <span data-anolis-ref>CSSTRANSFORMS</span>
    2.19 + in the widget as represented by the <span>caret offset</span> value. The <span>transforms</span> that apply to the element and its ancestors are
    2.20 + applied.
    2.21   <li><p>Return null.
    2.22  </ol>
    2.23  
    2.24 @@ -963,16 +966,14 @@
    2.25   <li><p>If the element has an associated <span>SVG layout box</span> return a
    2.26   <code>DOMRectList</code> object containing a single
    2.27   <code>DOMRect</code> object that describes the bounding box of the
    2.28 - element as defined by the SVG specification, applying the SVG transforms and CSS transforms that apply to the element and its ancestors.
    2.29 - <span data-anolis-ref>SVG</span> <span data-anolis-ref>CSSTRANSFORMS</span></li>
    2.30 + element as defined by the SVG specification, applying the <span>transforms</span> that apply to the element and its ancestors.</li>
    2.31   <li>
    2.32    <p>Return a <code>DOMRectList</code> object containing a list of
    2.33    <code>DOMRect</code> objects in content order describing the border
    2.34    boxes (including those with a height or width of zero) with the
    2.35    following constraints:</p>
    2.36    <ul>
    2.37 -   <li><p>Apply the SVG transforms and CSS transforms that apply to the element and its ancestors. <span data-anolis-ref>SVG</span>
    2.38 -   <span data-anolis-ref>CSSTRANSFORMS</span>
    2.39 +   <li><p>Apply the <span>transforms</span> that apply to the element and its ancestors.
    2.40     <li><p>If the element on which the method was invoked has a computed
    2.41     value for the 'display' property of 'table' or
    2.42     'inline-table' include both the table box and the caption
    2.43 @@ -1134,14 +1135,14 @@
    2.44  <ol>
    2.45   <li><p>If the element has no associated <span>CSS layout box</span> or if the <span>CSS layout box</span> is inline, return zero.
    2.46   <li><p>Return the computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top <span>padding
    2.47 - edge</span> and the top <span>border edge</span>.
    2.48 + edge</span> and the top <span>border edge</span>, ignoring any <span>transforms</span> that apply to the element and its ancestors.
    2.49  </ol>
    2.50      
    2.51  <p>The <dfn title=dom-Element-clientLeft><code>clientLeft</code></dfn> attribute must run these steps:
    2.52  <ol>
    2.53   <li><p>If the element has no associated <span>CSS layout box</span> or if the <span>CSS layout box</span> is inline, return zero.
    2.54   <li><p>Return the computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left <span>padding
    2.55 - edge</span> and the left <span>border edge</span>.
    2.56 + edge</span> and the left <span>border edge</span>, ignoring any <span>transforms</span> that apply to the element and its ancestors.
    2.57  </ol>
    2.58  
    2.59  <p>The <dfn title=dom-Element-clientWidth><code>clientWidth</code></dfn> attribute must run these steps:
    2.60 @@ -1152,7 +1153,7 @@
    2.61   <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, return the <span>viewport</span> width excluding the size of a rendered scroll bar
    2.62   (if any).
    2.63   <li><p>Return the width of the <span>padding edge</span> excluding the width of any rendered scrollbar between the <span>padding edge</span> and the
    2.64 - <span>border edge</span>.
    2.65 + <span>border edge</span>, ignoring any <span>transforms</span> that apply to the element and its ancestors.
    2.66  </ol>
    2.67  
    2.68  <p>The <dfn title=dom-Element-clientHeight><code>clientHeight</code></dfn> attribute must run these steps:
    2.69 @@ -1163,7 +1164,7 @@
    2.70   <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, return the <span>viewport</span> height excluding the size of a rendered scroll
    2.71   bar (if any).
    2.72   <li><p>Return the height of the <span>padding edge</span> excluding the height of any rendered scrollbar between the <span>padding edge</span> and the
    2.73 - <span>border edge</span>.
    2.74 + <span>border edge</span>, ignoring any <span>transforms</span> that apply to the element and its ancestors.
    2.75  </ol>
    2.76  
    2.77  <h3>The <code title>getClientRects()</code> and
    2.78 @@ -1364,7 +1365,7 @@
    2.79   <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the
    2.80   y-coordinate of the top <span>border edge</span> of the first
    2.81   <span>CSS layout box</span> associated with the element, relative to the
    2.82 - <span>initial containing block</span> origin, and terminate this
    2.83 + <span>initial containing block</span> origin, ignoring any <span>transforms</span> that apply to the element and its ancestors, and terminate this
    2.84   algorithm.</p></li>
    2.85   <li>
    2.86    <p>Return the result of subtracting the y-coordinate of the top
    2.87 @@ -1372,7 +1373,7 @@
    2.88    the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the y-coordinate of
    2.89    the top <span>border edge</span> of the first <span>CSS layout box</span> associated
    2.90    with the element, relative to the <span>initial containing block</span>
    2.91 -  origin.</p>
    2.92 +  origin, ignoring any <span>transforms</span> that apply to the element and its ancestors.</p>
    2.93    <p class='note'>An inline element that consists of multiple line boxes
    2.94    will only have its first <span>CSS layout box</span> considered.</p>
    2.95   </li>
    2.96 @@ -1386,7 +1387,7 @@
    2.97   <li><p>If the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element is null return the
    2.98   x-coordinate of the left <span>border edge</span> of the first
    2.99   <span>CSS layout box</span> associated with the element, relative to the
   2.100 - <span>initial containing block</span> origin, and terminate this
   2.101 + <span>initial containing block</span> origin, , ignoring any <span>transforms</span> that apply to the element and its ancestors, and terminate this
   2.102   algorithm.</p></li>
   2.103   <li>
   2.104    <p>Return the result of subtracting the x-coordinate of the left
   2.105 @@ -1394,20 +1395,22 @@
   2.106    the <code title=dom-HTMLElement-offsetParent>offsetParent</code> of the element from the x-coordinate of
   2.107    the left <span>border edge</span> of the first <span>CSS layout box</span> associated
   2.108    with the element, relative to the <span>initial containing block</span>
   2.109 -  origin.</p>
   2.110 +  origin, ignoring any <span>transforms</span> that apply to the element and its ancestors.</p>
   2.111   </li>
   2.112  </ol>
   2.113  
   2.114  <p>The <dfn title=dom-HTMLElement-offsetWidth><code>offsetWidth</code></dfn> attribute must return the result of running these steps:</p>
   2.115  <ol>
   2.116   <li><p>If the element does not have any associated <span>CSS layout box</span> return zero and terminate this algorithm.</p></li>
   2.117 - <li><p>Return the <span>border edge</span> width of the first <span>CSS layout box</span> associated with the element.</p></li>
   2.118 + <li><p>Return the <span>border edge</span> width of the first <span>CSS layout box</span> associated with the element, ignoring any <span>transforms</span>
   2.119 + that apply to the element and its ancestors.</p></li>
   2.120  </ol>
   2.121  
   2.122  <p>The <dfn title=dom-HTMLElement-offsetHeight><code>offsetHeight</code></dfn> attribute must return the result of running these steps:</p>
   2.123  <ol>
   2.124   <li><p>If the element does not have any associated <span>CSS layout box</span> return zero and terminate this algorithm.</p></li>
   2.125 - <li><p>Return the <span>border edge</span> height of the first <span>CSS layout box</span> associated with the element.</p></li>
   2.126 + <li><p>Return the <span>border edge</span> height of the first <span>CSS layout box</span> associated with the element, ignoring any <span>transforms</span>
   2.127 + that apply to the element and its ancestors.</p></li>
   2.128  </ol>
   2.129  
   2.130  <h2>Extensions to the <code title>Range</code> Interface</h2>
   2.131 @@ -1436,8 +1439,7 @@
   2.132   whole line box). The bounds of these <code>DOMRect</code> objects are
   2.133   computed using font metrics; thus, for horizontal writing, the vertical
   2.134   dimension of each box is determined by the font ascent and descent, and
   2.135 - the horizontal dimension by the text advance width. The SVG transforms and CSS transforms that apply to the ancestors are applied.
   2.136 - <span data-anolis-ref>SVG</span> <span data-anolis-ref>CSSTRANSFORMS</span></li>
   2.137 + the horizontal dimension by the text advance width. The <span>transforms</span> that apply to the ancestors are applied.
   2.138  </ul>
   2.139  
   2.140  <p>The <dfn title=dom-Range-getBoundingClientRect><code>getBoundingClientRect()</code></dfn> method, when invoked, must return the result of the following

mercurial