Bug 200974 - clientWidth/clientHeight should include borders for tables
Summary: clientWidth/clientHeight should include borders for tables
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Tables (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Joonghun Park
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2019-08-21 05:43 PDT by Joonghun Park
Modified: 2019-10-01 08:08 PDT (History)
19 users (show)

See Also:

Attachments
table_border_collapse_bug.html (886 bytes, text/html)
2019-08-21 05:46 PDT, Joonghun Park 		no flags Details
Patch (10.70 KB, patch)
2019-09-30 00:49 PDT, Joonghun Park 		no flags Details | Formatted Diff | Diff
Patch (11.17 KB, patch)
2019-09-30 16:22 PDT, Joonghun Park 		no flags Details | Formatted Diff | Diff
Patch (12.74 KB, patch)
2019-09-30 16:32 PDT, Joonghun Park 		no flags Details | Formatted Diff | Diff
Update wpt test cases (16.39 KB, patch)
2019-10-01 05:20 PDT, Joonghun Park 		no flags Details | Formatted Diff | Diff
Show Obsolete (3) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Joonghun Park 2019-08-21 05:43:18 PDT 
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.
Comment 1 Joonghun Park 2019-08-21 05:46:07 PDT 
Created attachment 376866 [details]
table_border_collapse_bug.html
Comment 2 Radar WebKit Bug Importer 2019-08-22 15:18:22 PDT 
<rdar://problem/54616842>
Comment 3 Joonghun Park 2019-09-22 23:52:00 PDT 
The corresponding csswg discussion:
https://github.com/w3c/csswg-drafts/issues/4245
Comment 4 Joonghun Park 2019-09-30 00:49:12 PDT 
Created attachment 379826 [details]
Patch
Comment 5 Joonghun Park 2019-09-30 16:22:34 PDT 
Created attachment 379851 [details]
Patch
Comment 6 Joonghun Park 2019-09-30 16:32:15 PDT 
Created attachment 379852 [details]
Patch
Comment 7 Joonghun Park 2019-09-30 21:48:27 PDT 
Could you please review this patch?
Comment 8 Antti Koivisto 2019-10-01 05:18:31 PDT 
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?
Comment 9 Joonghun Park 2019-10-01 05:20:59 PDT 
Created attachment 379895 [details]
Update wpt test cases
Comment 10 Joonghun Park 2019-10-01 05:27:12 PDT 
(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.
Comment 11 Antti Koivisto 2019-10-01 06:23:24 PDT 
Comment on attachment 379895 [details]
Update wpt test cases

Ok, r=me
Comment 12 Joonghun Park 2019-10-01 07:22:33 PDT 
(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:)
Comment 13 WebKit Commit Bot 2019-10-01 08:08:07 PDT 
Comment on attachment 379895 [details]
Update wpt test cases

Clearing flags on attachment: 379895

Committed r250553: <https://trac.webkit.org/changeset/250553>
Comment 14 WebKit Commit Bot 2019-10-01 08:08:09 PDT 
All reviewed patches have been landed.  Closing bug.