371180 - [BC] 'width' on border-collapsed tables should be middle of border, not outside edge

Status: NEW

(Core :: Layout: Tables, defect)

Description

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The CSS 'width' property on tables with 'border-collapse: collapse' currently sets the width of the outside edge of the border box.  (At least for simple cases; I haven't checked the behavior where the border width varies along the edge of the table.)  According to the CSS spec, it should set the distance between the middle of the borders.

(We should also test whether we have similar bugs for height.)

Safari and Konqueror get this correct; IE/Windows 7 and Opera 9 match our current behavior.  If we think the spec should be changed, we should try to get it changed sooner rather than later.

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Attachment: testcase

Steps to reproduce: load this testcase
Expected results: two boxes the same width
Actual results: lower box is wider

Note that the boxes not lining up horizontally is bug 155955.

Comment 2

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

http://www.w3.org/TR/CSS21/tables.html#collapsing-borders says:

# Note that in this model, the width of the table includes half the table
# border.

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Hmm.  Today, this testcase looks like it works.  And it really shouldn't work given that HTML tables have -moz-box-sizing: border-box (which we really only want to specify for separated borders model tables, I think).

Comment 4

[Bernd]

Attachment: we do what all browsers do

I am skeptical that we should change our rendering of this testcase.

Comment 5

[Bernd]

Or more to the point from my reading of the spec the test case is not valid.
If we include both the left and right border width that is outside the row width we just end at full 200px and not 210 as the test case asserts.

Comment 6

[Alexander]

IMO, all browsers render this testcase incorrectly. Table width should be 200px, 5px left border and 5px right border should spill into the margin. TD width should equal 190px, not 180px.

Comment 7

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The relevant piece of the spec is in
http://www.w3.org/TR/CSS21/tables.html#collapsing-borders :
 # Note that in this model, the width of the table includes half the table border.

Comment 8

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

(That said, we should probably try to get the spec changed if all browsers agree.)

Comment 9

[Alexander]

Half border inside or outside?

> Any borders that spill into the margin are taken into account when determining if the table overflows some ancestor (see 'overflow').

If half the table border included in table width, which border is spill?

Comment 10

[Gérard Talbot]

David,

Are you sure that attachment 255926 [details] [diff] [review] test is correct?

(In reply to Alexander from comment #6)
> IMO, all browsers render this testcase incorrectly. Table width should be
> 200px, 5px left border and 5px right border should spill into the margin. TD
> width should equal 190px, not 180px.

I agree with Alexander.

- - - - - - - 

I created this test 

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/TableWidthBorderCollapse.html

15 years ago and I thought that all browsers were wrong based on

https://www.w3.org/TR/CSS21/images/tbl-width.png

I think Firefox 52.5.0 ESR, Chromium 62.0.3202.89 and IE 11 are wrong.

Comment 11

[Gérard Talbot]

I meant to say
  Are you sure that attachment 255956 [details] test is correct?

Comment 12

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

I think we ended up changing the spec here at some point over the past decade; we should double-check this, and if so, update layout/reftests/pixel-rounding/collapsed-border-* tests.