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

Joonghun Park

Reported 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.

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 attachment proposed patch, testcase, etc.

Joonghun Park

Comment 1 2019-08-21 05:46:07 PDT

Created attachment 376866 [details] table_border_collapse_bug.html

Radar WebKit Bug Importer

Comment 2 2019-08-22 15:18:22 PDT

<rdar://problem/54616842>

Joonghun Park

Comment 3 2019-09-22 23:52:00 PDT

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

Joonghun Park

Comment 4 2019-09-30 00:49:12 PDT

Created attachment 379826 [details] Patch

Joonghun Park

Comment 5 2019-09-30 16:22:34 PDT

Created attachment 379851 [details] Patch

Joonghun Park

Comment 6 2019-09-30 16:32:15 PDT

Created attachment 379852 [details] Patch

Joonghun Park

Comment 7 2019-09-30 21:48:27 PDT

Could you please review this patch?

Antti Koivisto

Comment 8 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?

Joonghun Park

Comment 9 2019-10-01 05:20:59 PDT

Created attachment 379895 [details] Update wpt test cases

Joonghun Park

Comment 10 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.

Antti Koivisto

Comment 11 2019-10-01 06:23:24 PDT

Comment on attachment 379895 [details] Update wpt test cases Ok, r=me

Joonghun Park

Comment 12 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:)

WebKit Commit Bot

Comment 13 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>

WebKit Commit Bot

Comment 14 2019-10-01 08:08:09 PDT

All reviewed patches have been landed. Closing bug.

Note You need to log in before you can comment on or make changes to this bug.