Closed Bug 1482778 Opened 4 years ago Closed 2 years ago

Table outline does not include caption

Categories

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

61 Branch
defect

Tracking

()

RESOLVED FIXED
mozilla71
Tracking Status
firefox71 --- fixed

People

(Reporter: peterkwebb, Assigned: heycam)

References

Details

Attachments

(3 files)

Attached image OutlineFirefox.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180807170231

Steps to reproduce:

View this HTML in Firefox 61.0.2, Windows10:

<!DOCTYPE html>
<html>
<head>
<style>
table {
    outline: 2px dashed red;
    width:150px;
}
th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <caption>This is caption</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Fred</td>
    <td>25</td>
  </tr>
</table>

</body>
</html>


Actual results:

The table <caption> element is within the <table> tags in accordance with W3C Recommendation but the caption does not appear within the CSS outline.


Expected results:

The outline should encompass the whole <table> element, including the caption.  In other words the outline should be around the table wrapper box.  Screenshot attached.

Outline is as expected in Chrome browser.
Component: Untriaged → Layout: Tables
Product: Firefox → Core
Yes, it probably does make sense for the outline to include the <caption>, which is the case for Chrome and Safari.  Edge follows Firefox's current behavior.
Priority: -- → P3
Although https://drafts.csswg.org/css-tables-3/#drawing-table-backgrounds-and-borders does mention that outlines (like borders) should be rendered around the table grid, which would exclude the caption.

David, any opinion on what we should do?
Assignee: nobody → cam
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(dbaron)
https://treeherder.mozilla.org/#/jobs?repo=try&revision=430a923397e930831b09c2153449028a2d277e66 for a patch that changes the outline to surround the caption.
Attachment #9012757 - Attachment mime type: text/plain → text/html
I don't have a strong opinion about the behavior.  Aligning with Chromium and WebKit seems reasonable.  Given the lack of interop, I think it's worth opening an issue against csswg-drafts, especially if you're inclined to move the behavior towards the one that seems less supported by the specs.
Flags: needinfo?(dbaron)

We encountered the same (or very similar) issue in CKEditor 5. We use <figure><img><figcaption>...</figcaption> styled with display:table. We want to display the outline on the figure when the whole thing is selected in the editor and this currently doesn't render the outline on the caption. See: https://github.com/ckeditor/ckeditor5/issues/1979.

There didn't seem to be a whole lot of appetite to nail down exact outline behavior last time this was discussed in the CSSWG, so I think we should just go ahead and change to match Blink/WebKit.

Pushed by cmccormack@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8d46f84b818d
Include captions within table outlines. r=dbaron
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla71
Regressions: 1603049
You need to log in before you can comment on or make changes to this bug.