displaystyle-2.html (7041B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>displaystyle</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/#the-displaystyle-and-scriptlevel-attributes"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property"> 9 <meta name="assert" content="Verify interaction between automatic displaystyle and specified displaystyle on descendants."> 10 <style> 11 @font-face { 12 font-family: TestFont; 13 src: url("/fonts/math/largeop-displayoperatorminheight5000.woff"); 14 } 15 math, math * { 16 font-family: TestFont; 17 font-size: 10px; 18 } 19 </style> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script src="/mathml/support/attribute-values.js"></script> 23 <script src="/mathml/support/fonts.js"></script> 24 <script> 25 setup({ explicit_done: true }); 26 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 27 var epsilon = 5; 28 function verify_displaystyle(elementId, displaystyle, description) { 29 var expectedSize = (displaystyle ? 5000 : 1000) * emToPx; 30 var elementSize = document.getElementById(elementId). 31 getBoundingClientRect().height; 32 assert_approx_equals(elementSize, expectedSize, epsilon, description); 33 } 34 35 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 36 37 function runTests() { 38 for (transform in AttributeValueTransforms) { 39 TransformAttributeValues(transform, ["display", "displaystyle"]); 40 test(function() { 41 verify_displaystyle("cell_false", false, "cell with displaystyle false"); 42 verify_displaystyle("cell_true", true, "cell with displaystyle true"); 43 }, `mtable element (${transform})`); 44 test(function() { 45 verify_displaystyle("mfrac_numerator", true, "numerator"); 46 verify_displaystyle("mfrac_denominator", true, "denominator"); 47 }, `mfrac element (${transform})`); 48 test(function() { 49 verify_displaystyle("mroot_base", false, "base"); 50 verify_displaystyle("mroot_index", true, "index"); 51 }, `mroot element (${transform})`); 52 test(function() { 53 verify_displaystyle("msub_base", false, "base"); 54 verify_displaystyle("msub_subscript", true, "subscript"); 55 }, `msub element (${transform})`); 56 test(function() { 57 verify_displaystyle("msup_base", false, "base"); 58 verify_displaystyle("msup_superscript", true, "superscript"); 59 }, `msup element (${transform})`); 60 test(function() { 61 verify_displaystyle("msubsup_base", false, "base"); 62 verify_displaystyle("msubsup_subscript", true, "subscript"); 63 verify_displaystyle("msubsup_superscript", true, "superscript"); 64 }, `msubsup element (${transform})`); 65 test(function() { 66 verify_displaystyle("munder_base", false, "base"); 67 verify_displaystyle("munder_underscript", true, "underscript"); 68 }, `munder element (${transform})`); 69 test(function() { 70 verify_displaystyle("mover_base", false, "base"); 71 verify_displaystyle("mover_overscript", true, "overscript"); 72 }, `mover element (${transform})`); 73 test(function() { 74 verify_displaystyle("munderover_base", false, "base"); 75 verify_displaystyle("munderover_underscript", true, "underscript"); 76 verify_displaystyle("munderover_overscript", true, "overscript"); 77 }, `munderover element (${transform})`); 78 } 79 done(); 80 } 81 </script> 82 </head> 83 <body> 84 <div id="log"></div> 85 <math displaystyle="true"> 86 <mtable> 87 <mtr> 88 <mtd> 89 <mstyle displaystyle="false"> 90 <mo id="cell_false">⫿</mo> 91 </mstyle> 92 </mtd> 93 <mtd> 94 <mstyle displaystyle="true"> 95 <mo id="cell_true">⫿</mo> 96 </mstyle> 97 </mtd> 98 </mtr> 99 </mtable> 100 </math> 101 <math> 102 <mfrac> 103 <mstyle displaystyle="true"> 104 <mo id="mfrac_numerator">⫿</mo> 105 </mstyle> 106 <mstyle displaystyle="true"> 107 <mo id="mfrac_denominator">⫿</mo> 108 </mstyle> 109 </mfrac> 110 </math> 111 <math displaystyle="true"> 112 <mroot> 113 <mstyle displaystyle="false"> 114 <mo id="mroot_base">⫿</mo> 115 </mstyle> 116 <mstyle displaystyle="true"> 117 <mo id="mroot_index">⫿</mo> 118 </mstyle> 119 </mroot> 120 </math> 121 <math displaystyle="true"> 122 <msub> 123 <mstyle displaystyle="false"> 124 <mo id="msub_base">⫿</mo> 125 </mstyle> 126 <mstyle displaystyle="true"> 127 <mo id="msub_subscript">⫿</mo> 128 </mstyle> 129 </msub> 130 </math> 131 <math displaystyle="true"> 132 <msup> 133 <mstyle displaystyle="false"> 134 <mo id="msup_base">⫿</mo> 135 </mstyle> 136 <mstyle displaystyle="true"> 137 <mo id="msup_superscript">⫿</mo> 138 </mstyle> 139 </msup> 140 </math> 141 <math displaystyle="true"> 142 <msubsup> 143 <mstyle displaystyle="false"> 144 <mo id="msubsup_base">⫿</mo> 145 </mstyle> 146 <mstyle displaystyle="true"> 147 <mo id="msubsup_subscript">⫿</mo> 148 </mstyle> 149 <mstyle displaystyle="true"> 150 <mo id="msubsup_superscript">⫿</mo> 151 </mstyle> 152 </msubsup> 153 </math> 154 <math displaystyle="true"> 155 <mmultiscripts> 156 <mstyle displaystyle="false"> 157 <mo id="mmultiscripts_base">⫿</mo> 158 </mstyle> 159 <mstyle displaystyle="true"> 160 <mo id="mmultiscripts_subscript">⫿</mo> 161 </mstyle> 162 <mstyle displaystyle="true"> 163 <mo id="mmultiscripts_superscript">⫿</mo> 164 </mstyle> 165 <mprescripts/> 166 <mstyle displaystyle="true"> 167 <mo id="mmultiscripts_presubscript">⫿</mo> 168 </mstyle> 169 <mstyle displaystyle="true"> 170 <mo id="mmultiscripts_presuperscript">⫿</mo> 171 </mstyle> 172 </mmultiscripts> 173 </math> 174 <math displaystyle="true"> 175 <munder> 176 <mstyle displaystyle="false"> 177 <mo id="munder_base">⫿</mo> 178 </mstyle> 179 <mstyle displaystyle="true"> 180 <mo id="munder_underscript">⫿</mo> 181 </mstyle> 182 </munder> 183 </math> 184 <math displaystyle="true"> 185 <mover> 186 <mstyle displaystyle="false"> 187 <mo id="mover_base">⫿</mo> 188 </mstyle> 189 <mstyle displaystyle="true"> 190 <mo id="mover_overscript">⫿</mo> 191 </mstyle> 192 </mover> 193 </math> 194 <math displaystyle="true"> 195 <munderover> 196 <mstyle displaystyle="false"> 197 <mo id="munderover_base">⫿</mo> 198 </mstyle> 199 <mstyle displaystyle="true"> 200 <mo id="munderover_underscript">⫿</mo> 201 </mstyle> 202 <mstyle displaystyle="true"> 203 <mo id="munderover_overscript">⫿</mo> 204 </mstyle> 205 </munderover> 206 </math> 207 </body> 208 </html>