margin-001.html (6992B)
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."> 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/box-comparison.js"></script> 12 <script> 13 var epsilon = 1; 14 15 setup({ explicit_done: true }); 16 window.addEventListener("load", runTests); 17 18 function runTests() { 19 test(function() { 20 assert_true(MathMLFeatureDetection.has_mspace()); 21 var s = measureSpaceAround("mrow-margin") 22 assert_approx_equals(s.left, 20, epsilon, "left margin"); 23 assert_approx_equals(s.right, 30, epsilon, "right margin"); 24 assert_approx_equals(s.top, 40, epsilon, "top margin"); 25 assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); 26 var b = document.getElementById("mrow-margin"). 27 getBoundingClientRect(); 28 assert_approx_equals(b.width, 50, epsilon, "element width"); 29 assert_approx_equals(b.height, 50, epsilon, "element height"); 30 }, "Margin properties on mrow"); 31 32 test(function() { 33 assert_true(MathMLFeatureDetection.has_mspace()); 34 assert_true(MathMLFeatureDetection.has_dir()); 35 var s = measureSpaceAround("mrow-margin-rtl") 36 assert_approx_equals(s.left, 20, epsilon, "left margin"); 37 assert_approx_equals(s.right, 30, epsilon, "right margin"); 38 assert_approx_equals(s.top, 40, epsilon, "top margin"); 39 assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); 40 var b = document.getElementById("mrow-margin-rtl"). 41 getBoundingClientRect(); 42 assert_approx_equals(b.width, 50, epsilon, "element width"); 43 assert_approx_equals(b.height, 50, epsilon, "element height"); 44 }, "Margin properties on mrow (rtl)"); 45 46 test(function() { 47 assert_true(MathMLFeatureDetection.has_mspace()); 48 var s = measureSpaceAround("mrow-margin-shorthand") 49 assert_approx_equals(s.left, 20, epsilon, "left margin"); 50 assert_approx_equals(s.right, 20, epsilon, "right margin"); 51 assert_approx_equals(s.top, 20, epsilon, "top margin"); 52 assert_approx_equals(s.bottom, 20, epsilon, "bottom margin"); 53 var b = document.getElementById("mrow-margin-shorthand"). 54 getBoundingClientRect(); 55 assert_approx_equals(b.width, 50, epsilon, "element width"); 56 assert_approx_equals(b.height, 50, epsilon, "element height"); 57 }, "Margin properties on mrow (shorthand)"); 58 59 test(function() { 60 assert_true(MathMLFeatureDetection.has_mspace()); 61 var s = measureSpaceAround("mrow-margin-logical") 62 assert_approx_equals(s.left, 20, epsilon, "left margin"); 63 assert_approx_equals(s.right, 30, epsilon, "right margin"); 64 assert_approx_equals(s.top, 40, epsilon, "top margin"); 65 assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); 66 var b = document.getElementById("mrow-margin-logical"). 67 getBoundingClientRect(); 68 assert_approx_equals(b.width, 50, epsilon, "element width"); 69 assert_approx_equals(b.height, 50, epsilon, "element height"); 70 }, "Margin properties on mrow (logical)"); 71 72 test(function() { 73 assert_true(MathMLFeatureDetection.has_mspace()); 74 assert_true(MathMLFeatureDetection.has_dir()); 75 var s = measureSpaceAround("mrow-margin-logical-rtl") 76 assert_approx_equals(s.left, 30, epsilon, "left margin"); 77 assert_approx_equals(s.right, 20, epsilon, "right margin"); 78 assert_approx_equals(s.top, 40, epsilon, "top margin"); 79 assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); 80 var b = document.getElementById("mrow-margin-logical-rtl"). 81 getBoundingClientRect(); 82 assert_approx_equals(b.width, 50, epsilon, "element width"); 83 assert_approx_equals(b.height, 50, epsilon, "element height"); 84 }, "Margin properties on mrow (logical, rtl)"); 85 86 test(function() { 87 assert_true(MathMLFeatureDetection.has_mspace()); 88 var s = measureSpaceAround("mrow-margin-logical-shorthand") 89 assert_approx_equals(s.left, 20, epsilon, "left margin"); 90 assert_approx_equals(s.right, 20, epsilon, "right margin"); 91 assert_approx_equals(s.top, 30, epsilon, "top margin"); 92 assert_approx_equals(s.bottom, 30, epsilon, "bottom margin"); 93 var b = document.getElementById("mrow-margin-logical-shorthand"). 94 getBoundingClientRect(); 95 assert_approx_equals(b.width, 50, epsilon, "element width"); 96 assert_approx_equals(b.height, 50, epsilon, "element height"); 97 }, "Margin properties on mrow (logical, shorthand)"); 98 99 done(); 100 } 101 </script> 102 </head> 103 <body> 104 <div id="log"></div> 105 <p> 106 <math> 107 <mrow> 108 <mrow id="mrow-margin" 109 style="margin-left: 20px; 110 margin-right: 30px; 111 margin-top: 40px; 112 margin-bottom: 50px;"> 113 <mspace width="50px" height="50px"></mspace> 114 </mrow> 115 </mrow> 116 </math> 117 </p> 118 <p> 119 <math dir="rtl"> 120 <mrow> 121 <mrow id="mrow-margin-rtl" 122 style="margin-left: 20px; 123 margin-right: 30px; 124 margin-top: 40px; 125 margin-bottom: 50px;"> 126 <mspace width="50px" height="50px"></mspace> 127 </mrow> 128 </mrow> 129 </math> 130 </p> 131 <p> 132 <math> 133 <mrow> 134 <mrow id="mrow-margin-shorthand" 135 style="margin: 20px;"> 136 <mspace width="50px" height="50px"></mspace> 137 </mrow> 138 </mrow> 139 </math> 140 </p> 141 <p> 142 <math> 143 <mrow> 144 <mrow id="mrow-margin-logical" 145 style="margin-inline-start: 20px; 146 margin-inline-end: 30px; 147 margin-block-start: 40px; 148 margin-block-end: 50px;"> 149 <mspace width="50px" height="50px"></mspace> 150 </mrow> 151 </mrow> 152 </math> 153 </p> 154 <p> 155 <math dir="rtl"> 156 <mrow> 157 <mrow id="mrow-margin-logical-rtl" 158 style="margin-inline-start: 20px; 159 margin-inline-end: 30px; 160 margin-block-start: 40px; 161 margin-block-end: 50px;"> 162 <mspace width="50px" height="50px"></mspace> 163 </mrow> 164 </mrow> 165 </math> 166 </p> 167 <p> 168 <math> 169 <mrow> 170 <mrow id="mrow-margin-logical-shorthand" 171 style="margin-inline: 20px; 172 margin-block: 30px;"> 173 <mspace width="50px" height="50px"></mspace> 174 </mrow> 175 </mrow> 176 </math> 177 </p> 178 </body> 179 </html>