Bug 18587 – CSS3 content:inherit doesn't work

• Status: NEW
• Component: CSS

[Anantha Keesara]

Steps –
Go to the URL http://www.hixie.ch/tests/adhoc/css/inheritance/content/001.xml

Issue - Test can not displayed " PASSES" Which is CSS inherited.

Expected - IT should display "PASSED".

Other browsers:
     IE 7 : not OK, xml code seen.
     FF 3.0b4: OK.
     Opera 9.26 Build 8835 :OK.
     Safari 3.1: not OK


Nightly tested: r31446

[Eric Seidel (no email)]

Wow.  That's wild that you can inherit CSS generated content.  I imagine this isn't hard to fix.  Probably just a single line tweak to CSSStyleSelector.

[Anantha Keesara]

one more tese: http://www.hixie.ch/tests/adhoc/css/inheritance/content/002.xml

[Eric Seidel (no email)]

I have a partial patch.  And no, it's not a single line tweak. ;)

[Eric Seidel (no email)]

Created attachment 20764 [details]
First pass at content: inherit

 LayoutTests/ChangeLog                              |   11 +++
 LayoutTests/hixie/README                           |    3 +
 .../hixie/adhoc/css/inheritance/content/001.xml    |   15 +++++
 .../hixie/adhoc/css/inheritance/content/002.xml    |   18 ++++++
 WebCore/ChangeLog                                  |   34 ++++++++++
 WebCore/css/CSSStyleSelector.cpp                   |   12 +---
 WebCore/html/HTMLBRElement.cpp                     |    2 +-
 WebCore/html/HTMLFrameSetElement.cpp               |    4 +-
 WebCore/html/HTMLImageElement.cpp                  |    2 +-
 WebCore/html/HTMLLegendElement.cpp                 |    2 +-
 WebCore/rendering/RenderContainer.cpp              |    2 +-
 WebCore/rendering/RenderObject.cpp                 |    2 +-
 WebCore/rendering/RenderStyle.cpp                  |   65 ++++++++++++++++----
 WebCore/rendering/RenderStyle.h                    |   18 ++++--
 14 files changed, 157 insertions(+), 33 deletions(-)

Comment on attachment 20764 [details]
First pass at content: inherit

Unless I'm missing something:
1) This patch will make 'content' inherit by default.
2) 'content' should not inherit by default (i.e. only when 'content: inherit' is specified).

Flip back to r? if I got this wrong.

(In reply to comment #5)
> Flip back to r? if I got this wrong.

Actually don't flip back to r? since the patch is also missing -expected.txt files.

[Nicholas Wilson]

Please, do not commit this. It is a big mistake in behaviour.

CSS3 Generated Content is in a very incomplete form, with a lot missing. CSS2 GenCon has reasonably consistent implementations of the core features across browsers, but many, many differences as well.

In short, regarding CSS2: this patch is a regression on CSS2 compliance, which we are still a little way from in the details and proper handling of corner cases. FF and others are similarly patchy in CSS2 GenCon, so do not copy them if unsure about behaviour.

Regarding CSS3: the spec is rough, with lots of holes. It is changing rapidly. The test case by Hixie was last updated in 2001, and since then CSS3 has had content inherit removed entirely.

Could close as dup of bug 13097 anyway.

[Ahmad Saleem]

I am able to reproduce this bug in Safari Technology Preview 152 and Chrome Canary 107 using test case from URL and it does not show "PASSED" but in case of Firefox Nightly 106, it does show "PASSED" in green text. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/99506248>

[Karl Dubost]

Very similar failure:
https://wpt.fyi/results/css/CSS2/generated-content/content-inherit-002.xht

[Karl Dubost]

Created attachment 471911 [details]
rendering in safari, firefox, chrome

Yes this is the same thing.
https://codepen.io/webcompat/pen/MWMKEGb?editors=1100

<div class="test1">test1</div>
<div class="test2">test2</div>
<div class="test3">test3</div>
<div class="test4">test4</div>

<table class="test21"><tr><td>test21</td></tr></table>
<table class="test22"><tr><td>test22</td></tr></table>

div {margin-bottom: 2em;}
.test1:after {content: "PASSED"}
.test2::after {content: "PASSED"}
.test3:after {display:table-cell;content: "PASSED";}

.test4:after {content:inherit; color:green;}
.test4 {content:"PASSED"}


.test21 td:after {content: "PASSED"}

.test22 td:after {content: inherit; color:green;}
.test22 td {content: "PASSED";}


As soon as inherit is passed it doesn't work on Safari and Chrome but this is working on Firefox.

[Karl Dubost]

It is probably worth checking again what the specification is saying here.

[Ahmad Saleem]

If I am not mistaken - this is draft spec - https://drafts.csswg.org/css-content/#content-property

and it is not inherited.

[Karl Dubost]

The content property is 
https://drafts.csswg.org/css-content/#content-property

And it says 
Inherited: no

At the same time, the value of "inherit" is supposed to force it.

https://www.w3.org/TR/css-cascade/#inherit
> If the cascaded value of a property is the inherit keyword, the property’s specified and computed values are the inherited value.