Bug 200974 – clientWidth/clientHeight should include borders for tables

• Status: RESOLVED
• Resolution: FIXED
• Component: Tables

[Joonghun Park]

Steps to reproduce the problem:
1. Open attached page or use this fiddle: https://jsfiddle.net/zm715xau/

What is the expected behavior?
clientWidth should be equal to offsetWidth, clientHeight should be equal to offsetHeight.

What went wrong?
They are not equal.

There is a problem with border-collapse: collapse.
The table's clientWidth/clientHeight does not include the halved widths of its horizontal/vertical borders.
It produces other problems with the layout of the parent container.

Firefox and Edge are working as expected.

[Joonghun Park]

Created attachment 376866 [details]
table_border_collapse_bug.html

[Radar WebKit Bug Importer]

<rdar://problem/54616842>

[Joonghun Park]

The corresponding csswg discussion:
https://github.com/w3c/csswg-drafts/issues/4245

[Joonghun Park]

Created attachment 379826 [details]
Patch

[Joonghun Park]

Created attachment 379851 [details]
Patch

[Joonghun Park]

Created attachment 379852 [details]
Patch

[Joonghun Park]

Could you please review this patch?

[Antti Koivisto]

Comment on attachment 379852 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=379852&action=review

> LayoutTests/imported/w3c/web-platform-tests/css/cssom-view/table-client-props-expected.txt:10
> -FAIL Table with separated border assert_equals: Table with separated border clientWidth expected 26 but got 14
> -FAIL Table with collapsed border assert_equals: Table with collapsed border clientWidth expected 26 but got 14
> +FAIL Table with separated border assert_equals: Table with separated border clientWidth expected 26 but got 20
> +FAIL Table with collapsed border assert_equals: Table with collapsed border clientWidth expected 26 but got 20

Why doesn't this start passing?

[Joonghun Park]

Created attachment 379895 [details]
Update wpt test cases

[Joonghun Park]

(In reply to Antti Koivisto from comment #8)
> Comment on attachment 379852 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=379852&action=review
> 
> > LayoutTests/imported/w3c/web-platform-tests/css/cssom-view/table-client-props-expected.txt:10
> > -FAIL Table with separated border assert_equals: Table with separated border clientWidth expected 26 but got 14
> > -FAIL Table with collapsed border assert_equals: Table with collapsed border clientWidth expected 26 but got 14
> > +FAIL Table with separated border assert_equals: Table with separated border clientWidth expected 26 but got 20
> > +FAIL Table with collapsed border assert_equals: Table with collapsed border clientWidth expected 26 but got 20
> 
> Why doesn't this start passing?

That's related with box-sizing: content-box. This css property for table is not supported in Blink and WebKit yet, so I think that issue could be addressed as a separate bug. If possible, I'd like to see that issue on both engine.

[Antti Koivisto]

Comment on attachment 379895 [details]
Update wpt test cases

Ok, r=me

[Joonghun Park]

(In reply to Antti Koivisto from comment #11)
> Comment on attachment 379895 [details]
> Update wpt test cases
> 
> Ok, r=me

Thank you for your review, Antti:)

[WebKit Commit Bot]

Comment on attachment 379895 [details]
Update wpt test cases

Clearing flags on attachment: 379895

Committed r250553: <https://trac.webkit.org/changeset/250553>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.