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