lengths-1.html (6698B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>MathML lengths</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> 10 <link rel="help" href="https://www.w3.org/TR/css-values-4/#relative-lengths"> 11 <link rel="match" href="lengths-1-ref.html"/> 12 <meta name="assert" content="Verify whether the different units are accepted for MathML lengths."> 13 <style> 14 @font-face { 15 font-family: TestFont; 16 src: url("/fonts/math/css-units.woff"); 17 } 18 span, math { 19 font-family: TestFont; 20 font-size: 10px; /* 1em = 10px, 1ex is about 5px */ 21 } 22 span { 23 position: absolute; 24 display: inline-block; 25 height: 10px; 26 } 27 #red > span { 28 background: red; 29 } 30 #green > span { 31 background: green; 32 } 33 /* For lh and rlh. */ 34 html { 35 line-height: 17px; 36 } 37 </style> 38 </head> 39 <body> 40 <p>Test passes if there is a green square and no red.</p> 41 42 <!-- Omitted units: vw, vh, vi, vb, vmin, vmax --> 43 <div> 44 <div id="red" style="position: absolute; width: 340px; height: 340px; background: green;"> 45 <!-- px --> 46 <span style="top: 0px"><math><mspace width="200px"/></math></span> 47 <span style="top: 10px; width: 200px"></span> 48 49 <!-- cm --> 50 <span style="top: 20px"><math><mspace width="5.08cm"/></math></span> 51 <span style="top: 30px; width: 192px"></span> 52 53 <!-- em --> 54 <span style="top: 40px"><math><mspace width="20em"/></math></span> 55 <span style="top: 50px; width: 200px"></span> 56 57 <!-- ex --> 58 <span style="top: 60px"><math><mspace width="30ex"/></math></span> 59 <span style="top: 70px; width: 30ex"></span> 60 61 <!-- in --> 62 <span style="top: 80px"><math><mspace width="2in"/></math></span> 63 <span style="top: 90px; width: 192px"></span> 64 65 <!-- mm --> 66 <span style="top: 100px"><math><mspace width="50.8mm"/></math></span> 67 <span style="top: 110px; width: 192px"></span> 68 69 <!-- pc --> 70 <span style="top: 120px"><math><mspace width="12.5pc"/></math></span> 71 <span style="top: 130px; width: 200px"></span> 72 73 <!-- pt --> 74 <span style="top: 140px"><math><mspace width="150pt"/></math></span> 75 <span style="top: 150px; width: 200px"></span> 76 77 <!-- % --> 78 <span style="top: 160px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span> 79 <span style="top: 170px; width: 200px"></span> 80 81 <!-- q --> 82 <span style="top: 180px"><math><mspace width="203.2q"/></math></span> 83 <span style="top: 190px; width: 192px"></span> 84 85 <!-- ch --> 86 <span style="top: 200px"><math><mspace width="20ch"/></math></span> 87 <span style="top: 210px; width: 20ch"></span> 88 89 <!-- cap --> 90 <span style="top: 220px"><math><mspace width="30cap"/></math></span> 91 <span style="top: 230px; width: 30cap"></span> 92 93 <!-- ic --> 94 <span style="top: 240px"><math><mspace width="20ic"/></math></span> 95 <span style="top: 250px; width: 200px"></span> 96 97 <!-- rem --> 98 <span style="top: 260px"><math><mspace width="10rem"/></math></span> 99 <span style="top: 270px; width: 160px"></span> 100 101 <!-- lh --> 102 <span style="top: 280px"><math><mspace width="13lh" style="line-height: 15px;"/></math></span> 103 <span style="top: 290px; width: 195px"></span> 104 105 <!-- rlh --> 106 <span style="top: 300px"><math><mspace width="11rlh"/></math></span> 107 <span style="top: 310px; width: 187px"></span> 108 109 <!-- unitless nonzero values should be ignored --> 110 <span style="top: 320px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span> 111 <span style="top: 330px; width: 10px"></span> 112 </div> 113 114 <div id="green" style="position: absolute; width: 340px; height: 340px;"> 115 <!-- px --> 116 <span style="top: 10px"><math><mspace width="200px"/></math></span> 117 <span style="top: 0px; width: 200px"></span> 118 119 <!-- cm --> 120 <span style="top: 30px"><math><mspace width="5.08cm"/></math></span> 121 <span style="top: 20px; width: 192px"></span> 122 123 <!-- em --> 124 <span title="em" style="top: 50px"><math><mspace width="20em"/></math></span> 125 <span title="em" style="top: 40px; width: 200px"></span> 126 127 <!-- ex --> 128 <span title="ex" style="top: 70px"><math><mspace width="30ex"/></math></span> 129 <span title="ex" style="top: 60px; width: 30ex"></span> 130 131 <!-- in --> 132 <span style="top: 90px"><math><mspace width="2in"/></math></span> 133 <span style="top: 80px; width: 192px"></span> 134 135 <!-- mm --> 136 <span style="top: 110px"><math><mspace width="50.8mm"/></math></span> 137 <span style="top: 100px; width: 192px"></span> 138 139 <!-- pc --> 140 <span style="top: 130px"><math><mspace width="12.5pc"/></math></span> 141 <span style="top: 120px; width: 200px"></span> 142 143 <!-- pt --> 144 <span style="top: 150px"><math><mspace width="150pt"/></math></span> 145 <span style="top: 140px; width: 200px"></span> 146 147 <!-- % --> 148 <span style="top: 170px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span> 149 <span style="top: 160px; width: 200px"></span> 150 151 <!-- q --> 152 <span style="top: 190px"><math><mspace width="203.2q"/></math></span> 153 <span style="top: 180px; width: 192px"></span> 154 155 <!-- ch --> 156 <span style="top: 210px"><math><mspace width="20ch"/></math></span> 157 <span style="top: 200px; width: 20ch"></span> 158 159 <!-- cap --> 160 <span style="top: 230px"><math><mspace width="30cap"/></math></span> 161 <span style="top: 220px; width: 30cap"></span> 162 163 <!-- ic --> 164 <span style="top: 250px"><math><mspace width="20ic"/></math></span> 165 <span style="top: 240px; width: 200px"></span> 166 167 <!-- rem --> 168 <span style="top: 270px"><math><mspace width="10rem"/></math></span> 169 <span style="top: 260px; width: 160px"></span> 170 171 <!-- lh --> 172 <span style="top: 290px"><math><mspace width="13lh" style="line-height: 15px;"/></math></span> 173 <span style="top: 280px; width: 195px"></span> 174 175 <!-- rlh --> 176 <span style="top: 310px"><math><mspace width="11rlh"/></math></span> 177 <span style="top: 300px; width: 187px"></span> 178 179 <!-- unitless nonzero values should be ignored --> 180 <span style="top: 330px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span> 181 <span style="top: 320px; width: 10px"></span> 182 </div> 183 </div> 184 </body> 185 </html>