mpadded-003.html (12007B)
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 mpadded element with voffset and lspace"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script> 11 setup({ explicit_done: true }); 12 window.addEventListener("load", runTests); 13 14 function runTests() { 15 const contentWidth = 10; 16 const contentDepth = 15; 17 const contentHeight = 20; 18 const epsilon = 1; 19 20 test(function() { 21 Array.from(document.getElementsByClassName("shrink-wrap")).forEach(container => { 22 assert_approx_equals(container.getBoundingClientRect().width, contentWidth, epsilon); 23 }); 24 }, "lspace/voffset shifts don't affect mpadded preferred width"); 25 26 function GetShifts(mpadded) { 27 let mpadded_box = mpadded.getBoundingClientRect(); 28 let mspace_box = mpadded.firstElementChild.getBoundingClientRect(); 29 return { lspace: mspace_box.left - mpadded_box.left, 30 voffset: mpadded_box.top - mspace_box.top }; 31 } 32 33 let mpaddeds = document.getElementById("static_tests").getElementsByTagName("mpadded"); 34 test(function() { 35 let baseline = document.getElementById("baseline").getBoundingClientRect().bottom; 36 Array.from(mpaddeds).forEach(e => { 37 let mpadded = e.getBoundingClientRect(); 38 assert_approx_equals(mpadded.width, contentWidth, epsilon); 39 assert_approx_equals(baseline - mpadded.top, contentHeight, epsilon); 40 assert_approx_equals(mpadded.bottom - baseline, contentDepth, epsilon); 41 42 }); 43 }, "lspace/voffset shifts don't affect mpadded size"); 44 45 46 test(function() { 47 let shifts = GetShifts(mpaddeds[0]); 48 assert_approx_equals(shifts.lspace, 5, epsilon, "positive lspace"); 49 assert_approx_equals(shifts.voffset, 0, epsilon); 50 51 shifts = GetShifts(mpaddeds[1]); 52 assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero"); 53 assert_approx_equals(shifts.voffset, 0, epsilon); 54 55 shifts = GetShifts(mpaddeds[2]); 56 assert_approx_equals(shifts.lspace, 0, epsilon, "positive lspace percentage"); 57 assert_approx_equals(shifts.voffset, 0, epsilon); 58 59 shifts = GetShifts(mpaddeds[3]); 60 assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace percentage"); 61 assert_approx_equals(shifts.voffset, 0, epsilon); 62 63 shifts = GetShifts(mpaddeds[4]); 64 assert_approx_equals(shifts.lspace, 0, epsilon); 65 assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset"); 66 67 shifts = GetShifts(mpaddeds[5]); 68 assert_approx_equals(shifts.lspace, 0, epsilon); 69 assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset"); 70 71 shifts = GetShifts(mpaddeds[6]); 72 assert_approx_equals(shifts.lspace, 0, epsilon); 73 assert_approx_equals(shifts.voffset, 0, epsilon, "positive voffset percentage"); 74 75 shifts = GetShifts(mpaddeds[7]); 76 assert_approx_equals(shifts.lspace, 0, epsilon); 77 assert_approx_equals(shifts.voffset, 0, epsilon, "negative voffset percentage"); 78 79 shifts = GetShifts(mpaddeds[8]); 80 assert_approx_equals(shifts.lspace, 5, epsilon); 81 assert_approx_equals(shifts.voffset, 10, epsilon); 82 83 shifts = GetShifts(mpaddeds[9]); 84 assert_approx_equals(shifts.lspace, 5, epsilon); 85 assert_approx_equals(shifts.voffset, -10, epsilon); 86 }, "content is shifted by the specified lspace/voffset"); 87 88 mpaddeds = document.getElementById("static_tests_rtl").getElementsByTagName("mpadded"); 89 test(function() { 90 let shifts = GetShifts(mpaddeds[0]); 91 assert_approx_equals(shifts.lspace, -5, epsilon, "positive lspace"); 92 assert_approx_equals(shifts.voffset, 0, epsilon); 93 94 shifts = GetShifts(mpaddeds[1]); 95 assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero"); 96 assert_approx_equals(shifts.voffset, 0, epsilon); 97 98 shifts = GetShifts(mpaddeds[2]); 99 assert_approx_equals(shifts.lspace, 0, epsilon); 100 assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset"); 101 102 shifts = GetShifts(mpaddeds[3]); 103 assert_approx_equals(shifts.lspace, 0, epsilon); 104 assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset"); 105 106 shifts = GetShifts(mpaddeds[4]); 107 assert_approx_equals(shifts.lspace, -5, epsilon); 108 assert_approx_equals(shifts.voffset, 10, epsilon); 109 110 shifts = GetShifts(mpaddeds[5]); 111 assert_approx_equals(shifts.lspace, -5, epsilon); 112 assert_approx_equals(shifts.voffset, -10, epsilon); 113 }, "content is shifted by the specified lspace/voffset (RTL)"); 114 115 mpaddeds = document.getElementById("dynamic_tests").getElementsByTagName("mpadded"); 116 test(function() { 117 mpaddeds[0].setAttribute("lspace", "5px") 118 let shifts = GetShifts(mpaddeds[0]); 119 assert_approx_equals(shifts.lspace, 5, epsilon, "attach lspace"); 120 assert_approx_equals(shifts.voffset, 0, epsilon); 121 122 mpaddeds[1].setAttribute("voffset", "10px") 123 shifts = GetShifts(mpaddeds[1]); 124 assert_approx_equals(shifts.lspace, 0, epsilon); 125 assert_approx_equals(shifts.voffset, 10, epsilon, "attach voffset"); 126 127 mpaddeds[2].removeAttribute("lspace") 128 shifts = GetShifts(mpaddeds[2]); 129 assert_approx_equals(shifts.lspace, 0, epsilon, "remove lspace"); 130 assert_approx_equals(shifts.voffset, 10, epsilon); 131 132 mpaddeds[3].removeAttribute("voffset") 133 shifts = GetShifts(mpaddeds[3]); 134 assert_approx_equals(shifts.lspace, 5, epsilon); 135 assert_approx_equals(shifts.voffset, 0, epsilon, "remove voffset"); 136 137 mpaddeds[4].setAttribute("lspace", "15px") 138 shifts = GetShifts(mpaddeds[4]); 139 assert_approx_equals(shifts.lspace, 15, epsilon, "modify lspace"); 140 assert_approx_equals(shifts.voffset, 10, epsilon); 141 142 mpaddeds[5].setAttribute("voffset", "-10px") 143 shifts = GetShifts(mpaddeds[5]); 144 assert_approx_equals(shifts.lspace, 5, epsilon); 145 assert_approx_equals(shifts.voffset, -10, epsilon, "modify voffset"); 146 }, "dynamic changes of lspace/voffset"); 147 148 done(); 149 } 150 </script> 151 <style> 152 div.shrink-wrap { 153 background: yellow; 154 display: inline-block; 155 margin-top: 5px; 156 padding-top: 5px; 157 } 158 </style> 159 </head> 160 <body> 161 <div id="log"></div> 162 <div id="static_tests"> 163 <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> 164 <math> 165 <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 166 <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 167 <mpadded lspace="5%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 168 <mpadded lspace="-5%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 169 <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 170 <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 171 <mpadded voffset="10%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 172 <mpadded voffset="-10%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 173 <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 174 <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 175 </math> 176 </div> 177 <div id="static_tests_rtl"> 178 <math dir="rtl"> 179 <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 180 <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 181 <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 182 <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 183 <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 184 <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 185 </math> 186 </div> 187 <div id="dynamic_tests"> 188 <math> 189 <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 190 <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 191 <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 192 <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 193 <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 194 <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 195 </math> 196 </div> 197 <div> 198 <div class="shrink-wrap"> 199 <math> 200 <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 201 </math> 202 </div> 203 <div class="shrink-wrap"> 204 <math> 205 <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 206 </math> 207 </div> 208 <div class="shrink-wrap"> 209 <math> 210 <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 211 </math> 212 </div> 213 <div class="shrink-wrap"> 214 <math> 215 <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 216 </math> 217 </div> 218 <div class="shrink-wrap"> 219 <math> 220 <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 221 </math> 222 </div> 223 <div class="shrink-wrap"> 224 <math> 225 <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> 226 </math> 227 </div> 228 </div> 229 </body> 230 </html>