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