Fri, 31 May 2013 12:48:50 +0200
[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