underover-stretchy-001.html (9699B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Horizontal stretchy operator</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#algorithm-for-stretching-operators-along-the-inline-axis"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators"> 9 <link rel="match" href="underover-stretchy-001-ref.html"/> 10 <meta name="assert" content="Verify visual rendering of padding/border/margin on an operator, stretchy along the inline axis."> 11 <script src="/mathml/support/feature-detection.js"></script> 12 <style> 13 @font-face { 14 font-family: TestFont; 15 src: url("/fonts/math/stretchy.woff"); 16 } 17 math, mo { 18 font-family: TestFont; 19 font-size: 50px; 20 } 21 </style> 22 <body> 23 <p>This test passes if you see green rectangles and no red.</p> 24 <!-- The red mspace elements below are expected to be covered by the green 25 stretchy mo elements. --> 26 27 <div style="position: absolute; left: 3em; top; 3em; 28 width: 1000px; height: 500px; background: lightgreen;"> 29 30 <div style="position: absolute; top: 1px; left: 1px;"> 31 <!-- stretchy base in munder --> 32 <div style="position: absolute; left: 0; top: 0;"> 33 <math> 34 <munder> 35 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 36 <mspace width="200px" height="0px"/> 37 </munder> 38 </math> 39 </div> 40 <div style="position: absolute; left: 0; top: 0;"> 41 <math> 42 <munder> 43 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 44 <mspace width="200px" height="0px"/> 45 </munder> 46 </math> 47 </div> 48 </div> 49 50 <div style="position: absolute; top: 1px; left: 251px;"> 51 <!-- stretchy script in munder --> 52 <div style="position: absolute; left: 0; top: 0;"> 53 <math> 54 <munder> 55 <mspace width="200px" height="0px"/> 56 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 57 </munder> 58 </math> 59 </div> 60 <div style="position: absolute; left: 0; top: 0;"> 61 <math> 62 <munder> 63 <mspace width="200px" height="0px"/> 64 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 65 </munder> 66 </math> 67 </div> 68 </div> 69 70 <div style="position: absolute; top: 101px; left: 1px;"> 71 <!-- stretchy base in mover --> 72 <div style="position: absolute; left: 0; top: 0;"> 73 <math> 74 <mover> 75 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 76 <mspace width="200px" height="0px"/> 77 </mover> 78 </math> 79 </div> 80 <div style="position: absolute; left: 0; top: 0;"> 81 <math> 82 <mover> 83 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 84 <mspace width="200px" height="0px"/> 85 </mover> 86 </math> 87 </div> 88 </div> 89 90 <div style="position: absolute; top: 101px; left: 251px;"> 91 <!-- stretchy script in mover --> 92 <div style="position: absolute; left: 0; top: 0;"> 93 <math> 94 <mover> 95 <mspace width="200px" height="0px"/> 96 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 97 </mover> 98 </math> 99 </div> 100 <div style="position: absolute; left: 0; top: 0;"> 101 <math> 102 <mover> 103 <mspace width="200px" height="0px"/> 104 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 105 </mover> 106 </math> 107 </div> 108 </div> 109 110 <div style="position: absolute; top: 201px; left: 1px;"> 111 <!-- stretchy base in munderover --> 112 <div style="position: absolute; left: 0; top: 0;"> 113 <math> 114 <munderover> 115 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 116 <mspace width="200px" height="0px"/> 117 <mspace width="200px" height="0px"/> 118 </munderover> 119 </math> 120 </div> 121 <div style="position: absolute; left: 0; top: 0;"> 122 <math> 123 <munderover> 124 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 125 <mspace width="200px" height="0px"/> 126 <mspace width="200px" height="0px"/> 127 </munderover> 128 </math> 129 </div> 130 </div> 131 132 <div style="position: absolute; top: 201px; left: 251px;"> 133 <!-- stretchy underscript in munderover --> 134 <div style="position: absolute; left: 0; top: 0;"> 135 <math> 136 <munderover> 137 <mspace width="200px" height="0px"/> 138 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 139 <mspace width="200px" height="0px"/> 140 </munderover> 141 </math> 142 </div> 143 <div style="position: absolute; left: 0; top: 0;"> 144 <math> 145 <munderover> 146 <mspace width="200px" height="0px"/> 147 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 148 <mspace width="200px" height="0px"/> 149 </munderover> 150 </math> 151 </div> 152 </div> 153 154 <div style="position: absolute; top: 301px; left: 1px;"> 155 <!-- stretchy overscript in munderover --> 156 <div style="position: absolute; left: 0; top: 0;"> 157 <math> 158 <munderover> 159 <mspace width="200px" height="0px"/> 160 <mspace width="200px" height="0px"/> 161 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 162 </munderover> 163 </math> 164 </div> 165 <div style="position: absolute; left: 0; top: 0;"> 166 <math> 167 <munderover> 168 <mspace width="200px" height="0px"/> 169 <mspace width="200px" height="0px"/> 170 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 171 </munderover> 172 </math> 173 </div> 174 </div> 175 176 <div style="position: absolute; top: 1px; left: 501px;"> 177 <!-- stretchy base and underscript in munderover --> 178 <div style="position: absolute; left: 0; top: 0;"> 179 <math> 180 <munderover> 181 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 182 <mspace width="200px" height="0px"/> 183 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 184 </munderover> 185 </math> 186 </div> 187 <div style="position: absolute; left: 0; top: 0;"> 188 <math> 189 <munderover> 190 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 191 <mspace width="200px" height="0px"/> 192 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 193 </munderover> 194 </math> 195 </div> 196 </div> 197 198 <div style="position: absolute; top: 151px; left: 501px;"> 199 <!-- stretchy base and overscript in munderover --> 200 <div style="position: absolute; left: 0; top: 0;"> 201 <math> 202 <munderover> 203 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 204 <mspace width="200px" height="0px"/> 205 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 206 </munderover> 207 </math> 208 </div> 209 <div style="position: absolute; left: 0; top: 0;"> 210 <math> 211 <munderover> 212 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 213 <mspace width="200px" height="0px"/> 214 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 215 </munderover> 216 </math> 217 </div> 218 </div> 219 220 <div style="position: absolute; top: 301px; left: 501px;"> 221 <!-- stretchy scripts in munderover --> 222 <div style="position: absolute; left: 0; top: 0;"> 223 <math> 224 <munderover> 225 <mspace width="200px" height="0px"/> 226 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 227 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 228 </munderover> 229 </math> 230 </div> 231 <div style="position: absolute; left: 0; top: 0;"> 232 <math> 233 <munderover> 234 <mspace width="200px" height="0px"/> 235 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 236 <mo lspace="0" rspace="0" style="color: green;">⥚</mo> 237 </munderover> 238 </math> 239 </div> 240 </div> 241 242 <div style="position: absolute; top: 1px; left: 751px;"> 243 <!-- Only stretchy operators in munderover. The widest unstretched size 244 is used as the target size. --> 245 <div style="position: absolute; left: 0; top: 0;"> 246 <math> 247 <munderover> 248 <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> 249 <mspace width="198px" height="198px" style="background: red; margin: 1px;"/> 250 <mspace width="198px" height="98px" style="background: red; margin: 1px;"/> 251 </munderover> 252 </math> 253 </div> 254 <div style="position: absolute; left: 0; top: 0;"> 255 <math> 256 <munderover> 257 <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo> 258 <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo> 259 <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo> 260 </munderover> 261 </math> 262 </div> 263 </div> 264 </div> 265 <script> 266 MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); 267 MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); 268 </script> 269 </body> 270 </html>