display-1.html (8976B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>MathML display attribute</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> 9 <meta name="assert" content="Verify that the display attribute on the math element is supported and impacts centering and line breaking with surrounding content."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/mathml/support/feature-detection.js"></script> 13 <script src="/mathml/support/attribute-values.js"></script> 14 <script> 15 function getBox(aId) { 16 return document.getElementById(aId).getBoundingClientRect(); 17 } 18 window.addEventListener("DOMContentLoaded", function() { 19 for (transform in AttributeValueTransforms) { 20 TransformAttributeValues(transform, ["display"]); 21 var content = getBox("content"); 22 23 var before_block = getBox("before_block"); 24 var mspace_block = getBox("mspace_block"); 25 var after_block = getBox("after_block"); 26 test(function() { 27 assert_true(MathMLFeatureDetection.has_mspace()); 28 assert_approx_equals(before_block.left, content.left, 1, 29 "content before must be left aligned"); 30 assert_approx_equals((mspace_block.left + mspace_block.right) / 2, 31 (content.left + content.right) / 2, 32 1, 33 "math must be centered."); 34 assert_approx_equals(after_block.left, content.left, 1, 35 "content after must be left aligned"); 36 assert_less_than_equal(before_block.bottom, mspace_block.top, 37 "new line before math"); 38 assert_less_than_equal(mspace_block.bottom, after_block.top, 39 "new line after math"); 40 }, `Test display math ${transform}`); 41 42 var before_inline = getBox("before_inline"); 43 var mspace_inline = getBox("mspace_inline"); 44 var after_inline = getBox("after_inline"); 45 test(function() { 46 assert_true(MathMLFeatureDetection.has_mspace()); 47 assert_approx_equals((before_inline.top + before_inline.bottom) / 2, 48 (mspace_inline.top + mspace_inline.bottom) / 2, 49 1, 50 "content before must be horizontally aligned with math"); 51 assert_approx_equals((after_inline.top + after_inline.bottom) / 2, 52 (mspace_inline.top + mspace_inline.bottom) / 2, 53 1, 54 "content after must be horizontally aligned with math"); 55 assert_less_than_equal(before_inline.right, mspace_inline.left, 56 "content before must be on the left of math"); 57 assert_less_than_equal(mspace_inline.right, after_inline.left, 58 "content after must be on the right of math"); 59 }, `Test inline math ${transform}`); 60 61 var before_block_and_specified_width = getBox("before_block_and_specified_width"); 62 var mspace_width = getBox("mspace_width"); 63 var after_block_and_specified_width = getBox("after_block_and_specified_width"); 64 test(function() { 65 assert_true(MathMLFeatureDetection.has_mspace()); 66 let math = getBox("math_with_specified_width"); 67 assert_approx_equals(before_block_and_specified_width.left, math.left, 1, 68 "content before must be left aligned"); 69 assert_approx_equals(math.width, 100, 1, 70 "math uses specified width."); 71 assert_approx_equals((mspace_width.left + mspace_width.right) / 2, 72 (math.left + math.right) / 2, 73 1, 74 "math must be centered."); 75 assert_approx_equals(after_block_and_specified_width.left, math.left, 1, 76 "content after must be left aligned"); 77 assert_less_than_equal(before_block_and_specified_width.bottom, mspace_width.top, 78 "new line before math"); 79 assert_less_than_equal(mspace_width.bottom, after_block_and_specified_width.top, 80 "new line after math"); 81 }, `Test width on display=block math ${transform}`); 82 } 83 84 test(function() { 85 assert_true(MathMLFeatureDetection.has_mspace()); 86 document.getElementById("mspace_dynamic_block").parentNode. 87 setAttribute("display", "block"); 88 var before_block = getBox("before_dynamic_block"); 89 var mspace_block = getBox("mspace_dynamic_block"); 90 var after_block = getBox("after_dynamic_block"); 91 92 assert_true(MathMLFeatureDetection.has_mspace()); 93 assert_approx_equals(before_block.left, content.left, 1, 94 "content before must be left aligned"); 95 assert_approx_equals((mspace_block.left + mspace_block.right) / 2, 96 (content.left + content.right) / 2, 97 1, 98 "math must be centered."); 99 assert_approx_equals(after_block.left, content.left, 1, 100 "content after must be left aligned"); 101 assert_less_than_equal(before_block.bottom, mspace_block.top, 102 "new line before math"); 103 assert_less_than_equal(mspace_block.bottom, after_block.top, 104 "new line after math"); 105 }, "Test dynamically setting display=block"); 106 107 test(function() { 108 assert_true(MathMLFeatureDetection.has_mspace()); 109 document.getElementById("mspace_dynamic_inline").parentNode. 110 removeAttribute("display"); 111 var before_inline = getBox("before_dynamic_inline"); 112 var mspace_inline = getBox("mspace_dynamic_inline"); 113 var after_inline = getBox("after_dynamic_inline"); 114 assert_true(MathMLFeatureDetection.has_mspace()); 115 assert_approx_equals((before_inline.top + before_inline.bottom) / 2, 116 (mspace_inline.top + mspace_inline.bottom) / 2, 117 1, 118 "content before must be horizontally aligned with math"); 119 assert_approx_equals((after_inline.top + after_inline.bottom) / 2, 120 (mspace_inline.top + mspace_inline.bottom) / 2, 121 1, 122 "content after must be horizontally aligned with math"); 123 assert_less_than_equal(before_inline.right, mspace_inline.left, 124 "content before must be on the left of math"); 125 assert_less_than_equal(mspace_inline.right, after_inline.left, 126 "content after must be on the right of math"); 127 }, "Test dynamically setting display=inline"); 128 129 done(); 130 }); 131 </script> 132 <style> 133 #content { 134 width: 600px; 135 background: #ccc; 136 } 137 span.square { 138 display: inline-block; 139 width: 50px; 140 height: 50px; 141 background: black; 142 } 143 mspace { 144 background: blue; 145 } 146 </style> 147 </head> 148 <body> 149 <div id="log"></div> 150 <div id="content"> 151 <span id="before_block" class="square"></span> 152 <math display="block"><mspace id="mspace_block" width="50px" height="50px"/></math> 153 <span id="after_block" class="square"></span> 154 <br/> 155 <span id="before_inline" class="square"></span> 156 <math display="inline"><mspace id="mspace_inline" width="50px" height="50px"/></math> 157 <span id="after_inline" class="square"></span> 158 <br/> 159 <span id="before_block_and_specified_width" class="square"></span> 160 <math display="block" id="math_with_specified_width" style="background: pink; width:100px"><mspace id="mspace_width" width="50px" height="50px"/></math> 161 <span id="after_block_and_specified_width" class="square"></span> 162 <br/> 163 <div> 164 <span id="before_dynamic_block" class="square"></span> 165 <math><mspace id="mspace_dynamic_block" width="50px" height="50px"/></math> 166 <span id="after_dynamic_block" class="square"></span> 167 </div> 168 <div> 169 <span id="before_dynamic_inline" class="square"></span> 170 <math display="block"><mspace id="mspace_dynamic_inline" width="50px" height="50px"/></math> 171 <span id="after_dynamic_inline" class="square"></span> 172 </div> 173 </div> 174 </body> 175 </html>