[cssom-view] Introduce the term 'overflow directions'

Fri, 31 May 2013 12:48:50 +0200

author
Simon Pieters <simonp@opera.com>
date
Fri, 31 May 2013 12:48:50 +0200
changeset 8316
4173a32e6fc9
parent 8315
ed75c8f22fa1
child 8317
6102bc601fb4

[cssom-view] Introduce the term 'overflow directions'

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	Fri May 31 12:14:19 2013 +0200
     1.2 +++ b/cssom-view/Overview.html	Fri May 31 12:48:50 2013 +0200
     1.3 @@ -245,11 +245,27 @@
     1.4  
     1.5  <p><dfn id="block-flow-direction">Block flow direction</dfn> and <dfn id="inline-base-direction">inline base direction</dfn> are defined in CSS Writing Modes Module. <a href="#refsCSSWRITINGMODES">[CSSWRITINGMODES]</a>
     1.6  
     1.7 -<p>The term <dfn id="scrolling-area">scrolling area</dfn> refers to a box of an element that has the following edges, depending on the element's <a href="#block-flow-direction">block flow direction</a> and <a href="#inline-base-direction">inline base direction</a>.
     1.8 +<p>A scrolling box of a <a href="#viewport">viewport</a> or element has two <dfn id="overflow-directions">overflow directions</dfn>, depending on the <a href="#viewport">viewport</a>'s or element's
     1.9 +<a href="#block-flow-direction">block flow direction</a> and <a href="#inline-base-direction">inline base direction</a>, as follows:
    1.10 +
    1.11 +<dl>
    1.12 + <dt>If the <a href="#block-flow-direction">block flow direction</a> is top-to-bottom and the <a href="#inline-base-direction">inline base direction</a> is left-to-right
    1.13 + <dt>If the <a href="#block-flow-direction">block flow direction</a> is left-to-right and the <a href="#inline-base-direction">inline base direction</a> is left-to-right
    1.14 + <dd><p>Rightward and downward.
    1.15 + <dt>If the <a href="#block-flow-direction">block flow direction</a> is top-to-bottom and the <a href="#inline-base-direction">inline base direction</a> is right-to-left
    1.16 + <dt>If the <a href="#block-flow-direction">block flow direction</a> is right-to-left and the <a href="#inline-base-direction">inline base direction</a> is left-to-right
    1.17 + <dd><p>Leftward and downward.
    1.18 + <dt>If the <a href="#block-flow-direction">block flow direction</a> is right-to-left and the <a href="#inline-base-direction">inline base direction</a> is right-to-left
    1.19 + <dd><p>Leftward and upward.
    1.20 + <dt>If the <a href="#block-flow-direction">block flow direction</a> is left-to-right and the <a href="#inline-base-direction">inline base direction</a> is right-to-left
    1.21 + <dd><p>Righward and upward.
    1.22 +</dl>
    1.23 +
    1.24 +<p>The term <dfn id="scrolling-area">scrolling area</dfn> refers to a box of an element that has the following edges, depending on the element's scrolling box's <a href="#overflow-directions">overflow
    1.25 +directions</a>.
    1.26  
    1.27  <dl class="switch">
    1.28 - <dt>If the <a href="#block-flow-direction">block flow direction</a> is top-to-bottom and the <a href="#inline-base-direction">inline base direction</a> is left-to-right
    1.29 - <dt>If the <a href="#block-flow-direction">block flow direction</a> is left-to-right and the <a href="#inline-base-direction">inline base direction</a> is left-to-right
    1.30 + <dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and downward
    1.31   <dd>
    1.32    <dl>
    1.33     <dt>top edge
    1.34 @@ -263,8 +279,7 @@
    1.35     <dt>left edge
    1.36     <dd><p>The element's left <a href="#padding-edge">padding edge</a>.
    1.37    </dl>
    1.38 - <dt>If the <a href="#block-flow-direction">block flow direction</a> is top-to-bottom and the <a href="#inline-base-direction">inline base direction</a> is right-to-left
    1.39 - <dt>If the <a href="#block-flow-direction">block flow direction</a> is right-to-left and the <a href="#inline-base-direction">inline base direction</a> is left-to-right
    1.40 + <dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and downward
    1.41   <dd>
    1.42    <dl>
    1.43     <dt>top edge
    1.44 @@ -278,7 +293,7 @@
    1.45     <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.46     excluding boxes that have an ancestor of element as their containing block.
    1.47    </dl>
    1.48 - <dt>If the <a href="#block-flow-direction">block flow direction</a> is right-to-left and the <a href="#inline-base-direction">inline base direction</a> is right-to-left
    1.49 + <dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and upward
    1.50   <dd>
    1.51    <dl>
    1.52     <dt>top edge
    1.53 @@ -292,7 +307,7 @@
    1.54     <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.55     excluding boxes that have an ancestor of element as their containing block.
    1.56    </dl>
    1.57 - <dt>If the <a href="#block-flow-direction">block flow direction</a> is left-to-right and the <a href="#inline-base-direction">inline base direction</a> is right-to-left
    1.58 + <dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and upward
    1.59   <dd>
    1.60    <dl>
    1.61     <dt>top edge
    1.62 @@ -447,17 +462,17 @@
    1.63  <ol>
    1.64   <li><p>If there is no <a href="#viewport">viewport</a>, abort these steps.
    1.65    <dl class="switch">
    1.66 -   <dt>If <a href="#document-content">document content</a> can have overflow to the right
    1.67 +   <dt>If the <a href="#viewport">viewport</a> has rightward <a href="#overflow-directions" title="overflow directions">overflow direction</a>
    1.68     <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>,
    1.69     <a href="#scrolling-area">scrolling area</a> width - <a href="#padding-edge">padding edge</a>
    1.70     width)).</dd>
    1.71 -   <dt>If <a href="#document-content">document content</a> can have overflow to the left
    1.72 -   (under right-to-left conditions)
    1.73 +   <dt>If the <a href="#viewport">viewport</a> has leftward <a href="#overflow-directions" title="overflow directions">overflow direction</a>
    1.74     <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>,
    1.75     <a href="#padding-edge">padding edge</a> width - <a href="#scrolling-area">scrolling area</a>
    1.76     width)).</dd>
    1.77    </dl>
    1.78   </li>
    1.79 + <!-- XXX support upward overflow -->
    1.80   <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
    1.81   <a href="#document-content">document content</a> height - <a href="#viewport">viewport</a>
    1.82   height excluding the size of a rendered scroll bar (if any))).</li>
    1.83 @@ -980,14 +995,13 @@
    1.84   <li><p>Let <var title="">box</var> be <var title="">element</var>'s associated scrolling box.
    1.85   <li>
    1.86    <dl class="switch">
    1.87 -   <dt>If <var title="">element</var> can have overflow to the right</dt>
    1.88 +   <dt>If <var title="">box</var> has rightward <a href="#overflow-directions" title="overflow directions">overflow direction</a></dt>
    1.89  
    1.90     <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>,
    1.91     <a href="#scrolling-area">scrolling area</a> width -
    1.92     <a href="#padding-edge">padding edge</a> width)).</dd>
    1.93  
    1.94 -   <dt>If <var title="">element</var> can have overflow to the left (under right-to-left
    1.95 -   conditions)</dt>
    1.96 +   <dt>If <var title="">box</var> has leftward <a href="#overflow-directions" title="overflow directions">overflow direction</a></dt>
    1.97  
    1.98     <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>,
    1.99     <a href="#padding-edge">padding edge</a> width -
   1.100 @@ -995,6 +1009,7 @@
   1.101    </dl>
   1.102   </li>
   1.103  
   1.104 + <!-- XXX support upward overflow -->
   1.105   <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
   1.106   <a href="#scrolling-area">scrolling area</a> height - <a href="#padding-edge">padding edge</a> height)).</li>
   1.107    
     2.1 --- a/cssom-view/Overview.src.html	Fri May 31 12:14:19 2013 +0200
     2.2 +++ b/cssom-view/Overview.src.html	Fri May 31 12:48:50 2013 +0200
     2.3 @@ -215,11 +215,27 @@
     2.4  
     2.5  <p><dfn>Block flow direction</dfn> and <dfn>inline base direction</dfn> are defined in CSS Writing Modes Module. <span data-anolis-ref>CSSWRITINGMODES</span>
     2.6  
     2.7 -<p>The term <dfn>scrolling area</dfn> refers to a box of an element that has the following edges, depending on the element's <span>block flow direction</span> and <span>inline base direction</span>.
     2.8 +<p>A scrolling box of a <span>viewport</span> or element has two <dfn>overflow directions</dfn>, depending on the <span>viewport</span>'s or element's
     2.9 +<span>block flow direction</span> and <span>inline base direction</span>, as follows:
    2.10 +
    2.11 +<dl>
    2.12 + <dt>If the <span>block flow direction</span> is top-to-bottom and the <span>inline base direction</span> is left-to-right
    2.13 + <dt>If the <span>block flow direction</span> is left-to-right and the <span>inline base direction</span> is left-to-right
    2.14 + <dd><p>Rightward and downward.
    2.15 + <dt>If the <span>block flow direction</span> is top-to-bottom and the <span>inline base direction</span> is right-to-left
    2.16 + <dt>If the <span>block flow direction</span> is right-to-left and the <span>inline base direction</span> is left-to-right
    2.17 + <dd><p>Leftward and downward.
    2.18 + <dt>If the <span>block flow direction</span> is right-to-left and the <span>inline base direction</span> is right-to-left
    2.19 + <dd><p>Leftward and upward.
    2.20 + <dt>If the <span>block flow direction</span> is left-to-right and the <span>inline base direction</span> is right-to-left
    2.21 + <dd><p>Righward and upward.
    2.22 +</dl>
    2.23 +
    2.24 +<p>The term <dfn>scrolling area</dfn> refers to a box of an element that has the following edges, depending on the element's scrolling box's <span>overflow
    2.25 +directions</span>.
    2.26  
    2.27  <dl class=switch>
    2.28 - <dt>If the <span>block flow direction</span> is top-to-bottom and the <span>inline base direction</span> is left-to-right
    2.29 - <dt>If the <span>block flow direction</span> is left-to-right and the <span>inline base direction</span> is left-to-right
    2.30 + <dt>If the <span>overflow directions</span> are rightward and downward
    2.31   <dd>
    2.32    <dl>
    2.33     <dt>top edge
    2.34 @@ -233,8 +249,7 @@
    2.35     <dt>left edge
    2.36     <dd><p>The element's left <span>padding edge</span>.
    2.37    </dl>
    2.38 - <dt>If the <span>block flow direction</span> is top-to-bottom and the <span>inline base direction</span> is right-to-left
    2.39 - <dt>If the <span>block flow direction</span> is right-to-left and the <span>inline base direction</span> is left-to-right
    2.40 + <dt>If the <span>overflow directions</span> are leftward and downward
    2.41   <dd>
    2.42    <dl>
    2.43     <dt>top edge
    2.44 @@ -248,7 +263,7 @@
    2.45     <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.46     excluding boxes that have an ancestor of element as their containing block.
    2.47    </dl>
    2.48 - <dt>If the <span>block flow direction</span> is right-to-left and the <span>inline base direction</span> is right-to-left
    2.49 + <dt>If the <span>overflow directions</span> are leftward and upward
    2.50   <dd>
    2.51    <dl>
    2.52     <dt>top edge
    2.53 @@ -262,7 +277,7 @@
    2.54     <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.55     excluding boxes that have an ancestor of element as their containing block.
    2.56    </dl>
    2.57 - <dt>If the <span>block flow direction</span> is left-to-right and the <span>inline base direction</span> is right-to-left
    2.58 + <dt>If the <span>overflow directions</span> are rightward and upward
    2.59   <dd>
    2.60    <dl>
    2.61     <dt>top edge
    2.62 @@ -417,17 +432,17 @@
    2.63  <ol>
    2.64   <li><p>If there is no <span>viewport</span>, abort these steps.
    2.65    <dl class=switch>
    2.66 -   <dt>If <span>document content</span> can have overflow to the right
    2.67 +   <dt>If the <span>viewport</span> has rightward <span title="overflow directions">overflow direction</span>
    2.68     <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>,
    2.69     <span>scrolling area</span> width - <span>padding edge</span>
    2.70     width)).</p></dd>
    2.71 -   <dt>If <span>document content</span> can have overflow to the left
    2.72 -   (under right-to-left conditions)
    2.73 +   <dt>If the <span>viewport</span> has leftward <span title="overflow directions">overflow direction</span>
    2.74     <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>,
    2.75     <span>padding edge</span> width - <span>scrolling area</span>
    2.76     width)).</p></dd>
    2.77    </dl>
    2.78   </li>
    2.79 + <!-- XXX support upward overflow -->
    2.80   <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>,
    2.81   <span>document content</span> height - <span>viewport</span>
    2.82   height excluding the size of a rendered scroll bar (if any))).</p></li>
    2.83 @@ -948,14 +963,13 @@
    2.84   <li><p>Let <var title>box</var> be <var title>element</var>'s associated scrolling box.
    2.85   <li>
    2.86    <dl class=switch>
    2.87 -   <dt>If <var title>element</var> can have overflow to the right</dt>
    2.88 +   <dt>If <var title>box</var> has rightward <span title="overflow directions">overflow direction</span></dt>
    2.89  
    2.90     <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>,
    2.91     <span>scrolling area</span> width -
    2.92     <span>padding edge</span> width)).</p></dd>
    2.93  
    2.94 -   <dt>If <var title>element</var> can have overflow to the left (under right-to-left
    2.95 -   conditions)</dt>
    2.96 +   <dt>If <var title>box</var> has leftward <span title="overflow directions">overflow direction</span></dt>
    2.97  
    2.98     <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>,
    2.99     <span>padding edge</span> width -
   2.100 @@ -963,6 +977,7 @@
   2.101    </dl>
   2.102   </li>
   2.103  
   2.104 + <!-- XXX support upward overflow -->
   2.105   <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>,
   2.106   <span>scrolling area</span> height - <span>padding edge</span> height)).</p></li>
   2.107    

mercurial