Usecases for W3 bug 12834

All of usecases below demonstrate desired rendering if else is not stated. Each LEGEND element has dark-gray background.

Usecase 1

A text is placed before LEGEND. Both the text and the LEGEND are wrapped in common DIV that has border. Size/height of the text is not known in advance.

Issue:
Current HTML5 spec does not allow LEGEND to be wrapped in DIV, but wrapper is needed to style legend as integral unit with an other element (common border in particular).

Text before legend

Legend

Usecase 2

A left-floated list is placed before LEGEND. Both the list and the LEGEND are wrapped in common DIV that has border. Size/width of the list is not known in advance.

Issue:
Current HTML5 spec does not allow LEGEND to be wrapped in DIV, but wrapper is needed to style legend as integral unit with an other element (common border in particular). Placing anything before LEGEND is currently not allowed by spec too, but this is needed to make the list floating while having common border for both the list and the LEGEND.
Legend

Usecase 3

A text is placed before (3.1) or after (3.2) LEGEND. Both the text and the LEGEND are wrapped in common DIV that has border and is displayed as table. The text and the LEGEND are inside cells of this table. Sizes of the text and the LEGEND are not known in advance.

Issue:
Current HTML5 spec does not allow LEGEND to be wrapped in DIV (nor placing anything before LEGEND), but wrapper is needed for styling element as table (at least one wrapper for table and another wrapper for table-cell).

3.1. Text is before LEGEND

Text before legend

Legend

3.2. Text is after LEGEND

Legend

Text after legend

Usecase 4

A long text is placed before LEGEND. Both the text and the LEGEND are wrapped in common DIV that has vertical scrollbar: the text and the LEGEND are scrolled together as integral unit.

Issue:
Current HTML5 spec does not allow LEGEND to be wrapped in DIV (nor placing anything before LEGEND), but wrapper is needed to style legend as integral unit with an other element (e.g., common border, common scrolling).
Long text before legend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus massa non tellus ullamcorper in convallis libero facilisis. Aliquam ultricies eros a nibh facilisis nec rhoncus neque malesuada. Morbi luctus turpis nec nulla porta dictum. Mauris imperdiet purus in mi fringilla porta. Praesent eu nisi eget nulla porttitor aliquet sit amet ut neque. In luctus, metus id tincidunt congue, risus dolor feugiat nibh, at ultricies justo mauris id odio. Proin leo sem, cursus at egestas non, rutrum in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit tempus scelerisque.
Legend

Usecase 5

5.1. LEGEND is direct child of FIELDSET (wrong rendering)

Crossbrowser styling of LEGEND is tricky. display: block does not work. Positioning is beyond control. margin rendering is inconsistent across browsers.

Issue:
Current HTML5 spec does not allow LEGEND to be wrapped in DIV, but wrapper is needed for crossbrowser styling of LEGEND (by styling wrapper instead of LEGEND itself).
Legend as direct child of fieldset (FIELDSET > LEGEND)

5.2. LEGEND is wrapped in DIV (desired rendering)

Styling is applied to wrapper instead of LEGEND while LEGEND element is still used for semantics purposes. Styling works correctly and consistently across all modern browsers.

Legend inside wrapper (FIELDSET > DIV > LEGEND)

6. iLEGEND is part of form tip

Marking-up existing “credentials” string (contained in the “Please provide your credentials” tip) as legend is more DRY then adding legend that duplicates the “credentials” string already contained in the tip. (iLEGEND element has a color here purely for additional demonstrativeness.)

Issue:
Adding separate legend would violate DRY principle (legend string would be contained in two places: in legend and in tip).

Please provide your credentials