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