1068111 - Figcaption placement rules overwritten by display: table-caption

Status: RESOLVED DUPLICATE of bug 144517

(Core :: Layout: Tables, defect)

Description

[Derek Kent]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/600.1.22 (KHTML, like Gecko) Version/8.0 Safari/600.1.22

Steps to reproduce:

Create a `figcaption` element as the LAST element (not first) in a `figure` element.
Style the `figure` element with `display: table`
Style the `figcaption` element with `display: table-caption`


Actual results:

The `figcaption` is not rendered.


Expected results:

The `figcaption` should be rendered.

Note: A `caption` element must be the first element inside a `table`; however, a `figcaption` element may be either the first or last element inside a `figure`.

Comment 1

[Derek Kent]

According to the w3c spec, `caption` has a default styling of `display: table-caption`, and `figcaption` has a default styling of `display: block`, even though `figcaption` fills a similar role to `caption` (however, only elements with `display: table-caption` can be manipulated by the `caption-side` CSS property, according to the spec).

Mozilla appears to be consistent in following the above rules, although Chrome, Safari, Opera, and IE appear to be more liberal in allowing `caption-side` to be applied to `figcaption` and its placement, despite display styling, which leaves me feeling that Mozilla's implementation is correct based on a strict reading of the spec, but rather less useful in practice.

Comment 2

[Loic]

Could you attach a simple tetscase to the bug, please.

Comment 3

[Derek Kent]

Attachment: Testcase

Comment 4

[Boris Zbarsky [:bzbarsky]]

> however, a `figcaption` element may be either the first or last element inside a `figure`.

That's not relevant here.

What's relevant is that you have a display:table parent with two display:table-caption children.  The fact that those children happen to be called figcaption should not be relevant.  Here's a simpler testcase for the same behavior:

  <div style="display:table">
    <span style="display: table-caption; caption-side: top">Top</span>
    <span style="display: table-caption; caption-side: bottom">Bottom</span>
  </div>

So what you're seeing here is bug 144517.  Unfortunately, the CSS spec doesn't actually define the rendering of tables with multiple captions, so it's not obvious how various cases here should render.  :(