legend-display-rendering.html (3257B)
1 <!doctype html> 2 <title>rendered legend and CSS display rendering</title> 3 <link rel=match href=legend-display-rendering-ref.html> 4 <style> 5 body { margin: 0; } 6 fieldset { margin: 0; padding: 0; border: none; } 7 legend { width: 600px; box-sizing: border-box; padding: 0; background: #ddd; border: 1px solid; } 8 [style="display: table"] span, 9 [style="display: inline-table"] span { display: table-cell; } 10 [style="display: table-row-group"], 11 [style="display: table-header-group"], 12 [style="display: table-footer-group"], 13 [style="display: table-row"], 14 [style="display: table-column-group"], 15 [style="display: table-column"] { padding-left: 5em; /* would be ignored if not blockified */ } 16 [style="display: table-cell"] { margin-left: 5em; /* would be ignored if not blockified */ } 17 .rb { display: ruby-base; } 18 .rt { display: ruby-text; } 19 [style="display: grid"], 20 [style="display: inline-grid"] { grid-template-columns: auto auto; } 21 [style="display: flex"] span, 22 [style="display: inline-flex"] span { display: block; flex-grow: 1 } 23 </style> 24 <fieldset> 25 <legend style="display: table"><span>table</span><span>table</span></legend> 26 </fieldset> 27 28 <fieldset> 29 <legend style="display: table-row-group">table-row-group</legend> 30 </fieldset> 31 32 <fieldset> 33 <legend style="display: table-header-group">table-header-group</legend> 34 </fieldset> 35 36 <fieldset> 37 <legend style="display: table-footer-group">table-footer-group</legend> 38 </fieldset> 39 40 <fieldset> 41 <legend style="display: table-row">table-row</legend> 42 </fieldset> 43 44 <fieldset> 45 <legend style="display: table-cell">table-cell</legend> 46 </fieldset> 47 48 <fieldset> 49 <legend style="display: table-column-group">table-column-group</legend> 50 </fieldset> 51 52 <fieldset> 53 <legend style="display: table-column">table-column</legend> 54 </fieldset> 55 56 <fieldset> 57 <legend style="display: table-caption">table-caption</legend> 58 </fieldset> 59 60 <fieldset> 61 <legend style="display: flow">flow</legend> 62 </fieldset> 63 64 <fieldset> 65 <legend style="display: flow-root">flow-root</legend> 66 </fieldset> 67 68 <fieldset> 69 <legend style="display: run-in">run-in</legend> 70 </fieldset> 71 72 <fieldset> 73 <legend style="display: inline">inline</legend> 74 </fieldset> 75 76 <fieldset> 77 <legend style="display: inline-block">inline-block</legend> 78 </fieldset> 79 80 <fieldset> 81 <legend style="display: inline-table"><span>inline-table</span><span>inline-table</span></legend> 82 </fieldset> 83 84 <fieldset> 85 <legend style="display: ruby"><span class=rb>ruby</span><span class=rt>ruby</span></legend> 86 </fieldset> 87 88 <fieldset> 89 <legend style="display: ruby-base">ruby-base</legend> 90 </fieldset> 91 92 <fieldset> 93 <legend style="display: ruby-text">ruby-text</legend> 94 </fieldset> 95 96 <fieldset> 97 <legend style="display: ruby-base-container">ruby-base-container</legend> 98 </fieldset> 99 100 <fieldset> 101 <legend style="display: ruby-text-container">ruby-text-container</legend> 102 </fieldset> 103 104 <fieldset> 105 <legend style="display: grid"><span>grid</span><span>grid</span></legend> 106 </fieldset> 107 108 <fieldset> 109 <legend style="display: inline-grid"><span>inline-grid</span><span>inline-grid</span></legend> 110 </fieldset> 111 112 <fieldset> 113 <legend style="display: flex"><span>flex</span><span>flex</span></legend> 114 </fieldset> 115 116 <fieldset> 117 <legend style="display: inline-flex"><span>inline-flex</span><span>inline-flex</span></legend> 118 </fieldset>