th { text-align: inherit; } is not respected

• Component: CSS
• Status: RESOLVED FIXED

[Anthony Ryan]

Example URL:
http://codepen.io/anthonyryan1/pen/QwLZZZ

The expected behavior when using text-align: inherit; on a th is to inherit the text alignment of a parent element, in the case of my example left. Rather than doing this Safari uses the useragent default for th which is text-align: center.

Verified in Safari 8 and the latest WebKit Nightly build.

Other browsers:
Firefox 33: Working as expected
Internet Explorer 11: Working as expected
Chrome 39: Also broken.

[Anthony Ryan]

Chromium bug for cross-reference:
https://code.google.com/p/chromium/issues/detail?id=431867

[Anthony Ryan]

The Chromium patch to resolve this bug, for cross-reference: https://chromium.googlesource.com/chromium/src.git/+/367b26a9cdb1389d3e16c30527742f7cd33ef74d

[Radar WebKit Bug Importer]

<rdar://problem/94272958>

[Karl Dubost]

This issue forced Bootstrap to use `-webkit-match-parent` on their CSS
https://github.com/twbs/bootstrap/issues/30321#issuecomment-592981559

which in return makes it hard to remove it from the Web platform without breaking Safari. 

If it is being fixed it will help to obsolete it, and convince BootStrap to remove it too. 

The WPT has already a test to remove the support of `-webkit-match-parent`
https://github.com/web-platform-tests/wpt/commit/006029222c021a7c0b524328b0d3385cf4a97c95

[Karl Dubost]

Filed https://github.com/whatwg/html/issues/7978

because the spec says Safari does the right thing. 
but Firefox and Chrome do differently.

```
data:text/html,<!doctype%20html><table><tr><th%20style="text-align:inherit">START</th></tr><tr><td>AAAAAAAAAAAAAA</td></tr></table>
```

[Tim Nguyen (:ntim)]

This is the relevant bit in WebKit:
https://webkit-search.igalia.com/webkit/rev/26eff7cbe4e53bbd8b325ee12a3567128ba52d2e/Source/WebCore/style/StyleAdjuster.cpp#318-323

I personally haven't tested which approach works, but the 2 I have in mind are:

1. Add a applyInheritTextAlign function here: https://webkit-search.igalia.com/webkit/rev/26eff7cbe4e53bbd8b325ee12a3567128ba52d2e/Source/WebCore/style/StyleBuilderCustom.h#197-207 that sets both textAlign, but also hasExplicitlySetTextAlign(). This needs to change: https://webkit-search.igalia.com/webkit/rev/26eff7cbe4e53bbd8b325ee12a3567128ba52d2e/Source/WebCore/css/CSSProperties.json#4590 to "custom": "All" in order to work.

2. Remove the StyleAdjuster code, do like Firefox/Chrome and add an `-internal-center-or-inherit` value, implement it in https://webkit-search.igalia.com/webkit/rev/26eff7cbe4e53bbd8b325ee12a3567128ba52d2e/Source/WebCore/style/StyleBuilderConverter.h#609 , something like:

```
if (primitiveValue.valueID() == CSSValueInternalCenterOrInherit)
  if (parentStyle.textAlign() != TextAlign::Start)
     return parentStyle.textAlign();
  return TextAlign::Center;
```

[Ryan Reno]

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

[Ryan Reno]

Last PR ended up breaking some WPT tests for `all: revert`. I'm going to go for Tim's #2 suggestion and use an internal CSS property instead.

[Ryan Reno]

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

[EWS]

Committed r295625 (251630@main): <https://commits.webkit.org/251630@main>

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