Re: [css3-box][css-overflow-3] overflow-*

On 21/01/2014 11:39 AM, Jens O. Meiert wrote:
> What’s considered the “home” of the overflow-x and overflow-y
> properties, which are (unlike overflow-style which is instead
> specified in CSS Marquee as well, see other mail) both featured in
> both CSS Basic Box Model [1] and the CSS Overflow Module [2]?
>
>
> [1] http://www.w3.org/TR/css3-box/
> [2] http://www.w3.org/TR/css-overflow-3/

The various specs has a *major bug* in respect to what is overflow. For 
css3-box, we have the following for 'visible', 'hidden', 'scroll' and 
'auto':

   | These properties specify whether content is clipped
   | when it overflows the element's content area.

The 'content area' is in reference to the 'containing block' of the 
parent. A child element is not clipped at the 'content edge' of the 
parent but rather at the padding edge (minus the width of the scroll bar 
if one is provided). Due to this unclear language, we have two 
contradictory notions of overflow.

1. Once a child overflows the *content area* of it's parent, the values 
for overflow says how the child element is clipped by the parent's 
*padding edge*.

2. Once a child overflows the *padding area* of it's parent, the values 
for overflow says whether the overflowing content of the child is 
visible via scrolling or is hidden.

In the following code, the lime background shows 'padding area' of the 
parent. The purple background (partly transparent blue over red) shows 
the 'content area' of the parent. The teal background (partly 
transparent blue over lime) shows the child that is overflowing the 
'content edge' of the parent by traversing the padding area before being 
clipped at the 'content edge' of the parent. Since the value for 
overflow is scroll, then the clipped out content of the child can be 
accessed by scrolling.

<!DOCTYPE HTML>
<div style="overflow:scroll; width:200px; height:200px; 
padding:50px;background: lime linear-gradient(red,red) 
no-repeat;background-origin:content-box;">
   <div style="height:300px; width:300px; background: 
rgba(0,0,255,0.5);"></div>
</div>


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Tuesday, 21 January 2014 11:01:09 UTC