mo-stretch-properties-dynamic-001.html (5849B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Dynamic stretch properties</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 stretchy, symmetric, largeop, minsize and maxsize are updated dynamically."> 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"); 19 } 20 mo { 21 font-family: operators; 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 = 1; 31 var emToPx = 25; 32 var element; 33 34 test(function() { 35 element = document.getElementById("minsize_attach"); 36 element.setAttribute("minsize", "4em"); 37 assert_approx_equals(element.getBoundingClientRect().height, 4 * emToPx, epsilon, "attach"); 38 39 element = document.getElementById("minsize_modify"); 40 element.setAttribute("minsize", "5em"); 41 assert_approx_equals(element.getBoundingClientRect().height, 5 * emToPx, epsilon, "modify"); 42 43 element = document.getElementById("minsize_remove"); 44 element.removeAttribute("minsize"); 45 const unstretched_size = 1 * emToPx; 46 assert_approx_equals(element.getBoundingClientRect().height, unstretched_size, epsilon, "remove"); 47 }, `minsize`); 48 49 test(function() { 50 element = document.getElementById("maxsize_attach"); 51 element.setAttribute("maxsize", "4em"); 52 assert_approx_equals(element.getBoundingClientRect().height, 4 * emToPx, epsilon, "attach"); 53 54 element = document.getElementById("maxsize_modify"); 55 element.setAttribute("maxsize", "5em"); 56 assert_approx_equals(element.getBoundingClientRect().height, 5 * emToPx, epsilon, "modify"); 57 58 element = document.getElementById("maxsize_remove"); 59 element.removeAttribute("maxsize"); 60 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "remove"); 61 }, `maxsize`); 62 63 test(function() { 64 element = document.getElementById("largeop_set_true"); 65 element.setAttribute("largeop", "true"); 66 assert_approx_equals(element.getBoundingClientRect().height, 2 * emToPx, epsilon, "set true"); 67 68 element = document.getElementById("largeop_set_false"); 69 element.setAttribute("largeop", "false"); 70 assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "set false"); 71 }, `largeop`); 72 73 test(function() { 74 element = document.getElementById("symmetric_set_true"); 75 element.setAttribute("symmetric", "true"); 76 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "set true"); 77 78 element = document.getElementById("symmetric_set_false"); 79 element.setAttribute("symmetric", "false"); 80 assert_approx_equals(element.getBoundingClientRect().height, 3 * emToPx, epsilon, "set false"); 81 }, `symmetric`); 82 83 test(function() { 84 element = document.getElementById("stretchy_set_true"); 85 element.setAttribute("stretchy", "true"); 86 assert_approx_equals(element.getBoundingClientRect().height, 3 * emToPx, epsilon, "set true"); 87 88 element = document.getElementById("stretchy_set_false"); 89 element.setAttribute("stretchy", "false"); 90 assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "set false"); 91 }, `stretchy`); 92 93 done(); 94 } 95 </script> 96 </head> 97 <body> 98 <div id="log"></div> 99 <p> 100 <math> 101 <mrow> 102 <mspace width="1em" height="1em" style="background: blue"/> 103 <mo id="minsize_attach" stretchy="true" symmetric="false">⥯</mo> 104 <mo id="minsize_modify" minsize="3em" stretchy="true" symmetric="false">⥯</mo> 105 <mo id="minsize_remove" minsize="2em" stretchy="true" symmetric="false">⥯</mo> 106 <mn><!-- not space like --></mn> 107 </mrow> 108 </math> 109 </p> 110 <p> 111 <math> 112 <mrow> 113 <mspace width="1em" height="6em" style="background: blue"/> 114 <mo id="maxsize_attach" stretchy="true" symmetric="false">⥯</mo> 115 <mo id="maxsize_modify" maxsize="3em" stretchy="true" symmetric="false">⥯</mo> 116 <mo id="maxsize_remove" maxsize="2em" stretchy="true" symmetric="false">⥯</mo> 117 <mn><!-- not space like --></mn> 118 </mrow> 119 </math> 120 </p> 121 <p> 122 <math displaystyle="true"> 123 <mspace width="1em" height="1em" style="background: blue"/> 124 <mrow> 125 <mo id="largeop_set_true" largeop="false" stretchy="false">⥯</mo> 126 <mn><!-- not space like --></mn> 127 </mrow> 128 <mrow> 129 <mo id="largeop_set_false" largeop="true" stretchy="false">⥯</mo> 130 <mn><!-- not space like --></mn> 131 </mrow> 132 </math> 133 </p> 134 <p> 135 <math> 136 <mrow> 137 <mspace width="1em" height="3em" style="background: blue"/> 138 <mo id="symmetric_set_true" symmetric="false" stretchy="true">⥯</mo> 139 <mo id="symmetric_set_false" symmetric="true" stretchy="true">⥯</mo> 140 <mn><!-- not space like --></mn> 141 </mrow> 142 </math> 143 </p> 144 <p> 145 <math> 146 <mrow> 147 <mspace width="1em" height="3em" style="background: blue"/> 148 <mo id="stretchy_set_true" symmetric="false" stretchy="false">⥯</mo> 149 <mo id="stretchy_set_false" symmetric="false" stretchy="true">⥯</mo> 150 <mn><!-- not space like --></mn> 151 </mrow> 152 </math> 153 </p> 154 </body> 155 </html>