mpadded-002.html (8669B)
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 nonempty 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 const contentWidth = 100; 21 const contentDepth = 125; 22 const contentHeight = 150; 23 24 test(function() { 25 var none = getBox("none"); 26 assert_equals(none.width, contentWidth, "content width"); 27 assert_approx_equals(getBox("baseline").bottom - none.top, contentHeight, epsilon, "content height"); 28 assert_approx_equals(none.bottom - getBox("baseline").bottom, contentDepth, epsilon, "content height"); 29 }, "mpadded with no attributes"); 30 31 test(function() { 32 for (var i = 0; i <= 2; i++) { 33 var mpadded = getBox("width" + i); 34 assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i); 35 assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height" + i); 36 assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i); 37 } 38 }, "Different widths"); 39 40 test(function() { 41 for (var i = 0; i <= 2; i++) { 42 var mpadded = getBox("height" + i); 43 assert_equals(mpadded.width, contentWidth, "width" + i); 44 assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i); 45 assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i); 46 } 47 }, "Different heights"); 48 49 test(function() { 50 var mpadded = getBox("percentages"); 51 assert_equals(mpadded.width, contentWidth, "width"); 52 assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height"); 53 assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth"); 54 }, "Percentage calculation for width, height and depth"); 55 56 test(function() { 57 for (var i = 0; i <= 2; i++) { 58 var mpadded = getBox("depth" + i); 59 assert_equals(mpadded.width, contentWidth, "width" + i); 60 assert_approx_equals(getBox("baseline2").bottom - mpadded.top, contentHeight, epsilon, "height" + i); 61 assert_approx_equals(mpadded.bottom - getBox("baseline2").bottom, 25*(i+1), epsilon, "depth" + i); 62 } 63 }, "Different depths"); 64 65 test(function() { 66 for (var i = 0; i <= 2; i++) { 67 var mpadded = getBox("mpadded" + i); 68 assert_approx_equals(mpadded.width, 25*(1+i%3), epsilon, "width" + i); 69 assert_approx_equals(getBox("baseline2").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i); 70 assert_approx_equals(mpadded.bottom - getBox("baseline2").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i); 71 } 72 }, "Various combinations of height, depth and width."); 73 74 test(function() { 75 var container = document.getElementById("containerForPreferredWidth"); 76 var mpadded = container.getElementsByTagName("mpadded")[0]; 77 var containerWidth = container.getBoundingClientRect().width; 78 var mpaddedWidth = mpadded.getBoundingClientRect().width; 79 assert_approx_equals(containerWidth, mpaddedWidth, epsilon); 80 }, "Preferred width"); 81 82 // Dynamically set attributes. 83 ["width", "height", "depth"].forEach(function (name, index) { 84 document.getElementById("dynamic-remove").removeAttribute(name); 85 let length = `${50 + index * 10}px`; 86 document.getElementById("dynamic-attach").setAttribute(name, length); 87 document.getElementById("dynamic-modify").setAttribute(name, length); 88 }); 89 let baseline = getBox("baseline3").bottom; 90 91 test(function() { 92 let remove = getBox("dynamic-remove"); 93 assert_approx_equals(remove.width, contentWidth, epsilon); 94 assert_approx_equals(remove.height, contentHeight + contentDepth, epsilon); 95 assert_approx_equals(baseline - remove.top, contentHeight, epsilon); 96 }, "dynamic attributes (remove)"); 97 98 test(function() { 99 let attach = getBox("dynamic-attach"); 100 assert_approx_equals(attach.width, 50, epsilon); 101 assert_approx_equals(attach.height, 60 + 70, epsilon); 102 assert_approx_equals(baseline - attach.top, 60, epsilon); 103 }, "dynamic attributes (attach)"); 104 105 test(function() { 106 let modify = getBox("dynamic-modify"); 107 assert_approx_equals(modify.width, 50, epsilon); 108 assert_approx_equals(modify.height, 60 + 70, epsilon); 109 assert_approx_equals(baseline - modify.top, 60, epsilon); 110 }, "dynamic attributes (modify)"); 111 112 done(); 113 } 114 </script> 115 <style> 116 div.shrink-wrap { 117 background: yellow; 118 display: inline-block; 119 margin-top: 5px; 120 padding-top: 5px; 121 } 122 </style> 123 </head> 124 <body> 125 <div id="log"></div> 126 <p> 127 <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> 128 <math> 129 <mpadded id="none"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 130 <mpadded id="width0" width="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 131 <mpadded id="width1" width="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 132 <mpadded id="width2" width="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 133 <mpadded id="height0" height="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 134 <mpadded id="height1" height="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 135 <mpadded id="height2" height="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 136 <mpadded id="percentages" width="50%" height="33%" depth="10%"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 137 </math> 138 </p> 139 <p> 140 <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> 141 <math> 142 <mpadded id="depth0" depth="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 143 <mpadded id="depth1" depth="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 144 <mpadded id="depth2" depth="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 145 <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 146 <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 147 <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 148 </math> 149 </p> 150 <div> 151 <div id="containerForPreferredWidth" class="shrink-wrap"> 152 <math><mpadded width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded></math> 153 </div> 154 </div> 155 <p> 156 <span id="baseline3" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> 157 <math> 158 <mpadded id="dynamic-attach" style="background: lightgreen"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 159 <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 160 <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> 161 </math> 162 </p> 163 </body> 164 </html>