W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: [CSS21] Auto height of block with horizontal scrollbar

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Thu, 26 Aug 2010 13:26:24 -0400
Message-ID: <4C76A3C0.9010409@mit.edu>
To: Řyvind Stenhaug <oyvinds@opera.com>
CC: www-style@w3.org
On 8/26/10 12:35 PM, Řyvind Stenhaug wrote:
> Sections 10.6.6 and 10.6.7 indicate that the used height of an element
> is independent of whether said element has a horizontal scrollbar.
> However, the browsers I tried (Firefox, IE, Opera and Safari) seem to
> interoperably implement something different, adding the height of the
> scrollbar.

Do they?  Or do they effectively increment the padding?  It's not clear 
from section 11.1.1. whether the scrollbar insertion changes the used 
padding value or whether the scrollbar is supposed to "overflow" the 
padding, and if so in which direction.  I would not expect it to 
overflow out, since that would make it overlap other content, so the 
options are either that the used padding is increased or the used 
width/height is decreased, right?  Or I guess that the used margin is 
increased...

Note that I'm not sure you can actually measure "used width" 
effectively, by the way.  How would you detect it?

A related interesting testcase:

<!doctype html>
<title>auto height and scrollbar</title>
<style>
body > div {
width: 100px;
overflow: scroll;
background: blue;
position: relative;
}
div > div {
height: 100px;
}
div > div.test2 {
   position: absolute; top: 0px; left: 50%; background: green;
   height: 50%; width: 50%;
}
div > div.test1 {
   float: left; background: green; height: 50%; width: 50%;
}
</style>
<div>
   <div class="test1"
        onclick="alert(this.getBoundingClientRect().width + 'x' +
                       this.getBoundingClientRect().height)">
     Click me: test 1
   </div>
   <div></div>
   <div class="test2"
        onclick="alert(this.getBoundingClientRect().width + 'x' +
                       this.getBoundingClientRect().height + ', left is ' +
                       this.getBoundingClientRect().left)">
     Click me: test 2
   </div>
</div>

which shows that behavior amongst Firefox, Safari, and Opera, at least, 
is not interoperable at all at least in terms of how scrollbars affect 
various containing blocks.  I get the following output:

Firefox (trunk):
   Test1: 42.5x57.6
   Test2: 42.5x50, left is 50.5

Safari (5):
   Test1: 42x54
   Test2: 42x57, left is 50

Opera (10.61):
   Test1: 42x54
   Test2: 50x57, left is 58

and of course the visual rendering is different.  Now the containing 
block for the float is supposed to have the used width/height of the 
ancestor, minus whatever part of the width/height is taken up by the 
scrollbars, I think.  The containing block of the abs pos div is 
supposed to be the padding edge of the ancestor; not sure about the 
scrollbars.

It's interesting to me that none of the browsers use the same percentage 
basis for "left" as they do for "width"; that seems wrong.

I'm not sure what the exact behavior the spec calls for here is; does 
the containing block munging from section 11.1.1 only apply to the 
content-edge containing block or also to the padding-edge containing block?

I agree that this certainly looks like it needs to be more clearly 
specified.

> (At least the rendering of the following TC is consistent,
> though Safari reports width=84 and height=100 for getComputedStyle while
> Firefox and Opera report width=100 and height=116)

The getComputedStyle thing is a matter of how getComputedStyle tries to 
determine the width/height, which may not have much to do with what the 
rest of layout thinks of as used width/height.  Certainly in Gecko 
they're not identical.

-Boris
Received on Thursday, 26 August 2010 17:26:59 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT