Tue, 04 Jun 2013 10:22:45 +0200
[cssom-view] Make 'scrolling area' make sense for viewports and use it instead of 'document content'
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 Tue Jun 04 01:01:47 2013 +0200 1.2 +++ b/cssom-view/Overview.html Tue Jun 04 10:22:45 2013 +0200 1.3 @@ -20,6 +20,9 @@ 1.4 span:not(.secno) { border-bottom:solid red } 1.5 .atrisk::before { position:absolute; left:30px; margin-top:-8px; width:25px; height:25px; padding:0 4px 8px; border:1px solid; content:'At risk'; 1.6 font-size:smaller; background:white; color:gray; border-radius:25px; text-align:center } 1.7 + td { vertical-align:baseline } 1.8 + td, th { border:solid } 1.9 + table { border:hidden; border-collapse:collapse } 1.10 </style> 1.11 <link href="https://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet"> 1.12 </head> 1.13 @@ -32,7 +35,7 @@ 1.14 1.15 <h1>CSSOM View Module</h1> 1.16 1.17 - <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 3 June 2013</h2> 1.18 + <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 4 June 2013</h2> 1.19 1.20 <dl> 1.21 1.22 @@ -91,7 +94,7 @@ 1.23 can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 1.24 index at http://www.w3.org/TR/.</a></em> 1.25 1.26 -<p>This is the 3 June 2013 Editor's Draft of CSSOM View. Please send 1.27 +<p>This is the 4 June 2013 Editor's Draft of CSSOM View. Please send 1.28 comments to 1.29 <a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a> 1.30 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 1.31 @@ -269,68 +272,124 @@ 1.32 <p>The term <dfn id="scrolling-area">scrolling area</dfn> refers to a box of a <a href="#viewport">viewport</a> or an element that has the following edges, depending on the 1.33 <a href="#viewport">viewport</a>'s or element's scrolling box's <a href="#overflow-directions">overflow directions</a>. 1.34 1.35 -<dl class="switch"> 1.36 - <dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and downward 1.37 - <dd> 1.38 - <dl> 1.39 - <dt>top edge 1.40 - <dd><p>The element's top <a href="#padding-edge">padding edge</a>. 1.41 - <dt>right edge 1.42 - <dd><p>The right-most edge of the element's right <a href="#padding-edge">padding edge</a> and the right <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.43 - excluding boxes that have an ancestor of element as their containing block. 1.44 - <dt>bottom edge 1.45 - <dd><p>The bottom-most edge of the element's bottom <a href="#padding-edge">padding edge</a> and the bottom <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.46 - excluding boxes that have an ancestor of element as their containing block. 1.47 - <dt>left edge 1.48 - <dd><p>The element's left <a href="#padding-edge">padding edge</a>. 1.49 - </dl> 1.50 - <dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and downward 1.51 - <dd> 1.52 - <dl> 1.53 - <dt>top edge 1.54 - <dd><p>The element's top <a href="#padding-edge">padding edge</a>. 1.55 - <dt>right edge 1.56 - <dd><p>The element's right <a href="#padding-edge">padding edge</a>. 1.57 - <dt>bottom edge 1.58 - <dd><p>The bottom-most edge of the element's bottom <a href="#padding-edge">padding edge</a> and the bottom <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.59 - excluding boxes that have an ancestor of element as their containing block. 1.60 - <dt>left edge 1.61 - <dd><p>The left-most edge of the element's left <a href="#padding-edge">padding edge</a> and the left <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.62 - excluding boxes that have an ancestor of element as their containing block. 1.63 - </dl> 1.64 - <dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and upward 1.65 - <dd> 1.66 - <dl> 1.67 - <dt>top edge 1.68 - <dd><p>The top-most edge of the element's top <a href="#padding-edge">padding edge</a> and the top <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.69 - excluding boxes that have an ancestor of element as their containing block. 1.70 - <dt>right edge 1.71 - <dd><p>The element's right <a href="#padding-edge">padding edge</a>. 1.72 - <dt>bottom edge 1.73 - <dd><p>The element's bottom <a href="#padding-edge">padding edge</a>. 1.74 - <dt>left edge 1.75 - <dd><p>The left-most edge of the element's left <a href="#padding-edge">padding edge</a> and the left <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.76 - excluding boxes that have an ancestor of element as their containing block. 1.77 - </dl> 1.78 - <dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and upward 1.79 - <dd> 1.80 - <dl> 1.81 - <dt>top edge 1.82 - <dd><p>The top-most edge of the element's top <a href="#padding-edge">padding edge</a> and the top <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.83 - excluding boxes that have an ancestor of element as their containing block. 1.84 - <dt>right edge 1.85 - <dd><p>The right-most edge of the element's right <a href="#padding-edge">padding edge</a> and the right <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.86 - excluding boxes that have an ancestor of element as their containing block. 1.87 - <dt>bottom edge 1.88 - <dd><p>The element's bottom <a href="#padding-edge">padding edge</a>. 1.89 - <dt>left edge 1.90 - <dd><p>The element's left <a href="#padding-edge">padding edge</a>. 1.91 - </dl> 1.92 -</dl> 1.93 - 1.94 -<p>The term <dfn id="document-content">document content</dfn> refers to the area on the 1.95 -<a href="#canvas">canvas</a> that is rendered upon, excluding content on negative 1.96 -axis.</p> 1.97 +<table> 1.98 + <tr> 1.99 + <th>If the <a href="#overflow-directions">overflow directions</a> areā¦ 1.100 + <th>For a <a href="#viewport">viewport</a> 1.101 + <th>For an element 1.102 + <tr> 1.103 + <td>rightward and downward 1.104 + <td> 1.105 + <dl> 1.106 + <dt>top edge 1.107 + <dd><p>The top edge of the <a href="#initial-containing-block">initial containing block</a>. 1.108 + <dt>right edge 1.109 + <dd><p>The right-most edge of the right edge of the <a href="#initial-containing-block">initial containing block</a> and the right <a href="#margin-edge">margin edge</a> of the 1.110 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.111 + <dt>bottom edge 1.112 + <dd><p>The bottom-most edge of the bottom edge of the <a href="#initial-containing-block">initial containing block</a> and the bottom <a href="#margin-edge">margin edge</a> of the 1.113 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.114 + <dt>left edge 1.115 + <dd><p>The left edge of the <a href="#initial-containing-block">initial containing block</a>. 1.116 + </dl> 1.117 + <td> 1.118 + <dl> 1.119 + <dt>top edge 1.120 + <dd><p>The element's top <a href="#padding-edge">padding edge</a>. 1.121 + <dt>right edge 1.122 + <dd><p>The right-most edge of the element's right <a href="#padding-edge">padding edge</a> and the right <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.123 + excluding boxes that have an ancestor of element as their containing block. 1.124 + <dt>bottom edge 1.125 + <dd><p>The bottom-most edge of the element's bottom <a href="#padding-edge">padding edge</a> and the bottom <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.126 + excluding boxes that have an ancestor of element as their containing block. 1.127 + <dt>left edge 1.128 + <dd><p>The element's left <a href="#padding-edge">padding edge</a>. 1.129 + </dl> 1.130 + <tr> 1.131 + <td>leftward and downward 1.132 + <td> 1.133 + <dl> 1.134 + <dt>top edge 1.135 + <dd><p>The top edge of the <a href="#initial-containing-block">initial containing block</a>. 1.136 + <dt>right edge 1.137 + <dd><p>The right edge of the <a href="#initial-containing-block">initial containing block</a>. 1.138 + <dt>bottom edge 1.139 + <dd><p>The bottom-most edge of the bottom edge of the <a href="#initial-containing-block">initial containing block</a> and the bottom <a href="#margin-edge">margin edge</a> of the 1.140 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.141 + <dt>left edge 1.142 + <dd><p>The left-most edge of the left edge of the <a href="#initial-containing-block">initial containing block</a> and the left <a href="#margin-edge">margin edge</a> of the 1.143 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.144 + </dl> 1.145 + <td> 1.146 + <dl> 1.147 + <dt>top edge 1.148 + <dd><p>The element's top <a href="#padding-edge">padding edge</a>. 1.149 + <dt>right edge 1.150 + <dd><p>The element's right <a href="#padding-edge">padding edge</a>. 1.151 + <dt>bottom edge 1.152 + <dd><p>The bottom-most edge of the element's bottom <a href="#padding-edge">padding edge</a> and the bottom <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.153 + excluding boxes that have an ancestor of element as their containing block. 1.154 + <dt>left edge 1.155 + <dd><p>The left-most edge of the element's left <a href="#padding-edge">padding edge</a> and the left <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.156 + excluding boxes that have an ancestor of element as their containing block. 1.157 + </dl> 1.158 + <tr> 1.159 + <td>leftward and upward 1.160 + <td> 1.161 + <dl> 1.162 + <dt>top edge 1.163 + <dd><p>The top-most edge of the top edge of the <a href="#initial-containing-block">initial containing block</a> and the top <a href="#margin-edge">margin edge</a> of the 1.164 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.165 + <dt>right edge 1.166 + <dd><p>The right edge of the <a href="#initial-containing-block">initial containing block</a>. 1.167 + <dt>bottom edge 1.168 + <dd><p>The bottom edge of the <a href="#initial-containing-block">initial containing block</a>. 1.169 + <dt>left edge 1.170 + <dd><p>The left-most edge of the left edge of the <a href="#initial-containing-block">initial containing block</a> and the left <a href="#margin-edge">margin edge</a> of the 1.171 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.172 + </dl> 1.173 + <td> 1.174 + <dl> 1.175 + <dt>top edge 1.176 + <dd><p>The top-most edge of the element's top <a href="#padding-edge">padding edge</a> and the top <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.177 + excluding boxes that have an ancestor of element as their containing block. 1.178 + <dt>right edge 1.179 + <dd><p>The element's right <a href="#padding-edge">padding edge</a>. 1.180 + <dt>bottom edge 1.181 + <dd><p>The element's bottom <a href="#padding-edge">padding edge</a>. 1.182 + <dt>left edge 1.183 + <dd><p>The left-most edge of the element's left <a href="#padding-edge">padding edge</a> and the left <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.184 + excluding boxes that have an ancestor of element as their containing block. 1.185 + </dl> 1.186 + <tr> 1.187 + <td>rightward and upward 1.188 + <td> 1.189 + <dl> 1.190 + <dt>top edge 1.191 + <dd><p>The top-most edge of the top edge of the <a href="#initial-containing-block">initial containing block</a> and the top <a href="#margin-edge">margin edge</a> of the 1.192 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.193 + <dt>right edge 1.194 + <dd><p>The right-most edge of the right edge of the <a href="#initial-containing-block">initial containing block</a> and the right <a href="#margin-edge">margin edge</a> of the 1.195 + <a href="#viewport">viewport</a>'s all descendant boxes. 1.196 + <dt>bottom edge 1.197 + <dd><p>The bottom edge of the <a href="#initial-containing-block">initial containing block</a>. 1.198 + <dt>left edge 1.199 + <dd><p>The left edge of the <a href="#initial-containing-block">initial containing block</a>. 1.200 + </dl> 1.201 + <td> 1.202 + <dl> 1.203 + <dt>top edge 1.204 + <dd><p>The top-most edge of the element's top <a href="#padding-edge">padding edge</a> and the top <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.205 + excluding boxes that have an ancestor of element as their containing block. 1.206 + <dt>right edge 1.207 + <dd><p>The right-most edge of the element's right <a href="#padding-edge">padding edge</a> and the right <a href="#margin-edge">margin edge</a> of the element's all descendant boxes, 1.208 + excluding boxes that have an ancestor of element as their containing block. 1.209 + <dt>bottom edge 1.210 + <dd><p>The element's bottom <a href="#padding-edge">padding edge</a>. 1.211 + <dt>left edge 1.212 + <dd><p>The element's left <a href="#padding-edge">padding edge</a>. 1.213 + </dl> 1.214 +</table> 1.215 1.216 <p>The term <dfn id="css-layout-box">CSS layout box</dfn> refers to the same term in CSS. For the purpose 1.217 of the requirements in this specification, elements that have a computed value of the 1.218 @@ -501,11 +560,11 @@ 1.219 </li> 1.220 <!-- XXX support upward overflow --> 1.221 <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>, 1.222 - <a href="#document-content">document content</a> height - <a href="#viewport">viewport</a> 1.223 + <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height - <a href="#viewport">viewport</a> 1.224 height excluding the size of a rendered scroll bar (if any))).</li> 1.225 <li><p>Let <var title="">position</var> be the scroll position the <a href="#viewport">viewport</a> would have by aligning the x-coordinate <var title="">x</var> of the 1.226 - <a href="#document-content">document content</a> with the left of the <a href="#viewport">viewport</a> and aligning the y-coordinate <var title="">y</var> of the <a href="#document-content">document content</a> 1.227 - with the top of the <a href="#viewport">viewport</a>. 1.228 + <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> with the left of the <a href="#viewport">viewport</a> and aligning the y-coordinate <var title="">y</var> of the 1.229 + <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> with the top of the <a href="#viewport">viewport</a>. 1.230 <li><p>If <var title="">position</var> is the same as the <a href="#viewport">viewport</a>'s current scroll position, and the <a href="#viewport">viewport</a> does not have an ongoing 1.231 <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a>, abort these steps. 1.232 <li><p>Let <var title="">task</var> be these steps: 1.233 @@ -883,11 +942,11 @@ 1.234 <li><p>If the element is the root element and the 1.235 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is not in 1.236 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> 1.237 - return max(<a href="#document-content">document content</a> width, <var title="">viewport width</var>).</li> 1.238 + return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> width, <var title="">viewport width</var>).</li> 1.239 <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> 1.240 and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in 1.241 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> 1.242 - return max(<a href="#document-content">document content</a> width, <var title="">viewport width</var>).</li> 1.243 + return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> width, <var title="">viewport width</var>).</li> 1.244 <li><p>Return the width of the element's <a href="#scrolling-area">scrolling area</a>.</li> 1.245 </ol> 1.246 1.247 @@ -900,11 +959,11 @@ 1.248 <li><p>If the element is the root element and the 1.249 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is not in 1.250 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> 1.251 - return max(<a href="#document-content">document content</a> height, <var title="">viewport height</var>).</li> 1.252 + return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height, <var title="">viewport height</var>).</li> 1.253 <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a> 1.254 and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in 1.255 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> 1.256 - return max(<a href="#document-content">document content</a> height, <var title="">viewport height</var>).</li> 1.257 + return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height, <var title="">viewport height</var>).</li> 1.258 <li><p>Return the height of the element's <a href="#scrolling-area">scrolling area</a>.</li> 1.259 </ol> 1.260
2.1 --- a/cssom-view/Overview.src.html Tue Jun 04 01:01:47 2013 +0200 2.2 +++ b/cssom-view/Overview.src.html Tue Jun 04 10:22:45 2013 +0200 2.3 @@ -22,6 +22,9 @@ 2.4 span:not(.secno) { border-bottom:solid red } 2.5 .atrisk::before { position:absolute; left:30px; margin-top:-8px; width:25px; height:25px; padding:0 4px 8px; border:1px solid; content:'At risk'; 2.6 font-size:smaller; background:white; color:gray; border-radius:25px; text-align:center } 2.7 + td { vertical-align:baseline } 2.8 + td, th { border:solid } 2.9 + table { border:hidden; border-collapse:collapse } 2.10 </style> 2.11 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-[STATUS]"> 2.12 </head> 2.13 @@ -237,68 +240,124 @@ 2.14 <p>The term <dfn>scrolling area</dfn> refers to a box of a <span>viewport</span> or an element that has the following edges, depending on the 2.15 <span>viewport</span>'s or element's scrolling box's <span>overflow directions</span>. 2.16 2.17 -<dl class=switch> 2.18 - <dt>If the <span>overflow directions</span> are rightward and downward 2.19 - <dd> 2.20 - <dl> 2.21 - <dt>top edge 2.22 - <dd><p>The element's top <span>padding edge</span>. 2.23 - <dt>right edge 2.24 - <dd><p>The right-most edge of the element's right <span>padding edge</span> and the right <span>margin edge</span> of the element's all descendant boxes, 2.25 - excluding boxes that have an ancestor of element as their containing block. 2.26 - <dt>bottom edge 2.27 - <dd><p>The bottom-most edge of the element's bottom <span>padding edge</span> and the bottom <span>margin edge</span> of the element's all descendant boxes, 2.28 - excluding boxes that have an ancestor of element as their containing block. 2.29 - <dt>left edge 2.30 - <dd><p>The element's left <span>padding edge</span>. 2.31 - </dl> 2.32 - <dt>If the <span>overflow directions</span> are leftward and downward 2.33 - <dd> 2.34 - <dl> 2.35 - <dt>top edge 2.36 - <dd><p>The element's top <span>padding edge</span>. 2.37 - <dt>right edge 2.38 - <dd><p>The element's right <span>padding edge</span>. 2.39 - <dt>bottom edge 2.40 - <dd><p>The bottom-most edge of the element's bottom <span>padding edge</span> and the bottom <span>margin edge</span> of the element's all descendant boxes, 2.41 - excluding boxes that have an ancestor of element as their containing block. 2.42 - <dt>left edge 2.43 - <dd><p>The left-most edge of the element's left <span>padding edge</span> and the left <span>margin edge</span> of the element's all descendant boxes, 2.44 - excluding boxes that have an ancestor of element as their containing block. 2.45 - </dl> 2.46 - <dt>If the <span>overflow directions</span> are leftward and upward 2.47 - <dd> 2.48 - <dl> 2.49 - <dt>top edge 2.50 - <dd><p>The top-most edge of the element's top <span>padding edge</span> and the top <span>margin edge</span> of the element's all descendant boxes, 2.51 - excluding boxes that have an ancestor of element as their containing block. 2.52 - <dt>right edge 2.53 - <dd><p>The element's right <span>padding edge</span>. 2.54 - <dt>bottom edge 2.55 - <dd><p>The element's bottom <span>padding edge</span>. 2.56 - <dt>left edge 2.57 - <dd><p>The left-most edge of the element's left <span>padding edge</span> and the left <span>margin edge</span> of the element's all descendant boxes, 2.58 - excluding boxes that have an ancestor of element as their containing block. 2.59 - </dl> 2.60 - <dt>If the <span>overflow directions</span> are rightward and upward 2.61 - <dd> 2.62 - <dl> 2.63 - <dt>top edge 2.64 - <dd><p>The top-most edge of the element's top <span>padding edge</span> and the top <span>margin edge</span> of the element's all descendant boxes, 2.65 - excluding boxes that have an ancestor of element as their containing block. 2.66 - <dt>right edge 2.67 - <dd><p>The right-most edge of the element's right <span>padding edge</span> and the right <span>margin edge</span> of the element's all descendant boxes, 2.68 - excluding boxes that have an ancestor of element as their containing block. 2.69 - <dt>bottom edge 2.70 - <dd><p>The element's bottom <span>padding edge</span>. 2.71 - <dt>left edge 2.72 - <dd><p>The element's left <span>padding edge</span>. 2.73 - </dl> 2.74 -</dl> 2.75 - 2.76 -<p>The term <dfn>document content</dfn> refers to the area on the 2.77 -<span>canvas</span> that is rendered upon, excluding content on negative 2.78 -axis.</p> 2.79 +<table> 2.80 + <tr> 2.81 + <th>If the <span>overflow directions</span> are… 2.82 + <th>For a <span>viewport</span> 2.83 + <th>For an element 2.84 + <tr> 2.85 + <td>rightward and downward 2.86 + <td> 2.87 + <dl> 2.88 + <dt>top edge 2.89 + <dd><p>The top edge of the <span>initial containing block</span>. 2.90 + <dt>right edge 2.91 + <dd><p>The right-most edge of the right edge of the <span>initial containing block</span> and the right <span>margin edge</span> of the 2.92 + <span>viewport</span>'s all descendant boxes. 2.93 + <dt>bottom edge 2.94 + <dd><p>The bottom-most edge of the bottom edge of the <span>initial containing block</span> and the bottom <span>margin edge</span> of the 2.95 + <span>viewport</span>'s all descendant boxes. 2.96 + <dt>left edge 2.97 + <dd><p>The left edge of the <span>initial containing block</span>. 2.98 + </dl> 2.99 + <td> 2.100 + <dl> 2.101 + <dt>top edge 2.102 + <dd><p>The element's top <span>padding edge</span>. 2.103 + <dt>right edge 2.104 + <dd><p>The right-most edge of the element's right <span>padding edge</span> and the right <span>margin edge</span> of the element's all descendant boxes, 2.105 + excluding boxes that have an ancestor of element as their containing block. 2.106 + <dt>bottom edge 2.107 + <dd><p>The bottom-most edge of the element's bottom <span>padding edge</span> and the bottom <span>margin edge</span> of the element's all descendant boxes, 2.108 + excluding boxes that have an ancestor of element as their containing block. 2.109 + <dt>left edge 2.110 + <dd><p>The element's left <span>padding edge</span>. 2.111 + </dl> 2.112 + <tr> 2.113 + <td>leftward and downward 2.114 + <td> 2.115 + <dl> 2.116 + <dt>top edge 2.117 + <dd><p>The top edge of the <span>initial containing block</span>. 2.118 + <dt>right edge 2.119 + <dd><p>The right edge of the <span>initial containing block</span>. 2.120 + <dt>bottom edge 2.121 + <dd><p>The bottom-most edge of the bottom edge of the <span>initial containing block</span> and the bottom <span>margin edge</span> of the 2.122 + <span>viewport</span>'s all descendant boxes. 2.123 + <dt>left edge 2.124 + <dd><p>The left-most edge of the left edge of the <span>initial containing block</span> and the left <span>margin edge</span> of the 2.125 + <span>viewport</span>'s all descendant boxes. 2.126 + </dl> 2.127 + <td> 2.128 + <dl> 2.129 + <dt>top edge 2.130 + <dd><p>The element's top <span>padding edge</span>. 2.131 + <dt>right edge 2.132 + <dd><p>The element's right <span>padding edge</span>. 2.133 + <dt>bottom edge 2.134 + <dd><p>The bottom-most edge of the element's bottom <span>padding edge</span> and the bottom <span>margin edge</span> of the element's all descendant boxes, 2.135 + excluding boxes that have an ancestor of element as their containing block. 2.136 + <dt>left edge 2.137 + <dd><p>The left-most edge of the element's left <span>padding edge</span> and the left <span>margin edge</span> of the element's all descendant boxes, 2.138 + excluding boxes that have an ancestor of element as their containing block. 2.139 + </dl> 2.140 + <tr> 2.141 + <td>leftward and upward 2.142 + <td> 2.143 + <dl> 2.144 + <dt>top edge 2.145 + <dd><p>The top-most edge of the top edge of the <span>initial containing block</span> and the top <span>margin edge</span> of the 2.146 + <span>viewport</span>'s all descendant boxes. 2.147 + <dt>right edge 2.148 + <dd><p>The right edge of the <span>initial containing block</span>. 2.149 + <dt>bottom edge 2.150 + <dd><p>The bottom edge of the <span>initial containing block</span>. 2.151 + <dt>left edge 2.152 + <dd><p>The left-most edge of the left edge of the <span>initial containing block</span> and the left <span>margin edge</span> of the 2.153 + <span>viewport</span>'s all descendant boxes. 2.154 + </dl> 2.155 + <td> 2.156 + <dl> 2.157 + <dt>top edge 2.158 + <dd><p>The top-most edge of the element's top <span>padding edge</span> and the top <span>margin edge</span> of the element's all descendant boxes, 2.159 + excluding boxes that have an ancestor of element as their containing block. 2.160 + <dt>right edge 2.161 + <dd><p>The element's right <span>padding edge</span>. 2.162 + <dt>bottom edge 2.163 + <dd><p>The element's bottom <span>padding edge</span>. 2.164 + <dt>left edge 2.165 + <dd><p>The left-most edge of the element's left <span>padding edge</span> and the left <span>margin edge</span> of the element's all descendant boxes, 2.166 + excluding boxes that have an ancestor of element as their containing block. 2.167 + </dl> 2.168 + <tr> 2.169 + <td>rightward and upward 2.170 + <td> 2.171 + <dl> 2.172 + <dt>top edge 2.173 + <dd><p>The top-most edge of the top edge of the <span>initial containing block</span> and the top <span>margin edge</span> of the 2.174 + <span>viewport</span>'s all descendant boxes. 2.175 + <dt>right edge 2.176 + <dd><p>The right-most edge of the right edge of the <span>initial containing block</span> and the right <span>margin edge</span> of the 2.177 + <span>viewport</span>'s all descendant boxes. 2.178 + <dt>bottom edge 2.179 + <dd><p>The bottom edge of the <span>initial containing block</span>. 2.180 + <dt>left edge 2.181 + <dd><p>The left edge of the <span>initial containing block</span>. 2.182 + </dl> 2.183 + <td> 2.184 + <dl> 2.185 + <dt>top edge 2.186 + <dd><p>The top-most edge of the element's top <span>padding edge</span> and the top <span>margin edge</span> of the element's all descendant boxes, 2.187 + excluding boxes that have an ancestor of element as their containing block. 2.188 + <dt>right edge 2.189 + <dd><p>The right-most edge of the element's right <span>padding edge</span> and the right <span>margin edge</span> of the element's all descendant boxes, 2.190 + excluding boxes that have an ancestor of element as their containing block. 2.191 + <dt>bottom edge 2.192 + <dd><p>The element's bottom <span>padding edge</span>. 2.193 + <dt>left edge 2.194 + <dd><p>The element's left <span>padding edge</span>. 2.195 + </dl> 2.196 +</table> 2.197 2.198 <p>The term <dfn>CSS layout box</dfn> refers to the same term in CSS. For the purpose 2.199 of the requirements in this specification, elements that have a computed value of the 2.200 @@ -469,11 +528,11 @@ 2.201 </li> 2.202 <!-- XXX support upward overflow --> 2.203 <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>, 2.204 - <span>document content</span> height - <span>viewport</span> 2.205 + <span>viewport</span> <span>scrolling area</span> height - <span>viewport</span> 2.206 height excluding the size of a rendered scroll bar (if any))).</p></li> 2.207 <li><p>Let <var title>position</var> be the scroll position the <span>viewport</span> would have by aligning the x-coordinate <var title>x</var> of the 2.208 - <span>document content</span> with the left of the <span>viewport</span> and aligning the y-coordinate <var title>y</var> of the <span>document content</span> 2.209 - with the top of the <span>viewport</span>. 2.210 + <span>viewport</span> <span>scrolling area</span> with the left of the <span>viewport</span> and aligning the y-coordinate <var title>y</var> of the 2.211 + <span>viewport</span> <span>scrolling area</span> with the top of the <span>viewport</span>. 2.212 <li><p>If <var title>position</var> is the same as the <span>viewport</span>'s current scroll position, and the <span>viewport</span> does not have an ongoing 2.213 <span title=concept-smooth-scroll>smooth scroll</span>, abort these steps. 2.214 <li><p>Let <var title>task</var> be these steps: 2.215 @@ -849,11 +908,11 @@ 2.216 <li><p>If the element is the root element and the 2.217 <code data-anolis-spec=dom>Document</code> is not in 2.218 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span> 2.219 - return max(<span>document content</span> width, <var title>viewport width</var>).</p></li> 2.220 + return max(<span>viewport</span> <span>scrolling area</span> width, <var title>viewport width</var>).</p></li> 2.221 <li><p>If the element is <span>the HTML <code>body</code> element</span> 2.222 and the <code data-anolis-spec=dom>Document</code> is in 2.223 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span> 2.224 - return max(<span>document content</span> width, <var title>viewport width</var>).</p></li> 2.225 + return max(<span>viewport</span> <span>scrolling area</span> width, <var title>viewport width</var>).</p></li> 2.226 <li><p>Return the width of the element's <span>scrolling area</span>.</p></li> 2.227 </ol> 2.228 2.229 @@ -866,11 +925,11 @@ 2.230 <li><p>If the element is the root element and the 2.231 <code data-anolis-spec=dom>Document</code> is not in 2.232 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span> 2.233 - return max(<span>document content</span> height, <var title>viewport height</var>).</p></li> 2.234 + return max(<span>viewport</span> <span>scrolling area</span> height, <var title>viewport height</var>).</p></li> 2.235 <li><p>If the element is <span>the HTML <code>body</code> element</span> 2.236 and the <code data-anolis-spec=dom>Document</code> is in 2.237 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span> 2.238 - return max(<span>document content</span> height, <var title>viewport height</var>).</p></li> 2.239 + return max(<span>viewport</span> <span>scrolling area</span> height, <var title>viewport height</var>).</p></li> 2.240 <li><p>Return the height of the element's <span>scrolling area</span>.</p></li> 2.241 </ol> 2.242