mpadded-001.html (5986B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>mpadded</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> 7 <meta name="assert" content="Verify metrics of empty mpadded element for different values of height, depth and width"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script> 11 var epsilon = 1; 12 function getBox(aId) { 13 return document.getElementById(aId).getBoundingClientRect(); 14 } 15 16 setup({ explicit_done: true }); 17 window.addEventListener("load", runTests); 18 19 function runTests() { 20 test(function() { 21 var none = getBox("none"); 22 assert_equals(none.width, 0, "zero width"); 23 assert_approx_equals(getBox("baseline").bottom - none.top, 0, epsilon, "zero depth"); 24 assert_approx_equals(none.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth"); 25 }, "mpadded (no attributes)"); 26 27 test(function() { 28 for (var i = 0; i <= 2; i++) { 29 var mpadded = getBox("width" + i); 30 assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i); 31 assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i); 32 assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); 33 } 34 }, "Different widths"); 35 36 test(function() { 37 for (var i = 0; i <= 2; i++) { 38 var mpadded = getBox("height" + i); 39 assert_equals(mpadded.width, 0, "width" + i); 40 assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i); 41 assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); 42 } 43 }, "Different heights"); 44 45 test(function() { 46 for (var i = 0; i <= 2; i++) { 47 var mpadded = getBox("depth" + i); 48 assert_equals(mpadded.width, 0, "width" + i); 49 assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i); 50 assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i); 51 } 52 }, "Different depths"); 53 54 test(function() { 55 for (var i = 0; i <= 2; i++) { 56 var mpadded = getBox("mpadded" + i); 57 assert_approx_equals(mpadded.width, 25*(1+i%3), epsilon, "width" + i); 58 assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i); 59 assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i); 60 } 61 }, "Various combinations of height, depth and width."); 62 63 test(function() { 64 var container = document.getElementById("containerForPreferredWidth"); 65 var mpadded = container.getElementsByTagName("mpadded")[0]; 66 var containerWidth = container.getBoundingClientRect().width; 67 var mpaddedWidth = mpadded.getBoundingClientRect().width; 68 assert_approx_equals(containerWidth, mpaddedWidth, epsilon); 69 }, "Preferred width"); 70 71 // Dynamically set attributes. 72 ["width", "height", "depth"].forEach(function (name, index) { 73 document.getElementById("dynamic-remove").removeAttribute(name); 74 let length = `${50 + index * 10}px`; 75 document.getElementById("dynamic-attach").setAttribute(name, length); 76 document.getElementById("dynamic-modify").setAttribute(name, length); 77 }); 78 let baseline = getBox("baseline2").bottom; 79 80 test(function() { 81 let remove = getBox("dynamic-remove"); 82 assert_approx_equals(remove.width, 0, epsilon); 83 assert_approx_equals(remove.height, 0, epsilon); 84 assert_approx_equals(remove.top, baseline, epsilon); 85 }, "dynamic attributes (remove)"); 86 87 test(function() { 88 let attach = getBox("dynamic-attach"); 89 assert_approx_equals(attach.width, 50, epsilon); 90 assert_approx_equals(attach.height, 60 + 70, epsilon); 91 assert_approx_equals(baseline - attach.top, 60, epsilon); 92 }, "dynamic attributes (attach)"); 93 94 test(function() { 95 let modify = getBox("dynamic-modify"); 96 assert_approx_equals(modify.width, 50, epsilon); 97 assert_approx_equals(modify.height, 60 + 70, epsilon); 98 assert_approx_equals(baseline - modify.top, 60, epsilon); 99 }, "dynamic attributes (modify)"); 100 101 done(); 102 } 103 </script> 104 <style> 105 div.shrink-wrap { 106 background: yellow; 107 display: inline-block; 108 margin-top: 5px; 109 padding-top: 5px; 110 } 111 </style> 112 </head> 113 <body> 114 <div id="log"></div> 115 <p> 116 <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> 117 <math> 118 <mpadded id="none"/> 119 <mpadded id="width0" width="25px"/> 120 <mpadded id="width1" width="50px"/> 121 <mpadded id="width2" width="75px"/> 122 <mpadded id="height0" height="25px"/> 123 <mpadded id="height1" height="50px"/> 124 <mpadded id="height2" height="75px"/> 125 <mpadded id="depth0" depth="25px"/> 126 <mpadded id="depth1" depth="50px"/> 127 <mpadded id="depth2" depth="75px"/> 128 <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"/> 129 <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"/> 130 <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"/> 131 </math> 132 </p> 133 <div> 134 <div id="containerForPreferredWidth" class="shrink-wrap"> 135 <math><mpadded width="75px" height="25px" depth="50px" style="background: green"/></math> 136 </div> 137 </div> 138 <p> 139 <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> 140 <math> 141 <mpadded id="dynamic-attach" style="background: lightgreen"/> 142 <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"/> 143 <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"/> 144 </math> 145 </p> 146 </body> 147 </html>