Bug 243234 – Adds "box-sizing: border-box" to table in UA stylesheet

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Tim Nguyen (:ntim)]

https://wpt.fyi/results/html/rendering/non-replaced-elements/form-controls/resets.html?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=label%3Ainterop-2022-forms

[Radar WebKit Bug Importer]

<rdar://problem/97634949>

[Karl Dubost]

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.

[Karl Dubost]

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

[Karl Dubost]

Probably to check out for https://searchfox.org/wubkat/rev/607499977734f77ef66a84a9df7f9b2bf4a03278/Source/WebCore/rendering/RenderTable.cpp#330-365

[Karl Dubost]

Ah wait. No it fixes it I had the wrong build when I tested.

[Karl Dubost]

Pull request: https://github.com/WebKit/WebKit/pull/2800

[Karl Dubost]

It seems it will fix other tests too.

[Tim Nguyen (:ntim)]

*** Bug 95123 has been marked as a duplicate of this bug. ***

[EWS]

Committed 253581@main (8915be4c0470): <https://commits.webkit.org/253581@main>

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