Bug 200974

Summary:

clientWidth/clientHeight should include borders for tables

Product:

WebKit

Reporter:

Joonghun Park <jh718.park>

Component:

Tables

Assignee:

Joonghun Park <jh718.park>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

cdumez, cmarcelo, commit-queue, darin, dbates, esprehn+autocc, ews-watchlist, glenn, gregsimon, gyuyoung.kim, kangil.han, koivisto, kojii, kondapallykalyan, pdr, rniwa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.chromium.org/p/chromium/issues/detail?id=978019

Attachments:

Description	Flags
table_border_collapse_bug.html	none
Patch	none
Patch	none
Patch	none
Update wpt test cases	none

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.