Re: [css-overflow-clipping] First Draft of Overflow Clipping now available!

On 3/10/2013 6:17 AM, Tab Atkins Jr. wrote:
> On Wed, Oct 2, 2013 at 1:11 PM, Robert O'Callahan <robert@ocallahan.org> wrote:
>> On Wed, Oct 2, 2013 at 3:53 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>>
>>> Yesterday, I finished up the first draft of the overflow:clip spec:
>>> <http://dev.w3.org/csswg/css-overflow-clipping/>
>>>
>>> It passed a quick review from Blink implementors, so I'd appreciate more
>>> review!
>>
>> Is it really necessary for overflow:clip to be a containing block for
>> absolute and positioned descendants? I don't understand how that's helpful.
>
> If it's not, then descendants of the element can paint/affect layout
> of stuff outside of the element.
>
> ~TJ

Is this for the case where an author reveals absolute and positioned 
descendants by changing the parent's value of clip to visible via script 
or if the overflow:clip is removed completely via script?

Something like the scenario in the below test case when the overflow 
value of the div become visible but other content then overlap (e.g in 
the <p>)?

Alan


<!DOCTYPE html>

<button type="button" 
onclick="document.getElementById('return').style.overflow='visible';">Change 
overflow value of Div to visible</button>

<div id="return">
   <p>Text</p>
   <p>Text</p>
   <p>Text</p>
   <p>Text</p>
   <p>Text</p>
   <p>Text</p>
   <p>Text</p>
   <p>Text</p>
   <p>Text</p>
   <div id="ap" style="background: orange;">ap elemnet</div>
</div>

<p style="margin-left: 50px;">This text will still be positioned where 
it is even after the content of the above div is revealed. </p>

<p style="background: lime; margin-left: 50px;">ComputedStyle for above 
div with silver border: <span id="output"></span></p>

<script>
    function getTheStyle(){
    var elem= document.getElementById("return");
    var theCSSprop=
window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML= theCSSprop;
    }
    getTheStyle();
</script>

<!-- if the following <style> element appears before the above <script> 
element in the source, then the getComputedStyle returns a value of 
100px  -->

<style type="text/css">
#return {overflow: hidden; height: 100px; border: 5px solid silver; }
#ap (position:abosolute;background: orange;}
</style>





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

Received on Thursday, 3 October 2013 07:07:08 UTC