width-height-001.html (4491B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>width, height, inline-size and block-size</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <meta name="assert" content="Verify that width, height, inline-size and block-size properties set the size of the content box."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <script src="/mathml/support/mathml-fragments.js"></script> 12 <script src="/mathml/support/box-comparison.js"></script> 13 <style> 14 /* Revert style specified in the UA style sheet that changes box size. */ 15 merror { border: 0; } 16 mfrac { padding: 0; } 17 </style> 18 <script> 19 var epsilon = 1; 20 21 setup({ explicit_done: true }); 22 window.addEventListener("load", runTests); 23 24 function runTests() { 25 26 for (tag in MathMLFragments) { 27 if (!FragmentHelper.isValidChildOfMrow(tag)) 28 continue; 29 30 document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>`); 31 let div = document.body.lastElementChild; 32 let element = FragmentHelper.element(div.firstElementChild); 33 FragmentHelper.forceNonEmptyDescendants(element); 34 35 test(function() { 36 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 37 var style = `width: 500px; height: 400px;`; 38 element.setAttribute("style", style); 39 let box = element.getBoundingClientRect(); 40 assert_approx_equals(box.width, 500, epsilon, "width"); 41 assert_approx_equals(box.height, 400, epsilon, "height"); 42 }, `width and height properties on ${tag}`); 43 44 test(function() { 45 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 46 var style = `inline-size: 600px; block-size: 700px;`; 47 element.setAttribute("style", style); 48 let box = element.getBoundingClientRect(); 49 assert_approx_equals(box.width, 600, epsilon, "width"); 50 assert_approx_equals(box.height, 700, epsilon, "height"); 51 }, `inline-size and block-size properties on ${tag}`); 52 53 // Test that if we specify a size smaller than the content, then 54 // it is used too. Note that we skip mtable, which follows CSS 55 // tables rules and behave differently in that case. 56 if (tag != "mtable") { 57 test(function() { 58 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 59 var style = `width: 2px; height: 1px;`; 60 element.setAttribute("style", style); 61 let box = element.getBoundingClientRect(); 62 assert_approx_equals(box.width, 2, epsilon, "width"); 63 assert_approx_equals(box.height, 1, epsilon, "height"); 64 }, `width and height properties on ${tag} (content overflowing)`); 65 } 66 67 div.style = "display: none;"; // Hide the div after measurement. 68 69 document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><div style="display: inline-block"><math><mrow>${MathMLFragments[tag]}</mrow></math></div></div>`); 70 let shrinkWrapDiv = document.body.lastElementChild.firstElementChild; 71 element = FragmentHelper.element(shrinkWrapDiv.firstElementChild); 72 FragmentHelper.forceNonEmptyDescendants(element); 73 74 test(function() { 75 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 76 var style = `width: 300px;`; 77 element.setAttribute("style", style); 78 let refPreferredWidth = 300; 79 80 // In the case of mo, spacing is added around the element so that it is included 81 // in the preferred width calculation, which should be the sum of lspace, rspace and width. 82 if (tag === "mo") { 83 element.setAttribute("lspace", "50px"); 84 element.setAttribute("rspace", "30px"); 85 refPreferredWidth = 380; 86 } 87 88 let box = shrinkWrapDiv.getBoundingClientRect(); 89 assert_approx_equals(box.width, refPreferredWidth, epsilon); 90 }, `width property on ${tag} (preferred width)`); 91 92 div.style = "display: none;"; // Hide the div after measurement. 93 } 94 95 done(); 96 } 97 </script> 98 </head> 99 <body> 100 <div id="log"></div> 101 </body> 102 </html>