[css3-ui] specifying box-sizing in greater detail to solve issue 69

As discussed at the F2F, and in previous emails, we need a more precise description of how box-sizing works, especially when it comes to replaced elements.

First, there is a sentence about the width and height properties in (the otherwise quite unusable) css-box that seems correct and relevant here, and that I believe should be added to css3-ui:

  The keyword values (in contrast to length and percentage values)
  are not influenced by the ‘box-sizing’ property,
  they always set the size of the content box.

CSS2.1 only defines 'auto' as a keyword (values introduced by later specs and  supported at various degrees are: max-content, min-content, available, fill-available, fit-content) but this sentence is true nonetheless.

Including it in CSS3-UI with the definition of box-sizing not only makes the behavior of 'auto' clear, but also means we don't need to take the 'auto' case into account as we patch the CSS2.1 sizing algorithms to make replaced elements work with the various values of box-sizing, simplifying the task.

Then, we simply need to go through all of chapter 10 in CSS2.1, and disambiguate all instances of words like width, height, min-*, max-* that are not linked to 'auto'. I've attached to this mail a chunk of text (in bikeshed format) to be added to the the box-sizing section of css3-ui that does just that, or you can see the spec with text included on my github: 

https://github.com/frivoal/csswg-drafts/compare/florian/box-sizing
https://rawgit.com/frivoal/csswg-drafts/florian/box-sizing/css-ui/Overview.html#box-sizing

I've written a few tests to exercise these rules, and as discussed during the f2f, this matches what presto does. Other browsers generally follow these rules as well, but have a few bugs making them fail a few test cases.

https://github.com/frivoal/csswg-test/compare/frivoal:master...florian/box-sizing

These tests are not exhaustive, as there's a ton of possible combinations if you take into account all the ways the various ifs and tables of CSS2.1 can interact, but I've run a bunch more informal tests than the ones shown in the link above, and they didn't uncover any surprising behavior or differences between browsers, so I did not spend time turning them into proper submittable tests.

I'd appreciate review of the spec text and the tests, but I think this should be enough to solve CSS3-UI's issue 69, as initially raised by Boris (https://wiki.csswg.org/spec/css3-ui#issue-69).

 - Florian

Received on Sunday, 22 February 2015 07:29:11 UTC