Thu, 19 Sep 2013 15:21:51 +0200
[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