Re: [css-overflow-clipping] would 'overflow: clip' affect the layout of surrounding elements?

[Part reply]

On 14/10/2013 10:20 PM, Kang-Hao (Kenny) Lu wrote:
> (2013/10/14 17:57), Alan Gresley wrote:

>> The best way to appreciate what overflow is is to consider what a
>> veiwport is. A viewport or better a UA may render a scollbar and if it
>> does, then the behavior is that of overflow: auto. It is also important
>> to know that there is visible overflow and hidden overflow (not to be
>> confused with overflow: visible or overflow: hidden).
>
> What are "visible overflow" and "hidden overflow" then? I am not
> grasping the concept.

Where is the red box <div id"strut"> in the below test located? The 
simple answer is that it is hidden since anything that overflows from 
the left edge of the viewport is always hidden (in Latin based writing 
mode). But programmatically, its still there and that is why I can place 
another box within it and have it right border visible within the 
viewport. Please test the below code.

<!doctype html>
<html id="test1">
<head>
<style type="text/css">
#outer { position: absolute; left: -10000px; height: 50px; background: 
orange; }
#strut { width: 100px; background: red; }
#inner { margin-left: 10000px; border-right: 100px solid green; }
</style>
</head>
<body id="test2">
<div id="outer">
   <div id="strut">This element is within hidden overflow
     <div id="inner">This element is within the viewport</div>
   </div>
</div>
<button onclick="document.getElementById('test1').style.overflow = 
'hidden';">Test 1</button>
<button onclick="document.getElementById('test2').style.overflow = 
'hidden';">Test 2</button>
</body>
</html>


I could style the <body> or <html> element with overflow: hidden (which 
you can select either by 'Test 1' or 'Test 2') and it still does not 
change anything. The concept behind overflow: clip (or whatever is 
desired) is that programmatically, the part that is outside the viewport 
does not exist. Nothing is laid out and nothing would render.


> Cheers,
> Kenny

Alan



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

Received on Monday, 14 October 2013 13:41:47 UTC