mo-minsize-maxsize-001.html (6769B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Edge cases for minsize and maxsize</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#dictionary-based-attributes"> 8 <meta name="assert" content="Verify edge cases for minsize and maxsize ."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/mathml/support/fonts.js"></script> 12 <style> 13 math { 14 font: 25px/1 Ahem; 15 } 16 @font-face { 17 font-family: operators; 18 src: url("/fonts/math/operators.woff"); /* AxisHeight == 0 */ 19 } 20 mo { 21 font-family: operators; 22 } 23 @font-face { 24 font-family: stretchy; 25 src: url("/fonts/math/stretchy.woff"); 26 } 27 </style> 28 <script> 29 setup({ explicit_done: true }); 30 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 31 32 function runTests() { 33 var epsilon = 1; 34 var emToPx = 25; 35 test(function() { 36 assert_approx_equals(document.getElementById("negative_minsize").getBoundingClientRect().height, 5 * emToPx, epsilon); 37 }, `minsize < 0 is treated as 0`); 38 39 test(function() { 40 assert_approx_equals(document.getElementById("maxsize_less_than_minsize").getBoundingClientRect().height, 7 * emToPx, epsilon); 41 }, `maxsize < minsize is treated as maxsize = minsize`); 42 43 test(function() { 44 assert_less_than(document.getElementById("minsize_less_than_negative_maxsize").getBoundingClientRect().height, 2 * emToPx); 45 }, `minsize < maxsize < 0 is treated as maxsize = minsize = 0`); 46 47 test(function() { 48 assert_approx_equals(document.getElementById("zero_target_size_with_minsize").getBoundingClientRect().height, 2 * emToPx, epsilon); 49 assert_approx_equals(document.getElementById("zero_target_size_with_minsize").getBoundingClientRect().bottom - document.getElementById("zero_target_size_with_minsize_math_axis").getBoundingClientRect().bottom, emToPx, epsilon); 50 }, `target size = 0 is treated as Tascent = Tdescent = minsize/2`); 51 52 test(function() { 53 assert_approx_equals(document.getElementById("percent_minsize").getBoundingClientRect().height, 12 * emToPx, epsilon, "percent minsize"); 54 assert_approx_equals(document.getElementById("percent_maxsize").getBoundingClientRect().height, 3 * emToPx, epsilon, "percent maxsize"); 55 }, `minsize/maxsize percentages are relative to the unstretched size`); 56 57 test(function() { 58 // - The unstretched size is a lower bound for the stretched size, so 59 // specifying a lower minsize has no effect. This test only verifies 60 // that the default minsize is at most 100% the unstretched size. 61 const unstretched_size = 1 * emToPx; 62 assert_approx_equals(document.getElementById("default_minsize").getBoundingClientRect().height, unstretched_size, epsilon, "default minsize is 100%"); 63 64 // Previous version of MathML Core were defining minsize as 1em rather 65 // than 100% the unstretched size. So try the same test with a .5em 66 // unstretched size. 67 const unstretched_size_2 = .5 * emToPx; 68 assert_approx_equals(document.getElementById("default_minsize_2").getBoundingClientRect().height, unstretched_size_2, epsilon, "default minsize is not 1em"); 69 70 // - The target size is an upper bound for the stretched size, so 71 // specifying a larger maxsize has no effect. This test only 72 // verifies that the default maxsize is at least 300 times the 73 // unstretched size. 74 assert_approx_equals(document.getElementById("default_maxsize").getBoundingClientRect().height, 300 * emToPx, epsilon, "default maxsize is infinity"); 75 }, `default minsize/maxsize values`); 76 77 done(); 78 } 79 </script> 80 </head> 81 <body> 82 <div id="log"></div> 83 <p> 84 <math> 85 <mrow> 86 <mspace width="1em" height="5em" style="background: blue"/> 87 <mo id="negative_minsize" minsize="-10em" stretchy="true" symmetric="false">⥯</mo> 88 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 89 </mrow> 90 </math> 91 </p> 92 <p> 93 <math> 94 <mrow> 95 <mspace width="1em" height="5em" style="background: blue"/> 96 <mo id="maxsize_less_than_minsize" minsize="7em" maxsize="2em" stretchy="true" symmetric="false">⥯</mo> 97 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 98 </mrow> 99 </math> 100 </p> 101 <p> 102 <math> 103 <mrow> 104 <mspace width="1em" height="5em" style="background: blue"/> 105 <mo id="minsize_less_than_negative_maxsize" minsize="-2em" maxsize="-1em" stretchy="true" symmetric="false">⥯</mo> 106 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 107 </mrow> 108 </math> 109 </p> 110 <p> 111 <math> 112 <mrow> 113 <mspace id="zero_target_size_with_minsize_math_axis" width="1em" height="0em" style="background: blue"/> 114 <mo id="zero_target_size_with_minsize" minsize="2em" stretchy="true" symmetric="true">⥯</mo> 115 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 116 </mrow> 117 </math> 118 </p> 119 <p> 120 <math> 121 <mrow> 122 <mspace width="1em" height="6em" style="background: blue"/> 123 <mo id="percent_minsize" minsize="1200%" stretchy="true" symmetric="false">⥯</mo> 124 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 125 </mrow> 126 </math> 127 </p> 128 <p> 129 <math> 130 <mrow> 131 <mspace width="1em" height="6em" style="background: blue"/> 132 <mo id="percent_maxsize" maxsize="300%" stretchy="true" symmetric="false">⥯</mo> 133 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 134 </mrow> 135 </math> 136 </p> 137 <p> 138 <math> 139 <mrow> 140 <mspace width="1em" height=".5em" style="background: blue"/> 141 <mo id="default_minsize" stretchy="true" symmetric="false">⥯</mo> 142 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 143 </mrow> 144 </math> 145 </p> 146 <p> 147 <math> 148 <mrow> 149 <mspace width="1em" height=".25em" style="background: blue"/> 150 <mo style="font-family: stretchy" id="default_minsize_2" stretchy="true" symmetric="false">↨</mo> 151 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 152 </mrow> 153 </math> 154 </p> 155 <p> 156 <math> 157 <mrow> 158 <mspace width="1em" height="300em" style="background: blue"/> 159 <mo id="default_maxsize" stretchy="true" symmetric="false">⥯</mo> 160 <mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded> 161 </mrow> 162 </math> 163 </p> 164 </body> 165 </html>