Skip to content

Commit d1ad53c

Browse files
author
Simon Pieters
committed
[cssom-view] Make 'scrolling area' make sense for viewports and use it instead of 'document content'
1 parent 7d15b04 commit d1ad53c

2 files changed

Lines changed: 258 additions & 140 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 130 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
span:not(.secno) { border-bottom:solid red }
2121
.atrisk::before { position:absolute; left:30px; margin-top:-8px; width:25px; height:25px; padding:0 4px 8px; border:1px solid; content:'At risk';
2222
font-size:smaller; background:white; color:gray; border-radius:25px; text-align:center }
23+
td { vertical-align:baseline }
24+
td, th { border:solid }
25+
table { border:hidden; border-collapse:collapse }
2326
</style>
2427
<link href="https://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
2528
</head>
@@ -32,7 +35,7 @@
3235

3336
<h1>CSSOM View Module</h1>
3437

35-
<h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 3 June 2013</h2>
38+
<h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 4 June 2013</h2>
3639

3740
<dl>
3841

@@ -91,7 +94,7 @@ <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
9194
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
9295
index at http://www.w3.org/TR/.</a></em>
9396

94-
<p>This is the 3 June 2013 Editor's Draft of CSSOM View. Please send
97+
<p>This is the 4 June 2013 Editor's Draft of CSSOM View. Please send
9598
comments to
9699
<a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a>
97100
(<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
@@ -269,68 +272,124 @@ <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
269272
<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
270273
<a href="#viewport">viewport</a>'s or element's scrolling box's <a href="#overflow-directions">overflow directions</a>.
271274

272-
<dl class="switch">
273-
<dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and downward
274-
<dd>
275-
<dl>
276-
<dt>top edge
277-
<dd><p>The element's top <a href="#padding-edge">padding edge</a>.
278-
<dt>right edge
279-
<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,
280-
excluding boxes that have an ancestor of element as their containing block.
281-
<dt>bottom edge
282-
<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,
283-
excluding boxes that have an ancestor of element as their containing block.
284-
<dt>left edge
285-
<dd><p>The element's left <a href="#padding-edge">padding edge</a>.
286-
</dl>
287-
<dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and downward
288-
<dd>
289-
<dl>
290-
<dt>top edge
291-
<dd><p>The element's top <a href="#padding-edge">padding edge</a>.
292-
<dt>right edge
293-
<dd><p>The element's right <a href="#padding-edge">padding edge</a>.
294-
<dt>bottom edge
295-
<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,
296-
excluding boxes that have an ancestor of element as their containing block.
297-
<dt>left edge
298-
<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,
299-
excluding boxes that have an ancestor of element as their containing block.
300-
</dl>
301-
<dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and upward
302-
<dd>
303-
<dl>
304-
<dt>top edge
305-
<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,
306-
excluding boxes that have an ancestor of element as their containing block.
307-
<dt>right edge
308-
<dd><p>The element's right <a href="#padding-edge">padding edge</a>.
309-
<dt>bottom edge
310-
<dd><p>The element's bottom <a href="#padding-edge">padding edge</a>.
311-
<dt>left edge
312-
<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,
313-
excluding boxes that have an ancestor of element as their containing block.
314-
</dl>
315-
<dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and upward
316-
<dd>
317-
<dl>
318-
<dt>top edge
319-
<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,
320-
excluding boxes that have an ancestor of element as their containing block.
321-
<dt>right edge
322-
<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,
323-
excluding boxes that have an ancestor of element as their containing block.
324-
<dt>bottom edge
325-
<dd><p>The element's bottom <a href="#padding-edge">padding edge</a>.
326-
<dt>left edge
327-
<dd><p>The element's left <a href="#padding-edge">padding edge</a>.
328-
</dl>
329-
</dl>
330-
331-
<p>The term <dfn id="document-content">document content</dfn> refers to the area on the
332-
<a href="#canvas">canvas</a> that is rendered upon, excluding content on negative
333-
axis.</p>
275+
<table>
276+
<tr>
277+
<th>If the <a href="#overflow-directions">overflow directions</a> are…
278+
<th>For a <a href="#viewport">viewport</a>
279+
<th>For an element
280+
<tr>
281+
<td>rightward and downward
282+
<td>
283+
<dl>
284+
<dt>top edge
285+
<dd><p>The top edge of the <a href="#initial-containing-block">initial containing block</a>.
286+
<dt>right edge
287+
<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
288+
<a href="#viewport">viewport</a>'s all descendant boxes.
289+
<dt>bottom edge
290+
<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
291+
<a href="#viewport">viewport</a>'s all descendant boxes.
292+
<dt>left edge
293+
<dd><p>The left edge of the <a href="#initial-containing-block">initial containing block</a>.
294+
</dl>
295+
<td>
296+
<dl>
297+
<dt>top edge
298+
<dd><p>The element's top <a href="#padding-edge">padding edge</a>.
299+
<dt>right edge
300+
<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,
301+
excluding boxes that have an ancestor of element as their containing block.
302+
<dt>bottom edge
303+
<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,
304+
excluding boxes that have an ancestor of element as their containing block.
305+
<dt>left edge
306+
<dd><p>The element's left <a href="#padding-edge">padding edge</a>.
307+
</dl>
308+
<tr>
309+
<td>leftward and downward
310+
<td>
311+
<dl>
312+
<dt>top edge
313+
<dd><p>The top edge of the <a href="#initial-containing-block">initial containing block</a>.
314+
<dt>right edge
315+
<dd><p>The right edge of the <a href="#initial-containing-block">initial containing block</a>.
316+
<dt>bottom edge
317+
<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
318+
<a href="#viewport">viewport</a>'s all descendant boxes.
319+
<dt>left edge
320+
<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
321+
<a href="#viewport">viewport</a>'s all descendant boxes.
322+
</dl>
323+
<td>
324+
<dl>
325+
<dt>top edge
326+
<dd><p>The element's top <a href="#padding-edge">padding edge</a>.
327+
<dt>right edge
328+
<dd><p>The element's right <a href="#padding-edge">padding edge</a>.
329+
<dt>bottom edge
330+
<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,
331+
excluding boxes that have an ancestor of element as their containing block.
332+
<dt>left edge
333+
<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,
334+
excluding boxes that have an ancestor of element as their containing block.
335+
</dl>
336+
<tr>
337+
<td>leftward and upward
338+
<td>
339+
<dl>
340+
<dt>top edge
341+
<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
342+
<a href="#viewport">viewport</a>'s all descendant boxes.
343+
<dt>right edge
344+
<dd><p>The right edge of the <a href="#initial-containing-block">initial containing block</a>.
345+
<dt>bottom edge
346+
<dd><p>The bottom edge of the <a href="#initial-containing-block">initial containing block</a>.
347+
<dt>left edge
348+
<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
349+
<a href="#viewport">viewport</a>'s all descendant boxes.
350+
</dl>
351+
<td>
352+
<dl>
353+
<dt>top edge
354+
<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,
355+
excluding boxes that have an ancestor of element as their containing block.
356+
<dt>right edge
357+
<dd><p>The element's right <a href="#padding-edge">padding edge</a>.
358+
<dt>bottom edge
359+
<dd><p>The element's bottom <a href="#padding-edge">padding edge</a>.
360+
<dt>left edge
361+
<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,
362+
excluding boxes that have an ancestor of element as their containing block.
363+
</dl>
364+
<tr>
365+
<td>rightward and upward
366+
<td>
367+
<dl>
368+
<dt>top edge
369+
<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
370+
<a href="#viewport">viewport</a>'s all descendant boxes.
371+
<dt>right edge
372+
<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
373+
<a href="#viewport">viewport</a>'s all descendant boxes.
374+
<dt>bottom edge
375+
<dd><p>The bottom edge of the <a href="#initial-containing-block">initial containing block</a>.
376+
<dt>left edge
377+
<dd><p>The left edge of the <a href="#initial-containing-block">initial containing block</a>.
378+
</dl>
379+
<td>
380+
<dl>
381+
<dt>top edge
382+
<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,
383+
excluding boxes that have an ancestor of element as their containing block.
384+
<dt>right edge
385+
<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,
386+
excluding boxes that have an ancestor of element as their containing block.
387+
<dt>bottom edge
388+
<dd><p>The element's bottom <a href="#padding-edge">padding edge</a>.
389+
<dt>left edge
390+
<dd><p>The element's left <a href="#padding-edge">padding edge</a>.
391+
</dl>
392+
</table>
334393

335394
<p>The term <dfn id="css-layout-box">CSS layout box</dfn> refers to the same term in CSS. For the purpose
336395
of the requirements in this specification, elements that have a computed value of the
@@ -501,11 +560,11 @@ <h2 id="extensions-to-the-window-interface"><span class="secno">5 </span>Extensi
501560
</li>
502561
<!-- XXX support upward overflow -->
503562
<li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
504-
<a href="#document-content">document content</a> height - <a href="#viewport">viewport</a>
563+
<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height - <a href="#viewport">viewport</a>
505564
height excluding the size of a rendered scroll bar (if any))).</li>
506565
<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
507-
<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>
508-
with the top of the <a href="#viewport">viewport</a>.
566+
<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
567+
<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> with the top of the <a href="#viewport">viewport</a>.
509568
<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
510569
<a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a>, abort these steps.
511570
<li><p>Let <var title="">task</var> be these steps:
@@ -883,11 +942,11 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
883942
<li><p>If the element is the root element and the
884943
<code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is not in
885944
<a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
886-
return max(<a href="#document-content">document content</a> width, <var title="">viewport width</var>).</li>
945+
return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> width, <var title="">viewport width</var>).</li>
887946
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>
888947
and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
889948
<a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
890-
return max(<a href="#document-content">document content</a> width, <var title="">viewport width</var>).</li>
949+
return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> width, <var title="">viewport width</var>).</li>
891950
<li><p>Return the width of the element's <a href="#scrolling-area">scrolling area</a>.</li>
892951
</ol>
893952

@@ -900,11 +959,11 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
900959
<li><p>If the element is the root element and the
901960
<code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is not in
902961
<a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
903-
return max(<a href="#document-content">document content</a> height, <var title="">viewport height</var>).</li>
962+
return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height, <var title="">viewport height</var>).</li>
904963
<li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>
905964
and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
906965
<a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
907-
return max(<a href="#document-content">document content</a> height, <var title="">viewport height</var>).</li>
966+
return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height, <var title="">viewport height</var>).</li>
908967
<li><p>Return the height of the element's <a href="#scrolling-area">scrolling area</a>.</li>
909968
</ol>
910969

0 commit comments

Comments
 (0)