Bug 243234

Summary: Adds "box-sizing: border-box" to table in UA stylesheet
Product: WebKit Reporter: Tim Nguyen (:ntim) <ntim>
Component: CSSAssignee: Karl Dubost <karlcow>
Status: RESOLVED FIXED    
Severity: Normal CC: akeerthi, karlcow, ojan, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=95123

Comment 1 Radar WebKit Bug Importer 2022-07-26 16:30:17 PDT
<rdar://problem/97634949>
Comment 2 Karl Dubost 2022-07-26 22:42:07 PDT
Testing 

Firefox Nightly 105.0a1
Google Chrome Canary 106.0.5203.0
Safari 16.0 18614.1.19.1.5



# Safari

https://github.com/WebKit/WebKit/blob/96a2ba1a024f4616153ea11eeabc148b68820cbf/Source/WebCore/css/html.css#L265-L272


```
td, th {
    display: table-cell;
    vertical-align: inherit;
}

th {
    font-weight: bold;
}
```

and

```
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    text-indent: initial;
}
```


# Firefox

https://searchfox.org/mozilla-central/rev/23bf1890e07f780ba70e075bc8f46ffb85d1128c/layout/style/res/html.css#476-481

```
td {
  display: table-cell;
  vertical-align: inherit;
  text-align: unset;
  padding: 1px;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
  text-align: -moz-center-or-inherit;
}
```

and

```
table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  box-sizing: border-box;
  text-indent: 0;
}
```


# Chrome

https://github.com/chromium/chromium/blob/27bbedde58559fefdf22316519176f712e112baa/third_party/blink/renderer/core/html/resources/html.css#L290-L294

```
td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold;
    text-align: -internal-center
}
```

and table


```
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    box-sizing: border-box;
    text-indent: initial
}
```


Let's try to add box-sizing: border-box to table.
Comment 3 Karl Dubost 2022-07-27 07:59:48 PDT
Adding box-sizing: border-box 
to 

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    text-indent: initial;
}


doesn't solve the issue.

The test has already an open bug which is Bug 95123
Comment 5 Karl Dubost 2022-07-27 17:56:01 PDT
Ah wait. No it fixes it I had the wrong build when I tested.
Comment 6 Karl Dubost 2022-07-27 19:41:44 PDT
Pull request: https://github.com/WebKit/WebKit/pull/2800
Comment 7 Karl Dubost 2022-07-28 06:36:34 PDT
It seems it will fix other tests too.
Comment 8 Tim Nguyen (:ntim) 2022-08-10 17:59:28 PDT
*** Bug 95123 has been marked as a duplicate of this bug. ***
Comment 9 EWS 2022-08-18 21:28:08 PDT
Committed 253581@main (8915be4c0470): <https://commits.webkit.org/253581@main>

Reviewed commits have been landed. Closing PR #2800 and removing active labels.