legacy-mstyle-attributes.html (6936B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Legacy mstyle attributes</title> 6 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 11 <link rel="help" href="https://w3c.github.io/mathml-core/#string-literal-ms"> 12 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose"> 13 <meta name="assert" content="Legacy mstyle attributes are ignored"> 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script src="/mathml/support/feature-detection.js"></script> 17 <script src="/mathml/support/layout-comparison.js"></script> 18 <script type="text/javascript"> 19 setup({ explicit_done: true }); 20 window.addEventListener("load", runTests); 21 function runTests() 22 { 23 Array.from(document.getElementsByClassName("TestContainer")).forEach(container => { 24 const tag = container.id; 25 test(function() { 26 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 27 const epsilon = 1; 28 const math = container.getElementsByTagName("math"); 29 compareLayout(math[0], math[1], epsilon); 30 }, `Legacy mstyle attributes do not apply to ${tag}`); 31 }); 32 done(); 33 } 34 </script> 35 </head> 36 <body> 37 <div id="log"></div> 38 <!-- Note: In earlier versions of MathML, putting some attributes on the 39 mstyle element was supposed to produce the same rendering as putting them 40 on the all descendants (with some exceptions). In MathML Core, relevant 41 style attributes are implemented as CSS properties and are no longer 42 specific to the mstyle element. The tests below verify that attributes 43 on mstyle that are not mapped to CSS have no effect. 44 --> 45 <p class="TestContainer" id="mspace"> 46 <math> 47 <mstyle width="50px" height="50px" depth="50px"> 48 <mspace style="background: lightblue"></mspace> 49 </mstyle> 50 </math> 51 <math> 52 <mstyle> 53 <mspace style="background: lightblue"></mspace> 54 </mstyle> 55 </math> 56 </p> 57 <p class="TestContainer" id="mfrac"> 58 <math> 59 <mstyle linethickness="50px"> 60 <mfrac> 61 <mn>1</mn> 62 <mn>2</mn> 63 </mfrac> 64 </mstyle> 65 </math> 66 <math> 67 <mstyle> 68 <mfrac> 69 <mn>1</mn> 70 <mn>2</mn> 71 </mfrac> 72 </mstyle> 73 </math> 74 </p> 75 <p class="TestContainer" id="mo"> 76 <math displaystyle="true"> 77 <mstyle lspace="50px" rspace="50px"> 78 <mn>1</mn> 79 <mo>A</mo> 80 <mn>2</mn> 81 </mstyle> 82 <mstyle movablelimits="false" largeop="false"> 83 <munder> 84 <mo>∑</mo> 85 <mn>3</mn> 86 </munder> 87 </mstyle> 88 <!-- Note: accent was a shared attribute name for mover and mo, so 89 make mstyle an ancestor of mo but not of mover. --> 90 <mover> 91 <mn>4</mn> 92 <mstyle accent="false"><mo>⇀</mo></mstyle> 93 </mover> 94 <mstyle stretchy="false" symmetric="false" maxsize="20px"> 95 <mrow> 96 <mo>|</mo> 97 <mspace height="100px"></mspace> 98 </mrow> 99 </mstyle> 100 <mstyle minsize="100px"> 101 <mrow> 102 <mo>|</mo> 103 <mn>4</mn> 104 </mrow> 105 </mstyle> 106 <mstyle form="prefix"> 107 <mrow> 108 <mn>1</mn> 109 <!-- Infix and prefix forms of − do not have the same lspace/rspace 110 values in the operator dictionary --> 111 <mo>−</mo> 112 <mn>2</mn> 113 </mrow> 114 </mstyle> 115 </math> 116 <math displaystyle="true"> 117 <mstyle> 118 <mn>1</mn> 119 <mo>A</mo> 120 <mn>2</mn> 121 </mstyle> 122 <mstyle> 123 <munder> 124 <mo>∑</mo> 125 <mn>3</mn> 126 </munder> 127 </mstyle> 128 <mover> 129 <mn>4</mn> 130 <mstyle><mo>⇀</mo></mstyle> 131 </mover> 132 <mstyle> 133 <mrow> 134 <mo>|</mo> 135 <mspace height="100px"></mspace> 136 </mrow> 137 </mstyle> 138 <mstyle> 139 <mrow> 140 <mo>|</mo> 141 <mn>4</mn> 142 </mrow> 143 </mstyle> 144 <mstyle> 145 <mrow> 146 <mn>1</mn> 147 <mo>−</mo> 148 <mn>2</mn> 149 </mrow> 150 </mstyle> 151 </math> 152 </p> 153 <!-- notation attribute is from MathML3's menclose element --> 154 <p class="TestContainer" id="menclose"> 155 <math> 156 <mstyle notation="box"> 157 <mn>1</mn> 158 </mstyle> 159 </math> 160 <math> 161 <mstyle> 162 <mn>1</mn> 163 </mstyle> 164 </math> 165 </p> 166 <p class="TestContainer" id="ms"> 167 <math> 168 <mstyle lquote="AAAA" rquote="BBBB"> 169 <ms>1</ms> 170 </mstyle> 171 </math> 172 <math> 173 <mstyle> 174 <ms>1</ms> 175 </mstyle> 176 </math> 177 </p> 178 <p class="TestContainer" id="mpadded"> 179 <math> 180 <mstyle width="100px" height="50px" depth="50px" 181 lspace="10px" voffset="15px"> 182 <mpadded style="background: lightblue"> 183 <mspace width="10px" height="10px" style="background: black"></mspace> 184 </mpadded> 185 </mstyle> 186 </math> 187 <math> 188 <mstyle> 189 <mpadded style="background: lightblue"> 190 <mspace width="10px" height="10px" style="background: black"></mspace> 191 </mpadded> 192 </mstyle> 193 </math> 194 </p> 195 <p class="TestContainer" id="mover"> 196 <math> 197 <mstyle accent="true"> 198 <mover> 199 <mn>1</mn> 200 <mn>2</mn> 201 </mover> 202 </mstyle> 203 </math> 204 <math> 205 <mstyle> 206 <mover> 207 <mn>1</mn> 208 <mn>2</mn> 209 </mover> 210 </mstyle> 211 </math> 212 </p> 213 <p class="TestContainer" id="munder"> 214 <math> 215 <mstyle accentunder="true"> 216 <munder> 217 <mn>1</mn> 218 <mn>2</mn> 219 </munder> 220 </mstyle> 221 </math> 222 <math> 223 <mstyle> 224 <munder> 225 <mn>1</mn> 226 <mn>2</mn> 227 </munder> 228 </mstyle> 229 </math> 230 </p> 231 <p class="TestContainer" id="munderover"> 232 <math> 233 <mstyle accent="true"> 234 <munderover> 235 <mn>1</mn> 236 <mn>2</mn> 237 <mn>3</mn> 238 </munderover> 239 </mstyle> 240 <mstyle accentunder="true"> 241 <munderover> 242 <mn>1</mn> 243 <mn>2</mn> 244 <mn>3</mn> 245 </munderover> 246 </mstyle> 247 </math> 248 <math> 249 <mstyle> 250 <munderover> 251 <mn>1</mn> 252 <mn>2</mn> 253 <mn>3</mn> 254 </munderover> 255 </mstyle> 256 <mstyle> 257 <munderover> 258 <mn>1</mn> 259 <mn>2</mn> 260 <mn>3</mn> 261 </munderover> 262 </mstyle> 263 </math> 264 </p> 265 </body> 266 </html>