Re: [css3-box] How do scrollbars affect width calculation?

Le 2014-01-28 04:36, Thomas Rosenau a écrit :
> Hello Gérard,
> 
> thanks for the clarification.
> 
> I realized that I accidentally didn't reply to the mailing list. Hope
> it is ok to share the message below.
> 
> 
> 
>> CSS width is to be substracted from the width of scrollbar even though
>> the scrollbar is located between padding box and border box. So, 
>> content
>> area is shrunk of "xxx" (from 9 "x" to 6 "x" in your ascii example)
> 
> Well, is it really the content area or just the containing block formed
> by that element?
> 
> When using { background-clip: content-box; } it can be seen that the
> content area is apparently not affected.
> (cf. http://jsfiddle.net/LNMZU/)


Content area should be affected, should be reduced, narrowed down: from 
9 "x" to 6 "x" in your ascii example. But CSS width should remain the 
same.

> Now, I found that the fundamental error I made was the assumption that 
> a
> box's text content would take the whole content width.

But it does if there is no padding: the box's text content take the 
whole content width (with white space line breaking taken into 
consideration).


> However, this is
> not the case, as can be seen from
> 
> http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level


This was a diagram serving a specific purpose. We don't know the styling 
in effect applying on the div and on the p elements. And, most 
important, that diagram was created to display, to show the 3 boxes 
discussed in the section. The diagram is not a valid representation of 
what you refer to as content area.


> So my current conjecture is that the following figure should be 
> correct:
> 
> +-------------------------+-+
> |         xxxxxx###       |^|
> |         xxxxxx###       |~|
> |         xxxxxx###       | |
> |         xxxxxx###       | |
> |         xxxxxx###       | |
> |         xxxxxx###       |_|
> |         xxxxxx###       |v|
> +-------------------------+-+
> 
> | padding | width | padding |
> 
>           |    |
>            width-scrollbarWidth



You extend padding-right under the vertical scrollbar. I think this is 
not correct. You also extend padding-right under the vertical scrollbar 
at
http://jsfiddle.net/LNMZU/
and I think this is not correct.


Scrollbar is part of CSS width even though scrollbar is located between 
padding and border: that is all you really need to keep in mind.


> where xx=content and x#=content area.


I am not sure I understand your diagrams anymore.


Here's how I see all this (where "x" represent content area and not 9 
letters words):

  +-------------------------+
  |         xxxxxxxxx       |
  |         xxxxxxxxx       |
  |         xxxxxxxxx       |
  |         xxxxxxxxx       |
  |         xxxxxxxxx       |
  |         xxxxxxxxx       |
  |         xxxxxxxxx       |
  +-------------------------+
  | padding | width |padding|


and here the space taken up by the scrollbar is subtracted from the 
dimension (width is reduced from 9 "x" to 7 "x" in my ascii example) of 
the content box formed by the element with the scrollbar.

  +-----------------------+-+
  |         xxxxxxx       |^|
  |         xxxxxxx       |~|
  |         xxxxxxx       | |
  |         xxxxxxx       | |
  |         xxxxxxx       | |
  |         xxxxxxx       |_|
  |         xxxxxxx       |v|
  +-------------------------+
  | padding |width|padding|


Both ascii examples have the same offsetWidth. Both ascii examples have 
the same respective horizontal padding-left and padding-right.


> Again, this is because the text content forms an anonymous block

? No.

> and
> thus is constrained by the containing block. In other words: the
> element's containing block does not coincide with the content area.
> This feels a bit weird but it's the way the specs work.
> 
> I think we agree that computedStyle.width should not be influenced by
> scrollbars.

Yes. computedStyle.width should return the same value (say, 20px) 
regardless of scrollbar presence or absence.

I have an interactive example in mind for you. I'm very busy this week 
and I am still very sick with influenza right now. I'll try to get back 
to you on this later.

Gérard

Received on Wednesday, 29 January 2014 06:30:58 UTC