| <!doctype html> |
| <title>rendered legend and CSS display rendering</title> |
| <link rel=match href=legend-display-rendering-ref.html> |
| <style> |
| body { margin: 0; } |
| fieldset { margin: 0; padding: 0; border: none; } |
| legend { width: 600px; box-sizing: border-box; padding: 0; background: #ddd; border: 1px solid; } |
| [style="display: table"] span, |
| [style="display: inline-table"] span { display: table-cell; } |
| [style="display: table-row-group"], |
| [style="display: table-header-group"], |
| [style="display: table-footer-group"], |
| [style="display: table-row"], |
| [style="display: table-column-group"], |
| [style="display: table-column"] { padding-left: 5em; /* would be ignored if not blockified */ } |
| [style="display: table-cell"] { margin-left: 5em; /* would be ignored if not blockified */ } |
| .rb { display: ruby-base; } |
| .rt { display: ruby-text; } |
| [style="display: grid"], |
| [style="display: inline-grid"] { grid-template-columns: auto auto; } |
| [style="display: flex"] span, |
| [style="display: inline-flex"] span { display: block; flex-grow: 1 } |
| </style> |
| <fieldset> |
| <legend style="display: table"><span>table</span><span>table</span></legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-row-group">table-row-group</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-header-group">table-header-group</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-footer-group">table-footer-group</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-row">table-row</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-cell">table-cell</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-column-group">table-column-group</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-column">table-column</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: table-caption">table-caption</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: flow">flow</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: flow-root">flow-root</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: run-in">run-in</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: inline">inline</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: inline-block">inline-block</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: inline-table"><span>inline-table</span><span>inline-table</span></legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: ruby"><span class=rb>ruby</span><span class=rt>ruby</span></legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: ruby-base">ruby-base</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: ruby-text">ruby-text</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: ruby-base-container">ruby-base-container</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: ruby-text-container">ruby-text-container</legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: grid"><span>grid</span><span>grid</span></legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: inline-grid"><span>inline-grid</span><span>inline-grid</span></legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: flex"><span>flex</span><span>flex</span></legend> |
| </fieldset> |
| |
| <fieldset> |
| <legend style="display: inline-flex"><span>inline-flex</span><span>inline-flex</span></legend> |
| </fieldset> |
| |