changeset
[cssom-view] Replace term 'content' with 'scrolling area' to fix issues with scrollWidth et al
Mon, 27 May 2013 15:11:03 +0200
- author
- Simon Pieters <simonp@opera.com>
- date
- Mon, 27 May 2013 15:11:03 +0200
- changeset 8254
- 1e2cd9ff56f4
- parent 8253
- 1eb890b57f6e
- child 8255
- 1398c808e617
[cssom-view] Replace term 'content' with 'scrolling area' to fix issues with scrollWidth et al
| 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 Mon May 27 13:16:03 2013 +0200 1.2 +++ b/cssom-view/Overview.html Mon May 27 15:11:03 2013 +0200 1.3 @@ -231,7 +231,8 @@ 1.4 1.5 <p><dfn id="content-edge">Content edge</dfn>, 1.6 <dfn id="padding-edge">padding edge</dfn>, 1.7 -<dfn id="border-edge">border edge</dfn>, and 1.8 +<dfn id="border-edge">border edge</dfn>, 1.9 +<dfn id="margin-edge">margin edge</dfn> and 1.10 <dfn id="canvas">canvas</dfn> are defined by CSS. 1.11 <!--<span data-anolis-ref>CSS</span>--> 1.12 1.13 @@ -242,9 +243,18 @@ 1.14 case that element acts as viewport and initial containing block. 1.15 <!--<span data-anolis-ref>CSS</span>--> 1.16 1.17 -<p>The term <dfn id="content">content</dfn> refers to the dimensions of the element's 1.18 -content area, including overflown content. 1.19 -<!--<span data-anolis-ref>CSS</span>--> 1.20 +<p>The term <dfn id="scrolling-area">scrolling area</dfn> refers to a box of an element that has the following edges: 1.21 + 1.22 +<dl> 1.23 + <dt>top edge 1.24 + <dd><p>The element's top padding edge. 1.25 + <dt>right edge 1.26 + <dd><p>The right-most edge of the element's right padding edge and the right margin edge of the element's all descendant boxes. 1.27 + <dt>bottom edge 1.28 + <dd><p>The bottom-most edge of the element's bottom padding edge and the bottom margin edge of the element's all descendant boxes. 1.29 + <dt>left edge 1.30 + <dd><p>The element's left padding edge. 1.31 +</dl> 1.32 1.33 <p>The term <dfn id="document-content">document content</dfn> refers to the area on the 1.34 <a href="#canvas">canvas</a> that is rendered upon, excluding content on negative 1.35 @@ -387,12 +397,12 @@ 1.36 <dl> 1.37 <dt>If <a href="#document-content">document content</a> can have overflow to the right 1.38 <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>, 1.39 - <a href="#content">content</a> width - <a href="#content-edge">content edge</a> 1.40 + <a href="#scrolling-area">scrolling area</a> width - <a href="#padding-edge">padding edge</a> 1.41 width)).</dd> 1.42 <dt>If <a href="#document-content">document content</a> can have overflow to the left 1.43 (under right-to-left conditions) 1.44 <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>, 1.45 - <a href="#content-edge">content edge</a> width - <a href="#content">content</a> 1.46 + <a href="#padding-edge">padding edge</a> width - <a href="#scrolling-area">scrolling area</a> 1.47 width)).</dd> 1.48 </dl> 1.49 </li> 1.50 @@ -703,8 +713,8 @@ 1.51 the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element 1.52 does not have any overflow, return the value of 1.53 <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code>.</li> 1.54 - <li><p>Return the y-coordinate of the <a href="#content">content</a> at the 1.55 - alignment point with the top of the <a href="#content-edge">content edge</a> of the 1.56 + <li><p>Return the y-coordinate of the <a href="#scrolling-area">scrolling area</a> at the 1.57 + alignment point with the top of the <a href="#padding-edge">padding edge</a> of the 1.58 element.</li> 1.59 </ol> 1.60 <p>When setting the <code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code> attribute these steps must be run:</p> 1.61 @@ -741,8 +751,8 @@ 1.62 the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element 1.63 does not have any overflow, return the value of 1.64 <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>.</li> 1.65 - <li><p>Return the x-coordinate of the <a href="#content">content</a> at the 1.66 - alignment point with the left of the <a href="#content-edge">content edge</a> of the 1.67 + <li><p>Return the x-coordinate of the <a href="#scrolling-area">scrolling area</a> at the 1.68 + alignment point with the left of the <a href="#padding-edge">padding edge</a> of the 1.69 element.</li> 1.70 </ol> 1.71 <p>When setting the <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code> attribute these steps must be run:</p> 1.72 @@ -782,9 +792,7 @@ 1.73 and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in 1.74 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> 1.75 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> 1.76 - <li><p>Return the computed value of the '<code>padding-left</code>' 1.77 - property, plus the computed value of the '<code>padding-right</code>', 1.78 - plus the <a href="#content">content</a> width of the element.</li> 1.79 + <li><p>Return the width of the element's <a href="#scrolling-area">scrolling area</a>.</li> 1.80 </ol> 1.81 1.82 <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> 1.83 @@ -799,9 +807,7 @@ 1.84 and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in 1.85 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> 1.86 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> 1.87 - <li><p>Return the computed value of the '<code>padding-top</code>' 1.88 - property, plus the computed value of the '<code>padding-bottom</code>', 1.89 - plus the <a href="#content">content</a> height of the element.</li> 1.90 + <li><p>Return the height of the element's <a href="#scrolling-area">scrolling area</a>.</li> 1.91 </ol> 1.92 1.93 <p>The <dfn id="dom-element-clienttop" title="dom-Element-clientTop"><code>clientTop</code></dfn> attribute must run these steps: 1.94 @@ -866,18 +872,18 @@ 1.95 <ol> 1.96 <li><p>If the <i title="">align to top flag</i> is set align the top of 1.97 the border box of the element to be scrolled into view with the top of 1.98 - the scrolling box.</li> 1.99 + <var title="">box</var>.</li> 1.100 1.101 <li><p>Otherwise, if the <i title="">align to top flag</i> is not set 1.102 align the bottom of the border box of the element to be scrolled into 1.103 - view with the bottom of the scrolling box.</li> 1.104 + view with the bottom of <var title="">box</var>.</li> 1.105 1.106 <li><p>Align the left of the border box of the element to be scrolled 1.107 - into view with the left of the scrolling box.</li> 1.108 + into view with the left of <var title="">box</var>.</li> 1.109 <!-- RTL is not special cased in implementations?! --> 1.110 </ol> 1.111 1.112 - <li><p>If <var title="">position</var> is the same as <span>box</span>'s current scroll position, and <span>box</span> does not have an ongoing 1.113 + <li><p>If <var title="">position</var> is the same as <var title="">box</var>'s current scroll position, and <var title="">box</var> does not have an ongoing 1.114 <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a>, abort these steps. 1.115 1.116 <li> 1.117 @@ -921,26 +927,26 @@ 1.118 <dt>If <var title="">element</var> can have overflow to the right</dt> 1.119 1.120 <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>, 1.121 - <a href="#content">content</a> width - 1.122 - <a href="#content-edge">content edge</a> width)).</dd> 1.123 + <a href="#scrolling-area">scrolling area</a> width - 1.124 + <a href="#padding-edge">padding edge</a> width)).</dd> 1.125 1.126 <dt>If <var title="">element</var> can have overflow to the left (under right-to-left 1.127 conditions)</dt> 1.128 1.129 <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>, 1.130 - <a href="#content-edge">content edge</a> width - 1.131 - <a href="#content">content</a> width)).</dd> 1.132 + <a href="#padding-edge">padding edge</a> width - 1.133 + <a href="#scrolling-area">scrolling area</a> width)).</dd> 1.134 </dl> 1.135 </li> 1.136 1.137 <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>, 1.138 - <a href="#content">content</a> height - <a href="#content-edge">content edge</a> height)).</li> 1.139 + <a href="#scrolling-area">scrolling area</a> height - <a href="#padding-edge">padding edge</a> height)).</li> 1.140 1.141 - <li><p>Let <var title="">position</var> be the scroll position <var title="">box</var> would have by aligning <a href="#content">content</a> x-coordinate <var title="">x</var> 1.142 - with the left of the <a href="#content-edge">content edge</a> of the element and aligning <a href="#content">content</a> y-coordinate <var title="">y</var> with the top of the 1.143 - <a href="#content-edge">content edge</a> of the element. 1.144 + <li><p>Let <var title="">position</var> be the scroll position <var title="">box</var> would have by aligning <a href="#scrolling-area">scrolling area</a> x-coordinate 1.145 + <var title="">x</var> with the left of <var title="">box</var> and aligning <a href="#scrolling-area">scrolling area</a> y-coordinate <var title="">y</var> with 1.146 + the top of <var title="">box</var>. 1.147 1.148 - <li><p>If <var title="">position</var> is the same as <span>box</span>'s current scroll position, and <span>box</span> does not have an ongoing 1.149 + <li><p>If <var title="">position</var> is the same as <var title="">box</var>'s current scroll position, and <var title="">box</var> does not have an ongoing 1.150 <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a>, abort these steps. 1.151 1.152 <li><p>Let <var title="">task</var> be these steps:
2.1 --- a/cssom-view/Overview.src.html Mon May 27 13:16:03 2013 +0200 2.2 +++ b/cssom-view/Overview.src.html Mon May 27 15:11:03 2013 +0200 2.3 @@ -201,7 +201,8 @@ 2.4 2.5 <p><dfn>Content edge</dfn>, 2.6 <dfn>padding edge</dfn>, 2.7 -<dfn>border edge</dfn>, and 2.8 +<dfn>border edge</dfn>, 2.9 +<dfn>margin edge</dfn> and 2.10 <dfn>canvas</dfn> are defined by CSS. 2.11 <!--<span data-anolis-ref>CSS</span>--> 2.12 2.13 @@ -212,9 +213,18 @@ 2.14 case that element acts as viewport and initial containing block. 2.15 <!--<span data-anolis-ref>CSS</span>--> 2.16 2.17 -<p>The term <dfn>content</dfn> refers to the dimensions of the element's 2.18 -content area, including overflown content. 2.19 -<!--<span data-anolis-ref>CSS</span>--> 2.20 +<p>The term <dfn>scrolling area</dfn> refers to a box of an element that has the following edges: 2.21 + 2.22 +<dl> 2.23 + <dt>top edge 2.24 + <dd><p>The element's top padding edge. 2.25 + <dt>right edge 2.26 + <dd><p>The right-most edge of the element's right padding edge and the right margin edge of the element's all descendant boxes. 2.27 + <dt>bottom edge 2.28 + <dd><p>The bottom-most edge of the element's bottom padding edge and the bottom margin edge of the element's all descendant boxes. 2.29 + <dt>left edge 2.30 + <dd><p>The element's left padding edge. 2.31 +</dl> 2.32 2.33 <p>The term <dfn>document content</dfn> refers to the area on the 2.34 <span>canvas</span> that is rendered upon, excluding content on negative 2.35 @@ -357,12 +367,12 @@ 2.36 <dl> 2.37 <dt>If <span>document content</span> can have overflow to the right 2.38 <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>, 2.39 - <span>content</span> width - <span>content edge</span> 2.40 + <span>scrolling area</span> width - <span>padding edge</span> 2.41 width)).</p></dd> 2.42 <dt>If <span>document content</span> can have overflow to the left 2.43 (under right-to-left conditions) 2.44 <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>, 2.45 - <span>content edge</span> width - <span>content</span> 2.46 + <span>padding edge</span> width - <span>scrolling area</span> 2.47 width)).</p></dd> 2.48 </dl> 2.49 </li> 2.50 @@ -671,8 +681,8 @@ 2.51 the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, and the element 2.52 does not have any overflow, return the value of 2.53 <code title=dom-Window-scrollY>scrollY</code>.</p></li> 2.54 - <li><p>Return the y-coordinate of the <span>content</span> at the 2.55 - alignment point with the top of the <span>content edge</span> of the 2.56 + <li><p>Return the y-coordinate of the <span>scrolling area</span> at the 2.57 + alignment point with the top of the <span>padding edge</span> of the 2.58 element.</p></li> 2.59 </ol> 2.60 <p>When setting the <code title=dom-Element-scrollTop>scrollTop</code> attribute these steps must be run:</p> 2.61 @@ -709,8 +719,8 @@ 2.62 the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, and the element 2.63 does not have any overflow, return the value of 2.64 <code title=dom-Window-scrollX>scrollX</code>.</p></li> 2.65 - <li><p>Return the x-coordinate of the <span>content</span> at the 2.66 - alignment point with the left of the <span>content edge</span> of the 2.67 + <li><p>Return the x-coordinate of the <span>scrolling area</span> at the 2.68 + alignment point with the left of the <span>padding edge</span> of the 2.69 element.</p></li> 2.70 </ol> 2.71 <p>When setting the <code title=dom-Element-scrollLeft>scrollLeft</code> attribute these steps must be run:</p> 2.72 @@ -750,9 +760,7 @@ 2.73 and the <code data-anolis-spec=dom>Document</code> is in 2.74 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span> 2.75 return max(<span>document content</span> width, value of <code title=dom-Window-innerWidth>innerWidth</code>).</p></li> 2.76 - <li><p>Return the computed value of the '<code>padding-left</code>' 2.77 - property, plus the computed value of the '<code>padding-right</code>', 2.78 - plus the <span>content</span> width of the element.</p></li> 2.79 + <li><p>Return the width of the element's <span>scrolling area</span>.</p></li> 2.80 </ol> 2.81 2.82 <p>The <dfn title=dom-Element-scrollHeight><code>scrollHeight</code></dfn> attribute must return the result of running these steps:</p> 2.83 @@ -767,9 +775,7 @@ 2.84 and the <code data-anolis-spec=dom>Document</code> is in 2.85 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span> 2.86 return max(<span>document content</span> height, value of <code title=dom-Window-innerHeight>innerHeight</code>).</p></li> 2.87 - <li><p>Return the computed value of the '<code>padding-top</code>' 2.88 - property, plus the computed value of the '<code>padding-bottom</code>', 2.89 - plus the <span>content</span> height of the element.</p></li> 2.90 + <li><p>Return the height of the element's <span>scrolling area</span>.</p></li> 2.91 </ol> 2.92 2.93 <p>The <dfn title=dom-Element-clientTop><code>clientTop</code></dfn> attribute must run these steps: 2.94 @@ -834,18 +840,18 @@ 2.95 <ol> 2.96 <li><p>If the <i title>align to top flag</i> is set align the top of 2.97 the border box of the element to be scrolled into view with the top of 2.98 - the scrolling box.</p></li> 2.99 + <var title>box</var>.</p></li> 2.100 2.101 <li><p>Otherwise, if the <i title>align to top flag</i> is not set 2.102 align the bottom of the border box of the element to be scrolled into 2.103 - view with the bottom of the scrolling box.</p></li> 2.104 + view with the bottom of <var title>box</var>.</p></li> 2.105 2.106 <li><p>Align the left of the border box of the element to be scrolled 2.107 - into view with the left of the scrolling box.</p></li> 2.108 + into view with the left of <var title>box</var>.</p></li> 2.109 <!-- RTL is not special cased in implementations?! --> 2.110 </ol> 2.111 2.112 - <li><p>If <var title>position</var> is the same as <span>box</span>'s current scroll position, and <span>box</span> does not have an ongoing 2.113 + <li><p>If <var title>position</var> is the same as <var title>box</var>'s current scroll position, and <var title>box</var> does not have an ongoing 2.114 <span title=concept-smooth-scroll>smooth scroll</span>, abort these steps. 2.115 2.116 <li> 2.117 @@ -889,26 +895,26 @@ 2.118 <dt>If <var title>element</var> can have overflow to the right</dt> 2.119 2.120 <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>, 2.121 - <span>content</span> width - 2.122 - <span>content edge</span> width)).</p></dd> 2.123 + <span>scrolling area</span> width - 2.124 + <span>padding edge</span> width)).</p></dd> 2.125 2.126 <dt>If <var title>element</var> can have overflow to the left (under right-to-left 2.127 conditions)</dt> 2.128 2.129 <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>, 2.130 - <span>content edge</span> width - 2.131 - <span>content</span> width)).</p></dd> 2.132 + <span>padding edge</span> width - 2.133 + <span>scrolling area</span> width)).</p></dd> 2.134 </dl> 2.135 </li> 2.136 2.137 <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>, 2.138 - <span>content</span> height - <span>content edge</span> height)).</p></li> 2.139 + <span>scrolling area</span> height - <span>padding edge</span> height)).</p></li> 2.140 2.141 - <li><p>Let <var title>position</var> be the scroll position <var title>box</var> would have by aligning <span>content</span> x-coordinate <var title>x</var> 2.142 - with the left of the <span>content edge</span> of the element and aligning <span>content</span> y-coordinate <var title>y</var> with the top of the 2.143 - <span>content edge</span> of the element. 2.144 + <li><p>Let <var title>position</var> be the scroll position <var title>box</var> would have by aligning <span>scrolling area</span> x-coordinate 2.145 + <var title>x</var> with the left of <var title>box</var> and aligning <span>scrolling area</span> y-coordinate <var title>y</var> with 2.146 + the top of <var title>box</var>. 2.147 2.148 - <li><p>If <var title>position</var> is the same as <span>box</span>'s current scroll position, and <span>box</span> does not have an ongoing 2.149 + <li><p>If <var title>position</var> is the same as <var title>box</var>'s current scroll position, and <var title>box</var> does not have an ongoing 2.150 <span title=concept-smooth-scroll>smooth scroll</span>, abort these steps. 2.151 2.152 <li><p>Let <var title>task</var> be these steps:
