1286803 - CSS 'opacity' on a <table> doesn't apply to the table's <caption>

Status: NEW

(Core :: Layout: Tables, defect, P3)

Description

[jameslong]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160604131506

Steps to reproduce:

1. Create a <table> with a <caption> element
2. Apply opacity to table with CSS


Actual results:

Opacity was correctly applied to the table and all child elements except the <caption> - no opacity was applied.
I have created a fiddle showing the issue: https://jsfiddle.net/Skateside/8b9qvd8w/


Expected results:

The <caption> element should have had the same opacity as the other elements. This is the result in Chrome (51) and IE (11)

Comment 1

[Gérard Talbot]

James,

3.2. Transparency: the 'opacity' property
https://www.w3.org/TR/css3-color/#transparency
states that opacity is not inherited.

"
Name: 	opacity
Value: 	<alphavalue> | inherit
Initial: 	1
Applies to: 	all elements
Inherited: 	no
"

and 

17.4 Tables in the visual formatting model
https://www.w3.org/TR/CSS21/tables.html#model
states that non-inherited properties apply to table box and not to the (anonymous) table wrapper box:

"
(...) the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes (in document order). The table box is a block-level box that contains the table's internal table boxes. The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal block boxes inside the table wrapper box.

(...)

The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box; all other values of non-inheritable properties are used on the table box and not the table wrapper box.
"

So, it seems to me that this bug is INVALID.

Tests
-----

http://www.gtalbot.org/BugzillaSection/Bug1286803-opacity-table-caption-001.html

http://www.gtalbot.org/BugzillaSection/Bug1286803-opacity-table-caption-002.html

http://www.gtalbot.org/BugzillaSection/Bug1286803-opacity-table-caption-003.html

Comment 2

[jameslong]

Hi Gérard

I think that's a mis-interpretation. The specification states that opacity affects child elements:

3.2. Transparency: the ‘opacity’ property
https://www.w3.org/TR/css3-color/#transparency
"Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering."

I would have assumed that if opacity is applied to the parent element, child elements would be equally transparent (unless an opacity value is set to make the child element more transparent, but no opacity value can be given to make the child element less transparent than its parent). I have another fiddle showing two <p> elements, one inside a <div> with opacity set: https://jsfiddle.net/Skateside/zs8f8yv2/
In the fiddle, the first paragraph is slightly transparent despite no styles being applied to the <p> elements themselves.

Since a <caption> is a child of <table> in my first fiddle and that <table> has opacity applied, I would have expected the child element to be as transparent as the parent.

Kind regards
James

Comment 3

[Gérard Talbot]

> I think that's a mis-interpretation.
> The specification states that opacity affects child elements:

opacity will affect the whole sub-tree but its specified value is not inherited within the containment hierarchy and that's what inheritance is about. If you set some opacity value (say, 'opacity: 0') to div#parent in this chunk of code, 

    <div id="parent">parent1 
        <div id="child">child</div>
    parent2</div>

colors of the whole subtree will be affected (here, no words will be visible, viewable, readable) but div#child's computed opacity value will remain the default, initial 1 value: that's verified and verifiable in all browsers. (Otherwise, opacity would have a compound effect of descendants.)
It's like 'top' offset and other box offsets: it will affect the position of the whole subtree but it won't be inherited into its descendants. Otherwise you would get a compound effect for 'top' offset and other box offsets.

> Since a <caption> is a child of <table> 

No, conceptually, by design, a caption is not a child of a table. But I see that other browsers, like you did, sort of behave like it is when styling opacity.

Eg set a border and a background color to a table element. The caption will not be affected. Only the table box will be styled with such border and background color (and not the anonymous table wrapper box).

Again, I think the decisive statement of the spec is this:

"
all other values of non-inheritable properties are used on the table box and not the table wrapper box.
"

and opacity is not inherited.

James, I am sorry. I am not confirming this bug report. You can ask module owner what he thinks... maybe he will think that the spec should be reconsidered or changed... which is always a possibility when some code scenario has not been anticipated or when a majority of mainstream browsers agree on something ... but I would be extremely surprised if my interpretation of the spec as currently written and quoted was wrong.

Comment 4

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Gerard, please don't argue based on blind faith that the specs are written in stone.

There's clearly an interoperability bug here, and the specs should address it.  Somebody should actually bring this up to the CSS WG and see what people expect to happen.

I think it's also worth examining whether other browsers properly do group opacity if the table and the caption overlap.


(In reply to Gérard Talbot from comment #1)
> The computed values of properties 'position', 'float', 'margin-*', 'top',
> 'right', 'bottom', and 'left' on the table element are used on the table
> wrapper box and not the table box; all other values of non-inheritable
> properties are used on the table box and not the table wrapper box.

This predates the existence of the 'opacity' property, which was introduced in level 3.

Comment 5

[Gérard Talbot]

(In reply to David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) from comment #4)
> Gerard, please don't argue based on blind faith that the specs are written
> in stone.

I did not suggest that either, quite on the contrary. I formally and explicitly left the door opened on this too, you know, when I wrote:
"
(...)
the spec should be reconsidered or changed... which is always a possibility when some code scenario has not been anticipated or when a majority of mainstream browsers agree on something
(...)
" 

> There's clearly an interoperability bug here, and the specs should address
> it.  Somebody should actually bring this up to the CSS WG and see what
> people expect to happen.


Somebody? I sincerly thought you (otherwise Elika or Boris) should be the person to bring this up to the CSS WG. Not me.

 
> I think it's also worth examining whether other browsers properly do group
> opacity if the table and the caption overlap.
> 
> 
> (In reply to Gérard Talbot from comment #1)
> > The computed values of properties 'position', 'float', 'margin-*', 'top',
> > 'right', 'bottom', and 'left' on the table element are used on the table
> > wrapper box and not the table box; all other values of non-inheritable
> > properties are used on the table box and not the table wrapper box.
> 
> This predates the existence of the 'opacity' property, which was introduced
> in level 3.

I am not debatting that either. I claimed and continue to claim that I read the current specs correctly, without misinterpretation on my part.

Comment 6

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

CSS WG just (seconds ago) resolved to hoist 'opacity' to the table wrapper box, with discussion of hosting other properties postponed to TPAC (mid-September).

Comment 7

[j.j.]

not fixed in Firefox 146