Bug 4348 - Add support for the 'box-sizing' CSS property to the engine
Summary: Add support for the 'box-sizing' CSS property to the engine
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 420+
Hardware: Mac OS X 10.4
: P1 Normal
Assignee: Dave Hyatt
URL:
Keywords:
Depends on:
Blocks: 4347
  Show dependency treegraph
 
Reported: 2005-08-08 22:28 PDT by Dave Hyatt
Modified: 2005-10-27 10:46 PDT (History)
2 users (show)

See Also:


Attachments
Patch that implements box-sizing (13.33 KB, patch)
2005-10-25 03:35 PDT, Dave Hyatt
darin: review+
Details | Formatted Diff | Diff
box-sizing test with 100% height relatively positioned DIVs (3.43 KB, text/html)
2005-10-26 09:35 PDT, Randy Reddig
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Dave Hyatt 2005-08-08 22:28:26 PDT
This is a requirement in order to work with controls that have border and padding.  For compatibility with 
other browsers, any engine-implemented controls have to treat width/height as though they are specified 
on the border-box.  The best way to implement this is by adding support for box-sizing.
Comment 1 Maks Orlovich 2005-08-09 14:00:31 PDT
The KDE khtml tree has box-sizing support, FYI 
 
Comment 2 Dave Hyatt 2005-08-09 14:16:03 PDT
I didn't know that.  Thanks.

Not sure if it will be easy to merge or not.
Comment 3 Arthur Langereis 2005-10-06 08:34:56 PDT
Forgive my spamming, but another use case of box-sizing is enabling script-free and mostly hassle-
free scaling interfaces that extend to the full height (and width) of the browser window. For some web 
applications, this is essential.

The W3C box model is nice in most cases, but box-sizing: border-box is required to enable stuff like:
{ height: 100%; padding: 20px; } on a div and having it fit inside its parent AND having the padding (and 
margin and border.) This is also a far simpler solution than to allow expressions in CSS values.

Also, if you add support for this, please also support -moz-box-sizing as some sites (notably by 
Backbase http://www.backbase.com/) put the browser in quirks mode to force IE into the box-sizing 
model and then set -moz-box-sizing to get the same effect in Mozilla. Safari is not supported for this 
reason (and because of the missing XSLTProcessor object, but that's being worked on, I believe.)
Comment 4 Dave Hyatt 2005-10-06 14:13:54 PDT
KDE's support for box-sizing is partial and not enough to land.  I'm working on a more complete 
implementation.
Comment 5 Darin Adler 2005-10-22 10:44:55 PDT
This is now required to get buttons to work right, so P1.
Comment 6 Dave Hyatt 2005-10-25 03:35:04 PDT
Created attachment 4471 [details]
Patch that implements box-sizing

This patch implements box-sizing.  I have tested it pretty thoroughly for fixed
min-max/width-height for both replaced and non-replaced elements.  I am going
to write more test cases to exercise the percentage cases to make sure they
work.

Tables are actually using border-box all over the place already, and it might
be nice to eventually describe their quirky behavior using box-sizing, but for
now I've left all that code alone (and in fact it could be adversely affected
by the use of box-sizing, but I'm not terribly concerned about that at this
point).  I will file a follow-up bug after this lands to track testing of this
property in conjunction with tables (mainly just making sure it gets ignored
without incident).
Comment 7 Darin Adler 2005-10-25 08:14:15 PDT
Comment on attachment 4471 [details]
Patch that implements box-sizing

The actual code change looks fine, I read the whole thing carefully.

But don't we need some layout tests for this?
Comment 8 Darin Adler 2005-10-25 22:07:19 PDT
Dave landed this change today.
Comment 9 Randy Reddig 2005-10-26 09:35:50 PDT
Created attachment 4483 [details]
box-sizing test with 100% height relatively positioned DIVs

Works great. Tested using attached test case, with one problem: Percentage
height of relatively-positioned elements inside absolutely-positioned elements
doesn't quite work right.

The attached test case works correctly in Firefox 1.0.x and IE6, with the two
content columns stretching to fit the vertical space between the header and
footer.
Comment 10 Dave Hyatt 2005-10-27 00:47:51 PDT
Opening a new bug to track this issue, since it's not a box-sizing bug.
Comment 11 Dave Hyatt 2005-10-27 00:49:33 PDT
5517 tracks the percentage height issue.
Comment 12 Randy Reddig 2005-10-27 10:46:07 PDT
(In reply to comment #11)
> 5517 tracks the percentage height issue.
> 

Thanks!