width-height-002.html (2924B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>content position with width/height</title> 6 <link rel="match" href="width-height-002-ref.html"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 9 <meta name="assert" content="Verify the inline-start and block-start edges of the math content box for the mtext, mrow, mpadded, mfrac, msqrt, mroot layout algorithms."/> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 body, math { 13 font: 25px/1 Ahem; 14 color: black; 15 } 16 .test { 17 margin: .5em; 18 } 19 .box { 20 width: 7em; 21 height: 3em; 22 border: 1px solid blue; 23 } 24 25 /* Revert style specified in the UA style sheet that changes box size. */ 26 mfrac { padding: 0; } 27 </style> 28 </head> 29 <body> 30 31 <div class="test"> 32 <math> 33 <mtext class="box">X</mtext> 34 </math> 35 <math dir="rtl"> 36 <mtext class="box">X</mtext> 37 </math> 38 </div> 39 40 <div class="test"> 41 <math> 42 <mrow class="box"> 43 <mtext>X</mtext> 44 <mtext>X</mtext> 45 <mtext>X</mtext> 46 </mrow> 47 </math> 48 <math dir="rtl"> 49 <mrow class="box"> 50 <mtext>X</mtext> 51 <mtext>X</mtext> 52 <mtext>X</mtext> 53 </mrow> 54 </math> 55 </div> 56 57 <div class="test"> 58 <math> 59 <mpadded lspace="1em" voffset="-1em" class="box"> 60 <mtext>X</mtext> 61 <mtext>X</mtext> 62 <mtext>X</mtext> 63 </mpadded> 64 </math> 65 <math dir="rtl"> 66 <mpadded lspace="1em" voffset="-1em" class="box"> 67 <mtext>X</mtext> 68 <mtext>X</mtext> 69 <mtext>X</mtext> 70 </mpadded> 71 </math> 72 </div> 73 74 <div class="test"> 75 <math> 76 <mpadded width="9em" height="1em" depth=".5em" class="box"> 77 <mtext>X</mtext> 78 <mtext>X</mtext> 79 <mtext>X</mtext> 80 </mpadded> 81 </math> 82 <math dir="rtl"> 83 <mpadded width="9em" height="1em" depth=".5em" class="box"> 84 <mtext>X</mtext> 85 <mtext>X</mtext> 86 <mtext>X</mtext> 87 </mpadded> 88 </math> 89 </div> 90 91 <div class="test"> 92 <math> 93 <mfrac class="box" linethickness="0"> 94 <mtext>X</mtext> 95 <mtext>X</mtext> 96 </mfrac> 97 </math> 98 <math dir="rtl"> 99 <mfrac class="box" linethickness="0"> 100 <mtext>X</mtext> 101 <mtext>X</mtext> 102 </mfrac> 103 </math> 104 </div> 105 106 <div class="test"> 107 <math> 108 <msqrt class="box"> 109 <mtext>X</mtext> 110 </msqrt> 111 </math> 112 <math dir="rtl"> 113 <msqrt class="box"> 114 <mtext>X</mtext> 115 </msqrt> 116 </math> 117 </div> 118 119 <div class="test"> 120 <math> 121 <mroot class="box"> 122 <mtext>X</mtext> 123 <mtext>X</mtext> 124 </mroot> 125 </math> 126 <math dir="rtl"> 127 <mroot class="box"> 128 <mtext>X</mtext> 129 <mtext>X</mtext> 130 </mroot> 131 </math> 132 </div> 133 134 </body> 135 </htmL>