ruby-layout-internal-boxes-ref.html (8841B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Ruby Reference: ruby content w. layout-internal 'display' values</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; 13 } 14 15 input { 16 width: 20px; 17 -webkit-appearance: none; 18 border: 1px solid black; 19 background: white; 20 } 21 22 .thg { display: table-header-group; } 23 .trg { display: table-row-group; } 24 .tfg { display: table-footer-group; } 25 .tr { display: table-row; } 26 .tc { display: table-cell; } 27 .tcg { display: table-column-group; } 28 .tco { display: table-column; } 29 .tca { display: table-caption; } 30 .t { display: table; } 31 32 .rb { display: ruby-base; } 33 .rt { display: ruby-text; } 34 .rbc { display: ruby-base-container; } 35 .rtc { display: ruby-text-container; } 36 37 .x { background: red} 38 </style> 39 </head> 40 <body> 41 42 <ruby><rb><span>a<span><input class="thg"></span>b</span></rb></ruby> 43 <ruby><rb><span>a<span><input class="thg"><input class="thg"></span>b</span></rb></ruby> 44 <ruby><rb><span>a<span><div class="thg">b</div><input class="thg"></span>b</span></rb></ruby> 45 <ruby><rb><span>a<span><div class="thg">b</div></span>c</span></rb></ruby> 46 47 <ruby><rb><span>a<span><input class="trg"></span>b</span></rb></ruby> 48 <ruby><rb><span>a<span><input class="trg"><input class="trg"></span>b</span></rb></ruby> 49 <ruby><rb><span>a<span><div class="trg">b</div><input class="trg"></span>b</span></rb></ruby> 50 <ruby><rb><span>a<span><div class="trg">b</div></span>c</span></rb></ruby> 51 52 <ruby><rb><span>a<span><input class="tfg"></span>b</span></rb></ruby> 53 <ruby><rb><span>a<span><input class="tfg"><input class="tfg"></span>b</span></rb></ruby> 54 <ruby><rb><span>a<span><div class="tfg">b</div><input class="tfg"></span>b</span></rb></ruby> 55 <ruby><rb><span>a<span><div class="tfg">b</div></span>c</span></rb></ruby> 56 57 <ruby><rb><span>a<span><input class="tr"></span>b</span></rb></ruby> 58 <ruby><rb><span>a<span><input class="tr"><input class="tr"></span>b</span></rb></ruby> 59 <ruby><rb><span>a<span><div class="tr">b</div><input class="tr"></span>b</span></rb></ruby> 60 <ruby><rb><span>a<span><div class="tr">b</div></span>c</span></rb></ruby> 61 62 <ruby><rb><span>a<span><input class="tc"></span>b</span></rb></ruby> 63 <ruby><rb><span>a<span><input class="tc"><input class="tc"></span>b</span></rb></ruby> 64 <ruby><rb><span>a<span><div class="tc">b</div><input class="tc"></span>b</span></rb></ruby> 65 <ruby><rb><span>a<span><div class="tc">b</div></span>c</span></rb></ruby> 66 67 <ruby><rb><span>a<span><input class="tcg"></span>b</span></rb></ruby> 68 <ruby><rb><span>a<span><input class="tcg"><input class="tcg"></span>b</span></rb></ruby> 69 <ruby><rb><span>a<span><div class="tcg">b</div><input class="tcg"></span>b</span></rb></ruby> 70 <ruby><rb><span>a<span><div class="tcg">b</div></span>c</span></rb></ruby> 71 72 <ruby><rb><span>a<span><input class="tco"></span>b</span></rb></ruby> 73 <ruby><rb><span>a<span><input class="tco"><input class="tco"></span>b</span></rb></ruby> 74 <ruby><rb><span>a<span><div class="tco">b</div><input class="tco"></span>b</span></rb></ruby> 75 <ruby><rb><span>a<span><div class="tco">b</div></span>c</span></rb></ruby> 76 77 <ruby><rb><span>a<span><input class="tca"></span>b</span></rb></ruby> 78 <ruby><rb><span>a<span><input class="tca"><input class="tca"></span>b</span></rb></ruby> 79 <ruby><rb><span>a<span><div class="tca">b</div><input class="tca"></span>b</span></rb></ruby> 80 <ruby><rb><span>a<span><div class="tca">b</div></span>c</span></rb></ruby> 81 82 <ruby><rb><span>a<span><input class="t"></span>b</span></rb></ruby> 83 <ruby><rb><span>a<span><input class="t"><input class="t"></span>b</span></rb></ruby> 84 <ruby><rb><span>a<span><div class="t">b</div><input class="t"></span>b</span></rb></ruby> 85 <ruby><rb><span>a<span><div class="t">b</div></span>c</span></rb></ruby> 86 87 <ruby><rb><span>a<span><input class="rb"></span>b</span></rb></ruby> 88 <ruby><rb><span>a<span><input class="rb"><input class="rb"></span>b</span></rb></ruby> 89 <ruby><rb><span>a<span><div class="rb">b</div><input class="rb"></span>b</span></rb></ruby> 90 <ruby><rb><span>a<span><div class="rb">b</div></span>c</span></rb></ruby> 91 92 <ruby><rb><span>a<span><input class="rt"></span>b</span></rb></ruby> 93 <ruby><rb><span>a<span><input class="rt"><input class="rt"></span>b</span></rb></ruby> 94 <ruby><rb><span>a<span><div class="rt">b</div><input class="rt"></span>b</span></rb></ruby> 95 <ruby><rb><span>a<span><div class="rt">b</div></span>c</span></rb></ruby> 96 97 <ruby><rb><span>a<span><input class="rbc"></span>b</span></rb></ruby> 98 <ruby><rb><span>a<span><input class="rbc"><input class="rbc"></span>b</span></rb></ruby> 99 <ruby><rb><span>a<span><div class="rbc">b</div><input class="rbc"></span>b</span></rb></ruby> 100 <ruby><rb><span>a<span><div class="rbc">b</div></span>c</span></rb></ruby> 101 102 <ruby><rb><span>a<span><input class="rtc"></span>b</span></rb></ruby> 103 <ruby><rb><span>a<span><input class="rtc"><input class="rtc"></span>b</span></rb></ruby> 104 <ruby><rb><span>a<span><div class="rtc">b</div><input class="rtc"></span>b</span></rb></ruby> 105 <ruby><rb><span>a<span><div class="rtc">b</div></span>c</span></rb></ruby> 106 107 <br><hr> 108 109 <!-- --> 110 111 <ruby><rb><span><input class="thg"></span>b</rb></ruby> 112 <ruby><rb><span><input class="thg"><input class="thg"></span>b</rb></ruby> 113 <ruby><rb><span><div class="thg">b</div><input class="thg"></span>b</rb></ruby> 114 <ruby><rb><span><div class="thg">b</div></span>c</rb></ruby> 115 116 <ruby><rb><span><input class="trg"></span>b</rb></ruby> 117 <ruby><rb><span><input class="trg"><input class="trg"></span>b</rb></ruby> 118 <ruby><rb><span><div class="trg">b</div><input class="trg"></span>b</rb></ruby> 119 <ruby><rb><span><div class="trg">b</div></span>c</rb></ruby> 120 121 <ruby><rb><span><input class="tfg"></span>b</rb></ruby> 122 <ruby><rb><span><input class="tfg"><input class="tfg"></span>b</rb></ruby> 123 <ruby><rb><span><div class="tfg">b</div><input class="tfg"></span>b</rb></ruby> 124 <ruby><rb><span><div class="tfg">b</div></span>c</rb></ruby> 125 126 <ruby><rb><span><input class="tr"></span>b</rb></ruby> 127 <ruby><rb><span><input class="tr"><input class="tr"></span>b</rb></ruby> 128 <ruby><rb><span><div class="tr">b</div><input class="tr"></span>b</rb></ruby> 129 <ruby><rb><span><div class="tr">b</div></span>c</rb></ruby> 130 131 <ruby><rb><span><input class="tc"></span>b</rb></ruby> 132 <ruby><rb><span><input class="tc"><input class="tc"></span>b</rb></ruby> 133 <ruby><rb><span><div class="tc">b</div><input class="tc"></span>b</rb></ruby> 134 <ruby><rb><span><div class="tc">b</div></span>c</rb></ruby> 135 136 <ruby><rb><span><input class="tcg"></span>b</rb></ruby> 137 <ruby><rb><span><input class="tcg"><input class="tcg"></span>b</rb></ruby> 138 <ruby><rb><span><div class="tcg">b</div><input class="tcg"></span>b</rb></ruby> 139 <ruby><rb><span><div class="tcg">b</div></span>c</rb></ruby> 140 141 <ruby><rb><span><input class="tco"></span>b</rb></ruby> 142 <ruby><rb><span><input class="tco"><input class="tco"></span>b</rb></ruby> 143 <ruby><rb><span><div class="tco">b</div><input class="tco"></span>b</rb></ruby> 144 <ruby><rb><span><div class="tco">b</div></span>c</rb></ruby> 145 146 <!-- bug NNNNNN 147 <ruby><rb><span><input class="tca"></span>b</rb></ruby> 148 <ruby><rb><span><input class="tca"><input class="tca"></span>b</rb></ruby> 149 <ruby><rb><span><div class="tca">b</div><input class="tca"></span>b</rb></ruby> 150 <ruby><rb><span><div class="tca">b</div></span>c</rb></ruby> 151 --> 152 153 <ruby><rb><span><input class="t"></span>b</rb></ruby> 154 <ruby><rb><span><input class="t"><input class="t"></span>b</rb></ruby> 155 <ruby><rb><span><div class="t">b</div><input class="t"></span>b</rb></ruby> 156 <ruby><rb><span><div class="t">b</div></span>c</rb></ruby> 157 158 <ruby><rb><span><input class="rb"></span>b</rb></ruby> 159 <ruby><rb><span><input class="rb"><input class="rb"></span>b</rb></ruby> 160 <ruby><rb><span><div class="rb">b</div><input class="rb"></span>b</rb></ruby> 161 <ruby><rb><span><div class="rb">b</div></span>c</rb></ruby> 162 163 <ruby><rb><span><input class="rt"></span>b</rb></ruby> 164 <ruby><rb><span><input class="rt"><input class="rt"></span>b</rb></ruby> 165 <ruby><rb><span><div class="rt">b</div><input class="rt"></span>b</rb></ruby> 166 <ruby><rb><span><div class="rt">b</div></span>c</rb></ruby> 167 168 <ruby><rb><span><input class="rbc"></span>b</rb></ruby> 169 <ruby><rb><span><input class="rbc"><input class="rbc"></span>b</rb></ruby> 170 <ruby><rb><span><div class="rbc">b</div><input class="rbc"></span>b</rb></ruby> 171 <ruby><rb><span><div class="rbc">b</div></span>c</rb></ruby> 172 173 <ruby><rb><span><input class="rtc"></span>b</rb></ruby> 174 <ruby><rb><span><input class="rtc"><input class="rtc"></span>b</rb></ruby> 175 <ruby><rb><span><div class="rtc">b</div><input class="rtc"></span>b</rb></ruby> 176 <ruby><rb><span><div class="rtc">b</div></span>c</rb></ruby> 177 178 </body> 179 </html>