Re: Behaviour of getComputedStyle with box-sizing: border-box

On 6/15/11 11:42 PM, Shane Stephens wrote:
> In brief, here's the test:
>
> div {
> 	box-sizing:  border-box;
> 	border: 3px solid blue;
> 	padding: 5px;
> 	width: 50px;
> }
>
> What should the value of
> window.getComputedStyle(document.querySelector("div"), null).width be?
> Should it be the specified width of the element (50px), or the width
> of the content box (34px)?

This question is particularly interesting because getComputedStyle 
doesn't return the CSS 2.1 computed style for 'width'; instead it 
returns the used style.  And the used style in this case is 34px, while 
the computed style is 50px.

At the same time, it would be nice if the values returned by 
getComputedStyle could be used as specified values without changing the 
rendering (which works for used width values if box-sizing is 
content-box, but not otherwise).

So it's really a question of which of the two properties (returning used 
values or returning something that's "more resolved" than CSS 2.1 
computed style but can be round-tripped into specified style without 
changing the rendering) matters more here.

Or to put this in testcase terms:

   <style>
     body { width: 200px; }
     div { width: auto; box-sizing: border-box; padding: 10px; }
   </style>
   <body><div></div></body>

The question is whether getComputedStyle for 'width' on the div should 
return 180px or 200px (neither of which is the CSS 2.1 computed value; 
the former is the used width and the latter is what would work for 
round-tripping).

Note also https://bugzilla.mozilla.org/show_bug.cgi?id=520992 (which 
seems to be the only Gecko bug report related to this I've found).

-Boris

Received on Thursday, 16 June 2011 04:10:27 UTC