stretch-along-block-axis-001.html (7183B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Stretching operators along the block axis</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#algorithm-for-stretching-operators-along-the-block-axis"> 8 <meta name="assert" content=""> 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: stretchy; 18 src: url("/fonts/math/stretchy.woff"); 19 } 20 mo { 21 font-family: stretchy; 22 } 23 </style> 24 <script> 25 setup({ explicit_done: true }); 26 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 27 28 function runTests() { 29 30 var epsilon = 2; 31 var emToPx = 25; 32 var element; 33 34 test(function() { 35 element = document.getElementById("horizontal_arrow"); 36 assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "horizontal characters don't stretch vertically"); 37 38 element = document.getElementById("vertical_arrow"); 39 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "vertical characters stretch vertically"); 40 }, `Taking into account stretch axis.`); 41 42 test(function() { 43 element = document.getElementById("non_stretchy_horizontal_arrow"); 44 assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "horizontal characters don't stretch vertically"); 45 46 element = document.getElementById("non_stretchy_vertical_arrow"); 47 assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "vertical characters stretch vertically"); 48 }, `Taking into account stretchy property.`); 49 50 test(function() { 51 // There are only stretchy operators : the maximum of their base sizes 52 // is used as the target size. 53 let tallest_base_size = 2 * emToPx; 54 55 element = document.getElementById("small_vertical"); 56 assert_approx_equals(element.getBoundingClientRect().width, .5 * emToPx, epsilon, "small width"); 57 assert_approx_equals(element.getBoundingClientRect().height, tallest_base_size, epsilon, "height is the max(.5em, 1em, 2em)"); 58 59 element = document.getElementById("medium_vertical"); 60 assert_approx_equals(element.getBoundingClientRect().width, 1 * emToPx, epsilon, "normal width"); 61 assert_approx_equals(element.getBoundingClientRect().height, tallest_base_size, epsilon, "height is the max(.5em, 1em, 2em)"); 62 63 element = document.getElementById("big_vertical"); 64 assert_approx_equals(element.getBoundingClientRect().width, 2 * emToPx, epsilon, "large width"); 65 assert_approx_equals(element.getBoundingClientRect().height, tallest_base_size, epsilon, "height is the max(.5em, 1em, 2em)"); 66 67 }, `Only operators with a stretchy property and block stretch axis.`); 68 69 test(function() { 70 // There are non-stretchy operators : the maximum of their base sizes 71 // is used as the target size. In any case, operators remain at least 72 // as large as their base size. 73 74 element = document.getElementById("smaller_op"); 75 assert_approx_equals(element.getBoundingClientRect().width, .5 * emToPx, epsilon, "small width"); 76 assert_approx_equals(element.getBoundingClientRect().height, 1.5 * emToPx, epsilon, "height is the max(.5em, 1em)"); 77 78 element = document.getElementById("bigger_op"); 79 assert_approx_equals(element.getBoundingClientRect().width, 2 * emToPx, epsilon, "large width"); 80 assert_approx_equals(element.getBoundingClientRect().height, 2 * emToPx, epsilon, "height is the max(1em, 2em)"); 81 82 }, `Operators smaller and larger than non-stretchy siblings.`); 83 84 test(function() { 85 element = document.getElementById("core_operator_1"); 86 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "mrow"); 87 88 element = document.getElementById("core_operator_2"); 89 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "munder"); 90 91 element = document.getElementById("core_operator_3"); 92 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "mover"); 93 94 element = document.getElementById("core_operator_4"); 95 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "mundeover"); 96 97 element = document.getElementById("core_operator_5"); 98 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "complex nesting"); 99 }, `Embellished operators`); 100 101 done(); 102 } 103 </script> 104 </head> 105 <body> 106 <div id="log"></div> 107 <p> 108 <math> 109 <mrow> 110 <mspace width="1em" height="3em" depth="3em" style="background: blue"/> 111 <mo id="horizontal_arrow" stretchy="true">⥚</mo> 112 <mo id="vertical_arrow" stretchy="true">⥜</mo> 113 <mo id="non_stretchy_horizontal_arrow" stretchy="false">⥚</mo> 114 <mo id="non_stretchy_vertical_arrow" stretchy="false">⥜</mo> 115 </mrow> 116 </math> 117 </p> 118 <p> 119 <math> 120 <mrow> 121 <!-- This contains only vertical stretchy operators. --> 122 <mo style="font-size: 50%" id="small_vertical" stretchy="true">⥜</mo> 123 <mo style="font-size: 200%" id="big_vertical" stretchy="true">⥜</mo> 124 <mo style="font-size: 100%" id="medium_vertical" stretchy="true">⥜</mo> 125 </mrow> 126 </math> 127 </p> 128 <p> 129 <math> 130 <mrow> 131 <mspace style="background: blue" width="1em" height=".75em"/> 132 <mo style="font-size: 50%" id="smaller_op" stretchy="true">⥜</mo> 133 <mspace style="background: blue" width="1em" height="1.5em"/> 134 <mo style="font-size: 200%" id="bigger_op" stretchy="true">⥜</mo> 135 <mspace style="background: blue" width="1em" height="1em"/> 136 </mrow> 137 </math> 138 </p> 139 <p> 140 <math> 141 <mrow> 142 <mspace width="1em" height="3em" depth="3em" style="background: blue"/> 143 <mrow><mo id="core_operator_1" stretchy="true">⥜</mo></mrow> 144 <munder> 145 <mo id="core_operator_2" stretchy="true">⥜</mo> 146 <mspace></mspace> 147 </munder> 148 <mover> 149 <mo id="core_operator_3" stretchy="true">⥜</mo> 150 <mspace></mspace> 151 </mover> 152 <munderover> 153 <mo id="core_operator_4" stretchy="true">⥜</mo> 154 <mspace></mspace> 155 <mspace></mspace> 156 </munderover> 157 <mrow> 158 <mspace></mspace> 159 <munderover> 160 <mover> 161 <munder> 162 <mrow> 163 <mo id="core_operator_5" stretchy="true">⥜</mo> 164 </mrow> 165 <mspace></mspace> 166 </munder> 167 <mspace></mspace> 168 </mover> 169 <mspace></mspace> 170 <mspace></mspace> 171 </munderover> 172 </mrow> 173 </mrow> 174 </math> 175 </p> 176 </body> 177 </html>