margin-003.html (4396B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>margin</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <meta name="assert" content="Verify that margin is taken into account on children."> 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/layout-comparison.js"></script> 13 <script> 14 var epsilon = 1; 15 16 setup({ explicit_done: true }); 17 window.addEventListener("load", runTests); 18 19 function runTests() { 20 21 for (tag in MathMLFragments) { 22 if (!FragmentHelper.isValidChildOfMrow(tag) || 23 FragmentHelper.isEmpty(tag) || 24 FragmentHelper.isTokenElement(tag) || 25 tag == "semantics" || 26 tag == "maction" || 27 tag == "mtable") 28 continue; 29 30 test(function() { 31 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 32 33 document.body.insertAdjacentHTML("beforeend", `<hr/><div>\ 34 <div style="display: inline-block; border: 1px dashed blue;"><math>${MathMLFragments[tag]}</math></div><br/>\ 35 <div style="display: inline-block; border: 1px dashed green;"><math>${MathMLFragments[tag]}</math></div>\ 36 </div>`); 37 38 var div = document.body.lastElementChild; 39 var elementShrinkWrapContainer = div.firstElementChild; 40 var element = elementShrinkWrapContainer.firstElementChild.firstElementChild; 41 var elementContainer = div.firstElementChild; 42 var referenceShrinkWrapContainer = div.lastElementChild; 43 var reference = referenceShrinkWrapContainer.firstElementChild.firstElementChild; 44 45 FragmentHelper.forceNonEmptyElement(element); 46 FragmentHelper.forceNonEmptyElement(reference); 47 48 var mspaceWidth = 20, mspaceHeight = 40, mspaceDepth = 30; 49 var marginLeft = 10, marginRight = 15, marginTop = 20, marginBottom = 25; 50 Array.from(element.children).forEach(mrow => { 51 mrow.outerHTML = `<mspace width="${mspaceWidth}px" height="${mspaceHeight}px" depth='${mspaceDepth}px' style='background: blue; margin-left: ${marginLeft}px; margin-right: ${marginRight}px; margin-top: ${marginTop}px; margin-bottom: ${marginBottom}px;'></mspace>`; 52 }); 53 54 Array.from(reference.children).forEach(mrow => { 55 mrow.outerHTML = `<mspace width="${marginLeft+mspaceWidth+marginRight}px" height="${mspaceHeight+marginTop}px" depth='${mspaceDepth+marginBottom}px' style='background: green;'></mspace>`; 56 }); 57 58 // Compare sizes. 59 compareSize(element, reference, epsilon); 60 61 // Compare children positions. 62 var elementBox = element.getBoundingClientRect(); 63 var referenceBox = reference.getBoundingClientRect(); 64 for (var i = 0; i < element.children.length; i++) { 65 var childBox = element.children[i].getBoundingClientRect(); 66 var referenceChildBox = reference.children[i].getBoundingClientRect(); 67 assert_approx_equals(childBox.width + marginLeft + marginRight, referenceChildBox.width, epsilon, `inline size (child ${i})`); 68 assert_approx_equals(childBox.height + marginTop + marginBottom, referenceChildBox.height, epsilon, `block size (child ${i})`); 69 70 assert_approx_equals(childBox.left - marginLeft - elementBox.left, 71 referenceChildBox.left - referenceBox.left, 72 epsilon, 73 `inline position (child ${i})`); 74 assert_approx_equals(childBox.top - marginTop - elementBox.top, 75 referenceChildBox.top - referenceBox.top, 76 epsilon, 77 `block position (child ${i})`); 78 } 79 80 // Compare preferred widths. 81 assert_approx_equals(elementShrinkWrapContainer.offsetWidth, referenceShrinkWrapContainer.offsetWidth, epsilon, "preferred width"); 82 83 }, `Margin properties on the children of ${tag}`); 84 } 85 86 done(); 87 } 88 </script> 89 </head> 90 <body> 91 <div id="log"></div> 92 </body> 93 </html>